/* Studle 2 design layer — loaded after styles.css and overrides it.
   Direction: a calm study desk. Cool sea-mist ground, harbour green for actions and progress,
   lighthouse amber only for things that are due, red only for errors and deletes, and one fixed
   colour per module. Bricolage Grotesque for titles and numbers, Manrope for everything else.
   Every rule is scoped to #app-shell[data-dh-theme] so it outranks the older theme rules in both
   light and dark; components use tokens only, so dark mode is a token swap. */

#app-shell[data-dh-theme]{
  --s2-bg:#edf2ef; --s2-surface:#ffffff; --s2-sunk:#f4f7f5; --s2-raise:#ffffff;
  --s2-ink:#11201a; --s2-ink-2:#33463d; --s2-muted:#5b6d65; --s2-line:#d8e2dc; --s2-line-2:#e7eee9;
  --s2-accent:#17775a; --s2-accent-ink:#ffffff; --s2-accent-soft:#e1efe8; --s2-accent-text:#14684f;
  --s2-beam:#b8770f; --s2-beam-soft:#fbefd9; --s2-danger:#bf3b2b; --s2-danger-soft:#f9e3df;
  --s2-sidebar:#e5ede8; --s2-shadow:0 1px 2px rgba(17,32,26,.05),0 6px 20px rgba(17,32,26,.05);
  --s2-display:'Bricolage Grotesque','Manrope',system-ui,sans-serif;
  --s2-body:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mc-harbour:#17775a; --mc-channel:#2e6da4; --mc-buoy:#b8770f; --mc-heather:#7457b0; --mc-rose:#b0466a; --mc-slate:#4f6470;
  /* map the old tokens so untouched screens follow the new palette */
  --bg:var(--s2-bg); --paper:var(--s2-surface); --ink:var(--s2-ink); --muted:var(--s2-muted); --line:var(--s2-line);
  --green:var(--s2-accent); --green-soft:var(--s2-accent-soft); --on-green:var(--s2-accent-ink); --shadow:var(--s2-shadow);
  font-family:var(--s2-body); color:var(--s2-ink); background:var(--s2-bg);
}
#app-shell[data-dh-theme="dark"]{
  --s2-bg:#0b1612; --s2-surface:#111e19; --s2-sunk:#0e1a16; --s2-raise:#16251f;
  --s2-ink:#e4eee9; --s2-ink-2:#c3d3cb; --s2-muted:#93a99f; --s2-line:#21332c; --s2-line-2:#1a2a24;
  --s2-accent:#4cc79a; --s2-accent-ink:#05150f; --s2-accent-soft:#163128; --s2-accent-text:#5fd3a7;
  --s2-beam:#edb04a; --s2-beam-soft:#33270f; --s2-danger:#ef7a6b; --s2-danger-soft:#3a1b17;
  --s2-sidebar:#0d1915; --s2-shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);
  --mc-harbour:#4cc79a; --mc-channel:#6fa8e0; --mc-buoy:#edb04a; --mc-heather:#a98be6; --mc-rose:#e37fa0; --mc-slate:#93a9b6;
}
#app-shell[data-dh-theme] [data-c="harbour"]{--mc:var(--mc-harbour)}
#app-shell[data-dh-theme] [data-c="channel"]{--mc:var(--mc-channel)}
#app-shell[data-dh-theme] [data-c="buoy"]{--mc:var(--mc-buoy)}
#app-shell[data-dh-theme] [data-c="heather"]{--mc:var(--mc-heather)}
#app-shell[data-dh-theme] [data-c="rose"]{--mc:var(--mc-rose)}
#app-shell[data-dh-theme] [data-c="slate"]{--mc:var(--mc-slate)}

/* ---------- ground ---------- */
#app-shell[data-dh-theme] .dh-bgfx{background:var(--s2-bg)}
#app-shell[data-dh-theme] .dh-blob{display:none}
#app-shell[data-dh-theme] .dh-bgimg{opacity:.18}
#app-shell[data-dh-theme] :focus-visible{outline:2px solid var(--s2-accent);outline-offset:2px}

/* ---------- sidebar ---------- */
#app-shell[data-dh-theme] .sidebar{width:248px;background:var(--s2-sidebar);border-right:1px solid var(--s2-line);padding:20px 12px 14px;gap:2px}
#app-shell[data-dh-theme] .brand{margin:0 8px 18px;font-family:var(--s2-display);font-size:19px;font-weight:700;letter-spacing:-.02em;color:var(--s2-ink)}
#app-shell[data-dh-theme] .beta-tag{background:transparent;border:1px solid var(--s2-line);color:var(--s2-muted);letter-spacing:.02em;font-size:10px;font-weight:600;text-transform:lowercase;padding:1px 7px}
#app-shell[data-dh-theme] .s2-record{display:flex;align-items:center;gap:10px;width:100%;margin:0 0 14px;padding:11px 14px;border-radius:12px;background:var(--s2-ink);color:var(--s2-bg);font:600 14px var(--s2-body);border:0;cursor:pointer;transition:transform .12s ease}
#app-shell[data-dh-theme] .s2-record i{width:10px;height:10px;border-radius:50%;background:var(--s2-danger);box-shadow:0 0 0 3px color-mix(in srgb,var(--s2-danger) 25%,transparent);flex:0 0 auto}
#app-shell[data-dh-theme] .s2-record:hover{transform:translateY(-1px)}
#app-shell[data-dh-theme] .s2-record.active{outline:2px solid var(--s2-accent);outline-offset:2px}
#app-shell[data-dh-theme] .nav-list{gap:1px}
#app-shell[data-dh-theme] .nav-item{color:var(--s2-ink-2);font:500 14px var(--s2-body);padding:8px 10px;border-radius:9px;gap:11px;background:transparent;position:relative}
#app-shell[data-dh-theme] .nav-item:hover{background:color-mix(in srgb,var(--s2-ink) 6%,transparent);color:var(--s2-ink)}
#app-shell[data-dh-theme] .nav-item.active{background:var(--s2-surface);color:var(--s2-ink);font-weight:650;box-shadow:var(--s2-shadow)}
#app-shell[data-dh-theme] .nav-icon{width:18px;flex:0 0 18px;display:grid;place-items:center;font-size:15px}
#app-shell[data-dh-theme] .nav-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#app-shell[data-dh-theme] .nav-item.active .nav-icon{color:var(--s2-accent)}
#app-shell[data-dh-theme] .s2-due{margin-left:auto;min-width:20px;padding:1px 7px;border-radius:999px;background:var(--s2-beam-soft);color:var(--s2-beam);font:700 11.5px var(--s2-body);text-align:center;font-variant-numeric:tabular-nums}
#app-shell[data-dh-theme] .s2-modules{margin:18px 0 8px;display:flex;flex-direction:column;gap:1px}
#app-shell[data-dh-theme] .s2-modules-h{font:600 12.5px var(--s2-body);color:var(--s2-muted);margin:0 10px 6px}
#app-shell[data-dh-theme] .s2-modlink{display:flex;align-items:center;gap:10px;width:100%;padding:7px 10px;border-radius:9px;border:0;background:transparent;color:var(--s2-ink-2);font:500 13.5px var(--s2-body);text-align:left;cursor:pointer;min-width:0}
#app-shell[data-dh-theme] .s2-modlink:hover{background:color-mix(in srgb,var(--s2-ink) 6%,transparent)}
#app-shell[data-dh-theme] .s2-modlink.active{background:var(--s2-surface);color:var(--s2-ink)}
#app-shell[data-dh-theme] .s2-modlink i{width:9px;height:9px;border-radius:3px;background:var(--mc);flex:0 0 auto}
#app-shell[data-dh-theme] .s2-modlink .nav-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#app-shell[data-dh-theme] .s2-modlink small{color:var(--s2-muted);font-size:12px;font-variant-numeric:tabular-nums}
#app-shell[data-dh-theme] .nav-group{display:none}
#app-shell[data-dh-theme] .sidebar-footer .nav-list{margin-bottom:8px}
#app-shell[data-dh-theme] .profile{border-top:1px solid var(--s2-line);padding:14px 6px 0;color:var(--s2-ink)}
#app-shell[data-dh-theme] .avatar{background:var(--s2-accent-soft);color:var(--s2-accent-text)}
#app-shell[data-dh-theme] .profile-meta small{color:var(--s2-muted)}
#app-shell.rail[data-dh-theme] .sidebar{width:72px}
#app-shell.rail[data-dh-theme] .s2-record{justify-content:center;padding:11px 0}
#app-shell.rail[data-dh-theme] .s2-record .nav-label,#app-shell.rail[data-dh-theme] .s2-modules-h,#app-shell.rail[data-dh-theme] .s2-modlink small,#app-shell.rail[data-dh-theme] .s2-due{display:none}
#app-shell.rail[data-dh-theme] .s2-modlink{justify-content:center;padding:9px 0}
#app-shell.rail[data-dh-theme] .s2-modlink i{width:11px;height:11px}

/* ---------- top bar and page frame ---------- */
#app-shell[data-dh-theme] .topbar{height:58px;background:color-mix(in srgb,var(--s2-bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--s2-line-2)}
#app-shell[data-dh-theme] .crumbs{color:var(--s2-muted);font-size:13.5px}
#app-shell[data-dh-theme] .crumbs strong{color:var(--s2-ink);font-weight:650}
#app-shell[data-dh-theme] .focus-btn{border:1px solid var(--s2-line);background:var(--s2-surface);color:var(--s2-ink-2);border-radius:9px;font:600 13px var(--s2-body);padding:6px 12px}
#app-shell[data-dh-theme] .content-wrap{max-width:1160px;padding:36px 40px 72px;margin:0}
@media (min-width:1500px){#app-shell[data-dh-theme] .content-wrap{margin:0 auto}}
#app-shell[data-dh-theme] .page-intro,#app-shell[data-dh-theme] .view-header{margin-bottom:24px;align-items:flex-end}
#app-shell[data-dh-theme] .page-intro h1,#app-shell[data-dh-theme] .view-header h1{font:700 32px/1.1 var(--s2-display);letter-spacing:-.025em;color:var(--s2-ink);margin:0 0 6px;text-wrap:balance}
#app-shell[data-dh-theme] .subhead{color:var(--s2-muted);font-size:15px;max-width:64ch;line-height:1.5}
#app-shell[data-dh-theme] .eyebrow{text-transform:none;letter-spacing:0;font:600 13px var(--s2-body);color:var(--s2-muted)}
#app-shell[data-dh-theme] .cap-subnav{background:color-mix(in srgb,var(--s2-ink) 5%,transparent);border:0;border-radius:10px;padding:3px;margin:0 0 18px}
#app-shell[data-dh-theme] .cap-tab{font:600 13.5px var(--s2-body);color:var(--s2-muted);padding:6px 14px;border-radius:8px}
#app-shell[data-dh-theme] .cap-tab.active{background:var(--s2-surface);color:var(--s2-ink);box-shadow:var(--s2-shadow)}

/* ---------- shared pieces ---------- */
#app-shell[data-dh-theme] .card{background:var(--s2-surface);border:1px solid var(--s2-line);border-radius:14px;box-shadow:none}
#app-shell[data-dh-theme] .btn{font:650 13.5px var(--s2-body);border-radius:10px;padding:9px 15px}
#app-shell[data-dh-theme] .btn.sm{font-size:12.5px;padding:6px 11px;border-radius:8px}
#app-shell[data-dh-theme] .btn.primary{background:var(--s2-accent);color:var(--s2-accent-ink);box-shadow:none;border-color:transparent}
#app-shell[data-dh-theme] .btn.primary:hover{background:color-mix(in srgb,var(--s2-accent) 88%,var(--s2-ink))}
#app-shell[data-dh-theme] .btn.ghost{background:var(--s2-surface);border-color:var(--s2-line);color:var(--s2-ink-2)}
#app-shell[data-dh-theme] .btn.ghost:hover{border-color:color-mix(in srgb,var(--s2-ink) 25%,var(--s2-line));color:var(--s2-ink)}
#app-shell[data-dh-theme] .btn.danger{color:var(--s2-danger)}
#app-shell[data-dh-theme] .text-btn{font:650 13px var(--s2-body);color:var(--s2-accent-text);background:none;border:0;cursor:pointer}
#app-shell[data-dh-theme] .muted-note{color:var(--s2-muted);font-style:normal;font-size:13px}
#app-shell[data-dh-theme] .s2-meta{color:var(--s2-muted);font-size:12.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
#app-shell[data-dh-theme] .s2-muted{color:var(--s2-muted)}
#app-shell[data-dh-theme] .s2-sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 12px}
#app-shell[data-dh-theme] .s2-sec-h h2{font:650 17px var(--s2-display);letter-spacing:-.01em;margin:0;color:var(--s2-ink)}
#app-shell[data-dh-theme] .s2-mod{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--s2-ink-2);min-width:0;max-width:100%}
#app-shell[data-dh-theme] .s2-mod::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--mc,var(--s2-muted));flex:0 0 auto}
#app-shell[data-dh-theme] .s2-mod-none{color:var(--s2-muted);font-weight:500}
#app-shell[data-dh-theme] .s2-mod-none::before{background:transparent;border:1px dashed var(--s2-muted)}
#app-shell[data-dh-theme] .s2-pill{font-size:12px;font-weight:650;padding:2px 9px;border-radius:999px;white-space:nowrap;background:var(--s2-sunk);color:var(--s2-muted)}
#app-shell[data-dh-theme] .s2-pill[data-k="ok"]{background:var(--s2-accent-soft);color:var(--s2-accent-text)}
#app-shell[data-dh-theme] .s2-pill[data-k="local"]{background:var(--s2-beam-soft);color:var(--s2-beam)}
#app-shell[data-dh-theme] .s2-tool{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:8px;border:1px dashed var(--s2-line);background:transparent;color:var(--s2-muted);font:600 13px var(--s2-body);cursor:pointer}
#app-shell[data-dh-theme] .s2-tool:hover{border-color:var(--s2-accent);color:var(--s2-accent-text)}
#app-shell[data-dh-theme] .s2-tool.done{border-style:solid;border-color:var(--s2-line);background:var(--s2-surface);color:var(--s2-ink)}
#app-shell[data-dh-theme] .s2-check{color:var(--s2-accent);font-weight:800}
#app-shell[data-dh-theme] .s2-bar{display:block;height:6px;border-radius:9px;background:var(--s2-line-2);overflow:hidden;flex:1;min-width:40px}
#app-shell[data-dh-theme] .s2-bar i{display:block;height:100%;background:var(--mc,var(--s2-accent));border-radius:9px}
#app-shell[data-dh-theme] .s2-empty{max-width:640px;padding:36px 0}
#app-shell[data-dh-theme] .s2-empty h2{font:700 26px var(--s2-display);letter-spacing:-.02em;margin:0 0 10px}
#app-shell[data-dh-theme] .s2-empty p{color:var(--s2-muted);font-size:15.5px;line-height:1.6;margin:0 0 20px}
#app-shell[data-dh-theme] .s2-actions{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- Today ---------- */
#app-shell[data-dh-theme] .s2-today-head{margin-bottom:28px}
#app-shell[data-dh-theme] .s2-date{margin:0 0 6px;font:600 14px var(--s2-body);color:var(--s2-muted)}
#app-shell[data-dh-theme] .s2-today-head h1{font-size:40px;letter-spacing:-.035em}
#app-shell[data-dh-theme] .s2-today-head h1 span{font:inherit;color:inherit;letter-spacing:inherit;background:none;-webkit-text-fill-color:currentColor}
#app-shell[data-dh-theme] #home-sub{font-size:16px;color:var(--s2-ink-2)}
#app-shell[data-dh-theme] .dh{display:block}
#app-shell[data-dh-theme] .s2-today{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:36px 32px;align-items:start}
#app-shell[data-dh-theme] .s2-plan{grid-column:1;background:var(--s2-surface);border:1px solid var(--s2-line);border-radius:16px;padding:20px 22px 8px}
#app-shell[data-dh-theme] .s2-plan-list{list-style:none;margin:0;padding:0}
#app-shell[data-dh-theme] .s2-plan-list li{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:14px;align-items:center;padding:16px 0;border-top:1px solid var(--s2-line-2)}
#app-shell[data-dh-theme] .s2-plan-list li:first-child{border-top:0;padding-top:6px}
#app-shell[data-dh-theme] .s2-plan-n{font:700 34px/1 var(--s2-display);color:var(--s2-accent);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
#app-shell[data-dh-theme] .s2-plan-body b{display:block;font:650 15.5px var(--s2-body);color:var(--s2-ink);margin-bottom:3px}
#app-shell[data-dh-theme] .s2-plan-body p{margin:0;color:var(--s2-muted);font-size:13.5px;line-height:1.45}
#app-shell[data-dh-theme] .s2-plan-act{display:flex;align-items:center;gap:12px}
#app-shell[data-dh-theme] .s2-week{grid-column:2;grid-row:1/span 2;padding:4px 0 0}
#app-shell[data-dh-theme] .s2-streak{font-size:12.5px;font-weight:700;color:var(--s2-beam);background:var(--s2-beam-soft);padding:2px 9px;border-radius:999px}
#app-shell[data-dh-theme] .s2-week-days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;height:96px;margin-bottom:16px}
#app-shell[data-dh-theme] .s2-day{display:flex;flex-direction:column;align-items:center;gap:6px}
#app-shell[data-dh-theme] .s2-day-bar{flex:1;width:100%;max-width:26px;border-radius:7px;background:var(--s2-line-2);display:flex;align-items:flex-end;overflow:hidden}
#app-shell[data-dh-theme] .s2-day-bar i{display:block;width:100%;background:var(--s2-accent);border-radius:7px;min-height:0}
#app-shell[data-dh-theme] .s2-day em{font-style:normal;font-size:12px;color:var(--s2-muted)}
#app-shell[data-dh-theme] .s2-day.today em{color:var(--s2-ink);font-weight:700}
#app-shell[data-dh-theme] .s2-day.today .s2-day-bar{outline:1.5px solid var(--s2-accent);outline-offset:1px}
#app-shell[data-dh-theme] .s2-week-stats{margin:0;display:grid;gap:0;border-top:1px solid var(--s2-line)}
#app-shell[data-dh-theme] .s2-week-stats div{display:flex;justify-content:space-between;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--s2-line-2)}
#app-shell[data-dh-theme] .s2-week-stats dt{color:var(--s2-muted);font-size:13.5px}
#app-shell[data-dh-theme] .s2-week-stats dd{margin:0;font:700 20px var(--s2-display);font-variant-numeric:tabular-nums}
#app-shell[data-dh-theme] .s2-last,#app-shell[data-dh-theme] .s2-mods,#app-shell[data-dh-theme] .s2-recent{grid-column:1}
#app-shell[data-dh-theme] .s2-last-card{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:18px 20px;border-radius:16px;background:var(--s2-surface);border:1px solid var(--s2-line)}
#app-shell[data-dh-theme] .s2-last-main{display:flex;flex-direction:column;gap:8px;text-align:left;background:none;border:0;padding:0;cursor:pointer;min-width:0;color:var(--s2-ink)}
#app-shell[data-dh-theme] .s2-last-title{font:700 21px/1.2 var(--s2-display);letter-spacing:-.02em}
#app-shell[data-dh-theme] .s2-last-main:hover .s2-last-title{color:var(--s2-accent-text)}
#app-shell[data-dh-theme] .s2-last-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;color:var(--s2-muted);font-size:13px}
#app-shell[data-dh-theme] .s2-last-study{display:flex;gap:8px;flex-wrap:wrap}
#app-shell[data-dh-theme] .s2-mod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
#app-shell[data-dh-theme] .s2-mod-card{display:flex;flex-direction:column;gap:6px;text-align:left;padding:16px 16px 14px;border-radius:14px;background:var(--s2-surface);border:1px solid var(--s2-line);cursor:pointer;color:var(--s2-ink);min-width:0}
#app-shell[data-dh-theme] .s2-mod-card:hover{border-color:color-mix(in srgb,var(--mc) 55%,var(--s2-line))}
#app-shell[data-dh-theme] .s2-mod-name{font:650 15px/1.3 var(--s2-body);display:flex;align-items:baseline;gap:8px}
#app-shell[data-dh-theme] .s2-mod-name::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--mc);flex:0 0 auto;transform:translateY(1px)}
#app-shell[data-dh-theme] .s2-mod-count{color:var(--s2-muted);font-size:13px}
#app-shell[data-dh-theme] .s2-mastery{display:flex;align-items:center;gap:10px;margin-top:6px;font-size:12.5px;color:var(--s2-ink-2);font-variant-numeric:tabular-nums}
#app-shell[data-dh-theme] .s2-rows{border:1px solid var(--s2-line);border-radius:14px;background:var(--s2-surface);overflow:hidden}
#app-shell[data-dh-theme] .s2-row{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1.2fr) 90px 110px;gap:16px;align-items:center;width:100%;padding:12px 18px;border:0;border-top:1px solid var(--s2-line-2);background:transparent;text-align:left;cursor:pointer;color:var(--s2-ink)}
#app-shell[data-dh-theme] .s2-row:first-child{border-top:0}
#app-shell[data-dh-theme] .s2-row:hover{background:var(--s2-sunk)}
#app-shell[data-dh-theme] .s2-row-title{font-weight:650;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#app-shell[data-dh-theme] .s2-row .s2-mod{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
#app-shell[data-dh-theme] .s2-row .s2-mod::before{display:inline-block;margin-right:6px;vertical-align:1px}
#app-shell[data-dh-theme] .s2-row-date{color:var(--s2-muted);font-size:13px;font-variant-numeric:tabular-nums}
#app-shell[data-dh-theme] .s2-row .s2-pill{justify-self:start}

/* ---------- Lectures ---------- */
#app-shell[data-dh-theme] .s2-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
#app-shell[data-dh-theme] .s2-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;border:1px solid var(--s2-line);background:var(--s2-surface);color:var(--s2-ink-2);font:600 13px var(--s2-body);cursor:pointer}
#app-shell[data-dh-theme] .s2-chip i{width:8px;height:8px;border-radius:2px;background:var(--mc)}
#app-shell[data-dh-theme] .s2-chip small{color:var(--s2-muted);font-size:12px;font-variant-numeric:tabular-nums}
#app-shell[data-dh-theme] .s2-chip.active{background:var(--s2-ink);border-color:var(--s2-ink);color:var(--s2-bg)}
#app-shell[data-dh-theme] .s2-chip.active small{color:inherit;opacity:.7}
#app-shell[data-dh-theme] .s2-lec-list{border:1px solid var(--s2-line);border-radius:14px;background:var(--s2-surface);overflow:hidden}
#app-shell[data-dh-theme] .s2-lec-list .rl-card{border:0;border-top:1px solid var(--s2-line-2);border-radius:0;box-shadow:none;background:transparent;padding:14px 18px;margin:0}
#app-shell[data-dh-theme] .s2-lec-list .rl-card:first-child{border-top:0}
#app-shell[data-dh-theme] .s2-lec-list .rl-card:hover{background:var(--s2-sunk)}
#app-shell[data-dh-theme] #sessions-list{display:block}
#app-shell[data-dh-theme] .rl-ic{color:var(--s2-muted);background:var(--s2-sunk);border-radius:9px}
#app-shell[data-dh-theme] .rl-main b{font:650 15px var(--s2-body);color:var(--s2-ink)}
#app-shell[data-dh-theme] .rl-meta{font-size:13px;color:var(--s2-muted);gap:4px 14px;align-items:center}
#app-shell[data-dh-theme] .rl-sync{font-size:12px;font-weight:650}
#app-shell[data-dh-theme] .rl-sync.ok{background:var(--s2-accent-soft);color:var(--s2-accent-text)}
#app-shell[data-dh-theme] .rl-sync.local{background:var(--s2-beam-soft);color:var(--s2-beam)}
#app-shell[data-dh-theme] .rl-sync.draft{background:var(--s2-sunk);color:var(--s2-muted)}
#app-shell[data-dh-theme] .rl-arrow{color:var(--s2-muted)}

/* ---------- Review ---------- */
#app-shell[data-dh-theme] .study-layout{display:flex;flex-direction:column;align-items:stretch;gap:18px}
#app-shell[data-dh-theme] .study-rail{order:-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
#app-shell[data-dh-theme] .study-main{min-width:0}
#app-shell[data-dh-theme] .study-card{border-radius:14px;padding:18px;box-shadow:none;background:var(--s2-surface);border:1px solid var(--s2-line)}
#app-shell[data-dh-theme] .study-card:hover{border-color:color-mix(in srgb,var(--s2-accent) 40%,var(--s2-line));transform:none}
#app-shell[data-dh-theme] .study-card h3{font:650 16px var(--s2-display);margin:10px 0 4px;color:var(--s2-ink)}
#app-shell[data-dh-theme] .study-card p{color:var(--s2-muted);font-size:13.5px;line-height:1.45}
#app-shell[data-dh-theme] .study-icon{background:var(--s2-accent-soft);color:var(--s2-accent-text)}
#app-shell[data-dh-theme] .rv-due-badge{background:var(--s2-beam-soft);color:var(--s2-beam);font-size:12px;font-weight:700;border-radius:999px;padding:2px 8px}
#app-shell[data-dh-theme] .study-pick{display:flex;flex-direction:column;gap:6px;max-width:420px;margin:0 0 14px;font:650 13.5px var(--s2-body);color:var(--s2-ink-2)}
#app-shell[data-dh-theme] .study-pick select{padding:10px 12px;border-radius:10px;border:1px solid var(--s2-line);background:var(--s2-surface);color:var(--s2-ink);font:500 14px var(--s2-body)}
#app-shell[data-dh-theme] #study-output{border-radius:14px}
#app-shell[data-dh-theme] .study-saved-h{font:650 17px var(--s2-display);margin:30px 0 12px;color:var(--s2-ink)}
#app-shell[data-dh-theme] .s2-saved{border:1px solid var(--s2-line);border-radius:14px;background:var(--s2-surface);overflow:hidden}
#app-shell[data-dh-theme] .s2-saved-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:14px 18px;border-top:1px solid var(--s2-line-2)}
#app-shell[data-dh-theme] .s2-saved-row:first-child{border-top:0}
#app-shell[data-dh-theme] .s2-saved-main{display:flex;flex-direction:column;gap:2px;min-width:0}
#app-shell[data-dh-theme] .s2-saved-main b{font:650 14.5px var(--s2-body)}
#app-shell[data-dh-theme] .s2-saved-main small{color:var(--s2-muted);font-size:12.5px}
#app-shell[data-dh-theme] .s2-saved-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* ---------- Lecture page ---------- */
#app-shell[data-dh-theme] .rd-head h1{font:700 30px/1.15 var(--s2-display);letter-spacing:-.025em;color:var(--s2-ink)}
#app-shell[data-dh-theme] .rd-sub{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;color:var(--s2-muted);font-size:13.5px}
#app-shell[data-dh-theme] .rd-player{position:sticky;top:66px;z-index:6;border-radius:14px;box-shadow:var(--s2-shadow);background:var(--s2-surface);border:1px solid var(--s2-line);padding:12px 16px}
#app-shell[data-dh-theme] .rd-player h3{display:none}
#app-shell[data-dh-theme] .rd-player audio{margin:0}
#app-shell[data-dh-theme] .rd-pstate{font-size:12.5px;color:var(--s2-muted);margin-top:6px}
#app-shell[data-dh-theme] .rd-study{border-radius:14px;padding:18px 20px}
#app-shell[data-dh-theme] .rd-study-head h3,#app-shell[data-dh-theme] .rd-grid .card h3{font:650 16px var(--s2-display)!important;letter-spacing:-.01em;color:var(--s2-ink)}
#app-shell[data-dh-theme] .rd-grid{gap:18px}
#app-shell[data-dh-theme] .tx-p{font-size:15px;line-height:1.7;color:var(--s2-ink);padding:8px 10px}
#app-shell[data-dh-theme] .tx-p.now{background:var(--s2-accent-soft)}
#app-shell[data-dh-theme] .tx-t{color:var(--s2-accent-text);font:600 12px var(--s2-body);font-variant-numeric:tabular-nums}
#app-shell[data-dh-theme] .rd-bk .t{color:var(--s2-accent-text);font:600 12px var(--s2-body);font-variant-numeric:tabular-nums}
#app-shell[data-dh-theme] .transcript-text{font-size:15px;line-height:1.7}
#app-shell[data-dh-theme] .rd-chip.ok{background:var(--s2-accent-soft);color:var(--s2-accent-text)}
#app-shell[data-dh-theme] #sd-back,#app-shell[data-dh-theme] #gd-back{margin-bottom:12px}

/* ---------- Progress, map, groups, settings: type and surfaces ---------- */
#app-shell[data-dh-theme] .kmap-course{background:var(--s2-surface);color:var(--s2-ink);border:1px solid var(--s2-line);border-radius:16px;box-shadow:none}
#app-shell[data-dh-theme] .kmap-course-title{font:700 22px var(--s2-display);letter-spacing:-.02em;color:var(--s2-ink)}
#app-shell[data-dh-theme] .kmap-course-meta{color:var(--s2-muted)}
#app-shell[data-dh-theme] .pr-emptycard h3,#app-shell[data-dh-theme] .card h3{font-family:var(--s2-display)}
#app-shell[data-dh-theme] .list-row{border-radius:12px}
#app-shell[data-dh-theme] input,#app-shell[data-dh-theme] select,#app-shell[data-dh-theme] textarea{font-family:var(--s2-body)}

/* ---------- smaller screens ---------- */
@media (max-width:1100px){
  #app-shell[data-dh-theme] .s2-today{grid-template-columns:minmax(0,1fr)}
  #app-shell[data-dh-theme] .s2-week{grid-column:1;grid-row:auto}
  #app-shell[data-dh-theme] .s2-week-days{height:72px}
}
@media (max-width:860px){
  #app-shell[data-dh-theme] .content-wrap{padding:22px 16px 56px}
  #app-shell[data-dh-theme] .page-intro,#app-shell[data-dh-theme] .view-header{align-items:flex-start}
  #app-shell[data-dh-theme] #crumb-context,#app-shell[data-dh-theme] .crumbs b{display:none}
  #app-shell[data-dh-theme] .topbar{height:54px}
  #app-shell[data-dh-theme] .focus-btn{padding:5px 10px}
  #app-shell[data-dh-theme] .s2-today-head h1{font-size:30px}
  #app-shell[data-dh-theme] .page-intro h1,#app-shell[data-dh-theme] .view-header h1{font-size:26px}
  #app-shell[data-dh-theme] .s2-plan{padding:16px 16px 4px}
  #app-shell[data-dh-theme] .s2-plan-list li{grid-template-columns:32px minmax(0,1fr);gap:4px 12px}
  #app-shell[data-dh-theme] .s2-plan-n{font-size:26px}
  #app-shell[data-dh-theme] .s2-plan-act{grid-column:2;justify-content:flex-start;margin-top:8px}
  #app-shell[data-dh-theme] .s2-row{grid-template-columns:minmax(0,1fr) auto;gap:4px 12px}
  #app-shell[data-dh-theme] .s2-row .s2-mod{grid-column:1;grid-row:2}
  #app-shell[data-dh-theme] .s2-row-date{display:none}
  #app-shell[data-dh-theme] .s2-row .s2-pill{grid-column:2;grid-row:1/span 2;align-self:center}
  #app-shell[data-dh-theme] .study-rail{grid-template-columns:minmax(0,1fr)}
  #app-shell[data-dh-theme] .rd-player{top:58px}
  #app-shell[data-dh-theme] .sidebar{width:260px}
}
@media (prefers-reduced-motion:reduce){#app-shell[data-dh-theme] .s2-record{transition:none}}