/* GENERATED by tools/gen_light_css.py from css/style.css, css/drawdeck.css — do not edit by hand.
   Light mode only: every rule is scoped to html[data-mode="light"] (js/mode.js sets it).
   Hand-written fixes and the mode switch's own styles live in css/light.extra.css, appended below. */

/* ---- from css/style.css ---- */
:root:where([data-mode="light"]){
  --ink-0:#edeff2;
  --ink-1:#f3f4f6;
  --ink-2:#f8f9fa;
  --ink-3:#fefefe;
  --line:rgba(15,23,42,0.099);
  --text-hi:#21242a;
  --text-lo:#636975;
  --shadow-panel:0 12px 30px rgba(0,0,0,0.158), 0 2px 6px rgba(0,0,0,0.113);
}
:where(html[data-mode="light"]) .bg-layer{
  background:var(--theme-bg, linear-gradient(180deg,#fafbfc 0%, #fdfefe 38%, #fefefe 62%, #fdfefe 100%));
}
:where(html[data-mode="light"]) .bg-overlay{
  background:rgba(6,9,14,0.168);
}
:where(html[data-mode="light"]) .bg-logo-mark{
  filter:drop-shadow(0 4px 10px rgba(0,0,0,0.18));
}
:where(html[data-mode="light"]) .brand-mark{
  color:#b5710d;
}
:where(html[data-mode="light"]) .dock-top-item{
  background:rgba(242,243,245,0.55);
}
:where(html[data-mode="light"]) .dock-top-item:hover{
  background:rgba(248,249,250,0.85);
}
:where(html[data-mode="light"]) .dock-top-item.active{
  color:#bf7402;
}
:where(html[data-mode="light"]) .class-pill{
  background:rgba(242,243,245,0.55);
}
:where(html[data-mode="light"]) .class-pill:hover{
  background:rgba(248,249,250,0.85);
}
:where(html[data-mode="light"]) .class-pill-icon{
  color:#b5710d;
}
:where(html[data-mode="light"]) .class-menu{
  box-shadow:0 14px 34px rgba(0,0,0,0.203);
}
:where(html[data-mode="light"]) .class-menu-item:hover{
  background:rgba(15,23,42,0.066);
}
:where(html[data-mode="light"]) .class-menu-item.active{
  color:#bf7402;
}
:where(html[data-mode="light"]) .class-row-name{
  background:rgba(242,243,245,0.55);
}
:where(html[data-mode="light"]) .class-row-btn:hover:not(:disabled){
  background:rgba(15,23,42,0.066);
}
:where(html[data-mode="light"]) .class-row-btn:disabled{
  color:#bf7402;
}
:where(html[data-mode="light"]) .class-row-btn.del:hover{
  color:#a81a1a;
}
:where(html[data-mode="light"]) .class-add-row input{
  background:rgba(242,243,245,0.55);
}
:where(html[data-mode="light"]) .lang-toggle{
  background:rgba(242,243,245,0.55);
}
:where(html[data-mode="light"]) .lang-toggle button:not(.active):hover{
  background:rgba(15,23,42,0.066);
}
:where(html[data-mode="light"]) .icon-btn{
  background:rgba(242,243,245,0.55);
}
:where(html[data-mode="light"]) .icon-btn:hover{
  background:rgba(248,249,250,0.85);
}
:where(html[data-mode="light"]) .widget{
  background:rgba(243,244,246,0.86);
}
:where(html[data-mode="light"]) .widget.dragging{
  box-shadow:0 20px 40px rgba(0,0,0,0.225);
}
:where(html[data-mode="light"]) .widget-head{
  background:rgba(15,23,42,0.022);
}
:where(html[data-mode="light"]) .widget-drag:hover{
  background:rgba(15,23,42,0.066);
}
:where(html[data-mode="light"]) .widget-min:hover{
  background:rgba(15,23,42,0.088);
}
:where(html[data-mode="light"]) .widget-close:hover{
  color:#a81a1a;
}
:where(html[data-mode="light"]) .widget-pin:hover{
  background:rgba(15,23,42,0.088);
}
:where(html[data-mode="light"]) .clock-face{
  box-shadow:inset 0 0 0 4px rgba(220,215,201,0.45);
}
:where(html[data-mode="light"]) .clock-hand{
  background:#f7f8f8;
}
:where(html[data-mode="light"]) .clock-dot{
  background:#f7f8f8;
}
:where(html[data-mode="light"]) .clock-lunar{
  color:#bf7402;
}
:where(html[data-mode="light"]) .wbtn:hover{
  background:#fefefe;
}
:where(html[data-mode="light"]) .traffic-housing{
  background:linear-gradient(180deg,#fcfcfc 0%, #f2f3f3 100%);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,0.225), inset 0 2px 4px rgba(0,0,0,0.03), 0 10px 20px rgba(0,0,0,0.158);
}
:where(html[data-mode="light"]) .traffic-hood{
  background:#efefef;
}
:where(html[data-mode="light"]) .traffic-base{
  background:#efefef;
}
:where(html[data-mode="light"]) .traffic-lamp{
  background:radial-gradient(circle at 35% 30%, #fefefe, #f2f2f3 72%);
  box-shadow:inset 0 3px 6px rgba(0,0,0,0.315), inset 0 -2px 3px rgba(0,0,0,0.02);
}
:where(html[data-mode="light"]) .traffic-lamp.red.on{
  box-shadow:0 0 22px 4px rgba(224,85,90,.85), inset 0 -3px 6px rgba(0,0,0,0.113);
}
:where(html[data-mode="light"]) .traffic-lamp.yellow.on{
  box-shadow:0 0 22px 4px rgba(232,201,61,.85), inset 0 -3px 6px rgba(0,0,0,0.113);
}
:where(html[data-mode="light"]) .traffic-lamp.green.on{
  box-shadow:0 0 22px 4px rgba(79,209,138,.85), inset 0 -3px 6px rgba(0,0,0,0.113);
}
:where(html[data-mode="light"]) .dice-stage .die-face{
  filter:drop-shadow(0 6px 10px rgba(0,0,0,0.158));
}
:where(html[data-mode="light"]) .file-drop-btn{
  background:rgba(15,23,42,0.055);
}
:where(html[data-mode="light"]) .file-list li{
  background:rgba(15,23,42,0.033);
}
:where(html[data-mode="light"]) .file-list li button:hover{
  color:#a81a1a;
}
:where(html[data-mode="light"]) .lap-list li{
  background:rgba(15,23,42,0.033);
}
:where(html[data-mode="light"]) .game-tile{
  background:rgba(15,23,42,0.033);
}
:where(html[data-mode="light"]) .game-tile-remove{
  background:rgba(0,0,0,0.15);
}
:where(html[data-mode="light"]) .game-tile-remove:hover{
  color:#a81a1a;
}
:where(html[data-mode="light"]) .game-tile-help{
  background:rgba(0,0,0,0.15);
}
:where(html[data-mode="light"]) .game-tile-help:hover{
  color:#bf7402;
}
:where(html[data-mode="light"]) .sb-card{
  border:2px dashed rgba(216,214,210,0.25);
}
:where(html[data-mode="light"]) .sb-btn{
  color:#1a1a1a;
}
:where(html[data-mode="light"]) .sb-btn.minus{
  border:1.5px solid rgba(216,214,210,0.3);
}
:where(html[data-mode="light"]) .sb-btn.minus:hover{
  background:rgba(248,248,247,0.06);
}
:where(html[data-mode="light"]) .sb-reset:hover{
  background:rgba(15,23,42,0.055);
}
:where(html[data-mode="light"]) .dock{
  background:rgba(240,241,244,0.72);
}
:where(html[data-mode="light"]) .dock-item{
  background:rgba(15,23,42,0.033);
}
:where(html[data-mode="light"]) .dock-item:hover{
  background:rgba(15,23,42,0.088);
}
:where(html[data-mode="light"]) .dock-item.active{
  color:#bf7402;
}
:where(html[data-mode="light"]) .dock-item.active .dock-ic{
  color:#bf7402;
}
:where(html[data-mode="light"]) .dock-ic{
  background:rgba(15,23,42,0.044);
}
:where(html[data-mode="light"]) .app-tray-tab{
  background:rgba(240,241,244,0.72);
}
:where(html[data-mode="light"]) .app-tray-tab:hover{
  background:rgba(15,23,42,0.11);
}
:where(html[data-mode="light"]) .app-tray-backdrop{
  background:rgba(6,9,14,0.33);
}
:where(html[data-mode="light"]) .app-tray{
  box-shadow:0 -16px 40px rgba(0,0,0,0.203);
}
:where(html[data-mode="light"]) .app-tray-item{
  background:rgba(15,23,42,0.033);
}
:where(html[data-mode="light"]) .app-tray-item:hover{
  background:rgba(15,23,42,0.088);
}
:where(html[data-mode="light"]) .app-tray-item.active{
  color:#bf7402;
}
:where(html[data-mode="light"]) .app-tray-item.active .dock-ic{
  color:#bf7402;
}
:where(html[data-mode="light"]) .layout-mode-opt:hover{
  background:rgba(15,23,42,0.033);
}
:where(html[data-mode="light"]) .lock-hint{
  color:#bf7402 !important;
}
:where(html[data-mode="light"]) .drawer{
  box-shadow:-16px 0 40px rgba(0,0,0,0.18);
}
:where(html[data-mode="light"]) .upload-row:hover{
  background:rgba(15,23,42,0.033);
}
:where(html[data-mode="light"]) .ghost-btn.danger{
  color:#a81a1a;
}
:where(html[data-mode="light"]) .pro-modal-backdrop{
  background:rgba(6,9,14,0.36);
}
:where(html[data-mode="light"]) .dock-vis-row{
  background:rgba(15,23,42,0.022);
}
:where(html[data-mode="light"]) .dock-vis-row input{
  accent-color:#b5710d;
}
:where(html[data-mode="light"]) .edge-dock{
  background:rgba(240,241,244,0.78);
}
:where(html[data-mode="light"]) .cal-nav{
  background:rgba(15,23,42,0.033);
}
:where(html[data-mode="light"]) .cal-nav:hover{
  background:rgba(15,23,42,0.088);
}
:where(html[data-mode="light"]) .cal-gear{
  background:rgba(15,23,42,0.033);
}
:where(html[data-mode="light"]) .cal-gear:hover{
  color:#bf7402;
  background:rgba(15,23,42,0.088);
}
:where(html[data-mode="light"]) .cal-cell:hover:not(.empty){
  background:rgba(15,23,42,0.066);
}
:where(html[data-mode="light"]) .cal-cell.today{
  color:#bf7402;
}
:where(html[data-mode="light"]) .cal-cell.selected .cal-dot{
  background:#f7f1e9;
}
:where(html[data-mode="light"]) .cal-cell.today .cal-lunar-day{
  color:#bf7402;
}
:where(html[data-mode="light"]) .cal-add-inline{
  background:rgba(15,23,42,0.033);
  color:#bf7402;
}
:where(html[data-mode="light"]) .cal-ev-row{
  background:rgba(15,23,42,0.033);
}
:where(html[data-mode="light"]) .cal-ev-time{
  color:#bf7402;
}
:where(html[data-mode="light"]) .lp-details{
  background:rgba(15,23,42,0.022);
}
:where(html[data-mode="light"]) .lp-check input{
  accent-color:#b5710d;
}
:where(html[data-mode="light"]) .lp-status{
  color:#299888;
}
:where(html[data-mode="light"]) .lp-status.stale{
  color:#bf7402;
}
:where(html[data-mode="light"]) .cal-all-row{
  background:rgba(15,23,42,0.033);
}
:where(html[data-mode="light"]) .cal-all-row button:hover{
  color:#bf7402;
}
:where(html[data-mode="light"]) .reminder-overlay{
  background:rgba(6,9,14,0.33);
}
:where(html[data-mode="light"]) .reminder-kicker{
  color:#bf7402;
}
:where(html[data-mode="light"]) .poll-opt{
  background:rgba(15,23,42,0.033);
}
:where(html[data-mode="light"]) .poll-opt-count{
  color:#bf7402;
}
:where(html[data-mode="light"]) .poll-edit-remove{
  background:rgba(15,23,42,0.033);
}
:where(html[data-mode="light"]) .poll-edit-remove:hover{
  color:#a81a1a;
}
:where(html[data-mode="light"]) .noise-style-btn.active{
  color:#bf7402;
}
:where(html[data-mode="light"]) .noise-peak-tag{
  color:#bf7402;
}
:where(html[data-mode="light"]) .noise-msg{
  color:#a81a1a;
}
:where(html[data-mode="light"]) .tab-btn.active{
  color:#bf7402;
}
:where(html[data-mode="light"]) .stream-msg{
  color:#a81a1a;
}
:where(html[data-mode="light"]) .stream-embed{
  background:#e8e8e8;
}
:where(html[data-mode="light"]) .yt-external{
  background:#e8e8e8;
}
:where(html[data-mode="light"]) .sfx-volume-row input[type=range]{
  accent-color:#b5710d;
}
:where(html[data-mode="light"]) .gm-group h4{
  color:#bf7402;
}
:where(html[data-mode="light"]) .tts-row input[type=range]{
  accent-color:#b5710d;
}
:where(html[data-mode="light"]) .ins-vi{
  color:#bf7402;
}
:where(html[data-mode="light"]) .ins-num{
  color:#bf7402;
}
:where(html[data-mode="light"]) .idiom-card p strong{
  color:#bf7402;
}
:where(html[data-mode="light"]) .gr-card h4{
  color:#bf7402;
}
:where(html[data-mode="light"]) .cc-roster-xp{
  color:#bf7402;
}
:where(html[data-mode="light"]) .cc-dup-badge{
  color:#ab7a17;
}
:where(html[data-mode="light"]) .cc-error{
  color:#b01212;
}
:where(html[data-mode="light"]) .widget-pin[aria-pressed="true"]{
  color:#bf7402;
}
:where(html[data-mode="light"]) .doc-stage{
  background:#f9f9fa;
}
:where(html[data-mode="light"]) .doc-toolbar{
  background:rgba(240,241,244,0.96);
}
:where(html[data-mode="light"]) .doc-hint{
  color:#bf7402;
}
:where(html[data-mode="light"]) .doc-btn{
  background:#fefefe;
}
:where(html[data-mode="light"]) .doc-btn:hover{
  background:#fefefe;
}
:where(html[data-mode="light"]) .doc-handle{
  background:rgba(240,241,244,0.92);
}
:where(html[data-mode="light"]) .doc-fallback{
  background:rgba(240,241,244,0.96);
}
:where(html[data-mode="light"]) .doc-menu{
  background:rgba(240,241,244,0.98);
}
:where(html[data-mode="light"]) .doc-menu-link{
  color:#bf7402;
}
:where(html[data-mode="light"]) .doc-menu-row:hover{
  background:rgba(15,23,42,0.066);
}
:where(html[data-mode="light"]) .file-list li .fname-link:hover{
  color:#bf7402;
}
:where(html[data-mode="light"]) .file-list li button.file-show:hover{
  color:#bf7402;
}
:where(html[data-mode="light"]) .doc-status{
  background:#f9f9fa;
}
:where(html[data-mode="light"]) .doc-spinner{
  border:3px solid rgba(15,23,42,0.165);
}
:where(html[data-mode="light"]) .xp-pill{
  background:rgba(15,23,42,0.066);
}
:where(html[data-mode="light"]) .xp-lv{
  color:#bf7402;
}
:where(html[data-mode="light"]) .xp-bar{
  background:rgba(15,23,42,0.165);
}
:where(html[data-mode="light"]) .xp-pop{
  color:#bf7402;
}
:where(html[data-mode="light"]) .sx-big{
  color:#bf7402;
}
:where(html[data-mode="light"]) .sx-xpbar{
  background:rgba(15,23,42,0.165);
}
:where(html[data-mode="light"]) .sx-chip{
  background:rgba(15,23,42,0.066);
}
:where(html[data-mode="light"]) .sx-chip.on{
  color:#bf7402;
}
:where(html[data-mode="light"]) .sx-tile{
  background:rgba(15,23,42,0.055);
}
:where(html[data-mode="light"]) .sx-tile b{
  color:#bf7402;
}
:where(html[data-mode="light"]) .ss-st[data-st="good"]{
  color:#11b146;
}
:where(html[data-mode="light"]) .ss-st[data-st="watch"]{
  color:#c2af00;
}
:where(html[data-mode="light"]) .ss-st[data-st="bad"]{
  color:#c20000;
}
:where(html[data-mode="light"]) .sx-bar > div{
  background:rgba(15,23,42,0.11);
}
:where(html[data-mode="light"]) .sx-srow b{
  color:#bf7402;
}
:where(html[data-mode="light"]) .doc-idle{
  background:rgba(240,241,244,0.97);
}
:where(html[data-mode="light"]) .doc-btn.doc-pdftools[aria-pressed="true"]{
  color:#bf7402;
}
:where(html[data-mode="light"]) body.doc-open .doc-btn:hover{
  background:rgba(15,23,42,0.066);
}
:where(html[data-mode="light"]) body.doc-open .doc-btn.primary{
  color:#bf7402;
}
:where(html[data-mode="light"]) .file-list li button.file-del:hover{
  color:#a81a1a;
}
:where(html[data-mode="light"]) .nh-status.read{
  color:#2e9450;
}
:where(html[data-mode="light"]) .cc-act.quiet{
  color:#ab7a17;
}
:where(html[data-mode="light"]) .ca-tile b{
  color:#bf7402;
}
:where(html[data-mode="light"]) .demotab{
  background:rgba(247,245,240,0.88);
  color:#b5710d;
}
:where(html[data-mode="light"]) .demopanel{
  background:rgba(242,243,245,0.95);
}
:where(html[data-mode="light"]) .demo-log li{
  background:rgba(15,23,42,0.033);
}
:where(html[data-mode="light"]) .widget.widget-full{
  background:rgba(240,241,244,0.94);
}
:where(html[data-mode="light"]) .sx-pill{
  background:rgba(15,23,42,0.066);
}
:where(html[data-mode="light"]) .sx-card{
  background:rgba(15,23,42,0.044);
}
:where(html[data-mode="light"]) .sx-hm{
  background:rgba(15,23,42,0.077);
}
:where(html[data-mode="light"]) .sx-cat h5 b{
  color:#bf7402;
}
:where(html[data-mode="light"]) .sx-meter{
  background:rgba(15,23,42,0.11);
}
:where(html[data-mode="light"]) .sx-rule.full b{
  color:#bf7402;
}
:where(html[data-mode="light"]) .sx-ftxt em{
  color:#bf7402;
}
:where(html[data-mode="light"]) .sx-fxp{
  color:#bf7402;
}
:where(html[data-mode="light"]) .sx-spark{
  color:#c28e00;
}
:where(html[data-mode="light"]) .widget-full .sx-hero .sx-xpbar i::after{
  background:linear-gradient(100deg,transparent 0,rgba(15,23,42,0.825) 50%,transparent 100%);
}
:where(html[data-mode="light"]) .widget-full .sx-hero .sx-xpbar i::before{
  color:#1a1a1a;
}
:where(html[data-mode="light"]) .sx-card::before,
:where(html[data-mode="light"]) .sx-card::after{
  color:#bf7402;
}
:where(html[data-mode="light"]) .sx-card:hover{
  box-shadow:0 10px 28px rgba(0,0,0,0.171), 0 0 0 1px rgba(232,163,61,.22), 0 0 24px rgba(232,163,61,.14);
}
:where(html[data-mode="light"]) .sx-tile:hover{
  box-shadow:0 8px 18px rgba(0,0,0,0.158), 0 0 16px rgba(232,163,61,.3);
}
:where(html[data-mode="light"]) .sx-bar i::after{
  background:linear-gradient(100deg,transparent 0,rgba(15,23,42,0.88) 50%,transparent 100%);
}
:where(html[data-mode="light"]) .sx-bar:hover b{
  color:#bf7402;
}
:where(html[data-mode="light"]) .sx-heat .sx-hm:not(.x):hover::after{
  color:#1a1a1a;
}
:where(html[data-mode="light"]) .sx-frow:hover .sx-fxp{
  color:#bf7402;
}
:where(html[data-mode="light"]) .medal{
  box-shadow:0 3px 10px rgba(0,0,0,0.18);
}
:where(html[data-mode="light"]) .medal.t2{
  --m1:#252a33;
  --m2:#616772;
}
:where(html[data-mode="light"]) .medal .mi{
  background:radial-gradient(circle at 35% 30%,#fefefe,#f2f3f5);
  box-shadow:inset 0 2px 6px rgba(0,0,0,0.248);
}
:where(html[data-mode="light"]) .medal.on{
  box-shadow:0 3px 14px rgba(0,0,0,0.203), 0 0 14px color-mix(in srgb,var(--m1) 55%,transparent);
}
:where(html[data-mode="light"]) .medal.on::after{
  background:linear-gradient(110deg,transparent 0,rgba(15,23,42,0.77) 48%,transparent 62%);
}
:where(html[data-mode="light"]) .badge-pop{
  background:rgba(243,244,246,0.97);
  box-shadow:0 16px 44px rgba(0,0,0,0.248), 0 0 30px rgba(232,163,61,.3);
}
:where(html[data-mode="light"]) .bp-t small{
  color:#bf7402;
}
:where(html[data-mode="light"]) .badge-chip{
  background:rgba(15,23,42,0.066);
}
:where(html[data-mode="light"]) .badge-chip b{
  color:#bf7402;
}
:where(html[data-mode="light"]) .bc-count{
  color:#bf7402;
}
:where(html[data-mode="light"]) .bc-cabinet{
  background:rgba(0,0,0,0.072);
}
:where(html[data-mode="light"]) .bc-ledge{
  background:linear-gradient(180deg, rgba(232,163,61,.35), rgba(232,163,61,.08) 55%, rgba(0,0,0,0.15));
  box-shadow:0 5px 10px rgba(0,0,0,0.158), inset 0 1px 0 rgba(0,0,0,0.1);
}
:where(html[data-mode="light"]) .bc-prize{
  background:rgba(15,23,42,0.033);
}
:where(html[data-mode="light"]) .bd-nx{
  background:rgba(15,23,42,0.033);
}
:where(html[data-mode="light"]) .bd-bar{
  background:rgba(15,23,42,0.11);
}
:where(html[data-mode="light"]) .bd{
  background:rgba(15,23,42,0.033);
}
:where(html[data-mode="light"]) .bd:hover{
  box-shadow:0 10px 22px rgba(0,0,0,0.158);
}
:where(html[data-mode="light"]) .wm-backdrop{
  background:rgba(6,9,14,0.396);
}
:where(html[data-mode="light"]) .wm{
  background:#f3f4f6;
  box-shadow:0 24px 70px rgba(0,0,0,0.27);
}
:where(html[data-mode="light"]) .wm-sum{
  color:#bf7402;
}
:where(html[data-mode="light"]) .wm-h.t-shelve{
  color:#b03c12;
}
:where(html[data-mode="light"]) .wm-h.t-core{
  color:#bf7402;
}
:where(html[data-mode="light"]) .wm-row{
  background:rgba(15,23,42,0.033);
}
:where(html[data-mode="light"]) .wm-info:hover,
:where(html[data-mode="light"]) .wm-info:focus-visible{
  color:#bf7402;
}
:where(html[data-mode="light"]) .wm-tag.t-core{
  color:#bf7402;
}
:where(html[data-mode="light"]) .wm-tag.t-keep{
  color:#299888;
}
:where(html[data-mode="light"]) .wm-tag.t-shelve{
  color:#b03c12;
}
:where(html[data-mode="light"]) .wm-tag.t-use{
  color:#1a1a1a;
  background:rgba(15,23,42,0.154);
}
:where(html[data-mode="light"]) .wm-sw i{
  background:rgba(15,23,42,0.176);
}
:where(html[data-mode="light"]) .cb-tab:hover,
:where(html[data-mode="light"]) .cb-segb:hover{
  background:rgba(15,23,42,0.066);
}
:where(html[data-mode="light"]) .cb-new summary{
  color:#bf7402;
}
:where(html[data-mode="light"]) .cb-x:hover{
  color:#a81a1a;
}
:where(html[data-mode="light"]) .cb-sub-h{
  color:#bf7402;
}
:where(html[data-mode="light"]) .ss-stat{
  background:rgba(15,23,42,0.066);
}
:where(html[data-mode="light"]) .ss-stu{
  background:rgba(15,23,42,0.044);
}
:where(html[data-mode="light"]) .ss-stu:hover,
:where(html[data-mode="light"]) .ss-stu:focus-visible{
  box-shadow:0 10px 22px rgba(0,0,0,0.158), 0 0 16px rgba(232,163,61,.2);
}
:where(html[data-mode="light"]) .ss-lv b,
:where(html[data-mode="light"]) .ss-lv2 b{
  color:#bf7402;
}
:where(html[data-mode="light"]) .ss-stu-xp b{
  color:#bf7402;
}
:where(html[data-mode="light"]) .ss-chk{
  background:rgba(15,23,42,0.044);
}
:where(html[data-mode="light"]) .ss-hero{
  background:rgba(15,23,42,0.044);
}
:where(html[data-mode="light"]) .ss-ring .rg-bg{
  stroke:rgba(15,23,42,0.132);
}
:where(html[data-mode="light"]) .ss-ring .rg-fg{
  stroke:#b5710d;
}
:where(html[data-mode="light"]) .ss-xptot{
  color:#bf7402;
}
:where(html[data-mode="light"]) .nh-side,
:where(html[data-mode="light"]) .nh-main{
  background:rgba(15,23,42,0.033);
}
:where(html[data-mode="light"]) .nh-prow:hover{
  background:rgba(15,23,42,0.055);
}
:where(html[data-mode="light"]) .nh-av{
  color:#bf7402;
}
:where(html[data-mode="light"]) .nh-day{
  background:rgba(15,23,42,0.066);
}
:where(html[data-mode="light"]) .nh-compose{
  background:rgba(0,0,0,0.072);
}
:where(html[data-mode="light"]) .rp-tab{
  background:rgba(15,23,42,0.055);
}
:where(html[data-mode="light"]) .rp-tab.active{
  color:#bf7402;
}
:where(html[data-mode="light"]) .rp-card{
  background:rgba(15,23,42,0.044);
}
:where(html[data-mode="light"]) .rp-cost{
  color:#bf7402;
}
:where(html[data-mode="light"]) .att-share{
  background:rgba(15,23,42,0.055);
}
:where(html[data-mode="light"]) .cc-fam-row{
  border-bottom:1px solid rgba(15,23,42,0.088);
}
:where(html[data-mode="light"]) .an-item{
  border-bottom:1px solid rgba(15,23,42,0.088);
}
:where(html[data-mode="light"]) .unofficial-build{
  color:#1a1a1a;
}
:where(html[data-mode="light"]) .srv-thumb{
  background:rgba(0,0,0,0.08);
}

/* ---- from css/drawdeck.css ---- */
:where(html[data-mode="light"]) .dd-top,
:where(html[data-mode="light"]) .dd-bottom{
  background:rgba(15,23,42,0.039);
}
:where(html[data-mode="light"]) .dd-rail{
  background:rgba(15,23,42,0.028);
}
:where(html[data-mode="light"]) .dd-btn:hover:not(:disabled){
  background:rgba(15,23,42,0.099);
}
:where(html[data-mode="light"]) .dd-tabs{
  background:rgba(0,0,0,0.168);
}
:where(html[data-mode="light"]) .dd-tab.on{
  box-shadow:0 1px 3px rgba(0,0,0,0.135);
}
:where(html[data-mode="light"]) .dd-sw{
  border:2px solid rgba(15,23,42,0.605);
  box-shadow:0 0 0 1px rgba(0,0,0,0.158);
}
:where(html[data-mode="light"]) .dd-size:hover{
  background:rgba(15,23,42,0.099);
}
:where(html[data-mode="light"]) .dd-kind{
  background:rgba(15,23,42,0.055);
}
:where(html[data-mode="light"]) .dd-kind:hover{
  background:rgba(15,23,42,0.121);
}
:where(html[data-mode="light"]) .dd-hint{
  color:#7d848d;
}
:where(html[data-mode="light"]) .dd-unfocus{
  background:rgba(15,23,42,0.9);
  box-shadow:0 2px 8px rgba(0,0,0,0.113);
}
:where(html[data-mode="light"]) .dd-mi:hover{
  background:rgba(15,23,42,0.099);
}
:where(html[data-mode="light"]) .dd-mi.danger{
  color:#a81a1a;
}
:where(html[data-mode="light"]) .dd-modal{
  background:rgba(0,0,0,0.3);
}

/* ---- css/light.extra.css (hand-written) ---- */
/* TeachersDeck — hand-written part of css/light.css (tools/gen_light_css.py appends this file).
   1. Where the Light / Dark switch (js/mode.js) sits: top bar size, menu spacing.
   2. Light-mode fixes the generator can't guess. Keep each one scoped to html[data-mode="light"]. */

/* ---------- 1. where the Light / Dark switch sits (its look is css/mode.css, shared by all four apps) ---------- */
#mode-switch{ margin:0 0 18px; }
#mode-toggle{ --deck-bar-h:38px; --deck-bar-r:11px; }

/* ---------- 2. light-mode fixes ---------- */
/* "Dim background (better contrast)": on a light page, contrast comes from a white veil, not a dark one */
html[data-mode="light"] .bg-overlay{ background:rgba(255,255,255,0.45); }
/* The stoplight colours (On track / Monitor / Needs attention) are neon on dark; on a light page they'd be unreadable as
   text and harsh as borders, so Light mode uses deeper versions of the same three. Tile fills keep their soft tints. */
html[data-mode="light"], html[data-mode="light"] .sx-wrap .sx-tile[data-st]{ --st-good:#15803d; --st-watch:#a16207; --st-bad:#dc2626; }   /* where this app defines them */