/* ═══════════════════════════════════════════════════════
   RealStudy — design system
   ═══════════════════════════════════════════════════════ */

/* ── Tokens ──────────────────────────────────────────── */
:root {
  --bg-start:       #EDE9FF;
  --bg-mid:         #F8F5FF;
  --bg-end:         #FFF0F8;
  --surface:        #FFFFFF;
  --surface-2:      rgba(108,92,231,.06);
  --primary:        #5E4FD1;          /* 5.6:1 on white – AA ✓ */
  --primary-dark:   #4A3DBD;
  --primary-glow:   rgba(94,79,209,.18);
  --primary-light:  rgba(94,79,209,.09);
  --grad-card:      linear-gradient(135deg,#7060E8 0%,#9E90FF 100%);
  --secondary:      #9188F0;
  --success:        #0A8F62;          /* 4.6:1 on white – AA ✓ */
  --warning:        #A05F00;          /* 5.1:1 on white – AA ✓ */
  --danger:         #C0392B;          /* 5.8:1 on white – AA ✓ */
  --text:           #1A1530;
  --text-2:         #3D3660;
  --text-3:         #6B648A;          /* 4.5:1 on white – AA ✓ */
  --text-4:         #A09BBF;          /* decorative / large text only */
  --border:         rgba(94,79,209,.12);
  --border-2:       rgba(94,79,209,.07);
  --fill:           rgba(94,79,209,.07);
  --fill-2:         rgba(94,79,209,.04);

  /* Type accent */
  --type-reading:    #5E4FD1;
  --type-assignment: #9188F0;
  --type-exam:       #C0392B;

  /* Shadows */
  --shadow-xs: 0 1px 4px rgba(94,79,209,.07);
  --shadow-sm: 0 2px 12px rgba(94,79,209,.10), 0 1px 3px rgba(0,0,0,.04);
  --shadow-md: 0 6px 24px rgba(94,79,209,.13), 0 2px 6px rgba(0,0,0,.05);
  --shadow-lg: 0 12px 40px rgba(94,79,209,.16), 0 4px 12px rgba(0,0,0,.06);
  --shadow-xl: 0 20px 60px rgba(94,79,209,.20), 0 6px 20px rgba(0,0,0,.08);

  /* Radii */
  --r-xs:   6px;  --r-sm:  10px; --r-md: 14px;
  --r-lg:  18px;  --r-xl:  22px; --r-2xl: 28px;
  --r-full: 9999px;

  /* Spacing */
  --sp-1:4px; --sp-2:8px;  --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px;
  --sp-12:48px; --sp-16:64px;

  --sidebar-w: 248px;
  --mob-nav-h: 64px;
  --ease: cubic-bezier(.25,.46,.45,.94);
}

/* ── Accessibility foundations ───────────────────────── */
.skip-link {
  position: absolute; top: -9999px; left: var(--sp-4);
  background: var(--primary); color: #fff;
  padding: 10px 18px; border-radius: var(--r-sm);
  font-size: .875rem; font-weight: 600;
  z-index: 9999; text-decoration: none;
  transition: top .1s;
}
.skip-link:focus { top: var(--sp-4); }

:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
button:focus-visible, a:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── Reset ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Inter", "Helvetica Neue", Arial, sans-serif;
  background: linear-gradient(145deg,
    var(--bg-start) 0%, var(--bg-mid) 50%, var(--bg-end) 100%) fixed;
  min-height: 100vh; color: var(--text);
  line-height: 1.5; -webkit-font-smoothing: antialiased;
}
img, svg { display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
input, select, textarea { font-family: inherit; font-size: inherit; }
ul { list-style: none; }

/* ── Touch targets ───────────────────────────────────── */
button, [role="button"], [role="tab"],
.nav-item, .filter-btn, .date-chip, .mob-tab-btn {
  min-height: 44px;
  min-width: 44px;
}
/* Override the 44px floor for truly compact inline elements */
.badge, .date-chip-dot { min-height: 0; min-width: 0; }

/* Prevent 300ms tap delay and double-tap zoom on interactive elements */
button, [role="button"], [role="tab"],
.nav-item, .filter-btn, .mob-tab-btn,
.assignment-card, .complete-check, .subject-chip,
.upload-zone, .date-chip, a {
  touch-action: manipulation;
}

/* ── Typography ──────────────────────────────────────── */
.display {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display",
    "Inter", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700; letter-spacing: -.025em;
}

/* ── Utility ─────────────────────────────────────────── */
.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;
}
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Buttons ─────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  border: none; border-radius: var(--r-full); padding: 10px 22px;
  font-size: .9rem; font-weight: 600; line-height: 1;
  transition: background .15s var(--ease), box-shadow .15s, transform .1s, opacity .15s;
  white-space: nowrap; user-select: none;
  min-height: 44px;
}
.btn:active { transform: scale(.97); }
.btn-primary {
  background: var(--primary); color: #fff;
  box-shadow: 0 4px 16px rgba(94,79,209,.38);
}
.btn-primary:hover { background: var(--primary-dark); box-shadow: 0 6px 20px rgba(94,79,209,.48); }
.btn-secondary { background: var(--primary-light); color: var(--primary); }
.btn-secondary:hover { background: rgba(94,79,209,.14); }
.btn-danger { background: rgba(192,57,43,.1); color: var(--danger); }
.btn-danger:hover { background: rgba(192,57,43,.18); }
.btn-ghost { background: transparent; color: var(--text-3); }
.btn-ghost:hover { background: var(--fill); color: var(--text-2); }
.btn-full { width: 100%; justify-content: center; }
.btn-sm { padding: 7px 16px; font-size: .8125rem; min-height: 36px; }
.btn-lg { padding: 14px 32px; font-size: 1rem; }
.btn:disabled { opacity: .45; pointer-events: none; }

/* ── Forms ───────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 5px; }
.field-label, .field > label {
  font-size: .8125rem; font-weight: 600; color: var(--text-2);
  display: block;
}
.input {
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--r-md); padding: 11px 14px;
  font-size: .9375rem; color: var(--text);
  outline: none; transition: border-color .15s, box-shadow .15s; width: 100%;
  min-height: 44px;
}
.input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); }
.input::placeholder { color: var(--text-4); }
textarea.input { resize: vertical; min-height: 80px; }
select.input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236B648A' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.form-error {
  font-size: .8125rem; font-weight: 500; color: var(--danger);
  background: rgba(192,57,43,.07); border-radius: var(--r-sm);
  padding: 9px var(--sp-3); margin-top: var(--sp-1);
  border-left: 3px solid var(--danger);
}

/* ── Card ────────────────────────────────────────────── */
.card {
  background: var(--surface); border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm); overflow: hidden;
}

/* ── Badge ───────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: var(--r-full);
  font-size: .6875rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; line-height: 1.4;
  white-space: nowrap;
}
.badge-reading    { background: rgba(94,79,209,.12);   color: var(--primary); }
.badge-assignment { background: rgba(145,136,240,.15); color: #4E46B3; }
.badge-exam       { background: rgba(192,57,43,.12);   color: var(--danger); }
.badge-pending    { background: rgba(107,100,138,.1);  color: var(--text-3); }
.badge-in_progress{ background: rgba(160,95,0,.1);     color: var(--warning); }
.badge-completed  { background: rgba(10,143,98,.1);    color: var(--success); }
.badge-high       { background: rgba(192,57,43,.12);   color: var(--danger); }
.badge-medium     { background: rgba(160,95,0,.1);     color: var(--warning); }
.badge-low        { background: rgba(10,143,98,.1);    color: var(--success); }

/* ══════════════════════════════════════════════════════
   LANDING
   ══════════════════════════════════════════════════════ */
#landing {
  min-height: 100vh;
  background: linear-gradient(145deg, #EDE9FF 0%, #F8F5FF 50%, #FFF0F8 100%);
}
.landing-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) var(--sp-8);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.75);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  min-height: 60px;
}
.landing-logo {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: 1.1rem; font-weight: 700; letter-spacing: -.01em; color: var(--text);
}
.logo-mark {
  width: 32px; height: 32px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  /* Brand SVG carries its own color/shape — no tile background. */
  background: transparent;
}
img.logo-mark { display: block; object-fit: contain; }
.landing-nav { display: flex; align-items: center; gap: var(--sp-2); }
.landing-hero {
  max-width: 780px; margin: 0 auto;
  padding: var(--sp-16) var(--sp-8) var(--sp-12); text-align: center;
}
.hero-eyebrow {
  display: inline-block;
  font-size: .8125rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--primary); margin-bottom: var(--sp-4);
}
.hero-title {
  font-size: clamp(2.2rem, 6vw, 3.5rem);
  font-weight: 800; line-height: 1.1; letter-spacing: -.035em;
  color: var(--text); margin-bottom: var(--sp-5);
}
.hero-sub {
  font-size: 1.0625rem; color: var(--text-3); line-height: 1.7;
  max-width: 520px; margin: 0 auto var(--sp-8);
}
.hero-cta { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }

.landing-features { padding: var(--sp-16) var(--sp-8); }
.section-title {
  text-align: center;
  font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em;
  margin-bottom: var(--sp-12); color: var(--text);
}
.features-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--sp-5); max-width: 920px; margin: 0 auto;
}
.feature-item {
  background: var(--surface); border-radius: var(--r-xl);
  padding: var(--sp-6); box-shadow: var(--shadow-sm);
}
.feature-icon {
  width: 48px; height: 48px; border-radius: var(--r-lg);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; margin-bottom: var(--sp-4);
}
.feature-icon-blue   { background: rgba(94,79,209,.12); }
.feature-icon-purple { background: rgba(145,136,240,.18); }
.feature-icon-green  { background: rgba(10,143,98,.12); }
.feature-icon-orange { background: rgba(160,95,0,.12); }
.feature-title { font-size: 1rem; font-weight: 700; margin-bottom: 5px; color: var(--text); }
.feature-desc  { font-size: .875rem; color: var(--text-3); line-height: 1.6; }

.landing-pricing { padding: var(--sp-16) var(--sp-8); text-align: center; }
.pricing-card {
  max-width: 380px; margin: 0 auto;
  background: var(--surface); border: 2px solid var(--primary);
  border-radius: var(--r-2xl); padding: var(--sp-10);
  box-shadow: var(--shadow-lg);
}
/* Trial badge inside pricing card */
.pricing-trial-badge {
  display: inline-block; margin-bottom: var(--sp-4);
  background: rgba(10,143,98,.1); color: var(--success);
  font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 14px; border-radius: var(--r-full);
  border: 1.5px solid rgba(10,143,98,.22);
}
/* Fine-print terms below pricing CTA */
.pricing-terms {
  font-size: .75rem; color: var(--text-4); margin-top: var(--sp-4);
  line-height: 1.6; text-align: center;
}

.price-amount {
  font-size: 3.2rem; font-weight: 800; letter-spacing: -.04em;
  color: var(--text); line-height: 1;
}
.price-amount span { font-size: 1rem; font-weight: 500; color: var(--text-3); }
.price-label { color: var(--text-3); margin-top: 4px; margin-bottom: var(--sp-6); }
.pricing-features { text-align: left; margin-bottom: var(--sp-8); }
.pricing-features li {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: .9375rem; padding: 8px 0;
  border-bottom: 1px solid var(--border-2);
}
.pricing-features li:last-child { border-bottom: none; }
.pricing-features .check { color: var(--success); font-size: 1rem; font-weight: 700; }

/* Trial note below hero CTA */
.hero-trial-note {
  margin-top: var(--sp-3); font-size: .8125rem; color: var(--text-3);
  letter-spacing: .01em;
}

.landing-footer {
  padding: var(--sp-8); border-top: 1px solid var(--border);
  text-align: center; font-size: .8125rem; color: var(--text-4);
}
/* "Keep me signed in" checkbox row in the login modal */
.remember-row {
  display: flex; align-items: center; gap: var(--sp-2);
  margin: var(--sp-2) 0 var(--sp-1);
  font-size: .85rem; color: var(--text-3);
  cursor: pointer; user-select: none;
}
.remember-row input[type="checkbox"] {
  width: 16px; height: 16px; accent-color: var(--brand);
  cursor: pointer; flex-shrink: 0;
}
.footer-legal {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--sp-1) var(--sp-4); margin-top: var(--sp-3);
}
.footer-legal a {
  color: var(--text-4); text-decoration: none; font-size: .8rem;
}
.footer-legal a:hover { color: var(--brand); text-decoration: underline; }

/* ══════════════════════════════════════════════════════
   AUTH MODAL
   ══════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(26,21,48,.4);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-4);
}
.modal-box {
  background: var(--surface); border-radius: var(--r-2xl);
  width: 100%; max-width: 400px;
  box-shadow: var(--shadow-xl); overflow: hidden;
  animation: modal-in .2s var(--ease);
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-6) var(--sp-6) 0;
}
.modal-header h2 { font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; }
.modal-close {
  background: var(--fill); width: 32px; height: 32px; min-height: 32px;
  border-radius: var(--r-full); display: flex; align-items: center; justify-content: center;
  color: var(--text-3); font-size: .75rem; flex-shrink: 0;
  transition: background .15s, color .15s;
}
.modal-close:hover { background: rgba(94,79,209,.15); color: var(--primary); }
.auth-tabs { display: flex; padding: var(--sp-4) var(--sp-6) 0; gap: 4px; }
.auth-tab {
  flex: 1; padding: 9px; border-radius: var(--r-sm);
  font-size: .875rem; font-weight: 500; color: var(--text-3);
  transition: background .15s, color .15s; min-height: 40px;
}
.auth-tab.active { background: var(--primary-light); color: var(--primary); font-weight: 700; }
.auth-form {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-6) var(--sp-6);
}

/* ══════════════════════════════════════════════════════
   SUBSCRIBE GATE
   ══════════════════════════════════════════════════════ */
#page-subscribe {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center; padding: var(--sp-8);
}
.subscribe-card {
  background: var(--surface); border-radius: var(--r-2xl);
  padding: var(--sp-10); max-width: 420px; width: 100%;
  box-shadow: var(--shadow-lg); text-align: center;
}
.subscribe-icon-wrap {
  width: 68px; height: 68px; margin: 0 auto var(--sp-5);
  border-radius: var(--r-xl); background: var(--grad-card);
  display: flex; align-items: center; justify-content: center; font-size: 1.8rem;
}
/* When the wrap is itself an <img class="subscribe-icon-wrap" src="/icon.svg">,
   strip the tile background — the SVG already includes its own purple square. */
img.subscribe-icon-wrap { background: transparent; object-fit: contain; display: block; }
.subscribe-card h2 { font-size: 1.6rem; font-weight: 700; margin-bottom: var(--sp-2); }
.subscribe-card > p { color: var(--text-3); margin-bottom: var(--sp-5); }
.subscribe-price {
  font-size: 1rem; font-weight: 700; color: var(--text-2);
  margin: var(--sp-3) 0; letter-spacing: .01em;
}
.subscribe-ul { text-align: left; margin: var(--sp-5) 0; }
.subscribe-ul li {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: .9375rem; padding: 7px 0; border-bottom: 1px solid var(--border-2);
}
.subscribe-ul li:last-child { border-bottom: none; }
.subscribe-ul .check { color: var(--success); font-weight: 700; }
.subscribe-actions { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-5); }

/* ══════════════════════════════════════════════════════
   APP SHELL
   ══════════════════════════════════════════════════════ */
#page-app { display: flex; min-height: 100vh; }
#app-inner { display: flex; flex: 1; min-height: 100vh; }

/* ── Sidebar (desktop) ───────────────────────────────── */
#sidebar {
  width: var(--sidebar-w); flex-shrink: 0;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  z-index: 10;
}
.sidebar-logo {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-5) var(--sp-4);
  font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em;
}
.sidebar-nav { flex: 1; padding: var(--sp-2) var(--sp-3); }
.nav-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 10px var(--sp-4); border-radius: var(--r-full);
  font-size: .9375rem; font-weight: 500; color: var(--text-3);
  transition: background .14s, color .14s;
  cursor: pointer; user-select: none;
  margin-bottom: 3px;
}
.nav-item:hover  { background: var(--fill); color: var(--text-2); }
.nav-item.active {
  background: var(--primary); color: #fff; font-weight: 700;
  box-shadow: 0 4px 14px rgba(94,79,209,.38);
}
.nav-icon { font-size: 1.1rem; width: 22px; text-align: center; flex-shrink: 0; }
.sidebar-footer { padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--border); }
.user-chip { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.user-avatar {
  width: 38px; height: 38px; border-radius: var(--r-full);
  background: var(--grad-card);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: .875rem; font-weight: 700; flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(94,79,209,.3);
}
.user-meta { overflow: hidden; flex: 1; }
.user-name { font-size: .875rem; font-weight: 700; color: var(--text); }
.user-plan { font-size: .75rem; color: var(--success); font-weight: 600; }
.user-plan.inactive { color: var(--text-4); }
.user-plan.trial { color: var(--warning); }

/* ── Main content ────────────────────────────────────── */
#main-content {
  flex: 1; min-width: 0; overflow-y: auto;
  padding: var(--sp-8);
}
.view { animation: view-enter .18s var(--ease); }
@keyframes view-enter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.view-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-3); margin-bottom: var(--sp-6);
}
.view-header > :first-child { flex: 1; min-width: 0; }
.view-title { font-size: 1.75rem; font-weight: 800; letter-spacing: -.03em; }
.view-subtitle { font-size: .875rem; color: var(--text-3); margin-top: 3px; }

/* ── Mobile bottom navigation ────────────────────────── */
#mobile-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  background: rgba(255,255,255,.90);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  border-top: 1px solid var(--border);
  padding: 6px 0 max(6px, env(safe-area-inset-bottom));
  height: calc(var(--mob-nav-h) + max(0px, env(safe-area-inset-bottom)));
}
.mob-nav-inner {
  display: flex; align-items: stretch; height: 100%; max-width: 480px; margin: 0 auto;
}
.mob-tab-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3px;
  background: none; border: none; cursor: pointer;
  color: var(--text-4); transition: color .15s;
  padding: 4px; border-radius: var(--r-sm);
  font-size: .6875rem; font-weight: 600; letter-spacing: .03em;
  min-height: 0; /* override general rule inside nav */
}
.mob-tab-btn svg { width: 22px; height: 22px; flex-shrink: 0; }
.mob-tab-btn.active { color: var(--primary); }
.mob-tab-btn:hover:not(.active) { color: var(--text-2); }

/* ══════════════════════════════════════════════════════
   DATE STRIP
   ══════════════════════════════════════════════════════ */
.date-strip {
  display: flex; gap: var(--sp-2); margin-bottom: var(--sp-5);
  overflow-x: auto; padding-bottom: 4px; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.date-strip::-webkit-scrollbar { display: none; }
.date-chip {
  display: flex; flex-direction: column; align-items: center;
  padding: 10px 14px; border-radius: var(--r-xl); min-width: 52px;
  background: rgba(255,255,255,.75); backdrop-filter: blur(8px);
  border: 1.5px solid transparent;
  transition: all .18s var(--ease); cursor: default; user-select: none;
  flex-shrink: 0;
}
.date-chip.active {
  background: var(--primary); border-color: var(--primary);
  box-shadow: 0 4px 16px rgba(94,79,209,.38);
}
.date-chip-day {
  font-size: .6875rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-3); line-height: 1;
}
.date-chip.active .date-chip-day { color: rgba(255,255,255,.8); }
.date-chip-num {
  font-size: 1.2rem; font-weight: 800; color: var(--text); line-height: 1.1; margin-top: 3px;
}
.date-chip.active .date-chip-num { color: #fff; }
.date-chip-dot {
  width: 5px; height: 5px; border-radius: var(--r-full);
  background: transparent; margin-top: 5px; transition: background .18s;
}
.date-chip-dot.has-items { background: var(--primary); }
.date-chip.active .date-chip-dot.has-items { background: rgba(255,255,255,.7); }

/* ══════════════════════════════════════════════════════
   DASHBOARD
   ══════════════════════════════════════════════════════ */
.dash-greeting {
  margin-bottom: var(--sp-5);
  line-height: 1.15;
}
.dash-greeting-line1 {
  font-size: 1.75rem; font-weight: 400; color: var(--text-3); letter-spacing: -.02em;
}
.dash-greeting-line2 {
  font-size: 2.25rem; font-weight: 800; color: var(--text); letter-spacing: -.04em;
}

/* Hero focus card */
.focus-hero-card {
  background: var(--grad-card); border-radius: var(--r-2xl);
  padding: var(--sp-5) var(--sp-6); margin-bottom: var(--sp-4); color: #fff;
  position: relative; overflow: hidden;
  box-shadow: 0 8px 32px rgba(94,79,209,.40);
}
.focus-hero-card::before {
  content: ''; position: absolute; top: -50px; right: -50px;
  width: 200px; height: 200px; border-radius: var(--r-full);
  background: rgba(255,255,255,.08); pointer-events: none;
}
.focus-hero-card::after {
  content: ''; position: absolute; bottom: -40px; right: 50px;
  width: 140px; height: 140px; border-radius: var(--r-full);
  background: rgba(255,255,255,.05); pointer-events: none;
}
.focus-hero-label {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: .875rem; font-weight: 600; opacity: .88;
  margin-bottom: var(--sp-3); position: relative; z-index: 1;
}
.focus-hero-time {
  display: flex; align-items: baseline; gap: 3px;
  margin-bottom: var(--sp-4); position: relative; z-index: 1;
}
.focus-hero-time .h {
  font-size: 3rem; font-weight: 800; line-height: 1; letter-spacing: -.04em;
}
.focus-hero-time .sub {
  font-size: .95rem; font-weight: 500; opacity: .7; margin-right: 3px; align-self: flex-end; margin-bottom: 4px;
}
.focus-hero-blocks {
  display: flex; flex-direction: column; gap: var(--sp-2);
  position: relative; z-index: 1;
}
.focus-block-row {
  display: flex; align-items: center; gap: var(--sp-3);
  background: rgba(255,255,255,.16); border-radius: var(--r-md);
  padding: 9px var(--sp-4); backdrop-filter: blur(4px);
}
.focus-block-dot {
  width: 8px; height: 8px; border-radius: var(--r-full);
  background: rgba(255,255,255,.6); flex-shrink: 0;
}
.focus-block-row-title { font-size: .875rem; font-weight: 600; flex: 1; }
.focus-block-row-time  { font-size: .8125rem; opacity: .82; font-variant-numeric: tabular-nums; }
.focus-hero-empty { font-size: .9375rem; opacity: .75; padding: var(--sp-2) 0; position: relative; z-index: 1; }
.focus-hero-hint {
  font-size: .8125rem; opacity: .6; margin-top: var(--sp-3);
  border-top: 1px solid rgba(255,255,255,.18); padding-top: var(--sp-3);
  position: relative; z-index: 1;
}

/* Compact stat chips (dashboard summary row) */
.stats-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-2); margin-bottom: var(--sp-5);
}
.stat-chip {
  background: var(--surface); border-radius: var(--r-lg);
  padding: var(--sp-3) var(--sp-2); text-align: center;
  box-shadow: var(--shadow-xs); border: 1.5px solid transparent;
}
.stat-chip-value {
  font-size: 1.6rem; font-weight: 800; letter-spacing: -.04em; line-height: 1;
  color: var(--text);
}
.stat-chip-label {
  font-size: .625rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-3); margin-top: 4px;
}
.stat-chip.accent-danger  { border-color: rgba(192,57,43,.18); }
.stat-chip.accent-warning { border-color: rgba(160,95,0,.18); }
.stat-chip.accent-danger  .stat-chip-value { color: var(--danger); }
.stat-chip.accent-warning .stat-chip-value { color: var(--warning); }
.stat-chip.accent-success .stat-chip-value { color: var(--success); }
.stat-chip.accent-primary .stat-chip-value { color: var(--primary); }
.stat-chip.accent-muted   .stat-chip-value { color: var(--text-3); }

/* Urgent overdue banner */
.urgent-banner {
  display: flex; align-items: center; gap: var(--sp-3);
  background: rgba(192,57,43,.07); border: 1.5px solid rgba(192,57,43,.22);
  border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-3); font-size: .875rem;
}
.urgent-banner-icon { font-size: .9rem; flex-shrink: 0; }
.urgent-banner-text { flex: 1; font-weight: 600; color: var(--danger); }
.urgent-banner-btn {
  background: rgba(192,57,43,.1); color: var(--danger);
  min-height: 32px; padding: 6px 14px; flex-shrink: 0;
  border-radius: var(--r-full); font-size: .8125rem; font-weight: 600;
}
.urgent-banner-btn:hover { background: rgba(192,57,43,.18); }

/* Onboarding nudge (new-user dashboard) */
.onboarding-nudge {
  display: flex; flex-direction: column;
  padding: var(--sp-5) var(--sp-6); gap: var(--sp-5);
}
.onboarding-step {
  display: flex; gap: var(--sp-4); align-items: flex-start;
}
.onboarding-num {
  width: 28px; height: 28px; border-radius: var(--r-full); flex-shrink: 0;
  background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .8125rem; font-weight: 700; margin-top: 2px;
}
.onboarding-step-title { font-size: .9375rem; font-weight: 700; color: var(--text); }
.onboarding-step-desc  { font-size: .8125rem; color: var(--text-3); margin-top: 3px; line-height: 1.5; }
.onboarding-step-dim { opacity: .45; pointer-events: none; }
.onboarding-step-dim .onboarding-num { background: var(--text-4); }

/* Section card */
.section-card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-5) var(--sp-6); border-bottom: 1px solid var(--border-2);
}
.section-card-title { font-size: 1rem; font-weight: 700; }

/* Appointment rows */
.appt-row {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-6); border-bottom: 1px solid var(--border-2);
  transition: background .12s; cursor: pointer;
}
.appt-row:last-child { border-bottom: none; }
.appt-row:hover { background: var(--fill-2); }
.appt-date-badge {
  min-width: 44px; text-align: center;
  background: var(--primary-light); border-radius: var(--r-md); padding: 7px 8px; flex-shrink: 0;
}
.appt-badge-day   { font-size: 1.1rem; font-weight: 800; color: var(--primary); line-height: 1; }
.appt-badge-month { font-size: .625rem; font-weight: 700; color: var(--primary); opacity: .75; text-transform: uppercase; }
.appt-info  { flex: 1; min-width: 0; }
.appt-title { font-size: .9375rem; font-weight: 700; }
.appt-sub   { font-size: .8125rem; color: var(--text-3); margin-top: 2px; }
.appt-due   { font-size: .8125rem; font-weight: 700; text-align: right; flex-shrink: 0; white-space: nowrap; }
.appt-chevron { color: var(--text-4); font-size: 1rem; flex-shrink: 0; }
.due-soon { color: var(--warning); }
.due-late { color: var(--danger); }
.due-ok   { color: var(--text-3); }

/* Empty state */
.empty-state {
  padding: var(--sp-10) var(--sp-6); text-align: center;
  color: var(--text-3); font-size: .9375rem; line-height: 1.6;
}
.empty-state-icon { font-size: 2.4rem; margin-bottom: var(--sp-3); }
.empty-state h3 { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: var(--sp-2); }
.empty-cta { margin-top: var(--sp-4); }

/* ══════════════════════════════════════════════════════
   ASSIGNMENTS
   ══════════════════════════════════════════════════════ */
.filter-row {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  overflow-x: auto; flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  padding-bottom: 4px;
}
.filter-row::-webkit-scrollbar { display: none; }
.filter-btn {
  padding: 8px 18px; border-radius: var(--r-full); border: none;
  font-size: .8125rem; font-weight: 600; color: var(--text-3);
  background: rgba(255,255,255,.8); box-shadow: var(--shadow-xs);
  transition: all .14s; flex-shrink: 0;
}
.filter-btn.active {
  background: var(--primary); color: #fff;
  box-shadow: 0 4px 12px rgba(94,79,209,.38);
}
.filter-btn:hover:not(.active) { background: var(--surface); color: var(--text-2); }

.assignment-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.assignment-card {
  background: var(--surface); border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm); border-left: 4px solid transparent;
  transition: box-shadow .18s, transform .12s; cursor: pointer; overflow: hidden;
}
.assignment-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.assignment-card:focus-within { box-shadow: var(--shadow-md); }
.assignment-card.priority-high   { border-left-color: var(--danger); }
.assignment-card.priority-medium { border-left-color: var(--warning); }
.assignment-card.priority-low    { border-left-color: var(--success); }
.assignment-card.status-completed { opacity: .6; }
.assignment-card-inner {
  display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5);
}
.assignment-main { flex: 1; min-width: 0; }
.assignment-title {
  font-size: .9375rem; font-weight: 700; margin-bottom: 3px; color: var(--text);
}
.assignment-meta {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: .8125rem; color: var(--text-3); flex-wrap: wrap;
}
.assignment-right { text-align: right; min-width: 72px; max-width: 110px; flex-shrink: 0; }
.assignment-due-date { font-size: .8125rem; font-weight: 700; }
.assignment-est { font-size: .75rem; color: var(--text-4); margin-top: 2px; }
.complete-check {
  width: 26px; height: 26px; border-radius: var(--r-full); min-height: 0; min-width: 0;
  border: 2px solid var(--border); display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all .15s; color: transparent; font-size: .75rem;
  background: transparent; cursor: pointer;
}
.complete-check:hover { border-color: var(--success); background: rgba(10,143,98,.08); }
.assignment-card.status-completed .complete-check {
  background: var(--success); border-color: var(--success); color: #fff;
}

/* ══════════════════════════════════════════════════════
   PLANNER
   ══════════════════════════════════════════════════════ */
.overload-banner {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  background: rgba(160,95,0,.08); border: 1.5px solid rgba(160,95,0,.28);
  border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-5); color: var(--warning);
}
.overload-icon { font-size: 1.1rem; margin-top: 1px; flex-shrink: 0; }
.overload-title { font-size: .9375rem; font-weight: 700; margin-bottom: 3px; }
.overload-list  { font-size: .875rem; line-height: 1.6; color: var(--text-2); }

.planner-header-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--sp-4); flex-wrap: wrap; gap: var(--sp-3);
}
.planner-meta { font-size: .875rem; color: var(--text-3); }

.week-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: var(--sp-3); overflow-x: auto; padding-bottom: var(--sp-2);
  -webkit-overflow-scrolling: touch;
}
.day-col { min-width: 128px; }
.day-header { text-align: center; padding: var(--sp-2) var(--sp-1) var(--sp-3); }
.day-name {
  font-size: .6875rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-3);
}
.day-num {
  font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em;
  line-height: 1.2; color: var(--text); margin-top: 2px;
}
.day-col.is-today .day-name { color: var(--primary); }
.day-col.is-today .day-num {
  background: var(--primary); color: #fff;
  width: 40px; height: 40px; border-radius: var(--r-full);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.1rem; box-shadow: 0 4px 12px rgba(94,79,209,.38);
}
.day-blocks { display: flex; flex-direction: column; gap: var(--sp-2); }
.study-block {
  border-radius: var(--r-md); padding: var(--sp-3);
  font-size: .8125rem; border-left: 3px solid transparent;
  transition: transform .12s, box-shadow .12s;
}
.study-block:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.study-block-reading    { background: rgba(94,79,209,.08);   border-left-color: var(--primary); }
.study-block-assignment { background: rgba(145,136,240,.1);  border-left-color: var(--secondary); }
.study-block-exam       { background: rgba(192,57,43,.08);   border-left-color: var(--danger); }
.study-block-title   { font-weight: 700; color: var(--text); }
.study-block-time    { color: var(--text-3); margin-top: 2px; font-variant-numeric: tabular-nums; }
.study-block-subject { color: var(--text-4); margin-top: 1px; }
.day-empty { text-align: center; padding: var(--sp-6) var(--sp-2); font-size: .8125rem; color: var(--text-4); }
.day-full-date { display: none; } /* shown only via mobile override */
.planner-empty { text-align: center; padding: var(--sp-12); color: var(--text-3); }
.planner-empty h3 { font-size: 1.1rem; font-weight: 700; color: var(--text); margin-bottom: var(--sp-2); }

/* ══════════════════════════════════════════════════════
   SETTINGS
   ══════════════════════════════════════════════════════ */
.settings-section {
  background: var(--surface); border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm); margin-bottom: var(--sp-5); overflow: hidden;
}
.settings-section-header { padding: var(--sp-5) var(--sp-6); border-bottom: 1px solid var(--border-2); }
.settings-section-title { font-size: 1rem; font-weight: 700; color: var(--text); }
.settings-section-desc  { font-size: .8125rem; color: var(--text-3); margin-top: 2px; }
.settings-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) var(--sp-6); border-bottom: 1px solid var(--border-2); gap: var(--sp-4);
}
.settings-row:last-child { border-bottom: none; }
.settings-row-label { font-size: .9375rem; font-weight: 600; color: var(--text); }
.settings-row-desc  { font-size: .8125rem; color: var(--text-3); margin-top: 2px; }
.range-with-value { display: flex; align-items: center; gap: var(--sp-3); }
.range-value { min-width: 44px; text-align: right; font-size: .9375rem; font-weight: 700; color: var(--primary); }
input[type="range"] {
  appearance: none; width: 130px; height: 4px;
  background: var(--border); border-radius: 2px; outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  appearance: none; width: 20px; height: 20px; border-radius: var(--r-full);
  background: var(--primary); box-shadow: 0 2px 8px rgba(94,79,209,.4); cursor: pointer;
}
.settings-form { padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4); }
.billing-info {
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-5) var(--sp-6);
}
.billing-status-dot {
  width: 9px; height: 9px; border-radius: var(--r-full); background: var(--success); flex-shrink: 0;
}
.billing-status-dot.inactive { background: var(--text-4); }
.billing-status-dot.trial    { background: var(--warning); }

/* ══════════════════════════════════════════════════════
   SLIDE-IN PANEL
   ══════════════════════════════════════════════════════ */
.panel-overlay {
  position: fixed; inset: 0; z-index: 100; display: flex; justify-content: flex-end;
}
.panel-backdrop {
  position: absolute; inset: 0;
  background: rgba(26,21,48,.3); backdrop-filter: blur(4px);
  animation: backdrop-in .2s var(--ease);
}
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
.panel-drawer {
  position: relative; z-index: 1;
  width: 100%; max-width: 480px;
  background: var(--surface); box-shadow: var(--shadow-xl); overflow-y: auto;
  animation: panel-in .25s var(--ease); display: flex; flex-direction: column;
}
@keyframes panel-in {
  from { transform: translateX(100%); }
  to   { transform: none; }
}
.panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-6) var(--sp-6) var(--sp-5); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--surface); z-index: 1;
}
.panel-header h2 { font-size: 1.15rem; font-weight: 700; }
.panel-form {
  flex: 1; padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4);
}
.panel-actions {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding-top: var(--sp-4); border-top: 1px solid var(--border-2); margin-top: var(--sp-2);
}

/* PDF upload */
.upload-zone {
  border: 2px dashed var(--border); border-radius: var(--r-xl);
  padding: var(--sp-6); text-align: center; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.upload-zone:hover, .upload-zone.drag-over {
  border-color: var(--primary); background: var(--primary-light);
}
.upload-zone input { display: none; }
.upload-icon { font-size: 1.75rem; margin-bottom: var(--sp-2); }
.upload-text { font-size: .875rem; color: var(--text-3); line-height: 1.5; }
.upload-text strong { color: var(--primary); }
.upload-ext { font-size: .75rem; color: var(--text-4); margin-top: 3px; }

/* PDF upload fieldset */
.pdf-fieldset { border: none; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.pdf-fieldset > legend { margin-bottom: var(--sp-2); width: 100%; }

/* PDF status boxes (shared) */
.pdf-status-box {
  border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4);
  background: var(--fill); display: flex; flex-direction: column; gap: var(--sp-2);
}
.pdf-status-waiting { background: var(--fill); border: 1.5px solid var(--border); }
.pdf-status-ok  { background: rgba(10,143,98,.07); border: 1.5px solid rgba(10,143,98,.22); }
.pdf-status-err { background: rgba(192,57,43,.07); border: 1.5px solid rgba(192,57,43,.22); }
.pdf-status-row { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.pdf-icon { flex-shrink: 0; font-size: 1rem; line-height: 1; }
.pdf-filename {
  flex: 1; font-size: .875rem; font-weight: 600; color: var(--text); min-width: 0;
}
.pdf-status-note { font-size: .8125rem; color: var(--text-3); margin: 0; line-height: 1.5; }
.pdf-status-ok  .pdf-status-note { color: var(--success); }
.pdf-status-err .pdf-filename   { color: var(--danger); }
.pdf-spinner { width: 16px; height: 16px; border-width: 2px; flex-shrink: 0; }
.pdf-dismiss {
  padding: 4px 10px; border-radius: var(--r-full);
  font-size: .75rem; font-weight: 600; line-height: 1;
  background: rgba(0,0,0,.07); color: var(--text-3);
  min-height: 0; min-width: 0; flex-shrink: 0;
  transition: background .12s, color .12s;
}
.pdf-dismiss:hover { background: rgba(0,0,0,.13); color: var(--text); }
.pdf-suggestion {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); padding-top: var(--sp-2);
  border-top: 1px solid rgba(10,143,98,.18); flex-wrap: wrap;
}
.pdf-suggestion-text { font-size: .8125rem; color: var(--text-2); flex: 1; min-width: 0; }

/* Subject chips */
.subject-chips {
  display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-bottom: var(--sp-2);
}
.subject-chip {
  padding: 5px 12px; border-radius: var(--r-full); line-height: 1;
  font-size: .75rem; font-weight: 600; color: var(--primary);
  background: var(--primary-light); border: 1.5px solid transparent;
  min-height: 0; min-width: 0; cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.subject-chip:hover { background: rgba(94,79,209,.15); border-color: var(--primary); }
.subject-chip.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.subject-chip:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Field optional hint */
.field-optional { font-weight: 400; color: var(--text-3); font-size: .8125rem; }

/* ══════════════════════════════════════════════════════
   TOAST
   ══════════════════════════════════════════════════════ */
#toast-container {
  position: fixed; bottom: var(--sp-6); left: 50%; transform: translateX(-50%);
  z-index: 9999; display: flex; flex-direction: column; gap: var(--sp-2);
  pointer-events: none; align-items: center;
}
.toast {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 11px var(--sp-5); border-radius: var(--r-full);
  font-size: .875rem; font-weight: 600; color: #fff;
  box-shadow: var(--shadow-lg); pointer-events: auto;
  animation: toast-in .25s var(--ease); white-space: nowrap;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(12px) scale(.95); }
  to   { opacity: 1; transform: none; }
}
.toast-fade-out { animation: toast-out .3s var(--ease) forwards; }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px) scale(.95); } }
.toast-success { background: linear-gradient(135deg,#0A8F62,#0DB37B); }
.toast-error   { background: linear-gradient(135deg,#C0392B,#E74C3C); }
.toast-info    { background: linear-gradient(135deg,#5E4FD1,#9188F0); }

/* ══════════════════════════════════════════════════════
   SPINNER
   ══════════════════════════════════════════════════════ */
.spinner {
  width: 22px; height: 22px; border: 2.5px solid var(--border);
  border-top-color: var(--primary); border-radius: 50%;
  animation: spin .7s linear infinite; flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-state {
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-12); color: var(--text-3); gap: var(--sp-3); font-size: .9375rem;
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE — tablet
   ══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  :root { --sidebar-w: 210px; }
  #main-content { padding: var(--sp-6); }
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE — mobile
   ══════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  :root { --sidebar-w: 0px; }

  /* Hide sidebar, show mobile nav */
  #sidebar { display: none; }
  #mobile-nav { display: flex; }

  /* Pad content above mobile nav */
  #main-content {
    padding: var(--sp-5) var(--sp-4);
    padding-bottom: calc(var(--mob-nav-h) + max(16px, env(safe-area-inset-bottom)) + var(--sp-4));
  }

  /* Adjust toast to not overlap nav */
  #toast-container {
    bottom: calc(var(--mob-nav-h) + max(12px, env(safe-area-inset-bottom)) + var(--sp-2));
  }

  /* Panel as bottom sheet */
  .panel-overlay { align-items: flex-end; }
  .panel-drawer {
    max-width: 100%; max-height: 94dvh; border-radius: var(--r-2xl) var(--r-2xl) 0 0;
    animation: panel-up .3s var(--ease);
  }
  @keyframes panel-up {
    from { transform: translateY(100%); }
    to   { transform: none; }
  }

  /* Prevent iOS Safari auto-zoom on input focus (requires >= 16px) */
  input:not([type="range"]), select, textarea { font-size: 16px !important; }

  /* Responsive grids */
  .stats-strip { grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); }
  .form-row    { grid-template-columns: 1fr; }

  /* Typography */
  .view-title { font-size: 1.35rem; }
  .view-subtitle { font-size: .8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dash-greeting-line1 { font-size: 1.25rem; }
  .dash-greeting-line2 { font-size: 1.7rem; }
  .focus-hero-time .h  { font-size: 2.4rem; }

  /* View header: keep button from squishing title */
  .view-header { align-items: center; }
  .view-header > :first-child { flex: 1; min-width: 0; overflow: hidden; }

  /* Landing */
  .landing-header { padding: var(--sp-4); }
  .landing-hero   { padding: var(--sp-12) var(--sp-5) var(--sp-10); }
  .hero-title     { font-size: 2rem; }
  .hero-cta       { flex-direction: column; }
  .hero-cta .btn  { width: 100%; }

  /* Auth modal */
  .modal-overlay  { align-items: flex-end; padding: 0; }
  .modal-box      { border-radius: var(--r-2xl) var(--r-2xl) 0 0; max-width: 100%; }

  /* ── Planner: vertical card layout ────────────────── */
  .planner-header-row { align-items: flex-start; }
  .planner-meta {
    font-size: .8125rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* Replace 7-column horizontal grid with vertical card stack */
  .week-grid {
    display: flex; flex-direction: column; gap: var(--sp-3);
    overflow-x: unset; padding-bottom: 0;
  }

  /* Each day becomes a full-width card */
  .day-col {
    min-width: unset;
    background: var(--surface); border-radius: var(--r-xl);
    box-shadow: var(--shadow-sm); overflow: hidden;
  }

  /* Hide days with no blocks (except today — always show today) */
  .day-col.day-no-blocks:not(.is-today) { display: none; }

  /* Horizontal day header for card layout */
  .day-header {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4); text-align: left;
    border-bottom: 1px solid var(--border-2);
  }
  .day-header .day-name {
    font-size: .6875rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; flex-shrink: 0;
  }
  .day-header .day-num { font-size: 1.05rem; margin-top: 0; }
  .day-col.is-today .day-num {
    width: 30px; height: 30px; font-size: .875rem;
    box-shadow: 0 3px 10px rgba(94,79,209,.35);
  }

  /* Full date label visible only on mobile */
  .day-full-date {
    flex: 1; font-size: .75rem; color: var(--text-3); font-weight: 500;
  }

  /* Block list inside card */
  .day-blocks { padding: var(--sp-2) var(--sp-3) var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); }
  .study-block { padding: var(--sp-2) var(--sp-3); font-size: .875rem; }
  .day-empty { padding: var(--sp-2) var(--sp-3) var(--sp-3); text-align: left; }
}

@media (max-width: 400px) {
  /* Stat chips: tighten on very small phones */
  .stats-strip { gap: var(--sp-1); }
  .stat-chip { padding: var(--sp-2) var(--sp-1); }
  .stat-chip-value { font-size: 1.35rem; }
  .stat-chip-label { font-size: .5625rem; }
  /* Greetings */
  .dash-greeting-line2 { font-size: 1.5rem; }
}