/* Material treatment, kept separate from layout and interaction styles. */
body {
  background: #0d1622;
  color: var(--ink);
}
body::before {
  background:
    radial-gradient(ellipse at 76% 21%, rgba(98, 156, 220, .17), transparent 42%),
    radial-gradient(ellipse at 20% 95%, rgba(161, 202, 85, .07), transparent 43%),
    linear-gradient(135deg, rgba(26, 41, 59, .8), transparent 65%);
}
.desktop-wordmark, .wordmark { color: #f2f6fc; }
.desktop-label, .overline, .desktop-preview-label { color: #b2c1d5; }
.desktop-intro h1 { font-weight: 630; }
.desktop-intro em { color: var(--lime); }
.desktop-intro p { color: #b2c1d5; }
.desktop-preview-label span {
  background: var(--lime);
  box-shadow: 0 0 12px rgba(213, 246, 107, .45);
}
.desktop-footnote { color: #90a2bb; }
.device {
  border-color: #465260;
  background:
    radial-gradient(ellipse at 104% 2%, rgba(139, 182, 224, .18), transparent 49%),
    radial-gradient(ellipse at -30% 67%, rgba(213, 246, 107, .075), transparent 46%),
    #111c2a;
  box-shadow: 0 38px 100px rgba(0, 0, 0, .5), 0 0 0 1px rgba(216, 233, 255, .19), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.island { background: #060b12; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .045); }
.battery { border-color: #b2c1d5; }
.battery::before, .battery::after, .home-indicator { background: #dde7f4; }
.avatar, .profile-avatar {
  color: var(--ink);
  background: rgba(197, 221, 248, .09);
  border: 1px solid rgba(208, 227, 252, .21);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.preview-pill { color: #c7d4e5; background: rgba(191, 218, 250, .045); border-color: rgba(194, 217, 247, .19); }
.hero, .progress-hero, .trial-card, .completion-score {
  color: var(--ink);
  border: 1px solid rgba(199, 223, 254, .22);
  background:
    linear-gradient(125deg, rgba(230, 242, 255, .065), transparent 61%),
    rgba(39, 57, 78, .68);
  -webkit-backdrop-filter: blur(26px) saturate(130%);
  backdrop-filter: blur(26px) saturate(130%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 12px 30px rgba(0, 0, 0, .16);
}
.hero .eyebrow, .progress-hero .eyebrow, .trial-card .eyebrow { color: var(--lime); }
.hero-description, .hero-meta, .progress-hero p, .trial-card p { color: #c1cedf; }
.hero-footer, .progress-hero h2 small, .completion-score small { color: #b2c1d5; }
.hero-meta svg { color: #c1cedf; }
.hero-divider { background: #6b7d92; }
.orbit { border-color: rgba(213, 246, 107, .22); background: rgba(213, 246, 107, .025); }
.orbit::before { border-color: rgba(213, 246, 107, .43); }
.orbit::after { border-color: #243446; box-shadow: 0 0 10px rgba(213, 246, 107, .3); }
.primary, .dark-button, .quiz-bottom .primary {
  background: var(--lime);
  color: var(--button-ink);
  border: 1px solid rgba(245, 255, 216, .35);
  box-shadow: 0 4px 18px rgba(213, 246, 107, .12), inset 0 1px 0 rgba(255, 255, 255, .2);
  transition: background .15s, box-shadow .15s;
}
.primary:hover:not(:disabled) { background: #e0fc88; box-shadow: 0 5px 24px rgba(213, 246, 107, .18); }
.primary:active:not(:disabled) { background: #c3e556; }
.primary:disabled, .quiz-bottom .primary:disabled { background: #243245; color: #9eacbe; border-color: #344359; box-shadow: none; }
button:focus-visible, a:focus-visible, input:focus-visible { outline-color: var(--lime); }
.mini-stat, .white-card, .answer-option, .review-item, .community-note {
  background: rgba(37, 54, 75, .66);
  border: 1px solid rgba(190, 215, 244, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 8px 18px rgba(0, 0, 0, .06);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.text-button, .source-link { color: var(--lime); }
.mini-stat .stat-icon { color: #b6c8df; }
.focus-chip, .category-pill, .review-chip {
  color: #c6d7ed;
  background: rgba(193, 217, 248, .065);
  border-color: rgba(190, 215, 244, .16);
}
.focus-chip:hover { background: rgba(193, 217, 248, .12); }
.reminder-banner { border-color: var(--line); }
.reminder-banner > svg { color: var(--lime); }
.navigation {
  margin: 0 11px 14px;
  height: 66px;
  padding: 7px;
  border: 1px solid rgba(191, 218, 250, .2);
  border-radius: 22px;
  background: rgba(35, 51, 72, .80);
  -webkit-backdrop-filter: blur(28px) saturate(130%);
  backdrop-filter: blur(28px) saturate(130%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 5px 25px rgba(0, 0, 0, .2);
  z-index: 5;
}
.nav-item { color: #b2c0d2; border: 1px solid transparent; border-radius: 15px; }
.nav-item.active { color: var(--lime); background: rgba(213, 246, 107, .09); border-color: rgba(213, 246, 107, .16); }
.nav-item.active::before { display: none; }
.icon-button { color: #d6e0ee; background: rgba(193, 217, 248, .06); }
.bar-fill { background: #759353; }
.chart-day.today .bar-fill { background: var(--lime); }
.chart-value { color: #cedbeb; }
.community-center { color: var(--lime); background: rgba(39, 56, 74, .86); border: 1px solid rgba(203, 226, 255, .26); box-shadow: 0 12px 25px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .1); }
.community-orbit, .community-orbit::before { border-color: rgba(188, 217, 248, .2); }
.community-dot { background: #2b3a4b; border-color: #111c29; color: #c4d7ef; }
.community-dot.three { background: var(--lime); color: var(--button-ink); }
.secondary { color: #e1eafa; background: rgba(178, 207, 243, .055); border-color: rgba(192, 215, 245, .2); }
.switch { background: #354459; }
.switch::before { background: #dce7f5; }
.switch.on { background: rgba(213, 246, 107, .22); }
.switch.on::before { background: var(--lime); }
.quiz-progress i { background: #2e4057; }
.quiz-progress i.done { background: #728c4e; }
.quiz-progress i.current { background: var(--lime); }
.question-stem, .feedback p { color: #cbd7e7; }
.answer-option { color: #e3ebf7; background: rgba(37, 54, 75, .85); }
.answer-letter { color: #b8c9df; border-color: #4f637d; background: rgba(182, 211, 246, .04); }
.answer-option.selected { background: rgba(213, 246, 107, .09); border-color: var(--lime); }
.answer-option.selected .answer-letter { background: var(--lime); border-color: var(--lime); color: var(--button-ink); }
.answer-option.correct { background: rgba(109, 219, 158, .115); border-color: #85dcb0; }
.answer-option.correct .answer-letter { background: #9ef2bc; border-color: #9ef2bc; color: #10241a; }
.answer-option.incorrect { background: rgba(250, 148, 135, .085); border-color: #d99289; }
.answer-option.incorrect .answer-letter { background: #ffaea2; border-color: #ffaea2; color: #3d191c; }
.quiz-bottom {
  background: rgba(17, 28, 42, .94);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(190, 215, 244, .1);
  z-index: 3;
}
.pearl { background: rgba(213, 246, 107, .07); border: 1px solid rgba(213, 246, 107, .15); }
.pearl .eyebrow { color: var(--lime); }
.pearl p { color: #dce8cc; }
.completion-badge { border-color: #253644; color: var(--button-ink); outline-color: rgba(213, 246, 107, .25); box-shadow: 0 0 45px rgba(213, 246, 107, .1); }
.toast { color: var(--ink); background: rgba(35, 51, 70, .97); border: 1px solid var(--line); }
.modal-overlay { background: rgba(3, 8, 15, .64); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }
.modal {
  color: var(--ink);
  background: rgba(32, 48, 71, .97);
  border: 1px solid rgba(204, 225, 252, .24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 -12px 50px rgba(0, 0, 0, .28);
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
}
.modal-handle { background: #6a7c94; }
.modal-icon { background: rgba(213, 246, 107, .12); color: var(--lime); border: 1px solid rgba(213, 246, 107, .25); }
.form-field input { color: var(--ink); background: #19283c; border-color: #435972; }
.benefit { color: #cbd7e7; }
.benefit svg { color: var(--lime); }
.danger { color: #ffb5a9; border-color: #a36b68; }
.brand-icon { background: #14221f; }
@media (max-width: 500px) {
  body { background: #111c2a; }
  .device { border: 0; box-shadow: none; }
  .navigation { margin-bottom: max(12px, env(safe-area-inset-bottom)); height: 66px; padding: 7px; }
  .modal { padding-bottom: max(29px, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-transparency: reduce) {
  *, *::before, *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .hero, .progress-hero, .trial-card, .completion-score, .mini-stat, .white-card, .answer-option, .review-item, .community-note, .navigation, .modal { background: #203047; }
  .answer-option.selected, .pearl { background: #283929; }
  .answer-option.correct { background: #18372e; }
  .answer-option.incorrect { background: #3d292e; }
  .quiz-bottom { background: #111c2a; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}