:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background:#0b1020; color:#e9edf7; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 85% 10%,#243054 0,transparent 40%),#0b1020; }
.authGate { min-height:100vh; display:grid; place-items:center; padding:24px; }
.authCard { width:min(460px,100%); padding:clamp(28px,5vw,54px); border:1px solid #2b3553; border-radius:18px; background:rgba(10,15,30,.9); box-shadow:0 24px 70px #0008; }
.authCard p:not(.eyebrow) { color:#aeb8d2; line-height:1.55; }
.authUser { display:flex; gap:12px; align-items:center; justify-content:space-between; padding:10px 0 16px; border-bottom:1px solid #27314c; color:#aeb8d2; overflow-wrap:anywhere; }
.authUser button { width:auto; min-height:38px; margin:0; padding:0 14px; flex:none; }
main { min-height:100vh; display:grid; grid-template-columns:minmax(300px,420px) 1fr; }
section { padding:clamp(24px,4vw,64px); }
.controls { background:rgba(10,15,30,.82); border-right:1px solid #2b3553; }
.appNav { display:flex; gap:7px; margin:0 0 24px; padding:5px; border:1px solid #35405f; border-radius:11px; background:#080d19; }
.appNav a { flex:1; padding:10px 12px; border-radius:7px; color:#aeb8d2; font-weight:800; text-align:center; text-decoration:none; }
.appNav a:hover { color:#fff; background:#1b2742; }
.appNav a.active { color:#071512; background:#78d6c6; }
.buildVersion { margin:0 0 18px; color:#8290ae; font-size:.78rem; font-weight:750; letter-spacing:.04em; }
.appVersion { color:#b9c7e6; font-family:"Cascadia Mono",Consolas,monospace; }
.eyebrow { color:#78d6c6; font-weight:800; letter-spacing:.15em; text-transform:uppercase; }
h1 { font-size:clamp(2rem,4vw,3.6rem); line-height:1; margin:.3em 0 .8em; }
label { display:grid; gap:8px; color:#aeb8d2; font-weight:650; margin:18px 0 8px; }
input,select,button { width:100%; min-height:48px; border-radius:10px; border:1px solid #35405f; padding:0 14px; font:inherit; }
input,select { background:#11182b; color:#fff; }
button { margin-top:10px; background:#78d6c6; color:#071512; font-weight:800; cursor:pointer; border:0; }
button.secondary { background:#253251; color:#dfe6f8; border:1px solid #46577f; }
button.danger { background:#512b35; color:#ffe4e9; border:1px solid #8b4657; }
.managerPanel { margin:18px 0; padding:14px; border:1px solid #35405f; border-radius:12px; background:#10172a; }
.managerPanel p { margin:.65rem 0; color:#aeb8d2; font-size:.9rem; line-height:1.45; }
.panelHeading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.statusBadge { flex:none; padding:4px 8px; border-radius:999px; font-size:.76rem; font-weight:800; background:#29334d; color:#c7d0e7; }
.statusBadge.loaded { background:#173f38; color:#92ebda; }
.statusBadge.unloaded { background:#4b3421; color:#ffd39b; }
.buttonRow { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.buttonRow button { min-height:40px; margin:0; padding:0 8px; font-size:.86rem; }
.mugshotPanel { margin-top:18px; padding:14px; border:1px solid #46577f; border-radius:10px; background:#10172a; }
.mugshotPanel p { margin:.5rem 0; color:#aeb8d2; font-size:.9rem; line-height:1.45; }
.mugshotPanel label { margin-top:10px; }
button:disabled,input:disabled,select:disabled { opacity:.45; cursor:not-allowed; }
pre { white-space:pre-wrap; overflow-wrap:anywhere; background:#080d19; border:1px solid #27314c; border-radius:10px; padding:14px; color:#bfc8df; }
.preview { display:grid; align-content:start; gap:22px; }
.previewHeader { display:flex; justify-content:space-between; gap:20px; color:#aeb8d2; }
.faceGrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; }
.facePreview { margin:0; min-width:0; }
.facePreview[hidden] { display:none; }
.facePreview figcaption { margin:0 0 8px; color:#78d6c6; font-weight:750; }
.imageStage { min-height:360px; display:grid; place-items:center; border:1px dashed #3c496c; border-radius:18px; background:rgba(5,9,19,.5); overflow:hidden; }
img { display:none; max-width:100%; max-height:70vh; object-fit:contain; box-shadow:0 24px 70px #000a; }
summary { cursor:pointer; color:#78d6c6; font-weight:750; }
.fieldList { display:grid; gap:10px; margin-top:14px; }
.assetGrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin:14px 0; }
.assetCard { display:grid; gap:8px; padding:10px; border:1px solid #2c3857; border-radius:10px; background:#10172a; }
.assetCard img { display:block; width:100%; height:180px; object-fit:contain; background:#080d19; border-radius:6px; box-shadow:none; }
.assetCard a { color:#8de3d4; font-weight:700; text-decoration:none; }
.fieldCard { display:grid; grid-template-columns:minmax(140px,1fr) minmax(120px,1fr) auto; gap:12px; align-items:center; background:#10172a; border:1px solid #2c3857; border-radius:10px; padding:12px; }
.fieldCard strong,.fieldCard code { overflow-wrap:anywhere; }
.fieldMeta { color:#9eabc8; font-size:.86rem; }
.fieldCard button { width:auto; min-height:38px; margin:0; padding:0 12px; }
code { color:#8de3d4; }
@media(max-width:850px){ main{grid-template-columns:1fr}.controls{border-right:0;border-bottom:1px solid #2b3553}.imageStage{min-height:280px} }
@media(max-width:620px){ .fieldCard{grid-template-columns:1fr}.fieldCard button{width:100%} }
@media(max-width:430px){ .buttonRow{grid-template-columns:1fr} }