/* Shared app identity. Loaded last on every page, including private workspaces. */
:root {
  --laowai-paper: #f3f0e8;
  --laowai-surface: #faf8f1;
  --laowai-forest: #244c3b;
  --laowai-ink: #24332c;
  --laowai-muted: #5e6258;
  --laowai-line: #c9c4b6;
  --laowai-sage: #dce6b8;
  --laowai-honey: #f4d99f;
  --laowai-blue: #c7dde9;
  --laowai-pink: #ebcdd1;
  --laowai-danger: #94452f;
  --laowai-card-radius: 24px;
  --laowai-control-radius: 12px;
  --paper: var(--laowai-paper);
  --card: var(--laowai-surface);
  --ink: var(--laowai-ink);
  --accent: var(--laowai-forest);
  --rust: var(--laowai-danger);
  --muted: var(--laowai-muted);
  --line: var(--laowai-line);
  --mint: #e8edda;
  --highlight: var(--laowai-sage);
  --green: var(--laowai-forest);
  --serif: Georgia, "Songti SC", serif;
  --display: var(--serif);
  --font-body: var(--sans, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
body { background: var(--laowai-paper); color: var(--laowai-ink); }
:where(button, input, select, textarea) { accent-color: var(--laowai-forest); }
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--laowai-forest);
  outline-offset: 3px;
}
.brand, .account-top .account-brand { letter-spacing: -.035em; }
.paper-link, .reading-controls button, .library-toolbar :is(input, select),
.dictionary-button, .dictionary-listen, .dictionary-submit,
.dictionary-toolbar :is(input, select), .dictionary-character-tab,
.dictionary-measure-word, .reader-editor :is(input, textarea),
.reader-chapters select, .reader-lookup select {
  border-radius: var(--laowai-control-radius);
}
.paper-link.dark, .dictionary-submit, .dictionary-save {
  background: var(--laowai-forest);
  border-color: var(--laowai-forest);
  color: #fff;
}
.paper-link.dark:hover, .dictionary-submit:hover, .dictionary-save:hover { background: #193c2c; }
.dictionary-button, .dictionary-listen, .paper-link { min-height: 44px; }
.home-dictionary input { border-radius: 12px 0 0 12px; background: var(--laowai-surface); }
.home-dictionary button { border-radius: 0 12px 12px 0; background: var(--laowai-forest); }
.dictionary-toolbar :is(input, select), .library-toolbar :is(input, select) { background: var(--laowai-surface); }
.dictionary-entry-actions { align-items: center; gap: 10px; }
.dictionary-entry-nav a { border-radius: 8px; }
.dictionary-example, .word-example, .grammar-vocabulary, .grammar-due,
.grammar-sync-note, .grammar-hint, .reader-card, .reader-empty,
.reader-curated, .reader-lookup, .sentence-lab, .quiz, .lesson-opening, .pattern-section {
  border-radius: 20px;
  background: var(--laowai-surface);
}
.dictionary-example, .word-example { border-color: var(--laowai-line); }
.dictionary-measure-word { background: var(--laowai-surface); }
.grammar-due, .reader-curated { background: #e8edda; }
.grammar-sync-note, .grammar-hint { background: #f4e8cd; }
.grammar-lesson > .grammar-pattern, .grammar-full-article :is(.jiegou, .liju) { border-radius: 12px; }
.reader-lookup { box-shadow: 0 12px 40px #24332c1a; }
.reader-card { border-top: 7px solid #a7c1d0; }
.reader-card:nth-child(3n + 2) { border-top-color: #9eaf86; }
.reader-card:nth-child(3n) { border-top-color: #d4b5bd; }
.reader-card h3, .grammar-card h3 { font: 600 21px/1.3 var(--font-body); letter-spacing: -.02em; }
.study-recent h3 { font: 600 13px/1.5 var(--font-body); }
.study-progress-panel > h2, .study-practice-heading h2 { font-family: var(--font-body); }
.index-art, .lesson-seal {
  border: 1px solid var(--laowai-line);
  border-radius: var(--laowai-card-radius);
  background: #e8edda;
}
.lesson-seal { background: #f2e5c8; }
.lesson-card, .reading-card, .path-card {
  --card-accent: var(--laowai-sage);
  padding: 24px;
  border: 1px solid var(--laowai-line);
  border-radius: 20px;
  background: linear-gradient(var(--card-accent), var(--card-accent)) top / 100% 8px no-repeat, var(--laowai-surface);
}
.lesson-card:nth-child(3n + 2), .reading-card:nth-child(3n + 2), .path-card:nth-child(3n + 2) { --card-accent: var(--laowai-blue); }
.lesson-card:nth-child(3n), .reading-card:nth-child(3n), .path-card:nth-child(3n) { --card-accent: var(--laowai-honey); }
.lesson-card :is(h2, h3), .reading-card :is(h2, h3), .path-card h2 { font: 650 25px/1.25 var(--font-body); letter-spacing: -.025em; }
.path-card::before { top: 26px; right: 24px; }
.lesson-card-top .hanzi {
  display: inline-grid;
  place-items: center;
  min-width: 64px;
  min-height: 80px;
  padding: 5px 10px;
  border-radius: 12px;
  background: var(--card-accent);
  transform: rotate(-7deg);
  font-size: 36px;
}
.journey { border-radius: var(--laowai-card-radius); overflow: hidden; box-shadow: 0 6px 20px #244c3b10; background: linear-gradient(135deg, #234f46, #38695c); }
.journey-answers label, .lab-choices button, .lab-answers label, .quiz label { border-radius: 12px; }
.home .journey-header h2 { font-family: var(--font-body); font-weight: 650; }
.library-feature { border-radius: var(--laowai-card-radius); background: linear-gradient(135deg, #234f46, #38695c); }
.app-bridge { border: 1px solid var(--laowai-line); border-radius: var(--laowai-card-radius); padding: 28px; background: #e7edf0; }
.opening-invitation { border: 1px solid var(--laowai-line); border-radius: 20px; background: #e8edda; padding: 20px; }
.invitation-mark { width: 64px; height: 80px; border: 0; border-radius: 12px; background: var(--laowai-surface); transform: rotate(-7deg); font-size: 48px; }
.sentence-lab { background: #e8edda; }
.quiz { background: var(--laowai-forest); }
.pitfall .wrong > span:first-child { color: var(--laowai-danger); }
.pitfall s { text-decoration-color: var(--laowai-danger); }
.account-page { --account-green: var(--laowai-forest); --account-paper: var(--laowai-surface); --account-muted: var(--laowai-muted); --account-line: var(--laowai-line); }
.account-form-card { border-radius: var(--laowai-card-radius); box-shadow: 0 6px 20px #244c3b08; }
.account-form-card input, .account-primary, .account-secondary, .account-danger { border-radius: var(--laowai-control-radius); }
.account-form-card h1, .account-intro h2, .account-methods h2 { font-family: var(--serif); }
.account-study-card { grid-template-columns: 80px 1fr; gap: 20px; padding: 24px; border: 1px solid #cad3b8; border-radius: 20px; background: #e8edda; }
.account-study-card > [lang] { display: grid; place-items: center; width: 64px; height: 80px; background: var(--laowai-surface); border-radius: 12px; transform: rotate(-7deg); font-size: 52px; }
.account-provider > span:first-child { width: 24px; height: 24px; }
.account-google-mark :is(svg, img) { width: 20px; height: 20px; }
@media (max-width: 650px) {
  .account-form-card { padding: 24px 20px; }
  .index-art, .lesson-seal { min-height: 200px; }
}
@media (max-width: 440px) {
  :root { --laowai-card-radius: 20px; }
  .lesson-card, .reading-card, .path-card { padding: 22px; }
  .opening-invitation { padding: 18px; gap: 16px; }
}