/* ═══════════════════════════════════════════════════════════════════
   stream-2a.css — Teacher "Stream" redesign (option 2a "Today Timeline")
   A dark 3-column command dashboard, SCOPED to `.st2` so the rest of the
   (light) app is untouched. Tokens are the design-handoff §5 values, mapped
   to page-local custom properties. Fonts: the app's own (Outfit / system) +
   IBM Plex Mono (already loaded) for labels/timestamps — no new webfont.
   ═══════════════════════════════════════════════════════════════════ */
.st2{
  /* surfaces */
  --s2-canvas:#0a0a0c; --s2-app:#0b0b0e; --s2-nav:#0e0e13;
  --s2-card:#111116; --s2-inset:#15151b; --s2-input:#17171e; --s2-chip:#191921;
  /* borders */
  --s2-bw:#26262f; --s2-bnav:#1e1e26; --s2-bcard:#20202a; --s2-bchip:#24242e;
  --s2-bhover:#33333f; --s2-drail:#1a1a22; --s2-dlist:#1c1c24;
  /* text */
  --s2-strong:#f5f5f8; --s2-text:#f2f2f5; --s2-head:#eaeaf0; --s2-2:#c8c8d0;
  --s2-muted:#9a9aa6; --s2-faint:#6f6f7c; --s2-faintest:#5a5a66;
  /* accent (violet) */
  --s2-acc:#8b7bff; --s2-acc2:#a99bff; --s2-acc-tx:#c4bbff;
  --s2-acc-grad:linear-gradient(135deg,#a99bff,#8b7bff);
  --s2-av-grad:linear-gradient(135deg,#8b7bff,#6f5cff);
  --s2-acc-tint:rgba(139,123,255,.13);
  /* status */
  --s2-ok:#35c98a; --s2-warn:#e6b25a; --s2-danger:#e5677a; --s2-info:#6aa8ff;
  --s2-ok-t:rgba(53,201,138,.12); --s2-warn-t:rgba(230,178,90,.14); --s2-danger-t:rgba(229,103,122,.14);
  /* fonts — reuse the app's, no CDN. Outfit ≈ the geometric display; system sans for body; Plex Mono for data */
  --s2-display:'Outfit',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --s2-sans:ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --s2-mono:'IBM Plex Mono',ui-monospace,'Cascadia Code',Consolas,monospace;

  background:var(--s2-app); color:var(--s2-text); font-family:var(--s2-sans);
  border:1px solid var(--s2-bw); border-radius:20px; overflow:hidden;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.85);
  max-width:1240px; margin:0 auto; -webkit-font-smoothing:antialiased;
  /* fill the viewport height so the window occupies the screen instead of
     floating as a short card in a sea of black */
  display:flex; flex-direction:column; min-height:calc(100vh - 34px);
}
.st2 .s2-body{flex:1}
.st2 *{box-sizing:border-box}
.st2 ::selection{background:rgba(139,123,255,.32)}
.st2 button{font-family:inherit;cursor:pointer}
.st2 .mono{font-family:var(--s2-mono)}
.st2 .num{font-family:var(--s2-display);font-variant-numeric:tabular-nums}

/* section labels */
.st2 .s2-lbl{font-family:var(--s2-mono);font-size:9.5px;font-weight:400;letter-spacing:.12em;
  text-transform:uppercase;color:var(--s2-faint);margin:0 0 10px}

/* ── body grid ── */
.st2 .s2-body{display:grid;grid-template-columns:236px minmax(0,1fr) 300px;align-items:stretch}
.st2 .s2-left{border-right:1px solid var(--s2-drail);padding:18px 16px}
.st2 .s2-center{padding:20px 22px;min-width:0}
.st2 .s2-right{border-left:1px solid var(--s2-drail);padding:18px 16px;display:flex;flex-direction:column;gap:16px}

/* ── left rail ── */
.st2 .s2-classcard{display:flex;gap:11px;align-items:center;padding-bottom:16px;border-bottom:1px solid var(--s2-drail);margin-bottom:16px}
.st2 .s2-tile{flex:0 0 auto;width:40px;height:40px;border-radius:11px;background:var(--s2-av-grad);color:#0a0a0c;
  font-family:var(--s2-display);font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center}
.st2 .s2-classcard .nm{font-family:var(--s2-display);font-weight:600;font-size:13.5px;color:var(--s2-head);line-height:1.15}
.st2 .s2-classcard .sub{font-family:var(--s2-mono);font-size:9.5px;letter-spacing:.05em;color:var(--s2-faint);margin-top:3px}

.st2 .s2-qa{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:2px}
.st2 .s2-qa button{width:100%;display:flex;align-items:center;gap:11px;padding:10px 11px;border-radius:10px;
  border:0;background:transparent;color:var(--s2-2);font-size:13;text-align:left}
.st2 .s2-qa button i{width:16px;text-align:center;font-size:14px;color:var(--s2-muted)}
.st2 .s2-qa button:hover{background:var(--s2-inset);color:var(--s2-text)}
.st2 .s2-qa button.on{color:var(--s2-acc-tx);background:rgba(139,123,255,.1)}
.st2 .s2-qa button.on:hover{background:rgba(139,123,255,.16)}
.st2 .s2-qa button.on i{color:var(--s2-acc-tx)}

.st2 .s2-sched{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:12px}
.st2 .s2-sched li{display:flex;gap:11px}
.st2 .s2-sched .tm{flex:0 0 auto;width:40px}
.st2 .s2-sched .tm .t{font-family:var(--s2-mono);font-size:11px;color:var(--s2-faint);line-height:1.1}
.st2 .s2-sched .tm .ap{font-family:var(--s2-mono);font-size:9px;color:var(--s2-faintest);letter-spacing:.05em}
.st2 .s2-sched .ti{font-family:var(--s2-display);font-weight:500;font-size:12.5px;color:var(--s2-head);display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.st2 .s2-sched .rm{font-family:var(--s2-mono);font-size:9.5px;color:var(--s2-faint);margin-top:2px}
.st2 .s2-now{font-family:var(--s2-mono);font-size:8px;letter-spacing:.06em;color:var(--s2-acc-tx);
  background:rgba(139,123,255,.14);border-radius:5px;padding:1px 6px;display:inline-flex;align-items:center;gap:5px}
.st2 .s2-dot{width:5px;height:5px;border-radius:50%;display:inline-block}
.st2 .s2-dot.live{animation:s2pulse 1.8s ease-in-out infinite}
@keyframes s2pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}

.st2 .s2-code{border:1px dashed #2a2a34;border-radius:11px;padding:12px 13px;margin-top:4px}
.st2 .s2-code .row{display:flex;align-items:center;gap:10px;margin-top:8px}
.st2 .s2-code .val{font-family:var(--s2-display);font-weight:600;font-size:16px;letter-spacing:.08em;color:var(--s2-head);flex:1}
.st2 .s2-code button{width:28px;height:28px;border-radius:8px;border:1px solid #2a2a34;background:transparent;color:var(--s2-muted);display:flex;align-items:center;justify-content:center}
.st2 .s2-code button:hover{color:var(--s2-acc-tx);border-color:var(--s2-acc)}

/* ── KPI strip ── */
.st2 .s2-kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:18px}
.st2 .s2-kpi{position:relative;overflow:hidden;background:var(--s2-card);border:1px solid var(--s2-bcard);border-radius:13px;padding:12px 13px}
.st2 .s2-kpi:hover{border-color:var(--s2-bhover)}
.st2 .s2-kpi .bar{position:absolute;left:0;top:11px;bottom:11px;width:3px;border-radius:3px}
.st2 .s2-kpi .k{font-family:var(--s2-mono);font-size:9px;letter-spacing:.10em;text-transform:uppercase;color:var(--s2-faint);padding-left:8px}
.st2 .s2-kpi .v{font-family:var(--s2-display);font-weight:600;font-size:23px;letter-spacing:-.01em;color:var(--s2-strong);padding-left:8px;margin-top:3px}

/* ── composer ── */
.st2 .s2-composer{background:var(--s2-card);border:1px solid var(--s2-bcard);border-radius:14px;padding:14px;margin-bottom:18px}
.st2 .s2-composer.open{border-color:#2f2b45;padding:16px;box-shadow:0 0 0 1px rgba(139,123,255,.22),0 24px 60px -30px rgba(0,0,0,.75)}
.st2 .s2-cav{flex:0 0 auto;width:36px;height:36px;border-radius:50%;background:var(--s2-av-grad);color:#fff;
  font-family:var(--s2-display);font-weight:600;font-size:12px;display:flex;align-items:center;justify-content:center}
.st2 .s2-crow{display:flex;gap:12px;align-items:center}
.st2 .s2-cfake{flex:1;background:var(--s2-input);border:1px solid var(--s2-bchip);border-radius:10px;padding:11px 14px;color:var(--s2-faint);cursor:text;font-size:13.5px}
.st2 .s2-cfoot{display:flex;align-items:center;margin-top:12px;border-top:1px solid var(--s2-dlist);padding-top:12px}
.st2 .s2-attach{display:flex;gap:6px}
.st2 .s2-attach button{display:flex;align-items:center;gap:6px;padding:7px 11px;border-radius:8px;border:0;background:transparent;color:var(--s2-muted);font-size:11.5px}
.st2 .s2-attach button i{font-size:14px}
.st2 .s2-attach button:hover{background:var(--s2-input);color:var(--s2-head)}
.st2 .s2-post{margin-left:auto;padding:9px 18px;border-radius:9px;border:0;background:var(--s2-acc-grad);color:#0a0a0c;font-weight:600;font-size:12.5px;display:inline-flex;align-items:center;gap:7px}
.st2 .s2-post:hover{filter:brightness(1.08)}
/* composer expanded */
.st2 .s2-ctabs{display:flex;gap:7px;margin-bottom:14px}
.st2 .s2-ctab{padding:6px 13px;border-radius:20px;border:0;background:transparent;color:var(--s2-muted);font-size:12px;font-weight:500}
.st2 .s2-ctab:hover{color:var(--s2-head)}
.st2 .s2-ctab.on{color:var(--s2-acc-tx);background:rgba(139,123,255,.16);font-weight:600}
.st2 .s2-ta{flex:1;min-height:96px;background:var(--s2-input);border:1px solid #33304a;border-radius:10px;padding:13px 15px;
  color:var(--s2-text);line-height:1.6;font-size:13.5px;font-family:inherit;resize:vertical}
.st2 .s2-ta::placeholder{color:var(--s2-muted)}
.st2 .s2-aud{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:11.5px;color:var(--s2-muted)}
.st2 .s2-aud .chip{display:inline-flex;align-items:center;gap:6px;background:var(--s2-input);border:1px solid var(--s2-bchip);color:var(--s2-2);border-radius:16px;padding:3px 10px}
.st2 .s2-aud .add{border:1px dashed var(--s2-bchip);border-radius:16px;padding:3px 10px;background:transparent;color:var(--s2-muted)}
.st2 .s2-cfoot2{display:flex;align-items:center;margin-top:14px;border-top:1px solid var(--s2-dlist);padding-top:13px}
.st2 .s2-iconbtn{width:34px;height:34px;border-radius:8px;border:0;background:transparent;color:var(--s2-muted);display:inline-flex;align-items:center;justify-content:center;font-size:15px}
.st2 .s2-iconbtn:hover{background:var(--s2-input);color:var(--s2-acc-tx)}
.st2 .s2-cancel{margin-left:auto;padding:8px 14px;border-radius:9px;border:0;background:transparent;color:var(--s2-muted);font-size:12.5px;font-weight:500}
.st2 .s2-cancel:hover{background:var(--s2-input)}

/* ── filter bar ── */
.st2 .s2-filter{display:flex;align-items:center;gap:7px;margin-bottom:16px;flex-wrap:wrap}
.st2 .s2-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:20px;border:0;background:transparent;color:var(--s2-muted);font-size:11.5px;font-weight:500}
.st2 .s2-chip:hover{color:var(--s2-head)}
.st2 .s2-chip.on{color:var(--s2-acc-tx);background:rgba(139,123,255,.16);font-weight:600}
.st2 .s2-chip .ct{font-family:var(--s2-mono);font-size:9.5px;opacity:.75}

/* ── feed ── */
.st2 .s2-divider{display:flex;align-items:center;gap:12px;margin:8px 0 14px}
.st2 .s2-divider span{font-family:var(--s2-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--s2-faint)}
.st2 .s2-divider .hr{flex:1;height:1px;background:var(--s2-drail)}
.st2 .s2-fcard{background:var(--s2-card);border:1px solid var(--s2-bcard);border-radius:14px;padding:15px;margin-bottom:12px}
.st2 .s2-fhead{display:flex;gap:11px;align-items:flex-start}
.st2 .s2-fav{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:#22222c;border:1px solid #2e2e39;color:#cfcfd8;
  font-family:var(--s2-display);font-weight:600;font-size:12px;display:flex;align-items:center;justify-content:center}
.st2 .s2-fav.alert{background:var(--s2-danger-t);border-color:transparent;color:var(--s2-danger)}
.st2 .s2-fmeta{flex:1;min-width:0}
.st2 .s2-fname{font-weight:600;font-size:13px;color:var(--s2-head);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.st2 .s2-faction{font-weight:400;font-size:12px;color:var(--s2-muted)}
.st2 .s2-ftime{font-family:var(--s2-mono);font-size:10px;color:var(--s2-faint);margin-top:3px}
.st2 .s2-pin{font-family:var(--s2-mono);font-size:8.5px;letter-spacing:.06em;color:var(--s2-acc-tx);background:rgba(139,123,255,.14);border-radius:5px;padding:1px 6px;display:inline-flex;align-items:center;gap:4px}
.st2 .s2-fbody{margin-top:11px;font-size:13px;line-height:1.55;color:var(--s2-2)}
.st2 .s2-ffoot{display:flex;gap:16px;margin-top:12px;border-top:1px solid var(--s2-dlist);padding-top:11px;font-size:12px;color:var(--s2-muted)}
.st2 .s2-ffoot button{border:0;background:transparent;color:inherit;display:inline-flex;align-items:center;gap:7px;font-size:12px;padding:0}
.st2 .s2-ffoot button:hover .fa-heart,.st2 .s2-ffoot .like:hover{color:var(--s2-danger)}
.st2 .s2-ffoot .cmt:hover{color:var(--s2-acc-tx)}

/* submit sub-card */
.st2 .s2-sub{background:var(--s2-inset);border:1px solid var(--s2-bcard);border-radius:12px;padding:11px;margin-top:11px;display:flex;gap:13px}
.st2 .s2-thumb{flex:0 0 auto;width:124px;height:74px;border-radius:9px;position:relative;overflow:hidden;
  background:repeating-linear-gradient(135deg,#1b1b23,#1b1b23 9px,#181820 9px,#181820 18px);display:flex;align-items:center;justify-content:center}
.st2 .s2-thumb .ic{font-size:22px;color:rgba(255,255,255,.55)}
.st2 .s2-thumb .badge{position:absolute;left:6px;top:6px;font-family:var(--s2-mono);font-size:8.5px;letter-spacing:.08em;padding:1px 5px;border-radius:4px;background:rgba(10,10,12,.72)}
.st2 .s2-thumb .meta{position:absolute;right:6px;bottom:6px;font-family:var(--s2-mono);font-size:9.5px;padding:1px 5px;border-radius:4px;background:rgba(10,10,12,.72);color:#d0d0d8}
.st2 .s2-subinfo{flex:1;min-width:0;display:flex;flex-direction:column}
.st2 .s2-subtitle{font-family:var(--s2-display);font-weight:600;font-size:13.5px;color:var(--s2-head)}
.st2 .s2-subnote{font-size:12px;color:var(--s2-muted);margin-top:3px}
.st2 .s2-subbtns{display:flex;gap:8px;margin-top:auto;padding-top:10px}
.st2 .s2-grade-btn{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:9px;border:0;background:var(--s2-acc-grad);color:#0a0a0c;font-weight:600;font-size:12px}
.st2 .s2-grade-btn:hover{filter:brightness(1.08)}
.st2 .s2-ghost{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:9px;border:1px solid #2a2a34;background:transparent;color:var(--s2-2);font-size:12px}
.st2 .s2-ghost:hover{border-color:var(--s2-bhover);color:var(--s2-text)}

/* question */
.st2 .s2-ctx{display:inline-flex;align-items:center;font-family:var(--s2-mono);font-size:9.5px;color:var(--s2-2);background:var(--s2-chip);border:1px solid var(--s2-bchip);border-radius:6px;padding:2px 8px;margin-top:11px}
.st2 .s2-reply{display:flex;gap:8px;margin-top:11px}
.st2 .s2-reply input{flex:1;background:var(--s2-input);border:1px solid var(--s2-bchip);border-radius:9px;padding:9px 12px;color:var(--s2-text);font-family:inherit;font-size:12.5px}
.st2 .s2-reply input::placeholder{color:var(--s2-faint)}

/* grade card */
.st2 .s2-gradecard{background:var(--s2-inset);border:1px solid var(--s2-bcard);border-radius:12px;padding:13px 15px;margin-top:11px;display:flex;align-items:center;justify-content:space-between}
.st2 .s2-gradecard .an{font-family:var(--s2-display);font-weight:600;font-size:13.5px;color:var(--s2-head)}
.st2 .s2-gradecard .rt{font-family:var(--s2-mono);font-size:10px;color:var(--s2-faint);margin-top:2px}
.st2 .s2-score{font-family:var(--s2-display);font-weight:600;font-size:22px;color:var(--s2-ok)}
.st2 .s2-score .o{font-size:12px;color:var(--s2-faint)}

/* due card */
.st2 .s2-duefoot{display:flex;align-items:center;justify-content:space-between;margin-top:12px}
.st2 .s2-duecount{font-family:var(--s2-mono);font-size:11px;color:var(--s2-warn)}

/* ── right rail cards ── */
.st2 .s2-rcard{background:var(--s2-card);border:1px solid var(--s2-bcard);border-radius:14px;padding:14px 15px}
.st2 .s2-rhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.st2 .s2-rtitle{font-family:var(--s2-display);font-weight:600;font-size:13px;color:var(--s2-head);display:flex;align-items:center;gap:8px}
.st2 .s2-rlink{font-size:11.5px;color:var(--s2-muted);border:0;background:transparent;font-family:var(--s2-mono);letter-spacing:.03em}
.st2 .s2-rlink:hover{color:var(--s2-acc-tx)}
.st2 .s2-live{font-family:var(--s2-mono);font-size:8.5px;letter-spacing:.08em;color:var(--s2-ok);display:inline-flex;align-items:center;gap:5px}

.st2 .s2-att-big{font-family:var(--s2-display);font-weight:600;font-size:20px;color:var(--s2-ok)}
.st2 .s2-att-big span{font-size:12px;color:var(--s2-muted);font-family:var(--s2-sans);font-weight:400;margin-left:6px}
.st2 .s2-prog{height:7px;border-radius:4px;background:var(--s2-dlist);overflow:hidden;margin:10px 0}
.st2 .s2-prog span{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#35c98a,#2fae78)}
.st2 .s2-legend{display:flex;gap:16px;font-size:11.5px;color:var(--s2-muted)}
.st2 .s2-legend span{display:inline-flex;align-items:center;gap:6px}

/* calendar */
.st2 .s2-calnav{display:flex;gap:4px}
.st2 .s2-calnav button{width:24px;height:24px;border-radius:7px;border:1px solid var(--s2-bchip);background:transparent;color:var(--s2-muted);display:flex;align-items:center;justify-content:center;font-size:11px}
.st2 .s2-calnav button:hover{color:var(--s2-acc-tx);border-color:var(--s2-acc)}
.st2 .s2-caldow,.st2 .s2-calgrid{display:grid;grid-template-columns:repeat(7,1fr);text-align:center}
.st2 .s2-caldow span{font-family:var(--s2-mono);font-size:8.5px;color:var(--s2-faintest);padding-bottom:6px}
.st2 .s2-calgrid .d{height:28px;position:relative;font-family:var(--s2-display);font-size:11px;color:var(--s2-2);display:flex;align-items:center;justify-content:center}
.st2 .s2-calgrid .d.today{font-weight:600}
.st2 .s2-calgrid .d.today .cir{position:absolute;width:23px;height:23px;border-radius:50%;background:var(--s2-av-grad);z-index:0}
.st2 .s2-calgrid .d.today .n{position:relative;z-index:1;color:#0a0a0c}
.st2 .s2-calgrid .d .mk{position:absolute;bottom:2px;width:4px;height:4px;border-radius:50%}

/* upcoming */
.st2 .s2-uprow{padding:10px 0;border-top:1px solid var(--s2-dlist)}
.st2 .s2-uprow:first-of-type{border-top:0;padding-top:2px}
.st2 .s2-uptop{display:flex;align-items:center;justify-content:space-between;gap:8px}
.st2 .s2-uptitle{font-family:var(--s2-display);font-weight:500;font-size:12px;color:var(--s2-head);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st2 .s2-updone{font-family:var(--s2-mono);font-size:10px;color:var(--s2-faint);flex:0 0 auto}
.st2 .s2-updue{display:flex;align-items:center;gap:6px;font-size:11.5px;margin-top:4px}

/* recent files */
.st2 .s2-filerow{display:flex;align-items:center;gap:11px;padding:9px 0;border-top:1px solid var(--s2-dlist)}
.st2 .s2-filerow:first-of-type{border-top:0}
.st2 .s2-ext{flex:0 0 auto;width:30px;height:30px;border-radius:8px;background:var(--s2-input);border:1px solid #23232b;
  font-family:var(--s2-mono);font-size:8px;font-weight:500;display:flex;align-items:center;justify-content:center}
.st2 .s2-fileinfo{flex:1;min-width:0}
.st2 .s2-filename{font-size:12px;color:var(--s2-head);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st2 .s2-filewhen{font-family:var(--s2-mono);font-size:9.5px;color:var(--s2-faint);margin-top:2px}
.st2 .s2-empty{color:var(--s2-faint);font-size:12px;padding:6px 0}

/* ── LIGHT THEME — when the app's Display setting is Light (no body.theme-dark).
   A designed light surface ladder (not an inversion): white cards on a cool
   grey canvas, the same violet accent (text shades darkened for AA on white),
   status hues deepened so the dots/labels stay legible. ── */
body:not(.theme-dark) .st2{
  /* deeper, higher-contrast light ladder — the previous set washed out on a
     bright monitor. Canvas is a clear cool grey so white cards read as raised;
     borders + text are darkened for solid AA contrast. */
  --s2-canvas:#e7e8ee; --s2-app:#eceef3; --s2-nav:#ffffff;
  --s2-card:#ffffff; --s2-inset:#f3f4f8; --s2-input:#eef0f5; --s2-chip:#e8eaf1;
  --s2-bw:#c9cad6; --s2-bnav:#dcdde6; --s2-bcard:#d3d4de; --s2-bchip:#cbccd8;
  --s2-bhover:#b3b4c2; --s2-drail:#dcdde6; --s2-dlist:#e3e4ec;
  --s2-strong:#0f0f16; --s2-text:#1a1a22; --s2-head:#22222b; --s2-2:#34343f;
  --s2-muted:#585866; --s2-faint:#73737f; --s2-faintest:#9a9aa6;
  --s2-acc:#6a58f0; --s2-acc2:#7b6af5; --s2-acc-tx:#5140c4;
  --s2-acc-tint:rgba(106,88,240,.12);
  --s2-ok:#12854f; --s2-warn:#946610; --s2-danger:#c62f48; --s2-info:#2660cc;
  --s2-ok-t:rgba(18,133,79,.12); --s2-warn-t:rgba(148,102,16,.14); --s2-danger-t:rgba(198,47,72,.13);
  box-shadow:0 20px 50px -28px rgba(30,30,50,.28);
}
/* raise the cards off the canvas so they don't melt into it */
body:not(.theme-dark) .st2 .s2-kpi,
body:not(.theme-dark) .st2 .s2-composer,
body:not(.theme-dark) .st2 .s2-fcard,
body:not(.theme-dark) .st2 .s2-rcard{box-shadow:0 1px 2px rgba(20,20,40,.04),0 4px 14px -8px rgba(20,20,40,.14)}
body:not(.theme-dark) .st2 .s2-lbl,
body:not(.theme-dark) .st2 .s2-kpi .k{color:#5f5f6d}
body:not(.theme-dark) .st2 ::selection{background:rgba(123,106,245,.25)}
body:not(.theme-dark) .st2 .s2-qa button.on{background:rgba(123,106,245,.10)}
body:not(.theme-dark) .st2 .s2-qa button.on:hover{background:rgba(123,106,245,.16)}
body:not(.theme-dark) .st2 .s2-now,
body:not(.theme-dark) .st2 .s2-pin{background:rgba(123,106,245,.12)}
body:not(.theme-dark) .st2 .s2-ctab.on,
body:not(.theme-dark) .st2 .s2-chip.on{background:rgba(123,106,245,.13)}
body:not(.theme-dark) .st2 .s2-composer.open{border-color:#c9c2f2;box-shadow:0 0 0 1px rgba(123,106,245,.25),0 20px 50px -28px rgba(30,30,45,.3)}
body:not(.theme-dark) .st2 .s2-ta{border-color:#cfcadd}
body:not(.theme-dark) .st2 .s2-code{border-color:#d4d4de}
body:not(.theme-dark) .st2 .s2-code button{border-color:#d4d4de}
body:not(.theme-dark) .st2 .s2-thumb{background:repeating-linear-gradient(135deg,#e8e8ef,#e8e8ef 9px,#e2e2ea 9px,#e2e2ea 18px)}
body:not(.theme-dark) .st2 .s2-thumb .ic{color:rgba(40,40,60,.45)}
body:not(.theme-dark) .st2 .s2-thumb .badge,
body:not(.theme-dark) .st2 .s2-thumb .meta{background:rgba(255,255,255,.85);color:#3f3f4a}
body:not(.theme-dark) .st2 .s2-fav{background:#ececf2;border-color:#dddde6;color:#4a4a58}
body:not(.theme-dark) .st2 .s2-ghost{border-color:#d4d4de}
body:not(.theme-dark) .st2 .s2-ext{border-color:#dddde6}
body:not(.theme-dark) .st2 .s2-post,
body:not(.theme-dark) .st2 .s2-grade-btn{color:#fff}
body:not(.theme-dark) .st2 .s2-tile,
body:not(.theme-dark) .st2 .s2-calgrid .d.today .n{color:#fff}

/* ── responsive collapse (§7) ── */
@media(max-width:1100px){
  .st2 .s2-body{grid-template-columns:minmax(0,1fr) 300px}
  .st2 .s2-left{display:none}
}
@media(max-width:820px){
  .st2 .s2-body{grid-template-columns:1fr}
  .st2 .s2-right{border-left:0;border-top:1px solid var(--s2-drail)}
  .st2 .s2-kpis{grid-template-columns:repeat(2,1fr)}
}
/* ── wide + ultrawide: grow the window + rails so the dashboard fills the
   screen instead of pooling empty space. (Placed last so it wins the cascade
   over the base grid rule above.) The dashboard now sits INSIDE the app's
   normal chrome (global sidebar + class top-bar), so these vw caps are a
   generous ceiling — the window simply fills whatever width #page-inner gives
   it, minus the sidebar. ── */
@media(min-width:1500px){
  .st2{max-width:min(96vw,1820px)}
  .st2 .s2-body{grid-template-columns:264px minmax(0,1fr) 344px}
  .st2 .s2-center{padding:24px 34px}
  .st2 .s2-left,.st2 .s2-right{padding:22px 20px}
}
@media(min-width:1900px){
  .st2{max-width:min(95vw,2200px)}
  .st2 .s2-body{grid-template-columns:320px minmax(0,1fr) 420px}
  .st2 .s2-center{padding:28px 46px}
  .st2 .s2-kpis{gap:12px}
  .st2 .s2-kpi .v{font-size:26px}
}
/* keep the SINGLE-column feed at a comfortable measure when the center gets
   wide but isn't yet ultrawide (1700–2199px). */
@media(min-width:1700px) and (max-width:2199px){
  .st2 .s2-composer,.st2 .s2-filter,.st2 #s2-feed{max-width:960px}
}
/* true ultrawide (≥2200px viewport — 2560 QHD, 3440×1440, etc.): one feed
   column can't fill a ~2000px-wide center without either stretching cards or
   pooling dead side-gutters, so flow the feed into TWO columns. The Today /
   Earlier dividers span both. This is what actually uses a 34" screen — twice
   the cards on-screen, no empty center. */
@media(min-width:2200px){
  .st2{max-width:min(97vw,3160px)}
  .st2 .s2-body{grid-template-columns:360px minmax(0,1fr) 500px}
  .st2 .s2-center{padding:30px 54px}
  .st2 .s2-kpi .v{font-size:28px}
  .st2 #s2-feed{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px 22px;align-items:start;max-width:none}
  .st2 #s2-feed > .s2-fcard{margin-bottom:0}
  .st2 #s2-feed > .s2-divider{grid-column:1/-1;margin-top:2px}
  .st2 #s2-feed > .s2-empty{grid-column:1/-1}
  /* composer + filter span the full center above the 2-up feed */
  .st2 .s2-composer,.st2 .s2-filter{max-width:none}
}
/* ≥3000px viewport (e.g. sidebar collapsed on a 3440, or a 4K ultrawide):
   a third feed column keeps card width readable rather than ballooning. */
@media(min-width:3000px){
  .st2 #s2-feed{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* a quiet class shouldn't read as a broken page — give the empty feed room */
.st2 #s2-feed:only-child .s2-empty,
.st2 .s2-empty{min-height:0}
.st2 #s2-feed > .s2-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;min-height:220px;gap:6px;color:var(--s2-faint)}
.st2 #s2-feed > .s2-empty::before{content:"\f0e0";font-family:"Font Awesome 6 Free";font-weight:900;font-size:26px;opacity:.4;margin-bottom:4px}