/* ============================================================
   Travel Dude — jedan CSS fajl (dizajn iz prototipa)
   Fontovi se učitavaju <link>-om u HTML-u, ne @import-om.
   ============================================================ */

:root{
  --paper:#F5F3EE; --surf:#FFFFFF; --surf2:#F0EDE6; --surf3:#E7E3DA;
  --ink:#16232B; --ink2:#4A5B65; --ink3:#6B7B83;
  --line:#E2DDD4; --line2:#EDEAE3;
  --acc:#00968D; --acc-d:#007A73; --acc-s:#E2F1EF;
  --sig:#C2691A; --sig-d:#9A5212; --sig-s:#FAEEE0;
  --good:#3F7A44; --good-s:#E6F1E5;
  --warn:#8A6100; --warn-s:#FBF1D6;
  --bad:#B03A34; --bad-s:#F8E5E3;
  --r:14px; --rs:10px;
  --sh:0 1px 2px rgba(22,35,43,.06), 0 10px 30px -14px rgba(22,35,43,.22);
  --f-serif:Fraunces,Georgia,serif;
  --f-sans:Archivo,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{margin:0; font-family:var(--f-sans); color:var(--ink); -webkit-font-smoothing:antialiased}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; font-size:inherit}
button:disabled{cursor:not-allowed}
input,textarea,select{font-family:inherit; font-size:16px}
a{color:var(--acc)}
img{max-width:100%}
[hidden]{display:none !important}
.mono{font-family:var(--f-mono); font-variant-numeric:tabular-nums}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* vidljiv fokus za tastaturu — miš ga ne pali */
:focus{outline:none}
:focus-visible{outline:2.5px solid var(--acc); outline-offset:2px; border-radius:6px}
.chip:focus-visible,.mini:focus-visible,.btn:focus-visible{outline-offset:3px}
/* polja za unos: prsten umesto okvira preko okvira */
input:focus-visible,textarea:focus-visible{outline:none; border-color:var(--acc) !important; box-shadow:0 0 0 3px rgba(0,150,141,.25)}
input[aria-invalid="true"]:focus-visible{border-color:var(--bad) !important; box-shadow:0 0 0 3px rgba(176,58,52,.2)}
input[type=range]:focus-visible{box-shadow:none; outline:2px solid var(--acc); outline-offset:2px}

/* ---------- okvir telefona (body.app) ---------- */
body.app{
  background:
    radial-gradient(1100px 620px at 12% -8%, #DCE9E7 0%, transparent 62%),
    radial-gradient(900px 540px at 96% 8%, #F3E6D6 0%, transparent 58%),
    #EDEAE3;
  display:flex; align-items:center; justify-content:center; padding:22px;
}
#phone{
  width:392px; height:min(848px, calc(100vh - 44px)); background:var(--paper);
  border-radius:36px; box-shadow:var(--sh), 0 0 0 10px #20282D, 0 0 0 12px #333E45;
  overflow:hidden; position:relative; display:flex; flex-direction:column;
}
#notch{height:26px; flex:none; display:flex; align-items:center; justify-content:space-between;
  padding:0 20px; font-size:11px; font-weight:600; color:var(--ink); background:var(--paper); z-index:5}
#notch .r{display:flex; gap:6px; align-items:center; font-size:10px}
#notch .mock{font-family:var(--f-mono); font-size:9px; letter-spacing:.1em; color:var(--sig);
  background:var(--sig-s); padding:2px 6px; border-radius:99px}
#trake{flex:none; z-index:6}
#screen{flex:1; overflow-y:auto; overflow-x:hidden; position:relative; overscroll-behavior:contain}
#screen::-webkit-scrollbar{width:0}
.pad{padding:0 20px 24px}

/* ---------- bočna napomena (samo mock, samo računar) ---------- */
#side{
  position:fixed; right:26px; top:50%; transform:translateY(-50%); width:280px;
  background:rgba(255,255,255,.88); backdrop-filter:blur(10px);
  border:1px solid var(--line); border-radius:var(--r); padding:18px 20px; box-shadow:var(--sh);
}
#side h4{font-family:var(--f-serif); font-size:15px; margin:0 0 8px; font-weight:600}
#side p{margin:0 0 10px; font-size:12.5px; line-height:1.55; color:var(--ink2)}
#side code{font-family:var(--f-mono); font-size:11.5px; background:var(--surf2); padding:1px 5px; border-radius:5px; color:var(--ink)}
#side .tag{display:inline-block; font-family:var(--f-mono); font-size:9.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--sig); background:var(--sig-s); padding:3px 8px; border-radius:99px; margin-bottom:10px}
#side .reset{font-size:12px; color:var(--acc); text-decoration:underline; padding:0}
@media (max-width:1180px){ #side{display:none} }

/* ---------- tipografija ---------- */
h1,h2,h3{font-family:var(--f-serif); margin:0; line-height:1.16; letter-spacing:-.02em}
h1{font-size:28px; font-weight:700}
h2{font-size:22px; font-weight:600}
h3{font-size:16px; font-weight:600}
p{margin:0}
.sub{font-size:14px; color:var(--ink2); line-height:1.55}
.eyebrow{font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--acc)}
.sitno{font-size:12px; color:var(--ink3); line-height:1.5}
.centar{text-align:center}
.mt8{margin-top:8px}
.mb10{margin-bottom:10px}
.pad-v{padding:10px 0 4px}
.boja-acc{color:var(--acc)}
.flex1{flex:1; min-width:0}
.trunc{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.w44{width:44px; flex:none; font-size:12px; padding-top:2px}
.h3-sans{font-family:var(--f-sans); font-size:15.5px; letter-spacing:0}
.why-l{font-size:13px; color:var(--ink2); margin-top:5px; line-height:1.5}

/* ---------- dugmad ---------- */
.btn{
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  background:var(--acc); color:#fff; font-size:15.5px; font-weight:600; text-decoration:none;
  padding:15px 18px; border-radius:12px; transition:transform .08s, background .15s;
}
.btn:active{transform:scale(.985); background:var(--acc-d)}
.btn:disabled{background:var(--surf3); color:var(--ink3)}
.btn.ghost{background:transparent; color:var(--ink2); border:1px solid var(--line); font-weight:500}
.btn.ghost:active{background:var(--surf2)}
.btn.sig{background:var(--sig)}
.btn.sig:active{background:var(--sig-d)}
.btn.sm{padding:11px 14px; font-size:14px; width:auto}
.btn.sm.pun{width:100%}
.btn .spin{width:18px; height:18px; border-width:2px; border-color:rgba(255,255,255,.35); border-top-color:#fff}
.link{color:var(--acc); font-size:14px; font-weight:500; padding:8px}
.link:disabled{color:var(--ink3)}
.red{display:flex; gap:8px; align-items:center}
.red.razmak{justify-content:space-between}
.red > .btn{flex:1}

/* ---------- onboarding ---------- */
.ob{padding:8px 20px 20px; display:flex; flex-direction:column; min-height:100%}
.ob.sredina{justify-content:center; text-align:center}
.ob .logo{font-size:54px; margin-bottom:14px; line-height:1}
.ob .logo img{width:72px; height:72px; border-radius:18px}
.prog{display:flex; gap:5px; margin:6px 0 22px}
.prog i{height:3px; flex:1; background:var(--surf3); border-radius:2px; transition:background .3s}
.prog i.on{background:var(--acc)}
.ob h2{margin-bottom:6px}
.ob .sub{margin-bottom:20px}
.ob .foot{margin-top:auto; padding-top:20px; display:flex; flex-direction:column; gap:8px}
.razmak-gore{height:14px}

.opts{display:flex; flex-direction:column; gap:9px}
.opt{
  display:flex; align-items:center; gap:12px; padding:14px 15px; background:var(--surf);
  border:1.5px solid var(--line); border-radius:12px; text-align:left; transition:.14s; width:100%;
}
.opt:active{transform:scale(.99)}
.opt.on{border-color:var(--acc); background:var(--acc-s)}
.opt .ic{font-size:21px; flex:none; width:26px; text-align:center}
.opt .tx{flex:1; min-width:0}
.opt .tx b{display:block; font-size:15px; font-weight:600}
.opt .tx span{display:block; font-size:12.5px; color:var(--ink3); margin-top:1px; line-height:1.4}
.opt .ck{width:20px; height:20px; border-radius:50%; border:1.5px solid var(--line); flex:none;
  display:grid; place-items:center; font-size:11px; color:#fff}
.opt.on .ck{background:var(--acc); border-color:var(--acc)}

.tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:9px}
.tile{
  aspect-ratio:1; border-radius:12px; border:2.5px solid transparent; position:relative;
  display:flex; flex-direction:column; justify-content:flex-end; padding:9px; overflow:hidden;
  transition:.14s; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.5); text-align:left;
}
.tile:active{transform:scale(.96)}
.tile span{font-size:11.5px; font-weight:600; line-height:1.25; position:relative; z-index:2}
.tile .em{position:absolute; top:8px; left:9px; font-size:22px; z-index:2; filter:drop-shadow(0 1px 3px rgba(0,0,0,.35))}
.tile::after{content:""; position:absolute; inset:0; background:linear-gradient(transparent 35%, rgba(0,0,0,.55))}
.tile.on{border-color:var(--acc); box-shadow:0 0 0 2px var(--paper) inset}
.tile.on::before{content:"✓"; position:absolute; top:7px; right:7px; z-index:3; width:19px; height:19px;
  background:var(--acc); color:#fff; border-radius:50%; display:grid; place-items:center; font-size:11px; text-shadow:none}

.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{padding:10px 14px; border-radius:99px; border:1.5px solid var(--line); background:var(--surf);
  font-size:14px; font-weight:500; transition:.14s; color:var(--ink)}
.chip.on{background:var(--acc); border-color:var(--acc); color:#fff}
.chip:active{transform:scale(.96)}
.chip:disabled{opacity:.5}
.chips.tight{gap:6px}
.chips.tight .chip{padding:8px 11px; font-size:13px}
.chips.skrol{flex-wrap:nowrap; overflow-x:auto; padding-bottom:2px; margin:0 -20px; padding-left:20px; padding-right:20px}
.chips.skrol::-webkit-scrollbar{height:0}
.chips.skrol .chip{white-space:nowrap; flex:none}

textarea.free{
  width:100%; min-height:110px; padding:14px; border-radius:12px; border:1.5px solid var(--line);
  background:var(--surf); font-size:16px; line-height:1.5; resize:none; color:var(--ink);
}
textarea.free:focus{border-color:var(--acc)}
.hints{display:flex; flex-wrap:wrap; gap:7px; margin-top:12px}
.hint{font-size:12.5px; color:var(--ink2); background:var(--surf2); padding:7px 11px; border-radius:99px; border:1px solid var(--line2)}
.brojac{font-family:var(--f-mono); font-size:11px; color:var(--ink3); text-align:right; margin-top:5px}

.datum-red{display:flex; gap:10px; align-items:flex-end; margin-top:14px}
.datum-red .fld{flex:1; margin:0}

/* ---------- prijava i polja ---------- */
.fld{display:block; margin-bottom:13px; text-align:left}
.fld > span{display:block; font-size:12.5px; font-weight:600; color:var(--ink2); margin-bottom:6px}
.fld input{
  width:100%; padding:13px 15px; border-radius:12px; border:1.5px solid var(--line);
  background:var(--surf); color:var(--ink); font-size:16px;
}
.fld input:focus{border-color:var(--acc)}
.fld input[aria-invalid="true"]{border-color:var(--bad)}
.fld input.kod{font-family:var(--f-mono); letter-spacing:.12em; text-transform:uppercase; font-size:18px}
.err{font-size:13px; color:var(--bad); min-height:18px; margin-top:2px; line-height:1.45}
.gprijava{display:flex; flex-direction:column; align-items:center; gap:10px; min-height:44px}
.gprijava .glaz{display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  background:#fff; color:#1F1F1F; border:1px solid #747775; border-radius:99px; padding:12px 16px;
  font-size:14.5px; font-weight:500}
.gprijava .glaz svg{width:18px; height:18px}
.razdvoji{display:flex; align-items:center; gap:10px; color:var(--ink3); font-size:12px; margin:6px 0}
.razdvoji::before,.razdvoji::after{content:""; flex:1; height:1px; background:var(--line)}
.avatar{
  width:42px; height:42px; border-radius:50%; background:var(--acc); color:#fff; flex:none; overflow:hidden;
  display:grid; place-items:center; font-family:var(--f-serif); font-size:19px; font-weight:600;
}
.avatar img{width:100%; height:100%; object-fit:cover}
.avatar.sm{width:32px; height:32px; font-size:14px}

/* ---------- generisanje ---------- */
.load{display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:100%; gap:20px; padding:40px 28px}
.spin{width:44px; height:44px; border:3px solid var(--surf3); border-top-color:var(--acc); border-radius:50%; animation:sp .8s linear infinite; flex:none}
.spin.sm{width:20px; height:20px; border-width:2px}
@keyframes sp{to{transform:rotate(360deg)}}
.load .steps{display:flex; flex-direction:column; gap:10px; width:100%; margin-top:8px}
.load .st{font-size:13.5px; color:var(--ink3); display:flex; gap:9px; align-items:center; opacity:.35; transition:opacity .4s, color .4s}
.load .st.on{opacity:1; color:var(--ink2)}
.load .st.gotovo{opacity:.7}
.load .st .zn{width:16px; flex:none; text-align:center; color:var(--acc)}
.load .st b{color:var(--acc)}
.load .vreme-cekanja{font-size:12px; color:var(--ink3)}

/* ---------- zaglavlje ekrana ---------- */
.hd{position:sticky; top:0; z-index:10; background:color-mix(in srgb,var(--paper) 92%,transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); padding:12px 20px 11px; border-bottom:1px solid var(--line2)}
.hd .row{display:flex; align-items:center; justify-content:space-between; gap:10px}
.hd .row > div{min-width:0}
.hd h2{font-size:19px}
.hd .meta{font-size:12px; color:var(--ink3); margin-top:2px; line-height:1.4}
.hd .nazad{font-size:13.5px; color:var(--acc); font-weight:600; padding:4px 0; margin-bottom:4px; display:inline-flex; gap:5px}
.badge{font-family:var(--f-mono); font-size:9.5px; letter-spacing:.08em; padding:4px 8px;
  border-radius:99px; background:var(--acc-s); color:var(--acc); font-weight:500; white-space:nowrap; flex:none}
.badge.sig{background:var(--sig-s); color:var(--sig)}
.badge.gd{background:var(--good-s); color:var(--good)}
.badge.siva{background:var(--surf2); color:var(--ink2)}
button.badge{cursor:pointer}

/* ---------- kartice ---------- */
.card{background:var(--surf); border:1px solid var(--line2); border-radius:var(--r); padding:15px; margin-bottom:10px}
.card.tiha{background:var(--surf2); border:none}
.card.acc{background:var(--acc-s); border:none}
.card.acc p{color:var(--acc-d)}
.card.sig{background:var(--sig-s); border:none}
.card p{font-size:13px; color:var(--ink2); line-height:1.55}
.card h3{margin-bottom:6px}
.card.lock{position:relative; overflow:hidden}
.card.lock .inner{filter:blur(5px); opacity:.5; pointer-events:none; user-select:none}
.card.lock .over{position:absolute; inset:0; display:grid; place-items:center; background:rgba(245,243,238,.55)}
.card.lock .over span{font-size:24px}
.razmak-t{margin-top:12px}

.plan-item{display:flex; gap:12px; background:var(--surf); border:1px solid var(--line2);
  border-radius:var(--r); padding:14px; margin-bottom:10px; position:relative}
.plan-item .time{font-family:var(--f-mono); font-size:12px; color:var(--acc); font-weight:500;
  width:44px; flex:none; padding-top:2px}
.plan-item .time small{display:block; color:var(--ink3); font-size:10.5px; margin-top:3px; font-weight:400}
.plan-item .body{flex:1; min-width:0}
.plan-item h3{font-size:15.5px; font-family:var(--f-sans); letter-spacing:0; margin-bottom:3px; overflow-wrap:anywhere}
.plan-item .area{font-size:12px; color:var(--ink3); margin-bottom:7px; display:flex; gap:4px 8px; flex-wrap:wrap}
.plan-item .why{font-size:13.5px; color:var(--ink2); line-height:1.5; margin-bottom:9px}
.plan-item .sati{font-family:var(--f-mono); font-size:11.5px; color:var(--ink3); margin-bottom:9px; line-height:1.45}
.plan-item .acts{display:flex; gap:7px; flex-wrap:wrap}
.plan-item.sad{border-color:var(--acc); box-shadow:0 0 0 1px var(--acc) inset}
.plan-item.bez-imena h3{color:var(--ink3); font-weight:500}
.plan-item.bez-imena .skel{margin-bottom:7px}
.mini{font-size:12px; padding:6px 11px; border-radius:99px; border:1px solid var(--line);
  background:var(--surf2); color:var(--ink2); font-weight:500; text-decoration:none; display:inline-flex; align-items:center; gap:5px}
.mini.acc{background:var(--acc-s); border-color:transparent; color:var(--acc)}
.mini:active{transform:scale(.96)}
.mini:disabled{opacity:.55}
.mini .spin{width:12px; height:12px; border-width:1.5px}

/* ---------- stanja: učitavanje, greška, prazno ---------- */
.stanje{display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px;
  padding:26px 18px; background:var(--surf); border:1px solid var(--line2); border-radius:var(--r); margin:12px 0}
.stanje .ik{font-size:30px; line-height:1}
.stanje h3{font-family:var(--f-sans); font-size:15.5px; letter-spacing:0}
.stanje p{font-size:13.5px; color:var(--ink2); line-height:1.55; max-width:300px}
.stanje .dugmad{display:flex; flex-direction:column; gap:6px; width:100%; margin-top:8px}
.stanje.greska{border-color:#EBC9C5}
.stanje.limit{background:var(--sig-s); border-color:transparent}
.stanje.offline{background:var(--surf2); border-color:transparent}
.stanje.prazno{background:transparent; border:1.5px dashed var(--line)}
.stanje.kompakt{padding:14px; flex-direction:row; text-align:left; align-items:flex-start; gap:11px}
.stanje.kompakt .ik{font-size:20px}
.stanje.kompakt p{max-width:none}
.stanje.kompakt .dugmad{flex-direction:row; flex-wrap:wrap; margin-top:6px}
.skel{height:12px; border-radius:6px; background:linear-gradient(90deg,var(--surf2) 0%,var(--surf3) 50%,var(--surf2) 100%);
  background-size:200% 100%; animation:skel 1.3s ease-in-out infinite}
.skel.w40{width:40%} .skel.w60{width:60%} .skel.w80{width:80%} .skel.v{height:16px}
@keyframes skel{from{background-position:200% 0} to{background-position:-200% 0}}
.skel-kartica{background:var(--surf); border:1px solid var(--line2); border-radius:var(--r); padding:14px; margin-bottom:10px;
  display:flex; flex-direction:column; gap:9px}

/* ---------- trake na vrhu (offline, nova verzija) ---------- */
.traka{display:flex; align-items:center; gap:9px; padding:8px 16px; font-size:12.5px; line-height:1.4}
.traka.offline{background:var(--ink); color:var(--paper)}
.traka.nova{background:var(--acc); color:#fff}
.traka b{font-weight:600}
.traka .desno{margin-left:auto; flex:none}
.traka button{font-weight:600; text-decoration:underline; padding:2px 0; color:inherit}

/* ---------- prognoza ---------- */
.vreme{display:flex; flex-direction:column; gap:10px; background:var(--surf); border:1px solid var(--line2);
  border-radius:var(--r); padding:13px 15px; margin:12px 0 10px}
.vreme .gore{display:flex; align-items:center; gap:11px}
.vreme .em{font-size:28px; line-height:1; flex:none}
.vreme .tx{flex:1; min-width:0}
.vreme .tx b{font-size:15px; font-weight:600; display:block}
.vreme .tx span{font-size:12px; color:var(--ink3); display:block; margin-top:1px}
.vreme .temp{font-family:var(--f-serif); font-size:26px; font-weight:600; letter-spacing:-.02em; flex:none}
.vreme.kisa{background:var(--sig-s); border-color:transparent}
.vreme.kisa .tx span{color:var(--sig-d)}
.vreme-dani{display:grid; grid-template-columns:repeat(5,1fr); gap:4px; border-top:1px solid var(--line2); padding-top:9px}
.vreme.kisa .vreme-dani{border-color:rgba(194,105,26,.2)}
.vreme-dani div{text-align:center; font-size:11px; color:var(--ink3); display:flex; flex-direction:column; gap:2px}
.vreme-dani .e{font-size:17px; line-height:1.2}
.vreme-dani .t{font-family:var(--f-mono); color:var(--ink2); font-size:11px}
.vreme-dani .put{color:var(--acc); font-weight:600}

/* ---------- napomene i atribucija ---------- */
.napomene{background:var(--warn-s); border-radius:var(--r); padding:12px 14px; margin:0 0 10px; display:flex; flex-direction:column; gap:6px}
.napomene p{font-size:13px; color:#5E4A12; line-height:1.5; display:flex; gap:8px}
.gattr{display:flex; align-items:center; justify-content:flex-end; gap:6px; padding:5px 2px 2px;
  font-family:Roboto,Arial,sans-serif; font-weight:400; font-size:12px; color:#5E5E5E}
.gattr img{height:16px; width:auto; display:block}
.gattr.levo{justify-content:flex-start}
.dan-chips{margin-top:14px}

/* ---------- razgovor ---------- */
#chatwrap{display:flex; flex-direction:column; height:100%}
#msgs{flex:1; min-height:0; overflow-y:auto; padding:16px 20px 8px; display:flex; flex-direction:column; gap:12px}
#msgs::-webkit-scrollbar{width:0}
.msg{max-width:88%; padding:12px 14px; border-radius:16px; font-size:14.5px; line-height:1.55}
.msg .txt{white-space:pre-wrap; overflow-wrap:anywhere}
.msg.ai{background:var(--surf); border:1px solid var(--line2); border-bottom-left-radius:5px; align-self:flex-start}
.msg.me{background:var(--acc); color:#fff; border-bottom-right-radius:5px; align-self:flex-end}
.msg.ai b{color:var(--ink); font-weight:650}
.msg.greska{background:var(--bad-s); border:1px solid #EBC9C5; color:#6E2420; border-bottom-left-radius:5px; align-self:flex-start; font-size:13.5px}
.msg.greska.limit{background:var(--sig-s); border-color:transparent; color:#6A3A0E}
.msg.greska.offline{background:var(--surf2); border-color:transparent; color:var(--ink2)}
.msg .akc{display:flex; gap:6px; margin-top:9px; flex-wrap:wrap}
.msg-mesta{display:flex; flex-direction:column; gap:7px; margin-top:10px}
.mesto-mini{display:flex; gap:10px; align-items:center; background:var(--surf2); border-radius:11px; padding:9px 10px}
.mesto-mini .ik{font-size:18px; flex:none}
.mesto-mini .b{flex:1; min-width:0}
.mesto-mini .b b{display:block; font-size:13.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mesto-mini .b span{display:block; font-size:11.5px; color:var(--ink3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.typing{display:flex; gap:4px; padding:14px}
.typing i{width:7px; height:7px; background:var(--ink3); border-radius:50%; animation:bl 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s} .typing i:nth-child(3){animation-delay:.4s}
@keyframes bl{0%,60%,100%{opacity:.25} 30%{opacity:1}}
#sugg{padding:6px 20px 6px; display:flex; gap:7px; overflow-x:auto; flex:none}
#sugg::-webkit-scrollbar{height:0}
#sugg button{white-space:nowrap; font-size:13px; padding:9px 13px; border-radius:99px;
  border:1px solid var(--line); background:var(--surf); color:var(--ink2); font-weight:500}
#sugg button:disabled{opacity:.5}
.alati{display:flex; gap:7px; padding:4px 20px 6px; flex:none}
.alati button{flex:1; display:flex; align-items:center; justify-content:center; gap:6px; font-size:13px; font-weight:600;
  padding:9px 10px; border-radius:11px; background:var(--acc-s); color:var(--acc-d)}
.alati button:disabled{background:var(--surf2); color:var(--ink3)}
#bar{flex:none; padding:8px 20px 12px; display:flex; gap:8px; align-items:center; border-top:1px solid var(--line2); background:var(--paper)}
#bar input{flex:1; min-width:0; padding:12px 14px; border-radius:99px; border:1px solid var(--line); background:var(--surf); color:var(--ink)}
#bar input:focus{border-color:var(--acc)}
#bar input:disabled{background:var(--surf2); color:var(--ink3)}
#bar .snd{width:42px; height:42px; border-radius:50%; background:var(--acc); color:#fff; display:grid; place-items:center; flex:none; font-size:17px}
#bar .snd:disabled{background:var(--surf3); color:var(--ink3)}
.quota{font-size:12px; color:var(--ink2); text-align:center; padding:6px 20px; line-height:1.45}
.quota b{color:var(--sig)}
.quota.limit{background:var(--sig-s); color:#6A3A0E}

/* ---------- blizu mene ---------- */
.mesto-kartica{background:var(--surf); border:1px solid var(--line2); border-radius:var(--r); padding:13px 14px; margin-bottom:9px}
.mesto-kartica .gore{display:flex; gap:10px; align-items:flex-start}
.mesto-kartica .ik{font-size:20px; flex:none; margin-top:1px}
.mesto-kartica .b{flex:1; min-width:0}
.mesto-kartica h3{font-family:var(--f-sans); font-size:15px; letter-spacing:0; overflow-wrap:anywhere}
.mesto-kartica .area{font-size:12px; color:var(--ink3); margin-top:3px; display:flex; gap:4px 8px; flex-wrap:wrap}
.mesto-kartica .why{font-size:13px; color:var(--ink2); line-height:1.5; margin:8px 0}
.mesto-kartica .hod{font-family:var(--f-mono); font-size:13px; color:var(--acc); font-weight:500; flex:none; text-align:right; line-height:1.2}
.mesto-kartica .hod small{display:block; font-size:10px; color:var(--ink3); font-weight:400}
.mesto-kartica .sati{font-family:var(--f-mono); font-size:11.5px; color:var(--ink3); line-height:1.45; margin-bottom:9px}
.mesto-kartica .acts{display:flex; gap:7px; flex-wrap:wrap}
.otv{color:var(--good); font-weight:600}
.zatv{color:var(--bad); font-weight:600}

/* ---------- slikaj meni ---------- */
.foto-pregled{width:100%; max-height:220px; object-fit:cover; border-radius:var(--r); display:block; margin:12px 0}
.meni-sazetak{background:var(--acc-s); border-radius:var(--r); padding:14px 15px; margin:12px 0 10px}
.meni-sazetak p{font-size:14px; color:var(--acc-d); line-height:1.55}
.meni-spec{background:var(--sig-s); border-radius:var(--r); padding:12px 14px; margin-bottom:10px; display:flex; gap:10px}
.meni-spec p{font-size:13.5px; color:#6A3A0E; line-height:1.5}
.jelo{background:var(--surf); border:1px solid var(--line2); border-radius:var(--r); padding:12px 14px; margin-bottom:8px}
.jelo.prep{border-color:var(--acc); box-shadow:0 0 0 1px var(--acc) inset}
.jelo .gore{display:flex; gap:10px; align-items:flex-start}
.jelo .b{flex:1; min-width:0}
.jelo .b b{display:block; font-size:14.5px; font-weight:600; overflow-wrap:anywhere}
.jelo .b span{display:block; font-size:13px; color:var(--ink2); margin-top:2px; line-height:1.45}
.jelo .cena{font-family:var(--f-mono); font-size:13px; font-weight:500; flex:none; white-space:nowrap}
.jelo .razlog{font-size:12.5px; color:var(--ink2); margin-top:7px; line-height:1.45}
.jelo .preporuka{font-size:11px; font-weight:600; color:var(--acc); margin-top:6px}
.presuda{display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700; padding:3px 8px; border-radius:99px; margin-top:7px; letter-spacing:.02em}
.presuda.ok{background:var(--good-s); color:var(--good)}
.presuda.caution{background:var(--warn-s); color:var(--warn)}
.presuda.avoid{background:var(--bad-s); color:var(--bad)}

/* ---------- checklista ---------- */
.ck-item{display:flex; gap:12px; background:var(--surf); border:1px solid var(--line2); width:100%; text-align:left;
  border-radius:var(--r); padding:14px; margin-bottom:9px; align-items:flex-start}
.ck-item.done{background:var(--good-s); border-color:transparent}
.ck-box{width:23px; height:23px; border-radius:7px; border:1.6px solid var(--line); flex:none;
  display:grid; place-items:center; font-size:12px; color:#fff; margin-top:1px}
.ck-item.done .ck-box{background:var(--good); border-color:var(--good)}
.ck-item .ic{font-size:19px; flex:none}
.ck-item .b{flex:1; min-width:0}
.ck-item .h{display:block; font-size:14.5px; font-weight:600; color:var(--ink)}
.ck-item .d{display:block; font-size:12.5px; color:var(--ink2); line-height:1.45; margin-top:3px}
.ck-item .aff{display:block; font-family:var(--f-mono); font-size:9.5px; color:var(--ink3); margin-top:7px}
.ck-item .cta{margin-top:9px; font-size:12.5px; font-weight:600; color:var(--acc);
  background:var(--acc-s); padding:7px 12px; border-radius:99px; display:inline-block}
.ponesi{display:flex; gap:10px; padding:9px 0; border-top:1px solid var(--line2); font-size:13.5px; line-height:1.45; width:100%; text-align:left; color:var(--ink2); align-items:flex-start}
.ponesi:first-of-type{border-top:none}
.ponesi .kv2{width:19px; height:19px; border-radius:6px; border:1.5px solid var(--line); flex:none; display:grid; place-items:center; font-size:10px; color:#fff; margin-top:1px}
.ponesi.on{color:var(--ink3); text-decoration:line-through}
.ponesi.on .kv2{background:var(--good); border-color:var(--good)}
.ponesi .zasto{display:block; font-size:11.5px; color:var(--acc); text-decoration:none; margin-top:1px}

/* ---------- troškovi ---------- */
.budget{background:var(--surf); border:1px solid var(--line2); border-radius:var(--r); padding:17px; margin-bottom:12px}
.budget .big{font-family:var(--f-serif); font-size:32px; font-weight:600; letter-spacing:-.02em}
.budget .lbl{font-size:12px; color:var(--ink3); margin-bottom:3px}
.budget p{font-size:13px; color:var(--ink2); line-height:1.5}
.budget p.minus{color:var(--bad)}
.bar{height:8px; background:var(--surf3); border-radius:99px; overflow:hidden; margin:13px 0 8px}
.bar i{display:block; height:100%; background:var(--acc); border-radius:99px; transition:width .5s}
.bar i.over{background:var(--bad)}
.bar i.upoz{background:var(--sig)}
.addrow{display:flex; gap:7px; margin-bottom:4px}
.addrow input{flex:1; padding:11px 13px; border-radius:10px; border:1px solid var(--line); background:var(--surf); font-size:16px; color:var(--ink); min-width:0}
.addrow input:focus{border-color:var(--acc)}
.addrow input.n{width:92px; flex:none; text-align:right}
.lbl2{font-size:11.5px; font-weight:600; color:var(--ink3); text-transform:uppercase; letter-spacing:.05em; margin:14px 0 8px}
.saldi{display:flex; flex-direction:column; gap:2px}
.saldo{display:flex; align-items:center; gap:11px; padding:8px 0}
.saldo .ime{flex:1; font-size:14.5px; font-weight:500; min-width:0; overflow-wrap:anywhere}
.saldo .iznos{font-family:var(--f-mono); font-size:15px; font-weight:500; color:var(--ink3)}
.saldo .iznos.plus{color:var(--good)}
.saldo .iznos.minus{color:var(--bad)}
.poravnanja{margin-top:11px; padding-top:11px; border-top:1px solid var(--line2); display:flex; flex-direction:column; gap:9px}
.por{display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--ink2)}
.por > span:first-child{min-width:0; overflow-wrap:anywhere}
.por b{color:var(--ink); font-weight:600}
.por .mono{margin-left:auto; font-weight:600; color:var(--ink); white-space:nowrap}
.ravni{font-size:13.5px; color:var(--good); margin-top:11px; padding-top:11px; border-top:1px solid var(--line2)}
.splits{display:flex; flex-direction:column; gap:6px}
.splitrow{display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px;
  border:1.5px solid var(--line); border-radius:10px; background:var(--surf); text-align:left; transition:.12s}
.splitrow .ck{width:19px; height:19px; border-radius:6px; border:1.5px solid var(--line);
  display:grid; place-items:center; font-size:11px; color:transparent; flex:none}
.splitrow.on{border-color:var(--acc); background:var(--acc-s)}
.splitrow.on .ck{background:var(--acc); border-color:var(--acc); color:#fff}
.splitrow .ime{flex:1; font-size:14px; font-weight:500; min-width:0; overflow-wrap:anywhere}
.splitrow .po{font-size:13px; color:var(--ink3)}
.splitrow.on .po{color:var(--acc); font-weight:500}
.exp2{display:flex; align-items:center; gap:11px; padding:11px 0; border-bottom:1px solid var(--line2)}
.exp2:last-child{border:none}
.exp2 .kat{font-size:18px; width:26px; text-align:center; flex:none}
.exp2 .b{flex:1; min-width:0}
.exp2 .b b{display:block; font-size:14px; font-weight:600; overflow-wrap:anywhere}
.exp2 .b span{display:block; font-size:12px; color:var(--ink3); margin-top:1px}
.exp2 .amt{font-weight:600; font-size:14.5px; white-space:nowrap}
.exp2 .del, .clan .del{width:30px; height:30px; border-radius:50%; background:var(--surf2);
  color:var(--ink3); font-size:17px; line-height:1; flex:none; display:grid; place-items:center}
.exp2 .del:hover, .clan .del:hover{background:var(--bad); color:#fff}
.clanovi{display:flex; flex-direction:column; gap:8px}
.clan{display:flex; align-items:center; gap:10px}
.clan input{flex:1; min-width:0; padding:10px 12px; border-radius:10px; border:1.5px solid var(--line);
  background:var(--surf); font-size:16px; color:var(--ink)}
.clan input:focus{border-color:var(--acc)}
.clan .ti{font-size:11.5px; color:var(--ink3); flex:none; padding-right:4px}

/* ---------- dosije grada ---------- */
.acc-item{background:var(--surf); border:1px solid var(--line2); border-radius:var(--r); margin-bottom:9px; overflow:hidden}
.acc-hd{display:flex; align-items:center; gap:11px; padding:14px 15px; width:100%; text-align:left}
.acc-hd .ic{font-size:18px}
.acc-hd b{flex:1; font-size:14.5px; font-weight:600}
.acc-hd .ar{color:var(--ink3); font-size:12px; transition:transform .2s}
.acc-hd[aria-expanded="true"] .ar{transform:rotate(90deg)}
.acc-bd{padding:0 15px 15px}
.kv{display:flex; gap:10px; padding:9px 0; border-top:1px solid var(--line2); font-size:13.5px; line-height:1.5}
.kv b{flex:none; width:96px; color:var(--ink); font-weight:600; font-size:13px}
.kv span{color:var(--ink2); min-width:0; overflow-wrap:anywhere}
.kv a{font-family:var(--f-mono); font-weight:500; text-decoration:none}
.fr{display:flex; align-items:baseline; gap:9px; padding:9px 0; border-top:1px solid var(--line2); flex-wrap:wrap}
.fr .srp{font-size:13px; color:var(--ink3); flex:1; min-width:110px}
.fr .it{font-size:14.5px; font-weight:600}
.fr .iz{font-family:var(--f-mono); font-size:11px; color:var(--acc)}
.warn{padding:11px 0; border-top:1px solid var(--line2)}
.warn b{display:block; font-size:13.5px; margin-bottom:3px}
.warn span{font-size:12.5px; color:var(--ink2); line-height:1.5}
.konobar{display:flex; flex-direction:column; gap:14px; text-align:left}
.konobar .it{font-family:var(--f-serif); font-size:24px; line-height:1.3; font-weight:600}
.konobar .sr2{font-size:13px; color:var(--ink3); line-height:1.5}

/* ---------- prozorče (zavesa + prozor) ---------- */
.zavesa{position:absolute; inset:0; background:rgba(22,35,43,.44); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  display:flex; align-items:flex-end; z-index:40; animation:fade .25s}
@keyframes fade{from{opacity:0}}
.prozor{background:var(--paper); width:100%; max-height:92%; overflow-y:auto; border-radius:22px 22px 0 0;
  padding:24px 22px calc(22px + env(safe-area-inset-bottom)); animation:up .3s cubic-bezier(.2,.9,.3,1)}
@keyframes up{from{transform:translateY(100%)}}
.prozor h2{margin-bottom:7px}
.prozor .sub{margin-bottom:16px}
.prozor .dugmad{display:flex; flex-direction:column; gap:6px; margin-top:16px}
.prozor .transkript{font-size:15px; line-height:1.65; color:var(--ink2); white-space:pre-wrap}
.price{display:flex; align-items:baseline; gap:9px; margin-bottom:4px; flex-wrap:wrap}
.price .now{font-family:var(--f-serif); font-size:34px; font-weight:700}
.price .was{font-size:16px; color:var(--ink3); text-decoration:line-through}
.price .off{font-size:11px; background:var(--sig-s); color:var(--sig); padding:3px 8px; border-radius:99px; font-weight:600}
.inc{display:flex; flex-direction:column; gap:7px; margin:14px 0 18px}
.inc div{font-size:13.5px; color:var(--ink2); display:flex; gap:9px}
.inc div b{color:var(--good)}
.koraci{display:flex; flex-direction:column; gap:12px; margin:6px 0 4px; padding:0; list-style:none; counter-reset:k}
.koraci li{display:flex; gap:12px; font-size:14px; line-height:1.5; color:var(--ink2); counter-increment:k}
.koraci li::before{content:counter(k); width:24px; height:24px; border-radius:50%; background:var(--acc-s); color:var(--acc);
  font-family:var(--f-mono); font-size:12px; font-weight:600; display:grid; place-items:center; flex:none}

/* ---------- audio plejer (ostaje dok menjaš kartice) ---------- */
#plejer{flex:none; z-index:20}
.plejer{background:var(--ink); color:var(--paper); padding:10px 14px 11px; display:flex; flex-direction:column; gap:8px}
.plejer .gore{display:flex; align-items:center; gap:10px}
.plejer .pp{width:40px; height:40px; border-radius:50%; background:var(--acc); color:#fff; display:grid; place-items:center; font-size:15px; flex:none}
.plejer .pp:disabled{background:#3A4A53}
.plejer .pp .spin{width:18px; height:18px; border-width:2px; border-color:rgba(255,255,255,.3); border-top-color:#fff}
.plejer .ime{flex:1; min-width:0}
.plejer .ime b{display:block; font-size:13.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.plejer .ime span{display:block; font-size:11.5px; color:#AFC0C7; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.plejer .x{width:32px; height:32px; border-radius:50%; color:#AFC0C7; font-size:18px; flex:none}
.plejer .traka-n{display:flex; align-items:center; gap:8px; font-family:var(--f-mono); font-size:10.5px; color:#AFC0C7}
.plejer input[type=range]{flex:1; accent-color:var(--acc); height:18px; margin:0; min-width:0}
.plejer .dole{display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.plejer .dole button{font-size:12px; color:var(--paper); background:#26343C; padding:6px 10px; border-radius:99px; font-weight:500}
.plejer .dole button:disabled{opacity:.45}
.plejer .dole .desno{margin-left:auto}
.plejer .poruka{font-size:12.5px; color:#F2C9A1; line-height:1.4}

/* ---------- kartice na dnu ---------- */
#tabs{flex:none; display:flex; background:var(--surf); border-top:1px solid var(--line); padding:7px 6px 9px}
#tabs button{flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:5px 2px;
  font-size:10px; color:var(--ink3); font-weight:500; border-radius:9px; position:relative}
#tabs button .i{font-size:19px; line-height:1}
#tabs button[aria-current="page"]{color:var(--acc)}
#tabs .dot{position:absolute; top:3px; left:calc(50% + 8px); width:6px; height:6px; background:var(--sig); border-radius:50%}

.empty{text-align:center; padding:28px 20px; color:var(--ink3); font-size:14px; line-height:1.6}
.sec-t{font-size:12px; font-weight:600; color:var(--ink3); text-transform:uppercase; letter-spacing:.06em; margin:18px 0 9px}
.sec-t:first-child{margin-top:8px}
.toast{position:absolute; left:16px; right:16px; bottom:16px; background:var(--ink); color:var(--paper);
  padding:13px 16px; border-radius:12px; font-size:13.5px; z-index:50; animation:up .25s; line-height:1.45;
  display:flex; gap:12px; align-items:center; box-shadow:0 10px 30px -10px rgba(0,0,0,.4)}
.toast span{flex:1}
.toast button{color:#7FD9D2; font-weight:600; flex:none; padding:4px 2px}

/* ---------- na telefonu: bez okvira, preko celog ekrana ---------- */
@media (max-width:820px){
  body.app{padding:0; display:block; background:var(--paper)}
  #phone{width:100%; height:100vh; height:100dvh; max-width:none; border-radius:0; box-shadow:none; margin:0;
    padding-top:env(safe-area-inset-top)}
  #notch{display:none}
  #tabs{padding-bottom:calc(9px + env(safe-area-inset-bottom))}
}

/* ---------- tabla potrošnje (body.admin) — alat, ne marketing ---------- */
body.admin{background:var(--paper); font-size:14px}
.adm{max-width:1080px; margin:0 auto; padding:20px 20px 60px}
.adm-hd{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding-bottom:14px; border-bottom:1px solid var(--line); margin-bottom:16px}
.adm-hd h1{font-size:22px}
.adm-hd .desno{margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.seg{display:inline-flex; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--surf)}
.seg button{padding:8px 14px; font-size:13px; font-weight:600; color:var(--ink2); border-right:1px solid var(--line)}
.seg button:last-child{border-right:none}
.seg button[aria-pressed="true"]{background:var(--ink); color:var(--paper)}
.adm-kartice{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; margin-bottom:14px}
.adm-k{background:var(--surf); border:1px solid var(--line2); border-radius:12px; padding:13px 15px}
.adm-k .l{font-size:11.5px; color:var(--ink3); text-transform:uppercase; letter-spacing:.05em; font-weight:600}
.adm-k .v{font-family:var(--f-mono); font-size:26px; font-weight:500; margin-top:4px; font-variant-numeric:tabular-nums}
.adm-k .v small{font-size:13px; color:var(--ink3)}
.adm-limit{background:var(--surf); border:1px solid var(--line2); border-radius:12px; padding:13px 15px; margin-bottom:14px}
.adm-limit .red{justify-content:space-between; font-size:13px}
.adm-limit.upoz{border-color:var(--sig); background:var(--sig-s)}
.adm-limit.preko{border-color:var(--bad); background:var(--bad-s)}
.adm-sekcija{background:var(--surf); border:1px solid var(--line2); border-radius:12px; padding:13px 15px; margin-bottom:14px}
.adm-sekcija h2{font-family:var(--f-sans); font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink3); margin-bottom:10px; font-weight:600}
.stub{display:grid; grid-template-columns:70px 1fr 150px; gap:10px; align-items:center; padding:5px 0; font-size:13px}
.stub .t{height:14px; background:var(--surf2); border-radius:4px; overflow:hidden}
.stub .t i{display:block; height:100%; background:var(--acc); border-radius:4px}
.stub .n{font-family:var(--f-mono); text-align:right; font-size:12.5px; color:var(--ink2); white-space:nowrap}
.tabela-omot{overflow-x:auto}
table.adm-t{width:100%; border-collapse:collapse; font-size:13px}
.adm-t th{text-align:left; font-size:11.5px; color:var(--ink3); text-transform:uppercase; letter-spacing:.04em; font-weight:600;
  padding:7px 8px; border-bottom:1px solid var(--line); white-space:nowrap}
.adm-t th button{font-weight:600; color:inherit; text-transform:inherit; letter-spacing:inherit; font-size:inherit; padding:0}
.adm-t th[aria-sort] button{color:var(--ink)}
.adm-t td{padding:7px 8px; border-bottom:1px solid var(--line2); vertical-align:top}
.adm-t td.n, .adm-t th.n{text-align:right; font-family:var(--f-mono); font-variant-numeric:tabular-nums; white-space:nowrap}
.adm-t td .mejl{display:block; font-size:11.5px; color:var(--ink3)}
.adm-t tr:hover td{background:var(--surf2)}
.adm-napomena{font-size:12.5px; color:var(--ink2); line-height:1.55; background:var(--warn-s); border-radius:10px; padding:10px 13px; margin-bottom:14px}
.adm-prijava{max-width:380px; margin:8vh auto; background:var(--surf); border:1px solid var(--line2); border-radius:16px; padding:24px}
.adm-prijava h1{font-size:22px; margin-bottom:6px}

/* ---------- smanjeno kretanje ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important}
  .spin{border-top-color:var(--acc); border-right-color:var(--acc)}
}