:root { --bg:#111418; --panel:rgba(20,24,30,.93); --line:#2b323b; --text:#e6eaee; --mut:#93a0ad; --acc:#f2c200; --red:#c7372d; --green:#2f8a55; }
* { box-sizing: border-box; }
html, body { margin:0; height:100%; background:var(--bg); color:var(--text); font-family:Barlow, system-ui, sans-serif; overflow:hidden; }
#view { position:fixed; inset:0; }
#view canvas { display:block; touch-action:none; }
h1 { font-family:'Barlow Condensed', sans-serif; font-weight:700; letter-spacing:.04em; margin:0; font-size:24px; line-height:1; }
h1 small { display:block; font-size:12.5px; letter-spacing:.16em; color:var(--acc); margin-top:4px; }
.panel { position:fixed; top:12px; left:12px; bottom:12px; width:350px; background:var(--panel); border:1px solid var(--line); border-radius:14px; backdrop-filter: blur(8px); display:flex; flex-direction:column; z-index:5; transition: transform .3s; }
.panel header { padding:16px 16px 12px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:12px; position:relative; }
.panel header::before { content:''; position:absolute; left:0; right:0; top:0; height:4px; border-radius:14px 14px 0 0; background:repeating-linear-gradient(-45deg, var(--acc) 0 12px, #111 12px 24px); }
.logo { width:40px; height:40px; border-radius:9px; background:var(--acc); display:grid; place-items:center; flex:none; }
.scroll { overflow-y:auto; padding:6px 16px 16px; flex:1; scrollbar-width:thin; }
label.lab { display:block; font-family:'Barlow Condensed'; font-weight:600; letter-spacing:.12em; font-size:13px; color:var(--mut); margin:14px 0 6px; text-transform:uppercase; }
button { font:inherit; color:var(--text); background:#262d36; border:1px solid #3a434e; border-radius:9px; padding:9px 8px; cursor:pointer; font-weight:600; font-size:14px; }
button:hover { background:#313a45; }
button:focus-visible, input:focus-visible { outline:2px solid var(--acc); outline-offset:1px; }
button.primary { background:var(--red); border-color:#e0574c; } button.primary:hover { background:#d8463b; }
button.go { background:var(--green); border-color:#3fae6c; } button.go:hover { background:#38a065; }
button.mini { padding:4px 9px; font-size:12.5px; }
.btnrow3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; }
.btnrow3 button { font-size:13px; padding:8px 4px; }
.acts { display:grid; gap:6px; }
.acts button { display:flex; align-items:center; gap:10px; text-align:left; padding:9px 10px; }
.acts button .n { width:24px; height:24px; border-radius:50%; background:#3a434e; display:grid; place-items:center; font-size:13px; flex:none; }
.acts button.cur { border-color:var(--acc); background:#2f2a14; } .acts button.cur .n { background:var(--acc); color:#111; }
.acts button.done .n { background:var(--green); }
.acts button .s { margin-left:auto; font-size:12px; color:var(--mut); font-weight:500; }
.stepbox { margin-top:12px; background:#171b21; border:1px solid var(--line); border-left:4px solid var(--acc); border-radius:10px; padding:10px 12px; }
.stephead { display:flex; align-items:center; gap:8px; } .stephead b { font-family:'Barlow Condensed'; font-size:20px; letter-spacing:.03em; flex:1; }
.steptext { font-size:14.5px; line-height:1.45; color:#d9dfe5; margin-top:6px; white-space:pre-line; }
#actArea { margin-top:8px; }
#actArea .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
#actArea .ppe { padding:8px 6px; font-size:13px; text-align:left; }
#actArea .ppe.on { background:#1d4a32; border-color:#3fae6c; }
#actArea .big { width:100%; margin-top:8px; padding:11px; font-size:15px; }
#actArea .stat { font-size:13.5px; color:var(--mut); margin-top:6px; line-height:1.45; }
#actArea .stat b { color:var(--text); }
#actArea .result { margin-top:8px; padding:9px 10px; border-radius:8px; font-size:14px; line-height:1.45; background:#1b3326; border:1px solid #3fae6c; }
#actArea .result.bad { background:#3a1f1d; border-color:#e0574c; }
.toggle { display:flex; align-items:center; justify-content:space-between; padding:7px 0; font-size:14.5px; border-bottom:1px solid #222830; }
.toggle input { width:20px; height:20px; accent-color: var(--acc); }
#vrSlot { padding:12px 16px 16px; border-top:1px solid var(--line); }
#vrbtn { position:static !important; left:auto !important; bottom:auto !important; width:100% !important; padding:13px !important; border-radius:10px !important; background:var(--acc) !important; color:#111 !important; border:none !important; font-family:'Barlow Condensed' !important; font-size:20px !important; font-weight:700; letter-spacing:.08em; cursor:pointer; opacity:1 !important; z-index:auto !important; font-style:normal !important; text-align:center !important; }
a#vrbtn { display:block !important; text-align:center; text-decoration:none; font-size:14px !important; }
.vrnote { font-size:12px; color:var(--mut); margin-top:7px; line-height:1.35; }
#collapse { position:absolute; right:-14px; top:50%; width:28px; height:56px; padding:0; border-radius:0 9px 9px 0; background:var(--panel); border-left:none; }
body.collapsed .panel { transform: translateX(calc(-100% - 12px)); } body.collapsed #collapse { right:-40px; }

#readout { position:fixed; top:12px; right:12px; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:10px 14px; z-index:4; font-size:13.5px; min-width:230px; line-height:1.55; }
#readout .sig { font-family:'Barlow Condensed'; font-size:24px; letter-spacing:.05em; color:var(--acc); }
#readout .sig.stop { color:#ff8a7a; } #readout .warn { color:#ff8a7a; font-weight:600; }
#readout .k { color:var(--mut); display:inline-block; width:100px; }
.pad { position:fixed; right:12px; bottom:12px; z-index:4; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:10px; width:430px; }
.padgrid { display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; }
.pad button { position:relative; padding:12px 6px; font-size:15px; }
.pad button kbd { position:absolute; right:5px; top:3px; font:600 10px Barlow, sans-serif; color:var(--mut); background:none; }
.pad button.up, .pad button.down { background:#24364a; border-color:#3d5c7d; }
.pad button.stop { background:var(--red); border-color:#e0574c; font-family:'Barlow Condensed'; font-size:20px; letter-spacing:.06em; }
.pad button.estop { background:#7a1a14; border-color:#ff5a4a; }
.pad button.wide { grid-column: span 3; }
.pad button.on { background:var(--acc); color:#111; border-color:var(--acc); }
.pad button.active { box-shadow: inset 0 0 0 2px var(--acc); }
.padhelp { font-size:12px; color:#aab4bf; margin-top:8px; line-height:1.4; }
.padhelp kbd { background:#2a313a; border-radius:4px; padding:0 4px; font-family:inherit; color:#fff; }
body.nolift .pad { display:none; }
#toast { position:fixed; left:50%; top:16px; transform:translate(-50%, -90px); background:#20262e; border:1px solid #3a434e; padding:11px 18px; border-radius:10px; font-weight:600; z-index:9; transition:transform .25s; max-width:min(560px, 90vw); text-align:center; }
#toast.show { transform:translate(-50%, 0); } #toast.warn { border-color:#e0574c; background:#3a1f1d; } #toast.ok { border-color:#3fae6c; background:#1b3326; }
#loading { position:fixed; inset:0; background:var(--bg); display:grid; place-items:center; z-index:20; transition:opacity .5s; }
#loading.done { opacity:0; pointer-events:none; }
#loading div { font-family:'Barlow Condensed'; font-size:22px; letter-spacing:.2em; color:var(--acc); }
#err { position:fixed; left:12px; right:12px; bottom:12px; background:#3a1f1d; border:1px solid #e0574c; color:#ffd; padding:10px; border-radius:8px; font:12px monospace; z-index:30; display:none; white-space:pre-wrap; }
@media (max-width: 1100px) { .panel { width:310px; } .pad { width:360px; } }
@media (max-width: 760px) { .panel { width:86vw; } .pad { left:12px; right:12px; width:auto; } #readout { display:none; } }

/* ---------- subscription sign-in gate */
  #gate{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:18px;overflow:auto;
    background:radial-gradient(1100px 600px at 70% -10%,#3a2c08 0,transparent 60%),rgba(14,16,20,.97)}
  body.signed #gate{display:none}
  .gcard{width:100%;max-width:440px;background:#1a1d22;border:1px solid #34393f;border-top:4px solid #f2c200;border-radius:16px;padding:24px 26px;box-shadow:0 24px 70px #000a;color:#e8ecf0}
  .gbrand{display:flex;gap:12px;align-items:center;margin-bottom:16px}
  .glogo{width:46px;height:46px;border-radius:11px;background:#f2c200;color:#111;display:grid;place-items:center;font-weight:800;letter-spacing:.5px}
  .gbrand h2{margin:0;font-size:20px;letter-spacing:.06em}.gbrand p{margin:2px 0 0;color:#9aa5b1;font-size:13px}
  .gbanner{background:#2b2410;border:1px solid #6b5614;color:#ffe08a;border-radius:9px;padding:9px 12px;font-size:13px;margin-bottom:12px;line-height:1.4}
  .glab{display:block;color:#9aa5b1;font-size:13px;margin:4px 0 8px}
  .gcode{display:flex;gap:6px;justify-content:center;align-items:center;padding:12px;background:#0f1114;border:1px solid #34393f;border-radius:12px;outline:none;cursor:text}
  .gcode:focus{border-color:#f2c200}
  .gcode span{width:30px;height:42px;border-radius:7px;background:#22262c;display:grid;place-items:center;font:700 26px Consolas,ui-monospace,monospace;color:#ffd84a}
  .gcode span.cur{box-shadow:inset 0 -3px 0 #f2c200}
  .gcode i{width:10px}
  .gpad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
  .gpad button{font:700 24px system-ui,sans-serif;padding:14px 0;border-radius:11px;border:1px solid #3a4048;background:#262b32;color:#fff;cursor:pointer}
  .gpad button:hover{background:#333a43;border-color:#f2c200}
  .gpad button:active{transform:scale(.97)}
  .gpad .gsec{font-size:16px;color:#cfd6de;background:#1e2227}
  .gremember{display:flex;gap:8px;align-items:center;color:#cfd6de;font-size:13px;margin-top:12px}
  .ggo{width:100%;margin-top:12px;padding:14px;border:0;border-radius:11px;background:#f2c200;color:#111;font:700 17px system-ui,sans-serif;cursor:pointer}
  .ggo:disabled{background:#3a3f46;color:#8b95a1;cursor:not-allowed}
  .gmsg{min-height:20px;margin-top:10px;font-size:14px;text-align:center}
  .gmsg.err{color:#ff8a7a}.gmsg.ok{color:#6fe39b}
  .gfoot{color:#8b95a1;font-size:12px;line-height:1.45;margin:10px 0 0}
  /* account chip in the side panel */
  #acct{display:flex;align-items:center;gap:8px;padding:8px 14px;border-bottom:1px solid #2c3138;font-size:12.5px;color:#cfd6de;background:#16191d}
  #acct b{color:#fff}#acct .days{color:#9aa5b1}#acct .days.warn{color:#ffc34d}
  #acct .sync{margin-left:auto;color:#9aa5b1;font-size:11.5px}
  #acct button{background:none;border:1px solid #3a4048;color:#cfd6de;border-radius:7px;padding:3px 8px;font-size:12px;cursor:pointer}
  #acct button:hover{border-color:#f2c200}
  /* ---------- class licence: pick the student */
  #picker{position:fixed;inset:0;z-index:51;display:none;align-items:center;justify-content:center;padding:18px;overflow:auto;background:rgba(14,16,20,.97)}
  body.picking #picker{display:flex}
  body.picking #gate{display:none}
  .pcard{max-width:560px}
  .pfind{width:100%;box-sizing:border-box;padding:11px 13px;border-radius:10px;border:1px solid #3a4048;background:#0f1114;color:#fff;font:16px system-ui,sans-serif;margin-bottom:10px}
  .plist{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;max-height:42vh;overflow:auto;padding:2px}
  .plist button{padding:14px 10px;border-radius:10px;border:1px solid #3a4048;background:#262b32;color:#fff;font:600 16px system-ui,sans-serif;cursor:pointer;text-align:left}
  .plist button:hover{border-color:#f2c200;background:#333a43}
  .plist .pempty{grid-column:1/-1;color:#8b95a1;font-size:14px;padding:10px 2px}
  .pnew{margin-top:14px;border-top:1px solid #2c3138;padding-top:10px}
  .prow{display:flex;gap:8px}.prow input{flex:1;min-width:0;padding:12px;border-radius:10px;border:1px solid #3a4048;background:#0f1114;color:#fff;font:16px system-ui,sans-serif}
  .padd{width:auto;margin:0;padding:12px 18px}
  .plink{background:none;border:0;color:#8b95a1;text-decoration:underline;cursor:pointer;margin-top:10px;font-size:13px}