/* ============================================================
0. RESET & BASE
============================================================ */
/* ------------------------------------------------------------------
FONTOVI — hostujemo ih SAMI (14.08.2026)
Do sad su stizali sa `fonts.googleapis.com`. Taj `` je bio
stylesheet SA TUĐEG DOMENA u ``-u, dakle resurs koji zaustavlja
iscrtavanje dok se ne preuzme — poslednji takav posle popravke
`NO_FCP`. Uz to su `fonts.googleapis.com` i `fonts.gstatic.com` morali
u CSP listu (`TODO.md`), a svaka poseta je javljala Google-u da je
neko otvorio aplikaciju.
Fajlovi su u `fonts/`, jedan `woff2` po težini, sa SPOJENIM
podskupovima (`cyrillic` + `latin` + `latin-ext` u istom fajlu). Zato
ovde NEMA `unicode-range`: on postoji da bi se jedna težina podelila
na više fajlova pa pregledač preuzeo samo potreban komad — kad je sve
u jednom fajlu, nema šta da se deli.
⚠️ `latin-ext` nije izbor nego uslov: `č ć ž š đ` su tamo, ne u
`latin`. `cyrillic` je zbog naziva artikala sa fiskalnih računa, koji
umeju da stignu ćirilicom. Space Grotesk ćirilicu nema i ne treba mu —
njime se pišu iznosi, a cifre su u `latin`.
⚠️ PUTANJA JE `fonts/`, NE `../fonts/`. Generator (google-webfonts-
helper) pretpostavlja da CSS stoji u podfolderu `css/`; kod nas je
`main.css` u korenu, uz sam folder `fonts/`. Na `kucnibilans.rs/` bi i
`../fonts/` slučajno radilo (pregledač višak `..` na korenu odbaci),
ali bi puklo pri deployu u podfolder — a njega projekat izričito
podržava (`vite.config.js`, `base: "./"`).
Ovde stoje TAČNO one težine koje se koriste. Preuzeti su bili i
Manrope 200/300 i Space Grotesk 300/400/500; njihovi `@font-face`
blokovi su uklonjeni, jer deklarisan a nekorišćen font niko ne
preuzme ali se fajl svejedno šalje na server pri svakom deployu.
⚠️ Space Grotesk NEMA 800, a `.brand-title` ga traži. Pregledač tad
sam podebljava 700 — isto kao i dosad preko Google-a, dakle nije
regresija; zapisano da se ne traži fajl koji ne postoji.
------------------------------------------------------------------ */
/* Space Grotesk — iznosi, brojevi i naslovi. */
/* space-grotesk-600 - latin_latin-ext */
@font-face {
font-display: swap;
font-family: "Space Grotesk";
font-style: normal;
font-weight: 600;
src: url("fonts/space-grotesk-v22-latin_latin-ext-600.woff2") format("woff2");
}
/* space-grotesk-700 - latin_latin-ext */
@font-face {
font-display: swap;
font-family: "Space Grotesk";
font-style: normal;
font-weight: 700;
src: url("fonts/space-grotesk-v22-latin_latin-ext-700.woff2") format("woff2");
}
/* Manrope — sav ostali tekst. Težinu 500 koristi admin panel (`admin.js`). */
/* manrope-regular - cyrillic_latin_latin-ext */
@font-face {
font-display: swap;
font-family: "Manrope";
font-style: normal;
font-weight: 400;
src: url("fonts/manrope-v20-cyrillic_latin_latin-ext-regular.woff2") format("woff2");
}
/* manrope-500 - cyrillic_latin_latin-ext */
@font-face {
font-display: swap;
font-family: "Manrope";
font-style: normal;
font-weight: 500;
src: url("fonts/manrope-v20-cyrillic_latin_latin-ext-500.woff2") format("woff2");
}
/* manrope-600 - cyrillic_latin_latin-ext */
@font-face {
font-display: swap;
font-family: "Manrope";
font-style: normal;
font-weight: 600;
src: url("fonts/manrope-v20-cyrillic_latin_latin-ext-600.woff2") format("woff2");
}
/* manrope-700 - cyrillic_latin_latin-ext */
@font-face {
font-display: swap;
font-family: "Manrope";
font-style: normal;
font-weight: 700;
src: url("fonts/manrope-v20-cyrillic_latin_latin-ext-700.woff2") format("woff2");
}
/* manrope-800 - cyrillic_latin_latin-ext */
@font-face {
font-display: swap;
font-family: "Manrope";
font-style: normal;
font-weight: 800;
src: url("fonts/manrope-v20-cyrillic_latin_latin-ext-800.woff2") format("woff2");
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
body {
min-height: 100dvh;
background: #000000;
font-family:
"Manrope",
-apple-system,
BlinkMacSystemFont,
sans-serif;
-webkit-font-smoothing: antialiased;
display: flex;
align-items: flex-start;
justify-content: center;
overscroll-behavior: none;
}
/* SAMO stranica aplikacije (index.html) — workflow.md #162.
Pravne stranice koriste isti `main.css` i MORAJU da se skroluju, pa ovo ne
sme da ide na goli `body`.
BAG koji rešava: `body` je imao `min-height: 100dvh`, a `.app-shell`
`min-height: 100dvh` PORED `height: calc(var(--real-vh) * 100)`. Kad god je
`100dvh` ispao veći od stvarno vidljive visine (a na telefonu ispada — dvh
se menja dok se traka pregledača skuplja, a `--real-vh` se osvežava tek na
`resize`, koji iOS ne šalje pouzdano), `min-height` je pobeđivao `height`:
ljuska postane viša od ekrana, STRANICA počne da se skroluje, i zaglavlje
ode gore a donja navigacija dole. Tačno ono što se videlo na slici.
Sad je visina JEDNA vrednost, bez `min-height` koji je može nadjačati, a
`overflow: hidden` znači da stranica nema šta ni da skroluje — skroluje
isključivo srednji deo (`.screen`, koji ima svoj `overflow-y: auto`). */
body.app-page {
/* `position: fixed` + `inset: 0` (workflow.md #165) — jedina mera koja
STVARNO zaustavlja skrolovanje stranice na telefonu.
Prethodna verzija je zadavala visinu (`100dvh` / `--real-vh`) uz
`overflow: hidden`. To sprečava skrol SADRŽAJA, ali element i dalje
učestvuje u normalnom toku dokumenta — pa ako je izmerena visina i za
piksel veća od stvarno vidljive (a jeste: `window.innerHeight` se menja
dok se traka pregledača skuplja, i meri se u pogrešnom trenutku), ostane
mali višak koji se može „povući". Tačno ono što se vidi na snimku: dođeš
do kraja liste i ide još malo.
Fiksiran element se meri prema vidljivom delu ekrana i NE MOŽE da se
pomeri — nema šta ni da se povuče. Uz to, pošto koren dokumenta više
nema šta da skroluje, traka pregledača se ne skuplja, pa visina prestaje
da se menja u hodu (što je bio izvor cele zavrzlame).
`--real-vh` ostaje u upotrebi za `.sheet` (max-visina modala). */
position: fixed;
inset: 0;
overflow: hidden;
min-height: 0;
overscroll-behavior: none;
}
button,
input,
select,
textarea {
font-family: inherit;
color: inherit;
}
button {
cursor: pointer;
background: none;
border: none;
}
input,
select,
textarea {
outline: none;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
h1,
h2,
h3,
h4,
p {
margin: 0;
}
svg {
display: block;
}
::selection {
background: rgba(124, 156, 255, 0.35);
}
/* ============================================================
0a. PRISTUPAČNOST (WCAG 2.1 AA / EN 301 549)
============================================================ */
/* Vidljiv fokus. Tri piksela i tamna „senka" ispod: sam plavi okvir se gubi na
plavim dugmadima (`.btn-primary`), gde je najpotrebniji. `outline` je izabran
namerno umesto `box-shadow` — jedini prati oblik elementa i preživljava
režim visokog kontrasta. */
:focus-visible {
outline: 3px solid #9db4ff;
outline-offset: 2px;
border-radius: 8px;
box-shadow: 0 0 0 5px rgba(4, 5, 9, 0.85);
}
/* Sadržaj SAMO za čitače ekrana. Ne `display: none` i ne `visibility: hidden` —
oba bi ga uklonila i iz čitača. Ovo ga sklanja sa ekrana, a ostavlja u
dokumentu. */
.sr-only {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* „Preskoči na glavni sadržaj" — nevidljiv dok ne dobije fokus (prvi Tab). */
.skip-link {
position: fixed;
top: -100px;
left: 12px;
z-index: 200;
padding: 12px 18px;
border-radius: 0 0 12px 12px;
background: #7c9cff;
color: #0b0d14;
font-weight: 700;
font-size: 15px;
text-decoration: none;
transition: top 0.15s ease;
}
.skip-link:focus {
top: 0;
}
/* ============================================================
1. DESIGN TOKENS
============================================================ */
:root {
--bg: #090a0f;
--bg-soft: #141622;
--surface: rgba(255, 255, 255, 0.04);
--surface-2: rgba(255, 255, 255, 0.08);
--border: rgba(255, 255, 255, 0.09);
--border-soft: rgba(255, 255, 255, 0.045);
--text: #ffffff;
--text-dim: #a0a4ba;
--text-dimmer: #64677a;
--blue: #4c7eff;
--blue-soft: rgba(76, 126, 255, 0.16);
--pink: #f5568c;
--pink-soft: rgba(245, 86, 140, 0.16);
--accent: #7c9cff;
--good: #3ed598;
--warn: #ffc05aa2;
/* ŽUTA ZA SIGNAL „nešto dospeva" (21.08.2026, korisnikov zahtev) — ikonica
„Pregled" u dnu navigacije. Namerno NIJE `--warn`: on nosi providnost
(`a2` = 64%), pa kroz `drop-shadow` daje bled narandžast oreol koji se na
tamnoj pozadini jedva razlikuje od ugašene ikonice. Ovo je puna, neprozirna
žuta — jedina boja u navigaciji koja se ne meša ni sa plavom
(informacija) ni sa crvenom (greška). */
--signal-yellow: #ffd93d;
/* Crvena za "prekoračeno/greška" — ISTA koju već koristi .btn-danger.
Postoji kao promenljiva jer je `var(--warn, #FF6B5E)` bio tiha greška:
fallback iza zareza se aktivira SAMO ako promenljiva NE postoji, a
--warn postoji (i narandžast je) — pa se crveno nikad nije prikazalo. */
--bad: #ff6b5e;
--r-lg: 24px;
--r-md: 18px;
--r-sm: 12px;
--r-pill: 999px;
/* ---- MERE KOJE SE MENJAJU PO ŠIRINI EKRANA (16.08.2026) --------------
Postoje kao promenljive isključivo zato što su SPREGNUTE: bar dva
nepovezana pravila u fajlu moraju da nose istu vrednost, a razlaz se ne
vidi kao greška nego kao sadržaj koji viri iz kartice.
--pad-screen → `.screen` (bočni padding svakog ekrana)
--pad-card → `.card` I negativna margina `.chip-row`-a, koji „probija"
karticu do ivice. Kad bi bleed ostao veći od paddinga,
pilule bi izašle IZ kartice.
--pad-sheet → `.sheet` (modal koji klizi odozdo)
--row-icon → `.bill-icon`/`.notif-icon` (krug sa ikonicom u redu)
--row-icon-gap→ razmak između tog kruga i teksta (`.bill-row-top`)
--row-indent → uvlačenje DONJEG sprata reda (`.bill-row-bottom`,
`.garancija-meta`, `.garancija-note`) tako da se poklopi
sa tekstom iznad. Ranije je bilo upisano kao 62px na tri
mesta, uz komentar „48px ikonica + 14px razmak" — sad se
stvarno računa iz njih.
Vrednosti se menjaju SAMO u sekciji „MALI TELEFONI" na kraju fajla. */
--pad-screen: 20px;
--pad-card: 20px;
--pad-sheet: 22px;
--row-icon: 48px;
--row-icon-gap: 14px;
--row-indent: calc(var(--row-icon) + var(--row-icon-gap));
--shadow-1: 0 8px 32px rgba(0, 0, 0, 0.4);
--shadow-2: 0 20px 50px rgba(0, 0, 0, 0.45);
--ease: cubic-bezier(0.25, 1, 0.3, 1);
}
/* ============================================================
2. APP FRAME (mobile-first; phone mockup on desktop)
============================================================ */
/* Centrira sadržaj ekrana za prijavu/dobrodošlicu. Bezbedno je da ima
height:100% jer se #authMount eksplicitno SAKRIJE (display:none) posle
prijave (auth.js completeLogin()) — inače bi, čak i prazan, nastavio da
zauzima ceo prostor u .app-shell-ovom flex rasporedu i survao ostatak app-a. */
#authMount {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
overflow-y: auto;
/* Isti razlog kao kod `.screen` (workflow.md #165) — welcome ekran je duži
od ekrana, pa se baš na njemu najlakše vidi višak na kraju skrola. */
overscroll-behavior: contain;
/* Prostor za sistemsku traku na dnu telefona — bez ovoga poslednje dugme
na dugačkom ekranu (welcome) završi ispod nje. */
padding-bottom: env(safe-area-inset-bottom);
}
/* BAG (workflow.md #151): ovde je stajalo `justify-content: center`.
Dok je sadržaj bio kraći od ekrana (login forma) to je radilo. Welcome
ekran je viši od ekrana, a centriranje VIŠAK deli na obe strane — pa je
vrh završio IZNAD početka kontejnera i postao nedostupan (skrol ne ide u
minus). Isto pravilo je već zapisano kao „bag na čekanju" u
sledeci-koraci.md posle #141.
Auto margine rade isto centriranje, ali SAMO kad ima viška prostora: kad
sadržaj prelazi visinu, svedu se na 0 i ništa ne ispada iznad vrha. */
#authMount > *:first-child {
margin-top: auto;
}
#authMount > *:last-child {
margin-bottom: auto;
}
.app-shell {
position: relative;
width: 100%;
/* Visina se NASLEĐUJE od `body.app-page` (koji je tačno vidljiva visina) —
ovde više NEMA `min-height`, jer je baš on obarao raspored (vidi komentar
uz `body.app-page`). `max-height` je pojas i tregeri: ljuska ne sme da
preraste ekran ni ako neki sadržaj to zatraži. */
height: 100%;
max-height: 100%;
min-height: 0;
background: var(--bg);
color: var(--text);
/* `clip` umesto `hidden`, sa `hidden` kao rezervom za starije pregledače.
Razlika je jedino u tome što `hidden` OSTAJE skrolabilan programski: kad
bilo šta pozove `focus()`/`scrollIntoView()` nad elementom pri dnu modala,
pregledač pomeri i ovu ljusku, a nje nema čime da se vrati — ekran ostane
odgurnut nagore, sa crnom prazninom ispod. `clip` uopšte ne pravi
skrol-kontejner, pa taj kvar postaje nemoguć. Pozivi su ispravljeni
(`preventScroll`), ovo je druga brana za svaki sledeći. */
overflow: hidden;
overflow: clip;
display: flex;
flex-direction: column;
isolation: isolate;
}
@media (min-width: 560px) {
body {
/* padding: 40px 16px; */
align-items: center;
}
.app-shell {
height: 100%;
max-height: 100%;
min-height: 0;
border-radius: 40px;
border: 8px solid #1a1c29;
box-shadow: 0 40px 100px rgba(0, 0, 0, 0.8);
}
}
/* ambient background glow orbs */
.bg-orbs {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
/* `contain: paint` (workflow.md #165) — obećanje pregledaču da ništa odavde
ne crta van ovih granica, pa promena u pozadini ne obara ceo ekran u
ponovno crtanje. */
contain: paint;
}
.orb {
position: absolute;
border-radius: 50%;
filter: blur(70px);
opacity: 0.25;
/* Stalan sopstveni sloj (#165). Bez ovoga pregledač sam odlučuje kad da
orb promoviše, a ta odluka se menja čim se iznad umetne nov element
preko celog ekrana (modal) — pa se zamućenje od 70px računa iznova. */
will-change: transform;
}
.orb-blue {
width: 300px;
height: 300px;
background: var(--blue);
top: -100px;
left: -100px;
animation: float1 15s ease-in-out infinite;
}
.orb-pink {
width: 280px;
height: 280px;
background: var(--pink);
bottom: 100px;
right: -100px;
animation: float2 18s ease-in-out infinite;
}
.orb-mint {
width: 180px;
height: 180px;
background: var(--good);
bottom: -60px;
left: 30%;
opacity: 0.15;
animation: float1 20s ease-in-out infinite reverse;
}
/* BEZ `scale()` (workflow.md #165). Pomeranje (`translate`) kompozitor uradi
sam, bez ijednog ponovnog crtanja. Skaliranje elementa sa `filter: blur(70px)`
tera ga da zamućenje RAČUNA IZNOVA na svakom frejmu — tri velika kruga,
neprekidno, dok je aplikacija otvorena. Razlika u izgledu je nevidljiva
(5% na krugu koji je već rastočen na 70px), a pozadina prestaje da bude
stalan izvor prekomponovanja. */
@keyframes float1 {
0%,
100% {
transform: translate(0, 0);
}
50% {
transform: translate(30px, 40px);
}
}
@keyframes float2 {
0%,
100% {
transform: translate(0, 0);
}
50% {
transform: translate(-30px, -40px);
}
}
/* ============================================================
3. TOP BAR & STICKY BANERS
============================================================ */
.topbar {
position: relative;
z-index: 5;
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
padding: 24px 24px 16px;
}
.topbar-actions {
display: flex;
gap: 8px;
}
.topbar-actions .icon-btn {
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--surface);
border: 1px solid var(--border);
color: var(--text);
}
.brand {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
flex: 1 1 auto;
}
.brand-mark {
width: 60px;
height: 60px;
}
.brand-text h1 {
font-size: 16px;
font-weight: 800;
letter-spacing: -0.3px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.brand-text p {
font-size: 12px;
color: var(--text-dim);
margin-top: 1px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.brand-text {
min-width: 0;
flex: 1 1 auto;
}
.brand-title-row {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 8px;
min-width: 0;
}
.tier-icon-btn {
width: 34px;
height: 34px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 17px;
flex: 0 0 auto;
background: var(--surface);
border: 1px solid var(--border);
}
.tier-icon-btn.tier-pro {
background: rgba(124, 156, 255, 0.14);
border-color: rgba(124, 156, 255, 0.35);
}
.tier-icon-btn.tier-premium {
background: linear-gradient(
135deg,
rgba(76, 126, 255, 0.25),
rgba(255, 92, 122, 0.25)
);
border-color: transparent;
}
/* Gornja lepljiva obaveštenja (Sticky Banner) - isključivo mala slova[cite: 5] */
#topAlerts {
position: relative;
z-index: 10;
width: 100%;
display: flex;
flex-direction: column;
}
.sticky-banner {
background: rgba(255, 193, 90, 0.12);
border-bottom: 1px solid rgba(255, 193, 90, 0.25);
color: var(--warn);
padding: 10px 20px;
font-size: 12px;
font-weight: 700;
display: flex;
align-items: center;
gap: 10px;
width: 100%;
text-align: left;
animation: fadeUp 0.3s var(--ease);
cursor: pointer;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.sticky-banner svg {
width: 14px;
height: 14px;
flex: 0 0 auto;
}
.savings-alert {
background: rgba(245, 86, 140, 0.15);
border: 1px solid rgba(245, 86, 140, 0.3);
border-radius: 12px;
margin: 10px 0;
padding: 14px;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
color: #ff8a80;
flex-direction: column;
align-items: flex-start;
gap: 6px;
cursor: default;
}
.savings-alert-actions {
display: flex;
gap: 8px;
margin-top: 2px;
}
.mini-action-btn {
background: var(--surface-2);
border: 1px solid var(--border);
color: var(--text);
font-size: 11px;
font-weight: 800;
padding: 4px 10px;
border-radius: var(--r-pill);
cursor: pointer;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
}
.mini-action-btn.good {
color: var(--good);
}
/* ============================================================
4. SCREENS & NAVIGATION
============================================================ */
.screens-wrap {
position: relative;
z-index: 2;
flex: 1 1 auto;
/* Isti razlog kao kod `.app-shell` — skrol ovde radi `.screen`, ovaj omotač
ne sme da se pomeri ni programski. */
overflow: hidden;
overflow: clip;
scroll-behavior: smooth;
}
.screen {
position: absolute;
inset: 0;
/* Donjih 48px, ne 20px: `.nav-fab` („+" u navigaciji) ima
`margin-top: -28px` i prsten `0 0 0 8px` od senke, pa se izdiže ~36px
IZNAD navigacije i prelazi preko dna ekrana. Sa 20px su se dugmad
„Otkaži"/„Potvrdi i sačuvaj račun" sudarala s njim (korisnikov izveštaj).
Vrednost je globalna jer problem nije vezan za jedan ekran — pogađa svaki
čiji sadržaj završava na dnu. */
padding: 4px var(--pad-screen) 48px;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
/* Zaustavlja „gumeni" višak na kraju liste (workflow.md #165). Bez ovoga se
skrol koji je stigao do dna prosleđuje roditelju, pa se ceo ekran malo
povuče i vrati — izgleda kao da iza sadržaja ima još nečega. */
overscroll-behavior: contain;
opacity: 0;
transform: translateY(15px);
/* `visibility` NIJE višak pored `opacity: 0` — ona je jedina od te dve koja
element uklanja i iz ČITAČA EKRANA i iz reda za Tab. Svih 19 ekrana je
stalno u DOM-u (vidi CLAUDE.md), pa je slep korisnik pre ovoga dobijao
sadržaj svih devetnaest odjednom, kao jednu beskonačnu stranicu, a Tab je
šetao kroz dugmad koja se ne vide.
Odloženo za 0.3s (`0s linear 0.3s`) da se ekran koji odlazi i dalje vidi
dok traje prelaz — bez odlaganja bi nestao u istom frejmu. */
visibility: hidden;
transition:
opacity 0.3s var(--ease),
transform 0.3s var(--ease),
visibility 0s linear 0.3s;
pointer-events: none;
}
.screen.is-visible {
opacity: 1;
transform: translateY(0);
visibility: visible;
transition:
opacity 0.3s var(--ease),
transform 0.3s var(--ease),
visibility 0s linear 0s;
pointer-events: auto;
}
/* Ekran dobija fokus pri prebacivanju (modules/pristupacnost.js) — bez ovoga
bi oko njega iskočio okvir, iako to nije element koji se „bira". */
.screen:focus {
outline: none;
}
.screen-head {
padding: 12px 0 24px;
}
/* Dugme "Nazad" za ekrane "nivo dublje" (Krediti, Najjeftiniji artikal,
Izvoz/Uvoz, Porodični rezultati, Pametni saveti, Štednja lista/izazov —
dostupni samo preko Pregled-a/Štednja hub-a, nemaju svoju ikonicu u
donjoj navigaciji). Stoji IZNAD .screen-head, ne unutra. */
.screen-back-btn {
display: inline-flex;
align-items: center;
gap: 6px;
background: none;
border: none;
padding: 4px 0;
margin-top: 4px;
font-size: 13px;
font-weight: 700;
color: var(--text-dim);
cursor: pointer;
}
.screen-back-btn svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}
.screen-head h2 {
font-size: 24px;
font-weight: 800;
letter-spacing: -0.3px;
}
.screen-head p {
font-size: 14px;
color: var(--text-dim);
margin-top: 4px;
}
/* Donji meni optimizovan za 5 stavki bez preloma[cite: 4] */
.bottom-nav {
position: relative;
z-index: 20;
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: space-around;
padding: 8px 12px calc(14px + env(safe-area-inset-bottom, 0px));
background: rgba(14, 16, 24, 0.85);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border-top: 1px solid var(--border);
}
.nav-btn {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
color: var(--text-dimmer);
font-size: 9.5px;
font-weight: 700;
padding: 4px 6px;
border-radius: 12px;
transition: color 0.2s;
min-width: 50px;
}
.nav-btn svg {
width: 22px;
height: 22px;
transition: transform 0.2s var(--ease);
}
.nav-btn.active {
color: var(--text);
}
.nav-btn:active svg {
transform: scale(0.9);
}
.nav-fab {
width: 52px;
height: 52px;
border-radius: 50%;
margin-top: -28px;
background: linear-gradient(135deg, var(--blue), var(--pink));
display: flex;
align-items: center;
justify-content: center;
box-shadow:
0 12px 30px rgba(245, 86, 140, 0.4),
0 0 0 8px var(--bg);
transition: transform 0.2s var(--ease);
color: white;
}
.nav-fab svg {
width: 24px;
height: 24px;
}
.nav-fab:active {
transform: scale(0.92);
}
/* ============================================================
5. CARDS & MODERN COMPONENTS
============================================================ */
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
/* BEZ `backdrop-filter` — ovo je bio pravi uzrok bljeska pri otvaranju
modala (workflow.md #165).
`backdrop-filter` tera pregledač da za SVAKI takav element uzorkuje sve
što je ispod njega. Na Početnoj ima 5-10 kartica, i sve to stoji iznad
`.bg-orbs`, koji su `filter: blur(70px)` sa stalnom animacijom. Kad se
preko svega toga umetne nov, preko celog ekrana — a modal je tačno to —
svi ti uzorci moraju da se izračunaju ponovo u istom frejmu. Taj jedan
frejm se vidi kao bljesak.
Vizuelno se ne gubi gotovo ništa: `--surface` je belo na 4%, a iza
kartica je skoro ravna tamna pozadina — zamućivanje ravne boje daje istu
ravnu boju. Orbovi su ionako već zamućeni na 70px.
Zamućenje je zadržano SAMO tamo gde sadržaj stvarno klizi ispod
elementa: `.bottom-nav`, `.sticky-banner`, `.toast`, `.savings-alert`. */
box-shadow: var(--shadow-1);
padding: var(--pad-card);
}
.card + .card {
margin-top: 16px;
}
.card-title {
font-size: 12px;
font-weight: 800;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.8px;
}
/* chips row */
.chip-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
overflow-x: auto;
padding: 2px 0 4px;
/* „Probija" karticu do njene ivice, pa poslednja pilula pri skrolu ne visi u
vazduhu. Bleed MORA da prati `.card`-ov padding — vidi `--pad-card`. */
margin: 10px calc(-1 * var(--pad-card));
padding-left: var(--pad-card);
padding-right: var(--pad-card);
}
.chip-row::-webkit-scrollbar {
display: none;
}
.chip {
flex: 0 0 auto;
padding: 9px 16px;
border-radius: var(--r-pill);
background: var(--surface);
border: 1px solid var(--border);
font-size: 12.5px;
font-weight: 700;
color: var(--text-dim);
white-space: nowrap;
transition: all 0.2s var(--ease);
}
.chip.active {
background: var(--text);
color: #12141f;
border-color: var(--text);
}
.chip:active {
transform: scale(0.95);
}
/* buttons */
.btn {
border-radius: var(--r-md);
font-weight: 700;
font-size: 15px;
padding: 16px 24px;
transition:
transform 0.15s var(--ease),
filter 0.15s;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.btn:active {
transform: scale(0.97);
}
/* Podrazumevana veličina ikonice unutar bilo kog dugmeta — dosad su samo
specifični modifikatori (.btn-block, .btn-flex...) imali svoje pravilo,
pa su ikonice u "golim" dugmadima padale na (preveliku) podrazumevanu
veličinu browsera. */
.btn svg {
width: 20px;
height: 20px;
flex-shrink: 0;
}
/* Bazna mera SVIH ikonica-dugmadi. Do sad je `.icon-btn` bio goli `