@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Aref+Ruqaa:wght@400;700&display=swap');

:root {
    color-scheme: light;
    --ink: #17211f;
    --muted: #62706b;
    --paper: #f8f5ef;
    --panel: #ffffff;
    --line: #d9ded5;
    --green: #1f7a5a;
    --green-dark: #12533d;
    --coral: #d85d3f;
    --gold: #c5902f;
    --gold-dark: #7c520f;
    --gold-soft: #f0db9c;
    --blue: #3867a6;
    --shadow: 0 18px 55px rgba(23, 33, 31, .12);
    --display-font: "Amiri", Georgia, "Times New Roman", serif;
    --arabic-display-font: "Aref Ruqaa", "Amiri", "Times New Roman", serif;
    --arabic-surface: linear-gradient(145deg, #f5fbf6, #eaf5ed);
    --arabic-button-surface: linear-gradient(145deg, rgba(235, 248, 239, .9), rgba(218, 238, 225, .82));
    --arabic-border: rgba(31, 122, 90, .3);
    --arabic-border-strong: rgba(31, 122, 90, .48);
    --arabic-shadow: 0 18px 50px rgba(18, 83, 61, .14);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    background:
        linear-gradient(135deg, rgba(31, 122, 90, .12), transparent 34%),
        linear-gradient(315deg, rgba(216, 93, 63, .12), transparent 30%),
        var(--paper);
    color: var(--ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.arabic-theme {
    background-color: #dfeee3;
    background-image:
        linear-gradient(90deg, rgba(231, 244, 235, .88) 0%, rgba(231, 244, 235, .58) 42%, rgba(31, 122, 90, .22) 100%),
        linear-gradient(120deg, rgba(18, 83, 61, .12), rgba(218, 238, 225, .18)),
        url("../images/arabic-night-study-green-fullpage.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

body.home-theme {
    background-color: #f0d98b;
    background-image:
        linear-gradient(90deg, rgba(255, 244, 205, .88) 0%, rgba(247, 224, 158, .46) 44%, rgba(165, 111, 22, .12) 100%),
        linear-gradient(120deg, rgba(124, 82, 15, .06), rgba(255, 250, 237, .14)),
        url("../images/babel-language-tower-yellow-fullpage.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

body.georgian-theme {
    --theme-dark: #244c82;
    --theme-border: rgba(56, 103, 166, .5);
    --theme-border-soft: rgba(56, 103, 166, .3);
    --theme-surface: linear-gradient(145deg, #f4f8fd, #e5eff9);
    --theme-button-surface: linear-gradient(145deg, rgba(244, 248, 253, .96), rgba(224, 235, 249, .9));
    --theme-shadow: 0 18px 50px rgba(36, 76, 130, .14);
    background-color: #dce8f6;
    background-image:
        linear-gradient(90deg, rgba(235, 243, 252, .9) 0%, rgba(224, 235, 249, .58) 42%, rgba(56, 103, 166, .2) 100%),
        linear-gradient(120deg, rgba(36, 76, 130, .12), rgba(224, 235, 249, .16));
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    overflow-x: hidden;
    position: relative;
}

body.georgian-theme::before {
    content: "";
    position: fixed;
    z-index: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: calc(50vw - 590px + 780px);
    pointer-events: none;
    background-image:
        linear-gradient(90deg, rgba(235, 243, 252, .58) 0%, rgba(224, 235, 249, .48) 34%, rgba(56, 103, 166, .16) 100%),
        linear-gradient(120deg, rgba(36, 76, 130, .1), rgba(224, 235, 249, .14)),
        url("../images/georgian-study-blue-fullpage.png");
    background-position: 58% center;
    background-repeat: no-repeat;
    background-size: cover;
}

body.georgian-theme .shell {
    position: relative;
    z-index: 1;
}

body.armenian-theme {
    --theme-dark: #743526;
    --theme-border: rgba(154, 79, 63, .5);
    --theme-border-soft: rgba(154, 79, 63, .3);
    --theme-surface: linear-gradient(145deg, #fff7f0, #f4ded5);
    --theme-button-surface: linear-gradient(145deg, rgba(255, 247, 240, .96), rgba(246, 226, 219, .9));
    --theme-shadow: 0 18px 50px rgba(116, 53, 38, .14);
    background-color: #ead4cb;
    background-image:
        linear-gradient(90deg, rgba(255, 247, 240, .9) 0%, rgba(246, 226, 219, .58) 42%, rgba(154, 79, 63, .2) 100%),
        linear-gradient(120deg, rgba(116, 53, 38, .12), rgba(246, 226, 219, .16)),
        url("../images/armenian-study-red-fullpage.png?v=20260907-yerevan-soft");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

body.indonesian-theme {
    --theme-dark: #0d514d;
    --theme-border: rgba(15, 118, 110, .5);
    --theme-border-soft: rgba(15, 118, 110, .3);
    --theme-surface: linear-gradient(145deg, #f0fbf8, #dff4ef);
    --theme-button-surface: linear-gradient(145deg, rgba(240, 251, 248, .96), rgba(211, 242, 237, .9));
    --theme-shadow: 0 18px 50px rgba(13, 81, 77, .14);
    background-color: #d4eee9;
    background-image:
        linear-gradient(90deg, rgba(240, 251, 248, .9) 0%, rgba(211, 242, 237, .58) 42%, rgba(15, 118, 110, .2) 100%),
        linear-gradient(120deg, rgba(13, 81, 77, .12), rgba(211, 242, 237, .16)),
        url("../images/indonesian-study-teal-fullpage.png");
}

body.answer-waiting,
body.answer-waiting * {
    cursor: wait !important;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

.shell {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    min-height: 100vh;
    padding: 0;
}

.topbar,
.lesson-brief,
.game-grid {
    display: grid;
    gap: 18px;
}

.topbar {
    grid-template-columns: 1fr;
    align-items: start;
    max-width: 780px;
    margin-bottom: 0;
}

.language-shell .topbar,
.language-shell .choice-grid {
    max-width: 700px;
}

.lesson-shell .topbar {
    max-width: 614px;
    margin-bottom: 0;
}

.home-theme .shell {
    display: grid;
    justify-content: start;
    min-height: 100vh;
    padding-bottom: 0;
}

.page-article {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 780px;
    max-width: 100%;
    min-height: 100vh;
    border-right: 3px solid rgba(31, 122, 90, .42);
    border-left: 3px solid rgba(31, 122, 90, .42);
    border-top: 0;
    border-bottom: 0;
    border-radius: 0;
    padding: 22px;
    background: linear-gradient(145deg, #f5fbf6, #eaf5ed);
    box-shadow: 0 22px 60px rgba(18, 83, 61, .16);
}

body.home-theme .page-article {
    border-right-color: rgba(197, 144, 47, .52);
    border-left-color: rgba(197, 144, 47, .52);
    background: linear-gradient(145deg, #fffbed, #f7e2a6);
    box-shadow: 0 22px 60px rgba(124, 82, 15, .17);
}

body.language-theme:not(.arabic-theme) .page-article {
    border-color: var(--theme-border);
    background: var(--theme-surface);
    box-shadow: var(--theme-shadow);
}

.home-article,
.language-article,
.auth-article {
    width: 780px;
}

.lesson-article,
.alphabet-article,
.legal-article,
.admin-article {
    width: 780px;
}

.page-article > .site-footer {
    margin-top: auto;
}

.home-article .topbar {
    max-width: none;
}

.home-theme h1,
.home-theme .choice-card strong {
    color: var(--gold-dark);
}

body.language-theme:not(.arabic-theme) h1,
body.language-theme:not(.arabic-theme) h2,
body.language-theme:not(.arabic-theme) h3,
body.language-theme:not(.arabic-theme) .choice-card strong,
body.language-theme:not(.arabic-theme) .lesson-card strong,
body.language-theme:not(.arabic-theme) .prompt-header span,
body.language-theme:not(.arabic-theme) .lesson-number,
body.language-theme:not(.arabic-theme) .letter-question-title h3 {
    color: var(--theme-dark);
}

body.language-theme:not(.arabic-theme) .choice-card,
body.language-theme:not(.arabic-theme) .lesson-card,
body.language-theme:not(.arabic-theme) .lesson-side-nav a,
body.language-theme:not(.arabic-theme) .choice-button,
body.language-theme:not(.arabic-theme) .ghost-button,
body.language-theme:not(.arabic-theme) .auth-pill,
body.language-theme:not(.arabic-theme) .primary-button {
    border-color: var(--theme-border-soft);
    background: var(--theme-button-surface);
}

body.language-theme:not(.arabic-theme) .choice-card.primary,
body.language-theme:not(.arabic-theme) .lesson-card:hover,
body.language-theme:not(.arabic-theme) .lesson-side-nav a:hover,
body.language-theme:not(.arabic-theme) .choice-button:not(:disabled):hover {
    border-color: var(--theme-border);
}

body.language-theme:not(.arabic-theme) .lesson-side-nav a.active,
body.language-theme:not(.arabic-theme) .choice-button.correct b,
body.language-theme:not(.arabic-theme) .choice-button:not(:disabled):hover b {
    background: var(--theme-dark);
    color: #fff;
}

.home-theme .choice-grid {
    align-content: start;
    grid-template-columns: 1fr;
}

.home-theme .choice-card {
    border: 2px solid rgb(var(--language-accent-rgb, 197 144 47) / .32);
    background: linear-gradient(145deg, rgba(255, 252, 241, .93), var(--language-accent-soft, rgba(245, 224, 169, .84)));
    box-shadow: 0 12px 34px rgba(124, 82, 15, .13);
}

.home-theme .choice-card:hover {
    border-color: rgb(var(--language-accent-rgb, 197 144 47) / .56);
    background: linear-gradient(145deg, rgba(255, 252, 241, .98), var(--language-accent-soft, rgba(245, 224, 169, .84)));
}

.home-theme .choice-card p {
    color: #665532;
}

.home-theme .language-card .eyebrow,
.home-theme .language-card strong {
    color: var(--language-accent, var(--green-dark));
}

.home-theme .choice-card.disabled {
    opacity: .9;
}

.home-theme .choice-script {
    color: rgb(var(--language-accent-rgb, 197 144 47) / .11);
    font-family: var(--arabic-display-font), "Segoe UI", Georgia, serif;
}

.topbar-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.topbar-meta .eyebrow {
    margin-bottom: 0;
}

.legal-shell {
    width: min(780px, calc(100% - 32px));
}

.legal-article {
    max-width: 780px;
}

.site-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 780px;
    margin-top: 28px;
    border-top: 1px solid rgba(31, 122, 90, .18);
    padding-top: 14px;
    color: var(--muted);
    font-size: .86rem;
    font-weight: 700;
}

.site-footer a {
    color: var(--green-dark);
    text-decoration: none;
}

.site-footer a:hover {
    text-decoration: underline;
}

.home-article .site-footer {
    align-self: end;
    margin-top: 0;
}

.eyebrow {
    margin: 0 0 6px;
    color: var(--green-dark);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.eyebrow a {
    color: inherit;
    text-decoration: none;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1 {
    margin-bottom: 0;
    font-family: var(--display-font);
    font-size: clamp(2rem, 4vw, 4.2rem);
    font-weight: 700;
    line-height: 1;
}

.lesson-shell h1 {
    margin-bottom: 14px;
    font-size: clamp(1.45rem, 2.3vw, 2.25rem);
    line-height: 1.12;
}

.prompt-title-row {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
}

.prompt-title-row h1 {
    min-width: 0;
}

.local-hard-mode-button {
    flex: 0 0 auto;
    min-height: 36px;
    padding-inline: 12px;
}

h2 {
    margin-bottom: 8px;
    font-family: var(--display-font);
    font-size: 1.35rem;
    font-weight: 700;
}

h3 {
    margin-bottom: 0;
    font-family: var(--display-font);
    font-size: 1rem;
    font-weight: 700;
}

.lesson-tabs {
    display: flex;
    gap: 8px;
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: 3px;
}

.top-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.lesson-tabs a {
    display: inline-grid;
    min-width: 48px;
    height: 42px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0 12px;
    color: var(--ink);
    font-family: Arial, "Segoe UI", "Noto Naskh Arabic", "Times New Roman", sans-serif;
    font-weight: 800;
    text-decoration: none;
    background: rgba(255, 255, 255, .72);
    white-space: nowrap;
}

.lesson-tabs a.active {
    border-color: var(--green);
    background: var(--green);
    color: #fff;
}

.choice-grid,
.lesson-list {
    display: grid;
    gap: 14px;
}

.alphabet-article {
    max-width: 780px;
}

.alphabet-intro,
.alphabet-explanation {
    margin-bottom: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 18px;
    background: rgba(255, 255, 255, .78);
}

.alphabet-intro,
.alphabet-explanation,
.lesson-list {
    max-width: 780px;
}

.block-page {
    display: grid;
    gap: 16px;
}

.block-page > *,
.content-body,
.content-table-block,
.reference-table-wrap,
.lesson-list,
.lesson-card {
    min-width: 0;
    max-width: 100%;
}

.block-page > h2,
.block-page > h3,
.practice-stack > h2,
.practice-stack > h3,
.prompt-panel > h2,
.prompt-panel > h3 {
    margin-bottom: 0;
}

.content-table-block table {
    width: 100%;
    border-collapse: collapse;
    overflow: hidden;
    border-radius: 8px;
}

.content-table-block th,
.content-table-block td {
    border: 1px solid rgba(31, 122, 90, .18);
    padding: 8px 10px;
    vertical-align: middle;
}

.content-table-block th {
    color: var(--green-dark);
    font-weight: 800;
}

.alphabet-intro p,
.alphabet-explanation p,
.content-body {
    color: var(--muted);
}

.content-body {
    margin-bottom: 14px;
}

.alphabet-intro .content-body,
.alphabet-explanation .content-body {
    max-width: 800px;
}

.content-body p,
.content-body ul,
.content-body ol,
.content-body blockquote {
    margin-top: 0;
    max-width: 800px;
}

.content-body li + li {
    margin-top: 6px;
}

.alphabet-explanation .content-body {
    font-family: Arial, "Segoe UI", "Noto Naskh Arabic", "Times New Roman", sans-serif;
}

.alphabet-explanation .content-body {
    font-size: 1.08rem;
    line-height: 1.75;
}

.content-body > :last-child {
    margin-bottom: 0;
}

.alphabet-section-list {
    display: grid;
    gap: 16px;
    margin-top: 22px;
}

.alphabet-section {
    max-width: 800px;
    border-top: 1px solid var(--line);
    padding-top: 16px;
}

.alphabet-section h3 {
    margin-bottom: 8px;
    font-size: 1.22rem;
    line-height: 1.45;
}

.alphabet-reference {
    max-width: 800px;
    border-top: 1px solid var(--line);
    padding-top: 18px;
}

.reference-heading {
    margin-bottom: 10px;
}

.reference-heading h3,
.reference-heading h4 {
    margin-bottom: 4px;
    font-size: 1.22rem;
    line-height: 1.35;
}

.reference-heading.secondary {
    margin-top: 18px;
}

.reference-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .82);
}

.reference-table-wrap.compact {
    margin-bottom: 2px;
    overflow-x: hidden;
}

.reference-table {
    width: 100%;
    min-width: 820px;
    border-collapse: collapse;
    font-family: Arial, "Segoe UI", "Noto Naskh Arabic", "Times New Roman", sans-serif;
    font-size: .92rem;
}

.letter-reference-table {
    min-width: 0;
    table-layout: fixed;
    font-size: .84rem;
}

.letter-reference-table th,
.letter-reference-table td {
    padding: 7px 5px;
}

.letter-reference-table th {
    letter-spacing: .03em;
}

.letter-reference-main-letter {
    width: 8%;
}

.letter-reference-name {
    width: 13%;
}

.letter-reference-form {
    width: 8%;
}

.letter-reference-transliteration {
    width: 11%;
}

.letter-reference-ipa {
    width: 12%;
}

.letter-reference-joins {
    width: 24%;
}

.reference-table th,
.reference-table td {
    border-bottom: 1px solid var(--line);
    padding: 9px 10px;
    text-align: center;
    vertical-align: middle;
}

.reference-table th {
    color: var(--green-dark);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: rgba(31, 122, 90, .08);
}

.forms-header-row th {
    border-top: 1px solid rgba(31, 122, 90, .18);
    font-size: .66rem;
}

.reference-table tbody tr:last-child td {
    border-bottom: 0;
}

.reference-table tbody tr:hover {
    background: rgba(197, 144, 47, .08);
}

.reference-arabic {
    color: var(--ink);
    font-family: "Times New Roman", "Noto Naskh Arabic", serif;
    font-size: 1.8rem;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

.reference-arabic.small {
    font-size: 1.4rem;
}

.reference-arabic.form-cell {
    font-size: 1.35rem;
}

.numbers-reference-table {
    min-width: 0;
    table-layout: fixed;
    font-size: .82rem;
}

.numbers-reference-table th,
.numbers-reference-table td {
    padding: 7px 6px;
}

.numbers-reference-table th:nth-child(1),
.numbers-reference-table td:nth-child(1) {
    width: 12%;
}

.numbers-reference-table th:nth-child(2),
.numbers-reference-table td:nth-child(2) {
    width: 23%;
}

.numbers-reference-table th:nth-child(3),
.numbers-reference-table td:nth-child(3) {
    width: 31%;
}

.numbers-reference-table th:nth-child(4),
.numbers-reference-table td:nth-child(4) {
    width: 34%;
}

.numbers-reference-table td:not(:first-child) {
    text-align: left;
    overflow-wrap: anywhere;
}

.numbers-reference-table .number-pattern-example {
    color: var(--ink);
    line-height: 1.45;
}

.numbers-reference-table .number-pattern-example bdi {
    font-family: "Times New Roman", "Noto Naskh Arabic", serif;
    font-size: 1.1rem;
    font-weight: 700;
}

.marks-reference-table {
    max-width: 100%;
    min-width: 0;
    table-layout: fixed;
}

.marks-reference-table th,
.marks-reference-table td {
    padding: 8px 7px;
}

.marks-reference-table th:nth-child(1),
.marks-reference-table td:nth-child(1) {
    width: 9%;
}

.marks-reference-table th:nth-child(2),
.marks-reference-table td:nth-child(2) {
    width: 15%;
}

.marks-reference-table th:nth-child(3),
.marks-reference-table td:nth-child(3) {
    width: 18%;
}

.marks-reference-table th:nth-child(4),
.marks-reference-table td:nth-child(4) {
    width: 13%;
}

.marks-reference-table th:nth-child(5),
.marks-reference-table td:nth-child(5) {
    width: 13%;
}

.reference-note-cell {
    font-size: .82rem;
    line-height: 1.25;
    overflow-wrap: break-word;
    white-space: normal;
}

.arabic-highlight {
    color: #c83228;
    font-weight: inherit;
}


.text-link {
    display: inline-block;
    margin-top: 14px;
    color: var(--green-dark);
    font-weight: 800;
    text-decoration: none;
}

.continue-reading-link {
    display: inline;
    margin-top: 0;
    font-weight: 400;
}

.text-link:hover {
    text-decoration: underline;
}

.choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.choice-grid.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.choice-card,
.lesson-card {
    position: relative;
    min-height: 112px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, .82);
    box-shadow: var(--shadow);
    color: var(--ink);
    text-decoration: none;
}

.choice-card {
    display: grid;
    align-content: end;
}

.choice-card.primary,
.lesson-card:hover {
    border-color: rgba(31, 122, 90, .45);
}

.choice-card.disabled {
    opacity: .62;
}

.choice-card.disabled,
.choice-card.disabled:hover {
    cursor: default;
}

.choice-card strong,
.lesson-card strong {
    display: block;
    margin-bottom: 6px;
    color: var(--green-dark);
    font-size: 1.08rem;
    line-height: 1.35;
}

.choice-card p,
.lesson-card p {
    margin-bottom: 0;
    color: var(--muted);
    overflow-wrap: anywhere;
}

.choice-script {
    position: absolute;
    top: 14px;
    right: 16px;
    color: rgba(23, 33, 31, .1);
    font-family: var(--arabic-display-font);
    font-size: clamp(2.5rem, 6vw, 5rem);
    line-height: 1;
}

body.arabic-theme h1,
body.arabic-theme h2,
body.arabic-theme h3,
body.arabic-theme .reference-heading h4,
body.arabic-theme .section-practice-card h2,
body.arabic-theme .choice-card strong,
body.arabic-theme .lesson-card strong,
body.arabic-theme .prompt-header span,
body.arabic-theme .lesson-number {
    color: var(--green-dark);
}

body.arabic-theme .alphabet-intro,
body.arabic-theme .alphabet-explanation,
body.arabic-theme .auth-form {
    border: 2px solid var(--arabic-border);
    background: var(--arabic-surface);
    box-shadow: var(--arabic-shadow);
}

body.arabic-theme .alphabet-section,
body.arabic-theme .alphabet-reference,
body.arabic-theme .section-practice-card {
    border-top: 2px solid rgba(31, 122, 90, .2);
}

body.arabic-theme .choice-card,
body.arabic-theme .lesson-card,
body.arabic-theme .lesson-tabs a,
body.arabic-theme .lesson-side-nav a,
body.arabic-theme .generated-choice,
body.arabic-theme .choice-button,
body.arabic-theme .ghost-button,
body.arabic-theme .auth-pill,
body.arabic-theme .primary-button,
body.arabic-theme .letter-forms-wrap,
body.arabic-theme .reference-table-wrap {
    border: 2px solid var(--arabic-border);
    background: var(--arabic-button-surface);
}

body.arabic-theme .choice-card,
body.arabic-theme .lesson-card {
    box-shadow: 0 12px 34px rgba(18, 83, 61, .12);
}

body.arabic-theme .choice-card.primary,
body.arabic-theme .lesson-card:hover,
body.arabic-theme .lesson-tabs a:hover,
body.arabic-theme .lesson-side-nav a:hover,
body.arabic-theme .generated-choice:hover,
body.arabic-theme .choice-button:not(:disabled):hover {
    border-color: var(--arabic-border-strong);
    background:
        linear-gradient(145deg, rgba(226, 245, 232, .96), rgba(199, 226, 210, .9));
}

body.arabic-theme .choice-card p,
body.arabic-theme .lesson-card p,
body.arabic-theme .alphabet-intro p,
body.arabic-theme .alphabet-explanation p,
body.arabic-theme .content-body,
body.arabic-theme .lesson-brief p {
    color: #4e635b;
}

body.arabic-theme .reference-table th {
    color: var(--green-dark);
    background: linear-gradient(180deg, rgba(31, 122, 90, .16), rgba(31, 122, 90, .08));
}

body.arabic-theme .reference-table td,
body.arabic-theme .reference-table th {
    border-bottom-color: rgba(31, 122, 90, .18);
}

body.arabic-theme .example-word,
body.arabic-theme .feedback.success,
body.arabic-theme .feedback.error {
    border: 2px solid var(--arabic-border);
    background:
        radial-gradient(circle at 22% 25%, rgba(197, 144, 47, .18), transparent 24%),
        linear-gradient(145deg, rgba(229, 244, 235, .92), rgba(216, 235, 224, .84));
}

body.arabic-theme .icon-button {
    border: 2px solid rgba(31, 122, 90, .26);
    background: rgba(245, 251, 246, .94);
}

body.arabic-theme .choice-script {
    color: rgba(18, 83, 61, .08);
}

body.arabic-theme .alphabet-article {
    width: 780px;
    border: 3px solid var(--arabic-border-strong);
    border-top: 0;
    border-bottom: 0;
    border-radius: 0;
    padding: 22px;
    background: var(--arabic-surface);
    box-shadow: var(--arabic-shadow);
}

body.arabic-theme .page-article {
    border-color: var(--arabic-border-strong);
    background: var(--arabic-surface);
    box-shadow: var(--arabic-shadow);
}

body.arabic-theme .alphabet-article .topbar {
    max-width: none;
    margin-bottom: 0;
}

body.arabic-theme .alphabet-article .alphabet-intro,
body.arabic-theme .alphabet-article .alphabet-explanation {
    max-width: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

body.arabic-theme .alphabet-article .alphabet-intro {
    margin-bottom: 18px;
}

body.arabic-theme .alphabet-article .lesson-list {
    max-width: none;
    margin-bottom: 24px;
    padding-top: 18px;
    border-top: 2px solid rgba(31, 122, 90, .18);
}

body.arabic-theme .alphabet-article .alphabet-explanation {
    margin-bottom: 0;
    padding-top: 20px;
    border-top: 2px solid rgba(31, 122, 90, .18);
}

.lesson-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 18px;
}

.lesson-card {
    display: block;
    min-height: 112px;
}

.chunk-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.chunk-pill {
    display: inline-grid;
    min-height: 38px;
    align-items: center;
    border: 1px solid rgba(31, 122, 90, .2);
    border-radius: 8px;
    padding: 6px 10px;
    background: rgba(31, 122, 90, .08);
    color: var(--ink);
    font-family: Arial, "Segoe UI", "Noto Naskh Arabic", "Times New Roman", sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.35;
}

.section-practice-card {
    display: grid;
    gap: 10px;
    border-top: 1px solid var(--line);
    padding-top: 16px;
}

.section-practice-card.examples-card {
    border-top: 0;
    padding-top: 0;
}

.section-practice-card + .section-practice-card {
    margin-top: 16px;
}

.section-practice-card h2 {
    margin: 0;
    color: var(--green-dark);
    font-size: 1.08rem;
    line-height: 1.35;
}

.section-detail-lines {
    display: grid;
    gap: 8px;
    margin-bottom: 16px;
    color: inherit;
    line-height: 1.55;
}

.section-detail-lines p {
    margin: 0;
}

.quiz-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.quiz-header span {
    color: var(--muted);
    font-weight: 900;
    white-space: nowrap;
}

.number-quiz-header {
    justify-content: flex-end;
}

.generated-question {
    display: grid;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
    background: rgba(248, 245, 239, .5);
}

.generated-question p {
    margin: 0;
    color: var(--ink);
    font-weight: 800;
    line-height: 1.4;
}

.generated-question small {
    color: var(--muted);
    line-height: 1.45;
}

.generated-choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.generated-choice {
    display: inline-grid;
    min-height: 38px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 7px 10px;
    background: #fff;
    color: var(--ink);
    cursor: pointer;
    font-family: Arial, "Segoe UI", "Noto Naskh Arabic", "Times New Roman", sans-serif;
    font-size: .98rem;
    font-weight: 400;
    line-height: 1.35;
    text-align: start;
}

.generated-choice.correct {
    border-color: rgba(31, 122, 90, .45);
    background: rgba(31, 122, 90, .12);
    color: var(--green-dark);
}

.generated-choice.incorrect {
    border-color: rgba(216, 93, 63, .5);
    background: rgba(216, 93, 63, .12);
    color: #873522;
}

.generated-choice:disabled {
    cursor: default;
}

.syllable-section-shell .generated-choice {
    min-height: 48px;
    padding: 10px 14px;
    font-size: .98rem;
    font-weight: 400;
}

.syllable-section-shell .question-arabic {
    display: inline-block;
    font-family: "Times New Roman", "Noto Naskh Arabic", serif;
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.2;
}

.syllable-section-shell .generated-choice .question-arabic {
    font-size: 1.55rem;
    font-weight: 400;
}

.syllable-section-shell .generated-question small .question-arabic {
    font-size: 1.25rem;
}

.syllable-section-shell .lesson-side-nav a {
    min-height: 38px;
    padding: 0 8px;
    font-size: .82rem;
    line-height: 1.15;
}

.syllable-section-shell .game-grid {
    grid-template-columns: minmax(0, 1fr) 146px;
    max-width: 760px;
}

.number-example-list {
    display: grid;
    gap: 10px;
    margin-bottom: 16px;
}

.number-example {
    display: grid;
    grid-template-columns: 42px 72px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(31, 122, 90, .16);
    border-radius: 8px;
    padding: 10px;
    background: rgba(31, 122, 90, .06);
}

.number-symbol {
    font-family: "Times New Roman", "Noto Naskh Arabic", serif;
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1;
}

.number-word {
    display: block;
    margin-bottom: 2px;
    font-family: "Times New Roman", "Noto Naskh Arabic", serif;
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1.2;
}

.number-example p {
    margin: 0;
    color: inherit;
}

.number-section-shell .generated-choice {
    min-height: 48px;
    padding: 10px 14px;
    font-size: .98rem;
    font-weight: 400;
}

.number-section-shell .question-arabic {
    display: inline-block;
    font-family: "Times New Roman", "Noto Naskh Arabic", serif;
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.2;
}

.number-section-shell .generated-choice .question-arabic {
    font-size: 1.55rem;
    font-weight: 400;
}

.number-section-shell .generated-question small .question-arabic {
    font-size: 1.25rem;
}

.number-section-shell .lesson-side-nav a {
    min-height: 38px;
    padding: 0 8px;
    font-size: .82rem;
    line-height: 1.15;
}

.number-section-shell .game-grid {
    grid-template-columns: minmax(0, 1fr) 146px;
    max-width: 760px;
}

.number-section-shell [hidden] {
    display: none !important;
}

.quiz-audio-button {
    justify-self: start;
}

.generated-question small.correct {
    color: var(--green-dark);
    font-weight: 800;
}

.generated-question small.incorrect {
    color: #873522;
    font-weight: 800;
}

.quiz-next-button {
    justify-self: start;
    margin-top: 2px;
    border-color: rgba(31, 122, 90, .38);
    background: rgba(255, 255, 255, .82);
    color: var(--green-dark);
}

.quiz-next-button:hover {
    border-color: var(--green);
    background: rgba(232, 241, 233, .95);
    color: var(--green-dark);
}

.test-list {
    display: grid;
    gap: 6px;
    margin: 0;
    padding-left: 18px;
    color: var(--muted);
}

.test-list li {
    line-height: 1.45;
}

.lesson-number {
    display: inline;
    color: var(--green-dark);
    font-weight: inherit;
}

.auth-pill,
.primary-button {
    display: inline-grid;
    min-height: 42px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0 14px;
    background: #fff;
    color: var(--ink);
    cursor: pointer;
    font-weight: 800;
    text-decoration: none;
}

.auth-pill.strong,
.primary-button {
    border-color: var(--green);
    background: var(--green);
    color: #fff;
}

.lesson-brief {
    grid-template-columns: 1fr;
    align-items: end;
    max-width: 800px;
    margin-bottom: 14px;
}

.lesson-brief p {
    max-width: 800px;
    margin-bottom: 0;
    color: var(--muted);
}

.lesson-brief .lesson-recognition {
    color: var(--ink);
}

.lesson-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.lesson-title-row h2 {
    margin-bottom: 8px;
}

.next-lesson-button {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 0 14px;
}

.lesson-side-nav {
    display: grid;
    gap: 8px;
    align-self: stretch;
}

.lesson-side-nav a {
    display: grid;
    min-height: 42px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .74);
    color: var(--ink);
    font-family: Arial, "Segoe UI", "Noto Naskh Arabic", "Times New Roman", sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
    text-decoration: none;
}

.lesson-side-nav a:hover {
    border-color: rgba(31, 122, 90, .55);
    background: rgba(31, 122, 90, .08);
}

.lesson-side-nav a.active {
    border-color: var(--green);
    background: var(--green);
    color: #fff;
}

body.arabic-theme .lesson-side-nav a.active {
    border-color: var(--green-dark);
    background:
        linear-gradient(145deg, rgba(240, 250, 243, .98), rgba(202, 229, 212, .92));
    box-shadow: inset 0 0 0 1px rgba(18, 83, 61, .18);
    color: var(--green-dark);
}

.lesson-side-nav span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.game-grid {
    grid-template-columns: minmax(0, 1fr) 88px;
    align-items: start;
    max-width: 700px;
    gap: 14px;
}

.prompt-panel {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.prompt-panel {
    min-height: 0;
    padding: 0;
}

.prompt-header,
.answer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.prompt-header {
    margin-bottom: 12px;
}

.prompt-header span {
    color: var(--ink);
    font-size: 1.08rem;
    font-weight: 800;
}

.prompt-header span a {
    color: var(--green-dark);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.prompt-header .test-status {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    color: var(--muted);
    font-size: .95rem;
    font-weight: 800;
    white-space: nowrap;
}

.prompt-header .status-separator {
    color: rgba(98, 112, 107, .72);
}

.prompt-header .status-caption {
    color: var(--green-dark);
    text-transform: lowercase;
}

.ghost-button,
.choice-button {
    min-height: 42px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    cursor: pointer;
    font-weight: 800;
}

.ghost-button {
    padding: 0 14px;
}

.ghost-button[disabled] {
    cursor: not-allowed;
    opacity: .55;
}

.practice-stack {
    width: min(100%, 68ch);
    margin-inline: auto;
}

.letter-stage {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    margin: 8px 0 0;
    padding: 8px 0 10px;
    align-items: center;
    justify-content: stretch;
    justify-items: center;
    gap: 10px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.letter-question-title {
    width: 100%;
    text-align: center;
}

.letter-question-title h3 {
    margin-bottom: 0;
    color: var(--green-dark);
    font-size: 1.15rem;
}

body.language-theme:not(.arabic-theme) .letter-stage {
    gap: 6px;
    padding-top: 4px;
}

body.language-theme:not(.arabic-theme) .letter-audio-line {
    margin-top: -1.25rem;
}

body.language-theme:not(.arabic-theme) .letter-main {
    font-family: "Sylfaen", "Segoe UI", "Noto Sans Georgian", "Noto Sans Armenian", serif;
    font-size: clamp(4.8rem, 9vw, 7.4rem);
    line-height: .82;
}

.answer-zone.hints-hidden .letter-example-line,
.answer-zone.hints-hidden .letter-form-explanation,
.answer-zone.hints-hidden .letter-forms-wrap {
    display: none;
}

.final-test-shell .letter-stage.hints-hidden .play-letter-button {
    display: none;
}

.letter-audio-line,
.letter-example-line {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    width: 100%;
}

.letter-example-line {
    margin-top: 16px;
    gap: 8px;
}

.letter-main {
    position: relative;
    display: inline-block;
    font-family: "Times New Roman", "Noto Naskh Arabic", serif;
    font-size: clamp(5.2rem, 10vw, 8.5rem);
    line-height: 1;
    margin-right: 4px;
}

.letter-main::after,
.inline-example [data-example-word]::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 72%;
    left: -.05em;
    right: -.05em;
    border-top: 1px solid rgba(18, 83, 61, .32);
    pointer-events: none;
}

.example-intro {
    color: var(--muted);
    font-size: 1.05rem;
    font-weight: 700;
}

.example-label {
    color: var(--green-dark);
    font-size: .82rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.inline-example {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    flex-wrap: nowrap;
}

.inline-example [data-example-word] {
    position: relative;
    display: inline-block;
    font-family: "Times New Roman", "Noto Naskh Arabic", serif;
    font-size: 2.1rem;
    font-weight: 400;
    line-height: 1;
}

.inline-example small {
    color: var(--muted);
    font-size: .98rem;
    line-height: 1.1;
    white-space: nowrap;
}

.inline-example small mark {
    border-radius: 4px;
    background: rgba(216, 93, 63, .2);
    color: var(--ink);
}

.example-word {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px;
    background: #fbfcfa;
}

.icon-button {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--green-dark);
    cursor: pointer;
    font-size: .9rem;
    font-weight: 900;
}

.play-letter-button,
.play-word-button {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    font-size: .78rem;
}

.example-word {
    margin: 12px 0;
}

.example-word p {
    margin-bottom: 2px;
    font-family: "Times New Roman", "Noto Naskh Arabic", serif;
    font-size: 2rem;
}

.example-word mark {
    border-radius: 6px;
    background: rgba(216, 93, 63, .22);
    color: var(--ink);
}

.answer-zone {
    margin-top: 12px;
}

.answer-header {
    margin-bottom: 12px;
}

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

.choice-button {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 4px;
    align-items: center;
    min-height: 76px;
    padding: 12px;
    text-align: left;
}

.choice-button b {
    grid-row: 1 / -1;
    align-self: center;
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 999px;
    background: rgba(31, 122, 90, .12);
    color: var(--green-dark);
    font-size: .9rem;
}

.choice-button strong {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    font-size: 1.05rem;
}

.choice-button .choice-type {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.1;
}

.choice-button span {
    color: var(--muted);
    font-size: .88rem;
}

.choice-button strong > span {
    color: var(--ink);
    font-size: 1.05rem;
}

.choice-button:not(:disabled):hover {
    border-color: rgba(31, 122, 90, .55);
    background: rgba(31, 122, 90, .08);
}

.choice-button:not(:disabled):hover b {
    background: var(--green);
    color: #fff;
}

.choice-button.correct {
    border-color: var(--green);
    background: rgba(31, 122, 90, .12);
}

.choice-button.incorrect {
    border-color: var(--coral);
    background: rgba(216, 93, 63, .12);
}

.choice-button.correct b {
    background: var(--green);
    color: #fff;
}

.choice-button.incorrect b {
    background: var(--coral);
    color: #fff;
}

.feedback {
    display: none;
    color: var(--muted);
}

.feedback.success,
.feedback.error {
    display: block;
    min-height: 52px;
    margin-top: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px;
    background: #fbfcfa;
}

.feedback.success {
    border-color: rgba(31, 122, 90, .45);
    color: var(--green-dark);
}

.feedback.error {
    border-color: rgba(216, 93, 63, .55);
    color: #873522;
}

.retake-button {
    width: 100%;
    min-height: 44px;
    margin-top: 12px;
}

.practice-actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.practice-actions button {
    flex: 1 1 0;
    min-height: 44px;
}

.practice-actions .primary-button {
    border-color: rgba(31, 122, 90, .45);
    background: rgba(232, 241, 233, .95);
    color: var(--green-dark);
}

.practice-actions .primary-button:hover {
    border-color: var(--green);
    background: rgba(31, 122, 90, .12);
    color: var(--green-dark);
}

.letter-forms-wrap {
    width: min(100%, 460px);
    min-width: min(100%, 360px);
    margin: 10px auto 0;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .72);
}

.letter-form-explanation {
    margin: 10px auto 0;
    color: var(--muted);
    font-size: .96rem;
    line-height: 1.45;
    text-align: center;
}

.letter-form-explanation span {
    display: inline-block;
    font-family: "Times New Roman", "Noto Naskh Arabic", serif;
    font-size: 1.35em;
    line-height: 1;
    vertical-align: -.08em;
}

.forms-table {
    width: 100%;
    min-width: 360px;
    border-collapse: collapse;
    table-layout: fixed;
}

.forms-table th,
.forms-table td {
    padding: 6px 10px;
    border-left: 1px solid var(--line);
    text-align: center;
}

.forms-table th:first-child,
.forms-table td:first-child {
    border-left: 0;
}

.forms-table th {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
    text-transform: uppercase;
}

.forms-table td {
    font-family: "Times New Roman", "Noto Naskh Arabic", serif;
    font-size: 2rem;
    line-height: 1.18;
    background-image: linear-gradient(to right, rgba(18, 83, 61, .28), rgba(18, 83, 61, .28));
    background-repeat: no-repeat;
    background-size: calc(100% - 18px) 1px;
    background-position: center 72%;
}

.forms-table .active {
    background-color: rgba(31, 122, 90, .12);
    color: var(--green-dark);
}

.auth-shell {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 24px;
}

.auth-panel {
    width: min(100%, 440px);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 24px;
    background: var(--panel);
    box-shadow: var(--shadow);
}

.auth-panel h1 {
    margin-bottom: 8px;
    font-size: 2.4rem;
}

.auth-copy,
.auth-link {
    color: var(--muted);
}

.auth-form {
    display: grid;
    gap: 13px;
    margin: 20px 0;
}

.auth-form label {
    display: grid;
    gap: 6px;
    color: var(--muted);
    font-weight: 800;
}

.auth-form input {
    min-height: 44px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0 12px;
    background: #fff;
    color: var(--ink);
}

.check-row {
    display: flex !important;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 9px !important;
}

.check-row input {
    min-height: 0;
}

.form-error {
    margin-bottom: 0;
    color: #873522;
}

.auth-link a {
    color: var(--green-dark);
    font-weight: 800;
}

.admin-list,
.content-editor {
    display: grid;
    gap: 14px;
}

.admin-status {
    margin-bottom: 14px;
    border: 1px solid rgba(31, 122, 90, .35);
    border-radius: 8px;
    padding: 12px 14px;
    background: rgba(31, 122, 90, .1);
    color: var(--green-dark);
    font-weight: 800;
}

.content-editor {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 18px;
    background: rgba(255, 255, 255, .82);
    box-shadow: var(--shadow);
}

.content-editor label {
    display: grid;
    gap: 7px;
    color: var(--muted);
    font-weight: 800;
}

.content-editor input,
.content-editor textarea,
.content-editor select {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 11px 12px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-weight: 500;
}

.content-editor textarea {
    min-height: 130px;
    resize: vertical;
}

.content-editor small {
    color: #873522;
}

.block-editor {
    display: grid;
    gap: 14px;
    border-top: 1px solid var(--line);
    padding-top: 16px;
}

.card-list-editor {
    display: grid;
    gap: 14px;
    border-top: 1px solid var(--line);
    padding-top: 16px;
}

.block-editor-heading,
.editor-block-top,
.block-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.block-editor-heading h2 {
    margin-bottom: 0;
}

.block-toolbar {
    align-items: end;
    border: 1px solid rgba(31, 122, 90, .2);
    border-radius: 8px;
    padding: 12px;
    background: rgba(31, 122, 90, .06);
}

.block-toolbar label,
.compact-label {
    max-width: 220px;
}

.block-list {
    display: grid;
    gap: 12px;
}

.editable-card-list {
    display: grid;
    gap: 12px;
}

.editor-block {
    display: grid;
    gap: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px;
    background: rgba(255, 255, 255, .86);
}

.editor-card {
    display: grid;
    gap: 12px;
    border: 2px solid rgba(31, 122, 90, .18);
    border-radius: 8px;
    padding: 14px;
    background: rgba(255, 255, 255, .9);
}

.card-editor-grid {
    display: grid;
    grid-template-columns: minmax(120px, .75fr) repeat(2, minmax(160px, 1fr));
    gap: 12px;
}

.editor-block.locked {
    border-style: dashed;
    background: rgba(31, 122, 90, .07);
}

.editor-block-top strong {
    color: var(--green-dark);
}

.block-actions {
    display: flex;
    gap: 6px;
}

.icon-editor-button {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid rgba(31, 122, 90, .25);
    border-radius: 8px;
    background: #fff;
    color: var(--green-dark);
    cursor: pointer;
    font-size: 1rem;
    font-weight: 900;
}

.icon-editor-button:hover {
    border-color: var(--green);
    background: rgba(31, 122, 90, .08);
}

.icon-editor-button.danger {
    color: #873522;
}

.block-badge {
    border: 1px solid rgba(31, 122, 90, .3);
    border-radius: 999px;
    padding: 4px 9px;
    color: var(--green-dark);
    font-size: .75rem;
    font-weight: 800;
}

.placeholder-note {
    margin-bottom: 0;
    color: var(--muted);
    font-weight: 700;
}

.editor-hint {
    color: var(--muted);
    font-size: .84rem;
    font-style: normal;
    font-weight: 600;
}

.card-description {
    margin-top: 6px;
}

.card-description p {
    margin-bottom: 0;
}

.form-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

@media (max-width: 860px) {
    body.home-theme {
        background-image:
            linear-gradient(90deg, rgba(255, 244, 205, .94), rgba(247, 224, 158, .62)),
            linear-gradient(120deg, rgba(124, 82, 15, .08), rgba(255, 250, 237, .16)),
            url("../images/babel-language-tower-yellow-fullpage.png");
        background-position: center;
        background-attachment: scroll;
    }

    .home-theme .shell {
        justify-content: stretch;
    }

    .page-article,
    .home-article {
        width: 100%;
        padding: 18px;
    }

    body.arabic-theme {
        background-image:
            linear-gradient(90deg, rgba(231, 244, 235, .94) 0%, rgba(231, 244, 235, .72) 52%, rgba(31, 122, 90, .3) 100%),
            linear-gradient(120deg, rgba(18, 83, 61, .12), rgba(218, 238, 225, .18)),
            url("../images/arabic-night-study-green-fullpage.png");
        background-position: center;
        background-attachment: scroll;
    }

    body.georgian-theme {
        background-image:
            linear-gradient(90deg, rgba(235, 243, 252, .94), rgba(224, 235, 249, .68)),
            linear-gradient(120deg, rgba(36, 76, 130, .1), rgba(224, 235, 249, .16)),
            url("../images/georgian-study-blue-fullpage.png");
        background-position: center;
        background-attachment: scroll;
    }

    body.georgian-theme::before {
        display: none;
    }

    body.armenian-theme {
        background-image:
            linear-gradient(90deg, rgba(255, 247, 240, .94), rgba(246, 226, 219, .68)),
            linear-gradient(120deg, rgba(116, 53, 38, .1), rgba(246, 226, 219, .16)),
            url("../images/armenian-study-red-fullpage.png?v=20260907-yerevan-soft");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: scroll;
    }

    body.indonesian-theme {
        background-image:
            linear-gradient(90deg, rgba(240, 251, 248, .94), rgba(211, 242, 237, .68)),
            linear-gradient(120deg, rgba(13, 81, 77, .1), rgba(211, 242, 237, .16)),
            url("../images/indonesian-study-teal-fullpage.png");
        background-position: center;
        background-attachment: scroll;
    }

    .shell {
        width: min(100% - 20px, 680px);
        padding-top: 0;
    }

    .topbar,
    .lesson-brief,
    .game-grid {
        grid-template-columns: 1fr;
    }

    .lesson-side-nav {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        max-height: none;
        padding: 0 0 4px;
    }

    .lesson-side-nav a {
        flex: 0 0 76px;
    }

    .choice-grid,
    .choice-grid.three,
    .lesson-list,
    .card-editor-grid {
        grid-template-columns: 1fr;
    }

    .generated-choices {
        grid-template-columns: 1fr;
    }

    .lesson-tabs {
        overflow-x: auto;
        padding-bottom: 3px;
    }

    .top-actions {
        justify-content: flex-start;
    }

    .lesson-title-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .choices {
        grid-template-columns: 1fr;
    }

    .letter-example-line {
        flex-wrap: wrap;
    }

    .inline-example {
        flex-wrap: wrap;
    }

    .prompt-header,
    .answer-header {
        align-items: stretch;
        flex-direction: column;
    }

    .prompt-title-row {
        align-items: stretch;
        flex-direction: column;
    }

    .practice-actions {
        flex-direction: column;
    }

    .ghost-button {
        width: 100%;
    }
}