:root{
  --accent:#38d6ff; --ok:#3ddc84; --warn:#ffb020; --bad:#ff4d5e;
  --panel:rgba(9,17,29,.82); --ink:#eaf2fb; --mute:#9db1c8;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#05080d;color:var(--ink);font-family:var(--font);overflow:hidden}
button{font:inherit;color:inherit;cursor:pointer}
[hidden]{display:none!important}

#app{position:fixed;inset:0;display:flex;flex-direction:column;overflow:hidden}
#app.mode-glasses{--accent:#5dffb0;--panel:rgba(2,18,12,.6);--mute:#8fd9b5}

/* ---- background: live camera or simulated hall ---- */
#cam{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
#app.cam-on #cam{display:block}
#backdrop{position:absolute;inset:0;background:linear-gradient(#27384d,#131d2b 55%,#0b121c);overflow:hidden}
#app.cam-on #backdrop{display:none}
.bd-windows{position:absolute;left:0;right:0;top:0;height:42%;
  background:repeating-linear-gradient(90deg,rgba(120,170,220,.16) 0 70px,transparent 70px 80px),
             linear-gradient(#35506f,#223349);opacity:.9}
.bd-floor{position:absolute;left:-50%;right:-50%;bottom:-10%;height:62%;transform:perspective(500px) rotateX(58deg);transform-origin:50% 0;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 2px,transparent 2px 70px),
             repeating-linear-gradient(0deg,rgba(255,255,255,.07) 0 2px,transparent 2px 70px),#18222f}
#tint{position:absolute;inset:0;background:rgba(5,10,18,.28);pointer-events:none}
#app.mode-glasses #tint{background:rgba(0,20,10,.38)}

/* ---- top bar ---- */
#top{position:relative;z-index:5;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px;
  padding:calc(10px + env(safe-area-inset-top)) 14px 6px;background:linear-gradient(rgba(5,10,18,.75),transparent)}
.brand{display:flex;flex-direction:column;min-width:0}
.scene-no{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.scene-title{font-size:16px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tools{display:flex;gap:6px}
.chip{background:var(--panel);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:6px 11px;font-size:13px;backdrop-filter:blur(6px)}
.chip:hover{border-color:var(--accent)}
.chip.on{border-color:var(--accent);color:var(--accent)}
.dots{flex-basis:100%;display:flex;gap:4px}
.dots i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.2)}
.dots i.done{background:var(--accent);opacity:.55}
.dots i.cur{background:var(--accent)}

/* ---- AR layer ---- */
#ar{position:relative;z-index:2;flex:1;min-height:0}
svg.stage{width:100%;height:100%;display:block;touch-action:manipulation}
[data-act]{cursor:pointer}
svg text{font-family:var(--font);fill:var(--ink)}
.card-bg{fill:rgba(8,16,28,.9);stroke:var(--accent);stroke-width:1.5}
.card-title{fill:var(--accent);font-size:17px;font-weight:700}
.card-k{fill:var(--mute);font-size:14px}
.card-v{fill:#fff;font-size:15px;font-weight:600}
.t-big{font-size:34px;font-weight:800}
.t-mid{font-size:20px;font-weight:600}
.t-sm{font-size:14px;fill:var(--mute)}
.t-acc{fill:var(--accent)}
.lbl{font-size:13px;font-weight:700}
.glow{filter:drop-shadow(0 0 6px var(--accent))}
.float{animation:float 3s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-8px)}}
.pulse{animation:pulse 1.6s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes pulse{0%{transform:scale(.8);opacity:.9}100%{transform:scale(1.5);opacity:0}}
.dash{stroke-dasharray:14 10;animation:dash 1s linear infinite}
@keyframes dash{to{stroke-dashoffset:-24}}
.scanline{animation:scan 1.8s ease-in-out infinite alternate}
@keyframes scan{from{transform:translateY(0)}to{transform:translateY(228px)}}
.shake{animation:shake .4s}
@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.pop{animation:pop .5s cubic-bezier(.2,1.6,.4,1) both;transform-box:fill-box;transform-origin:center}
@keyframes pop{from{transform:scale(.3);opacity:0}}
.hide{opacity:0;pointer-events:none}
.fade{transition:opacity .4s}
.vf path{stroke:var(--accent);stroke-width:5;fill:none;stroke-linecap:round}
.vf.ok path{stroke:var(--ok)}
.node{fill:#1d2a3b;stroke:#4c607a;stroke-width:3}
.node.act{fill:var(--accent);stroke:#fff}

/* ---- dock ---- */
#dock{position:relative;z-index:5;padding:8px 12px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(transparent,rgba(5,10,18,.85) 30%)}
#cap{background:var(--panel);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:11px 14px;backdrop-filter:blur(8px);
  max-width:760px;margin:0 auto 8px}
#capText{margin:0;font-size:15px;line-height:1.4}
#hint{margin:6px 0 0;font-size:13px;color:var(--accent)}
#bar{display:flex;align-items:center;justify-content:center;gap:8px;max-width:760px;margin:0 auto;flex-wrap:wrap}
#sceneActions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;flex:1}
.btn{display:inline-block;background:var(--panel);border:1px solid rgba(255,255,255,.22);border-radius:12px;padding:10px 16px;font-size:14px;font-weight:600;
  text-decoration:none;color:var(--ink);backdrop-filter:blur(6px)}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);color:#04121c;border-color:var(--accent)}
.btn:disabled{opacity:.35;cursor:default}

/* ---- glasses look ---- */
#lens{position:absolute;inset:0;z-index:8;pointer-events:none;display:none}
#app.mode-glasses #lens{display:block;
  background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.65) 100%);
  box-shadow:inset 0 0 0 10px #02060a}
#app.mode-glasses #lens::after{content:"";position:absolute;inset:10px;border-radius:26px;border:1px solid rgba(93,255,176,.45);
  box-shadow:inset 0 0 40px rgba(93,255,176,.12)}
#app.mode-glasses #top{padding:24px 28px 6px}
#app.mode-glasses #dock{padding:8px 26px 22px}
#app.mode-glasses #cap{border-color:rgba(93,255,176,.5);font-family:ui-monospace,Consolas,monospace}
#app.mode-glasses .btn,#app.mode-glasses .chip{border-color:rgba(93,255,176,.45)}
#app.mode-glasses .btn.primary{color:#021008}
#gaze{position:fixed;left:0;top:0;width:44px;height:44px;border-radius:50%;z-index:20;pointer-events:none;display:none;--p:0deg;
  background:conic-gradient(var(--accent) var(--p),rgba(255,255,255,.0) 0);
  -webkit-mask:radial-gradient(circle,transparent 15px,#000 16px,#000 20px,transparent 21px);
  mask:radial-gradient(circle,transparent 15px,#000 16px,#000 20px,transparent 21px)}
#gaze::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(93,255,176,.5)}
#app.mode-glasses #gaze{display:block}

#toast{position:absolute;z-index:15;left:50%;bottom:170px;transform:translate(-50%,10px);background:var(--panel);border:1px solid var(--accent);
  padding:8px 14px;border-radius:10px;font-size:14px;opacity:0;pointer-events:none;transition:.3s;max-width:90%;text-align:center}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* ---- overlays ---- */
.overlay{position:absolute;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(3,7,12,.82);backdrop-filter:blur(8px);overflow:auto}
.sheet{background:#0d1623;border:1px solid rgba(255,255,255,.16);border-radius:18px;padding:22px;max-width:520px;width:100%}
.sheet h1{font-size:23px;margin:0 0 6px}
.sheet h2{font-size:19px;margin:0 0 12px}
.muted{color:var(--mute);font-size:14px;line-height:1.45}
.small{font-size:12px;min-height:1em}
.choice{display:grid;gap:8px;margin:16px 0}
.opt{display:flex;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.2);border-radius:12px;padding:10px 12px;cursor:pointer}
.opt:has(input:checked){border-color:var(--accent);background:rgba(56,214,255,.1)}
.opt small{display:block;color:var(--mute)}
.row{display:flex;gap:8px;flex-wrap:wrap}
table{width:100%;border-collapse:collapse;margin-bottom:12px}
th,td{padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.12);text-align:left;font-size:14px}
th{color:var(--accent)}

@media (max-width:520px){
  .scene-title{font-size:14px}
  #capText{font-size:14px}
  .btn{padding:9px 12px}
}
@media (max-height:520px){
  #hint{display:none}
  #capText{font-size:13px}
}

.btn.sm{padding:7px 11px;font-size:13px;border-radius:10px}
#app.cam-on #tint{background:rgba(5,10,18,.06)}
#app.cam-on #cap{background:rgba(9,17,29,.88)}