:root {
  color-scheme: dark;
  --bg: #11100e;
  --card: #211f1a;
  --card-strong: #282418;
  --ink: #f7f3e9;
  --muted: #aaa59b;
  --gold: #e5be49;
  --blue: #8bbcf1;
  --line: rgba(229, 190, 73, .18);
  --radius: 22px;
  --native-player-clearance: 0px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/*
 * Refugia's iOS mini-player is a native overlay outside this WKWebView. Older
 * The native bridge toggles this class with the actual mini-player state so
 * Scholar's navigation stays at the normal bottom edge whenever audio is not
 * active.
 */
html.refugia-native-player-visible { --native-player-clearance: 76px; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); }
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }

.shell {
  width: min(760px, 100%);
  margin: 0 auto;
  padding: max(14px, env(safe-area-inset-top)) 20px calc(118px + env(safe-area-inset-bottom) + var(--native-player-clearance));
}

.app-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 44px;
  margin-bottom: 16px;
}
.app-brand { display: flex; align-items: center; gap: 7px; font: 750 14px/1 Georgia, serif; }
.app-brand-mark { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid rgba(229,190,73,.2); border-radius: 9px; color: var(--gold); background: rgba(229,190,73,.08); font-size: 14px; }
.app-screen-title { margin: 0; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.app-credit-chip { justify-self: end; padding: 6px 9px; border: 1px solid rgba(229,190,73,.12); border-radius: 999px; color: var(--gold); background: rgba(229,190,73,.06); font-size: 9px; font-weight: 850; letter-spacing: .06em; }
.app-screen { animation: screen-in .22s ease-out both; }
@keyframes screen-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

.hero {
  position: relative;
  overflow: hidden;
  min-height: 0;
  padding: 25px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    radial-gradient(circle at 86% 10%, rgba(229,190,73,.15), transparent 34%),
    linear-gradient(135deg, #2a291f 0%, #272419 48%, #1d1b16 100%);
  box-shadow: 0 16px 40px rgba(0,0,0,.26), inset 0 1px rgba(255,255,255,.04);
}

.hero-shine {
  position: absolute;
  inset: -100% auto -100% -45%;
  width: 30%;
  transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255,246,196,.16), transparent);
  animation: shine 5.8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes shine {
  0%, 58% { left: -45%; opacity: 0; }
  65% { opacity: 1; }
  82%, 100% { left: 125%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-shine, .app-screen, .article-loader-mark, .article-loading-rule span { animation: none; }
  html { scroll-behavior: auto; }
}

.eyebrow {
  margin: 0 0 12px;
  color: var(--gold);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .19em;
}

.hero h1 {
  margin: 0;
  max-width: 540px;
  font: 700 clamp(30px, 8vw, 42px)/1.02 Georgia, serif;
  letter-spacing: -.025em;
}

.hero-copy { margin: 13px 0 0; max-width: 560px; color: #bbb5aa; font: 15px/1.3 Georgia, serif; }
.hero-action { display: inline-flex; align-items: center; gap: 12px; margin-top: 20px; padding: 10px 14px; border: 1px solid rgba(229,190,73,.28); border-radius: 12px; color: var(--gold); background: rgba(229,190,73,.06); font-size: 12px; font-weight: 850; }
.hero-action span { font-size: 17px; }

.home-actions { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-top: 14px; }
.home-actions button { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 14px; border: 1px solid rgba(255,255,255,.04); border-radius: 17px; color: var(--ink); background: var(--card); text-align: left; }
.home-actions button > span { grid-row: 1 / 3; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: var(--gold); background: rgba(229,190,73,.08); font-size: 18px; }
.home-actions strong { font-size: 12px; }
.home-actions small { color: var(--muted); font-size: 10px; }

.home-section { margin-top: 27px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin: 0 3px 12px; }
.section-heading .eyebrow { margin-bottom: 6px; }
.section-heading h2 { margin: 0; font: 700 23px/1.15 Georgia, serif; }
.section-heading > button { padding: 0 0 2px; border: 0; color: var(--gold); background: transparent; font-size: 11px; font-weight: 800; }

.screen-intro { margin: 5px 3px 23px; }
.screen-intro .eyebrow { margin-bottom: 8px; }
.screen-intro h1 { margin: 0; font: 700 31px/1.08 Georgia, serif; letter-spacing: -.018em; }
.screen-intro > p:last-child { margin: 9px 0 0; max-width: 560px; color: var(--muted); font: 14px/1.4 Georgia, serif; }

.account-card, .saved-card, .projects-card, .recovery-card, .state-card, .desktop-login, .desktop-access-card {
  width: 100%;
  margin-top: 14px;
  border: 1px solid rgba(255,255,255,.035);
  border-radius: var(--radius);
  background: var(--card);
}

.account-card { display: flex; align-items: center; justify-content: space-between; padding: 17px 20px; }
.account-card p { margin: 0; }

.continue-plan-card { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 13px; width: 100%; margin-top: 14px; padding: 17px 18px; border: 1px solid rgba(229,190,73,.18); border-radius: 19px; color: var(--ink); background: radial-gradient(circle at 90% 5%, rgba(229,190,73,.1), transparent 38%), var(--card); text-align: left; }
.continue-plan-card[hidden] { display: none; }
.continue-plan-icon { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(229,190,73,.18); border-radius: 14px; color: var(--gold); background: rgba(229,190,73,.07); font-size: 13px; }
.continue-plan-copy { display: grid; min-width: 0; gap: 4px; }
.continue-plan-copy > small { color: var(--gold); font-size: 8px; font-weight: 850; letter-spacing: .14em; }
.continue-plan-copy > strong { overflow: hidden; font: 700 17px/1.2 Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
.continue-plan-copy > span { color: var(--muted); font-size: 10px; }
.continue-plan-copy > i { overflow: hidden; height: 4px; margin-top: 4px; border-radius: 999px; background: rgba(255,255,255,.055); }
.continue-plan-copy > i > b { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #cfa738, #f0d777); transition: width .24s ease; }
.continue-plan-arrow { color: var(--gold); font-size: 26px; font-weight: 300; }

.daily-feature {
  position: relative;
  overflow: hidden;
  margin-top: 14px;
  padding: 21px;
  border: 1px solid rgba(229,190,73,.19);
  border-radius: 22px;
  background:
    radial-gradient(circle at 94% 8%, rgba(229,190,73,.12), transparent 34%),
    linear-gradient(145deg, #1c2027 0%, #191a1a 55%, #211e16 100%);
  box-shadow: inset 0 1px rgba(255,255,255,.035);
}
.daily-feature-glow { position: absolute; width: 170px; height: 170px; top: -105px; right: -58px; border: 1px solid rgba(229,190,73,.16); border-radius: 50%; box-shadow: 0 0 70px rgba(229,190,73,.08); pointer-events: none; }
.daily-feature-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.daily-feature-heading .eyebrow { margin: 0; }
.daily-feature-heading > span { color: rgba(229,190,73,.75); font-size: 9px; font-weight: 850; letter-spacing: .12em; }
.daily-feature h2 { margin: 15px 0 0; max-width: 590px; font: 650 clamp(23px, 6.5vw, 31px)/1.08 Georgia, serif; letter-spacing: -.018em; }
.daily-feature blockquote { margin: 20px 0 0; padding-left: 15px; border-left: 2px solid rgba(229,190,73,.58); color: #ddd6c8; font: 17px/1.42 Georgia, serif; }
.daily-feature-citation { margin: 9px 0 0 17px; color: var(--gold); font-size: 11px; font-weight: 750; }
.daily-feature-context { margin: 17px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.daily-feature-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 17px; }
.daily-feature-actions button { min-height: 40px; padding: 10px 13px; border: 1px solid rgba(229,190,73,.24); border-radius: 12px; color: var(--gold); background: rgba(229,190,73,.065); font-size: 11px; font-weight: 850; }
.daily-feature-actions button + button { border-color: rgba(255,255,255,.075); color: #c8c1b5; background: rgba(255,255,255,.025); }
.account-tier { font-weight: 750; }
.account-quota { margin-top: 4px !important; color: var(--muted); font-size: 13px; }
.status-pill { padding: 6px 9px; border-radius: 999px; color: var(--gold); background: rgba(229,190,73,.1); font-size: 10px; font-weight: 800; letter-spacing: .08em; }

.desktop-login { padding: 21px; }
body:not(.app-ready) .shell { width: min(1120px, 100%); padding-bottom: 32px; }
body:not(.app-ready) .desktop-login { max-width: 1080px; margin: 18px auto 0; padding: 0; border: 0; background: transparent; }
.desktop-landing-masthead { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 10px 3px 30px; }
.desktop-wordmark { display: flex; align-items: center; gap: 9px; color: var(--ink); font: 16px/1 Georgia, serif; text-decoration: none; }
.desktop-wordmark > span { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid rgba(229,190,73,.24); border-radius: 11px; color: var(--gold); background: rgba(229,190,73,.08); font-size: 16px; }
.desktop-wordmark strong { margin-right: -4px; }
.desktop-download-nav { padding: 9px 12px; border: 1px solid rgba(229,190,73,.18); border-radius: 11px; color: var(--gold); background: rgba(229,190,73,.045); font-size: 11px; font-weight: 800; text-decoration: none; }
.desktop-download-nav span { margin-left: 5px; }
.desktop-landing-grid { display: grid; grid-template-columns: minmax(0, 1.52fr) minmax(320px, .82fr); gap: 34px; align-items: center; }
.desktop-landing-story { min-width: 0; padding: 24px 3px 20px; }
.desktop-landing-story > .eyebrow { margin-bottom: 16px; }
.desktop-landing-story h1 { margin: 0; font: 700 clamp(43px, 5.7vw, 68px)/.98 Georgia, serif; letter-spacing: -.038em; }
.desktop-landing-story h1 em { color: var(--gold); font-weight: 500; }
.desktop-landing-copy { max-width: 690px; margin: 21px 0 0; color: var(--muted); font: 17px/1.5 Georgia, serif; }
.desktop-source-rail { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 24px; }
.desktop-source-rail span { padding: 7px 10px; border: 1px solid rgba(255,255,255,.055); border-radius: 999px; color: #bdb6aa; background: rgba(255,255,255,.02); font-size: 9px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.desktop-source-preview { position: relative; overflow: hidden; margin-top: 27px; padding: 22px 24px; border: 1px solid rgba(229,190,73,.17); border-radius: 20px; background: radial-gradient(circle at 96% 8%, rgba(229,190,73,.1), transparent 32%), linear-gradient(145deg, #211f1a, #191814); box-shadow: 0 18px 46px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.035); }
.desktop-source-preview::before { position: absolute; top: 0; bottom: 0; left: 0; width: 3px; content: ""; background: linear-gradient(180deg, var(--gold), rgba(229,190,73,.08)); }
.desktop-preview-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.desktop-preview-heading span, .desktop-preview-heading i { color: var(--gold); font-size: 9px; font-style: normal; font-weight: 850; letter-spacing: .12em; }
.desktop-source-preview blockquote { margin: 16px 0 11px; color: #e7e0d3; font: 20px/1.4 Georgia, serif; }
.desktop-source-preview > p { margin: 0; color: var(--muted); font-size: 11px; font-weight: 700; }
.desktop-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.desktop-feature-grid article { min-width: 0; padding: 15px; border: 1px solid rgba(255,255,255,.045); border-radius: 15px; background: rgba(255,255,255,.018); }
.desktop-feature-grid article > span { color: var(--gold); font-size: 17px; }
.desktop-feature-grid strong, .desktop-feature-grid small { display: block; }
.desktop-feature-grid strong { margin-top: 10px; font-size: 11px; }
.desktop-feature-grid small { margin-top: 5px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.desktop-signin-card { position: relative; overflow: hidden; padding: 31px; border: 1px solid rgba(229,190,73,.16); border-radius: 25px; background: radial-gradient(circle at 95% 5%, rgba(229,190,73,.11), transparent 34%), var(--card); box-shadow: 0 24px 65px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.04); }
.desktop-signin-mark { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 30px; border: 1px solid rgba(229,190,73,.22); border-radius: 14px; color: var(--gold); background: rgba(229,190,73,.075); font-size: 18px; }
.desktop-signin-card > .eyebrow { margin-bottom: 9px; }
.desktop-signin-card h2 { margin: 0; font: 700 29px/1.1 Georgia, serif; letter-spacing: -.015em; }
.desktop-signin-card > p:not(.eyebrow):not(.desktop-error) { margin: 12px 0 20px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.password-box { display: grid; gap: 9px; }
.password-box input { width: 100%; min-width: 0; padding: 13px 14px; border: 1px solid rgba(255,255,255,.08); border-radius: 13px; outline: none; color: var(--ink); background: rgba(0,0,0,.14); }
.password-box input:focus { border-color: rgba(229,190,73,.46); box-shadow: 0 0 0 3px rgba(229,190,73,.07); }
.password-box button { min-height: 46px; padding: 0 16px; border: 0; border-radius: 13px; color: #17140c; background: var(--gold); font-weight: 850; }
.password-box button:disabled { opacity: .58; cursor: wait; }
.desktop-error { min-height: 18px; margin: 10px 2px 0; color: var(--muted); font-size: 11px; line-height: 1.35; }
.desktop-new-user { margin-top: 21px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.055); }
.desktop-new-user p { margin: 0; }
.desktop-new-user strong, .desktop-new-user span { display: block; }
.desktop-new-user strong { font: 700 14px/1.2 Georgia, serif; }
.desktop-new-user p > span { margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.desktop-new-user > a { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding: 11px 13px; border: 1px solid rgba(229,190,73,.18); border-radius: 12px; color: var(--gold); background: rgba(229,190,73,.045); font-size: 11px; font-weight: 850; text-decoration: none; }
.desktop-landing-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 37px; padding: 18px 3px 3px; border-top: 1px solid rgba(255,255,255,.045); color: var(--muted); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
.desktop-landing-footer a { color: var(--gold); text-decoration: none; }

.desktop-access-card { color: var(--muted); }
.desktop-access-card > summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 18px; cursor: pointer; list-style: none; }
.desktop-access-card > summary::-webkit-details-marker { display: none; }
.desktop-access-card > summary > span:first-child { display: grid; gap: 4px; }
.desktop-access-card > summary strong { color: var(--ink); font-size: 13px; }
.desktop-access-card > summary small { color: var(--muted); font-size: 10px; }
.desktop-access-card > summary > span:last-child { color: var(--gold); font-size: 22px; transition: transform .2s ease; }
.desktop-access-card[open] > summary > span:last-child { transform: rotate(90deg); }
.desktop-access-body { padding: 0 18px 18px; border-top: 1px solid rgba(255,255,255,.045); }
.desktop-access-body > p:first-child { margin: 14px 0 12px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.desktop-access-body form { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
.desktop-access-body input { min-width: 0; padding: 11px 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; outline: none; color: var(--ink); background: rgba(0,0,0,.14); }
.desktop-access-body button { padding: 0 14px; border: 0; border-radius: 12px; color: #17140c; background: var(--gold); font-size: 11px; font-weight: 800; }
#account-link-status { min-height: 16px; margin: 10px 0 0; color: var(--gold); font-size: 11px; }
.desktop-logout { width: 100%; margin-top: 10px; padding: 9px; border: 0; color: var(--muted); background: transparent; font-size: 10px; font-weight: 750; }

.saved-card { display: flex; align-items: center; gap: 14px; padding: 17px 18px; color: var(--ink); text-align: left; }
.saved-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; color: var(--blue); background: rgba(80,133,194,.13); font-size: 22px; }
.saved-copy { display: grid; gap: 3px; flex: 1; }
.saved-copy small, .recovery-card small { color: var(--muted); }
.chevron { color: var(--muted); font-size: 29px; }

.projects-card { color: var(--muted); }
.projects-card > summary { display: flex; align-items: center; gap: 14px; cursor: pointer; padding: 17px 18px; color: var(--ink); list-style: none; }
.projects-card > summary::-webkit-details-marker { display: none; }
.projects-card[open] > summary .chevron { transform: rotate(90deg); }
.projects-summary-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; color: var(--gold); background: rgba(229,190,73,.1); font-size: 23px; }
.projects-summary-copy { display: grid; gap: 3px; flex: 1; }
.projects-summary-copy small { color: var(--muted); }
.projects-body { display: grid; gap: 10px; padding: 0 18px 18px; border-top: 1px solid rgba(255,255,255,.045); }
.projects-body > label, #active-project-panel > label { display: block; margin-top: 12px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.projects-body input, .projects-body textarea { width: 100%; padding: 11px 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; outline: none; color: var(--ink); background: rgba(0,0,0,.14); }
.projects-body textarea { resize: vertical; font: 13px/1.4 -apple-system, sans-serif; }
.project-list-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 14px; }
.project-list-heading span { color: var(--ink); font-size: 11px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.project-list-heading small { color: var(--muted); font-size: 10px; text-align: right; }
.project-list { display: grid; gap: 8px; }
.project-list-empty { margin: 0; padding: 18px 14px; border: 1px dashed rgba(229,190,73,.12); border-radius: 14px; color: var(--muted); font: 13px/1.45 Georgia, serif; text-align: center; }
.project-list-row { display: grid; grid-template-columns: 36px minmax(0,1fr) auto; align-items: center; gap: 11px; width: 100%; padding: 12px 13px; border: 1px solid rgba(255,255,255,.055); border-radius: 14px; color: var(--ink); background: rgba(255,255,255,.018); text-align: left; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.project-list-row:active { transform: scale(.99); }
.project-list-row.selected { border-color: rgba(229,190,73,.27); background: rgba(229,190,73,.065); }
.project-list-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: var(--gold); background: rgba(229,190,73,.09); font-size: 17px; }
.project-list-copy { display: grid; min-width: 0; gap: 4px; }
.project-list-copy strong { overflow: hidden; font: 700 14px/1.2 Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
.project-list-copy small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.project-list-chevron { color: var(--gold); font-size: 22px; font-weight: 400; }
.new-project-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.new-project-form button, .project-actions button { padding: 10px 12px; border: 0; border-radius: 11px; color: #17140c; background: var(--gold); font-size: 12px; font-weight: 800; }
#active-project-panel { margin-top: 5px; padding-top: 17px; border-top: 1px solid rgba(229,190,73,.1); }
.active-project-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.active-project-heading .eyebrow { margin: 0 0 5px; }
.active-project-heading h2 { margin: 0; color: var(--ink); font: 700 22px/1.12 Georgia, serif; }
.active-project-heading small { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; }
.active-project-heading > button { flex: 0 0 auto; padding: 8px 10px; border: 1px solid rgba(229,190,73,.16); border-radius: 10px; color: var(--gold); background: rgba(229,190,73,.05); font-size: 10px; font-weight: 800; }
.active-project-heading > button[aria-pressed="true"] { color: #17140c; background: var(--gold); }
.project-view-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 16px 0 12px; padding: 4px; border: 1px solid rgba(229,190,73,.1); border-radius: 14px; background: rgba(0,0,0,.13); }
.project-view-tabs button { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 39px; border: 0; border-radius: 10px; color: var(--muted); background: transparent; font-size: 11px; font-weight: 850; }
.project-view-tabs button span { min-width: 20px; padding: 2px 6px; border-radius: 999px; color: inherit; background: rgba(255,255,255,.045); font-size: 9px; }
.project-view-tabs button.active { color: var(--gold); background: rgba(229,190,73,.095); box-shadow: inset 0 0 0 1px rgba(229,190,73,.08); }
.project-notes-pane { display: grid; gap: 10px; }
.project-notes-pane[hidden] { display: none; }
.project-notebook-heading, .project-annotation-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; }
.project-notebook-heading { margin-top: 4px; }
.project-annotation-heading { margin-top: 15px; padding-top: 16px; border-top: 1px solid rgba(229,190,73,.09); }
.project-notebook-heading .eyebrow, .project-annotation-heading .eyebrow { margin: 0 0 4px; }
.project-notebook-heading h3, .project-annotation-heading h3 { margin: 0; color: var(--ink); font: 700 18px/1.18 Georgia, serif; }
.project-notebook-heading small, .project-annotation-heading small { color: var(--muted); font-size: 9px; text-align: right; }
.project-note-toolbar { display: flex; gap: 6px; }
.project-note-toolbar button { padding: 7px 9px; border: 1px solid rgba(229,190,73,.11); border-radius: 9px; color: var(--muted); background: rgba(229,190,73,.035); font-size: 9px; font-weight: 800; }
.project-note-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#project-notes { min-height: 190px; padding: 15px 16px; border-color: rgba(229,190,73,.12); font: 15px/1.55 Georgia, serif; }
.project-annotation-list { display: grid; gap: 9px; }
.project-annotation-empty { margin: 0; padding: 16px; border: 1px dashed rgba(229,190,73,.12); border-radius: 13px; color: var(--muted); font: 13px/1.45 Georgia, serif; text-align: center; }
.project-annotation-card { display: grid; gap: 11px; padding: 15px; border: 1px solid rgba(229,190,73,.1); border-radius: 14px; background: rgba(229,190,73,.025); }
.project-annotation-card > p { margin: 0; color: var(--ink); font: 15px/1.48 Georgia, serif; white-space: pre-wrap; }
.project-annotation-card > div { display: grid; gap: 3px; padding-top: 10px; border-top: 1px solid rgba(229,190,73,.08); }
.project-annotation-card strong { color: var(--gold); font-size: 11px; }
.project-annotation-card small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.project-annotation-card button { justify-self: start; padding: 7px 9px; border: 0; border-radius: 9px; color: var(--gold); background: rgba(229,190,73,.075); font-size: 9px; font-weight: 850; }
.project-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.project-actions .destructive { color: #df8798; background: rgba(210,91,110,.1); }
.project-source-list { display: grid; gap: 10px; margin-top: 14px; }
.project-source-list .result-card { margin-bottom: 0; }
.project-source-card.reorder-active { border-color: rgba(229,190,73,.18); }
.project-source-card.reorder-active .card-actions, .project-source-card.reorder-active .source-annotation-editor { display: none; }
.source-annotation-editor { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(229,190,73,.08); }
.source-annotation-editor > summary { width: max-content; cursor: pointer; color: var(--gold); font-size: 10px; font-weight: 850; list-style: none; }
.source-annotation-editor > summary::-webkit-details-marker { display: none; }
.source-annotation-editor > summary::before { content: "+"; display: inline-block; width: 15px; color: var(--muted); }
.source-annotation-editor[open] > summary::before { content: "−"; }
.source-annotation-editor textarea { width: 100%; margin-top: 11px; padding: 12px 13px; resize: vertical; border: 1px solid rgba(229,190,73,.11); border-radius: 11px; outline: none; color: var(--ink); background: rgba(0,0,0,.15); font: 13px/1.45 Georgia, serif; }
.source-annotation-actions { display: flex; gap: 7px; margin-top: 8px; }
.source-annotation-actions button { padding: 8px 10px; border: 0; border-radius: 9px; color: #17140c; background: var(--gold); font-size: 9px; font-weight: 850; }
.source-annotation-actions .source-annotation-remove { color: #df8798; background: rgba(210,91,110,.1); }
.source-annotation-status { display: block; min-height: 14px; margin-top: 7px; color: var(--gold); font-size: 9px; }
.project-reorder-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -3px -3px 14px; padding: 9px 10px; border: 1px solid rgba(229,190,73,.11); border-radius: 11px; background: rgba(229,190,73,.035); }
.project-reorder-controls > span { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.project-reorder-actions { display: flex; gap: 6px; }
.project-reorder-actions button { min-width: 74px; padding: 7px 9px; border: 1px solid rgba(229,190,73,.13); border-radius: 9px; color: var(--gold); background: rgba(229,190,73,.045); font-size: 10px; font-weight: 800; }
.project-reorder-actions button:disabled { opacity: .28; }
.project-source-empty { margin: 4px 0 0; color: var(--muted); font: 13px/1.45 Georgia, serif; }
.project-status { min-height: 15px; margin: 0; color: var(--gold); font-size: 11px; }

body.project-picker-open { overflow: hidden; }
.project-picker { position: fixed; inset: 0; z-index: 120; display: grid; align-items: end; }
.project-picker-backdrop { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(0,0,0,.68); backdrop-filter: blur(5px); }
.project-picker-sheet { position: relative; width: min(620px, 100%); max-height: min(78vh, 680px); margin: 0 auto; padding: 22px 20px calc(20px + env(safe-area-inset-bottom)); overflow-y: auto; border: 1px solid rgba(229,190,73,.15); border-bottom: 0; border-radius: 26px 26px 0 0; color: var(--ink); background: #1b1915; box-shadow: 0 -18px 50px rgba(0,0,0,.45); }
.project-picker-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.project-picker-header .eyebrow { margin-bottom: 7px; }
.project-picker-header h2 { margin: 0; font: 700 25px/1.1 Georgia, serif; }
.project-picker-header p:last-child { margin: 7px 0 0; max-width: 450px; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.project-picker-close { flex: 0 0 auto; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.07); border-radius: 50%; color: var(--muted); background: rgba(255,255,255,.035); font-size: 24px; line-height: 1; }
.project-picker-list { display: grid; gap: 8px; margin-top: 19px; }
.project-picker-choice { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; width: 100%; padding: 13px 14px; border: 1px solid rgba(255,255,255,.065); border-radius: 14px; color: var(--ink); background: rgba(255,255,255,.025); text-align: left; }
.project-picker-choice.saved { border-color: rgba(229,190,73,.22); background: rgba(229,190,73,.055); }
.project-picker-choice strong, .project-picker-choice small { display: block; }
.project-picker-choice strong { font-size: 13px; }
.project-picker-choice small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.project-picker-choice > span:last-child { color: var(--gold); font-size: 11px; font-weight: 800; white-space: nowrap; }
.project-picker-empty { margin: 0; padding: 15px; border: 1px dashed rgba(255,255,255,.08); border-radius: 14px; color: var(--muted); font: 13px/1.4 Georgia, serif; }
.project-picker-new { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 15px; padding-top: 15px; border-top: 1px solid rgba(255,255,255,.055); }
.project-picker-new input { min-width: 0; padding: 11px 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; outline: none; color: var(--ink); background: rgba(0,0,0,.16); }
.project-picker-new button { padding: 11px 13px; border: 0; border-radius: 12px; color: #17140c; background: var(--gold); font-size: 11px; font-weight: 850; }
.project-picker-status { min-height: 16px; margin: 10px 2px 0; color: var(--gold); font-size: 11px; }

@media (min-width: 680px) {
  .project-picker { align-items: center; padding: 24px; }
  .project-picker-sheet { border-bottom: 1px solid rgba(229,190,73,.15); border-radius: 26px; }
}

.recovery-card { color: var(--muted); }
.recovery-card summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; padding: 15px 18px; color: var(--ink); font-weight: 650; list-style: none; }
.recovery-card summary::-webkit-details-marker { display: none; }
.recovery-body { padding: 0 18px 17px; border-top: 1px solid rgba(255,255,255,.045); }
.recovery-body p { font-size: 13px; line-height: 1.4; }
.quiet-button { padding: 0; border: 0; color: var(--blue); background: transparent; font-weight: 700; }

.search-section { margin-top: 0; }
.search-section label { display: block; margin: 0 4px 10px; font: 700 20px/1.25 Georgia, serif; }
.search-box { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 7px 8px 7px 17px; border: 1px solid rgba(255,255,255,.06); border-radius: 19px; background: var(--card); }
.search-box > span { color: var(--muted); font-size: 25px; transform: rotate(-15deg); }
.search-box input { min-width: 0; flex: 1; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 17px; }
.search-box input::placeholder { color: #74716b; }
.search-box button { width: 43px; height: 43px; border: 0; border-radius: 14px; color: #17140c; background: var(--gold); font-size: 24px; font-weight: 800; }
.mode-selector { display: flex; gap: 6px; margin-top: 12px; padding: 5px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; border: 1px solid rgba(255,255,255,.05); border-radius: 15px; background: rgba(255,255,255,.025); }
.mode-selector::-webkit-scrollbar { display: none; }
.mode-selector button { flex: 1 0 auto; min-width: 66px; padding: 9px 10px; scroll-snap-align: start; border: 0; border-radius: 11px; color: var(--muted); background: transparent; font-size: 11px; font-weight: 750; white-space: nowrap; }
.mode-selector button.active { color: #17140c; background: var(--gold); box-shadow: 0 5px 14px rgba(205,162,56,.18); }
.mode-help { min-height: 17px; margin: 8px 4px 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.suggestions { display: flex; gap: 8px; margin-top: 11px; overflow-x: auto; padding-bottom: 3px; scrollbar-width: none; }
.suggestions::-webkit-scrollbar { display: none; }
.suggestions button { flex: 0 0 auto; padding: 8px 11px; border: 1px solid rgba(255,255,255,.055); border-radius: 999px; color: var(--muted); background: transparent; font-size: 12px; }
.dossier-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.dossier-grid button { position: relative; min-width: 0; overflow: hidden; padding: 15px; border: 1px solid rgba(255,255,255,.05); border-radius: 15px; color: var(--ink); background: linear-gradient(145deg, var(--card), rgba(229,190,73,.025)); text-align: left; }
.dossier-grid button::after { position: absolute; right: 10px; bottom: 7px; content: "↗"; color: rgba(229,190,73,.35); font-size: 14px; }
.dossier-grid strong, .dossier-grid small { display: block; }
.dossier-grid strong { font: 700 15px/1.2 Georgia, serif; }
.dossier-grid small { max-width: 90%; margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.35; }

.state-card { display: flex; gap: 13px; align-items: center; padding: 20px; }
.state-card p { margin: 5px 0 0; color: var(--muted); font-size: 13px; line-height: 1.35; }
.spinner { width: 22px; height: 22px; flex: 0 0 auto; border: 2px solid rgba(139,188,241,.22); border-top-color: var(--blue); border-radius: 50%; animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.state-card.ready .spinner { display: none; }
.state-card.error { border-color: rgba(210,91,110,.24); }

.results { margin-top: 30px; }
.result-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 14px; }
.result-heading h2 { margin: 0; font: 700 28px Georgia, serif; }
.result-heading > span { color: var(--muted); font-size: 12px; }
.section-label { margin: 24px 3px 10px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .16em; }
.result-card { width: 100%; min-width: 0; margin-bottom: 10px; padding: 17px; border: 1px solid rgba(255,255,255,.045); border-radius: 18px; color: var(--ink); background: var(--card); text-align: left; }
.result-card.anchor { border-color: var(--line); background: var(--card-strong); }
.result-card strong { display: block; font-size: 16px; }
.result-card .meta { display: block; margin-top: 4px; color: var(--gold); font-size: 11px; font-weight: 750; letter-spacing: .04em; }
.result-card p { margin: 11px 0 0; color: #d1ccc2; font: 15px/1.45 Georgia, serif; }
.card-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 12px; }
.card-secondary-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 14px; margin-left: auto; }
.result-card .open, .copy-button, .citation-button, .project-save-button, .compare-button, .feedback-button, .share-button { margin: 0; padding: 0; border: 0; background: transparent; font: 700 12px/1 sans-serif; }
.result-card .open { color: var(--blue); text-align: left; }
.copy-button { color: var(--gold); white-space: nowrap; }
.copy-button:disabled { color: var(--muted); }
.citation-button { color: var(--gold); white-space: nowrap; }
.project-save-button, .compare-button { color: var(--blue); white-space: nowrap; }
.project-save-button.saved, .compare-button.selected { color: var(--gold); }
.share-button { color: var(--blue); white-space: nowrap; }
.share-button:disabled { color: var(--muted); }
.feedback-button { color: #85817a; white-space: nowrap; }
.feedback-button:disabled { color: var(--gold); }
.translation-control { margin-top: 13px; padding: 11px 12px; border: 1px solid rgba(139,188,241,.13); border-radius: 13px; background: rgba(139,188,241,.045); }
.translation-control summary { cursor: pointer; list-style: none; color: var(--blue); font: 750 12px/1.2 sans-serif; }
.translation-control summary::-webkit-details-marker { display: none; }
.translation-control summary::after { float: right; content: "⌄"; color: var(--muted); font-size: 15px; transform: translateY(-2px); }
.translation-control[open] summary::after { content: "⌃"; }
.passage-tools { display: grid; gap: 7px; margin-top: 13px; }
.passage-tools .translation-control { margin-top: 0; }
.citation-trail { padding: 11px 12px; border: 1px solid rgba(229,190,73,.12); border-radius: 13px; background: rgba(229,190,73,.035); }
.citation-trail summary { cursor: pointer; list-style: none; color: var(--gold); font: 750 12px/1.2 sans-serif; }
.citation-trail summary::-webkit-details-marker { display: none; }
.citation-trail-list { display: grid; gap: 7px; margin-top: 10px; }
.citation-trail-list button { padding: 0; border: 0; color: var(--blue); background: transparent; font-size: 11px; font-weight: 700; text-align: left; }
.translation-content { display: grid; gap: 10px; margin-top: 11px; }
.result-card .translation-status { margin: 0; color: var(--muted); font: 11px/1.4 sans-serif; }
.result-card .translation-status.error { color: #df8798; }
.translation-select { width: 100%; min-height: 42px; padding: 9px 34px 9px 11px; border: 1px solid rgba(255,255,255,.09); border-radius: 11px; color: var(--ink); background: var(--card-strong); font: 700 12px/1.2 sans-serif; }
.translation-comparison { padding-top: 1px; }
.translation-reference { display: block; color: var(--gold); font-size: 10px; font-weight: 800; letter-spacing: .035em; text-transform: uppercase; }
.result-card .translation-comparison p { margin-top: 7px; }
.source-context { width: 100%; max-width: 100%; min-width: 0; margin-top: 10px; padding: 11px 12px; overflow: hidden; border: 1px solid rgba(229,190,73,.12); border-radius: 13px; background: rgba(229,190,73,.035); }
.source-context summary { cursor: pointer; list-style: none; color: var(--gold); font: 750 12px/1.2 sans-serif; }
.source-context summary::-webkit-details-marker { display: none; }
.source-context summary::after { float: right; content: "⌄"; color: var(--muted); }
.source-context[open] summary::after { content: "⌃"; }
.source-context-body { display: grid; width: 100%; max-width: 100%; min-width: 0; gap: 10px; margin-top: 11px; }
.result-card .source-context-status { margin: 0; color: var(--muted); font: 11px/1.4 sans-serif; }
.source-context-segment { width: 100%; max-width: 100%; min-width: 0; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.045); }
.source-context-segment.current { padding: 11px; border: 1px solid rgba(229,190,73,.14); border-radius: 11px; background: rgba(229,190,73,.035); }
.source-context-segment strong { color: var(--gold); font: 800 9px/1.2 sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.result-card .source-context-segment p { max-width: 100%; margin-top: 7px; overflow-wrap: anywhere; word-break: normal; white-space: pre-wrap; color: #c4beb3; font-size: 13px; line-height: 1.48; }
.overview-button { display: grid; gap: 5px; width: 100%; margin: 0 0 18px; padding: 16px 18px; border: 1px solid rgba(255,230,135,.46); border-radius: 18px; color: #1a160b; background: linear-gradient(135deg, #efd166, #cda238); box-shadow: 0 11px 24px rgba(0,0,0,.28); text-align: left; }
.overview-button span { font-weight: 850; }
.overview-button small { color: rgba(31,24,6,.69); }
.overview-button:disabled { cursor: not-allowed; filter: saturate(.35); opacity: .62; box-shadow: none; }
.copy-all-quotes-button { display: flex; align-items: center; gap: 11px; width: 100%; margin: -8px 0 18px; padding: 12px 15px; border: 1px solid rgba(229,190,73,.16); border-radius: 15px; color: var(--ink); background: rgba(229,190,73,.05); text-align: left; }
.copy-all-quotes-button > span:first-child { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 10px; color: var(--gold); background: rgba(229,190,73,.09); font-size: 16px; }
.copy-all-quotes-button > span:last-child { display: grid; gap: 2px; }
.copy-all-quotes-button strong { font-size: 12px; }
.copy-all-quotes-button small { color: var(--muted); font-size: 10px; }
.copy-all-quotes-button:disabled { opacity: .55; }
.export-pdf-button { display: flex; align-items: center; gap: 11px; width: 100%; margin: -8px 0 18px; padding: 12px 15px; border: 1px solid rgba(139,188,241,.16); border-radius: 15px; color: var(--ink); background: rgba(139,188,241,.07); text-align: left; }
.export-pdf-button > span:first-child { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; color: var(--blue); background: rgba(139,188,241,.1); font-size: 18px; }
.export-pdf-button > span:last-child { display: grid; gap: 2px; }
.export-pdf-button strong { font-size: 12px; }
.export-pdf-button small { color: var(--muted); font-size: 10px; }
.save-search-button { width: 100%; margin: -8px 0 16px; padding: 10px 13px; border: 1px solid rgba(229,190,73,.14); border-radius: 13px; color: var(--gold); background: rgba(229,190,73,.045); font-size: 11px; font-weight: 800; }
.save-search-button:disabled { color: var(--muted); }
.research-console { margin-bottom: 18px; }
.coverage-strip { display: flex; gap: 7px; overflow-x: auto; padding: 1px 0 11px; scrollbar-width: none; }
.coverage-strip::-webkit-scrollbar { display: none; }
.coverage-chip { flex: 0 0 auto; padding: 7px 9px; border: 1px solid rgba(229,190,73,.13); border-radius: 999px; color: var(--muted); background: rgba(229,190,73,.045); font-size: 10px; font-weight: 750; }
.coverage-chip strong { color: var(--gold); }
.view-selector { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; padding: 4px; border: 1px solid rgba(255,255,255,.05); border-radius: 14px; background: rgba(255,255,255,.02); }
.view-selector button { padding: 9px 6px; border: 0; border-radius: 10px; color: var(--muted); background: transparent; font-size: 11px; font-weight: 800; }
.view-selector button.active { color: var(--ink); background: rgba(139,188,241,.11); }
.view-selector span { color: var(--gold); }
.filter-panel, .citation-studio, .recent-research, .reading-plan { margin-top: 8px; padding: 12px 13px; border: 1px solid rgba(255,255,255,.045); border-radius: 14px; background: rgba(255,255,255,.018); }
.filter-panel summary, .citation-studio summary, .recent-research summary, .reading-plan summary { cursor: pointer; color: var(--muted); font-size: 11px; font-weight: 750; }
.filter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 11px; }
.filter-grid label { display: grid; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 750; }
.filter-grid select { min-width: 0; width: 100%; padding: 9px 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; color: var(--ink); background: var(--card-strong); font-size: 11px; }
.filter-grid .primary-toggle { display: flex; align-items: center; gap: 7px; }
.filter-grid .quiet-button { justify-self: start; }
.citation-studio > p, .recent-research > p { margin: 9px 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.citation-studio-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.citation-studio-controls label { grid-column: 1 / -1; display: grid; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 750; }
.citation-studio-controls select { width: 100%; padding: 9px 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; color: var(--ink); background: var(--card-strong); font-size: 11px; }
.citation-studio-controls button, .board-export-button { padding: 9px 10px; border: 1px solid rgba(229,190,73,.15); border-radius: 10px; color: var(--gold); background: rgba(229,190,73,.045); font-size: 10px; font-weight: 800; }
.citation-studio-status { min-height: 14px; margin: 8px 0 0; color: var(--gold); font-size: 10px; }
#recent-research-list { display: grid; gap: 7px; }
#recent-research-list button { position: relative; display: grid; gap: 4px; padding: 13px 37px 13px 14px; border: 1px solid rgba(255,255,255,.05); border-radius: 14px; color: var(--ink); background: var(--card); text-align: left; }
#recent-research-list button::after { position: absolute; top: 50%; right: 14px; content: "›"; color: var(--muted); font-size: 21px; transform: translateY(-50%); }
#recent-research-list strong { font-size: 12px; }
#recent-research-list small, .recent-empty { color: var(--muted); font-size: 10px; }
.recent-empty { margin: 0; padding: 17px; border: 1px dashed rgba(255,255,255,.06); border-radius: 14px; text-align: center; }
.reading-plan > p { margin: 9px 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.reading-plan-options { display: flex; gap: 7px; }
.reading-plan-options button, .plan-export-button, .plan-save-button { padding: 8px 10px; border: 1px solid rgba(229,190,73,.18); border-radius: 999px; color: var(--gold); background: rgba(229,190,73,.055); font-size: 11px; font-weight: 800; }
.plan-day { margin-top: 12px; padding-top: 11px; border-top: 1px solid rgba(255,255,255,.045); }
.plan-day strong { color: var(--gold); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.plan-day ul { margin: 8px 0 0; padding-left: 18px; color: var(--ink); font: 13px/1.45 Georgia, serif; }
.plan-day li { display: flex; align-items: baseline; gap: 10px; margin: 5px 0; }
.plan-day li button { padding: 0; border: 0; color: var(--ink); background: transparent; font: inherit; text-align: left; }
.plan-day li .plan-feedback { margin-left: auto; flex: 0 0 auto; color: #8f8b82; font: 700 9px/1.2 system-ui, sans-serif; }
.plan-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.plan-save-button { color: #17130b; background: var(--gold); }
.timeline-view { position: relative; padding-left: 24px; }
.timeline-view::before { position: absolute; top: 5px; bottom: 5px; left: 8px; width: 1px; content: ""; background: linear-gradient(var(--gold), rgba(229,190,73,.08)); }
.timeline-item { position: relative; margin-bottom: 12px; padding: 14px 15px; border: 1px solid rgba(255,255,255,.045); border-radius: 15px; background: var(--card); }
.timeline-item::before { position: absolute; top: 20px; left: -21px; width: 9px; height: 9px; border: 2px solid var(--bg); border-radius: 50%; content: ""; background: var(--gold); }
.timeline-year { color: var(--gold); font-size: 10px; font-weight: 850; letter-spacing: .08em; }
.timeline-item h3 { margin: 5px 0 0; font: 700 15px/1.2 Georgia, serif; }
.timeline-item p { margin: 7px 0 0; color: var(--muted); font: 13px/1.4 Georgia, serif; }
.compare-empty { padding: 20px; border: 1px dashed rgba(139,188,241,.18); border-radius: 16px; color: var(--muted); font-size: 12px; text-align: center; }
.compare-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.compare-source { padding: 16px; border: 1px solid rgba(139,188,241,.12); border-radius: 16px; background: var(--card); }
.compare-source strong { font: 700 16px/1.2 Georgia, serif; }
.compare-source small { display: block; margin-top: 5px; color: var(--gold); font-size: 10px; }
.compare-source p { margin: 11px 0 0; color: #d1ccc2; font: 14px/1.45 Georgia, serif; }
.board-intro { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 11px; padding: 12px 13px; border: 1px solid rgba(229,190,73,.1); border-radius: 13px; background: rgba(229,190,73,.03); }
.board-intro p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.board-export-button { flex: 0 0 auto; }
.evidence-board-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 9px; align-items: start; }
.evidence-column { padding: 11px; border: 1px solid rgba(255,255,255,.045); border-radius: 15px; background: rgba(255,255,255,.018); }
.evidence-column h3 { margin: 0 0 9px; color: var(--gold); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.evidence-note { display: grid; gap: 5px; width: 100%; margin-top: 7px; padding: 11px; border: 1px solid rgba(255,255,255,.05); border-radius: 11px; color: var(--ink); background: var(--card); text-align: left; }
.evidence-note strong { font: 700 12px/1.25 Georgia, serif; }
.evidence-note span { display: -webkit-box; overflow: hidden; color: var(--muted); font: 10px/1.4 Georgia, serif; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.result-report { margin-top: 22px; padding: 15px 16px; border: 1px solid rgba(255,255,255,.045); border-radius: 16px; color: var(--muted); background: rgba(255,255,255,.018); }
.result-report summary { cursor: pointer; color: var(--muted); font-size: 12px; font-weight: 700; }
.result-report p { margin: 12px 0 9px; font-size: 12px; }
.feedback-reasons { display: flex; flex-wrap: wrap; gap: 7px; }
.feedback-reasons button { padding: 8px 10px; border: 1px solid rgba(255,255,255,.07); border-radius: 999px; color: var(--ink); background: var(--card); font-size: 11px; }
.feedback-reasons button:disabled { color: var(--gold); }
.feedback-status { min-height: 17px; margin: 10px 3px 0; color: var(--gold); font-size: 11px; line-height: 1.4; }
.feedback-status.error { color: #df8798; }
.fallback { display: block; margin: 25px auto 0; border: 0; color: #77736c; background: transparent; font-size: 12px; }

.secondary-action { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 12px; padding: 14px 16px; border: 1px solid rgba(229,190,73,.13); border-radius: 15px; color: var(--gold); background: rgba(229,190,73,.04); font-size: 12px; font-weight: 800; }
.saved-screen .saved-card, .projects-screen .projects-card { margin-top: 0; }

.saved-reading-plans { margin-bottom: 20px; }
.reading-plan-list { display: grid; gap: 8px; }
.reading-plan-empty { margin: 0; padding: 18px 16px; border: 1px dashed rgba(229,190,73,.1); border-radius: 16px; color: var(--muted); font: 13px/1.45 Georgia, serif; text-align: center; }
.saved-reading-plan { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; padding: 15px 16px; border: 1px solid rgba(229,190,73,.1); border-radius: 16px; color: var(--ink); background: var(--card); text-align: left; }
.saved-reading-plan > span { display: grid; min-width: 0; flex: 1; gap: 5px; }
.saved-reading-plan strong { overflow: hidden; font: 700 15px/1.25 Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
.saved-reading-plan small { color: var(--muted); font-size: 10px; }
.saved-reading-plan i { overflow: hidden; height: 3px; margin-top: 3px; border-radius: 999px; background: rgba(255,255,255,.055); }
.saved-reading-plan i::after { display: block; width: var(--plan-progress); height: 100%; border-radius: inherit; content: ""; background: var(--gold); }
.saved-reading-plan b { color: var(--gold); font-size: 23px; font-weight: 400; }

.guided-plan-screen { max-width: 680px; margin: 0 auto; }
.guided-plan-toolbar { display: flex; align-items: center; justify-content: space-between; margin: 3px 0 18px; }
.guided-plan-toolbar button { padding: 8px 0; border: 0; color: var(--gold); background: transparent; font-size: 11px; font-weight: 800; }
.guided-plan-toolbar .destructive { color: #a77b82; }
.guided-plan-header { margin-bottom: 20px; padding: 24px 22px; border: 1px solid rgba(229,190,73,.13); border-radius: 23px; background: radial-gradient(circle at 88% 5%, rgba(229,190,73,.1), transparent 38%), var(--card); }
.guided-plan-header h1 { margin: 0; font: 700 clamp(30px, 8vw, 42px)/1.05 Georgia, serif; letter-spacing: -.025em; }
.guided-plan-header > p:not(.eyebrow) { margin: 11px 0 0; color: var(--muted); font: 12px/1.45 Georgia, serif; }
.guided-plan-progress { overflow: hidden; height: 5px; margin-top: 19px; border-radius: 999px; background: rgba(255,255,255,.06); }
.guided-plan-progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #cfa738, #f0d777); transition: width .24s ease; }
#guided-plan-progress-copy { display: block; margin-top: 7px; color: var(--muted); font-size: 10px; font-weight: 750; }
#guided-plan-continue { width: 100%; margin-top: 18px; padding: 13px 15px; border: 1px solid rgba(229,190,73,.2); border-radius: 13px; color: #17130b; background: var(--gold); font-size: 12px; font-weight: 850; }
#guided-plan-continue:disabled { color: var(--muted); background: rgba(255,255,255,.04); }
.guided-plan-days { display: grid; gap: 9px; }
.guided-plan-day { overflow: hidden; border: 1px solid rgba(255,255,255,.055); border-radius: 17px; background: var(--card); }
.guided-plan-day summary { display: flex; align-items: center; justify-content: space-between; padding: 15px 16px; cursor: pointer; }
.guided-plan-day summary strong { font: 700 15px/1.2 Georgia, serif; }
.guided-plan-day summary small { color: var(--gold); font-size: 10px; font-weight: 800; }
.guided-plan-readings { display: grid; gap: 8px; padding: 0 10px 10px; }
.guided-plan-reading { padding: 14px; border: 1px solid rgba(255,255,255,.045); border-radius: 13px; background: rgba(255,255,255,.016); }
.guided-plan-reading.complete { opacity: .64; }
.guided-plan-reading > div:first-child { display: grid; gap: 4px; }
.guided-plan-reading strong { font: 700 14px/1.25 Georgia, serif; }
.guided-plan-reading small { color: var(--gold); font-size: 9px; }
.guided-plan-reading p { display: -webkit-box; overflow: hidden; margin: 9px 0 12px; color: var(--muted); font: 12px/1.45 Georgia, serif; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.guided-plan-reading > div:last-child { display: flex; flex-wrap: wrap; gap: 7px; }
.guided-plan-reading button { padding: 8px 10px; border: 1px solid rgba(229,190,73,.15); border-radius: 999px; color: var(--gold); background: rgba(229,190,73,.04); font-size: 10px; font-weight: 800; }
.guided-plan-reading .guided-plan-complete { color: var(--muted); border-color: rgba(255,255,255,.07); background: transparent; }
.guided-plan-reading .guided-plan-complete[aria-pressed="true"] { color: var(--gold); border-color: rgba(229,190,73,.15); }
.guided-plan-reading .guided-plan-feedback { margin-left: auto; color: #8f8b82; border-color: transparent; background: transparent; font-weight: 700; }
.guided-plan-reading .guided-plan-feedback:disabled { opacity: .65; }
.guided-plan-feedback-status { min-height: 16px; margin: 12px 3px 0; color: var(--muted); font-size: 10px; text-align: center; }

.remote-saved-articles { margin-bottom: 18px; }
.saved-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin: 0 3px 11px; }
.saved-section-heading .eyebrow { margin-bottom: 5px; }
.saved-section-heading h2 { margin: 0; font: 700 23px/1.15 Georgia, serif; }
.saved-section-heading > span { color: var(--muted); font-size: 10px; font-weight: 750; }
.saved-article-list { display: grid; gap: 8px; }
.saved-article-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; padding: 15px 16px; border: 1px solid rgba(229,190,73,.09); border-radius: 16px; color: var(--ink); background: var(--card); text-align: left; }
.saved-article-row > span:first-child { display: grid; min-width: 0; gap: 5px; }
.saved-article-row strong { overflow: hidden; font: 700 15px/1.25 Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
.saved-article-row small { color: var(--muted); font-size: 10px; }
.saved-article-row > span:last-child { color: var(--gold); font-size: 23px; }
.saved-article-empty { margin: 0; padding: 20px 16px; border: 1px dashed rgba(229,190,73,.1); border-radius: 16px; color: var(--muted); font: 13px/1.45 Georgia, serif; text-align: center; }

.article-screen { max-width: 680px; margin: 0 auto; }
.article-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 3px 0 20px; }
.article-toolbar button { padding: 8px 0; border: 0; color: var(--gold); background: transparent; font-size: 11px; font-weight: 800; }
.article-loading, .article-error { margin-top: 42px; padding: 34px 25px; border: 1px solid rgba(229,190,73,.13); border-radius: 24px; background: radial-gradient(circle at 50% 0, rgba(229,190,73,.09), transparent 44%), var(--card); text-align: center; }
.article-loader-mark { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 19px; border: 1px solid rgba(229,190,73,.22); border-radius: 18px; color: var(--gold); background: rgba(229,190,73,.06); font-size: 24px; animation: article-pulse 2.2s ease-in-out infinite; }
@keyframes article-pulse { 50% { transform: translateY(-3px); box-shadow: 0 10px 32px rgba(229,190,73,.12); } }
.article-loading h1, .article-error h1 { margin: 0; font: 700 28px/1.15 Georgia, serif; }
.article-loading > p, .article-error > p:not(.eyebrow) { max-width: 490px; margin: 13px auto 0; color: var(--muted); font: 14px/1.5 Georgia, serif; }
.article-loading-rule { overflow: hidden; height: 3px; margin: 24px auto 13px; border-radius: 999px; background: rgba(255,255,255,.05); }
.article-loading-rule span { display: block; width: 34%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, transparent, var(--gold), transparent); animation: article-progress 2.3s ease-in-out infinite; }
@keyframes article-progress { from { transform: translateX(-110%); } to { transform: translateX(300%); } }
.article-loading small { color: #77736c; font-size: 10px; }
.article-error button { margin-top: 20px; padding: 10px 14px; border: 1px solid rgba(229,190,73,.18); border-radius: 11px; color: var(--gold); background: rgba(229,190,73,.05); font-size: 11px; font-weight: 800; }

.research-article { padding-bottom: 22px; }
.research-article-header { padding: 10px 3px 28px; border-bottom: 1px solid rgba(229,190,73,.14); }
.research-article-header .eyebrow { margin-bottom: 10px; }
.research-article-header h1 { margin: 0; max-width: 640px; font: 700 clamp(34px, 8vw, 49px)/1.03 Georgia, serif; letter-spacing: -.028em; }
.article-source-count { margin: 13px 0 0; color: var(--muted); font-size: 11px; font-weight: 700; }
.article-brief { margin: 24px 0 31px; padding: 21px 20px; border: 1px solid rgba(229,190,73,.16); border-radius: 19px; background: linear-gradient(135deg, rgba(229,190,73,.08), rgba(229,190,73,.025)); }
.article-brief .eyebrow { margin-bottom: 10px; }
.article-summary-copy { margin: 0 0 12px; color: var(--ink); font: 17px/1.58 Georgia, serif; }
.article-summary-copy:last-child { margin-bottom: 0; }
.article-sections { display: grid; gap: 31px; }
.article-section { padding: 0 3px; }
.article-section h2 { margin: 0 0 13px; color: var(--ink); font: 700 25px/1.16 Georgia, serif; letter-spacing: -.012em; }
.article-section p { margin: 0 0 15px; color: #d4cfc5; font: 16px/1.62 Georgia, serif; }
.article-section p:last-child { margin-bottom: 0; }
.article-inline-citation { display: inline; margin: 0 1px; padding: 1px 4px; border: 0; border-radius: 5px; color: var(--gold); background: rgba(229,190,73,.08); font: 800 10px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; vertical-align: .18em; }
.article-inline-citation.unavailable { color: var(--muted); background: rgba(255,255,255,.04); }
.article-bibliography { margin-top: 35px; padding: 16px; border: 1px solid rgba(255,255,255,.045); border-radius: 17px; background: rgba(255,255,255,.018); }
.article-bibliography summary { color: var(--gold); font-size: 12px; font-weight: 800; cursor: pointer; }
.article-bibliography > p { margin: 9px 0 13px; color: var(--muted); font-size: 11px; line-height: 1.45; }
#article-source-list { display: grid; gap: 6px; }
#article-source-list button { display: grid; gap: 4px; width: 100%; padding: 11px 12px; border: 1px solid rgba(255,255,255,.04); border-radius: 11px; color: var(--ink); background: var(--card); text-align: left; }
#article-source-list button:disabled { opacity: .58; }
#article-source-list strong { font: 700 12px/1.3 Georgia, serif; }
#article-source-list small { color: var(--blue); font-size: 9px; font-weight: 750; }
.article-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 24px; padding: 15px 3px 0; border-top: 1px solid rgba(255,255,255,.04); color: var(--muted); font-size: 10px; }
.article-footer button { padding: 0; border: 0; color: #a77b82; background: transparent; font-size: 10px; }

.app-nav {
  position: fixed;
  z-index: 40;
  right: 0;
  bottom: var(--native-player-clearance);
  left: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(720px, calc(100% - 24px));
  margin: 0 auto max(8px, env(safe-area-inset-bottom));
  padding: 7px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 22px;
  background: #1a1814;
  box-shadow: 0 12px 30px rgba(0,0,0,.35), inset 0 1px rgba(255,255,255,.045);
}
.app-nav.three-sections { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.app-nav.two-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.app-nav button { display: grid; place-items: center; gap: 3px; min-height: 51px; padding: 6px 4px; border: 0; border-radius: 16px; color: #77736c; background: transparent; }
.app-nav button > span { height: 21px; font-size: 20px; line-height: 20px; }
.app-nav button small { font-size: 9px; font-weight: 800; letter-spacing: .02em; }
.app-nav button.active { color: var(--gold); background: rgba(229,190,73,.075); }

@media (max-width: 820px) {
  body:not(.app-ready) .shell { padding-top: max(8px, env(safe-area-inset-top)); }
  body:not(.app-ready) .desktop-login { margin-top: 0; }
  .desktop-landing-masthead { padding-bottom: 22px; }
  .desktop-landing-grid { grid-template-columns: 1fr; gap: 24px; }
  .desktop-landing-story { padding-top: 12px; }
  .desktop-landing-story h1 { font-size: clamp(40px, 11vw, 56px); }
  .desktop-signin-card { width: 100%; }
}

@media (max-width: 420px) {
  .shell { padding-right: 16px; padding-left: 16px; }
  .app-header { margin-bottom: 13px; }
  .app-screen-title { font-size: 11px; }
  .hero { padding: 22px; border-radius: 24px; }
  .hero h1 { font-size: 31px; }
  .hero-copy { font-size: 14px; }
  .mode-selector button { font-size: 10px; letter-spacing: -.015em; }
  .filter-grid { grid-template-columns: 1fr; }
  .dossier-grid { grid-template-columns: 1fr; }
  .view-selector button { font-size: 9px; }
  .citation-studio-controls { grid-template-columns: 1fr; }
  .citation-studio-controls label { grid-column: auto; }
  .board-intro { align-items: stretch; flex-direction: column; }
  .project-reorder-controls { align-items: flex-start; flex-direction: column; }
  .project-reorder-actions { width: 100%; }
  .project-reorder-actions button { flex: 1; }
  .desktop-landing-masthead { padding-right: 1px; padding-left: 1px; }
  .desktop-wordmark { font-size: 14px; }
  .desktop-wordmark > span { width: 29px; height: 29px; border-radius: 10px; }
  .desktop-download-nav { padding: 8px 10px; font-size: 10px; }
  .desktop-landing-story { padding-right: 1px; padding-left: 1px; }
  .desktop-landing-story h1 { font-size: 40px; }
  .desktop-landing-copy { margin-top: 17px; font-size: 15px; }
  .desktop-source-preview { padding: 19px; }
  .desktop-source-preview blockquote { font-size: 18px; }
  .desktop-feature-grid { grid-template-columns: 1fr; }
  .desktop-feature-grid article { display: grid; grid-template-columns: 24px 1fr; column-gap: 8px; padding: 13px 14px; }
  .desktop-feature-grid article > span { grid-row: 1 / 3; }
  .desktop-feature-grid strong { margin-top: 0; }
  .desktop-signin-card { padding: 25px 21px; border-radius: 22px; }
  .desktop-signin-mark { margin-bottom: 24px; }
  .desktop-landing-footer { align-items: flex-start; flex-direction: column; gap: 8px; line-height: 1.45; }
}

@media (min-width: 900px) {
  body.desktop-session .shell { width: min(1060px, calc(100% - 48px)); padding-right: 24px; padding-left: 24px; }
  body.desktop-session .app-nav { width: min(780px, calc(100% - 48px)); }
  body.desktop-session .hero { padding: 34px; }
  body.desktop-session .hero h1 { font-size: 48px; }
  body.desktop-session .search-header h1 { max-width: 850px; }
}

@media (prefers-color-scheme: light) {
  :root { color-scheme: light; --bg: #f5f0e7; --card: #fffaf1; --card-strong: #fff5dc; --ink: #252016; --muted: #756f66; }
  .hero { background: radial-gradient(circle at 86% 10%, rgba(229,190,73,.22), transparent 34%), linear-gradient(135deg, #fff9e9, #eee6d5); box-shadow: 0 14px 34px rgba(72,55,18,.1); }
  .hero-copy { color: #6f685d; }
  .result-card p { color: #514b42; }
  .translation-select { border-color: rgba(38,31,20,.12); }
  .projects-body input, .projects-body textarea, .desktop-access-body input, .password-box input { border-color: rgba(38,31,20,.1); background: rgba(255,255,255,.5); }
  .desktop-source-rail span { border-color: rgba(38,31,20,.08); color: #6d665b; background: rgba(255,255,255,.35); }
  .desktop-source-preview { background: radial-gradient(circle at 96% 8%, rgba(229,190,73,.16), transparent 32%), linear-gradient(145deg, #fffaf1, #f3ebdc); box-shadow: 0 18px 46px rgba(72,55,18,.09); }
  .desktop-source-preview blockquote { color: #443d33; }
  .desktop-feature-grid article { border-color: rgba(38,31,20,.07); background: rgba(255,255,255,.34); }
  .desktop-signin-card { background: radial-gradient(circle at 95% 5%, rgba(229,190,73,.17), transparent 34%), var(--card); box-shadow: 0 24px 65px rgba(72,55,18,.11); }
  .desktop-landing-footer, .desktop-new-user { border-color: rgba(38,31,20,.08); }
  .project-list-row { border-color: rgba(38,31,20,.08); background: rgba(255,255,255,.38); }
  .project-view-tabs { border-color: rgba(38,31,20,.08); background: rgba(255,255,255,.35); }
  .project-view-tabs button span { background: rgba(38,31,20,.045); }
  .source-annotation-editor textarea { border-color: rgba(38,31,20,.1); background: rgba(255,255,255,.5); }
  .project-annotation-card { border-color: rgba(38,31,20,.075); background: rgba(255,255,255,.3); }
  .compare-source p { color: #514b42; }
  .result-card .source-context-segment p { color: #514b42; }
  .article-section p { color: #514b42; }
  .article-loading-rule { background: rgba(38,31,20,.07); }
  .app-nav { border-color: rgba(48,37,14,.08); background: #fffaf1; box-shadow: 0 12px 30px rgba(72,55,18,.12); }
}