:root {
    --ink: #29243a;
    --muted: #6f6980;
    --primary: #6750a4;
    --primary-dark: #513c8d;
    --primary-soft: #eee9ff;
    --mint: #dff7ef;
    --peach: #fff0df;
    --surface: #ffffff;
    --background: #faf8ff;
    --border: #e8e2f0;
    --shadow: 0 18px 50px rgba(62, 43, 100, 0.1);
}

* {
    box-sizing: border-box;
}

body {
    color: var(--ink);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    min-height: 100vh;
}

.child-page {
    background:
        radial-gradient(circle at 8% 5%, rgba(224, 247, 239, 0.8), transparent 28rem),
        radial-gradient(circle at 95% 22%, rgba(255, 233, 207, 0.65), transparent 25rem),
        var(--background);
    overflow-x: hidden;
}

.admin-page {
    overflow-x: hidden;
}

a,
button,
input {
    transition: box-shadow 160ms ease, transform 160ms ease, background-color 160ms ease;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 3px solid #f4a261;
    outline-offset: 3px;
}

.skip-link {
    background: var(--ink);
    color: #fff;
    left: 1rem;
    padding: 0.75rem 1rem;
    position: fixed;
    top: -5rem;
    z-index: 1000;
}

.skip-link:focus {
    top: 1rem;
}

.app-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.brand {
    align-items: center;
    color: var(--ink);
    display: flex;
    font-size: 1.15rem;
    font-weight: 800;
    gap: 0.65rem;
    text-decoration: none;
}

.brand-mark {
    align-items: center;
    background: var(--primary);
    border-radius: 14px;
    color: #fff;
    display: inline-flex;
    height: 2.7rem;
    justify-content: center;
    transform: rotate(-5deg);
    width: 2.7rem;
}

.parent-link,
.back-link {
    color: var(--primary-dark);
    font-weight: 700;
    text-underline-offset: 0.25rem;
}

.welcome-panel {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin: 2.2rem 0 2.6rem;
}

.welcome-panel--compact {
    margin: 0.8rem 0 1.5rem;
}

.welcome-panel--compact h1 {
    font-size: clamp(2rem, 5vw, 3.2rem);
    margin-bottom: 0.45rem;
    max-width: none;
}

.mascot--compact {
    height: clamp(5rem, 11vw, 7.5rem);
    width: clamp(5rem, 11vw, 7.5rem);
}

.welcome-panel h1 {
    font-size: clamp(2rem, 7vw, 4rem);
    font-weight: 850;
    letter-spacing: -0.055em;
    line-height: 1.05;
    margin-bottom: 0.9rem;
    max-width: 13ch;
}

.eyebrow {
    color: var(--primary);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    margin-bottom: 0.55rem;
    text-transform: uppercase;
}

.welcome-copy,
.today-card p,
.mode-card p,
.login-heading p {
    color: var(--muted);
}

.welcome-copy {
    font-size: 1.1rem;
}

.mascot {
    align-items: center;
    background: var(--peach);
    border: 8px solid #fff;
    border-radius: 50% 45% 50% 42%;
    box-shadow: var(--shadow);
    display: flex;
    font-size: clamp(2.4rem, 8vw, 4.5rem);
    height: clamp(8rem, 23vw, 13rem);
    justify-content: center;
    transform: rotate(5deg);
    width: clamp(8rem, 23vw, 13rem);
}

.language-section,
.modes-section {
    margin: 2.8rem 0;
}

.language-section--compact {
    margin: 1.5rem 0;
}

.language-section h2,
.modes-section h2 {
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 1rem;
}

.language-picker {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.language-button {
    align-items: center;
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: 22px;
    color: var(--ink);
    display: flex;
    gap: 1rem;
    min-height: 5.6rem;
    padding: 1rem;
    text-align: left;
    text-decoration: none;
}

.language-button:hover {
    border-color: #c5b8ef;
    color: var(--ink);
    transform: translateY(-2px);
}

.language-button.is-active {
    background: var(--primary-soft);
    border-color: var(--primary);
    box-shadow: 0 10px 30px rgba(103, 80, 164, 0.12);
}

.language-button strong,
.language-button small {
    display: block;
}

.language-button strong {
    font-size: 1.05rem;
}

.language-button small {
    color: var(--muted);
    margin-top: 0.2rem;
}

.language-icon {
    align-items: center;
    background: #dcecff;
    border-radius: 15px;
    color: #245788;
    display: flex;
    font-size: 0.85rem;
    font-weight: 900;
    height: 3.2rem;
    justify-content: center;
    width: 3.2rem;
}

.language-icon--sun {
    background: #ffe9b8;
    color: #8a4f00;
}

.today-card {
    align-items: center;
    background: var(--primary);
    border-radius: 28px;
    box-shadow: 0 20px 45px rgba(81, 60, 141, 0.25);
    color: #fff;
    display: flex;
    gap: 1.5rem;
    justify-content: space-between;
    padding: clamp(1.4rem, 5vw, 2.5rem);
}

.today-card .eyebrow,
.today-card p {
    color: #e3dcff;
}

.today-card h2 {
    font-size: clamp(1.45rem, 4vw, 2.15rem);
    font-weight: 820;
}

.start-button {
    background: #fff;
    border: 0;
    border-radius: 15px;
    color: var(--primary-dark);
    font-weight: 800;
    min-height: 3.35rem;
    padding: 0.9rem 1.25rem;
    white-space: nowrap;
}

.start-button:hover,
.start-button:focus-visible {
    background: var(--mint);
    color: var(--primary-dark);
    transform: translateY(-2px);
}

.start-button.disabled {
    background: rgba(255, 255, 255, 0.72);
    color: #676071;
}

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

.mode-card {
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 22px;
    display: flex;
    gap: 1rem;
    min-height: 7.5rem;
    padding: 1.25rem;
    position: relative;
}

a.mode-card {
    color: var(--ink);
    text-decoration: none;
}

a.mode-card:hover {
    border-color: #b9a9e8;
    color: var(--ink);
    transform: translateY(-2px);
}

.mode-card--primary {
    border-color: #b9a9e8;
}

.mode-card h3 {
    font-size: 1.05rem;
    font-weight: 800;
    margin-bottom: 0.35rem;
}

.mode-card p {
    margin: 0;
}

.mode-symbol {
    align-items: center;
    background: var(--primary-soft);
    border-radius: 15px;
    color: var(--primary);
    display: flex;
    flex: 0 0 auto;
    font-size: 1.35rem;
    height: 3.2rem;
    justify-content: center;
    width: 3.2rem;
}

.mode-badge {
    background: var(--mint);
    border-radius: 999px;
    color: #22634f;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 0.3rem 0.55rem;
    position: absolute;
    right: 0.8rem;
    top: 0.7rem;
}

.mode-badge--soon {
    background: #eeeaf2;
    color: #625b6b;
}

.mode-card--muted {
    background: rgba(255, 255, 255, 0.68);
}

.modes-section--compact {
    margin-bottom: 1rem;
    margin-top: 2rem;
}

.sets-section {
    margin: 2.2rem 0;
}

.section-heading {
    align-items: end;
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.section-heading h2 {
    font-size: 1.4rem;
    font-weight: 820;
    margin: 0;
}

.child-set-grid {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.child-set-card {
    align-items: center;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 18px;
    color: var(--ink);
    display: flex;
    gap: 0.8rem;
    max-width: 100%;
    min-height: 5.2rem;
    min-width: 0;
    padding: 1rem;
    text-decoration: none;
}

.child-set-card:hover {
    border-color: #b9a9e8;
    color: var(--ink);
    transform: translateY(-2px);
}

.child-set-content {
    min-width: 0;
}

.child-set-content strong,
.child-set-content small {
    display: block;
}

.child-set-content .test-reminder {
    color: var(--primary-dark);
    font-weight: 700;
}

.child-set-content strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.child-set-content small {
    color: var(--muted);
    margin-top: 0.2rem;
}

.due-badge {
    background: var(--primary-soft);
    border-radius: 999px;
    color: var(--primary-dark);
    font-size: 0.72rem;
    font-weight: 800;
    margin-left: auto;
    padding: 0.35rem 0.6rem;
    white-space: nowrap;
}

.child-empty {
    align-items: center;
    background: #fff;
    border: 1px dashed #cfc5dd;
    border-radius: 18px;
    display: flex;
    gap: 1rem;
    padding: 1.2rem;
}

.child-empty > span {
    font-size: 2rem;
}

.child-empty h3 {
    font-size: 1rem;
    font-weight: 800;
    margin: 0 0 0.2rem;
}

.child-empty p {
    color: var(--muted);
    margin: 0;
}

.phase-note {
    color: var(--muted);
    font-size: 0.85rem;
    margin-top: 1rem;
    text-align: center;
}

.setup-note {
    border: 1px solid var(--border);
    border-radius: 16px;
}

.narrow-page {
    max-width: 46rem;
}

.empty-state {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 28px;
    box-shadow: var(--shadow);
    padding: clamp(2rem, 7vw, 4rem);
}

.empty-state-icon {
    color: var(--primary);
    display: block;
    font-size: 3rem;
    margin-bottom: 1rem;
}

.empty-state .start-button {
    background: var(--primary);
    color: #fff;
    margin-top: 1rem;
}

.child-primary-button {
    background: var(--primary);
    border: 0;
    border-radius: 14px;
    color: #fff;
    font-weight: 800;
    min-height: 3.2rem;
    padding: 0.8rem 1.2rem;
}

.child-primary-button:hover,
.child-primary-button:focus-visible {
    background: var(--primary-dark);
    color: #fff;
}

.learning-page {
    min-height: 100vh;
}

.learning-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding-bottom: 1rem;
    padding-top: 1rem;
}

.learning-exit,
.learning-meta a {
    color: var(--muted);
    font-weight: 700;
    text-underline-offset: 0.2rem;
}

.learning-shell {
    max-width: 54rem;
    padding-bottom: 3rem;
}

.learning-meta {
    align-items: end;
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
}

.learning-meta .eyebrow {
    margin-bottom: 0.15rem;
}

.card-counter {
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 700;
    margin: 0;
}

.learning-progress {
    appearance: none;
    background: #e8e2f0;
    border: 0;
    border-radius: 999px;
    height: 0.55rem;
    margin: 0.75rem 0 1.7rem;
    overflow: hidden;
    width: 100%;
}

.learning-progress::-webkit-progress-bar {
    background: #e8e2f0;
}

.learning-progress::-webkit-progress-value {
    background: var(--primary);
    border-radius: 999px;
}

.learning-progress::-moz-progress-bar {
    background: var(--primary);
    border-radius: 999px;
}

.flashcard-area {
    text-align: center;
}

.flashcard {
    align-items: center;
    background: #fff;
    border: 2px solid #dcd2ee;
    border-radius: 30px;
    box-shadow: var(--shadow);
    color: var(--ink);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: clamp(18rem, 48vh, 27rem);
    padding: clamp(2rem, 8vw, 4rem);
    position: relative;
    width: 100%;
}

.flashcard:hover {
    border-color: #b9a9e8;
    transform: translateY(-2px);
}

.flashcard.is-revealed {
    background: linear-gradient(145deg, #fff, #f3efff);
}

.card-side-label {
    color: var(--primary);
    font-size: 0.75rem;
    font-weight: 900;
    left: 1.5rem;
    letter-spacing: 0.12em;
    position: absolute;
    text-transform: uppercase;
    top: 1.3rem;
}

.flashcard-term {
    font-size: clamp(2.2rem, 9vw, 5rem);
    font-weight: 850;
    letter-spacing: -0.04em;
    line-height: 1.05;
    overflow-wrap: anywhere;
}

.flashcard-note {
    color: var(--muted);
    font-size: 1rem;
    margin-top: 1.25rem;
}

.flip-hint {
    color: var(--muted);
    font-size: 0.85rem;
    margin: 1rem 0 0.7rem;
}

.reveal-button {
    background: var(--primary);
    border-radius: 14px;
    color: #fff;
    font-weight: 800;
    min-height: 3.2rem;
    padding: 0.8rem 1.3rem;
}

.reveal-button:hover,
.reveal-button:focus-visible {
    background: var(--primary-dark);
    color: #fff;
}

.rating-form {
    margin-top: 1.5rem;
    text-align: center;
}

.rating-form > p {
    font-weight: 800;
}

.rating-buttons {
    display: grid;
    gap: 0.8rem;
    grid-template-columns: repeat(3, 1fr);
}

.rating-button {
    background: #fff;
    border: 2px solid var(--border);
    border-radius: 16px;
    color: var(--ink);
    min-height: 4.8rem;
    padding: 0.75rem;
}

.rating-button strong,
.rating-button small {
    display: block;
}

.rating-button small {
    color: var(--muted);
    margin-top: 0.15rem;
}

.rating-button--unknown:hover {
    background: #fff0ef;
    border-color: #db7a72;
}

.rating-button--fast:hover {
    background: var(--peach);
    border-color: #dfa24f;
}

.rating-button--known:hover {
    background: var(--mint);
    border-color: #58a98e;
}

.completion-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 30px;
    box-shadow: var(--shadow);
    margin-top: 3rem;
    padding: clamp(2rem, 7vw, 4rem);
}

.completion-icon {
    display: block;
    font-size: 3rem;
    margin-bottom: 0.6rem;
}

.completion-card h1 {
    font-weight: 850;
}

.completion-stats {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin: 2rem 0;
}

.completion-stats div {
    background: var(--background);
    border-radius: 16px;
    min-width: 8rem;
    padding: 1rem;
}

.completion-stats strong,
.completion-stats span {
    display: block;
}

.completion-stats strong {
    color: var(--primary);
    font-size: 2rem;
}

.completion-stats span {
    color: var(--muted);
}

.completion-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

.admin-page {
    background: #f6f5f8;
}

.login-wrap {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    padding-bottom: 2rem;
    padding-top: 2rem;
}

.login-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 24px;
    box-shadow: var(--shadow);
    max-width: 30rem;
    padding: clamp(1.5rem, 6vw, 3rem);
    width: 100%;
}

.login-heading {
    margin: 2.2rem 0 1.5rem;
    text-align: center;
}

.login-heading h1 {
    font-size: 1.8rem;
    font-weight: 800;
}

.login-card .start-button {
    background: var(--primary);
    color: #fff;
}

.login-card .back-link {
    display: block;
    margin-top: 1.5rem;
    text-align: center;
}

.form-control {
    border-color: #cbc5d4;
    border-radius: 12px;
    min-height: 3.2rem;
}

.form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.25rem rgba(103, 80, 164, 0.18);
}

.admin-header {
    background: #fff;
    border-bottom: 1px solid var(--border);
    padding: 1rem 0;
}

.admin-header-inner,
.admin-nav,
.admin-title-row,
.admin-panel-heading,
.set-admin-main,
.set-admin-actions,
.table-actions {
    align-items: center;
    display: flex;
}

.admin-header-inner,
.admin-title-row,
.admin-panel-heading {
    justify-content: space-between;
}

.admin-nav {
    gap: 1rem;
}

.admin-nav a,
.admin-panel-heading a {
    color: var(--primary-dark);
    font-weight: 700;
}

.admin-content {
    padding-bottom: 4rem;
    padding-top: 3rem;
}

.admin-content h1 {
    font-weight: 820;
}

.admin-title-row {
    gap: 1.5rem;
}

.admin-primary-button {
    background: var(--primary);
    border: 0;
    border-radius: 12px;
    color: #fff;
    font-weight: 750;
    min-height: 2.8rem;
    padding: 0.7rem 1rem;
}

.admin-primary-button:hover,
.admin-primary-button:focus-visible {
    background: var(--primary-dark);
    color: #fff;
}

.admin-stats {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 14rem));
    margin: 2rem 0;
}

.admin-quick-actions {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 1.5rem;
}

.admin-quick-action {
    align-items: center;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 18px;
    color: var(--ink);
    display: flex;
    gap: 0.9rem;
    padding: 1rem;
    text-decoration: none;
}

.admin-quick-action > span:first-child {
    font-size: 1.8rem;
}

.admin-quick-action strong,
.admin-quick-action small {
    display: block;
}

.admin-quick-action small {
    color: var(--muted);
}

.admin-title-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.import-upload-form {
    display: grid;
    gap: 1rem;
}

.import-upload-form > * {
    max-width: 100%;
    min-width: 0;
    width: 100%;
}

.upload-drop {
    background: var(--primary-soft);
    border: 2px dashed #ad9ddb;
    border-radius: 18px;
    cursor: pointer;
    display: grid;
    gap: 0.25rem;
    padding: 1.5rem;
    text-align: center;
}

.upload-drop input {
    margin: 0.75rem auto 0;
    max-width: 100%;
    min-width: 0;
    width: 100%;
}

.privacy-note {
    background: #fff8e8;
    border-radius: 14px;
    color: #5f5136;
    margin-top: 1rem;
    padding: 0.85rem 1rem;
}

.import-review-list {
    display: grid;
    gap: 1rem;
}

.import-review-row {
    align-items: end;
    background: #fbfaff;
    border: 1px solid var(--border);
    border-radius: 16px;
    display: grid;
    gap: 0.7rem;
    grid-template-columns: auto repeat(3, minmax(0, 1fr));
    padding: 1rem;
}

.import-review-row.needs-review {
    border-left: 5px solid #e5aa2d;
}

.import-review-row.is-duplicate {
    border-left: 5px solid #e48b69;
}

.include-check {
    align-self: center;
    display: grid;
    gap: 0.3rem;
    justify-items: center;
}

.include-check input[type="checkbox"] {
    height: 1.4rem;
    width: 1.4rem;
}

.import-row-status {
    align-items: center;
    display: flex;
    gap: 0.5rem;
    grid-column: 2 / -1;
    justify-content: space-between;
}

.import-row-status span {
    color: var(--muted);
    font-size: 0.9rem;
}

.duplicate-label {
    color: #9d492d !important;
    font-weight: 700;
}

.import-confirm {
    align-items: center;
    background: var(--mint);
    border-radius: 16px;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-top: 1.5rem;
    padding: 1rem;
}

.import-confirm p {
    margin: 0;
}

.admin-stats article {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 1.25rem;
}

.admin-stats strong,
.admin-stats span {
    display: block;
}

.admin-stats strong {
    color: var(--primary);
    font-size: 2rem;
}

.admin-stats span {
    color: var(--muted);
}

.admin-panel {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: clamp(1.25rem, 4vw, 2rem);
}

.admin-panel h1,
.admin-panel h2 {
    font-weight: 800;
}

.admin-panel h2 {
    font-size: 1.3rem;
}

.admin-panel-heading {
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.admin-panel-heading .eyebrow {
    margin-bottom: 0.25rem;
}

.admin-empty {
    background: #f8f6fb;
    border-radius: 14px;
    color: var(--muted);
    margin: 0;
    padding: 1.2rem;
}

.admin-list-stack,
.set-cards {
    display: grid;
    gap: 0.75rem;
}

.admin-list-row {
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 14px;
    color: var(--ink);
    display: flex;
    justify-content: space-between;
    padding: 1rem;
    text-decoration: none;
}

.admin-list-row:hover {
    background: var(--primary-soft);
    color: var(--ink);
}

.admin-list-row strong,
.admin-list-row small {
    display: block;
}

.admin-list-row small {
    color: var(--muted);
    margin-top: 0.25rem;
}

.status-pill {
    background: #eeeaf2;
    border-radius: 999px;
    color: #625b6b;
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 0.35rem 0.65rem;
    white-space: nowrap;
}

.status-pill--published {
    background: var(--mint);
    color: #22634f;
}

.admin-grid {
    align-items: start;
    display: grid;
    gap: 1.5rem;
    grid-template-columns: minmax(17rem, 0.75fr) minmax(24rem, 1.6fr);
}

.optional-label {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 500;
}

.form-select {
    border-color: #cbc5d4;
    border-radius: 12px;
    min-height: 3.2rem;
}

.set-admin-card {
    border: 1px solid var(--border);
    border-radius: 16px;
    display: grid;
    gap: 1rem;
    padding: 1rem;
}

.set-admin-card.is-inactive,
.vocab-table tr.is-inactive {
    opacity: 0.58;
}

.set-admin-main {
    gap: 0.8rem;
}

.set-admin-main h3 {
    font-size: 1rem;
    font-weight: 800;
    margin: 0 0 0.2rem;
}

.set-admin-main p {
    color: var(--muted);
    margin: 0;
}

.language-mini {
    align-items: center;
    background: var(--primary-soft);
    border-radius: 12px;
    color: var(--primary-dark);
    display: flex;
    flex: 0 0 auto;
    font-size: 0.75rem;
    font-weight: 900;
    height: 2.7rem;
    justify-content: center;
    width: 2.7rem;
}

.set-admin-actions,
.table-actions {
    flex-wrap: wrap;
    gap: 0.45rem;
}

.set-admin-actions form,
.table-actions form {
    display: contents;
}

.vocab-editor h2 {
    margin-bottom: 1rem;
}

.vocab-form-grid {
    align-items: end;
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 1fr 1.2fr auto;
}

.vocab-table-wrap {
    overflow-x: auto;
}

.vocab-table {
    border-collapse: collapse;
    min-width: 46rem;
    width: 100%;
}

.vocab-table th,
.vocab-table td {
    border-bottom: 1px solid var(--border);
    padding: 0.85rem 0.65rem;
    text-align: left;
    vertical-align: middle;
}

.vocab-table th {
    color: var(--muted);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.vocab-table td:first-child,
.vocab-table td:nth-child(2) {
    font-weight: 700;
}

@media (max-width: 700px) {
    .child-page > .container {
        width: auto;
    }

    .admin-page > .container,
    .admin-header .container {
        width: auto;
    }

    .welcome-panel {
        align-items: flex-start;
        margin-top: 1.2rem;
    }

    .mascot {
        height: 5rem;
        width: 5rem;
    }

    .language-picker,
    .mode-grid,
    .child-set-grid {
        grid-template-columns: 1fr;
    }

    .today-card {
        align-items: stretch;
        flex-direction: column;
    }

    .today-card .start-button {
        width: 100%;
    }

    .admin-header-inner,
    .admin-title-row,
    .admin-panel-heading {
        align-items: flex-start;
    }

    .admin-nav {
        gap: 0.55rem;
    }

    .admin-nav > a {
        display: none;
    }

    .admin-grid,
    .vocab-form-grid {
        grid-template-columns: 1fr;
    }

    .admin-title-row {
        flex-direction: column;
    }

    .admin-title-row .btn,
    .vocab-form-grid .btn {
        width: 100%;
    }

    .admin-quick-actions,
    .import-review-row {
        grid-template-columns: 1fr;
    }

    .admin-title-actions,
    .import-confirm {
        align-items: stretch;
        flex-direction: column;
        width: 100%;
    }

    .admin-title-actions .btn,
    .import-confirm .btn {
        width: 100%;
    }

    .include-check {
        grid-auto-flow: column;
        justify-content: start;
        justify-items: start;
    }

    .import-row-status {
        align-items: stretch;
        flex-direction: column;
        grid-column: auto;
    }

    .rating-buttons {
        grid-template-columns: 1fr;
    }

    .rating-button {
        min-height: 4.2rem;
    }

    .flashcard {
        min-height: 18rem;
    }

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

@media (min-width: 701px) and (max-width: 1000px) {
    .admin-grid {
        grid-template-columns: 1fr;
    }

    .vocab-form-grid {
        grid-template-columns: 1fr 1fr;
    }
}

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

.child-mode-page,
.quiz-shell {
    max-width: 760px;
    padding-bottom: 4rem;
}

.direction-picker {
    background: var(--primary-soft);
    border-radius: 16px;
    display: grid;
    gap: 0.35rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0.35rem;
}

.direction-picker a {
    border-radius: 12px;
    color: var(--ink);
    font-weight: 700;
    padding: 0.8rem;
    text-align: center;
    text-decoration: none;
}

.direction-picker a.is-active {
    background: #fff;
    box-shadow: 0 5px 16px rgba(62, 43, 100, 0.12);
    color: var(--primary-dark);
}

.quiz-progress {
    display: grid;
    gap: 0.5rem;
    margin: 1.25rem 0;
}

.quiz-progress span {
    color: var(--muted);
    font-weight: 800;
}

.quiz-progress progress {
    accent-color: var(--primary);
    height: 0.65rem;
    width: 100%;
}

.writing-card,
.quiz-result {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 28px;
    box-shadow: var(--shadow);
    margin-top: 1rem;
    padding: clamp(1.35rem, 5vw, 3rem);
    text-align: center;
}

.writing-card h1 {
    font-size: clamp(1.65rem, 6vw, 2.8rem);
    line-height: 1.2;
    margin-bottom: 2rem;
}

.writing-card h1 strong {
    color: var(--primary-dark);
    display: block;
    margin-top: 0.45rem;
}

.writing-form {
    display: grid;
    gap: 0.85rem;
    margin: 0 auto;
    max-width: 560px;
    text-align: left;
}

.writing-input {
    border: 2px solid #cfc4ef;
    border-radius: 16px;
    font-size: 1.35rem;
    min-height: 3.7rem;
    padding: 0.8rem 1rem;
}

.writing-form small {
    color: var(--muted);
}

.round-summary { background: white; border: 1px solid var(--border); box-shadow: var(--shadow); border-radius: 28px; padding: 1.5rem; margin: 1rem auto; text-align: center; max-width: 760px; }
.journey-mascot { font-size: 3rem; animation: owl-arrive .5s ease-out; }
.reward-progress { width: 100%; accent-color: #bd8a16; height: .8rem; }
.treasure-reward { background: #fff8e6; border-radius: 18px; padding: 1rem; margin: 1rem 0; }
@keyframes owl-arrive { from { transform: translateY(8px); opacity: .4; } to { transform: translateY(0); opacity: 1; } }
@media(prefers-reduced-motion:reduce) { .journey-mascot { animation: none; } }
.round-summary-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .6rem; }
.round-summary-grid p { background: #f5f1fc; border-radius: 16px; padding: .8rem; }
.round-summary-grid p { margin-bottom: 0; }
.round-summary-grid { margin-bottom: .8rem; }
.round-summary-grid strong { display: block; font-size: 1.8rem; color: #6750a4; }
.coin-banner { background: #fff1bf; border-radius: 20px; padding: 1rem; font-size: 1.25rem; }
.round-summary + .completion-card, .round-summary + .quiz-result:not(.test-result) { display: none; }
.reward-form { display: grid; gap: .7rem; padding: 1rem; margin: 1rem 0; background: white; border-radius: 16px; }
.reward-form input, .reward-form button { min-height: 44px; max-width: 100%; }
.home-header-actions { display: flex; align-items: center; gap: 1.2rem; }
.treasure-link { display: inline-flex; align-items: center; gap: .65rem; padding: .55rem .85rem .55rem .55rem; border: 1px solid #ead9af; border-radius: 18px; background: #fff9e9; color: #72521b; font-weight: 750; text-decoration: none; box-shadow: 0 3px 10px #aa7e1010; min-height: 44px; }
.treasure-link:hover { background: #fff0c6; color: #594016; transform: translateY(-1px); }
.treasure-link-icon { display: grid; place-items: center; background: #f6e5b9; color: #aa7614; border-radius: 12px; width: 34px; height: 34px; font-size: 1.4rem; }
.celebration { background: #fcfbff; border: 8px solid #eee9f7; padding: 1.2rem 1.4rem; }
.celebration-topline { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: .8rem; }
.celebration-topline span { background: #eeeaf6; border-radius: 30px; padding: .3rem .7rem; }
.celebration-topline a { display: grid; place-items: center; width: 44px; height: 44px; color: #7b6c92; text-decoration: none; font-size: 1.7rem; }
.celebration-star { display: block; margin: -12px auto 0; width: 170px; height: 128px; animation: owl-arrive .5s ease-out; }
.celebration h1 { font-size: clamp(1.5rem,4vw,2rem); margin: .25rem 0; }
.celebration-subtitle { color: var(--muted); margin-bottom: 1.1rem; }
.celebration .round-summary-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: .5rem; }
.celebration .round-summary-grid p { font-size: .78rem; padding: .7rem .4rem; background: #ece6f6; }
.celebration .round-summary-grid p:nth-child(2) { background: #e1f1e9; }
.celebration .round-summary-grid p:nth-child(2) strong { color: #24785a; }
.celebration .round-summary-grid p:nth-child(3) { background: #f4e7ed; }
.celebration .round-summary-grid strong { font-size: 1.7rem; }
.celebration > p:not(.celebration-subtitle) { color: var(--muted); font-size: .82rem; }
.reward-wallet { border: 1px solid #ead6a7; border-radius: 20px; background: #fbf2df; text-align: left; padding: 1rem; margin: 1rem 0; }
.wallet-earned { display: flex; gap: .8rem; align-items: center; padding-bottom: .85rem; margin-bottom: .85rem; border-bottom: 1px solid #e8dcc3; }
.wallet-earned strong { display: block; font-size: 1.4rem; }
.wallet-earned small { color: #756c5b; }
.wallet-coin { display: grid; place-items: center; flex: 0 0 46px; height: 46px; background: #f5e0af; color: #ac7714; border-radius: 50%; font-size: 1.8rem; }
.wallet-sparkle { color: #b48324; margin-left: auto; font-size: 2rem; }
.wallet-balance { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; margin-bottom: .4rem; }
.reward-wallet p, .reward-wallet a { font-size: .82rem; margin: .35rem 0; }
.reward-wallet a { color: #785617; font-weight: 700; }
.reward-wallet progress { appearance: none; border: 0; border-radius: 12px; overflow: hidden; background: #e8ddc3; }
.reward-wallet progress::-webkit-progress-bar { background: #e8ddc3; }
.reward-wallet progress::-webkit-progress-value { background: #e7ad35; border-radius: 12px; }
.reward-wallet progress::-moz-progress-bar { background: #e7ad35; border-radius: 12px; }
.celebration .result-actions { gap: .5rem; }
.celebration .result-actions .btn { min-height: 44px; }
@media(max-width:600px) { .home-header-actions { gap: .5rem; } .home-header-actions .parent-link { font-size: .75rem; } .treasure-link { font-size: .8rem; gap: .35rem; padding: .35rem .5rem; } .treasure-link-icon { width: 26px; height: 28px; } .app-header:has(.home-header-actions) { flex-wrap: wrap; gap: .7rem; } .celebration { padding: .7rem; border-width: 5px; } .celebration .round-summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .celebration-star { width: 136px; height: 102px; } }
@media(prefers-reduced-motion:reduce) { .celebration-star { animation: none; } .treasure-link:hover { transform: none; } }
.dashboard-goal { display:flex; align-items:center; gap:.8rem; padding:1rem; margin:0 0 1.4rem; border:1px solid #ead9af; border-radius:20px; background:#fff9e9; color:#72521b; text-decoration:none; }
.dashboard-goal-body { flex:1; min-width:0; }
.dashboard-goal strong,.dashboard-goal small { display:block; overflow-wrap:anywhere; }
.dashboard-goal small { margin:.2rem 0 .4rem; }
.fulfilled-heading { margin-top:2rem; }
.fulfilled-reward { background:#f1edf8; }
.fulfilled-reward h3 { font-size:1.2rem; }
.report-filter { display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; margin:1rem 0; }
.report-filter select { width:auto; }
.report-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:1rem; margin:1rem 0; }
.report-stats article,.report-session { background:white; border-radius:18px; padding:1.2rem; }
.report-stats strong { display:block; color:var(--primary-dark); font-size:2rem; }
.report-session { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:.8rem 0; overflow-wrap:anywhere; }
.report-session h3 { font-size:1.1rem; }
@media(max-width:600px) { .report-session { grid-template-columns:1fr; } }
.admin-page { background: linear-gradient(140deg,#f2eefb,#f7f8fc 60%); }
.admin-page .back-link,.admin-page .admin-content > a:first-child,.admin-nav > a,.admin-panel-heading > a { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:.65rem 1rem; background:#fff; color:#584081; border:1px solid #ded4ef; border-radius:14px; text-decoration:none; font-weight:700; }
.admin-page .back-link:hover,.admin-nav > a:hover { background:#eee7fa; }
.admin-page .btn { border-radius:14px; min-height:44px; padding:.65rem 1rem; font-weight:650; }
.admin-page .admin-panel,.admin-page .reward-form { border:1px solid #e7e1ef; box-shadow:0 6px 24px #39235806; }
.admin-dialog-trigger { display:inline-flex; min-height:52px; align-items:center; padding:1rem 1.3rem; margin:.5rem .7rem .8rem 0; border:1px solid #d9cde9; border-radius:18px; background:#f0e9fb; color:#533b7f; font-weight:750; }
.admin-dialog { border:1px solid #ded4ef; border-radius:24px; padding:1.5rem; width:min(720px,calc(100% - 24px)); max-height:85dvh; overflow:auto; color:#252139; box-shadow:0 24px 100px #24133b44; }
.admin-dialog::backdrop { background:#23153780; backdrop-filter:blur(3px); }
.admin-dialog header { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.admin-dialog h2 { font-size:1.35rem; }
.admin-dialog input,.admin-dialog select { max-width:100%; }
.import-status { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; background:#eee8f8; border:1px solid #dfd3ed; border-radius:20px; padding:1.2rem; margin-bottom:1.5rem; }
.import-status p { margin:.4rem 0 0; }
.photo-actions { display:flex; flex-wrap:wrap; gap:.7rem; }
.photo-previews { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:.8rem; }
.photo-previews img { width:100%; height:140px; object-fit:contain; border-radius:12px; background:#f4f0f8; }
.photo-previews figcaption { overflow-wrap:anywhere; font-size:.8rem; }
.answer-feedback {
    border-radius: 20px;
    margin: 0 auto 1.25rem;
    max-width: 560px;
    padding: 1.25rem;
}

.answer-feedback--perfect {
    background: var(--mint);
}

.answer-feedback--case_warning {
    background: #fff6d9;
}

.answer-feedback--incorrect {
    background: var(--peach);
}

.answer-comparison {
    display: grid;
    gap: 0.65rem;
    margin-top: 1rem;
}

.answer-comparison__row {
    align-items: center;
    background: rgb(255 255 255 / 72%);
    border-radius: 14px;
    display: grid;
    gap: 0.25rem 0.85rem;
    grid-template-columns: minmax(7rem, auto) 1fr;
    padding: 0.7rem 0.9rem;
    text-align: left;
}

.answer-comparison__label {
    color: var(--muted);
    font-size: 0.88rem;
    font-weight: 700;
}

.answer-comparison__word {
    font-size: 1.25rem;
    overflow-wrap: anywhere;
    white-space: normal;
}

.answer-diff {
    border-radius: 0.3em;
    padding: 0.02em 0.08em;
}

.answer-diff--wrong {
    background: #ffe1dc;
    color: #a21c12;
    text-decoration: underline 2px;
    text-underline-offset: 0.14em;
}

.answer-diff--correct {
    background: #d9f5e9;
    color: #12623f;
}

.answer-comparison__empty {
    color: #a21c12;
    font-style: italic;
}

@media (max-width: 420px) {
    .answer-comparison__row {
        grid-template-columns: 1fr;
    }
}

.next-form,
.result-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}

.result-sparkle {
    font-size: 3rem;
}

.result-score {
    font-size: 1.2rem;
}

.result-score strong {
    color: var(--primary-dark);
    font-size: 2rem;
}

.test-answer-list {
    display: grid;
    gap: 0.65rem;
    margin: 1.5rem 0;
    text-align: left;
}

.test-answer {
    align-items: center;
    background: var(--background);
    border-left: 5px solid #b7adca;
    border-radius: 14px;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0.85rem 1rem;
}

.test-answer--perfect {
    border-left-color: #4ba889;
}

.test-answer--case_warning {
    border-left-color: #e5aa2d;
}

.test-answer--incorrect {
    border-left-color: #e48b69;
}

.test-answer strong,
.test-answer span,
.test-answer small {
    display: block;
}

.test-answer small {
    color: var(--muted);
    margin-top: 0.15rem;
}

@media (max-width: 520px) {
    .direction-picker {
        grid-template-columns: 1fr;
    }

    .writing-card,
    .quiz-result {
        border-radius: 22px;
        padding: 1.2rem;
    }

    .writing-form .start-button,
    .next-form .start-button,
    .result-actions .btn {
        width: 100%;
    }

    .test-answer {
        grid-template-columns: 1fr;
    }
}

.learning-goal-panel { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding: 1.2rem; margin-bottom: 1.5rem; border-radius: 20px; background: #f1edf9; color: #443269; }
.learning-goal-panel p { margin: .35rem 0; }
.learning-goal-panel > div { flex: 1 1 260px; }
.daily-goal-copy { display: flex; flex-direction: column; gap: .3rem; color: #6750a4; font-size: .9rem; }
.child-set-card:has(.daily-goal-copy) { flex-wrap: wrap; }
.daily-goal-copy small { color: #615d70; }
.daily-tasks { margin: 1.5rem 0 2rem; }
.daily-task-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 1rem; }
.daily-task { display: flex; flex-direction: column; gap: .65rem; padding: 1.25rem; border: 1px solid #e5ddf1; border-radius: 22px; background: #fff; box-shadow: 0 6px 20px #6750a408; }
.daily-task-heading { display: flex; align-items: center; gap: .7rem; }
.daily-task h3 { font-size: 1.1rem; margin: 0; overflow-wrap: anywhere; }
.daily-task p { margin: 0; }
.daily-task small { color: #625d70; }
.daily-task .btn { margin-top: auto; }
.daily-task-progress { width: 100%; height: .65rem; accent-color: #6750a4; }
.daily-task--done { background: #f0faf6; }
.daily-task-done { color: #22674c; font-weight: 700; }
.character-picker { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; margin: .5rem 0; }
.character-picker button { min-width: 44px; min-height: 44px; padding: .35rem .65rem; border: 1px solid #d6c8eb; border-radius: 12px; background: #f5f0fc; color: #50348a; font-size: 1.2rem; touch-action: manipulation; }
.character-picker button:focus-visible { outline: 3px solid #6750a4; outline-offset: 2px; }
.character-picker button[aria-pressed="true"] { color: #fff; background: #6750a4; }
.upload-status { padding: 1rem; margin-top: 1rem; border-radius: 16px; background: #f1edf9; color: #50348a; }
.upload-status p { margin: 0 0 .6rem; font-weight: 600; }
.upload-status progress { width: 100%; height: 18px; accent-color: #6750a4; }
@media (prefers-reduced-motion: reduce) { .upload-status progress:indeterminate { visibility: hidden; } }