/* ============================================================
   AMAPREP DESIGN TOKENS
   ============================================================ */

:root {
    /* Brand */
    --ama-brand: #2F6B53;
    --ama-brand-hover: #255844;
    --ama-brand-light: #E6F2EC;
    --ama-brand-subtle: #E6F2EC;
    --ama-gold: #E3B341;

    /* Subject accents */
    --ama-accounting: #5f9ea0;
    --ama-accounting-light: #b2d8d8;
    --ama-maths: #6b8cce;
    --ama-maths-lit: #d4a24e;
    --ama-physics: #8b6fb0;

    /* Neutrals */
    --ama-bg: #FFFFFF;
    --ama-surface: #FFFFFF;
    --ama-surface-alt: #F3F4F6;
    --ama-border: #E5E7EB;
    --ama-border-light: #E5E7EB;

    /* Text */
    --ama-text: #1F2933;
    --ama-text-secondary: #6B7280;
    --ama-text-muted: #6B7280;
    --ama-text-inverse: #FFFFFF;

    /* Semantic */
    --ama-success: #2E7D32;
    --ama-warning: #C08400;
    --ama-danger: #C53030;
    --ama-info: #5f9ea0;

    /* Status (difficulty) */
    --ama-easy: #2E7D32;
    --ama-medium: #C08400;
    --ama-hard: #C53030;

    /* Spacing (4px scale) */
    --ama-space-xxs: 4px;
    --ama-space-xs: 8px;
    --ama-space-sm: 12px;
    --ama-space-md: 16px;
    --ama-space-lg: 24px;
    --ama-space-xl: 32px;
    --ama-space-2xl: 48px;
    --ama-space-3xl: 64px;

    /* Typography */
    --ama-font: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --ama-font-mono: 'Cascadia Code', 'Consolas', monospace;
    --ama-text-xs: 13px;
    --ama-text-sm: 14px;
    --ama-text-base: 16px;
    --ama-text-lg: 20px;
    --ama-text-xl: 28px;
    --ama-text-2xl: 28px;
    --ama-text-3xl: 36px;
    --ama-line-height: 1.6;
    --ama-line-height-tight: 1.3;

    /* Radius */
    --ama-radius-sm: 8px;
    --ama-radius: 12px;
    --ama-radius-lg: 16px;

    /* Shadows */
    --ama-shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
    --ama-shadow: 0 2px 8px rgba(0,0,0,0.08);
    --ama-shadow-lg: 0 4px 16px rgba(0,0,0,0.10);

    /* Layout */
    --ama-content-width: 1100px;
    --ama-page-width: 1400px;
}

/* ── Accessibility ── */
.ama-skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: 9999;
    padding: var(--ama-space-sm) var(--ama-space-lg);
    background: var(--ama-brand);
    color: white;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 var(--ama-radius-sm) 0;
}

.ama-skip-link:focus {
    position: fixed;
    left: 0;
    top: 0;
    width: auto;
    height: auto;
    overflow: visible;
}

*:focus-visible {
    outline: 2px solid var(--ama-brand);
    outline-offset: 2px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--ama-brand);
    outline-offset: 2px;
}

/* ── Dark theme overrides ── */
[data-theme="dark"] {
    --ama-bg: #0d1a14;
    --ama-surface: #14261e;
    --ama-surface-alt: #1e3529;
    --ama-border: #24402f;
    --ama-border-light: #2d4d39;
    --ama-text: #F0F4F2;
    --ama-text-secondary: #99ADA3;
    --ama-text-muted: #7A9489;
    --ama-text-inverse: #0d1a14;
    --ama-brand-light: #1a3a2c;
    --ama-brand-subtle: #1a3a2c;
    --ama-shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --ama-shadow: 0 2px 8px rgba(0,0,0,0.4);
    --ama-shadow-lg: 0 4px 16px rgba(0,0,0,0.5);
}

/* Dark mode is opt-in via the theme toggle ([data-theme="dark"]) only — the site
   defaults to LIGHT for everyone, regardless of the OS prefers-color-scheme setting.
   (Previously a prefers-color-scheme:dark block forced dark on dark-mode devices even
   when no theme was chosen, so the toggle showed light while the page rendered dark.) */

/* ============================================================
   BASE STYLES
   ============================================================ */

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    margin: 0;
    font-family: var(--ama-font);
    font-size: var(--ama-text-base);
    line-height: var(--ama-line-height);
    color: var(--ama-text);
    background-color: var(--ama-bg);
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--ama-space-md) 0;
    line-height: var(--ama-line-height-tight);
    color: var(--ama-text);
    font-weight: 600;
}

h1 { font-size: var(--ama-text-3xl); }
h2 { font-size: var(--ama-text-2xl); }
h3 { font-size: var(--ama-text-xl); }
h4 { font-size: var(--ama-text-lg); }

p {
    margin: 0 0 var(--ama-space-md) 0;
}

a {
    color: var(--ama-brand);
    text-decoration: none;
}
a:hover {
    color: var(--ama-brand-hover);
    text-decoration: underline;
}

h1:focus { outline: none; }

/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */

.ama-page {
    max-width: var(--ama-page-width);
    margin: 0 auto;
    padding: var(--ama-space-xl) var(--ama-space-lg);
}

.ama-content {
    max-width: var(--ama-content-width);
    margin: 0 auto;
}

/* ============================================================
   CARD & PANEL
   ============================================================ */

.ama-card {
    background: var(--ama-surface);
    border: 1px solid var(--ama-border-light);
    border-radius: var(--ama-radius);
    padding: var(--ama-space-lg);
    box-shadow: var(--ama-shadow-sm);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.ama-card:hover {
    box-shadow: var(--ama-shadow);
}

.ama-card-clickable {
    cursor: pointer;
}
.ama-card-clickable:hover {
    transform: translateY(-1px);
    border-color: #D1D5DB;
    box-shadow: 0 6px 16px rgba(0,0,0,0.05);
}

.ama-panel {
    background: var(--ama-surface-alt);
    border-radius: var(--ama-radius);
    padding: var(--ama-space-lg);
    margin-bottom: var(--ama-space-lg);
}

/* ============================================================
   BUTTONS
   ============================================================ */

.ama-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--ama-space-sm);
    padding: var(--ama-space-sm) var(--ama-space-lg);
    border: 2px solid transparent;
    border-radius: var(--ama-radius-sm);
    font-family: var(--ama-font);
    font-size: var(--ama-text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    line-height: 1.5;
}

.ama-btn-primary {
    background: #3a6853;
    color: #FFFFFF;
    border: 2px solid #1c3628;
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
    box-shadow: 2px 3px 0px #1c3628;
}
.ama-btn-primary:hover {
    background: #457a62;
    border-color: #1c3628;
    color: #FFFFFF;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 3px 5px 0px #1c3628;
}
.ama-btn-primary:active {
    transform: translateY(2px);
    box-shadow: 0px 1px 0px #1c3628;
}

.ama-btn-outline {
    background: transparent;
    color: var(--ama-brand);
    border-color: var(--ama-brand);
}
.ama-btn-outline:hover {
    background: var(--ama-brand-subtle);
    text-decoration: none;
}

.ama-btn-ghost {
    background: transparent;
    color: var(--ama-text-secondary);
    border-color: var(--ama-border);
}
.ama-btn-ghost:hover {
    background: var(--ama-surface-alt);
    color: var(--ama-text);
    text-decoration: none;
}

.ama-back-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--ama-space-2xl);
    padding-top: var(--ama-space-lg);
    border-top: 1px solid var(--ama-border-light);
}

/* ============================================================
   MATH LIT SIMULATORS
   ============================================================ */

.ama-sim {
    background: var(--ama-surface);
    border: 1px solid var(--ama-border-light);
    border-radius: var(--ama-radius-lg);
    overflow: hidden;
    margin-bottom: var(--ama-space-lg);
}

.ama-sim-header {
    display: flex;
    align-items: center;
    gap: var(--ama-space-sm);
    padding: var(--ama-space-md) var(--ama-space-lg);
    background: var(--ama-surface-alt);
    border-bottom: 1px solid var(--ama-border-light);
}

.ama-sim-icon { font-size: 1.5rem; }

.ama-sim-title {
    font-size: var(--ama-text-lg);
    font-weight: 700;
    margin: 0;
}

.ama-sim-body {
    padding: var(--ama-space-lg);
}

.ama-sim-inputs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--ama-space-md);
    margin-bottom: var(--ama-space-lg);
}

.ama-sim-field { display: flex; flex-direction: column; gap: var(--ama-space-xs); }

.ama-sim-input-row {
    display: flex;
    align-items: center;
    gap: var(--ama-space-md);
}

.ama-sim-input-row input[type="range"] {
    flex: 1;
    accent-color: var(--ama-brand);
}

.ama-sim-value {
    font-weight: 700;
    font-size: var(--ama-text-base);
    min-width: 80px;
    text-align: right;
}

.ama-sim-value-lg {
    font-weight: 700;
    font-size: var(--ama-text-xl);
    color: var(--ama-text);
}

.ama-sim-results {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--ama-space-md);
    margin-bottom: var(--ama-space-lg);
}

.ama-sim-result-card {
    display: flex;
    flex-direction: column;
    gap: var(--ama-space-xs);
    padding: var(--ama-space-md) var(--ama-space-lg);
    border-radius: var(--ama-radius);
    text-align: center;
}

.ama-sim-result-primary {
    background: #edf7f0;
    border: 1px solid #c8e6c9;
}

.ama-sim-result-accent {
    background: #e8f4fd;
    border: 1px solid #b3d9f2;
}

.ama-sim-result-label {
    font-size: var(--ama-text-sm);
    font-weight: 600;
    color: var(--ama-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ama-sim-result-value {
    font-size: var(--ama-text-2xl);
    font-weight: 800;
    color: var(--ama-text);
}

.ama-sim-explorer-hint {
    padding: var(--ama-space-md);
    background: var(--ama-surface-alt);
    border-radius: var(--ama-radius-sm);
    color: var(--ama-text-secondary);
    font-size: var(--ama-text-sm);
    text-align: center;
}

.ama-sim-steps {
    padding: var(--ama-space-lg);
    border-top: 1px solid var(--ama-border-light);
}

.ama-sim-step {
    background: var(--ama-surface-alt);
    border-radius: var(--ama-radius-sm);
    padding: var(--ama-space-md);
    margin-bottom: var(--ama-space-sm);
}

/* VAT split bar */
.ama-sim-split-bar {
    display: flex;
    height: 36px;
    border-radius: var(--ama-radius-sm);
    overflow: hidden;
    font-size: var(--ama-text-xs);
    font-weight: 700;
    color: #fff;
}

.ama-sim-split-base {
    background: var(--ama-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--ama-space-sm);
}

.ama-sim-split-vat {
    background: var(--ama-warning);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--ama-space-sm);
}

/* Budget table */
.ama-sim-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--ama-space-lg);
}

.ama-sim-table th,
.ama-sim-table td {
    padding: var(--ama-space-sm) var(--ama-space-md);
    border-bottom: 1px solid var(--ama-border-light);
}

.ama-sim-table th {
    text-align: left;
    font-size: var(--ama-text-sm);
    color: var(--ama-text-muted);
    font-weight: 600;
}

.ama-sim-table-section td {
    padding-top: var(--ama-space-md);
    color: var(--ama-text-secondary);
    font-size: var(--ama-text-sm);
    border-bottom: 2px solid var(--ama-border);
}

.ama-sim-table-total td {
    border-top: 2px solid var(--ama-border);
    border-bottom: none;
    padding-top: var(--ama-space-sm);
}

.ama-sim-table-balance td {
    border-top: 3px double var(--ama-border);
    padding-top: var(--ama-space-md);
}

.ama-sim-balance-bar {
    height: 28px;
    background: var(--ama-surface-alt);
    border-radius: var(--ama-radius-sm);
    overflow: hidden;
}

.ama-sim-balance-surplus {
    height: 100%;
    background: var(--ama-success);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ama-text-xs);
    font-weight: 700;
    border-radius: var(--ama-radius-sm);
    transition: width 0.3s ease;
}

.ama-sim-balance-deficit {
    height: 100%;
    background: var(--ama-danger);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ama-text-xs);
    font-weight: 700;
    border-radius: var(--ama-radius-sm);
    transition: width 0.3s ease;
}

/* Unit conversion layout */
.ama-sim-conversion {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ama-space-md);
    margin-bottom: var(--ama-space-lg);
}

.ama-sim-arrow {
    font-size: 2rem;
    color: var(--ama-brand);
    font-weight: 700;
}

.ama-sim-formula {
    background: var(--ama-surface-alt);
    border: 1px solid var(--ama-border-light);
    border-radius: var(--ama-radius-sm);
    padding: var(--ama-space-sm) var(--ama-space-md);
    display: flex;
    gap: var(--ama-space-sm);
    align-items: center;
}

.ama-sim-formula-label {
    font-size: var(--ama-text-xs);
    font-weight: 700;
    color: var(--ama-text-muted);
    text-transform: uppercase;
}

.ama-sim-formula-text {
    font-weight: 600;
    font-size: var(--ama-text-base);
    color: var(--ama-brand);
}

/* Graph chart (CSS-only bar chart) */
.ama-sim-chart {
    display: flex;
    align-items: flex-end;
    gap: var(--ama-space-sm);
    height: 200px;
    padding: var(--ama-space-sm) 0;
    border-bottom: 2px solid var(--ama-border);
    margin-bottom: var(--ama-space-lg);
}

.ama-sim-chart-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
}

.ama-sim-chart-bar {
    width: 100%;
    max-width: 60px;
    background: var(--ama-brand);
    border-radius: var(--ama-radius-sm) var(--ama-radius-sm) 0 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: var(--ama-space-xs);
    transition: height 0.3s ease;
    min-height: 4px;
}

.ama-sim-chart-val {
    font-size: var(--ama-text-xs);
    font-weight: 700;
    color: #fff;
}

.ama-sim-chart-label {
    font-size: var(--ama-text-xs);
    color: var(--ama-text-secondary);
    margin-top: var(--ama-space-xs);
    text-align: center;
    word-break: break-word;
}

/* ============================================================
   BADGES & PILLS
   ============================================================ */

.ama-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--ama-space-xs);
    padding: 2px var(--ama-space-sm);
    border-radius: 999px;
    font-size: var(--ama-text-xs);
    font-weight: 600;
    line-height: 1.6;
}

.ama-badge-brand {
    background: var(--ama-brand-subtle);
    color: var(--ama-brand);
}

.ama-badge-muted {
    background: var(--ama-surface-alt);
    color: var(--ama-text-muted);
}

.ama-badge-accent {
    background: var(--ama-accounting-light);
    color: #2c5f5f;
}

.ama-difficulty-easy {
    background: #d8f3dc;
    color: #2d6a4f;
}
.ama-difficulty-medium {
    background: #fef3cd;
    color: #7a5a00;
}
.ama-difficulty-hard {
    background: #f8d7da;
    color: #842029;
}
.ama-difficulty-advanced {
    background: #ede9fe;
    color: #5b21b6;
}

/* ============================================================
   REVEAL SECTION
   ============================================================ */

.ama-reveal {
    margin-bottom: var(--ama-space-lg);
}

.ama-reveal-trigger {
    display: flex;
    align-items: center;
    gap: var(--ama-space-sm);
    width: 100%;
    padding: var(--ama-space-md) var(--ama-space-lg);
    background: var(--ama-surface);
    border: 2px dashed var(--ama-border);
    border-radius: var(--ama-radius);
    cursor: pointer;
    font-weight: 600;
    color: var(--ama-brand);
    font-size: var(--ama-text-base);
    transition: all 0.2s ease;
    font-family: var(--ama-font);
}
.ama-reveal-trigger:hover {
    border-color: var(--ama-brand);
    background: var(--ama-brand-subtle);
}

.ama-reveal-content {
    animation: ama-fadeIn 0.3s ease;
}

@keyframes ama-fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   STEP INDICATOR
   ============================================================ */

.ama-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ama-brand);
    color: var(--ama-text-inverse);
    font-size: var(--ama-text-sm);
    font-weight: 700;
    flex-shrink: 0;
}

/* ============================================================
   CALLOUT
   ============================================================ */

.ama-callout {
    padding: var(--ama-space-md) var(--ama-space-lg);
    border-radius: var(--ama-radius-sm);
    border-left: 4px solid;
    margin-bottom: var(--ama-space-md);
}

.ama-callout-info {
    background: #eaf6f6;
    border-color: var(--ama-info);
}
.ama-callout-warning {
    background: #fef8ec;
    border-color: var(--ama-warning);
}
.ama-callout-success {
    background: #edf7f0;
    border-color: var(--ama-success);
}
.ama-callout-danger {
    background: #fdf0ef;
    border-color: var(--ama-danger);
}

.ama-callout-title {
    font-weight: 700;
    font-size: var(--ama-text-sm);
    margin-bottom: var(--ama-space-xs);
}

/* ============================================================
   FORMULA & CALCULATION DISPLAY
   ============================================================ */

.ama-math-block {
    border-radius: var(--ama-radius);
    padding: var(--ama-space-md) var(--ama-space-lg);
    margin-bottom: var(--ama-space-md);
    display: flex;
    flex-direction: column;
    gap: var(--ama-space-xs);
}

.ama-math-label {
    font-size: var(--ama-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.7;
}

.ama-math-expr {
    font-family: var(--ama-font);
    font-size: var(--ama-text-lg);
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 0.01em;
    word-break: break-word;
}

.ama-math-formula {
    background: var(--ama-surface-alt);
    border: 1px solid var(--ama-border-light);
}
.ama-math-formula .ama-math-label { color: var(--ama-text-muted); }
.ama-math-formula .ama-math-expr { color: var(--ama-text); }

.ama-math-calc {
    background: #edf7f0;
    border: 1px solid #c8e6c9;
}
.ama-math-calc .ama-math-label { color: var(--ama-brand); }
.ama-math-calc .ama-math-expr { color: var(--ama-brand); }

.ama-math-steps {
    display: flex;
    flex-direction: column;
    gap: var(--ama-space-xs);
}

.ama-math-step-line {
    font-family: var(--ama-font);
    font-size: var(--ama-text-lg);
    font-weight: 600;
    line-height: 1.6;
    color: var(--ama-brand);
    padding: var(--ama-space-xs) 0;
    border-bottom: 1px dashed #c8e6c9;
}

.ama-math-step-line:last-child {
    border-bottom: none;
    font-size: var(--ama-text-xl);
    padding-top: var(--ama-space-sm);
}

/* Structured question body */
.ama-qbody-intro {
    font-size: var(--ama-text-base);
    line-height: var(--ama-line-height);
    color: var(--ama-text-secondary);
    margin-bottom: var(--ama-space-lg);
}
.ama-qbody-heading {
    font-weight: 800;
    font-size: var(--ama-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ama-text-muted);
    padding: var(--ama-space-sm) 0;
    margin-top: var(--ama-space-lg);
    border-bottom: 1px solid var(--ama-border-light);
    margin-bottom: var(--ama-space-sm);
}
.ama-qbody-table {
    background: var(--ama-surface);
    border: 1px solid var(--ama-border-light);
    border-radius: var(--ama-radius);
    overflow: hidden;
    margin-bottom: var(--ama-space-lg);
}
.ama-qbody-table-title {
    background: var(--ama-surface-alt);
    font-weight: 700;
    font-size: var(--ama-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: var(--ama-space-sm) var(--ama-space-md);
    border-bottom: 1px solid var(--ama-border-light);
    color: var(--ama-text-muted);
}
.ama-qbody-table-row {
    display: flex;
    align-items: baseline;
    padding: var(--ama-space-xs) var(--ama-space-md);
    font-size: var(--ama-text-sm);
}
.ama-qbody-table-row:nth-child(even) {
    background: var(--ama-surface-alt);
}
.ama-qbody-table-label {
    color: var(--ama-text-secondary);
    white-space: nowrap;
}
.ama-qbody-table-dots {
    flex: 1;
    border-bottom: 1px dotted var(--ama-border);
    margin: 0 var(--ama-space-sm);
    min-width: 20px;
    position: relative;
    top: -3px;
}
.ama-qbody-table-amount {
    font-family: 'Menlo', 'Consolas', monospace;
    font-weight: 600;
    color: var(--ama-text);
    white-space: nowrap;
}
/* ── Memo Panel (Final Answer tables) ── */
.ama-memo-section {
    background: var(--ama-surface);
    border: 2px solid #a3d9a5;
    border-radius: var(--ama-radius);
    overflow: hidden;
    margin-bottom: var(--ama-space-lg);
}
.ama-memo-section-title {
    background: #e8f5e9;
    font-weight: 700;
    font-size: var(--ama-text-sm);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: var(--ama-space-sm) var(--ama-space-md);
    border-bottom: 2px solid #a3d9a5;
    color: #2e7d32;
}
.ama-memo-table {
    padding: var(--ama-space-xs) 0;
}
.ama-memo-row {
    display: flex;
    align-items: baseline;
    padding: var(--ama-space-xs) var(--ama-space-md);
    font-size: var(--ama-text-sm);
}
.ama-memo-row:nth-child(even) {
    background: rgba(0,0,0,0.015);
}
.ama-memo-row--sub {
    padding-left: calc(var(--ama-space-md) + var(--ama-space-lg));
}
.ama-memo-row--sub .ama-memo-label {
    font-size: var(--ama-text-xs);
    color: var(--ama-text-secondary);
}
.ama-memo-row--total {
    border-top: 2px solid #a3d9a5;
    border-bottom: 2px solid #a3d9a5;
    background: #f1f8f1;
    margin-top: 2px;
}
.ama-memo-row--total .ama-memo-label {
    font-weight: 700;
    color: var(--ama-text);
}
.ama-memo-row--total .ama-memo-amount {
    font-weight: 800;
    color: #2e7d32;
}
.ama-memo-row--text {
    padding: var(--ama-space-xs) var(--ama-space-md);
}
.ama-memo-text {
    font-size: var(--ama-text-sm);
    color: var(--ama-text-secondary);
    line-height: var(--ama-line-height);
}
.ama-memo-label {
    color: var(--ama-text);
    white-space: nowrap;
}
.ama-memo-dots {
    flex: 1;
    border-bottom: 1px dotted var(--ama-border);
    margin: 0 var(--ama-space-sm);
    min-width: var(--ama-space-lg);
    position: relative;
    top: -3px;
}
.ama-memo-amount {
    font-family: 'Menlo', 'Consolas', monospace;
    font-weight: 600;
    color: var(--ama-text);
    white-space: nowrap;
}

.ama-qbody-letter-block {
    display: flex;
    gap: var(--ama-space-sm);
    padding: var(--ama-space-sm) var(--ama-space-md);
    background: var(--ama-surface);
    border: 1px solid var(--ama-border-light);
    border-radius: var(--ama-radius-sm);
    margin-bottom: var(--ama-space-sm);
}
.ama-qbody-letter {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    background: var(--ama-brand);
    color: var(--ama-text-inverse);
    font-weight: 800;
    font-size: var(--ama-text-xs);
    border-radius: var(--ama-radius-sm);
    flex-shrink: 0;
}
.ama-qbody-letter-content {
    flex: 1;
    font-size: var(--ama-text-sm);
    line-height: var(--ama-line-height);
    color: var(--ama-text-secondary);
}
.ama-qbody-letter-content strong {
    color: var(--ama-text);
    display: block;
    margin-bottom: var(--ama-space-xs);
}
.ama-qbody-letter-line {
    margin: 0;
    padding: 0;
    font-size: var(--ama-text-sm);
    line-height: var(--ama-line-height);
}
.ama-qbody-noteref {
    background: #edf7f0;
    border: 2px solid var(--ama-success);
    border-radius: var(--ama-radius);
    padding: var(--ama-space-md);
    margin-top: var(--ama-space-lg);
    margin-bottom: var(--ama-space-md);
}
.ama-qbody-noteref-label {
    font-size: var(--ama-text-xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ama-success);
    margin-bottom: var(--ama-space-sm);
}

.ama-question-given {
    margin-bottom: var(--ama-space-lg);
}

.ama-question-given-label {
    display: inline-block;
    font-size: var(--ama-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ama-text-muted);
    margin-bottom: var(--ama-space-sm);
}

.ama-question-given-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ama-space-sm);
}

.ama-question-given-list li {
    padding: var(--ama-space-sm) var(--ama-space-md);
    background: var(--ama-surface);
    border: 1px solid var(--ama-border-light);
    border-radius: var(--ama-radius-sm);
    font-size: var(--ama-text-base);
    line-height: var(--ama-line-height);
    position: relative;
    padding-left: var(--ama-space-lg);
}

.ama-question-given-list li::before {
    content: '\2022';
    position: absolute;
    left: var(--ama-space-sm);
    color: var(--ama-brand);
    font-weight: 700;
}

.ama-question-required {
    padding-top: var(--ama-space-md);
    border-top: 2px solid var(--ama-border-light);
}

.ama-question-required-label {
    display: inline-block;
    font-size: var(--ama-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ama-brand);
    margin-bottom: var(--ama-space-sm);
}

.ama-question-required-text {
    font-size: var(--ama-text-lg);
    font-weight: 600;
    line-height: var(--ama-line-height);
    color: var(--ama-text);
    margin: 0;
}

/* ============================================================
   COURSE WORKSPACE — 2-Panel Sidebar Layout
   ============================================================ */

.ama-course-shell {
    display: grid;
    grid-template-columns: 280px 1fr;
    min-height: calc(100vh - 160px);
    gap: 0;
}

/* ── Sidebar ── */
.ama-course-sidebar {
    position: sticky;
    top: 80px;
    height: calc(100vh - 80px);
    overflow: hidden;
    background: var(--ama-surface);
    border-right: 1px solid var(--ama-border);
    display: flex;
    flex-direction: column;
    z-index: 10;
}
.ama-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ama-space-md) var(--ama-space-md) var(--ama-space-sm);
    border-bottom: 1px solid var(--ama-border);
    flex-shrink: 0;
}
.ama-sidebar-subject {
    font-weight: 700;
    font-size: var(--ama-text-base);
    color: var(--accent, var(--ama-brand));
    text-decoration: none;
}
.ama-sidebar-subject:hover { text-decoration: none; opacity: 0.85; }
.ama-sidebar-close {
    display: none;
    background: none; border: none; font-size: 18px; cursor: pointer;
    color: var(--ama-text-secondary); padding: 4px;
}
.ama-sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: var(--ama-space-xs) 0;
}

/* ── Term dividers (hand-drawn style) ── */
.ama-sidebar-term-divider {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px var(--ama-space-md) 3px;
    margin-top: 2px;
}
.ama-sidebar-term-divider::before {
    content: '';
    flex: 0 0 3px;
    height: 16px;
    border-radius: 1px;
    background: var(--term-color, #94a3b8);
}
.ama-sidebar-term-divider::after {
    content: '';
    flex: 1;
    height: 2px;
    background: var(--term-color, #94a3b8);
    opacity: 0.3;
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
}
.ama-sidebar-term-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--term-color, #64748b);
    white-space: nowrap;
}

/* ── Unit items ── */
.ama-sidebar-unit-row {
    display: flex;
    align-items: center;
    gap: var(--ama-space-xs);
    width: 100%;
    padding: var(--ama-space-sm) var(--ama-space-md);
    font-size: var(--ama-text-sm);
    font-weight: 600;
    text-decoration: none;
    color: var(--ama-text);
    transition: background 0.15s;
    border-bottom: 1px solid var(--ama-border-light);
}
.ama-sidebar-unit-row.ama-sidebar-unit--active {
    background: var(--ama-brand-light);
}
.ama-sidebar-unit-row:hover {
    background: var(--ama-surface-alt);
    text-decoration: none;
    color: var(--ama-text);
}
.ama-sidebar-unit-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ama-sidebar-chevron {
    font-size: 11px;
    color: var(--ama-text-secondary);
    transition: transform 0.2s;
    flex-shrink: 0;
    width: 14px;
    text-align: center;
}
.ama-sidebar-chevron--open {
    transform: rotate(90deg);
}
.ama-sidebar-unit-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ama-sidebar-unit-pct {
    font-size: var(--ama-text-xs);
    font-weight: 700;
    color: var(--ama-brand);
    flex-shrink: 0;
}

/* ── Lesson items ── */
.ama-sidebar-lessons {
    padding: 0 0 var(--ama-space-xs) 0;
}
.ama-sidebar-lesson {
    display: flex;
    align-items: center;
    gap: var(--ama-space-xs);
    padding: 6px var(--ama-space-md) 6px calc(var(--ama-space-md) + 14px + var(--ama-space-xs));
    font-size: var(--ama-text-sm);
    color: var(--ama-text-secondary);
    text-decoration: none;
    transition: background 0.1s, color 0.1s;
    border-left: 3px solid transparent;
}
.ama-sidebar-lesson:hover {
    background: var(--ama-surface-alt);
    color: var(--ama-text);
    text-decoration: none;
}
.ama-sidebar-lesson--active {
    background: var(--ama-brand-light);
    color: var(--ama-brand);
    font-weight: 600;
    border-left-color: var(--ama-brand);
}
.ama-sidebar-lesson-icon {
    flex-shrink: 0;
    font-size: 12px;
    width: 16px;
    text-align: center;
}
.ama-sidebar-lesson-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ama-sidebar-quiz-link {
    color: var(--ama-gold);
    font-weight: 600;
    margin-top: 2px;
}
.ama-sidebar-quiz-link:hover { color: var(--ama-text); }

/* ── Footer ── */
.ama-sidebar-footer {
    padding: var(--ama-space-sm) var(--ama-space-md);
    border-top: 1px solid var(--ama-border);
}
.ama-sidebar-footer-link {
    display: block;
    padding: var(--ama-space-xs) 0;
    font-size: var(--ama-text-sm);
    font-weight: 600;
    color: var(--ama-text-secondary);
    text-decoration: none;
}
.ama-sidebar-footer-link:hover { color: var(--ama-text); text-decoration: none; }

/* ── Content panel ── */
.ama-course-content {
    padding: var(--ama-space-lg) var(--ama-space-xl);
    overflow-x: hidden;
    max-width: 960px;
}

/* ── Mobile hamburger toggle ── */
.ama-sidebar-toggle {
    display: none;
    background: none;
    border: 1px solid var(--ama-border);
    border-radius: var(--ama-radius-sm);
    padding: 6px 10px;
    cursor: pointer;
    font-size: 20px;
    color: var(--ama-text-secondary);
    margin-bottom: var(--ama-space-md);
}
.ama-sidebar-backdrop { display: none; }

/* ── Mobile sidebar drawer ── */
@media (max-width: 768px) {
    .ama-course-shell { grid-template-columns: 1fr; }
    .ama-course-sidebar {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        width: 300px;
        height: 100dvh;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        z-index: 1000;
        box-shadow: var(--ama-shadow-lg);
    }
    .ama-course-sidebar--open { transform: translateX(0); }
    .ama-sidebar-close { display: block; }
    .ama-sidebar-toggle { display: inline-flex; }
    .ama-sidebar-backdrop {
        display: block;
        position: fixed; inset: 0;
        background: rgba(0,0,0,0.35);
        z-index: 999;
    }
    .ama-course-content { padding: var(--ama-space-md); }
}

/* ============================================================
   VISUAL TRACKER (Share Capital / Retained Income)
   ============================================================ */

.ama-tracker-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ama-space-sm) var(--ama-space-md);
    border-radius: var(--ama-radius-sm);
    font-size: var(--ama-text-base);
    gap: var(--ama-space-md);
}

.ama-tracker-label {
    font-weight: 500;
    color: var(--ama-text-secondary);
    min-width: 160px;
}

.ama-tracker-value {
    font-weight: 700;
    font-size: var(--ama-text-lg);
    color: var(--ama-text);
    text-align: right;
    min-width: 100px;
}

.ama-tracker-amount {
    font-weight: 600;
    font-size: var(--ama-text-sm);
    color: var(--ama-text-muted);
    text-align: right;
    min-width: 120px;
}

.ama-tracker-header {
    background: var(--ama-surface-alt);
    display: block;
    margin-bottom: var(--ama-space-sm);
    border: 1px solid var(--ama-border-light);
}
.ama-tracker-header .ama-tracker-label {
    color: var(--ama-text);
    font-weight: 700;
}

.ama-tracker-add {
    background: #edf7f0;
}
.ama-tracker-add .ama-tracker-value,
.ama-tracker-add .ama-tracker-amount {
    color: var(--ama-brand);
}

.ama-tracker-subtract {
    background: #fdf0ef;
}
.ama-tracker-subtract .ama-tracker-value,
.ama-tracker-subtract .ama-tracker-amount {
    color: var(--ama-danger);
}

.ama-tracker-subtotal {
    border-top: 1px dashed var(--ama-border);
}
.ama-tracker-subtotal .ama-tracker-label {
    font-weight: 600;
    color: var(--ama-text);
}
.ama-tracker-subtotal .ama-tracker-value {
    font-weight: 700;
}

.ama-tracker-final {
    background: var(--ama-brand);
    color: var(--ama-text-inverse);
    border-radius: var(--ama-radius-sm);
    margin-top: var(--ama-space-xs);
}
.ama-tracker-final .ama-tracker-label {
    color: var(--ama-text-inverse);
    font-weight: 700;
}
.ama-tracker-final .ama-tracker-value {
    color: var(--ama-text-inverse);
    font-size: var(--ama-text-xl);
}
.ama-tracker-final .ama-tracker-amount {
    color: rgba(255,255,255,0.85);
    font-size: var(--ama-text-base);
    font-weight: 700;
}

.ama-tracker-arrow {
    text-align: center;
    color: var(--ama-text-muted);
    font-size: var(--ama-text-sm);
    padding: var(--ama-space-xs) 0;
    opacity: 0.5;
}

/* ============================================================
   GUIDED SOLVING ENGINE
   ============================================================ */

.ama-guided {
    display: flex;
    flex-direction: column;
    gap: var(--ama-space-lg);
}

/* Step Progress Bar */
.ama-step-progress {
    margin-bottom: var(--ama-space-md);
}

.ama-step-progress-label {
    font-size: var(--ama-text-sm);
    font-weight: 700;
    color: var(--ama-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--ama-space-xs);
}

.ama-step-progress-bar {
    height: 8px;
    background: var(--ama-border-light);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: var(--ama-space-md);
}

.ama-step-progress-fill {
    height: 100%;
    background: var(--ama-brand);
    border-radius: 4px;
    transition: width 0.4s ease;
}

.ama-step-progress-items {
    display: flex;
    flex-direction: column;
    gap: var(--ama-space-xs);
}

.ama-step-progress-item {
    display: flex;
    align-items: center;
    gap: var(--ama-space-sm);
    font-size: var(--ama-text-sm);
    padding: var(--ama-space-xs) 0;
}

.ama-step-progress-icon {
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.ama-step-progress-done .ama-step-progress-icon { color: var(--ama-success); }
.ama-step-progress-done .ama-step-progress-text { color: var(--ama-text-muted); text-decoration: line-through; }
.ama-step-progress-active .ama-step-progress-icon { color: var(--ama-brand); font-weight: 700; }
.ama-step-progress-active .ama-step-progress-text { color: var(--ama-text); font-weight: 600; }
.ama-step-progress-pending .ama-step-progress-icon { color: var(--ama-border); }
.ama-step-progress-pending .ama-step-progress-text { color: var(--ama-text-muted); }

/* Guided Input */
.ama-guided-input-group {
    display: flex;
    gap: var(--ama-space-sm);
    align-items: stretch;
}

.ama-guided-input {
    font-family: var(--ama-font);
    font-size: var(--ama-text-xl);
    font-weight: 700;
    padding: var(--ama-space-sm) var(--ama-space-md) var(--ama-space-sm) var(--ama-space-2xl);
    border: 2px solid var(--ama-border);
    border-radius: var(--ama-radius-sm);
    width: 100%;
    max-width: 320px;
    background: var(--ama-surface);
    color: var(--ama-text);
    transition: border-color 0.2s ease;
    outline: none;
}

.ama-guided-input:focus {
    border-color: var(--ama-brand);
    box-shadow: 0 0 0 3px rgba(95, 158, 160, 0.15);
}

.ama-guided-input-prefix {
    position: absolute;
    left: var(--ama-space-md);
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--ama-text-lg);
    font-weight: 600;
    color: var(--ama-text-muted);
    pointer-events: none;
}
.ama-guided-input-wrap { position: relative; display: inline-flex; align-items: center; gap: 8px; }
.ama-guided-input--plain { padding-left: var(--ama-space-md); }
.ama-guided-input-suffix { font-size: var(--ama-text-lg); font-weight: 700; color: var(--ama-text-secondary); }

/* Step-solver: running "your working so far" recap */
.ama-ep-working { margin-top: var(--ama-space-sm); padding: var(--ama-space-sm) var(--ama-space-md); background: var(--ama-surface-alt, #f3f4f6); border: 1px solid var(--ama-border-light); border-radius: var(--ama-radius-sm); }
.ama-ep-working-title { display: block; font-size: var(--ama-text-sm); font-weight: 700; color: var(--ama-text-secondary); margin-bottom: var(--ama-space-xs); }
.ama-ep-working-list { margin: 0; padding-left: var(--ama-space-lg); }
.ama-ep-working-list li { font-size: var(--ama-text-sm); padding: 3px 0; color: var(--ama-text); }
.ama-ep-working-label { color: var(--ama-text-secondary); }
.ama-ep-working-val { font-weight: 700; color: var(--ama-text); margin-left: 6px; }
.ama-ep-working-val::before { content: "= "; font-weight: 400; color: var(--ama-text-muted); }

/* Self-mark written/discussion answers against the model answer */
.ama-ep-selfmark { margin-top: var(--ama-space-sm); padding: var(--ama-space-md); background: var(--ama-brand-subtle); border: 1px solid var(--ama-border-light); border-radius: var(--ama-radius-sm); }
.ama-ep-selfmark-hint { margin: var(--ama-space-xs) 0 var(--ama-space-sm); font-size: var(--ama-text-sm); color: var(--ama-text-secondary); }
.ama-ep-selfmark-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ama-ep-selfmark-item label { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; font-size: var(--ama-text-sm); line-height: 1.45; }
.ama-ep-selfmark-item input { margin-top: 3px; flex-shrink: 0; }
.ama-ep-selfmark-item--done span { color: var(--ama-text-secondary); text-decoration: line-through; }
.ama-ep-selfmark-score { margin-top: var(--ama-space-sm); padding-top: var(--ama-space-sm); border-top: 1px solid var(--ama-border-light); font-size: var(--ama-text-base); }
.ama-ep-selfmark-score strong { color: var(--ama-brand); }
.ama-ep-selfmark-marks { margin-left: auto; flex-shrink: 0; font-weight: 700; color: var(--ama-text-secondary); font-size: var(--ama-text-xs); background: var(--ama-surface); border: 1px solid var(--ama-border-light); border-radius: 999px; padding: 1px 9px; }

.ama-guided-hint {
    font-size: var(--ama-text-sm);
    color: var(--ama-text-muted);
    margin-top: var(--ama-space-xs);
}

/* Guided Feedback */
.ama-guided-feedback {
    padding: var(--ama-space-md) var(--ama-space-lg);
    border-radius: var(--ama-radius-sm);
    border-left: 4px solid;
    margin-top: var(--ama-space-sm);
}

.ama-guided-feedback-correct {
    background: #edf7f0;
    border-color: var(--ama-success);
    color: var(--ama-brand);
}

.ama-guided-feedback-wrong {
    background: #fef8ec;
    border-color: var(--ama-warning);
    color: var(--ama-text);
}

.ama-guided-feedback-revealed {
    background: var(--ama-surface-alt);
    border-color: var(--ama-info);
    color: var(--ama-text);
}

/* Guided Complete */
.ama-guided-complete {
    animation: ama-fadeIn 0.5s ease;
}

/* Mode Toggle */
.ama-mode-toggle {
    display: flex;
    gap: var(--ama-space-sm);
    margin-bottom: var(--ama-space-lg);
}

.ama-mode-btn {
    flex: 1;
    padding: var(--ama-space-md) var(--ama-space-lg);
    border: 2px solid var(--ama-border);
    border-radius: var(--ama-radius);
    background: var(--ama-surface);
    cursor: pointer;
    font-family: var(--ama-font);
    font-size: var(--ama-text-base);
    font-weight: 600;
    color: var(--ama-text-secondary);
    text-align: center;
    transition: all 0.2s ease;
}

.ama-mode-btn:hover {
    border-color: var(--ama-brand);
    color: var(--ama-brand);
}

.ama-mode-btn-active {
    border-color: var(--ama-brand);
    background: var(--ama-brand-subtle);
    color: var(--ama-brand);
}

.ama-mode-btn-label {
    display: block;
    font-size: var(--ama-text-xs);
    font-weight: 400;
    color: var(--ama-text-muted);
    margin-top: var(--ama-space-xs);
}

.ama-practice-hint {
    display: block;
    margin-top: var(--ama-space-xxs);
    padding: var(--ama-space-xs) var(--ama-space-sm);
    background: #fff8e1;
    border-left: 3px solid #ffc107;
    border-radius: 0 var(--ama-radius) var(--ama-radius) 0;
    font-size: var(--ama-text-sm);
    color: #6d4c00;
}

.ama-practice-answers {
    margin-top: var(--ama-space-md);
    padding: var(--ama-space-md);
    background: var(--ama-surface-alt);
    border: 1px solid var(--ama-border);
    border-left: 4px solid var(--ama-brand);
    border-radius: var(--ama-radius);
}

.ama-practice-answer-row {
    display: flex;
    align-items: center;
    gap: var(--ama-space-sm);
    padding: var(--ama-space-xs) 0;
    font-size: var(--ama-text-sm);
    border-bottom: 1px solid var(--ama-border-light);
}

.ama-practice-answer-row:last-child {
    border-bottom: none;
}

.ama-practice-answer-row code {
    font-family: 'Consolas', 'Menlo', monospace;
    background: #e8f5e9;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    color: #2e7d32;
}

/* ============================================================
   GRID
   ============================================================ */

.ama-grid {
    display: grid;
    gap: var(--ama-space-lg);
}
.ama-grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.ama-grid-3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

/* ============================================================
   WHY THIS WORKS — STRUCTURED SECTIONS
   ============================================================ */

.ama-why-paragraph {
    margin: 0 0 var(--ama-space-md) 0;
    line-height: var(--ama-line-height);
    color: var(--ama-text-secondary);
}

/* Formula callout */
.ama-why-formula {
    background: var(--ama-surface-alt);
    border: 1px solid var(--ama-border-light);
    border-left: 3px solid var(--ama-brand);
    border-radius: var(--ama-radius-sm);
    padding: var(--ama-space-sm) var(--ama-space-md);
    margin-bottom: var(--ama-space-md);
    display: flex;
    flex-direction: column;
    gap: var(--ama-space-xs);
}
.ama-why-formula-label {
    font-size: var(--ama-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ama-brand);
}
.ama-why-formula-expr {
    font-family: 'Georgia', serif;
    font-size: var(--ama-text-base);
    color: var(--ama-text);
    font-weight: 500;
}

/* Checklist */
.ama-why-checklist {
    background: var(--ama-surface-alt);
    border: 1px solid var(--ama-border-light);
    border-radius: var(--ama-radius-sm);
    padding: var(--ama-space-md);
    margin-bottom: var(--ama-space-md);
}
.ama-why-checklist-title {
    font-weight: 600;
    font-size: var(--ama-text-sm);
    color: var(--ama-text);
    margin-bottom: var(--ama-space-sm);
}
.ama-why-checklist-list {
    margin: 0;
    padding-left: var(--ama-space-lg);
    list-style-type: decimal;
}
.ama-why-checklist-list li {
    font-size: var(--ama-text-sm);
    color: var(--ama-text-secondary);
    padding: var(--ama-space-xs) 0;
    line-height: var(--ama-line-height);
}

/* Ledger / CAPS note format */
.ama-why-ledger {
    background: var(--ama-surface);
    border: 1px solid var(--ama-border-light);
    border-radius: var(--ama-radius);
    overflow: hidden;
    margin-bottom: var(--ama-space-md);
}
.ama-why-ledger-title {
    background: var(--ama-surface-alt);
    font-weight: 700;
    font-size: var(--ama-text-sm);
    padding: var(--ama-space-sm) var(--ama-space-md);
    border-bottom: 1px solid var(--ama-border-light);
    color: var(--ama-text);
}
.ama-why-ledger-table {
    padding: var(--ama-space-xs) 0;
}
.ama-why-ledger-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--ama-space-xs) var(--ama-space-md);
    font-size: var(--ama-text-sm);
    transition: background 0.1s ease;
}
.ama-why-ledger-row:hover {
    background: var(--ama-surface-alt);
}
.ama-why-ledger-label {
    color: var(--ama-text-secondary);
    flex: 1;
    min-width: 0;
}
.ama-why-ledger-amount {
    font-family: 'Menlo', 'Consolas', monospace;
    font-weight: 600;
    color: var(--ama-text);
    text-align: right;
    white-space: nowrap;
    padding-left: var(--ama-space-md);
}
.ama-why-ledger-deduct .ama-why-ledger-amount {
    color: var(--ama-danger);
}
.ama-why-ledger-total {
    border-top: 2px solid var(--ama-border);
    font-weight: 700;
    margin-top: var(--ama-space-xs);
    padding-top: var(--ama-space-sm);
}
.ama-why-ledger-total .ama-why-ledger-label {
    color: var(--ama-text);
    font-weight: 700;
}
.ama-why-ledger-total .ama-why-ledger-amount {
    font-weight: 800;
    color: var(--ama-brand);
}

/* ============================================================
   BALANCE SHEET VISUAL PANEL
   ============================================================ */

.ama-bs-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ama-space-sm);
    margin-bottom: var(--ama-space-xl);
    flex-wrap: wrap;
}
.ama-bs-flow-note {
    background: var(--ama-brand);
    color: var(--ama-text-inverse);
    font-weight: 700;
    font-size: var(--ama-text-xs);
    padding: var(--ama-space-xs) var(--ama-space-md);
    border-radius: var(--ama-radius-sm);
    white-space: nowrap;
}
.ama-bs-flow-center {
    background: var(--ama-surface-alt);
    border: 2px solid var(--ama-brand);
    font-weight: 700;
    font-size: var(--ama-text-sm);
    padding: var(--ama-space-sm) var(--ama-space-lg);
    border-radius: var(--ama-radius);
    color: var(--ama-brand);
}
.ama-bs-flow-arrow {
    font-size: var(--ama-text-xl);
    color: var(--ama-brand);
    opacity: 0.6;
}
.ama-bs-statement {
    border: 2px solid var(--ama-border);
    border-radius: var(--ama-radius);
    overflow: hidden;
}
.ama-bs-statement-title {
    background: var(--ama-surface-alt);
    font-weight: 700;
    font-size: var(--ama-text-sm);
    text-align: center;
    padding: var(--ama-space-md);
    border-bottom: 2px solid var(--ama-border);
    color: var(--ama-text);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.ama-bs-statement-title small {
    font-weight: 600;
    font-size: var(--ama-text-xs);
    text-transform: none;
    letter-spacing: 0;
    color: var(--ama-text-muted);
}
.ama-bs-section-heading {
    font-weight: 800;
    font-size: var(--ama-text-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ama-text);
    padding: var(--ama-space-md) var(--ama-space-md) var(--ama-space-xs);
    border-bottom: 1px solid var(--ama-border-light);
    background: var(--ama-surface-alt);
}
.ama-bs-group-heading {
    font-weight: 600;
    font-size: var(--ama-text-sm);
    color: var(--ama-text-secondary);
    padding: var(--ama-space-sm) var(--ama-space-md) var(--ama-space-xs) var(--ama-space-lg);
}
.ama-bs-line {
    display: flex;
    align-items: baseline;
    padding: var(--ama-space-xs) var(--ama-space-md) var(--ama-space-xs) var(--ama-space-xl);
    font-size: var(--ama-text-sm);
}
.ama-bs-line-label {
    color: var(--ama-text-secondary);
    white-space: nowrap;
}
.ama-bs-line-dots {
    flex: 1;
    border-bottom: 1px dotted var(--ama-border);
    margin: 0 var(--ama-space-sm);
    min-width: 20px;
    position: relative;
    top: -3px;
}
.ama-bs-line-amount {
    font-family: 'Menlo', 'Consolas', monospace;
    font-weight: 600;
    color: var(--ama-text);
    white-space: nowrap;
}
.ama-bs-line-from-note {
    background: #edf7f0;
    border-radius: var(--ama-radius-sm);
    margin: var(--ama-space-xs) var(--ama-space-sm);
    padding-right: var(--ama-space-sm);
}
.ama-bs-line-from-note .ama-bs-line-amount {
    color: var(--ama-brand);
    font-weight: 800;
}
.ama-bs-note-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    background: var(--ama-brand);
    color: var(--ama-text-inverse);
    padding: 1px 6px;
    border-radius: 3px;
    margin-left: var(--ama-space-xs);
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ama-bs-subtotal {
    display: flex;
    align-items: baseline;
    padding: var(--ama-space-xs) var(--ama-space-md);
    font-size: var(--ama-text-sm);
    font-weight: 600;
    border-top: 1px solid var(--ama-border-light);
    margin-top: var(--ama-space-xs);
}
.ama-bs-subtotal .ama-bs-line-label {
    color: var(--ama-text);
}
.ama-bs-subtotal .ama-bs-line-amount {
    font-weight: 700;
}
.ama-bs-total {
    display: flex;
    align-items: baseline;
    padding: var(--ama-space-sm) var(--ama-space-md);
    font-size: var(--ama-text-base);
    font-weight: 800;
    border-top: 3px double var(--ama-border);
    margin-top: var(--ama-space-sm);
    background: var(--ama-surface-alt);
}
.ama-bs-total .ama-bs-line-label {
    color: var(--ama-text);
    font-weight: 800;
}
.ama-bs-total .ama-bs-line-amount {
    font-weight: 800;
    color: var(--ama-brand);
    font-size: var(--ama-text-base);
}

/* ============================================================
   STATEMENT OF FINANCIAL POSITION LINK
   ============================================================ */

.ama-sofp-bridge {
    background: var(--ama-surface);
    border: 1px solid var(--ama-border-light);
    border-radius: var(--ama-radius);
    padding: var(--ama-space-lg);
}

/* Flow arrow block */
.ama-sofp-arrow-block {
    text-align: center;
    margin-bottom: var(--ama-space-lg);
}
.ama-sofp-arrow-label {
    display: inline-block;
    background: var(--ama-brand);
    color: var(--ama-text-inverse);
    font-weight: 700;
    font-size: var(--ama-text-sm);
    padding: var(--ama-space-xs) var(--ama-space-md);
    border-radius: var(--ama-radius-sm);
    margin-bottom: var(--ama-space-xs);
}
.ama-sofp-arrow-line {
    color: var(--ama-brand);
    font-size: var(--ama-text-lg);
    line-height: 1.2;
    opacity: 0.6;
}
.ama-sofp-arrow-text {
    font-size: var(--ama-text-xs);
    font-weight: 600;
    color: var(--ama-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--ama-space-xs) 0;
}

/* SOFP extract */
.ama-sofp-extract {
    border: 2px solid var(--ama-border);
    border-radius: var(--ama-radius);
    overflow: hidden;
}
.ama-sofp-extract-title {
    background: var(--ama-surface-alt);
    font-weight: 700;
    font-size: var(--ama-text-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: var(--ama-space-sm) var(--ama-space-md);
    border-bottom: 2px solid var(--ama-border);
    color: var(--ama-text);
    text-align: center;
}
.ama-sofp-section {
    padding: var(--ama-space-md);
}
.ama-sofp-heading {
    font-weight: 700;
    font-size: var(--ama-text-sm);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ama-text);
    margin-bottom: var(--ama-space-xs);
}
.ama-sofp-subheading {
    font-weight: 600;
    font-size: var(--ama-text-sm);
    color: var(--ama-text-secondary);
    padding-left: var(--ama-space-md);
    margin-bottom: var(--ama-space-sm);
}
.ama-sofp-line {
    display: flex;
    align-items: baseline;
    padding: var(--ama-space-xs) 0;
    padding-left: var(--ama-space-xl);
    font-size: var(--ama-text-sm);
}
.ama-sofp-line-label {
    color: var(--ama-text-secondary);
    white-space: nowrap;
}
.ama-sofp-line-dots {
    flex: 1;
    border-bottom: 1px dotted var(--ama-border);
    margin: 0 var(--ama-space-sm);
    min-width: 20px;
    position: relative;
    top: -3px;
}
.ama-sofp-line-amount {
    font-family: 'Menlo', 'Consolas', monospace;
    font-weight: 600;
    color: var(--ama-text);
    white-space: nowrap;
}
.ama-sofp-line-highlight {
    background: #edf7f0;
    border-radius: var(--ama-radius-sm);
    padding-top: var(--ama-space-sm);
    padding-bottom: var(--ama-space-sm);
    padding-right: var(--ama-space-sm);
    margin: var(--ama-space-xs) 0;
}
.ama-sofp-line-highlight .ama-sofp-line-amount {
    color: var(--ama-brand);
    font-weight: 800;
}

/* ============================================================
   FINAL EXAM ANSWER BOX
   ============================================================ */

.ama-exam-answer {
    margin-top: var(--ama-space-lg);
    border: 2px solid var(--ama-success);
    border-radius: var(--ama-radius);
    background: #edf7f0;
    padding: var(--ama-space-md) var(--ama-space-lg);
}
.ama-exam-answer-title {
    font-size: var(--ama-text-xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ama-success);
    margin-bottom: var(--ama-space-sm);
}
.ama-exam-answer-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--ama-space-xs) 0;
    font-size: var(--ama-text-base);
}
.ama-exam-answer-line span {
    color: var(--ama-text-secondary);
}
.ama-exam-answer-line strong {
    font-family: 'Menlo', 'Consolas', monospace;
    font-size: var(--ama-text-lg);
    color: var(--ama-text);
}

/* Ledger with shares column */
.ama-why-ledger-shares {
    font-family: 'Menlo', 'Consolas', monospace;
    font-weight: 600;
    color: var(--ama-text-muted);
    text-align: right;
    white-space: nowrap;
    min-width: 90px;
}

/* ============================================================
   HEADER ACCENT BAR
   ============================================================ */

.ama-accent-bar {
    height: 4px;
    border-radius: 2px;
    width: 60px;
    margin-bottom: var(--ama-space-md);
}

/* ============================================================
   BLAZOR ERROR
   ============================================================ */

.blazor-error-boundary {
    background: var(--ama-danger);
    padding: var(--ama-space-md) var(--ama-space-lg);
    color: white;
    border-radius: var(--ama-radius-sm);
}
.blazor-error-boundary::after {
    content: "Something went wrong. Please reload the page.";
}

#blazor-error-ui {
    display: none;
    background: var(--ama-danger);
    color: white;
    padding: var(--ama-space-sm) var(--ama-space-lg);
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 1000;
    text-align: center;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
    :root {
        --ama-text-3xl: 1.75rem;
        --ama-text-2xl: 1.5rem;
    }
    .ama-page {
        padding: var(--ama-space-lg) var(--ama-space-md);
    }
    .ama-grid-2, .ama-grid-3 {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   PROFILE & SCHOOL SEARCH
   ============================================================ */

.ama-label {
    display: block;
    font-weight: 600;
    font-size: var(--ama-text-sm);
    margin-bottom: 0.25rem;
    color: var(--ama-text);
}

.ama-input {
    width: 100%;
    padding: 0.55rem 0.75rem;
    font-size: var(--ama-text-base);
    border: 1px solid var(--ama-border);
    border-radius: var(--ama-radius);
    background: var(--ama-surface);
    color: var(--ama-text);
    transition: border-color 0.15s;
    box-sizing: border-box;
}
.ama-input:focus {
    outline: none;
    border-color: var(--ama-brand);
    box-shadow: 0 0 0 2px var(--ama-brand-subtle);
}

.ama-school-search {
    position: relative;
}
.ama-school-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    background: var(--ama-surface);
    border: 1px solid var(--ama-border);
    border-top: none;
    border-radius: 0 0 var(--ama-radius) var(--ama-radius);
    max-height: 240px;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.ama-school-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: none;
    background: none;
    font-size: var(--ama-text-sm);
    color: var(--ama-text);
    cursor: pointer;
    text-align: left;
}
.ama-school-option:hover {
    background: var(--ama-surface-alt);
}
.ama-school-option-town {
    color: var(--ama-text-muted);
    font-size: 0.8rem;
    margin-left: var(--ama-space-sm);
    flex-shrink: 0;
}

/* ============================================================
   EXCEL PRACTICE
   ============================================================ */
.ama-spreadsheet-container {
    border: 1px solid var(--ama-border);
    border-radius: var(--ama-radius);
    overflow: hidden;
    margin-bottom: var(--ama-space-lg);
}
.ama-office-workspace .ama-spreadsheet-container {
    border: none;
    border-radius: 0;
    margin-bottom: 0;
    height: 100%;
    min-height: 500px;
}
.ama-excel-editor-area {
    margin-bottom: var(--ama-space-xl);
}
.ama-excel-toolbar {
    display: flex;
    gap: var(--ama-space-sm);
    margin-bottom: var(--ama-space-md);
}
.ama-excel-steps {
    margin-bottom: var(--ama-space-lg);
}
.ama-excel-step {
    padding: var(--ama-space-sm) 0;
    border-bottom: 1px solid var(--ama-border-light);
}
.ama-excel-step:last-child {
    border-bottom: none;
}
.ama-step-header {
    display: flex;
    align-items: center;
    gap: var(--ama-space-sm);
    margin-bottom: var(--ama-space-xs);
}
.ama-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--ama-brand);
    color: var(--ama-text-inverse);
    font-size: var(--ama-text-xs);
    font-weight: 600;
    flex-shrink: 0;
}
.ama-step-hint {
    margin: var(--ama-space-xs) 0 0 calc(1.6rem + var(--ama-space-sm));
    padding: var(--ama-space-sm);
    background: var(--ama-surface-alt);
    border-radius: var(--ama-radius);
    font-size: var(--ama-text-sm);
    color: var(--ama-text-secondary);
}
.ama-excel-validation {
    margin-top: var(--ama-space-lg);
}
.ama-validation-rule {
    padding: var(--ama-space-sm) var(--ama-space-md);
    border-radius: var(--ama-radius);
    margin-bottom: var(--ama-space-xs);
}
.ama-rule-pass {
    background: #e8f5e9;
    border-left: 3px solid var(--ama-success);
}
.ama-rule-fail {
    background: #fbe9e7;
    border-left: 3px solid var(--ama-danger);
}
.ama-validation-icon {
    font-weight: 700;
    font-size: 1.1rem;
}
.ama-rule-pass .ama-validation-icon {
    color: var(--ama-success);
}
.ama-rule-fail .ama-validation-icon {
    color: var(--ama-danger);
}
.ama-validation-feedback {
    margin: var(--ama-space-xs) 0 0 calc(1.1rem + var(--ama-space-sm));
    font-size: var(--ama-text-sm);
    color: var(--ama-danger);
}
.ama-exercise-card {
    display: flex;
    align-items: center;
    gap: var(--ama-space-sm);
    padding: var(--ama-space-md);
    border: 1px solid var(--ama-border);
    border-radius: var(--ama-radius);
    background: var(--ama-surface);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.ama-exercise-card:hover {
    border-color: var(--ama-brand);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.ama-exercise-tool-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.5rem;
    border-radius: var(--ama-radius);
    font-size: var(--ama-text-xs);
    font-weight: 600;
    color: #fff;
}
.ama-tool-excel { background: #217346; }
.ama-tool-word { background: #2b579a; }
.ama-tool-access { background: #a4373a; }

/* Chart panel */
.ama-chart-panel {
    border: 1px solid var(--ama-border);
    border-radius: var(--ama-radius);
    background: var(--ama-surface);
    margin-bottom: var(--ama-space-lg);
    overflow: hidden;
}
.ama-chart-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ama-space-sm) var(--ama-space-md);
    background: var(--ama-surface-alt);
    border-bottom: 1px solid var(--ama-border-light);
}
.ama-chart-container {
    padding: var(--ama-space-md);
    min-height: 300px;
    position: relative;
}
.ama-chart-select {
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--ama-border);
    border-radius: var(--ama-radius);
    font-size: var(--ama-text-sm);
    background: var(--ama-surface);
    color: var(--ama-text);
}

/* Toolbar enhancements */
.ama-toolbar-separator {
    width: 1px;
    height: 1.5rem;
    background: var(--ama-border);
    margin: 0 var(--ama-space-xs);
}
.ama-btn-sm {
    padding: 0.3rem 0.6rem;
    font-size: var(--ama-text-xs);
}

/* Word practice */
.ama-word-editor-area {
    margin-bottom: var(--ama-space-xl);
}
.ama-document-editor {
    border: 1px solid var(--ama-border);
    border-radius: var(--ama-radius);
    min-height: 400px;
    margin-bottom: var(--ama-space-lg);
    background: #fff;
}
.ama-document-editor .ck-editor__editable {
    min-height: 350px;
    padding: var(--ama-space-md) var(--ama-space-lg);
    font-size: var(--ama-text-base);
    line-height: 1.6;
}
.ama-word-validation {
    margin-top: var(--ama-space-lg);
}

/* Access practice */
.ama-access-editor-area {
    margin-bottom: var(--ama-space-xl);
}
.ama-query-editor {
    margin-bottom: var(--ama-space-md);
}

/* SQL editor toolbar */
.ama-sql-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.3rem 0.5rem;
    background: #2b2b3c;
    border: 1px solid #3b3b50;
    border-bottom: none;
    border-radius: var(--ama-radius) var(--ama-radius) 0 0;
}
.ama-sql-toolbar-label {
    font-weight: 600;
    font-size: var(--ama-text-sm);
    color: #a6adc8;
}

/* SQL editor wrapper with line numbers */
.ama-sql-editor-wrap {
    display: flex;
    border: 1px solid #3b3b50;
    border-radius: 0 0 var(--ama-radius) var(--ama-radius);
    overflow: hidden;
    background: #1e1e2e;
}
.ama-sql-line-numbers {
    background: #181825;
    padding: 0.5rem 0;
    min-width: 36px;
    text-align: right;
    border-right: 1px solid #313244;
    overflow: hidden;
    -webkit-user-select: none;
    user-select: none;
}
.ama-sql-line-num {
    padding: 0 0.4rem;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.78rem;
    line-height: 1.6;
    color: #585b70;
}
.ama-sql-editor-container {
    flex: 1;
    position: relative;
    overflow: hidden;
}
.ama-sql-textarea {
    width: 100%;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.82rem;
    padding: 0.5rem 0.6rem;
    border: none;
    border-radius: 0;
    background: transparent;
    color: #cdd6f4;
    resize: vertical;
    line-height: 1.6;
    tab-size: 4;
    position: relative;
    z-index: 2;
    caret-color: #f5e0dc;
    min-height: 120px;
}
.ama-sql-textarea:focus {
    outline: none;
    box-shadow: none;
}
.ama-sql-textarea::placeholder {
    color: #6c7086;
}

/* Syntax highlight overlay — sits behind transparent textarea */
.ama-sql-highlight-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.5rem 0.6rem;
    margin: 0;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.82rem;
    line-height: 1.6;
    tab-size: 4;
    color: #cdd6f4;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow: auto;
    pointer-events: none;
    z-index: 1;
}
.ama-sql-kw { color: #cba6f7; font-weight: 600; }
.ama-sql-str { color: #a6e3a1; }
.ama-sql-num { color: #fab387; }

/* SQL autocomplete popup */
.ama-sql-autocomplete {
    position: absolute;
    bottom: 100%;
    left: 0.6rem;
    min-width: 200px;
    max-height: 200px;
    overflow-y: auto;
    background: #1e1e2e;
    border: 1px solid #45475a;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    z-index: 20;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.78rem;
}
.ama-sql-ac-item {
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    color: #cdd6f4;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}
.ama-sql-ac-item:hover,
.ama-sql-ac-active {
    background: #313244;
    color: #fff;
}
.ama-sql-ac-badge-kw {
    display: inline-block;
    padding: 0 0.25rem;
    font-size: 0.6rem;
    font-weight: 700;
    background: #cba6f7;
    color: #1e1e2e;
    border-radius: 2px;
}
.ama-sql-ac-badge-col {
    display: inline-block;
    padding: 0 0.25rem;
    font-size: 0.6rem;
    font-weight: 700;
    background: #89b4fa;
    color: #1e1e2e;
    border-radius: 2px;
}

/* Table browser */
.ama-table-browser {
    display: flex;
    gap: var(--ama-space-xs);
    flex-wrap: wrap;
    margin-top: var(--ama-space-xs);
    align-items: center;
}
.ama-table-browser-label {
    font-weight: 600;
    font-size: var(--ama-text-xs);
    color: var(--ama-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-right: 0.2rem;
}
.ama-table-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.2rem 0.5rem;
    background: var(--ama-surface-alt);
    border: 1px solid var(--ama-border);
    border-radius: var(--ama-radius);
    font-size: var(--ama-text-xs);
    font-family: 'Consolas', monospace;
    cursor: pointer;
    color: var(--ama-brand);
    transition: all 0.15s;
}
.ama-table-tag:hover {
    background: var(--ama-brand-subtle);
    border-color: var(--ama-brand);
    transform: translateY(-1px);
}
.ama-table-tag-icon { font-size: 0.7rem; }
.ama-table-tag-col {
    color: #666;
    font-size: 0.68rem;
    padding: 0.15rem 0.4rem;
}

/* Query results */
.ama-query-results {
    margin-top: var(--ama-space-md);
    border: 1px solid var(--ama-border);
    border-radius: var(--ama-radius);
    overflow: hidden;
}
.ama-query-result-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ama-space-xs) var(--ama-space-md);
    background: var(--ama-surface-alt);
    font-size: var(--ama-text-sm);
    color: var(--ama-text-secondary);
    border-bottom: 1px solid var(--ama-border-light);
}
.ama-query-result-count { font-weight: 600; }
.ama-query-result-time { font-size: var(--ama-text-xs); color: var(--ama-text-muted); }
.ama-query-result-footer {
    padding: 0.25rem var(--ama-space-md);
    background: var(--ama-surface-alt);
    border-top: 1px solid var(--ama-border-light);
    font-size: var(--ama-text-xs);
    color: var(--ama-text-muted);
}

/* Error panel */
.ama-query-error-panel {
    display: flex;
    gap: 0.6rem;
    padding: var(--ama-space-sm) var(--ama-space-md);
    background: #fef2f2;
    border-left: 3px solid var(--ama-danger);
}
.ama-query-error-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}
.ama-query-error-msg {
    color: var(--ama-danger);
    font-size: var(--ama-text-sm);
    font-weight: 600;
    font-family: 'Consolas', monospace;
}
.ama-query-error-suggestion {
    font-size: var(--ama-text-xs);
    color: #666;
    margin-top: 0.2rem;
}

/* Results table */
.ama-query-table-wrap {
    overflow-x: auto;
    max-height: 400px;
    overflow-y: auto;
}
.ama-query-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ama-text-sm);
}
.ama-query-table th {
    background: var(--ama-surface-alt);
    padding: var(--ama-space-xs) var(--ama-space-sm);
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid var(--ama-border);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
}
.ama-query-table td {
    padding: var(--ama-space-xs) var(--ama-space-sm);
    border-bottom: 1px solid var(--ama-border-light);
}
.ama-query-table tbody tr:hover {
    background: #e8f0fe;
}
.ama-query-row-even { background: #fafafa; }
.ama-query-row-num {
    color: var(--ama-text-muted);
    font-size: var(--ama-text-xs);
    text-align: center;
    min-width: 32px;
    background: var(--ama-surface-alt) !important;
    border-right: 1px solid var(--ama-border-light);
}
.ama-access-validation {
    margin-top: var(--ama-space-lg);
}

/* Exam practice */
.ama-exam-start-panel {
    text-align: center;
    padding: var(--ama-space-2xl) var(--ama-space-xl);
    border: 2px dashed var(--ama-border);
    border-radius: var(--ama-radius);
    background: var(--ama-surface-alt);
}
.ama-exam-start-panel h2 {
    margin-bottom: var(--ama-space-md);
}
.ama-exam-section-preview {
    display: flex;
    flex-direction: column;
    gap: var(--ama-space-sm);
    margin: var(--ama-space-md) auto var(--ama-space-lg) auto;
    max-width: 480px;
    text-align: left;
}
.ama-exam-section-preview-item {
    display: flex;
    align-items: center;
    gap: var(--ama-space-sm);
    padding: var(--ama-space-sm) var(--ama-space-md);
    background: var(--ama-surface);
    border: 1px solid var(--ama-border-light);
    border-radius: var(--ama-radius-sm);
}
.ama-exam-section-preview-title {
    flex: 1;
    font-weight: 600;
}
.ama-exam-start-meta {
    display: flex;
    justify-content: center;
    gap: var(--ama-space-xl);
    margin-top: var(--ama-space-md);
    font-size: var(--ama-text-base);
    color: var(--ama-text-secondary);
}
.ama-exam-meta-item {
    display: inline-flex;
    align-items: center;
    gap: var(--ama-space-xs);
}
.ama-exam-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ama-space-md);
    padding: var(--ama-space-sm) var(--ama-space-md);
    background: var(--ama-surface-alt);
    border: 1px solid var(--ama-border);
    border-radius: var(--ama-radius);
    margin-bottom: var(--ama-space-lg);
    flex-wrap: wrap;
}
.ama-exam-timer {
    display: flex;
    align-items: center;
    gap: var(--ama-space-xs);
    font-weight: 600;
    font-size: var(--ama-text-base);
    font-variant-numeric: tabular-nums;
}
.ama-timer-icon { font-size: 1.2rem; }
.ama-timer-label {
    font-weight: 400;
    color: var(--ama-text-muted);
    font-size: var(--ama-text-sm);
}
.ama-timer-warning .ama-timer-display { color: #e65100; }
.ama-timer-critical .ama-timer-display {
    color: var(--ama-danger);
    animation: timer-blink 1s step-end infinite;
}
@keyframes timer-blink {
    50% { opacity: 0.3; }
}
.ama-timer-expired .ama-timer-display { color: var(--ama-danger); }

/* Exam fullscreen mode — hides header/footer when body has this class */
body.ama-exam-mode .ama-header,
body.ama-exam-mode .ama-footer {
    display: none !important;
}
body.ama-exam-mode .ama-page {
    padding-top: 0;
}

.ama-exam-section-tabs {
    display: flex;
    gap: var(--ama-space-xs);
    flex-wrap: wrap;
}
.ama-section-tab {
    display: flex;
    align-items: center;
    gap: var(--ama-space-xs);
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--ama-border);
    border-radius: var(--ama-radius);
    background: var(--ama-surface);
    font-size: var(--ama-text-sm);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.ama-section-tab:hover {
    border-color: var(--ama-brand);
}
.ama-section-tab-active {
    border-color: var(--ama-brand);
    background: var(--ama-brand-subtle);
    font-weight: 600;
}
.ama-section-tab-done {
    border-color: var(--ama-success);
    background: #e8f5e9;
}
.ama-section-tab-check {
    color: var(--ama-success);
    font-weight: 700;
    font-size: 0.9rem;
}
.ama-section-tab-tool {
    display: inline-block;
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    font-size: var(--ama-text-xs);
    font-weight: 600;
    color: #fff;
}
.ama-exam-section-content {
    min-height: 300px;
}
.ama-exam-results {
    text-align: center;
    padding: var(--ama-space-xl);
}
.ama-exam-score-card {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ama-space-xs);
    padding: var(--ama-space-lg) var(--ama-space-2xl);
    border: 2px solid var(--ama-brand);
    border-radius: var(--ama-radius);
    margin: var(--ama-space-lg) auto;
    background: var(--ama-brand-subtle);
}
.ama-score-big {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--ama-brand);
}
.ama-score-percentage {
    font-size: var(--ama-text-lg);
    color: var(--ama-text-secondary);
}
.ama-exam-section-result {
    text-align: left;
    padding: var(--ama-space-sm) var(--ama-space-md);
    border-bottom: 1px solid var(--ama-border-light);
}
.ama-exam-section-result h3 {
    display: flex;
    align-items: center;
    gap: var(--ama-space-sm);
    margin: 0;
}

/* Reward Feedback Card */
.ama-reward-card {
    position: fixed;
    bottom: var(--ama-space-lg);
    right: var(--ama-space-lg);
    z-index: 1000;
    min-width: 280px;
    max-width: 360px;
    padding: var(--ama-space-lg);
    background: var(--ama-surface);
    border: 2px solid var(--ama-brand);
    border-radius: var(--ama-radius);
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    text-align: center;
    transform: translateY(120%);
    opacity: 0;
    transition: transform 0.35s ease, opacity 0.35s ease;
}
.ama-reward-card-visible {
    transform: translateY(0);
    opacity: 1;
}
.ama-reward-icon {
    font-size: 2rem;
    width: 3rem;
    height: 3rem;
    line-height: 3rem;
    border-radius: 50%;
    margin: 0 auto var(--ama-space-sm);
    font-weight: 700;
}
.ama-reward-correct {
    background: #e8f5e9;
    color: var(--ama-success);
}
.ama-reward-partial {
    background: #fff3e0;
    color: #e65100;
}
.ama-reward-title {
    margin: 0 0 var(--ama-space-xs);
    font-size: var(--ama-text-lg);
}
.ama-reward-xp {
    font-size: var(--ama-text-base);
    font-weight: 700;
    color: var(--ama-brand);
    margin-bottom: var(--ama-space-xs);
}
.ama-reward-levelup {
    font-weight: 600;
    color: var(--ama-brand);
    margin-bottom: var(--ama-space-xs);
}
.ama-reward-streak {
    font-size: var(--ama-text-sm);
    color: var(--ama-text-secondary);
    margin-bottom: var(--ama-space-xs);
}
.ama-reward-mastery {
    font-size: var(--ama-text-sm);
    color: var(--ama-text-secondary);
    margin-bottom: var(--ama-space-xs);
}
.ama-reward-badge {
    font-weight: 600;
    margin-bottom: var(--ama-space-xs);
}
.ama-reward-message {
    font-size: var(--ama-text-sm);
    color: var(--ama-text-muted);
    margin-bottom: var(--ama-space-sm);
}
.ama-reward-dismiss {
    margin-top: var(--ama-space-sm);
}

/* Trophy Case */
.ama-trophy-stats {
    display: flex;
    gap: var(--ama-space-md);
    margin-bottom: var(--ama-space-lg);
    flex-wrap: wrap;
}
.ama-trophy-stat {
    flex: 1;
    min-width: 120px;
    padding: var(--ama-space-md);
    background: var(--ama-surface);
    border: 1px solid var(--ama-border);
    border-radius: var(--ama-radius);
    text-align: center;
}
.ama-trophy-stat-value {
    display: block;
    font-size: var(--ama-text-xl);
    font-weight: 700;
    color: var(--ama-brand);
}
.ama-trophy-stat-label {
    display: block;
    font-size: var(--ama-text-sm);
    color: var(--ama-text-muted);
    margin-top: var(--ama-space-xxs);
}
.ama-trophy-filters {
    display: flex;
    gap: var(--ama-space-xs);
    margin-bottom: var(--ama-space-lg);
}
.ama-trophy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--ama-space-md);
    margin-bottom: var(--ama-space-xl);
}
.ama-trophy-card {
    padding: var(--ama-space-md);
    border-radius: var(--ama-radius);
    border: 2px solid var(--ama-border);
    background: var(--ama-surface);
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ama-trophy-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.ama-trophy-earned {
    border-color: var(--ama-brand);
}
.ama-trophy-earned:hover {
    box-shadow: 0 0 0 3px rgba(47,107,83,0.15), 0 4px 12px rgba(0,0,0,0.08);
}
.ama-trophy-locked {
    opacity: 0.55;
    filter: grayscale(0.5);
}
.ama-trophy-icon {
    font-size: 2.5rem;
    margin-bottom: var(--ama-space-xs);
}
.ama-trophy-name {
    margin: 0 0 var(--ama-space-xxs);
    font-size: var(--ama-text-base);
}
.ama-trophy-desc {
    margin: 0 0 var(--ama-space-xs);
    font-size: var(--ama-text-sm);
    color: var(--ama-text-secondary);
}
.ama-trophy-xp {
    font-size: var(--ama-text-sm);
    font-weight: 600;
    color: var(--ama-brand);
}
.ama-trophy-date {
    font-size: var(--ama-text-xs);
    color: var(--ama-text-muted);
    margin-top: var(--ama-space-xxs);
}

/* Celebration Popup */
.ama-celebration-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: ama-fade-in 0.3s ease;
}
.ama-celebration-card {
    background: var(--ama-surface);
    border: 3px solid var(--ama-brand);
    border-radius: var(--ama-radius);
    padding: var(--ama-space-xl);
    text-align: center;
    max-width: 360px;
    animation: ama-pop-in 0.4s ease;
}
.ama-celebration-icon {
    font-size: 4rem;
    margin-bottom: var(--ama-space-sm);
}
.ama-celebration-title {
    font-size: var(--ama-text-xl);
    font-weight: 700;
    margin: 0 0 var(--ama-space-xs);
    color: var(--ama-brand);
}
.ama-celebration-name {
    font-size: var(--ama-text-lg);
    margin: 0 0 var(--ama-space-md);
}
@keyframes ama-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes ama-pop-in {
    0% { transform: scale(0.5); opacity: 0; }
    70% { transform: scale(1.05); }
    100% { transform: scale(1); opacity: 1; }
}

/* PAT Simulator */
.ama-pat-progress-bar {
    display: flex;
    gap: var(--ama-space-md);
    margin-bottom: var(--ama-space-xl);
    padding: var(--ama-space-md);
    background: var(--ama-surface-alt);
    border-radius: var(--ama-radius);
    border: 1px solid var(--ama-border);
    overflow-x: auto;
}
.ama-pat-step-dot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ama-space-xs);
    cursor: pointer;
    min-width: 80px;
    text-align: center;
}
.ama-pat-dot-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    font-weight: 700;
    font-size: var(--ama-text-sm);
    transition: background 0.15s, color 0.15s;
}
.ama-pat-step-pending .ama-pat-dot-number {
    background: var(--ama-border);
    color: var(--ama-text-muted);
}
.ama-pat-step-active .ama-pat-dot-number {
    background: var(--ama-brand);
    color: #fff;
    box-shadow: 0 0 0 3px var(--ama-brand-subtle);
}
.ama-pat-step-done .ama-pat-dot-number {
    background: var(--ama-success);
    color: #fff;
}
.ama-pat-dot-label {
    font-size: var(--ama-text-xs);
    color: var(--ama-text-secondary);
    white-space: nowrap;
}
.ama-pat-step-active .ama-pat-dot-label {
    color: var(--ama-brand);
    font-weight: 600;
}
.ama-pat-step-panel {
    border: 1px solid var(--ama-border);
    border-radius: var(--ama-radius);
    padding: var(--ama-space-lg);
    background: var(--ama-surface);
}
.ama-pat-step-header {
    margin-bottom: var(--ama-space-md);
}
.ama-pat-exercise-area {
    margin-top: var(--ama-space-md);
}
.ama-pat-complete {
    text-align: center;
    padding: var(--ama-space-xl);
    border: 2px solid var(--ama-success);
    border-radius: var(--ama-radius);
    background: #e8f5e9;
}

/* ============================================================
   OFFICE SIMULATOR FRAMEWORK
   ============================================================ */

.ama-office-shell {
    display: flex;
    flex-direction: column;
    border: 1px solid #b0b0b0;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    height: calc(100vh - 80px);
    min-height: 600px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.12);
}

/* Title bar — 3-column grid: QAT | Title | Window Controls */
.ama-office-title-bar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
    color: #fff;
    -webkit-user-select: none;
    user-select: none;
    min-height: 30px;
}
.ama-title-bar-qat {
    display: flex;
    align-items: center;
    gap: 2px;
}
.ama-title-bar-qat-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 22px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: rgba(255,255,255,0.85);
    border-radius: 2px;
    padding: 0;
}
.ama-title-bar-qat-btn:hover {
    background: rgba(255,255,255,0.18);
    color: #fff;
}
.ama-title-bar-qat-btn svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
}
.ama-title-bar-center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    overflow: hidden;
}
.ama-title-bar-doc { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ama-title-bar-app { opacity: 0.75; font-weight: 400; white-space: nowrap; }
.ama-title-bar-window-controls {
    display: flex;
    align-items: center;
    gap: 0;
}
.ama-title-bar-winbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 24px;
    cursor: default;
    border-radius: 1px;
}
.ama-title-bar-winbtn:hover {
    background: rgba(255,255,255,0.12);
}
.ama-title-bar-close:hover {
    background: #e81123 !important;
}
.ama-title-bar-winbtn svg {
    width: 10px;
    height: 10px;
    stroke: rgba(255,255,255,0.9);
    fill: none;
}
.ama-title-bar-excel { background: #217346; }
.ama-title-bar-word { background: #2b579a; }
.ama-title-bar-access { background: #a4373a; }

/* Ribbon */
.ama-ribbon {
    background: #f3f3f3;
    border-bottom: 1px solid #d1d1d1;
}
.ama-ribbon-tabs {
    display: flex;
    gap: 0;
    padding: 0 0.5rem;
    border-bottom: 1px solid #d1d1d1;
    background: #e6e6e6;
}
.ama-ribbon-tab {
    padding: 0.35rem 0.9rem;
    border: none;
    background: transparent;
    font-size: 0.8rem;
    color: #444;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: background 0.08s, border-color 0.08s;
    font-family: 'Segoe UI', sans-serif;
    will-change: background;
}
.ama-ribbon-tab:hover {
    background: rgba(0,0,0,0.04);
}
.ama-ribbon-tab-active {
    background: #f3f3f3;
    border-bottom-color: #2b579a;
    color: #1a1a1a;
    font-weight: 600;
}
.ama-ribbon-tab-file {
    color: #fff;
    font-weight: 600;
    border-radius: 2px 2px 0 0;
    margin-right: 0.3rem;
}
.ama-ribbon-tab-file:hover { opacity: 0.9; }
.ama-ribbon-tab-excel { background: #217346; }
.ama-ribbon-tab-word { background: #2b579a; }
.ama-ribbon-tab-access { background: #a4373a; }

.ama-ribbon-panel {
    display: flex;
    gap: 0;
    padding: 0.35rem 0.5rem;
    min-height: 5.5rem;
    align-items: flex-start;
}

/* Ribbon group */
.ama-ribbon-group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    border-right: 1px solid #d9d9d9;
    padding: 0 0.5rem;
}
.ama-ribbon-group:last-child { border-right: none; }
.ama-ribbon-group-commands {
    display: flex;
    gap: 0.15rem;
    flex-wrap: wrap;
    flex: 1;
    align-items: flex-start;
}
.ama-ribbon-group-label {
    text-align: center;
    font-size: 0.65rem;
    color: #777;
    padding: 0.15rem 0 0.1rem;
    white-space: nowrap;
    border-top: 1px solid #e5e5e5;
    margin-top: 0.15rem;
}

/* Ribbon button */
.ama-ribbon-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    padding: 0.25rem 0.4rem;
    border: 1px solid transparent;
    border-radius: 3px;
    background: transparent;
    cursor: pointer;
    font-size: 0.7rem;
    color: #333;
    white-space: nowrap;
    transition: background 0.08s, border-color 0.08s;
    font-family: 'Segoe UI', sans-serif;
    min-width: 2.2rem;
}
.ama-ribbon-btn:hover {
    background: rgba(0,0,0,0.06);
    border-color: rgba(0,0,0,0.1);
}
.ama-ribbon-btn-active {
    background: #c4d8ec;
    border-color: #a0b8d0;
}
.ama-ribbon-btn-icon {
    font-size: 1.1rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ama-ribbon-btn-icon svg {
    width: 18px;
    height: 18px;
    color: #444;
}
.ama-ribbon-btn-label {
    font-size: 0.6rem;
    line-height: 1.1;
}
/* Dropdown arrow indicator */
.ama-ribbon-btn-dropdown-arrow {
    font-size: 0.5rem;
    color: #888;
    line-height: 1;
    margin-top: -1px;
}

/* Large ribbon button — full ribbon height, icon above label */
.ama-ribbon-btn-lg {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-width: 3rem;
    padding: 0.4rem 0.5rem 0.2rem;
    height: 100%;
}
.ama-ribbon-btn-lg .ama-ribbon-btn-icon {
    font-size: 1.5rem;
}
.ama-ribbon-btn-lg .ama-ribbon-btn-icon svg {
    width: 28px;
    height: 28px;
}
.ama-ribbon-btn-lg .ama-ribbon-btn-label {
    font-size: 0.65rem;
    margin-top: 0.15rem;
}

/* Small ribbon button — horizontal layout, stacks 3 per column */
.ama-ribbon-btn-sm {
    flex-direction: row;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.4rem;
    min-width: auto;
    min-height: 1.3rem;
}
.ama-ribbon-btn-sm .ama-ribbon-btn-icon {
    font-size: 0.85rem;
}
.ama-ribbon-btn-sm .ama-ribbon-btn-icon svg {
    width: 15px;
    height: 15px;
}
.ama-ribbon-btn-sm .ama-ribbon-btn-label {
    font-size: 0.65rem;
}

/* Stacked small buttons container */
.ama-ribbon-btn-stack {
    display: flex;
    flex-direction: column;
    gap: 1px;
    justify-content: flex-start;
    align-self: stretch;
}

/* Ribbon dropdown selects */
.ama-ribbon-dropdown {
    border: 1px solid #c8c8c8;
    border-radius: 2px;
    padding: 0.2rem 0.3rem;
    font-size: 0.75rem;
    font-family: 'Segoe UI', sans-serif;
    background: #fff;
    color: #333;
    cursor: pointer;
    outline: none;
    height: 1.6rem;
    align-self: center;
}
.ama-ribbon-dropdown:hover {
    border-color: #2b579a;
}
.ama-ribbon-dropdown:focus {
    border-color: #2b579a;
    box-shadow: 0 0 0 1px rgba(43,87,154,0.2);
}
.ama-ribbon-dropdown-font {
    width: 120px;
}
.ama-ribbon-dropdown-size {
    width: 48px;
    text-align: center;
}
.ama-ribbon-dropdown-format {
    width: 100px;
}

/* CSS-based alignment icons — 3 horizontal lines */
.ama-align-icon {
    position: relative;
    width: 16px;
    height: 14px;
    font-size: 0 !important;
}
.ama-align-icon::before,
.ama-align-icon::after {
    content: '';
    position: absolute;
    height: 2px;
    background: #444;
    border-radius: 1px;
    left: 0;
}
.ama-align-icon::before { top: 1px; }
.ama-align-icon::after { bottom: 1px; }

/* Left: long-short-long flush left */
.ama-align-icon-align-left::before { width: 14px; left: 0; }
.ama-align-icon-align-left::after { width: 10px; left: 0; }
.ama-align-icon-align-left { background: linear-gradient(#444 0%, #444 100%) no-repeat left center / 8px 2px; }

/* Center: long-short-long centered */
.ama-align-icon-align-center::before { width: 14px; left: 1px; }
.ama-align-icon-align-center::after { width: 10px; left: 3px; }
.ama-align-icon-align-center { background: linear-gradient(#444 0%, #444 100%) no-repeat center center / 8px 2px; }

/* Right: long-short-long flush right */
.ama-align-icon-align-right::before { width: 14px; left: auto; right: 0; }
.ama-align-icon-align-right::after { width: 10px; left: auto; right: 0; }
.ama-align-icon-align-right { background: linear-gradient(#444 0%, #444 100%) no-repeat right center / 8px 2px; }

/* Justify: all lines full width */
.ama-align-icon-align-justify::before { width: 14px; left: 1px; }
.ama-align-icon-align-justify::after { width: 14px; left: 1px; }
.ama-align-icon-align-justify { background: linear-gradient(#444 0%, #444 100%) no-repeat left center / 14px 2px; }

/* Office body */
.ama-office-body {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.ama-office-workspace {
    flex: 1;
    overflow: auto;
    min-height: 400px;
}
.ama-office-workspace.ama-word-workspace {
    background: #a0a0a0;
}
.ama-office-side-panel {
    width: 200px;
    border-right: 1px solid #d1d1d1;
    background: #f8f8f6;
    overflow-y: auto;
    flex-shrink: 0;
}
.ama-office-instructions {
    width: 300px;
    border-left: 1px solid #d1d1d1;
    background: #fafaf8;
    overflow-y: auto;
    flex-shrink: 0;
    padding: var(--ama-space-md);
    font-size: var(--ama-text-sm);
}
.ama-instructions-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--ama-space-sm);
}
.ama-btn-icon {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 1rem;
    color: #888;
    padding: 0.15rem 0.3rem;
    border-radius: 3px;
}
.ama-btn-icon:hover { background: #e8e8e8; }

/* Status bar */
.ama-office-status-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.2rem 0.8rem;
    background: #217346;
    color: #fff;
    font-size: 0.7rem;
    min-height: 1.5rem;
}
/* App-specific status bar colors */
.ama-status-bar-excel { background: #217346; color: #fff; }
.ama-status-bar-word { background: #2b579a; color: #fff; }
.ama-status-bar-access { background: #f0f0f0; color: #444; border-top: 1px solid #d1d1d1; }
.ama-status-bar-left, .ama-status-bar-right {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}
.ama-status-btn {
    border: none;
    background: rgba(255,255,255,0.15);
    color: inherit;
    font-size: 0.65rem;
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
    cursor: pointer;
}
.ama-status-btn:hover { background: rgba(255,255,255,0.25); }
.ama-status-bar-access .ama-status-btn { background: rgba(0,0,0,0.06); }
.ama-status-bar-access .ama-status-btn:hover { background: rgba(0,0,0,0.1); }

/* Zoom slider */
.ama-zoom-slider {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: 0.5rem;
}
.ama-zoom-btn {
    border: none;
    background: transparent;
    color: inherit;
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0 0.15rem;
    line-height: 1;
    opacity: 0.8;
    border-radius: 2px;
}
.ama-zoom-btn:hover { opacity: 1; background: rgba(255,255,255,0.15); }
.ama-status-bar-access .ama-zoom-btn:hover { background: rgba(0,0,0,0.08); }
.ama-zoom-slider input[type="range"] {
    width: 80px;
    height: 3px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255,255,255,0.35);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}
.ama-status-bar-access .ama-zoom-slider input[type="range"] {
    background: rgba(0,0,0,0.15);
}
.ama-zoom-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.2);
    cursor: pointer;
}
.ama-status-bar-access .ama-zoom-slider input[type="range"]::-webkit-slider-thumb {
    background: #666;
    border-color: #999;
}
.ama-zoom-label {
    font-size: 0.65rem;
    min-width: 28px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    opacity: 0.9;
}

/* Formula bar (Excel) */
.ama-formula-bar {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #d1d1d1;
    background: #fff;
    font-size: 0.8rem;
}
.ama-name-box {
    width: 80px;
    padding: 0.25rem 0.4rem;
    border: none;
    border-right: 1px solid #d1d1d1;
    font-family: 'Segoe UI', sans-serif;
    font-size: 0.8rem;
    text-align: center;
    background: #fff;
    outline: none;
}
.ama-name-box:focus { background: #e8f0fe; }
.ama-fx-label {
    padding: 0 0.5rem;
    font-style: italic;
    color: #666;
    font-size: 0.75rem;
    border-right: 1px solid #d1d1d1;
}
.ama-formula-input {
    flex: 1;
    padding: 0.25rem 0.5rem;
    border: none;
    font-family: 'Segoe UI', sans-serif;
    font-size: 0.8rem;
    outline: none;
}
.ama-formula-input:focus { background: #fffde7; }

/* Formula bar editing mode */
.ama-formula-bar--editing { background: #fffde7; border-bottom-color: #217346; }
.ama-formula-bar--editing .ama-formula-input { background: #fffde7; font-weight: 600; }
.ama-fx-btn {
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    border: none; cursor: pointer;
    font-size: 0.75rem; font-weight: 700;
    border-right: 1px solid #d1d1d1;
}
.ama-fx-cancel { background: #fce4ec; color: #c62828; }
.ama-fx-cancel:hover { background: #ef9a9a; }
.ama-fx-confirm { background: #e8f5e9; color: #2e7d32; }
.ama-fx-confirm:hover { background: #a5d6a7; }

/* Reference highlight overlays */
.ama-ref-highlight { transition: opacity 0.15s ease; }

/* Function autocomplete dropdown */
.ama-fn-autocomplete {
    background: #fff;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    max-height: 280px;
    overflow-y: auto;
    min-width: 320px;
    font-size: 0.8rem;
    font-family: 'Segoe UI', sans-serif;
}
.ama-fn-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.6rem;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
}
.ama-fn-item:hover, .ama-fn-item--active {
    background: #e8f0fe;
}
.ama-fn-item strong {
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 0.8rem;
    color: #1a73e8;
    min-width: 80px;
}
.ama-fn-desc {
    color: #666;
    font-size: 0.72rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ama-fn-hint {
    padding: 0.4rem 0.6rem;
    background: #f8f9fa;
    border-top: 1px solid #e0e0e0;
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 0.75rem;
    color: #444;
}

/* Fill handle */
.ama-fill-handle {
    position: absolute;
    width: 8px; height: 8px;
    background: #217346;
    border: 1px solid #fff;
    cursor: crosshair;
    z-index: 20;
    pointer-events: auto;
}
.ama-fill-handle:hover { background: #1b5e20; transform: scale(1.3); }

/* Sheet tabs (Excel) */
.ama-sheet-tabs {
    display: flex;
    align-items: center;
    gap: 0;
    background: #e6e6e6;
    border-top: 1px solid #d1d1d1;
    padding: 0 0.5rem;
    font-size: 0.7rem;
}
.ama-sheet-tab {
    padding: 0.25rem 0.8rem;
    border: 1px solid #d1d1d1;
    border-bottom: none;
    background: #f3f3f3;
    cursor: pointer;
    font-size: 0.7rem;
    font-family: 'Segoe UI', sans-serif;
    color: #444;
    border-radius: 0 0 0 0;
    margin-right: -1px;
}
.ama-sheet-tab-active {
    background: #fff;
    font-weight: 600;
    color: #1a1a1a;
    border-bottom: 1px solid #fff;
    position: relative;
    z-index: 1;
}
.ama-sheet-tab-add {
    background: transparent;
    border: none;
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0.2rem 0.5rem;
    color: #666;
}
.ama-sheet-tab-add:hover { color: #217346; }

/* Word document page style */
.ama-word-page {
    max-width: 850px;
    margin: 1.5rem auto;
    background: #fff;
    box-shadow: 0 2px 16px rgba(0,0,0,0.25), 0 0 0 1px rgba(0,0,0,0.08);
    min-height: 500px;
    padding: 2rem 2.5rem;
    border-radius: 1px;
}
.ama-word-page .ck.ck-toolbar {
    display: none !important;
}
.ama-word-page .ck-editor__editable {
    border: none !important;
    box-shadow: none !important;
    min-height: 450px;
    padding: 0;
    font-size: 11pt;
    line-height: 1.5;
    font-family: 'Calibri', 'Segoe UI', sans-serif;
}

/* Access nav pane */
.ama-access-nav-pane {
    padding: 0.5rem 0;
}
.ama-nav-pane-heading {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.8rem;
    font-size: 0.7rem;
    font-weight: 700;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    font-family: 'Segoe UI', sans-serif;
}
.ama-nav-pane-heading:hover { background: rgba(0,0,0,0.04); }
.ama-nav-pane-chevron {
    display: inline-block;
    font-size: 0.6rem;
    transition: transform 0.15s ease;
    color: #888;
}
.ama-nav-pane-chevron-open {
    transform: rotate(90deg);
}
.ama-nav-pane-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.8rem 0.3rem 1.4rem;
    font-size: 0.8rem;
    color: #333;
    cursor: pointer;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    font-family: 'Segoe UI', sans-serif;
}
.ama-nav-pane-item:hover { background: #e0e0e0; }
.ama-nav-pane-item-active {
    background: #cce4f7;
    font-weight: 600;
}
.ama-nav-pane-icon {
    font-size: 0.9rem;
    display: flex;
    align-items: center;
}
.ama-nav-pane-icon svg {
    width: 14px;
    height: 14px;
    color: #666;
}

/* Instruction steps inside Office shell */
.ama-sim-steps { list-style: none; padding: 0; margin: 0; }
.ama-sim-step {
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--ama-border-light);
}
.ama-sim-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    background: var(--ama-brand);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    margin-right: 0.3rem;
}
.ama-sim-hint {
    font-size: 0.75rem;
    color: var(--ama-text-muted);
    margin-top: 0.15rem;
    padding-left: 1.6rem;
}

/* Validation inside instruction panel */
.ama-sim-validation {
    margin-top: var(--ama-space-md);
    border-top: 1px solid var(--ama-border);
    padding-top: var(--ama-space-sm);
}
.ama-sim-rule {
    display: flex;
    align-items: flex-start;
    gap: 0.3rem;
    padding: 0.25rem 0;
    font-size: 0.8rem;
}
.ama-sim-rule-pass { color: var(--ama-success); }
.ama-sim-rule-fail { color: var(--ama-danger); }
.ama-sim-rule-icon { font-weight: 700; font-size: 0.9rem; }

/* Handsontable Excel-like styling */
.ama-hot-excel th {
    background: #e8e8e8 !important;
    color: #333 !important;
    font-weight: 600;
    font-size: 0.75rem;
}
.ama-hot-excel thead th {
    background: linear-gradient(to bottom, #f4f4f4, #e0e0e0) !important;
    text-align: center;
    padding: 2px 4px;
    border-color: #c0c0c0 !important;
}
.ama-hot-excel tbody th {
    background: linear-gradient(to right, #f4f4f4, #e8e8e8) !important;
    text-align: center;
    padding: 2px 4px;
    min-width: 40px;
    border-color: #c0c0c0 !important;
}
.ama-hot-excel td {
    border-color: #d4d4d4 !important;
    font-size: 0.8rem;
    padding: 1px 4px;
}
.ama-hot-excel td.ama-hot-active-row,
.ama-hot-excel td.ama-hot-active-col {
    background: #e8f0fe !important;
}
.ama-hot-excel thead th.ama-hot-active-col {
    background: #d0dce8 !important;
    color: #1a1a1a !important;
}
.ama-hot-excel tbody th.ama-hot-active-row {
    background: #d0dce8 !important;
    color: #1a1a1a !important;
}

/* Green active cell border (Excel signature) */
.ama-hot-excel .wtBorder.current {
    background-color: #217346 !important;
}
.ama-hot-excel .wtBorder.area {
    background-color: #217346 !important;
}

/* Formula editing indicator — green outline on the cell being edited */
.ama-hot-formula-editing {
    outline: 2px solid #217346 !important;
    outline-offset: -2px;
    z-index: 5;
    position: relative;
    background: #f0faf4 !important;
}

/* Ribbon style tiles (Word Styles gallery) */
.ama-ribbon-btn.ama-style-tile {
    flex-direction: row;
    gap: 0.3rem;
    padding: 0.2rem 0.5rem;
    border: 1px solid #c8c8c8;
    border-radius: 3px;
    min-width: auto;
    white-space: nowrap;
}
.ama-style-tile .ama-ribbon-btn-icon {
    display: none;
}
.ama-style-tile .ama-ribbon-btn-label {
    font-size: 0.7rem;
}
.ama-style-tile[data-style="heading1"] .ama-ribbon-btn-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: #2b579a;
}
.ama-style-tile[data-style="heading2"] .ama-ribbon-btn-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #2b579a;
}
.ama-style-tile[data-style="heading3"] .ama-ribbon-btn-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #3a6fb5;
}
.ama-ribbon-btn.ama-style-tile:hover {
    border-color: #2b579a;
    background: #e8eef5;
}

/* Enhanced validation feedback with mistake analysis */
.ama-sim-score {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.3rem 0;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--ama-border);
}
.ama-sim-rule-detail {
    margin-left: 1.2rem;
    font-size: 0.75rem;
    padding: 0.15rem 0;
}
.ama-sim-rule-right {
    color: var(--ama-success);
}
.ama-sim-rule-wrong {
    color: var(--ama-danger);
}
.ama-sim-rule-fix {
    color: #5f6368;
    font-style: italic;
}
.ama-sim-rule-concept {
    color: #1a73e8;
    font-size: 0.72rem;
    line-height: 1.4;
}
.ama-sim-feedback-section {
    margin-left: 1rem;
    margin-top: 0.2rem;
    margin-bottom: 0.15rem;
}
.ama-sim-feedback-heading {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.1rem;
}

/* Status bar stats */
.ama-status-stats {
    display: flex;
    gap: 1rem;
    font-variant-numeric: tabular-nums;
    opacity: 0.9;
}

/* Clickable instruction steps with target highlighting */
.ama-sim-step-clickable {
    cursor: pointer;
    transition: background 0.15s;
}
.ama-sim-step-clickable:hover {
    background: rgba(0, 120, 212, 0.06);
    border-radius: 4px;
}
.ama-sim-step-target {
    display: inline-block;
    font-size: 0.65rem;
    background: #e8f0fe;
    color: #1a73e8;
    padding: 0 0.3rem;
    border-radius: 3px;
    margin-left: 0.3rem;
    font-weight: 600;
    vertical-align: middle;
}

/* ============================================================
   PROFILE PROGRESS PAGE
   ============================================================ */

.ama-profile-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--ama-space-md);
    margin-bottom: var(--ama-space-md);
}
.ama-profile-stat {
    display: flex;
    align-items: center;
    gap: var(--ama-space-sm);
    background: var(--ama-surface);
    border: 1px solid var(--ama-border-light);
    border-radius: var(--ama-radius);
    padding: var(--ama-space-md);
}
.ama-profile-stat-xp {
    border-color: var(--ama-brand);
    background: var(--ama-brand-subtle);
}
.ama-profile-stat-icon { font-size: 1.5rem; flex-shrink: 0; }
.ama-profile-stat-value { display: block; font-weight: 700; font-size: var(--ama-text-lg); color: var(--ama-text); }
.ama-profile-stat-label { display: block; font-size: var(--ama-text-xs); color: var(--ama-text-muted); }
.ama-profile-stat-label a { color: var(--ama-brand); text-decoration: none; }
.ama-profile-stat-label a:hover { text-decoration: underline; }

.ama-profile-level-bar {
    height: 10px;
    background: var(--ama-border-light);
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: var(--ama-space-lg);
}
.ama-profile-level-fill {
    height: 100%;
    background: var(--ama-brand);
    border-radius: 5px;
    transition: width 0.5s ease;
}

.ama-profile-subjects,
.ama-profile-weak-areas,
.ama-profile-activity {
    display: flex;
    flex-direction: column;
    gap: var(--ama-space-xs);
}

.ama-profile-subject-row,
.ama-profile-weak-row,
.ama-profile-activity-row {
    display: flex;
    align-items: center;
    gap: var(--ama-space-sm);
    padding: var(--ama-space-sm) var(--ama-space-md);
    background: var(--ama-surface);
    border: 1px solid var(--ama-border-light);
    border-radius: var(--ama-radius-sm);
    font-size: var(--ama-text-sm);
}
.ama-profile-subject-name {
    font-weight: 600;
    color: var(--ama-brand);
    text-decoration: none;
    min-width: 120px;
}
.ama-profile-subject-name:hover { text-decoration: underline; }
.ama-profile-subject-xp { margin-left: auto; font-weight: 700; color: var(--ama-brand); }

.ama-profile-weak-name { font-weight: 600; min-width: 120px; }
.ama-profile-weak-score { margin-left: auto; font-weight: 600; color: var(--ama-text-muted); }

.ama-profile-activity-type { font-weight: 500; min-width: 160px; }
.ama-profile-activity-xp { font-weight: 700; color: var(--ama-brand); margin-left: auto; }
.ama-profile-activity-time { font-size: var(--ama-text-xs); color: var(--ama-text-muted); min-width: 60px; text-align: right; }

/* Study Recommendations — see consolidated block in LEARNING DASHBOARD section below */

/* ════════════════════════════════════════════════════════════════
   Phase 6: Word Simulator Polish
   ════════════════════════════════════════════════════════════════ */

/* Word page layout */
.ama-word-page--landscape {
    max-width: 1100px !important;
    min-height: 380px !important;
}

/* Word header / footer areas */
.ama-word-header, .ama-word-footer {
    font-size: 0.75rem;
    color: #999;
    min-height: 1.6rem;
    cursor: text;
    padding: 0.3rem 0;
    border-bottom: 1px dashed #ddd;
    margin-bottom: 0.5rem;
    transition: background 0.15s;
}
.ama-word-footer {
    border-bottom: none;
    border-top: 1px dashed #ddd;
    margin-top: 0.5rem;
    margin-bottom: 0;
}
.ama-word-header:hover, .ama-word-footer:hover {
    background: #f5f5f0;
}
.ama-word-header-input, .ama-word-footer-input {
    width: 100%;
    border: none;
    background: #fffde7;
    font-size: 0.75rem;
    color: #555;
    outline: none;
    padding: 0.15rem 0.3rem;
    font-family: 'Calibri', 'Segoe UI', sans-serif;
}
.ama-word-footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ama-word-page-num {
    font-size: 0.7rem;
    color: #aaa;
}

/* Word ruler */
.ama-word-ruler {
    background: #f0f0ee;
    border-bottom: 1px solid #d1d1d1;
    padding: 0;
    height: 22px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    -webkit-user-select: none;
    user-select: none;
}
.ama-ruler-margin-left,
.ama-ruler-margin-right {
    width: 40px;
    height: 100%;
    background: #d8d8d5;
    flex-shrink: 0;
}
.ama-ruler-track {
    position: relative;
    display: flex;
    align-items: flex-end;
    flex: 1;
    height: 100%;
}
.ama-ruler-mark {
    width: 40px;
    flex-shrink: 0;
    position: relative;
    height: 8px;
    border-left: 1px solid #bbb;
}
.ama-ruler-mark--major {
    height: 12px;
    border-left: 1px solid #888;
}
.ama-ruler-label {
    position: absolute;
    top: -11px;
    left: -3px;
    font-size: 0.55rem;
    color: #888;
}
.ama-ruler-indent {
    position: absolute;
    cursor: pointer;
    z-index: 2;
    line-height: 1;
    -webkit-user-select: none;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ama-ruler-indent:hover svg polygon { fill: #1a73e8; }
.ama-ruler-indent-firstline {
    top: 0;
    transform: translateX(-6px);
}
.ama-ruler-indent-left {
    bottom: 0;
    transform: translateX(-6px);
}
.ama-ruler-indent-right {
    bottom: 0;
    transform: translateX(6px);
}

/* Find & Replace dialog */
.ama-find-replace-dialog {
    position: fixed;
    top: 120px;
    right: 340px;
    width: 380px;
    background: #fff;
    border: 1px solid #c0c0c0;
    border-radius: 4px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    z-index: 200;
    font-family: 'Segoe UI', sans-serif;
    font-size: 0.8rem;
}
.ama-find-replace-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0.6rem;
    background: #f3f3f3;
    border-bottom: 1px solid #d1d1d1;
    font-weight: 600;
    font-size: 0.8rem;
}
.ama-find-replace-body {
    padding: 0.6rem;
}
.ama-find-replace-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
}
.ama-find-replace-row label {
    width: 55px;
    font-size: 0.75rem;
    color: #555;
    flex-shrink: 0;
}
.ama-find-input {
    flex: 1;
    padding: 0.25rem 0.4rem;
    border: 1px solid #c0c0c0;
    border-radius: 3px;
    font-size: 0.8rem;
    outline: none;
}
.ama-find-input:focus { border-color: #2b579a; }
.ama-find-replace-status {
    font-size: 0.72rem;
    color: #666;
    padding-top: 0.2rem;
}
.ama-btn-sm {
    font-size: 0.7rem !important;
    padding: 0.2rem 0.4rem !important;
    white-space: nowrap;
}

/* Table formatting toggles in CKEditor */
.ama-table-bordered,
.ama-table-bordered td,
.ama-table-bordered th {
    border: 2px solid #333 !important;
}
.ama-table-shaded thead tr,
.ama-table-shaded tr:first-child {
    background: #d9e2f3 !important;
}
.ama-table-shaded tr:nth-child(even) {
    background: #f2f2f2 !important;
}

/* Mail merge fields & preview */
.ama-merge-field {
    background: #e8f0fe;
    color: #1a73e8;
    padding: 0.1rem 0.25rem;
    border-radius: 3px;
    font-weight: 600;
    font-size: 0.85em;
    white-space: nowrap;
}
.ama-merge-value {
    background: #fff3cd;
    color: #856404;
    padding: 0.1rem 0.25rem;
    border-radius: 3px;
    font-weight: 600;
    font-size: 0.85em;
    border-bottom: 2px solid #ffc107;
}

.ama-mailmerge-panel {
    position: fixed;
    bottom: 30px;
    right: 340px;
    width: 520px;
    max-height: 420px;
    background: #fff;
    border: 1px solid #c0c0c0;
    border-radius: 4px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    z-index: 200;
    font-family: 'Segoe UI', sans-serif;
    font-size: 0.8rem;
    display: flex;
    flex-direction: column;
}
.ama-mailmerge-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0.6rem;
    background: #2b579a;
    color: #fff;
    font-weight: 600;
    font-size: 0.8rem;
    border-radius: 4px 4px 0 0;
}
.ama-mailmerge-title { font-weight: 700; }
.ama-mailmerge-header .ama-btn { color: #fff; border-color: rgba(255,255,255,0.4); }
.ama-mailmerge-toolbar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.6rem;
    background: #f3f3f3;
    border-bottom: 1px solid #d1d1d1;
    flex-wrap: wrap;
}
.ama-mailmerge-field-insert {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
}
.ama-mailmerge-field-insert label { font-weight: 600; white-space: nowrap; }
.ama-mailmerge-field-insert select {
    padding: 0.15rem 0.3rem;
    border: 1px solid #c0c0c0;
    border-radius: 3px;
    font-size: 0.75rem;
}
.ama-mailmerge-nav {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    margin-left: auto;
}
.ama-mailmerge-nav-btn {
    background: #fff;
    border: 1px solid #c0c0c0;
    border-radius: 3px;
    padding: 0.15rem 0.35rem;
    cursor: pointer;
    font-size: 0.7rem;
    line-height: 1;
}
.ama-mailmerge-nav-btn:hover:not(:disabled) { background: #e8f0fe; border-color: #1a73e8; }
.ama-mailmerge-nav-btn:disabled { opacity: 0.4; cursor: default; }
.ama-mailmerge-record-label {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0 0.3rem;
    white-space: nowrap;
}
.ama-mailmerge-preview-doc {
    padding: 0.8rem;
    overflow-y: auto;
    max-height: 280px;
    line-height: 1.6;
    font-size: 0.82rem;
}

/* Access view tabs */
.ama-access-view-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #2b579a;
    background: #f3f3f3;
    padding: 0 0.3rem;
}
.ama-access-view-tab {
    padding: 0.3rem 0.7rem;
    font-size: 0.72rem;
    font-weight: 600;
    background: transparent;
    border: 1px solid transparent;
    border-bottom: none;
    cursor: pointer;
    color: #555;
    border-radius: 4px 4px 0 0;
    margin-bottom: -2px;
}
.ama-access-view-tab:hover { background: #e8f0fe; color: #2b579a; }
.ama-access-view-tab--active {
    background: #fff;
    color: #2b579a;
    border-color: #2b579a #2b579a transparent;
    border-bottom: 2px solid #fff;
}

/* ════════════════════════════════════════════════════════════════
   Phase 7: Access Simulator Polish
   ════════════════════════════════════════════════════════════════ */

/* Query Design View (QBE grid) */
.ama-qbe-grid {
    border: 1px solid #c0c0c0;
    border-radius: 3px;
    overflow: auto;
    font-size: 0.75rem;
    margin-top: 0.5rem;
}
.ama-qbe-table-panel {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem;
    background: #e8e8e8;
    border-bottom: 2px solid #c0c0c0;
    min-height: 120px;
    overflow-x: auto;
}
.ama-qbe-table-box {
    background: #fff;
    border: 1px solid #999;
    border-radius: 3px;
    min-width: 130px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.ama-qbe-table-title {
    background: #2b579a;
    color: #fff;
    padding: 0.2rem 0.4rem;
    font-weight: 600;
    font-size: 0.72rem;
    border-radius: 3px 3px 0 0;
}
.ama-qbe-table-fields {
    padding: 0.15rem 0;
    max-height: 100px;
    overflow-y: auto;
}
.ama-qbe-field {
    padding: 0.1rem 0.4rem;
    font-size: 0.72rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.ama-qbe-field:hover { background: #e8f0fe; }
.ama-qbe-field-pk { font-weight: 700; }
.ama-qbe-field-pk::before { content: '🔑'; font-size: 0.6rem; }

/* QBE criteria grid (lower half) */
.ama-qbe-criteria {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.72rem;
}
.ama-qbe-criteria th {
    background: #f0f0f0;
    border: 1px solid #c0c0c0;
    padding: 0.2rem 0.3rem;
    font-weight: 600;
    text-align: left;
    position: sticky;
    top: 0;
}
.ama-qbe-criteria td {
    border: 1px solid #c0c0c0;
    padding: 0.15rem 0.3rem;
    min-width: 100px;
}
.ama-qbe-criteria input, .ama-qbe-criteria select {
    width: 100%;
    border: none;
    background: transparent;
    font-size: 0.72rem;
    font-family: 'Consolas', monospace;
    outline: none;
    padding: 0.1rem;
}

/* Access Form View */
.ama-access-form {
    background: #f5f5f0;
    border: 1px solid #c0c0c0;
    border-radius: 4px;
    max-width: 520px;
    margin: 0.5rem auto;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.ama-access-form-header {
    background: linear-gradient(180deg, #a4373a 0%, #8b2e31 100%);
    padding: 0.5rem 0.8rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.ama-access-form-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
}
.ama-access-form-header-bar {
    display: flex;
    align-items: center;
}
.ama-access-form-search {
    padding: 0.2rem 0.5rem;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 3px;
    font-size: 0.72rem;
    background: rgba(255,255,255,0.15);
    color: #fff;
    outline: none;
    width: 160px;
}
.ama-access-form-search::placeholder { color: rgba(255,255,255,0.6); }
.ama-access-form-search:focus { background: rgba(255,255,255,0.25); border-color: rgba(255,255,255,0.5); }
.ama-access-form-body {
    padding: 0.8rem 1rem;
}
.ama-access-form-detail {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.ama-access-form-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.ama-access-form-label {
    width: 130px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #333;
    text-align: right;
    flex-shrink: 0;
}
.ama-access-form-input {
    flex: 1;
    padding: 0.25rem 0.4rem;
    border: 1px solid #c0c0c0;
    border-radius: 2px;
    font-size: 0.78rem;
    background: #fff;
    transition: border-color 0.15s;
}
.ama-access-form-input:focus { border-color: #2b579a; outline: none; box-shadow: 0 0 0 2px rgba(43,87,154,0.15); }
.ama-access-form-input-id {
    background: #f0f0f0;
    color: #888;
    font-style: italic;
}
.ama-access-form-empty {
    color: #888;
    font-size: 0.8rem;
    text-align: center;
    padding: 1.5rem 1rem;
}
.ama-access-form-footer {
    background: #e8e8e4;
    border-top: 1px solid #c0c0c0;
    padding: 0.3rem 0.8rem;
}
.ama-access-form-nav {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.ama-access-form-nav-btn {
    border: 1px solid #c0c0c0;
    background: #f3f3f3;
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
    cursor: pointer;
    border-radius: 2px;
    transition: background 0.15s;
}
.ama-access-form-nav-btn:hover:not(:disabled) { background: #dce6f0; }
.ama-access-form-nav-btn:disabled { opacity: 0.4; cursor: default; }
.ama-access-form-nav-new {
    margin-left: auto;
    color: #2b579a;
    font-weight: 600;
}
.ama-access-form-nav-separator {
    width: 1px;
    height: 14px;
    background: #c0c0c0;
    margin: 0 0.2rem;
}
.ama-access-form-record {
    font-size: 0.7rem;
    color: #666;
    font-variant-numeric: tabular-nums;
}

/* Access Report Preview */
.ama-access-report {
    background: #fff;
    border: 1px solid #c0c0c0;
    border-radius: 3px;
    padding: 1.2rem;
    max-width: 700px;
    margin: 0.5rem auto;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.ama-access-report-title {
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    color: #2b579a;
    margin-bottom: 0.4rem;
}
.ama-access-report-date {
    font-size: 0.7rem;
    text-align: center;
    color: #888;
    margin-bottom: 0.8rem;
}
.ama-access-report table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}
.ama-access-report th {
    background: #2b579a;
    color: #fff;
    padding: 0.3rem 0.5rem;
    text-align: left;
    font-weight: 600;
}
.ama-access-report td {
    padding: 0.25rem 0.5rem;
    border-bottom: 1px solid #e0e0e0;
}
.ama-access-report tr:nth-child(even) td { background: #f8f8f8; }
.ama-access-report-header {
    text-align: center;
    margin-bottom: 0.8rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #2b579a;
}
.ama-access-report-logo {
    font-size: 1.8rem;
    margin-bottom: 0.2rem;
}
.ama-access-report-footer {
    display: flex;
    justify-content: space-between;
    font-size: 0.68rem;
    color: #999;
    margin-top: 0.6rem;
    padding-top: 0.3rem;
    border-top: 1px solid #ddd;
}
.ama-access-report-empty {
    color: #888;
    font-size: 0.8rem;
    text-align: center;
    padding: 1.5rem 1rem;
}
.ama-access-report-group {
    margin-bottom: 0.8rem;
}
.ama-access-report-group-header {
    background: #e8eef5;
    padding: 0.3rem 0.5rem;
    font-weight: 700;
    font-size: 0.82rem;
    color: #2b579a;
    border-left: 3px solid #2b579a;
    margin-bottom: 0.2rem;
}
.ama-access-report-group-summary {
    font-size: 0.7rem;
    color: #666;
    text-align: right;
    padding: 0.15rem 0.5rem;
    font-style: italic;
    border-bottom: 1px solid #e0e0e0;
}
.ama-access-report-controls {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.6rem;
    padding-top: 0.4rem;
    border-top: 1px dashed #ccc;
    font-size: 0.72rem;
}
.ama-access-report-controls label {
    font-weight: 600;
    color: #555;
}
.ama-access-report-controls select {
    padding: 0.15rem 0.3rem;
    border: 1px solid #c0c0c0;
    border-radius: 3px;
    font-size: 0.72rem;
}

/* Access Table Design View */
.ama-table-design {
    border: 1px solid #c0c0c0;
    border-radius: 3px;
    overflow: auto;
    font-size: 0.78rem;
    margin: 0.5rem;
}
.ama-table-design table {
    width: 100%;
    border-collapse: collapse;
}
.ama-table-design th {
    background: #f0f0f0;
    border: 1px solid #c0c0c0;
    padding: 0.3rem 0.5rem;
    font-weight: 600;
    text-align: left;
    font-size: 0.75rem;
}
.ama-table-design td {
    border: 1px solid #c0c0c0;
    padding: 0.25rem 0.5rem;
}
.ama-table-design-pk {
    color: #b8860b;
    font-weight: 700;
}
.ama-table-design-type {
    font-family: 'Consolas', monospace;
    font-size: 0.72rem;
    color: #555;
}

/* Access view tabs (Design/Datasheet/SQL/Form/Report) */
.ama-access-view-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #2b579a;
    margin-bottom: 0.5rem;
    padding: 0 0.5rem;
}
.ama-access-view-tab {
    padding: 0.3rem 0.8rem;
    font-size: 0.72rem;
    font-family: 'Segoe UI', sans-serif;
    border: 1px solid transparent;
    border-bottom: none;
    background: transparent;
    border-radius: 3px 3px 0 0;
}
.ama-access-view-tab:hover { background: #e8eef5; }
.ama-access-view-tab--active {
    background: #fff;
    border-color: #c0c0c0;
    color: #2b579a;
    margin-bottom: -2px;
    border-bottom: 2px solid #fff;
}

/* ============================================================
   LANDING PAGE, NAV BUTTONS, PAST PAPERS
   ============================================================ */
.ama-landing-hero { display: flex; align-items: center; justify-content: space-between; gap: var(--ama-space-2xl); padding: var(--ama-space-xl) 0; }
.ama-landing-hero-text { flex: 1 1 auto; max-width: 640px; }
.ama-landing-hero > .am-mascot-lg { flex: 0 0 auto; }
.am-mascot-lg { max-width: 100%; height: auto; }
.ama-home-hero { display: flex; align-items: center; justify-content: center; gap: var(--ama-space-2xl); padding: var(--ama-space-3xl) 0; }
.ama-landing-hero-text h1 { font-size: var(--ama-text-3xl); margin-bottom: var(--ama-space-sm); }
.ama-landing-hero-text p { color: var(--ama-text-secondary); font-size: var(--ama-text-lg); margin-bottom: var(--ama-space-xl); }
.ama-landing-hero-actions { display: flex; gap: var(--ama-space-md); align-items: center; flex-wrap: wrap; }
.ama-landing-section { margin-bottom: var(--ama-space-2xl); }
.ama-landing-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ama-space-lg); }
.ama-landing-feature-card { text-align: center; padding: var(--ama-space-lg); }
.ama-landing-feature-card h3 { margin: var(--ama-space-sm) 0 var(--ama-space-xs) 0; }
.ama-landing-feature-card p { color: var(--ama-text-secondary); font-size: var(--ama-text-sm); margin: 0; }
.ama-landing-feature-icon { font-size: 2rem; }
.ama-landing-cta-section {
    text-align: center;
    padding: var(--ama-space-2xl) var(--ama-space-lg);
    background: var(--ama-brand-light);
    border-radius: var(--ama-radius-lg);
    margin-bottom: var(--ama-space-2xl);
}
.ama-landing-cta-section h2 { margin-bottom: var(--ama-space-xs); }
.ama-landing-cta-section p { color: var(--ama-text-secondary); margin-bottom: var(--ama-space-lg); }
.ama-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ama-space-lg); }
.ama-link { color: var(--ama-brand); font-weight: 600; text-decoration: none; }
.ama-link:hover { text-decoration: underline; }
.ama-btn { display: inline-block; padding: 10px 24px; border-radius: var(--ama-radius-sm); font-weight: 600; text-decoration: none; transition: all 0.15s; cursor: pointer; }
.ama-btn-outline { border: 1.5px solid var(--ama-brand); color: var(--ama-brand); background: transparent; }
.ama-btn-outline:hover { background: var(--ama-brand-light); }
.ama-btn-primary { background: var(--ama-brand); color: #fff; border: 1.5px solid var(--ama-brand); }
.ama-btn-primary:hover { opacity: 0.9; }
.ama-nav-btn { padding: 6px 16px !important; border-radius: var(--ama-radius-sm); font-weight: 600; font-size: var(--ama-text-sm) !important; transition: all 0.15s; }
.ama-nav-btn--outline { border: 1.5px solid var(--ama-brand); color: var(--ama-brand) !important; background: transparent; }
.ama-nav-btn--outline:hover { background: var(--ama-brand-light); }
.ama-nav-btn--primary { background: var(--ama-brand); color: #fff !important; border: 1.5px solid var(--ama-brand); }
.ama-nav-btn--primary:hover { opacity: 0.9; }
.ama-nav-link--muted { color: var(--ama-text-muted) !important; font-size: var(--ama-text-sm); }
.ama-sp-login-banner {
    display: flex; align-items: center; gap: var(--ama-space-md);
    padding: var(--ama-space-md) var(--ama-space-lg);
    background: var(--ama-brand-light); border-radius: var(--ama-radius-md);
    border-left: 4px solid var(--ama-brand); margin-bottom: var(--ama-space-lg);
}
.ama-sp-login-banner span { font-size: 1.5rem; }
.ama-sp-login-banner p { flex: 1; margin: 0; font-size: var(--ama-text-sm); color: var(--ama-text-secondary); }
.ama-past-papers-coming { text-align: center; padding: var(--ama-space-xl) 0; }
.ama-past-papers-preview { max-width: 640px; margin: 0 auto; text-align: left; }
.ama-badge-muted {
    display: inline-block; padding: 4px 12px; border-radius: var(--ama-radius-sm);
    font-size: var(--ama-text-xs); background: var(--ama-surface); border: 1px solid var(--ama-border);
    color: var(--ama-text-muted);
}
@media (max-width: 768px) {
    .ama-landing-hero { flex-direction: column-reverse; text-align: center; padding: var(--ama-space-xl) 0; }
    .ama-home-hero { flex-direction: column; gap: var(--ama-space-lg); padding: var(--ama-space-xl) 0; }
    .am-mascot-lg { max-width: 200px; }
    .ama-landing-feature-grid { grid-template-columns: 1fr; }
    .ama-grid-3 { grid-template-columns: 1fr; }
    .ama-landing-hero-actions { justify-content: center; }
    .ama-sp-login-banner { flex-direction: column; text-align: center; }
}

/* ============================================================
   UNIT CARDS & PROGRESS
   ============================================================ */

.ama-unit-card {
    background: var(--ama-surface);
    border: 1px solid var(--ama-border);
    border-radius: var(--ama-radius-lg, 12px);
    padding: var(--ama-space-lg);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.ama-unit-card:hover {
    border-color: var(--ama-brand-light);
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.ama-unit-card-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--ama-space-xs);
}
.ama-unit-card-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}
.ama-unit-card-meta {
    font-size: var(--ama-text-xs);
    color: var(--ama-text-muted);
    white-space: nowrap;
}
.ama-unit-card-desc {
    color: var(--ama-text-secondary);
    font-size: var(--ama-text-sm);
    margin: 0 0 var(--ama-space-md) 0;
    line-height: 1.4;
}

/* Topics inside unit card */
.ama-unit-topics {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ama-space-xs) var(--ama-space-md);
    margin-top: var(--ama-space-md);
    padding-top: var(--ama-space-md);
    border-top: 1px solid var(--ama-border-light);
}
.ama-unit-topic-link {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--ama-text-sm);
    color: var(--ama-text-secondary);
    text-decoration: none;
    padding: 2px 0;
}
.ama-unit-topic-link:hover {
    color: var(--ama-brand);
}
.ama-unit-topic-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Progress bar */
.ama-progress-bar {
    height: 6px;
    background: var(--ama-surface-alt);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: var(--ama-space-xs);
}
.ama-progress-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
    min-width: 0;
}
.ama-progress-label {
    font-size: var(--ama-text-xs);
    color: var(--ama-text-muted);
}

/* ============================================================
   UNIT DETAIL PAGE
   ============================================================ */

.ama-unit-stats {
    display: flex;
    gap: var(--ama-space-sm);
    font-size: var(--ama-text-sm);
    color: var(--ama-text-muted);
    margin-bottom: var(--ama-space-2xl);
}

.ama-unit-topic-section {
    margin-bottom: var(--ama-space-2xl);
}
.ama-unit-topic-heading {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: var(--ama-space-xs);
    padding-bottom: var(--ama-space-xs);
    border-bottom: 2px solid var(--ama-border-light);
}

/* Lesson cards inside unit */
.ama-lesson-list {
    display: flex;
    flex-direction: column;
    gap: var(--ama-space-sm);
}
.ama-lesson-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--ama-surface);
    border: 1px solid var(--ama-border-light);
    border-radius: 8px;
    padding: var(--ama-space-md);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ama-lesson-card:hover {
    border-color: var(--ama-brand-light);
    box-shadow: 0 1px 6px rgba(0,0,0,0.04);
}
.ama-lesson-card-content {
    flex: 1;
    min-width: 0;
}
.ama-lesson-card-title {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0 0 var(--ama-space-xs) 0;
}
.ama-lesson-card-summary {
    font-size: var(--ama-text-sm);
    color: var(--ama-text-secondary);
    margin: 0 0 var(--ama-space-xs) 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ama-lesson-card-meta {
    display: flex;
    gap: var(--ama-space-sm);
    align-items: center;
    font-size: var(--ama-text-xs);
    color: var(--ama-text-muted);
}

/* ============================================================
   LESSON PAGE — sidebar + content layout
   ============================================================ */
.ama-lesson-shell { display: grid; grid-template-columns: 280px 1fr; min-height: calc(100vh - 80px); gap: 0; }
.ama-lesson-sidebar { position: sticky; top: 80px; height: calc(100vh - 80px); overflow: hidden; background: var(--ama-surface); border-right: 1px solid var(--ama-border); display: flex; flex-direction: column; z-index: 10; }
.ama-lsb-header { display: flex; align-items: center; justify-content: space-between; padding: var(--ama-space-md); border-bottom: 1px solid var(--ama-border); flex-shrink: 0; }
.ama-lsb-unit-link { font-weight: 700; font-size: var(--ama-text-sm); color: var(--ama-brand); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ama-lsb-unit-link:hover { text-decoration: none; opacity: 0.85; }
.ama-lsb-close { display: none; background: none; border: none; font-size: 18px; cursor: pointer; color: var(--ama-text-secondary); padding: 4px; }
.ama-lsb-nav { flex: 1; overflow-y: auto; padding: var(--ama-space-xs) 0; }
.ama-lsb-item { border-bottom: 1px solid var(--ama-border-light); }
.ama-lsb-item--active { background: var(--ama-brand-light); }
.ama-lsb-lesson-link { display: block; padding: var(--ama-space-sm) var(--ama-space-md); font-size: var(--ama-text-sm); font-weight: 600; color: var(--ama-text); text-decoration: none; transition: background 0.15s; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ama-lsb-lesson-link:hover { background: var(--ama-surface-alt); text-decoration: none; color: var(--ama-text); }
.ama-lsb-item--active .ama-lsb-lesson-link { color: var(--ama-brand); }
.ama-lsb-sections { padding: 0 0 var(--ama-space-sm) 0; }
.ama-lsb-section-link { display: block; padding: 4px var(--ama-space-md) 4px calc(var(--ama-space-md) + 12px); font-size: var(--ama-text-xs); color: var(--ama-text-secondary); text-decoration: none; transition: color 0.1s; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ama-lsb-section-link:hover { color: var(--ama-brand); text-decoration: none; }
.ama-lsb-footer { padding: var(--ama-space-sm) var(--ama-space-md); border-top: 1px solid var(--ama-border); }
.ama-lsb-footer-link { font-size: var(--ama-text-sm); font-weight: 600; color: var(--ama-text-secondary); text-decoration: none; }
.ama-lsb-footer-link:hover { color: var(--ama-text); text-decoration: none; }
.ama-lesson-content { padding: var(--ama-space-lg) var(--ama-space-xl); overflow-x: hidden; max-width: 960px; }
.ama-lsb-toggle { display: none; background: none; border: 1px solid var(--ama-border); border-radius: var(--ama-radius-sm); padding: 6px 10px; cursor: pointer; font-size: 20px; color: var(--ama-text-secondary); margin-bottom: var(--ama-space-md); }
.ama-lesson-print-btn { position: fixed; top: 90px; right: 24px; z-index: 50; display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; background: var(--ama-brand, #2f6b53); color: #fff; border: none; border-radius: var(--ama-radius-md, 8px); font-size: 0.85rem; font-weight: 600; cursor: pointer; box-shadow: var(--ama-shadow-md); transition: background 0.2s, transform 0.15s; }
.ama-lesson-print-btn:hover { background: #245845; transform: translateY(-1px); }
.ama-lsb-backdrop { display: none; }
.ama-lesson-title-row { display: flex; align-items: center; gap: var(--ama-space-md); margin-bottom: var(--ama-space-sm); }
.ama-lesson-title { margin: 0; font-size: 1.5rem; font-weight: 700; }
.ama-lesson-caps { font-size: var(--ama-text-sm); color: var(--ama-text-muted); margin-bottom: var(--ama-space-lg); }
.ama-lesson-summary { color: var(--ama-text-secondary); margin-bottom: var(--ama-space-xl); }

/* ── Interactive Punnett-square widget (Tier 2 Gen Z) ── */
.ama-punnett {
    background: linear-gradient(135deg, #FAF5FF 0%, #E9D5FF 100%);
    border: 1px solid #C4B5FD;
    border-radius: 16px;
    padding: 20px;
    margin: 0 0 var(--ama-space-xl) 0;
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.08);
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}
.ama-punnett-head {
    display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
}
.ama-punnett-pill {
    background: linear-gradient(90deg, #7C3AED, #A78BFA);
    color: #fff; font-size: 10px; font-weight: 800; letter-spacing: 1.5px;
    padding: 4px 10px; border-radius: 999px;
}
.ama-punnett-title { font-size: 15px; font-weight: 700; color: #0F172A; flex: 1; }
.ama-punnett-reset {
    background: transparent; border: 1px solid #C4B5FD; border-radius: 999px;
    width: 28px; height: 28px; cursor: pointer; font-size: 14px; color: #7C3AED;
    transition: all 0.2s;
}
.ama-punnett-reset:hover { background: #F3E8FF; transform: rotate(-90deg); }

.ama-punnett-parents {
    display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px;
    align-items: center; margin-bottom: 16px;
}
.ama-punnett-parent {
    background: #fff; border: 1px solid #E2E8F0; border-radius: 10px;
    padding: 12px; text-align: center;
}
.ama-punnett-parent-label {
    font-size: 11px; font-weight: 700; letter-spacing: 0.6px;
    color: #64748B; text-transform: uppercase; margin-bottom: 8px;
}
.ama-punnett-allele-row { display: flex; gap: 8px; justify-content: center; margin-bottom: 8px; }
.ama-punnett-allele-select {
    font-size: 14px; font-weight: 700; padding: 6px 8px;
    border: 1px solid #C4B5FD; border-radius: 6px; background: #FAF5FF;
    cursor: pointer; min-width: 50px; text-align: center;
}
.ama-punnett-genotype { font-size: 18px; font-weight: 800; color: #7C3AED; }
.ama-punnett-cross { font-size: 24px; color: #94A3B8; font-weight: 800; }

.ama-punnett-grid-wrap { display: flex; justify-content: center; margin-bottom: 16px; }
.ama-punnett-grid {
    border-collapse: separate; border-spacing: 4px; background: transparent;
}
.ama-punnett-th {
    background: #1E293B; color: #fff; padding: 12px 16px; border-radius: 8px;
    font-weight: 800; font-size: 16px; min-width: 60px;
}
.ama-punnett-cell {
    background: #fff; border: 2px solid transparent; border-radius: 8px;
    padding: 16px 20px; font-size: 18px; font-weight: 800;
    transition: all 0.25s;
}
.ama-punnett-cell--hom-dom { background: linear-gradient(135deg, #34D399, #059669); color: #fff; border-color: #059669; }
.ama-punnett-cell--het { background: linear-gradient(135deg, #FBBF24, #D97706); color: #fff; border-color: #D97706; }
.ama-punnett-cell--hom-rec { background: linear-gradient(135deg, #94A3B8, #475569); color: #fff; border-color: #475569; }
.ama-punnett-cell--mixed { background: linear-gradient(135deg, #38BDF8, #0284C7); color: #fff; border-color: #0284C7; }

.ama-punnett-ratios {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.ama-punnett-ratio-block {
    background: #0F172A; color: #fff; padding: 12px 16px; border-radius: 10px;
}
.ama-punnett-ratio-label {
    font-size: 10px; font-weight: 800; letter-spacing: 1.2px;
    color: #FCD34D; text-transform: uppercase; margin-bottom: 4px;
}
.ama-punnett-ratio-value { font-size: 13px; font-weight: 700; color: #fff; }

@media (max-width: 600px) {
    .ama-punnett-parents { grid-template-columns: 1fr; }
    .ama-punnett-cross { transform: rotate(90deg); }
    .ama-punnett-ratios { grid-template-columns: 1fr; }
}

/* ── Interactive Graph Plotter (Tier 2) ── */
.ama-plotter {
    background: linear-gradient(135deg, #F8FAFC 0%, #E2E8F0 100%);
    border: 1px solid #CBD5E1; border-radius: 16px;
    padding: 20px; margin: 0 0 var(--ama-space-xl) 0;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}
.ama-plotter-head {
    display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
}
.ama-plotter-pill {
    background: linear-gradient(90deg, #7C3AED, #FB7185);
    color: #fff; font-size: 10px; font-weight: 800; letter-spacing: 1.5px;
    padding: 4px 10px; border-radius: 999px;
}
.ama-plotter-title { font-size: 15px; font-weight: 700; color: #0F172A; flex: 1; }
.ama-plotter-reset {
    background: transparent; border: 1px solid #CBD5E1; border-radius: 999px;
    width: 28px; height: 28px; cursor: pointer; font-size: 14px; color: #64748B;
    transition: all 0.2s;
}
.ama-plotter-reset:hover { background: #F1F5F9; transform: rotate(-90deg); }
.ama-plotter-formula {
    text-align: center; font-family: 'Cambria Math', 'Times New Roman', serif;
    font-size: 18px; font-weight: 700; color: #0F172A;
    background: #fff; padding: 10px; border-radius: 10px; margin-bottom: 14px;
}
.ama-plotter-svg {
    width: 100%; height: auto; max-height: 280px;
    background: #fff; border-radius: 10px; padding: 8px;
    box-shadow: inset 0 0 0 1px #E2E8F0;
}
.ama-plotter-sliders {
    display: flex; flex-direction: column; gap: 8px; margin-top: 14px;
}
.ama-plotter-slider-row {
    display: grid; grid-template-columns: 110px 1fr 50px; gap: 12px;
    align-items: center; font-size: 12px;
}
.ama-plotter-slider-label { font-weight: 700; color: #0F172A; }
.ama-plotter-slider-value { font-weight: 700; color: #7C3AED; text-align: right; font-family: 'Cambria Math', serif; }
.ama-plotter-slider {
    -webkit-appearance: none; appearance: none; width: 100%; height: 6px;
    background: linear-gradient(90deg, #C4B5FD 0%, #FBCFE8 100%);
    border-radius: 3px; outline: none; cursor: pointer;
}
.ama-plotter-slider::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 18px; height: 18px; border-radius: 50%;
    background: #7C3AED; cursor: pointer; border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(124,58,237,0.3);
}
.ama-plotter-slider::-moz-range-thumb {
    width: 18px; height: 18px; border-radius: 50%;
    background: #7C3AED; cursor: pointer; border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(124,58,237,0.3);
}
.ama-plotter-features {
    margin-top: 12px; padding: 10px 14px;
    background: #0F172A; color: #FCD34D; font-size: 12px; font-weight: 600;
    border-radius: 10px; text-align: center;
}

/* ── Interactive energy-profile diagram (Phys Sci) ── */
.ama-energy {
    background: linear-gradient(135deg, #fdf4ff 0%, #fce7f3 100%);
    border: 1px solid #F9A8D4;
    border-radius: 16px;
    padding: 18px;
    margin: 16px 0;
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.08);
}
.ama-energy-head {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-bottom: 12px;
}
.ama-energy-pill {
    display: inline-block; padding: 3px 10px;
    background: #EC4899; color: #fff; font-size: 10px; font-weight: 800;
    letter-spacing: 1.2px; border-radius: 999px;
}
.ama-energy-title { font-size: 16px; font-weight: 700; color: #831843; flex: 1; }
.ama-energy-reset {
    width: 30px; height: 30px; border-radius: 50%;
    background: rgba(255,255,255,0.7); border: 1px solid #F9A8D4;
    cursor: pointer; font-size: 14px; color: #831843;
    display: flex; align-items: center; justify-content: center;
}
.ama-energy-reset:hover { background: #fff; }
.ama-energy-summary {
    display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px;
    background: rgba(255,255,255,0.6); padding: 8px 12px; border-radius: 10px;
}
.ama-energy-tag {
    padding: 3px 10px; border-radius: 999px;
    font-size: 11px; font-weight: 800; letter-spacing: 0.6px;
}
.ama-energy-tag--exothermic { background: #FB7185; color: #fff; }
.ama-energy-tag--endothermic { background: #7C3AED; color: #fff; }
.ama-energy-tag--thermoneutral { background: #94A3B8; color: #fff; }
.ama-energy-formula {
    font-family: 'Cambria Math', Georgia, serif;
    font-size: 13px; color: #1E293B; font-weight: 600;
}
.ama-energy-formula--cat { color: #047857; }
.ama-energy-svg {
    width: 100%; max-width: 480px; height: auto; display: block; margin: 0 auto;
    background: #fff; border-radius: 12px; padding: 8px;
}
.ama-energy-controls {
    display: flex; flex-direction: column; gap: 8px; margin-top: 12px;
}
.ama-energy-control {
    display: grid; grid-template-columns: 110px 1fr 50px; gap: 10px;
    align-items: center; font-size: 12px; color: #831843; font-weight: 600;
}
.ama-energy-control input[type="range"] {
    width: 100%; -webkit-appearance: none; appearance: none;
    height: 5px; background: linear-gradient(to right, #EC4899, #7C3AED);
    border-radius: 999px;
}
.ama-energy-control input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 18px; height: 18px; border-radius: 50%;
    background: #EC4899; cursor: pointer; border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(236, 72, 153, 0.3);
}
.ama-energy-control-value {
    text-align: right; font-family: 'Cambria Math', Georgia, serif;
    font-weight: 700; color: #1E293B;
}
.ama-energy-toggle {
    display: flex; align-items: center; gap: 8px; font-size: 12px;
    color: #831843; font-weight: 600; cursor: pointer;
    padding: 6px 10px; background: rgba(255,255,255,0.6); border-radius: 8px;
}
.ama-energy-explainer {
    margin-top: 10px; padding: 10px 14px;
    background: #831843; color: #FBCFE8;
    font-size: 12px; border-radius: 10px; text-align: center;
}
.ama-energy-explainer strong { color: #FCD34D; }

/* ── Interactive history timeline scrubber ── */
.ama-timeline {
    background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%);
    border: 1px solid #7DD3FC;
    border-radius: 16px;
    padding: 18px;
    margin: 16px 0;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.08);
}
.ama-timeline-head {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-bottom: 14px;
}
.ama-timeline-pill {
    display: inline-block; padding: 3px 10px;
    background: #0284C7; color: #fff; font-size: 10px; font-weight: 800;
    letter-spacing: 1.2px; border-radius: 999px;
}
.ama-timeline-title { font-size: 16px; font-weight: 700; color: #0C4A6E; flex: 1; }
.ama-timeline-reset {
    width: 30px; height: 30px; border-radius: 50%;
    background: rgba(255,255,255,0.7); border: 1px solid #7DD3FC;
    cursor: pointer; font-size: 14px; color: #0C4A6E;
    display: flex; align-items: center; justify-content: center;
}
.ama-timeline-reset:hover { background: #fff; }
.ama-timeline-empty {
    text-align: center; color: #475569; padding: 24px; font-style: italic;
}
.ama-timeline-track-wrap { padding: 8px 4px 0; }
.ama-timeline-years {
    display: flex; justify-content: space-between;
    font-size: 11px; color: #0369A1; font-weight: 700; margin-bottom: 6px;
}
.ama-timeline-track {
    position: relative; height: 36px;
    background: linear-gradient(to right, rgba(2,132,199,0.15), rgba(124,58,237,0.15));
    border-radius: 999px;
    margin-bottom: 8px;
}
.ama-timeline-dot {
    position: absolute; top: 50%; transform: translate(-50%, -50%);
    width: 14px; height: 14px; border-radius: 50%;
    background: #fff; border: 2px solid #0284C7;
    cursor: pointer; padding: 0;
    transition: all 0.2s ease;
}
.ama-timeline-dot:hover { background: #BAE6FD; transform: translate(-50%, -50%) scale(1.2); }
.ama-timeline-dot--active {
    background: #0284C7; border-color: #0C4A6E;
    box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.25);
    transform: translate(-50%, -50%) scale(1.3);
}
.ama-timeline-dot-year {
    position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
    font-size: 10px; color: #0C4A6E; font-weight: 700; white-space: nowrap;
}
.ama-timeline-slider {
    width: 100%; -webkit-appearance: none; appearance: none;
    height: 4px; background: rgba(0,0,0,0.05); border-radius: 999px;
    margin-top: 24px;
}
.ama-timeline-slider::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 16px; height: 16px; border-radius: 50%;
    background: #0284C7; cursor: pointer; border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(2,132,199,0.3);
}
.ama-timeline-card {
    margin-top: 16px; display: grid; grid-template-columns: 80px 1fr; gap: 12px;
    background: #fff; padding: 12px 14px; border-radius: 12px;
    border-left: 4px solid #0284C7;
}
.ama-timeline-card-year {
    font-size: 22px; font-weight: 800; color: #0284C7;
    font-family: 'Cambria Math', Georgia, serif;
    align-self: center; text-align: center;
    background: #F0F9FF; border-radius: 10px; padding: 8px 4px;
}
.ama-timeline-card-label {
    margin: 0 0 4px; font-size: 14px; color: #0C4A6E; font-weight: 700;
}
.ama-timeline-card-detail {
    margin: 0; font-size: 12px; color: #475569; line-height: 1.5;
}
.ama-timeline-nav {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 12px;
}
.ama-timeline-nav-btn {
    padding: 6px 14px; border-radius: 8px;
    background: #0284C7; color: #fff;
    font-size: 12px; font-weight: 600; cursor: pointer; border: none;
}
.ama-timeline-nav-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.ama-timeline-nav-btn:hover:not(:disabled) { background: #0369A1; }
.ama-timeline-progress {
    font-size: 12px; color: #0C4A6E; font-weight: 600;
    background: rgba(255,255,255,0.7); padding: 4px 10px; border-radius: 999px;
}

/* ── Dihybrid 4×4 Punnett widget (Life Sci) ── */
.ama-dihybrid {
    background: linear-gradient(135deg, #F5F3FF 0%, #EDE9FE 100%);
    border: 1px solid #C4B5FD;
    border-radius: 16px;
    padding: 18px;
    margin: 16px 0;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.08);
}
.ama-dihybrid-head {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-bottom: 14px;
}
.ama-dihybrid-pill {
    display: inline-block; padding: 3px 10px;
    background: #6D28D9; color: #fff; font-size: 10px; font-weight: 800;
    letter-spacing: 1.2px; border-radius: 999px;
}
.ama-dihybrid-title { font-size: 16px; font-weight: 700; color: #4C1D95; flex: 1; }
.ama-dihybrid-reset {
    width: 30px; height: 30px; border-radius: 50%;
    background: rgba(255,255,255,0.7); border: 1px solid #C4B5FD;
    cursor: pointer; font-size: 14px; color: #4C1D95;
    display: flex; align-items: center; justify-content: center;
}
.ama-dihybrid-reset:hover { background: #fff; }
.ama-dihybrid-parents {
    display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px;
    align-items: center; margin-bottom: 14px;
}
.ama-dihybrid-parent {
    background: rgba(255,255,255,0.65); padding: 10px; border-radius: 10px;
}
.ama-dihybrid-parent-label {
    font-size: 11px; color: #6D28D9; font-weight: 700;
    letter-spacing: 0.6px; text-transform: uppercase;
    margin-bottom: 4px;
}
.ama-dihybrid-genotype {
    font-size: 18px; color: #1E293B; font-weight: 800;
    font-family: 'Cambria Math', Georgia, serif;
    margin-bottom: 8px;
}
.ama-dihybrid-pickers { display: flex; flex-direction: column; gap: 6px; }
.ama-dihybrid-pair { display: flex; gap: 4px; }
.ama-dihybrid-select {
    padding: 4px 8px; border: 1px solid #C4B5FD; border-radius: 6px;
    background: #fff; font-size: 13px;
    font-family: 'Cambria Math', Georgia, serif; font-weight: 700;
    color: #1E293B;
}
.ama-dihybrid-cross {
    font-size: 26px; color: #6D28D9; font-weight: 800;
    text-align: center;
}
.ama-dihybrid-grid-wrap { overflow-x: auto; }
.ama-dihybrid-grid {
    width: 100%; border-collapse: separate; border-spacing: 2px;
    font-family: 'Cambria Math', Georgia, serif;
}
.ama-dihybrid-th {
    background: #4C1D95; color: #fff; padding: 6px 4px;
    font-weight: 800; font-size: 13px; border-radius: 4px;
}
.ama-dihybrid-cell {
    padding: 8px 4px; text-align: center;
    border-radius: 6px; font-weight: 700; font-size: 12px;
    color: #1E293B;
}
.ama-dihybrid-cell--AB { background: #A78BFA; color: #fff; }   /* dom-dom (9) */
.ama-dihybrid-cell--Ab { background: #FBBF24; color: #422006; } /* dom-rec  (3) */
.ama-dihybrid-cell--aB { background: #34D399; color: #064E3B; } /* rec-dom  (3) */
.ama-dihybrid-cell--ab { background: #94A3B8; color: #fff; }   /* rec-rec  (1) */
.ama-dihybrid-ratios {
    display: grid; grid-template-columns: 2fr 1fr; gap: 10px; margin-top: 12px;
}
.ama-dihybrid-ratio-block {
    background: #4C1D95; color: #fff; padding: 8px 12px; border-radius: 10px;
    text-align: center;
}
.ama-dihybrid-ratio-label {
    font-size: 10px; opacity: 0.8; letter-spacing: 0.6px;
    text-transform: uppercase; font-weight: 700;
}
.ama-dihybrid-ratio-value {
    font-size: 16px; font-weight: 800;
    font-family: 'Cambria Math', Georgia, serif; margin-top: 2px;
}

/* ── Force vector simulator (Phys Sci) ── */
.ama-vector {
    background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
    border: 1px solid #6EE7B7;
    border-radius: 16px;
    padding: 18px;
    margin: 16px 0;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.08);
}
.ama-vector-head {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-bottom: 12px;
}
.ama-vector-pill {
    display: inline-block; padding: 3px 10px;
    background: #047857; color: #fff; font-size: 10px; font-weight: 800;
    letter-spacing: 1.2px; border-radius: 999px;
}
.ama-vector-title { font-size: 16px; font-weight: 700; color: #064E3B; flex: 1; }
.ama-vector-reset {
    width: 30px; height: 30px; border-radius: 50%;
    background: rgba(255,255,255,0.7); border: 1px solid #6EE7B7;
    cursor: pointer; font-size: 14px; color: #064E3B;
    display: flex; align-items: center; justify-content: center;
}
.ama-vector-reset:hover { background: #fff; }
.ama-vector-svg {
    width: 100%; max-width: 480px; height: auto; display: block; margin: 0 auto;
    background: #fff; border-radius: 12px; padding: 8px;
}
.ama-vector-controls {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    margin-top: 12px;
}
@media (max-width: 540px) {
    .ama-vector-controls { grid-template-columns: 1fr; }
}
.ama-vector-control-group {
    background: rgba(255,255,255,0.7); padding: 10px; border-radius: 10px;
}
.ama-vector-group-title {
    margin: 0 0 8px; font-size: 12px; font-weight: 700;
    letter-spacing: 0.4px;
}
.ama-vector-control {
    display: grid; grid-template-columns: 70px 1fr 50px; gap: 8px;
    align-items: center; font-size: 11px; color: #064E3B; font-weight: 600;
    margin-bottom: 6px;
}
.ama-vector-control input[type="range"] {
    width: 100%; -webkit-appearance: none; appearance: none;
    height: 4px; background: linear-gradient(to right, #34D399, #047857);
    border-radius: 999px;
}
.ama-vector-control input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 16px; height: 16px; border-radius: 50%;
    background: #047857; cursor: pointer; border: 2px solid #fff;
    box-shadow: 0 2px 4px rgba(4,120,87,0.3);
}
.ama-vector-value {
    text-align: right; font-family: 'Cambria Math', Georgia, serif;
    font-weight: 700; color: #1E293B;
}
.ama-vector-result {
    margin-top: 12px; padding: 10px 14px;
    background: #064E3B; color: #6EE7B7;
    border-radius: 10px;
    font-family: 'Cambria Math', Georgia, serif;
    font-size: 12px; line-height: 1.7;
}
.ama-vector-result strong { color: #FCD34D; }
.ama-vector-result-line { display: flex; flex-wrap: wrap; gap: 4px; align-items: baseline; }
.ama-vector-result-line--big { font-size: 14px; font-weight: 700; padding-top: 4px; border-top: 1px dashed rgba(255,255,255,0.2); margin-top: 4px; }

/* ── Payslip simulator (Math Lit) ── */
.ama-payslip {
    background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
    border: 1px solid #FCD34D; border-radius: 16px; padding: 18px; margin: 16px 0;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.08);
}
.ama-payslip-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ama-payslip-pill { display: inline-block; padding: 3px 10px; background: #D97706; color: #fff;
    font-size: 10px; font-weight: 800; letter-spacing: 1.2px; border-radius: 999px; }
.ama-payslip-title { font-size: 16px; font-weight: 700; color: #78350F; flex: 1; }
.ama-payslip-reset { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,0.7);
    border: 1px solid #FCD34D; cursor: pointer; font-size: 14px; color: #78350F;
    display: flex; align-items: center; justify-content: center; }
.ama-payslip-reset:hover { background: #fff; }
.ama-payslip-controls { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.ama-payslip-control { display: grid; grid-template-columns: 130px 1fr 100px; gap: 10px;
    align-items: center; font-size: 12px; color: #78350F; font-weight: 600; }
.ama-payslip-control input[type="range"] { width: 100%; -webkit-appearance: none; appearance: none;
    height: 5px; background: linear-gradient(to right, #FCD34D, #D97706); border-radius: 999px; }
.ama-payslip-control input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none;
    width: 18px; height: 18px; border-radius: 50%; background: #D97706; cursor: pointer;
    border: 2px solid #fff; box-shadow: 0 2px 6px rgba(217,119,6,0.3); }
.ama-payslip-control-value { text-align: right; font-family: 'Cambria Math', Georgia, serif;
    font-weight: 700; color: #1E293B; }
.ama-payslip-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 10px;
    overflow: hidden; font-size: 13px; }
.ama-payslip-table thead th { background: #78350F; color: #fff; padding: 8px 12px; text-align: left;
    font-size: 11px; letter-spacing: 0.6px; text-transform: uppercase; }
.ama-payslip-table th.num, .ama-payslip-table td.num { text-align: right;
    font-family: 'Cambria Math', Georgia, serif; }
.ama-payslip-row td { padding: 6px 12px; border-bottom: 1px solid #F3F4F6; }
.ama-payslip-row--earn td { color: #047857; }
.ama-payslip-row--ded td { color: #B91C1C; }
.ama-payslip-row--total td { background: #FEF3C7; font-size: 14px; padding: 10px 12px;
    border-bottom: none; color: #78350F; }
.ama-payslip-explainer { margin-top: 10px; padding: 10px 14px; background: #78350F; color: #FCD34D;
    font-size: 12px; border-radius: 10px; line-height: 1.5; }

/* ── Time-zone converter (Tourism) ── */
.ama-tz {
    background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%);
    border: 1px solid #38BDF8; border-radius: 16px; padding: 18px; margin: 16px 0;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.08);
}
.ama-tz-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.ama-tz-pill { display: inline-block; padding: 3px 10px; background: #0EA5E9; color: #fff;
    font-size: 10px; font-weight: 800; letter-spacing: 1.2px; border-radius: 999px; }
.ama-tz-title { font-size: 16px; font-weight: 700; color: #0C4A6E; flex: 1; }
.ama-tz-reset { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,0.7);
    border: 1px solid #38BDF8; cursor: pointer; font-size: 14px; color: #0C4A6E;
    display: flex; align-items: center; justify-content: center; }
.ama-tz-reset:hover { background: #fff; }
.ama-tz-source { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
@media (max-width: 540px) { .ama-tz-source { grid-template-columns: 1fr; } }
.ama-tz-row { display: flex; flex-direction: column; gap: 4px; font-size: 12px;
    color: #0C4A6E; font-weight: 600; }
.ama-tz-row-label { letter-spacing: 0.4px; }
.ama-tz-select, .ama-tz-time { padding: 8px 12px; border: 1px solid #38BDF8; border-radius: 8px;
    background: #fff; font-size: 13px; }
.ama-tz-results { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 540px) { .ama-tz-results { grid-template-columns: 1fr; } }
.ama-tz-card { display: flex; align-items: center; gap: 10px; padding: 8px 12px;
    background: #fff; border-radius: 10px; border-left: 3px solid #0EA5E9; }
.ama-tz-card-flag { font-size: 22px; }
.ama-tz-card-name { font-size: 11px; color: #0C4A6E; font-weight: 700; }
.ama-tz-card-utc { color: #64748B; font-weight: 500; margin-left: 4px; }
.ama-tz-card-time { font-size: 16px; font-weight: 800; color: #1E293B;
    font-family: 'Cambria Math', Georgia, serif; }
.ama-tz-card-day { font-size: 10px; color: #DC2626; font-weight: 600; margin-left: 4px;
    font-family: 'Inter', sans-serif; }

/* ── SWOT matrix (Bus Studies) ── */
.ama-swot {
    background: linear-gradient(135deg, #FAFAF9 0%, #F5F5F4 100%);
    border: 1px solid #D4D4D8; border-radius: 16px; padding: 18px; margin: 16px 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.ama-swot-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.ama-swot-pill { display: inline-block; padding: 3px 10px; background: #18181B; color: #fff;
    font-size: 10px; font-weight: 800; letter-spacing: 1.2px; border-radius: 999px; }
.ama-swot-title { font-size: 16px; font-weight: 700; color: #18181B; flex: 1; }
.ama-swot-reset { width: 30px; height: 30px; border-radius: 50%; background: #fff;
    border: 1px solid #D4D4D8; cursor: pointer; font-size: 14px;
    display: flex; align-items: center; justify-content: center; }
.ama-swot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 600px) { .ama-swot-grid { grid-template-columns: 1fr; } }
.ama-swot-q { padding: 12px; border-radius: 12px; background: #fff;
    border-top: 4px solid; min-height: 200px; display: flex; flex-direction: column; }
.ama-swot-q--s { border-color: #16A34A; }
.ama-swot-q--w { border-color: #DC2626; }
.ama-swot-q--o { border-color: #2563EB; }
.ama-swot-q--t { border-color: #F59E0B; }
.ama-swot-q-head { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.ama-swot-q-letter { font-size: 24px; font-weight: 900; color: #18181B; line-height: 1;
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    background: #F4F4F5; border-radius: 8px; }
.ama-swot-q-title { font-size: 13px; font-weight: 700; color: #18181B; }
.ama-swot-q-axis { font-size: 10px; color: #71717A; letter-spacing: 0.4px; text-transform: uppercase; }
.ama-swot-q-list { list-style: none; padding: 0; margin: 0; flex: 1; }
.ama-swot-q-list li { display: flex; justify-content: space-between; align-items: center;
    padding: 4px 6px; border-radius: 6px; font-size: 12px; margin-bottom: 4px; background: #FAFAF9; }
.ama-swot-empty { font-style: italic; color: #A1A1AA !important; background: transparent !important; }
.ama-swot-remove { background: none; border: none; color: #DC2626; cursor: pointer;
    font-size: 16px; padding: 0 4px; line-height: 1; }
.ama-swot-examples { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px;
    border-top: 1px dashed #E4E4E7; padding-top: 8px; }
.ama-swot-chip { padding: 3px 8px; font-size: 10px; border-radius: 999px;
    border: 1px solid #D4D4D8; background: #fff; cursor: pointer; color: #52525B; }
.ama-swot-chip:hover { background: #18181B; color: #fff; border-color: #18181B; }
.ama-swot-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.ama-swot-summary-block { background: #18181B; color: #fff; padding: 8px 12px; border-radius: 10px;
    text-align: center; }
.ama-swot-summary-label { font-size: 10px; opacity: 0.7; letter-spacing: 0.4px;
    text-transform: uppercase; }
.ama-swot-summary-value { font-size: 14px; font-weight: 800; margin-top: 2px; }

/* ── Ratio calculator (Accounting) ── */
.ama-ratio {
    background: linear-gradient(135deg, #ECFEFF 0%, #CFFAFE 100%);
    border: 1px solid #67E8F9; border-radius: 16px; padding: 18px; margin: 16px 0;
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.08);
}
.ama-ratio-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.ama-ratio-pill { display: inline-block; padding: 3px 10px; background: #0891B2; color: #fff;
    font-size: 10px; font-weight: 800; letter-spacing: 1.2px; border-radius: 999px; }
.ama-ratio-title { font-size: 16px; font-weight: 700; color: #164E63; flex: 1; }
.ama-ratio-reset { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,0.7);
    border: 1px solid #67E8F9; cursor: pointer; font-size: 14px; color: #164E63;
    display: flex; align-items: center; justify-content: center; }
.ama-ratio-reset:hover { background: #fff; }
.ama-ratio-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
@media (max-width: 540px) { .ama-ratio-inputs { grid-template-columns: 1fr; } }
.ama-ratio-field { display: flex; flex-direction: column; gap: 4px; font-size: 11px;
    color: #164E63; font-weight: 600; }
.ama-ratio-input { padding: 8px 12px; border: 1px solid #67E8F9; border-radius: 8px;
    background: #fff; font-size: 14px; font-family: 'Cambria Math', Georgia, serif; }
.ama-ratio-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px; }
.ama-ratio-result { background: #fff; padding: 10px 14px; border-radius: 10px;
    border-left: 4px solid; }
.ama-ratio-result--liquid { border-color: #0EA5E9; }
.ama-ratio-result--leverage { border-color: #F59E0B; }
.ama-ratio-result--profit { border-color: #16A34A; }
.ama-ratio-result-label { font-size: 11px; color: #164E63; font-weight: 700;
    letter-spacing: 0.4px; text-transform: uppercase; }
.ama-ratio-result-value { font-size: 18px; font-weight: 800; color: #1E293B;
    font-family: 'Cambria Math', Georgia, serif; margin: 2px 0; }
.ama-ratio-result-interpret { font-size: 11px; color: #475569; line-height: 1.4; }

/* ── Climate graph (Geography) ── */
.ama-climate {
    background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%);
    border: 1px solid #86EFAC; border-radius: 16px; padding: 18px; margin: 16px 0;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.08);
}
.ama-climate-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ama-climate-pill { display: inline-block; padding: 3px 10px; background: #16A34A; color: #fff;
    font-size: 10px; font-weight: 800; letter-spacing: 1.2px; border-radius: 999px; }
.ama-climate-title { font-size: 16px; font-weight: 700; color: #14532D; flex: 1; }
.ama-climate-reset { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,0.7);
    border: 1px solid #86EFAC; cursor: pointer; font-size: 14px; color: #14532D;
    display: flex; align-items: center; justify-content: center; }
.ama-climate-picker { display: grid; grid-template-columns: 80px 1fr; gap: 8px;
    align-items: center; margin-bottom: 12px; font-size: 12px; color: #14532D; font-weight: 600; }
.ama-climate-select { padding: 6px 10px; border: 1px solid #86EFAC; border-radius: 8px;
    background: #fff; font-size: 13px; }
.ama-climate-svg { width: 100%; max-width: 480px; height: auto; display: block; margin: 0 auto;
    background: #fff; border-radius: 12px; padding: 8px; }
.ama-climate-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px; margin-top: 12px; }
.ama-climate-stat { background: #14532D; color: #BBF7D0; padding: 8px 12px; border-radius: 10px; }
.ama-climate-stat-label { display: block; font-size: 10px; opacity: 0.8; letter-spacing: 0.4px;
    text-transform: uppercase; font-weight: 700; }
.ama-climate-stat-value { display: block; font-size: 14px; font-weight: 800; color: #FCD34D;
    font-family: 'Cambria Math', Georgia, serif; margin-top: 2px; }

/* ── Sentence reorder (Languages) ── */
.ama-reorder {
    background: linear-gradient(135deg, #FDF2F8 0%, #FCE7F3 100%);
    border: 1px solid #F9A8D4; border-radius: 16px; padding: 18px; margin: 16px 0;
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.08);
}
.ama-reorder-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.ama-reorder-pill { display: inline-block; padding: 3px 10px; background: #BE185D; color: #fff;
    font-size: 10px; font-weight: 800; letter-spacing: 1.2px; border-radius: 999px; }
.ama-reorder-title { font-size: 16px; font-weight: 700; color: #831843; flex: 1; }
.ama-reorder-reset { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,0.7);
    border: 1px solid #F9A8D4; cursor: pointer; font-size: 14px; color: #831843;
    display: flex; align-items: center; justify-content: center; }
.ama-reorder-progress { font-size: 12px; color: #831843; font-weight: 600; margin-bottom: 8px; }
.ama-reorder-target { display: flex; flex-wrap: wrap; gap: 4px; padding: 12px;
    background: #fff; border-radius: 10px; min-height: 48px; margin-bottom: 8px; }
.ama-reorder-slot { padding: 6px 10px; border-radius: 6px; border: 1px dashed #F9A8D4;
    background: #FDF2F8; font-size: 13px; font-weight: 600; cursor: pointer;
    color: #831843; min-width: 60px; }
.ama-reorder-slot--empty { opacity: 0.4; cursor: default; }
.ama-reorder-slot--correct { background: #BBF7D0; border-color: #16A34A; color: #14532D; }
.ama-reorder-slot--wrong { background: #FECACA; border-color: #DC2626; color: #7F1D1D; }
.ama-reorder-bank { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.ama-reorder-chip { padding: 6px 12px; border-radius: 999px; border: 2px solid #BE185D;
    background: #fff; font-size: 13px; font-weight: 600; cursor: pointer; color: #BE185D; }
.ama-reorder-chip:hover:not(:disabled) { background: #BE185D; color: #fff; }
.ama-reorder-chip:disabled { opacity: 0.3; cursor: not-allowed; }
.ama-reorder-feedback { margin: 8px 0; padding: 10px 14px; border-radius: 10px; font-weight: 600;
    text-align: center; }
.ama-reorder-feedback--ok { background: #14532D; color: #BBF7D0; }
.ama-reorder-feedback--bad { background: #7F1D1D; color: #FECACA; }
.ama-reorder-nav { display: flex; justify-content: space-between; gap: 8px; }
.ama-reorder-nav-btn { padding: 6px 14px; border-radius: 8px; background: #BE185D;
    color: #fff; font-size: 12px; font-weight: 600; cursor: pointer; border: none; }
.ama-reorder-nav-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.ama-reorder-nav-btn:hover:not(:disabled) { background: #831843; }
.ama-reorder-empty { text-align: center; padding: 24px; color: #94A3B8; font-style: italic; }

/* ── Interactive T-account widget (Tier 2 Gen Z) ── */
.ama-twidget {
    background: linear-gradient(135deg, #F8FAFC 0%, #E2E8F0 100%);
    border: 1px solid #CBD5E1;
    border-radius: 16px;
    padding: 20px;
    margin: 0 0 var(--ama-space-xl) 0;
    box-shadow: 0 4px 16px rgba(15,23,42,0.06);
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}
.ama-twidget-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.ama-twidget-pill {
    display: inline-block;
    background: #0F172A;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    padding: 4px 10px;
    border-radius: 999px;
}
.ama-twidget-title {
    font-size: 15px;
    font-weight: 700;
    color: #0F172A;
    flex: 1;
}
.ama-twidget-reset {
    background: transparent;
    border: 1px solid #CBD5E1;
    border-radius: 999px;
    width: 28px;
    height: 28px;
    cursor: pointer;
    font-size: 14px;
    color: #64748B;
    transition: all 0.2s;
}
.ama-twidget-reset:hover { background: #F1F5F9; color: #0F172A; transform: rotate(-90deg); }

.ama-twidget-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.ama-twidget-side { min-width: 0; }
.ama-twidget-side-head {
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    padding: 10px 12px;
    border-radius: 10px 10px 0 0;
    text-align: center;
}
.ama-twidget-debit .ama-twidget-side-head  { background: linear-gradient(180deg, #34D399, #059669); }
.ama-twidget-credit .ama-twidget-side-head { background: linear-gradient(180deg, #FB7185, #E11D48); }
.ama-twidget-side-list {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-top: none;
    border-radius: 0 0 10px 10px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ama-twidget-entry {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: center;
    border: 1px dashed #CBD5E1;
    background: #F8FAFC;
    border-radius: 8px;
    padding: 10px 12px;
    cursor: pointer;
    font: inherit;
    text-align: left;
    transition: all 0.2s ease;
    min-height: 40px;
}
.ama-twidget-entry:hover { border-color: #94A3B8; background: #F1F5F9; }
.ama-twidget-entry--shown {
    border: 1px solid #CBD5E1;
    background: #fff;
    cursor: default;
    animation: twidget-reveal 0.35s ease-out;
}
.ama-twidget-entry--shown:hover { background: #fff; }
@keyframes twidget-reveal {
    from { opacity: 0; transform: translateY(-6px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.ama-twidget-date { font-size: 11px; color: #64748B; font-weight: 600; }
.ama-twidget-detail { font-size: 13px; color: #0F172A; font-weight: 500; }
.ama-twidget-amount { font-size: 13px; color: #0F172A; font-weight: 700; }
.ama-twidget-entry-placeholder {
    grid-column: 1 / -1;
    text-align: center;
    color: #94A3B8;
    font-size: 12px;
    font-style: italic;
}

.ama-twidget-balance {
    margin-top: 14px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    text-align: center;
    background: #F1F5F9;
    color: #64748B;
    transition: all 0.35s;
}
.ama-twidget-balance--active {
    background: linear-gradient(90deg, #FEF3C7, #FDE68A);
    color: #78350F;
    animation: twidget-balance-in 0.45s ease-out;
}
@keyframes twidget-balance-in {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}

@media (max-width: 640px) {
    .ama-twidget-body { grid-template-columns: 1fr; }
}

/* ── Meme-hook card (Tier 1 Gen Z feature) ── */
.ama-meme-hook {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 14px 18px;
    margin: 0 0 var(--ama-space-lg) 0;
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    border-left: 5px solid #F59E0B;
    border-radius: 12px;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #78350F;
}
.ama-meme-hook-emoji {
    font-size: 1.6rem;
    flex: 0 0 auto;
    line-height: 1.1;
}
.ama-meme-hook-body { flex: 1; }
.ama-meme-hook-body p:first-child { margin-top: 0; }
.ama-meme-hook-body p:last-child { margin-bottom: 0; }
.ama-meme-hook-body strong { color: #92400E; }

/* ── Curated-video panel (Tier 1 Gen Z feature) ── */
.ama-video-panel {
    background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
    border-radius: 14px;
    padding: 18px;
    margin: 0 0 var(--ama-space-xl) 0;
    box-shadow: 0 6px 24px rgba(15,23,42,0.12);
}
.ama-video-panel-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    color: #fff;
}
.ama-video-panel-pill {
    display: inline-block;
    background: linear-gradient(90deg, #EF4444, #DC2626);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    padding: 4px 10px;
    border-radius: 999px;
}
.ama-video-panel-title {
    font-size: 14px;
    font-weight: 600;
    color: #E2E8F0;
}
.ama-video-panel-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    overflow: hidden;
    background: #000;
}
.ama-video-panel-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ── Hero banner ── */
.ama-lesson-hero {
    position: relative;
    border-radius: var(--ama-radius-lg);
    overflow: hidden;
    margin-bottom: var(--ama-space-lg);
    height: 220px;
}
.ama-lesson-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ama-lesson-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0.08) 100%);
    display: flex;
    align-items: flex-end;
    padding: var(--ama-space-lg) var(--ama-space-xl);
}
.ama-lesson-hero-content {
    display: flex;
    flex-direction: column;
    gap: var(--ama-space-xs);
}
.ama-lesson-hero-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,0.3);
    line-height: 1.3;
}
.ama-lesson-hero-caps {
    font-size: var(--ama-text-xs);
    color: rgba(255,255,255,0.8);
    font-weight: 600;
}
@media (max-width: 768px) {
    .ama-lesson-hero { height: 180px; }
    .ama-lesson-hero-title { font-size: 1.2rem; }
    .ama-lesson-hero-overlay { padding: var(--ama-space-md); }
}
.ama-lesson-nav-footer { display: flex; justify-content: space-between; align-items: center; margin-top: var(--ama-space-2xl); padding-top: var(--ama-space-lg); border-top: 1px solid var(--ama-border); }
.ama-lesson-nav-prev { text-decoration: none; color: var(--ama-brand); font-weight: 600; font-size: var(--ama-text-sm); }
.ama-lesson-nav-prev:hover { text-decoration: none; opacity: 0.85; }
.ama-lesson-nav-next { font-size: var(--ama-text-sm); }
@media (max-width: 768px) {
    .ama-lesson-shell { grid-template-columns: 1fr; }
    .ama-lesson-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 300px; transform: translateX(-100%); transition: transform 0.25s ease; z-index: 1000; box-shadow: var(--ama-shadow-lg); }
    .ama-lesson-sidebar--open { transform: translateX(0); }
    .ama-lsb-close { display: block; }
    .ama-lsb-toggle { display: inline-flex; }
    .ama-lsb-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 999; }
    .ama-lesson-content { padding: var(--ama-space-md); }
}

/* ============================================================
   SUBJECT PAGE
   ============================================================ */
.ama-sp-hero { padding: var(--ama-space-lg) 0 var(--ama-space-xl) 0; display: flex; align-items: center; gap: var(--ama-space-xl); }
.ama-sp-hero-text { flex: 1; }
.ama-sp-hero .am-mascot { width: 200px; height: auto; flex-shrink: 0; object-fit: contain; }
.ama-sp-title { font-size: 1.75rem; font-weight: 700; margin: 0 0 var(--ama-space-sm) 0; }
.ama-sp-desc { color: var(--ama-text-secondary); margin: 0 0 var(--ama-space-lg) 0; line-height: 1.55; max-width: 540px; }
.ama-sp-start-btn { display: inline-block; }
.ama-sp-progress-card { background: var(--ama-surface); border: 1px solid var(--ama-border-light); border-radius: 10px; padding: var(--ama-space-md) var(--ama-space-lg); margin-bottom: var(--ama-space-xl); }
.ama-sp-progress-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--ama-space-sm); }
.ama-sp-progress-title { font-weight: 700; font-size: 1rem; }
.ama-sp-progress-pct { font-weight: 700; color: var(--ama-brand); font-size: 1rem; }
.ama-sp-progress-msg { margin: var(--ama-space-sm) 0 0 0; font-size: var(--ama-text-sm); color: var(--ama-text-secondary); }
.ama-sp-section-heading { font-size: 1.15rem; font-weight: 700; margin: 0 0 var(--ama-space-md) 0; }
.ama-sp-units-section { margin-bottom: var(--ama-space-xl); }
.ama-sp-term-header { display: flex; align-items: center; gap: 10px; margin: var(--ama-space-md) 0 var(--ama-space-xs) 0; }
.ama-sp-units-section .ama-sp-term-header:first-of-type { margin-top: 0; }
.ama-sp-term-pip { width: 4px; height: 20px; border-radius: 1px; background: var(--term-color, #94a3b8); flex-shrink: 0; }
.ama-sp-term-label { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--term-color, #64748b); white-space: nowrap; }
.ama-sp-term-line { flex: 1; height: 2px; background: var(--term-color, #94a3b8); opacity: 0.25; border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; }
.ama-sp-unit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--ama-space-md); }
.ama-sp-unit-card { display: flex; flex-direction: column; background: var(--ama-surface); border: 1px solid var(--ama-border-light); border-radius: 10px; padding: var(--ama-space-md); text-decoration: none; color: var(--ama-text); transition: border-color 0.15s, box-shadow 0.15s; }
.ama-sp-unit-card:hover { border-color: var(--ama-brand-light); box-shadow: 0 2px 10px rgba(0,0,0,0.06); text-decoration: none; color: var(--ama-text); }
.ama-sp-unit-card-top { display: flex; align-items: center; gap: var(--ama-space-sm); margin-bottom: var(--ama-space-sm); }
.ama-sp-unit-order { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ama-brand); color: #fff; font-size: var(--ama-text-xs); font-weight: 700; flex-shrink: 0; }
.ama-sp-unit-name { font-weight: 600; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ama-sp-unit-card-bar { height: 4px; background: var(--ama-border-light); border-radius: 2px; overflow: hidden; margin-bottom: var(--ama-space-xs); }
.ama-sp-unit-card-fill { height: 100%; background: var(--ama-brand); border-radius: 2px; transition: width 0.4s ease; }
.ama-sp-unit-card-pct { font-size: var(--ama-text-xs); font-weight: 700; color: var(--ama-brand); }
.ama-sp-unit-card-label { font-size: var(--ama-text-xs); color: var(--ama-text-muted); }
.ama-sp-tips { margin-bottom: var(--ama-space-xl); }
.ama-sp-tips-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ama-space-md); }
.ama-sp-tip-card { background: var(--ama-surface); border: 1px solid var(--ama-border-light); border-radius: 10px; padding: var(--ama-space-md); text-align: center; }
.ama-sp-tip-icon { font-size: 1.5rem; display: block; margin-bottom: var(--ama-space-xs); }
.ama-sp-tip-card p { margin: 0; font-size: var(--ama-text-sm); color: var(--ama-text-secondary); line-height: 1.5; }
@media (max-width: 640px) { .ama-sp-hero { flex-direction: column; gap: var(--ama-space-md); } .ama-sp-unit-grid { grid-template-columns: 1fr; } .ama-sp-tips-grid { grid-template-columns: 1fr; } .ama-sp-overview-feature-grid { grid-template-columns: 1fr; } .ama-sp-overview-stats { flex-direction: column; } }

/* Anonymous subject overview */
.ama-sp-overview { margin-bottom: var(--ama-space-xl); }

.ama-sp-overview-stats {
    display: flex; gap: var(--ama-space-lg); margin-bottom: var(--ama-space-xl);
}
.ama-sp-overview-stat {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    background: var(--ama-surface); border: 1px solid var(--ama-border-light); border-radius: 10px;
    padding: var(--ama-space-md) var(--ama-space-lg); flex: 1;
}
.ama-sp-overview-stat-value { font-size: 1.5rem; font-weight: 800; color: var(--ama-brand); }
.ama-sp-overview-stat-label { font-size: var(--ama-text-xs); color: var(--ama-text-muted); margin-top: 2px; }

.ama-sp-overview-subtitle {
    font-size: 1rem; font-weight: 700; margin: 0 0 var(--ama-space-sm) 0; color: var(--ama-text);
}

.ama-sp-overview-topics { margin-bottom: var(--ama-space-xl); }
.ama-sp-overview-topic-list {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--ama-space-xs) var(--ama-space-lg);
    list-style: none; padding: 0; margin: 0;
}
.ama-sp-overview-topic-list li {
    font-size: var(--ama-text-sm); color: var(--ama-text-secondary); padding: var(--ama-space-xs) 0;
    border-bottom: 1px solid var(--ama-border-light); position: relative; padding-left: 20px;
}
.ama-sp-overview-topic-list li::before {
    content: "✓"; position: absolute; left: 0; color: var(--ama-brand); font-weight: 700;
}

.ama-sp-overview-features { margin-bottom: var(--ama-space-xl); }
.ama-sp-overview-feature-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--ama-space-md);
}
.ama-sp-overview-feature {
    display: flex; gap: var(--ama-space-sm); align-items: flex-start;
    background: var(--ama-surface); border: 1px solid var(--ama-border-light); border-radius: 10px;
    padding: var(--ama-space-md);
}
.ama-sp-overview-feature-icon { font-size: 1.4rem; flex-shrink: 0; margin-top: 2px; }
.ama-sp-overview-feature strong { font-size: var(--ama-text-sm); display: block; margin-bottom: 2px; }
.ama-sp-overview-feature p { margin: 0; font-size: var(--ama-text-xs); color: var(--ama-text-muted); line-height: 1.4; }

.ama-sp-overview-cta {
    text-align: center; background: var(--ama-surface); border: 1px solid var(--ama-border-light);
    border-radius: 12px; padding: var(--ama-space-xl);
}
.ama-sp-overview-cta p { margin: 0 0 var(--ama-space-md) 0; color: var(--ama-text-secondary); font-size: var(--ama-text-sm); }
.ama-sp-overview-cta-buttons { display: flex; gap: var(--ama-space-sm); justify-content: center; }

/* Paywall guard */
.ama-paywall {
    text-align: center; padding: var(--ama-space-2xl) var(--ama-space-lg);
    background: var(--ama-surface); border: 1px solid var(--ama-border-light);
    border-radius: 12px; max-width: 480px; margin: var(--ama-space-2xl) auto;
}
.ama-paywall-icon { font-size: 2.5rem; margin-bottom: var(--ama-space-sm); }
.ama-paywall-title { font-size: 1.25rem; font-weight: 700; margin: 0 0 var(--ama-space-sm) 0; }
.ama-paywall-desc { color: var(--ama-text-secondary); font-size: var(--ama-text-sm); margin: 0 0 var(--ama-space-lg) 0; line-height: 1.5; }
.ama-paywall-actions { display: flex; gap: var(--ama-space-sm); justify-content: center; flex-wrap: wrap; }

/* Pricing page */
.ama-pricing-header { text-align: center; margin-bottom: var(--ama-space-xl); }
.ama-pricing-header h1 { font-size: 1.75rem; font-weight: 800; margin: 0 0 var(--ama-space-xs) 0; }
.ama-pricing-header p { color: var(--ama-text-secondary); font-size: var(--ama-text-sm); margin: 0; }

.ama-pricing-period-toggle {
    display: flex; justify-content: center; gap: var(--ama-space-xs);
    margin-bottom: var(--ama-space-xl); flex-wrap: wrap;
}
.ama-pricing-period-btn {
    background: var(--ama-surface); border: 1px solid var(--ama-border-light); border-radius: 8px;
    padding: 8px 16px; font-size: var(--ama-text-sm); font-weight: 600; cursor: pointer;
    color: var(--ama-text-secondary); transition: all 0.15s; display: flex; align-items: center; gap: 6px;
}
.ama-pricing-period-btn:hover { border-color: var(--ama-brand); color: var(--ama-text); }
.ama-pricing-period-btn.active {
    background: var(--ama-brand); border-color: var(--ama-brand); color: #fff;
}
.ama-pricing-save-badge {
    font-size: 0.65rem; font-weight: 700; background: #d8f3dc; color: #2d6a4f;
    padding: 2px 6px; border-radius: 4px; white-space: nowrap;
}
.ama-pricing-period-btn.active .ama-pricing-save-badge { background: rgba(255,255,255,0.25); color: #fff; }

.ama-pricing-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ama-space-lg);
    max-width: 900px; margin: 0 auto var(--ama-space-2xl) auto;
}
.ama-pricing-card {
    background: var(--ama-surface); border: 1px solid var(--ama-border-light); border-radius: 14px;
    padding: var(--ama-space-lg); text-align: center; position: relative;
    display: flex; flex-direction: column; align-items: center;
}
.ama-pricing-card--popular {
    border-color: var(--ama-brand); box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transform: scale(1.03);
}
.ama-pricing-badge {
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    background: var(--ama-brand); color: #fff; font-size: 0.7rem; font-weight: 700;
    padding: 3px 12px; border-radius: 12px; white-space: nowrap;
}
.ama-pricing-badge--value { background: #2d6a4f; }
.ama-pricing-plan-name { font-size: 1.15rem; font-weight: 700; margin: var(--ama-space-sm) 0 4px 0; }
.ama-pricing-plan-desc { font-size: var(--ama-text-sm); color: var(--ama-text-secondary); margin: 0 0 var(--ama-space-md) 0; }
.ama-pricing-price { display: flex; align-items: baseline; gap: 4px; justify-content: center; margin-bottom: 4px; }
.ama-pricing-amount { font-size: 2rem; font-weight: 800; color: var(--ama-text); }
.ama-pricing-freq { font-size: var(--ama-text-sm); color: var(--ama-text-muted); }
.ama-pricing-equiv { font-size: var(--ama-text-xs); color: var(--ama-text-muted); margin: 0 0 var(--ama-space-md) 0; }
.ama-pricing-cta { width: 100%; margin-top: auto; }

.ama-pricing-features {
    text-align: center; max-width: 500px; margin: 0 auto var(--ama-space-lg) auto;
}
.ama-pricing-features h3 { font-size: 1rem; font-weight: 700; margin: 0 0 var(--ama-space-sm) 0; }
.ama-pricing-features ul { list-style: none; padding: 0; margin: 0; }
.ama-pricing-features li {
    font-size: var(--ama-text-sm); color: var(--ama-text-secondary); padding: 6px 0;
    border-bottom: 1px solid var(--ama-border-light);
}
.ama-pricing-features li:last-child { border-bottom: none; }

.ama-pricing-free-note {
    text-align: center; background: #d8f3dc; border-radius: 10px;
    padding: var(--ama-space-md) var(--ama-space-lg); max-width: 600px; margin: var(--ama-space-lg) auto 0 auto;
}
.ama-pricing-free-note p { margin: 0; font-size: var(--ama-text-sm); color: #2d6a4f; font-weight: 600; }

@media (max-width: 768px) {
    .ama-pricing-grid { grid-template-columns: 1fr; max-width: 360px; }
    .ama-pricing-card--popular { transform: none; }
}

/* Gradient hero banner (used on unit + lesson pages) */
.ama-hero-banner {
    position: relative;
    border-radius: var(--ama-radius-lg);
    overflow: hidden;
    margin-bottom: var(--ama-space-lg);
    min-height: 200px;
    display: flex;
    align-items: flex-end;
    padding: var(--ama-space-lg) var(--ama-space-xl);
}
.ama-hero-banner-icon {
    position: absolute;
    top: 50%;
    right: var(--ama-space-xl);
    transform: translateY(-50%);
    font-size: 6rem;
    opacity: 0.15;
    filter: grayscale(1) brightness(2);
}
.ama-hero-banner-content {
    display: flex;
    flex-direction: column;
    gap: var(--ama-space-xs);
    z-index: 1;
}
.ama-hero-banner-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.3;
}
.ama-hero-banner-sub {
    font-size: var(--ama-text-xs);
    color: rgba(255,255,255,0.8);
    font-weight: 600;
}
@media (max-width: 768px) {
    .ama-hero-banner { min-height: 160px; padding: var(--ama-space-md); }
    .ama-hero-banner-title { font-size: 1.2rem; }
    .ama-hero-banner-icon { font-size: 4rem; right: var(--ama-space-md); }
}

/* Term badge */
.ama-term-badge {
    font-size: var(--ama-text-xs);
    font-weight: 700;
    color: #fff;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(4px);
    padding: 3px 12px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    width: fit-content;
}

.ama-upage-progress-row {
    display: flex;
    align-items: center;
    gap: var(--ama-space-md);
    margin-bottom: var(--ama-space-md);
}
.ama-upage-progress-bar {
    flex: 1;
    height: 8px;
    background: var(--ama-border-light);
    border-radius: 4px;
    overflow: hidden;
}
.ama-upage-progress-fill {
    height: 100%;
    background: var(--ama-brand);
    border-radius: 4px;
    transition: width 0.4s ease;
}
.ama-upage-progress-label {
    font-size: var(--ama-text-sm);
    color: var(--ama-text-secondary);
    white-space: nowrap;
    font-weight: 600;
}
.ama-upage-stats {
    display: flex;
    gap: var(--ama-space-lg);
    flex-wrap: wrap;
}
.ama-upage-stat {
    font-size: var(--ama-text-sm);
    color: var(--ama-text-secondary);
}

/* About section */
.ama-upage-about {
    background: var(--ama-surface);
    border: 1px solid var(--ama-border-light);
    border-radius: 8px;
    padding: var(--ama-space-md) var(--ama-space-lg);
    margin-bottom: var(--ama-space-xl);
}
.ama-upage-about h2 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 var(--ama-space-xs) 0;
}
.ama-upage-about p {
    color: var(--ama-text-secondary);
    margin: 0;
    line-height: 1.55;
}

/* Lesson table */
.ama-upage-lesson-table {
    border: 1px solid var(--ama-border-light);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: var(--ama-space-xl);
}
.ama-upage-table-head {
    display: grid;
    grid-template-columns: 1fr 64px 64px;
    gap: 0;
    background: var(--ama-surface-alt, #f8f9fa);
    border-bottom: 1px solid var(--ama-border-light);
    padding: var(--ama-space-sm) var(--ama-space-md);
}
.ama-upage-th {
    font-size: var(--ama-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ama-text-muted);
}
.ama-upage-th-act {
    text-align: center;
}
.ama-upage-row {
    display: grid;
    grid-template-columns: 1fr 64px 64px;
    gap: 0;
    align-items: center;
    padding: var(--ama-space-sm) var(--ama-space-md);
    border-bottom: 1px solid var(--ama-border-light);
    transition: background 0.1s;
}
.ama-upage-row:last-child {
    border-bottom: none;
}
.ama-upage-row:hover {
    background: rgba(0,0,0,0.015);
}
.ama-upage-row-name {
    min-width: 0;
}
.ama-upage-lesson-link {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--ama-text);
    text-decoration: none;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ama-upage-lesson-link:hover {
    color: var(--ama-brand);
    text-decoration: none;
}
.ama-upage-row-meta {
    display: flex;
    align-items: center;
    gap: var(--ama-space-sm);
    margin-top: 2px;
}
.ama-upage-row-time {
    font-size: var(--ama-text-xs);
    color: var(--ama-text-muted);
}
.ama-upage-row-act {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Activity pip (circle indicator) */
.ama-upage-pip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid var(--ama-border-light);
    background: var(--ama-surface);
    font-size: 0.8rem;
    text-decoration: none;
    color: var(--ama-text-secondary);
    transition: border-color 0.15s, background 0.15s;
}
a.ama-upage-pip:hover {
    border-color: var(--ama-brand);
    background: var(--ama-brand-light);
    color: var(--ama-brand);
    text-decoration: none;
}
.ama-upage-pip--done {
    background: #d8f3dc;
    border-color: #52b788;
    color: #2d6a4f;
    font-weight: 700;
}
.ama-upage-pip--empty {
    border-color: transparent;
    color: var(--ama-text-muted);
    font-size: var(--ama-text-xs);
}

/* Quiz section */
.ama-upage-quiz-section {
    border: 1px solid var(--ama-border-light);
    border-radius: 10px;
    padding: var(--ama-space-lg);
    text-align: center;
    background: var(--ama-surface);
}
.ama-upage-quiz-icon {
    font-size: 2rem;
    margin-bottom: var(--ama-space-xs);
}
.ama-upage-quiz-section h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 var(--ama-space-xs) 0;
}
.ama-upage-quiz-desc {
    color: var(--ama-text-secondary);
    margin: 0 0 var(--ama-space-md) 0;
    font-size: var(--ama-text-sm);
}

/* Mobile */
@media (max-width: 640px) {
    .ama-upage-stats {
        flex-direction: column;
        gap: var(--ama-space-xs);
    }
    .ama-upage-table-head {
        grid-template-columns: 1fr 48px 48px;
    }
    .ama-upage-row {
        grid-template-columns: 1fr 48px 48px;
    }
    .ama-upage-pip {
        width: 28px;
        height: 28px;
        font-size: 0.7rem;
    }
}

/* Difficulty badges */
.ama-difficulty-badge {
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: var(--ama-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.ama-difficulty-easy {
    background: #d8f3dc;
    color: #2d6a4f;
}
.ama-difficulty-medium {
    background: #fef3cd;
    color: #856404;
}
.ama-difficulty-hard {
    background: #f8d7da;
    color: #842029;
}
.ama-difficulty-advanced {
    background: #ede9fe;
    color: #5b21b6;
}

/* Activity check dots */
.ama-lesson-card-checks {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-left: var(--ama-space-md);
    flex-shrink: 0;
}
.ama-check-dot {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--ama-text-muted);
}
.ama-check-dot--done {
    color: var(--ama-success);
    font-weight: 700;
}
/* ============================================================
   LESSON CONTENT BLOCKS
   ============================================================ */

.ama-lesson-block {
    border-radius: var(--ama-radius);
    padding: var(--ama-space-lg);
    margin-bottom: var(--ama-space-lg);
}
.ama-lesson-block h3 {
    margin: 0 0 var(--ama-space-sm) 0;
    font-size: var(--ama-text-lg);
}
.ama-lesson-block-body {
    white-space: pre-line;
    line-height: 1.7;
    color: var(--ama-text);
    font-size: var(--ama-text-base);
}

/* Explanation — clean card with subtle brand accent */
.ama-lesson-explanation {
    background: #ffffff;
    border: 1px solid var(--ama-border-light);
    border-left: 5px solid var(--ama-brand);
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.ama-lesson-explanation h3 {
    color: var(--ama-brand);
    font-size: 1.1rem;
    letter-spacing: 0.01em;
    padding-bottom: var(--ama-space-sm);
    border-bottom: 1px solid var(--ama-border-light);
    margin-bottom: var(--ama-space-md);
}
.ama-lesson-explanation .ama-lesson-block-body {
    font-size: 0.97rem;
    line-height: 1.8;
    color: var(--ama-text);
}

/* Worked Example — highlighted card with blue accent */
.ama-lesson-example {
    background: linear-gradient(135deg, #f7fbff 0%, #eef5ff 100%);
    border: 1px solid #d4e4f7;
    border-left: 5px solid #4a90d9;
    box-shadow: 0 1px 4px rgba(74,144,217,0.08);
}
.ama-lesson-example h3 {
    color: #2c6fbb;
    font-size: 1.1rem;
    letter-spacing: 0.01em;
    padding-bottom: var(--ama-space-sm);
    border-bottom: 1px solid #d4e4f7;
    margin-bottom: var(--ama-space-md);
}
.ama-lesson-example .ama-lesson-block-body {
    font-family: var(--ama-font-mono);
    font-size: 0.9rem;
    line-height: 1.8;
    color: #1e3a5f;
}
.ama-lesson-practice {
    background: #f0faf4;
    border-left: 4px solid var(--ama-success);
}
.ama-lesson-tip {
    background: #fef9e7;
    border-left: 4px solid var(--ama-warning);
}
.ama-lesson-warning {
    background: #fef2f2;
    border-left: 4px solid var(--ama-danger);
}
.ama-lesson-stepsolver {
    background: #f3f0ff;
    border-left: 4px solid #7c5cbf;
}
.ama-lesson-know {
    background: var(--ama-surface-alt);
    border-left: 4px solid var(--ama-text-muted);
}

/* Place Cards — image card grid for world icons / heritage sites */
.ama-place-cards {
    margin-bottom: var(--ama-space-lg);
}
.ama-place-cards > h3 {
    color: #2c6fbb;
    font-size: 1.1rem;
    margin: 0 0 var(--ama-space-md) 0;
}
.ama-place-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--ama-space-md);
}
.ama-place-card {
    background: #fff;
    border-radius: var(--ama-radius-lg, 12px);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border: 1px solid var(--ama-border-light, #e5e7eb);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ama-place-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}
.ama-place-img-wrap {
    position: relative;
    height: 200px;
    overflow: hidden;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.ama-place-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ama-place-img-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: rgba(255,255,255,0.6);
}
.ama-place-country {
    position: absolute;
    top: var(--ama-space-sm);
    right: var(--ama-space-sm);
    background: rgba(0,0,0,0.6);
    color: #fff;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.ama-place-body {
    padding: var(--ama-space-md);
}
.ama-place-name {
    margin: 0 0 var(--ama-space-xs) 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ama-text);
    line-height: 1.3;
}
.ama-place-location {
    margin: 0 0 var(--ama-space-sm) 0;
    font-size: 0.82rem;
    color: var(--ama-text-muted);
}
.ama-place-desc {
    margin: 0 0 var(--ama-space-sm) 0;
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--ama-text);
}
.ama-place-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: var(--ama-space-sm);
}
.ama-place-tag {
    display: inline-block;
    background: #eef2ff;
    color: #4338ca;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 500;
    white-space: nowrap;
}
.ama-place-iconic {
    border-top: 1px solid var(--ama-border-light, #e5e7eb);
    padding-top: var(--ama-space-xs);
}
.ama-place-iconic summary {
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    color: #b45309;
    padding: var(--ama-space-xs) 0;
}
.ama-place-iconic summary:hover { color: #92400e; }
.ama-place-iconic p {
    margin: var(--ama-space-xs) 0 0 0;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--ama-text-muted);
}

@media (max-width: 640px) {
    .ama-place-grid { grid-template-columns: 1fr; }
    .ama-place-img-wrap { height: 180px; }
}

/* Interactive practice items */
.ama-practice-item {
    margin-bottom: var(--ama-space-md);
    padding-bottom: var(--ama-space-md);
    border-bottom: 1px dashed rgba(0,0,0,0.08);
}
.ama-practice-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}
.ama-practice-question {
    font-weight: 600;
    margin: 0 0 var(--ama-space-xs) 0;
    font-size: var(--ama-text-base);
    color: var(--ama-text);
}
.ama-practice-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--ama-border);
    border-radius: 6px;
    font-size: var(--ama-text-sm);
    font-family: var(--ama-font);
    background: #fff;
    resize: vertical;
    transition: border-color 0.15s ease;
}
.ama-practice-input:focus {
    outline: none;
    border-color: var(--ama-brand);
    box-shadow: 0 0 0 2px var(--ama-brand-subtle);
}
.ama-practice-actions {
    margin-top: var(--ama-space-xs);
    display: flex;
    align-items: center;
    gap: var(--ama-space-sm);
}
.ama-practice-done {
    font-size: var(--ama-text-sm);
    color: var(--ama-success);
    font-weight: 600;
}
.ama-btn-sm {
    padding: 0.25rem 0.75rem;
    font-size: var(--ama-text-sm);
}

/* ============================================================
   UNIT QUIZ
   ============================================================ */

/* Buttons — :disabled state */
.ama-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ama-btn-secondary {
    background: var(--ama-surface-alt);
    color: var(--ama-text);
    border: 1px solid var(--ama-border);
}
.ama-btn-secondary:hover:not(:disabled) { background: var(--ama-border-light); }

/* Input */
.ama-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--ama-border);
    border-radius: 6px;
    font-size: var(--ama-text-sm);
    font-family: var(--ama-font);
    background: var(--ama-surface);
    transition: border-color 0.15s ease;
}
.ama-input:focus {
    outline: none;
    border-color: var(--ama-brand);
    box-shadow: 0 0 0 2px var(--ama-brand-subtle);
}

/* Quiz history table */
.ama-quiz-history {
    display: flex;
    flex-direction: column;
    gap: var(--ama-space-xs);
    margin-top: var(--ama-space-sm);
}
.ama-quiz-history-row {
    display: flex;
    align-items: center;
    gap: var(--ama-space-md);
    padding: var(--ama-space-sm) var(--ama-space-md);
    background: var(--ama-surface);
    border: 1px solid var(--ama-border-light);
    border-radius: 8px;
    font-size: var(--ama-text-sm);
}
.ama-quiz-history-row.ama-quiz-passed {
    border-left: 3px solid var(--ama-success);
}
.ama-quiz-history-date { color: var(--ama-text-secondary); min-width: 140px; }
.ama-quiz-history-score { font-weight: 700; min-width: 50px; }
.ama-quiz-history-marks { color: var(--ama-text-muted); min-width: 70px; }

.ama-quiz-badge-pass {
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: var(--ama-text-xs);
    font-weight: 700;
    background: #d8f3dc;
    color: #2d6a4f;
}
.ama-quiz-badge-fail {
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: var(--ama-text-xs);
    font-weight: 700;
    background: #f8d7da;
    color: #842029;
}
.ama-quiz-badge-incomplete {
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: var(--ama-text-xs);
    font-weight: 700;
    background: #fef3cd;
    color: #856404;
}

/* Quiz question cards */
.ama-quiz-questions {
    display: flex;
    flex-direction: column;
    gap: var(--ama-space-lg);
}
.ama-quiz-question-card {
    background: var(--ama-surface);
    border: 1px solid var(--ama-border);
    border-radius: 12px;
    padding: var(--ama-space-lg);
}
.ama-quiz-question-header {
    display: flex;
    align-items: center;
    gap: var(--ama-space-sm);
    margin-bottom: var(--ama-space-sm);
    font-size: var(--ama-text-sm);
}
.ama-quiz-question-num {
    font-weight: 700;
    color: var(--ama-brand);
    min-width: 30px;
}
.ama-quiz-question-topic {
    color: var(--ama-text-muted);
}
.ama-quiz-question-marks {
    color: var(--ama-text-muted);
    margin-left: auto;
}
.ama-quiz-question-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 var(--ama-space-sm) 0;
}
.ama-quiz-question-body {
    font-size: var(--ama-text-sm);
    color: var(--ama-text-secondary);
    line-height: 1.5;
    margin-bottom: var(--ama-space-md);
}
.ama-quiz-answer-input label {
    display: block;
    font-size: var(--ama-text-sm);
    font-weight: 600;
    margin-bottom: var(--ama-space-xs);
}

/* Quiz actions bar */
.ama-quiz-actions {
    display: flex;
    align-items: center;
    gap: var(--ama-space-md);
    margin-top: var(--ama-space-xl);
    margin-bottom: var(--ama-space-lg);
}
.ama-quiz-answered-count {
    font-size: var(--ama-text-sm);
    color: var(--ama-text-muted);
}

/* Quiz result summary */
.ama-quiz-result-summary {
    text-align: center;
    padding: var(--ama-space-2xl);
    border-radius: 16px;
    margin: var(--ama-space-lg) 0;
}
.ama-quiz-result-pass {
    background: #d8f3dc;
    border: 2px solid var(--ama-success);
}
.ama-quiz-result-fail {
    background: #f8d7da;
    border: 2px solid var(--ama-danger);
}
.ama-quiz-result-score {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
}
.ama-quiz-result-pass .ama-quiz-result-score { color: var(--ama-success); }
.ama-quiz-result-fail .ama-quiz-result-score { color: var(--ama-danger); }
.ama-quiz-result-label {
    font-size: 1.2rem;
    font-weight: 700;
    margin-top: var(--ama-space-xs);
}
.ama-quiz-result-marks {
    font-size: var(--ama-text-sm);
    color: var(--ama-text-secondary);
    margin-top: var(--ama-space-xs);
}

/* Quiz review cards */
.ama-quiz-review {
    display: flex;
    flex-direction: column;
    gap: var(--ama-space-sm);
    margin-top: var(--ama-space-sm);
}
.ama-quiz-review-card {
    border: 1px solid var(--ama-border);
    border-radius: 10px;
    padding: var(--ama-space-md);
    background: var(--ama-surface);
}
.ama-quiz-review-correct { border-left: 4px solid var(--ama-success); }
.ama-quiz-review-wrong { border-left: 4px solid var(--ama-danger); }
.ama-quiz-review-header {
    display: flex;
    align-items: center;
    gap: var(--ama-space-sm);
    font-size: var(--ama-text-sm);
    margin-bottom: var(--ama-space-xs);
}
.ama-quiz-review-result {
    margin-left: auto;
    font-weight: 700;
}
.ama-quiz-review-correct .ama-quiz-review-result { color: var(--ama-success); }
.ama-quiz-review-wrong .ama-quiz-review-result { color: var(--ama-danger); }
.ama-quiz-review-body {
    font-size: var(--ama-text-sm);
    color: var(--ama-text-secondary);
    margin-bottom: var(--ama-space-sm);
    line-height: 1.4;
}
.ama-quiz-review-answers {
    font-size: var(--ama-text-sm);
    display: flex;
    flex-direction: column;
    gap: var(--ama-space-xs);
}

/* ============================================================
   LEARNING DASHBOARD
   ============================================================ */

/* Dashboard container */
.ama-dash { max-width: 960px; }

/* Greeting header */
.ama-dash-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--ama-space-md); margin-bottom: var(--ama-space-xl);
}
.ama-dash-header-text { flex: 1; }
.ama-dash-greeting {
    font-size: var(--ama-text-2xl); font-weight: 700; margin: 0; color: var(--ama-text);
}
.ama-dash-date {
    font-size: var(--ama-text-sm); color: var(--ama-text-muted); margin: 4px 0 0 0;
}
.ama-dash-avatar {
    width: 72px; height: 72px; object-fit: contain; flex-shrink: 0;
}

/* Top grid: continue + stats side-by-side */
.ama-dash-top-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--ama-space-lg);
    margin-bottom: var(--ama-space-xl);
}
.ama-dash-top-left { display: flex; flex-direction: column; }
.ama-dash-top-left .ama-continue-hero { flex: 1; margin-bottom: 0; }
.ama-dash-top-right { display: flex; flex-direction: column; }

/* Stats grid (2x2 inside top-right) */
.ama-dash-stats {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--ama-space-sm); flex: 1;
}
.ama-dash-stat-card {
    background: var(--ama-surface); border: 1px solid var(--ama-border); border-radius: 12px;
    padding: var(--ama-space-md); text-align: center;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.ama-dash-stat-icon { font-size: 1.3rem; margin-bottom: 2px; }
.ama-dash-stat-value { font-size: 1.6rem; font-weight: 800; color: var(--ama-brand); line-height: 1; }
.ama-dash-stat-label { font-size: var(--ama-text-xs); color: var(--ama-text-muted); margin-top: 2px; }

/* Section */
.ama-dash-section { margin-bottom: var(--ama-space-lg); }
.ama-dash-section-title {
    font-size: 1.05rem; font-weight: 700; margin: 0 0 var(--ama-space-md) 0;
    padding-bottom: var(--ama-space-xs); border-bottom: 2px solid var(--ama-border-light); color: var(--ama-text);
}
.ama-dash-empty { color: var(--ama-text-muted); font-style: italic; }
.ama-dash-subject-pct { font-weight: 700; font-size: var(--ama-text-sm); }

/* Bottom grid: attention + activity */
.ama-dash-bottom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ama-space-lg); }

/* Activity list */
.ama-dash-activity-list { display: flex; flex-direction: column; gap: 0; }
.ama-dash-activity-row {
    display: flex; align-items: center; gap: var(--ama-space-sm);
    padding: var(--ama-space-sm) var(--ama-space-md);
    border-bottom: 1px solid var(--ama-border-light); transition: background 0.12s;
}
.ama-dash-activity-row:last-child { border-bottom: none; }
.ama-dash-activity-row:hover { background: var(--ama-surface-alt); }
.ama-dash-activity-icon { font-size: 1.1rem; flex-shrink: 0; }
.ama-dash-activity-info { flex: 1; min-width: 0; }
.ama-dash-activity-title {
    display: block; font-size: var(--ama-text-sm); font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ama-dash-activity-meta { display: block; font-size: var(--ama-text-xs); color: var(--ama-text-muted); }
.ama-dash-activity-score {
    font-size: var(--ama-text-sm); font-weight: 700; flex-shrink: 0;
    padding: 2px 8px; border-radius: 4px;
}
.ama-dash-activity-score--pass { color: var(--ama-success); background: rgba(46,125,50,0.08); }
.ama-dash-activity-score--fail { color: var(--ama-danger, #d32f2f); background: rgba(211,47,47,0.08); }

/* Skeleton loading */
.ama-dash-skeleton-bar {
    background: var(--ama-border-light); border-radius: 6px;
    animation: ama-skeleton-pulse 1.2s ease-in-out infinite alternate;
}
@keyframes ama-skeleton-pulse { from { opacity: 0.4; } to { opacity: 1; } }

/* Continue hero: empty state */
.ama-continue-hero--empty {
    display: flex; flex-direction: column; align-items: flex-start;
    justify-content: center; border-left: 5px solid var(--ama-border);
}

/* Dashboard responsive */
@media (max-width: 768px) {
    .ama-dash-top-grid { grid-template-columns: 1fr; }
    .ama-dash-bottom-grid { grid-template-columns: 1fr; }
    .ama-dash-avatar { width: 56px; height: 56px; }
    .ama-dash-stats { grid-template-columns: repeat(2, 1fr); }
}

/* Subject cards */
.ama-dash-subject-card {
    background: var(--ama-surface);
    border: 1px solid var(--ama-border);
    border-radius: 12px;
    overflow: hidden;
}
.ama-dash-subject-toggle {
    display: block;
    width: 100%;
    padding: var(--ama-space-md) var(--ama-space-lg);
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-family: var(--ama-font);
    transition: background 0.15s;
}
.ama-dash-subject-toggle:hover {
    background: var(--ama-surface-alt);
}
.ama-dash-subject-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: var(--ama-space-sm);
    margin-bottom: 0;
}
.ama-dash-subject-name {
    font-size: 1.05rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--ama-text);
}
.ama-dash-subject-right {
    display: flex;
    align-items: center;
    gap: var(--ama-space-sm);
}
.ama-dash-subject-meta {
    font-size: var(--ama-text-xs);
    color: var(--ama-text-muted);
}
.ama-dash-chevron {
    display: inline-flex;
    font-size: 12px;
    color: var(--ama-text-muted);
    transition: transform 0.25s ease;
}
.ama-dash-chevron.open {
    transform: rotate(180deg);
}
.ama-dash-unit-list {
    display: flex;
    flex-direction: column;
    gap: var(--ama-space-xs);
    border-top: 1px solid var(--ama-border);
    padding: var(--ama-space-sm) var(--ama-space-lg) var(--ama-space-md);
    animation: ama-accordion-open 0.25s ease-out;
}
@keyframes ama-accordion-open {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ama-dash-unit-row {
    display: flex;
    align-items: center;
    gap: var(--ama-space-md);
    padding: var(--ama-space-xs) 0;
}
.ama-dash-unit-name {
    font-size: var(--ama-text-sm);
    text-decoration: none;
    color: var(--ama-text);
    min-width: 180px;
    flex-shrink: 0;
}
.ama-dash-unit-name:hover { color: var(--ama-brand); }
.ama-dash-unit-progress {
    display: flex;
    align-items: center;
    gap: var(--ama-space-sm);
    flex: 1;
}
.ama-dash-unit-pct {
    font-size: var(--ama-text-xs);
    color: var(--ama-text-muted);
    min-width: 36px;
    text-align: right;
}

/* Continue Learning Hero */
.ama-continue-hero {
    display: block;
    background: var(--ama-surface);
    border: 1px solid var(--ama-border);
    border-radius: 12px;
    padding: var(--ama-space-lg) var(--ama-space-xl);
    margin-bottom: var(--ama-space-xl);
    text-decoration: none;
    color: inherit;
    transition: box-shadow .2s, transform .15s;
}
.ama-continue-hero:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
    transform: translateY(-2px);
}
.ama-continue-label {
    font-size: var(--ama-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ama-text-muted);
    margin-bottom: var(--ama-space-xs);
}
.ama-continue-subject {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--ama-text);
}
.ama-continue-path {
    font-size: var(--ama-text-sm);
    color: var(--ama-text-secondary);
    margin: 2px 0 var(--ama-space-xs) 0;
}
.ama-continue-lesson {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ama-text);
    margin-bottom: var(--ama-space-md);
}
.ama-continue-btn {
    display: inline-block;
    background: var(--ama-brand);
    color: #fff;
    font-weight: 600;
    font-size: var(--ama-text-sm);
    padding: var(--ama-space-xs) var(--ama-space-lg);
    border-radius: 6px;
}

/* XP Progress Bar */
.ama-xp-bar {
    height: 4px;
    background: var(--ama-border-light);
    border-radius: 2px;
    margin-top: var(--ama-space-sm);
    overflow: hidden;
}
.ama-xp-bar-fill {
    height: 100%;
    background: var(--ama-brand);
    border-radius: 2px;
    transition: width .3s;
}
.ama-xp-next {
    font-size: 0.65rem;
    color: var(--ama-text-muted);
    margin-top: 3px;
    text-align: center;
}

/* Daily Goal Pips */
.ama-daily-goal-pips {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-top: var(--ama-space-sm);
}
.ama-goal-pip {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background: var(--ama-border-light);
    transition: background .2s;
}
.ama-goal-pip-done {
    background: var(--ama-success);
}

/* Subject icon in dashboard */
.ama-dash-subject-icon {
    font-size: 1.1rem;
    margin-right: 2px;
}

/* Unit lesson count in dashboard */
.ama-dash-unit-lessons {
    font-size: var(--ama-text-xs);
    color: var(--ama-text-muted);
    min-width: 40px;
    text-align: center;
    flex-shrink: 0;
}

/* Alert boxes */
.ama-alert {
    padding: var(--ama-space-md);
    border-radius: 8px;
    font-size: var(--ama-text-sm);
    line-height: 1.4;
}
.ama-alert-warning {
    background: #fef3cd;
    color: #856404;
    border: 1px solid #ffc107;
}
.ama-alert-info {
    background: #d1ecf1;
    color: #0c5460;
    border: 1px solid #17a2b8;
}
.ama-alert-success {
    background: #d8f3dc;
    color: #2d6a4f;
    border: 1px solid var(--ama-success);
}

/* Best score summary */
.ama-quiz-best-score {
    display: flex;
    align-items: center;
    gap: var(--ama-space-sm);
    padding: var(--ama-space-sm) var(--ama-space-md);
    background: var(--ama-surface-alt);
    border-radius: 8px;
    font-size: var(--ama-text-sm);
    margin-bottom: var(--ama-space-md);
}

/* Recommendation cards */
.ama-reco-list {
    display: flex;
    flex-direction: column;
    gap: var(--ama-space-sm);
}
.ama-reco-card {
    display: flex;
    align-items: center;
    gap: var(--ama-space-md);
    padding: var(--ama-space-md);
    background: var(--ama-surface);
    border: 1px solid var(--ama-border-light);
    border-radius: 10px;
    text-decoration: none;
    color: var(--ama-text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ama-reco-card:hover {
    border-color: var(--ama-brand-light);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.ama-reco-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}
.ama-reco-content { flex: 1; min-width: 0; }
.ama-reco-title {
    font-weight: 600;
    font-size: var(--ama-text-sm);
    margin-bottom: 2px;
}
.ama-reco-reason {
    font-size: var(--ama-text-xs);
    color: var(--ama-text-muted);
    line-height: 1.3;
}
.ama-reco-badge {
    font-size: var(--ama-text-xs);
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-weight: 600;
    flex-shrink: 0;
}
.ama-reco-badge-quiz {
    background: #e8daef;
    color: #6c3483;
}
.ama-reco-badge-practice {
    background: #d1ecf1;
    color: #0c5460;
}
.ama-reco-badge-review {
    background: #fef3cd;
    color: #856404;
}

/* ── Mistake Intelligence: Quiz Feedback Cards ── */
.ama-quiz-feedback {
    margin-top: var(--ama-space-sm);
    padding: var(--ama-space-sm) var(--ama-space-md);
    border-radius: 6px;
    font-size: var(--ama-text-sm);
    line-height: 1.5;
}
.ama-quiz-feedback-correct {
    background: #d8f3dc;
    border-left: 3px solid var(--ama-success);
}
.ama-quiz-feedback-classified {
    background: #fff3cd;
    border-left: 3px solid #ffc107;
}
.ama-quiz-feedback-generic {
    background: #f8d7da;
    border-left: 3px solid var(--ama-danger, #dc3545);
}
.ama-quiz-feedback-title {
    font-weight: 700;
    margin-bottom: 4px;
}
.ama-quiz-feedback-message {
    margin: 0 0 4px;
    color: var(--ama-text-secondary);
}
.ama-quiz-feedback-hint {
    background: rgba(255,255,255,.5);
    padding: 6px 10px;
    border-radius: 4px;
    margin-top: 6px;
    font-size: var(--ama-text-xs);
}
.ama-quiz-feedback-actions {
    display: flex;
    gap: var(--ama-space-sm);
    margin-top: 8px;
}
.ama-quiz-feedback-action {
    font-size: var(--ama-text-xs);
    color: var(--ama-brand);
    cursor: pointer;
    text-decoration: underline;
    font-weight: 600;
}

/* ── Dashboard: Needs Attention Block ── */
.ama-needs-attention {
    margin-top: var(--ama-space-lg);
}
.ama-needs-attention h3 {
    font-size: 1rem;
    margin-bottom: var(--ama-space-sm);
}
.ama-weak-skill-card {
    display: flex;
    align-items: center;
    gap: var(--ama-space-sm);
    padding: var(--ama-space-sm) var(--ama-space-md);
    background: #fff3cd;
    border-left: 3px solid #ffc107;
    border-radius: 6px;
    margin-bottom: var(--ama-space-xs);
    font-size: var(--ama-text-sm);
}
.ama-weak-skill-subject {
    font-weight: 700;
    min-width: 100px;
}
.ama-weak-skill-desc {
    color: var(--ama-text-secondary);
    flex: 1;
}
.ama-weak-skill-count {
    font-size: var(--ama-text-xs);
    color: var(--ama-text-muted);
    white-space: nowrap;
}

/* ── Exam Paper List ── */
.ama-exam-paper-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: var(--ama-space-md);
    margin-bottom: var(--ama-space-lg);
}
.ama-exam-paper-card {
    border: 1px solid var(--ama-border);
    border-radius: var(--ama-radius);
    padding: var(--ama-space-md);
    background: var(--ama-surface);
    display: flex;
    flex-direction: column;
    gap: var(--ama-space-sm);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.ama-exam-paper-card:hover {
    border-color: var(--ama-brand);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.ama-exam-paper-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--ama-space-sm);
}
.ama-exam-paper-card-title {
    margin: 0;
    font-size: var(--ama-text-base);
}
.ama-exam-paper-card-meta {
    display: flex;
    gap: var(--ama-space-md);
    font-size: var(--ama-text-sm);
    color: var(--ama-text-secondary);
}
.ama-exam-paper-card-footer {
    display: flex;
    gap: var(--ama-space-sm);
    margin-top: auto;
}

/* ── Exam Paper Practice ── */
.ama-ep-header {
    display: flex;
    align-items: center;
    gap: var(--ama-space-md);
    margin-bottom: var(--ama-space-md);
}
.ama-ep-question-tabs {
    display: flex;
    gap: var(--ama-space-xs);
    overflow-x: auto;
    padding-bottom: var(--ama-space-xs);
    margin-bottom: var(--ama-space-md);
    border-bottom: 2px solid var(--ama-border);
}
.ama-ep-question-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: var(--ama-space-xs) var(--ama-space-sm);
    border: 1px solid var(--ama-border);
    border-bottom: none;
    border-radius: var(--ama-radius) var(--ama-radius) 0 0;
    background: var(--ama-surface-alt);
    cursor: pointer;
    font-size: var(--ama-text-sm);
    font-weight: 600;
    min-width: 60px;
    transition: background 0.15s, border-color 0.15s;
}
.ama-ep-question-tab:hover { background: var(--ama-surface); }
.ama-ep-question-tab.active {
    background: var(--ama-surface);
    border-color: var(--ama-brand);
    color: var(--ama-brand);
    border-bottom: 2px solid var(--ama-surface);
    margin-bottom: -2px;
}
.ama-ep-question-tab.complete { color: var(--ama-success); }
.ama-ep-tab-progress {
    font-size: var(--ama-text-xs);
    color: var(--ama-text-muted);
    font-weight: 400;
}
.ama-ep-question-area {
    background: var(--ama-surface);
    border: 1px solid var(--ama-border);
    border-radius: var(--ama-radius);
    padding: var(--ama-space-lg);
}
.ama-ep-question-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--ama-space-md);
    margin-bottom: var(--ama-space-md);
    flex-wrap: wrap;
}
.ama-ep-question-header h3 { margin: 0; }
.ama-ep-part {
    border: 1px solid var(--ama-border);
    border-radius: var(--ama-radius);
    padding: var(--ama-space-md);
    margin-bottom: var(--ama-space-md);
    background: var(--ama-surface-alt);
    transition: border-color 0.2s;
}
.ama-ep-part.answered-correct { border-left: 3px solid var(--ama-success); }
.ama-ep-part.answered-incorrect { border-left: 3px solid var(--ama-danger); }
.ama-ep-part.has-answer { border-left: 3px solid var(--ama-warning); }
.ama-ep-part-header {
    display: flex;
    align-items: center;
    gap: var(--ama-space-sm);
    margin-bottom: var(--ama-space-sm);
}
.ama-ep-part-label {
    font-weight: 700;
    font-size: var(--ama-text-base);
    color: var(--ama-brand);
}
.ama-ep-part-marks {
    font-size: var(--ama-text-sm);
    color: var(--ama-text-muted);
}
.ama-ep-part-prompt {
    margin-bottom: var(--ama-space-sm);
    line-height: 1.6;
}
.ama-ep-info-tables {
    margin-bottom: var(--ama-space-md);
}
.ama-ep-info-block {
    background: var(--ama-surface);
    border: 1px solid var(--ama-border);
    border-radius: var(--ama-radius);
    padding: var(--ama-space-sm);
    margin-bottom: var(--ama-space-sm);
}
.ama-ep-data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ama-text-sm);
}
.ama-ep-data-table th,
.ama-ep-data-table td {
    padding: var(--ama-space-xs) var(--ama-space-sm);
    border: 1px solid var(--ama-border);
    text-align: left;
}
.ama-ep-data-table th {
    background: var(--ama-surface-alt);
    font-weight: 600;
}
.ama-ep-info-list {
    padding-left: var(--ama-space-lg);
    font-size: var(--ama-text-sm);
    line-height: 1.7;
}
.ama-ep-info-list li { margin-bottom: var(--ama-space-xs); }

/* Guided mode: two-column layout (question left, guidance right) */
.ama-ep-part-guided {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: var(--ama-space-md);
    align-items: start;
}
@media (max-width: 900px) {
    .ama-ep-part-guided {
        grid-template-columns: 1fr;
    }
}
.ama-ep-part-main { min-width: 0; }

/* Guidance side panel */
.ama-ep-guidance-panel {
    background: linear-gradient(135deg, #f0f7ff 0%, #faf5ff 100%);
    border: 1px solid #c7d2fe;
    border-radius: var(--ama-radius);
    padding: var(--ama-space-md);
    position: sticky;
    top: var(--ama-space-md);
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}
.ama-ep-guidance-header {
    display: flex;
    align-items: center;
    gap: var(--ama-space-xs);
    margin-bottom: var(--ama-space-md);
    padding-bottom: var(--ama-space-xs);
    border-bottom: 2px solid #c7d2fe;
}
.ama-ep-guidance-icon { font-size: 1.4rem; }
.ama-ep-guidance-title {
    font-weight: 700;
    font-size: var(--ama-text-base);
    color: #4338ca;
}

/* Individual guide step cards */
.ama-ep-guide-step {
    background: #fff;
    border: 1px solid #e0e7ff;
    border-radius: var(--ama-radius);
    padding: var(--ama-space-sm);
    margin-bottom: var(--ama-space-sm);
    border-left: 3px solid #6366f1;
}
.ama-ep-guide-step.tip {
    border-left-color: #f59e0b;
    background: #fffbeb;
    border-color: #fde68a;
}
.ama-ep-guide-step-header {
    display: flex;
    align-items: center;
    gap: var(--ama-space-xs);
    margin-bottom: var(--ama-space-xs);
}
.ama-ep-guide-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #6366f1;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
    letter-spacing: 0.02em;
}
.ama-ep-guide-badge.tip {
    background: #f59e0b;
    color: #fff;
}
.ama-ep-guide-step-title {
    font-weight: 600;
    font-size: var(--ama-text-sm);
    color: var(--ama-text-primary);
}
.ama-ep-guide-step-body {
    font-size: var(--ama-text-sm);
    color: var(--ama-text-secondary);
    line-height: 1.65;
}
.ama-ep-guide-step-body p {
    margin: 0 0 var(--ama-space-xs) 0;
}
.ama-ep-guide-step-body p:last-child { margin-bottom: 0; }

.ama-ep-hints { margin-bottom: var(--ama-space-sm); }
.ama-ep-hint-card {
    background: #fefce8;
    border: 1px solid #fde68a;
    border-radius: var(--ama-radius);
    padding: var(--ama-space-sm);
    margin-bottom: var(--ama-space-xs);
    font-size: var(--ama-text-sm);
}
.ama-ep-answer-input {
    display: flex;
    gap: var(--ama-space-sm);
    align-items: center;
    margin-top: var(--ama-space-sm);
}
.ama-ep-answer-input .ama-input {
    flex: 1;
    padding: var(--ama-space-xs) var(--ama-space-sm);
    border: 1px solid var(--ama-border);
    border-radius: var(--ama-radius);
    font-size: var(--ama-text-sm);
}
.ama-ep-result {
    margin-top: var(--ama-space-sm);
    border-radius: var(--ama-radius);
    padding: var(--ama-space-sm);
    font-size: var(--ama-text-sm);
}
.ama-ep-result.correct {
    background: #f0fdf4;
    border: 1px solid #86efac;
}
.ama-ep-result.incorrect {
    background: #fef2f2;
    border: 1px solid #fca5a5;
}
.ama-ep-result-header {
    display: flex;
    align-items: center;
    gap: var(--ama-space-sm);
    font-weight: 600;
    flex-wrap: wrap;
}
.ama-ep-result-feedback { font-weight: 400; color: var(--ama-text-secondary); }
.ama-ep-memo {
    margin-top: var(--ama-space-xs);
    padding: var(--ama-space-xs);
    background: rgba(0,0,0,0.03);
    border-radius: var(--ama-radius);
}
.ama-ep-worked-solution {
    margin-top: var(--ama-space-xs);
    padding: var(--ama-space-sm);
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: var(--ama-radius);
}
.ama-ep-common-mistake {
    margin-top: var(--ama-space-xs);
    padding: var(--ama-space-sm);
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: var(--ama-radius);
    font-size: var(--ama-text-sm);
}
.ama-ep-exam-technique {
    margin-top: var(--ama-space-xs);
    padding: var(--ama-space-sm);
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: var(--ama-radius);
    font-size: var(--ama-text-sm);
}

/* ── Vraebank poem split view ─────────────────────────────────────────────
   For "gedig" banks that carry the poem text: poem stays put on the left,
   the question/options/feedback update on the right. Collapses to one column
   on narrow screens. */
.ama-vb-split {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: var(--ama-space-lg);
    align-items: start;
}
.ama-vb-poem {
    position: sticky;
    top: var(--ama-space-md);
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    background: var(--ama-surface);
    border: 1px solid var(--ama-border);
    border-radius: var(--ama-radius);
    padding: var(--ama-space-md);
}
.ama-vb-poem-title {
    font-size: var(--ama-text-sm);
    font-weight: 700;
    margin: 0 0 var(--ama-space-sm) 0;
    color: var(--ama-text-secondary);
}
.ama-vb-poem-text {
    white-space: pre-wrap;
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
    color: var(--ama-text-primary);
}
.ama-vb-quiz { min-width: 0; }
@media (max-width: 900px) {
    .ama-vb-split { grid-template-columns: 1fr; }
    .ama-vb-poem { position: static; max-height: 320px; }
}

/* Results page */
.ama-ep-results-detail { margin-top: var(--ama-space-lg); }
.ama-ep-result-question {
    margin-bottom: var(--ama-space-lg);
    border: 1px solid var(--ama-border);
    border-radius: var(--ama-radius);
    padding: var(--ama-space-md);
}
.ama-ep-result-question h3 {
    display: flex;
    align-items: center;
    gap: var(--ama-space-sm);
    margin: 0 0 var(--ama-space-sm) 0;
}
.ama-badge-success { background: #dcfce7; color: #166534; }
.ama-badge-warning { background: #fef9c3; color: #854d0e; }
.ama-ep-result-answer {
    padding: var(--ama-space-sm);
    margin-bottom: var(--ama-space-xs);
    border-radius: var(--ama-radius);
    font-size: var(--ama-text-sm);
}
.ama-ep-result-answer.correct { background: #f0fdf4; }
.ama-ep-result-answer.incorrect { background: #fef2f2; }
.ama-ep-result-answer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--ama-space-xs);
}
.ama-ep-result-answer-prompt {
    color: var(--ama-text-secondary);
    margin: 0 0 var(--ama-space-xs) 0;
}
.ama-ep-result-feedback-text {
    color: var(--ama-text-secondary);
    font-style: italic;
}
.ama-btn-sm {
    padding: var(--ama-space-xs) var(--ama-space-sm);
    font-size: var(--ama-text-sm);
}

/* ============================================================
   EXAM-PREP — Rich answer entry + guided steps + planner
   ============================================================ */

/* Container for the multi-element answer entry (textarea + meter + actions). */
.ama-ep-answer-input--rich {
    display: flex;
    flex-direction: column;
    gap: var(--ama-space-sm);
    margin-top: var(--ama-space-sm);
}

/* Marks-aware textarea. Width fills available column; height set per-render
   via `rows="N"` derived from the part's mark allocation. */
.ama-ep-answer-textarea {
    width: 100%;
    min-height: 4rem;
    line-height: 1.55;
    font-family: var(--ama-font);
    font-size: var(--ama-text-base);
    padding: var(--ama-space-sm);
    border: 1px solid var(--ama-border);
    border-radius: var(--ama-radius);
    background: #fff;
    resize: vertical;
    box-sizing: border-box;
}
.ama-ep-answer-textarea:focus {
    outline: 2px solid var(--ama-brand);
    outline-offset: 1px;
    border-color: var(--ama-brand);
}

/* Live word + line counter, with a marks-derived soft target on the right. */
.ama-ep-answer-meter {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--ama-space-xs);
    font-size: 0.85rem;
    color: var(--ama-text-secondary);
    padding: 0 4px;
}
.ama-ep-meter-text { font-weight: 500; }
.ama-ep-meter-target { font-style: italic; opacity: 0.85; }

.ama-ep-answer-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--ama-space-sm);
}

/* Plan-your-points scratchpad (collapsible, marks >= 3). Notes here are
   local-only — they aren't submitted with the answer. */
.ama-ep-planner {
    border: 1px dashed var(--ama-border);
    border-radius: var(--ama-radius);
    background: var(--ama-surface);
}
.ama-ep-planner-toggle {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: var(--ama-space-sm);
    font-weight: 600;
    cursor: pointer;
    color: var(--ama-brand);
    font-size: var(--ama-text-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ama-ep-planner-toggle:hover { background: var(--ama-brand-subtle); }
.ama-ep-planner-body {
    padding: 0 var(--ama-space-sm) var(--ama-space-sm) var(--ama-space-sm);
    display: flex;
    flex-direction: column;
    gap: var(--ama-space-xs);
}
.ama-ep-planner-row {
    display: flex;
    align-items: center;
    gap: var(--ama-space-xs);
}
.ama-ep-planner-num {
    min-width: 1.6em;
    color: var(--ama-brand);
    font-weight: 700;
}
.ama-ep-planner-input { flex: 1; }
.ama-ep-planner-hint {
    margin: var(--ama-space-xs) 0 0 0;
    font-size: 0.8rem;
    color: var(--ama-text-secondary);
    font-style: italic;
}

/* Guided-steps checklist (auto-derived from prompt + marks). Renders above
   the hint button and answer entry; items are tickable for self-pacing. */
.ama-ep-steps {
    margin-bottom: var(--ama-space-sm);
    border: 1px solid var(--ama-border);
    border-left: 3px solid var(--ama-brand);
    border-radius: var(--ama-radius);
    background: #fff;
}
.ama-ep-steps-toggle {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: var(--ama-space-sm) var(--ama-space-md);
    font-weight: 600;
    cursor: pointer;
    color: var(--ama-text-primary);
    font-size: var(--ama-text-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ama-ep-steps-toggle:hover { background: var(--ama-brand-subtle); }
.ama-ep-steps-list {
    margin: 0;
    padding: 0 var(--ama-space-md) var(--ama-space-sm) var(--ama-space-md);
    list-style: none;
}
.ama-ep-step { margin-bottom: 2px; }
.ama-ep-step-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    line-height: 1.4;
}
.ama-ep-step-label:hover { background: var(--ama-surface); }
.ama-ep-step-label input[type="checkbox"] {
    margin-top: 3px;
    flex-shrink: 0;
    cursor: pointer;
}
.ama-ep-step-text { flex: 1; }
.ama-ep-step--done .ama-ep-step-text {
    text-decoration: line-through;
    opacity: 0.6;
}

/* ----- Interactive exam step-solver (guided calculations) ----- */
.ama-ep-stepsolver { margin-bottom: var(--ama-space-sm); }
.ama-ep-stepsolver-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--ama-space-sm);
    margin-bottom: var(--ama-space-xs);
    flex-wrap: wrap;
}
.ama-ep-stepsolver-badge {
    font-weight: 700;
    font-size: var(--ama-text-sm);
    color: var(--ama-brand);
}
.ama-ep-stepsolver-progress {
    font-size: var(--ama-text-xs);
    color: var(--ama-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ama-ep-stepsolver-card { border-left: 4px solid var(--ama-brand); }
.ama-ep-stepsolver-prompt {
    display: flex;
    align-items: flex-start;
    gap: var(--ama-space-sm);
    margin-bottom: var(--ama-space-sm);
}
.ama-ep-stepsolver-prompt p {
    margin: 0;
    font-weight: 600;
    font-size: var(--ama-text-lg);
    line-height: 1.4;
}

/* ----- Subjects page: category group headers ----- */
.ama-subjects-group-title {
    margin: var(--ama-space-xl) 0 var(--ama-space-md);
    font-size: var(--ama-text-xl);
    font-weight: 700;
    color: var(--ama-text);
    border-bottom: 2px solid var(--ama-border);
    padding-bottom: var(--ama-space-xs);
}
.ama-subjects-group-title:first-of-type { margin-top: var(--ama-space-md); }
.ama-subjects-group-grid { margin-bottom: var(--ama-space-lg); }

/* ============================================================
   LANGUAGE SWITCHER  –  "circled by pen" style
   ============================================================ */

.ama-lang-switcher {
    display: inline-flex;
    align-items: center;
    gap: 0;
    margin-left: var(--ama-space-sm);
}
.ama-lang-sep {
    color: var(--ama-border);
    font-size: 14px;
    font-weight: 300;
    -webkit-user-select: none;
    user-select: none;
    line-height: 1;
}
.ama-lang-switcher-option {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 0;
    font-family: var(--ama-font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: color 0.2s ease;
    background: transparent;
    color: var(--ama-text-secondary);
    line-height: 1;
    padding: 0;
}
.ama-lang-switcher-option:hover {
    color: var(--ama-text);
}

/* The hand-drawn circle — an SVG outline that looks sketchy */
.ama-lang-switcher-option.active {
    color: var(--ama-brand);
    font-weight: 800;
}
.ama-lang-switcher-option.active::after {
    content: "";
    position: absolute;
    inset: -3px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44' fill='none'%3E%3Cpath d='M22 4C12 3.5 4 10 3.5 21c-.5 11 8 18.5 18.5 19s18-7 18.5-18S32 4.5 22 4z' stroke='%232F6B53' stroke-width='2.2' stroke-linecap='round' fill='none' opacity='0.85'/%3E%3C/svg%3E") no-repeat center/contain;
    pointer-events: none;
    animation: ama-pen-circle 0.3s ease-out;
}
@keyframes ama-pen-circle {
    from { opacity: 0; transform: scale(0.6) rotate(-12deg); }
    to   { opacity: 1; transform: scale(1)   rotate(0deg); }
}

/* ============================================================
   THEME TOGGLE
   ============================================================ */
.ama-theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    font-family: var(--ama-font);
}
.ama-theme-toggle-track {
    display: flex;
    align-items: center;
    width: 48px;
    height: 26px;
    border-radius: 13px;
    background: var(--ama-surface-alt);
    border: 2px solid var(--ama-border);
    position: relative;
    transition: background 0.25s ease, border-color 0.25s ease;
}
.ama-theme-toggle:hover .ama-theme-toggle-track {
    border-color: var(--ama-brand);
}
.ama-theme-toggle-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--ama-surface);
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    position: absolute;
    left: 2px;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ama-theme-toggle--dark .ama-theme-toggle-track {
    background: var(--ama-brand);
    border-color: var(--ama-brand);
}
.ama-theme-toggle--dark .ama-theme-toggle-thumb {
    transform: translateX(22px);
}
.ama-theme-toggle-icon {
    font-size: 12px;
    line-height: 1;
}

/* ============================================================
   NAV MORE DROPDOWN
   ============================================================ */
.ama-nav-more {
    position: relative;
}
.ama-nav-more-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--ama-font);
}
.ama-nav-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 200px;
    background: var(--ama-surface);
    border: 1px solid var(--ama-border);
    border-radius: var(--ama-radius);
    box-shadow: var(--ama-shadow-lg);
    padding: var(--ama-space-xs) 0;
    z-index: 200;
    animation: ama-dropdown-in 0.12s ease-out;
}
@keyframes ama-dropdown-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
.ama-nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--ama-space-xs);
    padding: var(--ama-space-sm) var(--ama-space-md);
    font-size: var(--ama-text-sm);
    color: var(--ama-text);
    text-decoration: none;
    transition: background 0.1s ease;
}
.ama-nav-dropdown-item:hover {
    background: var(--ama-surface-alt);
    text-decoration: none;
}
.ama-nav-dropdown-item--muted {
    color: var(--ama-text-muted);
}
.ama-nav-dropdown-sep {
    border: none;
    border-top: 1px solid var(--ama-border-light);
    margin: var(--ama-space-xs) 0;
}

/* ---- Mobile header dropdown: full-width tap targets, separators, inline "More" ---- */
@media (max-width: 860px) {
    .ama-header-collapse .ama-nav-link:not(.ama-nav-btn) {
        display: block;
        width: 100%;
        padding: 12px 2px;
        font-size: var(--ama-text-base);
        color: var(--ama-text);
        border-bottom: 1px solid var(--ama-border-light);
    }
    .ama-header-collapse .ama-nav-link:not(.ama-nav-btn):hover { color: var(--ama-brand); }

    /* primary/outline buttons (e.g. Log In) -> full-width button below the links */
    .ama-header-collapse .ama-nav-btn {
        display: block;
        width: 100%;
        text-align: center;
        margin-top: var(--ama-space-md);
    }

    /* "More" expands inline instead of as an absolute overlay */
    .ama-header-collapse .ama-nav-more { position: static; width: 100%; }
    /* needs .ama-nav-link in the selector to beat the link rule above (same specificity, later wins) */
    .ama-header-collapse .ama-nav-link.ama-nav-more-toggle {
        text-align: left;
        color: var(--ama-text);
    }
    .ama-header-collapse .ama-nav-dropdown {
        position: static;
        min-width: 0;
        width: 100%;
        border: none;
        box-shadow: none;
        border-radius: 0;
        padding: 0;
        background: transparent;
    }
    .ama-header-collapse .ama-nav-dropdown-item {
        padding: 11px 2px 11px var(--ama-space-md);
        font-size: var(--ama-text-base);
        border-bottom: 1px solid var(--ama-border-light);
    }
    .ama-header-collapse .ama-nav-dropdown-sep { display: none; }
}

/* ============================================================
   MOBILE-FIRST RESPONSIVE — Exam Practice & General UI
   ============================================================ */

/* Small screens (phones) */
@media (max-width: 640px) {
    /* Global spacing & typography */
    .ama-content { padding: var(--ama-space-sm); }
    h1 { font-size: 1.35rem; }
    h2 { font-size: 1.15rem; }
    h3 { font-size: 1rem; }

    /* Breadcrumb — compact */
    .am-breadcrumb { font-size: var(--ama-text-sm); gap: var(--ama-space-xs); flex-wrap: wrap; }

    /* Mascot — smaller or hidden on mobile */
    .am-mascot { display: none; }

    /* Exam paper cards — single column */
    .ama-exam-paper-grid {
        grid-template-columns: 1fr !important;
        gap: var(--ama-space-sm);
    }
    .ama-exam-paper-card { padding: var(--ama-space-sm); }
    .ama-exam-paper-card-meta {
        flex-direction: column;
        gap: var(--ama-space-xs);
        font-size: var(--ama-text-sm);
    }

    /* Question tabs — horizontal scroll */
    .ama-ep-question-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        padding-bottom: var(--ama-space-xs);
        gap: var(--ama-space-xs);
    }
    .ama-ep-question-tabs button {
        white-space: nowrap;
        min-width: 48px;
        font-size: var(--ama-text-sm);
        padding: var(--ama-space-xs) var(--ama-space-sm);
    }

    /* Question area — less padding */
    .ama-ep-question-area { padding: var(--ama-space-sm); }
    .ama-ep-question-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--ama-space-xs);
    }

    /* Part cards — tighter */
    .ama-ep-part { padding: var(--ama-space-sm); }
    .ama-ep-part-header { flex-wrap: wrap; }

    /* Guided two-column → single column */
    .ama-ep-part-guided {
        grid-template-columns: 1fr !important;
    }

    /* Guidance panel — not sticky on mobile, full width */
    .ama-ep-guidance-panel {
        position: static;
        max-height: none;
        margin-top: var(--ama-space-sm);
    }

    /* Data tables — horizontal scroll wrapper */
    .ama-ep-info-tables { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .ama-ep-data-table { font-size: 0.75rem; min-width: 320px; }
    .ama-ep-data-table th,
    .ama-ep-data-table td { padding: 4px 6px; }

    /* Answer input — stack vertically */
    .ama-ep-answer-input {
        flex-direction: column;
        align-items: stretch;
    }
    .ama-ep-answer-input .ama-btn {
        width: 100%;
        justify-content: center;
    }

    /* Result cards */
    .ama-ep-result-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--ama-space-xs);
    }

    /* Score card */
    .ama-ep-score-card {
        padding: var(--ama-space-md);
    }

    /* Results detail */
    .ama-ep-result-question { padding: var(--ama-space-sm); }
    .ama-ep-result-answer-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--ama-space-xs);
    }

    /* Panels & buttons */
    .ama-panel { padding: var(--ama-space-sm) !important; }
    .ama-btn {
        padding: var(--ama-space-xs) var(--ama-space-md);
        font-size: var(--ama-text-sm);
    }

    /* Info blocks */
    .ama-ep-info-block { padding: var(--ama-space-xs); }

    /* Guide steps — compact */
    .ama-ep-guide-step { padding: var(--ama-space-xs) var(--ama-space-sm); }
    .ama-ep-guide-step-body { font-size: 0.8rem; }

    /* Hint cards */
    .ama-ep-hint-card { padding: var(--ama-space-xs) var(--ama-space-sm); font-size: 0.8rem; }

    /* Textarea answers — bigger touch target */
    .ama-ep-answer-input textarea {
        min-height: 80px;
        font-size: 16px; /* prevents iOS zoom */
    }
    .ama-ep-answer-input .ama-input {
        font-size: 16px; /* prevents iOS zoom */
        padding: var(--ama-space-sm);
    }
}

/* Medium screens (tablets) */
@media (min-width: 641px) and (max-width: 900px) {
    .ama-exam-paper-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .ama-ep-part-guided {
        grid-template-columns: 1fr !important;
    }
    .ama-ep-guidance-panel {
        position: static;
        max-height: none;
    }
    .am-mascot { width: 80px; height: auto; }
}

/* Touch-friendly tap targets */
@media (pointer: coarse) {
    .ama-btn { min-height: 44px; }
    .ama-ep-question-tabs button { min-height: 44px; }
    .ama-ep-answer-input .ama-input { min-height: 44px; }
    a.ama-exam-paper-card { min-height: 80px; }
}

/* ── Print Button ── */
.ama-question-top-bar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ama-space-md);
}
.ama-question-top-bar > :first-child {
    flex: 1;
}
.ama-print-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid var(--ama-border);
    border-radius: var(--ama-radius-sm);
    background: var(--ama-surface);
    color: var(--ama-text-secondary);
    font-size: var(--ama-text-sm);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
.ama-print-btn:hover {
    background: var(--ama-surface-alt);
    color: var(--ama-text);
}

/* ── Print Styles ── */
@media print {
    /* Hide non-content elements */
    .ama-navbar, .am-breadcrumb, .ama-print-btn,
    .ama-reveal-trigger, .ama-mode-toggle,
    .ama-back-nav, .ama-question-top-bar .ama-print-btn,
    .ama-reward-card, .ama-celebration,
    .ama-course-sidebar, .ama-sidebar-toggle, .ama-sidebar-close,
    footer, .blazor-error-boundary {
        display: none !important;
    }

    /* CourseWorkspace layout — full width, no sidebar grid */
    .ama-course-shell {
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
    }
    .ama-course-content {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Full width, no padding */
    body, .ama-content {
        margin: 0 !important;
        padding: 0 !important;
        max-width: 100% !important;
    }

    /* Show all reveal content */
    .ama-reveal-content {
        display: block !important;
    }

    /* Clean panel borders for print */
    .ama-panel, .ama-memo-section, .ama-qbody-table,
    .ama-hint-panel, .ama-worked-step-card {
        break-inside: avoid;
        box-shadow: none !important;
    }

    /* Keep tables together */
    .ama-memo-row, .ama-qbody-table-row {
        break-inside: avoid;
    }

    /* Section headers always at top of page if near break */
    .ama-memo-section-title {
        break-after: avoid;
    }

    /* Ensure backgrounds print */
    .ama-memo-row--total, .ama-memo-section-title,
    .ama-hint-panel, .ama-math-block {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Compact spacing */
    .ama-panel { margin-bottom: 12px; }
    .ama-worked-step-card { margin-bottom: 8px; }

    /* ── Lesson page print ── */

    /* A4 page setup */
    @page { size: A4 portrait; margin: 15mm 12mm 15mm 12mm; }

    /* Hide chrome only — keep everything else as-is */
    .ama-header, .ama-footer,
    .ama-lesson-sidebar, .ama-lsb-toggle, .ama-lsb-backdrop, .ama-lsb-footer,
    .ama-lesson-nav-footer, .ama-lesson-nav-bottom,
    .ama-lesson-progress-bar, .ama-lesson-print-btn,
    .ama-practice-launch, .ama-quiz-intro, .ama-quiz-finish, .ama-quiz-results,
    .ama-checklist-progress, .ama-checklist-cb,
    .ama-difficulty-pill,
    #blazor-error-ui { display: none !important; }

    /* Full-width layout */
    body { margin: 0; padding: 0; }
    .ama-page { padding: 0 !important; margin: 0 !important; }
    .ama-lesson-shell { display: block !important; padding: 0 !important; margin: 0 !important; max-width: 100% !important; }
    .ama-lesson-content { max-width: 100% !important; width: 100% !important; margin: 0 !important; padding: 0 12pt !important; }

    /* Force browser to print all backgrounds and colours */
    * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

    /* Page-break helpers */
    .ama-lesson-block, .ama-tip-card, .ama-callout,
    .ama-device-card, .ama-place-card, .ama-info-banner,
    .ama-spec-table, .ama-fmt-table { break-inside: avoid; }

    /* Remove shadows (they don't print well) */
    .ama-lesson-block, .ama-tip-card, .ama-callout,
    .ama-device-card, .ama-place-card { box-shadow: none !important; }

    /* Tables: ensure they don't overflow the page */
    table { max-width: 100% !important; }
    svg { max-width: 100% !important; height: auto !important; }

    /* Checklist items: show text cleanly without checkbox */
    .ama-checklist-item { background: none !important; }
}
/* ===== DAILY QUIZ & LEADERBOARD ===== */
.ama-dq-hero { text-align:center; padding:var(--ama-space-xl) 0 var(--ama-space-lg); }
.ama-dq-hero-icon { font-size:3rem; margin-bottom:var(--ama-space-sm); }
.ama-dq-hero h1 { margin:0 0 var(--ama-space-xs); }
.ama-dq-hero-sub { color:var(--ama-text-muted); max-width:400px; margin:0 auto; }

.ama-dq-score-card { background:var(--ama-card-bg); border-radius:var(--ama-radius-lg); padding:var(--ama-space-lg); text-align:center; box-shadow:var(--ama-shadow-sm); }
.ama-dq-score-big { font-size:2.5rem; font-weight:800; color:var(--ama-primary); }
.ama-dq-score-label { font-size:1rem; font-weight:400; }
.ama-dq-score-details { display:flex; justify-content:center; gap:var(--ama-space-lg); margin-top:var(--ama-space-md); }
.ama-dq-stat { display:flex; flex-direction:column; align-items:center; }
.ama-dq-stat-value { font-size:1.25rem; font-weight:700; }
.ama-dq-stat-label { font-size:0.8rem; color:var(--ama-text-muted); }

.ama-dq-info-card { background:var(--ama-card-bg); border-radius:var(--ama-radius-lg); padding:var(--ama-space-md); box-shadow:var(--ama-shadow-sm); }
.ama-dq-info-row { display:flex; align-items:center; gap:var(--ama-space-sm); padding:var(--ama-space-xs) 0; font-size:0.95rem; }

.ama-dq-streak-badge { text-align:center; margin-top:var(--ama-space-md); font-size:1.2rem; font-weight:700; color:var(--ama-warning, #f59e0b); }

.ama-dq-progress-bar { height:6px; background:var(--ama-border); border-radius:3px; overflow:hidden; margin-bottom:var(--ama-space-xs); }
.ama-dq-progress-fill { height:100%; background:var(--ama-primary); border-radius:3px; transition:width 0.3s ease; }
.ama-dq-progress-text { text-align:center; font-size:0.85rem; color:var(--ama-text-muted); margin-bottom:var(--ama-space-md); }

.ama-dq-question-card { background:var(--ama-card-bg); border-radius:var(--ama-radius-lg); padding:var(--ama-space-lg); box-shadow:var(--ama-shadow-sm); }
.ama-dq-question-subject { font-size:0.8rem; color:var(--ama-primary); font-weight:600; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:var(--ama-space-xs); }
.ama-dq-question-title { margin:0 0 var(--ama-space-sm); font-size:1.1rem; }
.ama-dq-question-body { margin-bottom:var(--ama-space-md); line-height:1.6; }
.ama-dq-answer-input { margin-bottom:var(--ama-space-sm); }
.ama-dq-question-timer { text-align:center; font-size:0.9rem; color:var(--ama-text-muted); }

.ama-dq-nav-buttons { display:flex; justify-content:center; gap:var(--ama-space-sm); margin-top:var(--ama-space-md); }

.ama-dq-answers-review { margin-top:var(--ama-space-lg); }
.ama-dq-answers-review h3 { margin-bottom:var(--ama-space-sm); }
.ama-dq-answer-row { display:flex; gap:var(--ama-space-sm); padding:var(--ama-space-sm); border-radius:var(--ama-radius-md); margin-bottom:var(--ama-space-xs); }
.ama-dq-answer-correct { background:rgba(16,185,129,0.08); }
.ama-dq-answer-wrong { background:rgba(239,68,68,0.08); }
.ama-dq-answer-icon { font-size:1.2rem; flex-shrink:0; padding-top:2px; }
.ama-dq-answer-body { flex:1; min-width:0; }
.ama-dq-answer-q { font-weight:600; font-size:0.9rem; margin-bottom:2px; }
.ama-dq-answer-detail { font-size:0.85rem; color:var(--ama-text-muted); }
.ama-dq-answer-pts { font-size:0.8rem; font-weight:600; color:var(--ama-primary); margin-top:2px; }

/* Leaderboard tabs */
.ama-dq-tabs { display:flex; gap:var(--ama-space-xs); overflow-x:auto; padding-bottom:var(--ama-space-xs); margin-bottom:var(--ama-space-sm); }
.ama-dq-tab { padding:var(--ama-space-xs) var(--ama-space-sm); border:1px solid var(--ama-border); border-radius:var(--ama-radius-md); background:var(--ama-card-bg); font-size:0.85rem; cursor:pointer; white-space:nowrap; transition:all 0.15s; }
.ama-dq-tab:hover { border-color:var(--ama-primary); }
.ama-dq-tab.active { background:var(--ama-primary); color:#fff; border-color:var(--ama-primary); }

.ama-dq-period-tabs { display:flex; gap:var(--ama-space-xs); margin-bottom:var(--ama-space-md); }
.ama-dq-period-tab { padding:4px var(--ama-space-sm); border-radius:var(--ama-radius-sm); background:transparent; font-size:0.8rem; cursor:pointer; color:var(--ama-text-muted); transition:all 0.15s; border:none; }
.ama-dq-period-tab:hover { color:var(--ama-text); }
.ama-dq-period-tab.active { background:var(--ama-bg-subtle, #f1f5f9); color:var(--ama-text); font-weight:600; }

/* Leaderboard table */
.ama-lb-my-card { display:flex; align-items:center; gap:var(--ama-space-md); background:linear-gradient(135deg,var(--ama-primary),#6366f1); color:#fff; border-radius:var(--ama-radius-lg); padding:var(--ama-space-md); margin-bottom:var(--ama-space-md); }
.ama-lb-my-rank { font-size:1.5rem; font-weight:800; min-width:50px; text-align:center; }
.ama-lb-my-name { font-weight:600; }
.ama-lb-my-pts { font-size:0.85rem; opacity:0.9; }

.ama-lb-table { display:flex; flex-direction:column; gap:2px; }
.ama-lb-row { display:flex; align-items:center; gap:var(--ama-space-sm); padding:var(--ama-space-sm) var(--ama-space-md); background:var(--ama-card-bg); border-radius:var(--ama-radius-md); transition:background 0.15s; }
.ama-lb-row:hover { background:var(--ama-bg-subtle, #f8fafc); }
.ama-lb-row-me { background:rgba(99,102,241,0.06); border:1px solid rgba(99,102,241,0.15); }
.ama-lb-row-top .ama-lb-rank { font-size:1.2rem; }
.ama-lb-rank { min-width:40px; text-align:center; font-weight:700; font-size:0.9rem; color:var(--ama-text-muted); }
.ama-lb-info { flex:1; min-width:0; }
.ama-lb-name { font-weight:600; font-size:0.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ama-lb-school { font-size:0.75rem; color:var(--ama-text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ama-lb-stats { text-align:right; }
.ama-lb-pts { font-weight:700; font-size:0.95rem; }
.ama-lb-streak { font-size:0.75rem; color:var(--ama-text-muted); }

/* Friend groups */
.ama-lb-groups-section { margin-top:var(--ama-space-xl); padding-top:var(--ama-space-lg); border-top:1px solid var(--ama-border); }
.ama-lb-groups-section h3 { margin-bottom:var(--ama-space-md); }
.ama-lb-groups-list { display:flex; flex-direction:column; gap:var(--ama-space-sm); margin-bottom:var(--ama-space-md); }
.ama-lb-group-card { display:flex; align-items:center; justify-content:space-between; background:var(--ama-card-bg); border-radius:var(--ama-radius-md); padding:var(--ama-space-sm) var(--ama-space-md); box-shadow:var(--ama-shadow-sm); }
.ama-lb-group-name { font-weight:600; }
.ama-lb-group-meta { font-size:0.8rem; color:var(--ama-text-muted); }
.ama-lb-group-actions { display:flex; gap:var(--ama-space-xs); }

.ama-lb-group-actions-bar { display:flex; gap:var(--ama-space-md); flex-wrap:wrap; }
.ama-lb-group-create, .ama-lb-group-join { display:flex; gap:var(--ama-space-xs); flex:1; min-width:200px; }
.ama-lb-group-create .ama-input, .ama-lb-group-join .ama-input { flex:1; }

.ama-btn-lg { padding:var(--ama-space-sm) var(--ama-space-xl); font-size:1.1rem; }
.ama-btn-sm { padding:4px var(--ama-space-sm); font-size:0.8rem; }
.ama-btn-outline { background:transparent; border:1px solid var(--ama-border); color:var(--ama-text); }
.ama-btn-outline:hover { border-color:var(--ama-primary); color:var(--ama-primary); }
.ama-callout-success { background:rgba(16,185,129,0.08); border-left:3px solid #10b981; padding:var(--ama-space-sm) var(--ama-space-md); border-radius:var(--ama-radius-md); }

/* ===== LANDING PLANS COMPARISON ===== */
.ama-landing-plans { padding-top:var(--ama-space-xl); }
.ama-landing-plans-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--ama-space-lg); max-width:700px; margin:var(--ama-space-lg) auto 0; }
.ama-landing-plan-card { background:var(--ama-card-bg); border-radius:var(--ama-radius-lg); padding:var(--ama-space-lg); box-shadow:var(--ama-shadow-sm); display:flex; flex-direction:column; }
.ama-landing-plan-paid { border:2px solid var(--ama-primary); }
.ama-landing-plan-badge { display:inline-block; font-size:1.3rem; font-weight:800; margin-bottom:var(--ama-space-xs); }
.ama-landing-plan-badge-primary { color:var(--ama-primary); }
.ama-landing-plan-price { font-size:0.9rem; color:var(--ama-text-muted); margin-bottom:var(--ama-space-md); }
.ama-landing-plan-subtitle { font-size:0.85rem; color:var(--ama-text-muted); margin-bottom:var(--ama-space-sm); }
.ama-landing-plan-includes { font-size:0.8rem; color:var(--ama-text-muted); font-style:italic; margin:0 0 var(--ama-space-xs); }
.ama-landing-plan-list { list-style:none; padding:0; margin:0 0 auto; display:flex; flex-direction:column; gap:var(--ama-space-xs); }
.ama-landing-plan-list li { font-size:0.9rem; line-height:1.5; }
.ama-landing-plan-card > a { margin-top:var(--ama-space-md); }
@media (max-width:640px) { .ama-landing-plans-grid { grid-template-columns:1fr; } }

.ama-pricing-trial-note { text-align:center; font-size:0.8rem; color:var(--ama-text-muted); margin-top:var(--ama-space-xs); font-style:italic; }

/* ── Hero variants & doodle decorations ── */
.ama-landing-hero--reverse { flex-direction: row-reverse; }
@media (max-width: 768px) { .ama-landing-hero--reverse { flex-direction: column-reverse; } }

.ama-hero-decorated {
    position: relative;
    background-image: url('/images/pattern-education.svg');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
}
.ama-hero-decorated > * { position: relative; z-index: 1; }

.ama-hero-decorated--quiz { background-image: url('/images/pattern-quiz.svg'); }
.ama-hero-decorated--papers { background-image: url('/images/pattern-papers.svg'); }

/* Doodle squiggly underline for hero headings */
.ama-landing-hero-text h1,
.ama-sp-hero-text h1,
.am-illustrated-bg h1 { position: relative; }
.ama-hero-decorated .ama-landing-hero-text h1::after,
.ama-hero-decorated .ama-sp-hero-text h1::after,
.am-illustrated-bg h1::after {
    content: '';
    display: block;
    width: 60px; height: 6px; margin-top: 8px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='6'%3E%3Cpath d='M2 4c10-4 20 2 30-1s15-3 26 0' stroke='%2338785C' stroke-width='2' stroke-linecap='round' fill='none' opacity='.35'/%3E%3C/svg%3E") no-repeat;
}
/* ══════════════════════════════════════════════════════════════
   Visual How-To Guide Components — Windows UI Mockups
   ══════════════════════════════════════════════════════════════ */

/* ── Windows Explorer Frame ── */
.ama-win-mockup {
    border: 1.5px solid #d1d5db;
    border-radius: 10px;
    overflow: hidden;
    margin: 1rem 0;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.ama-win-titlebar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.78rem;
    color: #64748b;
}
.ama-win-titlebar-dots {
    display: flex;
    gap: 5px;
}
.ama-win-titlebar-dots span {
    width: 10px; height: 10px; border-radius: 50%;
}
.ama-win-titlebar-dots span:nth-child(1) { background: #ef4444; }
.ama-win-titlebar-dots span:nth-child(2) { background: #f59e0b; }
.ama-win-titlebar-dots span:nth-child(3) { background: #22c55e; }
.ama-win-titlebar-path {
    flex: 1;
    padding: 3px 10px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    font-size: 0.72rem;
    color: #475569;
}
.ama-win-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: #f8fafc;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.72rem;
    color: #64748b;
    flex-wrap: wrap;
}
.ama-win-toolbar-btn {
    padding: 2px 8px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 0.72rem;
    color: #475569;
    cursor: default;
}
.ama-win-toolbar-btn:hover { background: #e2e8f0; }
.ama-win-body {
    display: flex;
    min-height: 160px;
}
.ama-win-sidebar {
    width: 170px;
    min-width: 170px;
    padding: 10px;
    background: #f8fafc;
    border-right: 1px solid #f1f5f9;
    font-size: 0.72rem;
    line-height: 1.8;
    color: #374151;
}
.ama-win-sidebar .indent-1 { padding-left: 12px; }
.ama-win-sidebar .indent-2 { padding-left: 24px; }
.ama-win-sidebar .indent-3 { padding-left: 36px; }
.ama-win-sidebar .active { color: #1d4ed8; font-weight: 700; }
.ama-win-content {
    flex: 1;
    padding: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-content: flex-start;
}
.ama-win-file {
    width: 72px;
    text-align: center;
    padding: 8px 4px;
    border-radius: 6px;
    border: 1.5px solid transparent;
    cursor: default;
    transition: background 0.15s;
}
.ama-win-file:hover { background: #f1f5f9; }
.ama-win-file.selected { background: #dbeafe; border-color: #93c5fd; }
.ama-win-file-icon { font-size: 1.6rem; display: block; margin-bottom: 2px; }
.ama-win-file-name { font-size: 0.62rem; color: #374151; word-break: break-all; line-height: 1.3; }
.ama-win-statusbar {
    padding: 4px 12px;
    font-size: 0.65rem;
    color: #9ca3af;
    border-top: 1px solid #f1f5f9;
    background: #f8fafc;
}

/* ── Context Menu ── */
.ama-ctx-menu {
    display: inline-block;
    min-width: 180px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    padding: 4px 0;
    font-size: 0.78rem;
    margin: 0.5rem 0;
}
.ama-ctx-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 14px;
    color: #374151;
    cursor: default;
}
.ama-ctx-item--highlight {
    background: #dbeafe;
    color: #1d4ed8;
    font-weight: 600;
}
.ama-ctx-item--danger {
    background: #fef2f2;
    color: #dc2626;
    font-weight: 600;
}
.ama-ctx-item--success {
    background: #dcfce7;
    color: #16a34a;
    font-weight: 600;
}
.ama-ctx-sep {
    height: 1px;
    background: #e5e7eb;
    margin: 3px 8px;
}
.ama-ctx-shortcut {
    font-size: 0.68rem;
    color: #9ca3af;
    margin-left: 16px;
}

/* ── Keyboard Shortcut Badge ── */
.ama-shortcut-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    font-size: 0.72rem;
    font-family: 'Segoe UI', system-ui, monospace;
    color: #475569;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
    white-space: nowrap;
}
.ama-shortcut-badge kbd {
    display: inline-block;
    padding: 1px 5px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 3px;
    font-size: 0.68rem;
    font-family: inherit;
    box-shadow: 0 1px 0 #d1d5db;
}

/* ── How-To Step Card ── */
.ama-howto-step {
    display: flex;
    gap: 16px;
    margin: 1rem 0;
    padding: 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    align-items: flex-start;
}
.ama-howto-step-num {
    flex-shrink: 0;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    background: #1e3a5f;
    color: #fff;
    font-weight: 800;
    font-size: 0.9rem;
    border-radius: 50%;
}
.ama-howto-step-body {
    flex: 1;
    min-width: 0;
}
.ama-howto-step-title {
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 6px;
    font-size: 0.88rem;
}
.ama-howto-step-desc {
    color: #475569;
    font-size: 0.8rem;
    line-height: 1.5;
    margin-bottom: 8px;
}
.ama-howto-step-visual {
    margin-top: 8px;
}

/* ── Before / After Panel ── */
.ama-before-after {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 1rem 0;
}
@media (max-width: 640px) {
    .ama-before-after { grid-template-columns: 1fr; }
}
.ama-before-after-panel {
    padding: 14px;
    border-radius: 8px;
    border: 1.5px solid;
}
.ama-before-after-panel--before {
    background: #fef2f2;
    border-color: #fca5a5;
}
.ama-before-after-panel--after {
    background: #f0fdf4;
    border-color: #86efac;
}
.ama-before-after-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}
.ama-before-after-panel--before .ama-before-after-label { color: #dc2626; }
.ama-before-after-panel--after .ama-before-after-label { color: #16a34a; }

/* ── Result Callout ── */
.ama-howto-result {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 8px;
    margin: 0.75rem 0;
    font-size: 0.82rem;
    font-weight: 600;
}
.ama-howto-result--info {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1d4ed8;
}
.ama-howto-result--success {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #16a34a;
}
.ama-howto-result--warning {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #b45309;
}
.ama-howto-result--danger {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
}

/* ── Compare Cards (2-4 column comparison grids) ── */
.ama-compare-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin: 1rem 0;
}
.ama-compare-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ama-compare-card--highlight {
    border-color: #3b82f6;
    background: #eff6ff;
}
.ama-compare-card-icon {
    font-size: 1.8rem;
    line-height: 1;
}
.ama-compare-card-title {
    font-weight: 700;
    font-size: 0.88rem;
    color: #1e293b;
}
.ama-compare-card-subtitle {
    font-size: 0.72rem;
    color: #64748b;
    font-weight: 500;
}
.ama-compare-card ul {
    margin: 4px 0 0 0;
    padding-left: 16px;
    font-size: 0.78rem;
    color: #475569;
    line-height: 1.5;
}
.ama-compare-card li { margin-bottom: 2px; }

/* ── Spec / Comparison Table ── */
.ama-spec-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem auto;
    font-size: 0.8rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
}
.ama-spec-table table {
    width: 100%;
}
.ama-spec-table th {
    background: #1e293b;
    color: #f1f5f9;
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.ama-spec-table td {
    padding: 8px 12px;
    border-bottom: 1px solid #e2e8f0;
    color: #334155;
    vertical-align: top;
}
.ama-spec-table tr:nth-child(even) td { background: #f8fafc; }
.ama-spec-table tr:last-child td { border-bottom: none; }
.ama-spec-table .ama-spec-label {
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
}

/* ── Device / Icon Grid ── */
.ama-device-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin: 1rem 0;
}
.ama-device-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 14px 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    transition: border-color 0.15s;
}
.ama-device-card:hover { border-color: #94a3b8; }
.ama-device-card-icon {
    font-size: 2rem;
    line-height: 1;
}
.ama-device-card-name {
    font-weight: 700;
    font-size: 0.8rem;
    color: #1e293b;
}
.ama-device-card-desc {
    font-size: 0.7rem;
    color: #64748b;
    line-height: 1.4;
}

/* ── Code + Preview Panel (for HTML/CSS lessons) ── */
.ama-code-preview {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    margin: 1rem 0;
}
@media (max-width: 640px) {
    .ama-code-preview { grid-template-columns: 1fr; }
}
.ama-code-panel {
    background: #1e293b;
    color: #e2e8f0;
    padding: 16px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.78rem;
    line-height: 1.6;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
}
.ama-code-panel-label {
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
    margin-bottom: 8px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.ama-code-tag { color: #7dd3fc; }
.ama-code-attr { color: #fbbf24; }
.ama-code-val { color: #86efac; }
.ama-code-comment { color: #64748b; font-style: italic; }
.ama-code-prop { color: #c4b5fd; }
.ama-code-sel { color: #fbbf24; }
.ama-preview-panel {
    background: #ffffff;
    padding: 16px;
    border-left: 1px solid #e2e8f0;
}
.ama-preview-panel-label {
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
    margin-bottom: 8px;
}

/* ── Standalone code block (no preview pane) — used in HTML/CSS worked examples ── */
pre.ama-code-block {
    background: #1e293b;
    color: #e2e8f0;
    padding: 12px 16px;
    margin: 0.5rem 0;
    border-radius: 8px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.8rem;
    line-height: 1.55;
    overflow-x: auto;
    white-space: pre;
    border: 1px solid #334155;
}
pre.ama-code-block code {
    background: transparent;
    color: inherit;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
}

/* ── Caption / explanation under a step's code example ── */
.ama-step-note {
    margin: 0.5rem 0 0 0;
    font-size: 0.85rem;
    color: var(--ama-muted, #64748b);
    line-height: 1.5;
    font-style: italic;
}
.ama-step-note code {
    font-style: normal;
    background: rgba(100, 116, 139, 0.12);
    padding: 0.05rem 0.35rem;
    border-radius: 3px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.85em;
}

/* ── Diagram Flow (horizontal step process) ── */
.ama-diagram-flow {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin: 1rem 0;
    overflow-x: auto;
    padding: 4px 0;
}
.ama-diagram-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 12px 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    min-width: 100px;
    flex: 1;
}
.ama-diagram-step--accent {
    background: #eff6ff;
    border-color: #3b82f6;
}
.ama-diagram-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #3b82f6;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    flex-shrink: 0;
}
.ama-diagram-step-title {
    font-weight: 700;
    font-size: 0.78rem;
    color: #1e293b;
}
.ama-diagram-step-desc {
    font-size: 0.7rem;
    color: #64748b;
    line-height: 1.3;
}
.ama-diagram-arrow {
    display: flex;
    align-items: center;
    font-size: 1.2rem;
    color: #94a3b8;
    padding: 0 4px;
    flex-shrink: 0;
}

/* ── Info Banner (colored top-border callout) ── */
.ama-info-banner {
    padding: 12px 16px;
    border-radius: 8px;
    border-left: 4px solid #3b82f6;
    background: #eff6ff;
    font-size: 0.82rem;
    color: #1e40af;
    margin: 0.75rem 0;
    line-height: 1.5;
}
.ama-info-banner--green { border-left-color: #22c55e; background: #f0fdf4; color: #166534; }
.ama-info-banner--amber { border-left-color: #f59e0b; background: #fffbeb; color: #92400e; }
.ama-info-banner--red { border-left-color: #ef4444; background: #fef2f2; color: #991b1b; }

/* ── Section Divider with label ── */
.ama-section-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 1.5rem 0 0.75rem 0;
}
.ama-section-divider-icon { font-size: 1.2rem; }
.ama-section-divider-text {
    font-weight: 700;
    font-size: 0.95rem;
    color: #1e293b;
}
.ama-section-divider-line {
    flex: 1;
    height: 1px;
    background: #e2e8f0;
}

/* ── File Type Icon Grid ── */
.ama-filetype-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    margin: 0.75rem 0;
}
.ama-filetype-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.75rem;
}
.ama-filetype-ext {
    font-weight: 700;
    color: #1e293b;
    min-width: 48px;
}
.ama-filetype-desc {
    color: #64748b;
    font-size: 0.68rem;
}

/* ── Admin Dashboard ── */
.ama-admin-stats { display: flex; gap: var(--ama-space-md); margin-bottom: var(--ama-space-lg); }
.ama-admin-stat { background: var(--ama-surface); border: 1px solid var(--ama-border-light); border-radius: var(--ama-radius); padding: var(--ama-space-md) var(--ama-space-lg); text-align: center; flex: 1; }
.ama-admin-stat-value { font-size: var(--ama-text-xl); font-weight: 800; }
.ama-admin-stat-label { font-size: var(--ama-text-xs); color: var(--ama-text-secondary); }
.ama-admin-filters { display: flex; gap: var(--ama-space-xs); margin-bottom: var(--ama-space-md); }
.ama-admin-filter { padding: var(--ama-space-xs) var(--ama-space-md); border: 1px solid var(--ama-border); border-radius: var(--ama-radius-sm); background: var(--ama-bg); color: var(--ama-text-secondary); font-family: var(--ama-font); font-size: var(--ama-text-sm); cursor: pointer; }
.ama-admin-filter.active { background: var(--ama-brand); color: white; border-color: var(--ama-brand); }
.ama-admin-table { width: 100%; border-collapse: collapse; font-size: var(--ama-text-sm); }
.ama-admin-table th { text-align: left; padding: var(--ama-space-sm); border-bottom: 2px solid var(--ama-border); color: var(--ama-text-secondary); font-weight: 600; }
.ama-admin-table td { padding: var(--ama-space-sm); border-bottom: 1px solid var(--ama-border-light); }
.ama-admin-table tr.resolved { opacity: 0.6; }
.ama-admin-msg { max-width: 300px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ama-admin-type-badge { background: var(--ama-surface-alt); padding: 2px 8px; border-radius: 4px; font-size: var(--ama-text-xs); }
.ama-admin-resolve-btn { padding: var(--ama-space-xxs) var(--ama-space-sm); border: 1px solid var(--ama-border); border-radius: var(--ama-radius-sm); background: var(--ama-bg); color: var(--ama-text); font-family: var(--ama-font); font-size: var(--ama-text-xs); cursor: pointer; }
.ama-admin-resolve-btn.resolved { background: var(--ama-success); color: white; border-color: var(--ama-success); }

/* ── Social Proof ── */
.ama-landing-proof { text-align: center; padding: var(--ama-space-3xl) 0; }
.ama-proof-stats { display: flex; justify-content: center; gap: var(--ama-space-2xl); margin: var(--ama-space-xl) 0; flex-wrap: wrap; }
.ama-proof-stat { text-align: center; }
.ama-proof-stat-value { display: block; font-size: var(--ama-text-3xl); font-weight: 800; color: var(--ama-brand); }
.ama-proof-stat-label { font-size: var(--ama-text-sm); color: var(--ama-text-secondary); }
.ama-proof-quotes { display: flex; gap: var(--ama-space-lg); justify-content: center; flex-wrap: wrap; max-width: 800px; margin: 0 auto; }
.ama-proof-quote { background: var(--ama-surface); border: 1px solid var(--ama-border-light); border-radius: var(--ama-radius); padding: var(--ama-space-lg); flex: 1; min-width: 280px; text-align: left; }
.ama-proof-quote p { margin: 0 0 var(--ama-space-sm); font-style: italic; color: var(--ama-text); }
.ama-proof-quote cite { font-size: var(--ama-text-xs); color: var(--ama-text-muted); font-style: normal; }


/* ============================================================
   TEACHER PORTAL
   ============================================================ */

.ama-teacher-shell { display: grid; grid-template-columns: 240px 1fr; gap: var(--ama-space-lg); max-width: var(--ama-content-width); margin: 0 auto; padding: var(--ama-space-md); }
.ama-teacher-sidebar { border-right: 1px solid var(--ama-border-light); padding-right: var(--ama-space-md); }
.ama-teacher-sidebar-title { font-size: var(--ama-text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ama-text-muted); margin: 0 0 var(--ama-space-sm); }
.ama-teacher-nav { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.ama-teacher-nav a { display: block; padding: 8px 12px; border-radius: var(--ama-radius); color: var(--ama-text); text-decoration: none; }
.ama-teacher-nav a:hover { background: var(--ama-surface-alt, var(--ama-border-light)); }
.ama-teacher-nav a.active { background: var(--ama-primary-bg, var(--ama-border-light)); color: var(--ama-primary); font-weight: 600; }
.ama-teacher-body { min-width: 0; }
.ama-teacher-meta { list-style: none; padding: 0; margin: var(--ama-space-md) 0; display: flex; flex-direction: column; gap: 6px; color: var(--ama-text-muted); }
.ama-teacher-stub { color: var(--ama-text-muted); font-size: var(--ama-text-sm); margin-top: var(--ama-space-lg); }
@media (max-width: 720px) {
    .ama-teacher-shell { grid-template-columns: 1fr; }
    .ama-teacher-sidebar { border-right: none; border-bottom: 1px solid var(--ama-border-light); padding: 0 0 var(--ama-space-sm); }
}

/* ============================================================
   QUESTION BANK
   ============================================================ */

.ama-bank-header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ama-space-md); margin-bottom: var(--ama-space-md); }
.ama-bank-total { color: var(--ama-text-muted); font-size: var(--ama-text-sm); }
.ama-bank-filters { background: var(--ama-surface); border: 1px solid var(--ama-border-light); border-radius: var(--ama-radius); padding: var(--ama-space-md); margin-bottom: var(--ama-space-md); display: flex; flex-direction: column; gap: var(--ama-space-sm); }
.ama-bank-filter-row { display: flex; flex-wrap: wrap; gap: var(--ama-space-sm); align-items: end; }
.ama-bank-filter-row label { display: flex; flex-direction: column; gap: 4px; font-size: var(--ama-text-xs); color: var(--ama-text-muted); }
.ama-bank-filter-row input, .ama-bank-filter-row select { padding: 6px 8px; border: 1px solid var(--ama-border); border-radius: var(--ama-radius); background: var(--ama-bg); color: var(--ama-text); min-width: 140px; }
.ama-bank-filter-grow { flex: 1; min-width: 220px; }
.ama-bank-filter-grow input { width: 100%; }
.ama-bank-empty, .ama-bank-loading { color: var(--ama-text-muted); padding: var(--ama-space-md) 0; }
.ama-bank-table { width: 100%; border-collapse: collapse; background: var(--ama-surface); border: 1px solid var(--ama-border-light); border-radius: var(--ama-radius); overflow: hidden; }
.ama-bank-table th, .ama-bank-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--ama-border-light); vertical-align: top; font-size: var(--ama-text-sm); }
.ama-bank-table th { background: var(--ama-surface-alt, var(--ama-border-light)); font-weight: 600; }
.ama-bank-table .ama-num { text-align: right; }
.ama-bank-row { cursor: pointer; }
.ama-bank-row:hover { background: var(--ama-surface-alt, rgba(0, 0, 0, 0.03)); }
.ama-bank-row-sub { color: var(--ama-text-muted); font-size: var(--ama-text-xs); margin-top: 2px; }
.ama-bank-flag { display: inline-block; padding: 1px 6px; margin-left: 4px; border-radius: 4px; background: var(--ama-primary-bg, var(--ama-border-light)); color: var(--ama-primary); font-size: 10px; font-weight: 600; letter-spacing: 0.05em; }
.ama-bank-pagination { display: flex; align-items: center; justify-content: center; gap: var(--ama-space-md); margin-top: var(--ama-space-md); }
.ama-bank-pagination button { padding: 6px 14px; border: 1px solid var(--ama-border); background: var(--ama-surface); color: var(--ama-text); border-radius: var(--ama-radius); cursor: pointer; }
.ama-bank-pagination button:disabled { opacity: 0.5; cursor: not-allowed; }
.ama-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--ama-border-light); color: var(--ama-text); }
.ama-badge--draft { background: #fef3c7; color: #92400e; }
.ama-badge--inreview { background: #dbeafe; color: #1e40af; }
.ama-badge--published { background: #d1fae5; color: #065f46; }
.ama-badge--archived { background: #e5e7eb; color: #4b5563; }

.ama-bank-back { margin-bottom: var(--ama-space-md); }
.ama-bank-detail-header h1 { margin-bottom: var(--ama-space-xs); }
.ama-bank-detail-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: var(--ama-text-muted); font-size: var(--ama-text-sm); margin: 4px 0; }
.ama-bank-detail-sep { opacity: 0.5; }
.ama-bank-section { margin-top: var(--ama-space-lg); }
.ama-bank-section h2 { font-size: var(--ama-text-md); margin-bottom: var(--ama-space-sm); }
.ama-bank-prose { line-height: 1.5; }
.ama-bank-part { background: var(--ama-surface); border: 1px solid var(--ama-border-light); border-radius: var(--ama-radius); padding: var(--ama-space-md); margin-bottom: var(--ama-space-md); }
.ama-bank-part-header h3 { display: flex; align-items: baseline; gap: var(--ama-space-sm); margin: 0; font-size: var(--ama-text-md); }
.ama-bank-part-label { font-weight: 700; }
.ama-bank-part-marks { color: var(--ama-text-muted); font-size: var(--ama-text-sm); }
.ama-bank-part-format { font-size: var(--ama-text-xs); padding: 2px 6px; background: var(--ama-border-light); border-radius: 4px; color: var(--ama-text-muted); }
.ama-bank-part-meta { color: var(--ama-text-muted); font-size: var(--ama-text-xs); display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 4px 0 var(--ama-space-sm); }
.ama-bank-part-prompt h4 { font-size: var(--ama-text-sm); margin: var(--ama-space-sm) 0 4px; color: var(--ama-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.ama-bank-memo { margin-top: var(--ama-space-sm); padding-top: var(--ama-space-sm); border-top: 1px dashed var(--ama-border-light); }
.ama-bank-memo h4 { margin: 0 0 var(--ama-space-xs); font-size: var(--ama-text-sm); }
.ama-bank-memo-row { margin: 4px 0; }
.ama-bank-memo summary { cursor: pointer; padding: 4px 0; color: var(--ama-text); font-size: var(--ama-text-sm); }
.ama-bank-json { background: var(--ama-bg); border: 1px solid var(--ama-border-light); border-radius: var(--ama-radius); padding: var(--ama-space-sm); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; overflow-x: auto; max-height: 400px; }
.ama-bank-rules ul, .ama-bank-support ul { list-style: none; padding: 0; margin: 0; }
.ama-bank-rules li, .ama-bank-support li { padding: 6px 0; border-bottom: 1px dashed var(--ama-border-light); }
.ama-bank-rules li:last-child, .ama-bank-support li:last-child { border-bottom: none; }

/* ============================================================
   QUESTION BANK EDITOR
   ============================================================ */

.ama-bank-header-actions { display: flex; align-items: center; gap: var(--ama-space-md); }
.ama-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--ama-space-sm); margin-bottom: var(--ama-space-md); }
.ama-form-grid label, .ama-bank-section > label { display: flex; flex-direction: column; gap: 4px; font-size: var(--ama-text-xs); color: var(--ama-text-muted); }
.ama-form-grid input, .ama-form-grid select, .ama-form-grid textarea, .ama-bank-section > label input, .ama-bank-section > label textarea { padding: 6px 8px; border: 1px solid var(--ama-border); border-radius: var(--ama-radius); background: var(--ama-bg); color: var(--ama-text); font-family: inherit; font-size: var(--ama-text-sm); }
.ama-form-grid-wide { grid-column: 1 / -1; }
.ama-checkbox { flex-direction: row !important; align-items: center; gap: 6px; }
.ama-checkbox input { width: auto !important; }

.ama-bilingual-field { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ama-space-sm); margin: var(--ama-space-sm) 0; }
.ama-bilingual-pane label { display: flex; flex-direction: column; gap: 4px; font-size: var(--ama-text-xs); color: var(--ama-text-muted); }
.ama-bilingual-pane input, .ama-bilingual-pane textarea { padding: 6px 8px; border: 1px solid var(--ama-border); border-radius: var(--ama-radius); background: var(--ama-bg); color: var(--ama-text); font-family: inherit; font-size: var(--ama-text-sm); }
.ama-bilingual-pane-label { font-weight: 600; }
.ama-bilingual-optional { font-weight: 400; opacity: 0.7; }
@media (max-width: 720px) { .ama-bilingual-field { grid-template-columns: 1fr; } }

.ama-part-editor { background: var(--ama-surface); border: 1px solid var(--ama-border-light); border-radius: var(--ama-radius); padding: var(--ama-space-md); margin-bottom: var(--ama-space-md); }
.ama-part-editor-header { border-bottom: 1px dashed var(--ama-border-light); padding-bottom: var(--ama-space-sm); margin-bottom: var(--ama-space-sm); }
.ama-part-editor-row { display: flex; flex-wrap: wrap; gap: var(--ama-space-sm); align-items: end; }
.ama-part-editor-row label { display: flex; flex-direction: column; gap: 4px; font-size: var(--ama-text-xs); color: var(--ama-text-muted); }
.ama-part-editor-row input, .ama-part-editor-row select, .ama-part-editor-row textarea { padding: 6px 8px; border: 1px solid var(--ama-border); border-radius: var(--ama-radius); background: var(--ama-bg); color: var(--ama-text); font-family: inherit; font-size: var(--ama-text-sm); }
.ama-part-editor-section { margin-top: var(--ama-space-md); padding-top: var(--ama-space-sm); border-top: 1px dashed var(--ama-border-light); }
.ama-part-editor-section h4 { margin: 0 0 var(--ama-space-sm); font-size: var(--ama-text-sm); color: var(--ama-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.ama-part-editor-section > label { display: flex; flex-direction: column; gap: 4px; font-size: var(--ama-text-xs); color: var(--ama-text-muted); margin: var(--ama-space-sm) 0; }
.ama-part-editor-section textarea { padding: 6px 8px; border: 1px solid var(--ama-border); border-radius: var(--ama-radius); background: var(--ama-bg); color: var(--ama-text); font-family: inherit; font-size: var(--ama-text-sm); }

.ama-typed-editor { background: var(--ama-bg); border: 1px solid var(--ama-border-light); border-radius: var(--ama-radius); padding: var(--ama-space-sm); margin: var(--ama-space-sm) 0; }
.ama-typed-editor-header { display: flex; align-items: baseline; gap: var(--ama-space-sm); margin-bottom: var(--ama-space-sm); flex-wrap: wrap; }
.ama-typed-editor-hint { color: var(--ama-text-muted); font-size: var(--ama-text-xs); }
.ama-typed-editor-empty { color: var(--ama-text-muted); font-size: var(--ama-text-sm); margin: 4px 0; }
.ama-typed-editor-actions { display: flex; align-items: center; gap: var(--ama-space-sm); flex-wrap: wrap; margin-top: var(--ama-space-sm); }
.ama-typed-editor-actions input { padding: 6px 8px; border: 1px solid var(--ama-border); border-radius: var(--ama-radius); background: var(--ama-surface); color: var(--ama-text); flex: 1; min-width: 180px; }

.ama-accepted-list { list-style: decimal; padding-left: var(--ama-space-md); margin: 0; }
.ama-accepted-list li { display: flex; gap: 6px; align-items: center; padding: 3px 0; }
.ama-accepted-list input { padding: 4px 6px; border: 1px solid var(--ama-border); border-radius: var(--ama-radius); flex: 1; background: var(--ama-surface); }

.ama-icon-btn { width: 24px; height: 24px; padding: 0; border: 1px solid var(--ama-border); border-radius: var(--ama-radius); background: var(--ama-surface); color: var(--ama-text); cursor: pointer; line-height: 1; }
.ama-icon-btn:hover { background: var(--ama-border-light); }
.ama-icon-btn--danger:hover { background: #fee2e2; color: #991b1b; border-color: #fecaca; }

.ama-mg-table, .ama-workings-table { width: 100%; border-collapse: collapse; }
.ama-mg-table th, .ama-mg-table td, .ama-workings-table th, .ama-workings-table td { padding: 4px; text-align: left; vertical-align: top; }
.ama-mg-table th, .ama-workings-table th { font-weight: 600; font-size: var(--ama-text-xs); color: var(--ama-text-muted); border-bottom: 1px solid var(--ama-border-light); }
.ama-mg-table input, .ama-workings-table input { width: 100%; padding: 4px 6px; border: 1px solid var(--ama-border); border-radius: var(--ama-radius); background: var(--ama-surface); font-family: inherit; font-size: var(--ama-text-sm); }
.ama-mg-step { width: 50%; }
.ama-mg-marks { width: 80px; }
.ama-mg-note { width: 30%; }
.ama-mg-total { margin-bottom: var(--ama-space-sm); }
.ama-mg-total label { display: flex; flex-direction: row; align-items: center; gap: var(--ama-space-sm); font-size: var(--ama-text-sm); }
.ama-mg-total input { width: 80px; padding: 4px 6px; border: 1px solid var(--ama-border); border-radius: var(--ama-radius); background: var(--ama-surface); }
.ama-mg-sum { font-size: var(--ama-text-sm); color: var(--ama-text-muted); }
.ama-mg-mismatch { color: #b91c1c; }

.ama-raw-json { width: 100%; padding: 8px; border: 1px solid var(--ama-border); border-radius: var(--ama-radius); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; background: var(--ama-surface); color: var(--ama-text); }
.ama-raw-json--error { border-color: #b91c1c; }
.ama-validation-error { color: #b91c1c; font-size: var(--ama-text-xs); }
.ama-validation-ok { color: #047857; font-size: var(--ama-text-xs); }

.ama-support-list { display: flex; flex-direction: column; gap: var(--ama-space-sm); margin-bottom: var(--ama-space-sm); }
.ama-support-item { background: var(--ama-bg); border: 1px solid var(--ama-border-light); border-radius: var(--ama-radius); padding: var(--ama-space-sm); }

.ama-edit-actions { display: flex; gap: var(--ama-space-sm); flex-wrap: wrap; align-items: center; padding-top: var(--ama-space-md); border-top: 1px solid var(--ama-border-light); }
.ama-bank-detail-actions { display: flex; gap: var(--ama-space-sm); align-items: center; flex-wrap: wrap; margin-bottom: var(--ama-space-md); }

.ama-validation-summary { padding: var(--ama-space-sm) var(--ama-space-md); border-radius: var(--ama-radius); margin: var(--ama-space-sm) 0; font-size: var(--ama-text-sm); }
.ama-validation-summary--error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.ama-validation-summary--warning { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.ama-validation-summary--ok { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; }
.ama-validation-summary ul { margin: 4px 0 0; padding-left: var(--ama-space-md); }
.ama-validation-field { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; }
.ama-validation-severity { color: var(--ama-text-muted); font-size: var(--ama-text-xs); margin-left: 4px; }

.ama-btn-primary { background: var(--ama-primary, #3b82f6); color: #fff; border: 1px solid transparent; padding: 8px 16px; border-radius: var(--ama-radius); cursor: pointer; font-weight: 600; text-decoration: none; display: inline-block; }
.ama-btn-primary:hover { opacity: 0.9; }
.ama-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.ama-btn-secondary { background: var(--ama-surface); color: var(--ama-text); border: 1px solid var(--ama-border); padding: 8px 16px; border-radius: var(--ama-radius); cursor: pointer; font-weight: 600; text-decoration: none; display: inline-block; }
.ama-btn-secondary:hover { background: var(--ama-border-light); }
.ama-btn-success { background: #10b981; color: #fff; border: 1px solid transparent; padding: 8px 16px; border-radius: var(--ama-radius); cursor: pointer; font-weight: 600; }
.ama-btn-success:hover { opacity: 0.9; }

/* ============================================================
   PAPER BUILDER + DRAWER
   ============================================================ */

.ama-paper-outline { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--ama-space-sm); }
.ama-paper-outline-item { display: flex; align-items: center; gap: var(--ama-space-sm); background: var(--ama-surface); border: 1px solid var(--ama-border-light); border-radius: var(--ama-radius); padding: var(--ama-space-sm) var(--ama-space-md); }
.ama-paper-outline-main { flex: 1; min-width: 0; }
.ama-paper-outline-header { display: flex; align-items: baseline; gap: var(--ama-space-sm); }
.ama-paper-outline-title { font-weight: 600; }
.ama-paper-outline-actions { display: flex; gap: 4px; }
.ama-drag-handle { cursor: grab; color: var(--ama-text-muted); padding: 0 8px; user-select: none; font-size: 16px; letter-spacing: -3px; }
.ama-drag-handle:active { cursor: grabbing; }
.ama-paper-outline-item--dragover { border-color: var(--ama-primary, #3b82f6); box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2); }

/* ============================================================
   BANK PICKER — INLINE AUTHOR MODE
   ============================================================ */

.ama-drawer-mode-toggle { display: flex; gap: var(--ama-space-sm); align-items: center; }
.ama-drawer-author { display: flex; flex-direction: column; gap: var(--ama-space-sm); padding: var(--ama-space-sm) 0; }
.ama-drawer-author label { display: flex; flex-direction: column; gap: 4px; font-size: var(--ama-text-xs); color: var(--ama-text-muted); }
.ama-drawer-author input, .ama-drawer-author textarea, .ama-drawer-author select { padding: 6px 8px; border: 1px solid var(--ama-border); border-radius: var(--ama-radius); background: var(--ama-surface); color: var(--ama-text); font-family: inherit; font-size: var(--ama-text-sm); }
.ama-drawer-author-actions { display: flex; gap: var(--ama-space-sm); margin-top: var(--ama-space-sm); }

/* ============================================================
   CHILD-PART EDITOR (nested under a parent part)
   ============================================================ */

.ama-part-editor--child { border-left: 3px solid var(--ama-primary, #3b82f6); margin-left: var(--ama-space-md); background: var(--ama-bg); }
.ama-childparts { display: flex; flex-direction: column; gap: var(--ama-space-sm); margin-bottom: var(--ama-space-sm); }

/* ============================================================
   REVISION HISTORY
   ============================================================ */

.ama-revisions { background: var(--ama-surface); border: 1px solid var(--ama-border-light); border-radius: var(--ama-radius); padding: var(--ama-space-sm) var(--ama-space-md); }
.ama-revisions summary { cursor: pointer; padding: 4px 0; }
.ama-revision-list { list-style: none; padding: var(--ama-space-sm) 0 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.ama-revision-list li { padding: 4px 0; border-bottom: 1px dashed var(--ama-border-light); font-size: var(--ama-text-sm); }
.ama-revision-list li:last-child { border-bottom: none; }
.ama-revision-note { color: var(--ama-text); font-style: italic; }

.ama-drawer-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 1000; }
.ama-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 90vw); background: var(--ama-bg); border-left: 1px solid var(--ama-border); box-shadow: -8px 0 32px rgba(0,0,0,0.15); z-index: 1001; display: flex; flex-direction: column; padding: var(--ama-space-md); overflow-y: auto; }
.ama-drawer-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--ama-space-md); }
.ama-drawer-header h2 { margin: 0; font-size: var(--ama-text-md); }
.ama-drawer-filters { display: flex; flex-wrap: wrap; gap: var(--ama-space-sm); margin-bottom: var(--ama-space-md); padding-bottom: var(--ama-space-sm); border-bottom: 1px solid var(--ama-border-light); }
.ama-drawer-filters label { display: flex; flex-direction: column; gap: 4px; font-size: var(--ama-text-xs); color: var(--ama-text-muted); flex: 1; min-width: 140px; }
.ama-drawer-filters input, .ama-drawer-filters select { padding: 6px 8px; border: 1px solid var(--ama-border); border-radius: var(--ama-radius); background: var(--ama-surface); }
.ama-drawer-results { flex: 1; overflow-y: auto; }
.ama-drawer-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--ama-space-sm); }
.ama-drawer-list li { display: flex; align-items: center; gap: var(--ama-space-sm); padding: var(--ama-space-sm); background: var(--ama-surface); border: 1px solid var(--ama-border-light); border-radius: var(--ama-radius); }
.ama-drawer-item-main { flex: 1; min-width: 0; }

/* ============================================================
   MEMO PRINTOUT
   ============================================================ */

.ama-memo-print { max-width: 800px; margin: 0 auto; padding: var(--ama-space-lg); }
.ama-memo-toolbar { display: flex; gap: var(--ama-space-sm); justify-content: space-between; margin-bottom: var(--ama-space-md); }
.ama-memo { background: var(--ama-bg); color: var(--ama-text); }
.ama-memo-header { border-bottom: 2px solid var(--ama-text); padding-bottom: var(--ama-space-sm); margin-bottom: var(--ama-space-md); }
.ama-memo-header h1 { margin: 0 0 var(--ama-space-xs); }
.ama-memo-sub { color: var(--ama-text-muted); margin: 2px 0; font-size: var(--ama-text-sm); }
.ama-memo-question { margin-bottom: var(--ama-space-lg); page-break-inside: avoid; }
.ama-memo-question h2 { font-size: var(--ama-text-md); border-bottom: 1px solid var(--ama-border); padding-bottom: 4px; margin-bottom: var(--ama-space-sm); }
.ama-memo-marks { color: var(--ama-text-muted); font-weight: 400; font-size: 0.9em; }
.ama-memo-format { font-size: var(--ama-text-xs); padding: 1px 6px; background: var(--ama-border-light); border-radius: 4px; color: var(--ama-text-muted); margin-left: 6px; }
.ama-memo-intro { font-style: italic; color: var(--ama-text-muted); }
.ama-memo-part { margin: var(--ama-space-sm) 0; padding: var(--ama-space-sm); border-left: 3px solid var(--ama-border-light); }
.ama-memo-part-header { margin-bottom: 4px; }
.ama-memo-prompt { margin: 4px 0; }
.ama-memo-prompt-af { color: var(--ama-text-muted); font-size: var(--ama-text-sm); margin-bottom: 4px; }
.ama-memo-final { margin: 6px 0; padding: 4px 8px; background: #ecfdf5; border-radius: var(--ama-radius); }
.ama-memo-accepted, .ama-memo-workings, .ama-memo-guideline, .ama-memo-alts { margin: 6px 0; }
.ama-memo-accepted ul { margin: 4px 0 0 var(--ama-space-md); padding: 0; }
.ama-memo-workings pre, .ama-memo-guideline pre, .ama-memo-alts pre { background: var(--ama-bg); border: 1px solid var(--ama-border-light); border-radius: var(--ama-radius); padding: 6px 10px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; white-space: pre-wrap; }

@media print {
    .ama-memo-toolbar { display: none; }
    .ama-header, .ama-footer, .ama-teacher-sidebar, footer, header { display: none !important; }
    .ama-memo-print { padding: 0; max-width: 100%; }
    body { background: #fff !important; color: #000 !important; }
    .ama-memo-question { page-break-inside: avoid; }
}

/* ============================================================
   PREVIEW-AS-LEARNER
   ============================================================ */

.ama-preview-toolbar { display: flex; gap: var(--ama-space-sm); align-items: center; margin-bottom: var(--ama-space-md); padding: var(--ama-space-sm) var(--ama-space-md); background: #fffbeb; border: 1px solid #fde68a; border-radius: var(--ama-radius); }
.ama-preview-banner { color: #92400e; font-size: var(--ama-text-sm); font-weight: 600; }
.ama-preview-header { border-bottom: 2px solid var(--ama-text); padding-bottom: var(--ama-space-sm); margin-bottom: var(--ama-space-md); }
.ama-preview-instructions { background: var(--ama-surface); border: 1px solid var(--ama-border-light); border-radius: var(--ama-radius); padding: var(--ama-space-sm); margin-top: var(--ama-space-sm); }
.ama-preview-question { margin-bottom: var(--ama-space-lg); }
.ama-preview-question h2 { font-size: var(--ama-text-md); border-bottom: 1px solid var(--ama-border-light); padding-bottom: 4px; margin-bottom: var(--ama-space-sm); }
.ama-preview-context { background: var(--ama-surface); border: 1px solid var(--ama-border-light); border-radius: var(--ama-radius); padding: var(--ama-space-sm); margin: var(--ama-space-sm) 0; }
.ama-preview-part { margin: var(--ama-space-sm) 0; padding: var(--ama-space-sm); border-left: 3px solid var(--ama-primary, #3b82f6); }
.ama-preview-part-header { margin-bottom: 4px; display: flex; align-items: baseline; gap: var(--ama-space-sm); }
.ama-preview-prompt { margin: 4px 0; }
.ama-preview-info pre { background: var(--ama-bg); border: 1px solid var(--ama-border-light); padding: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; white-space: pre-wrap; }
.ama-preview-input-stub { color: var(--ama-text-muted); font-size: var(--ama-text-sm); margin-top: 4px; padding: 4px 8px; border: 1px dashed var(--ama-border); border-radius: var(--ama-radius); }

/* ============================================================
   FORMAT-MATCH GENERATOR
   ============================================================ */

.ama-format-preview { background: var(--ama-surface); border: 1px solid var(--ama-border-light); border-radius: var(--ama-radius); padding: var(--ama-space-md); margin-top: var(--ama-space-md); }
.ama-format-preview h3 { font-size: var(--ama-text-sm); margin: 0 0 var(--ama-space-sm); color: var(--ama-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.ama-format-summary { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: var(--ama-text-sm); }
.ama-format-summary li { color: var(--ama-text); }

/* ============================================================
   INFORMATION TABLES RENDERER
   ============================================================ */

.ama-info-empty { color: var(--ama-text-muted); }
.ama-info-block { margin: var(--ama-space-sm) 0; }
.ama-info-title { font-size: var(--ama-text-sm); margin: 0 0 6px; font-weight: 600; }
.ama-info-date { color: var(--ama-text-muted); font-weight: 400; font-size: var(--ama-text-xs); margin-left: 6px; }
.ama-info-table { width: 100%; border-collapse: collapse; font-size: var(--ama-text-sm); }
.ama-info-table th, .ama-info-table td { border: 1px solid var(--ama-border-light); padding: 4px 8px; text-align: left; vertical-align: top; }
.ama-info-table th { background: var(--ama-surface-alt, var(--ama-border-light)); font-weight: 600; }
.ama-info-keyvalue { display: grid; grid-template-columns: max-content 1fr; gap: 4px var(--ama-space-md); margin: 0; }
.ama-info-keyvalue dt { font-weight: 600; color: var(--ama-text-muted); }
.ama-info-keyvalue dd { margin: 0; }
.ama-info-list { list-style: none; padding: 0; margin: 0; }
.ama-info-list li { padding: 3px 0; }
.ama-info-list-marker { display: inline-block; min-width: 32px; color: var(--ama-text-muted); }
.ama-info-text { margin: 4px 0; }
.ama-info-unknown { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; background: var(--ama-bg); border: 1px solid var(--ama-border-light); padding: 6px; }
.ama-info-notes { list-style: disc; padding-left: var(--ama-space-md); margin: 4px 0 0; color: var(--ama-text-muted); font-size: var(--ama-text-xs); }
.ama-memo-info { margin: 6px 0; }

/* ============================================================
   BANK-VERSION DRIFT INDICATOR
   ============================================================ */

.ama-paper-outline-item--drifted { border-color: #fde68a; background: #fffbeb; }
.ama-drift-badge { display: inline-block; padding: 1px 8px; margin-left: 6px; border-radius: 999px; background: #fde68a; color: #92400e; font-size: 11px; font-weight: 600; }
.ama-btn-small { padding: 4px 10px !important; font-size: 12px !important; }

/* ============================================================
   BANK TAG CHIPS
   ============================================================ */

.ama-tag-cloud { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: var(--ama-space-sm) var(--ama-space-md); background: var(--ama-surface); border: 1px solid var(--ama-border-light); border-radius: var(--ama-radius); margin-bottom: var(--ama-space-md); }
.ama-tag-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.ama-tag-row-more { color: var(--ama-text-muted); font-size: 11px; padding: 2px 6px; }
.ama-tag-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: var(--ama-bg); border: 1px solid var(--ama-border); color: var(--ama-text); font-size: 12px; font-weight: 500; cursor: pointer; text-decoration: none; transition: all 0.1s ease; }
.ama-tag-chip:hover { background: var(--ama-border-light); border-color: var(--ama-text-muted); }
.ama-tag-chip--active { background: var(--ama-primary, #3b82f6); color: #fff; border-color: transparent; }
.ama-tag-chip--active:hover { background: var(--ama-primary, #3b82f6); opacity: 0.9; }
.ama-tag-chip--inline { padding: 1px 8px; font-size: 11px; cursor: default; }
.ama-tag-chip--topic { border-left: 3px solid #3b82f6; }
.ama-tag-chip--subtopic { border-left: 3px solid #8b5cf6; }
.ama-tag-chip--style { border-left: 3px solid #ec4899; }
.ama-tag-chip--source { border-left: 3px solid #10b981; }
.ama-tag-chip--custom { border-left: 3px solid #64748b; }
.ama-tag-chip-count { font-size: 10px; opacity: 0.7; padding-left: 3px; border-left: 1px solid currentColor; margin-left: 4px; }
.ama-tag-clear { background: #fef2f2 !important; color: #991b1b !important; border-color: #fecaca !important; }
.ama-tag-clear:hover { background: #fee2e2 !important; }

/* ============================================================
   TEACHER ACTIVITY FEED
   ============================================================ */

.ama-teacher-activity { margin-top: var(--ama-space-lg); }
.ama-teacher-activity h2 { font-size: var(--ama-text-md); margin-bottom: var(--ama-space-sm); }
.ama-activity-feed { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--ama-space-sm); }
.ama-activity-item { display: flex; gap: var(--ama-space-sm); padding: var(--ama-space-sm) var(--ama-space-md); background: var(--ama-surface); border: 1px solid var(--ama-border-light); border-radius: var(--ama-radius); align-items: start; }
.ama-activity-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; font-size: 14px; flex-shrink: 0; }
.ama-activity-icon--added { background: #ecfdf5; color: #065f46; }
.ama-activity-icon--edited { background: #eff6ff; color: #1e40af; }
.ama-activity-icon--published { background: #f0fdf4; color: #166534; }
.ama-activity-icon--generated { background: #fef3c7; color: #92400e; }
.ama-activity-icon--other { background: var(--ama-border-light); }
.ama-activity-main { flex: 1; min-width: 0; }

/* ============================================================
   HTML PRACTICE — Split-view "Notepad-like editor + live preview"
   ============================================================ */

.ama-html-practice {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ama-space-md);
    margin: var(--ama-space-md) 0;
    min-height: 480px;
}

.ama-html-practice-pane {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ama-border);
    border-radius: var(--ama-radius);
    background: var(--ama-surface);
    overflow: hidden;
}

.ama-html-practice-pane-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.85rem;
    background: #f1f5f9;
    border-bottom: 1px solid var(--ama-border);
    font-size: 0.85rem;
}
.ama-html-practice-pane-header strong { color: var(--ama-text); }
.ama-html-practice-pane-icon { font-size: 1.1rem; }
.ama-html-practice-pane-hint {
    margin-left: auto;
    font-size: 0.72rem;
    color: var(--ama-text-muted);
    font-style: italic;
}

/* Notepad-like textarea: monospace, plain, no autocomplete */
.ama-html-practice-editor {
    flex: 1;
    width: 100%;
    min-height: 460px;
    border: none;
    resize: vertical;
    padding: 0.85rem 1rem;
    font-family: "Consolas", "Cascadia Code", "Fira Code", "Monaco", "Courier New", monospace;
    font-size: 0.9rem;
    line-height: 1.55;
    color: #1f2937;
    background: #fafafa;
    tab-size: 2;
    -moz-tab-size: 2;
    outline: none;
    white-space: pre;
    overflow: auto;
}
.ama-html-practice-editor:focus {
    background: #fff;
    box-shadow: inset 0 0 0 2px var(--ama-brand-light);
}

/* Live preview iframe */
.ama-html-practice-preview {
    flex: 1;
    width: 100%;
    min-height: 460px;
    border: none;
    background: #fff;
}

.ama-html-practice-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: var(--ama-space-md);
}

.ama-html-practice-steps {
    background: var(--ama-surface);
    border: 1px solid var(--ama-border);
    border-radius: var(--ama-radius);
    padding: var(--ama-space-sm) var(--ama-space-md);
    margin-bottom: var(--ama-space-md);
}
.ama-html-practice-steps summary {
    cursor: pointer;
    padding: 0.25rem 0;
}
.ama-html-practice-step-list {
    margin: 0.5rem 0 0 0;
    padding-left: 1.5rem;
}
.ama-html-practice-step-list li {
    margin-bottom: 0.75rem;
}
.ama-html-practice-step-list li > p {
    margin: 0.2rem 0;
    color: var(--ama-text-secondary);
    font-size: 0.92rem;
}
.ama-html-practice-hint {
    font-size: 0.85rem;
    color: #92400e;
    background: #fffbeb;
    padding: 0.35rem 0.6rem;
    border-radius: 6px;
    display: inline-block;
}

.ama-html-practice-validation {
    border: 1px solid var(--ama-border);
    border-radius: var(--ama-radius);
    padding: var(--ama-space-md);
    background: var(--ama-surface);
    margin-bottom: var(--ama-space-lg);
}
.ama-html-practice-score {
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 0.6rem;
    color: var(--ama-brand);
}
.ama-html-practice-rule {
    display: flex;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    border-radius: 8px;
    margin-bottom: 0.4rem;
    font-size: 0.92rem;
}
.ama-html-practice-rule-pass {
    background: #ecfdf5;
    color: #065f46;
}
.ama-html-practice-rule-fail {
    background: #fef2f2;
    color: #991b1b;
}
.ama-html-practice-rule-icon {
    font-weight: 700;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.ama-html-practice-rule code {
    font-family: "Consolas", monospace;
    background: rgba(0,0,0,0.05);
    padding: 0.05rem 0.35rem;
    border-radius: 3px;
    font-size: 0.85em;
}

/* Mobile: stack panes vertically */
@media (max-width: 900px) {
    .ama-html-practice {
        grid-template-columns: 1fr;
    }
    .ama-html-practice-editor,
    .ama-html-practice-preview {
        min-height: 280px;
    }
}

/* ============================================================
   PAPER STUDY GUIDE (read mode — /exam-papers/{slug}/guide)
   ============================================================ */

.ama-sg { max-width: 880px; margin: 0 auto; font-size: 16.5px; line-height: 1.62; }
/* Cap the reading measure on prose (~66ch) while the page stays full width.
   Calculation workings stay wide (monospace, pre-formatted). */
.ama-sg-body, .ama-sg-part-prompt, .ama-sg-memo, .ama-sg-gwhat,
.ama-sg-points, .ama-sg-intro, .ama-sg-context, .ama-sg-overview-list,
.ama-sg-summary-list, .ama-sg-hint-body { max-width: 66ch; }
.ama-sg-head { text-align: center; padding: var(--ama-space-md) 0 var(--ama-space-lg); border-bottom: 2px solid var(--ama-text); margin-bottom: var(--ama-space-md); }

/* Section headers separating "Study notes" from "The questions, worked" */
.ama-sg-section-h { font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ama-text-muted); margin: var(--ama-space-lg) 0 var(--ama-space-sm); padding-bottom: 6px; border-bottom: 1px solid var(--ama-border); }
.ama-sg-section-hint { text-transform: none; letter-spacing: 0; font-size: 0.78rem; font-weight: 400; color: var(--ama-text-muted); margin-left: 8px; }

/* Sticky in-page nav */
.ama-sg-nav { position: sticky; top: 0; z-index: 30; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; background: var(--ama-surface); border: 1px solid var(--ama-border); border-radius: 10px; padding: 7px 10px; margin-bottom: var(--ama-space-md); box-shadow: 0 1px 6px rgba(0,0,0,.05); }
.ama-sg-nav-links { display: flex; flex-wrap: wrap; gap: 5px; }
.ama-sg-nav-chip { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--ama-surface-alt); border: 1px solid var(--ama-border); color: var(--ama-text); font-size: 0.8rem; font-weight: 600; text-decoration: none; cursor: pointer; font-family: inherit; }
.ama-sg-nav-chip:hover { border-color: var(--ama-brand); color: var(--ama-brand); }
.ama-sg-nav-actions { display: flex; gap: 5px; }
.ama-sg-nav-btn { background: none; border: 1px solid var(--ama-border); border-radius: 6px; padding: 3px 9px; font-size: 0.78rem; color: var(--ama-text-muted); cursor: pointer; }
.ama-sg-nav-btn:hover { border-color: var(--ama-brand); color: var(--ama-brand); }
.ama-sg-kicker { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ama-brand); font-weight: 600; margin-bottom: 8px; }
.ama-sg-head h1 { font-size: 1.7rem; margin: 0 0 10px; }
.ama-sg-meta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; color: var(--ama-text-secondary); font-size: 0.92rem; margin-bottom: var(--ama-space-md); }
.ama-sg-actions { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }

.ama-sg-block { background: var(--ama-surface); border: 1px solid var(--ama-border); border-radius: 14px; padding: 20px 24px; margin-bottom: var(--ama-space-md); box-shadow: 0 1px 2px rgba(30,60,50,.05); }
.ama-sg-block h2 { font-size: 1.2rem; margin: 0 0 8px; }
.ama-sg-block--method { border-left: 4px solid var(--ama-maths, #6b8cce); }
.ama-sg-body { white-space: pre-line; color: var(--ama-text); font-size: 0.95rem; margin: 0 0 10px; line-height: 1.6; }
.ama-sg-overview-list { padding-left: 1.3rem; margin: 6px 0 0; }
.ama-sg-overview-list li { margin-bottom: 5px; }

.ama-sg-steps { list-style: none; counter-reset: sgs; margin: 8px 0 2px; padding: 0; }
.ama-sg-steps li { counter-increment: sgs; position: relative; padding: 10px 0 10px 40px; border-bottom: 1px dashed var(--ama-border); line-height: 1.55; }
.ama-sg-steps li:last-child { border-bottom: none; }
.ama-sg-steps li::before { content: counter(sgs); position: absolute; left: 0; top: 8px; width: 26px; height: 26px; border-radius: 8px; background: var(--ama-maths, #6b8cce); color: #fff; font-weight: 600; font-size: 0.84rem; display: flex; align-items: center; justify-content: center; }

.ama-sg-formula { font-family: "Consolas", "Cascadia Code", ui-monospace, monospace; font-size: 0.88rem; background: var(--ama-brand-light); border: 1px solid var(--ama-border); border-radius: 9px; padding: 12px 15px; color: var(--ama-brand-hover); line-height: 1.7; white-space: pre-wrap; margin-top: 10px; }
.ama-sg-working { font-family: "Consolas", "Cascadia Code", ui-monospace, monospace; font-size: 0.88rem; line-height: 1.8; background: var(--ama-surface-alt); border: 1px solid var(--ama-border); border-left: 4px solid var(--ama-brand); border-radius: 10px; padding: 14px 18px; margin: 4px 0; white-space: pre-wrap; overflow-x: auto; }
.ama-sg-label { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--ama-text-muted); margin: 12px 0 6px; }
.ama-sg-label-inline { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--ama-brand); margin-right: 8px; }

.ama-sg-refbox > summary { cursor: pointer; list-style: none; font-size: 1.15rem; font-weight: 600; }
.ama-sg-refbox > summary::-webkit-details-marker { display: none; }
.ama-sg-refbody { padding-top: 8px; }
.ama-sg-gloss-cat { font-size: 0.7rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ama-gold); font-weight: 700; margin: 18px 0 6px; padding-top: 14px; border-top: 1px solid var(--ama-border); }
.ama-sg-gloss-cat:first-of-type { border-top: none; padding-top: 2px; margin-top: 6px; }
.ama-sg-gitem { padding: 9px 0; border-bottom: 1px dashed var(--ama-border); }
.ama-sg-gitem:last-child { border-bottom: none; }
.ama-sg-gname { font-weight: 700; display: block; }
.ama-sg-gwhat { display: block; color: var(--ama-text-secondary); font-size: 0.93rem; margin-top: 2px; line-height: 1.55; }

.ama-sg-summary { background: var(--ama-text); color: #e6efea; }
.ama-sg-summary h2 { color: var(--ama-gold); }
.ama-sg-summary .ama-sg-body { color: #cdd9d3; }
.ama-sg-summary-list { list-style: none; counter-reset: sgt; margin: 8px 0 0; padding: 0; }
.ama-sg-summary-list li { counter-increment: sgt; padding: 11px 0 11px 42px; position: relative; border-bottom: 1px solid rgba(255,255,255,0.12); line-height: 1.55; }
.ama-sg-summary-list li:last-child { border-bottom: none; }
.ama-sg-summary-list li::before { content: counter(sgt); position: absolute; left: 0; top: 9px; background: var(--ama-gold); color: var(--ama-text); width: 26px; height: 26px; border-radius: 8px; font-weight: 700; font-size: 0.84rem; display: flex; align-items: center; justify-content: center; }

.ama-sg-map { display: flex; flex-direction: column; gap: 4px; margin: var(--ama-space-lg) 0; }
.ama-sg-map-item { display: flex; align-items: baseline; gap: 10px; padding: 8px 14px; background: var(--ama-surface); border: 1px solid var(--ama-border); border-radius: 9px; text-decoration: none; color: var(--ama-text); font-size: 0.92rem; }
.ama-sg-map-item:hover { border-color: var(--ama-brand); }
.ama-sg-map-no { font-weight: 700; color: var(--ama-brand); min-width: 2.4rem; }
.ama-sg-map-title { flex: 1; }
.ama-sg-map-marks { font-weight: 600; color: var(--ama-text-muted); }

.ama-sg-q { background: var(--ama-surface); border: 1px solid var(--ama-border); border-radius: 14px; margin-bottom: var(--ama-space-md); overflow: hidden; }
.ama-sg-q > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 16px 22px; background: var(--ama-surface-alt); border-bottom: 1px solid var(--ama-border); }
.ama-sg-q > summary::-webkit-details-marker { display: none; }
.ama-sg-q-no { font-weight: 700; background: var(--ama-text); color: var(--ama-bg); padding: 3px 10px; border-radius: 7px; font-size: 0.85rem; }
.ama-sg-q-title { font-weight: 600; flex: 1; min-width: 200px; }
.ama-sg-q-marks { font-weight: 600; color: var(--ama-accounting, #5f9ea0); background: var(--ama-brand-light); padding: 3px 10px; border-radius: 8px; font-size: 0.85rem; white-space: nowrap; }
.ama-sg-q-body { padding: 18px 22px; }
.ama-sg-intro { white-space: pre-line; margin: 0 0 10px; }
.ama-sg-context { white-space: pre-line; background: var(--ama-surface-alt); border: 1px solid var(--ama-border); border-radius: 10px; padding: 12px 16px; margin-bottom: 12px; font-size: 0.95rem; }

.ama-sg-part { border-top: 1px dashed var(--ama-border); padding: 12px 0; }
.ama-sg-part:first-of-type { border-top: none; }
.ama-sg-part .ama-sg-part { margin-left: 18px; }
.ama-sg-part-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ama-sg-part-label { font-weight: 700; color: var(--ama-brand); min-width: 2.6rem; }
.ama-sg-part-prompt { flex: 1; white-space: pre-line; min-width: 220px; }
.ama-sg-part-marks { font-size: 0.8rem; font-weight: 600; color: var(--ama-text-muted); white-space: nowrap; }
.ama-sg-answer { margin-top: 8px; background: var(--ama-brand-light); border-radius: 8px; padding: 8px 12px; font-weight: 600; white-space: pre-line; }
.ama-sg-memo { white-space: pre-line; font-size: 0.95rem; color: var(--ama-text-secondary); line-height: 1.6; }

/* Auto-bulleted memo / model answer (multi-point lists) */
.ama-sg-points { margin: 6px 0; padding-left: 1.25rem; }
.ama-sg-points li { margin-bottom: 5px; line-height: 1.55; }
.ama-sg-points.ama-sg-memo { color: var(--ama-text-secondary); font-size: 0.95rem; }

/* The raw memo, tucked behind a toggle when a worked solution already leads */
.ama-sg-memo-toggle { margin: 6px 0; }
.ama-sg-memo-toggle > summary { cursor: pointer; list-style: none; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ama-text-muted); padding: 2px 0; }
.ama-sg-memo-toggle > summary::-webkit-details-marker { display: none; }
.ama-sg-memo-toggle > summary::before { content: "▸ "; color: var(--ama-brand); }
.ama-sg-memo-toggle[open] > summary::before { content: "▾ "; }

/* Hint collapsed by default */
.ama-sg-hint-toggle { margin: 8px 0 0; }
.ama-sg-hint-toggle > summary { cursor: pointer; list-style: none; display: inline-block; font-size: 0.85rem; font-weight: 600; color: var(--ama-brand-hover); background: var(--ama-brand-light); padding: 3px 10px; border-radius: 999px; }
.ama-sg-hint-toggle > summary::-webkit-details-marker { display: none; }
.ama-sg-hint-body { font-size: 0.92rem; color: var(--ama-text-secondary); margin: 6px 0 0; line-height: 1.55; white-space: pre-line; }
.ama-sg-info { margin: 10px 0; }

@media print {
    .ama-header, .ama-footer, .ama-sg-actions, .ama-sg-nav, .ama-consent, .am-breadcrumb { display: none !important; }
    .ama-sg-q, .ama-sg-block, .ama-sg-refbox, .ama-sg-memo-toggle, .ama-sg-hint-toggle { break-inside: avoid; box-shadow: none; }
    /* Print everything expanded regardless of toggle state */
    details { display: block !important; }
    details > summary { display: none !important; }
    details > *:not(summary) { display: revert !important; }
}
@media (max-width: 560px) {
    .ama-sg-q > summary { padding: 13px 14px; }
    .ama-sg-q-body { padding: 14px; }
    .ama-sg-block { padding: 16px; }
    .ama-sg-nav { top: 0; }
}

/* ============================================================
   GUIDED MODE — part stepper + reading measure
   ============================================================ */

.ama-ep-question-area { max-width: 920px; margin: 0 auto; }
.ama-ep-question-area .ama-ep-part-main > p,
.ama-ep-reading-passage p, .ama-ep-study-guide p { max-width: 66ch; }
/* Cap the part prompt's line length too — long lines are the main readability killer
   for the dense discussion/calculation prompts. Tables stay full width (separate divs). */
.ama-ep-part-prompt { max-width: 66ch; }
.ama-ep-prompt-para { margin: 0 0 0.6em; }
.ama-ep-prompt-para:last-child { margin-bottom: 0; }

/* Readability — the prose a learner actually reads (scenario, prompt, hints, numbered
   info lists) gets a slightly larger size and more generous line-height + paragraph
   spacing. The compact data tables (transactions, ledgers) are left as-is so wide grids
   don't overflow. */
.ama-ep-part-prompt,
.ama-ep-reading-passage,
.ama-ep-hint { font-size: 1.0625rem; line-height: 1.75; }
.ama-ep-info-list { font-size: var(--ama-text-base); line-height: 1.75; }
.ama-ep-info-list li { margin-bottom: 0.4em; }

/* Prompt: intro paragraph(s) + a clean list of sub-items with bold markers. */
.ama-ep-prompt-para { margin: 0 0 0.7em; white-space: pre-line; }
.ama-ep-prompt-para:last-child { margin-bottom: 0; }
.ama-ep-prompt-list {
    list-style: none; padding: 0;
    margin: 0.6em 0; display: flex; flex-direction: column; gap: 0.55em;
}
.ama-ep-prompt-item {
    display: flex; gap: 0.55em; align-items: baseline;
    padding: 0.5em 0.7em; border-radius: 8px;
    background: var(--ama-surface-alt, #f7f7fb);
}
.ama-ep-prompt-marker { font-weight: 700; color: var(--ama-brand); flex-shrink: 0; min-width: 2.1em; }
.ama-ep-prompt-itext { flex: 1; min-width: 0; }
.ama-ep-part-prompt strong { font-weight: 700; }

/* Hint cards: icon badge + small label + text, replacing the plain inline block. */
.ama-ep-hint {
    display: flex; gap: 0.65em; align-items: flex-start;
    margin-bottom: var(--ama-space-sm);
    padding: 0.7em 0.9em;
    background: var(--ama-brand-subtle);
    border: 1px solid color-mix(in srgb, var(--ama-brand) 22%, transparent);
    border-left: 4px solid var(--ama-brand);
    border-radius: 10px;
}
.ama-ep-hint-icon { flex-shrink: 0; font-size: 1.15em; line-height: 1.5; }
.ama-ep-hint-content { min-width: 0; }
.ama-ep-hint-label {
    display: block; font-weight: 700; font-size: 0.72em; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--ama-brand); margin-bottom: 0.1em;
}
.ama-ep-hint-text { display: block; }
.ama-ep-hint strong { font-weight: 700; }

.ama-ep-stepper { position: sticky; top: 0; z-index: 25; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--ama-surface); border: 1px solid var(--ama-border); border-radius: 10px; padding: 8px 12px; margin-bottom: var(--ama-space-sm); box-shadow: 0 1px 6px rgba(0,0,0,.05); }
.ama-ep-stepper-arrow { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--ama-border); background: var(--ama-surface-alt); cursor: pointer; font-size: 1rem; line-height: 1; }
.ama-ep-stepper-arrow:disabled { opacity: 0.4; cursor: default; }
.ama-ep-stepper-dots { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 120px; }
.ama-ep-dot { width: 13px; height: 13px; border-radius: 50%; border: 1px solid var(--ama-border); background: var(--ama-surface-alt); cursor: pointer; padding: 0; }
.ama-ep-dot.active { outline: 2px solid var(--ama-brand); outline-offset: 1px; }
.ama-ep-dot.has-answer { background: var(--ama-maths, #6b8cce); border-color: var(--ama-maths, #6b8cce); }
.ama-ep-dot.answered-correct { background: #10b981; border-color: #10b981; }
.ama-ep-dot.answered-incorrect { background: #ef4444; border-color: #ef4444; }
.ama-ep-stepper-label { font-size: 0.82rem; font-weight: 600; color: var(--ama-text-secondary); white-space: nowrap; }
.ama-ep-stepper-showall { background: none; border: none; color: var(--ama-brand); font-size: 0.82rem; font-weight: 600; cursor: pointer; text-decoration: underline; padding: 2px 4px; }
.ama-ep-focus-offer { margin-bottom: var(--ama-space-sm); }

/* ============================================================
   LEGAL PAGES (/privacy, /terms)
   ============================================================ */

.ama-legal {
    max-width: 760px;
    margin: 0 auto;
    line-height: 1.65;
}
.ama-legal h1 {
    font-size: 1.6rem;
    margin-bottom: 1rem;
}
.ama-legal h2 {
    font-size: 1.15rem;
    margin: 1.75rem 0 0.5rem;
}
.ama-legal ul {
    padding-left: 1.4rem;
}
.ama-legal li {
    margin-bottom: 0.4rem;
}
.ama-legal-review-banner {
    background: #fffbeb;
    border: 1px solid var(--ama-gold);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
    color: #92400e;
}
.ama-legal-todo {
    background: #fde68a;
    color: #92400e;
    padding: 0 0.25rem;
    border-radius: 3px;
}

/* Landing free-for-launch banner (replaces the plans grid during the free launch) */
.ama-landing-free-banner {
    text-align: center;
    padding: var(--ama-space-lg);
}

/* Footer legal links */
.ama-footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.35rem;
    font-size: 0.85rem;
    color: var(--ama-text-muted);
}
.ama-footer-links a {
    color: var(--ama-text-muted);
    text-decoration: underline;
}
.ama-footer-links a:hover {
    color: var(--ama-brand);
}
.ama-footer-links-btn {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--ama-text-muted);
    text-decoration: underline;
    cursor: pointer;
}
.ama-footer-links-btn:hover {
    color: var(--ama-brand);
}

/* ============================================================
   COOKIE-CONSENT BANNER (pure JS — App.razor + js/consent.js)
   ============================================================ */

.ama-consent {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4000;
    background: var(--ama-surface);
    border-top: 2px solid var(--ama-brand);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
    padding: 0.9rem 1rem;
}
.ama-consent-inner {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}
.ama-consent-text {
    flex: 1 1 320px;
    font-size: 0.9rem;
    color: var(--ama-text);
    margin: 0;
}
.ama-consent-text a {
    color: var(--ama-brand);
    text-decoration: underline;
}
.ama-consent-actions {
    display: flex;
    gap: 0.5rem;
    flex: 0 0 auto;
}
.ama-consent-btn {
    border-radius: 6px;
    padding: 0.45rem 1rem;
    font-size: 0.9rem;
    cursor: pointer;
    border: 1px solid var(--ama-border);
    background: var(--ama-surface-alt);
    color: var(--ama-text);
}
.ama-consent-btn--accept {
    background: var(--ama-brand);
    border-color: var(--ama-brand);
    color: #fff;
}
.ama-consent-btn--accept:hover {
    background: var(--ama-brand-hover);
}

/* ============================================================
   STATEMENT-TABLE ANSWER (answer-book style, exam practice)
   ============================================================ */

/* Answer-book card: the fill-in statement/grid table reads like a real answer book. */
.ama-st { border: 1px solid var(--ama-border); border-radius: 10px; background: #fff; padding: var(--ama-space-sm) var(--ama-space-md) var(--ama-space-xs); }
.ama-st-title { font-weight: 700; font-size: var(--ama-text-base); color: var(--ama-brand); margin: 0 0 var(--ama-space-xs); padding-bottom: 6px; border-bottom: 2px solid var(--ama-brand-subtle); }
.ama-st-table { width: 100%; border-collapse: collapse; margin-top: var(--ama-space-xxs); }
.ama-st-table th { text-align: left; font-size: var(--ama-text-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--ama-text-muted); font-weight: 700; border-bottom: 2px solid var(--ama-border); padding: 7px 10px; }
.ama-st-table th.ama-st-amount-h { text-align: right; width: 200px; border-left: 1px solid var(--ama-border-light); }
.ama-st-table td { padding: 6px 10px; border-bottom: 1px solid var(--ama-border-light); vertical-align: middle; }
.ama-st-table td.ama-st-amount { text-align: right; white-space: nowrap; border-left: 1px solid var(--ama-border-light); }
.ama-st-row--indent td.ama-st-detail { padding-left: 32px; font-size: 0.92em; color: var(--ama-text-secondary); }
.ama-st-row--total td { font-weight: 700; border-top: 2px solid var(--ama-border); border-bottom: double 3px var(--ama-border); background: var(--ama-surface-alt, #f7f7fb); }
.ama-st-input { height: 36px; border-radius: 6px; }
.ama-st-input--label { width: 100%; max-width: 420px; }
.ama-st-input--amount { width: 160px; text-align: right; font-variant-numeric: tabular-nums; }
.ama-st-input--amount:focus { border-color: var(--ama-brand); }
.ama-st-given { font-variant-numeric: tabular-nums; font-weight: 600; }
.ama-st-given-tag { font-size: 10px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ama-text-muted); margin-left: 6px; font-style: normal; }
.ama-st-note { font-size: var(--ama-text-xs); color: var(--ama-text-muted); margin: 8px 0 0; }

/* Collapsible "given information" block — collapsed by default so the question + answer lead. */
.ama-ep-data { margin-bottom: var(--ama-space-sm); }
.ama-ep-data-toggle { display: flex; align-items: center; gap: 8px; width: 100%; background: var(--ama-surface-alt, #f7f7fb); border: 1px solid var(--ama-border-light); border-radius: 8px; padding: 9px 12px; cursor: pointer; font-size: var(--ama-text-sm); font-weight: 600; color: var(--ama-text-secondary); text-align: left; }
.ama-ep-data-toggle:hover { background: var(--ama-brand-subtle); border-color: var(--ama-brand); color: var(--ama-brand); }
.ama-ep-data-label { flex: 1; }
.ama-ep-data-chev { color: var(--ama-text-muted); font-size: 0.8rem; }
.ama-ep-data--open .ama-ep-data-toggle { border-radius: 8px 8px 0 0; }
.ama-ep-data--open .ama-ep-info-tables { border: 1px solid var(--ama-border-light); border-top: 0; border-radius: 0 0 8px 8px; padding: var(--ama-space-sm) var(--ama-space-md); margin-top: 0; }

/* Study-guide call-to-action — a clear card link under the Start button (was a faint text link). */
.ama-study-guide-cta { display: flex; align-items: center; gap: 12px; margin-top: var(--ama-space-md); padding: 12px 16px; border: 1px solid var(--ama-brand); border-radius: 12px; background: var(--ama-brand-subtle); text-decoration: none; transition: box-shadow 0.15s; }
.ama-study-guide-cta:hover { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); }
.ama-sgc-icon { font-size: 1.5rem; flex-shrink: 0; }
.ama-sgc-body { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.ama-sgc-body strong { font-size: var(--ama-text-base); color: var(--ama-brand); }
.ama-sgc-body span { font-size: var(--ama-text-sm); color: var(--ama-text-secondary); }
.ama-sgc-arrow { font-size: 1.25rem; color: var(--ama-brand); flex-shrink: 0; }

/* Multi-column grid (reconciliations: ledger + statement columns; schedules: a column per
   month). Narrower amount columns than the single-column statement table, horizontal scroll
   on small screens when there are many columns. */
.ama-st-scroll { overflow-x: auto; }
.ama-grid-table th.ama-st-amount-h { width: auto; min-width: 110px; }
.ama-grid-table td.ama-st-amount { min-width: 110px; }
.ama-grid-table .ama-st-input--amount { width: 100px; }
.ama-st-blankcell { color: var(--ama-border); user-select: none; }

/* Per-line marking verdicts shown with the result */
.ama-st-verdicts { display: flex; flex-direction: column; gap: 4px; margin-top: var(--ama-space-xs); }
.ama-st-verdict { display: flex; gap: 8px; align-items: baseline; padding: 6px 10px; border-radius: 8px; font-size: var(--ama-text-sm); }
.ama-st-verdict--ok { background: #ecfdf5; color: #065f46; }
.ama-st-verdict--bad { background: #fef2f2; color: #991b1b; }
.ama-st-verdict-icon { font-weight: 700; flex-shrink: 0; }
.ama-st-verdict-text { flex: 1; min-width: 0; }
.ama-st-verdict-memo { font-style: italic; opacity: 0.85; margin-left: 6px; }
.ama-st-verdict-marks { margin-left: auto; white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
    .ama-st-table th.ama-st-amount-h { width: 140px; }
    .ama-st-input--amount { width: 120px; }
}