/* ==========================================================================
   BOJE APLIKACIJE
   ==========================================================================
   --brend: znak aplikacije: dugmad, linkovi, fokus;
   #412d59 je tamnija varijanta (prelaz mišem, tekst sekundarnih dugmadi).

   Nivoi važnosti su JEDNA skala po jačini (oko rangira jače = važnije):
   3 koraljno crvena podloga + podebljano, 2 blaga narandžasta podloga,
   1 samo žuta podvlaka, 0 običan tekst. Tekst ostaje taman (lako se čita).
   Studentove oznake riječi su ista skala, malo jače.
*/

:root,
/* Sumrak: tekst skripte (stranice, tabele, markiranje) zadržava svijetle boje */
html[data-tema="sumrak"] .text-result,
html[data-tema="sumrak"] .quiz-source {
    --brend: #693a41;
    --brend-tamna: #4a272d;
    --brend-svijetla: #f6eff0;
    --brend-rub: #d9d1e3;
    --brend-sjena: rgba(105, 58, 65, 0.12);
    --brend-fokus: rgba(105, 58, 65, 0.25);
    /* tekst na brend podlozi (primarno dugme, znački) */
    --na-brendu: #ffffff;

    --kljucno: #f6a199;
    --kljucno-tekst: #3a1210;
    --vazno: #ffe0c2;
    --vazno-tekst: inherit;
    --korisno-linija: #f2b705;

    --oznaka-kljucno: #ee7468;
    --oznaka-vazno: #ffc48f;
    --oznaka-korisno: #fde58a;

    /* neutralne boje (noćni način ih mijenja ispod) */
    --pozadina-1: #f8f5f4;
    --pozadina-2: #f1eae9;
    --povrsina: #ffffff;
    --povrsina-2: #faf6f6;
    --tekst: #172033;
    --tekst-2: #344054;
    --tekst-blagi: #667085;
    --tekst-slabi: #98a2b3;
    --rub: #ebe3e3;
    --rub-jaci: #d9cccd;

    /* stranice dokumenta i tabele */
    --list-pozadina: #f2f1f5;
    --list-rub: #e4e2ea;
    --list-oznaka: #eceaf1;
    --tabela-rub: #e1e0e8;
    --tabela-zaglavlje: #f7f6fa;

    --greska: #b42318;
    --greska-pozadina: #fef2f2;
    --greska-rub: #fecdca;
    --uspjeh: #15803d;
    --uspjeh-pozadina: #dcfce7;
    --uspjeh-rub: #bbf7d0;

    color-scheme: light;
}

/*
   NOĆNI NAČIN: crvena i bijela zamijene uloge. Podloga je tamna bordo,
   tekst i dugmad svijetli (topla bijela / ružičasta), da kontrast bude dobar.
   Markiranje zadržava svijetle podloge s tamnim tekstom (lako se čita).
   SUMRAK: isto kao noćni, ali tekst skripte ostaje kao na bijelom papiru
   (svijetle varijable gore važe i unutar .text-result i .quiz-source).
*/
html[data-tema="tamna"],
html[data-tema="sumrak"] {
    --brend: #f0c3bd;
    --brend-tamna: #f7dcd8;
    --brend-svijetla: #4b2a30;
    --brend-rub: #6b4249;
    --brend-sjena: rgba(240, 195, 189, 0.16);
    --brend-fokus: rgba(240, 195, 189, 0.35);
    --na-brendu: #3a1f23;

    --vazno-tekst: #3a1210;

    --pozadina-1: #2a161a;
    --pozadina-2: #1f1013;
    --povrsina: #361e22;
    --povrsina-2: #40252a;
    --tekst: #f8ecea;
    --tekst-2: #e6d2cf;
    --tekst-blagi: #c2a5a1;
    --tekst-slabi: #9a7d79;
    --rub: #553339;
    --rub-jaci: #6b4249;

    --list-pozadina: #2a161a;
    --list-rub: #553339;
    --list-oznaka: #4b2a30;
    --tabela-rub: #553339;
    --tabela-zaglavlje: #40252a;

    --greska: #ffb4a8;
    --greska-pozadina: #4d1d1d;
    --greska-rub: #7a2e2e;
    --uspjeh: #8fe0a8;
    --uspjeh-pozadina: #1e3b29;
    --uspjeh-rub: #2f5c3e;

    color-scheme: dark;
}


/* Sumrak: podloga malo svjetlija od noćnog načina */
html[data-tema="sumrak"] {
    --pozadina-1: #331d21;
    --pozadina-2: #29171a;
    --povrsina: #402529;
    --povrsina-2: #4a2c31;
}

/* Sumrak: dio s tekstom je svijetao i ispunjava karticu do dna */
html[data-tema="sumrak"] .result-card {
    display: flex;
    flex-direction: column;
}

html[data-tema="sumrak"] .text-result {
    flex: 1;
}

html[data-tema="sumrak"] .text-result:not(.sa-stranicama) {
    background: var(--povrsina);
}

/* ==========================================================================
   RESET
   ========================================================================== */

   * {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    color: var(--tekst);

    border-top: 4px solid var(--brend);

    background:
        linear-gradient(
            135deg,
            var(--pozadina-1) 0%,
            var(--pozadina-2) 100%
        );
}


/* ==========================================================================
   APP
   ========================================================================== */

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


/* ==========================================================================
   HEADER
   ========================================================================== */

/* Beta: aplikacija još nije završena (index.html, prevod betaNapomena) */
.beta-traka {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 16px;
    padding: 10px 14px;
    border: 1px solid var(--brend-rub);
    border-radius: 10px;
    background: var(--brend-svijetla);
    color: var(--tekst-2);
    font-size: 0.9rem;
    line-height: 1.45;
}

/* Saglasnost pri registraciji i linkovi u podnožju */
.consent-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 4px 0 12px;
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--tekst-2);
}

.consent-row[hidden] {
    display: none;
}

.consent-row input {
    margin-top: 3px;
    flex: none;
}

.consent-row a,
.app-footer a {
    color: var(--brend);
}

.beta-oznaka {
    flex: none;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--brend);
    color: var(--na-brendu);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.app-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;

    margin-bottom: 24px;
    padding-bottom: 20px;

    border-bottom: 1px solid var(--rub);
}

.app-header h1 {
    margin: 0;

    color: var(--tekst);

    font-size: clamp(
        1.65rem,
        3vw,
        2.25rem
    );

    line-height: 1.15;
    font-weight: 750;
    letter-spacing: -0.035em;
}

/* Logo "Marked": "Mar" u boji teksta teme, "ked" tamno bordo preko poteza markera */
@font-face {
    font-family: "Poppins Logo";
    font-weight: 800;
    src: url("fonts/poppins-800.ttf") format("truetype");
    font-display: swap;
}

.brand-name {
    line-height: 0;
}

.brand-logo {
    display: block;
    height: clamp(3.2rem, 8vw, 4.2rem);
    width: auto;
    max-width: 100%;
}

.logo-tekst {
    font-family: "Poppins Logo", "Poppins", "Segoe UI", system-ui, sans-serif;
    font-size: 180px;
    font-weight: 800;
    letter-spacing: -5px;
}

.logo-mar { fill: #5b1719; }
.logo-ked { fill: #5b1719; }
.logo-marker { fill: #d08a74; }
.logo-potez {
    fill: none;
    stroke: #bf7660;
    stroke-width: 6.8;
    stroke-linecap: round;
    opacity: 0.35;
}

/* Tamne teme: "Mar" svijetao kao na logu na bordo podlozi */
html[data-tema="tamna"] .logo-mar,
html[data-tema="sumrak"] .logo-mar {
    fill: #fdeceb;
}

/* Svijetla tema: obrnut kontrast u odnosu na noćni način. "Mar" tamno bordo,
   "ked" boje pozadine stranice na markeru */
html:not([data-tema="tamna"]):not([data-tema="sumrak"]) .logo-ked {
    fill: var(--pozadina-1);
}

.brand-slogan {
    margin: 6px 0 0;

    color: var(--brend);

    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.subtitle {
    margin: 8px 0 0;

    color: var(--tekst-blagi);

    font-size: 0.95rem;
}


/* ==========================================================================
   LANGUAGE
   ========================================================================== */

.language-control {
    display: flex;
    align-items: center;
    gap: 10px;

    flex-shrink: 0;
}

.language-control label {
    color: var(--tekst-blagi);
    font-size: 0.85rem;
    font-weight: 600;
}


/* ==========================================================================
   FORM ELEMENTS
   ========================================================================== */

select,
textarea,
button,
input {
    font: inherit;
}

select {
    min-height: 42px;

    padding: 0 38px 0 13px;

    border: 1px solid var(--rub);
    border-radius: 10px;

    color: var(--tekst);
    background-color: var(--povrsina);

    outline: none;

    cursor: pointer;

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

select:hover {
    border-color: var(--rub-jaci);
}

select:focus {
    border-color: var(--brend);

    box-shadow:
        0 0 0 3px
        var(--brend-sjena);
}


/* ==========================================================================
   LAYOUT: bočni meni + sadržaj
   ========================================================================== */

.layout {
    display: grid;

    grid-template-columns:
        260px
        minmax(0, 1fr);

    gap: 18px;

    align-items: start;
}

.content {
    min-width: 0;
}


/* ==========================================================================
   SIDEBAR
   ========================================================================== */

/* Kao kod Claude-a: stavke s ikonom jedna ispod druge, korisnik na dnu */
.sidebar {
    position: sticky;
    top: 16px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;

    min-height: min(560px, calc(100vh - 32px));

    padding: 10px;

    border: 1px solid var(--rub);
    border-radius: 16px;

    background: var(--povrsina);

    box-shadow:
        0 8px 30px
        rgba(15, 23, 42, 0.045);
}

.nav-menu {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;

    width: 100%;
    min-height: 40px;

    padding: 0 12px;

    border: 0;
    border-radius: 10px;

    color: var(--tekst-2);
    background: transparent;

    font: inherit;
    font-size: 0.9rem;
    font-weight: 550;
    text-align: left;

    cursor: pointer;

    transition:
        background 0.18s ease,
        color 0.18s ease;
}

.nav-item:hover {
    color: var(--tekst);
    background: var(--povrsina-2);
}

.nav-item.aktivno {
    color: var(--brend-tamna);
    background: var(--brend-svijetla);

    box-shadow: inset 3px 0 0 var(--brend);
}

.nav-icon,
.nav-icon svg {
    display: inline-flex;

    width: 18px;
    height: 18px;
}

.nav-icon svg,
.limit-icon svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nav-user {
    display: flex;
    align-items: center;
    gap: 10px;

    width: 100%;

    padding: 10px;

    border: 0;
    border-top: 1px solid var(--rub);
    border-radius: 0 0 10px 10px;

    color: var(--tekst);
    background: transparent;

    font: inherit;
    text-align: left;

    cursor: pointer;
}

.nav-user:hover {
    background: var(--povrsina-2);
}

.nav-user-avatar {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    border-radius: 50%;

    color: var(--na-brendu);
    background: var(--brend);

    font-size: 0.85rem;
    font-weight: 700;
}

.nav-user-text {
    display: flex;
    flex-direction: column;

    min-width: 0;
}

.nav-user-text strong,
.nav-user-text span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-user-text strong {
    font-size: 0.85rem;
}

.nav-user-text span {
    color: var(--tekst-blagi);

    font-size: 0.75rem;
}


/* ==========================================================================
   PROZOR IZ MENIJA (zamijeni glavni dio; "Nazad" vraća markiranje)
   ========================================================================== */

.content.panel-otvoren > :not(#panel) {
    display: none;
}

.panel-card {
    padding: 22px 24px 26px;

    border: 1px solid var(--rub);
    border-radius: 18px;

    background: var(--povrsina);

    box-shadow:
        0 8px 30px
        rgba(15, 23, 42, 0.045);
}

.panel-header {
    display: flex;
    align-items: center;
    gap: 14px;

    margin-bottom: 18px;
}

.panel-header h2 {
    margin: 0;

    color: var(--tekst);

    font-size: 1.25rem;
}

.panel-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    min-height: 36px;

    padding: 0 12px;

    border: 1px solid var(--rub);
    border-radius: 10px;

    color: var(--tekst-2);
    background: var(--povrsina);

    font: inherit;
    font-size: 0.85rem;

    cursor: pointer;
}

.panel-back:hover {
    border-color: var(--brend);
    color: var(--brend-tamna);
    background: var(--brend-svijetla);
}

.panel-body {
    max-width: 640px;
}

.panel-description,
.sidebar-description {
    margin: 0 0 14px;

    color: var(--tekst-blagi);

    font-size: 0.88rem;
    line-height: 1.55;
}

/* Postavke: grupe odvojene linijom */
.settings-group {
    padding: 18px 0;

    border-top: 1px solid var(--rub);
}

.settings-group:first-child {
    padding-top: 0;

    border-top: 0;
}

.settings-group h3,
.account-form h3 {
    margin: 0 0 10px;

    color: var(--tekst);

    font-size: 0.98rem;
}

.theme-options {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;

    padding: 4px;

    border-radius: 12px;

    background: var(--povrsina-2);
}

.theme-option {
    min-height: 34px;

    padding: 0 14px;

    border: 0;
    border-radius: 9px;

    color: var(--tekst-2);
    background: transparent;

    font: inherit;
    font-size: 0.85rem;

    cursor: pointer;
}

.theme-option {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.theme-icon,
.theme-icon svg {
    display: inline-flex;

    width: 16px;
    height: 16px;
}

.theme-icon svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Sumrak: lijeva polovina kruga popunjena (pola noć, pola dan) */
.theme-icon .puno {
    fill: currentColor;
}

html[data-tema="sumrak"] .quiz-source {
    color: var(--tekst);
}

.theme-option.aktivno {
    color: var(--brend-tamna);
    background: var(--povrsina);

    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);

    font-weight: 650;
}

.danger-button {
    align-self: flex-start;

    min-height: 38px;

    padding: 0 16px;

    border: 1px solid var(--greska-rub);
    border-radius: 10px;

    color: var(--greska);
    background: var(--greska-pozadina);

    font: inherit;
    font-size: 0.85rem;
    font-weight: 650;

    cursor: pointer;
}

.danger-button:hover {
    border-color: var(--greska);
}

.account-note {
    margin: 0;

    padding: 10px 12px;

    border-radius: 10px;

    color: var(--uspjeh);
    background: var(--uspjeh-pozadina);

    font-size: 0.85rem;
    line-height: 1.45;
}

.account-note[hidden] {
    display: none;
}

/* Uređaji (Postavke i limit pri prijavi) */
.device-list {
    display: flex;
    flex-direction: column;
    gap: 8px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.device-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    padding: 10px 12px;

    border: 1px solid var(--rub);
    border-radius: 10px;

    color: var(--tekst);
    background: var(--povrsina);

    font-size: 0.88rem;
}

.device-list li > span:first-child {
    display: flex;
    flex-direction: column;
    gap: 2px;

    min-width: 0;

    font-weight: 600;
}

.device-list small {
    color: var(--tekst-blagi);

    font-size: 0.78rem;
    font-weight: 400;
}

.device-list .secondary-button {
    flex-shrink: 0;

    min-height: 32px;

    padding: 0 12px;

    font-size: 0.8rem;
}

.device-current {
    flex-shrink: 0;

    padding: 4px 10px;

    border-radius: 999px;

    color: var(--brend-tamna);
    background: var(--brend-svijetla);

    font-size: 0.75rem;
    font-weight: 650;
}

.device-limit,
.verify-box {
    display: flex;
    flex-direction: column;
    gap: 10px;

    padding: 12px;

    border: 1px solid var(--brend-rub);
    border-radius: 12px;

    background: var(--brend-svijetla);
}

.device-limit[hidden],
.verify-box[hidden] {
    display: none;
}

.device-limit p,
.verify-box p {
    margin: 0;

    color: var(--tekst);

    font-size: 0.85rem;
    line-height: 1.5;
}

.verify-box .secondary-button {
    align-self: flex-start;
}

.settings-actions {
    margin-bottom: 14px;
}

.panel-body .sidebar-list {
    gap: 6px;
}

.panel-body .sidebar-item {
    min-height: 42px;

    padding: 0 14px;

    border: 1px solid var(--rub);
    border-radius: 10px;

    font-size: 0.9rem;
}

.sidebar-list {
    display: flex;
    flex-direction: column;
    gap: 4px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.sidebar-item {
    width: 100%;

    padding: 8px 10px;

    border: 0;
    border-radius: 8px;

    color: var(--tekst-2);
    background: var(--povrsina-2);

    font-size: 0.85rem;
    text-align: left;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    cursor: pointer;

    transition: background 0.18s ease;
}

.sidebar-item:hover:not(:disabled) {
    background: var(--brend-svijetla);
}

.sidebar-item:disabled {
    cursor: default;
}

.sidebar-empty {
    color: var(--tekst-slabi);

    font-size: 0.8rem;
}

/* Naslov grupe (predmet) u listi skripti i kvizova */
.sidebar-list .sidebar-group {
    margin-top: 8px;
    padding: 0 4px;

    color: var(--tekst-slabi);

    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.sidebar-list .sidebar-group:first-child {
    margin-top: 0;
}

/* Stablo: oblast -> smjer -> predmet -> skripte ili kvizovi */
.sidebar-list li.tree-node {
    display: block;
}

.sidebar-list details > summary {
    display: flex;
    align-items: center;
    gap: 6px;

    padding: 6px 4px;

    border-radius: 8px;

    list-style: none;
    cursor: pointer;
    user-select: none;
}

.sidebar-list details > summary::-webkit-details-marker {
    display: none;
}

/* strelica: desno zatvoreno, dolje otvoreno */
.sidebar-list details > summary::before {
    content: '';
    flex-shrink: 0;

    width: 6px;
    height: 6px;

    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;

    transform: rotate(-45deg);
    transition: transform 0.15s ease;
}

.sidebar-list details[open] > summary::before {
    transform: rotate(45deg);
}

.sidebar-list details > summary:hover {
    background: var(--povrsina-2);
}

.sidebar-list details > .sidebar-list {
    margin: 2px 0 6px 12px;
    padding-left: 8px;

    border-left: 1px solid var(--rub);
}

.tree-grupa > summary {
    color: var(--tekst-slabi);

    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tree-oblast > summary {
    color: var(--tekst-2);

    font-size: 0.85rem;
    font-weight: 600;
}

.tree-predmet > summary {
    color: var(--tekst-2);

    font-size: 0.85rem;
}

.tree-count {
    margin-left: auto;
    padding: 0 7px;

    border-radius: 999px;

    color: var(--tekst-slabi);
    background: var(--povrsina-2);

    font-size: 0.72rem;
    font-weight: 600;
}

/* "+ Kviz iz svih skripti" na vrhu predmeta */
.sidebar-list .tree-akcija {
    color: var(--brend-tamna);
    background: var(--brend-svijetla);

    font-weight: 600;
}

/* Stavka + olovka za preimenovanje */
.sidebar-list li {
    display: flex;
    align-items: center;
    gap: 4px;
}

.sidebar-list .sidebar-item {
    flex: 1;
    min-width: 0;
}

.sidebar-edit {
    flex-shrink: 0;

    width: 30px;
    height: 32px;

    border: 0;
    border-radius: 8px;

    color: var(--tekst-slabi);
    background: transparent;

    cursor: pointer;
}

.sidebar-edit:hover {
    color: var(--brend-tamna);
    background: var(--brend-svijetla);
}

.sidebar-rename {
    width: 100%;
    min-height: 32px;

    padding: 0 8px;

    border: 1px solid var(--brend);
    border-radius: 8px;

    font-size: 0.85rem;

    outline: none;
}


/* ==========================================================================
   RAČUN (prijava / registracija)
   ========================================================================== */

.account-form,
.account-info {
    display: flex;
    flex-direction: column;
    gap: 10px;

    margin-top: 12px;
}

/* display: flex inače poništava atribut hidden */
.account-form[hidden],
.account-info[hidden] {
    display: none;
}

.account-form input {
    min-height: 40px;

    padding: 0 12px;

    border: 1px solid var(--rub);
    border-radius: 10px;

    color: var(--tekst);
    background: var(--povrsina);

    outline: none;

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.account-form input:focus {
    border-color: var(--brend);

    box-shadow:
        0 0 0 3px
        var(--brend-sjena);
}

.account-form .primary-button {
    min-height: 40px;
}

.account-error {
    margin: 0;

    color: var(--greska);

    font-size: 0.8rem;
    line-height: 1.4;
}

.link-button {
    padding: 0;

    border: 0;

    color: var(--brend-tamna);
    background: none;

    font-size: 0.8rem;

    cursor: pointer;
}

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

.account-email {
    margin: 0;

    color: var(--tekst);

    font-size: 0.88rem;
    font-weight: 650;

    overflow-wrap: anywhere;
}

.account-info .panel-description {
    margin: 0;
}

.account-info .account-form {
    margin-top: 10px;
    padding-top: 16px;

    border-top: 1px solid var(--rub);
}

.account-info > .secondary-button {
    align-self: flex-start;
}

.panel-body .account-form,
.panel-body .account-info {
    max-width: 380px;
}


/* ==========================================================================
   SETTINGS
   ========================================================================== */

.settings-card {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 18px;

    padding: 20px;

    margin-bottom: 18px;

    border:
        1px solid var(--rub);

    border-radius: 16px;

    background: var(--povrsina);

    box-shadow:
        0 8px 30px
        rgba(15, 23, 42, 0.045);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    color: var(--tekst-2);

    font-size: 0.86rem;
    font-weight: 650;
}


/* ==========================================================================
   INPUT CARD
   ========================================================================== */

.input-card,
.result-card {
    overflow: hidden;

    border:
        1px solid var(--rub);

    border-radius: 16px;

    background: var(--povrsina);

    box-shadow:
        0 8px 30px
        rgba(15, 23, 42, 0.045);
}

.input-card {
    margin-bottom: 18px;
}


/* ==========================================================================
   TABS
   ========================================================================== */

.tabs {
    display: flex;

    gap: 4px;

    padding: 7px;

    border-bottom:
        1px solid var(--rub);

    background: var(--povrsina-2);
}

.tab-button {
    flex: 1;

    min-height: 42px;

    padding: 0 18px;

    border: 0;
    border-radius: 9px;

    color: var(--tekst-blagi);
    background: transparent;

    font-weight: 650;

    cursor: pointer;

    transition:
        background 0.18s ease,
        color 0.18s ease,
        box-shadow 0.18s ease;
}

.tab-button:hover {
    color: var(--tekst-2);
}

.tab-button.active {
    color: var(--tekst);

    background: var(--povrsina);

    box-shadow:
        0 2px 8px
        rgba(15, 23, 42, 0.08);
}


/* ==========================================================================
   TEXT INPUT
   ========================================================================== */

.input-panel {
    padding: 20px;
}

textarea {
    display: block;

    width: 100%;
    /* Kao polje za poruku: nisko, raste dok se piše (app.js), najviše pola ekrana */
    min-height: 96px;
    max-height: 50vh;

    resize: vertical;

    padding: 18px;

    border:
        1px solid var(--rub);

    border-radius: 12px;

    color: var(--tekst);

    background: var(--povrsina-2);

    line-height: 1.7;
    font-size: 0.96rem;

    outline: none;

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}

textarea::placeholder {
    color: var(--tekst-slabi);
}

textarea:hover {
    border-color: var(--rub-jaci);
}

textarea:focus {
    border-color: var(--brend);

    background: var(--povrsina);

    box-shadow:
        0 0 0 3px
        var(--brend-sjena);
}


/* ==========================================================================
   FILE UPLOAD
   ========================================================================== */

.file-panel {
    padding: 28px 20px;
}

.file-dropzone {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 250px;

    padding: 30px;

    border:
        2px dashed var(--rub-jaci);

    border-radius: 14px;

    color: var(--tekst-2);

    background: var(--povrsina-2);

    cursor: pointer;

    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        transform 0.18s ease;
}

.file-dropzone:hover {
    border-color: var(--brend);

    background: var(--brend-svijetla);

    transform: translateY(-1px);
}

.file-dropzone[hidden],
.file-chosen[hidden],
.input-summary[hidden] {
    display: none;
}

/* Izabran fajl: ikonica s vrstom (PDF, DOCX...) i naziv */
.file-chosen {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 12px 14px;

    border: 1px solid var(--rub);
    border-radius: 12px;

    background: var(--povrsina-2);
}

.file-badge {
    flex-shrink: 0;

    display: grid;
    place-items: center;

    width: 46px;
    height: 54px;

    border-radius: 6px 14px 6px 6px;

    color: var(--na-brendu);
    background: var(--brend);

    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.file-name {
    flex: 1;
    min-width: 0;

    font-weight: 650;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Poslije "Markiraj tekst": unos se skupi u jedan red */
.input-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    padding: 14px 20px;
}

.input-summary-text {
    min-width: 0;

    color: var(--tekst-2);

    font-weight: 650;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.input-card.skupljeno .tabs,
.input-card.skupljeno .input-panel,
.input-card.skupljeno .action-row {
    display: none;
}

.file-dropzone input {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;

    pointer-events: none;
}

.file-icon {
    display: grid;
    place-items: center;

    width: 48px;
    height: 48px;

    margin-bottom: 12px;

    border-radius: 12px;

    color: var(--brend);

    background: var(--brend-svijetla);

    font-size: 1.5rem;
    font-weight: 700;
}

.file-title {
    color: var(--tekst);

    font-weight: 700;
}

.file-description {
    margin-top: 6px;

    color: var(--tekst-slabi);

    font-size: 0.85rem;
}


/* ==========================================================================
   ACTION
   ========================================================================== */

.action-row {
    display: flex;
    justify-content: flex-end;

    padding:
        0 20px 20px;
}

.primary-button {
    min-height: 46px;

    padding: 0 24px;

    border: 0;
    border-radius: 10px;

    color: var(--na-brendu);

    background:
        linear-gradient(
            135deg,
            var(--brend),
            var(--brend-tamna)
        );

    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 5px 14px
        var(--brend-fokus);

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        opacity 0.18s ease;
}

.primary-button:hover:not(:disabled) {
    transform: translateY(-1px);

    box-shadow:
        0 8px 18px
        var(--brend-fokus);
}

.primary-button:active:not(:disabled) {
    transform: translateY(0);
}

.primary-button:disabled {
    opacity: 0.65;

    cursor: wait;

    box-shadow: none;
}


/* ==========================================================================
   STATUS
   ========================================================================== */

.status-container {
    min-height: 0;

    margin-bottom: 18px;
}

.status-badge {
    display: inline-flex;
    align-items: center;

    min-height: 34px;

    padding: 6px 12px;

    border-radius: 999px;

    font-size: 0.82rem;
    font-weight: 650;
}

/* Filter prikaza: Sve boje / Ključno i važno / Samo ključno / Bez boja */
.view-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;

    padding: 10px 20px;

    border-bottom: 1px solid var(--rub);

    color: var(--tekst-2);

    font-size: 0.85rem;
}

.view-filter[hidden] {
    display: none;
}

.view-filter-label {
    font-weight: 650;
}

/* Ispit uz spremljenu skriptu: "Kada ti je ispit?" / "Kako je prošao ispit?" */
.exam-bar input[type="date"] {
    min-height: 30px;

    padding: 0 8px;

    border: 1px solid var(--rub);
    border-radius: 8px;

    color: var(--tekst);
    background: var(--povrsina);

    font: inherit;
}

.exam-note {
    color: var(--tekst-2);

    font-size: 0.8rem;
}

/* Anketa poslije ishoda ispita: ispod reda s ishodom, cijelom širinom */
.exam-survey {
    display: flex;
    flex-direction: column;
    gap: 6px;

    width: 100%;
    padding-top: 8px;

    border-top: 1px solid var(--rub);
}

.exam-survey p {
    margin: 4px 0 0;
}

.exam-scale {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

.exam-comment {
    display: flex;
    flex-direction: column;
    gap: 4px;

    margin-top: 4px;
}

.exam-comment textarea {
    max-width: 100%;

    padding: 6px 8px;

    border: 1px solid var(--rub);
    border-radius: 8px;

    color: var(--tekst);
    background: var(--povrsina);

    font: inherit;

    resize: vertical;
}

.exam-actions {
    display: flex;
    gap: 6px;

    margin-top: 4px;
}

.view-filter-options {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;

    padding: 3px;

    border-radius: 10px;

    background: var(--povrsina-2);
}

.view-option {
    min-height: 30px;

    padding: 0 12px;

    border: 0;
    border-radius: 8px;

    color: var(--tekst-2);
    background: transparent;

    font: inherit;

    cursor: pointer;
}

.view-option:hover {
    color: var(--tekst);
}

.view-option.aktivno {
    color: var(--brend-tamna);
    background: var(--povrsina);

    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);

    font-weight: 650;
}

.view-filter-scope {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.view-filter-scope select {
    min-height: 32px;

    padding: 0 8px;

    font-size: 0.85rem;
}

.view-filter-note {
    flex-basis: 100%;

    margin: 0;

    color: var(--greska);

    font-size: 0.8rem;
}

.view-filter-note[hidden] {
    display: none;
}

/* Potvrde studentu ("Skripta je spremljena", "Račun je obrisan") */
.cache-true {
    color: var(--uspjeh);

    background: var(--uspjeh-pozadina);

    border:
        1px solid var(--uspjeh-rub);
}


/* ==========================================================================
   RESULT
   ========================================================================== */

.result-card {
    min-height: 400px;
}

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

    gap: 20px;

    padding: 20px;

    border-bottom:
        1px solid var(--rub);
}

.result-header h2 {
    margin: 0;

    color: var(--tekst);

    font-size: 1.05rem;
}

.result-header p {
    margin: 5px 0 0;

    color: var(--tekst-slabi);

    font-size: 0.82rem;
}


.result-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 14px;
}

.secondary-button {
    min-height: 36px;

    padding: 0 14px;

    border:
        1px solid var(--rub);

    border-radius: 9px;

    color: var(--brend-tamna);
    background: var(--povrsina);

    font-size: 0.85rem;
    font-weight: 650;

    cursor: pointer;

    transition:
        background 0.18s ease,
        border-color 0.18s ease;
}

.secondary-button:hover:not(:disabled) {
    border-color: var(--brend);

    background: var(--brend-svijetla);
}

.secondary-button:disabled {
    color: var(--tekst-slabi);

    cursor: not-allowed;
}


/* ==========================================================================
   LEGEND
   ========================================================================== */

.legend {
    display: flex;
    align-items: center;

    gap: 10px;
}

.legend-item {
    display: inline-flex;
    align-items: center;

    gap: 5px;

    color: var(--tekst-blagi);

    font-size: 0.78rem;
    font-weight: 650;
}

.legend-color {
    width: 12px;
    height: 12px;

    border-radius: 3px;

    border:
        1px solid rgba(0, 0, 0, 0.06);
}

.importance-0 {
    background: var(--povrsina);
}

/* Korisno je podvlaka, pa i kvadratić legende ima samo donju liniju */
.importance-1 {
    background: var(--povrsina);
    box-shadow: inset 0 -3px 0 var(--korisno-linija);
}

.importance-2 {
    background: var(--vazno);
    color: var(--vazno-tekst);
}

.importance-3 {
    background: var(--kljucno);
}


/* ==========================================================================
   RESULT TEXT
   ========================================================================== */

.text-result {
    padding: 24px;

    color: var(--tekst);

    font-size: 1rem;
    line-height: 1.85;

    white-space: normal;

    overflow-wrap: anywhere;
}

.text-result h3 {
    margin:
        0 0 16px;

    color: var(--tekst);

    font-size: 1.35rem;
}

.text-result hr {
    height: 1px;

    margin:
        0 0 20px;

    border: 0;

    background: var(--rub);
}


/*
 * Svaki AI segment je span.
 *
 * Zato ovdje koristimo inline-block kako bi
 * pozadina svakog segmenta bila vizuelno jasna.
 */

.text-result span[class^="bitnost-"] {
    display: inline;

    padding:
        2px 3px;

    border-radius: 4px;

    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}


/* Svaki odlomak je pasus; klikom ili označavanjem riječi student mijenja boju. */
.text-result .odlomak {
    margin: 0 0 0.9em;

    cursor: pointer;
}

/* Listanje stranica: ‹  Stranica [3] / 12  › */
.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    padding: 10px 16px;

    border-bottom: 1px solid var(--rub);

    background: var(--povrsina);
}

.pager[hidden] {
    display: none;
}

.pager-button {
    width: 38px;
    height: 38px;

    border: 1px solid var(--rub);
    border-radius: 10px;

    color: var(--brend-tamna);
    background: var(--povrsina);

    font-size: 1.3rem;
    line-height: 1;

    cursor: pointer;

    transition:
        background 0.18s ease,
        border-color 0.18s ease;
}

.pager-button:hover:not(:disabled) {
    border-color: var(--brend);
    background: var(--brend-svijetla);
}

.pager-button:disabled {
    opacity: 0.4;
    cursor: default;
}

.pager-label {
    display: flex;
    align-items: center;
    gap: 8px;

    color: var(--tekst-2);

    font-size: 0.9rem;
    font-weight: 600;
}

.pager-label input {
    width: 64px;
    min-height: 36px;

    padding: 0 8px;

    border: 1px solid var(--rub);
    border-radius: 8px;

    color: var(--tekst);

    font: inherit;
    text-align: center;
}

.pager-label input:focus {
    border-color: var(--brend);
    outline: none;
}

/* Rezultat sa stranicama: siva podloga, svaka stranica je bijeli list */
.text-result.sa-stranicama {
    background: var(--list-pozadina);
}

.list-stranice {
    max-width: 860px;

    margin: 0 auto 18px;
    padding: 22px 28px 26px;

    border: 1px solid var(--list-rub);
    border-radius: 10px;

    background: var(--povrsina);

    box-shadow:
        0 2px 10px
        rgba(15, 23, 42, 0.06);
}

.list-stranice:last-child {
    margin-bottom: 0;
}

.stranica-oznaka {
    display: flex;
    align-items: center;
    gap: 10px;

    margin: 0 0 14px;

    color: var(--tekst-slabi);

    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.stranica-oznaka::after {
    content: "";
    flex: 1;

    height: 1px;

    background: var(--list-oznaka);
}

.list-stranice .odlomak:last-child {
    margin-bottom: 0;
}

/* Naslov iz skripte (veličina se postavlja u app.js, kao u originalu) */
.text-result .naslov-skripte {
    margin: 0.7em 0 0.45em;

    color: var(--tekst);

    font-weight: 700;
    line-height: 1.3;
}

.list-stranice .naslov-skripte:first-of-type {
    margin-top: 0;
}

/* Tabela iz PDF-a: red tabele je jedan odlomak (boji se cijeli red) */
.tabela-omot {
    margin: 0 0 0.9em;

    overflow-x: auto;
}

.tabela-skripte {
    width: 100%;

    border-collapse: collapse;

    font-size: 0.92em;
    line-height: 1.5;
}

.tabela-skripte th,
.tabela-skripte td {
    padding: 6px 10px;

    border: 1px solid var(--tabela-rub);

    text-align: left;
    vertical-align: top;
}

.tabela-skripte th {
    background: var(--tabela-zaglavlje);

    font-weight: 700;
}

.tabela-skripte tr {
    cursor: pointer;
}

.tabela-skripte tr.bitnost-3 > * {
    background: var(--kljucno);
    color: var(--kljucno-tekst);

    font-weight: 650;
}

.tabela-skripte tr.bitnost-2 > * {
    background: var(--vazno);
    color: var(--vazno-tekst);
}

/* "Korisno" u tabeli: linija na početku reda umjesto podvlake */
.tabela-skripte tr.bitnost-1 {
    text-decoration: none;
}

.tabela-skripte tr.bitnost-1 > :first-child {
    box-shadow: inset 4px 0 0 var(--korisno-linija);
}

/*
 * Boja koju je student promijenio (a ne AI): mala olovka iza rečenice, vidljiva
 * samo kad je miš na toj rečenici (inače bi skripta s mnogo ispravki bila pretrpana).
 */
.tabela-skripte tr.izmijenjeno > :last-child::after {
    content: " ✎";

    color: var(--tekst-slabi);

    font-size: 0.75em;
    font-weight: 400;

    opacity: 0;
}

.text-result span.bitnost-3.izmijenjeno::after {
    color: rgba(58, 18, 16, 0.55);
}

.text-result span.izmijenjeno::after {
    content: "✎";

    margin-left: 3px;

    color: var(--tekst-slabi);

    font-size: 0.75em;
    font-weight: 400;

    opacity: 0;
}

.text-result span.izmijenjeno:hover::after,
.tabela-skripte tr.izmijenjeno:hover > :last-child::after {
    opacity: 1;
}

/* Riječi koje je student sam obojio: jača boja od boje odlomka */
.text-result mark {
    padding: 1px 2px;

    border-radius: 3px;

    color: inherit;
}

.oznaka-1 {
    background: var(--oznaka-korisno);
    color: var(--vazno-tekst);
}

.oznaka-2 {
    background: var(--oznaka-vazno);
    color: var(--vazno-tekst);
}

.oznaka-3,
.text-result mark.oznaka-3,
.quiz-source-text mark.oznaka-3 {
    background: var(--oznaka-kljucno);
    color: var(--kljucno-tekst);
    font-weight: 650;
}

/* Anatomija: latinski nazivi markirani svijetloljubičasto, tamna podebljana slova (dugme "Latinski nazivi");
   boja odlomka ostaje oko njih, a naziv se čita i preko nje */
.text-result .latinski {
    padding: 0 2px;
    border-radius: 3px;
    color: #3b0764;
    background: #e9d5ff;
    box-shadow: 0 0 0 1px #c4b5fd;
    font-weight: 700;
}

html[data-tema="tamna"] .text-result .latinski {
    color: #f5f3ff;
    background: #5b21b6;
    box-shadow: 0 0 0 1px #7c3aed;
}

.latinski-dugme {
    margin-left: 8px;
    border: 1px solid var(--povrsina-2);
}

.latinski-dugme.aktivno {
    color: #6d28d9;
}


/* ==========================================================================
   ALATKA ZA BOJE
   ========================================================================== */

.color-toolbar {
    position: absolute;
    z-index: 20;

    display: flex;
    flex-wrap: wrap;
    gap: 4px;

    max-width: calc(100vw - 16px);

    padding: 6px;

    border: 1px solid var(--rub);
    border-radius: 10px;

    background: var(--povrsina);

    box-shadow:
        0 10px 30px
        rgba(15, 23, 42, 0.16);
}

.color-toolbar[hidden] {
    display: none;
}

.color-choice {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    min-height: 32px;

    padding: 0 10px;

    border: 0;
    border-radius: 7px;

    color: var(--tekst-2);
    background: var(--povrsina-2);

    font-size: 0.8rem;
    font-weight: 650;

    cursor: pointer;
}

.color-choice:hover {
    background: var(--brend-svijetla);
}

.color-reset {
    color: var(--tekst-blagi);
    font-weight: 500;
}


/* ==========================================================================
   KVIZ
   ========================================================================== */

.quiz-dialog {
    width: min(640px, calc(100vw - 24px));
    max-height: calc(100vh - 48px);

    padding: 0;

    border: 0;
    border-radius: 16px;

    color: var(--tekst);

    box-shadow:
        0 24px 60px
        rgba(15, 23, 42, 0.25);
}

.quiz-dialog::backdrop {
    background: rgba(15, 23, 42, 0.45);
}

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

    padding: 16px 20px;

    border-bottom: 1px solid var(--rub);
}

.quiz-header h2 {
    margin: 0;

    font-size: 1.05rem;

    overflow-wrap: anywhere;
}

.quiz-close {
    width: 36px;
    height: 36px;

    border: 0;
    border-radius: 9px;

    color: var(--tekst-blagi);
    background: transparent;

    font-size: 1.4rem;
    line-height: 1;

    cursor: pointer;
}

.quiz-close:hover {
    background: var(--povrsina-2);
}

.quiz-body {
    padding: 20px;
}

.quiz-body .loading {
    min-height: 160px;
}

.quiz-counter {
    margin: 0 0 6px;

    color: var(--tekst-blagi);

    font-size: 0.8rem;
    font-weight: 650;
}

.quiz-question {
    margin: 0 0 16px;

    font-size: 1.02rem;
    font-weight: 650;
    line-height: 1.5;
}

.quiz-options,
.quiz-answers {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.quiz-option,
.quiz-answer {
    width: 100%;

    padding: 12px 14px;

    border: 1px solid var(--rub);
    border-radius: 10px;

    color: var(--tekst);
    background: var(--povrsina);

    text-align: left;
    line-height: 1.45;

    cursor: pointer;

    transition:
        border-color 0.18s ease,
        background 0.18s ease;
}

.quiz-option {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.quiz-option span {
    color: var(--tekst-blagi);
    font-size: 0.82rem;
}

.quiz-option:hover:not(:disabled),
.quiz-answer:hover:not(:disabled) {
    border-color: var(--brend);
    background: var(--brend-svijetla);
}

.quiz-option:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.quiz-answer:disabled {
    cursor: default;
}

/* Izabran odgovor (tokom rješavanja; u pregledu ga dodatno ističe deblji okvir) */
.quiz-answer.izabran {
    border-width: 2px;
}

.quiz-answer.izabran:not(.tacno):not(.netacno) {
    border-color: var(--brend);
    background: var(--brend-svijetla);
}

.quiz-answer.tacno {
    border-color: var(--uspjeh);
    background: var(--uspjeh-pozadina);
}

.quiz-answer.netacno {
    border-color: var(--greska);
    background: var(--greska-pozadina);
}

.quiz-explanation {
    margin: 6px 4px 0;

    color: var(--tekst-2);

    font-size: 0.85rem;
    line-height: 1.5;
}

.quiz-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 12px;

    margin-top: 18px;
}

.quiz-feedback {
    margin-right: auto;

    font-weight: 700;
}

.quiz-feedback.tacno {
    color: var(--uspjeh);
}

.quiz-feedback.netacno {
    color: var(--greska);
}

.quiz-result {
    margin: 8px 0 0;

    font-size: 1.15rem;
    font-weight: 700;
    text-align: center;
}

.quiz-footer-center {
    justify-content: center;
}

/* Izbor kviza: cijelo gradivo ili lekcije (od naslova do naslova), broj pitanja */
.quiz-scope {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;

    margin-bottom: 12px;
}

.quiz-scope label,
.quiz-lesson {
    display: flex;
    align-items: center;
    gap: 8px;

    cursor: pointer;
}

.quiz-lessons {
    display: flex;
    flex-direction: column;
    gap: 2px;

    max-height: 320px;
    overflow-y: auto;

    margin-bottom: 14px;
    padding: 8px;

    border: 1px solid var(--rub);
    border-radius: 10px;

    background: var(--povrsina-2);
}

.quiz-lesson {
    padding: 6px 8px;

    border-radius: 8px;

    line-height: 1.35;
}

.quiz-lesson:hover {
    background: var(--brend-svijetla);
}

.quiz-lesson.nivo-1 {
    font-weight: 650;
}

.quiz-lesson.nivo-2 {
    padding-left: 26px;
}

.quiz-lesson.nivo-3 {
    padding-left: 44px;
    font-size: 0.92rem;
}

.quiz-lesson.nivo-4 {
    padding-left: 62px;
    font-size: 0.9rem;
}

.quiz-lesson.prazna {
    opacity: 0.5;
    cursor: default;
}

.quiz-lesson-title {
    flex: 1;
}

.quiz-lesson-count {
    color: var(--tekst-blagi);

    font-size: 0.8rem;
    font-weight: 500;
}

.quiz-count {
    display: flex;
    align-items: center;
    gap: 10px;

    font-weight: 600;
}

.quiz-count select {
    padding: 6px 10px;

    border: 1px solid var(--rub-jaci);
    border-radius: 8px;

    color: var(--tekst);
    background: var(--povrsina);

    font: inherit;
    font-weight: 500;
}

.quiz-subtitle {
    margin: 16px 0 8px;

    font-weight: 600;
}

/* Obrazloženje odgovora: odmah kod netačnog, na dugme kod tačnog */
.quiz-explain-toggle {
    margin-top: 12px;
}

.quiz-explain-box {
    margin-top: 14px;
    padding: 14px 16px;

    border: 1px solid var(--uspjeh-rub);
    border-left: 4px solid var(--uspjeh);
    border-radius: 12px;

    background: var(--povrsina);
    box-shadow: 0 8px 24px var(--brend-sjena);

    animation: obrazlozenje-ulaz 0.18s ease-out;
}

.quiz-explain-box.netacno {
    border-color: var(--greska-rub);
    border-left-color: var(--greska);
}

.quiz-explain-box .quiz-explanation {
    margin: 2px 0 10px;
}

.quiz-explanation-label {
    margin: 0;

    font-size: 0.85rem;
    font-weight: 700;
}

.quiz-explain-box .quiz-source {
    margin-top: 8px;
}

@keyframes obrazlozenje-ulaz {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

/* Obavijest o limitu: zaglavlje s ikonom, traka napretka, vrijeme obnove, planovi */
.quiz-dialog {
    background: var(--povrsina);
}

.limit-dialog {
    width: min(560px, calc(100vw - 24px));

    animation: limit-ulaz 0.22s ease-out;
}

@keyframes limit-ulaz {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }
}

.limit-hero {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;

    padding: 28px 24px 6px;

    text-align: center;
}

.limit-hero h2 {
    margin: 0;

    color: var(--tekst);

    font-size: 1.2rem;
    line-height: 1.35;
}

.limit-hero .quiz-close {
    position: absolute;
    top: 12px;
    right: 12px;
}

.limit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;

    border-radius: 50%;

    color: var(--brend);
    background: var(--brend-svijetla);
}

.limit-icon svg {
    width: 26px;
    height: 26px;
}

.limit-body {
    padding: 8px 24px 24px;

    text-align: center;
}

.limit-progress {
    margin: 4px 0 14px;
}

.limit-progress p {
    margin: 0 0 8px;

    color: var(--tekst);

    font-weight: 650;
}

.limit-bar {
    height: 8px;

    border-radius: 999px;

    background: var(--povrsina-2);

    overflow: hidden;
}

.limit-bar span {
    display: block;

    height: 100%;

    border-radius: inherit;

    background: var(--brend);
}

.limit-reason {
    margin: 0 0 12px;

    color: var(--tekst-2);

    line-height: 1.55;
}

.limit-again {
    display: inline-block;

    margin: 0 0 20px;

    padding: 8px 14px;

    border-radius: 999px;

    color: var(--brend-tamna);
    background: var(--brend-svijetla);

    font-size: 0.88rem;
    font-weight: 650;
}

.limit-plans-title {
    margin: 4px 0 12px;

    padding-top: 18px;

    border-top: 1px solid var(--rub);

    color: var(--tekst-blagi);

    font-size: 0.85rem;
    font-weight: 650;
}

.limit-body .plan-card {
    text-align: left;
}

.plan-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.plan-card {
    display: flex;
    flex-direction: column;
    gap: 6px;

    padding: 16px;

    border: 1px solid var(--rub);
    border-radius: 14px;

    background: var(--povrsina);

    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

/* Prelaz mišem: boja znaka stranice, posvijetljena */
.plan-card:hover {
    border-color: var(--brend);
    background: var(--brend-svijetla);

    box-shadow: 0 8px 20px var(--brend-sjena);

    transform: translateY(-2px);
}

.plan-card ul {
    margin: 4px 0 8px;
    padding-left: 18px;

    color: var(--tekst-2);

    font-size: 0.85rem;
    line-height: 1.6;
}

.plan-price {
    color: var(--brend);

    font-size: 1.1rem;
    font-weight: 750;
}

.quiz-message {
    margin: 12px 0 0;
}

/* Brojevi pitanja u pregledu: zeleno tačno, crveno netačno */
.quiz-dots {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;

    margin-bottom: 14px;
}

.quiz-dot {
    min-width: 30px;
    height: 30px;

    padding: 0 6px;

    border: 1px solid transparent;
    border-radius: 8px;

    font-size: 0.8rem;
    font-weight: 700;

    cursor: pointer;
}

.quiz-dot.tacno {
    color: var(--uspjeh);
    background: var(--uspjeh-pozadina);
}

.quiz-dot.netacno {
    color: var(--greska);
    background: var(--greska-pozadina);
}

.quiz-dot.trenutno {
    border-color: var(--tekst);
}

/* Odlomak iz skripte u pregledu (student u njemu može označiti pojam) */
.quiz-source {
    margin-top: 18px;

    padding: 14px;

    border: 1px solid var(--rub);
    border-radius: 12px;

    background: var(--povrsina-2);
}

.quiz-source-title {
    margin: 0 0 6px;

    color: var(--tekst-blagi);

    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.quiz-source-text {
    margin: 0 0 10px;

    line-height: 1.7;
}

.quiz-source-text mark {
    padding: 1px 2px;

    border-radius: 3px;

    color: inherit;
}

.quiz-source-hint {
    margin: 0 0 8px;

    color: var(--tekst-blagi);

    font-size: 0.82rem;
    line-height: 1.5;
}

.quiz-mark-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;

    margin-bottom: 4px;
}


/* ==========================================================================
   IMPORTANCE LEVELS
   ========================================================================== */

.bitnost-0 {
    background: transparent;
}

.bitnost-1 {
    background: transparent;

    text-decoration: underline 3px var(--korisno-linija);
    text-underline-offset: 4px;
    /* Neprekinuta linija: inače se prekida ispod slova g, j, p, đ i izgleda kao da se riječ lomi */
    text-decoration-skip-ink: none;
}

.bitnost-2 {
    background: var(--vazno);
    color: var(--vazno-tekst);
}

.bitnost-3 {
    background: var(--kljucno);
    color: var(--kljucno-tekst);

    font-weight: 650;
}


/* ==========================================================================
   LOADING
   ========================================================================== */

.loading {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    min-height: 280px;

    color: var(--tekst-blagi);

    font-size: 0.95rem;
}

.loading-spinner {
    width: 20px;
    height: 20px;

    border:
        2px solid var(--rub);

    border-top-color:
        var(--brend);

    border-radius: 50%;

    animation:
        spin 0.7s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}


/* ==========================================================================
   ERROR
   ========================================================================== */

.error-message {
    display: flex;
    align-items: center;

    min-height: 150px;

    padding: 20px;

    color: var(--greska);

    background: var(--greska-pozadina);

    border:
        1px solid var(--greska-rub);

    border-radius: 10px;

    line-height: 1.6;
}


/* ==========================================================================
   FOOTER
   ========================================================================== */

.app-footer {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 8px;

    padding: 24px 0 8px;

    color: var(--tekst-slabi);

    font-size: 0.78rem;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* Uži ekrani: meni ide iznad sadržaja, dvije kartice jedna do druge */
@media (max-width: 960px) {

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

    /* Meni postane traka iznad sadržaja; korisnik desno */
    .sidebar {
        position: static;

        flex-direction: row;
        align-items: center;

        min-height: 0;
    }

    .nav-menu {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .nav-item {
        width: auto;
    }

    .nav-user {
        width: auto;
        max-width: 240px;

        border-top: 0;
        border-radius: 10px;
    }
}

@media (max-width: 760px) {

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

    .nav-user {
        max-width: none;
    }

    .panel-card {
        padding: 16px;
    }

    .result-actions {
        width: 100%;
    }

    .app {
        width:
            min(
                100% - 20px,
                1180px
            );

        padding-top: 18px;
    }

    .app-header {
        flex-direction: column;
    }

    .language-control {
        width: 100%;

        justify-content: space-between;
    }

    .language-control select {
        min-width: 140px;
    }

    .settings-card {
        grid-template-columns: 1fr;

        padding: 16px;
    }

    .tabs {
        padding: 6px;
    }

    .input-panel {
        padding: 14px;
    }

    textarea {
        min-height: 88px;

        padding: 14px;
    }

    .action-row {
        padding:
            0 14px 14px;
    }

    .primary-button {
        width: 100%;
    }

    .result-header {
        align-items: flex-start;

        flex-direction: column;
    }

    .legend {
        width: 100%;

        justify-content: flex-start;
    }

    .text-result {
        padding: 18px;

        font-size: 0.94rem;
        line-height: 1.8;
    }
}


/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media (max-width: 430px) {

    .app {
        width:
            calc(100% - 14px);
    }

    .app-header h1 {
        font-size: 1.5rem;
    }

    .subtitle {
        font-size: 0.85rem;
    }

    .language-control {
        align-items: flex-start;

        flex-direction: column;
    }

    .language-control select {
        width: 100%;
    }

    .tab-button {
        padding: 0 10px;

        font-size: 0.82rem;
    }

    .legend {
        flex-wrap: wrap;
    }

    .file-dropzone {
        min-height: 210px;
    }
}


/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
.file-dropzone:focus-within {
    outline:
        3px solid
        var(--brend-fokus);

    outline-offset: 2px;
}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;
    }
}

/*
|--------------------------------------------------------------------------
| UČENJE: objasni pojam, kartice, otvoreni kviz
|--------------------------------------------------------------------------
*/
.explain-choice {
    color: var(--brend-tamna);
    background: var(--brend-svijetla);
}

.explain-box {
    position: absolute;
    z-index: 21;
    width: min(420px, calc(100vw - 16px));
    padding: 12px 14px;
    border: 1px solid var(--rub);
    border-radius: 12px;
    background: var(--povrsina);
    color: var(--tekst);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
    font-size: 0.92rem;
    line-height: 1.5;
}

.explain-box[hidden] {
    display: none;
}

.explain-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.explain-part {
    margin: 6px 0;
}

.explain-label {
    display: block;
    color: var(--brend-tamna);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.explain-note {
    margin: 8px 0 0;
    color: var(--tekst-blagi);
    font-size: 0.8rem;
}

.quiz-kinds label {
    display: block;
}

.flashcard {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 200px;
    margin: 10px 0 14px;
    padding: 24px;
    border: 1px solid var(--rub-jaci);
    border-radius: 16px;
    background: var(--povrsina-2);
    color: var(--tekst);
    font-size: 1.05rem;
    line-height: 1.5;
    text-align: center;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
}

.flashcard:hover {
    transform: translateY(-1px);
}

.flashcard.okrenuta {
    background: var(--brend-svijetla);
}

.open-answer {
    box-sizing: border-box;
    width: 100%;
    margin: 6px 0 12px;
    padding: 10px 12px;
    border: 1px solid var(--rub-jaci);
    border-radius: 10px;
    background: var(--povrsina);
    color: var(--tekst);
    font: inherit;
    line-height: 1.5;
    resize: vertical;
}

.quiz-result-score {
    margin: 4px 0 14px;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--brend-tamna);
}

.open-result {
    margin: 0 0 14px;
    padding: 12px 14px;
    border: 1px solid var(--rub);
    border-radius: 12px;
    background: var(--povrsina-2);
}

.open-percent {
    float: right;
    font-weight: 800;
    color: var(--brend-tamna);
}

.open-answer-shown,
.open-feedback {
    margin: 6px 0;
}

.open-feedback.dobro strong {
    color: var(--uspjeh);
}

.open-feedback.lose strong {
    color: var(--greska);
}

.open-feedback.fali strong {
    color: var(--vazno-tekst);
}