/* ============================================================
   The Handbook · DeMolay — diseño DeMolay International
   Rediseño sobre el Design System oficial (Oxford Blue /
   Crown Gold / Ruby Red · Bebas Neue + Lato + Crimson Pro).
   Mantiene TODOS los selectores que usa js/app.js.
   Estático, sin dependencias. Mobile-first.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Crimson+Pro:ital,wght@0,400;0,600;1,400&family=Lato:ital,wght@0,400;0,700;0,900;1,400&display=swap');

:root {
  /* Tokens de marca DeMolay International */
  --oxford-blue:    #1E4488;
  --oxford-shade:   #1B365F;
  --crown-gold:     #FFCF00;
  --crown-shade:    #EAAB00;
  --gold-dark:      #9A7100;   /* texto dorado accesible sobre claro */
  --sapphire:       #0076AF;
  --sapphire-shade: #005695;
  --ruby:           #AC242A;
  --emerald:        #3A9144;
  --emerald-shade:  #00694B;

  /* Mapeo a los nombres históricos del sitio */
  --navy:    var(--oxford-blue);
  --navy-2:  var(--oxford-shade);
  --navy-3:  var(--sapphire-shade);
  --gold:    var(--crown-gold);
  --gold-soft: #FFE066;

  --bg:   #F7F7F4;             /* warm off-white de marca */
  --card: #FFFFFF;
  --ink:  #191919;
  --muted: #555E6B;
  --line: #D8DCE3;
  --ok: var(--emerald);
  --ok-bg: #E9F3EA;
  --bad: var(--ruby);
  --bad-bg: #F7E9EA;
  --warn-bg: #FFF1E8;
  --warn-line: #FF6727;
  --info-bg: #E8F1F7;
  --info-line: var(--sapphire);
  --key-bg: #FFF9E0;
  --key-line: var(--crown-gold);

  /* Marca: radios chicos, sombras azuladas sutiles */
  --radius: 8px;
  --radius-sm: 4px;
  --shadow: 0 1px 2px rgba(27, 54, 95, .08);
  --shadow-lg: 0 6px 18px rgba(27, 54, 95, .12);

  --font-display: 'Bebas Neue', 'Mongoose', Impact, sans-serif;
  --font-sans: 'Lato', 'Soleil', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-serif: 'Crimson Pro', Georgia, serif;
  --ease: cubic-bezier(.2, .8, .2, 1);

  --header-h: 60px;
  --bottomnav-h: 62px;
  --maxw: 980px;
  --readw: 720px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #11192B;
    --card: #1A2440;
    --ink: #EAEDF4;
    --muted: #9AA6BF;
    --line: #2C3A5C;
    --ok-bg: #16301D;
    --bad-bg: #391B1E;
    --warn-bg: #33240F;
    --info-bg: #16243F;
    --key-bg: #2E2708;
    --gold-dark: #FFCF00;
    --shadow: 0 1px 3px rgba(0, 0, 0, .35);
    --shadow-lg: 0 6px 18px rgba(0, 0, 0, .4);
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16.5px;
  line-height: 1.6;
  padding-bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px));
}

img, svg { max-width: 100%; }
a { color: var(--sapphire); }
@media (prefers-color-scheme: dark) { a { color: var(--gold-soft); } }

.boot { padding: 40vh 20px 0; text-align: center; color: var(--muted); }

/* Iconos SVG inline generados por app.js */
.svgi { flex: 0 0 auto; display: inline-block; vertical-align: -3px; }

/* ---------- Header ---------- */
.hdr {
  position: sticky; top: 0; z-index: 50;
  background: var(--oxford-blue);
  color: #fff;
  height: var(--header-h);
  display: flex; align-items: center; gap: 12px;
  padding: 0 16px;
  border-bottom: 3px solid var(--crown-gold);
}
.hdr .brand {
  display: flex; align-items: center; gap: 10px;
  color: #fff; text-decoration: none; min-width: 0;
}
.hdr .brand .logo { height: 30px; width: auto; flex: 0 0 auto; }
.hdr .brand span {
  font-family: var(--font-display); font-weight: 400;
  font-size: 22px; letter-spacing: .04em; line-height: 1;
  white-space: nowrap;
}
.hdr .brand small {
  display: block; font-family: var(--font-sans); font-weight: 700;
  font-size: 9.5px; color: var(--crown-gold);
  letter-spacing: .2em; text-transform: uppercase; margin-top: 2px;
}
.hdr .spacer { flex: 1; }
.hdr nav.top { display: none; gap: 2px; align-self: stretch; align-items: stretch; }
.hdr nav.top a {
  color: rgba(255,255,255,.78); text-decoration: none;
  font-size: 15px; font-weight: 700;
  padding: 0 14px; display: flex; align-items: center;
  border-bottom: 3px solid transparent; margin-bottom: -3px;
  transition: color .14s var(--ease);
}
.hdr nav.top a.on { color: #fff; border-bottom-color: var(--crown-gold); }
.hdr nav.top a:hover { color: #fff; }
.lang-btn {
  border: 1.5px solid rgba(255, 255, 255, .4);
  background: transparent; color: #fff;
  font: inherit; font-size: 12.5px; font-weight: 900;
  border-radius: 999px; padding: 5px 13px; cursor: pointer;
  letter-spacing: .08em; white-space: nowrap;
  transition: border-color .14s var(--ease), color .14s var(--ease);
}
.lang-btn:hover { border-color: var(--crown-gold); color: var(--crown-gold); }

/* ---------- Bottom nav (mobile) ---------- */
.bnav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  background: var(--card);
  border-top: 1px solid var(--line);
  display: flex;
  height: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.bnav a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; text-decoration: none; color: var(--muted);
  font-size: 10.5px; font-weight: 700;
  border-top: 2px solid transparent; margin-top: -1px;
}
.bnav a .ico { line-height: 1; display: flex; }
.bnav a.on { color: var(--oxford-blue); border-top-color: var(--crown-gold); }
@media (prefers-color-scheme: dark) { .bnav a.on { color: var(--gold-soft); } }

/* ---------- Layout ---------- */
main { max-width: var(--maxw); margin: 0 auto; padding: 20px 16px 40px; }
.read { max-width: var(--readw); margin: 0 auto; }

@media (min-width: 900px) {
  body { padding-bottom: 0; }
  .bnav { display: none; }
  .hdr nav.top { display: flex; }
  main { padding: 32px 24px 64px; }
}

/* ---------- Generic components ---------- */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 16px;
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--oxford-blue); color: #fff; border: none; cursor: pointer;
  font: inherit; font-weight: 900; font-size: 15px; letter-spacing: .02em;
  padding: 12px 22px; border-radius: 999px; min-height: 44px;
  text-decoration: none;
  transition: transform .06s var(--ease), filter .14s var(--ease);
}
.btn:hover { filter: brightness(1.14); }
.btn:active { transform: scale(.98); }
.btn.gold { background: var(--crown-gold); color: var(--oxford-shade); }
.btn.gold:hover { filter: brightness(.93); }
.btn.ghost { background: transparent; color: var(--oxford-blue); border: 1.5px solid var(--line); }
.btn.ghost:hover { filter: none; border-color: var(--oxford-blue); }
@media (prefers-color-scheme: dark) { .btn.ghost { color: var(--ink); } }
.btn.sm { padding: 8px 15px; font-size: 13.5px; min-height: 38px; }
.btn[disabled] { opacity: .5; pointer-events: none; }

.pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
  border-radius: 999px; padding: 3px 10px; white-space: nowrap;
  background: var(--info-bg); color: var(--sapphire-shade);
}
@media (prefers-color-scheme: dark) { .pill { color: #BCD0F7; } }
.pill.ok { background: var(--ok-bg); color: var(--emerald-shade); }
.pill.gold { background: var(--key-bg); color: var(--gold-dark); }

.muted { color: var(--muted); }
.center { text-align: center; }

/* Títulos de página: display condensado de marca */
h1.page {
  font-family: var(--font-display); font-weight: 400;
  font-size: 38px; line-height: 1.02; letter-spacing: .02em;
  text-transform: uppercase; color: var(--oxford-blue);
  margin: 6px 0 6px;
}
@media (prefers-color-scheme: dark) { h1.page { color: #fff; } }
@media (min-width: 900px) { h1.page { font-size: 48px; } }
.page-sub { color: var(--muted); margin: 0 0 18px; font-size: 15.5px; }

.backlink {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 700;
  margin-bottom: 8px; min-height: 36px;
}
.backlink:hover { color: var(--oxford-blue); }

/* ---------- Hero (home) ---------- */
.hero {
  background: linear-gradient(168deg, var(--oxford-blue) 0%, var(--oxford-shade) 100%);
  color: #fff; border-radius: var(--radius);
  padding: 30px 22px;
  position: relative; overflow: hidden;
}
.hero::before {
  content: "★ ★ ★ ★ ★ ★ ★";
  display: block;
  color: var(--crown-gold); font-size: 13px; letter-spacing: 9px;
  margin-bottom: 12px;
}
.hero h1 {
  margin: 0 0 8px;
  font-family: var(--font-display); font-weight: 400;
  font-size: 42px; line-height: .98; letter-spacing: .02em;
  text-transform: uppercase;
}
.hero p { margin: 0 0 18px; color: rgba(255,255,255,.85); font-size: 15.5px; max-width: 52ch; }
.hero .pbar { background: rgba(255, 255, 255, .18); }
.hero .pbar > i { background: var(--crown-gold); }
.hero .stat { font-size: 13px; color: var(--gold-soft); font-weight: 700; margin-top: 8px; display: block; }
@media (min-width: 900px) {
  .hero { padding: 48px 48px 42px; }
  .hero h1 { font-size: 64px; max-width: 16ch; }
}

.pbar { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.pbar > i { display: block; height: 100%; border-radius: 999px; background: var(--crown-gold); transition: width .4s var(--ease); }

/* ---------- Module cards ---------- */
.cat-title {
  font-size: 13px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase;
  color: var(--oxford-blue); margin: 30px 2px 10px;
  padding-bottom: 6px; border-bottom: 2px solid var(--crown-gold);
}
@media (prefers-color-scheme: dark) { .cat-title { color: var(--gold-soft); } }
.mod-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 640px) { .mod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.mod-card {
  display: flex; align-items: center; gap: 13px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 15px; text-decoration: none; color: var(--ink);
  transition: border-color .14s var(--ease), box-shadow .14s var(--ease);
}
.mod-card:hover { box-shadow: var(--shadow-lg); border-color: var(--oxford-blue); }
.mod-card .ico {
  flex: 0 0 46px; height: 46px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  background: var(--info-bg); color: var(--oxford-blue);
}
@media (prefers-color-scheme: dark) { .mod-card .ico { color: var(--gold-soft); } }
.mod-card.done .ico { background: var(--ok-bg); color: var(--emerald-shade); }
.mod-card .tx { min-width: 0; flex: 1; }
.mod-card .tx b { display: block; font-size: 15.5px; line-height: 1.3; }
.mod-card .tx span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mod-card .chk { flex: 0 0 auto; font-size: 18px; color: var(--ok); }
.mod-card .chk.todo { color: var(--line); }

/* ---------- Module page ---------- */
.mod-head { margin-bottom: 4px; }
.mod-head .meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.toc {
  display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 2px 14px;
}
.toc a {
  flex: 0 1 auto; max-width: 100%; cursor: pointer;
  font-size: 13px; font-weight: 700; text-decoration: none;
  color: var(--oxford-blue); background: var(--card);
  border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px;
}
.toc a:hover { border-color: var(--crown-gold); }
@media (prefers-color-scheme: dark) { .toc a { color: var(--ink); } }

.lesson { margin: 8px 0 26px; scroll-margin-top: calc(var(--header-h) + 12px); }
.lesson h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: 27px; line-height: 1.08; letter-spacing: .02em; text-transform: uppercase;
  color: var(--oxford-blue);
  margin: 28px 0 10px; padding-top: 14px;
  display: flex; align-items: baseline; gap: 11px;
}
@media (prefers-color-scheme: dark) { .lesson h2 { color: #fff; } }
.lesson h2 .n {
  flex: 0 0 auto; font-family: var(--font-sans); font-size: 12px; font-weight: 900;
  color: var(--oxford-shade); background: var(--crown-gold);
  border-radius: 999px; padding: 2px 10px;
  position: relative; top: -3px;
}
.lesson h3 { font-size: 17px; margin: 18px 0 6px; color: var(--oxford-blue); }
@media (prefers-color-scheme: dark) { .lesson h3 { color: var(--gold-soft); } }
.lesson p { margin: 10px 0; }
.lesson ul, .lesson ol { margin: 10px 0; padding-left: 24px; }
.lesson li { margin: 5px 0; }

ol.steps { counter-reset: st; list-style: none; padding-left: 0; }
ol.steps > li {
  counter-increment: st; position: relative;
  padding: 10px 12px 10px 46px; margin: 8px 0;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
ol.steps > li::before {
  content: counter(st);
  position: absolute; left: 11px; top: 11px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--oxford-blue); color: var(--crown-gold);
  font-size: 12.5px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
}

.callout {
  display: flex; gap: 11px; align-items: flex-start;
  border-radius: var(--radius-sm); padding: 13px 15px; margin: 14px 0;
  font-size: 15.5px;
  background: var(--card); border: 1px solid var(--line);
  border-left-width: 3px;
}
.callout .ci { line-height: 1; display: flex; margin-top: 3px; }
.callout.key  { border-left-color: var(--crown-gold); background: var(--key-bg); }
.callout.key .ci { color: var(--gold-dark); }
.callout.warn { border-left-color: var(--warn-line); background: var(--warn-bg); }
.callout.warn .ci { color: var(--warn-line); }
.callout.info { border-left-color: var(--info-line); background: var(--info-bg); }
.callout.info .ci { color: var(--info-line); }

.tbl-wrap { overflow-x: auto; margin: 14px 0; border-radius: var(--radius-sm); border: 1px solid var(--line); }
table.tbl { border-collapse: collapse; width: 100%; font-size: 14.5px; background: var(--card); }
table.tbl th {
  text-align: left; background: var(--oxford-blue); color: #fff;
  padding: 9px 12px; font-size: 12px; font-weight: 900;
  letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
table.tbl td { padding: 9px 12px; border-top: 1px solid var(--line); vertical-align: top; }

.concept-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 14px 0; }
@media (min-width: 560px) { .concept-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.concept {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 13px 15px;
  box-shadow: inset 0 2px 0 var(--crown-gold);
}
.concept b { display: block; margin-bottom: 3px; font-size: 15px; color: var(--oxford-blue); }
@media (prefers-color-scheme: dark) { .concept b { color: var(--gold-soft); } }
.concept span { font-size: 14px; color: var(--muted); }

.refnote {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-serif); font-style: italic;
  font-size: 14.5px; color: var(--muted);
  margin: 8px 0;
}
.refnote .svgi { color: var(--ruby); }

/* ---------- Quiz ---------- */
.quiz { margin-top: 30px; }
.quiz h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: 27px; letter-spacing: .02em; text-transform: uppercase;
  color: var(--oxford-blue);
}
@media (prefers-color-scheme: dark) { .quiz h2 { color: #fff; } }
.quiz .qcard { padding: 20px; }
.quiz .qnum { font-size: 11.5px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--ruby); }
.quiz .qtext { font-size: 18px; font-weight: 700; line-height: 1.4; margin: 8px 0 16px; color: var(--oxford-blue); }
@media (prefers-color-scheme: dark) { .quiz .qtext { color: var(--ink); } }
.quiz .opt {
  display: block; width: 100%; text-align: left; cursor: pointer;
  font: inherit; font-size: 15px;
  background: var(--bg); color: var(--ink);
  border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  padding: 13px 15px; margin: 8px 0; min-height: 48px;
  transition: border-color .12s var(--ease), background .12s var(--ease);
}
.quiz .opt:hover { border-color: var(--oxford-blue); background: var(--card); }
.quiz .opt.sel-ok { background: var(--ok-bg); border-color: var(--ok); font-weight: 700; }
.quiz .opt.sel-bad { background: var(--bad-bg); border-color: var(--bad); }
.quiz .opt.reveal { border-color: var(--ok); }
.quiz .opt[disabled] { cursor: default; }
.quiz .explain {
  margin: 12px 0 4px; padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--info-bg); border-left: 3px solid var(--info-line); font-size: 14.5px;
}
.quiz .score-big {
  font-family: var(--font-display); font-weight: 400;
  font-size: 64px; line-height: 1; color: var(--oxford-blue); margin: 6px 0;
}
@media (prefers-color-scheme: dark) { .quiz .score-big { color: var(--gold-soft); } }
.qbar { display: flex; gap: 4px; margin-bottom: 14px; }
.qbar i { flex: 1; height: 4px; border-radius: 99px; background: var(--line); }
.qbar i.done-ok { background: var(--ok); }
.qbar i.done-bad { background: var(--bad); }
.qbar i.cur { background: var(--crown-gold); }

/* ---------- Reference ---------- */
.ref-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 700px) { .ref-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ref-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  text-decoration: none; color: var(--ink);
  padding: 18px 14px; text-align: center;
  transition: border-color .14s var(--ease), box-shadow .14s var(--ease);
}
.ref-card:hover { border-color: var(--oxford-blue); box-shadow: var(--shadow-lg); }
.ref-card .ico { display: flex; justify-content: center; margin-bottom: 9px; color: var(--oxford-blue); }
@media (prefers-color-scheme: dark) { .ref-card .ico { color: var(--gold-soft); } }
.ref-card b { display: block; font-size: 14.5px; }
.ref-card span { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; }

.searchbox {
  display: flex; align-items: center; gap: 10px;
  background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: 11px 16px; margin: 6px 0 16px;
  color: var(--muted);
}
.searchbox:focus-within { border-color: var(--oxford-blue); }
.searchbox input {
  flex: 1; border: none; outline: none; background: transparent;
  font: inherit; font-size: 16px; color: var(--ink); min-width: 0;
}

.chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 4px 0 16px; }
.chip {
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  background: var(--card); color: var(--muted);
  border: 1.5px solid var(--line); border-radius: 999px; padding: 6px 13px;
}
.chip.on { background: var(--oxford-blue); border-color: var(--oxford-blue); color: #fff; }

.glo-letter {
  font-family: var(--font-display); font-weight: 400;
  font-size: 24px; letter-spacing: .04em;
  color: var(--gold-dark); margin: 22px 4px 6px;
}
.glo-item { padding: 11px 14px; }
.glo-item + .glo-item { margin-top: 8px; }
.glo-item b { font-size: 15.5px; color: var(--oxford-blue); }
@media (prefers-color-scheme: dark) { .glo-item b { color: var(--gold-soft); } }
.glo-item .cat { float: right; }
.glo-item p { margin: 5px 0 0; font-size: 14.5px; color: var(--muted); }

.aw-item { padding: 14px 15px; margin-bottom: 10px; }
.aw-item .top { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.aw-item b { font-size: 16px; }
.aw-item .row { font-size: 14px; margin-top: 6px; }
.aw-item .row b { font-size: 13px; color: var(--muted); font-weight: 700; }

details.acc {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
  margin: 8px 0; overflow: hidden;
}
details.acc summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px;
  padding: 13px 15px; font-weight: 700; font-size: 15px; min-height: 48px;
}
details.acc summary::-webkit-details-marker { display: none; }
details.acc summary::after { content: "›"; margin-left: auto; font-size: 20px; color: var(--muted); transform: rotate(90deg); transition: transform .15s var(--ease); }
details.acc[open] summary::after { transform: rotate(-90deg); }
details.acc[open] summary { color: var(--oxford-blue); }
@media (prefers-color-scheme: dark) { details.acc[open] summary { color: var(--gold-soft); } }
details.acc .body { padding: 0 15px 14px; font-size: 14.5px; }
details.acc .body ul { margin: 6px 0; padding-left: 20px; }

.kv { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.kv td { padding: 9px 10px; border-top: 1px solid var(--line); vertical-align: top; }
.kv td:first-child { font-weight: 700; width: 42%; color: var(--oxford-blue); }
@media (prefers-color-scheme: dark) { .kv td:first-child { color: var(--ink); } }
.kv tr:first-child td { border-top: none; }

.chk-item {
  display: flex; gap: 11px; align-items: flex-start;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px 13px; margin: 7px 0; cursor: pointer;
}
.chk-item input { width: 19px; height: 19px; margin: 2px 0 0; accent-color: var(--oxford-blue); flex: 0 0 auto; }
.chk-item.done { opacity: .62; }
.chk-item.done .tx { text-decoration: line-through; }

/* ---------- Flashcards ---------- */
.deck-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 640px) { .deck-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.flash-stage { perspective: 1200px; margin: 16px 0; }
.flash {
  position: relative; width: 100%; min-height: 260px;
  transform-style: preserve-3d; transition: transform .45s cubic-bezier(.16, 1, .3, 1);
  cursor: pointer;
}
.flash.flipped { transform: rotateY(180deg); }
.flash .face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  border-radius: var(--radius); padding: 28px 24px; text-align: center;
  box-shadow: var(--shadow-lg);
}
.flash .front { background: var(--oxford-blue); color: #fff; border-bottom: 4px solid var(--crown-gold); }
.flash .front .hint { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--crown-gold); font-weight: 700; }
.flash .front .tx {
  font-family: var(--font-display); font-weight: 400;
  font-size: 30px; line-height: 1.1; letter-spacing: .03em; text-transform: uppercase;
}
.flash .back { background: var(--card); border: 1px solid var(--line); border-bottom: 4px solid var(--crown-gold); transform: rotateY(180deg); }
.flash .back .tx { font-size: 16.5px; line-height: 1.5; }
.flash-ctl { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }

/* ---------- Search results ---------- */
.sr-type { font-size: 12px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--ruby); margin: 18px 4px 6px; }
.sr-item { display: block; text-decoration: none; color: var(--ink); padding: 12px 14px; margin: 7px 0; }
.sr-item b { font-size: 15px; color: var(--oxford-blue); }
@media (prefers-color-scheme: dark) { .sr-item b { color: var(--gold-soft); } }
.sr-item p { margin: 4px 0 0; font-size: 13.5px; color: var(--muted); }
.sr-item:hover { border-color: var(--oxford-blue); }

/* ---------- Footer ---------- */
footer.site {
  max-width: var(--maxw); margin: 30px auto 0; padding: 18px 18px 26px;
  font-size: 12px; color: var(--muted); text-align: center; line-height: 1.6;
  border-top: 1px solid var(--line);
}

/* ---------- Misc ---------- */
.fade-in { animation: fade .25s var(--ease); }
@keyframes fade { from { transform: translateY(6px); } to { transform: none; } }
.empty { text-align: center; color: var(--muted); padding: 40px 16px; }
.empty .big { display: flex; justify-content: center; margin-bottom: 10px; color: var(--line); }
.empty .big .svgi { width: 40px; height: 40px; }
.divider { height: 1px; background: var(--line); margin: 24px 0; border: none; }
.done-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 26px 0 6px; }

::selection { background: var(--crown-gold); color: var(--oxford-shade); }