/* ============================================================
   Raokhanthi — components
   Tactile, studio-crafted gamified components:
   1.5px borders with 3px tactile bottom lip, Mission Deck,
   Word Spotlight, Interactive Skill Tree, Character Inspector,
   and Multiple-Choice Quiz Arena.
   ============================================================ */

/* ---------- icons ---------- */
.icon {
  width: 1.12em; height: 1.12em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -0.15em;
}
.icon-lg { width: 1.4em; height: 1.4em; }
.icon-xl { width: 1.8em; height: 1.8em; }

/* ---------- tactile studio buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border: 1.5px solid var(--outline);
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  background: var(--surface); color: var(--ink);
  box-shadow: 0 3px 0 var(--outline);
  text-decoration: none;
  transition: transform 120ms var(--ease), box-shadow 120ms var(--ease),
              background-color 120ms var(--ease), border-color 120ms var(--ease);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn.primary {
  background: var(--brand); color: #ffffff; border-color: var(--brand-ink);
  box-shadow: 0 3px 0 var(--brand-ink);
}
html[data-theme="dark"] .btn.primary { color: #0c0f16; font-weight: 700; }
.btn.primary:hover {
  background: var(--brand-ink); border-color: var(--brand-ink);
}
.btn.primary:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--brand-ink);
}
.btn.ghost {
  background: var(--surface); border-color: var(--outline); color: var(--ink);
  box-shadow: 0 3px 0 var(--outline);
}
.btn.ghost:hover {
  border-color: var(--outline-hover);
  box-shadow: 0 3px 0 var(--outline-hover);
  background: var(--surface-2);
}
.btn.ghost:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--outline); }
.btn.subtle {
  background: var(--surface-2); border-color: transparent; color: var(--ink-soft);
  box-shadow: none;
}
.btn.subtle:hover { background: var(--surface-3); color: var(--ink); }
.btn.small {
  min-height: 36px; padding: 6px 13px; font-size: var(--fs-xs);
  border-radius: var(--radius-sm);
}
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.btn-xp {
  font-family: var(--font-mono);
  font-size: 0.7rem; font-weight: 700;
  padding: 2px 6px; border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.2);
}
.btn.ghost .btn-xp {
  background: var(--xp-soft); color: var(--xp);
}

.icon-btn {
  display: inline-grid; place-items: center;
  width: 38px; height: 38px; flex: none;
  border: 1.5px solid var(--outline); border-radius: 10px;
  background: var(--surface); color: var(--ink-soft);
  box-shadow: 0 2px 0 var(--outline);
  cursor: pointer;
}
.icon-btn:hover { border-color: var(--outline-hover); color: var(--ink); background: var(--surface-2); }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ---------- tactile cards ---------- */
.card {
  position: relative;
  background: var(--surface);
  border: 1.5px solid var(--outline);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-card);
}
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
.card-title { font-size: var(--fs-lg); margin: 0 0 var(--sp-2); }
.card-soft { background: var(--surface-2); }

/* ============================================================
   Home: Clean Open-Canvas Hero, Directory & Language Profile
   ============================================================ */
.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6);
  padding: var(--sp-6) 0 var(--sp-7);
  border-bottom: 1px solid var(--line-strong);
}
@media (min-width: 920px) {
  .home-hero {
    grid-template-columns: 1.35fr 1fr;
    align-items: center;
    gap: var(--sp-8);
    padding: var(--sp-7) 0 var(--sp-8);
  }
}

.hh-main {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
}
.hh-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--brand);
}
.hh-main h1 {
  font-size: clamp(2.15rem, 4.4vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0;
}
.hh-main .lede {
  font-size: var(--fs-base);
  color: var(--ink-soft);
  line-height: 1.65;
  margin: 0;
  max-width: 56ch;
}
@media (min-width: 768px) {
  .hh-main .lede {
    font-size: var(--fs-lg);
  }
}
.hh-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: var(--sp-1);
}

.hh-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
  margin: var(--sp-3) 0 0;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}
@media (min-width: 560px) {
  .hh-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.hh-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hh-stat dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--ink);
  line-height: 1.1;
}
.hh-stat dt {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* Open Hero Linguistic Specimen */
.hh-specimen {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}
@media (min-width: 920px) {
  .hh-specimen {
    padding-top: 0;
    padding-left: var(--sp-7);
    border-top: 0;
    border-left: 1px solid var(--line-strong);
  }
}
.hhs-kicker {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand);
}
.hhs-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.hhs-bo {
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}
.hhs-rom {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--accent);
}
.hhs-en {
  font-size: var(--fs-sm);
  color: var(--muted);
}
.hhs-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: var(--fs-xs);
  color: var(--muted);
}
.hhs-foot a {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--brand);
}

/* Clean Open Page Bands */
.home-band {
  padding: var(--sp-7) 0;
  border-bottom: 1px solid var(--line-strong);
}
.home-band:last-child {
  border-bottom: 0;
  padding-bottom: var(--sp-4);
}
.sec-kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 4px;
}
.sec-intro {
  font-size: var(--fs-base);
  color: var(--ink-soft);
  line-height: 1.65;
  margin: 0 0 var(--sp-4);
}

/* Clean 3-Column Platform Directory */
.dir-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--line);
}
@media (min-width: 600px) {
  .dir-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 940px) {
  .dir-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.dir-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 15px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease);
}
.dir-row:hover {
  text-decoration: none;
  background: var(--surface-2);
}
.dir-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: var(--brand);
  background: var(--brand-soft);
  flex: none;
}
.dir-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.dir-main strong {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--ink);
}
.dir-main span {
  font-size: var(--fs-xs);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dir-arrow {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--faint);
  transition: transform var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.dir-row:hover .dir-arrow {
  color: var(--brand);
  transform: translateX(3px);
}

/* Clean asymmetric split for the About page */
.hb-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6);
}
@media (min-width: 900px) {
  .hb-split {
    grid-template-columns: 1fr 1.6fr;
    gap: var(--sp-8);
    align-items: start;
  }
}
.hb-lead h2 {
  border: 0;
  padding: 0;
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-2xl);
}
.hb-matrix {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-5);
  border-top: 1px solid var(--line);
  padding-top: var(--sp-5);
}
@media (min-width: 580px) {
  .hb-matrix {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-5) var(--sp-6);
  }
}
.hb-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hb-num {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
}
.hb-item h3 {
  margin: 0;
  font-size: var(--fs-lg);
}
.hb-item p {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  line-height: 1.6;
}

/* Clean 3-Column Phrase Grid */
.home-phrase-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--line);
}
@media (min-width: 580px) {
  .home-phrase-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 900px) {
  .home-phrase-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.home-phrase-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: var(--sp-4) var(--sp-3);
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease);
}
.home-phrase-item:hover {
  background: var(--surface-2);
}
.hpi-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.hpi-bo {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--brand);
}
.hpi-rom {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--accent);
}
.hpi-en {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
}

.mc-xp {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono); font-size: 0.74rem; font-weight: 700;
  background: var(--xp-soft); color: var(--xp);
  border: 1px solid color-mix(in srgb, var(--xp) 28%, transparent);
  padding: 3px 10px; border-radius: var(--radius-pill);
}
.mc-xp .icon { width: 0.95em; height: 0.95em; fill: currentColor; }

/* Word Spotlight Card */
.word-spotlight {
  background: linear-gradient(160deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1.5px solid var(--outline);
  border-radius: var(--radius-xl);
  padding: var(--sp-5);
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; justify-content: space-between;
}
.ws-top {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.ws-tag {
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}
.ws-star.active {
  color: var(--xp); border-color: var(--xp-border); background: var(--xp-soft);
}
.ws-star.active .icon { fill: currentColor; }
.ws-bo {
  font-size: 2.65rem; font-weight: 700; color: var(--brand);
  line-height: 1.15; margin: var(--sp-3) 0 4px;
}
.ws-rom {
  font-family: var(--font-mono); font-size: var(--fs-sm);
  color: var(--accent); font-weight: 600;
}
.ws-en {
  font-family: var(--font-display); font-size: var(--fs-lg);
  font-weight: 700; color: var(--ink); margin-top: 6px;
}
.ws-note { font-size: var(--fs-xs); color: var(--muted); margin-top: 4px; }
.ws-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  margin-top: var(--sp-4); padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}

/* Section Headers */
.sec-head {
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: 8px; margin-bottom: var(--sp-4);
}
.sec-head h2 { border: 0; padding: 0; margin: 0; }
.sec-sub { font-size: var(--fs-xs); color: var(--muted); font-weight: 500; }
.sec-link { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }

/* ---------- Launchpad Bento Grid ---------- */
.launchpad {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 520px) { .launchpad { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .launchpad { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.launch-tile {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4);
  text-decoration: none; color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--outline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.launch-tile:hover { text-decoration: none; }
.launch-tile .lt-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand);
  flex: none;
}
.launch-tile .lt-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.launch-tile b { font-family: var(--font-display); font-size: var(--fs-base); font-weight: 700; }
.launch-tile span { font-size: var(--fs-xs); color: var(--muted); }

/* four curated domain hues across launchpad and feature icons */
.launch-tile:nth-child(4n+1) .lt-icon { background: var(--hue-a-soft); color: var(--hue-a); }
.launch-tile:nth-child(4n+2) .lt-icon { background: var(--hue-b-soft); color: var(--hue-b); }
.launch-tile:nth-child(4n+3) .lt-icon { background: var(--hue-c-soft); color: var(--hue-c); }
.launch-tile:nth-child(4n+4) .lt-icon { background: var(--hue-d-soft); color: var(--hue-d); }
.launch-tile:nth-child(4n+1):hover { border-color: var(--hue-a); }
.launch-tile:nth-child(4n+2):hover { border-color: var(--hue-b); }
.launch-tile:nth-child(4n+3):hover { border-color: var(--hue-c); }
.launch-tile:nth-child(4n+4):hover { border-color: var(--hue-d); }

/* Interactive Phrase Shelf */
.shelf {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 580px) { .shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.phrase-card { cursor: pointer; }
.phrase-card:hover { border-color: var(--brand); }
.pc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.pc-copy-hint { color: var(--faint); font-size: var(--fs-xs); display: inline-flex; align-items: center; gap: 4px; }
.phrase-card:hover .pc-copy-hint { color: var(--brand); }
.pc-en { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); color: var(--muted); font-weight: 500; }

/* ============================================================
   Lessons: Curriculum Skill Tree & Chapter Accordions
   ============================================================ */
.path-banner {
  background: var(--surface);
  border: 1.5px solid var(--outline);
  border-radius: var(--radius-xl);
  padding: var(--sp-5);
  margin-bottom: var(--sp-5);
  box-shadow: var(--shadow-card);
}
.pb-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.pb-kicker {
  display: block; font-family: var(--font-mono);
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; color: var(--brand);
}
.skill-nodes {
  display: grid; gap: 8px;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 560px) { .skill-nodes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 920px) { .skill-nodes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.sn-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  background: var(--surface-2);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  text-align: left; cursor: pointer; font: inherit; color: var(--ink);
  transition: transform 120ms var(--ease), border-color 120ms var(--ease), background-color 120ms var(--ease);
}
.sn-btn:hover { border-color: var(--brand); background: var(--surface); transform: translateY(-1px); }
.sn-dot {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; flex: none;
  background: var(--surface); border: 1.5px solid var(--outline);
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; color: var(--muted);
}
.sn-btn.done .sn-dot { background: var(--ok); border-color: var(--ok); color: #fff; }
.sn-btn.next { border-color: var(--brand); background: var(--brand-soft); }
.sn-btn.next .sn-dot { border-color: var(--brand); color: var(--brand); }
.sn-txt { display: flex; flex-direction: column; min-width: 0; }
.sn-txt b { font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sn-txt small { font-size: 0.68rem; color: var(--muted); }

.level-block { margin-bottom: var(--sp-6); }
.level-head { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-5) 0 var(--sp-3); }
.level-head h2 { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--muted); border: 0; padding: 0; margin: 0; }
.level-tag { padding: 4px 12px; border-radius: var(--radius-pill); font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; }
.lv-basic { background: var(--brand-soft); color: var(--brand); }
.lv-elementary { background: var(--ok-soft); color: var(--ok); }
.lv-intermediate { background: var(--warn-soft); color: var(--warn); }
.lv-advanced { background: var(--surface-3); color: var(--ink-soft); }

details.lesson {
  background: var(--surface); border: 1.5px solid var(--outline);
  border-radius: var(--radius-lg); margin-bottom: var(--sp-3); overflow: hidden;
  box-shadow: var(--shadow-card);
}
details.lesson.is-done { border-color: color-mix(in srgb, var(--ok) 45%, var(--outline)); }
details.lesson[open] { border-color: var(--outline-hover); }
details.lesson summary {
  list-style: none; cursor: pointer;
  padding: var(--sp-4) var(--sp-5);
  display: grid; grid-template-columns: auto 1fr auto auto; gap: 2px var(--sp-3); align-items: center;
  min-height: 58px;
}
details.lesson summary::-webkit-details-marker { display: none; }
details.lesson summary::after { content: "+"; grid-row: 1 / span 2; color: var(--faint); font-weight: 800; font-size: 1.3rem; line-height: 1; margin-left: 6px; }
details.lesson[open] summary::after { content: "\2013"; }
.lesson-n {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--brand-soft); color: var(--brand);
  display: grid; place-items: center; font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-sm); grid-row: 1 / span 2;
}
details.lesson.is-done .lesson-n { background: var(--ok); color: #fff; }
.lesson-title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-base); }
.lesson-xp {
  grid-row: 1 / span 2;
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700;
  padding: 3px 9px; border-radius: var(--radius-pill);
  background: var(--xp-soft); color: var(--xp);
}
.lesson-xp.earned { background: var(--ok-soft); color: var(--ok); }
.lesson-sum { grid-column: 2; font-size: var(--fs-xs); color: var(--muted); }
.lesson-body { padding: var(--sp-4) var(--sp-5) var(--sp-5); border-top: 1px solid var(--line); }
.lesson-done {
  margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px dashed var(--line);
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
}
.lesson-done .state { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
.lesson-done .state.done { color: var(--ok); }
.big-example {
  background: var(--brand-soft); border-left: 4px solid var(--brand); border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-5); margin: var(--sp-4) 0;
  font-family: var(--font-bo); font-size: var(--fs-xl); line-height: 1.5; color: var(--ink);
}
.big-example span { display: block; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--accent); margin-top: 4px; }

/* ============================================================
   Script: Interactive Character Inspector & Glyph Grid
   ============================================================ */
.char-inspector {
  background: var(--surface);
  border: 1.5px solid var(--brand);
  border-radius: var(--radius-xl);
  padding: var(--sp-5);
  margin: var(--sp-4) 0 var(--sp-5);
  box-shadow: var(--shadow-card);
  display: grid; gap: var(--sp-4);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 768px) {
  .char-inspector { grid-template-columns: 1fr 1.2fr; align-items: center; }
}
.ci-main { display: flex; align-items: center; gap: var(--sp-4); }
.ci-big {
  width: 84px; height: 84px; border-radius: 18px;
  background: var(--brand-soft); color: var(--brand);
  border: 1.5px solid color-mix(in srgb, var(--brand) 25%, transparent);
  display: grid; place-items: center;
  font-size: 2.8rem; font-weight: 700; flex: none;
}
.ci-kicker {
  display: block; font-family: var(--font-mono);
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; color: var(--muted);
  margin-bottom: 4px;
}
.ci-info h3 { margin: 0 0 4px; font-size: var(--fs-lg); }
.ci-info p { margin: 0; font-size: var(--fs-sm); color: var(--ink-soft); }
.ci-ex-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
.ci-ex {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 8px 10px;
  display: flex; flex-direction: column; gap: 1px;
}
.ci-ex .bo { font-size: 1.05rem; font-weight: 600; color: var(--brand); }

.glyph-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(142px, 1fr)); margin: var(--sp-4) 0 var(--sp-6); }
.glyph {
  background: var(--surface); border: 1.5px solid var(--outline); border-radius: var(--radius-lg);
  padding: var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: 2px;
  text-align: left; cursor: pointer; font: inherit;
  box-shadow: var(--shadow-card);
}
.glyph:hover, .glyph.active { border-color: var(--brand); background: var(--brand-soft); }
.glyph-l { font-family: var(--font-bo); font-size: 2rem; line-height: 1.15; color: var(--brand); font-weight: 600; }
.glyph-r { font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-xs); color: var(--accent); }
.glyph-s { font-size: var(--fs-xs); color: var(--muted); }

/* ============================================================
   Quiz Arena: Multiple Choice & Flashcard Studio
   ============================================================ */
.quiz-stage { max-width: 680px; margin: 0 auto; }
.quiz-controls {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 10px; margin-bottom: var(--sp-4);
}
.quiz-hud {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
.q-counter { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; color: var(--muted); }
.q-badges { display: flex; align-items: center; gap: 8px; }
.q-streak {
  font-family: var(--font-mono); font-size: 0.74rem; font-weight: 700;
  padding: 3px 10px; border-radius: var(--radius-pill);
  background: var(--surface-2); border: 1px solid var(--line); color: var(--muted);
}
.q-streak.hot { background: #ffedd5; color: #ea580c; border-color: #fdba74; }
html[data-theme="dark"] .q-streak.hot { background: rgba(234, 88, 12, 0.2); color: #fb923c; border-color: rgba(251, 146, 60, 0.4); }

.flash {
  background: var(--surface); border: 1.5px solid var(--outline); border-radius: var(--radius-xl);
  padding: var(--sp-6) var(--sp-5); min-height: 240px;
  display: flex; flex-direction: column; justify-content: center; gap: var(--sp-3);
  text-align: center;
  box-shadow: var(--shadow-card);
}
.flash .prompt-label { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--faint); font-weight: 700; }
.flash .prompt { font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: 700; color: var(--ink); }
.flash-divider { height: 1px; background: var(--line); margin: var(--sp-2) 0; }
.flash .answer { font-family: var(--font-bo); font-size: var(--fs-3xl); color: var(--brand); font-weight: 700; }
.flash .answer-rom { color: var(--accent); font-family: var(--font-mono); font-size: var(--fs-sm); }

.mc-options {
  display: grid; grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 10px; margin-top: var(--sp-3); text-align: left;
}
@media (min-width: 540px) { .mc-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.mc-opt {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1.5px solid var(--outline);
  border-radius: var(--radius);
  box-shadow: 0 3px 0 var(--outline);
  cursor: pointer; font: inherit; color: var(--ink);
  transition: transform 110ms var(--ease), border-color 110ms var(--ease), background-color 110ms var(--ease);
}
.mc-opt:hover:not([disabled]) { border-color: var(--brand); background: var(--brand-soft); transform: translateY(-1px); }
.mc-opt.correct { background: var(--ok-soft); border-color: var(--ok); color: var(--ink); box-shadow: 0 3px 0 var(--ok); }
.mc-opt.wrong { background: var(--danger-soft); border-color: var(--danger); color: var(--ink); box-shadow: 0 3px 0 var(--danger); }
.mc-key {
  width: 26px; height: 26px; border-radius: 7px;
  display: grid; place-items: center; flex: none;
  background: var(--surface-2); border: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; color: var(--muted);
}
.mc-val { font-weight: 600; font-size: var(--fs-base); }

.mc-feedback {
  margin-top: var(--sp-3); padding: 12px 16px;
  border-radius: var(--radius);
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  text-align: left; font-size: var(--fs-sm);
}
.mc-feedback.ok { background: var(--ok-soft); border: 1.5px solid var(--ok); }
.mc-feedback.err { background: var(--danger-soft); border: 1.5px solid var(--danger); }
.mc-feedback strong { display: block; font-family: var(--font-display); font-size: var(--fs-base); }

.quiz-btns { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; margin-top: var(--sp-4); }

/* ============================================================
   Dictionary, Tables, Conversations, Numbers, Translator
   ============================================================ */
.progress-wrap { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.progress { flex: 1; height: 9px; background: var(--surface-3); border-radius: var(--radius-pill); overflow: hidden; }
.progress > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--brand), var(--accent)); transition: width 0.35s ease; }

.toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: var(--sp-3); }
.toolbar input[type="search"], .toolbar select, .field {
  padding: 10px 14px; border: 1.5px solid var(--outline); border-radius: var(--radius);
  background: var(--surface); color: var(--ink); font: inherit; font-size: var(--fs-sm);
  min-height: 44px; box-shadow: 0 2px 0 var(--outline);
}
.toolbar input[type="search"] { flex: 1; min-width: 200px; }
.toolbar input:focus, .toolbar select:focus, .field:focus {
  border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px var(--brand-soft);
}
.count { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600; color: var(--muted); margin-bottom: var(--sp-3); }

.dict-row {
  display: grid; grid-template-columns: 1.35fr 1fr 1fr auto; gap: var(--sp-3);
  align-items: center; padding: 12px 16px;
  background: var(--surface); border: 1.5px solid var(--outline);
  border-radius: var(--radius); margin-bottom: 8px;
  box-shadow: 0 2px 0 var(--outline);
}
.dict-row:hover { border-color: var(--outline-hover); }
.dict-en { font-weight: 700; }
.dict-note { display: block; font-weight: 400; font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.dict-bo { font-family: var(--font-bo); font-size: 1.18em; font-weight: 600; color: var(--brand); }
.dict-rom { color: var(--accent); font-family: var(--font-mono); font-size: var(--fs-xs); }
.dict-actions { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.dict-cat { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
.dict-star {
  background: none; border: 1px solid var(--line); border-radius: 7px;
  width: 30px; height: 30px; display: grid; place-items: center;
  color: var(--faint); cursor: pointer;
}
.dict-star:hover { color: var(--xp); border-color: var(--xp-border); }
.dict-star.active { color: var(--xp); background: var(--xp-soft); border-color: var(--xp-border); }
.dict-star.active .icon { fill: currentColor; }
@media (max-width: 720px) {
  .dict-row { grid-template-columns: 1fr 1fr; }
  .dict-actions { grid-column: 1 / -1; justify-content: space-between; }
}

.table-wrap { overflow-x: auto; margin: var(--sp-4) 0 var(--sp-5); border: 1.5px solid var(--outline); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); background: var(--surface); }
caption { caption-side: top; text-align: left; padding: var(--sp-3) var(--sp-4); font-size: var(--fs-xs); color: var(--muted); font-weight: 700; background: var(--surface-2); border-bottom: 1px solid var(--line); }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th {
  background: var(--surface-2); font-family: var(--font-display); font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: var(--tracking-wide); color: var(--muted); font-weight: 700; white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--surface-2); }
td.bo, .bo { font-family: var(--font-bo); font-size: 1.08em; }
.rom { color: var(--accent); font-style: italic; }

.callout {
  border: 1.5px solid var(--outline);
  border-left: 4px solid var(--brand);
  background: var(--surface);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-5);
  margin: var(--sp-5) 0;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  box-shadow: var(--shadow-xs);
}
.callout > :first-child { margin-top: 0; }
.callout > :last-child { margin-bottom: 0; }
.callout .callout-title { display: flex; align-items: center; gap: var(--sp-2); font-family: var(--font-display); font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.callout.info { border-left-color: var(--brand); }
.callout.warn { border-left-color: var(--warn); background: var(--warn-soft); }
.callout.ok { border-left-color: var(--ok); background: var(--ok-soft); }
.callout.danger { border-left-color: var(--danger); background: var(--danger-soft); }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--radius-pill);
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: var(--fs-xs); font-weight: 600; color: var(--muted);
}
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: var(--radius-pill);
  font-size: var(--fs-xs); font-weight: 700;
}
.badge.ok { background: var(--ok-soft); color: var(--ok); }
.badge.info { background: var(--brand-soft); color: var(--brand); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.danger { background: var(--danger-soft); color: var(--danger); }
.ver {
  font-family: var(--font-mono); font-size: 0.65rem; font-weight: 700;
  background: var(--brand-soft); color: var(--brand);
  padding: 2px 7px; border-radius: var(--radius-pill); vertical-align: middle;
}

.ref-block { margin-bottom: var(--sp-6); }
.ref-block > h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-3); color: var(--brand); }

.dialogue {
  background: var(--surface); border: 1.5px solid var(--outline);
  border-radius: var(--radius-lg); padding: var(--sp-5); margin-bottom: var(--sp-4);
  box-shadow: var(--shadow-card);
}
.dlg-head { display: flex; justify-content: space-between; gap: var(--sp-3); align-items: center; flex-wrap: wrap; margin-bottom: var(--sp-4); }
.dlg-head h3, .dlg-head h2 { margin: 0; font-size: var(--fs-lg); border: 0; padding: 0; }
.dlg-lines { display: flex; flex-direction: column; gap: 10px; }
.dlg-line { display: grid; grid-template-columns: 74px 1fr; gap: var(--sp-3); align-items: start; }
.dlg-who { font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-xs); color: var(--brand); text-align: right; padding-top: 8px; }
.dlg-text { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); }
.dlg-en { font-size: var(--fs-xs); color: var(--muted); }
.dlg-bo { font-family: var(--font-bo); font-size: 1.12em; font-weight: 600; margin: 3px 0; }
.dlg-rom { font-size: var(--fs-sm); color: var(--accent); font-style: italic; }
.dlg-note { margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4); background: var(--brand-soft); border-radius: var(--radius); font-size: var(--fs-sm); color: var(--ink-soft); }

.num-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); margin: var(--sp-4) 0 var(--sp-5); }
.num-cell {
  background: var(--surface); border: 1.5px solid var(--outline); border-radius: var(--radius);
  padding: var(--sp-3); text-align: center; box-shadow: var(--shadow-card);
}
.num-cell .n { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--faint); font-weight: 700; }
.num-cell .b { font-family: var(--font-bo); font-size: 1.35rem; font-weight: 600; color: var(--brand); display: block; }
.num-cell .r { font-size: var(--fs-xs); color: var(--accent); font-style: italic; }

.tr-panel { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 820px) { .tr-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.tr-label { display: block; font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--faint); font-weight: 700; margin-bottom: var(--sp-2); }
.tr-panel textarea {
  width: 100%; min-height: 108px; padding: var(--sp-3);
  border: 1.5px solid var(--outline); border-radius: var(--radius);
  background: var(--bg); color: var(--ink); font: inherit; resize: vertical;
}
.tr-panel textarea:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px var(--brand-soft); }
.tr-bo { font-family: var(--font-bo); font-size: var(--fs-2xl); font-weight: 600; line-height: 1.4; color: var(--ink); }
.tr-rom { color: var(--accent); font-style: italic; margin-top: 4px; }
.tr-note { font-size: var(--fs-xs); color: var(--muted); margin-top: var(--sp-3); }
.tr-samples { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sp-4); }
.tr-samples button {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-pill);
  padding: 6px 12px; font: inherit; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); cursor: pointer;
}
.tr-samples button:hover { background: var(--brand-soft); color: var(--brand); border-color: var(--brand-soft); }

.feature { display: flex; flex-direction: column; height: 100%; }
.feature .feature-icon {
  width: 46px; height: 46px; border-radius: 13px;
  display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand);
  margin-bottom: var(--sp-3);
}
.feature:nth-child(3n+1) .feature-icon { background: var(--hue-a-soft); color: var(--hue-a); }
.feature:nth-child(3n+2) .feature-icon { background: var(--hue-b-soft); color: var(--hue-b); }
.feature:nth-child(3n+3) .feature-icon { background: var(--hue-d-soft); color: var(--hue-d); }
.feature h3 { font-family: var(--font-display); font-size: var(--fs-lg); margin: 0 0 var(--sp-2); }
.feature p { color: var(--muted); font-size: var(--fs-sm); margin: 0 0 var(--sp-3); }

.resource {
  display: flex; gap: var(--sp-4); padding: var(--sp-4);
  border: 1.5px solid var(--outline); border-radius: var(--radius-lg); margin-bottom: var(--sp-3);
  background: var(--surface); box-shadow: var(--shadow-card);
}
.resource .r-icon { color: var(--brand); flex: none; }
.resource h3 { font-family: var(--font-display); font-size: var(--fs-base); margin: 0 0 4px; }
.resource p { margin: 0 0 4px; font-size: var(--fs-sm); color: var(--muted); }
.resource a { font-size: var(--fs-xs); font-weight: 700; }
.source-list { list-style: none; margin: 0; padding: 0; }
.source-list li { padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.source-list li:last-child { border-bottom: 0; }
.empty { padding: var(--sp-6); text-align: center; color: var(--muted); font-size: var(--fs-sm); }

.lede-inline { font-size: var(--fs-lg); color: var(--ink-soft); }
.tick-list { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: 7px; }
.tick-list li { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-sm); color: var(--ink-soft); }
.tick-list .icon { color: var(--ok); margin-top: 3px; stroke-width: 2.5; }
.task { display: flex; flex-direction: column; height: 100%; }
.task-head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.task-icon { width: 36px; height: 36px; border-radius: 10px; flex: none; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); }
.task-head h3 { margin: 0; font-family: var(--font-display); font-size: var(--fs-base); flex: 1 1 auto; min-width: 0; }
.chip.effort { background: var(--ok-soft); color: var(--ok); border-color: transparent; white-space: nowrap; }
.task p { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); color: var(--muted); }
.task-how { display: flex; gap: 8px; align-items: flex-start; margin: auto 0 0 !important; font-size: var(--fs-xs); font-weight: 700; color: var(--brand); }
.route { border: 1.5px solid var(--outline); border-radius: var(--radius-lg); padding: var(--sp-5); margin-bottom: var(--sp-4); background: var(--surface); box-shadow: var(--shadow-card); }
.route-head { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.route-head h3 { margin: 0; font-size: var(--fs-lg); }
.route-for { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-sm); color: var(--muted); margin-bottom: var(--sp-4); }
.route-steps { margin: 0; padding-left: 1.3em; display: grid; gap: var(--sp-2); }
.route-steps li { color: var(--ink-soft); font-size: var(--fs-sm); }
details.faq summary { grid-template-columns: 1fr auto; }
details.faq .faq-q { font-weight: 700; }
.link-grid { display: grid; gap: var(--sp-3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .link-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.link-card { display: flex; gap: var(--sp-4); align-items: flex-start; text-decoration: none; }

/* ---------- floating display controller ---------- */
.cp-fab {
  position: fixed; right: var(--sp-5); bottom: var(--sp-5); z-index: 80;
  width: 50px; height: 50px; border-radius: 50%;
  border: 1.5px solid var(--outline-hover); background: var(--surface); color: var(--ink);
  cursor: pointer; display: grid; place-items: center;
  font-weight: 700; font-size: var(--fs-sm); font-family: var(--font-display);
  box-shadow: 0 3px 0 var(--outline), var(--shadow-lg);
}
.cp-fab:hover { border-color: var(--brand); color: var(--brand); }
.cp-fab span { border-bottom: 2px solid currentColor; line-height: 1; }

.cp-panel {
  position: fixed; right: var(--sp-5); bottom: 88px; z-index: 81;
  width: 340px; max-width: calc(100vw - 2 * var(--sp-4));
  max-height: 74vh; overflow-y: auto;
  background: var(--surface); border: 1.5px solid var(--outline-hover);
  border-radius: var(--radius-xl); padding: var(--sp-5); display: none;
  box-shadow: var(--shadow-lg);
}
.cp-panel.open { display: block; }
.cp-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.cp-head h2 { font-family: var(--font-display); font-size: var(--fs-base); border: 0; padding: 0; margin: 0; }
.cp-group { margin-bottom: var(--sp-4); }
.cp-group > label {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2);
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--tracking-wide); color: var(--faint); margin-bottom: 6px;
}
.cp-val { font-size: var(--fs-xs); font-weight: 700; color: var(--brand); text-transform: none; letter-spacing: 0; }
.seg { display: flex; gap: 5px; flex-wrap: wrap; background: var(--surface-2); padding: 4px; border-radius: var(--radius); border: 1px solid var(--line); }
.seg button {
  flex: 1; min-width: 58px; min-height: 34px; padding: 6px 10px;
  border: 1px solid transparent; background: transparent;
  border-radius: 8px; cursor: pointer;
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 600; color: var(--muted);
}
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--brand); color: #fff; border-color: var(--brand); box-shadow: var(--shadow-xs); }
html[data-theme="dark"] .seg button[aria-pressed="true"] { color: #0c0f16; font-weight: 700; }
.cp-slider input[type="range"] { width: 100%; accent-color: var(--brand); height: 24px; cursor: pointer; }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch {
  width: 32px; height: 32px; border-radius: 9px;
  border: 2.5px solid transparent; cursor: pointer; padding: 0;
}
.swatch[data-accent="indigo"] { background: #4338ca !important; }
.swatch[data-accent="teal"]   { background: #0d9488 !important; }
.swatch[data-accent="rose"]   { background: #e11d48 !important; }
.swatch[data-accent="amber"]  { background: #d97706 !important; }
.swatch[data-accent="violet"] { background: #7c3aed !important; }
.swatch[data-accent="green"]  { background: #16a34a !important; }
.swatch[aria-pressed="true"] { border-color: var(--ink); }
.cp-foot { display: flex; gap: var(--sp-2); padding-top: var(--sp-3); margin-top: var(--sp-2); border-top: 1px solid var(--line); }
.cp-foot .btn { width: 100%; }

@media (max-width: 767px) {
  .cp-fab {
    bottom: calc(var(--mobilenav-h) + 14px + env(safe-area-inset-bottom, 0px));
    right: var(--sp-3); width: 46px; height: 46px;
  }
  .cp-panel {
    right: var(--sp-3); left: var(--sp-3); width: auto; max-width: none;
    bottom: calc(var(--mobilenav-h) + 72px + env(safe-area-inset-bottom, 0px));
    max-height: 66vh;
  }
}

/* ============================================================
   Visual Learner Profile (progress.html)
   Avatar Ring, Eye-Catching XP Showcase, Animated Fire Streak,
   Vector SVG Trophy Case & Compact Interactive Lesson Nodes
   ============================================================ */

/* 1. Compact Profile Header */
.lp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-4);
  padding: var(--sp-2) 0 var(--sp-5);
  border-bottom: 1.5px solid var(--line);
}
.lp-user {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-width: 0;
}
.lp-avatar-wrap {
  width: 78px;
  height: 78px;
  flex: none;
}
.lp-avatar-svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 4px 10px rgba(67, 56, 202, 0.18));
}
.lp-user-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.lp-name-line {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.lp-name {
  margin: 0;
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
}
.lp-edit-btn {
  padding: 4px 10px;
  border: 1px solid var(--outline);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}
.lp-edit-btn:hover {
  border-color: var(--brand);
  color: var(--brand);
}
.lp-rank-pill {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: var(--fs-sm);
}
.lp-rank-lvl {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--brand-soft);
  color: var(--brand);
}
.lp-rank-bo {
  color: var(--accent);
  font-weight: 600;
}
.lp-quick-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lp-inline-edit {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--line);
}
.lp-inline-edit .field {
  max-width: 260px;
}

/* 2. Eye-Catching Visual Hero Widgets (XP + Animated Fire + Mastery) */
.lp-vitrine {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
  margin: var(--sp-5) 0;
}
@media (min-width: 720px) {
  .lp-vitrine {
    grid-template-columns: 1.25fr 1fr 1fr;
  }
}

.lp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--radius-xl);
  background: var(--surface);
  border: 1.5px solid var(--outline);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.lp-card-xp {
  background: linear-gradient(145deg, color-mix(in srgb, #f59e0b 10%, var(--surface)) 0%, var(--surface) 65%);
  border-color: color-mix(in srgb, #f59e0b 45%, var(--outline));
}
.lp-card-fire.active {
  background: linear-gradient(145deg, color-mix(in srgb, #f97316 10%, var(--surface)) 0%, var(--surface) 65%);
  border-color: color-mix(in srgb, #f97316 45%, var(--outline));
}

.lp-card-top {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.lp-card-kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 2px;
}

/* XP Crest & Eye-Catching Number */
.xp-crest-svg {
  width: 58px;
  height: 58px;
  flex: none;
  filter: drop-shadow(0 4px 12px rgba(245, 158, 11, 0.32));
  animation: rk-xp-float 3.2s ease-in-out infinite;
}
.xp-halo {
  transform-origin: center;
  animation: rk-xp-pulse 2.4s ease-in-out infinite;
}
.lp-xp-number {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.lp-xp-number strong {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.8vw, 2.65rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, #d97706 0%, #f59e0b 50%, #b45309 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
html[data-theme="dark"] .lp-xp-number strong {
  background: linear-gradient(135deg, #fde047 0%, #fbbf24 55%, #f59e0b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lp-xp-number span {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 800;
  color: #d97706;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(245, 158, 11, 0.14);
}
html[data-theme="dark"] .lp-xp-number span {
  color: #fbbf24;
}

.lp-xp-meter {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lp-xp-labels {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
}
.lp-xp-bar {
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  overflow: hidden;
}
.lp-xp-bar > i {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, #f59e0b, #fbbf24, #d97706);
  transition: width 0.4s ease;
}

/* Animated Fire Logo SVG & Streak Counter */
.fire-logo-svg {
  width: 58px;
  height: 58px;
  flex: none;
  overflow: visible;
  filter: drop-shadow(0 4px 12px rgba(249, 115, 22, 0.35));
}
.fire-flame-outer {
  transform-origin: 32px 54px;
  animation: rk-flame-outer 1.35s ease-in-out infinite alternate;
}
.fire-flame-mid {
  transform-origin: 32px 50px;
  animation: rk-flame-mid 0.95s ease-in-out infinite alternate;
}
.fire-flame-core {
  transform-origin: 32px 48px;
  animation: rk-flame-core 0.7s ease-in-out infinite alternate;
}
.fire-glow {
  transform-origin: 32px 36px;
  animation: rk-xp-pulse 1.6s ease-in-out infinite;
}
.fire-ember {
  animation: rk-ember-rise 1.8s ease-out infinite;
}
.fire-ember.e2 {
  animation-delay: 0.6s;
}
.fire-ember.e3 {
  animation-delay: 1.1s;
}

@keyframes rk-flame-outer {
  0%   { transform: scale(1, 1) rotate(-1.5deg); }
  50%  { transform: scale(0.97, 1.05) rotate(1.5deg); }
  100% { transform: scale(1.03, 0.96) rotate(-1deg); }
}
@keyframes rk-flame-mid {
  0%   { transform: scale(1, 0.96) rotate(2deg); }
  100% { transform: scale(0.95, 1.06) rotate(-2deg); }
}
@keyframes rk-flame-core {
  0%   { transform: scale(0.92, 0.92); opacity: 0.85; }
  100% { transform: scale(1.08, 1.08); opacity: 1; }
}
@keyframes rk-ember-rise {
  0%   { transform: translateY(6px) scale(0.8); opacity: 0; }
  40%  { opacity: 0.95; }
  100% { transform: translateY(-8px) scale(0.3); opacity: 0; }
}
@keyframes rk-xp-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
@keyframes rk-xp-pulse {
  0%, 100% { transform: scale(0.95); opacity: 0.14; }
  50%      { transform: scale(1.08); opacity: 0.28; }
}

.lp-fire-number,
.lp-mastery-number {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.lp-fire-number strong {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.8vw, 2.55rem);
  font-weight: 800;
  line-height: 1;
  color: #ea580c;
}
html[data-theme="dark"] .lp-fire-number strong {
  color: #fb923c;
}
.lp-fire-number span,
.lp-mastery-number span {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--muted);
}
.lp-mastery-number strong {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.5vw, 2.4rem);
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
}
.lp-mastery-number strong small {
  font-size: 0.55em;
  color: var(--muted);
}
.lp-mini-trophy {
  width: 54px;
  height: 54px;
  flex: none;
}
.lp-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-xs);
  color: var(--muted);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--line);
}
.lp-card-foot a {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--brand);
}

/* 3. Sections & Trophy Case */
.lp-section {
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--line);
}
.lp-sec-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: var(--sp-4);
}
.lp-sec-head h2 {
  border: 0;
  padding: 0;
  margin: 0;
  font-size: var(--fs-xl);
}
.lp-sec-count {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--muted);
}

.lp-trophy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}
@media (min-width: 600px) {
  .lp-trophy-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 960px) {
  .lp-trophy-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.lp-trophy-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  font: inherit;
  color: inherit;
  cursor: pointer;
  padding: var(--sp-4) var(--sp-3);
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1.5px solid var(--outline);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.lp-trophy-card:hover {
  transform: translateY(-3px);
  border-color: var(--brand);
  box-shadow: var(--shadow-pop);
}
.lp-trophy-card:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.lp-trophy-card.unlocked {
  border-color: color-mix(in srgb, #f59e0b 55%, var(--outline));
  background: linear-gradient(180deg, color-mix(in srgb, #f59e0b 8%, var(--surface)) 0%, var(--surface) 100%);
}
.lp-trophy-card.locked .lpt-art {
  filter: grayscale(0.85) opacity(0.42);
}
.lpt-art {
  width: 56px;
  height: 56px;
  margin-bottom: 8px;
  transition: transform 200ms var(--ease), filter 200ms var(--ease);
}
.lp-trophy-card:hover .lpt-art {
  transform: scale(1.08);
}
.tr-svg {
  width: 100%;
  height: 100%;
  display: block;
}
.lpt-title {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink);
}
.lpt-sub {
  font-size: 0.7rem;
  color: var(--muted);
  margin: 2px 0 8px;
}
.lpt-bar {
  width: 100%;
  height: 5px;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  overflow: hidden;
  margin-top: auto;
}
.lpt-bar > i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #f59e0b, #10b981);
}
.lpt-prog {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--muted);
  margin-top: 6px;
}
.lp-trophy-card.unlocked .lpt-prog {
  color: var(--ok);
}

/* 4. 10-Level Rank Roadmap */
.lp-ranks-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (min-width: 720px) {
  .lp-ranks-strip {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
.lpr-step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  width: 100%;
  font: inherit;
  color: inherit;
  cursor: pointer;
  gap: 3px;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1.5px solid var(--outline);
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.lpr-step:hover {
  transform: translateY(-2px);
  border-color: var(--brand);
  box-shadow: var(--shadow-card);
}
.lpr-step:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.lpr-step.locked {
  opacity: 0.62;
}
.lpr-step.unlocked {
  border-color: color-mix(in srgb, var(--ok) 40%, var(--outline));
}
.lpr-step.current {
  border-color: var(--brand);
  background: var(--brand-soft);
  opacity: 1;
}
.lpr-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 6px;
}
.lpr-badge {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--brand);
}
.lpr-xp {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 700;
  color: var(--muted);
}
.lpr-step strong {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  color: var(--ink);
}
.lpr-bo {
  font-size: var(--fs-xs);
  color: var(--accent);
  font-weight: 600;
}

/* Small Interactive Pop-Up Window for Trophies & Levels */
.lp-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 220;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
  display: grid;
  place-items: center;
  padding: var(--sp-4);
  animation: rk-fade-in 140ms var(--ease);
}
.lp-modal {
  position: relative;
  width: 100%;
  max-width: 360px;
  background: var(--surface);
  border: 1.5px solid var(--outline-strong);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-pop);
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  animation: rk-pop-in 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes rk-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes rk-pop-in {
  from { opacity: 0; transform: scale(0.92) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.lp-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--outline);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.85rem;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color 120ms var(--ease), color 120ms var(--ease);
}
.lp-modal-close:hover {
  background: var(--surface-3);
  color: var(--ink);
}
.lpm-art {
  width: 78px;
  height: 78px;
  margin-bottom: 10px;
  filter: drop-shadow(0 6px 16px rgba(245, 158, 11, 0.25));
}
.lpm-art.locked {
  filter: grayscale(0.45) opacity(0.82);
}
.lpm-art svg {
  width: 100%;
  height: 100%;
  display: block;
}
.lpm-status {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  margin-bottom: 6px;
}
.lpm-status.ok {
  background: var(--ok-soft);
  color: var(--ok);
}
.lpm-status.pending {
  background: var(--surface-2);
  color: var(--muted);
}
.lpm-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--ink);
}
.lpm-bo {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--accent);
  margin-top: 2px;
}
.lpm-box {
  width: 100%;
  margin: var(--sp-3) 0;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--line);
  text-align: left;
}
.lpm-box-kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--brand);
  margin-bottom: 4px;
}
.lpm-box p {
  margin: 0 0 10px;
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--ink-soft);
}
.lpm-prog-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--muted);
  margin-bottom: 5px;
}
.lpm-prog-head strong {
  color: var(--ink);
}
.lpm-bar {
  height: 7px;
}
.lpm-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}
.lpm-actions .btn {
  flex: 1;
  justify-content: center;
}

/* 5. Compact Interactive Lesson Nodes */
.lp-tiers {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.lp-tier-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lpt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.lpt-stat {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--muted);
}
.lp-node-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}
@media (min-width: 560px) {
  .lp-node-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.lp-lesson-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1.5px solid var(--outline);
}
.lp-lesson-chip.done {
  border-color: color-mix(in srgb, var(--ok) 45%, var(--outline));
  background: color-mix(in srgb, var(--ok-soft) 35%, var(--surface));
}
.lplc-check {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1.5px solid var(--outline);
  background: var(--surface-2);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 800;
  display: grid;
  place-items: center;
  flex: none;
  cursor: pointer;
  transition: transform 120ms var(--ease), background-color 120ms var(--ease), border-color 120ms var(--ease);
}
.lplc-check:hover {
  border-color: var(--brand);
  color: var(--brand);
  transform: scale(1.05);
}
.lp-lesson-chip.done .lplc-check {
  background: var(--ok);
  border-color: var(--ok);
  color: #ffffff;
}
.lplc-title {
  display: flex;
  flex-direction: column;
  min-width: 0;
  text-decoration: none;
  color: var(--ink);
}
.lplc-title strong {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lplc-title small {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--muted);
}
.lp-lesson-chip.done .lplc-title small {
  color: var(--ok);
  font-weight: 700;
}

/* 6. Compact Saved Words Grid */
.lp-word-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
@media (min-width: 640px) {
  .lp-word-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.lp-word-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1.5px solid var(--outline);
}
.lpw-bo {
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--brand);
}
.lpw-en {
  display: block;
  font-size: var(--fs-xs);
  color: var(--ink-soft);
}

/* 7. Minimal Footer Controls */
.lp-foot-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}
.ledger-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.reset-confirm-bar {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  color: var(--danger);
}
.ledger-notice {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ok);
}


/* ============================================================
   Update banner
   Sits directly under the header and stays there while scrolling,
   so a release notice is seen rather than scrolled past. Hidden by
   default: js/core/update.js only reveals it when a newer version
   is actually available.
   ============================================================ */

.update-banner {
  position: sticky;
  top: var(--header-h);
  z-index: 55;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding: 10px var(--sp-5);
  background: var(--brand-soft);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: var(--fs-sm);
  box-shadow: var(--shadow-sm);
  animation: ub-drop var(--dur) var(--ease-out) both;
}

.update-banner[hidden] { display: none; }

@keyframes ub-drop {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

.update-banner > .icon {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--brand);
}

.update-banner .ub-text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.update-banner .ub-text strong {
  font-family: var(--font-display);
  font-weight: 700;
}

.update-banner .ub-text span { color: var(--muted); }

.update-banner .ub-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-left: auto;
}

.update-banner .ub-actions .btn { white-space: nowrap; }

@media (max-width: 640px) {
  .update-banner { padding: 10px var(--sp-4); }
  .update-banner .ub-actions { margin-left: 0; width: 100%; }
  .update-banner .ub-actions .btn.primary { flex: 1; }
}

@media print {
  .update-banner { display: none !important; }
}

/* ============================================================
   Panel — App & updates group
   ============================================================ */

.cp-app-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.cp-app-row .btn { flex: 1 1 auto; }

.cp-app-status {
  margin: 8px 0 0;
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--muted);
}

.cp-app-status[data-kind="ok"]     { color: var(--ok); font-weight: 600; }
.cp-app-status[data-kind="update"] { color: var(--brand); font-weight: 700; }
.cp-app-status[data-kind="warn"]   { color: var(--warn); }


/* ============================================================
   Maker mark — Apsides Labs
   The vector is inlined (not an <img>) so its fills can resolve
   from --logo-ink / --logo-accent and follow the theme. Height is
   fixed and width is automatic, which keeps the wordmark's aspect
   ratio exact at any size.
   ============================================================ */

.maker-mark {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-4);
}

.maker-mark .maker-label {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1;
}

.maker-mark .apsides-logo {
  display: block;
  height: 30px;
  width: auto;
  flex: none;
}

/* the About page gives it a little more room */
.maker-mark.large .apsides-logo { height: 36px; }
.maker-mark.large .maker-label { font-size: var(--fs-sm); }

@media (max-width: 480px) {
  .maker-mark .apsides-logo { height: 26px; }
  .maker-mark.large .apsides-logo { height: 30px; }
}

@media print {
  .maker-mark .apsides-logo { height: 26px; }
}
/* --- Reading & writing page ---------------------------------- */
.rd-passage { margin-bottom: var(--sp-6); }
.rd-head { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
.rd-head h2 { margin: 0; }
.rd-level {
  font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--tracking-wide); color: var(--accent);
  border: 1px solid currentColor; border-radius: var(--radius-pill); padding: 2px 10px;
}
.rd-title-en { color: var(--muted); font-size: var(--fs-sm); margin: 2px 0 var(--sp-4); }
.rd-para { padding: var(--sp-3) 0; border-bottom: 1px dashed var(--line); }
.rd-para:last-of-type { border-bottom: 0; }
.rd-text { font-family: var(--font-as); font-size: 1.15em; line-height: var(--lh-loose); margin: 0 0 var(--sp-2); }
.rd-rom { margin: 0 0 var(--sp-1); font-size: var(--fs-sm); }
.rd-en { margin: 0; color: var(--ink-soft); font-size: var(--fs-sm); }
.rd-sub { margin-top: var(--sp-5); }
.rd-questions { margin: 0; padding-left: 1.3em; display: grid; gap: var(--sp-3); }
.rd-q { margin: 0; }
.rd-question { margin: 0 0 4px; }
.rd-qen { color: var(--muted); font-size: var(--fs-sm); }
.rd-answer summary { cursor: pointer; font-size: var(--fs-sm); font-weight: 700; color: var(--accent); }
.rd-answer[open] summary { margin-bottom: var(--sp-2); }
.rd-answer p { margin: 4px 0; }
.rd-answer .rd-text { font-size: 1.05em; line-height: var(--lh-snug); }
.rd-note {
  margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4);
  background: var(--brand-soft); border-radius: var(--radius-lg);
  font-size: var(--fs-sm); color: var(--ink-soft); display: flex; gap: var(--sp-2);
}
.rd-howto { padding-left: 1.3em; display: grid; gap: var(--sp-2); }

/* --- installed-app mode --------------------------------------
   Same repository, same platform — a slightly different feel. When the
   page runs as an installed app (display-mode: standalone, or the
   data-display attribute that js/ui/update.js stamps on <html>) the
   website chrome is trimmed and the shell behaves like a native app:
   a compact app bar honouring the safe-area inset, no web footer link
   columns, no pull-to-refresh bounce and no tap highlight. */
@media (display-mode: standalone) {
  .site-header { padding-top: env(safe-area-inset-top, 0px); }
}

html[data-display="standalone"] {
  scroll-padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
}
html[data-display="standalone"] body {
  overscroll-behavior-y: none;
  -webkit-tap-highlight-color: transparent;
}
html[data-display="standalone"] .site-header {
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--surface);
  backdrop-filter: none;
  border-bottom-color: transparent;
  box-shadow: var(--shadow-sm);
}
html[data-display="standalone"] .site-header .bar { height: calc(var(--header-h) - 4px); }

/* the app badge in the brand line */
.app-chip {
  display: inline-block; margin-left: 6px; padding: 1px 8px;
  border-radius: var(--radius-pill);
  background: var(--brand-soft); color: var(--brand);
  font-size: 0.64rem; font-weight: 800;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  vertical-align: 2px;
}

/* in the app the footer keeps its identity and its accuracy note, but
   drops the two link columns — the app navigates from its own nav */
html[data-display="standalone"] .site-footer { margin-top: var(--sp-6); padding: var(--sp-5) 0 var(--sp-6); }
html[data-display="standalone"] .site-footer .inner:first-child { grid-template-columns: minmax(0, 1fr) !important; }
html[data-display="standalone"] .site-footer .inner:first-child > div:nth-child(n + 2) { display: none; }

/* first-run note — installed app only */
.app-welcome {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  margin: 0 0 var(--sp-5); padding: var(--sp-4);
  background: var(--brand-soft); border-radius: var(--radius-lg);
  font-size: var(--fs-sm); color: var(--ink-soft);
}
.app-welcome .aw-icon { flex: none; color: var(--brand); line-height: 1; }
.app-welcome .aw-text { flex: 1; }
.app-welcome .btn { flex: none; }
@media (max-width: 560px) {
  .app-welcome { flex-wrap: wrap; }
  .app-welcome .btn { margin-left: calc(var(--sp-5) + var(--sp-3)); }
}

/* web-only install affordance in the footer */
.install-hint {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  margin: var(--sp-3) 0 0; font-size: var(--fs-xs); color: var(--muted);
}

/* --- the বৰ্ণমালা read-aloud chart (Script page) --- */
.chart-groups { display: grid; gap: var(--sp-5); margin-top: var(--sp-3); }
.chart-group h3 { margin: 0 0 var(--sp-3); font-size: var(--fs-base); display: flex; gap: var(--sp-2); align-items: baseline; }
.chart-group .glyph { cursor: default; }

/* ---------- install banner ----------
   A quiet invitation above the site footer. js/core/install.js reveals it only
   when the browser can actually install the app, and hides it for good once the
   app is installed or the reader turns it down. It carries no heading element,
   so it stays out of the page's table of contents. */
.install-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-4) var(--sp-5);
  margin-top: var(--sp-7);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  /* derived from the theme-aware surface, because --brand-soft is not
     redefined for dark mode and would paint a light tint on a dark page */
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 12%, var(--bg-soft)), var(--bg-soft) 62%);
  box-shadow: var(--shadow-sm);
  animation: install-banner-in 420ms var(--ease-out) both;
}
.install-banner[hidden] { display: none; }
@keyframes install-banner-in { from { opacity: 0; transform: translateY(8px); } }
.install-banner-mark { display: block; width: 56px; height: 56px; border-radius: 15px; box-shadow: var(--shadow-xs); }
.install-banner-copy { min-width: 0; }
.install-banner-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-lg); font-weight: 700;
  letter-spacing: -0.01em; line-height: var(--lh-snug);
  color: var(--ink);
}
.install-banner-text { margin: 2px 0 0; font-size: var(--fs-sm); line-height: var(--lh-snug); color: var(--muted); }
.install-banner-actions { display: flex; align-items: center; gap: var(--sp-2); }
.install-banner-actions [data-install-app][hidden] { display: none; }

@media (max-width: 640px) {
  .install-banner { grid-template-columns: auto minmax(0, 1fr); }
  .install-banner-actions { grid-column: 1 / -1; justify-content: flex-end; }
}