/* Shared Body OS entry surface for all web views. */
:root{--os-bg:#07111f;--os-surface:#0d1d2b;--os-surface-2:#122638;--os-ink:#edf5ee;--os-muted:#83a9b6;--os-line:rgba(127,180,190,.22);--os-lime:#c7f36b;--os-cyan:#73e7ed;--os-orange:#ffb86b}
*{box-sizing:border-box}
body.os-page{background-color:var(--os-bg)!important;background-image:radial-gradient(circle at 92% 0%,rgba(115,231,237,.10),transparent 26%),radial-gradient(circle at 8% 36%,rgba(199,243,107,.045),transparent 22%),linear-gradient(180deg,#06111e 0,#07111f 420px)!important}
.os-page a{color:var(--os-cyan)}
.os-page button,.os-page a{transition:color .18s,border-color .18s,background .18s,transform .18s,box-shadow .18s}
.os-page button:focus-visible,.os-page a:focus-visible,.os-page input:focus-visible,.os-page textarea:focus-visible{outline:2px solid var(--os-lime);outline-offset:3px}
.os-page .panel,.os-page .kpi,.os-page .ai-panel{box-shadow:0 12px 34px rgba(0,0,0,.13)}
.os-page .panel:hover,.os-page .kpi:hover{border-color:rgba(115,231,237,.34)}
.os-page .sec-title{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--os-muted);margin-top:30px}
.os-page .grid2,.os-page .grid3{align-items:start}
.os-page .grid2>.panel,.os-page .grid3>.panel{height:auto;min-height:0}
.os-page .chart-box.is-empty{height:112px!important}
.os-page .panel:has(.chart-box.is-empty) .ph-sub{margin-bottom:8px}
.os-page .panel:has(.chart-box.is-empty) .empty{font-size:12px;line-height:1.45;color:#7296a3}
.os-page .kpi{transition:transform .18s,border-color .18s,box-shadow .18s}
.os-page .kpi:hover{transform:translateY(-2px);box-shadow:0 14px 35px rgba(0,0,0,.22)}
.os-page .top-right .conn:hover{color:var(--os-ink);border-color:rgba(199,243,107,.45)}
.section-nav{position:sticky;top:10px;z-index:20;display:flex;align-items:center;gap:6px;overflow:auto;padding:6px;margin:0 0 23px;background:rgba(7,17,31,.84);border:1px solid rgba(127,180,190,.22);border-radius:10px;backdrop-filter:blur(14px);box-shadow:0 9px 24px rgba(0,0,0,.16)}
.section-nav:before{content:"JUMP TO";padding:0 10px;color:#5f8591;font:700 9px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.15em;white-space:nowrap}
.section-nav button{min-height:34px;border:1px solid transparent;border-radius:6px;padding:7px 12px;background:transparent;color:#769aa5;font:700 10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;white-space:nowrap;cursor:pointer}
.section-nav button:hover,.section-nav button.active{color:#07111f;background:var(--os-lime);border-color:var(--os-lime);box-shadow:0 0 18px rgba(199,243,107,.16)}
.zone-marker{display:flex;align-items:center;gap:12px;margin:34px 0 12px;color:var(--os-ink);font-size:17px;font-weight:800;letter-spacing:-.02em}
.zone-marker:after{content:"";height:1px;flex:1;background:linear-gradient(90deg,var(--os-line),transparent)}
.zone-marker small{color:var(--os-muted);font-size:11px;font-weight:400;letter-spacing:0}
.advanced-drawer{margin-top:30px;border:1px solid rgba(127,180,190,.24);border-radius:16px;background:rgba(10,27,42,.52);overflow:hidden}
.advanced-drawer>summary{display:flex;align-items:center;gap:10px;min-height:58px;padding:0 18px;cursor:pointer;color:var(--os-ink);font-size:15px;font-weight:750;list-style:none}
.advanced-drawer>summary::-webkit-details-marker{display:none}
.advanced-drawer>summary:before{content:"+";display:grid;place-items:center;width:24px;height:24px;border:1px solid var(--os-line);border-radius:50%;color:var(--os-lime);font-size:18px;font-weight:400}
.advanced-drawer[open]>summary:before{content:"−"}
.advanced-drawer>summary small{color:var(--os-muted);font-size:11px;font-weight:400}
.advanced-drawer[open]>summary{border-bottom:1px solid var(--os-line);background:rgba(18,38,56,.5)}
.advanced-drawer>.detail-inner{padding:0 18px 18px}
.advanced-drawer .zone-marker{margin-top:22px}
.os-page .back,.os-page .tabs,.os-page .status,.os-page .panel{border-color:var(--os-line)}
.os-page .back{background:rgba(13,29,43,.78)}
.os-page .tabs{background:rgba(13,29,43,.78)}
.os-page .tabs button.active{background:var(--os-lime);color:#07111f}
.os-page .btn{background:var(--os-lime);color:#07111f;box-shadow:0 8px 24px rgba(199,243,107,.16)}
.os-page .btn:hover{transform:translateY(-1px);filter:brightness(1.04)}
.os-page .btn.ghost{background:var(--os-surface-2);color:var(--os-ink);box-shadow:none}
.os-page input,.os-page textarea{border-color:var(--os-line)}
.os-page input:focus,.os-page textarea:focus{border-color:var(--os-cyan);box-shadow:0 0 0 3px rgba(115,231,237,.12)}
@media(max-width:720px){.section-nav{top:4px;margin-bottom:17px}.section-nav:before{display:none}.zone-marker{font-size:15px;margin-top:25px}}
@media(prefers-reduced-motion:reduce){.os-page *,.os-page *:before,.os-page *:after{scroll-behavior:auto!important;transition-duration:0!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}
