/* ============================================================================
   VietStudying - global stylesheet
   Auth, admin and student-facing styles. Responsive + playful but clean.
   ========================================================================== */

:root {
    --green:      #58cc02;
    --green-dark: #46a302;
    --blue:       #1cb0f6;
    --blue-dark:  #1899d6;
    --yellow:     #ffc800;
    --red:        #ff4b4b;
    --purple:     #ce82ff;
    --ink:        #3c3c3c;
    --muted:      #777777;
    --line:       #e5e5e5;
    --bg:         #f7f7f7;
    --card-bg:    #ffffff;
    --radius:     16px;
    --shadow:     0 2px 8px rgba(0, 0, 0, 0.08);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    color: var(--ink);
    background: var(--bg);
    line-height: 1.5;
}

h1, h2, h3 { line-height: 1.25; margin: 0 0 0.6em; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 0.8em; }
a { color: var(--blue-dark); }
code { background: #f1f1f1; padding: 1px 5px; border-radius: 5px; }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.center { text-align: center; }
.strong { font-weight: 600; }
.inline { display: inline-flex; gap: 6px; align-items: center; }

/* ---- Buttons ------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    border: 0;
    border-radius: 14px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.15s ease;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.18);
    background: var(--line);
    color: var(--ink);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.18); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-primary { background: var(--green); color: #fff; box-shadow: 0 3px 0 var(--green-dark); }
.btn-danger  { background: var(--red); color: #fff; box-shadow: 0 3px 0 #c73333; }
.btn-outline { background: #fff; border: 2px solid var(--line); box-shadow: none; }
.btn-block   { width: 100%; }
.btn-sm      { padding: 6px 12px; font-size: 0.85rem; border-radius: 10px; }
.btn-lg      { padding: 14px 28px; font-size: 1.05rem; }

.btn-link {
    background: none;
    border: none;
    color: var(--blue-dark);
    font-weight: 700;
    cursor: pointer;
    font-size: 0.95rem;
}

/* ---- Cards & badges ------------------------------------------------------ */
.card {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow);
    margin-bottom: 20px;
}

.badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    background: var(--line);
    color: var(--ink);
}
.badge-student  { background: #e8f8d4; color: var(--green-dark); }
.badge-parent   { background: #ffe9d9; color: #d47f00; }
.badge-admin    { background: #e9e3ff; color: #7b3ff2; }
.badge-teacher  { background: #d8f0fb; color: #1c6ea4; }
.badge-ok       { background: #e8f8d4; color: var(--green-dark); }
.badge-warn     { background: #ffe9c7; color: #b06e00; }
.badge-normal   { background: var(--blue); color: #fff; }
.badge-review   { background: var(--yellow); color: #7a5b00; }
.badge-story    { background: var(--purple); color: #fff; }
.badge-quiz     { background: var(--red); color: #fff; }
.badge-completed   { background: #e8f8d4; color: var(--green-dark); }
.badge-in_progress { background: #ffe9c7; color: #b06e00; }
.badge-not_started { background: var(--line); color: var(--muted); }
.badge-assigned    { background: #d8f0fb; color: #1c6ea4; }

.pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #fff;
    border: 2px solid var(--line);
    padding: 4px 12px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.9rem;
}

/* ---- Flash messages ------------------------------------------------------- */
.flash {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 12px;
    margin-bottom: 16px;
    font-weight: 600;
    animation: flash-in 0.25s ease;
}
.flash-success { background: #e8f8d4; color: var(--green-dark); }
.flash-error   { background: #ffe1e1; color: #c73333; }
.flash-info    { background: #e2f4ff; color: var(--blue-dark); }
.flash-close {
    margin-left: auto;
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: inherit;
    opacity: 0.6;
}
@keyframes flash-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; } }

/* ---- Forms ---------------------------------------------------------------- */
.form .field { display: block; margin-bottom: 16px; }
.form .field > span,
.form fieldset legend {
    display: block;
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 6px;
}
.form .input,
.form input[type="text"],
.form input[type="email"],
.form input[type="password"],
.form input[type="number"],
.form input[type="search"],
.form select,
.form textarea {
    width: 100%;
    padding: 11px 14px;
    border: 2px solid var(--line);
    border-radius: 12px;
    font-size: 0.95rem;
    font-family: inherit;
    background: #fafafa;
    color: var(--ink);
}
.form input:focus, .form select:focus, .form textarea:focus {
    outline: none;
    border-color: var(--blue);
    background: #fff;
}
.form textarea { resize: vertical; }
.field-error { display: block; color: var(--red); font-size: 0.85rem; margin-top: 4px; font-weight: 600; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 4px 20px; }
.field-wide { grid-column: 1 / -1; }
.form-actions { display: flex; gap: 12px; margin-top: 8px; }
.form-card { max-width: 860px; }

.check, .radio { display: flex; gap: 8px; align-items: center; margin: 10px 0; cursor: pointer; }
fieldset.field { border: 0; padding: 0; margin: 0 0 16px; }

/* ---- Tables --------------------------------------------------------------- */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}
.table th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.table tr:last-child td { border-bottom: 0; }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; }

/* ---- Pagination ------------------------------------------------------------ */
.pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 6px 0;
}
.pagination-links { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---- Page toolbar ---------------------------------------------------------- */
.page-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

/* ---- Auth ------------------------------------------------------------------ */
.auth-body { background: linear-gradient(160deg, #e2f4ff 0%, #f7f7f7 60%); min-height: 100vh; }
.auth-shell { max-width: 460px; margin: 0 auto; padding: 40px 16px; }
.auth-brand { justify-content: center; margin-bottom: 24px; }
.auth-card {
    background: #fff;
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* ---- Brand ------------------------------------------------------------------ */
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand-badge {
    width: 42px; height: 42px;
    border-radius: 12px;
    background: var(--green);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.2rem;
}
.brand-name { font-weight: 800; font-size: 1.2rem; }

/* ---- App layout (student-facing) --------------------------------------------- */
.app-body { min-height: 100vh; display: flex; flex-direction: column; }
.app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    background: #fff;
    border-bottom: 2px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 20;
}
.app-nav { display: flex; gap: 18px; align-items: center; }
.app-nav a { text-decoration: none; font-weight: 700; color: var(--ink); }
.app-main { flex: 1; padding: 24px; max-width: 1000px; width: 100%; margin: 0 auto; }

/* ---- Site footer ------------------------------------------------------- */
.site-footer {
    text-align: center;
    padding: 18px 24px 22px;
    border-top: 1px solid var(--line);
    background: #fff;
    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1.6;
}
.site-footer p { margin: 0; }
.site-footer a { color: var(--blue-dark); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

.student-home .card { animation: flash-in 0.3s ease; }
.stat-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.student-hero { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.placeholder-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.placeholder-box {
    height: 120px;
    border-radius: 14px;
    background: linear-gradient(120deg, #f1f1f1 30%, #fafafa 50%, #f1f1f1 70%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---- Landing ------------------------------------------------------------------ */
.landing { min-height: 100vh; }
.landing-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 28px;
}
.landing-actions { display: flex; gap: 10px; margin-left: auto; }
.landing-hero {
    display: flex; align-items: center; justify-content: center; gap: 40px;
    padding: 48px 24px; flex-wrap: wrap; text-align: left;
}
.landing-copy { max-width: 480px; }
.landing-copy h1 { font-size: 2.2rem; }
.lead { font-size: 1.1rem; color: var(--muted); }
.landing-art { position: relative; }
.art-balloon {
    background: var(--yellow);
    border-radius: 18px;
    padding: 18px 24px;
    font-size: 1.3rem;
    font-weight: 800;
    box-shadow: var(--shadow);
    transform: rotate(-4deg);
}
.art-balloon-2 {
    position: absolute;
    top: 70px; left: 90px;
    background: var(--green);
    color: #fff;
    transform: rotate(5deg);
}
.landing-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 24px;
}
.feature-card {
    background: #fff;
    border-radius: 16px;
    padding: 22px;
    box-shadow: var(--shadow);
    text-align: center;
}
.feature-card span { font-size: 2rem; }
.landing-courses {
    max-width: 1000px; margin: 0 auto; padding: 24px; text-align: center;
}
.landing-courses .course-grid { text-align: left; margin-top: 18px; }
.landing-courses .course-card { text-align: left; }

/* ---- Error page ---------------------------------------------------------------- */
.error-page { text-align: center; padding: 80px 20px; }
.error-code { font-size: 4rem; color: var(--blue); }

/* ---- Admin layout --------------------------------------------------------------- */
.admin-body { display: flex; min-height: 100vh; }
.admin-sidebar {
    width: 250px;
    background: #1f1f24;
    color: #fff;
    padding: 20px 14px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: sticky;
    top: 0;
    height: 100vh;
    flex-shrink: 0;
}
.admin-sidebar .brand { color: #fff; }
.admin-sidebar .brand-name { font-size: 1rem; }
.admin-nav { display: flex; flex-direction: column; gap: 4px; }
.admin-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #cfcfcf;
    text-decoration: none;
    padding: 10px 12px;
    border-radius: 10px;
    font-weight: 600;
}
.admin-nav-link:hover { background: #2c2c33; color: #fff; }
.admin-nav-link.is-active { background: var(--green); color: #fff; }
.admin-nav-icon { font-size: 1.1rem; }
.admin-sidebar-footer {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.admin-user { display: flex; flex-direction: column; gap: 2px; padding: 0 6px 8px; font-size: 0.9rem; }
.admin-main { flex: 1; padding: 24px; min-width: 0; }
.admin-topbar {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}
.admin-topbar h1 { margin: 0; }
.admin-toggle { display: none; }
.admin-overlay { display: none; }

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}
.stat-card { display: flex; align-items: center; gap: 14px; }
.stat-icon { font-size: 1.8rem; }
.stat-value { font-size: 1.6rem; font-weight: 800; }
.stat-label { color: var(--muted); font-size: 0.85rem; }

.admin-grid-two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.activity-list { list-style: none; margin: 0; padding: 0; }
.activity-list li {
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.stats-inline { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }

/* ---- Student CTAs -------------------------------------------------------------- */
.student-cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.btn-purple { background: var(--purple); color: #fff; box-shadow: 0 3px 0 #b45ee0; }
.btn-aqua { background: #0fb9b1; color: #fff; box-shadow: 0 3px 0 #0a8a84; }

/* ---- Course map ---------------------------------------------------------------- */
.course-map-head { margin-bottom: 6px; }
.course-map-head h2 { margin-bottom: 4px; }
.progress-track { height: 12px; background: var(--line); border-radius: 999px; overflow: hidden; margin: 10px 0 24px; }
.progress-fill { height: 100%; background: var(--green); border-radius: 999px; transition: width 0.5s ease; }

/* ---- Parent dashboard ----------------------------------------------------------- */
.form-inline { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.field-grow { flex: 1 1 260px; }
.avatar {
    width: 46px; height: 46px; border-radius: 50%;
    background: var(--blue); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800; flex-shrink: 0;
}
.avatar-sm { width: 40px; height: 40px; font-size: 1.05rem; }
.child-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 8px; }
.child-card {
    display: flex; flex-direction: column; gap: 12px;
    text-decoration: none; color: inherit;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.child-card:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); }
.child-card-head { display: flex; align-items: center; gap: 12px; }
.parent-path { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.parent-path-unit {
    font-weight: 800; color: var(--blue-dark); text-transform: uppercase;
    font-size: 0.78rem; letter-spacing: 0.05em; margin-top: 8px;
}
.parent-path-unit:first-child { margin-top: 0; }
.parent-path-lesson { display: flex; align-items: center; gap: 8px; font-size: 0.95rem; }

/* ---- Teacher area / report card helpers ------------------------------------ */
.section-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.flex-between { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.course-progress-row { margin-bottom: 14px; }
.course-progress-row:last-child { margin-bottom: 0; }
.course-progress-row .progress-track { margin-top: 6px; }
.audio-inline { height: 38px; max-width: 200px; vertical-align: middle; }
.score-input { width: 70px; padding: 5px 8px; border: 1px solid var(--border, #d9d9d9); border-radius: 6px; }

.report-card { max-width: 860px; margin: 0 auto; }
.report-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.report-student .stat-value { font-size: 1.5rem; }
.report-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.report-block { margin-top: 16px; }
.report-actions { display: flex; gap: 10px; justify-content: center; margin-top: 20px; }

@media print {
    .app-header, .app-footer, .site-footer, .no-print, .report-actions { display: none !important; }
    .app-body { background: #fff; }
    .app-main { max-width: none; padding: 0; }
    .card { box-shadow: none; border-color: #ccc; page-break-inside: avoid; }
}

/* ---- Admin analytics charts ------------------------------------------------------ */
.page-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.chart-card h3 { margin-bottom: 10px; }
.chart {
    height: 160px;
    display: flex; align-items: flex-end; gap: 3px;
    border-bottom: 2px solid var(--line);
    padding: 0 4px;
}
.chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; min-width: 0; }
.chart-bar {
    width: 100%; max-width: 26px;
    min-height: 2px;
    background: var(--green);
    border-radius: 6px 6px 0 0;
    transition: height 0.4s ease;
}
.chart-bar-blue   { background: var(--blue); }
.chart-bar-yellow { background: var(--yellow); }
.chart-bar-purple { background: var(--purple); }
.chart-date {
    font-size: 0.62rem; color: var(--muted);
    margin-top: 4px; white-space: nowrap;
    transform: rotate(-40deg); transform-origin: top left;
}

.course-unit { margin-bottom: 30px; }
.course-unit-header { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.course-unit-header h3 { margin: 0; }
.course-unit-badge {
    width: 34px; height: 34px; border-radius: 10px;
    background: var(--blue); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800; flex-shrink: 0;
}

.path { display: flex; flex-direction: column; align-items: flex-start; padding: 8px 0 0 0; }
.path-node {
    width: 72px; height: 72px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; font-weight: 800; text-decoration: none;
    position: relative; margin-bottom: 6px;
}
.path-node::before {
    content: '';
    position: absolute;
    left: 50%; top: -30px;
    transform: translateX(-50%);
    width: 3px; height: 30px;
    background: var(--line);
}
.path-node:first-child::before { display: none; }

.path-node.is-completed { background: var(--green); color: #fff; box-shadow: 0 3px 0 var(--green-dark); }
.path-node.is-completed::before { background: var(--green); }
.path-node.is-available { background: #fff; border: 3px solid var(--green); color: var(--green-dark); }
.path-node.is-available::before { background: var(--green); }
.path-node.is-in_progress { background: var(--blue); color: #fff; }
.path-node.is-in_progress::before { background: var(--blue); }
.path-node.is-locked { background: var(--line); color: var(--muted); cursor: not-allowed; }
.path-node.is-current { animation: node-pulse 1.8s infinite; }
@keyframes node-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(88, 204, 2, 0.55); }
    50%      { box-shadow: 0 0 0 14px rgba(88, 204, 2, 0); }
}

/* Premium gating */
.premium-tag {
    display: inline-block; vertical-align: middle;
    margin-left: 8px; padding: 2px 8px; border-radius: 999px;
    background: linear-gradient(135deg, #f7c948, #ffb347);
    color: #6b3d00; font-size: 0.7rem; font-weight: 800;
    letter-spacing: 0.02em; text-transform: uppercase;
}
.course-unit.is-premium-unit .course-unit-badge {
    background: linear-gradient(135deg, #f7c948, #ffb347);
    color: #6b3d00;
}
.path-node.is-premium-locked {
    background: linear-gradient(135deg, #fff6d6, #ffe9b8);
    border: 2px solid #f7c948;
    color: #a87a00; cursor: not-allowed;
}
.premium-upsell {
    margin: 0 0 16px; padding: 10px 14px; border-radius: 12px;
    background: #fff6d6; border: 1px solid #f7c948; color: #6b3d00;
}

/* ---- Player ------------------------------------------------------------------- */
.player { position: fixed; inset: 0; background: #fff; z-index: 60; display: flex; flex-direction: column; }
.player-top {
    display: flex; align-items: center; gap: 16px;
    padding: 14px 18px; border-bottom: 2px solid var(--line);
}
.player-progress-track { flex: 1; height: 14px; background: var(--line); border-radius: 999px; overflow: hidden; }
.player-progress-fill { height: 100%; background: var(--green); border-radius: 999px; transition: width 0.3s ease; }
.player-streak { font-weight: 800; white-space: nowrap; min-width: 58px; text-align: center; }

.player-stage {
    flex: 1; overflow-y: auto; padding: 24px 20px 120px;
    display: flex; align-items: center; justify-content: center;
}
.player-card {
    width: 100%; max-width: 640px;
    display: flex; flex-direction: column; align-items: center; gap: 18px;
    text-align: center;
}
.player-title { font-size: 1.9rem; }
.player-objectives { list-style: none; padding: 0; text-align: left; }
.player-objectives li { padding: 5px 0; }
.player-objectives li::before { content: '🎯 '; }
.vocab-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.vocab-chip {
    background: #e8f8d4; color: var(--green-dark); font-weight: 700;
    padding: 6px 12px; border-radius: 999px; border: none; cursor: pointer;
    transition: transform 0.12s ease;
}
.vocab-chip:hover { transform: translateY(-1px); }
.player-hint { font-weight: 700; font-size: 1.1rem; }
.audio-btn { margin: 6px 0; }

.exercise-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; width: 100%; }
.exercise-option {
    padding: 14px; border: 2px solid var(--line); background: #fff;
    border-radius: 14px; font-size: 1.05rem; font-weight: 700; cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.exercise-option:hover { border-color: var(--blue); background: #f0f9ff; }
.exercise-option:disabled { cursor: default; opacity: 0.75; }
.exercise-option.is-correct { border-color: var(--green); background: #e8f8d4; color: var(--green-dark); }
.exercise-option.is-wrong { border-color: var(--red); background: #ffe1e1; color: #c73333; }

.arrange-answer {
    min-height: 58px; width: 100%;
    border: 2px dashed var(--line); border-radius: 14px;
    padding: 10px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
}
.arrange-answer.is-correct { border-color: var(--green); background: #f5ffe9; }
.arrange-answer.is-wrong { border-color: var(--red); background: #fff1f1; }
.arrange-bank { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; width: 100%; }
.word-chip {
    padding: 10px 16px; border: 2px solid var(--line); border-radius: 12px;
    background: #fff; font-weight: 700; font-size: 1.05rem; cursor: pointer;
}
.word-chip:hover { border-color: var(--blue); background: #f0f9ff; }
.word-chip:disabled { opacity: 0.55; cursor: default; }

.match-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: 100%; }
.match-column { display: flex; flex-direction: column; gap: 8px; }
.match-column.is-wrong .match-item { border-color: var(--red); background: #fff1f1; }
.match-column.is-correct .match-item { border-color: var(--green); background: #f5ffe9; }
.match-item {
    padding: 12px; border: 2px solid var(--line); border-radius: 12px;
    background: #fff; font-weight: 700; cursor: pointer;
}
.match-item:hover { border-color: var(--blue); background: #f0f9ff; }
.match-item.is-selected { border-color: var(--blue); background: #f0f9ff; }
.match-item.is-paired { border-color: var(--green); background: #e8f8d4; color: var(--green-dark); }
.match-item:disabled { cursor: default; opacity: 0.85; }

.memory-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; width: 100%; max-width: 520px; }
.memory-tile {
    height: 96px; border: 2px solid var(--line); border-radius: 14px;
    background: var(--blue); color: #fff; font-size: 1.1rem; font-weight: 800; cursor: pointer;
    transition: transform 0.15s ease;
}
.memory-tile:hover { transform: translateY(-2px); }
.memory-tile.is-flipped { background: #fff; color: var(--ink); border-color: var(--blue); }
.memory-tile.is-matched { background: #e8f8d4; color: var(--green-dark); border-color: var(--green); cursor: default; }

/* ---- Visual polish: word images + player animations ---- */
.vocab-chip { display: inline-flex; align-items: center; gap: 8px; }
.vocab-chip-img { width: 32px; height: 32px; object-fit: contain; border-radius: 8px; }
.picture-prompt {
    width: min(260px, 60vw); height: min(260px, 60vw); object-fit: contain;
    border-radius: 18px; background: #f7f7f7; padding: 10px;
}
.word-image {
    width: min(180px, 45vw); height: min(180px, 45vw); object-fit: contain;
    border-radius: 16px; background: #f7f7f7; padding: 8px;
}
.player-card-enter { animation: player-card-in 0.32s ease both; }
.exercise-option.is-correct { animation: pop-in 0.28s ease both; }
.exercise-option.is-wrong { animation: shake 0.35s ease both; }
.feedback { animation: feedback-in 0.25s ease both; }
.feedback.is-correct .feedback-label { animation: pop-in 0.3s ease both; }

@keyframes player-card-in {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}
@keyframes pop-in {
    0% { transform: scale(1); }
    45% { transform: scale(1.06); }
    100% { transform: scale(1); }
}
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    55% { transform: translateX(6px); }
    80% { transform: translateX(-3px); }
}
@keyframes feedback-in {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: none; }
}

.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 5; }
.confetti-piece {
    position: absolute; top: -16px; width: 10px; height: 14px; border-radius: 2px;
    opacity: 0; animation: confetti-fall linear both;
}
@keyframes confetti-fall {
    0% { opacity: 1; transform: translate3d(0, -10px, 0) rotate(0); }
    100% { opacity: 0.9; transform: translate3d(var(--drift, 0), 105vh, 0) rotate(720deg); }
}


.feedback {
    position: absolute; left: 0; right: 0; bottom: 0;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 18px 24px;
}
.feedback.is-correct { background: #e8f8d4; }
.feedback.is-wrong { background: #ffe1e1; }
.feedback-label { font-size: 1.2rem; font-weight: 800; }

.player-summary { display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; max-width: 520px; }
.summary-bar { width: 100%; height: 18px; background: var(--line); border-radius: 999px; overflow: hidden; }
.summary-fill { height: 100%; background: var(--green); border-radius: 999px; transition: width 0.5s ease; }
.summary-stats { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.stat { background: #fff; border: 2px solid var(--line); padding: 10px 16px; border-radius: 12px; font-weight: 800; }
.achievement-unlocked {
    background: #fff7d6; border: 2px solid var(--yellow); border-radius: 14px;
    padding: 14px 18px; width: 100%; display: flex; flex-direction: column; gap: 8px;
}
.achievement { font-weight: 700; }
.player-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* ---- Review ------------------------------------------------------------------- */
.review-page { max-width: 640px; margin: 0 auto; }
.review-shell {
    min-height: 340px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 16px; text-align: center;
}
.review-word { font-size: 2rem; margin: 0; }
.review-meaning { background: #f0f9ff; border: 2px solid var(--blue); padding: 14px 18px; border-radius: 14px; font-size: 1.05rem; max-width: 460px; }
.review-example { color: var(--muted); margin-top: 8px; }
.review-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.review-loading { color: var(--muted); }
.hidden { display: none; }

/* ---- Speak practice ------------------------------------------------------------- */
.speak-page { max-width: 640px; margin: 0 auto; }
.speak-shell {
    min-height: 360px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 16px; text-align: center;
}
.speak-word { font-size: 2.2rem; margin: 0; }
.speak-meaning { background: #f0f9ff; border: 2px solid var(--blue); padding: 14px 18px; border-radius: 14px; font-size: 1.05rem; max-width: 460px; }
.speak-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.speak-recording {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    background: #ffe1e1; border: 2px solid var(--red); border-radius: 14px;
    padding: 18px 24px; animation: speak-pulse 1.2s ease-in-out infinite;
}
@keyframes speak-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(231, 74, 74, 0.35); }
    50% { box-shadow: 0 0 0 12px rgba(231, 74, 74, 0); }
}
.speak-result { display: flex; flex-direction: column; gap: 8px; padding: 18px 22px; border-radius: 14px; }
.speak-result.is-correct { background: #e8f8d4; border: 2px solid var(--green); }
.speak-result.is-wrong { background: #ffe1e1; border: 2px solid var(--red); }
.speak-result.is-neutral { background: #f0f9ff; border: 2px solid var(--blue); }

/* ---- Admin extras --------------------------------------------------------------- */
.code-block {
    background: #f4f5f7; border: 1px solid var(--line); border-radius: 10px;
    padding: 10px 14px; font-family: ui-monospace, Consolas, monospace; overflow-x: auto;
}
.tag-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tag-list li { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; font-size: 0.9rem; }

/* ---- Course catalog (public) ---------------------------------------------------- */
.catalog-head { margin-bottom: 20px; }
.course-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px; margin-bottom: 24px;
}
.course-card {
    background: var(--card-bg); border-radius: var(--radius);
    border-top: 6px solid var(--accent, var(--green));
    box-shadow: var(--shadow); padding: 20px; display: flex; flex-direction: column;
}
.course-card-icon { font-size: 2.4rem; line-height: 1; margin-bottom: 8px; }
.course-card-icon img, .course-card-icon-img { height: 36px; width: auto; max-width: 100%; vertical-align: middle; }
.course-card h2 { font-size: 1.15rem; margin-bottom: 4px; }
.course-card-meta { list-style: none; padding: 0; margin: 10px 0; display: flex; flex-wrap: wrap; gap: 8px; }
.course-card-meta li {
    background: #f4f5f7; border-radius: 999px; padding: 3px 10px; font-size: 0.8rem; color: var(--muted);
}
.course-card-actions { margin-top: auto; display: flex; gap: 8px; flex-wrap: wrap; padding-top: 12px; }
.small-track { margin: 8px 0 2px; }
.catalog-cta { text-align: center; }

/* ---- Course overview (public) ----------------------------------------------------- */
.course-overview { --accent: var(--green); }
.course-hero { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.course-hero-icon { font-size: 3.2rem; line-height: 1; }
.course-hero-icon img, .course-hero-icon-img { height: 60px; width: auto; max-width: 100%; }
.course-hero-text { flex: 1; min-width: 220px; }
.course-hero-actions { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.course-hero-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.lesson-list { list-style: none; padding: 0; margin: 8px 0 0; }
.lesson-list-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 8px; border-bottom: 1px solid var(--line);
}
.lesson-list-item:last-child { border-bottom: 0; }
.lesson-list-icon {
    width: 34px; height: 34px; flex: none; border-radius: 50%;
    background: var(--accent, var(--green)); color: #fff; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}

/* ---- Glossary ---------------------------------------------------------------------- */
.glossary-head { margin-bottom: 14px; }
.glossary-search { margin-bottom: 16px; }
.glossary-search .input { width: 100%; max-width: 420px; }
.glossary-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.glossary-entry {
    background: var(--card-bg); border-radius: 14px; box-shadow: var(--shadow);
    padding: 14px 16px;
}
.glossary-word { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.glossary-word strong { font-size: 1.1rem; }
.glossary-word .audio-btn { font-size: 1.1rem; }
.glossary-meaning { margin: 4px 0; font-weight: 600; }
.glossary-example { font-style: italic; color: var(--ink); margin: 6px 0 2px; }
.glossary-tag { margin: 8px 0 0; }

/* ---- Lesson preview banner --------------------------------------------------------- */
.player-preview-banner {
    max-width: 720px; margin: 14px auto 0; padding: 10px 16px;
    display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
    background: #fff7d6; border: 2px solid var(--yellow); border-radius: 12px;
    font-size: 0.9rem; font-weight: 600;
}

/* ---- Responsive ---------------------------------------------------------------- */
@media (max-width: 860px) {
    .admin-body { flex-direction: column; }
    .admin-sidebar {
        width: 100%;
        height: auto;
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }
    .admin-nav { flex-direction: row; flex-wrap: wrap; }
    .admin-sidebar-footer { flex-direction: row; margin-top: 0; flex-wrap: wrap; }
    .admin-grid-two { grid-template-columns: 1fr; }
    .admin-topbar h1 { display: none; }
}

@media (max-width: 640px) {
    .app-main, .admin-main { padding: 14px; }
    .landing-header { flex-wrap: wrap; gap: 10px; padding: 14px 16px; }
    .landing-actions { flex-wrap: wrap; }
    .landing-hero { text-align: center; padding: 32px 16px; }
    .landing-copy { text-align: center; }
    .landing-art { display: flex; flex-direction: column; align-items: center; gap: 12px; }
    .art-balloon-2 { position: static; transform: rotate(-4deg); }
    .landing-features, .landing-courses { padding: 16px; }
    .course-card-icon img, .course-card-icon-img { height: 30px; }
    .course-hero-icon img, .course-hero-icon-img { height: 46px; }
    .app-header { padding: 10px 14px; }
    .match-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .path-node { width: 60px; height: 60px; font-size: 1.2rem; }
    .player-top { gap: 10px; padding: 10px 12px; }
    .player-stage { padding: 16px 12px 110px; }
    .memory-tile { height: 80px; }
    .feedback { flex-direction: column; align-items: stretch; text-align: center; }
}