:root{--ink:#142824;--muted:#4a6460;--accent:#0d9488;--line:#b8e8de;}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:#f5f7fb;color:var(--ink);}
.wrap{max-width:680px;margin:0 auto;padding:18px 16px 44px;}
a.back{display:inline-block;color:#64748b;text-decoration:none;font-size:13px;margin-bottom:14px;}
h1{font-family:Fredoka,sans-serif;font-size:clamp(22px,5vw,26px);margin:2px 0 6px;}
.sub{font-size:14px;color:var(--muted);margin:0 0 12px;line-height:1.5;}
.state-banner{font-size:13px;line-height:1.45;color:#0f766e;background:#ecfdf5;border:1px solid #99f6e4;border-radius:12px;padding:10px 12px;margin:0 0 16px;}
.state-banner b{color:#134e4a;}
html.theme-dark .state-banner{color:#99f6e4;background:#0f2922;border-color:#115e59;}
html.theme-dark .state-banner b{color:#ccfbf1;}
.class-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:12px;margin:0 0 18px;}
button.class-card{font:inherit;text-align:left;width:100%;cursor:pointer;background:#fff;border-radius:16px;border:1.5px solid #e2e8f0;box-shadow:0 1px 4px rgba(0,0,0,.06);padding:16px 14px;transition:transform .08s,border-color .12s,box-shadow .12s;color:var(--ink);}
button.class-card:active{transform:scale(.98);}
button.class-card[aria-selected="true"]{border-color:var(--accent);box-shadow:0 0 0 2px rgba(13,148,136,.18);}
.class-card .cls-name{font-family:Fredoka,sans-serif;font-size:15px;font-weight:700;line-height:1.2;}
.class-card .cls-books{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.4;}
button.class-card[aria-selected="true"] .cls-books{color:#0f766e;}
.pick-hint{font-size:14px;color:var(--muted);margin:0 0 12px;}
.pick-hint[hidden],.slot-wrap[hidden],.card[hidden]{display:none;}
.slot-wrap{margin:0 0 14px;}
.slot-label{font-size:13px;color:var(--muted);margin:0 0 8px;}
.slot-pills{display:flex;flex-wrap:wrap;gap:8px;}
button.slot-pill{font-family:Fredoka,sans-serif;font-size:13px;font-weight:600;padding:8px 14px;border-radius:999px;border:1.5px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;}
button.slot-pill[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:#fff;}
.panels{min-height:0;}
.panel[hidden]{display:none;}
.grid{display:flex;flex-direction:column;gap:11px;}
a.card,div.card{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;align-items:center;column-gap:16px;text-decoration:none;color:var(--ink);background:#fff;border-radius:16px;border:1px solid #e2e8f0;box-shadow:0 1px 4px rgba(0,0,0,.06);padding:15px 18px;transition:transform .08s;}
a.card:active{transform:scale(.99);}
div.card{opacity:.55;cursor:default;}
.card .book{grid-column:1;grid-row:1;font-size:15px;font-weight:700;line-height:1.3;}
.card .d{grid-column:1;grid-row:2;font-size:12px;color:var(--muted);margin-top:3px;line-height:1.35;}
.card .go,.card .soon{grid-column:2;grid-row:1 / 3;align-self:center;font-weight:600;font-size:13px;margin:0;white-space:nowrap;}
.card .go{color:var(--accent);}
.card .soon{color:#92400e;}
.note{margin-top:22px;font-size:12.5px;color:var(--muted);line-height:1.5;}
html.theme-dark body{background:#0d1715;color:#e8f0ed;}
html.theme-dark button.class-card{background:#132a26;border-color:#1e3d36;color:#e8f0ed;}
html.theme-dark button.class-card[aria-selected="true"]{border-color:var(--accent);box-shadow:0 0 0 2px rgba(13,148,136,.35);}
html.theme-dark .class-card .cls-books{color:#94a3b8;}
html.theme-dark button.class-card[aria-selected="true"] .cls-books{color:#5eead4;}
html.theme-dark button.slot-pill{background:#132a26;border-color:#1e3d36;color:#e8f0ed;}
html.theme-dark button.slot-pill[aria-selected="true"]{background:var(--accent);border-color:var(--accent);}
html.theme-dark a.card,html.theme-dark div.card{background:#132a26;border-color:#1e3d36;color:#e8f0ed;}
html.theme-dark .card .d,html.theme-dark .note,html.theme-dark .pick-hint,html.theme-dark .slot-label{color:#94a3b8;}
html.theme-dark h1{color:#e8f0ed;}
html.theme-dark .sub{color:#94a3b8;}
html.theme-dark .sub b{color:#e8f0ed;}