/* Underground Support — Futuristic 0.3.3 / purely visual layer */
:root{color-scheme:dark;--ink:#e7f5ff;--muted:#87a3c3;--blue:#008dff;--ice:#48caff;--line:rgba(39,133,231,.28);--panel:#081423;--panel2:#0a1c30;--panel3:#0c2137;--max:1760px}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:26px}
body{margin:0;min-height:100vh;color:var(--ink);font:15px/1.52 system-ui,-apple-system,'Segoe UI',sans-serif;background:#020711;background-image:radial-gradient(ellipse at 73% 2%,rgba(0,104,240,.16),transparent 45%),radial-gradient(ellipse at 4% 65%,rgba(0,87,180,.10),transparent 45%);overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(66,141,215,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(66,141,215,.025) 1px,transparent 1px);background-size:35px 35px}
button,input,select{font:inherit}
button{cursor:pointer;background:linear-gradient(180deg,#1268d3,#06448f);color:#eaf6ff;border:1px solid #2489e8;border-radius:9px;min-height:41px;padding:10px 15px;margin:3px;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 2px 12px rgba(0,75,170,.13);font-weight:650;transition:background .15s,border-color .15s,transform .15s,box-shadow .15s}
button:hover:not(:disabled){background:linear-gradient(180deg,#1c8dff,#0860be);border-color:#69cdff;box-shadow:0 0 0 1px rgba(58,172,255,.32),0 4px 20px rgba(0,104,231,.18)}
button:active:not(:disabled){transform:translateY(1px)}
button:disabled{opacity:.42;cursor:not-allowed}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid #66d8ff;outline-offset:3px}
input,select{color:#eef7ff;background:#08182c;border:1px solid #315176;border-radius:8px;min-height:42px;padding:10px 13px;margin:4px;box-shadow:inset 0 1px 4px rgba(0,0,0,.25)}
input:hover,select:hover{border-color:#4481c1}input:focus,select:focus{border-color:#20acff;outline:none;box-shadow:0 0 0 2px rgba(20,139,255,.16)}
input::placeholder{color:#7190ac}
a{color:#66c5ff}
.appShell{max-width:1920px;margin:auto;display:grid;grid-template-columns:224px minmax(0,1fr);min-height:100vh}
.sideRail{position:sticky;top:0;height:100vh;padding:22px 15px;background:linear-gradient(180deg,rgba(7,24,45,.98),rgba(2,11,25,.99));border-right:1px solid #134576;box-shadow:12px 0 42px rgba(0,0,0,.2);display:flex;flex-direction:column;gap:18px;z-index:3}
.railBrand{display:flex;align-items:center;gap:8px;text-decoration:none;color:#e9f7ff;font-size:15px;letter-spacing:.07em;font-weight:900;line-height:1.05;text-shadow:0 0 14px rgba(0,157,255,.15)}
.railBrand img{width:65px;height:65px;object-fit:contain;filter:drop-shadow(0 0 8px rgba(0,133,255,.4))}
.railBrand em{font-style:italic;display:block;font-size:16px;color:#43bfff;letter-spacing:.22em}
.railMeta,.railFooter{font-size:10px;letter-spacing:.12em;color:#6893b9;line-height:1.6}
.railMeta{padding:12px 5px;border-top:1px solid rgba(48,130,213,.23);border-bottom:1px solid rgba(48,130,213,.23)}
.signalLed{display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:100%;background:#3ad0ff;box-shadow:0 0 12px #27b8ff}
.railNav{display:flex;flex-direction:column;gap:8px}
.railLink{display:flex;align-items:center;gap:12px;padding:12px 11px;border-radius:9px;text-decoration:none;color:#9dbbd6;border:1px solid transparent;font-size:14px;font-weight:600}
.railLink:hover,.railLink.active{background:linear-gradient(90deg,rgba(0,127,240,.22),rgba(0,104,200,.06));border-color:rgba(58,162,255,.38);color:#f1fbff;box-shadow:inset 3px 0 #00a0ff}
.navGlyph{font-size:21px;color:#41bcff;line-height:1;width:22px;text-align:center}
#ownerNav{display:none}
.railFooter{margin-top:auto;padding-top:16px;border-top:1px solid rgba(48,130,213,.25)}
.railFooter strong{display:block;font-size:11px;color:#79c5ff;letter-spacing:.11em;margin-bottom:6px}
.workspace{min-width:0}
.topBar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 25px;background:rgba(3,12,26,.82);border-bottom:1px solid #0d3966;color:#799cbc;font-size:11px;letter-spacing:.15em;font-weight:700}
.topBar .right{color:#40c1ff}
.workspace main{max-width:var(--max);margin:0 auto;padding:24px clamp(12px,2.25vw,38px) 45px}
.heroPanel{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;min-height:218px;border:1px solid #2167a4;border-radius:15px;margin-bottom:18px;padding:22px 26px;background:linear-gradient(90deg,rgba(4,16,35,.96) 0%,rgba(6,26,51,.86) 58%,rgba(3,19,39,.8) 100%),url('underground-blue-ambient.jpg') center/cover;box-shadow:0 11px 40px rgba(0,0,0,.35),inset 0 0 45px rgba(3,86,185,.17)}
.heroPanel:before{content:"";position:absolute;inset:0;border-top:2px solid rgba(48,188,255,.55);pointer-events:none}
.heroPanel:after{content:"";position:absolute;width:430px;height:430px;right:0;top:-150px;background:radial-gradient(circle,rgba(24,130,255,.18),transparent 64%);pointer-events:none}
.heroCopy{position:relative;z-index:2;min-width:0}
.eyebrow,.sectionEyebrow{display:block;font-size:10px;letter-spacing:.22em;color:#58caff;font-weight:900;text-transform:uppercase}
.heroPanel h1{margin:8px 0 5px;font-weight:1000;line-height:.99;font-size:clamp(27px,3.1vw,49px);letter-spacing:.035em;color:#fff;text-shadow:0 2px 3px #000,0 0 30px rgba(25,117,255,.2)}
.heroPanel h1 span{display:block;color:#56c7ff;font-style:italic;letter-spacing:.16em;font-size:.80em;text-shadow:0 0 19px rgba(39,139,255,.55)}
.heroCopy p{margin:14px 0 0;color:#92b5d5;font-size:13px}
.heroRule{width:80px;height:3px;background:linear-gradient(90deg,#04a0ff,transparent);margin-top:19px}
.heroArt{position:relative;z-index:1;width:clamp(220px,26vw,390px);height:198px;object-fit:contain;filter:drop-shadow(0 0 12px rgba(13,120,255,.13));flex-shrink:0}
.panel{background:linear-gradient(145deg,rgba(11,30,52,.97),rgba(6,18,36,.98));border:1px solid #1c527f;border-radius:14px;padding:21px;margin:15px 0;box-shadow:inset 0 1px rgba(121,196,255,.07),0 13px 34px rgba(0,0,0,.18)}
.panel h2{font-size:20px;line-height:1.3;margin:0 0 14px;letter-spacing:.016em;text-shadow:0 0 20px rgba(22,119,225,.13)}
.panel h2:before{content:"▰";color:#39beff;font-size:15px;margin-right:10px;vertical-align:2px;text-shadow:0 0 13px #077ccf}
.panel h3{font-size:17px;margin:0 0 12px}
.panel p{color:#b8cde1}
#session{padding:21px}
.sessionHeader{display:flex;justify-content:space-between;align-items:center;gap:15px;flex-wrap:wrap;margin-bottom:15px}
.sessionHeader h2{margin:3px 0 0}
.panelTag{font-size:10px;font-weight:850;color:#66caff;letter-spacing:.13em;padding:7px 10px;border:1px solid #2375b0;background:#082741;border-radius:5px}
.sessionConnect{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#061525;border:1px solid #163e63;border-radius:10px;padding:11px 14px}
.sessionConnect label{font-size:11px;color:#87b0d0;letter-spacing:.12em;font-weight:800;text-transform:uppercase;margin-right:8px}
#code{width:164px;max-width:100%;letter-spacing:.12em;font-weight:750;font-variant-numeric:tabular-nums;text-align:center}
#end{background:linear-gradient(180deg,#243448,#172638);border-color:#3e5671}
#status{padding:9px 13px;background:#071b2a;border:1px solid #164468;border-radius:8px;display:flex;align-items:center;gap:10px;margin:12px 0 17px!important;font-size:13px;color:#b1d8f9!important}
#status:before{content:"";width:8px;height:8px;border-radius:100%;flex:none;background:#3ebdff;box-shadow:0 0 10px #0e91fc}
.supportLayout{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(300px,.88fr);gap:16px;align-items:start}
.videoColumn{min-width:0;background:linear-gradient(160deg,#061324,#08182a);border:1px solid #1d5689;padding:13px;border-radius:12px}
.moduleTitle{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px;color:#edf8ff;font-size:12px;letter-spacing:.11em;font-weight:900}
.moduleTitle small{font-size:10px;color:#61bff9;white-space:nowrap;letter-spacing:.09em}
#viewer{width:100%;aspect-ratio:16/9;background:radial-gradient(ellipse at center,#0b1932,#01050c 70%);border:1px solid #2c7dbc;border-radius:10px;position:relative;overflow:hidden;box-shadow:0 0 0 4px rgba(6,72,134,.13),inset 0 0 45px rgba(0,0,0,.6)}
#viewer video{display:block;width:100%;height:100%;object-fit:contain}
#viewer canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;pointer-events:none}
#viewer.pointer-on{cursor:crosshair}
#localPointer{position:absolute;width:30px;height:30px;border:3px solid #ffd43b;border-radius:50%;box-shadow:0 0 0 2px #101827;transform:translate(-50%,-50%);pointer-events:none;display:none}
#videoControls,#pointerTools{display:flex;gap:5px;align-items:center;flex-wrap:wrap;margin-top:12px}
#pointerTools{margin-top:6px}
#pointerTools button.active{background:linear-gradient(180deg,#f9bd2a,#d58a0a);color:#07101d;border-color:#ffd86b;font-weight:800}
#pointerTools small{flex-basis:100%;line-height:1.5;font-size:11px;margin-top:5px}
#actionFeedback{background:#071a2e!important;border:1px solid #124c7b!important;color:#99ceff!important;border-radius:7px!important;font-size:12px;margin:12px 0 0!important}
.chatColumn{border:1px solid #1e6b9d;border-radius:12px;padding:16px;background:linear-gradient(160deg,#0a2239,#061526);position:sticky;top:16px;min-width:0;box-shadow:inset 0 1px rgba(113,212,255,.08)}
.chatColumn h3:before{content:"◉";color:#36c0ff;font-size:16px;margin-right:8px}
.chatColumn p{margin:4px 0 15px}
.chatColumn input{display:block;width:100%;margin:7px 0}
.chatColumn button{width:100%;margin:5px 0}
.chatColumn label{font-size:12px;font-weight:700;color:#c3def4}
.chatLog{height:184px;max-height:310px;overflow-y:auto;background:#05111f;border:1px solid #163b63;border-radius:8px;padding:11px;margin-bottom:15px}
.chatEntry{border-bottom:1px solid #153452;padding:9px 3px;word-break:break-word;color:#e4f4ff;font-size:13px}.chatEntry small{display:block;color:#6cb7e6;font-size:11px;margin-bottom:4px}
#sendInstruction{background:linear-gradient(180deg,#1283f2,#0756b1)}
#chatActions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}#chatActions button{min-width:0;font-size:12px}
summary{color:#8dd5ff;font-weight:700;cursor:pointer;padding:10px 3px}
details{margin-top:12px;border-top:1px solid #1d476e;padding-top:7px}
#diag{white-space:pre-wrap;word-break:break-word;background:#03101e;color:#92c8ff;border:1px solid #14416b;padding:15px;border-radius:10px;font:12px/1.55 ui-monospace,Consolas,monospace;margin-top:10px}
#session>small{display:block;margin-top:10px;line-height:1.55;font-size:11px}
#bootStatus{padding:13px;background:#072740;color:#a9d7ff;border:1px solid #24628c;border-radius:9px}
#recoveryPanel{border-color:#916a35}#recoveryPanel p{line-height:1.6}
.loginForms{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.loginForms label{font-size:12px;color:#96bddc}
#login select,#activatePanel select{min-width:230px;max-width:450px}
#manualUser{display:none;min-width:230px}
#ownerPanel{margin-top:22px}
#ownerPanel p{line-height:1.55;font-size:13px}
.ownerRow{display:flex;align-items:center;flex-wrap:wrap;gap:10px;border-bottom:1px solid #1b4163;padding:8px 0}.ownerRow span{flex:1;min-width:200px}
#ownerCodes{background:#041323;color:#d5eeff;border:1px solid #1c5686;border-radius:8px;padding:14px;white-space:pre-wrap;overflow-wrap:anywhere}
#message{min-height:24px;color:#72d4ff;font-size:13px}
body:not(.signedIn) #liveNav{display:none}
body.signedIn #signInNav{display:none}
@media(max-width:1280px){.appShell{grid-template-columns:185px 1fr}.sideRail{padding:18px 10px}.railBrand{font-size:12px}.railBrand img{width:52px;height:52px}.railBrand em{font-size:13px}.supportLayout{grid-template-columns:minmax(0,1.4fr) minmax(278px,.9fr)}}
@media(max-width:1050px){.appShell{grid-template-columns:1fr}.sideRail{position:relative;height:auto;display:block;padding:9px 16px}.railBrand{display:inline-flex}.railBrand img{width:44px;height:44px}.railMeta,.railFooter{display:none}.railNav{display:inline-flex;float:right;flex-direction:row;flex-wrap:wrap;gap:3px;padding-top:6px}.railLink{font-size:12px;padding:8px}.navGlyph{font-size:17px}.workspace main{padding:14px}.heroPanel{min-height:180px}.heroArt{height:158px;width:250px}}
@media(max-width:730px){.sideRail{display:flex;gap:8px;flex-direction:column}.railNav{float:none;display:flex;flex-direction:row}.railLink{padding:7px 10px}.topBar{font-size:9px;padding:10px 14px}.heroPanel{padding:14px 18px;min-height:152px}.heroPanel h1{font-size:clamp(23px,6vw,34px)}.heroArt{width:134px;height:125px;margin-left:-25px;opacity:.82}.heroCopy p{font-size:11px;max-width:210px}.supportLayout{grid-template-columns:1fr}.chatColumn{position:static}.panel{padding:14px}#session{padding:13px}.sessionConnect{padding:10px}.sessionConnect label{width:100%}.chatLog{height:135px}#chatActions{grid-template-columns:1fr 1fr}}
@media(max-width:420px){.heroArt{width:100px;height:100px}.heroPanel h1{font-size:23px}.topBar .right{display:none}#code{width:100%}.sessionConnect button{flex:1}#chatActions{grid-template-columns:1fr}.railLink{gap:5px;font-size:11px}.navGlyph{font-size:15px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}button{transition:none}}