/* KINTAVOR Spanish Step by Step · production presentation layer */
:root {
    --ivory: #f5f0e6;
    --ivory-light: #fbf8f1;
    --paper: #fffdf8;
    --green: #123d33;
    --green-deep: #082f27;
    --green-soft: #dfe8df;
    --gold: #b98a3d;
    --gold-dark: #79531b;
    --ink: #17211e;
    --muted: #56615d;
    --line: #d9cdb9;
    --line-strong: #b9a98e;
    --success: #246a43;
    --danger: #9d3e35;
    --warning: #744900;
    --shadow: 0 18px 50px rgba(20, 43, 35, .10);
    --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
    --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --radius: .35rem;
    --content: 75rem;
    --sidebar: 15.5rem;
    --transition: 180ms ease;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 20rem; color: var(--ink); background: var(--ivory); font-family: var(--sans); font-size: 1rem; line-height: 1.55; text-rendering: optimizeLegibility; }
img, picture, svg { display: block; max-width: 100%; }
button, input, select, textarea { color: inherit; font: inherit; }
button, input[type="submit"] { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .52; }
a { color: var(--green); text-decoration-thickness: .07em; text-underline-offset: .18em; }
a:hover { color: var(--gold-dark); }
h1, h2, h3, h4, p, dl, dd, figure, blockquote { margin-top: 0; }
h1, h2, h3 { color: var(--green-deep); font-family: var(--serif); font-weight: 500; line-height: 1.06; }
h1 { font-size: clamp(2.6rem, 6vw, 5.6rem); letter-spacing: -.04em; }
h2 { font-size: clamp(2rem, 4vw, 3.35rem); letter-spacing: -.025em; }
h3 { font-size: 1.35rem; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; }
code { word-break: break-all; }
[hidden] { display: none !important; }

:focus-visible { outline: .18rem solid var(--gold-dark); outline-offset: .2rem; }
::selection { color: var(--paper); background: var(--green); }

.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.skip-link { position: fixed; z-index: 1000; top: .75rem; left: .75rem; padding: .75rem 1rem; color: var(--paper); background: var(--green-deep); transform: translateY(-150%); transition: transform var(--transition); }
.skip-link:focus { color: var(--paper); transform: translateY(0); }
.icon { display: inline-block; flex: 0 0 auto; width: 1.35rem; height: 1.35rem; vertical-align: -.25em; }

.button { display: inline-flex; min-height: 3rem; align-items: center; justify-content: center; gap: .55rem; padding: .72rem 1.35rem; border: 1px solid var(--green); border-radius: var(--radius); color: var(--paper); background: var(--green); font-size: .93rem; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; transition: color var(--transition), background var(--transition), border-color var(--transition), transform var(--transition); }
.button:hover { color: var(--paper); background: var(--green-deep); transform: translateY(-1px); }
.button-outline { color: var(--green); background: transparent; }
.button-outline:hover { color: var(--paper); background: var(--green); }
.button-gold { border-color: var(--gold-dark); color: #fff; background: var(--gold-dark); }
.button-gold:hover { border-color: var(--green-deep); background: var(--green-deep); }
.button-light-outline { border-color: var(--paper); color: var(--paper); background: transparent; }
.button-light-outline:hover { color: var(--green); background: var(--paper); }
.button-small { min-height: 2.5rem; padding: .55rem 1rem; font-size: .85rem; }
.button-large { min-height: 3.6rem; font-size: 1.05rem; }
.button-full { width: 100%; }
.text-link, .text-button { display: inline-flex; align-items: center; gap: .45rem; border: 0; color: var(--green); background: transparent; font-weight: 700; text-decoration: none; }
.text-link .icon, .text-button .icon { width: 1.05rem; transition: transform var(--transition); }
.text-link:hover .icon { transform: translateX(.2rem); }
.text-button { padding: .35rem 0; }
.text-button:hover { color: var(--gold-dark); }
.text-button.danger, .danger { color: var(--danger); }
.icon-button { display: inline-flex; width: 2.45rem; height: 2.45rem; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); color: var(--green); background: transparent; text-decoration: none; }
.icon-button:hover { border-color: var(--gold); color: var(--green); background: var(--ivory); }

label { display: grid; gap: .38rem; font-size: .9rem; font-weight: 700; }
input, select, textarea { width: 100%; min-height: 2.9rem; padding: .68rem .78rem; border: 1px solid var(--line-strong); border-radius: var(--radius); color: var(--ink); background: var(--paper); font-size: .95rem; font-weight: 400; line-height: 1.4; }
textarea { resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: var(--gold); }
input:focus, select:focus, textarea:focus { border-color: var(--green); outline: .16rem solid var(--gold-dark); outline-offset: .08rem; }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--danger); }
input[type="checkbox"], input[type="radio"] { width: 1.15rem; min-height: 1.15rem; padding: 0; accent-color: var(--green); }
.check-label { grid-template-columns: auto 1fr; align-items: start; gap: .65rem; font-weight: 400; }
.check-label input { margin-top: .15rem; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.form-row.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stack-form { display: grid; gap: 1.1rem; }
.field-hint, .section-hint, .privacy-hint { margin: .2rem 0 0; color: var(--muted); font-size: .8rem; font-weight: 400; }
.form-status { min-height: 1.5rem; margin: .4rem 0 0; font-size: .9rem; }
.form-status.is-error { color: var(--danger); }
.form-status.is-success { color: var(--success); }
.password-wrap { display: grid; grid-template-columns: 1fr auto; }
.password-wrap input { grid-area: 1 / 1 / 2 / 3; padding-right: 3.5rem; }
.password-wrap button { grid-area: 1 / 2; align-self: center; margin-right: .25rem; }

progress { width: 100%; height: .38rem; overflow: hidden; border: 0; border-radius: 999px; background: #e4dac8; color: var(--gold); }
progress::-webkit-progress-bar { border-radius: 999px; background: #e4dac8; }
progress::-webkit-progress-value { border-radius: 999px; background: var(--gold); }
progress::-moz-progress-bar { border-radius: 999px; background: var(--gold); }
.progress-track { width: 100%; height: .34rem; overflow: hidden; border-radius: 999px; background: #e4dac8; }
.progress-track > span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--gold); }

.status { display: inline-flex; align-items: center; gap: .38rem; padding: .18rem .48rem; border: 1px solid var(--line); border-radius: 999px; font-family: var(--sans); font-size: .74rem; font-weight: 650; line-height: 1.3; white-space: nowrap; }
.status > span { width: .43rem; height: .43rem; border-radius: 50%; background: currentColor; }
.status-success { border-color: #bad2bd; color: var(--success); background: #edf5eb; }
.status-progress { border-color: #dec48f; color: var(--warning); background: #fbf2df; }
.status-muted { color: #5f625f; background: #f0eee9; }
.status-danger { border-color: #dab7b1; color: var(--danger); background: #fbefed; }
.status-neutral { color: var(--green); background: var(--ivory-light); }
.notice { display: flex; gap: .75rem; align-items: flex-start; padding: 1rem 1.1rem; border-left: .2rem solid var(--gold); color: var(--ink); background: #fbf6e9; }
.notice .icon { flex: 0 0 auto; color: var(--gold-dark); }
.notice span { display: block; }
.empty-state { display: grid; justify-items: center; padding: 2.5rem; color: var(--muted); text-align: center; }
.empty-state .icon { width: 2.2rem; height: 2.2rem; color: var(--gold); }
.empty-state h2 { margin: .6rem 0; font-size: 1.8rem; }
.empty-state.compact { padding: 1.2rem; }
.empty-state.compact p { margin-bottom: .5rem; }
.empty-state.large { min-height: 20rem; align-content: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* Public shell */
.site-header { position: sticky; z-index: 100; top: 0; border-bottom: 1px solid var(--line); background: rgba(245, 240, 230, .97); backdrop-filter: blur(12px); }
.site-header-inner { display: flex; min-height: 4.6rem; max-width: 92rem; align-items: center; justify-content: space-between; gap: 2rem; margin: 0 auto; padding: .6rem clamp(1rem, 4vw, 3rem); }
.brand { display: inline-flex; flex-direction: column; color: var(--green); line-height: 1.05; text-decoration: none; }
.brand:hover { color: var(--green); }
.brand-name { font-family: var(--serif); font-size: 1.7rem; font-weight: 700; letter-spacing: .025em; }
.brand-product { margin-top: .25rem; color: var(--gold-dark); font-size: .73rem; letter-spacing: .02em; }
.public-nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.2rem); }
.public-nav > a:not(.button) { position: relative; padding: .55rem 0; color: var(--ink); font-size: .87rem; font-weight: 650; text-decoration: none; }
.public-nav > a:not(.button)::after { position: absolute; right: 0; bottom: .25rem; left: 0; height: 1px; content: ""; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform var(--transition); }
.public-nav > a:hover::after, .public-nav > a[aria-current="page"]::after { transform: scaleX(1); }
.nav-toggle { display: none; align-items: center; gap: .5rem; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: var(--radius); background: transparent; font-weight: 700; }
.nav-toggle .icon { width: 1.15rem; }
.site-footer { color: var(--paper); background: var(--green-deep); }
.footer-inner { display: grid; max-width: var(--content); grid-template-columns: minmax(15rem, 1.6fr) .7fr .7fr; gap: 3rem; margin: 0 auto; padding: 3rem 1.5rem 2.4rem; }
.footer-brand .brand-name { margin-bottom: .65rem; color: var(--paper); }
.footer-brand p:last-child { color: #d6e1dd; }
.site-footer nav { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; }
.site-footer h2 { margin-bottom: .4rem; color: var(--paper); font-family: var(--sans); font-size: .84rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.site-footer a { color: #d6e1dd; font-size: .85rem; text-decoration: none; }
.site-footer a:hover { color: var(--paper); text-decoration: underline; }
.footer-legal { max-width: var(--content); margin: 0 auto; padding: 0 1.5rem 1.8rem; color: #b9cbc5; font-size: .75rem; }

.flash-stack { position: fixed; z-index: 300; top: 5.2rem; right: 1rem; display: grid; width: min(26rem, calc(100vw - 2rem)); gap: .7rem; }
.flash { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: .9rem 1rem; border: 1px solid var(--line); background: var(--paper); box-shadow: var(--shadow); }
.flash p { margin: .2rem 0 0; }
.flash-success { border-left: .2rem solid var(--success); }
.flash-error { border-left: .2rem solid var(--danger); }

/* Public landing */
.hero { display: grid; max-width: 92rem; min-height: min(46rem, calc(100vh - 4.6rem)); grid-template-columns: 49% 51%; margin: 0 auto; border-bottom: 1px solid var(--line); }
.hero-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(3rem, 7vw, 7rem) clamp(1.5rem, 5vw, 5.3rem); }
.hero h1 { max-width: 8.5ch; margin-bottom: .7rem; color: var(--green); }
.hero-subtitle { margin-bottom: .7rem; color: var(--gold-dark); font-family: var(--serif); font-size: clamp(1.65rem, 3vw, 2.5rem); }
.gold-rule { display: block; width: 3.6rem; height: .16rem; margin: .25rem 0 1.2rem; background: var(--gold); }
.hero-promise { max-width: 25ch; margin-bottom: .35rem; color: var(--ink); font-family: var(--serif); font-size: clamp(1.4rem, 2.3vw, 2rem); line-height: 1.3; }
.hero-availability { margin-bottom: 1.35rem; font-size: .91rem; }
.hero-actions { display: grid; max-width: 23rem; gap: .65rem; }
.hero-price { margin-top: 1.2rem; }
.hero-price p { margin: .15rem 0; font-size: .78rem; }
.hero-price p:first-child { color: var(--green); font-family: var(--serif); font-size: 1.25rem; }
.hero-media { min-height: 34rem; margin: 0; overflow: hidden; background: #dad3c6; }
.hero-media picture, .hero-media img { width: 100%; height: 100%; }
.hero-media img { object-fit: cover; object-position: right center; }
.section { max-width: var(--content); margin: 0 auto; padding: clamp(4rem, 8vw, 7rem) 1.5rem; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 3rem; margin-bottom: 3.4rem; }
.section-heading h2, .real-life-intro h2 { margin: 0; }
.section-heading > p { max-width: 34rem; margin: 0; }

.path-preview { max-width: 92rem; }
.level-path { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); padding: 0; margin: 0; list-style: none; }
.level-path::before { position: absolute; top: 1.1rem; right: 7.1%; left: 7.1%; z-index: 0; height: 1px; content: ""; background: var(--gold); }
.level-path li { position: relative; z-index: 1; text-align: center; }
.level-marker { display: grid; width: 2.25rem; height: 2.25rem; place-items: center; margin: 0 auto .75rem; border: 1px solid var(--green); border-radius: 50%; color: var(--paper); background: var(--green); font-family: var(--serif); font-size: 1.15rem; }
.level-path .is-future .level-marker { border-style: dashed; border-color: var(--gold); color: var(--gold-dark); background: var(--ivory); }
.level-copy h3 { margin-bottom: .1rem; font-size: clamp(1.35rem, 2vw, 2rem); }
.level-name, .level-status { margin: .1rem 0; font-size: .76rem; }
.level-status { display: inline-flex; align-items: center; gap: .25rem; color: var(--muted); }
.level-status .icon { width: .82rem; height: .82rem; }
.level-path-detailed { grid-template-columns: 1fr; gap: 0; }
.level-path-detailed::before { top: 1.5rem; bottom: 1.5rem; left: 1.35rem; width: 1px; height: auto; }
.level-path-detailed li { display: grid; grid-template-columns: 2.7rem minmax(0, 1fr); gap: 1.5rem; min-height: 10rem; text-align: left; }
.level-path-detailed .level-marker { width: 2.7rem; height: 2.7rem; margin: 0; }
.level-path-detailed .level-copy { display: grid; grid-template-columns: minmax(6rem, .4fr) minmax(12rem, 1fr) minmax(10rem, .6fr); align-items: start; gap: 1.5rem; padding: 0 0 2.6rem; }
.level-path-detailed .level-copy h3 { grid-row: span 2; font-size: 2.7rem; }
.level-path-detailed .level-name { align-self: end; font-family: var(--serif); font-size: 1.35rem; }
.level-path-detailed .level-status { justify-self: end; }
.level-path-detailed .level-copy > p:not(.level-name):not(.level-status) { grid-column: 2; }
.level-path-detailed .level-copy > a, .level-path-detailed .future-note { grid-column: 3; grid-row: 2; justify-self: end; }
.future-note { color: var(--muted); font-size: .8rem; }

.real-life { display: grid; grid-template-columns: minmax(15rem, .72fr) minmax(24rem, 1.55fr); gap: clamp(3rem, 8vw, 8rem); border-top: 1px solid var(--line); }
.real-life-intro { position: sticky; top: 7rem; align-self: start; }
.real-life-intro p { max-width: 23rem; }
.real-life-intro .text-link { margin-top: 1rem; }
.topic-ledger { padding: 0; margin: 0; list-style: none; }
.topic-ledger li { display: grid; grid-template-columns: 3.5rem 1fr; gap: 1.2rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.topic-ledger > li > span { color: var(--gold-dark); font-family: var(--serif); font-size: 1.45rem; }
.topic-ledger h3 { margin-bottom: .2rem; color: var(--ink); font-family: var(--sans); font-size: 1rem; font-weight: 750; }
.topic-ledger p { margin: 0; font-size: .86rem; }
.workflow-band { padding: 3rem 1.5rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--ivory-light); }
.workflow-band > h2 { margin-bottom: 2.2rem; text-align: center; font-size: clamp(1.8rem, 3vw, 2.5rem); }
.workflow { display: grid; max-width: var(--content); grid-template-columns: repeat(4, 1fr); gap: 2rem; padding: 0; margin: 0 auto; list-style: none; }
.workflow li { display: flex; align-items: center; gap: 1rem; }
.workflow > li > .icon { width: 3.6rem; height: 3.6rem; padding: .75rem; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold-dark); }
.workflow strong { display: block; margin-bottom: .2rem; }
.workflow p { margin: 0; font-size: .8rem; }
.thirty-days { display: grid; grid-template-columns: .85fr 1.35fr; align-items: start; gap: 4rem; }
.thirty-days h2 { margin-bottom: 1rem; }
.thirty-days ol { padding: 0; margin: 0; list-style: none; }
.thirty-days li { display: grid; grid-template-columns: 7rem 1fr; padding: .85rem 0; border-bottom: 1px solid var(--line); }
.thirty-days .button { grid-column: 2; justify-self: start; }
.pricing { display: grid; grid-template-columns: .9fr 1.3fr; gap: 4rem; border-top: 1px solid var(--line); }
.pricing-note { max-width: 32rem; color: var(--muted); font-size: .86rem; }
.pricing-offer { display: grid; justify-items: center; padding: 2.6rem; border: 1px solid var(--gold); text-align: center; background: var(--ivory-light); }
.pricing-offer > p:first-child { margin-bottom: .15rem; color: var(--gold-dark); font-family: var(--serif); font-size: 1.4rem; }
.pricing-offer > strong { color: var(--green); font-family: var(--serif); font-size: 3.6rem; font-weight: 500; line-height: 1; }
.pricing-offer p { margin: .25rem 0; }
.pricing-offer .button { min-width: 18rem; margin-top: 1rem; }
.faq { border-top: 1px solid var(--line); }
.faq > div:first-child { margin-bottom: 2rem; }
.faq h2 { margin-bottom: .5rem; }
.accordion { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 4rem; }
.accordion h3 { margin: 0; border-bottom: 1px solid var(--line); font-family: var(--sans); }
.accordion h3 button { display: flex; width: 100%; min-height: 3.4rem; align-items: center; justify-content: space-between; gap: 1rem; padding: .65rem 0; border: 0; color: var(--ink); background: transparent; font-size: .9rem; font-weight: 700; text-align: left; }
.accordion h3 button:hover { color: var(--green); }
.accordion-mark { color: var(--gold-dark); font-family: var(--serif); font-size: 1.5rem; font-weight: 400; transition: transform var(--transition); }
.accordion button[aria-expanded="true"] .accordion-mark { transform: rotate(45deg); }
.accordion [role="region"] { padding: .8rem 0 1.2rem; border-bottom: 1px solid var(--line); }
.accordion [role="region"] p { margin: 0; color: var(--muted); font-size: .88rem; }

/* Public inner pages */
.page-intro { display: grid; max-width: var(--content); grid-template-columns: 5rem 1fr; gap: clamp(2rem, 8vw, 8rem); margin: 0 auto; padding: clamp(4rem, 10vw, 8rem) 1.5rem; }
.page-intro > div { max-width: 53rem; }
.page-intro h1 { margin-bottom: 1.4rem; font-size: clamp(3rem, 7vw, 6rem); }
.page-intro > div > p { max-width: 42rem; font-size: 1.2rem; }
.section-number { padding-top: .8rem; color: var(--gold-dark); font-family: var(--serif); font-size: 1.5rem; }
.prose-split { display: grid; grid-template-columns: .7fr 1.3fr; gap: 5rem; border-top: 1px solid var(--line); }
.method-ledger { padding: 0; margin: 0; list-style: none; }
.method-ledger li { display: grid; grid-template-columns: 3rem 1fr; gap: 1.2rem; padding: 1.2rem 0; border-bottom: 1px solid var(--line); }
.method-ledger > li > span { color: var(--gold-dark); font-family: var(--serif); font-size: 1.3rem; }
.method-ledger h3 { margin: 0 0 .25rem; color: var(--ink); font-family: var(--sans); font-size: 1.05rem; font-weight: 750; }
.method-ledger p { margin: 0; color: var(--muted); }
.dark-band, .cta-band { color: var(--paper); background: var(--green-deep); }
.dark-band { display: grid; grid-template-columns: 1fr 1.3fr; gap: 5rem; padding: clamp(4rem, 7vw, 6rem) max(1.5rem, calc((100vw - var(--content)) / 2)); }
.dark-band h2, .cta-band h2 { color: var(--paper); }
.method-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.method-stats div { border-top: 1px solid var(--gold); padding-top: 1rem; }
.method-stats dt { color: var(--gold); font-family: var(--serif); font-size: 2.5rem; }
.method-stats dd { color: #d7e1dd; }
.pace-section { display: grid; grid-template-columns: .7fr 1.3fr; gap: 5rem; }
.pace-options article { padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.pace-options h3 { margin-bottom: .4rem; }
.cta-band { display: flex; align-items: center; justify-content: space-between; gap: 3rem; padding: 3.5rem max(1.5rem, calc((100vw - var(--content)) / 2)); }
.cta-band h2, .cta-band p { margin-bottom: .4rem; }
.cta-actions { display: flex; gap: .7rem; }
.detailed-path { padding-top: 2rem; }
.level-inventory { border-top: 1px solid var(--line); }
.level-inventory > div:first-child { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; }
.level-inventory th, .level-inventory td { padding: 1rem; border-bottom: 1px solid var(--line); }
.level-inventory thead th { color: var(--muted); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }

.contained-public-page main { min-height: calc(100vh - 4.6rem); }
.form-page { display: grid; max-width: 74rem; grid-template-columns: minmax(16rem, .72fr) minmax(25rem, 1.28fr); gap: clamp(3rem, 8vw, 7rem); margin: 0 auto; padding: clamp(3rem, 7vw, 6rem) 1.5rem; }
.form-page-intro { position: sticky; top: 7rem; align-self: start; }
.form-page-intro h1 { margin-top: 2rem; font-size: clamp(2.7rem, 5vw, 4.6rem); }
.back-link { display: inline-flex; align-items: center; gap: .4rem; color: var(--green); font-size: .85rem; font-weight: 700; text-decoration: none; }
.back-link .icon { width: 1rem; }
.wizard { padding: 2rem; border: 1px solid var(--line); background: var(--ivory-light); }
.wizard-status { margin-bottom: 2rem; }
.wizard-status p { margin-bottom: .4rem; font-size: .8rem; font-weight: 700; }
.wizard-step { padding: 0; border: 0; }
.wizard-step > legend { margin-bottom: 1.5rem; color: var(--green); font-family: var(--serif); font-size: 1.8rem; }
.test-question { margin-bottom: 1.8rem; }
.test-question > p { font-weight: 700; }
.test-question > p > span { color: var(--gold-dark); }
.choice-list { display: grid; gap: .55rem; }
.choice-list label { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .7rem; padding: .72rem .8rem; border: 1px solid var(--line); background: var(--paper); font-weight: 400; transition: border-color var(--transition), background var(--transition); }
.choice-list label:hover { border-color: var(--gold); }
.choice-list label:has(input:checked) { border-color: var(--green); background: #edf3ef; }
.choice-list.horizontal { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wizard-actions { display: flex; justify-content: flex-end; gap: .7rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.result-page { display: grid; max-width: 50rem; min-height: 40rem; align-content: center; justify-items: center; margin: 0 auto; padding: 5rem 1.5rem; text-align: center; }
.result-mark { display: grid; width: 6rem; height: 6rem; place-items: center; margin-bottom: 2rem; border: 1px solid var(--gold); border-radius: 50%; color: var(--green); font-family: var(--serif); font-size: 2.5rem; }
.result-page h1 { font-size: clamp(2.5rem, 6vw, 4.8rem); }
.result-page > p { max-width: 39rem; }
.placement-score-breakdown { width: min(100%, 44rem); margin: 1.2rem 0; padding: 1.5rem; border: 1px solid var(--line); background: var(--ivory-light); text-align: left; }
.placement-score-breakdown h2 { margin-bottom: .55rem; font-size: 1.65rem; }
.placement-score-breakdown > p { margin-bottom: 1rem; color: var(--muted); }
.placement-section-scores { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; margin-bottom: 0; }
.placement-section-scores > div { padding: .8rem; border-top: .18rem solid var(--line-strong); background: var(--paper); }
.placement-section-scores > .meets-threshold { border-top-color: var(--success); }
.placement-section-scores > .below-threshold { border-top-color: var(--danger); }
.placement-section-scores dt { color: var(--muted); font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.placement-section-scores dd { margin: 0; }
.placement-section-scores strong { color: var(--green); font-family: var(--serif); font-size: 2rem; font-weight: 500; }
.placement-section-scores span { color: var(--muted); }
.placement-section-scores small { display: block; color: var(--muted); font-size: .72rem; }
.result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin: 1rem 0 1.5rem; }
.error-code { color: var(--gold); font-family: var(--serif); font-size: 3rem; }
.mini-intro { padding-bottom: 4rem; }
.mini-course { display: grid; grid-template-columns: 18rem minmax(0, 1fr); gap: 4rem; border-top: 1px solid var(--line); }
.mini-nav { display: flex; flex-direction: column; }
.mini-nav button { display: grid; grid-template-columns: 2.2rem 1fr; gap: .7rem; padding: 1.1rem .4rem; border: 0; border-bottom: 1px solid var(--line); color: var(--gold-dark); background: transparent; text-align: left; }
.mini-nav button span { color: var(--ink); font-weight: 700; }
.mini-nav button[aria-selected="true"] { border-bottom-color: var(--gold); background: var(--ivory-light); }
.mini-lesson { max-width: 47rem; }
.objective-label, .ui-label { margin-bottom: .45rem; color: var(--gold-dark); font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.example-block { margin: 2rem 0; padding: 1.6rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.example-block p:first-child { margin-bottom: .4rem; color: var(--green); font-family: var(--serif); font-size: 1.7rem; }
.example-block p:last-child { margin: 0; color: var(--muted); }
.inline-practice { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: .8rem; }
.inline-practice .form-status { grid-column: 1 / -1; }

.auth-body, .checkout-body { background: var(--ivory); }
.auth-page { display: grid; min-height: 100vh; grid-template-columns: minmax(20rem, .85fr) minmax(25rem, 1.15fr); }
.auth-story { display: flex; flex-direction: column; justify-content: space-between; padding: clamp(2rem, 6vw, 5rem); color: var(--paper); background: var(--green-deep); }
.auth-story .brand { align-self: start; color: var(--paper); }
.auth-story .brand-product { color: var(--gold); }
.auth-story blockquote { max-width: 11ch; margin: auto 0 2rem; color: var(--paper); font-family: var(--serif); font-size: clamp(2.4rem, 5vw, 4.6rem); line-height: 1.03; }
.auth-story > p { max-width: 28rem; color: #c8d8d2; }
.auth-panel { display: flex; width: min(100%, 35rem); flex-direction: column; justify-content: center; justify-self: center; padding: 4rem 2rem; }
.auth-panel h1 { margin: 2rem 0 .7rem; font-size: clamp(2.5rem, 5vw, 4.5rem); }
.auth-panel > p { color: var(--muted); }
.auth-meta { margin: 1rem 0 0; text-align: center; }
.checkout-page > header { display: flex; max-width: 78rem; align-items: center; justify-content: space-between; margin: 0 auto; padding: 1.2rem 1.5rem; border-bottom: 1px solid var(--line); }
.checkout-page > header > p { margin: 0; color: var(--muted); font-size: .85rem; }
.checkout-layout { display: grid; max-width: 72rem; grid-template-columns: 1.2fr .8fr; gap: 5rem; margin: 0 auto; padding: 5rem 1.5rem; }
.checkout-main h1 { margin: 2rem 0 1rem; font-size: clamp(2.6rem, 5vw, 4.5rem); }
.checkout-main > p { margin-bottom: 2rem; color: var(--muted); }
.checkout-result { max-width: 46rem; margin: 5rem auto; padding: clamp(2rem, 6vw, 4.5rem); border: 1px solid var(--line); background: var(--paper); text-align: center; }
.checkout-result > .icon { width: 2.5rem; height: 2.5rem; color: var(--green); }
.checkout-result h1 { margin: .6rem 0 1rem; }
.checkout-result .notice { margin: 1.5rem 0; text-align: left; }
.checkout-result .button { margin-top: 1rem; }
.payment-note { color: var(--muted); font-size: .76rem; text-align: center; }
.order-summary { align-self: start; padding: 2rem; border: 1px solid var(--gold); background: var(--ivory-light); }
.order-summary h2 { margin-bottom: 1.5rem; font-size: 2rem; }
.order-summary h3 { margin-bottom: .25rem; font-family: var(--sans); font-size: 1rem; font-weight: 750; }
.order-summary ul { padding-left: 1.2rem; font-size: .86rem; }
.order-summary dl { margin: 1.5rem 0; border-top: 1px solid var(--line); }
.order-summary dl div { display: flex; justify-content: space-between; padding: .65rem 0; border-bottom: 1px solid var(--line); }
.order-summary .total { color: var(--green); font-weight: 800; }
.order-summary > p:last-child { margin: 0; font-size: .78rem; }
.support-form { display: grid; grid-template-columns: .7fr 1.3fr; gap: 5rem; border-top: 1px solid var(--line); }
.legal-page { max-width: 55rem; margin: 0 auto; padding: 5rem 1.5rem; }
.legal-page h1 { margin-top: 2rem; }
.legal-page h2 { margin-top: 2.5rem; font-size: 2rem; }
.legal-updated { color: var(--muted); }

/* App shells */
.app-shell, .admin-shell { min-height: 100vh; }
.app-sidebar, .admin-sidebar { position: fixed; z-index: 150; inset: 0 auto 0 0; display: flex; width: var(--sidebar); flex-direction: column; overflow-y: auto; color: var(--paper); background: var(--green-deep); }
.app-brand { display: flex; min-height: 8.5rem; flex-direction: column; justify-content: center; padding: 1.5rem 2rem; color: var(--paper); text-decoration: none; }
.app-brand:hover { color: var(--paper); }
.app-brand .brand-name { color: var(--gold); font-size: 1.65rem; }
.app-brand > span:last-child { margin-top: .25rem; color: #d5e1dc; font-size: .83rem; }
.app-sidebar nav, .admin-sidebar nav { display: grid; padding: .5rem 0; }
.app-sidebar nav a, .admin-sidebar nav a, .sidebar-foot > a, .sidebar-foot form button { display: flex; min-height: 3.45rem; align-items: center; gap: 1rem; padding: .75rem 1.7rem; border: 0; color: #f0f4f2; background: transparent; font-size: .9rem; text-decoration: none; }
.app-sidebar nav a:hover, .admin-sidebar nav a:hover, .sidebar-foot > a:hover, .sidebar-foot form button:hover, .app-sidebar nav a[aria-current="page"], .admin-sidebar nav a[aria-current="page"] { color: var(--paper); background: #1d5849; }
.app-sidebar nav a[aria-current="page"], .admin-sidebar nav a[aria-current="page"] { box-shadow: inset .28rem 0 0 var(--gold); }
.app-sidebar nav .icon, .admin-sidebar nav .icon, .sidebar-foot .icon { width: 1.4rem; height: 1.4rem; }
.sidebar-foot { margin-top: auto; border-top: 1px solid rgba(255,255,255,.18); }
.sidebar-foot form button { width: 100%; }
.streak { margin: 0; padding: 1rem 1.7rem; color: var(--paper); font-weight: 700; }
.streak span { margin-right: .4rem; color: var(--gold); }
.app-main-wrap, .admin-main-wrap { min-height: 100vh; margin-left: var(--sidebar); }
.app-topbar { display: none; min-height: 4rem; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem 1rem; border-bottom: 1px solid var(--line); background: var(--ivory); }
.mobile-brand { color: var(--green); font-family: var(--serif); font-weight: 700; text-decoration: none; }
.user-link { display: flex; align-items: center; gap: .5rem; text-decoration: none; }
.app-main { max-width: 94rem; margin: 0 auto; padding: clamp(2rem, 4vw, 4rem); }
.app-page-heading, .admin-page-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2.5rem; }
.app-page-heading h1, .admin-page-heading h1 { margin-bottom: .45rem; font-size: clamp(2.8rem, 5vw, 4.4rem); }
.app-page-heading p, .admin-page-heading p { margin-bottom: 0; color: var(--muted); }
.session-count, .usage-meter { padding: .55rem .8rem; border: 1px solid var(--line); font-size: .82rem; white-space: nowrap; }

/* Student dashboard and curriculum */
.dashboard-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(17rem, .65fr); gap: 4rem; }
.dashboard-greeting { margin-bottom: 2.2rem; }
.dashboard-greeting h1 { margin-bottom: .5rem; font-size: clamp(2.5rem, 5vw, 4.4rem); }
.current-path { padding: 1.7rem 0 2rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.current-path h2 { margin-bottom: .2rem; font-size: 2.8rem; }
.current-path > p:not(.ui-label) { margin-bottom: 1.2rem; }
.current-path .button { margin-top: 1.2rem; }
.progress-meta { display: flex; justify-content: space-between; margin-top: .45rem; color: var(--muted); font-size: .78rem; }
.dashboard-section { padding-top: 2.1rem; }
.dashboard-section > h2, .dashboard-secondary h2 { margin-bottom: 1rem; color: var(--ink); font-family: var(--sans); font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.activity-list, .recent-list { padding: 0; margin: 0; list-style: none; }
.activity-list li, .recent-list li { display: grid; grid-template-columns: 2rem 1.5rem 1fr; align-items: center; min-height: 3.5rem; border-top: 1px solid var(--line); }
.activity-check { display: grid; width: 1.5rem; height: 1.5rem; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; }
.activity-check .icon { width: 1rem; color: var(--green); }
.activity-list > li > .icon { width: 1.35rem; }
.activity-list a { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 1rem; padding: .9rem .2rem; color: var(--ink); text-decoration: none; }
.activity-list a > span { color: var(--muted); font-size: .8rem; }
.activity-list a .icon { width: 1rem; }
.recent-list li { grid-template-columns: 2rem 1fr; }
.recent-list a { display: grid; grid-template-columns: 5rem 1fr auto auto; align-items: center; gap: 1rem; padding: .75rem .2rem; color: var(--ink); text-decoration: none; }
.recent-list small { grid-column: 2; color: var(--muted); }
.recent-percent { grid-column: 3; grid-row: 1 / 3; color: var(--muted); font-size: .8rem; }
.recent-list .icon { grid-column: 4; grid-row: 1 / 3; width: 1rem; }
.dashboard-secondary { display: grid; align-content: start; gap: 0; padding-top: 8.8rem; }
.dashboard-secondary section { padding: 1.5rem 0; border-top: 1px solid var(--line); }
.compact-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.compact-stats dt { color: var(--green); font-family: var(--serif); font-size: 1.5rem; }
.compact-stats dd { color: var(--muted); font-size: .72rem; }
.student-path { border-top: 1px solid var(--line); }
.student-level { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, .55fr) auto; align-items: center; gap: 2rem; padding: 1.7rem 0; border-bottom: 1px solid var(--line); }
.student-level-head { display: grid; grid-template-columns: 4rem 1fr auto; align-items: center; gap: 1.2rem; }
.level-letter { color: var(--green); font-family: var(--serif); font-size: 2.7rem; }
.student-level h2 { margin-bottom: .25rem; font-size: 1.5rem; }
.student-level p { margin: 0; color: var(--muted); font-size: .85rem; }
.student-level-progress { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: .8rem; color: var(--muted); font-size: .78rem; }
.student-level.is-locked { opacity: .72; }
.locked-message, .locked-label { display: flex; align-items: center; gap: .45rem; color: var(--muted); font-size: .8rem; }
.locked-message .icon, .locked-label .icon { width: 1rem; }
.unit-ledger { border-top: 1px solid var(--line); }
.unit-row { display: grid; grid-template-columns: 4rem minmax(0, 1fr) auto; align-items: center; gap: 2rem; padding: 1.8rem 0; border-bottom: 1px solid var(--line); }
.unit-number { color: var(--gold-dark); font-family: var(--serif); font-size: 1.5rem; }
.unit-row h2 { margin-bottom: .3rem; font-size: 1.65rem; }
.unit-row p { margin-bottom: .8rem; color: var(--muted); }
.unit-row small { color: var(--muted); }
.unit-row a { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; text-decoration: none; }
.unit-row.is-locked { opacity: .62; }
.intensive-heading { align-items: end; }
.intensive-heading > div:first-child { max-width: 52rem; }
.intensive-progress-summary { min-width: 9rem; padding-left: 1.2rem; border-left: .18rem solid var(--gold); }
.intensive-progress-summary strong, .intensive-progress-summary span { display: block; }
.intensive-progress-summary strong { color: var(--green); font-family: var(--serif); font-size: 2rem; font-weight: 500; }
.intensive-progress-summary span { color: var(--muted); font-size: .78rem; }
.intensive-progress { padding: 1rem 0 1.8rem; border-top: 1px solid var(--line); }
.intensive-progress > div { display: flex; justify-content: space-between; gap: 1rem; }
.intensive-progress h2 { margin: 0; color: var(--ink); font-family: var(--sans); font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.intensive-progress span { color: var(--muted); font-size: .8rem; }
.intensive-day-list { padding: 0; margin: 0; border-top: 1px solid var(--line); list-style: none; }
.intensive-day { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; align-items: center; gap: 1.5rem; padding: 1.35rem 0; border-bottom: 1px solid var(--line); }
.intensive-day-number { display: grid; color: var(--gold-dark); font-family: var(--serif); font-size: 1.65rem; line-height: 1; }
.intensive-day-number small { margin-bottom: .25rem; color: var(--muted); font-family: var(--sans); font-size: .65rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.intensive-day-copy > div { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; }
.intensive-day-copy h2 { margin: 0; font-size: 1.45rem; }
.intensive-day-copy p { margin: .35rem 0; color: var(--muted); }
.intensive-day-copy > small { color: var(--muted); font-size: .73rem; }
.intensive-day-details { padding: 0; margin: .55rem 0; color: var(--muted); font-size: .8rem; list-style: none; }
.intensive-day-details li { margin-top: .2rem; }
.intensive-day-details strong { color: var(--ink); }
.intensive-day.is-locked { opacity: .66; }
.intensive-day.is-completed .intensive-day-number { color: var(--green); }
.intensive-day[aria-current="step"] { box-shadow: inset .18rem 0 0 var(--gold); }
.intensive-day[aria-current="step"] .intensive-day-number { padding-left: 1rem; }
.intensive-next { display: flex; justify-content: flex-end; padding-top: 2rem; }

/* Lesson and practice */
.lesson-page .app-main { max-width: 86rem; }
.lesson-player { padding-bottom: 2rem; }
.lesson-header { display: flex; justify-content: space-between; gap: 3rem; padding-bottom: 1.6rem; }
.lesson-header > div { max-width: 55rem; }
.lesson-header h1 { margin: 1rem 0 1.2rem; font-size: clamp(3rem, 6vw, 5rem); }
.lesson-objective { margin-bottom: .4rem; font-size: 1.12rem; font-weight: 700; }
.lesson-header > div > p:last-child { max-width: 47rem; }
.lesson-menu-button { align-self: start; }
.lesson-outline { position: sticky; z-index: 40; top: 0; display: flex; gap: 2.3rem; overflow-x: auto; padding: .8rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--ivory); scrollbar-width: thin; }
.lesson-outline a { position: relative; flex: 0 0 auto; padding: .35rem 0; color: var(--ink); text-decoration: none; }
.lesson-outline a:hover { color: var(--green); }
.lesson-outline a::after { position: absolute; right: 0; bottom: -.85rem; left: 0; height: 2px; content: ""; background: var(--gold); transform: scaleX(0); }
.lesson-outline a:focus::after, .lesson-outline a:hover::after { transform: scaleX(1); }
.lesson-learn { display: grid; grid-template-columns: .85fr 1.15fr; gap: 4rem; padding: 2.5rem 0; border-bottom: 1px solid var(--line); }
.lesson-learn h3, .lesson-grammar h3, .example-list h3 { color: var(--ink); font-family: var(--sans); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.vocabulary-list dl { margin: 0; }
.vocabulary-list dl > div { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: .33rem 0; }
.vocabulary-list dt { font-weight: 750; }
.dialogue { padding-left: 2rem; border-left: 1px solid var(--line); }
.dialogue p { display: grid; grid-template-columns: 8rem 1fr; gap: .7rem; margin-bottom: .35rem; }
.lesson-grammar { display: grid; grid-template-columns: .82fr 1.18fr; gap: 4rem; padding: 2.5rem 0; border-bottom: 1px solid var(--line); }
.lesson-grammar h2 { font-size: 2.2rem; }
.grammar-pattern { padding: 1rem; border-left: .18rem solid var(--gold); color: var(--green); background: var(--ivory-light); font-weight: 750; }
.example-list > div { padding: .75rem 0; border-bottom: 1px solid var(--line); }
.example-list > div p { margin: 0; }
.example-list > div p:first-child { color: var(--green); font-weight: 700; }
.example-list > div p:last-child { color: var(--muted); font-size: .85rem; }
.usage-note { margin-top: 1rem; font-size: .83rem; }
.lesson-audio { padding: 2rem 0; border-bottom: 1px solid var(--line); }
.lesson-audio h2, .lesson-practice h2 { margin: 0; color: var(--ink); font-family: var(--sans); font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.section-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ai-audio-note { display: flex; align-items: center; gap: .35rem; margin: 0; color: var(--muted); font-size: .74rem; }
.ai-audio-note .icon { width: .9rem; }
.audio-row { display: grid; grid-template-columns: 10rem auto 3rem minmax(8rem, 1fr) 3rem auto; align-items: center; gap: .8rem; padding: .75rem 0; }
.audio-row > div { display: flex; flex-direction: column; }
.audio-row small { color: var(--muted); font-size: .7rem; }
.audio-row audio { display: none; }
.audio-play { display: inline-grid; width: 2.3rem; height: 2.3rem; place-items: center; padding: 0; border: 1px solid var(--green); border-radius: 50%; color: var(--paper); background: var(--green); }
.audio-play .icon { width: 1rem; }
.audio-time { color: var(--muted); font-size: .75rem; }
.audio-seek { min-height: auto; padding: 0; border: 0; accent-color: var(--gold); }
.browser-audio-label { display: flex; flex-direction: column; grid-column: 3 / -1; margin: 0; font-size: .75rem; }
.browser-audio-label span { color: var(--muted); }
.audio-unavailable { grid-column: 2 / -1; margin: 0; color: var(--danger); font-size: .8rem; }
.lesson-practice { padding: 2rem 0; border-bottom: 1px solid var(--line); }
.lesson-practice fieldset { padding: 1.1rem 0; border: 0; }
.lesson-practice legend { margin-bottom: .7rem; font-weight: 700; }
.matching-exercise { display: grid; gap: .65rem; }
.matching-exercise label { grid-template-columns: minmax(8rem, .7fr) minmax(10rem, 1fr); align-items: center; gap: 1rem; }
.token-bank { display: flex; flex-wrap: wrap; gap: .45rem; }
.token-bank span { padding: .35rem .55rem; border: 1px solid var(--line); background: var(--paper); }
.exercise-explanation { margin: .7rem 0 0; padding: .75rem; border-left: .15rem solid var(--gold); color: var(--muted); background: var(--ivory-light); font-size: .82rem; }
.inline-gap-exercise p { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.inline-gap-exercise label { display: inline-block; }
.inline-gap-exercise input { width: 10rem; min-height: 2.4rem; padding: .4rem .6rem; }
.lesson-dictation, .lesson-reading, .lesson-writing, .lesson-conversation { display: grid; grid-template-columns: .7fr 1.3fr; gap: 4rem; padding: 2.5rem 0; border-bottom: 1px solid var(--line); }
.lesson-dictation h2, .lesson-reading h2, .lesson-writing h2, .lesson-conversation h2 { font-size: 2.15rem; }
.lesson-dictation-work { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .8rem; }
.lesson-dictation-work form { display: grid; grid-column: 1 / -1; gap: .8rem; }
.lesson-reading blockquote { padding: 1.4rem; border-left: .18rem solid var(--gold); background: var(--ivory-light); font-family: var(--serif); font-size: 1.2rem; }
.lesson-writing form { display: grid; gap: .7rem; }
.lesson-writing form > div { display: flex; align-items: center; justify-content: space-between; }
.rubric-list, .review-checklist { padding: 0; list-style: none; }
.rubric-list li, .review-checklist li { display: flex; align-items: center; gap: .45rem; margin-bottom: .35rem; }
.rubric-list .icon, .review-checklist .icon { width: 1rem; color: var(--success); }
.lesson-speaking { display: grid; grid-template-columns: minmax(12rem, .85fr) minmax(10rem, 1fr) auto minmax(13rem, .75fr); align-items: center; gap: 1.4rem; padding: 1.3rem; margin: 1.3rem 0; border: 1px solid var(--gold); background: var(--ivory-light); }
.lesson-speaking p { margin: 0; }
.speech-wave { display: flex; height: 3rem; align-items: center; justify-content: center; gap: .2rem; }
.speech-wave span { width: .18rem; height: 25%; background: var(--gold); animation: sound-wave .9s ease-in-out infinite alternate; }
.speech-wave span:nth-child(2n) { height: 65%; animation-delay: -.35s; }
.speech-wave span:nth-child(3n) { height: 40%; animation-delay: -.6s; }
@keyframes sound-wave { to { height: 80%; } }
.mic-button { display: inline-grid; width: 3.4rem; height: 3.4rem; place-items: center; padding: 0; border: 0; border-radius: 50%; color: var(--paper); background: var(--green); }
.mic-button.is-listening { background: var(--danger); }
.speech-feedback { display: flex; flex-direction: column; }
.speech-feedback strong { color: var(--success); }
.speech-feedback span { font-size: .8rem; }
.speech-fallback { grid-column: 1 / -1; padding-top: 1rem; border-top: 1px solid var(--line); }
.speech-fallback label { grid-template-columns: 1fr auto; align-items: end; }
.speech-fallback input { grid-column: 1; }
.speech-fallback button { grid-column: 2; grid-row: 1 / 3; }
.lesson-conversation .phone-dialogue { min-height: 16rem; }
.lesson-review { padding: 2rem 0; border-top: 1px solid var(--line); }
.lesson-review h2 { font-size: 2rem; }
.next-activity { margin-top: 1.5rem; padding: 1.4rem; border-left: .18rem solid var(--gold); background: var(--ivory-light); }
.next-activity h3 { margin-bottom: .35rem; }
.lesson-footer { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding-top: 1.2rem; }
.lesson-footer form, .lesson-footer button { width: 100%; }

.practice-modes { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.practice-modes a { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .8rem; padding: 1.2rem; border-right: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.practice-modes a:last-child { border-right: 0; }
.practice-modes a[aria-current="page"] { color: var(--green); background: var(--ivory-light); box-shadow: inset 0 -.18rem 0 var(--gold-dark); }
.practice-modes .icon { grid-row: 1 / 3; color: var(--gold-dark); }
.practice-modes span { color: var(--muted); font-size: .75rem; }
.practice-skill-links { margin-top: 1rem; }
.practice-session { max-width: 55rem; margin: 4rem auto; }
.practice-session-head { display: flex; justify-content: space-between; }
.practice-session h2 { font-size: 2.3rem; }
.practice-session progress { margin-bottom: 2rem; }
.practice-session fieldset { padding: 0; border: 0; }
.practice-session legend { margin-bottom: 1.5rem; font-family: var(--serif); font-size: 1.7rem; }
.practice-feedback { min-height: 4rem; padding: 1rem 0; }
.practice-actions { display: flex; justify-content: flex-end; gap: .7rem; }
.dictation-session { max-width: 60rem; margin: 0 auto; }
.dictation-audio { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.2rem; padding: 2rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.dictation-audio > span { display: grid; width: 4rem; height: 4rem; place-items: center; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold-dark); }
.dictation-audio h2 { margin-bottom: .25rem; font-size: 1.8rem; }
.dictation-audio p { margin: 0; color: var(--muted); }
.dictation-audio .browser-audio-label { grid-column: auto; }
.dictation-session form { padding: 2rem 0; }
.dictation-tools { display: flex; align-items: center; justify-content: flex-end; gap: .8rem; margin-top: .7rem; }
.dictation-tools > span { margin-right: auto; color: var(--muted); font-size: .8rem; }
.learning-tip { max-width: 60rem; margin: 2rem auto; padding: 1.5rem; border-left: .18rem solid var(--gold); background: var(--ivory-light); }
.learning-tip h2 { font-size: 1.5rem; }
.pronunciation-studio { max-width: 60rem; margin: 0 auto; text-align: center; }
.pronunciation-prompt { padding: 2.5rem; border-top: 1px solid var(--line); }
.pronunciation-prompt h2 { font-size: clamp(2.3rem, 5vw, 4.2rem); }
.pronunciation-tip { color: var(--muted); }
.speech-visual { position: relative; display: grid; min-height: 14rem; place-items: center; }
.speech-wave.large { position: absolute; inset: 0; height: 100%; opacity: .55; }
.speech-wave.large span { width: .22rem; max-height: 60%; }
.mic-button-large { position: relative; z-index: 2; width: 6rem; height: 6rem; grid-template-rows: auto auto; }
.mic-button-large .icon { width: 2rem; height: 2rem; }
.mic-button-large span { font-size: .7rem; }
.large-feedback { min-height: 4rem; align-items: center; }
.pronunciation-studio .privacy-hint { display: flex; max-width: 45rem; align-items: flex-start; gap: .5rem; margin: 2rem auto; text-align: left; }
.pronunciation-studio > form { display: flex; justify-content: center; }
.pronunciation-replay { width: min(100%, 28rem); margin: 1rem auto; }
.speech-feedback[data-state="error"] strong { color: var(--danger); }
.speech-feedback[data-state="practice"] strong { color: var(--warning); }

.conversation-scenario { display: grid; grid-template-columns: .65fr 1.35fr; gap: 4rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.scenario-context { position: sticky; top: 2rem; align-self: start; }
.scenario-context h2 { font-size: 2.5rem; }
.scenario-context dl { margin-top: 2rem; }
.scenario-context dl div { padding: .8rem 0; border-bottom: 1px solid var(--line); }
.scenario-context dt { color: var(--muted); font-size: .75rem; font-weight: 700; text-transform: uppercase; }
.phone-dialogue { min-height: 30rem; padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid var(--line); background: var(--ivory-light); }
.phone-dialogue.compact { min-height: auto; padding: 1.5rem; }
.dialogue-turn { animation: reveal .25s ease both; }
@keyframes reveal { from { opacity: 0; transform: translateY(.4rem); } }
.speaker-label { margin-bottom: .4rem; color: var(--gold-dark); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.dialogue-turn > p[lang="es"] { max-width: 35rem; font-family: var(--serif); font-size: 1.7rem; }
.your-turn { padding: .8rem 1rem; color: var(--green); background: #e7eee9; }
.conversation-choices { display: grid; gap: .7rem; margin-top: 2rem; }
.conversation-choices button { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; border: 1px solid var(--line); color: var(--ink); background: var(--paper); text-align: left; }
.conversation-choices button:hover { border-color: var(--gold); }
.conversation-choices small { color: var(--muted); }
.feedback-warning { padding: 1rem; border-left: .18rem solid var(--gold); background: #fbf2df; }
.success-mark { display: grid; width: 3rem; height: 3rem; place-items: center; border-radius: 50%; color: var(--paper); background: var(--success); }
.follow-up-feedback { display: flex; align-items: flex-start; gap: .65rem; margin: 1rem 0; padding: 1rem; border-left: .18rem solid var(--gold); background: #fbf2df; }
.follow-up-feedback.is-success { border-color: var(--success); background: #e7eee9; }
.follow-up-feedback svg { width: 1.2rem; flex: 0 0 auto; margin-top: .15rem; color: var(--gold-dark); }
.follow-up-feedback.is-success svg { color: var(--success); }
.follow-up-feedback p { margin: 0; }

.review-session { max-width: 46rem; margin: 0 auto; }
.review-progress { margin-bottom: 2rem; }
.flashcard { position: relative; display: block; width: 100%; min-height: 25rem; padding: 0; border: 1px solid var(--gold); color: var(--ink); background: var(--ivory-light); transform-style: preserve-3d; transition: transform .5s ease; }
.flashcard[aria-pressed="true"] { transform: rotateY(180deg); }
.flashcard-side { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem; backface-visibility: hidden; }
.flashcard-side small { color: var(--gold-dark); letter-spacing: .1em; text-transform: uppercase; }
.flashcard-side strong { margin: 1rem 0; color: var(--green); font-family: var(--serif); font-size: 3.5rem; }
.flashcard-side em { color: var(--muted); font-size: .8rem; }
.flashcard-back { transform: rotateY(180deg); }
.flashcard-back > span { margin-top: .6rem; }
.review-rating { margin-top: 1.5rem; text-align: center; }
.review-rating > div { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.review-rating button { display: flex; min-height: 4rem; flex-direction: column; align-items: center; justify-content: center; padding: .6rem; border: 1px solid var(--line); background: transparent; }
.review-rating button:hover { border-color: var(--gold); background: var(--ivory-light); }
.review-rating span { color: var(--muted); font-size: .68rem; }
.keyboard-hint { color: var(--muted); font-size: .75rem; text-align: center; }

.filter-bar, .admin-filter-bar { display: flex; flex-wrap: wrap; align-items: end; gap: .7rem; padding: 1rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.filter-bar label, .admin-filter-bar label { min-width: 9rem; }
.search-field { position: relative; flex: 1 1 15rem; }
.search-field .icon { position: absolute; z-index: 1; top: .78rem; left: .7rem; width: 1rem; color: var(--muted); }
.search-field input { padding-left: 2.2rem; }
.notebook-list article { padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.notebook-meta { display: flex; justify-content: space-between; color: var(--muted); font-size: .75rem; }
.correction { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin: 1rem 0; }
.correction p { display: grid; }
.correction p > span { color: var(--muted); font-size: .7rem; font-weight: 700; text-transform: uppercase; }
.correction del, .correction ins { padding: .7rem; text-decoration: none; }
.correction del { border-left: .16rem solid var(--danger); background: #fbeeed; }
.correction ins { border-left: .16rem solid var(--success); background: #eef5ec; }
.row-actions { display: flex; gap: 1rem; }
.assessment-ledger { border-top: 1px solid var(--line); }
.assessment-ledger article { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 2rem; padding: 1.4rem 0; border-bottom: 1px solid var(--line); }
.assessment-ledger h2 { margin-bottom: .25rem; font-size: 1.45rem; }
.assessment-ledger p { margin: 0; color: var(--muted); font-size: .85rem; }
.assessment-result { display: flex; align-items: center; gap: 1rem; }
.assessment-result strong { color: var(--green); font-family: var(--serif); font-size: 1.8rem; }
.assessment-ledger .is-locked { opacity: .62; }
.assessment-header { display: flex; align-items: end; justify-content: space-between; gap: 2rem; }
.assessment-header h1 { margin: 1rem 0 0; font-size: 3rem; }
.assessment-timer { display: flex; flex-direction: column; align-items: end; }
.assessment-timer span { color: var(--muted); font-size: .72rem; }
.assessment-timer strong { color: var(--green); font-family: var(--serif); font-size: 2rem; }
.assessment-progress { margin: 2rem 0; }
.assessment-question { max-width: 55rem; margin: 3rem auto; }
.assessment-question fieldset { padding: 0; border: 0; }
.assessment-question legend { margin-bottom: 1.5rem; font-family: var(--serif); font-size: 1.8rem; }
.choice-list.numbered { counter-reset: choices; }
.choice-list.numbered label::before { display: grid; width: 1.7rem; height: 1.7rem; place-items: center; border: 1px solid var(--line); border-radius: 50%; content: counter(choices, upper-alpha); counter-increment: choices; }
.choice-list.numbered label { grid-template-columns: auto auto 1fr; }
.order-selects { display: grid; gap: .65rem; }
.order-selects label { grid-template-columns: 6rem minmax(0, 1fr); align-items: center; }
.order-selects label > span { color: var(--muted); font-size: .78rem; }
.assessment-flag { grid-template-columns: auto 1fr; align-items: center; gap: .65rem; margin-top: 1.3rem; font-weight: 500; }
.assessment-actions { display: flex; justify-content: space-between; margin-top: 1.5rem; }
.assessment-result-page { max-width: 66rem; margin: 0 auto; }
.assessment-result-page > header { padding-bottom: 2rem; border-bottom: 1px solid var(--line); }
.assessment-result-page > header h1 { margin: .8rem 0 0; font-size: clamp(2.8rem, 6vw, 4.8rem); }
.assessment-score { display: grid; grid-template-columns: 4rem 1fr; align-items: center; gap: 1.2rem; padding: 2rem 0; border-bottom: 1px solid var(--line); }
.assessment-score > span { display: grid; width: 4rem; height: 4rem; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--green); }
.assessment-score.is-review > span { color: var(--warning); }
.assessment-score p { margin: 0; color: var(--muted); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.assessment-score strong { display: block; color: var(--green); font-family: var(--serif); font-size: 3.2rem; font-weight: 500; line-height: 1; }
.assessment-score small { color: var(--muted); }
.assessment-feedback { padding: 2rem 0; }
.assessment-feedback h2 { font-size: 2rem; }
.assessment-feedback ol { padding: 0; margin: 0; border-top: 1px solid var(--line); list-style: none; }
.assessment-feedback li { padding: 1rem 0 1rem 1.2rem; border-bottom: 1px solid var(--line); border-left: .18rem solid var(--danger); }
.assessment-feedback li.is-correct { border-left-color: var(--success); }
.assessment-feedback li > div { display: flex; justify-content: space-between; gap: 1rem; }
.assessment-feedback li > div span, .assessment-feedback li > p { color: var(--muted); }
.assessment-feedback li > p { margin: .45rem 0 0; }

.tutor-layout { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: 3rem; }
.tutor-notice { display: flex; gap: .7rem; padding: .9rem 1rem; border-left: .18rem solid var(--gold); background: #fbf6e9; }
.tutor-notice p { margin: 0; font-size: .82rem; }
.chat-log { min-height: 28rem; padding: 2rem 0; }
.chat-message { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: .8rem; margin-bottom: 1rem; }
.chat-message > span { display: grid; width: 2.2rem; height: 2.2rem; place-items: center; border-radius: 50%; color: var(--paper); background: var(--green); font-family: var(--serif); }
.chat-message > div { max-width: 80%; padding: .9rem 1rem; border: 1px solid var(--line); background: var(--ivory-light); }
.chat-message p { margin: 0; }
.chat-user { justify-items: end; grid-template-columns: minmax(0, 1fr) 2.2rem; }
.chat-user > span { grid-column: 2; background: var(--gold); }
.chat-user > div { grid-column: 1; grid-row: 1; background: #e7eee9; }
.tutor-form { position: sticky; bottom: 0; padding: 1rem 0; border-top: 1px solid var(--line); background: var(--ivory); }
.tutor-form > div { display: flex; align-items: center; justify-content: space-between; margin-top: .5rem; }
.tutor-form > div span { color: var(--muted); font-size: .72rem; }
.tutor-aside { padding-top: 8.8rem; }
.tutor-aside h2 { margin-top: 0; padding-top: 1.2rem; border-top: 1px solid var(--line); color: var(--ink); font-family: var(--sans); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.tutor-aside button { width: 100%; padding: .8rem 0; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); background: transparent; text-align: left; }
.tutor-aside button:hover { color: var(--green); }
.tutor-welcome { padding: 1.2rem; border: 1px solid var(--line); color: var(--muted); background: var(--paper); }
.tutor-welcome p { margin: 0; }
.conversation-completion { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }
.conversation-completion form { margin: 0; }
.server-result { display: inline-block; color: var(--muted); font-size: .82rem; }
.server-result.is-success, .exercise-explanation.is-success { color: var(--success); }
.exercise-explanation.is-error { color: var(--danger); }
.editor-format-help { padding: .8rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.editor-format-help summary { cursor: pointer; font-weight: 700; }
.profile-layout { display: grid; grid-template-columns: 1.3fr .7fr; gap: 3rem; }
.profile-panel, .access-panel, .security-section { padding: 2rem 0; border-top: 1px solid var(--line); }
.profile-panel h2, .access-panel h2, .security-section h2 { font-size: 2rem; }
.access-panel dl div, .detail-list div { display: flex; justify-content: space-between; gap: 1rem; padding: .65rem 0; border-bottom: 1px solid var(--line); }
.access-panel dt, .detail-list dt { color: var(--muted); }
.certificate-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: 4rem; padding: 4rem 0; border-top: 1px solid var(--line); }
.certificate-preview { padding: clamp(2rem, 5vw, 4rem); border: .18rem double var(--gold); text-align: center; background: var(--ivory-light); }
.certificate-brand { color: var(--green); font-family: var(--serif); font-size: 1.7rem; font-weight: 700; letter-spacing: .08em; }
.certificate-preview h3 { margin: 1.5rem 0 .5rem; font-size: 2.6rem; }
.certificate-preview > strong { display: block; color: var(--gold-dark); font-family: var(--serif); font-size: 1.7rem; }
.certificate-preview dl { display: flex; justify-content: space-between; gap: 2rem; margin: 2rem 0; padding-top: 1rem; border-top: 1px solid var(--line); text-align: left; }
.certificate-preview dt { color: var(--muted); font-size: .7rem; text-transform: uppercase; }
.certificate-locked { display: grid; min-height: 22rem; align-content: center; justify-items: center; padding: 2rem; border: 1px solid var(--line); text-align: center; }
.certificate-locked > .icon { width: 3rem; height: 3rem; color: var(--gold); }
.security-section > div { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; }

/* Admin */
.admin-sidebar { --sidebar: 16rem; }
.admin-main-wrap { margin-left: 16rem; }
.admin-main { max-width: 100rem; margin: 0 auto; padding: clamp(1.5rem, 3vw, 3rem); }
.admin-identity { display: flex; align-items: center; gap: .7rem; margin: 0 1rem 1rem; padding: .75rem; border: 1px solid rgba(255,255,255,.22); }
.avatar { display: grid; width: 2.2rem; height: 2.2rem; place-items: center; border-radius: 50%; color: var(--green); background: var(--ivory); font-family: var(--serif); }
.admin-identity > span:last-child { display: flex; flex-direction: column; }
.admin-identity small { color: #c7d5d0; }
.admin-page-heading h1 { font-size: clamp(2.7rem, 5vw, 4.4rem); }
.admin-panel { padding: 1.35rem; border: 1px solid var(--line); background: var(--ivory-light); }
.admin-panel h2 { margin-bottom: .5rem; color: var(--ink); font-family: var(--sans); font-size: 1rem; font-weight: 800; }
.panel-heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.panel-heading h2, .panel-heading p { margin-bottom: .2rem; }
.panel-heading p { color: var(--muted); font-size: .78rem; }
.panel-heading > a { font-size: .8rem; }
.admin-metrics { display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 1.5rem; border: 1px solid var(--line); background: var(--ivory-light); }
.admin-metrics article { display: flex; min-height: 8rem; flex-direction: column; padding: 1.2rem; border-right: 1px solid var(--line); }
.admin-metrics article:last-child { border-right: 0; }
.admin-metrics p { margin-bottom: .4rem; color: var(--muted); font-size: .75rem; font-weight: 700; text-transform: uppercase; }
.admin-metrics strong { color: var(--green); font-family: var(--serif); font-size: 2.4rem; font-weight: 500; }
.admin-metrics strong span { color: var(--muted); font-size: 1rem; }
.admin-metrics a { margin-top: auto; font-size: .75rem; text-decoration: none; }
.admin-overview-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 1.2rem; }
.level-status-strip { display: grid; grid-template-columns: repeat(7, 1fr); }
.level-status-strip > div { display: flex; min-width: 0; flex-direction: column; align-items: center; gap: .35rem; padding: .7rem .35rem; border-right: 1px solid var(--line); text-align: center; }
.level-status-strip > div:last-child { border-right: 0; }
.level-status-strip strong { font-family: var(--serif); font-size: 1.4rem; }
.level-status-strip .status { max-width: 100%; white-space: normal; }
.level-status-strip > div > span:last-child { color: var(--muted); font-size: .65rem; }
.service-health dl { margin: 0; }
.service-health dl div, .connection-status div, .audio-status-list div { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .45rem 0; border-bottom: 1px solid var(--line); font-size: .8rem; }
.recent-activity ol { padding: 0; margin: 0; list-style: none; }
.recent-activity li { display: grid; grid-template-columns: 2rem 1fr auto; gap: .7rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.recent-activity li > span { color: var(--gold-dark); }
.recent-activity strong, .recent-activity p { font-size: .78rem; }
.recent-activity p { margin: 0; color: var(--muted); }
.recent-activity time { color: var(--muted); font-size: .68rem; }
.quick-actions nav { display: grid; }
.quick-actions a { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .7rem; padding: .7rem 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.quick-actions a > .icon:first-child { color: var(--gold-dark); }
.quick-actions span { display: flex; flex-direction: column; }
.quick-actions small { color: var(--muted); }
.admin-level-strip { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 1.2rem; border: 1px solid var(--line); background: var(--ivory-light); }
.admin-level-strip a { display: flex; min-height: 5rem; flex-direction: column; align-items: center; justify-content: center; padding: .6rem .3rem; border-right: 1px solid var(--line); color: var(--ink); text-align: center; text-decoration: none; }
.admin-level-strip a:last-child { border-right: 0; }
.admin-level-strip a[aria-current="page"] { color: var(--paper); background: var(--green); }
.admin-level-strip strong { font-family: var(--serif); font-size: 1.35rem; }
.admin-level-strip span, .admin-level-strip small { font-size: .68rem; }
.admin-filter-bar { padding: .8rem; border: 1px solid var(--line); background: var(--ivory-light); }
.admin-filter-bar input, .admin-filter-bar select { min-height: 2.5rem; padding: .5rem .65rem; font-size: .8rem; }
.admin-filter-bar .search-field .icon { top: .7rem; }
.table-toolbar, .bulk-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 0; }
.table-toolbar p, .bulk-toolbar p { margin: 0; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); }
.admin-table { min-width: 57rem; background: var(--ivory-light); }
.admin-table th, .admin-table td { padding: .68rem .58rem; border-bottom: 1px solid var(--line); font-size: .74rem; vertical-align: middle; }
.admin-table thead th { color: var(--muted); background: var(--ivory); font-size: .66rem; letter-spacing: .045em; text-transform: uppercase; }
.admin-table tbody tr:hover { background: var(--paper); }
.admin-table th strong, .admin-table th small { display: block; }
.admin-table th small { color: var(--muted); font-weight: 400; }
.admin-table progress { min-width: 7rem; }
.table-actions { display: flex; align-items: center; gap: .45rem; }
.table-actions form { margin: 0; }
.table-actions .icon-button { width: 2rem; height: 2rem; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 1rem; }
.pagination a { display: grid; width: 2.2rem; height: 2.2rem; place-items: center; border: 1px solid var(--line); text-decoration: none; }
.editor-layout { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; gap: 1.2rem; }
.editor-main { display: grid; gap: 1.2rem; }
.editor-aside { position: sticky; top: 1rem; display: grid; gap: 1rem; }
.editor-main .admin-panel, .editor-aside .admin-panel { display: grid; gap: 1rem; }
.completion-checks { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
.editor-actions { display: grid; gap: .65rem; }
.editor-actions > a { text-align: center; }
.compact-editor { max-width: 75rem; }
.audio-summary { display: grid; grid-template-columns: repeat(4, 1fr); margin: 1.2rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.audio-summary div { display: flex; flex-direction: column; align-items: center; padding: 1rem; border-right: 1px solid var(--line); }
.audio-summary div:last-child { border-right: 0; }
.audio-summary strong { color: var(--green); font-family: var(--serif); font-size: 2rem; }
.audio-summary span { color: var(--muted); font-size: .75rem; }
.audio-batch { margin: 1.3rem 0; padding: 1.25rem; border: 1px solid var(--line); background: var(--paper); }
.audio-batch h2 { margin-bottom: .4rem; font-size: 1.7rem; }
.audio-batch progress { margin: .2rem 0 .8rem; }
.audio-batch .panel-heading { align-items: start; }
.admin-detail-layout, .backup-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; margin-bottom: 1.2rem; }
.detail-list dd { text-align: right; }
.backup-actions .admin-panel { display: grid; align-content: start; }
.backup-actions form { display: grid; gap: 1rem; }
.settings-layout { display: grid; grid-template-columns: 13rem minmax(0, 1fr); align-items: start; gap: 2rem; }
.settings-nav { position: sticky; top: 1rem; display: grid; border-top: 1px solid var(--line); }
.settings-nav a { padding: .75rem 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.settings-content { display: grid; gap: 1.2rem; }
.settings-content .admin-panel { display: grid; gap: 1rem; }
.future-level-settings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.future-level-settings fieldset { padding: 1rem; border: 1px solid var(--line); }
.future-level-settings legend { color: var(--green); font-family: var(--serif); font-size: 1.2rem; }
.future-level-settings p { color: var(--muted); font-size: .8rem; }
.settings-save { position: sticky; bottom: 0; display: flex; justify-content: flex-end; padding: 1rem; border: 1px solid var(--line); background: rgba(245, 240, 230, .96); }

@media (max-width: 73rem) {
    .public-nav { gap: 1rem; }
    .hero { grid-template-columns: 52% 48%; }
    .footer-inner { grid-template-columns: 1fr 1fr; }
    .workflow { grid-template-columns: repeat(2, 1fr); }
    .level-path { grid-template-columns: repeat(4, 1fr); row-gap: 2.5rem; }
    .level-path::before { display: none; }
    .dashboard-layout { gap: 2rem; }
    .student-level { grid-template-columns: 1fr auto; }
    .student-level-progress { grid-column: 1; }
    .lesson-speaking { grid-template-columns: 1fr auto; }
    .lesson-speaking .speech-wave { grid-column: 1; grid-row: 2; }
    .lesson-speaking .mic-button { grid-column: 2; grid-row: 2; }
    .lesson-speaking .speech-feedback { grid-column: 1 / -1; }
    .admin-overview-grid { grid-template-columns: 1fr; }
    .admin-level-strip, .level-status-strip { grid-template-columns: repeat(4, 1fr); }
    .admin-level-strip a, .level-status-strip > div { border-bottom: 1px solid var(--line); }
}

@media (max-width: 62rem) {
    .site-header-inner { min-height: 4rem; }
    .nav-toggle { display: inline-flex; }
    .public-nav { position: absolute; top: 100%; right: 0; left: 0; display: none; align-items: stretch; padding: 1rem; border-bottom: 1px solid var(--line); background: var(--ivory); box-shadow: var(--shadow); }
    .public-nav.is-open { display: grid; }
    .public-nav > a { padding: .65rem !important; }
    .hero { min-height: 0; grid-template-columns: 1fr; }
    .hero-copy { min-height: 38rem; }
    .hero-media { min-height: 34rem; }
    .real-life, .thirty-days, .pricing, .prose-split, .pace-section, .support-form { grid-template-columns: 1fr; gap: 3rem; }
    .real-life-intro { position: static; }
    .thirty-days .button { grid-column: 1; }
    .page-intro { grid-template-columns: 1fr; gap: .5rem; }
    .section-number { padding: 0; }
    .dark-band { grid-template-columns: 1fr; gap: 2rem; }
    .level-path-detailed .level-copy { grid-template-columns: 7rem 1fr; }
    .level-path-detailed .level-copy h3 { grid-row: auto; }
    .level-path-detailed .level-status { justify-self: start; }
    .level-path-detailed .level-copy > p:not(.level-name):not(.level-status), .level-path-detailed .level-copy > a, .level-path-detailed .future-note { grid-column: 1 / -1; grid-row: auto; justify-self: start; }
    .form-page { grid-template-columns: 1fr; }
    .form-page-intro { position: static; }
    .auth-page { grid-template-columns: 1fr; }
    .auth-story { min-height: 25rem; }
    .auth-story blockquote { margin-top: 5rem; }
    .checkout-layout { grid-template-columns: 1fr; gap: 3rem; }
    .app-sidebar, .admin-sidebar { transform: translateX(-105%); transition: transform var(--transition); }
    .app-sidebar.is-open, .admin-sidebar.is-open { transform: translateX(0); box-shadow: var(--shadow); }
    .app-main-wrap, .admin-main-wrap { margin-left: 0; }
    .app-topbar { position: sticky; z-index: 90; top: 0; display: flex; }
    .dashboard-secondary, .tutor-aside { padding-top: 0; }
    .dashboard-layout, .tutor-layout, .profile-layout, .certificate-section { grid-template-columns: 1fr; }
    .lesson-learn, .lesson-grammar, .lesson-dictation, .lesson-reading, .lesson-writing, .lesson-conversation { grid-template-columns: 1fr; gap: 2rem; }
    .practice-modes { grid-template-columns: repeat(2, 1fr); }
    .conversation-scenario { grid-template-columns: 1fr; }
    .scenario-context { position: static; }
    .tutor-aside { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 1rem; }
    .editor-layout { grid-template-columns: 1fr; }
    .editor-aside { position: static; grid-template-columns: repeat(2, 1fr); }
    .editor-actions { align-content: start; }
    .admin-metrics { grid-template-columns: repeat(2, 1fr); }
    .admin-metrics article:nth-child(2) { border-right: 0; }
    .admin-metrics article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
    .settings-layout { grid-template-columns: 1fr; }
    .settings-nav { position: static; display: flex; gap: 1rem; overflow-x: auto; }
}

@media (max-width: 44rem) {
    body { font-size: .95rem; }
    h1 { font-size: 2.8rem; }
    .site-header-inner { padding: .45rem 1rem; }
    .site-header .brand-product { display: none; }
    .hero-copy { min-height: 35rem; padding: 3rem 1.25rem; }
    .hero h1 { font-size: 3.7rem; }
    .hero-media { min-height: 29rem; }
    .section { padding: 3.5rem 1.15rem; }
    .section-heading { display: block; }
    .section-heading h2 { margin-bottom: 1rem; }
    .level-path { grid-template-columns: repeat(2, 1fr); }
    .workflow { grid-template-columns: 1fr; }
    .topic-ledger li { grid-template-columns: 2.4rem 1fr; }
    .pricing-offer { padding: 2rem 1rem; }
    .pricing-offer .button { min-width: 0; width: 100%; }
    .accordion { grid-template-columns: 1fr; }
    .footer-inner { grid-template-columns: 1fr; gap: 2rem; }
    .cta-band { display: grid; }
    .cta-actions { flex-direction: column; }
    .method-stats { grid-template-columns: 1fr; }
    .level-path-detailed li { grid-template-columns: 2.7rem 1fr; gap: 1rem; }
    .level-path-detailed .level-copy { grid-template-columns: 1fr; gap: .5rem; }
    .level-inventory { overflow-x: auto; }
    .level-inventory table { min-width: 38rem; }
    .form-page { padding: 3rem 1rem; }
    .wizard { padding: 1.2rem; }
    .choice-list.horizontal { grid-template-columns: 1fr; }
    .wizard-actions, .result-actions { flex-direction: column; }
    .placement-section-scores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mini-course { grid-template-columns: 1fr; gap: 2rem; }
    .mini-nav { flex-direction: row; overflow-x: auto; }
    .mini-nav button { min-width: 10rem; }
    .inline-practice, .form-row, .form-row.three { grid-template-columns: 1fr; }
    .inline-practice .button { width: 100%; }
    .auth-story { min-height: 20rem; padding: 2rem 1.25rem; }
    .auth-story blockquote { margin-top: 3rem; font-size: 2.5rem; }
    .auth-panel { padding: 3rem 1.25rem; }
    .checkout-layout { padding: 3rem 1rem; }
    .app-main { padding: 1.5rem 1rem 3rem; }
    .app-page-heading, .admin-page-heading { display: grid; align-items: start; }
    .app-page-heading .button, .admin-page-heading .button { justify-self: start; }
    .dashboard-layout { gap: 1rem; }
    .recent-list a { grid-template-columns: 4.5rem 1fr auto; gap: .55rem; }
    .recent-list .icon { display: none; }
    .student-level { grid-template-columns: 1fr; }
    .student-level-head { grid-template-columns: 3rem 1fr; }
    .student-level-head .status { grid-column: 2; justify-self: start; }
    .student-level-progress { grid-column: 1; grid-template-columns: 1fr auto; }
    .student-level-progress span:last-child { grid-column: 1 / -1; }
    .student-level > .button { justify-self: start; }
    .unit-row { grid-template-columns: 2.5rem 1fr; gap: 1rem; }
    .unit-row > a, .unit-row > .locked-label { grid-column: 2; }
    .intensive-day { grid-template-columns: 3.2rem 1fr; gap: 1rem; }
    .intensive-day > a, .intensive-day > .locked-label { grid-column: 2; justify-self: start; }
    .intensive-progress-summary { padding-left: 0; border-left: 0; }
    .lesson-header { display: block; }
    .lesson-menu-button { margin-top: 1rem; }
    .lesson-outline { top: 4rem; }
    .dialogue { padding-left: 0; border-left: 0; }
    .dialogue p { grid-template-columns: 1fr; gap: 0; margin-bottom: .75rem; }
    .audio-row { grid-template-columns: minmax(7rem, 1fr) auto 2.5rem; }
    .audio-row > div { grid-column: 1; }
    .audio-row .audio-play { grid-column: 2; grid-row: 1; }
    .audio-row .audio-time:first-of-type { grid-column: 3; grid-row: 1; }
    .audio-seek { grid-column: 1 / 3; }
    .audio-row .icon-button { grid-column: 3; }
    .browser-audio-label { grid-column: 1 / -1; }
    .section-bar { display: block; }
    .ai-audio-note { margin-top: .5rem; }
    .inline-gap-exercise p { display: grid; }
    .inline-gap-exercise input { width: 100%; }
    .lesson-speaking { grid-template-columns: 1fr auto; }
    .lesson-footer { grid-template-columns: 1fr; }
    .practice-modes { grid-template-columns: 1fr; }
    .practice-modes a { border-right: 0; border-bottom: 1px solid var(--line); }
    .dictation-audio { grid-template-columns: auto 1fr; }
    .dictation-audio .mic-button, .dictation-audio .browser-audio-label { grid-column: 1 / -1; justify-self: center; text-align: center; }
    .dictation-tools { flex-wrap: wrap; }
    .conversation-choices button { display: grid; }
    .review-rating > div { grid-template-columns: repeat(2, 1fr); }
    .correction { grid-template-columns: 1fr; gap: .5rem; }
    .assessment-ledger article { grid-template-columns: 1fr; gap: .7rem; }
    .assessment-result { justify-content: space-between; }
    .assessment-header { display: grid; }
    .assessment-timer { align-items: start; }
    .order-selects label { grid-template-columns: 1fr; }
    .tutor-aside { grid-template-columns: 1fr; }
    .chat-message > div { max-width: 100%; }
    .certificate-preview { padding: 2rem 1rem; }
    .certificate-preview dl, .security-section > div { display: grid; grid-template-columns: 1fr; }
    .admin-main { padding: 1.5rem .8rem 3rem; }
    .admin-metrics { grid-template-columns: 1fr 1fr; }
    .admin-metrics article { min-height: 7rem; padding: .8rem; }
    .admin-metrics strong { font-size: 1.9rem; }
    .admin-level-strip, .level-status-strip { grid-template-columns: repeat(2, 1fr); }
    .admin-filter-bar { display: grid; grid-template-columns: 1fr; }
    .admin-filter-bar label { width: 100%; }
    .editor-aside, .admin-detail-layout, .backup-actions { grid-template-columns: 1fr; }
    .completion-checks { grid-template-columns: 1fr; }
    .audio-summary { grid-template-columns: repeat(2, 1fr); }
    .future-level-settings { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .flashcard[aria-pressed="true"] { transform: none; }
    .flashcard[aria-pressed="true"] .flashcard-front { display: none; }
    .flashcard[aria-pressed="true"] .flashcard-back { transform: none; }
}

@media print {
    .site-header, .site-footer, .app-sidebar, .admin-sidebar, .app-topbar, .button, button, form { display: none !important; }
    body { color: #000; background: #fff; }
    .app-main-wrap, .admin-main-wrap { margin: 0; }
    .app-main, .admin-main { max-width: none; padding: 0; }
    a { color: #000; text-decoration: none; }
    .certificate-preview { border-color: #000; }
}