:root{color-scheme:light;--poz:#f2f5ec;--kar:#fff;--kar2:#eef2e6;--lin:#e1e7d8;--tekst:#14180f;--blag:#646e5c;--ak:#c6ee5c;--ak-t:#14180f;--crna:#14180f;--prot:#f0693f;--uh:#e8a815;--mast:#2a9bd8;--los:#d63c3c}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--poz);color:var(--tekst);font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
#pozadina{position:fixed;inset:0;z-index:-1;background-repeat:no-repeat;background-position:right -50px top 40px;background-size:320px;opacity:.13;background-image:url(pozadine/pocetna.svg)}
body[data-tab=trening] #pozadina{background-image:url(pozadine/trening.svg)}
body[data-tab=ishrana] #pozadina{background-image:url(pozadine/ishrana.svg)}
body[data-tab=napredak] #pozadina{background-image:url(pozadine/napredak.svg)}
body[data-tab=profil] #pozadina{background-image:url(pozadine/profil.svg)}
#app{max-width:640px;margin:auto;padding:16px 16px calc(92px + env(safe-area-inset-bottom))}
h1{font-size:26px;line-height:1.15;margin:4px 0 14px;letter-spacing:-.02em}
h2{font-size:17px;margin:0 0 10px}
h3{font-size:15px;margin:14px 0 6px;color:var(--blag);font-weight:600}
p{margin:6px 0}
.karta{background:var(--kar);border:1px solid var(--lin);border-radius:22px;padding:16px;margin-bottom:12px;box-shadow:0 2px 10px #2a33200d}
.blago{color:var(--blag);font-size:14px}
.mal{font-size:13px}
.red{display:flex;align-items:center;gap:10px}
.razmak{justify-content:space-between}
.omot{flex-wrap:wrap}
.raste{flex:1;min-width:0}
.mreza2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mreza3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
button,.dugme{font:inherit;font-weight:600;border:0;border-radius:24px;padding:12px 18px;min-height:48px;background:var(--crna);color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px}
button.sek,.dugme.sek{background:var(--kar2);color:var(--tekst);border:1px solid var(--lin)}
button.tiho{background:none;color:var(--blag);padding:8px;min-height:40px;font-weight:500}
button.los{background:none;border:1px solid var(--los);color:var(--los)}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--crna);outline-offset:2px}
button:disabled{opacity:.5}
.puno{width:100%}
label{display:block;font-size:14px;color:var(--blag);margin:10px 0 4px}
input,select{width:100%;font:inherit;font-size:16px;color:var(--tekst);background:var(--kar2);border:1px solid var(--lin);border-radius:10px;padding:11px 12px;min-height:46px}
input[type=checkbox]{width:22px;height:22px;min-height:0;accent-color:#6f9f10;flex:none}
label.cek{display:flex;gap:10px;align-items:flex-start;color:var(--tekst)}
.greska{color:var(--los);font-size:14px;margin:8px 0}
#poruka{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--crna);color:#fff;padding:10px 16px;border-radius:12px;font-weight:600;z-index:30;max-width:90%;text-align:center}
#meni{position:fixed;left:0;right:0;bottom:0;background:#fffffff5;border-top:1px solid var(--lin);display:flex;justify-content:center;padding-bottom:env(safe-area-inset-bottom);z-index:20}
#meni button{flex:1;max-width:128px;background:none;color:var(--blag);flex-direction:column;gap:1px;font-size:12px;font-weight:500;padding:8px 2px;border-radius:0;min-height:60px}
#meni button span{font-size:21px;line-height:1.2}
#meni button.ak{color:var(--tekst);font-weight:700}
.prsten{position:relative;width:170px;height:170px;margin:4px auto 10px}
.prsten svg{transform:rotate(-90deg);display:block}
.prsten div{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.prsten b{font-size:34px;line-height:1;font-variant-numeric:tabular-nums}
.traka{height:8px;border-radius:5px;background:var(--kar2);overflow:hidden;margin-top:4px}
.traka i{display:block;height:100%;border-radius:5px}
.makro{margin-top:10px;font-size:14px}
.broj{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.2}
.stavka{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--lin)}
.stavka:first-of-type{border-top:0}
.klik{width:100%;background:none;color:inherit;text-align:left;font-weight:400;padding:10px 0;border-radius:0;border-top:1px solid var(--lin);justify-content:space-between}
.podsjetnik{width:100%;background:var(--kar2);color:var(--tekst);border:1px solid var(--ak);font-weight:500;justify-content:flex-start;text-align:left;margin-bottom:8px}
.vjezba img{width:100%;aspect-ratio:3/2;max-height:230px;object-fit:contain;background:#fff;border-radius:10px;display:block}
.serija{display:grid;grid-template-columns:30px 1fr 1fr 52px;gap:8px;align-items:center;margin-top:8px}
.serija input{min-height:42px;padding:8px;text-align:center}
.serija button{min-height:42px;padding:0}
.serija button.gotovo{background:var(--ak);color:var(--ak-t)}
.tajmer{position:fixed;left:16px;right:16px;bottom:calc(72px + env(safe-area-inset-bottom));max-width:608px;margin:auto;background:var(--ak);color:var(--ak-t);border-radius:14px;padding:6px 8px 6px 16px;font-weight:700;z-index:25;display:flex;align-items:center;justify-content:space-between}
.tajmer button{background:none;color:var(--ak-t);min-height:40px}
.dani{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:12px}
.dani button{padding:8px 0;min-height:44px;font-size:13px;background:var(--kar2);color:var(--tekst);font-weight:500}
.dani button.ak{background:var(--ak);color:var(--ak-t);font-weight:700}
.dani button.odm{color:var(--blag)}
.datum{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.datum button{background:var(--kar2);color:var(--tekst);min-width:46px;padding:0}
.jezici{display:flex;gap:6px;margin-bottom:12px;overflow-x:auto}
.jezici button{flex:1;white-space:nowrap;background:var(--kar2);color:var(--tekst);font-weight:500;font-size:14px;padding:8px 10px}
.jezici button.ak{background:var(--ak);color:var(--ak-t);font-weight:700}
.modal{position:fixed;inset:0;background:#0007;z-index:40;display:flex;align-items:flex-end;justify-content:center}
.modal>div{background:var(--kar);width:100%;max-width:640px;max-height:90vh;overflow:auto;border-radius:18px 18px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom))}
table{width:100%;border-collapse:collapse;font-size:14px}
td,th{padding:6px 2px;border-top:1px solid var(--lin);text-align:left}
td:last-child,th:last-child{text-align:right;font-variant-numeric:tabular-nums}
.slike{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.slike figure{margin:0;position:relative}
.slike img,.poredi img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:10px;background:var(--kar2);display:block}
.slike figcaption,.poredi figcaption{font-size:12px;color:var(--blag);margin-top:3px}
.poredi{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.poredi figure{margin:0}
.bedz{display:inline-flex;align-items:center;gap:6px;background:var(--kar2);border-radius:20px;padding:6px 12px;font-size:13px;margin:0 6px 6px 0}
.bedz.ne{opacity:.35;filter:grayscale(1)}
.grafik svg{width:100%;height:auto;display:block}
.video{width:100%;border-radius:12px;background:#000;max-height:50vh}
.kod{font:700 19px ui-monospace,Consolas,monospace;letter-spacing:.04em;background:var(--kar2);padding:12px;border-radius:10px;text-align:center;word-break:break-all}
.logo{font-size:34px;font-weight:800;letter-spacing:-.03em;margin:28px 0 2px}
.logo em{font-style:normal;background:var(--ak);padding:0 8px;border-radius:10px;margin-left:2px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.hero{background:linear-gradient(160deg,#dcf58c,#c6ee5c 55%,#eef8cf);border:0}
.hero .blago{color:#3f4a30}
.hero .traka{background:#ffffffa0}
.bmi{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;margin:8px 0 4px}
.bmi i{height:8px;display:block}
.bmi i:nth-child(1){background:#b6a4ff;border-radius:5px 0 0 5px}.bmi i:nth-child(2){background:#8fd96a}.bmi i:nth-child(3){background:#8fd5e8}.bmi i:nth-child(4){background:#f5b95f;border-radius:0 5px 5px 0}
.bmi-oznake{display:grid;grid-template-columns:repeat(4,1fr);font-size:12px;color:var(--blag);text-align:center}
.bmi-oznake b{color:var(--tekst)}
.slagalica{position:relative;border-radius:10px;overflow:hidden;line-height:0}.slagalica img{width:100%;display:block}.slagalica #k-komad{position:absolute;top:0;height:100%;filter:drop-shadow(0 0 3px #000)}input[type=range]{padding:0;min-height:40px;background:none;border:0;accent-color:#14180f;margin-top:6px}
.jelo{padding:2px 8px;margin:4px -8px 0;border-radius:12px;border-top:0}.jelo.izabrano{background:var(--ak)}.jelo.izabrano .blago{color:#3f4a30}.jelo.izabrano .tiho{color:#3f4a30}
.klizac{background:var(--kar2);border-radius:18px;padding:12px 14px;margin-top:12px}
.klizac label{margin:0}
.klizac output{font-size:15px;color:var(--blag)}
.klizac output b{font-size:28px;color:var(--tekst);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.klizac input[type=range]{flex:1;min-width:0;margin:0;height:40px;-webkit-appearance:none;appearance:none;background:none;touch-action:none;cursor:pointer}
.klizac input[type=range]::-webkit-slider-runnable-track{height:10px;border-radius:6px;background:linear-gradient(90deg,#9fd42f var(--p),#dbe2cf var(--p))}
.klizac input[type=range]::-moz-range-track{height:10px;border-radius:6px;background:#dbe2cf}
.klizac input[type=range]::-moz-range-progress{height:10px;border-radius:6px;background:#9fd42f}
.klizac input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;margin-top:-10px;border-radius:50%;background:var(--crna);border:4px solid #fff;box-shadow:0 2px 8px #0005}
.klizac input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--crna);border:4px solid #fff;box-shadow:0 2px 8px #0005}
.klizac .kl-d{width:40px;height:40px;min-height:40px;padding:0;flex:none;border-radius:50%;background:#fff;color:var(--tekst);font-size:20px;box-shadow:0 1px 4px #0002}
.skala{height:8px;margin:2px 50px 2px;background:repeating-linear-gradient(90deg,#aab39e 0 1px,transparent 1px 10%)}
#bmi-uzivo{margin-top:4px}
.jelo-slika{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:14px;display:block;margin-top:10px}
.jelo-mala{width:60px;height:60px;object-fit:cover;border-radius:10px;flex:none;display:flex;align-items:center;justify-content:center}
.jelo-prazna{background:var(--kar2);font-size:24px}
.jelo{padding:6px 8px}
summary{cursor:pointer}