/* ============================================================
   Charly's Study Hub — hyperpop theme (Design redesign)
   Two palettes as swappable themes: Midnight (default) + Fresh.
   ============================================================ */

/* ---------- MIDNIGHT (default) ---------- */
:root{
  --app-bg:radial-gradient(130% 90% at 50% -10%,#163b4e 0%,#0c2634 42%,#071722 100%);
  --surface:rgba(22,52,66,.66); --surface-2:rgba(255,255,255,.05);
  --surface-border:rgba(184,164,255,.2); --hair:rgba(255,255,255,.09); --chip-bg:rgba(255,255,255,.08);
  --text:#eaf6ff; --text-dim:#93b0c2; --lilac:#b9a4ff; --rose:#ff8fc7; --cyan:#7ff0ff; --lime:#c8ff8a;
  --urgent:#ff6f9c; --soon:#ffce6a; --chill:#74f0c0; --glow:rgba(185,164,255,.45);
  --holo:linear-gradient(120deg,#ff9ecf,#b9a4ff,#7ff0ff,#c8ff8a,#ff9ecf);
  --cta-holo:linear-gradient(135deg,#ff8fc7 0%,#b9a4ff 50%,#7ff0ff 100%);
  --chrome:linear-gradient(180deg,#f6f8ff 0%,#d4dcf5 32%,#aab6e0 55%,#eef1ff 72%,#bcc6ea 100%);
  --heading-chrome:linear-gradient(180deg,#ffffff 0%,#d8c9ff 45%,#ff9ecf 78%,#ffffff 100%);
  --tab-bg:rgba(9,26,36,.66);
  --bubble-tutor-bg:#f4f2fb; --bubble-tutor-text:#201a37;
  --bubble-me-bg:linear-gradient(135deg,#b9a4ff,#ff8fc7); --bubble-me-text:#2a1442;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* ---------- FRESH ---------- */
[data-theme="fresh"]{
  --app-bg:linear-gradient(165deg,#fdeffb 0%,#eeeeff 32%,#e6fff4 64%,#fff5e8 100%);
  --surface:rgba(255,255,255,.72); --surface-2:rgba(255,255,255,.5);
  --surface-border:rgba(160,107,255,.22); --hair:rgba(60,20,90,.08); --chip-bg:rgba(160,107,255,.1);
  --text:#2a1840; --text-dim:#8a72a8; --lilac:#a06bff; --rose:#ff5fb0; --cyan:#23c7f5; --lime:#8fe000;
  --urgent:#ff3d8b; --soon:#ff9d2e; --chill:#12c090; --glow:rgba(255,95,176,.35);
  --holo:linear-gradient(120deg,#ff8fd0,#b98bff,#6fe0ff,#c6ff6b,#ff8fd0);
  --cta-holo:linear-gradient(135deg,#ff5fb0 0%,#a06bff 52%,#23c7f5 100%);
  --chrome:linear-gradient(180deg,#ffffff 0%,#eef0f8 30%,#c3c9dc 55%,#f6f7fc 72%,#d3d8e8 100%);
  --heading-chrome:linear-gradient(180deg,#ff8fd0 0%,#a06bff 55%,#23c7f5 100%);
  --tab-bg:rgba(255,255,255,.68);
  --bubble-tutor-bg:#ffffff; --bubble-tutor-text:#2a1840;
  --bubble-me-bg:linear-gradient(135deg,#ffd0ec,#e3d3ff); --bubble-me-text:#3a1a56;
}

@keyframes holoShift{ to{ background-position:220% 50%; } }
@keyframes floatY{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }
@keyframes eq{ 0%,100%{ height:4px } 50%{ height:15px } }
@keyframes blink{ 0%,60%,100%{ opacity:.25 } 30%{ opacity:1 } }
@keyframes pop{ from{ opacity:0; transform:translateY(10px) scale(.98) } to{ opacity:1; transform:none } }

*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html,body{ height:100% }
body{
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  color:var(--text); background:var(--app-bg); background-attachment:fixed;
  min-height:100dvh; overflow-x:hidden;
}
body::after{ content:""; position:fixed; inset:0; pointer-events:none; z-index:9998;
  background-image:var(--grain); opacity:.4; mix-blend-mode:overlay; }

/* phone-first centered column */
.app{ position:relative; max-width:468px; margin:0 auto; min-height:100dvh;
  padding:calc(14px + env(safe-area-inset-top)) 18px calc(104px + env(safe-area-inset-bottom)); }

h1,h2,h3{ font-family:'Baloo 2',cursive; }
.h-chrome{ font-family:'Baloo 2',cursive; font-weight:800; line-height:1;
  background:var(--heading-chrome); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 6px var(--glow)); }
.eyebrow{ font-family:'Baloo 2',cursive; font-weight:800; font-size:9.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-dim); }
.dim{ color:var(--text-dim); }

/* surfaces */
.card{ background:var(--surface); border:1px solid var(--surface-border); border-radius:24px; padding:16px;
  box-shadow:0 12px 30px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.22);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }

/* buttons */
.cta,.chrome-btn{ border:0; cursor:pointer; font-family:'Baloo 2',cursive; font-weight:800;
  transition:transform .12s cubic-bezier(.34,1.56,.64,1), filter .15s; }
.cta:active,.chrome-btn:active,.qcard:active,.tab:active,.chip:active,.filecard:active{ transform:scale(.95); }
.cta{ background:var(--cta-holo); background-size:180% 180%; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.28);
  box-shadow:0 14px 28px var(--glow), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -7px 15px rgba(0,0,0,.16); }
.chrome-btn{ background:var(--chrome); color:#2a2438;
  box-shadow:0 14px 28px var(--glow), inset 0 2px 0 rgba(255,255,255,.7), inset 0 -7px 15px rgba(0,0,0,.14); }
.round{ border-radius:999px; }

/* nav / tab bar */
.tabbar{ position:fixed; left:50%; transform:translateX(-50%); bottom:calc(14px + env(safe-area-inset-bottom));
  width:min(92vw,432px); height:66px; border-radius:30px; background:var(--tab-bg);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid var(--surface-border);
  display:flex; align-items:center; justify-content:space-between; padding:0 10px; z-index:60;
  box-shadow:0 18px 36px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.28); }
.tab{ flex:1; background:0; border:0; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:2px;
  opacity:.6; transition:opacity .2s; }
.tab .ic{ font-size:21px; line-height:1; }
.tab .lbl{ font-size:8.5px; font-weight:700; color:var(--text-dim); font-family:'Plus Jakarta Sans'; }
.tab.active{ opacity:1; }
.tab.active .ic{ width:48px; height:34px; border-radius:13px; background:var(--chrome); display:grid; place-items:center; font-size:19px;
  box-shadow:0 5px 12px var(--glow), inset 0 1px 0 #fff, inset 0 -3px 6px rgba(0,0,0,.12); }
.tab.active .lbl{ font-weight:800; color:var(--text); }

/* views */
.view{ display:none; flex-direction:column; gap:14px; animation:pop .35s ease; }
.view.show{ display:flex; }

/* header row */
.head-row{ display:flex; justify-content:space-between; align-items:flex-start; margin-top:4px; }
.gear{ width:34px; height:34px; border-radius:50%; background:var(--surface); border:1px solid var(--surface-border);
  display:grid; place-items:center; font-size:16px; color:var(--text); cursor:pointer; }
.streak{ text-align:center; background:var(--surface); border:1px solid var(--surface-border); border-radius:20px; padding:8px 11px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22); }
.streak .n{ font-family:'Baloo 2',cursive; font-weight:800; font-size:19px; line-height:1.1; }
.streak .l{ font-size:8px; font-weight:800; color:var(--text-dim); letter-spacing:.06em; }

/* tasks */
.tasklist .trow{ display:flex; align-items:center; gap:12px; padding:11px 0; }
.tasklist .trow+.trow{ border-top:1px solid var(--hair); }
.dot{ width:11px; height:11px; border-radius:50%; flex-shrink:0; }
.trow .meta{ flex:1; min-width:0; }
.trow .cls{ font-size:9.5px; font-weight:800; letter-spacing:.06em; color:var(--text-dim); text-transform:uppercase; }
.trow .ti{ font-size:14px; font-weight:700; color:var(--text); }
.badge{ font-size:11px; font-weight:800; padding:4px 10px; border-radius:999px; white-space:nowrap; }

/* now playing */
.np{ display:flex; align-items:center; gap:12px; }
.np .art{ width:52px; height:52px; border-radius:14px; background:var(--holo); background-size:220% 220%;
  animation:holoShift 7s linear infinite; box-shadow:0 6px 14px var(--glow); flex-shrink:0; display:grid; place-items:center; }
.bars{ display:flex; gap:3px; align-items:flex-end; height:16px; margin-top:7px; }
.bars span{ width:3px; border-radius:2px; height:4px; background:var(--cta-holo); animation:eq 1s infinite ease-in-out; }
.bars span:nth-child(2){ animation-delay:.2s } .bars span:nth-child(3){ animation-delay:.4s }
.bars span:nth-child(4){ animation-delay:.1s } .bars span:nth-child(5){ animation-delay:.3s }

/* quick actions */
.quick{ display:flex; gap:12px; }
.qcard{ flex:1; cursor:pointer; border-radius:24px; padding:17px 12px; display:flex; flex-direction:column; align-items:center; gap:6px;
  font-family:'Baloo 2',cursive; font-weight:800; font-size:14.5px;
  transition:transform .12s cubic-bezier(.34,1.56,.64,1); }
.qcard .em{ font-size:26px; }

/* tutor */
.chat{ display:flex; flex-direction:column; gap:11px; min-height:120px; }
.bubble{ max-width:86%; padding:11px 14px; font-size:14px; line-height:1.45; word-wrap:break-word; overflow-wrap:anywhere; }
.bubble.me{ align-self:flex-end; background:var(--bubble-me-bg); color:var(--bubble-me-text); font-weight:600;
  border-radius:20px 20px 6px 20px; box-shadow:0 6px 16px var(--glow); }
.bubble.me img{ max-width:180px; border-radius:12px; display:block; margin-bottom:6px; }
.bubble.tutor{ align-self:flex-start; background:var(--bubble-tutor-bg); color:var(--bubble-tutor-text);
  border-radius:20px 20px 20px 6px; box-shadow:0 6px 16px rgba(0,0,0,.16); }
.bubble.tutor strong{ color:inherit; font-weight:800; }
.bubble.tutor p{ margin:7px 0 } .bubble.tutor p:first-child{ margin-top:0 } .bubble.tutor p:last-child{ margin-bottom:0 }
.bubble.tutor ul,.bubble.tutor ol{ margin:7px 0 7px 20px } .bubble.tutor li{ margin:3px 0 }
.bubble.tutor code{ background:rgba(0,0,0,.08); padding:1px 5px; border-radius:5px; font-size:13px; }
.eqcard,.graphcard{ align-self:flex-start; width:88%; background:var(--bubble-tutor-bg); color:var(--bubble-tutor-text);
  border-radius:18px; padding:14px; box-shadow:0 6px 16px rgba(0,0,0,.16); }
.eqcard .lab,.graphcard .lab{ font-family:'Baloo 2',cursive; font-size:9px; font-weight:800; letter-spacing:.12em; color:#9a8fb0; margin-bottom:9px; }
.eqcard .katex{ font-size:1.25em; }
.desmos{ width:100%; height:200px; border-radius:12px; overflow:hidden; }
.typing{ display:inline-flex; gap:5px; } .typing span{ width:7px; height:7px; border-radius:50%; background:var(--lilac); animation:blink 1.2s infinite; }
.typing span:nth-child(2){ animation-delay:.2s } .typing span:nth-child(3){ animation-delay:.4s }

.nexts{ align-self:flex-start; display:flex; flex-wrap:wrap; gap:8px; width:96%; }
.chip{ font-size:12.5px; font-weight:700; padding:8px 13px; border-radius:999px; cursor:pointer;
  color:var(--text); background:var(--surface); border:1px solid var(--surface-border);
  transition:transform .12s cubic-bezier(.34,1.56,.64,1); }
.chip.hot{ color:#fff; font-weight:800; background:var(--cta-holo); border:0; box-shadow:0 5px 12px var(--glow); }

/* tutor header */
.tutor-head{ display:flex; align-items:center; justify-content:space-between; }
.tutor-head .who{ display:flex; align-items:center; gap:10px; }
.tutor-head .status{ font-size:10px; color:var(--chill); font-weight:800; }
.socratic{ display:flex; align-items:center; gap:7px; cursor:pointer; user-select:none; }
.socratic .lbl{ font-size:9.5px; font-weight:800; color:var(--text-dim); letter-spacing:.04em; }
.sw{ width:42px; height:24px; border-radius:999px; background:var(--chip-bg); padding:2px; display:flex; justify-content:flex-start;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.3); transition:background .2s; }
.sw .knob{ width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.35); transition:transform .2s; }
.socratic.on .sw{ background:var(--cta-holo); box-shadow:inset 0 1px 3px rgba(0,0,0,.3),0 3px 8px var(--glow); }
.socratic.on .sw .knob{ transform:translateX(18px); }

/* composer */
.composer{ display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--surface-border);
  border-radius:27px; padding:6px 8px 6px 6px; box-shadow:0 12px 28px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.26);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.composer textarea{ flex:1; background:transparent; border:0; outline:none; resize:none; color:var(--text);
  font-family:'Plus Jakarta Sans'; font-size:14px; line-height:1.4; max-height:110px; padding:9px 2px; }
.composer textarea::placeholder{ color:var(--text-dim); }
.cbtn{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; flex-shrink:0; cursor:pointer; border:0;
  transition:transform .12s cubic-bezier(.34,1.56,.64,1); }
.cbtn.plus{ background:var(--cta-holo); color:#fff; font-size:22px; box-shadow:0 4px 10px var(--glow), inset 0 1px 0 rgba(255,255,255,.5); }
.cbtn.send{ background:var(--chrome); color:#26262e; font-size:16px; box-shadow:0 4px 10px var(--glow), inset 0 1px 0 #fff; }
.fx{ width:38px; height:38px; border-radius:12px; background:var(--chip-bg); display:grid; place-items:center;
  color:var(--text); font-size:14px; font-weight:800; font-style:italic; flex-shrink:0; cursor:pointer; }
.preview-strip{ display:flex; gap:8px; flex-wrap:wrap; }
.preview-strip .th{ position:relative; }
.preview-strip img{ height:52px; border-radius:10px; border:1px solid var(--surface-border); }
.preview-strip .rm{ position:absolute; top:-6px; right:-6px; width:18px; height:18px; border-radius:50%; background:var(--rose);
  color:#fff; font-size:12px; display:grid; place-items:center; cursor:pointer; font-weight:800; }
#mathfield-wrap{ display:none; position:fixed; left:12px; right:12px; top:calc(12px + env(safe-area-inset-top)); z-index:150;
  background:var(--surface); border:1px solid var(--surface-border); border-radius:18px; padding:12px;
  box-shadow:0 14px 40px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.22);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  animation:pop .2s ease; }
#mathfield-wrap.show{ display:block; }
math-field{ width:100%; background:var(--surface-2); border:1px solid var(--surface-border); border-radius:14px; padding:10px; color:var(--text); font-size:20px; }

/* files */
.drop{ border:2px dashed var(--surface-border); border-radius:24px; padding:22px; text-align:center;
  background:var(--surface-2); position:relative; overflow:hidden; cursor:pointer; }
.drop .halo{ position:absolute; inset:0; background:var(--holo); opacity:.1; pointer-events:none; }
.drop .icon{ width:54px; height:54px; margin:0 auto 9px; border-radius:16px; background:var(--cta-holo); display:grid; place-items:center;
  font-size:26px; box-shadow:0 8px 18px var(--glow); animation:floatY 4s ease-in-out infinite; position:relative; }
.drop.hover{ border-color:var(--lilac); }
.filters{ display:flex; gap:8px; }
.file-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.filecard{ background:var(--surface); border:1px solid var(--surface-border); border-radius:20px; padding:12px;
  box-shadow:0 8px 20px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.2); cursor:pointer; text-decoration:none;
  transition:transform .12s cubic-bezier(.34,1.56,.64,1); }
.filecard .prev{ height:64px; border-radius:14px; display:grid; place-items:center; font-size:28px; margin-bottom:10px; position:relative;
  background-size:cover; background-position:center; }
.filecard .tag{ position:absolute; top:6px; right:6px; font-size:8px; font-weight:800; color:#fff; padding:2px 6px; border-radius:6px; }
.filecard .fn{ font-size:13px; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.filecard .fmeta{ font-size:10px; color:var(--text-dim); margin-top:2px; }

/* tracker */
.weekstrip{ display:flex; gap:6px; }
.wd{ flex:1; text-align:center; padding:8px 0 7px; border-radius:16px; background:var(--surface); border:1px solid var(--surface-border); cursor:pointer;
  transition:transform .12s; }
.wd .dn{ font-size:10px; font-weight:800; color:var(--text-dim); }
.wd .dd{ font-family:'Baloo 2',cursive; font-weight:800; font-size:16px; color:var(--text); }
.wd .dots{ display:flex; gap:2px; justify-content:center; margin-top:3px; min-height:5px; }
.wd .dots span{ width:5px; height:5px; border-radius:50%; }
.wd.sel{ background:var(--cta-holo); box-shadow:0 8px 18px var(--glow); }
.wd.sel .dn,.wd.sel .dd{ color:#fff; }
.legend{ display:flex; flex-wrap:wrap; gap:7px 12px; padding:2px; }
.legend span{ display:flex; align-items:center; gap:5px; font-size:11px; font-weight:700; color:var(--text-dim); }
.legend .lg{ width:9px; height:9px; border-radius:50%; }
.daygroup .glabel{ font-size:10px; font-weight:800; letter-spacing:.1em; color:var(--text-dim); margin:6px 0 7px; }
.assign{ display:flex; align-items:center; gap:11px; background:var(--surface); border:1px solid var(--surface-border);
  border-radius:16px; padding:11px 13px; box-shadow:0 6px 16px rgba(0,0,0,.12); margin-bottom:8px; }
.assign .cls{ font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.assign .ti{ font-size:13.5px; font-weight:700; color:var(--text); }
.assign .when{ font-size:10.5px; font-weight:800; color:var(--text-dim); white-space:nowrap; }
.assign .del{ font-size:14px; color:var(--text-dim); cursor:pointer; opacity:.5; }
.assign .del:hover{ opacity:1; color:var(--rose); }

/* extras grid */
.extras-grid{ display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.tool{ background:var(--surface); border:1px solid var(--surface-border); border-radius:24px; padding:16px; cursor:pointer;
  box-shadow:0 12px 26px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.2); position:relative; overflow:hidden;
  min-height:150px; display:flex; flex-direction:column; justify-content:space-between;
  transition:transform .12s cubic-bezier(.34,1.56,.64,1); }
.tool:active{ transform:scale(.96); }
.tool .blob{ position:absolute; top:-22px; right:-22px; width:84px; height:84px; border-radius:50%; background:var(--holo); opacity:.2; filter:blur(7px); }
.tool .em{ font-size:30px; position:relative; }
.tool .tn{ font-family:'Baloo 2',cursive; font-weight:800; font-size:17px; color:var(--text); position:relative; }
.tool .ts{ font-size:11px; color:var(--text-dim); margin-top:1px; position:relative; }

/* fields */
.field{ margin:10px 0; }
.field label{ display:block; font-size:12px; color:var(--text-dim); margin-bottom:5px; font-weight:600; }
.field input,.field textarea,.field select{ width:100%; background:var(--surface-2); border:1px solid var(--surface-border);
  border-radius:12px; color:var(--text); font-family:'Plus Jakarta Sans'; font-size:14px; padding:11px 13px; outline:none; }
.field textarea{ resize:vertical; min-height:110px; line-height:1.6; }
.result-big{ font-family:'Baloo 2',cursive; font-weight:800; font-size:34px; text-align:center; margin-top:10px; }

/* flashcards */
.deck{ perspective:1200px; margin:12px 0; }
.flash{ position:relative; height:200px; cursor:pointer; transition:transform .5s; transform-style:preserve-3d; }
.flash.flip{ transform:rotateY(180deg); }
.flash .face{ position:absolute; inset:0; backface-visibility:hidden; border-radius:18px; display:grid; place-items:center;
  padding:22px; text-align:center; font-size:17px; line-height:1.5; border:1px solid var(--surface-border);
  font-family:'Baloo 2',cursive; font-weight:700; }
.flash .front{ background:var(--surface); color:var(--text); }
.flash .back{ background:var(--cta-holo); color:#fff; transform:rotateY(180deg); }
.deck-nav{ display:flex; justify-content:space-between; align-items:center; margin-top:10px; color:var(--text-dim); font-size:13px; }

/* timer */
.timer-wrap{ text-align:center; }
.timer{ font-family:'Baloo 2',cursive; font-weight:800; font-size:60px; line-height:1;
  background:var(--heading-chrome); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 2px 8px var(--glow)); }
.timer-controls{ display:flex; gap:10px; justify-content:center; margin-top:16px; }

/* modal + toast */
.modal{ position:fixed; inset:0; background:rgba(3,8,11,.66); backdrop-filter:blur(5px); display:none; place-items:center; z-index:200; padding:20px; }
.modal.show{ display:grid; }
.modal .box{ max-width:420px; width:100%; }
.btn-wide{ width:100%; border-radius:14px; padding:13px; margin-top:6px; }
.toast{ position:fixed; bottom:96px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--surface);
  border:1px solid var(--surface-border); color:var(--text); padding:12px 20px; border-radius:16px; z-index:300;
  opacity:0; transition:.25s; pointer-events:none; font-size:14px; font-weight:600; backdrop-filter:blur(14px);
  box-shadow:0 18px 36px rgba(0,0,0,.3); }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

.spotify-slot iframe{ border-radius:14px; border:0; width:100%; }
.side-brand{ display:none; }

/* ============================================================
   DESKTOP / LAPTOP LAYOUT — sidebar nav + wider bento
   (phone layout below this breakpoint is untouched)
   ============================================================ */
@media(min-width:980px){
  .app{ max-width:1180px; margin:0; padding:30px 44px 44px 250px; }

  /* bottom tab bar -> fixed left sidebar */
  .tabbar{ flex-direction:column; align-items:stretch; justify-content:flex-start;
    top:26px; bottom:26px; left:26px; right:auto; transform:none;
    width:198px; height:auto; border-radius:26px; padding:18px 12px; gap:4px; }
  .side-brand{ display:block; font-family:'Baloo 2',cursive; font-weight:800; font-size:23px;
    color:var(--text); padding:6px 12px 16px; }
  .tabbar .tab{ flex-direction:row; justify-content:flex-start; gap:13px; padding:12px 14px;
    border-radius:14px; opacity:.7; }
  .tabbar .tab .ic{ font-size:20px; width:auto; height:auto; background:none; box-shadow:none; }
  .tabbar .tab .lbl{ font-size:14.5px; }
  .tabbar .tab.active{ opacity:1; background:var(--surface-2); }
  .tabbar .tab.active .ic{ width:auto; height:auto; background:none; box-shadow:none; }

  /* content widths */
  .view{ max-width:900px; }
  #home.show{ display:grid; grid-template-columns:1.6fr 1fr; gap:16px; align-items:start; max-width:1000px; }
  #home>.head-row{ grid-column:1/-1; }
  #home>.quick{ grid-column:1/-1; max-width:520px; }
  #home>.card.np, #home>.spotify-slot{ grid-column:2; }

  .file-grid{ grid-template-columns:repeat(auto-fill,minmax(165px,1fr)); }
  .extras-grid{ grid-template-columns:repeat(4,1fr); }

  /* math panel floats top-right of the content, not full width */
  #mathfield-wrap{ left:auto; right:44px; width:440px; top:calc(20px + env(safe-area-inset-top)); }
}