/* ==========================================================================
   LogicAI - zajednicki dizajn sistem

   Izgled "kontrolne table": skoro crna podloga, velike zaobljene kartice
   sa tankom ivicom, krupni brojevi, meni od "pilula". Tema je ljubicasta
   (akcija, izbor, grafikoni) i limun-zuta (istaknuto: glavni poziv na
   akciju, vrh grafikona, znacke). Bela pilula je "ovde si" u meniju.

   Ovaj fajl je jedno mesto za sve: paleta, fontovi (Poppins za naslove i
   brojeve, Inter za tekst - oba sa naseg servera), radijusi, povrsine i
   osnovne komponente. Ucitava se PRVI, pre stila strane, tako da strana i
   dalje moze da pregazi bilo sta svojim pravilima.

   Imena promenljivih (--sys-blue, --glass, --label...) su ostala ista iz
   prethodnog iOS dizajna, samo su vrednosti nove - zato strane nisu morale
   da menjaju svoj CSS da bi dobile novu paletu.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. FONTOVI - po dva fajla: osnovna latinica i prosirena (č ć đ š ž).
   Pregledac skida samo deo koji strana stvarno koristi (unicode-range).
   font-display: swap - tekst se crta odmah sistemskim fontom, pa se zameni.
   -------------------------------------------------------------------------- */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url(fonts/inter-latin-ext-wght-normal.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url(fonts/inter-latin-wght-normal.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src: url(fonts/poppins-latin-ext-400-normal.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src: url(fonts/poppins-latin-400-normal.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-display: swap;
    font-weight: 500;
    src: url(fonts/poppins-latin-ext-500-normal.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-display: swap;
    font-weight: 500;
    src: url(fonts/poppins-latin-500-normal.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-display: swap;
    font-weight: 600;
    src: url(fonts/poppins-latin-ext-600-normal.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-display: swap;
    font-weight: 600;
    src: url(fonts/poppins-latin-600-normal.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   1. TOKENI - tamna tema je podrazumevana
   -------------------------------------------------------------------------- */

:root {
    color-scheme: dark;

    /* Tema: ljubicasta + limun-zuta. Ostale boje su za ikonice modula,
       grafikone i stanja, i namerno su prigusene da ne otimaju paznju. */
    --sys-purple: #A78BFA;     /* lavanda - tekst, ikonice, grafikoni */
    --sys-indigo: #8E6CFF;     /* ljubicasta - dugmad, izbor */
    --sys-yellow: #DCF24C;     /* limun-zuta - istaknuto */
    --sys-blue: #7AA2FF;
    --sys-green: #4ADE80;
    --sys-orange: #FBBF5A;
    --sys-pink: #F08BD0;
    --sys-red: #F87171;
    --sys-teal: #5EDBD0;

    /* Tekst na zutoj podlozi je uvek taman */
    --on-yellow: #0B0B0E;

    /* Prelivi - za znak aplikacije, istaknute brojeve i grafikone */
    --grad-hyper: linear-gradient(110deg, #8E6CFF 0%, #C4A5FF 50%, #DCF24C 100%);
    --grad-brand: linear-gradient(135deg, #8E6CFF 0%, #B99BFF 100%);

    /* Pozadine - od najdublje ka izdignutoj povrsini */
    --bg-base: #08080A;
    --bg-grouped: #0C0C0F;
    --bg-secondary: #141418;
    --bg-tertiary: #1C1C22;
    --bg-elevated: #17171C;

    /* Materijali - trake (navbar, toolbar) */
    --material: rgba(10, 10, 13, 0.82);
    --material-thin: rgba(10, 10, 13, 0.64);
    --blur: saturate(140%) blur(16px);

    /* Povrsine (kartice, polja, meniji). Ime "glass" je ostalo iz starog
       dizajna; sad su to skoro neprovidne tamne kartice sa tankom ivicom. */
    --glass: rgba(20, 20, 24, 0.86);
    --glass-thin: rgba(255, 255, 255, 0.045);
    --glass-strong: rgba(16, 16, 20, 0.95);
    --glass-stroke: rgba(255, 255, 255, 0.075);
    --glass-stroke-top: rgba(255, 255, 255, 0.06);
    --glass-blur: saturate(130%) blur(14px);
    --glass-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);

    /* Boje ambijenta iza svega */
    --ambient-1: rgba(142, 108, 255, 0.20);
    --ambient-2: rgba(167, 139, 250, 0.12);
    --ambient-3: rgba(220, 242, 76, 0.06);

    /* Tekst - cetiri nivoa */
    --label: #F4F4F6;
    --label-secondary: rgba(235, 235, 245, 0.62);
    --label-tertiary: rgba(235, 235, 245, 0.38);
    --label-quaternary: rgba(235, 235, 245, 0.2);

    /* Ispune - dugmad bez obruba, polja, segmentne kontrole */
    --fill: rgba(255, 255, 255, 0.14);
    --fill-secondary: rgba(255, 255, 255, 0.1);
    --fill-tertiary: rgba(255, 255, 255, 0.07);
    --fill-quaternary: rgba(255, 255, 255, 0.045);

    /* Linije razdvajanja */
    --separator: rgba(255, 255, 255, 0.08);
    --separator-opaque: #232329;

    /* Akcent - ljubicasta je "boja akcije" (dugmad, veze, fokus) */
    --tint: var(--sys-indigo);
    --tint-pressed: #7B57F5;
    --on-tint: #FFFFFF;

    /* "Ovde si" u meniju i izabrana pilula: bela pilula sa tamnim tekstom */
    --pill-on: #F4F4F6;
    --pill-on-text: #0B0B0E;

    /* Semanticke boje stanja - odvojene od akcenta */
    --positive: var(--sys-green);
    --negative: var(--sys-red);
    --warning: var(--sys-orange);

    /* Radijusi - velike, mekane kartice kao na kontrolnoj tabli */
    --r-xs: 8px;
    --r-sm: 10px;
    --r-md: 12px;
    --r-lg: 20px;
    --r-xl: 24px;
    --r-2xl: 28px;
    --r-pill: 999px;

    /* Senke */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.6);

    /* Tipografija - Poppins za naslove, brojeve, dugmad i meni;
       Inter za tekst koji se cita (poruke, opisi, tabele) */
    --font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --font-display: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
    --font-rounded: var(--font-display);

    /* Tekstualni stilovi - velicina / prored / debljina */
    --t-large-title: 500 2.25rem/1.15 var(--font-display);  /* 36px */
    --t-title1: 500 1.75rem/1.2 var(--font-display);        /* 28px */
    --t-title2: 500 1.3125rem/1.3 var(--font-display);      /* 21px */
    --t-title3: 500 1.125rem/1.35 var(--font-display);      /* 18px */
    --t-headline: 600 0.9375rem/1.4 var(--font);            /* 15px */
    --t-body: 400 0.9375rem/1.55 var(--font);               /* 15px - osnovni tekst */
    --t-callout: 400 0.9375rem/1.5 var(--font);             /* 15px */
    --t-subhead: 400 0.875rem/1.5 var(--font);              /* 14px */
    --t-footnote: 400 0.8125rem/1.45 var(--font);           /* 13px */
    --t-caption: 500 0.75rem/1.35 var(--font);              /* 12px */

    /* Kretanje */
    --ease: cubic-bezier(0.32, 0.72, 0, 1);
    --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --dur: 0.3s;
    --dur-fast: 0.18s;

    /* Sigurne zone na telefonu (notch, home indikator) */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);

    --navbar-h: 44px;
    --tabbar-h: 49px;
    --tap: 44px; /* najmanja povrsina za dodir */
}

/* Svetla tema - body.light-mode (localStorage 'theme') */
body.light-mode {
    color-scheme: light;

    --sys-purple: #7C5CF0;
    --sys-indigo: #6D4AFF;
    --sys-yellow: #D4EC2C;
    --sys-blue: #3B6FE0;
    --sys-green: #15A34A;
    --sys-orange: #D97706;
    --sys-pink: #C2479A;
    --sys-red: #DC2626;
    --sys-teal: #0E9488;

    --grad-hyper: linear-gradient(110deg, #6D4AFF 0%, #A78BFA 50%, #B8D11C 100%);
    --grad-brand: linear-gradient(135deg, #6D4AFF 0%, #9B7BFF 100%);

    --bg-base: #F3F3F6;
    --bg-grouped: #ECECF1;
    --bg-secondary: #FFFFFF;
    --bg-tertiary: #F4F4F7;
    --bg-elevated: #FFFFFF;

    --material: rgba(255, 255, 255, 0.84);
    --material-thin: rgba(255, 255, 255, 0.68);

    --glass: rgba(255, 255, 255, 0.92);
    --glass-thin: rgba(11, 11, 20, 0.035);
    --glass-strong: rgba(255, 255, 255, 0.96);
    --glass-stroke: rgba(11, 11, 20, 0.08);
    --glass-stroke-top: rgba(255, 255, 255, 0.9);
    --glass-shadow: 0 1px 2px rgba(11, 11, 20, 0.04), 0 10px 28px rgba(11, 11, 20, 0.06);

    --ambient-1: rgba(109, 74, 255, 0.10);
    --ambient-2: rgba(167, 139, 250, 0.08);
    --ambient-3: rgba(212, 236, 44, 0.10);

    --label: #0B0B10;
    --label-secondary: rgba(11, 11, 20, 0.62);
    --label-tertiary: rgba(11, 11, 20, 0.4);
    --label-quaternary: rgba(11, 11, 20, 0.2);

    --fill: rgba(11, 11, 20, 0.1);
    --fill-secondary: rgba(11, 11, 20, 0.075);
    --fill-tertiary: rgba(11, 11, 20, 0.055);
    --fill-quaternary: rgba(11, 11, 20, 0.04);

    --separator: rgba(11, 11, 20, 0.09);
    --separator-opaque: #E4E4EA;

    --tint-pressed: #5A36F0;

    --pill-on: #0B0B10;
    --pill-on-text: #FFFFFF;

    --shadow-sm: 0 1px 2px rgba(11, 11, 20, 0.06);
    --shadow-md: 0 8px 22px rgba(11, 11, 20, 0.08);
    --shadow-lg: 0 28px 64px rgba(11, 11, 20, 0.14);

    /* Ovo mora ovde iako je vec na :root. var() se razresi TAMO gde je
       promenljiva deklarisana, pa bi --tint ostao na tamnoj vrednosti i
       posle izmene --sys-indigo iznad. Isto vazi za svaki alias na dnu. */
    --tint: var(--sys-indigo);
    --positive: var(--sys-green);
    --negative: var(--sys-red);
    --warning: var(--sys-orange);
}

/* Na telefonu nema zamucenja iza kartica: kartice su ionako skoro
   neprovidne, a zamucenje je u WebView-u pravi posao za graficki cip. */
@media (max-width: 768px) {
    :root { --glass-blur: none; --glass: rgba(20, 20, 24, 0.94); }
    body.light-mode { --glass: rgba(255, 255, 255, 0.97); }
}

/* --------------------------------------------------------------------------
   2. OSNOVA
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    /* iOS inercijalni skrol i unutar kontejnera */
    -webkit-overflow-scrolling: touch;
}

body {
    margin: 0;
    font: var(--t-body);
    letter-spacing: -0.01em;
    color: var(--label);
    background: var(--bg-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* iOS ne dozvoljava odabir teksta na dugmicima, ali ga dozvoljava u sadrzaju */
    -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4 {
    margin: 0;
    text-wrap: balance;
    letter-spacing: -0.022em;
}

h1 { font: var(--t-title1); }
h2 { font: var(--t-title2); }
h3 { font: var(--t-title3); }
h4 { font: var(--t-headline); }

p { margin: 0; }

a { color: var(--tint); text-decoration: none; }
a:hover { text-decoration: none; opacity: 0.8; }

/* Vidljiv fokus - obavezno za tastaturu, ali ne i na klik misem */
:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--tint) 55%, transparent);
    outline-offset: 2px;
    border-radius: var(--r-xs);
}

::selection {
    background: color-mix(in srgb, var(--tint) 30%, transparent);
}

/* Diskretan skrolbar u macOS stilu */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--fill-tertiary);
    border-radius: var(--r-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--fill-secondary); }

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

/* --------------------------------------------------------------------------
   3. TIPOGRAFSKI POMOCNICI
   -------------------------------------------------------------------------- */

.large-title { font: var(--t-large-title); letter-spacing: -0.024em; }
.title2 { font: var(--t-title2); }
.headline { font: var(--t-headline); }
.callout { font: var(--t-callout); }
.subhead { font: var(--t-subhead); }
.footnote { font: var(--t-footnote); color: var(--label-secondary); }
.caption { font: var(--t-caption); color: var(--label-tertiary); }

/* Naslov grupe u iOS listama - mala verzalna slova iznad grupe */
.group-label {
    font: var(--t-footnote);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--label-secondary);
    padding: 0 16px 6px;
}

.secondary { color: var(--label-secondary); }
.tertiary { color: var(--label-tertiary); }

/* Cifre koje se poravnavaju u kolonama (iznosi, datumi) */
.tnum { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   4. IKONICE
   Sve ikonice su inline SVG u SF Symbols maniru: linija 1.7px, obla zavrsnica,
   jedinstvena velicina kroz aplikaciju. Boju uzimaju od roditelja
   (currentColor), pa rade i u svetloj i u tamnoj temi bez dodatnog pravila.
   -------------------------------------------------------------------------- */

.icon {
    width: 1.375em;
    height: 1.375em;
    flex-shrink: 0;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -0.28em;
}

.icon-sm { width: 1.125em; height: 1.125em; }
.icon-lg { width: 1.75em; height: 1.75em; }
.icon-xl { width: 2.5em; height: 2.5em; }

/* Ikonica u kvadratu - obojena ikonica na blagoj podlozi iste boje, sa
   tankom ivicom. Kao na kontrolnim tablama: boja govori koji je modul, ali
   ne vice. Boja se bira klasom (.blue, .green...), koja samo postavi --c. */
.icon-tile {
    --c: var(--tint);
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: var(--r-sm);
    color: var(--c);
    background: color-mix(in srgb, var(--c) 15%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 26%, transparent);
    flex-shrink: 0;
}

.icon-tile .icon { width: 17px; height: 17px; stroke-width: 1.9; vertical-align: 0; }
.icon-tile.blue { --c: var(--sys-blue); }
.icon-tile.green { --c: var(--sys-green); }
.icon-tile.indigo { --c: var(--sys-indigo); }
.icon-tile.orange { --c: var(--sys-orange); }
.icon-tile.pink { --c: var(--sys-pink); }
.icon-tile.purple { --c: var(--sys-purple); }
.icon-tile.red { --c: var(--sys-red); }
.icon-tile.teal { --c: var(--sys-teal); }
.icon-tile.gray { --c: var(--label-secondary); }

/* Znak aplikacije - munja na limun-zutom kvadratu, jedini "pun" kvadrat */
.brand-mark,
.shell-logo .icon-tile {
    color: var(--on-yellow);
    background: var(--sys-yellow);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35),
                0 6px 20px color-mix(in srgb, var(--sys-yellow) 22%, transparent);
}

/* Tekst u hiper-prelivu (naslovi na pocetnoj, istaknuti brojevi) */
.text-hyper {
    background: var(--grad-hyper);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* --------------------------------------------------------------------------
   5. DUGMICI
   Cetiri iOS stila: filled (glavna akcija), tinted, plain (samo tekst),
   bordered (macOS). Svi imaju 44px povrsinu za dodir.
   -------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: var(--tap);
    padding: 0 18px;
    border: none;
    border-radius: var(--r-md);
    font: var(--t-headline);
    letter-spacing: -0.01em;
    color: var(--tint);
    background: transparent;
    cursor: pointer;
    transition: transform var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out),
                opacity var(--dur-fast) var(--ease-out);
    -webkit-user-select: none;
    user-select: none;
    text-decoration: none;
}

/* iOS dugme se na pritisak blago smanji - to je ono sto najvise "oda" platformu */
.btn:active { transform: scale(0.97); }
.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.4;
    cursor: default;
    transform: none;
}

.btn-filled {
    color: var(--on-tint);
    background: var(--tint);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18),
                0 6px 18px color-mix(in srgb, var(--tint) 28%, transparent);
}
.btn-filled:hover { background-color: var(--tint-pressed); }

/* Zuto dugme - glavni poziv na akciju (registracija, "Novi razgovor"). Jedno
   po ekranu, da zuta ostane znak "ovo je najvaznije". */
.btn-accent {
    color: var(--on-yellow);
    background: var(--sys-yellow);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4),
                0 8px 22px color-mix(in srgb, var(--sys-yellow) 20%, transparent);
}
.btn-accent:hover { background: color-mix(in srgb, var(--sys-yellow) 88%, #FFFFFF); }

/* Okruglo dugme sa strelicom u uglu kartice ("otvori detalje") */
.btn-circle {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    color: var(--label);
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--glass-stroke), inset 0 0 0 1px var(--fill-tertiary);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn-circle:hover,
.btn-circle.on { background: var(--pill-on); color: var(--pill-on-text); }

.btn-tinted {
    color: var(--tint);
    background: color-mix(in srgb, var(--tint) 16%, transparent);
}
.btn-tinted:hover { background: color-mix(in srgb, var(--tint) 24%, transparent); }

.btn-gray {
    color: var(--label);
    background: var(--fill-tertiary);
}
.btn-gray:hover { background: var(--fill-secondary); }

.btn-bordered {
    color: var(--label);
    background: var(--glass-thin);
    box-shadow: inset 0 0 0 1px var(--glass-stroke);
}
.btn-bordered:hover { background: var(--fill-tertiary); }

.btn-plain { padding: 0 8px; }
.btn-plain:hover { background: var(--fill-quaternary); }

.btn-danger { color: var(--negative); }
.btn-danger.btn-filled { background: var(--negative); color: #FFFFFF; }
.btn-danger.btn-tinted { background: color-mix(in srgb, var(--negative) 16%, transparent); }

.btn-full { width: 100%; }
.btn-pill { border-radius: var(--r-pill); }
.btn-sm { min-height: 32px; padding: 0 12px; font: var(--t-subhead); }

/* Okruglo dugme samo sa ikonicom - toolbar, zatvaranje, mikrofon */
.btn-icon {
    display: inline-grid;
    place-items: center;
    width: var(--tap);
    height: var(--tap);
    padding: 0;
    border: none;
    border-radius: var(--r-pill);
    color: var(--label-secondary);
    background: transparent;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
}

.btn-icon:hover { background: var(--fill-quaternary); color: var(--label); }
.btn-icon:active { transform: scale(0.92); }
.btn-icon.filled { background: var(--tint); color: var(--on-tint); }
.btn-icon.filled:hover { background: var(--tint-pressed); }
.btn-icon.danger:hover { color: var(--negative); }

/* --------------------------------------------------------------------------
   6. TRAKE - navbar (gore), toolbar, tab bar (dole)
   Sve su providne sa zamucenjem, kao u iOS-u, i racunaju sigurne zone.
   -------------------------------------------------------------------------- */

.navbar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: var(--navbar-h);
    padding: 6px max(12px, var(--safe-left)) 6px max(12px, var(--safe-right));
    padding-top: calc(6px + var(--safe-top));
    background: var(--material);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    border-bottom: 0.5px solid var(--separator);
}

/* Naslov je uvek centriran, bez obzira na to koliko je dugmica sa strane -
   zato su leva i desna zona iste sirine (flex: 1) */
.navbar-title {
    flex: 1;
    min-width: 0;
    text-align: center;
    font: var(--t-headline);
    letter-spacing: -0.015em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.navbar-leading,
.navbar-trailing {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
}

/* "< Nazad" u iOS maniru - sevron plus tekst, u boji akcenta */
.nav-back {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-height: var(--tap);
    padding-right: 8px;
    color: var(--tint);
    font: var(--t-body);
    letter-spacing: -0.01em;
}
.nav-back .icon { width: 1.25em; height: 1.25em; stroke-width: 2.4; }
.nav-back:active { opacity: 0.4; }

/* Veliki naslov ispod trake - iOS 11+ obrazac */
.large-title-header {
    padding: 4px max(16px, var(--safe-left)) 10px;
    font: var(--t-large-title);
    letter-spacing: -0.024em;
}

.toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px max(12px, var(--safe-left));
    background: var(--material-thin);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    border-top: 0.5px solid var(--separator);
}

.tabbar {
    position: sticky;
    bottom: 0;
    z-index: 50;
    display: flex;
    min-height: var(--tabbar-h);
    padding-bottom: var(--safe-bottom);
    background: var(--material);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    border-top: 0.5px solid var(--separator);
}

.tabbar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 4px;
    border: none;
    background: transparent;
    color: var(--label-tertiary);
    font: var(--t-caption);
    letter-spacing: 0;
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-out);
}

.tabbar-item .icon { width: 25px; height: 25px; vertical-align: 0; }
.tabbar-item[aria-current="page"],
.tabbar-item.active { color: var(--tint); }

/* --------------------------------------------------------------------------
   7. POVRSINE - kartica i grupisana lista
   Grupisana lista ("inset grouped") je osnovni iOS obrazac za podesavanja i
   spiskove: zaobljen blok na sivoj pozadini, redovi razdvojeni linijom koja
   je uvucena do pocetka teksta, sevron desno.
   -------------------------------------------------------------------------- */

.card {
    background: var(--bg-secondary);
    border-radius: var(--r-lg);
    padding: 18px;
    box-shadow: var(--shadow-sm);
}

.card-plain {
    background: var(--bg-secondary);
    border-radius: var(--r-lg);
    padding: 18px;
}

/* Blok u koji se smestaju .row elementi */
.list {
    background: var(--bg-secondary);
    border-radius: var(--r-md);
    overflow: hidden;
}

.list-inset { margin: 0 16px; }

.row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: var(--tap);
    padding: 11px 16px;
    border: none;
    background: transparent;
    color: inherit;
    font: var(--t-body);
    letter-spacing: -0.01em;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out);
}

/* Linija razdvajanja je uvucena tako da pocinje ispod teksta, ne ispod
   ikonice - to je detalj koji iOS liste ima, a veb liste obicno nemaju */
.row + .row { box-shadow: inset 0 0.5px 0 var(--separator); }
.row:hover { background: var(--fill-quaternary); }
.row:active { background: var(--fill-tertiary); }
.row.static { cursor: default; }
.row.static:hover { background: transparent; }

.row-title { flex: 1; min-width: 0; }
.row-title small {
    display: block;
    font: var(--t-footnote);
    color: var(--label-secondary);
    margin-top: 1px;
}

.row-value {
    color: var(--label-secondary);
    font-variant-numeric: tabular-nums;
}

/* Sevron desno - znak da red vodi nekud */
.row-chevron {
    width: 1.1em;
    height: 1.1em;
    stroke: var(--label-tertiary);
    stroke-width: 2.6;
    fill: none;
    stroke-linecap: round;
    flex-shrink: 0;
}

.row.destructive { color: var(--negative); }

/* --------------------------------------------------------------------------
   8. POLJA ZA UNOS
   -------------------------------------------------------------------------- */

.field,
input[type="text"].field,
input[type="email"].field,
input[type="password"].field,
input[type="number"].field,
input[type="date"].field,
select.field,
textarea.field {
    width: 100%;
    min-height: var(--tap);
    padding: 11px 14px;
    border: none;
    border-radius: var(--r-md);
    font: var(--t-body);
    letter-spacing: -0.01em;
    color: var(--label);
    background: var(--fill-quaternary);
    box-shadow: inset 0 0 0 0.5px var(--separator);
    transition: box-shadow var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out);
    /* iOS zumira stranu kad je font manji od 16px - zato je osnovni 17px */
    font-family: var(--font);
}

.field:focus {
    outline: none;
    background: var(--bg-secondary);
    box-shadow: inset 0 0 0 1px var(--tint),
                0 0 0 3px color-mix(in srgb, var(--tint) 22%, transparent);
}

.field::placeholder { color: var(--label-tertiary); }

textarea.field { resize: vertical; min-height: 88px; line-height: 1.5; }

.field-label {
    display: block;
    font: var(--t-subhead);
    color: var(--label-secondary);
    margin-bottom: 6px;
}

.field-group { display: flex; flex-direction: column; gap: 14px; }

/* Poruka o gresci ispod forme */
.error-msg { margin-top: 10px; font: var(--t-footnote); color: var(--negative); }

/* Polje za pretragu - iOS ima zaobljeno polje sa lupom unutra */
.search-field {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 10px;
    min-height: 36px;
    border-radius: var(--r-sm);
    background: var(--fill-tertiary);
    color: var(--label-tertiary);
}

.search-field input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    color: var(--label);
    font: var(--t-callout);
    outline: none;
}

/* iOS prekidac */
.switch {
    position: relative;
    display: inline-block;
    width: 51px;
    height: 31px;
    flex-shrink: 0;
}

.switch input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.switch-track {
    position: absolute;
    inset: 0;
    border-radius: var(--r-pill);
    background: var(--fill);
    transition: background var(--dur) var(--ease);
    pointer-events: none;
}

.switch-track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
    transition: transform var(--dur) var(--ease);
}

.switch input:checked + .switch-track { background: var(--positive); }
.switch input:checked + .switch-track::after { transform: translateX(20px); }

/* Segmentna kontrola - iOS prekidac izmedju nekoliko pogleda */
.segmented {
    display: inline-flex;
    padding: 4px;
    border-radius: var(--r-pill);
    background: var(--fill-quaternary);
    gap: 2px;
}

.segmented button {
    flex: 1;
    min-height: 32px;
    padding: 0 16px;
    border: none;
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--label-secondary);
    font: 500 0.8125rem/1 var(--font-display);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out);
}

.segmented button[aria-selected="true"] {
    background: var(--pill-on);
    color: var(--pill-on-text);
    box-shadow: var(--shadow-sm);
}

/* Pilula - filter ili kartica ("Sve", "Uvid", "Usluge"). .on je izabrana. */
.pill-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 0 18px;
    border: none;
    border-radius: var(--r-pill);
    background: var(--fill-tertiary);
    color: var(--label);
    font: 400 0.875rem/1 var(--font-display);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.pill-tab:hover { background: var(--fill-secondary); }
.pill-tab.on,
.pill-tab[aria-selected="true"],
.pill-tab[aria-pressed="true"] { background: var(--pill-on); color: var(--pill-on-text); }

/* --------------------------------------------------------------------------
   9. OZNAKE, ZNACKE, STANJA
   -------------------------------------------------------------------------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: var(--r-pill);
    font: 600 0.75rem/1.3 var(--font);
    letter-spacing: 0;
    color: var(--label-secondary);
    background: var(--fill-tertiary);
}

.badge.blue { color: var(--sys-blue); background: color-mix(in srgb, var(--sys-blue) 16%, transparent); }
.badge.green { color: var(--positive); background: color-mix(in srgb, var(--positive) 16%, transparent); }
.badge.red { color: var(--negative); background: color-mix(in srgb, var(--negative) 16%, transparent); }
.badge.orange { color: var(--warning); background: color-mix(in srgb, var(--warning) 16%, transparent); }

/* Traka napretka - stednja, budzet, rezultat kviza */
.progress {
    height: 8px;
    border-radius: var(--r-pill);
    background: var(--fill-tertiary);
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    border-radius: var(--r-pill);
    background: var(--tint);
    background-image: linear-gradient(90deg, var(--sys-indigo), var(--sys-purple));
    transition: width var(--dur) var(--ease);
}

.progress-fill.green { background: var(--positive); }
.progress-fill.red { background: var(--negative); }
.progress-fill.orange { background: var(--warning); }

/* Prazno stanje - ikonica, naslov, jedno objasnjenje */
.empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 48px 24px;
    text-align: center;
    color: var(--label-secondary);
}

.empty .icon { color: var(--label-quaternary); }
.empty h3 { color: var(--label); }
.empty p { max-width: 34ch; font: var(--t-subhead); }

/* Vrteska - iOS stil, tanak prsten */
.spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--fill);
    border-top-color: var(--tint);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

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

/* --------------------------------------------------------------------------
   10. MODALI I LISTOVI
   Na telefonu iOS prikazuje "sheet" - dolazi odozdo, zaobljen gore.
   Na sirokom ekranu je centriran dijalog, kao na macOS-u.
   -------------------------------------------------------------------------- */

.scrim {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(4, 4, 6, 0.66);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    animation: fade var(--dur-fast) var(--ease-out);
}

/* Bez ovoga atribut hidden nema efekta: pravilo .scrim { display: grid }
   je jace od podrazumevanog [hidden] { display: none }, pa zatamnjenje
   stoji preko cele strane i nista se ne moze kliknuti. */
.scrim[hidden] { display: none; }

.sheet {
    width: 100%;
    max-width: 480px;
    max-height: min(86vh, 760px);
    overflow-y: auto;
    background: var(--bg-elevated);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg);
    animation: sheet-in var(--dur) var(--ease);
}

.sheet-header {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    background: var(--material);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    border-bottom: 0.5px solid var(--separator);
}

.sheet-header h2 { flex: 1; font: var(--t-headline); text-align: center; }
.sheet-body { padding: 16px; display: flex; flex-direction: column; gap: 20px; }

@keyframes fade { from { opacity: 0; } }
@keyframes sheet-in {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
}

/* Na telefonu list dolazi odozdo i naslanja se na donju ivicu */
@media (max-width: 560px) {
    .scrim { place-items: end center; padding: 0; }
    .sheet {
        max-width: none;
        max-height: 92vh;
        border-radius: var(--r-xl) var(--r-xl) 0 0;
        padding-bottom: var(--safe-bottom);
        animation: sheet-up var(--dur) var(--ease);
    }
    @keyframes sheet-up { from { transform: translateY(100%); } }
}

/* --------------------------------------------------------------------------
   11. RASPORED
   -------------------------------------------------------------------------- */

.page {
    max-width: 780px;
    margin: 0 auto;
    padding-inline: max(16px, var(--safe-left));
    padding-block: 18px 40px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.page-wide { max-width: 1080px; }

.section { display: flex; flex-direction: column; gap: 10px; }

.stack { display: flex; flex-direction: column; gap: 12px; }
.hstack { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.spacer { flex: 1; }

/* Mreza kartica koja se sama slaze u jednu kolonu na telefonu */
.grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* Plocica sa jednim velikim brojem - koristi se samo kad je broj poenta */
.stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 16px;
    border-radius: var(--r-md);
    background: var(--bg-secondary);
}

.stat-value {
    font: var(--t-title1);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.stat-label { font: var(--t-footnote); font-weight: 500; color: var(--label-secondary); }
.stat-value.positive { color: var(--positive); }
.stat-value.negative { color: var(--negative); }

/* Tabela koja na uzem ekranu skroluje sama, a strana nikad ne skroluje bocno */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --------------------------------------------------------------------------
   12. STAKLO - providnost i "bubble" efekat
   Apple povrsine ne stoje na ravnoj boji: propustaju ono sto je iza njih,
   pojacaju mu zasicenost i zamute ga. Da bi se to uopste videlo, iza svega
   stoji ambijent (.ambient) - nekoliko velikih mekih mrlja u bojama akcenta.
   Bez njega zamucenje nema sta da zamuti i staklo izgleda kao obicna siva.

   Zamucenje je skupo za crtanje, pa ga nose samo povrsine, ne i svaki red
   u listi ili tabeli. Ugnjezdeno staklo u staklu se namerno izbegava:
   unutrasnji elementi koriste --glass-thin bez svog backdrop-filter-a.
   -------------------------------------------------------------------------- */

/* Mrlje iza svega. position: fixed znaci da stoje dok strana skroluje, pa
   staklo menja boju kako sadrzaj prolazi preko njih. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    /* Tri meka sjaja u bojama teme na skoro crnoj podlozi. Bez filter: blur -
       radijalni preliv je vec mekan, a zamucenje preko celog ekrana je bilo
       skupo na telefonu. */
    background:
        radial-gradient(60vmax 44vmax at 92% -6%, var(--ambient-1), transparent 70%),
        radial-gradient(44vmax 36vmax at -4% 38%, var(--ambient-2), transparent 70%),
        radial-gradient(50vmax 34vmax at 70% 108%, var(--ambient-3), transparent 70%);
}

/* Osnovna staklena povrsina. .glass se moze dodati bilo kom elementu. */
.glass,
.card,
.card-plain,
.list,
.stat {
    background: var(--glass);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow:
        inset 0 0.5px 0 var(--glass-stroke-top),
        inset 0 0 0 0.5px var(--glass-stroke),
        var(--glass-shadow);
}

/* Tanja varijanta - za povrsine unutar vec staklene kartice */
.glass-thin {
    background: var(--glass-thin);
    box-shadow: inset 0 0 0 0.5px var(--glass-stroke);
}

/* Jaca varijanta - kad tekst preko nje mora da ostane citljiv (listici,
   iskacuci meniji, sadrzaj koji stoji preko slike) */
.glass-strong {
    background: var(--glass-strong);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow:
        inset 0 0.5px 0 var(--glass-stroke-top),
        inset 0 0 0 0.5px var(--glass-stroke),
        var(--glass-shadow);
}

/* "Bubble" - mehuric koji se blago izdigne i uhvati svetlo na dodir.
   Koristi se za kartice koje su i same dugme (kartica modula, cilj stednje). */
.bubble {
    position: relative;
    overflow: hidden;
    transition: transform var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease);
}

/* Odsjaj po gornjoj ivici, kao na staklu pod svetlom odozgo */
.bubble::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), transparent 42%);
}

.bubble:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0 0.5px 0 var(--glass-stroke-top),
        inset 0 0 0 0.5px var(--glass-stroke),
        0 14px 40px rgba(0, 0, 0, 0.32);
}

.bubble:active { transform: translateY(0) scale(0.995); }

body.light-mode .bubble:hover {
    box-shadow:
        inset 0 0.5px 0 var(--glass-stroke-top),
        inset 0 0 0 0.5px var(--glass-stroke),
        0 14px 36px rgba(20, 20, 45, 0.14);
}

/* Polja i tiha dugmad unutar staklene kartice: providna ispuna, bez svog
   zamucenja (staklo u staklu je i skupo i mutno). */
.field,
.input,
.btn-quiet,
.segmented {
    background: var(--glass-thin);
    box-shadow: inset 0 0 0 0.5px var(--glass-stroke);
}

/* Ko ne podnosi zamucenje (stariji Android WebView, Firefox bez omogucenog
   svojstva) dobija punu pozadinu, da tekst nikad ne ostane neprovidan. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass, .card, .card-plain, .list, .stat, .glass-strong {
        background: var(--bg-secondary);
    }
    body::before { opacity: 0.5; }
}

/* Odsjaj i podizanje se gase kad korisnik tako podesi uredjaj */
@media (prefers-reduced-motion: reduce) {
    .bubble, .bubble:hover, .bubble:active { transform: none; transition: none; }
}

/* --------------------------------------------------------------------------
   13. LJUSKA - bocna traka koju dele sve strane aplikacije

   Chat ima svoju bogatiju traku (.sidebar u style.css: istorija, pretraga,
   izbor modela); ostale strane dobijaju .shell, laksu verziju sa istim
   plocicama. Obe nose isto ime prelaza, pa pregledac pri prelasku sa strane
   na stranu vidi jednu te istu traku i ne dira je - menja se samo desna
   strana. Gde prelazi nisu podrzani, strana se smeni odmah, bez animacije.
   -------------------------------------------------------------------------- */

@view-transition { navigation: auto; }

.sidebar,
.shell { view-transition-name: traka; }

main,
.main-content { view-transition-name: sadrzaj; }

::view-transition-old(sadrzaj) {
    animation: vt-izlaz 0.18s var(--ease-out) both;
}

::view-transition-new(sadrzaj) {
    animation: vt-ulaz 0.26s var(--ease-out) both;
}

@keyframes vt-izlaz {
    to { opacity: 0; transform: translateY(-6px); }
}

@keyframes vt-ulaz {
    from { opacity: 0; transform: translateY(10px); }
}

/* Rezerva za pregledace bez prelaza izmedju dokumenata - Safari i WebView na
   telefonu ga jos ne znaju, a i Chrome ga preskoci ako nova strana nije
   spremna na vreme. Sadrzaj se onda sam blago uvede, sto radi svuda i ne
   odlaze nista. Kad pregledac ipak odradi svoj prelaz, javi se kroz
   pagereveal (script u <head> strane) i ovaj uvod se gasi da se ne udvostruci. */
main,
.main-content { animation: uvod 0.24s var(--ease-out) both; }

html.bez-uvoda main,
html.bez-uvoda .main-content { animation: none; }

/* Samo prozirnost, bez transform: transform bi napravio novi okvir za
   position: fixed decu i pomerio ih dok animacija traje */
@keyframes uvod {
    from { opacity: 0; }
}

/* Ko je iskljucio animacije dobija obican presek, bez pomeranja */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(sadrzaj),
    ::view-transition-new(sadrzaj) { animation: none; }

    main,
    .main-content { animation: none; }
}

body.has-shell { padding-left: 256px; }

.shell {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    width: 256px;
    height: 100vh;
    padding: 20px 14px calc(14px + var(--safe-bottom));
    padding-top: calc(20px + var(--safe-top));
    background: color-mix(in srgb, var(--bg-base) 92%, transparent);
    box-shadow: inset -1px 0 0 var(--separator);
    transition: transform 0.35s var(--ease-out);
}

.shell-logo {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 4px 8px;
    margin-bottom: 26px;
    font: 600 1.1875rem/1 var(--font-display);
    letter-spacing: -0.01em;
    color: var(--label);
    text-decoration: none;
}

.shell-logo:hover { opacity: 1; }
.shell-logo .icon-tile { width: 34px; height: 34px; border-radius: 10px; }
.shell-logo .icon-tile .icon { width: 19px; height: 19px; stroke-width: 2.2; }

/* Naslov iznad spiska modula */
.shell-caption {
    padding: 0 10px 10px;
    font: 500 0.6875rem/1 var(--font-display);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--label-tertiary);
}

.shell-foot { margin-top: auto; }

/* Hamburger: samo na uskom ekranu, gde je traka sklonjena u fioku */
.shell-toggle {
    position: fixed;
    z-index: 120;
    top: calc(10px + var(--safe-top));
    left: max(12px, var(--safe-left));
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: var(--glass-strong);
    box-shadow: inset 0 0 0 1px var(--glass-stroke), var(--glass-shadow);
    color: var(--label);
    cursor: pointer;
    transition: opacity 0.25s var(--ease-out);
}

.shell-scrim {
    position: fixed;
    inset: 0;
    z-index: 99;
    background: rgba(0, 0, 0, 0.35);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s var(--ease-out), visibility 0.3s;
}

@media (max-width: 768px) {
    body.has-shell { padding-left: 0; }
    .shell { transform: translateX(-100%); width: 280px; background: var(--bg-base); }
    .shell.open { transform: translateX(0); box-shadow: var(--shadow-lg); }
    .shell-toggle { display: flex; }
    .shell.open ~ .shell-scrim { opacity: 1; visibility: visible; }
    /* Dok je fioka otvorena, hamburger bi stajao preko logotipa u njoj;
       zatvara se klikom na zatamnjenje pored */
    .shell.open ~ .shell-toggle { opacity: 0; pointer-events: none; }
    /* Naslov strane ne sme da stoji ispod hamburgera */
    body.has-shell main { padding-top: calc(52px + var(--safe-top)); }
}

/* --------------------------------------------------------------------------
   MREZA MODULA
   Delovi aplikacije kao plocice, dve u redu. Ista je i u chat traci i u
   .shell-u, pa stoji ovde a ne u style.css.
   -------------------------------------------------------------------------- */

.module-grid {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 10px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--separator);
}

/* U .shell-u traka nema drugih odeljaka, pa spisak ne nosi ni ivicu ni svoj
   unutrasnji razmak sa strane */
.shell .module-grid { padding: 0; border-bottom: none; }

/* Stavka menija: ikonica + naziv u jednom redu. Trenutna strana je bela
   pilula sa tamnim tekstom - isti znak "ovde si" kao na kontrolnoj tabli. */
.module-tile {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 6px 14px 6px 7px;
    border: none;
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--label-secondary);
    font: 400 0.9063rem/1 var(--font-display);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}

.module-tile .icon-tile {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.module-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.module-tile:hover {
    opacity: 1;
    color: var(--label);
    background: var(--fill-quaternary);
}

.module-tile:active { transform: scale(0.98); }

.module-tile.active {
    background: var(--pill-on);
    color: var(--pill-on-text);
    font-weight: 500;
}

/* Na beloj piluli ikonica dobija tamni krug sa zutom munjom boje modula -
   inace bi obojena podloga od 15% nestala na beloj */
.module-tile.active .icon-tile {
    color: var(--c);
    background: var(--bg-base);
    box-shadow: none;
}

body.light-mode .module-tile.active .icon-tile {
    color: #FFFFFF;
    background: var(--c);
}

@media (prefers-reduced-motion: reduce) {
    .module-tile { transition: none; }
    .module-tile:active { transform: none; }
}

/* --------------------------------------------------------------------------
   KOSTUR STRANE
   Dok prvi podaci stizu sa servera, umesto natpisa "Ucitavanje..." stoji
   obris pravog sadrzaja. Cekanje je isto, ali strana od prvog trenutka ima
   oblik, pa se ne vidi skok kad podaci stignu.
   -------------------------------------------------------------------------- */

.sk {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-sm);
    background: var(--fill-quaternary);
}

/* Odsjaj koji prelazi preko bloka; sama sirina je 40% da prelaz bude kratak */
.sk::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg,
                transparent,
                color-mix(in srgb, var(--label) 7%, transparent),
                transparent);
    animation: sk-odsjaj 1.4s infinite;
}

@keyframes sk-odsjaj {
    to { transform: translateX(100%); }
}

.sk-red { height: 13px; margin-bottom: 9px; }
.sk-red:last-child { margin-bottom: 0; }
.sk-red.kratak { width: 40%; }
.sk-red.srednji { width: 65%; }
.sk-naslov { height: 19px; width: 45%; margin-bottom: 14px; }

/* Kartica kostura ima istu ispunu i ivicu kao prava, da se ne vidi promena
   okvira kad sadrzaj stigne */
.sk-kartica {
    padding: 16px;
    margin-bottom: 12px;
    border-radius: var(--r-lg);
    background: var(--glass);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow: inset 0 0.5px 0 var(--glass-stroke-top),
                inset 0 0 0 0.5px var(--glass-stroke),
                var(--glass-shadow);
}

@media (prefers-reduced-motion: reduce) {
    .sk::after { animation: none; }
}

/* --------------------------------------------------------------------------
   MENI POD AVATAROM
   Dele ga chat traka i .shell, pa stoji ovde. Chat mu u style.css dodaje
   jos redova (izbor modela, izvoz, brisanje razgovora).
   -------------------------------------------------------------------------- */

.user-menu-wrapper {
    position: relative;
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 10px;
    transition: background 0.25s var(--ease);
    width: 100%;
    border: none;
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: left;
}

.sidebar-user:hover {
    background: var(--bg-surface);
}

.user-menu-caret {
    margin-left: auto;
    flex-shrink: 0;
    color: var(--text-muted);
    transition: transform 0.25s var(--ease);
}

.user-menu-wrapper.open .user-menu-caret {
    transform: rotate(180deg);
}

.user-menu {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--bg-solid, var(--bg-surface));
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
    z-index: 20;
}

.user-menu-wrapper.open .user-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.user-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: none;
    background: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.2s var(--ease);
    text-align: left;
}

.user-menu-item:hover {
    background: var(--bg-surface);
}

.user-menu-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.user-avatar {
    width: 34px;
    height: 34px;
    background: var(--gradient);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    box-shadow: var(--shadow-glow);
    flex-shrink: 0;
}

.sidebar-user-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sidebar-user-info .username {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    transition: color 0.4s var(--ease);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-info .user-role {
    font-size: 11px;
    color: var(--text-muted);
    transition: color 0.4s var(--ease);
}

/* Staklo: meni lebdi nad trakom koja je i sama staklo, pa mu ide neprovidna
   podloga - inace se kroz njega cita sadrzaj trake ispod */
.user-menu {
    background: linear-gradient(var(--glass-strong), var(--glass-strong)), var(--bg-elevated);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: none;
    box-shadow:
        inset 0 0.5px 0 var(--glass-stroke-top),
        inset 0 0 0 0.5px var(--glass-stroke),
        var(--glass-shadow);
}

.sidebar-user {
    background: var(--glass-thin);
    box-shadow: inset 0 0 0 0.5px var(--glass-stroke);
}

/* Ikonica u meniju je obojena plocica (iOS "Podesavanja"), pa je okvir veci
   od podrazumevanih 16px */
.user-menu-icon.icon-tile {
    width: 28px;
    height: 28px;
    border-radius: 7px;
}

.user-menu-icon.icon-tile .icon { width: 17px; height: 17px; }

/* Avatar je nekad nosio emoji (font-size 14px); sad je u njemu SVG */
.user-avatar .icon { width: 19px; height: 19px; }
.user-avatar i { display: flex; }

/* --------------------------------------------------------------------------
   SEKCIJE U PADAJUCEM MENIJU
   -------------------------------------------------------------------------- */

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

.menu-section + .menu-section {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 0.5px solid var(--separator);
}

.menu-caption {
    padding: 4px 10px 3px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--label-tertiary);
}

/* --------------------------------------------------------------------------
   14. LEGACY ALIASI
   Stare strane (budget.html, study.html, career.html...) imaju svoje <style>
   blokove koji se pozivaju na ova imena. Dok se ne prepisu, ovo im daje novu
   Apple paletu bez jedne izmene u njihovom CSS-u. Brise se kad poslednja
   strana bude prebacena na tokene iznad.
   -------------------------------------------------------------------------- */

:root,
body.light-mode {
    --bg: var(--bg-base);
    --bg-solid: var(--bg-secondary);
    --surface: var(--fill-quaternary);
    --surface-hover: var(--fill-tertiary);
    --bg-surface: var(--fill-quaternary);
    --bg-surface-hover: var(--fill-tertiary);
    --border: var(--separator);
    --border-strong: var(--separator-opaque);
    --text-primary: var(--label);
    --text-secondary: var(--label-secondary);
    --text-muted: var(--label-tertiary);
    --accent: var(--tint);
    --accent-2: var(--tint-pressed);
    --accent-3: color-mix(in srgb, var(--tint) 70%, #FFFFFF);
    --success: var(--positive);
    --danger: var(--negative);
    /* Mora da ostane PRAVA gradacija: style.css je koristi kao background za
       naslov sa background-clip:text, za avatar i za dugmice. Ravna boja ovde
       znaci da svi ti elementi tiho izgube gradaciju. */
    --gradient: linear-gradient(135deg, var(--sys-indigo) 0%, var(--sys-blue) 100%);
    --gradient-soft: linear-gradient(135deg,
                     color-mix(in srgb, var(--sys-indigo) 14%, transparent),
                     color-mix(in srgb, var(--sys-blue) 14%, transparent));
    --shadow-glow: 0 8px 24px color-mix(in srgb, var(--tint) 24%, transparent);
}