/* =========================================================
   AI TUITION TEACHER — Design System
   Theme: "School Notebook meets Game Board" — bright, rounded,
   playful but legible, built for a Class 4 kid + a parent/admin.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito:wght@400;600;700;800&family=Mukta:wght@400;500;600;700&display=swap');

:root {
    /* Palette — school-notebook brights, not the generic cream/terracotta AI look */
    --sky:      #3E92CC;
    --sky-dark: #2C6E9E;
    --sun:      #FFC93C;
    --coral:    #FF6F61;
    --mint:     #2EC4B6;
    --grape:    #9C6ADE;
    --leaf:     #8BC34A;
    --pink:     #F06292;

    --ink:      #1B2A4A;
    --ink-soft: #4A5A78;
    --paper:    #FAFBFD;
    --paper-2:  #F0F3F9;
    --line:     #E1E7F0;
    --white:    #FFFFFF;

    --radius-sm: 10px;
    --radius:    16px;
    --radius-lg: 24px;
    --shadow:    0 4px 0 rgba(27,42,74,0.12), 0 8px 20px rgba(27,42,74,0.08);
    --shadow-sm: 0 3px 0 rgba(27,42,74,0.10);

    --font-display: 'Baloo 2', 'Mukta', sans-serif;
    --font-body: 'Nunito', 'Mukta', sans-serif;
    --font-hi: 'Mukta', 'Nunito', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 15px; } /* thoda chota base text, taaki har screen par sahi fit ho */

body {
    margin: 0;
    font-family: var(--font-body);
    background: var(--paper-2);
    color: var(--ink);
    line-height: 1.55;
    font-size: 0.95rem;
}

h1, h2, h3, h4, .display {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 0.4em;
}

a { color: var(--sky-dark); text-decoration: none; }
img { max-width: 100%; }

:focus-visible {
    outline: 3px solid var(--sun);
    outline-offset: 2px;
}

/* ---------- Layout shells ---------- */
/* Pehle 1100px pe hard-capped tha — badi desktop screens (1600px+) par
   bahut zyada khaali jagah left-right dikhti thi, poori screen use nahi
   hoti thi. Ab clamp() se screen size ke hisaab se thoda aur khulta hai
   (max 1600px tak), chhoti screens par pehle jaisa hi rehta hai. */
.container {
    max-width: clamp(1100px, 92vw, 1600px);
    margin: 0 auto;
    padding: 0 20px;
}

.app-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.main-content {
    flex: 1;
    padding: 28px 0 60px;
}

/* ---------- Top bar ---------- */
.topbar {
    background: var(--white);
    border-bottom: 3px solid var(--ink);
    position: sticky;
    top: 0;
    z-index: 50;
}
.topbar-inner {
    max-width: clamp(1100px, 92vw, 1600px);
    margin: 0 auto;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--ink);
}
.brand .logo-badge {
    width: 40px; height: 40px;
    background: var(--sun);
    border: 3px solid var(--ink);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem;
    transform: rotate(-4deg);
}
.topbar-user {
    display: flex; align-items: center; gap: 10px;
    font-weight: 700;
}
.icon-btn {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--paper-2); border: 2px solid transparent;
    font-size: 1.05rem; text-decoration: none; flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
}
.icon-btn:hover { background: var(--paper); border-color: var(--line); }
.avatar-chip {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--paper-2);
    border: 2.5px solid var(--ink);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
}

/* ---------- App-style bottom tab bar (mobile-app navigation) ---------- */
.app-shell.has-tabbar .main-content { padding-bottom: 96px; }
.bottom-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    background: var(--white); border-top: 3px solid var(--ink);
    box-shadow: 0 -6px 18px rgba(27,42,74,0.10);
    display: flex; align-items: stretch; justify-content: space-around;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
.bottom-tabbar a {
    flex: 1; max-width: 96px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; padding: 6px 2px; margin: 0 2px;
    border-radius: 14px; text-decoration: none;
    color: var(--ink-soft); font-family: var(--font-display); font-weight: 700;
    font-size: 0.66rem; line-height: 1.1;
    transition: background 0.15s, color 0.15s, transform 0.15s;
}
.bottom-tabbar a .tab-icon { font-size: 1.4rem; line-height: 1; }
.bottom-tabbar a:hover { background: var(--paper-2); }
.bottom-tabbar a.active { color: var(--sky-dark); background: #E9F3FC; transform: translateY(-2px); }

/* ---------- Mobile-app "phone frame" look (student/parent app-shell) ----------
   Bade screens par bhi app ko ek mobile-app jaisa, narrow, centered
   phone-width panel mein dikhaya jaata hai — chhote screens par yeh
   normal full-width mobile app ki tarah hi rehta hai. */
@media (min-width: 641px) {
    body:has(.app-shell) { background: var(--ink); }
    .app-shell {
        max-width: 460px; margin: 0 auto;
        min-height: 100vh;
        background: var(--paper-2);
        box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 20px 60px rgba(0,0,0,0.35);
    }
    .app-shell .topbar-inner,
    .app-shell .bottom-tabbar { max-width: 460px; margin: 0 auto; left: auto; right: auto; }
    .app-shell .bottom-tabbar { position: sticky; }
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1rem;
    padding: 11px 22px;
    border-radius: 100px;
    border: 3px solid var(--ink);
    background: var(--white);
    color: var(--ink);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: transform .12s ease, box-shadow .12s ease;
    text-align: center;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 rgba(27,42,74,0.12); }
.btn:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(27,42,74,0.12); }
.btn-primary { background: var(--sky); color: var(--white); }
.btn-sun { background: var(--sun); }
.btn-coral { background: var(--coral); color: var(--white); }
.btn-mint { background: var(--mint); color: var(--white); }
.btn-block { width: 100%; }
.btn-sm { padding: 7px 16px; font-size: 0.88rem; border-width: 2px; }
.btn-ghost { background: transparent; box-shadow: none; }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

/* ---------- Cards ---------- */
.card {
    background: var(--white);
    border: 3px solid var(--ink);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 22px;
}

/* Subject "book" cards — bookshelf metaphor */
.subject-shelf {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 18px;
    margin-top: 18px;
}
.subject-book {
    position: relative;
    border-radius: var(--radius);
    border: 3px solid var(--ink);
    box-shadow: var(--shadow);
    padding: 20px 18px 18px;
    color: var(--white);
    display: flex; flex-direction: column; gap: 10px;
    min-height: 150px;
    transition: transform .15s ease;
    overflow: hidden;
}
.subject-book:hover { transform: translateY(-4px) rotate(-1deg); }
.subject-book::after {
    content: "";
    position: absolute; left: 0; top: 0; bottom: 0; width: 10px;
    background: rgba(0,0,0,0.18);
}
.subject-book .icon { font-size: 2.1rem; }
.subject-book .name { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; }
.subject-book .name-hi { font-family: var(--font-hi); font-size: 0.92rem; opacity: .92; }
.subject-book .meta { margin-top: auto; font-size: 0.8rem; font-weight: 700; opacity: .95; }

/* ---------- Progress trail (signature element) ---------- */
.trail {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 16px 0 4px;
}
.trail-node {
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 3px solid var(--ink);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.9rem;
    font-weight: 800;
    background: var(--paper-2);
    color: var(--ink-soft);
    flex-shrink: 0;
}
.trail-node.done { background: var(--leaf); color: var(--white); }
.trail-node.current { background: var(--sun); box-shadow: 0 0 0 4px rgba(255,201,60,0.35); }
.trail-line { flex: 1; min-width: 14px; height: 4px; background: var(--line); border-radius: 4px; }
.trail-line.done { background: var(--leaf); }

/* ---------- Chips / badges ---------- */
.chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--paper-2);
    border: 2px solid var(--ink);
    border-radius: 100px;
    padding: 4px 12px;
    font-size: 0.82rem;
    font-weight: 700;
}
.chip-mint { background: var(--mint); color: var(--white); border-color: var(--ink); }
.chip-coral { background: var(--coral); color: var(--white); }
.chip-sun { background: var(--sun); }

/* ---------- Forms ---------- */
label { font-weight: 700; display: block; margin-bottom: 6px; }
input[type=text], input[type=password], input[type=date], input[type=file],
textarea, select {
    width: 100%;
    padding: 12px 14px;
    border: 2.5px solid var(--line);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 1rem;
    background: var(--white);
    color: var(--ink);
}
input:focus, textarea:focus, select:focus {
    border-color: var(--sky);
    outline: none;
}
.field { margin-bottom: 16px; }
.help-text { color: var(--ink-soft); font-size: 0.85rem; margin-top: 4px; }

/* ---------- Auth screens ---------- */
.auth-wrap {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(160deg, var(--sky) 0%, var(--grape) 100%);
    padding: 20px;
}
.auth-card {
    background: var(--white);
    border: 4px solid var(--ink);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    max-width: 420px;
    width: 100%;
    padding: 34px 30px;
    text-align: center;
}
.auth-card .logo-badge {
    width: 64px; height: 64px; margin: 0 auto 14px;
    background: var(--sun); border: 3px solid var(--ink); border-radius: 18px;
    display: flex; align-items: center; justify-content: center; font-size: 2rem;
    transform: rotate(-5deg);
}
.role-switch { display: flex; gap: 10px; margin-bottom: 20px; }
.role-switch a { flex: 1; }

/* ---------- Lesson viewer ---------- */
.lesson-content {
    font-size: 1.08rem;
    line-height: 1.85;
}
.lesson-content h2, .lesson-content h3 { color: var(--sky-dark); }
.lesson-content ul, .lesson-content ol { padding-left: 22px; }
/* English line ke turant baad AI jo Hindi matlab deti hai (English/EVS/
   Grammar chapters mein) — thoda alag rang se, taaki English aur Hindi
   explanation visually clearly alag dikhein. */
.lesson-content .hindi-meaning {
    background: #FFF7E6;
    border-left: 3px solid #FFB74D;
    padding: 8px 12px;
    border-radius: 6px;
    color: #5D4037;
    font-size: 0.98rem;
    margin: 4px 0 14px;
}
/* Beech-beech mein "Samajh Check" wale boxes jinme AI bacche se poochti
   hai ki samajh aaya ki nahi. */
.lesson-content .samajh-check,
.lesson-content .comprehension-check {
    background: #E8F5E9;
    border: 1.5px dashed #66BB6A;
    padding: 10px 14px;
    border-radius: 10px;
    margin: 16px 0;
    font-weight: 600;
    color: #2E7D32;
}

/* ---------- Chat / AI Tutor ---------- */
.chat-window {
    display: flex; flex-direction: column;
    gap: 14px;
    max-height: 55vh;
    overflow-y: auto;
    padding: 6px 4px 14px;
}
.msg { max-width: 82%; padding: 12px 16px; border-radius: var(--radius); border: 2.5px solid var(--ink); line-height: 1.55; }
.msg-ai { background: var(--paper-2); align-self: flex-start; border-bottom-left-radius: 4px; }
.msg-kid { background: var(--sky); color: var(--white); align-self: flex-end; border-bottom-right-radius: 4px; }
.msg-ai strong, .msg-kid strong { font-family: var(--font-display); }
.chat-input-row { display: flex; gap: 10px; margin-top: 14px; align-items: flex-end; }
.chat-input-row textarea { resize: none; height: 52px; }
.chat-photo-btn {
    display: flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; flex-shrink: 0;
    border: 2.5px solid var(--ink); border-radius: var(--radius-sm);
    background: var(--paper-2); font-size: 22px; cursor: pointer;
    transition: background 0.15s;
}
.chat-photo-btn:hover { background: var(--paper); }
.chat-photo-preview-wrap {
    display: flex; align-items: center; gap: 10px; margin-top: 12px;
    padding: 8px; border: 2.5px dashed var(--ink); border-radius: var(--radius-sm);
    background: var(--paper-2); width: fit-content;
}
.chat-photo-preview { width: 60px; height: 60px; object-fit: cover; border-radius: var(--radius-sm); border: 2px solid var(--ink); }
.chat-mic-btn {
    display: flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; flex-shrink: 0;
    border: 2.5px solid var(--ink); border-radius: var(--radius-sm);
    background: var(--paper-2); font-size: 22px; cursor: pointer;
    transition: background 0.15s, transform 0.15s;
}
.chat-mic-btn:hover { background: var(--paper); }
.chat-mic-btn.listening {
    background: var(--coral); color: var(--white);
    animation: micPulse 1s infinite;
}
@keyframes micPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}
/* ---------- Teacher Avatar ---------- */
.teacher-avatar-wrap {
    display: flex; align-items: center; gap: 16px;
    margin-bottom: 18px; padding: 14px 18px;
    background: linear-gradient(135deg, #E9F3FC, #F3EEFB);
    border: 2.5px solid var(--ink); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.teacher-avatar {
    width: 84px; height: 84px; flex-shrink: 0;
    animation: teacherIdle 3.2s ease-in-out infinite;
}
.teacher-avatar svg { width: 100%; height: 100%; display: block; }
@keyframes teacherIdle {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-4px) rotate(-1deg); }
}
.teacher-mouth-open { opacity: 0; }
.teacher-avatar.is-talking { animation: teacherTalk 0.45s ease-in-out infinite; }
@keyframes teacherTalk {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}
.teacher-avatar.is-talking .teacher-mouth-closed { opacity: 0; }
.teacher-avatar.is-talking .teacher-mouth-open { opacity: 1; animation: mouthFlap 0.3s steps(1) infinite; }
@keyframes mouthFlap {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}
.teacher-avatar.is-thinking { animation: teacherThink 1.1s ease-in-out infinite; }
@keyframes teacherThink {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(3deg); }
}
.teacher-eye { animation: teacherBlink 4.5s ease-in-out infinite; transform-origin: center; }
.teacher-eye.right { animation-delay: 0.05s; }
@keyframes teacherBlink {
    0%, 92%, 100% { transform: scaleY(1); }
    95% { transform: scaleY(0.1); }
}
.teacher-intro {
    display: flex; flex-direction: column; gap: 3px;
}
.teacher-intro .name { font-family: var(--font-display); font-weight: 800; color: var(--ink); font-size: 1.05rem; }
.teacher-status { font-size: 0.88rem; color: var(--ink-soft); font-weight: 600; }
.teacher-thinking-dots span { display: inline-block; animation: blink 1.4s infinite; opacity: .3; }
.teacher-thinking-dots span:nth-child(2) { animation-delay: .2s; }
.teacher-thinking-dots span:nth-child(3) { animation-delay: .4s; }

.chat-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.chat-voice-toggle {
    display: flex; align-items: center; gap: 6px;
    border: 2.5px solid var(--ink); border-radius: var(--radius-sm);
    background: var(--paper-2); padding: 6px 12px; font-size: 0.85rem;
    cursor: pointer; font-family: var(--font-display); white-space: nowrap;
}
.chat-voice-toggle.on { background: var(--mint); }
.chat-voice-toggle.smart-on { background: var(--sun); }
.chat-listening-hint { font-size: 0.85rem; color: var(--sky-dark); margin-top: 6px; display: none; text-align: center; }
.chat-listening-hint.show { display: block; }

/* ---------- Chat dock (AI Teacher composer fixed at bottom of page) ---------- */
.chat-card .chat-window { max-height: calc(100vh - 430px); min-height: 240px; }
.chat-dock {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    background: var(--white);
    border-top: 3px solid var(--ink);
    box-shadow: 0 -6px 18px rgba(27,42,74,0.12);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
}
.chat-dock-inner { max-width: clamp(1100px, 92vw, 1600px); margin: 0 auto; }
.chat-dock .chat-input-row { margin-top: 0; }
.chat-dock-offset { height: 118px; }
@media (max-width: 640px) {
    .chat-card .chat-window { height: calc(100vh - 380px); min-height: 200px; }
    .chat-dock { padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
    .chat-dock-offset { height: 128px; }
}

/* ---------- Flashcards ---------- */
.flashcard-wrap { max-width: 480px; margin: 0 auto; text-align: center; }
.flashcard-progress { font-family: var(--font-display); color: var(--sky-dark); margin-bottom: 10px; }
.flashcard {
    position: relative;
    width: 100%;
    height: 260px;
    perspective: 1200px;
    cursor: pointer;
    margin-bottom: 18px;
}
.flashcard-face {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 24px;
    border: 3px solid var(--ink);
    border-radius: var(--radius);
    backface-visibility: hidden;
    transition: transform 0.5s;
    box-shadow: 6px 6px 0 var(--ink);
}
.flashcard-front { background: var(--paper-2); transform: rotateY(0deg); }
.flashcard-back { background: var(--mint); color: var(--white); transform: rotateY(180deg); }
.flashcard.flipped .flashcard-front { transform: rotateY(-180deg); }
.flashcard.flipped .flashcard-back { transform: rotateY(0deg); }
.flashcard-subject { position: absolute; top: 14px; left: 16px; font-size: 0.8rem; font-family: var(--font-display); opacity: 0.75; }
.flashcard-text { font-size: 1.25rem; font-family: var(--font-display); line-height: 1.5; }
.flashcard-buttons { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ---------- Meri Kitab (Book Study) ---------- */
.book-chapter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
.book-chapter-card {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 20px 14px; text-align: center;
    border: 2.5px solid var(--ink); border-radius: var(--radius);
    background: var(--paper-2); box-shadow: 5px 5px 0 var(--ink);
    text-decoration: none; color: inherit;
    transition: transform 0.15s;
}
.book-chapter-card:hover { transform: translateY(-3px); }
/* Naya chapter jab live-sync se doosre device se add hokar yahan apne
   aap dikhta hai, to ek halka "abhi aaya" glow animation. */
.book-chapter-card--new { animation: bookChapterPop 1.2s ease; box-shadow: 5px 5px 0 var(--mint); }
@keyframes bookChapterPop {
    0% { transform: scale(0.9); box-shadow: 0 0 0 6px rgba(46,196,182,0.35), 5px 5px 0 var(--mint); }
    100% { transform: scale(1); box-shadow: 5px 5px 0 var(--mint); }
}
.book-chapter-icon { font-size: 2rem; }
.book-chapter-title { font-family: var(--font-display); font-weight: 700; }
.book-pages-strip { display: flex; gap: 10px; flex-wrap: wrap; }
.book-page-thumb { position: relative; width: 90px; height: 112px; border: 2.5px solid var(--ink); border-radius: var(--radius-sm); overflow: hidden; animation: bookPageIn .35s ease; }
.book-page-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.book-page-warning { position: absolute; top: 2px; left: 2px; font-size: 16px; filter: drop-shadow(0 0 2px #fff); }
.book-page-actions { position: absolute; bottom: 0; left: 0; right: 0; display: flex; gap: 2px; justify-content: center; padding: 2px; background: rgba(255,255,255,0.85); }
.book-page-actions .btn { padding: 2px 5px; font-size: 11px; line-height: 1.2; }
@keyframes bookPageIn { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }

/* Live-sync dot: chhota hara dot jo dikhata hai ki ye page dusre devices
   se aa rahe naye pages ke liye live sync kar raha hai (mobile -> desktop/TV). */
.live-sync-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #2ecc71; margin-left: 4px; vertical-align: middle; animation: liveSyncPulse 1.6s ease-in-out infinite; }
@keyframes liveSyncPulse { 0%, 100% { opacity: .45; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.15); } }
.assessment-item { padding: 14px 0; border-top: 2px dashed var(--paper-3, #e0d8c8); }
.assessment-item:first-of-type { border-top: none; }
.chat-photo-remove {
    width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--ink);
    background: var(--white); cursor: pointer; font-weight: bold; line-height: 1;
}
.chat-msg-photo {
    max-width: 220px; max-height: 220px; object-fit: cover; border-radius: var(--radius-sm);
    border: 2.5px solid var(--ink); display: block; margin-bottom: 6px;
}
.typing-dots span { animation: blink 1.4s infinite; opacity: .3; }
.typing-dots span:nth-child(2) { animation-delay: .2s; }
.typing-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%,100%{opacity:.3;} 50%{opacity:1;} }

/* ---------- Quiz ---------- */
.quiz-q { margin-bottom: 26px; padding-bottom: 22px; border-bottom: 2px dashed var(--line); }
.quiz-q:last-child { border-bottom: none; }
.quiz-options { display: grid; gap: 10px; margin-top: 12px; }
.quiz-option {
    display: flex; align-items: center; gap: 10px;
    border: 2.5px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    cursor: pointer;
    font-weight: 600;
}
.quiz-option:hover { border-color: var(--sky); }
.quiz-option input { width: auto; margin: 0; }
.quiz-option.correct { border-color: var(--leaf); background: #EEF8E4; }
.quiz-option.wrong { border-color: var(--coral); background: #FFEEEC; }

.score-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 110px; height: 110px; border-radius: 50%;
    border: 4px solid var(--ink);
    background: var(--sun);
    font-family: var(--font-display);
    font-size: 1.8rem; font-weight: 800;
    margin: 10px auto;
}

/* ---------- Homework ---------- */
.hw-card { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.hw-thumb { width: 96px; height: 96px; object-fit: cover; border-radius: var(--radius-sm); border: 2.5px solid var(--ink); }
.status-pending { color: var(--coral); font-weight: 800; }
.status-checked { color: var(--leaf); font-weight: 800; }

/* ---------- Tables (admin) ---------- */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 12px 10px; border-bottom: 2px solid var(--line); }
th { font-family: var(--font-display); color: var(--ink-soft); font-size: 0.85rem; text-transform: uppercase; letter-spacing: .03em; }

/* ---------- Admin shell ---------- */
.admin-layout { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
.admin-sidebar {
    background: var(--ink); color: var(--white);
    padding: 20px 14px;
}
.admin-sidebar .brand { color: var(--white); margin-bottom: 24px; }
.admin-sidebar a {
    display: block; padding: 10px 12px; border-radius: var(--radius-sm);
    color: #D8DEEC; font-weight: 700; margin-bottom: 4px; font-size: 0.95rem;
}
.admin-sidebar a:hover, .admin-sidebar a.active { background: rgba(255,255,255,0.12); color: var(--white); }
.admin-main { padding: 26px 30px; background: var(--paper-2); }
.admin-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 16px; margin-bottom: 26px; }
.stat-card { background: var(--white); border: 3px solid var(--ink); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-sm); }
.stat-card .num { font-family: var(--font-display); font-size: 1.9rem; font-weight: 800; }
.stat-card .label { color: var(--ink-soft); font-weight: 700; font-size: 0.85rem; }

/* ---------- Alerts ---------- */
.alert { padding: 12px 16px; border-radius: var(--radius-sm); border: 2.5px solid; font-weight: 700; margin-bottom: 16px; }
.alert-success { background: #EEF8E4; border-color: var(--leaf); color: #3D6321; }
.alert-error { background: #FFEEEC; border-color: var(--coral); color: #9C2E24; }
.alert-info { background: #E9F3FC; border-color: var(--sky); color: var(--sky-dark); }

/* ---------- Utility ---------- */
.flex { display: flex; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-10 { gap: 10px; }
.gap-16 { gap: 16px; }
.mt-0 { margin-top: 0; }
.mt-10 { margin-top: 10px; }
.mt-20 { margin-top: 20px; }
.mt-30 { margin-top: 30px; }
.mb-20 { margin-bottom: 20px; }
.text-center { text-align: center; }
.text-muted { color: var(--ink-soft); }
.small { font-size: 0.86rem; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.section-title { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.badge-count { background: var(--coral); color: var(--white); border-radius: 100px; padding: 1px 9px; font-size: 0.75rem; }

@media (max-width: 780px) {
    .admin-layout { grid-template-columns: 1fr; }
    .admin-sidebar {
        position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 70;
        display: flex; overflow-x: auto; gap: 4px;
        padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
        border-top: 3px solid rgba(255,255,255,0.15);
        box-shadow: 0 -6px 18px rgba(27,42,74,0.25);
    }
    .admin-sidebar .brand { display: none; }
    .admin-sidebar a {
        flex: 1 0 auto; text-align: center; white-space: nowrap;
        font-size: 0.78rem; padding: 8px 10px; margin-bottom: 0;
    }
    .admin-main { padding-bottom: 90px; }
    .grid-2 { grid-template-columns: 1fr; }
}

/* ---------- Mobile-app polish ---------- */
@media (max-width: 640px) {
    .topbar-inner { padding: 10px 14px; }
    .brand .logo-badge { width: 34px; height: 34px; font-size: 1.1rem; }
    .brand { font-size: 1.05rem; gap: 8px; }
    .icon-btn, .avatar-chip { width: 34px; height: 34px; font-size: 0.95rem; }
    .container { padding: 0 14px; }
    .main-content { padding: 16px 0 40px; }
    .bottom-tabbar a { font-size: 0.62rem; }
    .bottom-tabbar a .tab-icon { font-size: 1.3rem; }
}
@media (max-width: 400px) {
    .brand-name { display: none; }
}

/* ---------- Today's To-Do ---------- */
.todo-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border: 2px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 10px; background: var(--paper); }
.todo-item.urgent { border-color: var(--coral); background: #FFF6F5; }
.todo-left { display: flex; align-items: center; gap: 10px; }
.todo-tag { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; padding: 2px 8px; border-radius: 100px; background: var(--paper-2); color: var(--ink-soft); }
.todo-tag.hw { background: #FFEEEC; color: #9C2E24; }
.todo-tag.lesson { background: #E9F3FC; color: var(--sky-dark); }

/* ---------- Smart Recommendation Engine (Aaj Revise Karo) ---------- */
.reco-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 2px solid var(--line); border-left-width: 5px; border-radius: var(--radius-sm); margin-top: 12px; background: var(--paper); flex-wrap: wrap; }
.reco-item.tone-coral { border-left-color: var(--coral); background: #FFF6F5; }
.reco-item.tone-sun { border-left-color: var(--sun); background: #FFFBEF; }
.reco-item.tone-mint { border-left-color: var(--mint); background: #F0FBFA; }
.reco-item.tone-sky { border-left-color: var(--sky); background: #F3F9FE; }
.reco-left { display: flex; align-items: center; gap: 12px; }
.reco-icon { font-size: 1.6rem; line-height: 1; }
.reco-title { font-weight: 800; }
.reco-sub { max-width: 46ch; }

/* ---------- Tasks & Reminders ---------- */
.task-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 2px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 10px; background: var(--paper); }
.task-item.overdue { border-color: var(--coral); background: #FFF6F5; }
.task-item.done { opacity: 0.6; }
.task-item.done .task-title { text-decoration: line-through; }
.task-check-form { margin: 0; }
.task-check { background: none; border: none; font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0 2px; box-shadow: none; }
.task-body { flex: 1; min-width: 0; }
.task-title { font-weight: 700; }

/* ---------- Exam Center ---------- */
.exam-card { border: 2.5px solid var(--line); border-radius: var(--radius); padding: 18px; background: var(--white); box-shadow: var(--shadow-sm); margin-bottom: 20px; }
.exam-countdown { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: var(--coral); }
.progress-track { width: 100%; height: 10px; border-radius: 100px; background: var(--paper-2); overflow: hidden; margin: 6px 0 2px; }
.progress-fill { height: 100%; border-radius: 100px; background: var(--mint); }
.syllabus-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.syllabus-row:last-child { border-bottom: none; }