@font-face{
  font-family:'Jost';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../fonts/jost.woff2') format('woff2');
}

:root{
  /* signals station: machined instrument surfaces, chart paper for reading */
  --bench:#151d26;
  --bench-deep:#101720;
  --panel:#1f2a36;
  --panel-hi:#273441;
  --rule:#2f3f4f;
  --lamp:#f0a52e;
  --cyan:#13aedb;
  --ok:#37996b;
  --alert:#cf4b41;
  --paper:#e9eef0;
  --ink:#16222b;
  --ink-soft:#4d6070;
  --chrome-text:#c3d2dd;
  --chrome-dim:#7f93a3;

  --ui:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --read:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,'Liberation Mono',monospace;

  --bar-h:42px;
  --line:#d9e1e5;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;overflow:hidden;
  font-family:var(--ui);color:var(--chrome-text);
  background:var(--bench-deep);
  -webkit-font-smoothing:antialiased;
}
button,input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.mono{font-family:var(--mono);font-variant-ligatures:none}

.lamp{
  width:9px;height:9px;border-radius:50%;flex:none;
  background:#3c4a57;box-shadow:0 0 0 1px #0d141b inset;
}
.lamp.live{background:var(--lamp);box-shadow:0 0 9px var(--lamp),0 0 0 1px #6b4a12 inset}
.callsign{
  font-family:var(--mono);font-size:11.5px;color:var(--lamp);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:22vw;
}
.me-av{width:20px;height:20px;border-radius:5px;object-fit:cover;flex:none;border:1px solid #3a4b5c}

/* ══ the desk ═════════════════════════════════════════════════════ */
.desk{
  position:fixed;inset:0 0 var(--bar-h) 0;
  overflow:hidden;
  background:
    radial-gradient(90% 70% at 18% 0%,rgba(19,174,219,.09),transparent 70%),
    radial-gradient(70% 60% at 92% 100%,rgba(240,165,46,.07),transparent 72%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.016) 0 1px,transparent 1px 4px),
    var(--bench);
}

.icons{
  list-style:none;margin:0;padding:12px 8px;
  display:grid;grid-auto-flow:column;grid-template-rows:repeat(auto-fill,76px);
  gap:3px;justify-content:start;height:100%;
}
.icons li{margin:0}
.icon{
  width:80px;padding:9px 5px 7px;border:0;background:none;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  border-radius:5px;color:var(--chrome-text);text-align:center;
}
.icon:hover{background:rgba(255,255,255,.055)}
.icon[aria-pressed="true"]{background:rgba(19,174,219,.14)}
.icon .glyph{
  width:34px;height:34px;border-radius:7px;flex:none;
  display:grid;place-items:center;
  background:linear-gradient(#2c3b49,#202b36);
  border:1px solid #3b4b5b;
  box-shadow:0 2px 5px rgba(0,0,0,.3),0 1px 0 rgba(255,255,255,.06) inset;
}
.icon .glyph svg{width:18px;height:18px;stroke:var(--cyan);fill:none;stroke-width:1.6}
.icon.lamp-glyph .glyph svg{stroke:var(--lamp)}
.icon .label{font-size:11px;line-height:1.2;color:#b9c8d4}

/* ══ windows ══════════════════════════════════════════════════════ */
.windows{position:absolute;inset:0;pointer-events:none}
.win{
  position:absolute;pointer-events:auto;
  display:flex;flex-direction:column;min-width:260px;min-height:150px;
  background:var(--panel);
  border:1px solid #0d1419;border-radius:6px;
  box-shadow:0 18px 44px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.045) inset;
}
.win.focused{box-shadow:0 22px 56px rgba(0,0,0,.6),0 0 0 1px rgba(19,174,219,.35) inset}
.win.dragging,.win.sizing{will-change:left,top,width,height}
.win.min{display:none}
.win.max{border-radius:0}

.title{
  display:flex;align-items:center;gap:8px;flex:none;
  height:26px;padding:0 4px 0 10px;cursor:grab;
  background:linear-gradient(#2b3947,#222e3a);
  border-bottom:1px solid #16202a;border-radius:5px 5px 0 0;
  touch-action:none;user-select:none;
}
.win.max .title{border-radius:0}
.win.dragging .title{cursor:grabbing}
.title .tlamp{width:6px;height:6px;border-radius:50%;background:#425464;flex:none}
.win.focused .title .tlamp{background:var(--lamp);box-shadow:0 0 7px rgba(240,165,46,.8)}
.title h2{
  margin:0;font-size:11.5px;font-weight:500;letter-spacing:.01em;
  color:#cfdce6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;
}
.title .tsub{font-size:10px;color:var(--chrome-dim);white-space:nowrap}
.tbtns{display:flex;gap:1px;flex:none}
.tbtn{
  width:24px;height:20px;border:0;background:none;cursor:pointer;border-radius:3px;
  display:grid;place-items:center;color:var(--chrome-dim);
}
.tbtn:hover{background:rgba(255,255,255,.1);color:#e3ecf2}
.tbtn.close:hover{background:var(--alert);color:#fff}
.tbtn svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:1.8}

.wbody{flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch}

/* chart-paper surface: dark instrument outside, readable paper inside */
.paper{
  background:var(--paper);color:var(--ink);min-height:100%;
  padding:11px 13px 15px;
  background-image:
    linear-gradient(rgba(22,34,43,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(22,34,43,.04) 1px,transparent 1px);
  background-size:22px 22px,22px 22px;
}
.paper h3{
  font-family:var(--ui);font-size:14.5px;font-weight:600;letter-spacing:-.01em;
  margin:0 0 2px;color:#0f1a22;
}
.paper .meta{font-size:11px;color:var(--ink-soft);margin:0 0 12px}
.paper p{font-family:var(--read);font-size:12.5px;line-height:1.55;max-width:64ch;margin:0 0 10px}
.paper h4{
  font-family:var(--ui);font-size:11.5px;font-weight:600;letter-spacing:.04em;
  margin:15px 0 7px;color:#2b3c49;
}
.paper a{color:#0a6f93}

.resize{position:absolute;touch-action:none}
.resize.n{inset:-3px 10px auto 10px;height:7px;cursor:ns-resize}
.resize.s{inset:auto 10px -3px 10px;height:7px;cursor:ns-resize}
.resize.w{inset:10px auto 10px -3px;width:7px;cursor:ew-resize}
.resize.e{inset:10px -3px 10px auto;width:7px;cursor:ew-resize}
.resize.nw{inset:-3px auto auto -3px;width:14px;height:14px;cursor:nwse-resize}
.resize.ne{inset:-3px -3px auto auto;width:14px;height:14px;cursor:nesw-resize}
.resize.sw{inset:auto auto -3px -3px;width:14px;height:14px;cursor:nesw-resize}
.resize.se{inset:auto -3px -3px auto;width:14px;height:14px;cursor:nwse-resize}
.win.max .resize{display:none}

/* ══ bottom taskbar ═══════════════════════════════════════════════ */
.taskbar{
  position:fixed;inset:auto 0 0 0;height:var(--bar-h);z-index:200;
  display:flex;align-items:center;gap:8px;padding:0 8px;
  background:linear-gradient(#222e3a,#171f27);
  border-top:1px solid #0b1116;
  box-shadow:0 -1px 0 rgba(255,255,255,.05) inset,0 -6px 18px rgba(0,0,0,.28);
  padding-bottom:env(safe-area-inset-bottom);
}
.start{
  flex:none;display:flex;align-items:center;gap:7px;cursor:pointer;
  height:30px;padding:0 11px 0 9px;border-radius:5px;
  background:#1b2530;border:1px solid #33444f;border-top-color:#3e5162;color:#cfdce6;
}
.start:hover{background:#243240;border-color:#50677a}
.start[aria-expanded="true"]{background:var(--cyan);border-color:#0f93b9;color:#06222c}
.start-logo{width:18px;height:18px;border-radius:4px;flex:none}
.start-text{font-size:12px;font-weight:600;letter-spacing:.02em}
.tasks{
  list-style:none;display:flex;align-items:center;gap:5px;margin:0;padding:0;
  flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;
}
.tasks::-webkit-scrollbar{display:none}
.rail-btn{
  display:flex;align-items:center;gap:7px;max-width:170px;height:28px;
  padding:0 11px;cursor:pointer;
  background:#1b2530;border:1px solid #2e3e4b;border-bottom:2px solid #2e3e4b;
  border-radius:4px;color:#aebecb;font-size:11.5px;
}
.rail-btn:hover{background:#222e3a;color:#dce7ee}
.rail-btn .rl{width:6px;height:6px;border-radius:50%;background:#44586a;flex:none}
.rail-btn[aria-current="true"]{border-bottom-color:var(--cyan);color:#edf3f7;background:#283643}
.rail-btn[aria-current="true"] .rl{background:var(--lamp);box-shadow:0 0 6px rgba(240,165,46,.8)}
.rail-btn span.rt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* system tray */
.tray{display:flex;align-items:center;gap:7px;flex:none}
.tray-prog{
  display:flex;align-items:center;gap:6px;cursor:pointer;height:28px;padding:0 10px;
  background:#161f29;border:1px solid #33444f;border-radius:5px;color:#cfdce6;
}
.tray-prog:hover{border-color:#50677a}
.tp-v{font-size:12px;font-weight:600;color:#edf3f7;font-variant-numeric:tabular-nums}
.tp-v.mono{color:var(--lamp)}
.tp-v .of{font-size:11px;color:var(--chrome-dim);font-weight:400}
.tp-l{font-size:10px;color:var(--chrome-dim);letter-spacing:.06em}
.tp-sep{width:1px;height:14px;background:#33444f}
.lang{display:flex;border:1px solid #3a4b5c;border-radius:5px;overflow:hidden}
.lang button{
  background:#161f29;border:0;cursor:pointer;padding:6px 9px;
  font-size:10.5px;letter-spacing:.1em;color:var(--chrome-dim);
}
.lang button+button{border-left:1px solid #3a4b5c}
.lang button.on{background:var(--panel-hi);color:var(--lamp)}
.tray-btn{
  position:relative;flex:none;display:grid;place-items:center;cursor:pointer;
  width:30px;height:28px;border-radius:5px;
  background:#161f29;border:1px solid #33444f;color:var(--chrome-dim);
}
.tray-btn:hover{color:#dde7ee;border-color:#50677a}
.tray-btn[aria-expanded="true"]{background:var(--panel-hi);color:var(--lamp)}
.tray-btn svg{width:17px;height:17px}
.noti-badge{
  position:absolute;top:-5px;right:-5px;min-width:16px;height:16px;padding:0 4px;
  border-radius:9px;background:var(--alert);color:#fff;font-size:10px;font-weight:600;
  display:grid;place-items:center;
}
.tray-user{
  display:flex;align-items:center;gap:6px;cursor:pointer;height:28px;padding:0 9px;
  background:#161f29;border:1px solid #33444f;border-radius:5px;
}
.tray-user:hover{border-color:#50677a}
.tray-user[aria-expanded="true"]{background:var(--panel-hi)}
.tray-clock{flex:none;font-size:11.5px;color:var(--chrome-dim);font-variant-numeric:tabular-nums;padding:0 4px}

/* class-level display rules outrank the browser's [hidden], so every chrome
   element that is toggled with `hidden` must state it explicitly */
.launcher[hidden],.noticenter[hidden],.noti-badge[hidden],
.tray-prog[hidden],.tray-user[hidden],.popmenu[hidden],.ctx[hidden]{display:none !important}

/* ══ application menu (launcher) ══════════════════════════════════ */
.launcher{
  position:fixed;left:8px;bottom:calc(var(--bar-h) + 8px);z-index:250;
  width:380px;max-width:calc(100vw - 16px);max-height:62vh;
  display:flex;flex-direction:column;
  background:var(--panel);border:1px solid #0d1419;border-radius:10px;
  box-shadow:0 22px 56px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.05) inset;
  overflow:hidden;
}
.launcher-top{padding:12px 12px 8px}
.launcher-search{
  width:100%;padding:9px 12px;border-radius:6px;border:1px solid #3a4b5c;
  background:#151e27;color:#e8f0f5;font-size:12px;
}
.launcher-search:focus{outline:none;border-color:var(--cyan)}
.launcher-grid{
  list-style:none;margin:0;padding:6px 10px 14px;overflow-y:auto;flex:1;min-height:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:4px;align-content:start;
}
.launcher-grid li{margin:0}
.launch-item{
  width:100%;display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:14px 6px;border:0;background:none;cursor:pointer;border-radius:7px;color:var(--chrome-text);
}
.launch-item:hover,.launch-item:focus-visible{background:rgba(19,174,219,.14)}
.launch-item .glyph{
  width:42px;height:42px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(#2c3b49,#202b36);border:1px solid #3b4b5b;
}
.launch-item .glyph svg{width:22px;height:22px;stroke:var(--cyan);fill:none;stroke-width:1.6}
.launch-item.lamp-glyph .glyph svg{stroke:var(--lamp)}
.launch-item .lbl{font-size:11.5px;text-align:center;line-height:1.2;color:#c3d2dd}
.launcher-grid .none{grid-column:1/-1;text-align:center;color:var(--chrome-dim);font-size:12px;padding:18px}
.launcher-user{
  flex:none;display:flex;align-items:center;gap:11px;padding:11px 14px;
  border-top:1px solid #2f3f4f;background:#1a2530;
}
.lu-av{
  width:34px;height:34px;border-radius:8px;flex:none;display:grid;place-items:center;
  background:#dce7ec;color:#13506b;font-size:12px;font-weight:600;
  background-size:cover;background-position:center;border:1px solid #3a4b5c;
}
.lu-av.has-img{color:transparent}
.lu-id{flex:1;min-width:0}
.lu-name{display:block;font-size:12px;font-weight:600;color:#e8f0f5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lu-sub{display:block;font-size:11.5px;color:var(--chrome-dim)}
.lu-actions{display:flex;gap:4px;flex:none}
.lu-btn{
  width:30px;height:30px;display:grid;place-items:center;cursor:pointer;border-radius:6px;
  background:#223140;border:1px solid #33444f;color:var(--chrome-dim);
}
.lu-btn svg{width:16px;height:16px}
.lu-btn:hover{color:#dde7ee;border-color:#50677a}
.lu-btn.danger:hover{color:#f0a9a2;border-color:#7a3b36;background:rgba(207,75,65,.14)}

/* ══ popover menus (user, context) ════════════════════════════════ */
.popmenu{
  position:fixed;z-index:260;min-width:184px;
  background:var(--panel);border:1px solid #0d1419;border-radius:8px;padding:6px;
  box-shadow:0 18px 44px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.05) inset;
}
.pm-head{padding:8px 10px 10px;border-bottom:1px solid #2f3f4f;margin-bottom:6px}
.pm-name{display:block;font-size:12px;font-weight:600;color:#e8f0f5}
.pm-sub{display:block;font-size:11.5px;color:var(--chrome-dim);margin-top:2px}
.pm-item{
  display:block;width:100%;text-align:left;cursor:pointer;
  padding:9px 11px;border:0;border-radius:5px;background:none;color:var(--chrome-text);font-size:12px;
}
.pm-item:hover{background:rgba(255,255,255,.07)}
.pm-item.danger{color:#f0a9a2}
.pm-item.danger:hover{background:rgba(207,75,65,.16)}
.ctx{
  position:fixed;z-index:260;min-width:200px;list-style:none;margin:0;
  background:var(--panel);border:1px solid #0d1419;border-radius:8px;padding:6px;
  box-shadow:0 18px 44px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.05) inset;
}
.ctx li{margin:0}
.ctx button{
  display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:left;cursor:pointer;
  padding:8px 11px;border:0;border-radius:5px;background:none;color:var(--chrome-text);font-size:12px;
}
.ctx button:hover{background:rgba(255,255,255,.07)}
.ctx button .k{font-size:10.5px;color:var(--chrome-dim)}
.ctx .sep{height:1px;background:#2f3f4f;margin:5px 2px}

/* ══ notifications centre ═════════════════════════════════════════ */
.noticenter{
  position:fixed;right:8px;bottom:calc(var(--bar-h) + 8px);z-index:250;
  width:330px;max-width:calc(100vw - 16px);max-height:60vh;
  display:flex;flex-direction:column;
  background:var(--panel);border:1px solid #0d1419;border-radius:10px;
  box-shadow:0 22px 56px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.05) inset;overflow:hidden;
}
.noti-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;border-bottom:1px solid #2f3f4f;font-size:12px;color:#cfdce6;
}
.noti-clear{background:none;border:0;cursor:pointer;color:var(--cyan);font-size:11.5px}
.noti-list{list-style:none;margin:0;padding:8px;overflow-y:auto}
.noti-list li{
  padding:10px 11px;border-radius:6px;margin-bottom:6px;font-size:11.5px;line-height:1.45;
  background:#223140;border-left:3px solid var(--cyan);color:#dbe7ef;
}
.noti-list li.good{border-left-color:var(--ok)}
.noti-list li.bad{border-left-color:var(--alert)}
.noti-list li .nt{display:block;font-size:10px;color:var(--chrome-dim);margin-top:4px}
.noti-empty{padding:26px 14px;text-align:center;color:var(--chrome-dim);font-size:12px;margin:0}

/* ══ controls used inside apps ════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  padding:7px 12px;border-radius:4px;border:1px solid transparent;
  background:var(--ink);color:#eaf1f5;font-size:12px;font-weight:500;
}
.btn:hover{background:#22323e}
.btn.go{background:var(--cyan);color:#06222c;border-color:#0f93b9}
.btn.go:hover{background:#2bbfe8}
.btn.quiet{background:transparent;color:#1f3340;border-color:#b9c6cd}
.btn.quiet:hover{background:rgba(22,34,43,.06)}
.btn:disabled{opacity:.45;cursor:not-allowed}

.field{
  width:100%;padding:8px 11px;border-radius:4px;border:1px solid #b4c2ca;
  background:#fbfdfd;color:var(--ink);font-size:12px;
}
.field:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(19,174,219,.18)}
textarea.field{font-family:var(--mono);font-size:12px;line-height:1.55;resize:vertical;min-height:84px}

/* data: mono is for real data only, never for labels */
.data{
  font-family:var(--mono);font-size:11.5px;line-height:1.6;
  background:#16222b;color:#d8e6ef;border-radius:4px;
  padding:10px 12px;overflow-x:auto;white-space:pre-wrap;word-break:break-all;
  border-left:3px solid var(--lamp);margin:0 0 14px;
}
.flagline{
  font-family:var(--mono);font-size:12px;color:#15624a;
  background:#ddf0e6;border:1px dashed #9ccdb3;border-radius:4px;
  padding:11px 13px;word-break:break-all;
}

.slot{
  display:flex;align-items:center;gap:9px;padding:8px 11px;
  border:1px solid #c6d2d9;border-radius:4px;background:#f4f7f8;margin-bottom:6px;
  font-size:11.5px;color:var(--ink-soft);
}
.slot .sd{width:8px;height:8px;border-radius:50%;background:#c0ccd4;flex:none}
.slot.got{border-color:#9ccdb3;background:#e6f4ec;color:#15624a}
.slot.got .sd{background:var(--ok)}
.slot .sf{margin-left:auto;font-family:var(--mono);font-size:11.5px;word-break:break-all}

.chip{
  display:inline-flex;align-items:center;padding:3px 9px;border-radius:2px;
  font-size:10.5px;letter-spacing:.05em;border:1px solid;
}
.chip.easy{color:#1d6b4f;border-color:#a9d4bf;background:#e7f4ed}
.chip.medium{color:#8a5a09;border-color:#e2c58c;background:#fbf2e0}
.chip.hard{color:#8f3f32;border-color:#e0b4aa;background:#fbeae6}
.chip.extrahard{color:#5c2f72;border-color:#cdb6d9;background:#f3ebf7}
.chip.pts{color:#0a5e7d;border-color:#a9d2e0;background:#e5f3f8}
.chip.solved{color:#15624a;border-color:#9ccdb3;background:#ddf0e6}

/* challenge list + view toggle */
.viewtog{display:flex;border:1px solid #c6d2d9;border-radius:6px;overflow:hidden;flex:none}
.viewtog button{background:#fff;border:0;cursor:pointer;padding:6px 11px;font-size:13px;color:#4d6070;line-height:1}
.viewtog button+button{border-left:1px solid #c6d2d9}
.viewtog button.on{background:#e5f3f8;color:#0a5e7d}
.chtable tbody tr:hover td{background:#eef5f8}
.chtable tr.done-row b{color:#15624a}
.chtable tr.clock-row td:first-child{box-shadow:inset 3px 0 0 var(--lamp)}
.clist{display:grid;gap:9px;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));margin-top:8px}
.card{
  text-align:left;cursor:pointer;padding:10px 12px;
  background:#f4f7f8;border:1px solid #c6d2d9;border-radius:4px;
  border-left:3px solid var(--cdiff,#c6d2d9);
  display:flex;flex-direction:column;gap:5px;color:var(--ink);
}
.card:hover{background:#fff;border-color:#9fb2bd}
.card.on-clock{border-left-color:var(--lamp)}
.card.done{border-left-color:var(--ok)}
.card .ct{font-size:13.5px;font-weight:600}
.card .cs{font-family:var(--read);font-size:12px;line-height:1.5;color:var(--ink-soft)}
.card .cr{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:auto}

/* terminal-ish decoder output */
.steps{margin:0;padding:0 0 0 1.15em}
.steps li{font-family:var(--read);font-size:13.5px;line-height:1.6;margin-bottom:9px;max-width:60ch}

/* full walkthrough guide (authored HTML ported from the arena) */
.guide-paper .guide h3{
  font-family:var(--ui);font-size:14px;font-weight:600;letter-spacing:.01em;
  color:#13506b;margin:22px 0 8px;padding-bottom:5px;border-bottom:1px solid #d3dde3;
}
.guide-paper .guide h3:first-child{margin-top:0}
.guide-paper .guide p{font-family:var(--read);font-size:13.5px;line-height:1.6;max-width:62ch;margin:0 0 11px}
.guide-paper .guide ul,.guide-paper .guide ol{margin:0 0 13px;padding-left:1.3em}
.guide-paper .guide li{font-family:var(--read);font-size:13px;line-height:1.55;margin-bottom:7px;max-width:60ch}
.guide-paper .guide pre{
  background:#16222b;color:#d8e6ef;border-left:3px solid var(--lamp);border-radius:4px;
  padding:12px 14px;margin:0 0 13px;overflow-x:auto;
}
.guide-paper .guide pre code{background:none;padding:0;color:inherit;font-size:12px;line-height:1.6}
.guide-paper .guide code{
  font-family:var(--mono);font-size:12px;background:#e2ebef;color:#13506b;
  padding:1px 5px;border-radius:3px;word-break:break-word;
}
.guide-paper .guide b{color:#0f1a22}
.guide-paper .guide .hint{
  font-family:var(--read);font-size:12.5px;line-height:1.55;color:#5c4a1d;
  background:#fbf2df;border:1px solid #ecd9a8;border-left:3px solid var(--lamp);
  border-radius:4px;padding:11px 13px;margin:14px 0 0;
}

.board{width:100%;border-collapse:collapse;font-size:12px;border:1px solid #cdd8df;background:#fff}
.board thead th{
  text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#4d6070;background:#e7eef2;padding:8px 11px;
  border-bottom:2px solid #bcc9d1;border-right:1px solid #d3dde3;
}
.board thead th:last-child{border-right:0}
.board td{padding:7px 11px;border-bottom:1px solid #e4ebef;border-right:1px solid #eef3f5;color:var(--ink)}
.board td:last-child{border-right:0}
.board tbody tr:last-child td{border-bottom:0}
.board tbody tr:nth-child(even) td{background:#f6f9fb}
.board tbody tr:hover td{background:#eaf4f8}
.board td.num,.board th.num{text-align:right;font-variant-numeric:tabular-nums}
.board tr.me td{background:#dcedf5 !important;box-shadow:inset 2px 0 0 var(--cyan)}
.board .rk{font-family:var(--mono);color:var(--ink-soft)}
.board tr.p1 .rk{color:#9a6a05;font-weight:700}

.empty{font-family:var(--read);font-size:13.5px;color:var(--ink-soft);max-width:48ch}

/* category group headers in the Challenges app */
.cat-head{grid-column:1/-1;display:flex;align-items:baseline;justify-content:space-between;
  margin:12px 0 2px;padding-bottom:4px;border-bottom:1px solid #d3dde3}
.cat-head:first-child{margin-top:2px}
.cat-head .ch-name{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#13506b}
.cat-head .ch-count{font-size:11px;color:#4d6070;font-variant-numeric:tabular-nums}
.board tr.cat-row td{background:#eef4f7;color:#13506b;font-size:10.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;padding:7px 11px}
.board tr.cat-row:hover td{background:#eef4f7}
.board tr.cat-row .cat-row-n{float:right;color:#4d6070;font-weight:600}

/* teacher: competition create form */
.compform .catpick{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--ink);
  background:#f1f5f7;border:1px solid #cdd8df;border-radius:4px;padding:4px 9px;cursor:pointer;user-select:none}
.compform .catpick:hover{background:#e7eef2}
.compform input[type=checkbox]{accent-color:var(--cyan)}

/* in-desktop browser */
.browser{height:100%;display:flex;flex-direction:column;background:var(--paper);overflow:hidden}
.br-bar{display:flex;align-items:center;gap:6px;padding:6px 8px;border-bottom:1px solid #c6d2d9;background:#eef3f5}
.br-nav{width:28px;height:28px;flex:0 0 auto;border:1px solid #c0ccd4;background:#fff;border-radius:4px;
  color:#2b3c49;font-size:14px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.br-nav:hover:not(:disabled){background:#e7eef2;border-color:#9fb2bd}
.br-nav:disabled{opacity:.4;cursor:default}
.br-addrwrap{flex:1;min-width:0;margin:0}
.br-addr{width:100%;padding:6px 11px;border:1px solid #b4c2ca;border-radius:14px;background:#fbfdfd;
  color:var(--ink);font-size:12px;font-family:var(--mono)}
.br-addr:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(19,174,219,.15)}
.br-lock{flex:0 0 auto;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#15624a;background:#e3f2ea;border:1px solid #bfe0cd;border-radius:4px;padding:3px 7px}
.br-view{flex:1;min-height:0;position:relative;background:#fff}
.br-frame{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff}
.br-frame[hidden],.br-home[hidden]{display:none}
.br-home{position:absolute;inset:0;overflow-y:auto;padding:22px;background:var(--paper)}
.br-home-h{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#13506b;margin-bottom:12px}
.br-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.br-card{text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:4px;padding:12px 14px;
  background:#f4f7f8;border:1px solid #c6d2d9;border-left:3px solid var(--cyan);border-radius:4px;color:var(--ink)}
.br-card:hover{background:#fff;border-color:#9fb2bd}
.br-card-n{font-size:13px;font-weight:600}
.br-card-u{font-family:var(--mono);font-size:11.5px;color:#13506b}
.br-card-d{font-family:var(--read);font-size:12px;color:var(--ink-soft);line-height:1.45}
.br-tip{font-family:var(--read);font-size:12px;color:var(--ink-soft);margin-top:16px;max-width:62ch}
.br-blocked{max-width:52ch;margin:44px auto 0;text-align:center}
.br-blocked h3{color:#8a2b2b;margin:0}
.br-blocked p{font-family:var(--read);font-size:12.5px;color:var(--ink-soft);line-height:1.55;margin:10px 0 16px}

/* teacher portal */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:9px;margin:4px 0 8px}
.tile{background:#eef3f5;border:1px solid #c6d2d9;border-radius:5px;padding:13px 15px}
.tile .tn{font-size:24px;font-weight:600;color:#13506b;font-variant-numeric:tabular-nums;line-height:1}
.tile .tl{font-size:11px;letter-spacing:.06em;color:var(--ink-soft);margin-top:5px}
.arow{display:flex;flex-wrap:wrap;gap:5px}
.abtn{
  font-size:11.5px;padding:5px 9px;cursor:pointer;white-space:nowrap;
  background:#fff;border:1px solid #bcc9d1;border-radius:4px;color:#1f3340;
}
.abtn:hover{background:#eef3f5;border-color:#93a7b2}
.abtn.danger{color:#9a362c;border-color:#e0b4aa}
.abtn.danger:hover{background:#fbeae6}
.dangerzone{border:1px solid #e0b4aa;border-radius:6px;overflow:hidden;background:#fdf6f4}
.drow{display:flex;align-items:center;gap:14px;padding:12px 14px;border-bottom:1px solid #f0d9d2}
.drow:last-child{border-bottom:0}
.dtext{flex:1;font-family:var(--read);font-size:12.5px;line-height:1.5;color:#5a3b35}

/* impersonation banner (teacher viewing as a student) */
.impbar{
  position:fixed;left:0;right:0;top:0;z-index:150;
  display:flex;align-items:center;justify-content:center;gap:12px;
  padding:7px 14px;font-size:12px;
  background:#4a3410;color:#f3d9a6;border-bottom:1px solid #2a1d08;
}
.impbar .linklike{
  background:none;border:0;cursor:pointer;color:#ffd98a;
  text-decoration:underline;font-size:12px;padding:0;
}
body:has(.impbar) .desk{top:34px}

/* ══ sign-in gate ═════════════════════════════════════════════════ */
.gate{
  position:fixed;inset:0;z-index:400;display:grid;place-items:center;padding:20px;
  background:radial-gradient(70% 60% at 50% 32%,#1d2835,#0c1217 78%);
}
/* a class-level display rule outranks the browser's [hidden] UA style, so hiding
   has to be stated explicitly or the gate would stay over the desk */
.gate[hidden]{display:none}
.desk[hidden]{display:none}
.gate-card{
  width:100%;max-width:358px;
  background:var(--panel);border:1px solid #334351;border-radius:7px;
  padding:26px 26px 24px;
  box-shadow:0 26px 60px rgba(0,0,0,.6);
}
.gate-lamps{display:flex;gap:6px;margin-bottom:17px}
.gate-lamps i{width:7px;height:7px;border-radius:50%;background:#3a4a58}
.gate-lamps i:first-child{background:var(--lamp);box-shadow:0 0 8px rgba(240,165,46,.75)}
.gate-card h1{margin:0 0 6px;font-size:21px;font-weight:600;color:#e8f0f5}
.gate-lead{margin:0 0 20px;font-size:12px;line-height:1.55;color:var(--chrome-dim)}
.gate-card label{display:block;font-size:11px;letter-spacing:.07em;color:var(--chrome-dim);margin:14px 0 6px}
.gate-card input{
  width:100%;padding:10px 12px;border-radius:4px;
  border:1px solid #40515f;background:#151e27;color:#e8f0f5;font-size:12.5px;
}
.gate-card input:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(19,174,219,.2)}

/* show/hide password toggle */
.pw-holder{position:relative;display:block}
.gate-card .pw-holder input{padding-right:42px}
.pw-eye{position:absolute;right:5px;top:50%;transform:translateY(-50%);background:none;border:0;cursor:pointer;
  color:var(--chrome-dim);padding:5px;display:flex;border-radius:5px;line-height:0}
.pw-eye:hover{color:#e3ecf2}
.pw-eye.on{color:var(--cyan)}
.pw-eye svg{width:18px;height:18px}
.gate-go{
  width:100%;margin-top:22px;padding:11px;cursor:pointer;
  border:1px solid #0f93b9;border-radius:4px;background:var(--cyan);color:#06222c;
  font-size:12px;font-weight:600;
}
.gate-go:hover{background:#2bbfe8}
.gate-error{
  margin:16px 0 0;padding:9px 11px;border-radius:4px;font-size:12px;
  background:rgba(207,75,65,.14);border:1px solid rgba(207,75,65,.45);color:#f0b4ae;
}
.gate-ok{
  margin:16px 0 0;padding:9px 11px;border-radius:4px;font-size:12px;
  background:rgba(55,153,107,.16);border:1px solid rgba(55,153,107,.5);color:#9bd9ba;
}
.gate-note{margin:14px 0 0;font-size:11.5px;color:var(--chrome-dim)}
.gate-tabs{display:flex;gap:4px;margin:4px 0 18px;border-bottom:1px solid #334351}
.gate-tabs button{
  background:none;border:0;cursor:pointer;padding:9px 4px;margin-right:14px;
  font-size:12px;color:var(--chrome-dim);position:relative;
}
.gate-tabs button.on{color:#e8f0f5}
.gate-tabs button.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--cyan)}
.gate-links{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:16px}
.gate-links a{font-size:11.5px;color:var(--cyan);text-decoration:none}
.gate-links a:hover{text-decoration:underline}

/* ══ toasts ═══════════════════════════════════════════════════════ */
.toasts{
  position:fixed;right:12px;bottom:calc(var(--bar-h) + 12px);z-index:350;
  display:flex;flex-direction:column;gap:8px;align-items:flex-end;pointer-events:none;
}
.toast{
  max-width:330px;padding:11px 14px;border-radius:4px;font-size:12px;line-height:1.5;
  background:#223140;border:1px solid #3c4e5f;border-left:3px solid var(--cyan);
  color:#dbe7ef;box-shadow:0 10px 26px rgba(0,0,0,.45);
}
.toast.good{border-left-color:var(--ok)}
.toast.bad{border-left-color:var(--alert)}

/* ══ file manager ═════════════════════════════════════════════════ */
.fm{height:100%;display:flex;background:var(--paper)}
.fm-side{width:150px;flex:none;background:#e3eaee;border-right:1px solid #c6d2d9;padding:12px 8px;overflow-y:auto}
.fm-side-h{font-size:10.5px;letter-spacing:.08em;color:#6b7d8b;text-transform:uppercase;padding:0 8px 8px}
.fm-place{display:flex;align-items:center;gap:9px;width:100%;text-align:left;cursor:pointer;
  padding:8px 9px;border:0;border-radius:6px;background:none;color:#2b3c49;font-size:12px}
.fm-place:hover{background:#d4dee4}
.fm-place.on{background:#cfe6f0;color:#0a5e7d}
.fm-main{flex:1;min-width:0;display:flex;flex-direction:column}
.fm-tool{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid #d9e1e5;background:#eef3f5}
.fm-ico{width:30px;height:28px;border:1px solid #c6d2d9;border-radius:6px;background:#fff;cursor:pointer;color:#4d6070;font-size:14px;flex:none}
.fm-ico:hover{background:#eef5f8}
.fm-path{flex:1;min-width:0;font-size:12px;color:#2b3c49;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:#fff;border:1px solid #c6d2d9;border-radius:6px;padding:6px 11px}
.fm-body{flex:1;min-height:0;overflow-y:auto;padding:14px}
.fm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px}
.fm-item{display:flex;flex-direction:column;align-items:center;gap:7px;padding:13px 6px;cursor:pointer;
  border:1px solid transparent;border-radius:8px;background:none;color:var(--ink)}
.fm-item:hover{background:#fff;border-color:#c6d2d9}
.fm-item-ic{width:40px;height:40px}
.fm-item-n{font-size:11.5px;text-align:center;word-break:break-word;line-height:1.25;color:var(--ink)}
.fm-item-s{font-size:10.5px;color:var(--ink-soft)}

/* ══ terminal app ═════════════════════════════════════════════════ */
.term{
  height:100%;display:flex;flex-direction:column;background:#0c1319;
  font-family:var(--mono);font-size:12px;line-height:1.5;color:#cfe3d6;
}
.term-out{flex:1;overflow-y:auto;padding:12px 14px;white-space:pre-wrap;word-break:break-word}
.term-out>div{min-height:1.2em}
.term-echo{color:#8aa9bb}
.term-err{color:#f0a9a2}
.term-sys{color:var(--lamp)}
.term-in{display:flex;align-items:center;gap:8px;padding:9px 14px;border-top:1px solid #1d2a33;background:#0a1016}
.term-ps{color:var(--cyan);flex:none}
.term-in input{flex:1;background:none;border:0;outline:none;color:#eaf5ee;font-family:inherit;font-size:inherit}

/* reduced-motion preference (Settings app) */
:root[data-reduce-motion] *{animation:none !important;transition:none !important}

/* ══ boot: one orchestrated moment, then nothing moves on its own ══ */
@keyframes lampwarm{0%{opacity:0}40%{opacity:1}55%{opacity:.35}100%{opacity:1}}
@keyframes settle{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
body.booting .taskbar{animation:lampwarm .5s ease both}
body.booting .icons li{animation:settle .32s ease both;animation-delay:calc(var(--i,0)*42ms + .18s)}

/* ══ phones: windows become stacked sheets, not tiny draggable boxes ══ */
@media (max-width:719px){
  :root{--bar-h:48px}
  .taskbar{gap:6px;padding:0 6px}
  .start-text{display:none}
  .start{padding:0 10px}
  /* on a phone the tray keeps only the clock + essentials; progress lives in
     the Challenges window, so the bar stays uncrowded */
  .tray-prog{display:none !important}
  .callsign{max-width:16vw}
  .tray{gap:5px}
  .lang button{padding:6px 7px}
  .tray-clock{display:none}
  .launcher,.noticenter{width:auto;left:8px;right:8px}
  .icons{
    grid-auto-flow:row;grid-template-rows:none;
    grid-template-columns:repeat(auto-fill,minmax(84px,1fr));
    padding:12px 8px;gap:2px;align-content:start;
  }
  .icon{width:100%}
  .win,.win.max{
    inset:0 !important;width:100% !important;height:100% !important;
    border-radius:0;border:0;
  }
  .win:not(.focused){display:none}
  .title{border-radius:0;cursor:default}
  .resize{display:none}
  .paper{padding:12px 12px 18px}
  .clist{grid-template-columns:1fr}
  .toasts{left:12px;right:12px;align-items:stretch}
  .toast{max-width:none}
}

@media (prefers-reduced-motion:reduce){
  body.booting .taskbar,body.booting .icons li{animation:none}
  *{transition:none !important}
}

/* =====================================================================
 *  Dark theme. The instrument chrome (taskbar, title bars, desktop) is
 *  dark in both modes; this darkens the "paper" content surfaces so a
 *  whole window reads dark. Toggled by data-theme="dark" on <html>.
 * ===================================================================== */
[data-theme="dark"]{ --paper:#1b2530; --ink:#dce7ef; --ink-soft:#93a7b6; --line:#33444f; }
[data-theme="dark"] .paper{
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
}
[data-theme="dark"] .paper h3{color:#eaf2f8}
[data-theme="dark"] .paper h4{color:#aebfcd}
[data-theme="dark"] .paper a{color:#5cc0e6}

[data-theme="dark"] .card{background:#222e3a;border-color:#33444f;border-left-color:#33444f}
[data-theme="dark"] .card:hover{background:#283542;border-color:#44576a}
[data-theme="dark"] .cat-head{border-bottom-color:#33444f}
[data-theme="dark"] .cat-head .ch-name{color:#7fc7e6}

[data-theme="dark"] .board{background:#1e2832;border-color:#33444f}
[data-theme="dark"] .board thead th{background:#273441;color:#9fb4c2;border-bottom-color:#3a4c5c;border-right-color:#33444f}
[data-theme="dark"] .board td{border-bottom-color:#2a3844;border-right-color:#263340;color:var(--ink)}
[data-theme="dark"] .board tbody tr:nth-child(even) td{background:#222e39}
[data-theme="dark"] .board tbody tr:hover td{background:#2a3b47}
[data-theme="dark"] .board tr.me td{background:#1e3a45 !important}
[data-theme="dark"] .board tr.cat-row td{background:#243441;color:#7fc7e6}
[data-theme="dark"] .board tr.cat-row:hover td{background:#243441}

[data-theme="dark"] .field{background:#141d26;border-color:#3a4c5c;color:var(--ink)}
[data-theme="dark"] .btn.quiet{color:#cfe0ea;border-color:#44576a}
[data-theme="dark"] .btn.quiet:hover{background:rgba(255,255,255,.07)}
[data-theme="dark"] .viewtog{border-color:#33444f}
[data-theme="dark"] .viewtog button{background:#222e3a;color:#9fb4c2}
[data-theme="dark"] .viewtog button+button{border-left-color:#33444f}
[data-theme="dark"] .viewtog button.on{background:#1d3a45;color:#7fc7e6}

[data-theme="dark"] .tile{background:#222e3a;border-color:#33444f}
[data-theme="dark"] .tile .tn{color:#7fc7e6}

[data-theme="dark"] .slot{background:#1e2832;border-color:#33444f}
[data-theme="dark"] .slot .sd{background:#3a4c5c}
[data-theme="dark"] .slot.got{background:#143027;border-color:#2f6b50;color:#5fcf9b}
[data-theme="dark"] .empty{color:var(--ink-soft)}

[data-theme="dark"] .guide-paper .guide h3{color:#7fc7e6;border-bottom-color:#33444f}
[data-theme="dark"] .guide-paper .guide code{background:#28323c;color:#9ad0ea}
[data-theme="dark"] .guide-paper .guide b{color:#eaf2f8}
[data-theme="dark"] .guide-paper .guide .hint{background:#2a2614;border-color:#5a4a1d;color:#d9c48a}

[data-theme="dark"] .fm{background:var(--paper)}
[data-theme="dark"] .fm-side{background:#1a242e;border-right-color:#33444f}
[data-theme="dark"] .fm-side-h{color:#7f93a3}
[data-theme="dark"] .fm-place:hover{background:#243441}
[data-theme="dark"] .fm-place.on{background:#1d3a45;color:#7fc7e6}
[data-theme="dark"] .fm-tool{background:#222e3a;border-bottom-color:#33444f}
[data-theme="dark"] .fm-ico{background:#1a242e;border-color:#33444f;color:#9fb4c2}
[data-theme="dark"] .fm-ico:hover{background:#28323c}
[data-theme="dark"] .fm-path{color:#b7c6d2}
[data-theme="dark"] .fm-item:hover{background:#222e3a;border-color:#33444f}

[data-theme="dark"] .br-bar{background:#222e3a;border-bottom-color:#33444f}
[data-theme="dark"] .br-nav{background:#1a242e;border-color:#33444f;color:#b7c6d2}
[data-theme="dark"] .br-nav:hover:not(:disabled){background:#28323c;border-color:#44576a}
[data-theme="dark"] .br-addr{background:#141d26;border-color:#3a4c5c;color:var(--ink)}
[data-theme="dark"] .br-view{background:#1b2530}
[data-theme="dark"] .br-home{background:var(--paper)}
[data-theme="dark"] .br-card{background:#222e3a;border-color:#33444f;border-left-color:var(--cyan)}
[data-theme="dark"] .br-card:hover{background:#28323c;border-color:#44576a}
[data-theme="dark"] .br-card-u{color:#7fc7e6}
[data-theme="dark"] .br-home-h{color:#7fc7e6}
[data-theme="dark"] .br-blocked h3{color:#e98f86}

/* theme toggle button icon swap */
#trayTheme .theme-sun{display:none}
[data-theme="dark"] #trayTheme .theme-sun{display:inline-flex}
[data-theme="dark"] #trayTheme .theme-moon{display:none}

/* ---------- Challenges: progress header, category filters, difficulty cards ---------- */
.ch-head{margin-bottom:10px}
.ch-head-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.pbar{height:6px;border-radius:4px;background:rgba(22,34,43,.1);overflow:hidden;margin:9px 0}
.pfill{height:100%;width:0;background:linear-gradient(90deg,var(--cyan),#2bd0a8);border-radius:4px;transition:width .35s ease}
.ch-filters{display:flex;gap:6px;flex-wrap:wrap}
.ch-fil{display:inline-flex;align-items:center;gap:6px;font-size:11px;padding:4px 9px;border-radius:13px;
  border:1px solid var(--line);background:transparent;color:var(--ink-soft);cursor:pointer;white-space:nowrap;line-height:1.4}
.ch-fil:hover{border-color:#9fb2bd;color:var(--ink)}
.ch-fil.on{background:var(--cyan);border-color:#0f93b9;color:#06222c;font-weight:600}
.ch-fil-n{font-size:9.5px;font-weight:700;background:rgba(22,34,43,.08);color:var(--ink-soft);
  border-radius:8px;padding:1px 6px;font-variant-numeric:tabular-nums}
.ch-fil.on .ch-fil-n{background:rgba(0,0,0,.18);color:#06222c}

/* difficulty accents on cards (the done/on-clock status colours still win) */
.card.d-easy{--cdiff:#3f9e74}
.card.d-medium{--cdiff:#d79a2b}
.card.d-hard{--cdiff:#cf6a5a}
.card.d-extrahard,.card.d-insane,.card.d-expert{--cdiff:#8f6ab5}

[data-theme="dark"] .pbar{background:rgba(255,255,255,.08)}
[data-theme="dark"] .ch-fil-n{background:rgba(255,255,255,.08)}

/* ---------- Settings: grouped cards, switches, segmented control ---------- */
.set-group{border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.45);margin:0 0 13px;overflow:hidden}
.set-group-h{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);
  padding:8px 13px 7px;background:rgba(22,34,43,.035);border-bottom:1px solid var(--line)}
.set-row{display:flex;align-items:center;gap:14px;padding:11px 13px}
.set-row+.set-row{border-top:1px solid var(--line)}
.set-row .srl{flex:1;min-width:0}
.set-row .srt{font-size:12.5px;font-weight:600;color:var(--ink)}
.set-row .srd{font-size:11px;color:var(--ink-soft);margin-top:2px;line-height:1.4}
.set-about{font-family:var(--read);font-size:12.5px;color:var(--ink-soft);line-height:1.55;margin:0;padding:11px 13px}

.switch{position:relative;width:40px;height:22px;border-radius:12px;border:1px solid #b4c2ca;background:#d7e0e5;
  cursor:pointer;padding:0;flex:none;transition:background .15s,border-color .15s}
.switch[aria-checked="true"]{background:var(--cyan);border-color:#0f93b9}
.switch-knob{position:absolute;top:1px;left:1px;width:18px;height:18px;border-radius:50%;background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.25);transition:left .15s}
.switch[aria-checked="true"] .switch-knob{left:19px}

.seg{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden;flex:none}
.seg button{background:transparent;border:0;cursor:pointer;padding:6px 14px;font-size:12px;color:var(--ink-soft)}
.seg button+button{border-left:1px solid var(--line)}
.seg button.on{background:rgba(19,174,219,.14);color:var(--cyan);font-weight:600}

[data-theme="dark"] .set-group{background:rgba(255,255,255,.03)}
[data-theme="dark"] .set-group-h{background:rgba(255,255,255,.04)}
[data-theme="dark"] .switch{background:#2c3a47;border-color:#3a4c5c}
[data-theme="dark"] .switch-knob{background:#e6eef3}

/* teacher data tables: search + pager */
.dtable{margin:8px 0 4px}
.dt-bar{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.dt-search{flex:1;min-width:0;max-width:320px;padding:6px 10px;border:1px solid var(--line);border-radius:6px;
  background:#fbfdfd;color:var(--ink);font-size:12px}
.dt-search:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(19,174,219,.15)}
.dt-count{font-size:11px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.dt-nav{display:flex;align-items:center;gap:10px;margin-top:7px}
.dt-pg{border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:5px;
  padding:4px 10px;font-size:11.5px;cursor:pointer}
.dt-pg:hover:not(:disabled){background:rgba(19,174,219,.1);border-color:#9fb2bd}
.dt-pg:disabled{opacity:.4;cursor:default}
.dt-pginfo{font-size:11px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
[data-theme="dark"] .dt-search{background:#141d26;border-color:#3a4c5c}

/* browser: start-page search box */
.br-search{display:flex;gap:8px;margin:0 0 18px;max-width:520px}
.br-search-in{flex:1;padding:9px 13px;border:1px solid #c6d2d9;border-radius:20px;background:#fff;color:var(--ink);font-size:13px}
.br-search-in:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(19,174,219,.15)}
.br-search-go{padding:9px 18px;border:0;border-radius:20px;background:var(--cyan);color:#06222c;font-weight:600;font-size:12.5px;cursor:pointer}
.br-search-go:hover{background:#2bbfe8}
[data-theme="dark"] .br-search-in{background:#141d26;border-color:#3a4c5c}

/* browser: JavaScript console panel */
.br-con-btn.on{color:var(--cyan)}
.br-console{position:absolute;left:0;right:0;bottom:0;height:42%;display:flex;flex-direction:column;
  background:#0c1319;border-top:2px solid #2a3b47;z-index:3}
.br-console[hidden]{display:none}
.br-con-out{flex:1;overflow-y:auto;padding:8px 10px;font-family:var(--mono);font-size:12px;line-height:1.5;
  color:#cfdce6;white-space:pre-wrap;word-break:break-word}
.br-con-echo{color:#8aa9bb}
.br-con-res{color:#9ccdb3}
.br-con-err{color:#f0a9a2}
.br-con-hint{color:#6b7f8d;font-style:italic}
.br-con-in{display:flex;align-items:center;gap:6px;padding:6px 10px;border-top:1px solid #1c2730;background:#10191f}
.br-con-ps{color:var(--cyan);font-family:var(--mono);font-weight:700}
.br-con-cmd{flex:1;background:none;border:0;outline:none;color:#eaf5ee;font-family:var(--mono);font-size:12.5px}

/* report app toolbar */
.rep-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 10px}