:root{--navy:#0a1a3f;--ink:#101828;--blue:#4472C4;--blue2:#2f5aa8;--pale:#B4C6E7;--bg:#f3f5fa;--line:#dfe4ee;--mute:#5b6679;--green:#1f9d61;--red:#d0382f}
*{box-sizing:border-box}
body{margin:0;font-family:"Open Sans",Arial,sans-serif;color:var(--ink);background:var(--bg);font-size:15px}
h1,h2,h3,.brand{font-family:"Gill Sans MT","Gill Sans",Calibri,sans-serif;margin:0}
button{font:inherit;cursor:pointer}
[hidden]{display:none!important}
.top{background:var(--navy);color:#fff;display:flex;align-items:center;gap:12px;padding:12px 24px}
.top img{height:30px}.top .brand{font-size:20px}.top .sp{flex:1}.top small{color:var(--pale)}
.btn{background:var(--blue);color:#fff;border:0;border-radius:8px;padding:10px 16px;font-weight:600}
.btn:hover{background:var(--blue2)}.btn:disabled{opacity:.5;cursor:default}
.btn.ghost{background:#fff;color:var(--navy);border:1px solid var(--line)}
.btn.red{background:var(--red)}.btn.sm{padding:6px 10px;font-size:13px}.btn.wide{width:100%}
.btn.pulse{animation:glow 1.2s infinite}
@keyframes glow{50%{box-shadow:0 0 0 8px #4472c455}}
input{font:inherit;width:100%;padding:10px;border:1px solid var(--line);border-radius:8px}
label{font-size:13px;font-weight:600;display:block;margin:12px 0 4px}
.chip{display:inline-block;border-radius:12px;padding:2px 9px;font-size:12px;font-weight:600;background:#e9eefb;color:var(--blue2)}
.chip.g{background:#e2f5ec;color:var(--green)}.chip.r{background:#fbe3e1;color:var(--red)}.chip.n{background:#eceff4;color:var(--mute)}
.center{max-width:520px;margin:40px auto;background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px}
.mute{color:var(--mute)}.small{font-size:13px}.err{color:var(--red);font-size:14px;min-height:20px;margin-top:8px}
.code{font-size:54px;letter-spacing:8px;font-weight:700;color:var(--navy);text-align:center;margin:14px 0 4px;font-family:Consolas,monospace}
.steps{display:flex;gap:8px;margin:18px 0}.steps div{flex:1;text-align:center;font-size:12px;color:var(--mute);border-top:4px solid var(--line);padding-top:6px}
.steps div.on{border-color:var(--blue);color:var(--navy);font-weight:600}
.live{background:var(--red);color:#fff;border-radius:8px;padding:10px 14px;font-weight:600}
.ask{border:2px solid var(--blue);border-radius:12px;padding:12px;background:#f4f7fe;margin-bottom:12px}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
/* agent */
.wrap{max-width:1200px;margin:0 auto;padding:20px 24px}
.stage{background:#0d1117;border-radius:10px;padding:12px;color:#fff}
.stage .bar{display:flex;gap:8px;align-items:center;font-size:13px;margin-bottom:8px;flex-wrap:wrap}.stage .sp{flex:1}
.screenbox{position:relative;background:#000;border-radius:6px;min-height:320px;display:flex;align-items:center;justify-content:center}
.screenbox video{width:100%;max-height:70vh;object-fit:contain;display:block;cursor:crosshair}
.screenbox .wait{position:absolute;color:#8b98b5;text-align:center;padding:20px}
/* pointer view (also injected into the floating window) */
.pv{position:relative;overflow:hidden;background:#111;width:100%;height:100%}
.pv video{position:absolute;left:0;top:0;max-width:none}
.pv .dot{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#4472C4;border:2px solid #fff;box-shadow:0 0 6px #000}
.pv .who{position:absolute;background:#4472C4;color:#fff;font:600 11px Arial;padding:2px 7px;border-radius:10px;white-space:nowrap;transform:translate(10px,10px)}
.pv .ring{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;border:4px solid #d0382f;border-radius:50%;animation:ringpulse .8s 3 forwards}
.pv .idle{position:absolute;left:0;right:0;bottom:0;background:#000a;color:#fff;font:12px Arial;padding:6px 10px;text-align:center}
@keyframes ringpulse{0%{transform:scale(.5);opacity:1}100%{transform:scale(1.5);opacity:0}}
.inlinepv{height:220px;border-radius:8px;overflow:hidden;margin-top:12px}