:root {
  --ink: #20232b;
  --muted: #6c7280;
  --paper: #f4f1ea;
  --panel: #fffdf8;
  --panel-2: #f9f6ef;
  --line: #ddd8cc;
  --line-strong: #c9c2b4;
  --accent: #5b45d6;
  --accent-2: #dd6c4f;
  --accent-soft: #ece8ff;
  --green: #2f8a62;
  --green-soft: #e5f5ed;
  --amber: #aa6f12;
  --amber-soft: #fff0cf;
  --red: #bb4e4e;
  --red-soft: #fde8e5;
  --blue-soft: #e7f1ff;
  --sidebar: #1f2430;
  --sidebar-2: #292f3d;
  --shadow: 0 12px 34px rgba(32, 35, 43, .09);
  --radius: 18px;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.48;
}

button, input, textarea, select { font: inherit; }
button { color: inherit; }

button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid rgba(91, 69, 214, .25);
  outline-offset: 2px;
}

#app-shell { min-height: 100vh; display: grid; grid-template-columns: 278px 1fr; }

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 22px 17px;
  color: #f8f7f4;
  background:
    radial-gradient(circle at 15% 10%, rgba(122, 100, 255, .22), transparent 28%),
    linear-gradient(180deg, var(--sidebar), #1a1e28);
  overflow-y: auto;
  z-index: 40;
}

.brand { display: flex; align-items: center; gap: 12px; padding: 3px 7px 23px; }
.brand-mark {
  width: 43px; height: 43px; border-radius: 13px;
  display: grid; place-items: center;
  font-weight: 900; letter-spacing: -.06em;
  background: linear-gradient(145deg, #8b78ff, #e2785d);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
}
.brand-title { font-weight: 800; letter-spacing: -.025em; }
.brand-subtitle { color: #aeb5c2; font-size: .76rem; margin-top: 1px; }

.main-nav { display: grid; gap: 5px; }
.nav-item {
  width: 100%; border: 0; border-radius: 11px; padding: 10px 12px;
  display: flex; align-items: center; gap: 11px;
  color: #cdd2dc; background: transparent;
  text-align: left; cursor: pointer; transition: .16s ease;
}
.nav-item span { width: 21px; text-align: center; opacity: .9; }
.nav-item:hover { color: white; background: rgba(255,255,255,.07); }
.nav-item.active { color: white; background: rgba(139,120,255,.23); box-shadow: inset 3px 0 0 #9c8bff; }

.sidebar-section { padding: 23px 7px 8px; }
.sidebar-label { color: #8e97a8; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; margin-bottom: 10px; }
.stage-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.stage-chip {
  border: 1px solid rgba(255,255,255,.12); border-radius: 999px; padding: 5px 9px;
  background: rgba(255,255,255,.04); color: #bec5d1; font-size: .76rem; cursor: pointer;
}
.stage-chip.active { background: #f4f1ea; color: #262b36; border-color: #f4f1ea; }
.sidebar-footer { margin-top: auto; padding-top: 16px; }
.offline-note { padding: 14px 12px 2px; color: #8e97a8; font-size: .75rem; }
.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #55c58b; margin-right: 7px; box-shadow: 0 0 0 4px rgba(85,197,139,.1); }

.main-area { min-width: 0; }
.topbar {
  height: 75px; position: sticky; top: 0; z-index: 25;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 35px; border-bottom: 1px solid rgba(201,194,180,.7);
  background: rgba(244,241,234,.9); backdrop-filter: blur(14px);
}
.topbar-title { font-weight: 800; letter-spacing: -.02em; }
.topbar-stats { display: flex; align-items: center; gap: 14px; }
.mini-stat { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: .86rem; }
.mini-stat strong { color: var(--ink); }
.goal-ring {
  --p: 0deg;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: conic-gradient(var(--accent) var(--p), #ddd8cc 0);
  position: relative;
}
.goal-ring::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--paper); }
.goal-ring span { position: relative; z-index: 1; font-size: .61rem; font-weight: 800; }

.view-root { width: min(1220px, calc(100% - 58px)); margin: 0 auto; padding: 34px 0 70px; }

.hero {
  display: grid; grid-template-columns: 1.5fr .9fr; gap: 24px;
  padding: 31px; border-radius: 24px; color: white;
  background:
    radial-gradient(circle at 88% 18%, rgba(255,255,255,.18), transparent 26%),
    linear-gradient(130deg, #313848, #5a43cc 68%, #d56b51);
  box-shadow: var(--shadow); overflow: hidden; position: relative;
}
.hero::before {
  content: "-ción  ·  -zione  ·  -ção  ·  -ție";
  position: absolute; right: -25px; bottom: -17px; transform: rotate(-7deg);
  font-weight: 900; font-size: clamp(1.7rem, 4vw, 4rem); color: rgba(255,255,255,.08); white-space: nowrap;
}
.hero-copy { position: relative; z-index: 1; }
.eyebrow { display: inline-flex; border-radius: 999px; padding: 5px 9px; background: rgba(255,255,255,.13); font-size: .72rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.hero h1 { max-width: 750px; font-size: clamp(2rem, 4.2vw, 4rem); line-height: 1.02; letter-spacing: -.055em; margin: 17px 0 13px; }
.hero p { max-width: 690px; color: #e2e1ec; font-size: 1.02rem; margin: 0 0 23px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-metrics { align-self: stretch; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; position: relative; z-index: 1; }
.hero-metric { min-height: 105px; border: 1px solid rgba(255,255,255,.14); background: rgba(18,21,31,.22); backdrop-filter: blur(5px); border-radius: 16px; padding: 15px; display: flex; flex-direction: column; justify-content: space-between; }
.hero-metric strong { font-size: 1.65rem; }
.hero-metric span { color: #d0d1dd; font-size: .77rem; }

.btn {
  border: 1px solid transparent; border-radius: 11px; padding: 10px 15px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 800; cursor: pointer; transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--accent); color: white; box-shadow: 0 8px 20px rgba(91,69,214,.22); }
.btn-primary:hover { background: #4c38c2; }
.btn-light { background: white; color: #2a2d35; }
.btn-ghost { border-color: var(--line); background: transparent; }
.btn-soft { background: var(--accent-soft); color: #4936bd; }
.btn-danger { background: var(--red-soft); color: var(--red); }
.btn-small { padding: 7px 10px; border-radius: 9px; font-size: .79rem; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.section-head { display: flex; justify-content: space-between; align-items: end; gap: 18px; margin: 34px 0 16px; }
.section-head h2, .section-head h1 { margin: 0; letter-spacing: -.035em; }
.section-head p { margin: 5px 0 0; color: var(--muted); max-width: 680px; }
.section-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel);
  box-shadow: 0 5px 18px rgba(32,35,43,.04);
}
.card-pad { padding: 20px; }

.stat-card { padding: 18px; }
.stat-label { color: var(--muted); font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.stat-value { font-size: 1.75rem; font-weight: 900; letter-spacing: -.04em; margin-top: 6px; }
.stat-sub { color: var(--muted); font-size: .78rem; margin-top: 3px; }

.stage-block { margin-bottom: 30px; }
.stage-heading { display: flex; align-items: center; gap: 11px; margin: 0 0 13px; }
.stage-badge { padding: 5px 9px; border-radius: 8px; background: var(--ink); color: white; font-weight: 900; font-size: .7rem; }
.stage-heading h3 { margin: 0; }
.stage-heading span:last-child { color: var(--muted); font-size: .82rem; }

.module-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.module-card { padding: 17px; cursor: pointer; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; position: relative; overflow: hidden; }
.module-card:hover { transform: translateY(-2px); border-color: #aaa0ed; box-shadow: var(--shadow); }
.module-card.locked { opacity: .61; filter: grayscale(.15); }
.module-card.complete { border-color: #a9d9c2; }
.module-number { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--panel-2); color: var(--muted); font-size: .76rem; font-weight: 900; }
.module-card.complete .module-number { background: var(--green-soft); color: var(--green); }
.module-card h4 { margin: 13px 0 6px; font-size: 1rem; letter-spacing: -.015em; }
.module-card p { color: var(--muted); font-size: .79rem; margin: 0; min-height: 39px; }
.module-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; }
.level-pill, .type-pill { border-radius: 999px; padding: 4px 8px; background: var(--panel-2); color: var(--muted); font-size: .66rem; font-weight: 800; }
.module-progress { height: 6px; border-radius: 99px; background: #e8e3d8; margin-top: 12px; overflow: hidden; }
.module-progress > span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), #927fff); border-radius: inherit; }

.module-card { cursor: default; }
.module-card:hover { transform: none; box-shadow: 0 5px 18px rgba(32,35,43,.04); border-color: var(--line); }
.module-card.current-route { border-color: rgba(91,69,214,.35); box-shadow: 0 12px 26px rgba(91,69,214,.08); }
.module-card.preview-only { opacity: .9; }
.module-preview-note { margin-top: 10px; color: var(--muted); font-size: .72rem; line-height: 1.4; }
.verb-preview-head { display:flex; align-items:center; gap:8px; justify-content:center; }

.panel { padding: 24px; }
.panel h2, .panel h3 { letter-spacing: -.025em; }
.panel > :first-child { margin-top: 0; }
.panel > :last-child { margin-bottom: 0; }

.module-detail-hero { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: start; }
.breadcrumb { color: var(--muted); font-size: .78rem; margin-bottom: 12px; }
.module-title { font-size: clamp(2rem, 4vw, 3.6rem); line-height: 1.04; letter-spacing: -.055em; margin: 0; }
.module-summary { color: var(--muted); max-width: 760px; font-size: 1.02rem; }
.objective-list { display: grid; gap: 8px; padding: 0; list-style: none; }
.objective-list li { display: flex; gap: 9px; }
.objective-list li::before { content: "✓"; color: var(--green); font-weight: 900; }
.theory-box { border-left: 4px solid var(--accent); background: var(--accent-soft); border-radius: 0 13px 13px 0; padding: 17px 19px; }
.theory-box h4 { margin: 0 0 7px; }
.theory-box p { margin: 0; color: #454056; }
.language-callouts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
.language-callout { padding: 14px; border-radius: 13px; background: var(--panel-2); border: 1px solid var(--line); }
.language-callout strong { display: block; margin-bottom: 5px; }
.language-callout p { margin: 0; color: var(--muted); font-size: .81rem; }

.session-shell { max-width: 1000px; margin: 0 auto; }
.session-top { display: flex; align-items: center; gap: 13px; margin-bottom: 20px; }
.session-progress { flex: 1; height: 9px; border-radius: 99px; background: #ded8cd; overflow: hidden; }
.session-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), #a893ff); transition: width .25s ease; }
.session-count { color: var(--muted); font-size: .8rem; min-width: 52px; text-align: right; }
.exercise-card { padding: 25px; }
.exercise-kicker { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; color: var(--muted); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.exercise-card h2 { font-size: clamp(1.45rem, 3vw, 2.35rem); letter-spacing: -.04em; margin: 11px 0 5px; }
.exercise-instruction { color: var(--muted); margin: 0 0 21px; }
.reference-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 17px; }
.reference-card { background: var(--panel-2); border: 1px solid var(--line); border-radius: 13px; padding: 13px; }
.lang-label { color: var(--muted); font-size: .67rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.reference-text { margin-top: 5px; font-weight: 700; }
.target-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
.target-card { border: 1px solid var(--line); border-radius: 14px; padding: 13px; background: #fff; transition: border .15s, background .15s; }
.target-card.correct { border-color: #6fc198; background: var(--green-soft); }
.target-card.almost { border-color: #e0ac4d; background: var(--amber-soft); }
.target-card.wrong { border-color: #d88783; background: var(--red-soft); }
.target-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.target-status { font-size: .72rem; font-weight: 900; }
.answer-input {
  width: 100%; min-height: 47px; border: 1px solid var(--line-strong); border-radius: 10px;
  padding: 10px 11px; background: white; color: var(--ink); resize: vertical;
}
.answer-input:disabled { opacity: 1; color: var(--ink); }
.answer-input.correct { border-color: #54aa7f; }
.answer-input.almost { border-color: #cf912a; }
.answer-input.wrong { border-color: #c96561; }
.revealed-answer { margin-top: 8px; color: var(--green); font-size: .8rem; font-weight: 800; word-break: break-word; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.accent-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.accent-key { border: 1px solid var(--line); border-radius: 7px; padding: 3px 7px; background: var(--panel-2); cursor: pointer; font-size: .76rem; }
.feedback-box { margin-top: 16px; border-radius: 13px; padding: 14px 16px; background: var(--blue-soft); color: #314a67; }
.feedback-box.success { background: var(--green-soft); color: #286b4d; }
.feedback-box.warning { background: var(--amber-soft); color: #805615; }
.feedback-box.error { background: var(--red-soft); color: #8e3f3f; }
.exercise-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 21px; }
.exercise-actions > div { display: flex; gap: 8px; }

.verb-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
.verb-table { width: 100%; border-collapse: collapse; min-width: 800px; }
.verb-table th, .verb-table td { padding: 9px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); text-align: center; }
.verb-table th { background: var(--panel-2); font-size: .72rem; }
.verb-table tr:last-child td { border-bottom: 0; }
.verb-table th:last-child, .verb-table td:last-child { border-right: 0; }
.verb-table .row-label { text-align: left; white-space: nowrap; font-weight: 900; }
.verb-cell-input { width: 100%; min-width: 92px; border: 1px solid var(--line-strong); border-radius: 8px; padding: 8px; text-align: center; }
.verb-cell-input.correct { background: var(--green-soft); border-color: #65b48a; }
.verb-cell-input.almost { background: var(--amber-soft); border-color: #d69a35; }
.verb-cell-input.wrong { background: var(--red-soft); border-color: #ce6a66; }
.readonly-form { color: var(--muted); font-size: .82rem; }
.answer-mini { display: block; color: var(--green); font-size: .68rem; margin-top: 3px; }

.filter-bar { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin-bottom: 17px; }
.search-input, .select-input {
  border: 1px solid var(--line-strong); border-radius: 10px; padding: 9px 11px; background: var(--panel); color: var(--ink);
}
.search-input { min-width: min(330px, 100%); }
.filter-chip { border: 1px solid var(--line); border-radius: 999px; background: var(--panel); padding: 7px 11px; cursor: pointer; font-size: .78rem; }
.filter-chip.active { border-color: var(--accent); background: var(--accent-soft); color: #4936bd; font-weight: 800; }

.rule-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.rule-card { padding: 18px; cursor: pointer; }
.rule-map { display: flex; flex-wrap: wrap; gap: 5px; margin: 12px 0; }
.rule-token { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 5px 7px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .74rem; }
.reliability { display: inline-flex; border-radius: 999px; padding: 3px 7px; font-size: .64rem; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.reliability.high { color: var(--green); background: var(--green-soft); }
.reliability.medium { color: var(--amber); background: var(--amber-soft); }
.reliability.historical { color: #4d65a8; background: var(--blue-soft); }
.example-table-wrap { overflow-x: auto; }
.example-table { width: 100%; border-collapse: collapse; min-width: 740px; }
.example-table th, .example-table td { border-bottom: 1px solid var(--line); padding: 10px; text-align: left; }
.example-table th { color: var(--muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; }

.item-list { display: grid; gap: 9px; }
.list-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 13px 15px; }
.list-row-main { min-width: 0; }
.list-row-title { font-weight: 800; }
.list-row-sub { color: var(--muted); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lang-inline { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.lang-tag { border-radius: 7px; background: var(--panel-2); border: 1px solid var(--line); padding: 4px 7px; font-size: .72rem; }

.progress-chart { display: grid; gap: 11px; }
.bar-row { display: grid; grid-template-columns: 130px 1fr 55px; gap: 12px; align-items: center; }
.bar-track { height: 10px; background: #e5dfd4; border-radius: 99px; overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), #a594fb); }

.empty-state { text-align: center; padding: 45px 20px; }
.empty-icon { font-size: 2.5rem; margin-bottom: 10px; }
.empty-state h3 { margin: 0 0 7px; }
.empty-state p { color: var(--muted); max-width: 520px; margin: 0 auto 17px; }

.settings-grid { display: grid; gap: 14px; }
.setting-row { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; padding: 17px; }
.setting-row h4 { margin: 0 0 4px; }
.setting-row p { margin: 0; color: var(--muted); font-size: .8rem; }
.toggle { position: relative; width: 48px; height: 27px; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; inset: 0; border-radius: 99px; background: #cfc8bc; cursor: pointer; transition: .18s; }
.toggle-slider::after { content: ""; position: absolute; width: 21px; height: 21px; left: 3px; top: 3px; border-radius: 50%; background: white; transition: .18s; box-shadow: 0 2px 5px rgba(0,0,0,.2); }
.toggle input:checked + .toggle-slider { background: var(--accent); }
.toggle input:checked + .toggle-slider::after { transform: translateX(21px); }

.modal-layer { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(23,26,34,.65); }
.modal { width: min(900px, 100%); max-height: min(88vh, 920px); overflow-y: auto; background: var(--panel); border-radius: 20px; box-shadow: 0 24px 70px rgba(0,0,0,.28); padding: 24px; }
.modal-head { display: flex; justify-content: space-between; gap: 15px; align-items: start; }
.modal-head h2 { margin: 0; }
.icon-btn { border: 0; width: 38px; height: 38px; border-radius: 10px; background: transparent; cursor: pointer; font-size: 1.15rem; }
.icon-btn:hover { background: rgba(0,0,0,.06); }

.toast-root { position: fixed; z-index: 200; right: 20px; bottom: 20px; display: grid; gap: 8px; }
.toast { max-width: 360px; color: white; background: #2a2f3b; border-radius: 11px; padding: 11px 14px; box-shadow: var(--shadow); animation: toast-in .18s ease; }
.toast.success { background: #2c7c59; }
.toast.error { background: #9a4444; }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } }

.sidebar-backdrop { display: none; }
.mobile-only { display: none; }
.muted { color: var(--muted); }
.small { font-size: .78rem; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.divider { height: 1px; background: var(--line); margin: 21px 0; }
.hidden { display: none !important; }

@media (max-width: 1050px) {
  .module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  #app-shell { display: block; }
  .sidebar { position: fixed; left: 0; transform: translateX(-105%); width: min(310px, 88vw); transition: transform .2s ease; }
  .sidebar.open { transform: translateX(0); }
  .sidebar-backdrop { position: fixed; inset: 0; z-index: 35; background: rgba(15,17,23,.55); }
  .sidebar-backdrop.show { display: block; }
  .mobile-only { display: inline-grid; place-items: center; }
  .brand .mobile-only { margin-left: auto; color: white; }
  .topbar { padding: 0 18px; }
  .view-root { width: min(100% - 28px, 1220px); padding-top: 20px; }
  .reference-grid, .target-grid, .grid-3, .language-callouts { grid-template-columns: 1fr; }
  .rule-list { grid-template-columns: 1fr; }
}

@media (max-width: 590px) {
  .hero { padding: 23px; }
  .hero-metrics { grid-template-columns: 1fr 1fr; }
  .hero-metric { min-height: 90px; }
  .module-grid, .grid-2, .grid-4 { grid-template-columns: 1fr; }
  .module-detail-hero { grid-template-columns: 1fr; }
  .exercise-card, .panel { padding: 18px; }
  .exercise-actions { flex-direction: column; }
  .exercise-actions > div { width: 100%; }
  .exercise-actions .btn { flex: 1; }
  .bar-row { grid-template-columns: 88px 1fr 45px; }
  .topbar-stats .mini-stat:first-child { display: none; }
}

/* -------------------------------------------------------------------------
   Romance Matrix 2 — central visual grammar
   ------------------------------------------------------------------------- */

.sidebar-language-flags {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  margin: -8px 7px 19px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  background: rgba(255,255,255,.04);
}
.sidebar-language-flags .flag-rect {
  justify-self: center;
}

.hero-v2::before { content: "Romance Matrix"; letter-spacing: .08em; }
.flag-rect {
  --f1: #ddd;
  --f2: #bbb;
  --f3: transparent;
  width: 28px;
  height: 19px;
  display: inline-block;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--f1) 42%, transparent), 0 0 0 1px rgba(255,255,255,.45) inset;
  backdrop-filter: blur(9px);
  background: linear-gradient(135deg, rgba(255,255,255,.32), rgba(255,255,255,.08)), linear-gradient(180deg, var(--f1) 0 33%, var(--f2) 33% 66%, var(--f3) 66% 100%);
}
.flag-rect.sm { width: 24px; height: 16px; border-radius: 5px; }
.flag-rect.md { width: 28px; height: 19px; }
.flag-es { --f1:#c60b1e; --f2:#ffc400; --f3:#c60b1e; }
.flag-fr, .flag-it, .flag-ro { background: linear-gradient(135deg, rgba(255,255,255,.34), rgba(255,255,255,.08)), linear-gradient(90deg, var(--f1) 0 33.3%, var(--f2) 33.3% 66.6%, var(--f3) 66.6% 100%); }
.flag-fr { --f1:#0055a4; --f2:#ffffff; --f3:#ef4135; }
.flag-it { --f1:#009246; --f2:#ffffff; --f3:#ce2b37; }
.flag-ro { --f1:#002b7f; --f2:#fcd116; --f3:#ce1126; }
.flag-pt {
  --f1:#009b3a; --f2:#ffdf00; --f3:#002776;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.18), rgba(255,255,255,0) 45%), linear-gradient(90deg, #009b3a 0 40%, #ffdf00 40% 100%);
  box-shadow: 0 4px 18px rgba(0,155,58,.35), 0 0 16px rgba(255,223,0,.25), 0 0 0 1px rgba(255,255,255,.45) inset;
}
.flag-ca {
  background: linear-gradient(135deg, rgba(255,255,255,.35), rgba(255,255,255,.08)), repeating-linear-gradient(180deg, #f8d24a 0 12.5%, #cc1f2f 12.5% 25%);
  box-shadow: 0 4px 18px rgba(204,31,47,.28), 0 0 16px rgba(248,210,74,.18), 0 0 0 1px rgba(255,255,255,.45) inset;
}
.hero-review { color: white; border-color: rgba(255,255,255,.35); }
.audio-btn {
  border: 1px solid rgba(91,69,214,.16);
  background: rgba(91,69,214,.08);
  color: #4d3bbe;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  flex: 0 0 auto;
}
.audio-btn:hover { background: rgba(91,69,214,.14); }
.audio-btn.tile-audio { margin-top: 10px; }
.audio-btn.inline-audio, .audio-btn.mini-audio { width: 28px; height: 28px; font-size: .8rem; }
.globe-badge { width: 24px; height: 24px; display:grid; place-items:center; border-radius: 999px; background: rgba(91,69,214,.12); color:#4d3bbe; font-weight:900; }

.hero-language-ribbon {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
  margin: 0 0 22px;
}
.hero-lang {
  min-width: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 7px;
  padding: 9px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  background: rgba(17,21,31,.2);
}
.hero-lang > span { grid-row: 1 / 3; align-self: center; display:flex; align-items:center; }
.hero-lang strong { align-self: end; font-size: .72rem; letter-spacing: .06em; }
.hero-lang small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #d4d5e0; font-size: .57rem; }
.stat-next { font-size: 1.03rem; line-height: 1.15; }
.central-route-head { margin-bottom: 12px; }

.language-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 9px;
  width: 100%;
}
.language-strip.compact { gap: 7px; }
.language-tile {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.72));
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(32,35,43,.05);
}
.language-tile.lang-es { box-shadow: 0 8px 24px rgba(198,11,30,.08), 0 0 18px rgba(255,196,0,.10); }
.language-tile.lang-ca { box-shadow: 0 8px 24px rgba(204,31,47,.08), 0 0 18px rgba(248,210,74,.12); }
.language-tile.lang-fr { box-shadow: 0 8px 24px rgba(0,85,164,.08), 0 0 18px rgba(239,65,53,.08); }
.language-tile.lang-it { box-shadow: 0 8px 24px rgba(0,146,70,.08), 0 0 18px rgba(206,43,55,.08); }
.language-tile.lang-pt { box-shadow: 0 8px 24px rgba(0,155,58,.09), 0 0 18px rgba(255,223,0,.16); }
.language-tile.lang-ro { box-shadow: 0 8px 24px rgba(0,43,127,.08), 0 0 18px rgba(252,209,22,.14); }
.language-strip.compact .language-tile { padding: 10px; border-radius: 14px; }
.language-tile.bridge { background: #f8f6f0; }
.language-tile.target {
  border-color: rgba(91,69,214,.25);
  background: linear-gradient(180deg, #fff, #f6f3ff);
}
.language-tile-head {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}
.tile-flag-wrap { display:flex; align-items:center; }
.language-tile-head span:last-child { min-width: 0; display: block; }
.language-tile-head strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
  line-height: 1.14;
  font-size: .72rem;
}
.language-tile-head small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 1px;
  color: var(--muted);
  font-size: .57rem;
}
.language-value-row { display:flex; gap:8px; align-items:flex-start; }

.language-value {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
  font-weight: 850;
  line-height: 1.28;
  overflow-wrap: anywhere;
  flex: 1 1 auto;
}
.language-strip.compact .language-value { margin-top: 8px; padding-top: 7px; font-size: .88rem; }
.comparison-caption {
  margin-bottom: 9px;
  color: var(--muted);
  font-size: .67rem;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.reference-section, .pattern-panel, .verb-base-panel {
  margin: 17px 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel-2);
}
.reference-section .language-tile, .pattern-panel .language-tile, .verb-base-panel .language-tile { box-shadow: none; }

.module-overview { overflow: hidden; }
.module-eyebrow { background: var(--accent-soft); color: #4936bd; }
.module-progress-large { height: 9px; margin: 20px 0 5px; }
.module-intro-grid, .rule-central-panel, .production-panel { margin-top: 16px; }
.rule-central-panel .language-callouts { margin-top: 16px; }
.callout-language, .target-language {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.callout-language > .flag-rect, .target-language > .flag-rect { flex: 0 0 auto; }
.callout-language div, .target-language div { min-width: 0; }
.callout-language strong, .target-language strong { display: block; }
.callout-language small, .target-language small {
  display: block;
  color: var(--muted);
  font-size: .65rem;
  font-weight: 500;
}
.target-language.mini > .flag-rect { width:20px; height:14px; }
.target-language.mini strong { font-size: .77rem; }
.target-language.mini small { font-size: .58rem; }
.module-learning-section { margin-top: 26px; }
.lesson-block-stack, .module-sentence-stack { display: grid; gap: 16px; }
.lesson-block {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--panel);
  box-shadow: var(--shadow);
}
.lesson-block-head { padding: 20px 21px 16px; border-bottom: 1px solid var(--line); background: linear-gradient(135deg, #fffdf8, #f5f2ff); }
.lesson-block-head h3 { margin: 8px 0 5px; }
.lesson-block-head p { margin: 0; color: var(--muted); }
.lesson-rows { display: grid; }
.lesson-row { padding: 17px 20px; border-bottom: 1px solid var(--line); }
.lesson-row:last-child { border-bottom: 0; }
.lesson-row-label {
  display: inline-flex;
  margin-bottom: 10px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: #4936bd;
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .04em;
}
.lesson-row-note { margin: 9px 2px 0; }
.lesson-block > .feedback-box { margin: 0 20px 20px; }

.module-sentence-card { padding: 19px; }
.module-sentence-head { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 14px; }
.module-sentence-head strong { font-size: 1.04rem; line-height: 1.4; }
.focus-panel {
  margin-top: 15px;
  padding: 14px;
  border: 1px solid #d9d0ff;
  border-radius: 16px;
  background: #f7f4ff;
}
.focus-panel-title {
  color: #4936bd;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.focus-row + .focus-row { margin-top: 16px; padding-top: 15px; border-top: 1px solid #ddd5fb; }
.focus-row h4 { margin: 7px 0 10px; }
.focus-note { margin: 8px 1px 0; }

.culture-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.culture-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--panel);
  box-shadow: 0 7px 20px rgba(32,35,43,.05);
}
.culture-icon { font-size: 1.65rem; }
.culture-place { color: var(--muted); font-size: .65rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.culture-card h4 { margin: 4px 0 6px; }
.culture-card p { margin: 0; color: var(--muted); font-size: .84rem; }
.compact-head { margin-top: 0; }
.writing-route-card { padding: 17px; border: 1px solid var(--line); border-radius: 15px; background: var(--panel-2); }
.writing-route-card h3 { margin: 9px 0 6px; }
.writing-route-card p { color: var(--muted); }
.writing-route-card .btn { margin-top: 13px; }

.target-head { gap: 10px; }
.target-card { min-width: 0; }
.pattern-panel + .focus-panel, .focus-panel + .reference-section { margin-top: 14px; }
.grammar-options { margin-top: 15px; }

.verb-exercise-v2 { max-width: 1180px; margin: 0 auto; }
.tense-note { margin-bottom: 16px; }
.verb-table-transposed { min-width: 920px; table-layout: fixed; }
.verb-table-transposed th, .verb-table-transposed td { vertical-align: top; }
.verb-table-transposed .person-column { width: 145px; }
.verb-column-head { display: grid; grid-template-columns: auto 1fr; gap: 7px; align-items: center; text-align: left; }
.verb-column-head > span { grid-row: 1 / 3; font-size: 1.35rem; }
.verb-column-head strong { align-self: end; font-size: .75rem; }
.verb-column-head small { align-self: start; color: var(--muted); font-size: .6rem; font-weight: 500; }
.verb-table-transposed .row-label { white-space: normal; text-align: left; vertical-align: middle; background: var(--panel-2); }
.cell-pronoun { display: block; min-height: 20px; margin-bottom: 6px; color: var(--muted); font-size: .69rem; font-weight: 800; }
.verb-unavailable { background: #f7f5f0; color: var(--muted); }
.verb-unavailable small { display: block; margin-top: 4px; font-size: .58rem; line-height: 1.25; }
.dash-form { display: block; font-size: 1.2rem; font-weight: 800; }
.accent-matrix { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.accent-matrix > div { padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); }

.rule-example-table th small { display: block; margin-top: 2px; color: var(--muted); font-size: .55rem; text-transform: none; letter-spacing: 0; font-weight: 500; }
.table-flag { display: block; margin-bottom: 3px; font-size: 1.15rem; }
.modal-wide { width: min(1120px, 100%); }
.modal-actions { margin-top: 18px; }

.breadcrumb { display: flex; align-items: center; gap: 8px; color: var(--muted); margin-bottom: 13px; }

@media (max-width: 1180px) {
  .language-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero-language-ribbon { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .culture-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .language-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .culture-grid { grid-template-columns: 1fr; }
  .module-sentence-head { flex-direction: column; gap: 7px; }
  .accent-matrix { grid-template-columns: 1fr; }
}

@media (max-width: 590px) {
  .hero-language-ribbon { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .language-strip { grid-template-columns: 1fr; }
  .lesson-row { padding: 15px; }
  .lesson-block-head { padding: 17px 16px 14px; }
  .module-sentence-card { padding: 15px; }
  .reference-section, .pattern-panel, .verb-base-panel, .focus-panel { padding: 11px; }
  .culture-card { padding: 15px; }
}

/* Hostinger/login-ready shell */
.hosted-account-link { text-decoration: none; }
.hosted-topbar-user { margin-left:auto; display:flex; align-items:center; gap:10px; min-width:0; }
.hosted-topbar-user > a { max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink); text-decoration:none; font-size:.77rem; font-weight:850; }
.sync-status { display:inline-flex; align-items:center; min-height:27px; padding:4px 8px; border-radius:999px; font-size:.65rem; font-weight:850; white-space:nowrap; }
.sync-status.saved { color:#276b4e; background:var(--green-soft); }
.sync-status.saving { color:#805615; background:var(--amber-soft); }
.sync-status.offline { color:#8b5b17; background:#fff1d6; }
.sync-status.error { color:#8e3f3f; background:var(--red-soft); }
@media (max-width:820px) { .hosted-topbar-user > a { display:none; } .sync-status { font-size:.58rem; } }
@media (max-width:560px) { .hosted-topbar-user { display:none; } }

/* ========================================================================
   Romance Matrix DEV 3 — Windows 11 inspired glass / light + dark
   ======================================================================== */

:root {
  --ink: #1c2333;
  --muted: #697386;
  --paper: #eef3fb;
  --panel: rgba(255, 255, 255, .72);
  --panel-solid: #ffffff;
  --panel-2: rgba(246, 249, 255, .78);
  --line: rgba(103, 118, 148, .18);
  --line-strong: rgba(86, 101, 132, .32);
  --accent: #6254e8;
  --accent-hover: #5547d5;
  --accent-2: #5a8dee;
  --accent-soft: rgba(98, 84, 232, .11);
  --green: #197a54;
  --green-soft: rgba(46, 178, 119, .13);
  --amber: #9a6414;
  --amber-soft: rgba(239, 173, 59, .16);
  --red: #b8454f;
  --red-soft: rgba(225, 85, 96, .13);
  --blue-soft: rgba(76, 142, 235, .13);
  --sidebar: rgba(24, 29, 43, .88);
  --sidebar-2: rgba(31, 38, 57, .9);
  --shadow: 0 18px 48px rgba(43, 55, 83, .12), 0 2px 6px rgba(43, 55, 83, .05);
  --shadow-float: 0 28px 80px rgba(24, 35, 61, .22), 0 8px 24px rgba(24, 35, 61, .12);
  --glass-highlight: rgba(255, 255, 255, .72);
  --glass-blur: 24px;
  --radius: 20px;
  color-scheme: light;
}

html[data-theme="dark"] {
  --ink: #f2f5fb;
  --muted: #a7b0c2;
  --paper: #0d1017;
  --panel: rgba(28, 33, 46, .72);
  --panel-solid: #1b202d;
  --panel-2: rgba(37, 43, 58, .78);
  --line: rgba(184, 198, 225, .14);
  --line-strong: rgba(190, 202, 230, .25);
  --accent: #9287ff;
  --accent-hover: #a99fff;
  --accent-2: #6fa6ff;
  --accent-soft: rgba(146, 135, 255, .15);
  --green: #65d4a5;
  --green-soft: rgba(59, 188, 132, .16);
  --amber: #f3bd66;
  --amber-soft: rgba(243, 181, 77, .17);
  --red: #ff8c93;
  --red-soft: rgba(234, 101, 110, .16);
  --blue-soft: rgba(87, 151, 255, .15);
  --sidebar: rgba(13, 16, 25, .92);
  --sidebar-2: rgba(20, 25, 38, .94);
  --shadow: 0 18px 52px rgba(0, 0, 0, .28), 0 2px 7px rgba(0, 0, 0, .2);
  --shadow-float: 0 30px 90px rgba(0, 0, 0, .55), 0 9px 30px rgba(0, 0, 0, .34);
  --glass-highlight: rgba(255, 255, 255, .12);
  color-scheme: dark;
}

html {
  background: var(--paper);
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 8% -4%, rgba(98, 84, 232, .16), transparent 32rem),
    radial-gradient(circle at 94% 12%, rgba(78, 153, 238, .14), transparent 30rem),
    radial-gradient(circle at 68% 92%, rgba(235, 103, 149, .09), transparent 34rem),
    var(--paper);
  background-attachment: fixed;
  letter-spacing: -.005em;
  transition: background-color .25s ease, color .25s ease;
}

html[data-theme="dark"] body {
  background:
    radial-gradient(circle at 8% -4%, rgba(103, 88, 235, .19), transparent 32rem),
    radial-gradient(circle at 94% 12%, rgba(40, 112, 220, .15), transparent 31rem),
    radial-gradient(circle at 65% 100%, rgba(190, 67, 129, .1), transparent 34rem),
    var(--paper);
}

::selection { background: rgba(98, 84, 232, .24); }

button, input, textarea, select { font-family: inherit; }
button { -webkit-tap-highlight-color: transparent; }

#app-shell { grid-template-columns: 286px minmax(0, 1fr); }

.sidebar {
  margin: 12px 0 12px 12px;
  height: calc(100vh - 24px);
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 24px;
  background:
    linear-gradient(152deg, rgba(255,255,255,.08), rgba(255,255,255,.015) 36%),
    radial-gradient(circle at 20% 4%, rgba(137, 119, 255, .28), transparent 32%),
    linear-gradient(180deg, var(--sidebar), var(--sidebar-2));
  box-shadow: 0 24px 65px rgba(9, 13, 24, .24), inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter: blur(28px) saturate(135%);
  -webkit-backdrop-filter: blur(28px) saturate(135%);
}

.brand { padding: 4px 8px 18px; }
.brand-mark {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(145deg, #897aff, #5a8eea 56%, #dc6c9f);
  box-shadow: 0 12px 30px rgba(79, 69, 205, .38), inset 0 1px 0 rgba(255,255,255,.45);
}
.brand-mark::after {
  content: "";
  position: absolute;
  inset: 1px 4px auto;
  height: 42%;
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(255,255,255,.46), transparent);
  pointer-events: none;
}
.brand-title { color: #fff; }
.brand-subtitle { color: rgba(235,239,250,.64); }
.dev-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 23px;
  padding: 3px 8px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  color: #fff;
  background: rgba(255,255,255,.11);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
  font-size: .64rem;
  font-weight: 900;
  letter-spacing: .1em;
}

.sidebar-language-flags {
  gap: 7px;
  border-color: rgba(255,255,255,.1);
  background: rgba(255,255,255,.045);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.nav-item {
  min-height: 43px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: rgba(226,232,244,.76);
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}
.nav-item:hover {
  color: #fff;
  border-color: rgba(255,255,255,.08);
  background: rgba(255,255,255,.075);
  transform: translateX(2px);
}
.nav-item.active {
  color: #fff;
  border-color: rgba(169,157,255,.24);
  background: linear-gradient(135deg, rgba(137,120,255,.27), rgba(91,143,232,.13));
  box-shadow: inset 3px 0 0 #a99dff, inset 0 1px 0 rgba(255,255,255,.08), 0 8px 18px rgba(0,0,0,.10);
}

.stage-chip {
  border-color: rgba(255,255,255,.11);
  background: rgba(255,255,255,.045);
  transition: .15s ease;
}
.stage-chip:hover { background: rgba(255,255,255,.09); color: #fff; }
.stage-chip.active {
  color: #1e2431;
  border-color: rgba(255,255,255,.72);
  background: rgba(255,255,255,.88);
  box-shadow: 0 7px 20px rgba(0,0,0,.16);
}

.main-area { min-height: 100vh; }
.topbar {
  height: 72px;
  margin: 12px 12px 0 12px;
  padding: 0 24px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255,255,255,.64);
  box-shadow: 0 12px 38px rgba(40,55,86,.08), inset 0 1px 0 rgba(255,255,255,.78);
  backdrop-filter: blur(28px) saturate(145%);
  -webkit-backdrop-filter: blur(28px) saturate(145%);
}
html[data-theme="dark"] .topbar {
  background: rgba(22,27,38,.68);
  box-shadow: 0 15px 42px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08);
}
.topbar-title { font-size: .98rem; }
.topbar-controls { display: flex; align-items: center; gap: 7px; margin-left: auto; margin-right: 11px; }
.topbar-control {
  min-width: 38px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--muted);
  background: rgba(255,255,255,.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 4px 12px rgba(45,55,80,.05);
  cursor: pointer;
  transition: .15s ease;
}
html[data-theme="dark"] .topbar-control { background: rgba(255,255,255,.045); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.topbar-control:hover { color: var(--ink); border-color: rgba(98,84,232,.34); background: var(--accent-soft); transform: translateY(-1px); }
.topbar-control.active { color: var(--accent); border-color: rgba(98,84,232,.32); background: var(--accent-soft); }
.topbar-control .control-label { font-size: .68rem; font-weight: 900; letter-spacing: .06em; }
.topbar-stats { gap: 10px; }
.mini-stat {
  min-height: 34px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,.35);
}
html[data-theme="dark"] .mini-stat { background: rgba(255,255,255,.035); }
.goal-ring { width: 39px; height: 39px; background: conic-gradient(var(--accent) var(--p), rgba(127,140,165,.18) 0); }
.goal-ring::after { background: var(--panel-solid); }

.view-root { width: min(1280px, calc(100% - 50px)); padding: 28px 0 72px; }

.glass-panel, .card, .lesson-block, .modal, .onboarding-window {
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow), inset 0 1px 0 var(--glass-highlight);
  backdrop-filter: blur(var(--glass-blur)) saturate(135%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(135%);
}

.card { border-radius: var(--radius); }
.card:hover { border-color: rgba(98,84,232,.24); }

.hero-v3 {
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, .8fr);
  min-height: 420px;
  padding: 34px;
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
  background:
    radial-gradient(circle at 92% 2%, rgba(255,255,255,.29), transparent 28%),
    radial-gradient(circle at 4% 100%, rgba(90,166,255,.26), transparent 37%),
    linear-gradient(135deg, rgba(31,39,69,.98), rgba(84,68,211,.94) 54%, rgba(58,132,214,.9) 82%, rgba(216,95,150,.88));
  box-shadow: 0 30px 85px rgba(48,50,120,.28), inset 0 1px 0 rgba(255,255,255,.25);
}
html[data-theme="dark"] .hero-v3 {
  background:
    radial-gradient(circle at 92% 2%, rgba(255,255,255,.16), transparent 28%),
    radial-gradient(circle at 4% 100%, rgba(77,139,255,.21), transparent 38%),
    linear-gradient(135deg, rgba(21,25,42,.98), rgba(67,54,180,.94) 55%, rgba(35,94,162,.91) 83%, rgba(150,54,103,.88));
}
.hero-v3::before {
  content: "ROMANCE MATRIX";
  right: -1.5rem;
  bottom: -1.8rem;
  transform: rotate(-5deg);
  font-size: clamp(2.2rem, 6vw, 6rem);
  letter-spacing: .06em;
  color: rgba(255,255,255,.055);
}
.hero-topline { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.hero-v3 h1 { max-width: 800px; }
.hero-v3 p { color: rgba(239,242,255,.82); }
.hero-v3 .hero-metric {
  border-color: rgba(255,255,255,.15);
  background: rgba(9,15,33,.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09);
  backdrop-filter: blur(16px);
}
.hero-v3 .hero-metric span { color: rgba(236,240,255,.72); }
.hero-language-ribbon { margin-top: 4px; }
.hero-lang {
  border-color: rgba(255,255,255,.14);
  background: rgba(8,13,29,.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.hero-lang.known { border-color: rgba(120,211,177,.34); background: rgba(36,139,102,.14); }
.hero-lang.target { border-color: rgba(190,182,255,.38); background: rgba(120,103,255,.18); }
.hero-lang.neutral { opacity: .63; }

.btn {
  min-height: 41px;
  border-radius: 11px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24);
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.99); }
.btn-primary {
  background: linear-gradient(180deg, #7165ef, #5a4bd7);
  box-shadow: 0 10px 24px rgba(84,69,205,.26), inset 0 1px 0 rgba(255,255,255,.32);
}
.btn-primary:hover { background: linear-gradient(180deg, #7c71f4, #6253df); }
.btn-accent {
  color: #fff;
  background: linear-gradient(180deg, #428edc, #3474c5);
  box-shadow: 0 10px 24px rgba(48,119,198,.25), inset 0 1px 0 rgba(255,255,255,.3);
}
.btn-light { border-color: rgba(255,255,255,.56); background: rgba(255,255,255,.93); box-shadow: 0 11px 26px rgba(17,24,47,.18), inset 0 1px 0 #fff; }
.btn-ghost { border-color: var(--line-strong); background: rgba(255,255,255,.22); }
html[data-theme="dark"] .btn-ghost { background: rgba(255,255,255,.035); }
.btn-soft { background: var(--accent-soft); color: var(--accent); }
.btn-danger { background: var(--red-soft); color: var(--red); }
.btn-small { min-height: 34px; }

.profile-language-legend { display: grid; gap: 10px; margin: 17px 0 16px; }
.profile-language-legend > div { display: grid; grid-template-columns: 75px minmax(0,1fr); gap: 10px; align-items: center; }
.profile-language-legend > div > span { color: rgba(239,242,255,.65); font-size: .68rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.profile-language-legend > div > div { display: flex; flex-wrap: wrap; gap: 7px; }
.profile-language-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 31px;
  padding: 5px 9px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px;
  background: rgba(255,255,255,.09);
  font-size: .72rem;
}
.profile-language-chip.known { border-color: rgba(110,211,173,.29); }
.profile-language-chip.target { border-color: rgba(190,182,255,.34); }
.settings-legend > div > span { color: var(--muted); }
.settings-legend .profile-language-chip { color: var(--ink); border-color: var(--line); background: var(--panel-2); }

.flag-frame {
  --flag-glow: rgba(98,84,232,.22);
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  width: 30px;
  height: 21px;
  padding: 0;
  overflow: hidden;
  border: 1px solid #242020;
  border-radius: 6px;
  background: transparent;
  box-shadow: none;
  vertical-align: middle;
}
.flag-frame::after {
  content: none;
  position: absolute;
  inset: -5px;
  z-index: -1;
  border-radius: 9px;
  background: var(--flag-glow);
  filter: blur(8px);
  opacity: .42;
  pointer-events: none;
}
.flag-frame svg { display: block; width: 100%; height: 100%; border-radius: 0; overflow: hidden; }
.flag-frame.sm { width: 25px; height: 17px; border-radius: 5px; }
.flag-frame.sm svg { border-radius: 3px; }
.flag-frame.lg { width: 44px; height: 30px; border-radius: 9px; }
.flag-frame.lg svg { border-radius: 7px; }
.flag-en { --flag-glow: rgba(55,92,165,.31); }
.flag-es { --flag-glow: rgba(225,161,15,.31); }
.flag-ca { --flag-glow: rgba(211,52,60,.27); }
.flag-fr { --flag-glow: rgba(32,94,178,.29); }
.flag-it { --flag-glow: rgba(28,150,85,.28); }
.flag-pt { --flag-glow: rgba(39,173,78,.34); }
.flag-ro { --flag-glow: rgba(52,89,181,.30); }

.language-strip { gap: 11px; }
.language-tile {
  position: relative;
  overflow: hidden;
  min-height: 132px;
  border-radius: 18px;
  background: rgba(255,255,255,.52);
  box-shadow: 0 10px 30px rgba(40,53,84,.075), inset 0 1px 0 rgba(255,255,255,.73);
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
}
html[data-theme="dark"] .language-tile { background: rgba(255,255,255,.04); box-shadow: 0 12px 32px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.055); }
.language-tile::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  opacity: .75;
  background: linear-gradient(90deg, transparent, var(--tile-accent, var(--accent)), transparent);
}
.language-tile.lang-es { --tile-accent:#e9b719; }
.language-tile.lang-ca { --tile-accent:#db4a50; }
.language-tile.lang-fr { --tile-accent:#3a72c5; }
.language-tile.lang-it { --tile-accent:#31a46b; }
.language-tile.lang-pt { --tile-accent:#4bbf67; }
.language-tile.lang-ro { --tile-accent:#4f75c5; }
.language-tile.bridge { border-color: rgba(72,177,134,.24); }
.language-tile.target { border-color: rgba(98,84,232,.31); background: linear-gradient(180deg, rgba(255,255,255,.67), rgba(244,242,255,.54)); }
html[data-theme="dark"] .language-tile.target { background: linear-gradient(180deg, rgba(146,135,255,.11), rgba(255,255,255,.035)); }
.language-tile.neutral { opacity: .78; }
.language-tile-head { min-height: 37px; }
.language-tile-head strong { font-size: .76rem; }
.language-tile-head small { font-size: .6rem; }
.language-value-row { align-items: flex-start; }
.language-value-wrap { flex: 1 1 auto; min-width: 0; }
.language-value { border-top-color: var(--line); font-size: .97rem; }

.ipa-text {
  display: inline;
  margin-left: 6px;
  color: var(--muted);
  font-family: "Segoe UI", "Noto Sans", sans-serif;
  font-size: .72em;
  font-weight: 550;
  letter-spacing: .01em;
  overflow-wrap: anywhere;
}
.ipa-text.block { display: block; margin: 5px 0 0; font-size: .74rem; line-height: 1.45; }
html[data-ipa="off"] .ipa-text { display: none !important; }

.audio-btn {
  position: relative;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(98,84,232,.2);
  background: linear-gradient(180deg, rgba(255,255,255,.76), rgba(241,239,255,.72));
  color: var(--accent);
  box-shadow: 0 7px 18px rgba(66,61,140,.10), inset 0 1px 0 rgba(255,255,255,.78);
  transition: transform .14s ease, background .14s ease, box-shadow .14s ease;
}
html[data-theme="dark"] .audio-btn { background: rgba(146,135,255,.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.audio-btn:hover { transform: translateY(-1px); background: var(--accent-soft); }
.audio-btn.loading { animation: audio-pulse .9s ease-in-out infinite alternate; }
.audio-btn.playing { color: #fff; background: var(--accent); box-shadow: 0 0 0 5px rgba(98,84,232,.12), 0 8px 22px rgba(98,84,232,.24); }
.audio-btn.mini-audio, .audio-btn.inline-audio { width: 29px; height: 29px; font-size: .77rem; }
.audio-btn.prompt-audio { width: 48px; height: 48px; font-size: 1.05rem; }
@keyframes audio-pulse { to { box-shadow: 0 0 0 7px rgba(98,84,232,.12); } }

.exercise-card {
  border-radius: 24px;
  padding: 28px;
  background: rgba(255,255,255,.64);
}
html[data-theme="dark"] .exercise-card { background: rgba(26,31,44,.72); }
.exercise-prompt-audio, .reading-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.exercise-prompt-audio h2 { margin-top: 8px; }
.prompt-source-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 850;
}

.target-grid { grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); gap: 14px; }
.target-card {
  border-radius: 18px;
  padding: 16px;
  background: rgba(255,255,255,.63);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.76), 0 8px 24px rgba(44,57,86,.055);
}
html[data-theme="dark"] .target-card { background: rgba(255,255,255,.035); box-shadow: inset 0 1px 0 rgba(255,255,255,.055); }
.target-card.correct { border-color: rgba(46,172,115,.46); background: rgba(62,185,130,.105); }
.target-card.almost { border-color: rgba(222,156,46,.5); background: rgba(239,178,63,.12); }
.target-card.wrong { border-color: rgba(214,84,94,.48); background: rgba(225,91,101,.10); }
.target-head { min-height: 39px; }
.answer-input, .verb-cell-input, .search-input, .select-input {
  border-color: var(--line-strong);
  color: var(--ink);
  background: rgba(255,255,255,.73);
  box-shadow: inset 0 1px 2px rgba(24,34,55,.035), 0 1px 0 rgba(255,255,255,.8);
}
html[data-theme="dark"] .answer-input,
html[data-theme="dark"] .verb-cell-input,
html[data-theme="dark"] .search-input,
html[data-theme="dark"] .select-input {
  color: var(--ink);
  background: rgba(7,10,16,.34);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.2), 0 1px 0 rgba(255,255,255,.04);
}
.answer-input { min-height: 54px; border-radius: 12px; font-size: 1rem; }
.answer-input:disabled { -webkit-text-fill-color: var(--ink); }
.answer-recap {
  margin-top: 11px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255,255,255,.42);
}
html[data-theme="dark"] .answer-recap { background: rgba(0,0,0,.12); }
.answer-recap > span { display: block; margin-bottom: 4px; color: var(--muted); font-size: .65rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.answer-recap-main { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.answer-recap.correct { border-color: rgba(46,172,115,.25); }
.answer-recap.almost { border-color: rgba(222,156,46,.3); }
.answer-recap.wrong { border-color: rgba(214,84,94,.3); }

.accent-key {
  min-width: 32px;
  min-height: 32px;
  border-radius: 9px;
  color: var(--ink);
  background: rgba(255,255,255,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.76), 0 3px 10px rgba(42,54,80,.05);
}
html[data-theme="dark"] .accent-key { background: rgba(255,255,255,.045); }
.accent-key:hover { border-color: rgba(98,84,232,.32); background: var(--accent-soft); }

.feedback-box {
  border: 1px solid rgba(76,142,235,.13);
  border-radius: 15px;
  background: var(--blue-soft);
  color: var(--ink);
}
.feedback-box.success { border-color: rgba(46,178,119,.17); background: var(--green-soft); color: var(--ink); }
.feedback-box.warning { border-color: rgba(239,173,59,.18); background: var(--amber-soft); color: var(--ink); }
.feedback-box.error { border-color: rgba(225,85,96,.18); background: var(--red-soft); color: var(--ink); }

.reference-section, .pattern-panel, .verb-base-panel, .focus-panel {
  border-radius: 18px;
  background: rgba(247,249,255,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.64);
}
html[data-theme="dark"] .reference-section,
html[data-theme="dark"] .pattern-panel,
html[data-theme="dark"] .verb-base-panel,
html[data-theme="dark"] .focus-panel { background: rgba(255,255,255,.025); }

.module-card {
  min-height: 224px;
  border-radius: 19px;
  background: rgba(255,255,255,.58);
  transition: border-color .16s ease, box-shadow .16s ease;
}
html[data-theme="dark"] .module-card { background: rgba(255,255,255,.035); }
.module-card:hover { border-color: var(--line); box-shadow: var(--shadow), inset 0 1px 0 var(--glass-highlight); }
.module-card.current-route {
  border-color: rgba(98,84,232,.34);
  box-shadow: 0 17px 44px rgba(98,84,232,.12), inset 0 1px 0 rgba(255,255,255,.72);
}
.module-card.complete { border-color: rgba(47,165,112,.32); }
.module-number { border: 1px solid var(--line); background: var(--panel-2); }

.mini-language-values {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 9px;
}
.mini-language-value {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--panel-2);
}
.mini-language-value.target { border-color: rgba(98,84,232,.25); }
.mini-language-value.known { border-color: rgba(43,166,112,.2); }
.mini-language-value > span:not(.flag-frame) { min-width: 0; }
.mini-language-value strong { display: block; max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .76rem; }
.source-list-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.source-list-title > span { min-width: 0; }
.rich-list-row { padding: 15px 17px; }
.sentence-list-row { align-items: flex-start; }

.rule-token {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 10px;
  background: var(--panel-2);
  font-family: inherit;
  font-weight: 750;
}

.lesson-block, .culture-card, .writing-route-card, .language-callout {
  background: var(--panel);
  box-shadow: var(--shadow), inset 0 1px 0 var(--glass-highlight);
}
.lesson-block-head { background: linear-gradient(135deg, rgba(255,255,255,.55), rgba(98,84,232,.055)); }
html[data-theme="dark"] .lesson-block-head { background: linear-gradient(135deg, rgba(255,255,255,.035), rgba(98,84,232,.08)); }

.verb-table-wrap {
  border-radius: 17px;
  background: var(--panel);
}
.verb-table th { background: var(--panel-2); }
.verb-table td, .verb-table th { border-color: var(--line); }
.verb-unavailable { background: rgba(100,110,130,.06); }
.answer-mini-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin-top: 7px; }
.answer-mini-wrap .ipa-text { width: 100%; margin-left: 0; }
.verb-preview-head { gap: 10px; justify-content: flex-start; }
.verb-preview-head > span { min-width: 0; }
.verb-preview-head strong { display: block; font-size: 1.14rem; }

.reading-passage { font-size: 1.03rem; line-height: 1.78; }
.reading-options { display: grid; gap: 8px; margin-top: 11px; }
.reading-option {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: rgba(255,255,255,.34);
}
html[data-theme="dark"] .reading-option { background: rgba(255,255,255,.025); }
.reading-option.correct { border-color: rgba(46,172,115,.32); background: var(--green-soft); }
.reading-option.wrong { border-color: rgba(214,84,94,.32); background: var(--red-soft); }
.reading-option-copy { display: grid; gap: 5px; }
.option-pronunciation, .correction-audio-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.correction-audio-line { justify-content: space-between; }

.theme-choice-row { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 9px; }
.theme-choice {
  min-height: 74px;
  border: 1px solid var(--line);
  border-radius: 14px;
  display: grid;
  place-items: center;
  gap: 3px;
  color: var(--muted);
  background: var(--panel-2);
  cursor: pointer;
}
.theme-choice span { font-size: 1.25rem; }
.theme-choice strong { font-size: .73rem; text-transform: capitalize; }
.theme-choice.active { color: var(--accent); border-color: rgba(98,84,232,.38); background: var(--accent-soft); box-shadow: inset 0 1px 0 rgba(255,255,255,.5); }
.settings-profile-head { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.settings-profile-head h2 { display: flex; align-items: center; gap: 9px; margin: 6px 0 0; }

.translation-source-note {
  display: inline-flex;
  margin-left: 6px;
  color: var(--muted);
  font-size: .62rem;
  font-weight: 700;
  opacity: .78;
}
.native-text.block { display: block; }
.translation-unavailable .translation-source-note { color: var(--amber); }

/* Three-step onboarding */
.onboarding-layer {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow-y: auto;
  background:
    radial-gradient(circle at 12% 7%, rgba(110,92,247,.31), transparent 34rem),
    radial-gradient(circle at 91% 84%, rgba(67,146,232,.26), transparent 32rem),
    rgba(10,14,24,.64);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
}
.onboarding-window {
  width: min(980px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  border-radius: 28px;
  padding: 26px;
  background: rgba(246,249,255,.88);
  box-shadow: var(--shadow-float), inset 0 1px 0 rgba(255,255,255,.9);
}
html[data-theme="dark"] .onboarding-window { background: rgba(24,29,42,.91); }
.onboarding-brand { display: flex; align-items: center; gap: 11px; }
.onboarding-brand > div:nth-child(2) { display: grid; }
.onboarding-brand small { color: var(--muted); }
.onboarding-brand .dev-badge { margin-left: auto; color: var(--accent); border-color: rgba(98,84,232,.24); background: var(--accent-soft); }
.onboarding-progress { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 22px 0 25px; }
.onboarding-progress span { height: 5px; border-radius: 999px; background: rgba(115,127,153,.18); }
.onboarding-progress span.active { background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 0 15px rgba(98,84,232,.24); }
.onboarding-copy { max-width: 720px; margin-bottom: 20px; }
.onboarding-eyebrow { color: var(--accent); font-size: .68rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.onboarding-copy h1 { margin: 8px 0 8px; font-size: clamp(1.8rem, 4vw, 3.15rem); line-height: 1.04; letter-spacing: -.05em; }
.onboarding-copy p { margin: 0; color: var(--muted); }
.onboarding-language-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 11px; }
.onboarding-language-grid.native-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
.onboarding-language-card {
  position: relative;
  min-height: 94px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 17px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  text-align: left;
  background: rgba(255,255,255,.57);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 8px 24px rgba(43,55,83,.055);
  cursor: pointer;
  transition: .15s ease;
}
html[data-theme="dark"] .onboarding-language-card { background: rgba(255,255,255,.035); box-shadow: inset 0 1px 0 rgba(255,255,255,.055); }
.onboarding-language-card:hover { transform: translateY(-2px); border-color: rgba(98,84,232,.35); box-shadow: 0 13px 31px rgba(68,65,145,.11), inset 0 1px 0 rgba(255,255,255,.8); }
.onboarding-language-card.selected { border-color: rgba(98,84,232,.48); background: linear-gradient(135deg, rgba(98,84,232,.13), rgba(85,151,235,.08)); box-shadow: 0 11px 30px rgba(98,84,232,.12), inset 0 1px 0 rgba(255,255,255,.72); }
.onboarding-language-card.disabled { opacity: .42; cursor: not-allowed; filter: grayscale(.45); }
.onboarding-check { position: absolute; top: 9px; right: 10px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--accent); font-size: .7rem; font-weight: 900; opacity: 0; transform: scale(.75); transition: .15s ease; }
.onboarding-language-card.selected .onboarding-check { opacity: 1; transform: scale(1); }
.onboarding-language-copy { min-width: 0; display: grid; }
.onboarding-language-copy strong { font-size: .9rem; }
.onboarding-language-copy small { color: var(--muted); font-size: .68rem; }
.onboarding-none {
  margin-top: 12px;
  min-height: 39px;
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--muted);
  background: var(--panel-2);
  cursor: pointer;
}
.onboarding-none.selected { color: var(--accent); border-color: rgba(98,84,232,.34); background: var(--accent-soft); }
.onboarding-help-wrap { margin-top: 14px; }
.onboarding-help { margin-top: 9px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 13px; background: var(--panel-2); }
.onboarding-help p { margin: 4px 0 0; color: var(--muted); font-size: .8rem; }
.onboarding-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.onboarding-actions .btn { min-width: 120px; }

.modal-layer { background: rgba(9,13,23,.66); backdrop-filter: blur(16px); }
.modal { border-radius: 24px; background: rgba(250,252,255,.91); }
html[data-theme="dark"] .modal { background: rgba(25,30,43,.94); }
.toast { border: 1px solid rgba(255,255,255,.12); border-radius: 13px; backdrop-filter: blur(18px); }

@media (max-width: 1120px) {
  #app-shell { grid-template-columns: 264px minmax(0,1fr); }
  .hero-v3 { grid-template-columns: 1fr; }
  .hero-v3 .hero-metrics { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .onboarding-language-grid.native-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

@media (max-width: 820px) {
  #app-shell { display: block; }
  .sidebar {
    margin: 0;
    height: 100vh;
    border-radius: 0 24px 24px 0;
    width: min(320px, 88vw);
  }
  .topbar { margin: 8px 8px 0; padding: 0 14px; border-radius: 17px; }
  .view-root { width: min(100% - 20px, 1280px); padding-top: 16px; }
  .topbar-controls { margin-right: 6px; }
  .topbar-control .control-label { display: none; }
  .topbar-control { width: 36px; padding: 0; }
  .hero-v3 { padding: 25px; min-height: auto; }
  .hero-v3 .hero-metrics { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .onboarding-language-grid, .onboarding-language-grid.native-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .mini-language-value strong { max-width: 190px; }
}

@media (max-width: 590px) {
  .topbar { height: 65px; }
  .topbar-title { max-width: 36vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-stats { gap: 5px; }
  .mini-stat { padding: 0 6px; }
  .topbar-stats .mini-stat:first-child { display: none; }
  .goal-ring { width: 37px; height: 37px; }
  .view-root { width: min(100% - 16px, 1280px); padding-bottom: 40px; }
  .hero-v3 { padding: 21px; border-radius: 21px; }
  .hero-v3 h1 { font-size: clamp(1.9rem, 9vw, 2.65rem); }
  .hero-v3 .hero-metrics { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .hero-metric { min-height: 88px; padding: 12px; }
  .profile-language-legend > div { grid-template-columns: 1fr; gap: 5px; }
  .hero-language-ribbon { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .exercise-card, .panel { padding: 17px; border-radius: 20px; }
  .exercise-prompt-audio { align-items: flex-start; }
  .audio-btn.prompt-audio { width: 43px; height: 43px; }
  .target-grid, .language-strip { grid-template-columns: 1fr; }
  .target-card { padding: 15px; }
  .answer-input { font-size: 1rem; }
  .exercise-actions { position: sticky; bottom: 8px; z-index: 5; padding: 9px; margin-left: -5px; margin-right: -5px; border: 1px solid var(--line); border-radius: 15px; background: rgba(250,252,255,.86); box-shadow: 0 15px 40px rgba(33,45,75,.14); backdrop-filter: blur(18px); }
  html[data-theme="dark"] .exercise-actions { background: rgba(24,29,42,.88); }
  .exercise-actions > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px,1fr)); }
  .exercise-actions .btn { width: 100%; }
  .onboarding-layer { padding: 8px; align-items: stretch; }
  .onboarding-window { width: 100%; max-height: calc(100vh - 16px); padding: 18px; border-radius: 22px; }
  .onboarding-language-grid, .onboarding-language-grid.native-grid { grid-template-columns: 1fr; gap: 8px; }
  .onboarding-language-card { min-height: 74px; padding: 12px; }
  .onboarding-language-card .flag-frame.lg { width: 38px; height: 26px; }
  .onboarding-actions { position: sticky; bottom: -18px; margin: 18px -18px -18px; padding: 14px 18px; background: rgba(248,251,255,.92); backdrop-filter: blur(18px); }
  html[data-theme="dark"] .onboarding-actions { background: rgba(24,29,42,.94); }
  .onboarding-actions .btn { min-width: 0; flex: 1; }
  .rich-list-row { grid-template-columns: 1fr; }
  .rich-list-row > .btn { width: 100%; }
  .mini-language-values { display: grid; grid-template-columns: 1fr; }
  .mini-language-value strong { max-width: 100%; white-space: normal; }
  .theme-choice-row { grid-template-columns: repeat(3, 1fr); }
  .settings-profile-head { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

.nav-item .nav-icon { width: 21px; flex: 0 0 21px; text-align: center; opacity: .9; }
.nav-item .nav-label { width: auto; flex: 1 1 auto; text-align: left; opacity: 1; }
.brand > .dev-badge { margin-left: auto; }

.answer-recap > span.ipa-text { color: var(--muted); font-size: .74rem; font-weight: 550; letter-spacing: .01em; text-transform: none; }
.answer-recap > .answer-recap-label { display: block; margin-bottom: 4px; color: var(--muted); font-size: .65rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }

@media (max-width: 820px) {
  .topbar-control.ipa-toggle .control-label { display: inline; font-size: .57rem; letter-spacing: .02em; }
}

/* ========================================================================
   Romance Matrix DEV 4 — foundations-first course shell
   ======================================================================== */

.module-card { cursor: pointer; }
.module-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
  box-shadow: 0 16px 42px rgba(44,55,86,.12), inset 0 1px 0 var(--glass-highlight);
}
.module-card-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.module-access-chip {
  max-width: 64%; padding: 4px 8px; border: 1px solid var(--line); border-radius: 999px;
  color: var(--muted); background: color-mix(in srgb, var(--panel) 78%, transparent);
  font-size: .62rem; font-weight: 850; letter-spacing: .025em; white-space: nowrap; overflow:hidden; text-overflow:ellipsis;
}
.module-card.current-route .module-access-chip { color: var(--accent); border-color: rgba(98,84,232,.3); background: var(--accent-soft); }
.module-card.complete .module-access-chip { color: var(--green); border-color: rgba(47,138,98,.25); background: var(--green-soft); }
.module-preview-note { min-height: 0; }

.module-compact-header {
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:22px; align-items:center;
  padding: clamp(20px, 3vw, 32px); border-radius: 26px;
  background:
    radial-gradient(circle at 92% 5%, rgba(98,84,232,.16), transparent 31%),
    linear-gradient(135deg, color-mix(in srgb, var(--panel) 94%, transparent), color-mix(in srgb, var(--accent-soft) 64%, var(--panel)));
  overflow:hidden;
}
.module-compact-header h1 { margin: 12px 0 7px; font-size:clamp(1.85rem,4vw,3.5rem); line-height:1.03; letter-spacing:-.052em; }
.module-compact-header p { max-width:820px; margin:0; color:var(--muted); font-size:.98rem; }
.module-header-action { display:flex; justify-content:flex-end; align-items:center; min-width:170px; }
.route-lock-note { display:inline-flex; max-width:220px; padding:9px 12px; border:1px solid var(--line); border-radius:13px; color:var(--muted); background:var(--panel-2); font-size:.76rem; font-weight:750; text-align:center; }

.module-page-tabs {
  display:flex; gap:8px; overflow-x:auto; padding: 10px 2px 12px; margin-top:10px;
  scrollbar-width: thin;
}
.module-page-tab {
  flex:0 0 auto; min-height:46px; display:flex; align-items:center; gap:8px; padding:8px 13px;
  border:1px solid var(--line); border-radius:14px; color:var(--muted); background:color-mix(in srgb,var(--panel) 82%,transparent);
  box-shadow:inset 0 1px 0 var(--glass-highlight); cursor:pointer; font-weight:780; font-size:.76rem;
}
.module-page-tab span { width:23px; height:23px; display:grid; place-items:center; border-radius:8px; background:var(--panel-2); font-size:.68rem; }
.module-page-tab.active { color:var(--accent); border-color:rgba(98,84,232,.35); background:var(--accent-soft); box-shadow:0 8px 22px rgba(98,84,232,.12),inset 0 1px 0 rgba(255,255,255,.65); }
.module-page-tab:disabled { opacity:.4; cursor:not-allowed; }
.standard-tabs .module-page-tab { min-width:120px; justify-content:center; }

.foundation-page-shell { padding:0; overflow:hidden; border-radius:26px; }
.foundation-page-head { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:19px 22px; border-bottom:1px solid var(--line); background:linear-gradient(135deg,var(--panel),color-mix(in srgb,var(--accent-soft) 45%,var(--panel))); }
.foundation-page-head h2 { margin:3px 0 0; letter-spacing:-.03em; }
.page-counter { color:var(--muted); font-size:.66rem; font-weight:900; letter-spacing:.09em; }
.page-nav-buttons { display:flex; gap:7px; }
.page-nav-buttons .icon-btn { border:1px solid var(--line); background:var(--panel); }
.foundation-page-body { padding:clamp(16px,2.5vw,25px); }
.compact-theory-strip { display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px; align-items:start; margin-top:13px; padding:16px 19px; }
.compact-theory-strip strong { color:var(--accent); }
.compact-theory-strip p { margin:0; color:var(--muted); }
.compact-module-body { min-height:300px; }
.compact-module-grid { margin-top:0; }

/* Alphabet lab */
.alphabet-layout { display:grid; gap:18px; }
.alphabet-picker { display:grid; gap:9px; }
.alphabet-grid { display:grid; grid-template-columns:repeat(13,minmax(42px,1fr)); gap:7px; }
.alphabet-extra-grid { display:flex; flex-wrap:wrap; gap:7px; }
.alphabet-key {
  min-height:48px; border:1px solid var(--line); border-radius:13px; color:var(--ink); background:linear-gradient(180deg,var(--panel),var(--panel-2));
  box-shadow:0 5px 14px rgba(33,45,75,.05),inset 0 1px 0 var(--glass-highlight); cursor:pointer; font-size:1.05rem; font-weight:900;
  transition:.16s ease;
}
.alphabet-key.extra { min-width:55px; }
.alphabet-key:hover, .alphabet-key.active { color:#fff; border-color:transparent; background:linear-gradient(145deg,var(--accent),#8b78ff); box-shadow:0 9px 24px rgba(98,84,232,.25); transform:translateY(-1px); }
.letter-detail { display:flex; align-items:center; gap:17px; padding:17px 20px; background:linear-gradient(135deg,var(--panel-2),var(--accent-soft)); }
.letter-detail-symbol { width:70px; height:70px; display:grid; place-items:center; border-radius:21px; color:#fff; background:linear-gradient(145deg,var(--accent),#8a77f7); box-shadow:0 13px 30px rgba(98,84,232,.24); font-size:2.2rem; font-weight:950; }
.letter-detail h2 { margin:6px 0 0; }
.alphabet-language-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px; }
.alphabet-language-card {
  position:relative; overflow:hidden; padding:16px; border:1px solid var(--line); border-radius:19px;
  background:color-mix(in srgb,var(--panel) 88%,transparent); box-shadow:0 10px 28px rgba(33,45,75,.06),inset 0 1px 0 var(--glass-highlight);
}
.alphabet-language-card::before { content:""; position:absolute; inset:-35% 55% 55% -20%; opacity:.16; filter:blur(18px); background:var(--accent); pointer-events:none; }
.alphabet-lang-head { position:relative; display:flex; align-items:center; gap:9px; }
.alphabet-lang-head strong,.alphabet-lang-head small { display:block; }
.alphabet-lang-head small { color:var(--muted); font-size:.65rem; }
.letter-name-line { position:relative; display:flex; align-items:center; gap:8px; margin:14px 0 9px; padding:11px 12px; border:1px solid var(--line); border-radius:14px; background:var(--panel-2); }
.letter-name { font-size:1.22rem; font-weight:900; }
.alphabet-language-card > p { min-height:58px; margin:0 0 10px; color:var(--muted); font-size:.78rem; }
.alphabet-examples { display:grid; gap:7px; }
.alphabet-example { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:5px 8px; align-items:center; padding:8px 9px; border-radius:12px; background:color-mix(in srgb,var(--panel-2) 75%,transparent); }
.alphabet-example small { grid-column:1/-1; color:var(--muted); }

/* Foundation tables and cards */
.foundation-table-stack { display:grid; gap:12px; }
.foundation-row { padding:14px; border:1px solid var(--line); border-radius:18px; background:color-mix(in srgb,var(--panel-2) 64%,transparent); }
.foundation-row-label { display:inline-flex; margin-bottom:9px; padding:4px 9px; border-radius:999px; color:var(--accent); background:var(--accent-soft); font-size:.68rem; font-weight:900; }
.digraph-symbol { width:max-content; margin-bottom:10px; padding:5px 10px; border-radius:10px; color:#fff; background:var(--ink); font-size:1.1rem; font-weight:950; }
.foundation-card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px; }
.foundation-info-card { position:relative; min-height:154px; padding:16px; border:1px solid var(--line); border-radius:18px; background:var(--panel-2); overflow:hidden; }
.foundation-info-card h3 { margin:10px 0 6px; }
.foundation-info-card p { margin:0; color:var(--muted); font-size:.82rem; }
.foundation-card-lang { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:.74rem; font-weight:780; }
.foundation-card-audio { position:absolute; right:12px; bottom:12px; }
.foundation-text-card { max-width:860px; margin:0 auto; padding:clamp(18px,3vw,30px); border:1px solid var(--line); border-radius:22px; background:linear-gradient(135deg,var(--panel),var(--panel-2)); }
.foundation-text-card h3 { margin-top:0; }
.foundation-text-card p,.foundation-text-card li { color:var(--muted); line-height:1.75; }

.vowel-chart-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.vowel-card { min-height:126px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; border:1px solid var(--line); border-radius:18px; background:var(--panel-2); cursor:pointer; }
.vowel-card > strong { font-size:2rem; }
.vowel-card > span { display:flex; flex-wrap:wrap; justify-content:center; gap:5px 8px; }
.vowel-card small { display:flex; align-items:center; gap:4px; color:var(--muted); }
.flag-frame.xs { width:19px; height:13px; border-radius:4px; }

.gender-lab-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.gender-noun-card { padding:13px; border:1px solid var(--line); border-radius:18px; background:var(--panel-2); }
.gender-noun-gloss { margin-bottom:9px; color:var(--muted); font-size:.68rem; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.gender-form { width:100%; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:5px 9px; align-items:center; padding:8px 9px; border:0; border-bottom:1px solid var(--line); background:transparent; text-align:left; cursor:pointer; }
.gender-form:last-child { border-bottom:0; }
.gender-form > span { display:flex; align-items:center; gap:7px; }
.gender-form .ipa-text { grid-column:1/-1; margin-left:27px; }
.gender-badge { width:24px; height:24px; display:grid; place-items:center; border-radius:8px; font-style:normal; font-size:.64rem; font-weight:950; }
.gender-m { color:#255fa9; background:#e8f1ff; }
.gender-f { color:#a53d77; background:#fce8f3; }
.gender-n { color:#7251a5; background:#efe8ff; }

.sound-pair-grid,.stress-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.sound-pair-card,.stress-card { padding:15px; border:1px solid var(--line); border-radius:18px; background:var(--panel-2); }
.sound-pair-card h3 { width:42px; height:42px; display:grid; place-items:center; margin:0 0 10px; border-radius:13px; color:#fff; background:var(--accent); }
.sound-line,.stress-word { display:flex; align-items:center; gap:8px; min-height:40px; padding:7px 0; border-bottom:1px solid var(--line); }
.sound-line:last-child,.stress-word:last-child { border-bottom:0; }
.sound-line > span,.stress-word > span { flex:1; }
.sound-line strong { display:block; }
.stress-card .foundation-card-lang { margin-bottom:7px; }

.verb-model-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.verb-model-card { padding:16px; border:1px solid var(--line); border-radius:19px; background:var(--panel-2); }
.verb-model-card h3 { margin:9px 0 12px; }
.verb-infinitive-ribbon { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin-bottom:13px; }
.verb-infinitive-chip { min-width:0; display:flex; align-items:center; gap:5px; padding:4px 5px 4px 8px; border:1px solid var(--line); border-radius:11px; background:var(--panel); }
.verb-open-link { min-width:0; flex:1; display:flex; align-items:center; gap:6px; padding:3px 1px; border:0; color:inherit; background:transparent; cursor:pointer; text-align:left; }
.verb-open-link > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:780; }
.verb-open-link:hover { color:var(--accent); }
.audio-btn.micro-audio { width:24px; height:24px; margin-left:auto; font-size:.66rem; }

/* Sentence construction */
.sentence-builder { margin:15px 0; padding:13px; border:1px solid color-mix(in srgb,var(--accent) 26%,var(--line)); border-radius:17px; background:color-mix(in srgb,var(--accent-soft) 55%,var(--panel)); }
.sentence-builder-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.sentence-builder-head span { color:var(--muted); font-size:.7rem; }
.builder-language-stack { display:grid; gap:8px; }
.builder-language-row { display:grid; grid-template-columns:150px minmax(0,1fr); gap:10px; align-items:start; padding:9px; border:1px solid var(--line); border-radius:13px; background:color-mix(in srgb,var(--panel) 80%,transparent); }
.builder-lang-label { display:flex; align-items:center; gap:7px; padding-top:6px; font-size:.72rem; }
.builder-chips { display:flex; flex-wrap:wrap; gap:6px; }
.builder-chip { display:flex; flex-direction:column; align-items:flex-start; gap:1px; padding:6px 9px; border:1px solid var(--line); border-radius:10px; background:var(--panel-2); cursor:pointer; }
.builder-chip small { color:var(--muted); font-size:.57rem; text-transform:uppercase; letter-spacing:.06em; }
.builder-chip strong { font-size:.79rem; }
.builder-chip.kind-verb { color:#fff; border-color:transparent; background:linear-gradient(145deg,var(--accent),#8a77f7); box-shadow:0 6px 16px rgba(98,84,232,.2); }
.builder-chip.kind-verb small { color:rgba(255,255,255,.74); }
.builder-chip.kind-adjective { border-color:rgba(212,110,69,.3); background:rgba(234,133,90,.1); }
.builder-chip.kind-adverb { border-color:rgba(47,138,98,.3); background:rgba(47,138,98,.1); }
.builder-gallery { display:grid; gap:12px; }
.builder-sentence-card { padding:16px; }
.builder-sentence-source { display:flex; align-items:flex-start; gap:9px; }
.builder-sentence-source > div { flex:1; }

/* Verb explorer */
.verb-explorer-modal { overflow:hidden; display:flex; flex-direction:column; }
.verb-modal-audio { display:flex; align-items:center; gap:8px; margin-top:5px; }
.verb-explorer-language-tabs,.verb-explorer-tense-tabs { display:flex; gap:7px; overflow-x:auto; padding:9px 1px; }
.verb-explorer-language-tabs button,.verb-explorer-tense-tabs button { flex:0 0 auto; display:flex; align-items:center; gap:7px; padding:8px 11px; border:1px solid var(--line); border-radius:12px; color:var(--muted); background:var(--panel-2); cursor:pointer; font-size:.72rem; font-weight:800; }
.verb-explorer-language-tabs button.active,.verb-explorer-tense-tabs button.active { color:var(--accent); border-color:rgba(98,84,232,.38); background:var(--accent-soft); }
.verb-explorer-tense-tabs button.current-tense-glow { box-shadow:0 0 0 3px rgba(98,84,232,.12),0 10px 24px rgba(98,84,232,.16); }
.verb-explorer-table-wrap { overflow:auto; margin-top:8px; border:1px solid var(--line); border-radius:16px; }
.verb-explorer-table { width:100%; min-width:620px; border-collapse:collapse; }
.verb-explorer-table th,.verb-explorer-table td { padding:10px 12px; border-bottom:1px solid var(--line); text-align:left; }
.verb-explorer-table th { position:sticky; top:0; z-index:1; background:var(--panel-2); font-size:.69rem; text-transform:uppercase; letter-spacing:.06em; }
.verb-explorer-table tr:last-child td { border-bottom:0; }
.component-language-heading { display:flex; align-items:center; gap:8px; margin:14px 0; }

/* Foundation quiz and adaptive in-course SRS */
.foundation-listen-stage { display:grid; justify-items:center; gap:10px; padding:22px; border:1px solid var(--line); border-radius:20px; background:linear-gradient(135deg,var(--panel-2),var(--accent-soft)); }
.foundation-letter-hidden { width:64px; height:64px; display:grid; place-items:center; border-radius:20px; color:var(--accent); background:var(--panel); font-size:2rem; font-weight:950; box-shadow:0 10px 28px rgba(98,84,232,.13); }
.audio-btn.foundation-listen-button { width:58px; height:58px; font-size:1.25rem; }
.foundation-listen-stage p { margin:0; color:var(--muted); }
.foundation-option-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:15px; }
.foundation-option { position:relative; display:grid; place-items:center; min-height:74px; border:1px solid var(--line); border-radius:17px; background:var(--panel-2); cursor:pointer; font-size:1.42rem; font-weight:950; }
.foundation-option input { position:absolute; opacity:0; pointer-events:none; }
.foundation-option:has(input:checked) { color:var(--accent); border-color:rgba(98,84,232,.4); background:var(--accent-soft); box-shadow:0 8px 20px rgba(98,84,232,.1); }
.foundation-option.correct { color:var(--green); border-color:rgba(47,138,98,.4); background:var(--green-soft); }
.foundation-option.wrong { color:var(--red); border-color:rgba(187,78,78,.4); background:var(--red-soft); }

.adaptive-rating { margin:17px 0 5px; padding:14px; border:1px solid var(--line); border-radius:17px; background:linear-gradient(135deg,var(--panel-2),color-mix(in srgb,var(--accent-soft) 38%,var(--panel))); }
.adaptive-rating > strong { display:block; margin-bottom:9px; }
.adaptive-rating-buttons { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.adaptive-rating-buttons button { min-height:55px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; border:1px solid var(--line); border-radius:13px; background:var(--panel); cursor:pointer; font-weight:850; }
.adaptive-rating-buttons button small { color:var(--muted); font-size:.64rem; }
.adaptive-rating-buttons button[data-rating="again"] { border-color:rgba(187,78,78,.25); }
.adaptive-rating-buttons button[data-rating="hard"] { border-color:rgba(170,111,18,.3); }
.adaptive-rating-buttons button[data-rating="good"] { border-color:rgba(47,138,98,.28); }
.adaptive-rating-buttons button[data-rating="easy"] { border-color:rgba(98,84,232,.28); }
.adaptive-rating-buttons button:hover { transform:translateY(-1px); box-shadow:0 8px 20px rgba(33,45,75,.09); }
.adaptive-rating-confirmed { margin:15px 0 5px; padding:11px 13px; border:1px solid rgba(47,138,98,.25); border-radius:13px; color:var(--green); background:var(--green-soft); font-weight:800; }
.adaptive-summary-note { display:grid; gap:5px; max-width:630px; margin:20px auto; padding:16px; border:1px solid var(--line); border-radius:17px; background:var(--panel-2); }
.adaptive-summary-note span { color:var(--muted); }
.session-summary-card { max-width:800px; margin:20px auto; text-align:center; }
.session-summary-card h1 { margin:14px 0 0; font-size:clamp(3rem,9vw,6rem); letter-spacing:-.08em; }

/* Quick settings */
.quick-setting-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:17px 0; }
.quick-setting-card { min-height:82px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px; border:1px solid var(--line); border-radius:17px; background:var(--panel-2); cursor:pointer; text-align:left; }
.quick-setting-card > span { color:var(--muted); font-size:.76rem; font-weight:800; }
.quick-setting-card > strong { color:var(--accent); }
.quick-setting-card.toggle-card { cursor:default; }
.quick-setting-card input { width:22px; height:22px; accent-color:var(--accent); }

/* IPA is exact only; pending lookup occupies no visible space. */
.ipa-text.pending:empty { display:none; }
html[data-ipa="off"] .ipa-text { display:none !important; }

/* Audio icon remains static; only a restrained focus ring is used. */
.audio-btn.loading,.audio-btn.audio-active { animation:none !important; color:inherit !important; background:var(--accent-soft) !important; box-shadow:0 0 0 3px rgba(98,84,232,.11) !important; }
.audio-btn.playing { color:inherit !important; background:var(--accent-soft) !important; box-shadow:0 0 0 3px rgba(98,84,232,.11) !important; }

html[data-theme="dark"] .module-compact-header,
html[data-theme="dark"] .foundation-page-head { background:linear-gradient(135deg,rgba(255,255,255,.04),rgba(98,84,232,.1)); }
html[data-theme="dark"] .foundation-page-shell,
html[data-theme="dark"] .foundation-info-card,
html[data-theme="dark"] .foundation-row,
html[data-theme="dark"] .gender-noun-card,
html[data-theme="dark"] .sound-pair-card,
html[data-theme="dark"] .stress-card,
html[data-theme="dark"] .verb-model-card,
html[data-theme="dark"] .foundation-text-card,
html[data-theme="dark"] .vowel-card,
html[data-theme="dark"] .builder-language-row,
html[data-theme="dark"] .foundation-option,
html[data-theme="dark"] .quick-setting-card { background:rgba(255,255,255,.035); }
html[data-theme="dark"] .alphabet-language-card { background:rgba(255,255,255,.04); }
html[data-theme="dark"] .alphabet-key { background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025)); }
html[data-theme="dark"] .letter-name-line { background:rgba(255,255,255,.035); }
html[data-theme="dark"] .verb-explorer-table th { background:#1d2230; }
html[data-theme="dark"] .gender-m { background:rgba(58,119,198,.17); }
html[data-theme="dark"] .gender-f { background:rgba(200,74,139,.16); }
html[data-theme="dark"] .gender-n { background:rgba(133,92,197,.17); }

@media (max-width: 1040px) {
  .alphabet-grid { grid-template-columns:repeat(9,minmax(42px,1fr)); }
  .alphabet-language-grid,.foundation-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .builder-language-row { grid-template-columns:120px minmax(0,1fr); }
}

@media (max-width: 720px) {
  .module-compact-header { grid-template-columns:1fr; }
  .module-header-action { min-width:0; justify-content:flex-start; }
  .module-page-tabs { margin-left:-2px; margin-right:-2px; }
  .module-page-tab { max-width:225px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .alphabet-grid { grid-template-columns:repeat(7,minmax(38px,1fr)); }
  .alphabet-language-grid,.foundation-card-grid,.gender-lab-grid,.sound-pair-grid,.stress-grid,.verb-model-grid { grid-template-columns:1fr; }
  .vowel-chart-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .builder-language-row { grid-template-columns:1fr; }
  .builder-lang-label { padding-top:0; }
  .foundation-option-grid,.adaptive-rating-buttons { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .quick-setting-grid { grid-template-columns:1fr; }
  .compact-theory-strip { grid-template-columns:1fr; gap:5px; }
}

@media (max-width: 430px) {
  .alphabet-grid { grid-template-columns:repeat(6,minmax(36px,1fr)); gap:6px; }
  .alphabet-key { min-height:44px; border-radius:11px; }
  .foundation-page-body { padding:13px; }
  .foundation-page-head { padding:15px; }
  .letter-detail { align-items:flex-start; padding:14px; }
  .letter-detail-symbol { width:58px; height:58px; border-radius:17px; font-size:1.8rem; }
  .verb-infinitive-ribbon { grid-template-columns:1fr; }
  .module-compact-header { padding:19px; border-radius:21px; }
  .module-compact-header h1 { font-size:1.85rem; }
  .adaptive-rating { padding:11px; }
}

/* ========================================================================
   Romance Matrix DEV 5 — guided media flow and developer instrumentation
   ======================================================================== */

.lesson-theory-first {
  margin-top: 14px;
  border-color: color-mix(in srgb, var(--accent) 24%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 72%, transparent), transparent),
    var(--panel);
}

.module-action-stack { display:grid; gap:8px; justify-items:end; }
.module-action-stack > div { display:flex; flex-wrap:wrap; gap:7px; justify-content:flex-end; }
.dev-unlock-note,
.route-lock-note.guided-active {
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:4px 9px;
  border-radius:999px;
  font-size:.69rem;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#4936bd;
  background:var(--accent-soft);
  border:1px solid color-mix(in srgb, var(--accent) 24%, transparent);
}

.guided-flow-footer {
  position:sticky;
  bottom:14px;
  z-index:24;
  display:grid;
  grid-template-columns:auto minmax(120px,1fr) auto;
  align-items:center;
  gap:14px;
  margin:18px 0 4px;
  padding:13px 15px;
  border:1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius:20px;
  background:color-mix(in srgb, var(--panel) 88%, transparent);
  backdrop-filter:blur(22px) saturate(1.2);
  -webkit-backdrop-filter:blur(22px) saturate(1.2);
  box-shadow:0 18px 48px rgba(28,34,55,.16), inset 0 1px 0 rgba(255,255,255,.6);
}
.guided-flow-footer > div:first-child { display:grid; gap:1px; min-width:105px; }
.guided-flow-footer > div:first-child span { color:var(--muted); font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.guided-flow-footer > div:first-child strong { font-size:.92rem; }
.guided-flow-progress { height:7px; border-radius:999px; overflow:hidden; background:color-mix(in srgb,var(--line) 76%, transparent); }
.guided-flow-progress span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--accent),#9b8bff); }

.module-video-library { display:grid; gap:18px; }
.video-library-head {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  padding:2px 2px 4px;
}
.video-library-head h2 { margin:5px 0 7px; letter-spacing:-.035em; }
.video-library-head p { max-width:760px; margin:0; color:var(--muted); }
.course-video-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.course-video-card {
  min-width:0;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:22px;
  background:color-mix(in srgb,var(--panel) 92%,transparent);
  box-shadow:0 12px 32px rgba(31,37,58,.08), inset 0 1px 0 rgba(255,255,255,.45);
}
.video-embed-slot { aspect-ratio:16/9; background:#11151f; }
.video-preview {
  position:relative;
  width:100%;
  height:100%;
  padding:0;
  border:0;
  display:block;
  overflow:hidden;
  cursor:pointer;
  background:#11151f;
  color:white;
}
.video-preview::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 44%,rgba(4,7,14,.78));
  pointer-events:none;
}
.video-preview img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .25s ease,filter .25s ease; }
.video-preview:hover img { transform:scale(1.025); filter:saturate(1.06); }
.video-play-button {
  position:absolute;
  left:50%;
  top:50%;
  z-index:2;
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border-radius:999px;
  transform:translate(-50%,-50%);
  background:rgba(255,255,255,.9);
  color:#161a25;
  box-shadow:0 12px 36px rgba(0,0,0,.3);
  font-size:1.15rem;
  padding-left:3px;
}
.video-preview-label {
  position:absolute;
  z-index:2;
  left:14px;
  right:14px;
  bottom:12px;
  font-size:.75rem;
  font-weight:850;
  text-align:left;
}
.youtube-frame-wrap { position:relative; width:100%; height:100%; }
.youtube-frame-wrap iframe { width:100%; height:100%; border:0; display:block; }
.course-video-copy { padding:16px; }
.video-source-row { display:flex; justify-content:space-between; gap:10px; color:var(--muted); font-size:.67rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em; }
.course-video-copy h3 { margin:8px 0 7px; font-size:1.03rem; line-height:1.25; letter-spacing:-.02em; }
.course-video-copy p { margin:0; color:var(--muted); font-size:.82rem; }
.video-coverage { display:flex; gap:5px; flex-wrap:wrap; margin-top:12px; }
.video-card-actions { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; margin-top:14px; }
.video-card-actions code { max-width:100%; overflow-wrap:anywhere; color:var(--muted); font-size:.64rem; }
.empty-video-state { padding:28px; border:1px dashed var(--line-strong); border-radius:20px; text-align:center; background:var(--panel-2); }
.empty-video-state p { margin:6px auto 0; max-width:620px; color:var(--muted); }

.module-dev-inspector {
  margin-top:16px;
  border-style:dashed;
  border-color:color-mix(in srgb,var(--accent) 35%,var(--line));
  background:color-mix(in srgb,var(--accent-soft) 36%,var(--panel));
}
.module-dev-inspector summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  cursor:pointer;
  font-weight:850;
}
.module-dev-inspector summary code { color:var(--accent); }
.dev-inspector-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; padding:0 16px 14px; }
.dev-inspector-grid > div { min-width:0; display:grid; gap:4px; padding:10px; border:1px solid var(--line); border-radius:13px; background:color-mix(in srgb,var(--panel) 80%,transparent); }
.dev-inspector-grid span { color:var(--muted); font-size:.66rem; font-weight:850; text-transform:uppercase; letter-spacing:.07em; }
.dev-inspector-grid code { overflow-wrap:anywhere; font-size:.71rem; }
.dev-inspector-actions { display:flex; flex-wrap:wrap; gap:8px; padding:0 16px 16px; }

.developer-lab-modal { width:min(1120px,calc(100vw - 24px)); max-height:calc(100vh - 24px); overflow:auto; }
.dev-control-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:15px 0; }
.dev-control-card {
  min-height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:13px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--panel-2);
}
.dev-control-card span { color:var(--muted); font-size:.75rem; font-weight:800; }
.dev-control-card input { width:22px; height:22px; accent-color:var(--accent); }
.dev-control-card select,
.quick-setting-card select { max-width:180px; border:1px solid var(--line); border-radius:10px; padding:7px 8px; color:var(--ink); background:var(--panel); }
.dev-lab-actions { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0; }
.dev-summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:16px 0; }
.dev-summary-grid > div { display:grid; gap:2px; padding:14px; border:1px solid var(--line); border-radius:16px; background:var(--panel-2); }
.dev-summary-grid strong { font-size:1.45rem; letter-spacing:-.04em; }
.dev-summary-grid span { color:var(--muted); font-size:.7rem; text-transform:uppercase; letter-spacing:.07em; }
.dev-video-map { margin-top:18px; }
.dev-video-map-list { display:grid; gap:7px; max-height:430px; overflow:auto; padding-right:4px; }
.dev-video-map-list article { display:grid; grid-template-columns:minmax(220px,.8fr) minmax(0,1.4fr); gap:12px; align-items:center; padding:10px; border:1px solid var(--line); border-radius:14px; background:var(--panel-2); }
.dev-module-jump { min-width:0; border:0; background:transparent; text-align:left; cursor:pointer; color:var(--ink); }
.dev-module-jump strong,.dev-module-jump span { display:block; }
.dev-module-jump span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:.76rem; }
.dev-video-map-list article > div { min-width:0; display:flex; flex-wrap:wrap; gap:5px; }
.dev-video-map-list code { max-width:100%; padding:4px 6px; border-radius:7px; overflow-wrap:anywhere; background:color-mix(in srgb,var(--accent-soft) 66%,transparent); font-size:.64rem; }
.dev-audio-pipeline { margin-top:18px; padding:16px; border:1px solid var(--line); border-radius:17px; background:var(--panel-2); }
.dev-audio-pipeline h3 { margin-top:0; }
.dev-audio-pipeline ol { margin-bottom:8px; }
.quick-setting-card.select-card { cursor:default; align-items:flex-start; flex-direction:column; }
.quick-setting-card.select-card select { width:100%; max-width:none; }

/* One click = one audio request. Keep the glyph static and lock pointer input while busy. */
.audio-btn[data-audio-busy="1"] { pointer-events:none; cursor:progress; }
.audio-btn.loading,
.audio-btn.audio-active {
  animation:none !important;
  box-shadow:0 0 0 3px rgba(98,84,232,.12),0 8px 18px rgba(42,48,78,.1) !important;
}
.audio-btn.loading::after {
  content:"";
  position:absolute;
  inset:-4px;
  border:2px solid transparent;
  border-top-color:var(--accent);
  border-radius:999px;
  animation:dev5-audio-spin .8s linear infinite;
  pointer-events:none;
}
.audio-btn { position:relative; }
@keyframes dev5-audio-spin { to { transform:rotate(360deg); } }

html[data-theme="dark"] .course-video-card,
html[data-theme="dark"] .guided-flow-footer,
html[data-theme="dark"] .module-dev-inspector,
html[data-theme="dark"] .dev-control-card,
html[data-theme="dark"] .dev-video-map-list article,
html[data-theme="dark"] .dev-audio-pipeline { background:rgba(255,255,255,.045); }

@media (max-width:900px) {
  .course-video-grid { grid-template-columns:1fr; }
  .dev-control-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dev-summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:720px) {
  .module-action-stack { justify-items:start; }
  .module-action-stack > div { justify-content:flex-start; }
  .guided-flow-footer { grid-template-columns:1fr; bottom:8px; }
  .guided-flow-footer > div:first-child { display:flex; justify-content:space-between; }
  .guided-flow-footer .btn { width:100%; }
  .video-library-head { flex-direction:column; }
  .dev-inspector-grid,.dev-control-grid { grid-template-columns:1fr; }
  .dev-video-map-list article { grid-template-columns:1fr; }
}

@media (max-width:430px) {
  .course-video-copy { padding:14px; }
  .video-play-button { width:52px; height:52px; }
  .dev-summary-grid { grid-template-columns:1fr 1fr; }
}

/* DEV 5 instrumentation additions */
.dev-topbar-control {
  width: auto;
  min-width: 44px;
  padding: 0 9px;
  color: #4936bd;
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
  background: color-mix(in srgb, var(--accent-soft) 72%, var(--panel));
  font-size: .62rem;
  font-weight: 950;
  letter-spacing: .06em;
}
.dev-nav-item { color: #dcd6ff; }
.dev-current-context {
  display:grid;
  grid-template-columns:2fr repeat(3,minmax(115px,.75fr));
  gap:10px;
  margin:16px 0;
}
.dev-current-context > div {
  min-width:0;
  display:grid;
  align-content:center;
  gap:4px;
  padding:13px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--panel-2);
}
.dev-current-context span {
  color:var(--muted);
  font-size:.65rem;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.07em;
}
.dev-current-context strong { overflow-wrap:anywhere; }
.dev-current-context code { color:var(--accent); font-size:.7rem; }
.dev-audio-test {
  margin:17px 0;
  padding:15px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--panel-2);
}
.dev-audio-test-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}
.dev-audio-test-grid > div {
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  padding:9px 10px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--panel);
}
.dev-audio-test-grid strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.76rem; }
.dev-module-locations { display:flex !important; align-items:center; flex-wrap:wrap; gap:5px; }
.dev-module-locations code.video-code { color:#4936bd; background:color-mix(in srgb,var(--accent-soft) 88%,transparent); }
.dev-complete-map { max-height:min(52vh,620px); }
.audio-btn:disabled { opacity:1; cursor:progress; }
.audio-btn[data-audio-source="browser"] { border-color:color-mix(in srgb,var(--blue-soft) 72%,var(--line)); }
.audio-btn[data-audio-source="wiktionary"],
.audio-btn[data-audio-source="commons"],
.audio-btn[data-audio-source="private"] { border-color:color-mix(in srgb,var(--green) 38%,var(--line)); }
html[data-theme="dark"] .dev-current-context > div,
html[data-theme="dark"] .dev-audio-test,
html[data-theme="dark"] .dev-audio-test-grid > div { background:rgba(255,255,255,.045); }

@media (max-width:900px) {
  .dev-current-context { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dev-current-context > div:first-child { grid-column:1/-1; }
}
@media (max-width:650px) {
  .dev-audio-test-grid { grid-template-columns:1fr; }
  .dev-current-context { grid-template-columns:1fr 1fr; }
  .dev-current-context > div:first-child { grid-column:1/-1; }
}

/* Keep six-language reference pages compact on phones: two cards per row. */
@media (max-width:590px) {
  .language-strip { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
  .language-strip .language-tile { padding:9px; border-radius:13px; }
  .language-tile-head { gap:6px; }
  .language-tile-head strong { font-size:.68rem; }
  .language-tile-head small { font-size:.52rem; }
  .language-value { margin-top:7px; padding-top:6px; font-size:.82rem; }
  .language-value-row { gap:5px; }
  .audio-btn.tile-audio { width:29px; height:29px; margin-top:6px; }
}

/* DEV 5 live asset locator */
.dev-live-assets {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:16px;
}
.dev-live-assets > div {
  min-width:0;
  padding:16px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--panel-2);
}
.dev-live-assets h3 { margin:0 0 4px; }
.dev-live-code-list {
  display:grid;
  gap:5px;
  max-height:260px;
  overflow:auto;
  margin-top:10px;
  padding-right:4px;
}
.dev-live-code-list code {
  display:block;
  padding:7px 9px;
  border-radius:9px;
  overflow-wrap:anywhere;
  background:color-mix(in srgb,var(--accent-soft) 64%,transparent);
  font-size:.68rem;
}
@media (max-width:720px) { .dev-live-assets { grid-template-columns:1fr; } }

/* ========================================================================
   RomanceMaxxing DEV 7 — red Roman dashboard + simplified course shell
   ======================================================================== */
:root {
  --roman-red:#8f1118;
  --roman-red-2:#b21e24;
  --roman-deep:#4d070b;
  --roman-gold:#f0c65b;
  --roman-cream:#fff8eb;
}
html[data-theme="light"] body {
  background: radial-gradient(circle at 78% 8%, rgba(151,20,27,.07), transparent 28%), #f4f2ed;
}
html[data-theme="dark"] body {
  --paper:#111216; --panel:#17191f; --panel-2:#1e2028; --ink:#f5f1e9; --muted:#a9afbd; --line:#30333d; --line-strong:#454957;
  background: radial-gradient(circle at 78% 8%, rgba(196,35,44,.12), transparent 30%), #101115;
}
html[data-theme="dark"] .card,
html[data-theme="dark"] .language-tile,
html[data-theme="dark"] .foundation-page-shell,
html[data-theme="dark"] .exercise-card { background:rgba(25,27,34,.92); }
.sidebar {
  background:
    radial-gradient(circle at 18% 4%, rgba(240,198,91,.18), transparent 23%),
    linear-gradient(180deg,#4d070b 0%,#731017 42%,#2a0508 100%);
}
.brand-mark.roman-brand-mark {
  width:52px; min-width:52px; background:radial-gradient(circle,#b7252c,#6f0d12 70%); color:var(--roman-gold);
  font-family:Georgia,serif; font-size:.66rem; letter-spacing:.06em; border:1px solid rgba(240,198,91,.45);
  box-shadow:0 8px 22px rgba(0,0,0,.28), inset 0 0 0 2px rgba(255,255,255,.06);
}
.nav-item.active { background:rgba(240,198,91,.14); box-shadow:inset 3px 0 0 var(--roman-gold); }
.sidebar-section { display:none; }
.topbar { backdrop-filter:blur(18px); }
.topbar-stats { display:none!important; }
.theme-toggle { background:rgba(255,255,255,.72); }
html[data-theme="dark"] .theme-toggle { background:rgba(255,255,255,.08); }

.romancemax-hero {
  position:relative; overflow:hidden; border-radius:32px; padding:clamp(28px,5vw,72px);
  color:#fff8eb; background:
    radial-gradient(circle at 90% 12%, rgba(240,198,91,.28), transparent 23%),
    radial-gradient(circle at 12% 90%, rgba(255,255,255,.07), transparent 30%),
    linear-gradient(128deg,#4d070b 0%,#8e1118 48%,#b5242a 100%);
  border:1px solid rgba(240,198,91,.35); box-shadow:0 26px 70px rgba(75,5,10,.24);
}
.romancemax-hero::after { content:"ROMA · LINGVA · SPQR"; position:absolute; right:-30px; bottom:-24px; font-size:clamp(2.4rem,8vw,8rem); font-weight:950; color:rgba(255,255,255,.035); letter-spacing:-.05em; }
.roman-hero-brand { display:flex; align-items:center; gap:22px; max-width:1050px; position:relative; z-index:1; }
.spqr-logo { width:100px; height:100px; color:#e14348; flex:0 0 auto; filter:drop-shadow(0 10px 28px rgba(0,0,0,.25)); }
.spqr-logo svg { width:100%;height:100%;overflow:visible; }
.roman-kicker { display:block; color:#efcf78; font-size:.72rem; letter-spacing:.16em; font-weight:900; text-transform:uppercase; }
.roman-hero-brand h1 { margin:4px 0 8px; font-size:clamp(3rem,8vw,7.2rem); line-height:.9; letter-spacing:-.075em; }
.roman-hero-brand p { max-width:760px; margin:0; color:#f7ddd9; font-size:clamp(.95rem,1.5vw,1.18rem); }
.maxxing-legend { position:relative;z-index:1;margin:30px 0 25px;display:grid;gap:12px; }
.maxxing-legend>div { display:grid;grid-template-columns:105px 1fr;align-items:center;gap:12px; }
.maxxing-legend>div>span { color:#f1c9c9; font-size:.68rem; font-weight:900; text-transform:uppercase;letter-spacing:.13em; }
.profile-language-chip.known { opacity:.55; filter:saturate(.75); background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.12); }
.profile-language-chip.target { opacity:1; transform:translateY(-1px); background:rgba(240,198,91,.17); border-color:rgba(240,198,91,.54); box-shadow:0 8px 24px rgba(240,198,91,.12); }
.romancemax-hero .hero-actions { position:relative;z-index:1; margin-top:26px; }
.roman-primary { background:var(--roman-gold); color:#4d070b; border-color:var(--roman-gold); box-shadow:0 14px 32px rgba(240,198,91,.18); }
.roman-secondary { background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.2); }
.roman-primary:hover,.roman-secondary:hover { transform:translateY(-2px); }

.dashboard-core-stats { display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:18px 0 32px; }
.course-progress-card,.next-lesson-card { position:relative;min-height:128px;padding:22px;border-radius:22px;border:1px solid var(--line);background:var(--panel);box-shadow:var(--shadow); }
.course-progress-card>span,.next-lesson-card>span { color:var(--muted);font-size:.7rem;font-weight:900;text-transform:uppercase;letter-spacing:.1em; }
.course-progress-card>strong { display:block;margin:6px 0 16px;font-size:2.4rem;letter-spacing:-.05em; }
.course-progress-line { height:9px;border-radius:999px;background:var(--panel-2);overflow:hidden; }
.course-progress-line i { display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--roman-red),#d23e45); }
.next-lesson-card strong { display:block;margin-top:8px;font-size:1.2rem;max-width:80%; }
.next-lesson-card small { color:var(--muted); }
.next-lesson-card .btn { position:absolute;right:18px;bottom:18px;width:42px;height:42px;padding:0; }

.language-appreciation { margin-top:22px; }
.language-story-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px; }
.language-story-card { overflow:hidden;border:1px solid var(--line);border-radius:24px;background:var(--panel);box-shadow:0 10px 34px rgba(22,24,30,.06); }
.language-story-photo { min-height:235px;background-size:cover;background-position:center;display:flex;align-items:flex-end;padding:22px; }
.language-story-photo>div { display:flex;align-items:center;gap:11px; }
.language-story-photo h3 { margin:0;color:#fff;font-size:1.6rem;text-shadow:0 2px 16px rgba(0,0,0,.5); }
.language-story-copy { padding:20px 22px 24px; }
.language-story-copy p { margin:0;color:var(--muted);font-size:.94rem;line-height:1.65; }
.translation-source-note { display:none; }

.modules-page-head { margin-bottom:24px;padding:12px 0; }
.modules-page-head h1 { margin:3px 0 7px;font-size:clamp(2.4rem,5vw,4.6rem);letter-spacing:-.055em; }
.modules-page-head p { max-width:720px;color:var(--muted); }
.module-card { cursor:pointer; }
.module-card:hover { transform:translateY(-2px); border-color:rgba(143,17,24,.3); box-shadow:0 16px 36px rgba(65,8,11,.09); }
.module-access-chip { background:rgba(143,17,24,.08);color:#8f1118; }
html[data-theme="dark"] .module-access-chip { color:#f08c91; }

.guided-flow-footer.simplified { display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center; }
.guided-flow-footer.simplified .guided-flow-progress { margin:0; }
.foundation-page-head .page-counter { display:none!important; }
.session-shell { max-width:1120px; }
.session-progress.clean { margin:0 0 18px;height:8px; }
.session-top,.session-count { display:none!important; }
.minimal-exercise .exercise-kicker,.minimal-exercise>h2,.minimal-exercise .exercise-instruction { display:none!important; }
.foundation-listen-stage { padding:40px 20px; }
.foundation-sound-orb { width:82px;height:82px;border-radius:28px;border:1px solid rgba(143,17,24,.16);background:linear-gradient(145deg,#fff,rgba(143,17,24,.06));font-size:2rem;cursor:pointer;box-shadow:0 15px 35px rgba(91,69,214,.08); }
html[data-theme="dark"] .foundation-sound-orb { background:linear-gradient(145deg,#23252c,#17181d); }
.foundation-listen-stage p { font-size:1rem;margin:12px 0 0; }

.number-foundation-row { position:relative;padding-top:16px; }
.number-visual { display:grid;place-items:center;min-height:170px;margin-bottom:16px;border-radius:22px;background:radial-gradient(circle at 50% 35%,rgba(240,198,91,.2),transparent 48%),linear-gradient(145deg,rgba(143,17,24,.05),rgba(255,255,255,.12));border:1px solid var(--line); }
.number-visual span { font-size:clamp(5rem,12vw,9rem);line-height:1;font-weight:950;letter-spacing:-.08em;color:var(--roman-red);text-shadow:0 12px 28px rgba(143,17,24,.13); }
html[data-theme="dark"] .number-visual span { color:#ed6d73; }

.course-video-card { overflow:hidden; }
.youtube-frame-wrap iframe { width:100%;aspect-ratio:16/9;border:0;display:block;background:#000; }
.video-local-warning { padding:14px 16px;background:#fff2d7;color:#7b5316;font-size:.82rem; }

.audio-btn { touch-action:manipulation; user-select:none; -webkit-tap-highlight-color:transparent; }
.audio-btn.loading { opacity:.72; }
.audio-btn.audio-active { box-shadow:0 0 0 5px rgba(143,17,24,.09); }

@media(max-width:900px){
  .roman-hero-brand{align-items:flex-start}.spqr-logo{width:76px;height:76px}.language-story-grid{grid-template-columns:1fr}.dashboard-core-stats{grid-template-columns:1fr}.maxxing-legend>div{grid-template-columns:80px 1fr}.roman-hero-brand h1{font-size:clamp(2.7rem,11vw,5rem)}
}
@media(max-width:590px){
  .romancemax-hero{padding:25px 20px;border-radius:24px}.roman-hero-brand{display:block}.spqr-logo{width:64px;height:64px;margin-bottom:8px}.maxxing-legend>div{display:block}.maxxing-legend>div>span{display:block;margin-bottom:7px}.language-story-photo{min-height:190px}.profile-language-chip{margin:3px 3px 3px 0}.number-visual{min-height:130px}.foundation-option-grid{grid-template-columns:repeat(2,1fr)}
}

/* DEV 7.2 polish: local embeds, terse instructions, explicit two-theme UI */
.youtube-localhost-note {
  min-height: 280px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  padding: 26px;
  text-align: center;
  background: linear-gradient(145deg, rgba(143,17,24,.08), rgba(240,198,91,.10));
  color: var(--ink);
}
.youtube-localhost-note p { max-width: 520px; margin: 0; color: var(--muted); }
.concise-instruction { margin: 8px 0 18px!important; font-size: .98rem; color: var(--muted); }
.exercise-language-chip { display:inline-flex;align-items:center;gap:8px;margin-bottom:10px;color:var(--muted);font-weight:800; }
.foundation-sound-orb:disabled,.audio-btn:disabled { cursor:progress; }
html[data-theme="dark"] .course-progress-card,
html[data-theme="dark"] .next-lesson-card,
html[data-theme="dark"] .language-story-card { background:rgba(24,26,32,.94); }
.ipa-sequence { display:inline-flex; flex-wrap:wrap; align-items:center; gap:2px; color:var(--muted); font-size:.76rem; margin-top:5px; }
.ipa-sequence.block { display:flex; }
.ipa-sequence .ipa-text { margin:0; }
.ipa-separator { opacity:.55; padding:0 2px; }

/* ========================================================================
   RomanceMaxxing DEV 8 — PDF-directed reconstruction
   ======================================================================== */


/* Two explicit themes only. */
html[data-theme="light"] { color-scheme:light; }
html[data-theme="dark"] { color-scheme:dark; }

/* Simpler development shell; no flags or pseudo-Roman mottos in the menu. */
.simplified-brand { align-items:center; gap:9px; padding-bottom:18px; }
.brand-wordmark { color:#fff; font-size:1.02rem; font-weight:900; letter-spacing:-.035em; }
.dev-badge { margin-left:auto; padding:3px 7px; border:1px solid rgba(255,255,255,.17); border-radius:999px; color:#e9bdc1; font-size:.58rem; font-weight:900; letter-spacing:.1em; }
.sidebar-stage-filter { display:none!important; }

/* Hero: centered SPQR circle between both halves of the name. */
.romancemax-hero {
  min-height:470px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:clamp(34px,5vw,68px) clamp(22px,7vw,104px);
  isolation:isolate;
}
.romancemax-hero::after { content:none!important; display:none!important; }
.hero-corner-art { position:absolute; width:min(31vw,410px); height:auto; bottom:-18px; opacity:.42; pointer-events:none; z-index:-1; }
.hero-corner-art.left { left:-40px; }
.hero-corner-art.right { right:-45px; }
.roman-hero-brand { display:block; width:100%; max-width:1120px; text-align:center; }
.roman-hero-brand h1 {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:nowrap;
  gap:clamp(10px,2vw,24px);
  margin:0 auto 16px;
  font-size:clamp(2.65rem,7.5vw,6.9rem);
  line-height:.92;
  letter-spacing:-.075em;
  white-space:nowrap;
}
.roman-hero-brand h1 > span { display:block; }
.spqr-logo { width:clamp(58px,7vw,92px); height:clamp(58px,7vw,92px); flex:0 0 auto; filter:drop-shadow(0 12px 25px rgba(0,0,0,.28)); }
.roman-hero-brand p { margin:0 auto; max-width:820px; font-size:clamp(.95rem,1.5vw,1.18rem); }
.maxxing-legend { width:min(100%,900px); margin:28px auto 4px; }
.maxxing-legend > div { grid-template-columns:110px minmax(0,1fr); text-align:left; }
.maxxing-legend > div > div { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.maxxing-legend .known-row { opacity:.78; }
.maxxing-legend .target-row { margin-top:2px; }
.profile-language-chip.target { transform:none; box-shadow:0 10px 26px rgba(240,198,91,.13); }
.centered-actions { justify-content:center!important; width:100%; }
.centered-actions .btn { min-width:150px; }

/* Only two concise dashboard cards. */
.dashboard-core-stats { max-width:1180px; margin:18px auto 34px; }
.course-progress-card,.next-lesson-card { min-height:132px; }

/* Latin origin and the two branches of selected course languages. */
.centered-head { justify-content:center; text-align:center; }
.latin-origin-section { max-width:1240px; margin:36px auto 0; }
.latin-origin-card {
  overflow:hidden;
  max-width:980px;
  margin:0 auto;
  border:1px solid var(--line);
  border-radius:28px;
  background:var(--panel);
  box-shadow:var(--shadow);
}
.latin-origin-photo { position:relative; min-height:350px; overflow:hidden; }
.latin-origin-photo::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,8,10,.05),rgba(9,7,5,.75)); }
.latin-origin-photo img { width:100%; height:100%; min-height:350px; object-fit:cover; display:block; }
.latin-origin-photo > div { position:absolute; z-index:1; inset:auto 24px 24px; color:#fff; text-align:center; }
.latin-origin-photo span { display:block; font-size:.66rem; font-weight:900; letter-spacing:.22em; opacity:.8; }
.latin-origin-photo h3 { margin:3px 0 0; font-size:clamp(2.5rem,6vw,5rem); letter-spacing:-.05em; }
.latin-origin-card > p { max-width:850px; margin:0 auto; padding:22px 28px 28px; color:var(--muted); font-size:1rem; line-height:1.72; text-align:center; }
.latin-branch-diagram { position:relative; width:min(78%,800px); height:75px; margin:0 auto; }
.latin-branch-diagram i { position:absolute; left:50%; top:0; width:2px; height:37px; background:var(--line-strong); transform:translateX(-50%); }
.latin-branch-diagram::after { content:""; position:absolute; top:36px; left:12%; right:12%; height:2px; background:var(--line-strong); }
.latin-branch-diagram span { position:absolute; top:35px; width:2px; height:40px; background:var(--line-strong); }
.latin-branch-diagram span:first-child { left:12%; }
.latin-branch-diagram span:last-child { right:12%; }
.latin-language-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.latin-language-columns > div { display:grid; gap:18px; align-content:start; }
.asset-credit { margin:14px 0 0; color:var(--muted); font-size:.66rem; text-align:center; }
.language-story-card.known-card { opacity:.82; }
.language-story-card.learning-card { border-color:color-mix(in srgb,var(--roman-red) 45%,var(--line)); box-shadow:0 14px 38px rgba(143,17,24,.1); }

/* Compact comparison cards: flag + semantic data, never repeated names/countries. */
.language-strip { align-items:stretch; }
.language-tile { position:relative; min-height:128px; }
.language-tile-head { min-height:24px; }
.language-tile-head > span:not(.tile-flag-wrap),
.language-tile-head strong,
.language-tile-head small { display:none!important; }
.tile-flag-wrap { min-height:24px; }
.compact-meta { display:flex; align-items:center; gap:7px; }
.compact-only { display:flex; align-items:center; gap:8px; }
.language-value-row { align-items:center; }
.language-value { font-size:.94rem; }

/* Blue male, pink female, Ø Romanian neuter. */
.gender-badge { width:28px; height:28px; border-radius:999px; font-size:.92rem; line-height:1; }
.gender-m { color:#1766c2; background:#e5f1ff; border:1px solid #b7d8ff; }
.gender-f { color:#c4387b; background:#ffe8f3; border:1px solid #ffc0dd; }
.gender-n { color:#7553a6; background:#eee7ff; border:1px solid #d8c8ff; }
.neutral-gender-note { margin:0 0 12px; color:var(--muted); font-size:.75rem; }
.gender-form { grid-template-columns:minmax(0,1fr) auto auto; }
.gender-form > .audio-btn { grid-column:3; }
.gender-form .ipa-text { grid-column:1/-1; margin-left:27px; }

/* Visual concepts above isolated words and sentence prompts. */
.concept-visual { display:grid; place-items:center; margin:0 auto 14px; }
.concept-visual img { width:min(210px,44vw); height:150px; object-fit:contain; filter:drop-shadow(0 12px 22px rgba(31,35,45,.12)); }
.concept-visual.compact img { width:105px; height:80px; }
.exercise-concept-visual { margin-bottom:16px; }
.foundation-info-card { min-height:170px; }
.foundation-card-lang.compact-only { min-height:26px; }
.foundation-card-audio { position:static; display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:13px; }

/* IPA is always visible when enabled; unresolved items are explicit rather than random blanks. */
html[data-ipa="off"] .ipa-text,html[data-ipa="off"] .ipa-sequence { display:none!important; }
.ipa-text { display:inline-block; margin:.28em 0 0; color:var(--muted); font-family:"Segoe UI",sans-serif; font-size:.72rem; font-weight:600; letter-spacing:.01em; }
.ipa-text.block { display:block; }
.ipa-text.ipa-missing { opacity:.55; font-style:italic; }
.ipa-sequence { width:100%; }

/* Verb explorer: no horizontal tense hunt; sentence tense remains yellow. */
.verb-explorer-modal { width:min(1080px,calc(100vw - 28px)); max-height:min(900px,calc(100vh - 28px)); overflow:auto; }
.verb-explorer-language-tabs { display:flex; flex-wrap:wrap; overflow:visible; }
.verb-explorer-language-tabs button { min-width:48px; justify-content:center; }
.verb-explorer-tense-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; overflow:visible; padding:12px 0; }
.verb-explorer-tense-tabs button { width:100%; min-height:44px; justify-content:center; white-space:normal; text-align:center; line-height:1.18; }
.verb-explorer-tense-tabs button.active { color:var(--accent); border-color:rgba(98,84,232,.55); background:var(--accent-soft); box-shadow:inset 0 0 0 1px rgba(98,84,232,.18); }
.verb-explorer-tense-tabs button.used-tense { color:#5d4500; border-color:#e1b425; background:#ffec8a; box-shadow:0 0 0 3px rgba(225,180,37,.16),0 10px 22px rgba(225,180,37,.12); }
.verb-explorer-tense-tabs button.used-tense.active { outline:2px solid var(--accent); outline-offset:2px; }
.used-tense-legend { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:.72rem; }
.used-tense-legend span { width:18px; height:10px; border-radius:999px; background:#ffdc42; border:1px solid #d7a91b; }
.verb-explorer-table-wrap { overflow-x:auto; max-height:430px; }
.verb-explorer-table td:nth-child(3) { min-width:170px; }

/* Minimal lesson and exercise text. */
.exercise-card > .exercise-kicker:empty,.comparison-caption:empty,.focus-panel-title:empty { display:none; }
.grammar-visual-prompt,.grammar-audio-prompt,.number-choice-prompt { justify-content:center; }
.number-choice-prompt { display:flex; align-items:center; gap:18px; margin:2px auto 18px; }
.number-choice-prompt strong { font-size:clamp(4rem,11vw,8rem); color:var(--roman-red); line-height:1; }
.number-choice-prompt > span { font-size:2rem; color:var(--muted); }
.concise-instruction { text-align:center; }

/* Video embeds fill their cards and never expose the reference playlist. */
.course-video-grid { align-items:start; }
.video-embed-slot { min-height:220px; background:#0b0b0c; }
.video-preview { width:100%; aspect-ratio:16/9; display:block; position:relative; padding:0; border:0; overflow:hidden; background:#111; cursor:pointer; }
.video-preview img { width:100%; height:100%; object-fit:cover; display:block; }
.youtube-frame-wrap { width:100%; aspect-ratio:16/9; }
.youtube-frame-wrap iframe { width:100%; height:100%; }

/* The source folder intentionally carries a large local audio bank. */
.audio-btn { position:relative; z-index:2; }
.audio-btn.loading { cursor:wait; }
.audio-btn[data-audio-source="wiktionary"],.audio-btn[data-audio-source="commons"] { border-color:rgba(47,138,98,.34); }

@media(max-width:1050px){
  .verb-explorer-tense-tabs { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:760px){
  .roman-hero-brand h1 { gap:8px; font-size:clamp(2.25rem,10vw,4.1rem); }
  .spqr-logo { width:52px; height:52px; }
  .hero-corner-art { width:52vw; opacity:.25; }
  .maxxing-legend > div { grid-template-columns:1fr; text-align:center; }
  .latin-language-columns { grid-template-columns:1fr; }
  .latin-branch-diagram { display:none; }
  .latin-origin-photo,.latin-origin-photo img { min-height:250px; }
  .verb-explorer-tense-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .verb-explorer-table { min-width:560px; }
  .builder-language-row { grid-template-columns:42px minmax(0,1fr); }
}
@media(max-width:480px){
  .roman-hero-brand h1 { font-size:clamp(1.9rem,9.3vw,3rem); letter-spacing:-.065em; }
  .spqr-logo { width:44px; height:44px; }
  .centered-actions { display:grid; grid-template-columns:1fr 1fr; }
  .centered-actions .btn { min-width:0; width:100%; }
  .verb-explorer-tense-tabs { grid-template-columns:1fr 1fr; }
  .foundation-card-grid,.gender-lab-grid { grid-template-columns:1fr; }
}


/* ========================================================================
   RomanceMaxxing DEV 8 — personalized, centered, IPA-complete build
   ======================================================================== */
.simplified-brand { justify-content:center; padding-inline:8px; }
.brand-wordmark { flex:1; min-width:0; font-size:1rem; font-weight:900; letter-spacing:-.025em; }
.simplified-brand .dev-badge { margin-left:auto; }
.sidebar-language-flags,.brand-subtitle,.roman-kicker { display:none!important; }

.romancemax-hero {
  isolation:isolate;
  text-align:center;
  display:grid;
  justify-items:center;
  background:
    linear-gradient(128deg,rgba(77,7,11,.96),rgba(142,17,24,.93) 52%,rgba(181,36,42,.94)),
    url('assets/images/romance-corners.svg') center/cover no-repeat;
}
.romancemax-hero::after { content:none!important; }
.romancemax-hero::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:url('assets/images/romance-corners.svg') center/cover no-repeat;
  opacity:.20;
  pointer-events:none;
}
.roman-hero-brand { display:grid; justify-items:center; max-width:1150px; width:100%; gap:14px; }
.roman-hero-brand h1 {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:clamp(10px,1.8vw,24px);
  margin:0;
  font-size:clamp(3rem,7vw,7.25rem);
  letter-spacing:-.07em;
  line-height:.92;
}
.roman-hero-brand h1 > span { display:inline-block; }
.spqr-logo { width:clamp(66px,7.5vw,112px); height:clamp(66px,7.5vw,112px); margin:0; }
.roman-hero-brand p { max-width:850px; margin:0 auto; text-wrap:balance; }
.maxxing-legend { width:min(900px,100%); margin:28px auto 18px; }
.maxxing-legend > div { grid-template-columns:100px minmax(0,1fr); text-align:left; }
.maxxing-legend > div > div { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.profile-language-chip { display:inline-flex; align-items:center; gap:7px; border:1px solid rgba(255,255,255,.2); border-radius:999px; padding:7px 12px; }
.profile-language-chip.known { opacity:.45; }
.profile-language-chip.target { padding:9px 15px; font-size:1.02rem; box-shadow:0 10px 34px rgba(240,198,91,.17); }
.centered-actions { justify-content:center!important; width:100%; }
.centered-actions .btn { min-width:160px; }

.dashboard-core-stats { max-width:1200px; margin-inline:auto; }
.course-progress-card,.next-lesson-card { text-align:left; }

.centered-head { justify-content:center; text-align:center; }
.latin-origin-section { max-width:1280px; margin:34px auto 0; }
.latin-origin-card {
  max-width:900px;
  margin:0 auto;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:28px;
  background:var(--panel);
  box-shadow:var(--shadow);
}
.latin-origin-photo { position:relative; min-height:clamp(240px,38vw,430px); overflow:hidden; }
.latin-origin-photo::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 28%,rgba(20,10,7,.82)); }
.latin-origin-photo img { width:100%; height:100%; min-height:inherit; object-fit:cover; display:block; }
.latin-origin-photo > div { position:absolute; inset:auto 24px 24px; z-index:1; color:white; text-align:center; }
.latin-origin-photo span { display:block; font-size:.67rem; font-weight:900; letter-spacing:.20em; }
.latin-origin-photo h3 { margin:4px 0 0; font:900 clamp(2.5rem,7vw,5.5rem)/1 Georgia,serif; }
.latin-origin-card > p { max-width:800px; margin:0 auto; padding:24px clamp(20px,4vw,42px) 30px; color:var(--muted); font-size:1rem; line-height:1.75; text-align:center; }
.latin-branch-diagram { width:min(760px,80%); height:64px; margin:0 auto; display:grid; grid-template-columns:1fr 48px 1fr; align-items:end; }
.latin-branch-diagram i { align-self:start; justify-self:center; width:2px; height:28px; background:var(--roman-gold); }
.latin-branch-diagram span { height:2px; background:linear-gradient(90deg,transparent,var(--roman-gold)); }
.latin-branch-diagram span:last-child { background:linear-gradient(90deg,var(--roman-gold),transparent); }
.latin-language-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; align-items:start; }
.latin-language-columns > div { display:grid; gap:18px; }
.language-story-card.known-card { opacity:.72; }
.language-story-card.learning-card { border-color:color-mix(in srgb,var(--roman-gold) 55%,var(--line)); box-shadow:0 16px 42px rgba(143,17,24,.10); }
.asset-credit { margin:14px 0 0; color:var(--muted); font-size:.68rem; text-align:center; }

/* Compact language cards: flag + linguistic information, never repeated names. */
.language-tile-head { min-height:28px; }
.language-tile-head > span:last-child { display:none!important; }
.language-tile-head { grid-template-columns:auto; }
.language-tile .tile-flag-wrap { justify-content:flex-start; }
.language-value-row { align-items:center; }
.language-value { font-size:1rem; }
.reference-section.reference-only { padding:10px; }

.concept-visual { width:min(260px,70%); margin:8px auto 18px; display:grid; place-items:center; }
.concept-visual img { width:100%; max-height:220px; object-fit:contain; filter:drop-shadow(0 12px 22px rgba(30,24,19,.12)); }
.concept-visual.compact { width:100px; margin:0 auto 8px; }
.concept-visual.compact img { max-height:90px; }

.gender-badge { width:30px; height:30px; border-radius:999px; font-size:1rem; line-height:1; }
.gender-m { color:#1769c2; background:#e5f1ff; box-shadow:0 0 0 1px rgba(23,105,194,.12); }
.gender-f { color:#cf4086; background:#ffe7f3; box-shadow:0 0 0 1px rgba(207,64,134,.12); }
.gender-n { color:#5f4a84; background:#eee9f7; box-shadow:0 0 0 1px rgba(95,74,132,.12); }
.neutral-gender-note { max-width:760px; margin:0 auto 14px; padding:9px 13px; border-radius:12px; color:var(--muted); background:var(--panel-2); text-align:center; font-size:.75rem; }
.gender-form { grid-template-columns:minmax(0,1fr) auto auto; }
.gender-form .audio-btn { grid-column:3; }

.number-choice-prompt { display:flex; align-items:center; justify-content:center; gap:24px; min-height:160px; margin-bottom:18px; }
.number-choice-prompt strong { font-size:clamp(5rem,12vw,9rem); line-height:1; color:var(--roman-red); }
.number-choice-prompt > span { font-size:2.4rem; color:var(--muted); }
.grammar-audio-prompt { display:flex; align-items:center; justify-content:center; gap:18px; min-height:125px; }
.foundation-listen-stage { gap:14px; }
.foundation-listen-stage > p { display:none!important; }
.foundation-listen-stage .ipa-text,.foundation-listen-stage .ipa-sequence { justify-content:center; font-size:.9rem; }

/* Verb explorer: all tenses visible, active selection and sentence tense are separate states. */
.verb-explorer-modal { max-height:calc(100vh - 24px); overflow:auto; }
.verb-explorer-language-tabs { display:flex; flex-wrap:wrap; justify-content:center; overflow:visible; }
.verb-explorer-tense-tabs { display:grid; grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); gap:8px; overflow:visible; padding:10px 0; }
.verb-explorer-tense-tabs button { min-height:42px; justify-content:center; white-space:normal; text-align:center; line-height:1.2; }
.verb-explorer-tense-tabs button.active { color:var(--accent); border-color:rgba(98,84,232,.55); background:var(--accent-soft); box-shadow:inset 0 0 0 1px rgba(98,84,232,.16); }
.verb-explorer-tense-tabs button.used-tense { color:#4d3800!important; border-color:#e8bd32!important; background:#ffe78a!important; box-shadow:0 0 0 3px rgba(232,189,50,.20)!important; }
.verb-explorer-tense-tabs button.active.used-tense { outline:3px solid rgba(98,84,232,.30); outline-offset:2px; }
.used-tense-legend { display:flex; align-items:center; justify-content:center; gap:8px; margin:2px 0 10px; color:var(--muted); font-size:.75rem; }
.used-tense-legend span { width:18px; height:10px; border-radius:999px; background:#ffe78a; border:1px solid #e8bd32; }
.verb-explorer-table-wrap { overflow-x:auto; }
.verb-explorer-table { min-width:560px; }
.verb-explorer-table .ipa-text,.verb-explorer-table .ipa-sequence { font-size:.76rem; }
.verb-column-head.flag-only,.target-language.flag-only { justify-content:center; }

/* Video cards remain embedded, unique and profile-filtered. */
.course-video-grid { align-items:start; }
.course-video-card { height:100%; }
.video-source-row strong:empty { display:none; }
.video-coverage:empty { display:none; }
.youtube-frame-wrap { aspect-ratio:16/9; }
.youtube-frame-wrap iframe { aspect-ratio:16/9; min-height:100%; }

/* Remove obsolete loading spinner: one click should feel immediate and stable. */
.audio-btn.loading::after { display:none!important; }
.audio-btn.loading { opacity:.92; }

html[data-theme="dark"] .latin-origin-card,
html[data-theme="dark"] .language-story-card { background:rgba(24,26,32,.96); }
html[data-theme="dark"] .gender-m { color:#8cc6ff; background:rgba(23,105,194,.18); }
html[data-theme="dark"] .gender-f { color:#ff9bc9; background:rgba(207,64,134,.18); }
html[data-theme="dark"] .gender-n { color:#d3c1f4; background:rgba(95,74,132,.22); }

@media(max-width:900px){
  .roman-hero-brand h1 { font-size:clamp(2.6rem,10vw,5.5rem); }
  .latin-language-columns { grid-template-columns:1fr; }
  .latin-branch-diagram { display:none; }
  .verb-explorer-tense-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:590px){
  .romancemax-hero { padding:28px 18px; }
  .roman-hero-brand h1 { gap:8px; }
  .spqr-logo { width:58px; height:58px; }
  .maxxing-legend > div { display:grid; grid-template-columns:1fr; text-align:center; }
  .maxxing-legend > div > div { justify-content:center; }
  .centered-actions { display:grid!important; grid-template-columns:1fr 1fr; }
  .centered-actions .btn { min-width:0; width:100%; }
  .verb-explorer-tense-tabs { grid-template-columns:1fr 1fr; }
  .verb-explorer-table { min-width:480px; }
  .number-choice-prompt { gap:14px; min-height:125px; }
  .number-choice-prompt strong { font-size:5.5rem; }
}

/* Actual gender component emitted by the app. */
.gender-symbol {
  width:30px;
  height:30px;
  display:inline-grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:999px;
  font-size:1.05rem;
  line-height:1;
  font-weight:950;
}
.gender-symbol.compact { width:24px; height:24px; font-size:.88rem; }
.gender-symbol.gender-m { color:#1769c2; background:#e5f1ff; }
.gender-symbol.gender-f { color:#cf4086; background:#ffe7f3; }
.gender-symbol.gender-n { color:#5f4a84; background:#eee9f7; }
html[data-theme="dark"] .gender-symbol.gender-m { color:#8cc6ff; background:rgba(23,105,194,.20); }
html[data-theme="dark"] .gender-symbol.gender-f { color:#ff9bc9; background:rgba(207,64,134,.20); }
html[data-theme="dark"] .gender-symbol.gender-n { color:#d3c1f4; background:rgba(95,74,132,.24); }

/* ========================================================================
   RomanceMaxxing DEV 8.0 — PDF correction pass
   ======================================================================== */
/* Mascot system was removed, not merely hidden. */
.auri-root,.auri-popover,.auri-intro-layer,.auri-intro-window,.auri-launcher,.auri-settings,.auri-character,.auri-character-wrap { display:none!important; }

/* The wordmark is one indivisible Romance · SPQR · Maxxing unit. */
.roman-hero-brand h1 {
  display:grid!important;
  grid-template-columns:max-content auto max-content;
  align-items:center;
  justify-content:center;
  flex-wrap:nowrap!important;
  white-space:nowrap;
  gap:clamp(8px,1.5vw,22px);
  width:100%;
}
.roman-hero-brand h1 > span { min-width:0; }
.spqr-logo { flex:none; }
.profile-language-chip strong { display:none!important; }
.profile-language-chip { justify-content:center; min-width:48px; padding:7px 10px; }
.profile-language-chip.target { min-width:60px; padding:10px 14px; }

/* Minimal country motifs are corner texture only; no faint text or laurels. */
.romancemax-hero::after { display:none!important; content:none!important; }
.romancemax-hero::before { opacity:.25; background-size:cover; }

/* Latin visually branches into the two personalized language columns. */
.latin-branch-diagram {
  position:relative;
  width:min(840px,90%);
  height:72px;
  grid-template-columns:1fr 1fr;
  align-items:center;
  justify-items:center;
  color:var(--roman-red);
  font-size:2.1rem;
  font-weight:950;
}
.latin-branch-diagram::before {
  content:"";
  position:absolute;
  top:0;
  left:50%;
  width:2px;
  height:30px;
  background:var(--roman-gold);
}
.latin-branch-diagram::after {
  content:"";
  position:absolute;
  top:29px;
  left:15%;
  right:15%;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--roman-gold) 18%,var(--roman-gold) 82%,transparent);
}
.latin-branch-diagram i { display:none; }
.latin-branch-diagram span { position:relative; z-index:1; width:auto; height:auto; background:none!important; }

/* Always reserve a visible IPA line whenever IPA is on. */
html[data-ipa="on"] .language-value-wrap { display:grid; gap:3px; }
html[data-ipa="on"] .ipa-text,html[data-ipa="on"] .ipa-sequence { min-height:1.05em; }
.ipa-text.pending { color:var(--muted); opacity:.58; }
.ipa-text.ipa-missing { color:var(--muted); opacity:.45; }

/* All comparative cards use only flags + linguistic information. */
.language-tile-head.compact-meta { display:flex; align-items:center; justify-content:space-between; }
.language-strip { grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); }
.language-tile { min-width:0; }
.language-value-row { min-width:0; }
.language-value-wrap { min-width:0; flex:1; }
.language-value { overflow-wrap:anywhere; }

/* Audio must react on the first tap with no spinner or layout shift. */
.audio-btn,.foundation-sound-orb { cursor:pointer!important; pointer-events:auto!important; touch-action:manipulation; }
.audio-btn.loading,.foundation-sound-orb.loading { opacity:1!important; cursor:pointer!important; }
.audio-btn:active,.foundation-sound-orb:active { transform:scale(.94); }
.audio-btn[data-audio-source="wiktionary"],.audio-btn[data-audio-source="commons"] {
  border-color:rgba(47,138,98,.5);
  box-shadow:0 0 0 3px rgba(47,138,98,.08);
}

/* Exercise screens show only one terse instruction—or none when visual context is enough. */
.session-top,.session-count,.session-pct,.exercise-number,.exercise-kicker { display:none!important; }
.session-progress.clean { margin:0 0 20px; }
.exercise-instruction:empty,.foundation-listen-stage p,.redundant-instruction { display:none!important; }
.foundation-exercise .foundation-listen-stage { min-height:160px; }
.foundation-sound-orb { position:relative; z-index:3; }

/* Number prompts are purely visual: number → target flag. */
.number-choice-prompt { min-height:145px; }
.number-choice-prompt strong { text-shadow:0 12px 32px rgba(143,17,24,.14); }
.number-choice-prompt .flag-rect { transform:scale(1.35); }

/* Gender system: recognizable symbols rather than letters. */
.gender-symbol.gender-m { color:#1769c2!important; background:#e5f1ff!important; }
.gender-symbol.gender-f { color:#cf4086!important; background:#ffe7f3!important; }
.gender-symbol.gender-n { color:#5f4a84!important; background:#eee9f7!important; }

/* Tenses wrap into the unused width. The sentence tense stays yellow even
   while another tense is selected in purple. */
.verb-explorer-tense-tabs { grid-template-columns:repeat(auto-fit,minmax(128px,1fr))!important; overflow:visible!important; }
.verb-explorer-tense-tabs button.used-tense { background:#ffe36a!important; border-color:#d8aa00!important; color:#3d2d00!important; }
.verb-explorer-tense-tabs button.active:not(.used-tense) { background:var(--accent-soft)!important; color:var(--accent)!important; }
.verb-explorer-table .ipa-text,.verb-explorer-table .ipa-sequence { display:block; margin-top:3px; }

/* Embedded videos have a stable 16:9 slot and never inherit duplicated cards. */
.course-video-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,390px),1fr)); }
.video-embed-slot,.youtube-frame-wrap { aspect-ratio:16/9; min-height:0; }
.video-preview,.youtube-frame-wrap iframe { width:100%; height:100%; }
.video-card-actions code { display:none!important; }

@media(max-width:760px){
  .roman-hero-brand h1 { font-size:clamp(1.85rem,9.3vw,4rem)!important; gap:6px; }
  .spqr-logo { width:clamp(42px,12vw,58px); height:clamp(42px,12vw,58px); }
  .latin-branch-diagram { display:none; }
  .language-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .verb-explorer-tense-tabs { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
}
@media(max-width:380px){
  .roman-hero-brand h1 { font-size:clamp(1.55rem,8.3vw,2.45rem)!important; }
  .spqr-logo { width:38px; height:38px; }
}

/* ========================================================================
   ROMANCEMAXXING DEV 8 — FINAL REBUILD
   Real media, clean SPQR identity, personalized route, two explicit themes.
   ======================================================================== */
:root{
  --roman-red:#8f1118;
  --roman-red-2:#c52d32;
  --roman-gold:#efce72;
  --roman-ink:#1d2029;
  --glass:rgba(255,255,255,.68);
  --glass-strong:rgba(255,255,255,.82);
  --glass-line:rgba(255,255,255,.72);
}
html[data-theme="dark"]{
  --glass:rgba(24,27,36,.72);
  --glass-strong:rgba(28,32,42,.9);
  --glass-line:rgba(255,255,255,.08);
}
body{
  background:
    radial-gradient(circle at 82% 4%,rgba(109,151,238,.13),transparent 30%),
    radial-gradient(circle at 6% 36%,rgba(171,71,79,.09),transparent 28%),
    var(--paper);
}
#app-shell{grid-template-columns:248px minmax(0,1fr)}
.sidebar{
  width:auto;
  padding:20px 15px;
  background:
    linear-gradient(180deg,rgba(23,27,39,.96),rgba(15,18,27,.98));
  border-right:1px solid rgba(255,255,255,.07);
  box-shadow:16px 0 42px rgba(13,16,24,.11);
}
.brand{padding:3px 6px 25px;gap:11px}
.roman-brand-mark{
  width:45px;height:45px;border-radius:50%;
  display:grid;place-items:center;
  background:#65080d;
  color:#f6dc8d;
  border:2px solid #efce72;
  font:800 .66rem/1 Georgia,serif;
  letter-spacing:.04em;
  box-shadow:0 9px 26px rgba(0,0,0,.25),inset 0 0 0 3px rgba(239,206,114,.14);
}
.brand-title{font-size:.98rem;letter-spacing:-.02em}
.sidebar-language-flags,.brand-subtitle,.offline-note,.roman-kicker,.sidebar-stage-filter{display:none!important}
.nav-item{border-radius:13px;padding:11px 12px}
.nav-item.active{background:linear-gradient(135deg,rgba(197,45,50,.22),rgba(239,206,114,.09));box-shadow:inset 3px 0 0 #d74a4f}
.main-area{min-width:0}
.topbar{
  height:70px;
  background:color-mix(in srgb,var(--panel) 70%,transparent);
  backdrop-filter:blur(24px) saturate(140%);
  -webkit-backdrop-filter:blur(24px) saturate(140%);
  border-bottom:1px solid color-mix(in srgb,var(--line) 78%,transparent);
}
.view-root{max-width:1540px;margin:0 auto;padding:26px clamp(16px,3vw,46px) 70px}

/* Hero */
.romancemax-hero{
  position:relative;
  display:grid;
  justify-items:center;
  gap:24px;
  min-height:520px;
  padding:clamp(44px,6vw,82px) clamp(24px,7vw,108px);
  border-radius:34px;
  overflow:hidden;
  color:#fff;
  text-align:center;
  background:
    radial-gradient(circle at 10% 15%,rgba(255,229,155,.16),transparent 24%),
    radial-gradient(circle at 89% 85%,rgba(244,114,122,.25),transparent 34%),
    linear-gradient(135deg,#4f080d 0%,#8d1017 43%,#b9282d 100%);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 30px 80px rgba(84,8,14,.25),inset 0 1px 0 rgba(255,255,255,.18);
}
.romancemax-hero::before,
.romancemax-hero::after{content:"";position:absolute;pointer-events:none;opacity:.18;background-repeat:no-repeat;background-position:center;background-size:contain}
.romancemax-hero::before{
  width:190px;height:190px;left:-34px;bottom:-22px;
  background-image:url("assets/images/concepts/city.webp");filter:grayscale(1) brightness(4);
}
.romancemax-hero::after{
  width:160px;height:160px;right:-22px;top:-20px;
  background-image:url("assets/images/concepts/book.webp");filter:grayscale(1) brightness(5);
}
.roman-hero-brand{position:relative;z-index:1;display:grid;justify-items:center;gap:14px;width:100%;max-width:1180px}
.roman-hero-brand h1{
  display:flex!important;
  align-items:center;
  justify-content:center;
  gap:clamp(10px,1.8vw,26px);
  margin:0;
  color:#fff;
  font-size:clamp(3.15rem,7.7vw,7.6rem);
  line-height:.88;
  letter-spacing:-.075em;
  text-wrap:balance;
  filter:drop-shadow(0 9px 22px rgba(0,0,0,.22));
}
.roman-hero-brand h1>span{display:inline-block!important}
.spqr-logo{width:clamp(66px,7vw,114px);height:clamp(66px,7vw,114px);flex:0 0 auto;margin:0;filter:drop-shadow(0 12px 24px rgba(0,0,0,.28))}
.spqr-logo svg{width:100%;height:100%;display:block}
.roman-hero-brand p{max-width:850px;margin:0;color:rgba(255,255,255,.82);font-size:clamp(1rem,1.6vw,1.25rem);line-height:1.55;text-wrap:balance}
.maxxing-legend{position:relative;z-index:1;width:min(920px,100%);display:grid;gap:10px}
.maxxing-legend>div{display:grid;grid-template-columns:105px 1fr;align-items:center;gap:12px;text-align:left}
.maxxing-legend>div>span{font-size:.68rem;font-weight:900;text-transform:uppercase;letter-spacing:.15em;color:rgba(255,255,255,.63)}
.maxxing-legend>div>div{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.profile-language-chip{
  display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:7px 11px;border-radius:999px;
  border:1px solid rgba(255,255,255,.16);background:rgba(18,4,7,.18);backdrop-filter:blur(12px);
}
.profile-language-chip b{font-size:.76rem;color:#fff;white-space:nowrap}
.profile-language-chip.known{opacity:.6;filter:saturate(.65)}
.profile-language-chip.target{opacity:1;background:rgba(255,255,255,.15);border-color:rgba(239,206,114,.56);box-shadow:0 8px 26px rgba(0,0,0,.14),0 0 0 1px rgba(239,206,114,.14) inset}
.centered-actions{position:relative;z-index:1;justify-content:center;width:100%}
.roman-primary,.roman-secondary{min-width:180px;min-height:52px;border-radius:15px}
.roman-primary{background:#fff;color:#4e080c;box-shadow:0 14px 34px rgba(0,0,0,.2)}
.roman-primary:hover{background:#fff7e8}
.roman-secondary{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.24)}

/* Dashboard only contains the two useful status cards */
.dashboard-core-stats{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:1180px;margin:18px auto 34px}
.course-progress-card,.next-lesson-card{
  min-height:150px;padding:24px 28px;border-radius:24px;background:var(--glass-strong);border:1px solid var(--glass-line);
  box-shadow:0 18px 45px rgba(28,35,52,.09),inset 0 1px 0 rgba(255,255,255,.5);backdrop-filter:blur(20px);
}
.course-progress-card>span,.next-lesson-card>span{display:block;color:var(--muted);font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.12em}
.course-progress-card>strong{display:block;margin:12px 0;font-size:2.3rem;letter-spacing:-.06em}
.course-progress-line{height:8px;border-radius:999px;background:var(--line);overflow:hidden}.course-progress-line i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#8f1118,#d84e50)}
.next-lesson-card{position:relative}.next-lesson-card>strong{display:block;max-width:80%;margin:14px 0 5px;font-size:1.25rem}.next-lesson-card>small{color:var(--muted)}.next-lesson-card .btn{position:absolute;right:22px;bottom:22px;border-radius:999px;width:42px;height:42px;padding:0}

/* Real historical/city media */
.latin-origin-section{max-width:1280px;margin:34px auto 0}
.centered-head{text-align:center;justify-content:center}.centered-head h2{font-size:clamp(1.7rem,3vw,2.65rem)}
.latin-origin-card,.language-story-card{background:var(--glass-strong);border:1px solid var(--glass-line);box-shadow:0 18px 50px rgba(22,29,44,.09);backdrop-filter:blur(18px)}
.latin-origin-card{overflow:hidden;border-radius:30px}
.latin-origin-photo{position:relative;min-height:clamp(280px,38vw,500px);overflow:hidden}
.latin-origin-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 22%,rgba(20,8,7,.82))}
.latin-origin-photo img{display:block;width:100%;height:100%;min-height:inherit;object-fit:cover}
.latin-origin-photo>div{position:absolute;z-index:1;left:24px;right:24px;bottom:24px;text-align:center;color:#fff}
.latin-origin-photo h3{margin:0;font:800 clamp(3rem,8vw,6rem)/1 Georgia,serif;letter-spacing:-.05em;text-shadow:0 10px 28px rgba(0,0,0,.4)}
.latin-origin-card>p{max-width:850px;margin:0 auto;padding:24px clamp(20px,5vw,54px) 32px;text-align:center;color:var(--muted);font-size:1.02rem;line-height:1.75}
.latin-branch-diagram{height:94px;position:relative;margin:0 auto;max-width:700px;color:var(--roman-red)}
.latin-branch-diagram i{position:absolute;left:50%;top:0;width:2px;height:40px;background:currentColor;transform:translateX(-50%)}
.latin-branch-diagram::after{content:"";position:absolute;left:18%;right:18%;top:39px;height:2px;background:currentColor}
.latin-branch-diagram span{position:absolute;top:28px;font-size:2rem;font-weight:900}.latin-branch-diagram .left-branch{left:14%}.latin-branch-diagram .right-branch{right:14%}
.latin-language-columns{display:grid;grid-template-columns:1fr 1fr;gap:18px}.latin-language-columns>div{display:grid;gap:18px;align-content:start}
.language-story-card{overflow:hidden;border-radius:24px;transition:.2s ease}
.language-story-card.known-card{opacity:.7;filter:saturate(.72)}
.language-story-card.learning-card{opacity:1;border-color:color-mix(in srgb,var(--roman-gold) 55%,var(--line));box-shadow:0 20px 54px rgba(143,17,24,.12)}
.language-story-card:hover{transform:translateY(-2px)}
.language-story-photo{position:relative;min-height:230px;background-size:cover;background-position:center}
.language-story-photo>div{position:absolute;inset:auto 18px 17px;display:flex;align-items:center;gap:10px;z-index:1}.language-story-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,14,.03),rgba(7,8,12,.82))}
.language-story-photo h3{margin:0;color:#fff;font-size:1.35rem;text-shadow:0 4px 16px rgba(0,0,0,.45)}
.language-story-copy{padding:20px 22px 24px}.language-story-copy p{margin:0;color:var(--muted);font-size:.93rem;line-height:1.68}
.asset-credit{text-align:center;color:var(--muted);font-size:.68rem;margin:14px 0 0;opacity:.72}

/* Actual free concept illustrations */
.concept-visual{display:grid;place-items:center;min-height:190px;margin:16px 0 20px;padding:18px;border-radius:22px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent-soft) 70%,transparent),transparent);border:1px solid color-mix(in srgb,var(--line) 75%,transparent)}
.concept-visual img{display:block;width:min(210px,48vw);height:160px;object-fit:contain;filter:drop-shadow(0 14px 24px rgba(20,25,36,.12))}
.concept-visual.compact{min-height:94px;margin:0 0 10px;padding:8px}.concept-visual.compact img{width:88px;height:72px}
.concept-visual figcaption:empty{display:none}

/* Compact, personalized language matrices */
.language-strip{grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:10px}
.language-tile{min-width:0;min-height:122px;padding:13px;border-radius:18px;background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(14px);box-shadow:0 11px 28px rgba(28,35,52,.06)}
.language-tile.bridge{opacity:.78;filter:saturate(.8)}
.language-tile.target{opacity:1;border-color:color-mix(in srgb,var(--accent) 34%,var(--line));background:linear-gradient(180deg,color-mix(in srgb,var(--accent-soft) 38%,var(--panel)),var(--panel))}
.language-tile-head{display:flex!important;align-items:center;justify-content:space-between;min-height:28px;grid-template-columns:none!important}.language-tile-head>span:last-child,.language-tile-head strong,.language-tile-head small{display:none!important}
.language-value-row{display:flex;align-items:flex-start;gap:8px}.language-value-wrap{min-width:0;flex:1}.language-value{margin-top:11px;padding-top:10px;border-top:1px solid var(--line);font-size:1rem;line-height:1.35;overflow-wrap:anywhere}
.gender-symbol,.gender-badge{width:29px;height:29px;border-radius:999px;display:grid;place-items:center;font-size:1rem;font-weight:950}.gender-m{color:#246cb9;background:rgba(45,126,209,.13)}.gender-f{color:#c53d85;background:rgba(212,75,143,.13)}.gender-n{color:#7151b3;background:rgba(118,81,180,.14)}
.ipa-text,.ipa-sequence{color:var(--muted);font-size:.75rem;font-weight:600}.ipa-text.block,.ipa-sequence.block{display:block;margin-top:6px}html[data-ipa="off"] .ipa-text,html[data-ipa="off"] .ipa-sequence{display:none!important}

/* Less textual noise in exercises */
.session-top,.session-count,.exercise-kicker,.module-session-title,.guided-label{display:none!important}
.session-progress.clean,.session-progress{height:8px;margin:0 0 18px;border-radius:999px;background:color-mix(in srgb,var(--line) 82%,transparent)}
.exercise-card{padding:clamp(20px,3vw,34px);border-radius:26px;background:var(--glass-strong);backdrop-filter:blur(22px)}
.exercise-instruction.concise-instruction{margin:12px 0 18px;color:var(--muted);font-size:.96rem}
.exercise-prompt-audio{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.exercise-prompt-audio h2{margin:7px 0 0;font-size:clamp(1.55rem,4vw,2.55rem)}
.number-choice-prompt{display:flex;align-items:center;justify-content:center;gap:22px;min-height:230px}.number-choice-prompt strong{font-size:clamp(6rem,16vw,11rem);line-height:.8;letter-spacing:-.08em}.number-choice-prompt>span{font-size:2.7rem;color:var(--muted)}
.grammar-audio-prompt{display:grid;justify-items:center;gap:18px;min-height:210px;align-content:center;border-radius:24px;background:linear-gradient(135deg,var(--accent-soft),transparent);border:1px solid var(--line)}
.grammar-options{gap:10px}.grammar-options .setting-row{min-height:72px;border-radius:17px}
.exercise-actions{position:sticky;bottom:12px;z-index:4;margin-top:22px;padding:10px;border-radius:18px;background:color-mix(in srgb,var(--panel) 82%,transparent);backdrop-filter:blur(20px);box-shadow:0 12px 34px rgba(20,25,38,.11)}
.guided-flow-footer.simplified{position:sticky;bottom:12px;z-index:4;padding:11px;border-radius:18px;background:color-mix(in srgb,var(--panel) 84%,transparent);backdrop-filter:blur(20px);box-shadow:0 12px 34px rgba(20,25,38,.1)}

/* Verb explorer: no horizontal scrolling; sentence tense remains yellow */
.verb-explorer-language-tabs{display:flex;flex-wrap:wrap;overflow:visible;gap:8px}
.verb-explorer-tense-tabs{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(142px,1fr));gap:8px;overflow:visible!important;padding:10px 0}
.verb-explorer-tense-tabs button{width:100%;min-height:44px;white-space:normal;text-align:center;justify-content:center;line-height:1.2}
.verb-explorer-tense-tabs button.active{color:var(--accent);border-color:rgba(98,84,232,.5);background:var(--accent-soft)}
.verb-explorer-tense-tabs button.used-tense{color:#4d3800!important;border-color:#e3b923!important;background:#ffe783!important;box-shadow:0 0 0 3px rgba(227,185,35,.18),0 10px 20px rgba(227,185,35,.13)!important}
.verb-explorer-tense-tabs button.active.used-tense{outline:3px solid rgba(98,84,232,.3);outline-offset:2px}
.verb-explorer-table-wrap{overflow-x:auto;border-radius:17px}.verb-explorer-table{min-width:660px}

/* Media cards */
.course-video-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.course-video-card{overflow:hidden;border-radius:22px;background:var(--glass-strong);border:1px solid var(--glass-line);box-shadow:0 16px 40px rgba(20,27,42,.09)}
.video-embed-slot{min-height:240px;background:#0c0d10}.video-preview,.youtube-frame-wrap,.youtube-frame-wrap iframe{width:100%;height:100%;min-height:240px;border:0}.video-preview{position:relative;display:block;padding:0;cursor:pointer}.video-preview img{width:100%;height:240px;object-fit:cover}.video-preview::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(0,0,0,.35))}.video-play-button{z-index:2}.video-preview-label{z-index:2}.course-video-copy{padding:18px 20px 20px}.video-source-row{display:flex;justify-content:space-between;color:var(--muted);font-size:.65rem;text-transform:uppercase;letter-spacing:.1em}.course-video-copy h3{margin:9px 0 6px}.video-card-actions{margin-top:14px}

/* Dark theme */
html[data-theme="dark"] .course-progress-card,html[data-theme="dark"] .next-lesson-card,html[data-theme="dark"] .latin-origin-card,html[data-theme="dark"] .language-story-card,html[data-theme="dark"] .language-tile,html[data-theme="dark"] .exercise-card,html[data-theme="dark"] .course-video-card{background:rgba(25,28,37,.88);border-color:rgba(255,255,255,.075);box-shadow:0 20px 50px rgba(0,0,0,.28)}
html[data-theme="dark"] .language-tile.target{background:linear-gradient(180deg,rgba(112,95,240,.12),rgba(255,255,255,.035))}

@media(max-width:1000px){
  #app-shell{grid-template-columns:1fr}.latin-language-columns,.dashboard-core-stats{grid-template-columns:1fr}.course-video-grid{grid-template-columns:1fr}
  .roman-hero-brand h1{font-size:clamp(2.9rem,9vw,5.5rem)}
}
@media(max-width:760px){
  .view-root{padding:18px 13px 58px}.romancemax-hero{min-height:0;padding:38px 18px;border-radius:26px;gap:20px}
  .roman-hero-brand h1{gap:7px;font-size:clamp(2.05rem,10vw,3.5rem)}.spqr-logo{width:48px;height:48px}
  .maxxing-legend>div{grid-template-columns:1fr;text-align:center}.maxxing-legend>div>div{justify-content:center}.profile-language-chip b{display:none}
  .hero-actions{width:100%;display:grid;grid-template-columns:1fr}.roman-primary,.roman-secondary{width:100%}
  .romancemax-hero::before,.romancemax-hero::after{width:100px;height:100px;opacity:.11}
  .latin-origin-photo{min-height:240px}.latin-branch-diagram{height:70px}.latin-language-columns{gap:13px}.language-story-photo{min-height:190px}
  .language-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.language-tile{min-height:112px}.number-choice-prompt{min-height:180px}
  .verb-explorer-tense-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:430px){
  .roman-hero-brand h1{font-size:clamp(1.72rem,9.2vw,2.4rem);letter-spacing:-.065em}.spqr-logo{width:42px;height:42px}
  .language-strip{grid-template-columns:1fr 1fr}.language-value{font-size:.9rem}.audio-btn{width:34px;height:34px}
  .profile-language-chip{padding:6px 8px}.latin-origin-card>p{font-size:.91rem}.language-story-copy{padding:16px 17px 20px}
}