/* =============================================
   FONT SIZE SETTINGS
   ============================================= */
html.font-small  { font-size: 14px; }
html.font-medium { font-size: 16px; }
html.font-large  { font-size: 18px; }

/* =============================================
   SETTINGS PANEL
   ============================================= */
.settings-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.375rem;
}

/* =============================================
   DARK THEME
   ============================================= */
html.dark-theme body { background-color: #0f172a; }
html.dark-theme .bg-gray-100 { background-color: #0f172a; }
html.dark-theme .bg-white,
html.dark-theme .bg-slate-50 { background-color: #1e293b; }

/* Main header */
html.dark-theme header.bg-white { background-color: #1e293b; border-color: #334155; }
html.dark-theme #current-subject { color: #e2e8f0; }

/* Content area */
html.dark-theme #content-container { background-color: #0f172a; }
html.dark-theme #welcome-msg { color: #94a3b8; }

/* Mode tabs */
html.dark-theme #mode-tabs { background-color: #334155; }
html.dark-theme #mode-tabs button { color: #94a3b8; }
html.dark-theme #mode-tabs button.bg-slate-800 { background-color: #0f172a; color: #f1f5f9; }

/* Input area */
html.dark-theme #input-area { background-color: #1e293b; border-color: #334155; }
html.dark-theme #user-input { background-color: #0f172a; border-color: #334155; color: #e2e8f0; }

/* Chat messages */
html.dark-theme .msg-bot { background: #334155; color: #e2e8f0; }
html.dark-theme .msg-user { background: #3b82f6; color: white; }

/* Script view */
html.dark-theme .script-view { background: #1e293b; border-color: #334155; color: #e2e8f0; }

/* Dashboard cards */
html.dark-theme #view-dashboard { background-color: #0f172a !important; }
html.dark-theme #view-dashboard button { background-color: #1e293b; border-color: #334155; }
html.dark-theme #view-dashboard button:hover { border-color: inherit; }
html.dark-theme #view-dashboard .text-slate-800 { color: #e2e8f0; }
html.dark-theme #view-dashboard .text-slate-500,
html.dark-theme #view-dashboard .text-slate-400 { color: #94a3b8; }

/* Quiz/Exam cards */
html.dark-theme .stat-card { background: #1e293b; border-color: #334155; }
html.dark-theme .stat-value { color: #e2e8f0; }
html.dark-theme .stat-label { color: #94a3b8; }

/* General text overrides */
html.dark-theme .text-slate-800,
html.dark-theme .text-slate-700 { color: #e2e8f0; }
html.dark-theme .text-slate-600,
html.dark-theme .text-slate-500 { color: #94a3b8; }
html.dark-theme .text-slate-400 { color: #64748b; }

/* Prose (markdown rendered content) */
html.dark-theme .prose { color: #cbd5e1; }
html.dark-theme .prose h1 { color: #93c5fd; }
html.dark-theme .prose h2 { color: #93c5fd; }
html.dark-theme .prose strong { color: #e2e8f0; }
html.dark-theme .prose code:not(.hljs) { background-color: #334155; color: #e2e8f0; }

/* Inline code */
html.dark-theme .prose code:not(.hljs) { background-color: #334155; color: #e2e8f0; }

/* Scrollbar */
html.dark-theme ::-webkit-scrollbar-track { background: #1e293b; }
html.dark-theme ::-webkit-scrollbar-thumb { background: #475569; }

/* Modals keep their own styling (dark header, white body) — no override needed */

/* Setup screen */
html.dark-theme #setup-screen { background-color: #0f172a; }
html.dark-theme #setup-screen .bg-white { background-color: #1e293b; }
html.dark-theme #setup-screen .bg-slate-50 { background-color: #0f172a; }
html.dark-theme #setup-screen .text-slate-700 { color: #e2e8f0; }
html.dark-theme #setup-screen .border-slate-200 { border-color: #334155; }

/* Quiz/Exam view cards in dark mode */
html.dark-theme [id^="view-quiz"] .bg-white,
html.dark-theme [id^="view-exam"] .bg-white { background-color: #1e293b; }
html.dark-theme [id^="view-quiz"] .border-slate-200,
html.dark-theme [id^="view-exam"] .border-slate-200 { border-color: #334155; }

/* Settings modal dark theme override for inputs */
html.dark-theme #settings-modal-body input,
html.dark-theme #settings-modal-body select { background-color: #0f172a; border-color: #334155; color: #e2e8f0; }
html.dark-theme .settings-label { color: #94a3b8; }

.prose img { max-width: 100%; border-radius: 8px; margin: 10px 0; }
.prose h1 { font-size: 1.5em; font-weight: bold; color: #1e3a8a; margin-top: 10px; }
.prose h2 { font-size: 1.2em; font-weight: bold; color: #1e40af; margin-top: 8px; }
.prose p { margin-bottom: 8px; line-height: 1.6; }
.prose strong { font-weight: 700; color: #334155; }

/* --- TABLICE (truth tables, konvergencija itd.) — marked generira <table>, ali
   Tailwind CDN nema typography plugin pa custom .prose mora eksplicitno stilizirati
   tablice; bez ovoga ćelije nemaju border/padding i math-pune header-ćelije se
   skupe u "pqp∧q…". --- */
.prose table { border-collapse: collapse; margin: 14px 0; font-size: 0.95em; }
.prose th, .prose td { border: 1px solid #cbd5e1; padding: 6px 14px; text-align: center; }
.prose thead th { background: #f1f5f9; font-weight: 600; }
html.dark-theme .prose th, html.dark-theme .prose td { border-color: #475569; }
html.dark-theme .prose thead th { background: #1e293b; color: #e2e8f0; }

/* --- FIX ZA LISTE (1. 2. 3. i točke) --- */
.prose ol {
    list-style-type: decimal !important;
    margin-left: 1.5rem !important;
    margin-bottom: 1rem !important;
    padding-left: 0.5rem !important;
}

.prose ul {
    list-style-type: disc !important;
    margin-left: 1.5rem !important;
    margin-bottom: 1rem !important;
    padding-left: 0.5rem !important;
}

.prose li {
    display: list-item !important; /* Ovo prisiljava browser da crta broj/točku */
    margin-bottom: 0.4rem !important;
    line-height: 1.6;
}

/* Osiguraj da se brojevi vide i na mobitelu */
@media (max-width: 768px) {
    .prose ol, .prose ul {
        margin-left: 1.2rem !important;
    }
}


.prose { text-align: left; }
.prose h1, .prose h2, .prose h3, .prose h4 { text-align: left; }


/* Stil za slike unutar skripte i Markdown renderiranog sadržaja (kviz/ispit) */
.script-image, 
.prose img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;       /* Na mobitelu zauzmi dostupnu širinu */
    height: auto;
    border-radius: 8px;
    margin-top: 15px;
    margin-bottom: 15px;
}


/* --- CODE BLOCK FIX --- */

/* 1. Resetiraj stilove koje Tailwind (prose) forsira na pre i code */
.prose pre {
    background-color: transparent !important; /* Pusti da highlight.js odredi boju */
    padding: 0 !important;
    margin: 1.5em 0 !important;
    border-radius: 0.5rem !important;
    overflow: hidden !important; /* Da se ne prelijeva van */
}

/* 2. Highlight.js stilovi */
/* Ovo je stvarna kutija s kodom */
pre code.hljs {
    display: block;
    overflow-x: auto;
    padding: 1.2em !important;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.9em;
    line-height: 1.5;
    background: #282c34 !important; /* Atom One Dark pozadina */
    color: #abb2bf !important;      /* Osnovna boja teksta */
    border-radius: 0.5rem;
}

/* 3. Sakrij backtickove (`) u inline kodu */
.prose :where(code):not(:where([class~="not-prose"] *))::before,
.prose :where(code):not(:where([class~="not-prose"] *))::after {
    content: "" !important;
}

/* 4. Malo uljepšaj inline kod (onaj koji nije u bloku) */
.prose code:not(.hljs) {
    background-color: #f1f5f9; /* Svijetlo siva pozadina */
    color: #1e293b;            /* <--- PROMIJENJENO: Tamna boja (umjesto crvene #ef4444) */
    padding: 0.2em 0.4em;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.9em;          /* Opcionalno: malo manji font da se ljepše uklopi */
}




/* SAMO za ekrane šire od mobitela (npr. tableti i desktop) */
@media (min-width: 768px) {
    .script-image, 
    .prose img {
        width: auto;       /* Vrati prirodni omjer/širinu */
        max-width: 260px;  /* OGRANIČENJE NA CCA 6-7cm */
        max-height: 400px; /* Dodatno ograničenje visine da ne bude previsoko */
    }
}

.msg-bot { background: #f1f5f9; color: #1e293b; border-radius: 12px 12px 12px 0; }
.msg-user { background: #3b82f6; color: white; border-radius: 12px 12px 0 12px; margin-left: auto; }

.script-view { background: #ffffff; border: 1px solid #e2e8f0; padding: 15px; border-radius: 8px; }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
@keyframes pulseOnce { 0% { transform: scale(0.98); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.animate-pulse-once { animation: pulseOnce 0.3s ease-out forwards; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

body { -webkit-tap-highlight-color: transparent; }
input, button { touch-action: manipulation; }


/* Progress traka za kviz */
.quiz-progress-bar {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    justify-content: center;
}

.quiz-step {
    flex: 1;
    max-width: 30px;
    height: 8px;
    background-color: #e2e8f0; /* Default siva */
    border-radius: 4px;
    transition: all 0.3s ease;
}

.quiz-step.active {
    background-color: #3b82f6; /* Plava (trenutno pitanje) */
    transform: scaleY(1.5);
}

.quiz-step.correct {
    background-color: #22c55e; /* Zelena */
}

.quiz-step.incorrect {
    background-color: #ef4444; /* Crvena */
}

/* Stil za kartice izvještaja */
.stat-card {
    background: white;
    padding: 15px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    text-align: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.stat-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: #1e293b;
}
.stat-label {
    font-size: 0.75rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.quiz-step.partial {
    background-color: #facc15; /* Žuta boja */
}

/* --- IZMJENA 2: RESPONSIVE FORMULE --- */

/* Cilja block-level MathJax formule (one u $$...$$) */
mjx-container[display="true"] {
    overflow-x: auto !important; /* Dozvoli horizontalni scroll */
    overflow-y: hidden;
    max-width: 100%;             /* Ne smije biti šire od ekrana mobitela */
    display: block !important;   /* Osiguraj da se ponaša kao blok */
    padding: 10px 0;             /* Malo mjesta za prst */
    -webkit-overflow-scrolling: touch; /* Glatko skrolanje na iOS-u */
}

/* Osigurava da se sam tekst ne širi */
.prose, .script-view {
    max-width: 100%;
    overflow-x: hidden; /* Skriva prelijevanje samog teksta */
    word-wrap: break-word; /* Lomi dugačke riječi ako treba */
}


/* Progress Circle Styles */
.progress-ring__circle {
    transition: stroke-dashoffset 0.35s;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}
.stat-modal-overlay {
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
}


/* --- FINO PODEŠAVANJE ZA LATEX U GUMBIMA --- */
.tutor-suggestion-btn {
    /* Povećavamo line-height da visoki simboli poput Sume ne lome tekst */
    line-height: 1.6 !important; 
}

.tutor-suggestion-btn mjx-container {
    margin: 0 3px !important;
    display: inline-block !important;
    
    /* KLJUČNO ZA VISINU: 
       Umjesto 'middle', spuštamo formulu malo dolje.
       Ovo rješava problem da u_n izgleda kao da lebdi. */
    vertical-align: -0.4ex !important; 
    
    /* Malo smanjujemo font matematike unutar gumba (na 95%) 
       kako bi se bolje uklopio u tekući tekst */
    font-size: 95% !important;
}

/* Dodatni osigurač za SVG renderiranje (najčešće u MathJax 3) */
.tutor-suggestion-btn mjx-container > svg {
    display: inline-block;
    vertical-align: middle; 
}

/* Uklanjamo padding s glavnog kontejnera jer smo ga dodali unutar samih kutija (chunkova) */
.chunk-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    background-color: transparent !important; /* Osigurava da se vidi siva pozadina aplikacije */
}

/* Osiguravamo da su formule unutar bijelih kutija dobro centrirane */
.chunk-container .bg-white mjx-container[display="true"] {
    margin: 1.5em 0 !important;
}

/* Dodatni spacing za slike unutar okvira */
.chunk-container .script-image {
    margin-top: 1.5rem;
    border: 1px solid #f1f5f9;
}








/* --- OPTIMIZACIJA ZA MOBITEL (OD RUBA DO RUBA) --- */
@media (max-width: 768px) {

    /* 1. ŠIRINA KONTEJNERA: Smanjujemo padding cijelog ekrana skripte */
    #view-script {
        padding-left: 4px !important;  /* Minimalni razmak od lijevog ruba */
        padding-right: 4px !important; /* Minimalni razmak od desnog ruba */
    }

    /* 2. TAILWIND PROSE RESET: Ovo popunjava "prazno mjesto s desne strane" */
    /* Scoped na #view-script tako da ne forsira širinu na chat bubble-e
       (koji isto koriste .prose za markdown rendering ali se trebaju
       skupiti na sadržaj). */
    #view-script .prose {
        max-width: 100% !important; /* Prisiljava tekst da ide do desnog ruba */
        min-width: 100% !important;
    }

    /* 3. GLAVNI NASLOV: Pomičemo "1. Uvod..." skroz ulijevo */
    #view-script .prose h1 {
        margin-left: 0 !important;
        padding-left: 2px !important;
        font-size: 1.3em !important; /* Malo manji font da stane u jedan red ako je moguće */
        text-align: left !important;
    }

    /* 4. HIJERARHIJA (LINIJA I PODNASLOVI): Smanjujemo "stepenice" */
    /* Ovo cilja vertikalnu liniju i uvlačenje podnaslova (1.1, 1.2...) */
    .ml-2.pl-4.border-l-2.border-slate-200 {
        margin-left: 2px !important;    /* Linija se miče skroz ulijevo */
        padding-left: 8px !important;   /* Smanjuje razmak između linije i teksta podnaslova */
    }

    /* 5. GUMBI PODNASLOVA: Da ne bježe udesno */
    [id^="btn-chunk-"] {
        padding-left: 0 !important;
        margin-left: 0 !important;
        font-size: 0.95rem !important; /* Čitljiviji naslov na mobitelu */
    }

    /* 6. OBLAČIĆ (BIJELI OKVIR): Širimo ga da iskoristi sav dobiveni prostor */
    .chunk-container {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important; 
    }

    /* Unutarnji stil oblačića */
    .chunk-container .bg-white.border.rounded-xl {
        width: 100% !important;
        margin: 0 !important;
        padding: 12px 10px !important; /* Malo više mjesta za tekst unutar okvira */
        border-radius: 6px !important; /* Manji radius da izgleda "ozbiljnije" na malom ekranu */
    }
    
    /* 7. FORMULE (MathJax): Prisiljava scroll ako je formulu nemoguće stisnuti */
    mjx-container[display="true"] {
        margin: 0.5em 0 !important;
        padding: 5px 0 !important;
        overflow-x: auto !important;
        max-width: 100% !important;
    }
}

/* =============================================
   CLASSMATES / CLASSROOM
   ============================================= */
html.dark-theme #view-classmates { background-color: #0f172a; }
html.dark-theme #view-classmates .bg-white { background-color: #1e293b; }
html.dark-theme #view-classmates .border-slate-200 { border-color: #334155; }
html.dark-theme #view-classmates .text-slate-800 { color: #e2e8f0; }
html.dark-theme #view-classmates .text-slate-500,
html.dark-theme #view-classmates .text-slate-400 { color: #94a3b8; }
html.dark-theme #view-classmates .bg-slate-50 { background-color: #0f172a; }
html.dark-theme #view-classmates .bg-slate-100 { background-color: #334155; }
html.dark-theme #view-classmates input,
html.dark-theme #view-classmates textarea { background-color: #0f172a; border-color: #334155; color: #e2e8f0; }

/* =============================================
   MENTOR PORTRAIT (Savonius / Savoniusa + moods)
   ============================================= */
.mentor-portrait-wrap {
    position: relative;
    width: 10rem;
    height: 10rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .3s ease;
}
.mentor-portrait-wrap:hover { transform: scale(1.04); }

.mentor-portrait-glow {
    position: absolute;
    inset: -10px;
    border-radius: 9999px;
    filter: blur(22px);
    opacity: .55;
    transition: background-color .6s ease, opacity .6s ease;
    z-index: 0;
}
.mentor-portrait-glow.mood-neutral   { background-color: #c4b5fd; }
.mentor-portrait-glow.mood-happy     { background-color: #fde68a; opacity: .75; }
.mentor-portrait-glow.mood-proud     { background-color: #86efac; opacity: .7; }
.mentor-portrait-glow.mood-concerned { background-color: #fca5a5; opacity: .6; }
.mentor-portrait-glow.mood-thinking  { background-color: #93c5fd; opacity: .55; }

.mentor-portrait-img {
    position: relative;
    z-index: 1;
    width: 10rem;
    height: 10rem;
    border-radius: 9999px;
    object-fit: cover;
    object-position: center 18%;
    box-shadow: 0 12px 28px -8px rgba(30,41,59,.35);
    border: 3px solid #fff;
    animation: mentor-breathe 4.2s ease-in-out infinite;
    transition: opacity .25s ease;
}
html.dark-theme .mentor-portrait-img { border-color: #1e293b; }

@keyframes mentor-breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.025); }
}

.mentor-portrait-wrap.mood-concerned .mentor-portrait-img { filter: saturate(.9); }
.mentor-portrait-wrap.mood-thinking  .mentor-portrait-img { animation-duration: 6s; }

/* Speaking pulse — applied while the greeting / chat reply is streaming */
.mentor-portrait-wrap.is-speaking .mentor-portrait-img {
    animation: mentor-speaking .6s ease-in-out infinite;
}
@keyframes mentor-speaking {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-1.5px); }
}

@media (max-width: 768px) {
    .mentor-portrait-wrap,
    .mentor-portrait-img { width: 8rem; height: 8rem; }
}
html.dark-theme .classroom-subtabs { background-color: #1e293b; border-color: #334155; }

/* =============================================
   CONCEPT CROSS-REFERENCE LINKS
   Inline anchors emitted by services/concept_refs.py for {ref:...}
   tokens. Click-to-navigate handled by openConceptRef() in app.js.
   ============================================= */
a.concept-ref {
    color: #2563eb;            /* blue-600 */
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px dashed #93c5fd;   /* blue-300 dashed underline */
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
    padding: 0 1px;
    border-radius: 2px;
}
a.concept-ref:hover {
    color: #1d4ed8;            /* blue-700 */
    border-bottom-color: #2563eb;
    background-color: #eff6ff; /* blue-50 */
}
a.concept-ref:focus-visible {
    outline: 2px solid #3b82f6;  /* blue-500 */
    outline-offset: 2px;
}
html.dark-theme a.concept-ref {
    color: #60a5fa;            /* blue-400 in dark */
    border-bottom-color: #1e40af;
}
html.dark-theme a.concept-ref:hover {
    color: #93c5fd;
    background-color: #1e3a8a33;
}

/* =============================================
   TEXTBOOK CHUNK STYLE — promoted from GUI_comparisons test bench.
   Light = variant B (pure black 400 / 700)
   Dark  = variant A (slate-400 body / slate-100 800 bold)
   Title = banner-minimal-underline; Layout = carousel; Arrows = corner
   ============================================= */

/* Variant B: chunk body in light mode */
.chunk-container { color: #000000; font-weight: 400; }
.chunk-container strong { color: #000000; font-weight: 700; }
.chunk-container h3,
.chunk-container h4 { color: #000000; font-weight: 700; font-size: 1.1em; line-height: 1.35; }

/* Variant A: chunk body in dark mode */
html.dark-theme .chunk-container { color: #94a3b8; font-weight: 400; }
html.dark-theme .chunk-container strong { color: #f1f5f9; font-weight: 800; }
html.dark-theme .chunk-container h3,
html.dark-theme .chunk-container h4 { color: #f1f5f9; font-weight: 800; }

/* Each part card is the carousel stop and the anchor for corner arrows */
.chunk-card { position: relative; }

/* Banner-minimal: first chunk h4 becomes a centered title with hairline */
.chunk-card.banner-minimal > h4:first-child {
    display: block;
    text-align: center;
    margin: -0.25rem -1.25rem 1.125rem -1.25rem;
    padding: 0 1.25rem 0.625rem 1.25rem;
    border-bottom: 2px solid #e2e8f0;
    font-size: 1.05em;
    border-radius: 0;
    line-height: 1.35;
}
@media (min-width: 768px) {
    .chunk-card.banner-minimal > h4:first-child {
        margin: -0.25rem -1.75rem 1.125rem -1.75rem;
        padding: 0 1.75rem 0.625rem 1.75rem;
    }
}
html.dark-theme .chunk-card.banner-minimal > h4:first-child {
    border-bottom-color: #334155;
}

/* Corner-button carousel arrows (small chevrons in card top corners) */
.title-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    background: transparent;
    border: 1px solid #cbd5e1;
    color: #475569;
    height: 28px;
    border-radius: 6px;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    flex: 0 0 auto;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    padding: 0 0.5rem;
}
.title-arrow .arrow-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.title-arrow .arrow-chevron {
    font-size: 1rem;
    line-height: 1;
}
.title-arrow:hover:not(:disabled) {
    background: #f1f5f9;
    color: #0f172a;
    border-color: #94a3b8;
}
.title-arrow:disabled { opacity: 0.25; cursor: not-allowed; }
.title-arrow.corner {
    /* Anchor the prev/next chevrons to the BOTTOM corners of the chunk
       card. Previously top: 8px — putting them at the bottom keeps the
       title clean and matches reading flow (you navigate after you've
       finished the card content). */
    position: absolute;
    bottom: 8px;
    z-index: 5;
    background: rgba(255, 255, 255, 0.85);
}
.title-arrow.corner.prev { left: 10px; }
.title-arrow.corner.next { right: 10px; }
/* Reserve enough bottom padding inside the chunk card so the absolute-
   positioned chevrons don't overlap the last line of content. Only
   applied when the carousel is active (>=2 cards). */
.carousel-stage > .chunk-card {
    padding-bottom: 3rem;
}
html.dark-theme .title-arrow {
    border-color: #334155;
    color: #cbd5e1;
}
html.dark-theme .title-arrow:hover:not(:disabled) {
    background: #334155;
    color: #f1f5f9;
    border-color: #475569;
}
html.dark-theme .title-arrow.corner { background: rgba(30, 41, 59, 0.85); }

/* =============================================
   MASCOT WELCOME SPLASH
   ============================================= */
.mascot-splash {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #eef2ff 0%, #e0f2fe 50%, #f0f9ff 100%);
    overflow: hidden;
    animation: mascot-splash-in 0.4s ease-out;
    cursor: pointer;
}

.mascot-splash--out {
    /* Duration matches mascot's launch arc (~1.5s wall time after the
       flyaway phase-skip in mascot-splash.js dismissSplash()), so the
       splash fades away in parallel with the mascot rocketing up. */
    animation: mascot-splash-out 1.5s ease-in forwards;
    pointer-events: none;
}

.mascot-splash-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.mascot-splash-bg::before,
.mascot-splash-bg::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.mascot-splash-bg::before {
    width: 600px;
    height: 600px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(59, 130, 246, 0.18), transparent 70%);
    animation: mascot-pulse 4s ease-in-out infinite;
}

.mascot-splash-bg::after {
    width: 400px;
    height: 400px;
    bottom: -80px;
    right: -80px;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.15), transparent 70%);
    animation: mascot-pulse 5s ease-in-out infinite 1s;
}

.mascot-splash-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    z-index: 1;
    cursor: default;
    padding: 1rem;
}

.mascot-stage {
    display: flex;
    flex-direction: column-reverse;       /* bubble (DOM-2nd) on top, mascot below */
    align-items: center;
    justify-content: center;
    gap: 1.1rem;                          /* room for the downward tail (16px) */
    flex-wrap: nowrap;
}

.mascot-image-wrap {
    width: 240px;
    height: 320px;                           /* 3:4 to match stage ratio */
    flex-shrink: 0;
    animation: mascot-bob 3.2s ease-in-out infinite;
    filter: drop-shadow(0 22px 25px rgba(30, 64, 175, 0.25));
}

.mascot-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    background: transparent;
    /* Entry pop only — Rive runtime drives the "alive" feel via bone        */
    /* keyframes, so we just give the canvas a soft scale-in on mount.       */
    animation: mascot-scale-in 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.mascot-speech-bubble {
    background: white;
    padding: 1.1rem 1.5rem;
    border-radius: 1.5rem;
    box-shadow: 0 18px 40px -12px rgba(30, 64, 175, 0.35);
    max-width: min(85vw, 22rem);
    text-align: center;
    position: relative;
    transform-origin: bottom center;     /* bubble pops up out of the mouth */
    /* Pop in shortly after the mascot lands. Delay kept SHORT — a long
       delay with `both` fill leaves the bubble invisible if the browser
       throttles animations (background tab at load), which reads as a
       broken empty screen. initSplash() also force-reveals at 2.5s.    */
    animation: mascot-bubble-pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.9s both;
}

/* Comic-strip tail: triangle pointing DOWN from the bubble toward the mouth */
.mascot-speech-bubble::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -14px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 16px 11px 0 11px;
    border-color: white transparent transparent transparent;
    filter: drop-shadow(0 3px 3px rgba(30, 64, 175, 0.12));
}

.mascot-greeting {
    font-weight: 800;
    font-size: 1.4rem;
    color: #1e293b;
    margin: 0;
    line-height: 1.3;
}

.mascot-catchphrase {
    color: #64748b;
    font-size: 0.95rem;
    margin: 0.4rem 0 0;
    line-height: 1.4;
    min-height: 1.4em;
}

.mascot-skip-btn {
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    color: white;
    padding: 0.75rem 2rem;
    border-radius: 1rem;
    font-weight: 700;
    font-size: 0.95rem;
    box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.55);
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.25s ease;
    /* Pop in just after the speech bubble (which pops at 0.9s).      */
    animation: mascot-bubble-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.4s both;
    border: none;
    cursor: pointer;
}

.mascot-skip-btn:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 14px 32px -5px rgba(59, 130, 246, 0.65);
}

.mascot-skip-btn:active {
    transform: translateY(0) scale(0.97);
}

/* ---- Hero gamification chips (dashboard) ---- */
.hero-gamify {
    display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px;
    justify-content: center;
}
.hg-chip {
    display: flex; align-items: center; gap: 9px;
    background: rgba(255,255,255,.85);
    border: 1px solid rgba(37,99,235,.18);
    box-shadow: 0 4px 14px -6px rgba(30,64,175,.25);
    color: #1e293b; border-radius: 999px; padding: 6px 14px 6px 8px;
    cursor: pointer; transition: transform .15s ease, box-shadow .15s ease;
    animation: hg-in .4s ease-out both;
}
.hg-chip:nth-child(2) { animation-delay: .06s; }
.hg-chip:nth-child(3) { animation-delay: .12s; }
.hg-chip:nth-child(4) { animation-delay: .18s; }
.hg-chip:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -6px rgba(30,64,175,.35); }
.hg-chip:active { transform: scale(.97); }
.hg-done { border-color: rgba(22,163,74,.5); background: rgba(240,253,244,.9); }
.hg-icon-wrap { position: relative; width: 38px; height: 38px; flex-shrink: 0; }
.hg-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.hg-icon { position: absolute; inset: 0; display: grid; place-items: center; font-size: 16px; }
.hg-emoji { font-size: 18px; width: 30px; text-align: center; }
/* Minimal badge chips (⚡ XP · 🔥 streak · 🎯 quests) — icon + value only,
   uniform height so the whole row reads as one clean strip. */
.hg-badge { gap: 5px; padding: 8px 14px 8px 10px; }
.hg-badge .hg-emoji { width: auto; }
.hg-badge .hg-txt b { font-size: 14.5px; }
.hg-streak .hg-txt b { color: #c2410c; }
html.dark-theme .hg-streak .hg-txt b { color: #fb923c; }
/* Level chip = the ringed icon alone (tap → Razine genija; name in tooltip). */
.hg-level { padding: 5px 7px; }

/* Modal close (×) — a real 36×36 hit area instead of a bare glyph.
   Shared by every modal header (leaderboard, settings, stats, auth…). */
.modal-x {
    width: 2.25rem; height: 2.25rem; flex-shrink: 0;
    display: grid; place-items: center;
    font-size: 1.45rem; line-height: 1; border-radius: 0.6rem;
    transition: background-color .15s ease, color .15s ease;
}
.modal-x:hover { background: rgba(255,255,255,.12); }
.hg-txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.hg-txt b { font-size: 13.5px; font-weight: 800; color: #1e40af; }
.hg-txt small { font-size: 10.5px; color: #64748b; }
html.dark-theme .hg-chip { background: rgba(30,41,59,.85); border-color: rgba(148,163,184,.25); color: #e2e8f0; }
html.dark-theme .hg-txt b { color: #93c5fd; }
html.dark-theme .hg-txt small { color: #94a3b8; }
@keyframes hg-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- Level-up celebration (confetti + card) ---- */
.levelup-overlay {
    position: fixed; inset: 0; z-index: 10060;
    display: flex; align-items: center; justify-content: center;
    background: rgba(15,23,42,.55); backdrop-filter: blur(3px);
    animation: hg-in .25s ease-out;
    cursor: pointer;
}
.levelup-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.levelup-confetti i {
    position: absolute; top: -16px; border-radius: 2px; opacity: .95;
    animation-name: confetti-fall; animation-timing-function: linear;
    animation-fill-mode: forwards;
}
@keyframes confetti-fall {
    0%   { transform: translateY(-20px) rotate(0deg); }
    100% { transform: translateY(105vh) rotate(660deg); opacity: .8; }
}
.levelup-card {
    position: relative; background: linear-gradient(160deg,#1e3a8a,#2563eb);
    color: #fff; border-radius: 24px; padding: 34px 46px; text-align: center;
    box-shadow: 0 30px 70px -20px rgba(0,0,0,.6);
    animation: levelup-pop .5s cubic-bezier(.34,1.56,.64,1);
    cursor: default;
}
@keyframes levelup-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
.levelup-icon { font-size: 56px; line-height: 1; margin-bottom: 10px; animation: levelup-bounce 1.4s ease-in-out infinite; }
@keyframes levelup-bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.levelup-title { font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #bfdbfe; }
.levelup-name { font-size: 30px; font-weight: 900; margin: 4px 0 18px; }
.levelup-btn {
    background: #fbbf24; color: #78350f; border: none; cursor: pointer;
    font-weight: 800; font-size: 14px; padding: 10px 30px; border-radius: 999px;
    transition: transform .15s ease; box-shadow: 0 10px 24px -8px rgba(251,191,36,.7);
}
.levelup-btn:hover { transform: translateY(-2px) scale(1.04); }

/* ---- Liga genija modal: entrance choreography ---- */
.lb-podium .lb-pod-col { animation: pod-rise .5s cubic-bezier(.34,1.56,.64,1) both; }
.lb-podium .lb-pod-col:nth-child(1) { animation-delay: .12s; }
.lb-podium .lb-pod-col:nth-child(2) { animation-delay: 0s; }
.lb-podium .lb-pod-col:nth-child(3) { animation-delay: .2s; }
@keyframes pod-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.lb-pod-stand-1 { position: relative; overflow: hidden; }
.lb-pod-stand-1::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 40%;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,.65), transparent);
    animation: gold-shimmer 2.6s ease-in-out infinite; left: -60%;
}
@keyframes gold-shimmer { 0% { left: -60%; } 55% { left: 120%; } 100% { left: 120%; } }
.lb-row { animation: hg-in .35s ease-out both; }
.lb-row-you { animation: you-pop .55s cubic-bezier(.34,1.56,.64,1) both .25s; }
@keyframes you-pop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }

/* ---- Liga genija: "your level" strip + level badge ---- */
#leaderboard-modal-body { padding: 1rem 1.25rem; }
.lb-mylevel {
    display: flex; align-items: center; gap: 12px;
    background: linear-gradient(135deg, #1e3a8a, #2563eb);
    color: #fff; border-radius: 12px; padding: 9px 14px; margin-bottom: 9px;
}
.lb-ml-icon { font-size: 23px; line-height: 1; flex-shrink: 0; }
.lb-ml-info { flex: 1; min-width: 0; }
.lb-ml-top { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.lb-ml-label { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: #bfdbfe; }
.lb-ml-name { font-size: 15px; font-weight: 800; }
.lb-ml-bar { height: 6px; background: rgba(255,255,255,.22); border-radius: 999px; overflow: hidden; }
.lb-ml-fill { height: 100%; background: #fbbf24; border-radius: 999px; transition: width .5s ease; }
.lb-ml-sub { font-size: 11px; color: #dbeafe; margin-top: 3px; }

.lb-badge { font-size: 13px; margin-right: 4px; vertical-align: -1px; }

.lb-countdown {
    text-align: center; font-size: 11.5px; font-weight: 700; color: #b45309;
    background: #fef3c7; border-radius: 8px; padding: 5px; margin-bottom: 9px;
}
html.dark-theme .lb-countdown { background: #422006; color: #fbbf24; }

.lb-flame { font-size: 11px; margin-left: 5px; color: #ea580c; font-weight: 700; }

/* Arcade "+N XP" reward — big, floats up over the question card. */
.xp-toast {
    position: fixed; left: 50%; top: 40%;
    z-index: 10050; pointer-events: none; text-align: center;
    animation: xp-float 2s ease-out forwards;
}
.xp-toast-main {
    display: inline-block; font-size: 46px; font-weight: 900; color: #16a34a;
    text-shadow: 0 0 22px rgba(34,197,94,.5), 0 3px 10px rgba(0,0,0,.18);
    letter-spacing: -0.01em;
}
.xp-toast-lucky .xp-toast-main {
    color: #d97706;
    text-shadow: 0 0 26px rgba(251,191,36,.7), 0 3px 10px rgba(0,0,0,.18);
}
.xp-toast-combo {
    display: block; margin-top: 4px; font-size: 18px; font-weight: 800; color: #ea580c;
    text-shadow: 0 1px 6px rgba(255,255,255,.7);
}
@keyframes xp-float {
    0%   { opacity: 0; transform: translate(-50%, 16px) scale(.5); }
    18%  { opacity: 1; transform: translate(-50%, 0) scale(1.25); }
    32%  { transform: translate(-50%, -4px) scale(1); }
    80%  { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -90px) scale(.95); }
}

/* Quiz results — XP earned card (gold, celebratory). */
.quiz-xp-card {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    border-radius: 1rem; padding: 18px; text-align: center; color: #78350f;
    box-shadow: 0 14px 30px -12px rgba(245,158,11,.6);
    animation: you-pop .55s cubic-bezier(.34,1.56,.64,1) both .15s;
}
.quiz-xp-main { font-size: 34px; font-weight: 900; line-height: 1.1; }
.quiz-xp-sub { font-size: 13px; font-weight: 700; margin-top: 4px; color: #92400e; }

/* Daily quests panel (league modal). */
.lb-quests {
    background: #f8fafc; border: 1px solid #eef2f7;
    border-radius: 12px; padding: 8px 12px; margin-bottom: 9px;
}
.lb-q-title { font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
    text-transform: uppercase; color: #64748b; margin-bottom: 4px; }
.lb-q-row { display: flex; align-items: center; gap: 10px; padding: 3px 0; }
.lb-q-icon { width: 20px; text-align: center; font-size: 13px; }
.lb-q-main { flex: 1; min-width: 0; }
.lb-q-name { display: block; font-size: 12px; color: #1e293b; margin-bottom: 2px; }
.lb-q-bar { display: block; height: 4px; background: #e2e8f0; border-radius: 999px; overflow: hidden; }
.lb-q-fill { display: block; height: 100%; background: #2563eb; border-radius: 999px; transition: width .4s ease; }
.lb-q-meta { font-size: 12px; font-weight: 800; color: #64748b; white-space: nowrap; }
.lb-q-done .lb-q-name { color: #16a34a; }
.lb-q-done .lb-q-fill { background: #16a34a; }
.lb-q-done .lb-q-meta { color: #16a34a; }
html.dark-theme .lb-quests { background: #0f172a; border-color: #334155; }
html.dark-theme .lb-q-name { color: #e2e8f0; }
html.dark-theme .lb-q-bar { background: #334155; }

/* Community weekly goal (cooperation bar). */
.lb-team {
    background: linear-gradient(135deg, #ecfdf5, #f0fdf4);
    border: 1px solid #bbf7d0; border-radius: 12px;
    padding: 8px 12px; margin-bottom: 9px;
}
.lb-team-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
.lb-team-title { font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #15803d; }
.lb-team-count { font-size: 10.5px; font-weight: 700; color: #16a34a; }
.lb-team-bar { height: 7px; background: #dcfce7; border-radius: 999px; overflow: hidden; }
.lb-team-fill { height: 100%; background: linear-gradient(90deg, #22c55e, #16a34a); border-radius: 999px; transition: width .6s ease; }
.lb-team-full { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.lb-team-sub { font-size: 11.5px; color: #166534; margin-top: 4px; }
.lb-team-desc { font-size: 10.5px; color: #4d7c0f; margin-top: 1px; }
html.dark-theme .lb-team { background: #052e16; border-color: #166534; }
html.dark-theme .lb-team-sub { color: #bbf7d0; }
html.dark-theme .lb-team-desc { color: #86efac; }

/* Tap-to-unfold contributor breakdown inside the community-goal card. */
.lb-team-toggle {
    font-size: 10.5px; font-weight: 800; color: #15803d;
    margin-top: 6px; user-select: none;
}
.lb-team-chev { font-size: 9px; }
.lb-team-contribs { list-style: none; margin: 5px 0 0; padding: 5px 0 0; border-top: 1px dashed #bbf7d0; }
.lb-tc-row {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 11.5px; color: #166534; padding: 2px 2px;
}
.lb-tc-row.lb-tc-you { font-weight: 800; background: #dcfce7; border-radius: 6px; padding: 2px 6px; }
.lb-tc-pts { font-weight: 700; color: #16a34a; }
html.dark-theme .lb-team-toggle { color: #86efac; }
html.dark-theme .lb-team-contribs { border-top-color: #166534; }
html.dark-theme .lb-tc-row { color: #bbf7d0; }
html.dark-theme .lb-tc-row.lb-tc-you { background: #14532d; }

/* Daily-streak celebration toast (top center). */
.streak-toast {
    position: fixed; left: 50%; top: 18px; transform: translateX(-50%);
    z-index: 10050; background: linear-gradient(135deg,#ea580c,#f59e0b);
    color: #fff; font-weight: 700; font-size: 14px; padding: 10px 18px;
    /* 1.1rem, NOT 999px: the pill radius turned multi-line streak info
       into a giant orange ball on narrow screens. Width capped so the
       text wraps into a card, not a column. */
    border-radius: 1.1rem;
    width: max-content; max-width: min(92vw, 400px);
    box-shadow: 0 12px 30px -8px rgba(234,88,12,.6);
    animation: streak-pop .3s ease-out, xp-fadeout .5s ease-in 3.5s forwards;
}
.streak-toast small { font-weight: 600; opacity: 0.95; }
@keyframes streak-pop { from { opacity: 0; transform: translate(-50%, -14px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes xp-fadeout { to { opacity: 0; } }

/* ---- Liga genija: view navigation (board / levels / quests) ---- */
.lb-minirow { display: flex; gap: 8px; margin-bottom: 9px; }
.lb-mini {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px;
    padding: 8px 10px; font-size: 12.5px; color: #334155; cursor: pointer;
    transition: all .15s ease;
}
.lb-mini:hover { background: #eff6ff; border-color: #93c5fd; transform: translateY(-1px); }
.lb-mini b { color: #1e40af; }
.lb-mini small { color: #94a3b8; font-size: 11px; }
.lb-mini-arrow { color: #94a3b8; font-weight: 700; margin-left: 2px; }
.lb-mini-done { border-color: #86efac; background: #f0fdf4; }
.lb-back {
    display: inline-flex; align-items: center; gap: 4px;
    background: none; border: none; cursor: pointer;
    font-size: 13px; font-weight: 700; color: #2563eb;
    padding: 0 0 10px; transition: transform .15s ease;
}
.lb-back:hover { transform: translateX(-2px); }
.lb-week-sum {
    background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 10px;
    padding: 9px 12px; margin-bottom: 9px;
    font-size: 12px; font-weight: 700; color: #1e40af; text-align: center;
}
html.dark-theme .lb-mini { background: #1e293b; border-color: #334155; color: #cbd5e1; }
html.dark-theme .lb-week-sum { background: #172554; border-color: #1e40af; color: #bfdbfe; }

/* ---- Daily goals view: day strip + weekly-standing card ---- */
.lb-q-day { color: #16a34a; }
.lb-daystrip {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
    padding: 8px 10px 6px; margin-bottom: 9px;
}
.lb-ds-row { display: flex; gap: 4px; }
.lb-ds-day {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 5px 2px; border-radius: 9px; border: 1.5px solid transparent;
}
.lb-ds-cur { border-color: #93c5fd; background: #eff6ff; }
.lb-ds-name { font-size: 11px; font-weight: 800; color: #1e40af; }
.lb-ds-done { color: #fff; background: #16a34a; width: 17px; height: 17px; border-radius: 50%;
    display: grid; place-items: center; font-size: 10px; font-weight: 900; }
.lb-ds-today { width: 15px; height: 15px; border-radius: 50%; background: #2563eb; }
.lb-ds-miss { width: 15px; height: 15px; border-radius: 50%; background: #e2e8f0; }
.lb-ds-lock { font-size: 12px; opacity: .55; }
.lb-ds-hint { font-size: 10.5px; color: #94a3b8; text-align: center; margin-top: 5px; }

.lb-weekrank {
    background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 12px;
    padding: 9px 12px; margin-bottom: 9px;
}
.lb-wr-title { font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
    text-transform: uppercase; color: #1e40af; margin-bottom: 6px; }
.lb-wr-body { display: flex; align-items: center; gap: 14px; }
.lb-wr-cell { display: flex; flex-direction: column; gap: 3px; }
.lb-wr-cell b { font-size: 13px; color: #1e3a8a; }
.lb-wr-cell small { font-size: 10.5px; color: #60a5fa; }
.lb-wr-bar { display: flex; gap: 3px; }
.lb-wr-seg { width: 16px; height: 6px; border-radius: 999px; background: #dbeafe; }
.lb-wr-seg-on { background: #2563eb; }
.lb-wr-rank { margin-left: auto; align-items: flex-end; }
.lb-wr-rank b { font-size: 16px; color: #b45309; }
html.dark-theme .lb-daystrip { background: #0f172a; border-color: #334155; }
html.dark-theme .lb-weekrank { background: #172554; border-color: #1e40af; }
html.dark-theme .lb-wr-cell b { color: #bfdbfe; }

/* ---- Levels ladder view ---- */
.lv-ladder { display: flex; flex-direction: column; gap: 6px; }
.lv-row {
    display: flex; align-items: center; gap: 12px;
    border-radius: 12px; padding: 10px 14px;
    animation: hg-in .3s ease-out both;
}
.lv-icon { font-size: 20px; width: 28px; text-align: center; }
.lv-main { flex: 1; min-width: 0; }
.lv-name { display: block; font-size: 14px; font-weight: 800; color: #1e293b; }
.lv-min { display: block; font-size: 11px; color: #94a3b8; }
.lv-cur { background: linear-gradient(135deg, #1e3a8a, #2563eb); }
.lv-cur .lv-name { color: #fff; }
.lv-cur .lv-min { color: #bfdbfe; }
.lv-tag { font-size: 10px; font-weight: 800; letter-spacing: .06em; background: #fbbf24; color: #78350f; padding: 3px 9px; border-radius: 999px; }
.lv-done { background: #f0fdf4; }
.lv-done .lv-name { color: #15803d; }
.lv-check { color: #16a34a; font-weight: 800; font-size: 15px; }
.lv-locked { background: #f8fafc; opacity: .75; }
.lv-need { font-size: 11px; font-weight: 700; color: #94a3b8; white-space: nowrap; }
html.dark-theme .lv-done { background: #052e16; }
html.dark-theme .lv-locked { background: #0f172a; }
html.dark-theme .lv-name { color: #e2e8f0; }

/* ---- Leaderboard: weekly/all-time toggle ---- */
.lb-period {
    display: flex; gap: 5px; background: #f1f5f9; border-radius: 999px;
    padding: 3px; margin-bottom: 9px;
}
.lb-period-btn {
    flex: 1; border: none; background: none; cursor: pointer;
    font-size: 12.5px; font-weight: 600; color: #64748b;
    padding: 6px 4px; border-radius: 999px; transition: all .15s ease;
}
.lb-period-on { background: #2563eb; color: #fff; font-weight: 700; }
html.dark-theme .lb-period { background: #1e293b; }
html.dark-theme .lb-period-btn { color: #94a3b8; }
html.dark-theme .lb-period-on { background: #3b82f6; color: #fff; }

/* ---- Leaderboard: podium + ranked list (gamified) ---- */
.lb-podium {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 10px;
    margin: 0.25rem 0 0.6rem;
}
.lb-pod-col { flex: 1; max-width: 122px; text-align: center; }
.lb-pod-crown { font-size: 17px; line-height: 1; margin-bottom: 1px; }
.lb-pod-ava {
    width: 40px; height: 40px; margin: 0 auto 5px;
    display: flex; align-items: center; justify-content: center;
}
.lb-pod-ava-1 { width: 52px; height: 52px; }
.lb-pod-ava > span, .lb-pod-ava > img { width: 100%; height: 100%; }
.lb-pod-ava-1 > span { border: 3px solid #f59e0b; background: #fef3c7 !important; color: #92400e !important; }
.lb-pod-name {
    font-size: 13px; font-weight: 700; color: #1e293b;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lb-pod-pts { font-size: 12px; color: #64748b; margin-bottom: 6px; }
.lb-pod-stand {
    border-radius: 10px 10px 0 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: #f1f5f9;
}
.lb-pod-stand-1 { background: #fef3c7; height: 68px; }
.lb-pod-stand-2 { height: 48px; }
.lb-pod-stand-3 { height: 38px; }
.lb-pod-medal { font-size: 20px; line-height: 1; }
.lb-pod-place { font-size: 14px; font-weight: 800; color: #64748b; }
.lb-pod-stand-1 .lb-pod-place { color: #92400e; }

.lb-list { border-top: 1px solid #eef2f7; }
.lb-row {
    display: flex; align-items: center; gap: 12px;
    padding: 7px 4px; border-bottom: 1px solid #f1f5f9;
}
.lb-row:last-child { border-bottom: none; }
.lb-row-rank { width: 22px; text-align: center; font-weight: 800; color: #94a3b8; }
.lb-row-main { flex: 1; min-width: 0; }
.lb-row-name {
    display: block; font-size: 14px; color: #1e293b;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lb-row-hint { font-size: 11px; color: #2563eb; margin-top: 1px; }
.lb-row-pts { font-size: 14px; font-weight: 800; color: #1e293b; }
.lb-row-sep { text-align: center; color: #cbd5e1; letter-spacing: 3px; padding: 4px 0; }
.lb-row-you {
    background: #eff6ff; border: 2px solid #93c5fd; border-radius: 12px;
    margin: 6px 0; padding: 10px; border-bottom: 2px solid #93c5fd;
}
.lb-row-you .lb-row-rank { color: #2563eb; }
.lb-row-you .lb-row-name { font-weight: 800; color: #1e40af; }
.lb-row-you .lb-row-pts { color: #1e40af; font-size: 15px; }

html.dark-theme .lb-pod-name, html.dark-theme .lb-row-name { color: #e2e8f0; }
html.dark-theme .lb-row-pts { color: #e2e8f0; }
html.dark-theme .lb-pod-stand, html.dark-theme .lb-pod-stand-2, html.dark-theme .lb-pod-stand-3 { background: #1e293b; }
html.dark-theme .lb-list, html.dark-theme .lb-row { border-color: #334155; }
html.dark-theme .lb-row-you { background: #1e3a5f; border-color: #3b82f6; }

/* ---- Brand intro slides (mascot hello → feature pitch → login) ---- */
.intro-slide {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.intro-slide[hidden] { display: none; }

.intro-slide--feature {
    gap: 0.85rem;
    text-align: center;
    max-width: min(85vw, 24rem);
    padding: 2.25rem 0;
    animation: mascot-bubble-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.intro-feature-icon {
    font-size: 4rem;
    line-height: 1;
    filter: drop-shadow(0 12px 18px rgba(30, 64, 175, 0.22));
}

.intro-feature-title {
    font-weight: 800;
    font-size: 1.5rem;
    color: #1e293b;
    margin: 0;
}

.intro-feature-text {
    color: #64748b;
    font-size: 1rem;
    margin: 0;
    line-height: 1.5;
}

.intro-dots {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.intro-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cbd5e1;
    transition: all 0.25s ease;
}

.intro-dot--active {
    background: #3b82f6;
    width: 22px;
    border-radius: 6px;
}

.intro-skip-link {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.25rem 0.75rem;
    transition: color 0.15s ease;
}
.intro-skip-link:hover { color: #64748b; }

html.dark-theme .intro-feature-title { color: #e2e8f0; }
html.dark-theme .intro-feature-text  { color: #94a3b8; }
html.dark-theme .intro-dot           { background: #475569; }
html.dark-theme .intro-dot--active   { background: #3b82f6; }

@keyframes mascot-splash-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes mascot-splash-out {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(1.04); }
}

@keyframes mascot-bob {
    0%, 100% { transform: translateY(0)    rotate(-2deg); }
    50%      { transform: translateY(-14px) rotate(2deg); }
}

/* Hand-wave: short bursts of left-right rotation around the mascot's right */
/* shoulder (transform-origin set on .mascot-image). With the off-center    */
/* pivot, his LEFT hand (viewer-right) sweeps back and forth like a wave.   */
@keyframes mascot-wave {
    0%, 50%, 100% { transform: rotate(0deg); }
    60%           { transform: rotate(-9deg); }
    68%           { transform: rotate(9deg); }
    76%           { transform: rotate(-7deg); }
    84%           { transform: rotate(7deg); }
    92%           { transform: rotate(-3deg); }
}

@keyframes mascot-scale-in {
    0%   { transform: scale(0.3) rotate(-8deg); opacity: 0; }
    60%  { transform: scale(1.08) rotate(3deg);  opacity: 1; }
    100% { transform: scale(1)   rotate(0deg);   opacity: 1; }
}

@keyframes mascot-bubble-pop {
    0%   { opacity: 0; transform: translateY(8px) scale(0.4); }
    65%  { opacity: 1; transform: translateY(0)   scale(1.06); }
    100% { opacity: 1; transform: translateY(0)   scale(1); }
}

@keyframes mascot-pulse {
    0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(1); }
    50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.12); }
}

/* Dark theme overrides */
html.dark-theme .mascot-splash {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
}
html.dark-theme .mascot-speech-bubble { background: #1e293b; }
html.dark-theme .mascot-speech-bubble::before {
    border-color: #1e293b transparent transparent transparent;
}
html.dark-theme .mascot-greeting { color: #e2e8f0; }
html.dark-theme .mascot-catchphrase { color: #94a3b8; }

@media (max-width: 720px) {
    .mascot-image-wrap { width: 200px; height: 267px; }
    .mascot-greeting   { font-size: 1.2rem; }
    .mascot-catchphrase{ font-size: 0.88rem; }
}

@media (prefers-reduced-motion: reduce) {
    .mascot-image-wrap { animation: none; }
    .mascot-splash-bg::before,
    .mascot-splash-bg::after { animation: none; }
}
@keyframes setupModalPop {
    0%   { transform: scale(0.94); opacity: 0; }
    100% { transform: scale(1);    opacity: 1; }
}

/* ── Rich subject dashboard (hero + widgets + chat bar) ── */
#view-dashboard.dash-rich {
    align-items: stretch;
    /* Top-anchored, same as #view-home: vertical centring paints a large
       blank band above the hero on tall screens (iPad Pro portrait). */
    justify-content: flex-start;
    padding: 1.25rem 1.25rem 1.5rem;
    text-align: left;
}
/* Home view: ALWAYS top-anchored. The Tailwind justify-center on
   #view-home vertically centres the column — on tablets that painted a
   huge blank band above the hero (short content) or pushed the top out
   of reach (tall content). Content starts at the top, like every feed. */
#view-home.dash-rich {
    align-items: stretch;
    justify-content: flex-start;
    padding: 1.25rem 1.25rem 1.5rem;
    text-align: left;
}
.dash-rich-wrap {
    width: 100%; max-width: 1180px; margin: 0 auto;
    display: flex; flex-direction: column; gap: 0.7rem;
}
/* Children keep their natural height. Without this, any time the page is
   taller than the viewport the flex column SHRINKS every card (the hero
   collapsed to 30px and its content spilled over the sections below). */
.dash-rich-wrap > * { flex-shrink: 0; }

.dash-hero {
    position: relative;
    border-radius: 1.5rem;
    padding: 1.25rem 1.5rem;
    overflow: hidden;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 50%, #ede9fe 100%);
    border: 1px solid rgba(255,255,255,0.6);
    box-shadow: 0 14px 30px -16px rgba(30, 64, 175, 0.25);
    display: grid;
    grid-template-columns: minmax(180px, 220px) 1fr auto;
    align-items: center;
    gap: 1.25rem;
    /* Hero height is bounded — long course summaries get line-clamped on
       the tagline below so the dashboard's "above-the-fold" stays the
       three Brzi-pristup tiles, not a wall of text. */
    min-height: 220px;
    max-height: 260px;
}
.dash-hero::before, .dash-hero::after {
    content: ''; position: absolute; pointer-events: none; opacity: 0.55;
    color: #60a5fa; font-weight: 700; font-family: ui-serif, Georgia, serif;
}
.dash-hero::before { top: 0.75rem; left: 1.25rem; font-size: 2.5rem; content: 'A'; }
.dash-hero::after  { top: 1rem; right: 7rem; font-size: 2.5rem; content: 'λ'; color: #a78bfa; }
.dash-hero-mascot {
    position: relative; width: 100%; aspect-ratio: 3 / 4;
    max-height: 230px; min-height: 180px; overflow: visible; pointer-events: none;
}
.dash-hero-mascot canvas, .dash-hero-mascot > div { width: 100%; height: 100%; }
.dash-hero-bubble {
    position: absolute; top: 0.5rem; right: -0.5rem; transform: translateX(40%);
    background: white; padding: 0.65rem 1rem; border-radius: 1rem; max-width: 220px;
    box-shadow: 0 10px 24px -8px rgba(30, 64, 175, 0.25); font-size: 0.82rem;
    line-height: 1.35; color: #1e293b; opacity: 0; animation: dashBubbleIn 0.6s 0.4s ease forwards;
    z-index: 5;
}
.dash-hero-bubble::after {
    content: ''; position: absolute; left: -8px; bottom: 14px;
    width: 14px; height: 14px; background: white; transform: rotate(45deg);
    box-shadow: -2px 2px 4px -2px rgba(30,64,175,0.1);
}
@keyframes dashBubbleIn { 0% { opacity: 0; transform: translateX(40%) translateY(8px) scale(0.92); } 100% { opacity: 1; transform: translateX(40%) translateY(0) scale(1); } }

.dash-hero-content { min-width: 0; }
.dash-hero-pill {
    display: inline-flex; align-items: center; gap: 0.4rem;
    background: white; padding: 0.4rem 0.9rem; border-radius: 999px;
    font-size: 0.85rem; font-weight: 600; color: #1e293b;
    box-shadow: 0 4px 10px -2px rgba(30,64,175,0.18);
}
.dash-hero-content h1 { font-size: 1.4rem; font-weight: 800; color: #0f172a; margin-top: 0; line-height: 1.25; }
.dash-hero-content h1 .accent { display: block; color: #2563eb; font-size: 1.5rem; }
/* Cap the visible summary at ~4 lines so the hero never exceeds its
   max-height regardless of the course's `summary_short` length.
   Line-clamp gracefully ellipsizes anything longer; the full text is
   still in the DOM (and read by screen readers / inspectable). */
.dash-hero-content p.tagline {
    color: #475569;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.45;
    max-width: 640px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.dash-hero-features { display: flex; gap: 0.6rem; margin-top: 1rem; flex-wrap: wrap; }
.dash-feature {
    display: flex; align-items: center; gap: 0.55rem;
    background: rgba(255,255,255,0.85); padding: 0.55rem 0.85rem;
    border-radius: 0.85rem; border: 1px solid rgba(255,255,255,0.9);
    box-shadow: 0 4px 10px -2px rgba(30,64,175,0.1);
}
.dash-feature-icon { width: 1.65rem; height: 1.65rem; border-radius: 0.5rem; display: grid; place-items: center; flex-shrink: 0; font-size: 0.9rem; }
.dash-feature-text .ft { font-size: 0.78rem; font-weight: 700; color: #0f172a; }
.dash-feature-text .fd { font-size: 0.7rem; color: #64748b; }

.dash-hero-deco {
    position: relative; width: 110px; height: 110px;
    display: grid; place-items: center;
}
.dash-hero-deco .books { font-size: 4rem; filter: drop-shadow(0 6px 12px rgba(30, 64, 175, 0.25)); }

/* Home hero: side columns are mirrored (mascot left, deco right, SAME width)
   so the greeting + chips block sits on the true center of the card. */
.dash-hero--home { grid-template-columns: minmax(180px, 220px) 1fr minmax(180px, 220px); }
.dash-hero--home .dash-hero-content { text-align: center; }
.dash-hero--home .dash-hero-content h1 { margin-bottom: 0; }
.dash-hero--home .dash-hero-content p.tagline { margin-left: auto; margin-right: auto; }
.dash-hero--home .dash-hero-deco { justify-self: center; }

@media (max-width: 880px) {
    .dash-hero, .dash-hero--home { grid-template-columns: 1fr; min-height: auto; padding: 1.25rem; }
    .dash-hero-mascot { max-width: 220px; margin: 0 auto; }
    .dash-hero-deco { display: none; }
    .dash-hero-bubble { position: static; transform: none; max-width: none; margin-bottom: 0.5rem; }
    .dash-hero-bubble::after { display: none; }
}

.dash-section-title {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.95rem; font-weight: 700; color: #0f172a; margin-bottom: 0.4rem;
}
.dash-section-bolt {
    width: 1.65rem; height: 1.65rem; border-radius: 0.5rem;
    display: inline-grid; place-items: center;
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1d4ed8; font-size: 0.85rem;
    box-shadow: 0 2px 4px -1px rgba(30, 64, 175, 0.2);
}
.dash-quick {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.85rem;
}
.dash-quick-card {
    display: flex; flex-direction: row; align-items: center;
    text-align: left;
    padding: 1rem 1.1rem;
    background: var(--card-bg, white);
    border: 1px solid var(--card-border, #e2e8f0);
    border-radius: 1.1rem;
    cursor: pointer; gap: 0.85rem;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    position: relative; overflow: hidden;
}
.dash-quick-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 32px -12px rgba(15, 23, 42, 0.18);
    border-color: var(--card-title, #94a3b8);
}
.dash-quick-icon {
    width: 3.4rem; height: 3.4rem;
    display: grid; place-items: center; flex-shrink: 0;
    background: transparent; padding: 0;
    transition: transform .18s ease;
}
.dash-quick-icon img {
    width: 100%; height: 100%; object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(15, 23, 42, 0.16));
    user-select: none; pointer-events: none;
}
.dash-quick-card:hover .dash-quick-icon { transform: scale(1.08) translateY(-1px); }
.dash-quick-text { flex: 1; min-width: 0; }
.dash-quick-text .qt {
    font-weight: 700; font-size: 0.95rem;
    color: var(--card-title, #0f172a);
    margin: 0 0 0.18rem;
}
.dash-quick-text .qd {
    font-size: 0.74rem; color: #64748b; line-height: 1.35;
}
.dash-quick-arrow {
    width: 1.85rem; height: 1.85rem; border-radius: 999px;
    display: grid; place-items: center;
    background: var(--card-arrow-bg, #f1f5f9);
    color: var(--card-arrow-fg, #64748b);
    font-size: 0.9rem; font-weight: 700; line-height: 1;
    flex-shrink: 0;
    transition: transform .15s ease;
}
.dash-quick-card:hover .dash-quick-arrow { transform: translateX(3px); }

/* ── Per-card themes ── */
.dash-quick-card.theme-skripta {
    --card-bg: linear-gradient(180deg, #ecfdf5 0%, #ffffff 80%);
    --card-border: #a7f3d0;
    --card-title: #047857;
    --card-arrow-bg: #d1fae5; --card-arrow-fg: #047857;
}
.dash-quick-card.theme-kviz {
    --card-bg: linear-gradient(180deg, #eff6ff 0%, #ffffff 80%);
    --card-border: #bfdbfe;
    --card-title: #1d4ed8;
    --card-arrow-bg: #dbeafe; --card-arrow-fg: #1d4ed8;
}
.dash-quick-card.theme-zadaci {
    --card-bg: linear-gradient(180deg, #fffbeb 0%, #ffffff 80%);
    --card-border: #fde68a;
    --card-title: #b45309;
    --card-arrow-bg: #fef3c7; --card-arrow-fg: #b45309;
}
.dash-quick-card.theme-ispit {
    --card-bg: linear-gradient(180deg, #fdf2f8 0%, #ffffff 80%);
    --card-border: #fbcfe8;
    --card-title: #be185d;
    --card-arrow-bg: #fce7f3; --card-arrow-fg: #be185d;
}
.dash-quick-card.theme-audioknjiga {
    --card-bg: linear-gradient(180deg, #f0f9ff 0%, #ffffff 80%);
    --card-border: #bae6fd;
    --card-title: #0369a1;
    --card-arrow-bg: #e0f2fe; --card-arrow-fg: #0369a1;
}
.dash-quick-card.theme-kolege {
    --card-bg: linear-gradient(180deg, #fff1f2 0%, #ffffff 80%);
    --card-border: #fecdd3;
    --card-title: #be123c;
    --card-arrow-bg: #ffe4e6; --card-arrow-fg: #be123c;
}

.dash-widgets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.85rem; align-items: stretch; }
/* minmax(0,…): a plain 1fr track's min size is the content — one long
   nowrap course title inside a widget blows the card past the viewport
   on phones. min-width:0 on the card is the same guard at item level. */
@media (max-width: 880px) { .dash-widgets { grid-template-columns: minmax(0, 1fr); } }

/* Small tablets (iPad Mini/Air, 768–880) navigate like phones: the
   persistent sidebar eats a third of the screen, so it goes off-canvas
   with the hamburger + dark overlay instead. Tailwind's md: variants
   turn the desktop layout on at exactly 768 — these overrides push that
   boundary up to 880. */
@media (min-width: 768px) and (max-width: 880px) {
    #sidebar { position: fixed !important; width: 18rem !important; }
    #sidebar.\-translate-x-full { transform: translateX(-100%) !important; }
    header .md\:hidden { display: block !important; }          /* ☰ */
    #sidebar .md\:hidden { display: revert !important; }       /* ✕ u sidebaru */
    #mobile-overlay:not(.hidden) { display: block !important; }
}

/* Quick-access on small tablets (iPad Mini/Air, 768–880): the cards are
   too narrow for title + description — same icon-only treatment as
   phones. (≤767 is handled by mobile.css; this extends it upward.) */
@media (max-width: 880px) {
    .dash-quick { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 0.6rem !important; }
    .dash-quick-card {
        padding: 0.25rem !important;
        gap: 0 !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        aspect-ratio: 1 / 1 !important;
        max-height: 6rem !important;
        max-width: 6rem !important;
        width: 100% !important;
        justify-self: center !important;
        border-radius: 0.8rem !important;
    }
    .dash-quick-icon {
        width: 4.8rem !important; height: 4.8rem !important;
        margin: 0 auto !important;
        display: flex !important; align-items: center !important; justify-content: center !important;
    }
    .dash-quick-icon > img { width: 100% !important; height: 100% !important; object-fit: contain !important; }
    .dash-quick-text, .dash-quick-arrow { display: none !important; }
}

/* EVERY dashboard hero (home AND subject) on tablets, phones and narrow
   windows (≤1160): the desktop 3-column hero has no room next to a
   ~280px sidebar — the title squeezed to a word per line and max-height
   CLIPPED the content below the mascot. Compact variant instead: no
   mascot, no deco, no corner glyphs, content centred, natural height.
   The full mascot hero needs ≥1160 to breathe (sidebar 256 + two 220px
   side columns + ~380px of content). */
@media (max-width: 1160px) {
    /* Tablets: widgets stack one per row (3 squeezed columns read badly
       next to the sidebar), and quick-access tiles settle into a calm
       2-rows-of-3 grid instead of 4+2. */
    .dash-widgets { grid-template-columns: minmax(0, 1fr); }
    .dash-quick { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    .dash-hero {
        display: block;
        padding: 1rem 0.95rem 0.95rem;
        min-height: 0;
        max-height: none;
    }
    .dash-hero > .relative,
    .dash-hero .dash-hero-mascot,
    .dash-hero .dash-hero-deco { display: none; }
    .dash-hero::before, .dash-hero::after { display: none; }
    .dash-hero .dash-hero-content { text-align: center; }
    .dash-hero .dash-hero-content h1 { font-size: 1.1rem; margin-bottom: 0; }
    .dash-hero .dash-hero-content h1 .accent { display: inline; font-size: 1.1rem; }
    .dash-hero .dash-hero-content p.tagline {
        font-size: 0.78rem; margin-top: 0.3rem;
        margin-left: auto; margin-right: auto;
    }
    .dash-hero .hero-gamify { margin-top: 10px; }
}
.dash-widget {
    background: white; border: 1px solid #e2e8f0; border-radius: 1rem;
    padding: 1.1rem 1.15rem;
    display: flex; flex-direction: column;
    min-width: 0;
}
.dash-widget h3 { font-size: 0.95rem; font-weight: 700; color: #0f172a; margin-bottom: 0.7rem; }
/* Header row (title + "Pogledaj sve →") — guaranteed breathing room so the
   link never glues to a wrapping title on narrow 3-col layouts (iPad). */
.dash-widget > .flex.items-center.justify-between { gap: 0.6rem; }
.dash-widget > .flex.items-center.justify-between > button { flex-shrink: 0; white-space: nowrap; }

/* Keyboard/a11y: a clear focus ring on the custom interactive surfaces
   (chips, course cards, modal ×) — hover-only affordances exclude
   keyboard users and screen-reader navigation. */
.hg-chip:focus-visible, .home-course-card:focus-visible, .modal-x:focus-visible,
.dash-quick-card:focus-visible, .lb-back:focus-visible {
    outline: 2px solid #2563eb; outline-offset: 2px;
}

/* Near-empty league list: nudge to invite classmates instead of a void. */
.dash-lb-invite {
    font-size: 0.72rem; color: #64748b; font-style: italic;
    padding: 0.45rem 0.5rem 0.2rem; text-align: center;
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
}
.dash-lb-empty {
    display: grid; justify-items: center; gap: 0.4rem;
    padding: 0.8rem 0.5rem; text-align: center;
    font-size: 0.78rem; color: #64748b;
}

/* =====================================================================
   MASKOTA U TRENUCIMA — the real Inženjerko's head (composited from the
   controller's PNG layers) shows up in celebrations, tips and empty
   states. Zero layout cost: overlays, toasts, existing empty space.
   ===================================================================== */
/* Tutor/mentor intro avatar: the head sticker centred on a soft radial
   ground inside the existing circle (full-body mount cropped the helmet). */
.intro-head-circle {
    display: grid; place-items: center;
    background: radial-gradient(circle at 38% 30%, #f0f7ff, #dbeafe 78%);
}
.intro-head-circle img { width: 62%; height: auto; filter: drop-shadow(0 6px 12px rgba(15, 23, 42, 0.25)); }
html.dark-theme .intro-head-circle { background: radial-gradient(circle at 38% 30%, #1e3a8a, #172554 78%); }

/* Die-cut sticker of the real head — the white helmet outline IS the
   frame, so no circle, no border, just a soft shadow for separation. */
.ing-head {
    position: relative; display: inline-flex;
    flex-shrink: 0; vertical-align: middle;
}
.ing-head img {
    pointer-events: none; user-select: none; max-width: none; height: auto;
    filter: drop-shadow(0 1px 2px rgba(15, 23, 42, 0.28));
}

/* 1 · greeting avatar — only on the compact (mascot-less) hero.
   The head PEEKS over the card's top edge like a die-cut sticker:
   depth + character, and half the head costs no card height. */
.hero-head-slot { display: none; }
@media (max-width: 1160px) {
    .dash-hero--home, #view-dashboard .dash-hero {
        overflow: visible;            /* let the head stick out */
        margin-top: 26px;             /* room for the peeking head */
    }
    .hero-head-slot {
        display: flex; justify-content: center;
        margin: -34px 0 2px;
    }
    .hero-head-slot img {
        width: 56px !important; height: auto !important;
        filter: drop-shadow(0 3px 6px rgba(15, 23, 42, 0.3));
    }

    /* Tagline: first visit only (hero-first) — after that it's noise. */
    .dash-hero--home .dash-hero-content p.tagline { display: none; }
    .dash-hero--home.hero-first .dash-hero-content p.tagline { display: -webkit-box; }

    /* 4 floating pills → ONE segmented status strip. Reads as a single
       instrument; numbers mono, gold only on rewards (🔥 / ⚡). Each
       segment keeps its own tap action. */
    .dash-hero--home .hero-gamify {
        display: inline-flex; flex-wrap: nowrap; gap: 0;
        background: rgba(255, 255, 255, 0.92);
        border: 1px solid rgba(37, 99, 235, 0.16);
        border-radius: 14px;
        box-shadow: 0 4px 14px -8px rgba(30, 64, 175, 0.35);
        margin: 10px auto 0;
        overflow: hidden;
    }
    .dash-hero--home .hg-chip {
        background: none; border: 0; box-shadow: none; border-radius: 0;
        display: grid; justify-items: center; gap: 1px;
        padding: 7px 14px; animation: none;
    }
    .dash-hero--home .hg-chip:hover { transform: none; box-shadow: none; background: rgba(37, 99, 235, 0.06); }
    .dash-hero--home .hg-chip + .hg-chip { border-left: 1px solid rgba(37, 99, 235, 0.12); }
    .dash-hero--home .hg-chip .hg-emoji { width: auto; font-size: 15px; line-height: 1; }
    .dash-hero--home .hg-chip .hg-txt b {
        font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
        font-variant-numeric: tabular-nums; font-size: 12.5px;
    }
    .dash-hero--home .hg-level { padding: 5px 12px; }
    .dash-hero--home .hg-icon-wrap { width: 30px !important; height: 30px !important; }
    .dash-hero--home .hg-chip:last-child .hg-txt b { color: #b45309; }   /* ⚡ XP = gold */
}
html.dark-theme .dash-hero--home .hero-gamify { background: rgba(30, 41, 59, 0.92); border-color: rgba(148, 163, 184, 0.2); }
@media (max-width: 1160px) {
    html.dark-theme .dash-hero--home .hg-chip + .hg-chip { border-left-color: rgba(148, 163, 184, 0.18); }
    html.dark-theme .dash-hero--home .hg-chip:last-child .hg-txt b { color: #fbbf24; }
}

/* 2 · suggest title: head sits inline before the words */
.dash-suggest-title .ing-head { margin-right: 0.15rem; vertical-align: -8px; }

/* 3 · level-up: the animated controller stage above the card */
.levelup-mascot {
    width: 130px; height: 165px; margin: -10px auto 2px;
    pointer-events: none;
}
.levelup-mascot canvas, .levelup-mascot > div { width: 100%; height: 100%; }

/* 4 · quiz results: mascot + his one-liner on the gold card */
.quiz-xp-mascot { display: flex; justify-content: center; margin-bottom: 0.25rem; }
.quiz-mascot-msg {
    margin: 0.6rem auto 0; max-width: 90%;
    background: rgba(255, 255, 255, 0.75);
    border-radius: 0.6rem; padding: 0.4rem 0.7rem;
    font-size: 0.74rem; font-style: italic; color: #78350f;
}
html.dark-theme .quiz-mascot-msg { background: rgba(0,0,0,.25); color: #fde68a; }

/* 5 · pill toasts: his head delivers the message */
.streak-toast { display: flex; align-items: center; gap: 0.5rem; }
.toast-head {
    background: #fff; border-radius: 50%; flex-shrink: 0;
    width: 30px; height: 30px; display: grid; place-items: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}

/* "Inženjerko predlaže" — adaptive next-step card (subject dashboard).
   Gold = reward/gamification accent; the card turns the student's own
   mistakes into ONE concrete next action. */
.dash-suggest {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 1px solid #fcd34d;
    border-left: 4px solid #f59e0b;
    border-radius: 1rem;
    padding: 0.9rem 1.1rem;
}
.dash-suggest-title {
    font-size: 0.78rem; font-weight: 800; letter-spacing: .05em;
    text-transform: uppercase; color: #b45309; margin-bottom: 0.3rem;
}
.dash-suggest-text { font-size: 0.85rem; color: #78350f; line-height: 1.5; }
.dash-suggest-text b { color: #92400e; }
.dash-suggest-actions { display: flex; gap: 0.6rem; margin-top: 0.7rem; flex-wrap: wrap; }
.dash-suggest-btn {
    background: #f59e0b; color: #fff; font-weight: 700; font-size: 0.78rem;
    padding: 0.5rem 0.95rem; border-radius: 0.6rem;
    box-shadow: 0 4px 10px -4px rgba(245, 158, 11, .6);
    transition: filter .15s ease, transform .12s ease;
}
.dash-suggest-btn:hover { filter: brightness(1.07); transform: translateY(-1px); }
.dash-suggest-btn:active { transform: scale(.97); }
.dash-suggest-ghost {
    background: transparent; color: #b45309;
    border: 1.5px solid #f59e0b; box-shadow: none;
}
html.dark-theme .dash-suggest { background: linear-gradient(135deg, #292008 0%, #33290f 100%); border-color: #92400e; border-left-color: #f59e0b; }
html.dark-theme .dash-suggest-title { color: #fbbf24; }
html.dark-theme .dash-suggest-text { color: #fde68a; }
html.dark-theme .dash-suggest-text b { color: #fcd34d; }
html.dark-theme .dash-suggest-ghost { color: #fbbf24; }
/* Head row: title + chevron. The chevron only exists visually on compact
   screens where the card is collapsible. */
.dash-suggest-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.dash-suggest-head .dash-suggest-title { margin-bottom: 0; }
.dash-suggest-chev { display: none; color: #b45309; font-size: 12px; }
html.dark-theme .dash-suggest-chev { color: #fbbf24; }
.dash-suggest-body { margin-top: 0.35rem; }
@media (max-width: 1160px) {
    .dash-suggest { cursor: pointer; padding: 0.7rem 1rem; }
    .dash-suggest-chev { display: inline; }
    .dash-suggest:not(.open) .dash-suggest-body { display: none; }
    .dash-suggest.open .dash-suggest-body { margin-top: 0.5rem; }
}

/* =====================================================================
   DARK THEME — home + subject dashboards. Without these the new home
   view kept near-black titles and white cards on the dark background.
   ===================================================================== */
html.dark-theme .dash-hero,
html.dark-theme .dash-hero--home {
    background: linear-gradient(135deg, #1e293b 0%, #1e3a8a 55%, #312e81 100%);
    border-color: rgba(148, 163, 184, 0.18);
}
html.dark-theme .dash-hero-content h1 { color: #f1f5f9; }
html.dark-theme .dash-hero-content h1 .accent { color: #93c5fd; }
html.dark-theme .dash-hero-content p.tagline { color: #cbd5e1; }
html.dark-theme .dash-section-title { color: #e2e8f0; }
html.dark-theme .dash-widget { background: #1e293b; border-color: #334155; }
html.dark-theme .dash-widget h3 { color: #e2e8f0; }
html.dark-theme .home-course-card { background: #1e293b; border-color: #334155; }
html.dark-theme .home-course-card:hover { border-color: #3b82f6; }
html.dark-theme .home-course-title { color: #e2e8f0; }
html.dark-theme .home-course-sub { color: #94a3b8; }
html.dark-theme .home-course-icon { background: #172554; }
html.dark-theme .dash-lb-row { background: #0f172a; border-color: #334155; }
html.dark-theme .dash-lb-name { color: #cbd5e1; }
html.dark-theme .dash-lb-rank { color: #94a3b8; }
html.dark-theme .dash-lb-you { background: #451a03; border-color: #b45309; }
html.dark-theme .dash-lb-you .dash-lb-name { color: #fcd34d; }
html.dark-theme .dash-lb-you .dash-lb-rank,
html.dark-theme .dash-lb-you .dash-lb-score { color: #fbbf24; }
html.dark-theme .dash-lb-invite { color: #94a3b8; }
html.dark-theme .dash-chatbar { background: #1e293b; border-color: #334155; }
html.dark-theme .dash-chatbar input { color: #e2e8f0; background: transparent; }
html.dark-theme .dash-chatbar-desc,
html.dark-theme .dash-chatbar-footer { color: #94a3b8; }
html.dark-theme .dash-progress-ring { background: conic-gradient(#3b82f6 var(--p, 0%), #334155 0); }
html.dark-theme .dash-progress-ring::before { background: #1e293b; }
html.dark-theme .dash-progress-ring > span { color: #93c5fd; }
/* Tailwind slate text utilities inside the dashboards — flip for dark. */
html.dark-theme #view-home .text-slate-800, html.dark-theme #view-dashboard .text-slate-800 { color: #e2e8f0; }
html.dark-theme #view-home .text-slate-700, html.dark-theme #view-dashboard .text-slate-700 { color: #cbd5e1; }
html.dark-theme #view-home .text-slate-500, html.dark-theme #view-dashboard .text-slate-500 { color: #94a3b8; }
html.dark-theme #view-home .bg-slate-100, html.dark-theme #view-dashboard .bg-slate-100 { background-color: #0f172a; }
.dash-progress-ring {
    width: 88px; height: 88px; flex-shrink: 0; position: relative;
    background: conic-gradient(#3b82f6 var(--p, 0%), #e2e8f0 0); border-radius: 50%;
    display: grid; place-items: center;
}
.dash-progress-ring::before { content: ''; position: absolute; inset: 8px; background: white; border-radius: 50%; }
.dash-progress-ring > span { position: relative; font-weight: 800; color: #2563eb; font-size: 1.05rem; }
.dash-progress-ring > small { position: relative; display: block; font-size: 0.6rem; color: #94a3b8; margin-top: -0.1rem; font-weight: 600; }

/* Leaderboard widget — matches base .dash-widget look (white + slate
   border) so it reads as a peer of "Nastavi gdje si stao" and
   "Tvoj napredak". The grid's align-items: stretch keeps all three
   widgets the same height; .dash-lb-list flexes to fill remaining
   vertical space. Only the "Ti" row carries an amber accent so the
   student can spot their position at a glance. */
.dash-lb-list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 0.22rem;
    flex: 1 1 auto;
    /* Rows stack from the top — with few players the list must not be
       stretched apart to fill the widget's height. */
    justify-content: flex-start;
}
.dash-lb-row {
    display: grid;
    grid-template-columns: 1.1rem 1rem 1fr auto;
    align-items: center; gap: 0.4rem;
    padding: 0.16rem 0.5rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.45rem;
    font-size: 0.74rem;
    line-height: 1.15;
}
.dash-lb-rank { font-weight: 700; color: #475569; text-align: right; font-size: 0.7rem; }
.dash-lb-medal { text-align: center; font-size: 0.85rem; line-height: 1; }
.dash-lb-name { color: #1e293b; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-lb-score { color: #2563eb; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 0.74rem; }
.dash-lb-you {
    background: #fef3c7;
    border-color: #f59e0b;
}
.dash-lb-you .dash-lb-rank { color: #92400e; }
.dash-lb-you .dash-lb-name { color: #78350f; font-weight: 800; }
.dash-lb-you .dash-lb-score { color: #b45309; }

/* =====================================================================
   HOME DASHBOARD (global landing view)
   ===================================================================== */

/* Enrolled-course quick-access grid — 6 cards in a 3-column row at
   desktop, 2-col at mid-width, 1-col on mobile. Mirrors .dash-quick. */
.home-courses-grid {
    display: grid; gap: 0.85rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1024px) { .home-courses-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* minmax(0,…) is load-bearing: with plain 1fr the track's min size is the
   content — a nowrap course title forces the card past the viewport and
   the whole page scrolls sideways on phones. */
@media (max-width: 640px)  { .home-courses-grid { grid-template-columns: minmax(0, 1fr); } }

.home-course-card {
    min-width: 0;
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.7rem 0.9rem;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    text-align: left;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.home-course-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -8px rgba(15, 23, 42, 0.15);
    border-color: #bfdbfe;
}
.hcc-icon {
    flex-shrink: 0; width: 2.4rem; height: 2.4rem;
    display: grid; place-items: center;
    background: #eff6ff;
    border-radius: 0.65rem;
}
.hcc-main { flex: 1; min-width: 0; display: grid; gap: 0.3rem; }
.hcc-title {
    font-size: 0.85rem; font-weight: 700; color: #0f172a;
    line-height: 1.25;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hcc-prog { display: flex; align-items: center; gap: 0.5rem; }
.hcc-bar { flex: 1; height: 5px; border-radius: 99px; background: #e2e8f0; overflow: hidden; }
.hcc-bar i { display: block; height: 100%; background: #2563eb; border-radius: 99px; }
.hcc-pc {
    font-family: ui-monospace, Consolas, monospace; font-variant-numeric: tabular-nums;
    font-size: 0.68rem; font-weight: 700; color: #64748b; flex-shrink: 0;
}
.hcc-add {
    border-style: dashed; justify-content: center;
    color: #94a3b8; font-weight: 700; font-size: 0.82rem;
}
.hcc-add:hover { color: #2563eb; }
html.dark-theme .hcc-icon { background: #172554; }
html.dark-theme .hcc-title { color: #e2e8f0; }
html.dark-theme .hcc-bar { background: #334155; }
html.dark-theme .hcc-pc { color: #94a3b8; }

/* Continue widget extras */
/* .hcb-ch: chapter badge shown INSTEAD of the arrow inside the round
   phone button ("P3" = where you stopped); desktop keeps text + arrow. */
.hcb-ch { display: none; }
.hcw-where { font-size: 0.72rem; color: #64748b; margin-top: 0.1rem; }
.hcw-bar { height: 5px; border-radius: 99px; background: rgba(37, 99, 235, 0.15); overflow: hidden; margin: 0.55rem 0 0.15rem; }
.hcw-bar i { display: block; height: 100%; background: #2563eb; border-radius: 99px; }
.hcw-meta { display: flex; justify-content: space-between; font-size: 0.66rem; color: #94a3b8; }
.hcw-meta b { font-family: ui-monospace, Consolas, monospace; color: #475569; }
.dash-widget-continue {
    background: linear-gradient(135deg, #eff6ff 0%, #e0eaff 100%);
    border: 1px solid #bfdbfe; border-left: 4px solid #2563eb;
}
html.dark-theme .dash-widget-continue { background: linear-gradient(135deg, #182747, #1a2c58); border-color: #294a86; border-left-color: #3b82f6; }
html.dark-theme .hcw-meta b { color: #cbd5e1; }

/* Progress widget: per-course rows, 2 visible + fold */
.hpr {
    display: grid; grid-template-columns: 24px minmax(0, 1fr) 64px 36px;
    gap: 0.5rem; align-items: center;
    padding: 0.32rem 0; font-size: 0.78rem; cursor: pointer;
}
.hpr + .hpr, .hpr-rest .hpr:first-child { border-top: 1px dashed #e2e8f0; }
.hpr-i { width: 22px; height: 22px; border-radius: 6px; background: #eff6ff; display: grid; place-items: center; }
.hpr-n { font-weight: 600; color: #1e293b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hpr:hover .hpr-n { color: #2563eb; }
.hpr-b { height: 4px; border-radius: 99px; background: #e2e8f0; overflow: hidden; }
.hpr-b i { display: block; height: 100%; background: #2563eb; border-radius: 99px; }
.hpr-p {
    font-family: ui-monospace, Consolas, monospace; font-variant-numeric: tabular-nums;
    font-size: 0.7rem; font-weight: 700; color: #475569; text-align: right;
}
.hpr-more {
    display: block; width: 100%;
    border: 0; border-top: 1px dashed #e2e8f0; background: none;
    margin-top: 0.15rem; padding: 0.45rem 0 0.1rem;
    font-size: 0.72rem; font-weight: 700; color: #2563eb; cursor: pointer;
}
.hpr-week {
    font-size: 0.7rem; color: #64748b;
    margin-top: 0.45rem; padding-top: 0.45rem; border-top: 1px solid #e2e8f0;
}

/* Ukupan napredak = overall ring + per-course mini rows side by side.
   The ring is the aggregate across subjects; the rows are the map. */
#home-progress-widget .hpw-body { display: flex; align-items: center; gap: 0.85rem; }
#home-progress-widget .hpw-ring { width: 56px; height: 56px; flex-shrink: 0; }
#home-progress-widget .hpw-ring::before { inset: 5px; }
#home-progress-widget .hpw-ring > span { font-size: 0.82rem; }
#home-progress-widget .hpw-rows { flex: 1; min-width: 0; }
#home-progress-widget .hpw-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.5rem; margin-bottom: 0.2rem;
}

/* All-progress modal: this-week vs last-week race bars */
.apm-wk-row { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.3rem; }
.apm-wk-lbl { font-size: 0.7rem; color: #64748b; width: 5.2rem; flex-shrink: 0; }
.apm-wk-bar {
    flex: 1; height: 10px; border-radius: 6px; background: #e2e8f0; overflow: hidden;
}
.apm-wk-bar i { display: block; height: 100%; border-radius: 6px; background: #94a3b8; }
.apm-wk-bar i.apm-win { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.apm-wk-bar i.apm-now { background: #3b82f6; }
.apm-wk-num {
    font-family: ui-monospace, Consolas, monospace; font-variant-numeric: tabular-nums;
    font-size: 0.72rem; color: #1e293b; width: 4rem; text-align: right; flex-shrink: 0;
}
html.dark-theme .apm-wk-bar { background: #334155; }
html.dark-theme .apm-wk-num { color: #e2e8f0; }
html.dark-theme .hpr-i { background: #172554; }
html.dark-theme .hpr-n { color: #cbd5e1; }
html.dark-theme .hpr-b { background: #334155; }
html.dark-theme .hpr-p { color: #94a3b8; }
html.dark-theme .hpr + .hpr, html.dark-theme .hpr-rest .hpr:first-child { border-top-color: #334155; }
html.dark-theme .hpr-more { border-top-color: #334155; }
html.dark-theme .hpr-week { color: #94a3b8; border-top-color: #334155; }

/* Subject continue: chapter-dots strip (✓ passed / current / upcoming) */
.chapdots { display: flex; gap: 4px; margin: 0.6rem 0 0.2rem; }
.chapdots i { flex: 1; height: 6px; border-radius: 99px; background: #e2e8f0; }
.chapdots i.done { background: #16a34a; }
.chapdots i.cur { background: #2563eb; box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25); }
html.dark-theme .chapdots i { background: #334155; }

/* Subject knowledge map: one P-tile per CHAPTER, coloured by YOUR accuracy */
.kmap { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-top: 0.35rem; }
.kmap-cell {
    aspect-ratio: 1 / 1; border-radius: 0.55rem; border: 0; cursor: pointer;
    display: grid; place-items: center;
    font-family: ui-monospace, Consolas, monospace; font-variant-numeric: tabular-nums;
    font-size: 0.68rem; font-weight: 700; color: #fff;
    transition: transform .12s ease, filter .12s ease;
}
.kmap-cell:hover { transform: translateY(-2px); filter: brightness(1.06); }
.kmap-cell.k-off { color: #94a3b8; }
.kmap-panel {
    margin-top: 0.55rem; border: 1px dashed #e2e8f0; border-radius: 0.7rem;
    padding: 0.55rem 0.7rem; display: grid; gap: 0.45rem;
}
.kmap-panel-title { display: flex; justify-content: space-between; gap: 0.6rem; font-size: 0.76rem; color: #0f172a; }
.kmap-panel-acc {
    font-family: ui-monospace, Consolas, monospace; font-variant-numeric: tabular-nums;
    font-size: 0.7rem; font-weight: 700; color: #475569; white-space: nowrap;
}
.kmap-topics { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.kmap-topic {
    background: #eff6ff; color: #1d4ed8; border: 1px solid #dbeafe;
    border-radius: 999px; padding: 0.15rem 0.55rem; font-size: 0.64rem; font-weight: 600;
}
.kmap-topic-more { background: #f1f5f9; color: #64748b; border-color: #e2e8f0; }
.kmap-advice {
    display: flex; align-items: center; gap: 0.5rem;
    background: #fffbeb; border: 1px solid #fcd34d; border-radius: 0.6rem;
    padding: 0.4rem 0.6rem; font-size: 0.72rem; color: #78350f; font-style: italic;
}
html.dark-theme .kmap-advice { background: #33290f; border-color: #8a6414; color: #fde68a; }
.kmap-topic.kt-hi  { background: #f0fdf4; color: #15803d; border-color: #86efac; }
.kmap-topic.kt-mid { background: #f7fee7; color: #4d7c0f; border-color: #bef264; }
.kmap-topic.kt-low { background: #fffbeb; color: #b45309; border-color: #fcd34d; }
.kmap-topic.kt-bad { background: #fef2f2; color: #b91c1c; border-color: #fca5a5; }
html.dark-theme .kmap-topic.kt-hi  { background: #0e3325; color: #86efac; border-color: #166534; }
html.dark-theme .kmap-topic.kt-mid { background: #1a2e05; color: #bef264; border-color: #3f6212; }
html.dark-theme .kmap-topic.kt-low { background: #33290f; color: #fcd34d; border-color: #8a6414; }
html.dark-theme .kmap-topic.kt-bad { background: #3a1414; color: #fca5a5; border-color: #7f1d1d; }
html.dark-theme .kmap-panel { border-color: #334155; }
html.dark-theme .kmap-panel-title { color: #e2e8f0; }
html.dark-theme .kmap-panel-acc { color: #94a3b8; }
html.dark-theme .kmap-topic { background: #172554; color: #93c5fd; border-color: #1e3a8a; }
html.dark-theme .kmap-topic-more { background: #1e293b; color: #94a3b8; border-color: #334155; }
.kmap-seg { flex: 1 1 24px; min-width: 18px; max-width: 44px; height: 16px; border-radius: 5px; }
.k-hi  { background: #16a34a; }
.k-mid { background: #84cc16; }
.k-low { background: #f59e0b; }
.k-bad { background: #ef4444; }
.k-off { background: #e2e8f0; }
html.dark-theme .k-off { background: #334155; }
.kmap-foot { margin-top: 0.55rem; }
.kmap-empty { font-size: 0.72rem; color: #64748b; font-style: italic; }
.kmap-legend { display: flex; gap: 0.7rem; align-items: center; font-size: 0.66rem; color: #94a3b8; flex-wrap: wrap; }
.kmap-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.kmap-weak {
    display: inline-flex; align-items: center; gap: 0.3rem;
    background: #fffbeb; border: 1px solid #fcd34d; border-radius: 999px;
    padding: 0.3rem 0.75rem; font-size: 0.7rem; font-weight: 700; color: #b45309;
    cursor: pointer; transition: filter .15s ease;
}
.kmap-weak:hover { filter: brightness(1.05); }
html.dark-theme .kmap-weak { background: #33290f; border-color: #8a6414; color: #fbbf24; }
html.dark-theme .kmap-empty { color: #94a3b8; }

/* Compact screens: course cards become a horizontal tile rail. */
@media (max-width: 1160px) {
    .home-courses-grid {
        display: flex !important;
        grid-template-columns: none !important;
        gap: 0.45rem !important;
        overflow-x: auto;
        padding-bottom: 0.25rem;
        scrollbar-width: none;
    }
    .home-courses-grid::-webkit-scrollbar { display: none; }
    .home-course-card {
        flex: 0 0 116px;
        flex-direction: column; align-items: center;
        gap: 0.3rem; padding: 0.6rem 0.55rem 0.55rem;
        text-align: center; border-radius: 0.8rem;
    }
    .home-course-card.hcc-add { flex: 0 0 84px; justify-content: center; }
    .hcc-icon { width: 2rem; height: 2rem; }
    .hcc-main { width: 100%; gap: 0.25rem; }
    .hcc-title {
        font-size: 0.72rem; white-space: normal;
        display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
        -webkit-box-orient: vertical; line-height: 1.2; min-height: 2.1em;
    }
    .hcc-pc { font-size: 0.62rem; }
}

.dash-topic-chip {
    display: inline-flex; align-items: center; padding: 0.35rem 0.75rem;
    background: #eff6ff; color: #1d4ed8; border-radius: 999px;
    font-size: 0.78rem; font-weight: 600; margin: 0.15rem;
    border: 1px solid #dbeafe; cursor: pointer; transition: background-color .15s ease;
}
.dash-topic-chip:hover { background: #dbeafe; }
.dash-topic-chip.alt-violet { background: #f5f3ff; color: #6d28d9; border-color: #ede9fe; }
.dash-topic-chip.alt-violet:hover { background: #ede9fe; }
.dash-topic-chip.alt-rose   { background: #fff1f2; color: #be123c; border-color: #ffe4e6; }
.dash-topic-chip.alt-rose:hover   { background: #ffe4e6; }
.dash-topic-chip.alt-emerald{ background: #ecfdf5; color: #047857; border-color: #d1fae5; }
.dash-topic-chip.alt-emerald:hover { background: #d1fae5; }
.dash-topic-chip.alt-amber  { background: #fffbeb; color: #b45309; border-color: #fef3c7; }
.dash-topic-chip.alt-amber:hover  { background: #fef3c7; }

/* ── FAQ chips (Ingeniko soft-blue, centered) ── */
.dash-faq-list { display: flex; flex-direction: column; gap: 0.5rem; align-items: stretch; }
.dash-faq-chip {
    display: block; width: 100%;
    padding: 0.55rem 0.85rem;
    border-radius: 0.85rem;
    font-size: 0.78rem;
    line-height: 1.35;
    color: #1e3a8a;
    text-align: center;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid #bfdbfe;
    box-shadow: 0 1px 2px rgba(30, 64, 175, 0.05);
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.dash-faq-chip:hover {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border-color: #93c5fd;
    box-shadow: 0 6px 14px -6px rgba(30, 64, 175, 0.25);
    transform: translateY(-1px);
}

.dash-chatbar {
    background: white; border: 1px solid #e2e8f0; border-radius: 1rem; padding: 0.85rem;
    display: flex; align-items: center; gap: 0.75rem; transition: border-color .15s ease, box-shadow .15s ease;
}
.dash-chatbar:hover, .dash-chatbar:focus-within { border-color: #93c5fd; box-shadow: 0 8px 20px -8px rgba(30, 64, 175, 0.18); }
.dash-chatbar-avatar { width: 2.6rem; height: 2.6rem; border-radius: 999px; flex-shrink: 0; overflow: hidden; background: linear-gradient(135deg,#dbeafe 0%,#bfdbfe 100%); display: grid; place-items: center; }
.dash-chatbar-text { flex: 1; min-width: 0; }
.dash-chatbar input { width: 100%; font-size: 1rem; font-weight: 600; color: #0f172a; background: transparent; border: 0; outline: none; padding: 0; }
.dash-chatbar input::placeholder { color: #334155; }
.dash-chatbar-desc { font-size: 0.72rem; color: #64748b; margin-top: 0.15rem; }
.dash-chatbar-send { width: 2.5rem; height: 2.5rem; border-radius: 999px; background: #2563eb; color: white; display: grid; place-items: center; flex-shrink: 0; cursor: pointer; transition: background-color .15s ease, transform .15s ease; }
.dash-chatbar-send:hover { background: #1d4ed8; }
.dash-chatbar-send:active { transform: scale(0.95); }
.dash-chatbar-send.is-empty { background: #cbd5e1; cursor: default; }
.dash-chatbar-footer { text-align: center; font-size: 0.72rem; color: #64748b; font-style: italic; margin-top: 0.4rem; }

/* ── Mode selector: subtle empty state (Ingeniko soft-blue) ── */
#mode-current-btn.mode-empty {
    width: 2.1rem; height: 2.1rem; padding: 0;
    justify-content: center; gap: 0; border-radius: 0.7rem;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-color: #bfdbfe;
    box-shadow: 0 2px 6px -2px rgba(30, 64, 175, 0.15);
}
#mode-current-btn.mode-empty:hover {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border-color: #93c5fd;
}
#mode-current-btn.mode-empty #mode-current-label { display: none; }
#mode-current-btn.mode-empty > span:last-child {
    color: #2563eb; font-size: 0.8rem; line-height: 1;
}

/* ── Personalised onboarding (PERSONAL card → mentor) — strip app chrome ── */
/* When the body has this class, the user is in the first-time chatbox.   */
/* Sidebar, header, and mentor tabs all hide so only portrait + chat +    */
/* input remain. Default mentor flow (no class) is unaffected.            */
body.personalised-onboarding #sidebar,
body.personalised-onboarding header,
body.personalised-onboarding #mentor-tabs {
    display: none !important;
}

/* ── Onboarding header (Natrag · Korak 3 od 3) — visible only in   ── */
/* personalised flow. Sits where the regular header would be, since   */
/* `header` is hidden by the .personalised-onboarding rule above.     */
#onboarding-header { display: none; }
body.personalised-onboarding #onboarding-header { display: flex; }

/* Online indicator pulse — outer ring expands & fades to feel "alive". */
@keyframes mentorOnlinePulse {
    0%   { transform: scale(1);   opacity: 0.55; }
    70%  { transform: scale(2.2); opacity: 0;    }
    100% { transform: scale(2.2); opacity: 0;    }
}

/* Setup footer counter — quiet "Odabrani predmeti" label + Ingeniko-blue
   pill around the count. Two-span structure rendered by setup.js
   updateSetupSelectedCounter; mobile.css can re-tune sizes for narrow
   viewports without redefining the visual identity. */
#setup-selected-counter {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 0.6rem;
    line-height: 1;
}
/* Label is itself a column so each word stacks ("Odabrani" / "predmeti")
   while the count pill stays to the right of the whole stack. */
#setup-selected-counter .setup-counter-label {
    display: inline-flex;
    flex-direction: column;
    color: #64748b;        /* slate-500 — quiet, doesn't compete with the button */
    font-weight: 500;
    font-size: 0.78rem;
    letter-spacing: 0.01em;
    text-align: left;
}
#setup-selected-counter .setup-counter-label > span {
    display: block;
    line-height: 1.05;
}
#setup-selected-counter .setup-counter-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.5rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #1e40af, #3b82f6);   /* Ingeniko blue */
    color: #ffffff;
    font-weight: 700;
    font-size: 0.78rem;
    box-shadow: 0 1px 2px rgba(30, 64, 175, 0.25);
}


/* Thinking bubble + tutor quick replies */
.think-row { display: flex; align-items: flex-end; gap: 0.45rem; }
.think-bub {
    display: inline-flex; gap: 5px; align-items: center;
    background: #eff6ff; border-radius: 14px 14px 14px 4px;
    padding: 11px 14px;
}
.think-bub i {
    width: 7px; height: 7px; border-radius: 50%; background: #94a3b8;
    animation: think-bounce 1.2s infinite;
}
.think-bub i:nth-child(2) { animation-delay: 0.2s; }
.think-bub i:nth-child(3) { animation-delay: 0.4s; }
@keyframes think-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
    30% { transform: translateY(-4px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .think-bub i { animation: none; } }
html.dark-theme .think-bub { background: #172554; }

.chat-qr { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 0.5rem 0 0.75rem 2.1rem; }
.chat-qr button {
    border: 1.5px solid #2563eb; color: #2563eb; background: none;
    border-radius: 999px; padding: 0.4rem 0.85rem;
    font-size: 0.74rem; font-weight: 700; cursor: pointer; font-family: inherit;
    transition: background-color .15s ease;
}
.chat-qr button:hover { background: #eff6ff; }
html.dark-theme .chat-qr button { border-color: #5c86f5; color: #93c5fd; }
html.dark-theme .chat-qr button:hover { background: #172554; }

/* Quiz HUD */
.qhud { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.5rem; }
.qhud-pill {
    font-family: ui-monospace, Consolas, monospace; font-variant-numeric: tabular-nums;
    background: #eff6ff; color: #2563eb; border-radius: 999px;
    padding: 0.15rem 0.65rem; font-size: 0.72rem; font-weight: 700; white-space: nowrap;
}
.qhud-bar { flex: 1; height: 6px; border-radius: 99px; background: #e2e8f0; overflow: hidden; }
.qhud-bar i { display: block; height: 100%; background: #2563eb; border-radius: 99px; transition: width .4s ease; }
html.dark-theme .qhud-pill { background: #172554; color: #93c5fd; }
html.dark-theme .qhud-bar { background: #334155; }

/* Live combo flame in the quiz HUD — the run count with escalating
   stages. No cap, no bar: the number grows, the colour heats up. */
.qhud-combo {
    display: inline-flex; align-items: center; gap: 1px;
    flex-shrink: 0; font-size: 0.82rem; color: #94a3b8;
}
.qhud-combo b {
    font-family: ui-monospace, Consolas, monospace;
    font-variant-numeric: tabular-nums; font-weight: 800;
}
.qhud-combo.qc-1 { color: #f59e0b; }
.qhud-combo.qc-2 { color: #ea580c; text-shadow: 0 0 10px rgba(234, 88, 12, 0.35); }
.qhud-combo.qc-3 {
    color: #dc2626; text-shadow: 0 0 12px rgba(220, 38, 38, 0.5);
    animation: qc-inferno 1.2s ease-in-out infinite;
}
.qhud-combo.qc-break { color: #94a3b8; opacity: 0.75; }
.qc-pop { animation: qc-pop 0.25s ease-out; }
.qhud-combo.qc-3.qc-pop { animation: qc-pop 0.25s ease-out, qc-inferno 1.2s ease-in-out 0.25s infinite; }
@keyframes qc-pop { 50% { transform: scale(1.4); } }
@keyframes qc-inferno { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) {
    .qc-pop, .qhud-combo.qc-3 { animation: none !important; }
}
html.dark-theme .qhud-combo { color: #64748b; }
html.dark-theme .qhud-combo.qc-1 { color: #fbbf24; }
html.dark-theme .qhud-combo.qc-2 { color: #fb923c; }
html.dark-theme .qhud-combo.qc-3 { color: #f87171; }

/* Answer states */
.opt-ok, .opt-no { position: relative; }
.opt-ok::after {
    content: '\2713'; position: absolute; right: 0.8rem; top: 50%; transform: translateY(-50%);
    color: #16a34a; font-weight: 800; font-size: 1.05rem;
}
.opt-no::after {
    content: '\2715'; position: absolute; right: 0.8rem; top: 50%; transform: translateY(-50%);
    color: #dc2626; font-weight: 800; font-size: 1rem;
}
.opt-no { opacity: 0.9; }
#quiz-xp-count { font-family: ui-monospace, Consolas, monospace; font-variant-numeric: tabular-nums; }

/* Knowledge map merged card: ring on the CURRENT chapter tile */
.kmap-cell.k-cur { box-shadow: 0 0 0 2.5px #2563eb; }
html.dark-theme .kmap-cell.k-cur { box-shadow: 0 0 0 2.5px #60a5fa; }
/* Chapter detail modal body */
.kmap-modal { display: grid; gap: 0.6rem; }
.kmap-modal .dash-suggest-btn { justify-self: start; }


/* Knowledge map as a thin clickable health-bar (compact screens).
   Each segment is a 30px-tall button; the coloured bar inside is 10px. */
.kbar { display: none; }
.kbar-sum { display: none; }
@media (max-width: 1160px) {
    #dash-map-widget .kmap { display: none; }          /* grid -> desktop only */
    #dash-map-widget .kmap-foot { display: none; }     /* legend too */
    .kbar { display: flex; gap: 3px; margin-top: 0.35rem; }
    .kbar-seg {
        flex: 1; height: 30px; min-width: 0;
        background: none; border: 0; padding: 0; cursor: pointer;
        display: grid; align-items: center;
    }
    .kbar-seg i { display: block; height: 10px; border-radius: 4px; background: #e2e8f0; }
    .kbar-seg i.k-hi  { background: #16a34a; }
    .kbar-seg i.k-mid { background: #84cc16; }
    .kbar-seg i.k-low { background: #f59e0b; }
    .kbar-seg i.k-bad { background: #ef4444; }
    .kbar-seg i.k-cur { outline: 2px solid #2563eb; outline-offset: 1.5px; }
    html.dark-theme .kbar-seg i { background: #334155; }
    html.dark-theme .kbar-seg i.k-cur { outline-color: #60a5fa; }
    .kbar-sum {
        display: block; font-size: 0.68rem; color: #475569; margin-top: 0.3rem;
    }
    .kbar-sum b { font-family: ui-monospace, Consolas, monospace; font-variant-numeric: tabular-nums; }
    html.dark-theme .kbar-sum { color: #94a3b8; }
}


/* Subject page: desktop = 3 separate cards (Nastavi | Mapa | Liga);
   compact = the map card absorbs the continue row, desktop card hides. */
.kmerge-cont { display: none; }
@media (max-width: 1160px) {
    #view-dashboard .dash-widget-continue.kv-desktop { display: none; }
    .kmerge-cont { display: flex; align-items: center; gap: 0.6rem; margin: 0.25rem 0 0.55rem; }
    #dash-map-widget {
        background: linear-gradient(135deg, #eff6ff 0%, #e0eaff 100%);
        border: 1px solid #bfdbfe; border-left: 4px solid #2563eb;
    }
    html.dark-theme #dash-map-widget {
        background: linear-gradient(135deg, #182747, #1a2c58);
        border-color: #294a86; border-left-color: #3b82f6;
    }
}


/* Merged map card (compact): quieter chrome — the bar is the story. */
@media (max-width: 1160px) {
    #dash-map-widget #dash-map-detail {
        color: #94a3b8; font-weight: 600; font-size: 10px;
    }
    #dash-map-widget #dash-map-detail:hover { color: #2563eb; }
    .kmerge-cont .dash-resume-btn {
        padding: 0.35rem 0.7rem !important; font-size: 0.68rem !important;
        box-shadow: none;
    }
    html.dark-theme #dash-map-widget #dash-map-detail { color: #64748b; }
}


/* Map card header = the whole title taps into the detail view. */
.kmap-title {
    display: flex; align-items: center; gap: 0.3rem; width: 100%;
    background: none; border: 0; padding: 0; margin: 0 0 0.25rem;
    cursor: pointer; font-family: inherit; text-align: left;
}
.kmap-title h3 { margin: 0; }
.kmap-chev {
    color: #94a3b8; font-size: 1.05rem; line-height: 1; font-weight: 700;
    display: inline-flex; align-items: center; align-self: center;
    transform: translateY(-1.5px);              /* › glyph sits low on its baseline */
    transition: transform .15s ease, color .15s ease;
}
.kmap-title:hover .kmap-chev { color: #2563eb; transform: translate(2px, -1.5px); }
.kmerge-cont .dash-cont-where { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1160px) {
    .kbar-seg i { height: 12px; border-radius: 5px; }
}


/* Chapter modal: status header + full-width practice action */
.kmap-status {
    display: flex; align-items: baseline; gap: 0.6rem;
    padding: 0.55rem 0.75rem; border-radius: 0.7rem; background: #f8fafc;
    border: 1px solid #e2e8f0;
}
.kmap-status-lbl { font-size: 0.72rem; font-weight: 700; color: #64748b; }
.kmap-status-num {
    font-family: ui-monospace, Consolas, monospace; font-variant-numeric: tabular-nums;
    font-size: 1.35rem; font-weight: 800; color: #2563eb; line-height: 1;
}
.kmap-status-sub { font-family: ui-monospace, Consolas, monospace; font-size: 0.7rem; color: #94a3b8; }
.kmap-status-new { align-items: center; font-size: 0.78rem; color: #475569; font-style: italic; }
html.dark-theme .kmap-status { background: #0f172a; border-color: #334155; }
html.dark-theme .kmap-status-new { color: #94a3b8; }
.kmap-go {
    width: 100%; border: 0; cursor: pointer; font-family: inherit;
    background: #2563eb; color: #fff; font-weight: 700; font-size: 0.85rem;
    padding: 0.7rem 1rem; border-radius: 0.7rem;
    box-shadow: 0 6px 16px -8px rgba(37, 99, 235, 0.7);
    transition: filter .15s ease, transform .12s ease;
}
.kmap-go:hover { filter: brightness(1.08); transform: translateY(-1px); }
.kmap-go:active { transform: scale(0.98); }


/* Chapter modal: human description of what the chapter teaches */
.kmap-desc { font-size: 0.8rem; color: #475569; line-height: 1.55; }
html.dark-theme .kmap-desc { color: #a9b6d0; }