:root {
  --paper: #fbf8f1;
  --paper-deep: #f3eee4;
  --paper-glass: rgba(255, 253, 248, 0.82);
  --ink: #123a5a;
  --ink-soft: #5e6b74;
  --ink-faint: #8d969b;
  --blue: #175b8f;
  --blue-deep: #0d446f;
  --blue-pale: #dfeaf0;
  --clay: #dd6a34;
  --clay-pale: #f7e6da;
  --green: #3f8b61;
  --line: rgba(28, 52, 68, 0.11);
  --shadow: 0 22px 60px rgba(78, 61, 39, 0.1), 0 2px 8px rgba(60, 51, 38, 0.04);
  --serif: "Newsreader", Georgia, serif;
  --sans: "DM Sans", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }
html { background: var(--paper-deep); }

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 14% 8%, rgba(255,255,255,.9), transparent 28%),
    linear-gradient(135deg, #f4eee3, #fbf8f2 55%, #f1e9de);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior-y: none;
}

button, input, textarea, select { font: inherit; }
button { color: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button { touch-action: manipulation; }

.shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr);
  padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  gap: 18px;
}

.sidebar {
  position: sticky;
  top: 18px;
  height: calc(100vh - 36px);
  padding: 30px 24px 22px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 26px;
  background: rgba(250, 247, 240, .72);
  backdrop-filter: blur(18px);
  box-shadow: 0 12px 44px rgba(63, 54, 40, .07);
  display: flex;
  flex-direction: column;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 8px 31px;
  font: 500 30px/1 var(--serif);
  letter-spacing: -.02em;
}

.brand-stone {
  width: 22px;
  height: 17px;
  border-radius: 50% 46% 48% 52%;
  background: var(--ink);
  position: relative;
  transform: rotate(-6deg);
}
.brand-stone::after {
  content: "";
  position: absolute;
  width: 13px;
  height: 9px;
  border-radius: 50%;
  left: 8px;
  top: -6px;
  background: #b7c9d2;
  transform: rotate(18deg);
}

.nav { display: grid; gap: 7px; }
.nav-button {
  width: 100%;
  border: 0;
  background: transparent;
  border-radius: 12px;
  padding: 12px 13px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  color: #66737b;
  cursor: pointer;
  transition: .18s ease;
}
.nav-button:hover { background: rgba(255,255,255,.6); color: var(--ink); }
.nav-button.active { background: rgba(255,255,255,.82); color: var(--blue-deep); box-shadow: 0 5px 18px rgba(44, 54, 58, .055); }
.nav-button .icon { width: 19px; height: 19px; }
.nav-button span:nth-child(2) { flex: 1; }
.nav-count { font-size: 11px; background: var(--clay-pale); color: var(--clay); padding: 3px 7px; border-radius: 20px; }

.sidebar-foot { margin-top: auto; }
.capture {
  border: 1px solid var(--line);
  border-radius: 15px;
  padding: 16px;
  background: rgba(255,255,255,.43);
  margin-bottom: 18px;
}
.capture-kicker { color: var(--clay); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }
.capture p { font-family: var(--serif); font-size: 17px; line-height: 1.25; margin: 8px 0 12px; }
.capture code { color: var(--ink-soft); font-size: 11px; }
.profile { display: flex; align-items: center; gap: 10px; padding: 0 4px; }
.avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--blue-pale); color: var(--blue-deep); font: 500 15px var(--serif); }
.profile-name { font-size: 13px; color: #344b5a; }
.profile-note { font-size: 10px; color: var(--ink-faint); margin-top: 2px; }

.main { min-width: 0; }
.topbar {
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px 0 24px;
}
.breadcrumb { color: var(--ink-faint); font-size: 12px; letter-spacing: .04em; }
.mobile-wordmark { display: none; }
.top-actions { display: flex; align-items: center; gap: 8px; }
.icon-button {
  width: 44px; height: 44px; border: 0; background: transparent; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; transition: .18s ease;
}
.icon-button:hover { background: rgba(255,255,255,.75); }
.icon-button .icon { width: 19px; height: 19px; }
.date-pill { font-size: 12px; color: var(--ink-soft); padding: 10px 14px; border: 1px solid var(--line); border-radius: 30px; background: rgba(255,255,255,.35); }

.content { max-width: 1280px; margin: 0 auto; padding: 14px 26px 48px; }
.page { animation: rise .4s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

.eyebrow { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); font-weight: 600; }
.hero-title { font: 400 clamp(40px, 5vw, 68px)/.98 var(--serif); letter-spacing: -.035em; margin: 15px 0 12px; max-width: 760px; }
.hero-title em { font-style: italic; color: var(--clay); }
.hero-copy { font: 400 18px/1.5 var(--serif); color: var(--ink-soft); margin: 0; max-width: 600px; }

.today-grid { display: grid; grid-template-columns: minmax(0, 1.38fr) minmax(280px, .62fr); gap: 18px; margin-top: 34px; }
.card {
  background: var(--paper-glass);
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 22px;
  box-shadow: var(--shadow);
}
.review-callout { min-height: 388px; padding: 36px 40px; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.landscape {
  position: absolute; inset: auto 0 0; height: 185px; opacity: .9; pointer-events: none;
  background:
    radial-gradient(circle at 79% 20%, #f2b77d 0 17px, transparent 18px),
    linear-gradient(150deg, transparent 0 44%, rgba(163,187,197,.45) 45% 54%, transparent 55%) 0 78px/55% 110px no-repeat,
    linear-gradient(25deg, transparent 0 43%, rgba(190,205,210,.5) 44% 56%, transparent 57%) 100% 69px/61% 120px no-repeat,
    linear-gradient(to bottom, transparent 58%, rgba(206,218,220,.72) 59%, rgba(238,237,226,.65));
}
.landscape::before, .landscape::after { content:""; position:absolute; border-radius:50%; filter: blur(1px); }
.landscape::before { width: 85%; height: 50px; left: 8%; bottom: 16px; border-top: 1px solid rgba(69,113,133,.18); background: rgba(255,255,255,.22); }
.landscape::after { width: 40%; height: 1px; right: 5%; bottom: 42px; background: rgba(44,91,116,.25); box-shadow: -190px 15px rgba(44,91,116,.13); }
.review-content { position: relative; z-index: 1; }
.due-row { display: flex; align-items: baseline; gap: 13px; margin-top: 23px; }
.due-number { font: 400 96px/.8 var(--serif); letter-spacing: -.05em; }
.due-label { font: 400 24px var(--serif); }
.estimate { color: var(--ink-soft); font-size: 13px; margin: 13px 0 25px; }
.primary-button {
  border: 0; border-radius: 12px; padding: 14px 21px; background: var(--blue-deep); color: #fff;
  cursor: pointer; font-weight: 500; box-shadow: 0 8px 20px rgba(13,68,111,.2); transition: .18s ease;
}
.primary-button:hover { transform: translateY(-1px); background: #0a3b62; }
.review-callout .primary-button { width: 210px; }

.side-stack { display: grid; gap: 18px; }
.quote-card { padding: 27px; min-height: 185px; display: flex; flex-direction: column; justify-content: space-between; background: var(--ink); color: #f9f2e7; }
.quote-mark { color: #cf8760; font: 44px/1 var(--serif); height: 27px; }
.quote-card blockquote { margin: 0; font: 400 22px/1.3 var(--serif); letter-spacing: -.01em; }
.quote-source { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: #aebdc6; }
.mini-card { padding: 24px 26px; }
.mini-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.mini-title { font: 500 20px var(--serif); }
.text-link { border: 0; background: none; color: var(--blue); font-size: 11px; cursor: pointer; padding: 0; }
.concept-row { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; margin-top: 14px; }
.concept-name { font-size: 12px; color: #385063; }
.progress { height: 3px; background: #e5e5df; border-radius: 3px; margin-top: 7px; overflow: hidden; }
.progress span { display:block; height:100%; background: var(--blue); border-radius:inherit; }
.concept-value { font: 18px var(--serif); }

.stats-strip { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 18px; }
.stat { padding: 25px 26px; border-right: 1px solid var(--line); }
.stat:last-child { border: 0; }
.stat-label { font-size: 10px; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-faint); }
.stat-value { font: 400 31px var(--serif); margin: 9px 0 4px; }
.stat-note { font-size: 10px; color: var(--ink-soft); }
.up { color: var(--green); }
.warn { color: var(--clay); }

/* Review */
.review-page { min-height: calc(100vh - 120px); display: flex; flex-direction: column; }
.review-shell { grid-template-columns:1fr; max-width:980px; margin:0 auto; }
.review-shell .sidebar, .review-shell .mobile-nav { display:none !important; }
.review-shell .main { width:100%; }
.review-shell .topbar { display:none; }
.review-shell .content { padding-top:max(10px,env(safe-area-inset-top)); padding-bottom:max(24px,env(safe-area-inset-bottom)); }
.review-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-bottom: 10px; }
.back-button { border: 0; background: none; display: flex; align-items:center; gap:8px; color: var(--ink-soft); cursor:pointer; padding: 8px 0; width: fit-content; }
.review-count { font: 17px var(--serif); }
.review-tools { justify-self: end; display: flex; gap: 5px; position: relative; }
.back-button .icon { width:17px; height:17px; flex:none; }
.home-back-button {
  width:40px;
  height:40px;
  padding:0;
  justify-content:center;
  border:1px solid var(--line);
  border-radius:50%;
  color:var(--blue);
}
.home-back-button:hover { background:var(--blue-pale); }
.home-back-button .icon { width:20px; height:20px; }
.undo-button { min-height:34px; padding:7px 10px; border:1px solid var(--line); border-radius:999px; display:flex; align-items:center; gap:5px; background:rgba(255,255,255,.58); color:var(--ink-soft); cursor:pointer; font-size:11px; }
.undo-button:hover { background:#fff; color:var(--ink); }
.undo-button .icon { width:15px; height:15px; }
.review-stage { flex: 1; display:flex; flex-direction:column; justify-content:flex-start; max-width: 820px; width:100%; margin: 6px auto 0; }
.study-card { min-height: 390px; padding: 34px 44px; display:flex; flex-direction:column; justify-content:center; position:relative; }
.study-card[role="button"] { cursor:pointer; }
.study-card[role="button"]:focus-visible { outline:3px solid rgba(23,91,143,.3); outline-offset:3px; }
.card-face-back { width:100%; max-width:650px; margin:0; animation:rise .22s ease both; }
.back-answer { color:#3f5361; font:400 clamp(24px,3.4vw,37px)/1.42 var(--serif); letter-spacing:-.015em; }
.flip-button { position:absolute; right:18px; bottom:15px; width:34px; height:34px; border:1px solid rgba(23,91,143,.2); border-radius:50%; display:grid; place-items:center; color:var(--blue); background:rgba(255,255,255,.58); cursor:pointer; transition:.16s ease; }
.flip-button:hover, .flip-button:focus-visible { background:var(--blue-pale); border-color:rgba(23,91,143,.4); }
.flip-button .icon { width:18px; height:18px; }
.showing-back { background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(247,250,251,.98)); }
.card-topic { position:absolute; top:31px; left:38px; font-size:10px; letter-spacing:.11em; text-transform:uppercase; color:var(--blue); background:var(--blue-pale); border-radius:20px; padding:7px 10px; }
.star-button { position:absolute; right:34px; top:27px; }
.star-button.starred svg { fill:#db8b50; color:#db8b50; }
.question { font: 400 clamp(32px,4.2vw,52px)/1.12 var(--serif); letter-spacing:-.025em; max-width:650px; margin:0; }
.answer { max-width:650px; padding-top:24px; border-top:1px solid var(--line); animation:rise .28s ease both; }
.answer-label { font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--clay); margin-bottom:12px; }
.answer p { margin:0; color:#3f5361; font: 400 21px/1.55 var(--serif); }
.answer code { font: 500 13px/1.6 ui-monospace, SFMono-Regular, monospace; background:#edf1f0; color:#31526a; padding:2px 6px; border-radius:5px; }
.study-actions { margin-top:18px; }
.practice-navigation { display:grid; grid-template-columns:1fr 1.4fr; gap:10px; }
.practice-navigation button { min-height:56px; display:flex; align-items:center; justify-content:center; gap:8px; }
.practice-navigation .icon { width:17px; height:17px; }
.session-adjust { display:block; margin:-10px 0 18px; }
.learning-wait { text-align:center; }
.learning-wait .eyebrow, .learning-wait .question, .learning-wait .answer { margin-left:auto; margin-right:auto; }
.rating-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.rating-button { border:1px solid var(--line); border-radius:13px; padding:14px 8px 12px; cursor:pointer; transition:.16s ease; }
.rating-button:hover { transform:translateY(-2px); filter:saturate(1.08) brightness(1.02); }
.rating-name { font:500 16px var(--serif); display:block; }
.rating-time { font-size:10px; color:var(--ink-faint); margin-top:4px; display:block; }
.rating-button.again { background:#f8e5dc; border-color:#e7b9a5; }
.rating-button.again .rating-name { color:#a94f2b; }
.rating-button.hard { background:#f5edd8; border-color:#dfc98d; }
.rating-button.hard .rating-name { color:#886a22; }
.rating-button.good { background:#e4f0e8; border-color:#b6d2bf; }
.rating-button.good .rating-name { color:#34754f; }
.rating-button.easy { background:#e2edf4; border-color:#b4cddd; }
.rating-button.easy .rating-name { color:#25618a; }
.keyboard-hint { text-align:center; margin-top:13px; font-size:10px; color:var(--ink-faint); }
.menu { position:absolute; right:0; top:40px; width:190px; padding:4px; background:#fffdf8; border:1px solid var(--line); border-radius:11px; box-shadow:var(--shadow); z-index:20; animation:rise .15s ease; }
.menu button { border:0; background:none; width:100%; padding:8px 9px; text-align:left; border-radius:7px; color:#485e6d; font-size:12px; cursor:pointer; display:flex; gap:8px; align-items:center; }
.menu button .icon { width:16px; height:16px; flex:0 0 16px; }
.menu button:hover { background:var(--paper-deep); }
.menu button.danger { color:var(--clay); }
.toast { position:fixed; left:50%; bottom:28px; transform:translateX(-50%); background:var(--ink); color:white; padding:11px 15px; border-radius:10px; font-size:12px; box-shadow:var(--shadow); z-index:50; animation:toast-in .25s ease; }
@keyframes toast-in { from { opacity:0; transform:translate(-50%,8px); } }

/* Library */
.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:28px; }
.page-title { font:400 48px/1 var(--serif); letter-spacing:-.03em; margin:10px 0 0; }
.search { position:relative; width:min(340px,100%); }
.search input { width:100%; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.58); padding:13px 16px 13px 42px; outline:none; color:var(--ink); }
.search input:focus { border-color:rgba(23,91,143,.35); background:white; }
.search .icon { position:absolute; left:14px; top:13px; width:17px; height:17px; color:var(--ink-faint); }
.library-layout { display:grid; grid-template-columns:1fr 320px; gap:18px; }
.concept-table { overflow:hidden; }
.table-head, .table-row { display:grid; grid-template-columns:minmax(170px,1.4fr) 1fr 110px 80px; align-items:center; gap:18px; padding:15px 22px; }
.table-head { color:var(--ink-faint); font-size:9px; text-transform:uppercase; letter-spacing:.1em; border-bottom:1px solid var(--line); }
.table-row { border-bottom:1px solid var(--line); cursor:pointer; transition:.15s ease; }
.table-row:last-child { border:0; }
.table-row:hover { background:rgba(255,255,255,.55); }
.concept-cell strong { display:block; font:500 17px var(--serif); }
.concept-cell small { color:var(--ink-faint); font-size:10px; }
.topic-chip { width:fit-content; border-radius:20px; background:var(--blue-pale); color:var(--blue); padding:5px 8px; font-size:9px; text-transform:uppercase; letter-spacing:.08em; }
.deck-intro { color:var(--ink-soft); font:16px/1.45 var(--serif); margin:11px 0 0; max-width:520px; }
.deck-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.deck-card { border:1px solid rgba(255,255,255,.78); padding:25px 26px 21px; text-align:left; cursor:pointer; color:inherit; transition:.18s ease; }
.deck-card:hover { transform:translateY(-3px); box-shadow:0 26px 62px rgba(78,61,39,.14),0 2px 8px rgba(60,51,38,.05); }
.deck-card-top, .deck-card-foot { display:flex; align-items:center; justify-content:space-between; gap:15px; }
.deck-mark { display:grid; place-items:center; width:38px; height:38px; border-radius:12px; background:var(--blue-pale); color:var(--blue); }
.deck-mark .icon { width:20px; height:20px; }
.deck-due { color:var(--clay); font-size:10px; letter-spacing:.08em; text-transform:uppercase; }
.deck-card-body { min-height:125px; padding-top:23px; }
.deck-card-body h2 { font:500 27px/1.08 var(--serif); letter-spacing:-.02em; margin:0 0 10px; }
.deck-card-body p { color:var(--ink-soft); font:16px/1.42 var(--serif); margin:0; max-width:390px; }
.deck-card-foot { border-top:1px solid var(--line); padding-top:15px; color:var(--ink-faint); font-size:11px; }
.deck-open { color:var(--blue); }
.page-head-actions { display:flex; align-items:center; gap:10px; }
.deck-toolbar { display:flex; align-items:center; gap:14px; margin:26px 0 20px; flex-wrap:wrap; }
.deck-filters { display:flex; gap:6px; padding:4px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.48); }
.filter-button { border:0; border-radius:8px; padding:8px 12px; color:var(--ink-soft); background:transparent; cursor:pointer; font-size:12px; }
.filter-button:hover, .filter-button.active { color:var(--blue-deep); background:#fff; box-shadow:0 2px 8px rgba(44,54,58,.06); }
.filter-button span { color:var(--clay); font-size:10px; }
.sort-control { display:flex; align-items:center; gap:7px; color:var(--ink-faint); font-size:11px; }
.sort-control select { border:1px solid var(--line); border-radius:9px; padding:8px 10px; background:#fff; color:var(--ink); }
.deck-toolbar .search { margin-left:auto; }
.card-tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
.card-tag, .person-tag { display:inline-flex; align-items:center; gap:3px; border-radius:999px; padding:4px 7px; background:var(--blue-pale); color:var(--blue-deep); font:10px/1 var(--sans); }
.card-tag.person-tag, .person-tag { background:var(--clay-pale); color:#99502c; }
.card-tag.starred-tag { background:#f8efd8; color:#856821; }
.card-tag .icon, .person-tag .icon { width:11px; height:11px; }
.untagged { color:var(--ink-faint); }
.empty-state { padding:42px; text-align:center; color:var(--ink-faint); grid-column:1/-1; }
.deck-detail-page > .deck-back { margin-bottom:24px; }
.deck-detail-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:28px; }
.deck-detail-actions { display:flex; align-items:flex-end; gap:24px; }
.deck-action-buttons { display:flex; gap:10px; }
.deck-study-button { white-space:nowrap; min-height:46px; }
.deck-detail-stats { display:flex; gap:22px; padding-bottom:6px; color:var(--ink-soft); font-size:11px; white-space:nowrap; }
.deck-detail-stats strong { color:var(--ink); font:24px var(--serif); margin-right:4px; }
.deck-card-list { overflow:hidden; }
.deck-list-head, .deck-list-row summary { display:grid; grid-template-columns:minmax(0,1fr) 190px; gap:25px; align-items:center; padding:16px 24px; }
.deck-list-head { color:var(--ink-faint); font-size:9px; text-transform:uppercase; letter-spacing:.1em; border-bottom:1px solid var(--line); }
.deck-list-row { border-bottom:1px solid var(--line); }
.deck-list-row:last-child { border-bottom:0; }
.deck-list-row summary { cursor:pointer; list-style:none; }
.deck-list-row summary::-webkit-details-marker { display:none; }
.deck-list-row[open] summary { background:rgba(255,255,255,.42); }
.deck-list-prompt strong { display:block; font:500 17px/1.25 var(--serif); }
.deck-list-prompt small { display:block; color:var(--ink-faint); font-size:10px; margin-top:6px; }
.deck-source { color:var(--ink-soft); font-size:11px; }
.deck-list-answer { padding:0 24px 21px; max-width:780px; }
.deck-list-answer > span { color:var(--blue); font-size:9px; text-transform:uppercase; letter-spacing:.1em; }
.deck-list-answer p { margin:8px 0 0; color:var(--ink-soft); font:17px/1.5 var(--serif); }
.study-modal-backdrop { position:fixed; inset:0; z-index:40; display:flex; align-items:flex-end; justify-content:center; padding:24px; background:rgba(42,35,26,.25); backdrop-filter:blur(5px); }
.study-modal { width:min(480px,100%); padding:28px; border:1px solid rgba(255,255,255,.8); border-radius:22px 22px 16px 16px; background:var(--paper); box-shadow:0 24px 80px rgba(55,43,28,.24); }
.study-modal-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.study-modal-head h2 { margin:9px 0 6px; font:500 28px/1.1 var(--serif); }
.study-modal-head p { margin:0; color:var(--ink-soft); font:15px var(--serif); }
.study-options { display:grid; gap:10px; margin:26px 0 14px; padding:0; border:0; }
.study-option { display:flex; align-items:center; gap:13px; min-height:64px; padding:13px 15px; border:1px solid var(--line); border-radius:13px; cursor:pointer; }
.study-option:has(input:checked) { border-color:rgba(23,91,143,.5); background:var(--blue-pale); }
.study-option input { width:19px; height:19px; accent-color:var(--blue); flex:none; }
.study-option strong, .study-option small { display:block; }
.study-option strong { font:500 17px var(--serif); }
.study-option small { margin-top:4px; color:var(--ink-soft); font-size:11px; }
.study-modal-note { min-height:18px; margin:0 0 22px; color:var(--ink-faint); font-size:11px; }
.custom-source-options { display:flex; gap:8px; margin:24px 0 16px; padding:0; border:0; }
.custom-source-options legend { width:100%; margin-bottom:9px; color:var(--ink-soft); font-size:11px; }
.custom-source-options label { display:flex; align-items:center; gap:7px; padding:9px 13px; border:1px solid var(--line); border-radius:999px; color:var(--ink-soft); cursor:pointer; font-size:12px; }
.custom-source-options label:has(input:checked) { color:var(--blue-deep); border-color:rgba(23,91,143,.42); background:var(--blue-pale); }
.custom-source-options input { accent-color:var(--blue); }
.custom-study-fields { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(120px,.7fr); gap:12px; margin-bottom:13px; }
.custom-study-fields label { display:grid; gap:8px; color:var(--ink-soft); font-size:11px; }
.custom-study-fields select, .custom-study-fields input { width:100%; min-height:50px; padding:10px 13px; border:1px solid var(--line); border-radius:12px; background:#fff; color:var(--ink); outline:none; }
.custom-study-fields input { font:500 20px var(--serif); }
.custom-study-fields select:focus, .custom-study-fields input:focus { border-color:rgba(23,91,143,.55); box-shadow:0 0 0 3px rgba(23,91,143,.1); }
.session-limit-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:26px 0 13px; }
.session-limit-grid label { display:grid; gap:8px; color:var(--ink-soft); font-size:11px; }
.session-limit-grid input { width:100%; min-height:50px; padding:10px 13px; border:1px solid var(--line); border-radius:12px; background:#fff; color:var(--ink); font:500 20px var(--serif); outline:none; }
.session-limit-grid input:focus { border-color:rgba(23,91,143,.55); box-shadow:0 0 0 3px rgba(23,91,143,.1); }
.feedback-modal { width:min(520px,100%); }
.feedback-options { display:grid; gap:9px; margin:25px 0 22px; padding:0; border:0; }
.feedback-option { display:flex; align-items:flex-start; gap:13px; padding:14px; border:1px solid var(--line); border-radius:13px; cursor:pointer; }
.feedback-option:has(input:checked) { border-color:rgba(23,91,143,.5); background:var(--blue-pale); }
.feedback-option input { width:20px; height:20px; margin:1px 0 0; accent-color:var(--blue); flex:none; }
.feedback-option strong, .feedback-option small { display:block; }
.feedback-option strong { font:500 16px var(--serif); }
.feedback-option small { margin-top:4px; color:var(--ink-soft); font-size:11px; line-height:1.35; }
.deck-list-row.is-inactive { background:rgba(242,245,246,.65); }
.deck-list-row.is-inactive .deck-list-prompt strong { color:var(--ink-soft); }
.card-status-button { margin-top:14px; }
.card-editor-fields { display:grid; gap:16px; margin:25px 0 22px; }
.card-editor-fields label { display:grid; gap:7px; color:var(--ink-soft); font-size:11px; }
.card-editor-fields textarea, .card-editor-fields input, .card-editor-fields select { width:100%; padding:12px 13px; border:1px solid var(--line); border-radius:12px; background:#fff; color:var(--ink); outline:none; resize:vertical; }
.card-editor-fields textarea:focus, .card-editor-fields input:focus, .card-editor-fields select:focus { border-color:rgba(23,91,143,.55); box-shadow:0 0 0 3px rgba(23,91,143,.1); }
.study-modal-actions { display:flex; justify-content:flex-end; gap:10px; }
.study-modal-actions button { min-height:44px; }
.secondary-button { border:1px solid var(--line); border-radius:11px; padding:11px 17px; background:transparent; color:var(--ink-soft); cursor:pointer; font-weight:600; }
.secondary-button:hover { background:rgba(255,255,255,.55); color:var(--ink); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.mastery-cell { display:flex; align-items:center; gap:8px; font-size:11px; }
.mastery-cell .progress { flex:1; min-width:45px; margin:0; }
.due-cell { text-align:right; font:17px var(--serif); }
.insight-card { padding:26px; }
.insight-card + .insight-card { margin-top:18px; }
.insight-title { font:500 21px var(--serif); margin:0 0 8px; }
.insight-copy { margin:0; color:var(--ink-soft); font:15px/1.45 var(--serif); }
.fragile-list { margin-top:20px; display:grid; gap:16px; }
.fragile-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.fragile-name { font-size:12px; }
.fragile-state { font-size:9px; text-transform:uppercase; letter-spacing:.08em; color:var(--clay); }

/* Analytics */
.metric-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:28px 0 18px; }
.metric { padding:25px; }
.metric-value { font:400 42px/1 var(--serif); margin:13px 0 7px; }
.chart-card { padding:28px; }
.chart-head { display:flex; justify-content:space-between; align-items:center; }
.chart-title { font:500 22px var(--serif); }
.select-pill { border:1px solid var(--line); background:transparent; padding:8px 11px; border-radius:20px; font-size:10px; color:var(--ink-soft); }
.chart-wrap { height:260px; margin-top:25px; position:relative; }
.chart-grid { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; }
.chart-line { border-top:1px solid var(--line); position:relative; }
.chart-line span { position:absolute; right:calc(100% + 9px); top:-7px; font-size:8px; color:var(--ink-faint); }
.chart-svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.chart-labels { display:flex; justify-content:space-between; color:var(--ink-faint); font-size:9px; margin-top:10px; }
.analytics-bottom { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:18px; }
.distribution { display:flex; align-items:flex-end; height:130px; gap:13px; padding-top:20px; }
.bar-wrap { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:7px; }
.bar-wrap strong { color:var(--ink-soft); font:500 11px var(--sans); }
.bar { width:100%; max-width:45px; border-radius:6px 6px 2px 2px; background:var(--blue-pale); position:relative; }
.bar.good { background:var(--blue); }
.bar.again { background:#e4a27f; }
.bar-label { font-size:9px; color:var(--ink-faint); }
.mastery-list { display:grid; gap:17px; margin-top:23px; }
.mastery-row { display:grid; grid-template-columns:120px 1fr 40px; gap:12px; align-items:center; font-size:11px; }
.mastery-row .progress { margin:0; }
.activity-chart { height:210px; margin-top:28px; display:flex; align-items:flex-end; gap:clamp(3px, .65vw, 9px); border-bottom:1px solid var(--line); }
.activity-bar { flex:1; min-height:2px; max-height:100%; border-radius:4px 4px 0 0; background:var(--blue); opacity:.78; }
.activity-axis { display:flex; justify-content:space-between; margin-top:10px; color:var(--ink-faint); font-size:9px; }
.analytics-empty { min-height:210px; display:grid; place-content:center; justify-items:center; gap:8px; text-align:center; color:var(--ink-faint); }
.analytics-empty strong { color:var(--ink-soft); font:500 18px var(--serif); }
.analytics-empty.compact { min-height:150px; }

.mobile-nav { display:none; }

.pwa-update {
  position: fixed;
  z-index: 60;
  left: max(16px, env(safe-area-inset-left));
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  max-width: 460px;
  margin: 0 auto;
  padding: 12px 14px 12px 16px;
  border: 1px solid rgba(255,255,255,.86);
  border-radius: 14px;
  background: rgba(18,58,90,.96);
  color: #fffaf0;
  box-shadow: var(--shadow);
  font-size: 12px;
  animation: toast-in .25s ease;
}
.pwa-update button {
  flex: none;
  border: 0;
  border-radius: 9px;
  padding: 8px 11px;
  background: #f4eee3;
  color: var(--ink);
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
}

@media (max-width: 950px) {
  .shell { grid-template-columns: 84px minmax(0,1fr); }
  .sidebar { padding:27px 15px; }
  .brand { padding:0 14px 31px; font-size:0; }
  .brand-stone { flex:none; }
  .nav-button { justify-content:center; padding:13px; }
  .nav-button span:not(.icon), .nav-count, .capture, .profile > div:not(.avatar) { display:none; }
  .profile { justify-content:center; }
  .today-grid, .library-layout { grid-template-columns:1fr; }
  .deck-grid { grid-template-columns:1fr; }
  .page-head-actions { width:100%; }
  .page-head-actions button { flex:1; }
  .deck-toolbar .search { width:100%; margin-left:0; }
  .side-stack { grid-template-columns:1fr 1fr; }
  .library-side { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  .insight-card + .insight-card { margin:0; }
}

@media (max-width: 680px) {
  .shell { display:block; padding:0; }
  .sidebar { display:none; }
  .topbar { height:calc(58px + env(safe-area-inset-top)); padding:env(safe-area-inset-top) 18px 0; }
  .icon-button { width:44px; height:44px; }
  .back-button { min-height:44px; padding:10px 8px 10px 0; }
  .content { padding:16px max(16px, env(safe-area-inset-right)) calc(100px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  .breadcrumb { font:500 23px var(--serif); color:var(--ink); }
  .topbar:not(.today-topbar) .breadcrumb { display:none; }
  .topbar:not(.today-topbar) .mobile-wordmark { display:block; font:500 29px/1 var(--serif); letter-spacing:-.035em; color:var(--ink); }
  .date-pill { display:none; }
  .hero-title { font-size:44px; }
  .hero-copy { font-size:16px; }
  .today-grid { margin-top:25px; }
  .review-callout { min-height:380px; padding:28px 25px; }
  .due-number { font-size:78px; }
  .side-stack, .library-side, .analytics-bottom { grid-template-columns:1fr; }
  .stats-strip { grid-template-columns:1fr 1fr; }
  .stat:nth-child(2) { border-right:0; }
  .stat:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .study-card { min-height:360px; padding:28px 25px; }
  .card-topic { left:24px; }
  .star-button { right:20px; }
  .rating-grid { grid-template-columns:1fr 1fr; }
  .keyboard-hint { display:none; }
  .review-header { grid-template-columns:1fr auto; }
  .review-count { display:none; }
  .page-head { align-items:stretch; flex-direction:column; }
  .page-title { font-size:42px; }
  .deck-detail-head { align-items:flex-start; flex-direction:column; gap:17px; }
  .deck-detail-actions { align-items:flex-start; flex-direction:column; gap:15px; width:100%; }
  .deck-action-buttons { width:100%; display:grid; grid-template-columns:1fr 1.4fr; }
  .deck-study-button { width:100%; }
  .deck-detail-stats { padding:0; }
  .deck-card { padding:22px 20px 19px; }
  .deck-card-body { min-height:112px; }
  .deck-card-body h2 { font-size:25px; }
  .deck-list-head { display:none; }
  .deck-list-row summary { grid-template-columns:1fr; gap:9px; padding:18px 19px; }
  .deck-source { font-size:10px; }
  .deck-list-answer { padding:0 19px 19px; }
  .search { width:100%; }
  .study-modal-backdrop { padding:12px; }
  .study-modal { max-height:calc(100vh - 24px); overflow:auto; padding:23px 20px calc(20px + env(safe-area-inset-bottom)); border-radius:20px; }
  .study-modal-actions { display:grid; grid-template-columns:1fr 1fr; }
  .study-modal-actions button { width:100%; }
  .table-head { display:none; }
  .table-row { grid-template-columns:1fr auto; gap:10px; padding:17px 19px; }
  .table-row .topic-chip { display:none; }
  .mastery-cell { grid-column:1; }
  .due-cell { grid-column:2; grid-row:1 / span 2; }
  .metric-grid { grid-template-columns:1fr 1fr; }
  .metric:last-child { grid-column:1/-1; }
  .chart-card { padding:22px 20px; }
  .mastery-row { grid-template-columns:100px 1fr 32px; }
  .mobile-nav {
    position:fixed; z-index:30; display:grid; grid-template-columns:repeat(3,1fr); left:max(12px, env(safe-area-inset-left)); right:max(12px, env(safe-area-inset-right)); bottom:max(12px, env(safe-area-inset-bottom));
    background:rgba(250,248,242,.92); border:1px solid rgba(255,255,255,.85); backdrop-filter:blur(18px); border-radius:17px; box-shadow:var(--shadow); padding:6px;
  }
  .mobile-nav button { border:0; background:none; min-height:44px; padding:8px; border-radius:11px; color:var(--ink-faint); display:grid; justify-items:center; gap:3px; font-size:9px; }
  .mobile-nav button.active { color:var(--blue); background:white; }
  .mobile-nav .icon { width:18px; height:18px; }
}

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

/* Today / home: a quieter, phone-like canvas inspired by the Pebble mockup. */
.today-shell {
  grid-template-columns: 1fr;
  width: min(100%, 720px);
  margin: 0 auto;
  background: #fff;
  padding-left: max(18px, env(safe-area-inset-left));
  padding-right: max(18px, env(safe-area-inset-right));
}
.today-shell .sidebar { display:none; }
.today-shell .main { width:100%; max-width:620px; margin:0 auto; }
.today-shell .topbar { height:76px; padding:0 4px; }
.today-wordmark { font:500 29px/1 var(--serif); letter-spacing:-.035em; color:var(--ink); }
.profile-button { width:40px; height:40px; display:grid; place-items:center; border:1px solid rgba(18,58,90,.55); border-radius:50%; color:#68737a; background:rgba(255,255,255,.3); cursor:pointer; }
.profile-button .icon { width:21px; height:21px; }
.today-shell .content { max-width:none; padding:17px 4px 112px; }
.today-page {
  animation:rise .4s ease both;
  position: relative;
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
}
.today-intro { padding:4px 18px 0; }
.today-intro .eyebrow { color:var(--ink-soft); letter-spacing:.13em; }
.today-title { margin:17px 0 7px; font:400 clamp(35px, 6vw, 50px)/1.02 var(--serif); letter-spacing:-.04em; }
.today-subtitle { margin:0; color:var(--ink-soft); font:400 18px/1.4 var(--serif); }
.today-scene {
  height:128px;
  margin:22px 0 0;
  position:relative;
  overflow:hidden;
  background:linear-gradient(to bottom, #fff 0%, #fff 70%, #fbfdfe 100%);
}
.today-sun {
  position:absolute;
  width:22px;
  height:22px;
  right:15%;
  top:19px;
  border-radius:50%;
  background:#e8a06f;
  opacity:.78;
  box-shadow:0 0 0 8px rgba(232,160,111,.08), 0 0 26px rgba(232,160,111,.14);
}
.today-horizon {
  position:absolute;
  left:0;
  right:0;
  bottom:20px;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(23,91,143,.22) 22%, rgba(23,91,143,.1) 64%, transparent);
}
.today-horizon::before,
.today-horizon::after {
  content:"";
  position:absolute;
  bottom:0;
  height:26px;
  width:38%;
  border-top:1px solid rgba(23,91,143,.13);
  opacity:.72;
}
.today-horizon::before { left:10%; transform:skewX(-28deg); }
.today-horizon::after { right:8%; transform:skewX(28deg); }
.today-review-card { position:relative; z-index:1; margin:0 18px; min-height:231px; padding:24px 22px 21px; text-align:center; border-radius:18px; background:#fff; border-color:rgba(18,58,90,.1); box-shadow:0 14px 32px rgba(18,58,90,.06); }
.today-review-card .eyebrow { color:var(--blue); }
.today-due-number { margin:17px 0 4px; font:400 clamp(72px, 13vw, 92px)/.78 var(--serif); letter-spacing:-.06em; }
.today-due-label { font:400 21px/1.25 var(--serif); }
.today-review-card .primary-button { width:min(306px,100%); margin-top:17px; min-height:52px; font-size:16px; }
.today-stats { grid-template-columns:repeat(3,1fr); margin:14px 18px 0; border-radius:16px; overflow:hidden; box-shadow:0 10px 30px rgba(78,61,39,.06); }
.today-stats .stat { min-width:0; padding:17px 13px 16px; text-align:left; border-right:1px solid var(--line); }
.today-stats .stat:last-child { border-right:0; }
.today-stats .stat-icon { width:24px; height:24px; margin-bottom:13px; color:var(--blue); }
.today-stats .stat-icon .icon { width:22px; height:22px; }
.today-stats .stat-icon.alert { color:var(--clay); }
.today-stats .stat-label { font-size:9px; line-height:1.25; min-height:23px; letter-spacing:.03em; text-transform:none; color:#465a67; }
.today-stats .stat-value { font-size:27px; margin:5px 0 3px; }
.today-stats .stat-note { white-space:nowrap; font-size:9px; }
.today-shell .mobile-nav { position:fixed; z-index:30; display:grid; grid-template-columns:repeat(3,1fr); left:50%; right:auto; bottom:max(12px, env(safe-area-inset-bottom)); width:min(520px, calc(100% - 36px)); transform:translateX(-50%); background:rgba(250,248,242,.93); border:1px solid rgba(255,255,255,.85); backdrop-filter:blur(18px); border-radius:17px; box-shadow:var(--shadow); padding:6px; }
.today-shell .mobile-nav .nav-button { border:0; background:none; min-height:44px; padding:8px; border-radius:11px; color:var(--ink-faint); display:grid; justify-items:center; gap:3px; font-size:9px; text-align:center; }
.today-shell .mobile-nav .nav-button.active { color:var(--blue); background:#fff; }
.today-shell .mobile-nav .nav-button .icon { width:18px; height:18px; }
.today-shell .mobile-nav .nav-button span:nth-child(2) { flex:none; }

@media (max-width:680px) {
  .today-shell { padding:0; }
  .today-page { border-radius:0; }
  /* Keep the Today screen comfortably within an iPhone viewport. The
     desktop proportions are intentionally spacious, but the phone layout
     should reveal the nav without making the primary card feel oversized. */
  .today-shell .topbar { height:calc(58px + env(safe-area-inset-top)); padding:env(safe-area-inset-top) 16px 0; }
  .today-shell .content { padding:12px max(0px, env(safe-area-inset-right)) calc(94px + env(safe-area-inset-bottom)) max(0px, env(safe-area-inset-left)); }
  .today-intro { padding-left:16px; padding-right:16px; }
  .today-title { margin-top:13px; margin-bottom:5px; font-size:35px; }
  .today-subtitle { font-size:15px; line-height:1.35; }
  .today-scene { height:86px; margin-top:15px; border-radius:0; }
  .today-sun { width:18px; height:18px; top:13px; right:16%; }
  .today-horizon { bottom:15px; }
  .today-horizon::before, .today-horizon::after { height:18px; }
  .today-review-card { margin-left:16px; margin-right:16px; min-height:194px; padding:18px 16px 17px; }
  .today-due-number { margin-top:12px; font-size:64px; }
  .today-due-label { font-size:18px; }
  .today-review-card .primary-button { width:min(286px,100%); margin-top:13px; min-height:46px; padding:11px 16px; font-size:15px; }
  .today-stats { margin-left:16px; margin-right:16px; margin-top:11px; }
  .today-stats .stat { padding:13px 9px 12px; }
  .today-stats .stat-icon { width:20px; height:20px; margin-bottom:9px; }
  .today-stats .stat-icon .icon { width:19px; height:19px; }
  .today-stats .stat-label { font-size:8px; min-height:21px; }
  .today-stats .stat-value { font-size:24px; margin-top:4px; }
  .today-stats .stat-note { font-size:8px; }
  .today-shell .mobile-nav { bottom:max(9px, env(safe-area-inset-bottom)); width:min(500px, calc(100% - 28px)); padding:5px; }
  .today-shell .mobile-nav .nav-button { min-height:40px; padding:6px; font-size:8px; }
  .today-shell .mobile-nav .nav-button .icon { width:17px; height:17px; }
}

@media (max-width:380px) {
  .today-title { font-size:33px; }
  .today-scene { height:78px; }
  .today-review-card { min-height:188px; }
  .today-due-number { font-size:60px; }
  .today-due-label { font-size:17px; }
  .today-stats .stat { padding-left:7px; padding-right:7px; }
  .today-stats .stat-label, .today-stats .stat-note { font-size:7.5px; }
}

/* Today v2: an intentionally quiet, editorial home surface. It keeps the
   review action close at hand without turning the due count into a poster. */
.today-shell {
  width: min(100%, 760px);
  background: #fff;
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
}
.today-shell .main { max-width: 680px; }
.today-shell .topbar { height: 84px; padding: 0 2px; }
.today-wordmark { font-size: 31px; font-weight: 500; }
.profile-button { width: 42px; height: 42px; border-color: rgba(18,58,90,.42); background:#fff; }
.profile-button .icon { width: 20px; height: 20px; }
.today-shell .content { padding: 28px 0 118px; }
.today-page { background:#fff; border-radius:0; overflow:visible; }
.today-intro { padding: 0 4px; }
.today-intro-meta { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.today-intro .eyebrow { color:var(--ink-soft); font-size:10px; letter-spacing:.14em; }
.today-status { display:flex; align-items:center; gap:7px; color:var(--ink-faint); font-size:10px; letter-spacing:.04em; }
.status-dot { width:6px; height:6px; border-radius:50%; background:#83a796; box-shadow:0 0 0 4px rgba(131,167,150,.12); }
.today-title { margin: 26px 0 11px; max-width: 620px; font:400 clamp(42px, 7vw, 66px)/.98 var(--serif); letter-spacing:-.045em; color:var(--ink); }
.today-title-break { display:block; }
.today-subtitle { margin:0; color:var(--ink-soft); font:400 18px/1.4 var(--serif); }
.today-review-card { margin: 46px 0 0; min-height:0; padding: 27px 29px 25px; border-radius:20px; background:#fff; border:1px solid rgba(18,58,90,.14); box-shadow:0 16px 44px rgba(18,58,90,.07); }
.review-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; text-align:left; }
.today-review-card .eyebrow { color:var(--blue); }
.review-card-title { margin-top:12px; color:var(--ink); font:400 28px/1.1 var(--serif); letter-spacing:-.025em; }
.review-card-title strong { font-weight:400; font-size:39px; letter-spacing:-.04em; }
.review-card-arrow { display:grid; place-items:center; width:32px; height:32px; border:1px solid rgba(23,91,143,.18); border-radius:50%; color:var(--blue); font-size:18px; }
.review-card-rule { height:1px; background:var(--line); margin:23px 0 17px; }
.review-card-details { display:flex; gap:38px; margin-bottom:24px; }
.review-card-details div { display:grid; gap:5px; }
.review-card-details span { color:var(--ink-faint); font-size:10px; letter-spacing:.04em; }
.review-card-details strong { color:#3d5360; font:500 14px var(--sans); }
.today-review-card .primary-button { display:flex; align-items:center; justify-content:center; gap:12px; width:100%; min-height:50px; margin:0; border-radius:11px; font-size:14px; letter-spacing:.01em; }
.today-review-actions { display:grid; grid-template-columns:1.25fr 1fr; gap:10px; margin-top:22px; }
.today-review-actions > .secondary-button:only-child { grid-column:1 / -1; }
.today-review-card .secondary-button { min-height:50px; }
.today-review-card .custom-study-button {
  border-color:rgba(23,91,143,.35);
  background:var(--blue-pale);
  color:var(--blue-deep);
}
.today-review-card .custom-study-button:hover { background:#d5e6ef; }
.today-review-card.is-caught-up { padding-bottom:27px; }
.today-review-card .primary-button span { font-size:18px; line-height:1; transition:transform .18s ease; }
.today-review-card .primary-button:hover span { transform:translateX(3px); }
.today-section { margin-top:37px; }
.today-section-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 4px 13px; }
.today-section-heading > span { color:var(--ink-faint); font-size:10px; }
.today-stats { grid-template-columns:repeat(3,1fr); margin:0; border:1px solid rgba(18,58,90,.12); border-radius:17px; overflow:hidden; background:#fff; box-shadow:0 8px 24px rgba(18,58,90,.035); }
.today-stats .stat { min-width:0; display:flex; align-items:flex-start; gap:13px; padding:20px 17px 18px; border-right:1px solid var(--line); }
.today-stats .stat:last-child { border-right:0; }
.today-stats .stat-icon { flex:none; width:21px; height:21px; margin:0; color:var(--blue); }
.today-stats .stat-icon .icon { width:20px; height:20px; }
.today-stats .stat-icon.alert { color:var(--clay); }
.today-stats .stat-label { min-height:0; margin-top:1px; font-size:9px; line-height:1.3; letter-spacing:.02em; text-transform:none; color:#53636d; white-space:nowrap; }
.today-stats .stat-value { margin:7px 0 3px; font-size:28px; line-height:1; }
.today-stats .study-time-stat .stat-value { font:500 17px/1.25 var(--serif); white-space:nowrap; }
.today-stats .stat-note { font-size:9px; white-space:nowrap; }
.today-reflection { display:flex; align-items:center; gap:16px; margin:35px 4px 0; padding-top:22px; border-top:1px solid var(--line); }
.reflection-mark { width:29px; height:29px; flex:none; border:1px solid rgba(23,91,143,.24); border-radius:50%; position:relative; }
.reflection-mark::before { content:""; position:absolute; left:8px; top:13px; width:11px; height:1px; background:var(--blue); transform:rotate(-32deg); transform-origin:left center; }
.reflection-mark::after { content:""; position:absolute; left:14px; top:8px; width:1px; height:13px; background:rgba(23,91,143,.38); transform:rotate(30deg); }
.today-reflection .eyebrow { color:var(--ink-faint); font-size:9px; }
.today-reflection p { margin:7px 0 0; color:#465d6b; font:400 17px/1.2 var(--serif); }

@media (max-width:680px) {
  .today-shell { padding:0; }
  .today-shell .topbar { height:calc(64px + env(safe-area-inset-top)); padding:env(safe-area-inset-top) 18px 0; }
  .today-wordmark { font-size:29px; }
  .profile-button { width:39px; height:39px; }
  .today-shell .content { padding:22px 18px calc(108px + env(safe-area-inset-bottom)); }
  .today-intro { padding:0; }
  .today-intro-meta { align-items:flex-start; }
  .today-status { font-size:9px; }
  .today-title { margin-top:22px; margin-bottom:10px; font-size:43px; line-height:.99; }
  .today-subtitle { font-size:16px; }
  .today-review-card { margin-top:35px; padding:23px 20px 20px; border-radius:17px; }
  .review-card-title { margin-top:10px; font-size:25px; }
  .review-card-title strong { font-size:35px; }
  .review-card-arrow { width:29px; height:29px; font-size:16px; }
  .review-card-rule { margin:19px 0 15px; }
  .review-card-details { gap:25px; margin-bottom:20px; }
  .review-card-details span { font-size:9px; }
  .review-card-details strong { font-size:13px; }
  .today-review-card .primary-button { min-height:48px; }
  .today-review-actions { grid-template-columns:1fr; margin-top:18px; }
  .today-review-actions > .secondary-button:only-child { grid-column:auto; }
  .today-section { margin-top:30px; }
  .today-section-heading { margin-left:0; margin-right:0; }
  .today-stats { grid-template-columns:1fr 1fr; border-radius:15px; }
  .today-stats .stat { display:block; padding:16px 11px 15px; }
  .today-stats .stat:nth-child(1) { border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
  .today-stats .stat:nth-child(2) { border-right:0; border-bottom:1px solid var(--line); }
  .today-stats .study-time-stat { grid-column:1 / -1; border-right:0; }
  .today-stats .stat-icon { margin-bottom:12px; }
  .today-stats .stat-label { font-size:8px; overflow:hidden; text-overflow:ellipsis; }
  .today-stats .stat-value { font-size:25px; margin-top:8px; }
  .today-stats .study-time-stat .stat-value { font-size:17px; }
  .today-stats .stat-note { font-size:8px; overflow:hidden; text-overflow:ellipsis; }
  .today-reflection { margin-left:0; margin-right:0; margin-top:28px; padding-top:18px; }
  .today-reflection p { font-size:16px; }
  .today-shell .mobile-nav { bottom:max(10px, env(safe-area-inset-bottom)); width:calc(100% - 28px); }
}

@media (max-width:380px) {
  .today-shell .content { padding-left:15px; padding-right:15px; }
  .today-title { font-size:39px; }
  .today-subtitle { font-size:15px; }
  .today-review-card { margin-top:30px; }
  .today-stats .stat { padding-left:8px; padding-right:8px; }
  .today-stats .stat-label, .today-stats .stat-note { font-size:7px; }
}

:root {
  --canvas:#fff;
  --surface:#fff;
  --surface-soft:#f7f9fa;
  --paper:#fff;
  --paper-deep:#f2f5f6;
  --paper-glass:rgba(255,255,255,.96);
  --ink:#123a5a;
  --ink-soft:#5e6b74;
  --ink-faint:#8d969b;
  --blue:#175b8f;
  --blue-deep:#0d446f;
  --blue-pale:#e3eef4;
  --clay:#d8733b;
  --clay-pale:#f8e8dd;
  --green:#4f9571;
  --line:rgba(18,58,90,.12);
  --shadow:0 22px 60px rgba(18,58,90,.08),0 2px 8px rgba(18,58,90,.035);
}

html { background:var(--canvas); }
body { background:var(--canvas); }
.sidebar, .today-shell, .today-page { background:var(--surface); }
.card, .today-review-card, .today-stats { background:var(--paper-glass); }
.today-shell .mobile-nav { background:var(--surface); }

@media (max-width:680px) {
  .today-wordmark { font-size:30px; }
  .today-title { margin-top:22px; font-size:35px; }
  .today-subtitle { font-size:16px; }
}

@media (max-width:380px) {
  .today-title { font-size:36px; }
}