/* © 2026 Ivo Čajkovac. Sva prava pridržana. Kopiranje, mijenjanje i objavljivanje ovog koda i podataka bez pisanog odobrenja autora nije dopušteno (vidi LICENSE). */
/* Parkiraj Osijek 4.5 */
/* =========================================================================
   TOKENI — svi tekstovi imaju kontrast ≥ 4.5:1 prema svojoj podlozi (WCAG AA)
   ========================================================================= */
:root{
  --bg:#EEF3FA; --surface:#FFFFFF; --surface-2:#EEF3F9; --surface-3:#E1EBF7;
  --ink:#0B1A2E;          /* glavni tekst  – 17:1 na bijelom */
  --ink-2:#2E4460;        /* sekundarni    – 10:1 na bijelom */
  --ink-3:#4A5F78;        /* pomoćni       – 6.4:1 na bijelom (najsvjetliji dopušteni) */
  --border:#B9CCE2; --border-strong:#7F9BBD;
  --accent:#0F4FA0; --accent-ink:#FFFFFF; --accent-soft:#DCE9F8;
  --ok:#0B7A35; --ok-ink:#FFFFFF; --ok-soft:#DDF3E5;
  --warn:#9A5B00; --warn-soft:#FFF1D1;
  --bad:#B42318; --bad-soft:#FDE4E1;
  /* boje zona na karti */
  --z0:#F5A800; --z1:#7A1FE0; --z2:#00A83C;
  /* boje zona kao podloga za tekst (dovoljno tamne / svijetle za čitljivost) */
  --z0-bg:#F5A800; --z0-ink:#2B2000;
  --z1-bg:#6A17CC; --z1-ink:#FFFFFF;
  --z2-bg:#0B7D35; --z2-ink:#FFFFFF;
  --res:#0A3D91; --user:#E01E5A;
  --coffee:#8A4B14; --coffee-soft:#F6E9DC;
  --shadow-sm:0 1px 2px rgba(15,40,70,.10);
  --shadow:0 1px 2px rgba(15,40,70,.08), 0 8px 24px rgba(15,40,70,.14);
  --shadow-lg:0 -2px 8px rgba(15,40,70,.08), 0 -12px 40px rgba(15,40,70,.16);
  --radius:16px;
  --nav-h:64px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0B1520; --surface:#122032; --surface-2:#172A40; --surface-3:#1E3450;
    --ink:#F2F6FB; --ink-2:#D0DDEC; --ink-3:#A9BDD3;
    --border:#2C4563; --border-strong:#4D6A8D;
    --accent:#7DB8F5; --accent-ink:#081524; --accent-soft:#18324F;
    --ok:#2FC46A; --ok-ink:#06180D; --ok-soft:#133423;
    --warn:#FFC24D; --warn-soft:#3A2C0F;
    --bad:#FF7A6E; --bad-soft:#3D1714;
    --z0:#FFC21A; --z1:#A96BFF; --z2:#22D46A;
    --z1-bg:#8F4DFF; --z1-ink:#FFFFFF;
    --z2-bg:#1FB85C; --z2-ink:#04170B;
    --res:#7DB8F5; --user:#FF6392;
    --coffee:#E9B27A; --coffee-soft:#3A2717;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.5);
    --shadow-lg:0 -12px 40px rgba(0,0,0,.55);
    color-scheme:dark;
  }
}

*{box-sizing:border-box;}
html,body{margin:0; height:100%;}
html{background:var(--bg);}
body{background:var(--bg); color:var(--ink); font-family:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:15px; line-height:1.45; -webkit-font-smoothing:antialiased; overflow:hidden; overscroll-behavior:none;}
button,input,select{font:inherit; color:inherit;}
button{cursor:pointer;}
a{color:var(--accent);}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace; font-variant-numeric:tabular-nums;}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
:focus-visible{outline:3px solid var(--accent); outline-offset:2px;}

/* =========================================================================
   RASPORED — mobitel: karta + donji panel + traka s karticama
              PC (≥900px): bočni panel lijevo, karta desno
   ========================================================================= */
.app{position:fixed; inset:0; display:block;}
#map{position:absolute; inset:0; background:var(--surface-3); z-index:0;}

.side{position:absolute; left:0; right:0; bottom:calc(var(--nav-h) + var(--safe-b)); z-index:600; --sheet-h:62dvh;
  background:var(--surface); border-radius:22px 22px 0 0; box-shadow:var(--shadow-lg);
  display:flex; flex-direction:column; max-height:var(--sheet-h,50dvh);
  transition:max-height .28s cubic-bezier(.2,.8,.2,1);}
.side[data-size="full"]{max-height:calc(100dvh - var(--nav-h) - var(--safe-b) - var(--safe-t) - 64px);}
.side[data-size="min"]{max-height:120px;}
.side[data-view="info"]{max-height:calc(100dvh - var(--nav-h) - var(--safe-b)); border-radius:0; top:0; box-shadow:none;}
.side[data-view="info"] .grab{display:none;}
.side[data-view="info"] .brand{display:flex;}

.grab{flex:none; display:flex; justify-content:center; align-items:center; height:26px; border:none; background:none; width:100%; touch-action:none;}
.grab i{width:44px; height:5px; border-radius:9px; background:var(--border-strong); display:block;}

.brand{display:none; align-items:center; gap:10px; padding:calc(14px + var(--safe-t)) 18px 10px;}
.brand .logo{width:34px; height:34px; border-radius:10px; background:var(--accent); color:var(--accent-ink);
  font:800 22px/34px 'Big Shoulders Display',sans-serif; text-align:center; flex:none;}
.brand h1{font:800 22px/1 'Big Shoulders Display',sans-serif; text-transform:uppercase; letter-spacing:.02em; margin:0;}
.brand small{display:block; font-size:12px; color:var(--ink-3); font-weight:500; margin-top:2px;}

.views{flex:1 1 auto; overflow:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding:0 16px 18px;}
.view{display:none;}
.view.on{display:block;}

/* Donja traka s karticama */
.tabbar{position:fixed; left:0; right:0; bottom:0; z-index:700; height:calc(var(--nav-h) + var(--safe-b)); padding-bottom:var(--safe-b);
  background:var(--surface); border-top:1px solid var(--border); display:grid; grid-template-columns:repeat(6,1fr);}
.tab{border:none; background:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  font-size:12px; font-weight:700; color:var(--ink-3); position:relative;}
.tab svg{width:24px; height:24px;}
a.tab{text-decoration:none;}
.coffee-tab{color:var(--coffee);}
.coffee-tab:hover{color:var(--coffee); background:var(--coffee-soft);}
.tab[aria-selected="true"]{color:var(--accent);}
.tab[aria-selected="true"]::before{content:""; position:absolute; top:0; left:28%; right:28%; height:3px; border-radius:0 0 4px 4px; background:var(--accent);}

/* Plutajući elementi na karti */
.topbar{position:absolute; z-index:500; top:calc(10px + var(--safe-t)); left:10px; right:10px; display:flex; gap:8px; align-items:flex-start; pointer-events:none;}
.topbar > *{pointer-events:auto;}
.pill-brand{display:flex; align-items:center; gap:8px; background:var(--surface); border-radius:14px; padding:6px 12px 6px 6px; box-shadow:var(--shadow);}
.pill-brand .logo{width:30px; height:30px; border-radius:9px; background:var(--accent); color:var(--accent-ink); font:800 19px/30px 'Big Shoulders Display',sans-serif; text-align:center;}
.pill-brand b{font:800 17px/1 'Big Shoulders Display',sans-serif; text-transform:uppercase; letter-spacing:.02em;}
.status-pill{display:flex; align-items:center; gap:7px; background:var(--surface); border-radius:14px; padding:8px 12px; box-shadow:var(--shadow);
  font-size:12.5px; font-weight:700; color:var(--ink); min-width:0;}
.status-pill .t{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.led{width:10px; height:10px; border-radius:50%; flex:none; background:var(--ok); box-shadow:0 0 0 3px var(--ok-soft);}
.led.free{background:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}

.fabs{position:absolute; z-index:500; right:10px; top:calc(62px + var(--safe-t)); display:flex; flex-direction:column; gap:8px;}
.fab{width:46px; height:46px; border-radius:14px; border:none; background:var(--surface); color:var(--ink); box-shadow:var(--shadow);
  display:grid; place-items:center; font-size:19px;}
.fab svg{width:22px; height:22px;}
.fab.on{background:var(--accent); color:var(--accent-ink);}
.fab.loc{background:var(--accent); color:var(--accent-ink);}
.fab.busy svg,.btn.busy svg{animation:spin 1s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

.layers{position:absolute; z-index:550; right:64px; top:calc(62px + var(--safe-t)); width:250px; background:var(--surface); border-radius:14px;
  box-shadow:var(--shadow); padding:12px; display:none;}
.layers.show{display:block;}
.layers h4{margin:0 0 8px; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-2);}
.tog{display:flex; align-items:center; gap:10px; padding:8px 4px; font-size:14px; font-weight:600; border-radius:8px; cursor:pointer;}
.tog input{width:20px; height:20px; accent-color:var(--accent); margin:0;}
.sw{width:22px; height:8px; border-radius:3px; display:inline-block; flex:none;}
.lg{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--ink-2); padding:4px;}

/* =========================================================================
   KOMPONENTE
   ========================================================================= */
h2.vh{font:800 24px/1.05 'Big Shoulders Display',sans-serif; text-transform:uppercase; letter-spacing:.02em; margin:4px 0 4px;}
.lead{margin:0 0 14px; color:var(--ink-2); font-size:14px;}
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:14px; margin-bottom:12px;}
.card.flat{background:var(--surface-2); border-color:transparent;}
.lab{display:block; font-size:12px; font-weight:700; color:var(--ink-2); text-transform:uppercase; letter-spacing:.05em; margin:0 0 7px;}
.muted{color:var(--ink-3); font-size:13px;}
.row{display:flex; gap:8px; align-items:center;}
.stack>*+*{margin-top:10px;}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:10px 16px; border-radius:12px;
  border:1.5px solid var(--border-strong); background:var(--surface); color:var(--ink); font-weight:700; font-size:14.5px; text-decoration:none;
  transition:transform .08s, background .15s, border-color .15s;}
.btn:active{transform:scale(.98);}
.btn:hover{border-color:var(--accent);}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink);}
.btn.block{width:100%;}
.btn.sm{min-height:38px; padding:6px 12px; font-size:13.5px; border-radius:10px;}
.btn svg{width:20px; height:20px; flex:none;}
.link-btn{border:none; background:none; color:var(--accent); font-weight:700; font-size:14px; padding:8px 0; display:inline-flex; align-items:center; gap:6px;}

/* Status naplate */
.status{display:flex; gap:12px; align-items:center; padding:12px 14px; border-radius:14px; background:var(--ok-soft); margin-bottom:12px;}
.status.free{background:var(--accent-soft);}
.status b{display:block; font-size:15px;}
.status span{font-size:13px; color:var(--ink-2);}

/* Gdje sam — rezultat zone */
.where{display:flex; gap:12px; align-items:center;}
.zbig{width:58px; height:58px; border-radius:16px; flex:none; display:grid; place-items:center; font:800 34px/1 'Big Shoulders Display',sans-serif;
  background:var(--surface-3); color:var(--ink-3);}
.zbig.z0{background:var(--z0-bg); color:var(--z0-ink);}
.zbig.z1{background:var(--z1-bg); color:var(--z1-ink);}
.zbig.z2{background:var(--z2-bg); color:var(--z2-ink);}
.where h3{margin:0; font-size:18px; line-height:1.2;}
.where p{margin:2px 0 0; font-size:13.5px; color:var(--ink-2);}
.where-actions{display:grid; grid-template-columns:1fr; gap:8px; margin-top:12px;}
.tip{margin-top:10px; padding:9px 11px; border-radius:10px; font-size:13px; line-height:1.45; background:var(--warn-soft); color:var(--ink);}
.tip.info{background:var(--accent-soft);}

/* Pretraga */
.search{position:relative;}
.search input{width:100%; min-height:48px; padding:12px 14px 12px 42px; border-radius:12px; border:1.5px solid var(--border-strong);
  background:var(--surface); color:var(--ink); font-size:16px;}
.search input::placeholder{color:var(--ink-3); opacity:1;}
.search input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
.search svg{position:absolute; left:13px; top:14px; width:20px; height:20px; color:var(--ink-2); pointer-events:none;}
.sugg{position:absolute; z-index:50; left:0; right:0; top:calc(100% + 4px); background:var(--surface); border:1px solid var(--border-strong);
  border-radius:12px; box-shadow:var(--shadow); max-height:280px; overflow:auto; display:none;}
.sugg.show{display:block;}
.sugg button{display:flex; justify-content:space-between; align-items:center; gap:8px; width:100%; border:none; background:none;
  padding:11px 12px; text-align:left; font-size:14.5px; color:var(--ink); border-bottom:1px solid var(--surface-3);}
.sugg button:last-child{border-bottom:none;}
.sugg button:hover,.sugg button.hi{background:var(--surface-2);}
.bdg{font-size:11.5px; font-weight:700; padding:3px 8px; border-radius:99px; white-space:nowrap;}
.bdg.z0{background:var(--z0-bg); color:var(--z0-ink);}
.bdg.z1{background:var(--z1-bg); color:var(--z1-ink);}
.bdg.z2{background:var(--z2-bg); color:var(--z2-ink);}
.bdg.res{background:var(--res); color:#fff;}
.bdg.none{background:var(--surface-3); color:var(--ink-2);}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .bdg.res{color:#081524;} }

.locbtn{flex:none; min-height:48px; padding:8px 12px; flex-direction:column; gap:2px; font-size:11.5px; border-radius:14px;}
.locbtn svg{width:22px; height:22px;}
.sep{border:none; border-top:1px solid var(--border); margin:14px -14px;}
/* Plaćanje */
.plate{display:flex; align-items:stretch; border:2.5px solid #0B1A2E; border-radius:10px; overflow:hidden; background:#FFFFFF; height:58px;}
.plate .eu{flex:none; width:38px; background:#0F3F9E; color:#FFFFFF; display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  padding-bottom:6px; font:700 12px/1 'IBM Plex Sans',sans-serif; position:relative;}
.plate .eu::before{content:"★"; position:absolute; top:7px; left:0; right:0; text-align:center; color:#FFD500; font-size:14px;}
.plate input{flex:1; min-width:0; border:none; background:#FFFFFF; color:#0B1A2E; padding:0 12px; font:700 26px/1 'IBM Plex Mono',ui-monospace,monospace;
  letter-spacing:.08em; text-transform:uppercase;}
.plate input::placeholder{color:#6A7686; opacity:1; font-weight:600;}   /* 4.6:1 na bijelom */
.plate input:focus{outline:none;}
.plate:focus-within{box-shadow:0 0 0 4px var(--accent-soft); border-color:var(--accent);}
.saved{display:flex; gap:6px; flex-wrap:wrap; margin-top:8px;}
.saved button{border:1.5px solid var(--border-strong); background:var(--surface-2); color:var(--ink); border-radius:99px; padding:5px 11px;
  font:600 13px 'IBM Plex Mono',monospace; letter-spacing:.04em;}
.saved button.on{border-color:var(--accent); background:var(--accent-soft);}

.seg{display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px;}
.seg button{border:2px solid var(--border-strong); background:var(--surface); color:var(--ink); border-radius:12px; padding:9px 6px; text-align:left;
  display:flex; flex-direction:column; gap:1px; min-height:60px; position:relative; padding-left:14px;}
.seg button::before{content:""; position:absolute; left:5px; top:10px; bottom:10px; width:4px; border-radius:3px; background:var(--zc);}
.seg button b{font-size:14.5px;}
.seg button span{font-size:12.5px; color:var(--ink-2);}
.seg button[aria-pressed="true"]{border-color:var(--accent); background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent);}
.seg button:disabled{opacity:1; background:var(--surface-2); border-style:dashed; cursor:not-allowed;}
.seg button:disabled b, .seg button:disabled span{color:var(--ink-3);}

.pay{display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; min-height:60px; border-radius:14px; border:none;
  background:var(--ok); color:var(--ok-ink); text-decoration:none; font-weight:700; font-size:17px; margin-top:14px; box-shadow:0 4px 14px rgba(11,122,53,.3);}
.pay small{font:600 13px 'IBM Plex Mono',monospace; opacity:.95; margin-top:2px;}
.pay.off{background:var(--surface-3); color:var(--ink-2); box-shadow:none; pointer-events:none;}
.pay-note{margin-top:10px; font-size:13px; color:var(--ink-2); line-height:1.5;}

/* Aktivno parkiranje */
.session{border:2px solid var(--ok); background:var(--ok-soft);}
.session.soon{border-color:var(--warn); background:var(--warn-soft);}
.session.over{border-color:var(--bad); background:var(--bad-soft);}
.session .clock{font:700 34px/1 'IBM Plex Mono',monospace; letter-spacing:-.01em;}
.session .meta{font-size:13px; color:var(--ink-2); margin-top:4px;}
.session .bar{height:6px; border-radius:6px; background:rgba(0,0,0,.08); overflow:hidden; margin:10px 0;}
.session .bar i{display:block; height:100%; background:var(--ok); width:0;}
.session.soon .bar i{background:var(--warn);}
.session.over .bar i{background:var(--bad);}
.session .acts{display:grid; grid-template-columns:1fr 1fr; gap:8px;}

/* Stanari */
.areas{display:grid; grid-template-columns:repeat(auto-fill,minmax(58px,1fr)); gap:8px;}
.areas button{min-height:48px; border-radius:12px; border:1.5px solid var(--border-strong); background:var(--surface); color:var(--ink);
  font:700 15px 'IBM Plex Mono',monospace; display:flex; align-items:center; justify-content:center; gap:5px;}
.areas button i{width:8px; height:8px; border-radius:50%; display:inline-block;}
.areas button[aria-pressed="true"]{background:var(--res); border-color:var(--res); color:#fff;}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .areas button[aria-pressed="true"]{color:#081524;} }
.facts{display:flex; gap:8px; flex-wrap:wrap; margin:10px 0;}
.fact{background:var(--surface-2); border-radius:10px; padding:7px 11px; font-size:13px; color:var(--ink);}
.fact b{font-family:'IBM Plex Mono',monospace;}
.chips{display:flex; flex-wrap:wrap; gap:6px;}
.chips span{background:var(--surface-2); border:1px solid var(--border); border-radius:99px; padding:5px 11px; font-size:13px; color:var(--ink);}
.expand{display:none; margin-top:10px;}
.expand.show{display:block;}

/* Info */
.price-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.price{border:1px solid var(--border); border-radius:14px; padding:12px; background:var(--surface); border-top:5px solid var(--zc);}
.price .amt{font:800 30px/1 'Big Shoulders Display',sans-serif; margin:6px 0;}
.price .amt small{font:600 13px 'IBM Plex Mono',monospace; color:var(--ink-2);}
.price ul{margin:6px 0 0; padding-left:16px; font-size:13px; color:var(--ink-2); display:grid; gap:3px;}
.price ul b{color:var(--ink);}
.timeline{display:grid; gap:0; border:1px solid var(--border); border-radius:14px; overflow:hidden;}
.stage{padding:10px 12px; border-bottom:1px solid var(--border); display:flex; gap:12px; align-items:center;}
.stage:last-child{border-bottom:none;}
.stage .n{font:700 11px 'IBM Plex Mono',monospace; color:var(--ink-2); width:52px; flex:none;}
.stage b{display:block; font-size:14px;}
.stage span{font-size:13px; color:var(--ink-2);}
.stage.active{background:var(--ok-soft);}
.stage.active .n{color:var(--ok);}
details.acc{border:1px solid var(--border); border-radius:14px; background:var(--surface); margin-bottom:8px; overflow:hidden;}
details.acc summary{list-style:none; cursor:pointer; padding:14px; font-weight:700; font-size:14.5px; display:flex; justify-content:space-between; gap:10px; align-items:center; min-height:50px;}
details.acc summary::-webkit-details-marker{display:none;}
details.acc summary::after{content:""; width:9px; height:9px; border-right:2.5px solid var(--ink-2); border-bottom:2.5px solid var(--ink-2); transform:rotate(45deg); transition:transform .2s; flex:none; margin-top:-4px;}
details.acc[open] summary::after{transform:rotate(-135deg); margin-top:4px;}
details.acc .body{padding:0 14px 14px; font-size:14px; color:var(--ink-2); line-height:1.6;}
details.acc .body p{margin:0 0 8px;}
details.acc .body b{color:var(--ink);}
dl.ref{display:grid; grid-template-columns:auto 1fr; gap:6px 14px; margin:6px 0 0;}
dl.ref dt{font-weight:700; color:var(--ink);}
dl.ref dd{margin:0;}
.contact{display:grid; grid-template-columns:1fr; gap:8px;}
.sel{width:100%; min-height:48px; padding:10px 12px; border-radius:12px; border:1.5px solid var(--border-strong); background:var(--surface); color:var(--ink); font-size:15px;}
.sec-h{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-2); margin:20px 0 8px;}
.disclaimer{font-size:13px; line-height:1.6; color:var(--ink-2);}
.disclaimer b{color:var(--ink);}
.coffee{display:flex; gap:14px; align-items:center; flex-wrap:wrap;}
.coffee img{border-radius:10px; border:1px solid var(--border); background:#fff; padding:5px; width:110px; height:110px;}
.foot{font-size:12px; color:var(--ink-3); margin:16px 0 6px;}

/* Leaflet */
.leaflet-container{font-family:'IBM Plex Sans',sans-serif; background:var(--surface-3);}
.leaflet-popup-content-wrapper{border-radius:14px; background:var(--surface); color:var(--ink); box-shadow:var(--shadow);}
.leaflet-popup-tip{background:var(--surface);}
.leaflet-popup-content{font-size:14px; line-height:1.5; margin:12px 14px; color:var(--ink);}
.leaflet-popup-content .btn{margin-top:8px;}
.leaflet-container a.leaflet-popup-close-button{color:var(--ink-2); width:28px; height:28px; font-size:22px;}
.leaflet-control-zoom{display:none;}
.leaflet-control-scale{margin-bottom:8px !important;}
.res-badge{min-width:30px; height:22px; padding:0 6px; border-radius:7px; border:2px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.35);
  display:flex; align-items:center; justify-content:center; color:#fff; font:700 11px 'IBM Plex Mono',monospace; white-space:nowrap;}
.meter{width:24px; height:24px; border-radius:7px; background:#fff; color:#0B1A2E; border:2.5px solid var(--z0); box-shadow:0 2px 6px rgba(0,0,0,.35);
  display:grid; place-items:center; font:700 11px 'IBM Plex Sans',sans-serif;}
.meter.z1{border-color:var(--z1);}
.meters-small .meter{transform:scale(.72);}
.pin{width:30px; height:30px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:var(--accent); border:3px solid #fff; box-shadow:0 3px 8px rgba(0,0,0,.35);}

.toast{position:fixed; z-index:900; left:50%; transform:translateX(-50%) translateY(20px); top:calc(64px + var(--safe-t)); max-width:min(92vw,420px);
  background:var(--ink); color:var(--bg); padding:11px 16px; border-radius:12px; font-size:14px; font-weight:600; box-shadow:var(--shadow);
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* ---------- PC ---------- */
@media (min-width:900px){
  body{font-size:15px;}
  .side{top:0; bottom:0; left:0; right:auto; width:420px; max-height:none !important; border-radius:0; box-shadow:2px 0 18px rgba(15,40,70,.12);
    border-right:1px solid var(--border);}
  .side[data-view="info"]{top:0;}
  #map{left:420px;}
  .grab{display:none;}
  .brand{display:flex; padding-top:16px;}
  .tabbar{position:static; height:auto; padding:0 12px 10px; border-top:none; border-bottom:1px solid var(--border); gap:6px; order:0;}
  .tab{flex-direction:row; gap:8px; font-size:14px; min-height:44px; border-radius:12px;}
  .tab svg{width:20px; height:20px;}
  .tab[aria-selected="true"]{background:var(--accent-soft);}
  .tab[aria-selected="true"]::before{display:none;}
  .views{padding:14px 18px 22px;}
  .topbar{left:432px;}
  .pill-brand{display:none;}
  .fabs{top:12px;}
  .layers{top:12px;}
  .leaflet-control-zoom{display:block;}
  .toast{left:calc(50% + 210px);}
  .where-actions{grid-template-columns:1fr;}
}
@media (max-width:899px){
  .brand-desktop{display:none;}
}
@media (max-width:460px){ .pill-brand b{display:none;} .pill-brand{padding:6px;} }
@media (max-width:370px){
  .seg button span{font-size:11.5px;}
  .plate input{font-size:22px;}
  .status-pill .t{max-width:150px;}
}

:root[data-theme="dark"]{
    --bg:#0B1520; --surface:#122032; --surface-2:#172A40; --surface-3:#1E3450;
    --ink:#F2F6FB; --ink-2:#D0DDEC; --ink-3:#A9BDD3;
    --border:#2C4563; --border-strong:#4D6A8D;
    --accent:#7DB8F5; --accent-ink:#081524; --accent-soft:#18324F;
    --ok:#2FC46A; --ok-ink:#06180D; --ok-soft:#133423;
    --warn:#FFC24D; --warn-soft:#3A2C0F;
    --bad:#FF7A6E; --bad-soft:#3D1714;
    --z0:#FFC21A; --z1:#A96BFF; --z2:#22D46A;
    --z1-bg:#8F4DFF; --z1-ink:#FFFFFF;
    --z2-bg:#1FB85C; --z2-ink:#04170B;
    --res:#7DB8F5; --user:#FF6392;
    --coffee:#E9B27A; --coffee-soft:#3A2717;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.5);
    --shadow-lg:0 -12px 40px rgba(0,0,0,.55);
    color-scheme:dark;
}
:root[data-theme="dark"] .bdg.res{color:#081524;}
:root[data-theme="dark"] .areas button[aria-pressed="true"]{color:#081524;}

/* =========================================================================
   V4 — tema po izboru, boje aplikacije, kartica Više, auto, PWA upute
   ========================================================================= */
/* Boja aplikacije (naglasak) — svijetla tema */
:root[data-accent="teal"]{--accent:#0B6770; --accent-soft:#D5EEF0;}
:root[data-accent="indigo"]{--accent:#3F3AB8; --accent-soft:#E3E2FA;}
:root[data-accent="bordo"]{--accent:#A11D3F; --accent-soft:#F7DDE4;}
:root[data-accent="orange"]{--accent:#B4410F; --accent-soft:#FBE4D6;}
:root[data-accent="graphite"]{--accent:#2F3B48; --accent-soft:#E2E7ED;}
/* … tamna tema (automatska) */
@media (prefers-color-scheme: dark){
  :root[data-accent="teal"]:not([data-theme="light"]){--accent:#5ED0DA; --accent-soft:#0F3337;}
  :root[data-accent="indigo"]:not([data-theme="light"]){--accent:#A9A6FF; --accent-soft:#25235A;}
  :root[data-accent="bordo"]:not([data-theme="light"]){--accent:#FF8AA8; --accent-soft:#3A1320;}
  :root[data-accent="orange"]:not([data-theme="light"]){--accent:#FFA877; --accent-soft:#3D2012;}
  :root[data-accent="graphite"]:not([data-theme="light"]){--accent:#C9D3DE; --accent-soft:#243140;}
}
/* … tamna tema (ručno odabrana) */
:root[data-theme="dark"][data-accent="teal"]{--accent:#5ED0DA; --accent-soft:#0F3337;}
:root[data-theme="dark"][data-accent="indigo"]{--accent:#A9A6FF; --accent-soft:#25235A;}
:root[data-theme="dark"][data-accent="bordo"]{--accent:#FF8AA8; --accent-soft:#3A1320;}
:root[data-theme="dark"][data-accent="orange"]{--accent:#FFA877; --accent-soft:#3D2012;}
:root[data-theme="dark"][data-accent="graphite"]{--accent:#C9D3DE; --accent-soft:#243140;}

/* Prekidač jezika */
.langsw{margin-left:auto; display:flex; gap:2px; background:var(--surface); border-radius:14px; box-shadow:var(--shadow); padding:4px; flex:none;}
.langsw button{border:none; background:none; min-width:36px; padding:6px 8px; border-radius:10px; font-weight:700; font-size:13px; color:var(--ink-3);}
.langsw button[aria-pressed="true"]{background:var(--accent); color:var(--accent-ink);}
.langsw.inline{box-shadow:none; border:1.5px solid var(--border-strong); margin-left:0;}

/* Sesija: 4 gumba */
.session .acts .btn svg{width:18px; height:18px;}

/* Više — retci */
.mrow{display:flex; align-items:center; gap:12px; min-height:52px;}
.mrow .mt{min-width:0; flex:1;}
.mrow .mt b{display:block; font-size:15px; line-height:1.3;}
.mrow .mt small{display:block; color:var(--ink-3); font-size:13px; line-height:1.35;}
.mic{width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); flex:none;}
.mic svg{width:22px; height:22px;}
.mic.car{background:none;}
.mic.coffee{background:var(--coffee-soft); color:var(--coffee);}
.mlist{padding:4px 14px;}
.mlist > .mrow{width:100%; border:none; background:none; text-align:left; padding:10px 0; text-decoration:none; color:var(--ink);}
.mlist > .mrow + .mrow{border-top:1px solid var(--border);}
.mlist > button.mrow:disabled{cursor:default; opacity:1;}
.mrow .chev{color:var(--ink-3); font-size:22px; line-height:1; flex:none;}
.btn-row{display:flex; gap:8px; margin-top:12px;}
.btn-row .btn{flex:1;}
.btn-row .btn.icon{flex:0 0 48px; padding:0;}
.opt{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; background:var(--surface-2); border-radius:12px; padding:4px; margin-bottom:14px;}
.opt button{border:none; background:none; border-radius:9px; min-height:40px; font-weight:700; font-size:13.5px; color:var(--ink-2);}
.opt button[aria-pressed="true"]{background:var(--surface); color:var(--accent); box-shadow:var(--shadow-sm); outline:1.5px solid var(--accent);}
.swatches{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px;}
.swatch{width:40px; height:40px; border-radius:50%; border:2px solid var(--border-strong); background:var(--sw); color:var(--ci,#fff); display:grid; place-items:center; padding:0;}
.swatch svg{width:20px; height:20px; opacity:0;}
.swatch[aria-pressed="true"]{box-shadow:0 0 0 3px var(--surface), 0 0 0 5px var(--accent);}
.swatch[aria-pressed="true"] svg{opacity:1;}
.bases{display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-bottom:6px;}
.basebtn{border:1.5px solid var(--border-strong); background:var(--surface); border-radius:12px; padding:5px 4px 6px; display:flex; flex-direction:column; align-items:center; gap:4px; font-size:11.5px; font-weight:700; color:var(--ink-2);}
.basebtn i{display:block; width:100%; height:34px; border-radius:8px;}
.b-auto i{background:linear-gradient(135deg,#F2EFE6 50%,#2B2F36 50%);}
.b-street i{background:#F2EFE6 linear-gradient(90deg,transparent 45%,#fff 45%,#fff 55%,transparent 55%),linear-gradient(0deg,transparent 40%,#F7D47A 40%,#F7D47A 50%,transparent 50%); background-blend-mode:normal;}
.b-light i{background:#E6E6E6 linear-gradient(90deg,transparent 45%,#fff 45%,#fff 55%,transparent 55%);}
.b-dark i{background:#2B2F36 linear-gradient(90deg,transparent 45%,#4A4F58 45%,#4A4F58 55%,transparent 55%);}
.b-sat i{background:radial-gradient(circle at 30% 40%,#5B7A3A 0 20%,transparent 21%),radial-gradient(circle at 70% 70%,#8A7F66 0 22%,transparent 23%),#3E5530;}
.basebtn[aria-pressed="true"]{border-color:var(--accent); color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent);}
.icons{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px;}
.iconbtn{width:48px; height:48px; border-radius:12px; border:1.5px solid var(--border-strong); background:var(--surface-2); display:grid; place-items:center; color:var(--ink); padding:0;}
.iconbtn svg{width:24px; height:24px;}
.iconbtn[aria-pressed="true"]{background:var(--cc); color:var(--ci); border-color:var(--accent); box-shadow:0 0 0 2px var(--accent);}
.switch-row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:12px; margin-top:12px; border-top:1px solid var(--border); font-size:14px;}
.switch-row input{width:22px; height:22px; accent-color:var(--accent); flex:none;}

/* Oznaka auta na karti */
.carpin{border-radius:50% 50% 50% 6px; transform:rotate(-45deg); background:var(--cc); color:var(--ci); border:3px solid #fff; box-shadow:0 3px 10px rgba(0,0,0,.4); display:grid; place-items:center;}
.carpin svg{transform:rotate(45deg); width:55%; height:55%;}
.mic.car .carpin{border-width:2px; box-shadow:0 1px 4px rgba(0,0,0,.3);}
body.picking #map{cursor:crosshair;}

/* Obavijest o instalaciji */
.ibanner{display:flex; align-items:center; gap:10px; background:var(--surface); border:1.5px solid var(--accent); border-radius:var(--radius); padding:10px 8px 10px 12px; margin-bottom:12px;}
.ibanner .mt{flex:1; min-width:0;}
.ibanner .mt b{display:block; font-size:14.5px; line-height:1.25;}
.ibanner .mt small{display:block; color:var(--ink-3); font-size:12.5px; line-height:1.3;}
.ibanner .x{border:none; background:none; color:var(--ink-3); font-size:24px; width:36px; height:40px; flex:none;}

/* Donji prozor */
.scrim{position:fixed; inset:0; z-index:1000; background:rgba(8,20,36,.5); opacity:0; transition:opacity .2s;}
.scrim.show{opacity:1;}
.asheet{position:fixed; left:0; right:0; bottom:0; z-index:1001; background:var(--surface); color:var(--ink); border-radius:22px 22px 0 0; box-shadow:var(--shadow-lg);
  padding:10px 18px calc(20px + var(--safe-b)); max-height:88dvh; overflow:auto; transform:translateY(100%); transition:transform .22s cubic-bezier(.2,.8,.2,1);}
.asheet.show{transform:none;}
.asheet .grabb{width:44px; height:5px; border-radius:3px; background:var(--border-strong); margin:0 auto 10px;}
.asheet .x{position:absolute; top:10px; right:10px; width:40px; height:40px; border:none; background:var(--surface-2); border-radius:50%; font-size:22px; color:var(--ink-2);}
.asheet h3{margin:6px 44px 4px 0; font-size:19px; line-height:1.25;}
.asheet .lead{margin:0 0 14px;}
.ben{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:14px;}
.ben div{background:var(--accent-soft); border-radius:12px; padding:10px 6px; text-align:center; font-size:12.5px; font-weight:700; line-height:1.3;}
.ben i{display:block; font-style:normal; font-size:20px; margin-bottom:4px;}
.ptabs{display:flex; background:var(--surface-2); border-radius:12px; padding:4px; margin-bottom:10px;}
.ptabs button{flex:1; border:none; background:none; border-radius:9px; min-height:40px; font-weight:700; font-size:14px; color:var(--ink-2);}
.ptabs button[aria-selected="true"]{background:var(--surface); color:var(--accent); box-shadow:var(--shadow-sm);}
ol.steps{list-style:none; margin:0 0 14px; padding:0; counter-reset:s;}
ol.steps li{display:flex; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--border); font-size:14.5px; line-height:1.45;}
ol.steps li:last-child{border-bottom:none;}
ol.steps li::before{counter-increment:s; content:counter(s); width:28px; height:28px; border-radius:50%; background:var(--accent); color:var(--accent-ink); display:grid; place-items:center; font-weight:800; flex:none;}
.kbd{display:inline-flex; align-items:center; gap:4px; border:1.5px solid var(--border-strong); border-radius:7px; padding:1px 6px; font-weight:700; font-size:13px; white-space:nowrap; vertical-align:middle; background:var(--surface-2);}
.kbd svg{width:15px; height:15px;}

@media (min-width:900px){
  .fabs{top:62px;} .layers{top:62px;}
  .asheet{left:50%; right:auto; bottom:auto; top:50%; width:460px; border-radius:20px; transform:translate(-50%,-46%); opacity:0; transition:transform .2s, opacity .2s;}
  .asheet.show{transform:translate(-50%,-50%); opacity:1;}
  .asheet .grabb{display:none;}
}
@media (max-width:370px){ .bases{grid-template-columns:repeat(3,1fr);} .langsw button{min-width:32px; padding:6px;} }

/* Novosti */
ul.news{list-style:none; margin:0 0 16px; padding:0;}
ul.news li{display:flex; gap:12px; align-items:flex-start; padding:10px 0; border-bottom:1px solid var(--border);}
ul.news li:last-child{border-bottom:none;}
ul.news .ne{width:38px; height:38px; border-radius:12px; background:var(--accent-soft); display:grid; place-items:center; font-size:19px; flex:none;}
ul.news b{display:block; font-size:15px; line-height:1.3;}
ul.news small{display:block; color:var(--ink-2); font-size:13.5px; line-height:1.4; margin-top:1px;}
.news-coffee{text-align:center; margin-top:12px;}
.coffee-mini{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--coffee); background:var(--coffee-soft); border-radius:99px; padding:6px 12px; text-decoration:none;}

/* =========================================================================
   V4.1 — više vozila, država registracije, više parkiranja, sigurnost
   ========================================================================= */
.plate .eu{border:none; cursor:pointer; padding-left:0; padding-right:0;}
.plate .eu::after{content:"▾"; position:absolute; right:3px; bottom:5px; font-size:8px; opacity:.8;}
.plate .eu.cc3{font-size:10.5px;}
.plate .eu.noeu{background:#2E4460;}
.plate .eu.noeu::before{content:"";}
.saved button small{font:700 10.5px 'IBM Plex Sans',sans-serif; color:var(--ink-3); margin-right:5px; letter-spacing:0;}
.saved button em{font:500 12px 'IBM Plex Sans',sans-serif; color:var(--ink-3); font-style:normal; margin-left:5px; letter-spacing:0;}
.saved .edit{border-style:dashed; background:none; color:var(--ink-2); font-family:'IBM Plex Sans',sans-serif; letter-spacing:0;}
.pay-note .chk{display:block; margin-top:6px; font-size:12px; color:var(--ink-3);}
#sessions .session .plate-h{font:700 15px 'IBM Plex Mono',monospace; letter-spacing:.04em;}
#sessions .session .plate-h small{font:700 11px 'IBM Plex Sans',sans-serif; color:var(--ink-3); margin-right:5px; letter-spacing:0;}
.cclist h4{margin:14px 0 6px; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-2);}
.ccgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:6px;}
.ccgrid button{display:flex; align-items:center; gap:8px; border:1.5px solid var(--border); background:var(--surface); color:var(--ink); border-radius:10px; padding:8px 10px; text-align:left; font-size:14px; min-height:44px;}
.ccgrid button b{font:700 12px 'IBM Plex Mono',monospace; min-width:34px; padding:2px 4px; border-radius:5px; background:#0F3F9E; color:#fff; text-align:center; flex:none;}
.ccgrid button b.noeu{background:#2E4460;}
.ccgrid button[aria-pressed="true"]{border-color:var(--accent); background:var(--accent-soft);}
.vlist .mrow{padding:10px 0;}
.vlist .mrow + .mrow{border-top:1px solid var(--border);}
.vlist .mt b{font-family:'IBM Plex Mono',monospace; letter-spacing:.04em;}
.vcc{min-width:40px; height:28px; border-radius:7px; background:#0F3F9E; color:#fff; display:grid; place-items:center; font:700 12px 'IBM Plex Mono',monospace; flex:none;}
.vcc.noeu{background:#2E4460;}
.vdel{border:none; background:none; color:var(--ink-3); width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:none;}
.vdel svg{width:20px; height:20px;}
.vdel:hover{background:var(--bad-soft); color:var(--bad);}
.vsel{flex:1; min-width:0; border:none; background:none; color:var(--ink); text-align:left; display:flex; align-items:center; gap:12px; padding:0;}
.field{display:block; width:100%; min-height:46px; padding:10px 12px; border-radius:12px; border:1.5px solid var(--border-strong); background:var(--surface); color:var(--ink); font-size:16px;}
.field:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
.quiet-link{display:block; margin:18px auto 4px; border:none; background:none; color:var(--ink-3); font-size:12.5px; text-decoration:underline; text-underline-offset:3px; padding:8px;}
.quiet-link:hover{color:var(--bad);}
.risk ul{margin:6px 0 0; padding-left:18px; display:grid; gap:6px;}
.btn.danger{background:var(--bad); border-color:var(--bad); color:#fff;}
:root[data-theme="dark"] .btn.danger{color:#1A0806;}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .btn.danger{color:#1A0806;} }

/* Nova verzija — traka; broj verzije */
.updbar{position:fixed; z-index:950; left:50%; transform:translateX(-50%); top:calc(10px + var(--safe-t)); width:min(94vw,440px); display:flex; align-items:center; gap:10px;
  background:var(--surface); color:var(--ink); border:1.5px solid var(--accent); border-radius:14px; box-shadow:var(--shadow); padding:8px 6px 8px 14px; font-size:14px; font-weight:600;}
.updbar[hidden]{display:none;}
.updbar span{flex:1; min-width:0;}
.updbar .x{border:none; background:none; color:var(--ink-3); font-size:22px; width:34px; height:38px; flex:none;}
.ver-note{text-align:center; font-size:12px; color:var(--ink-3); margin:0 0 8px;}
@media (min-width:900px){ .updbar{left:calc(50% + 210px);} }
/* Parkirališta izvan zona */
.offpin{width:26px; height:26px; border-radius:8px; display:grid; place-items:center; font:800 14px/1 'IBM Plex Sans',sans-serif; color:#fff; border:2.5px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.35); background:#5B6B7D;}
.offpin.free{background:#0B7A35;} .offpin.cust{background:#2F6FB5;}
.offp .offprice{font-weight:700; margin:6px 0 2px; color:var(--ink);}
.offp .offtag{display:inline-block; font-size:12px; font-weight:700; background:var(--accent-soft); color:var(--ink); border-radius:6px; padding:2px 7px; margin:2px 0 4px;}
.offp .offrow{font-size:13px; color:var(--ink-2); margin-top:3px;}
.offp .offwarn{font-size:12.5px; background:var(--warn-soft); color:var(--ink); border-radius:8px; padding:6px 8px; margin:8px 0;}
.offp .offbtns{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:4px;}
.offp .offbtns .btn{margin-top:0; min-height:36px;}
.offp .offrep{display:inline-block; margin-top:6px; font-size:12px; color:var(--ink-3);}
.offlink{font-size:13.5px; padding:8px 0 0; text-align:left;}

/* ---- Planer parkiranja (v4.6) ---- */
.pl-head{display:flex; flex-direction:column; gap:2px; margin:2px 0 8px;}
.pl-head b{font-family:"Big Shoulders Display",sans-serif; font-size:26px; letter-spacing:.01em; line-height:1.05;}
.pl-head span{font-size:13.5px; font-weight:700; color:var(--accent);}
.pl-l{display:block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-2); margin:0 0 5px;}
.pl-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:12px;}
.pl-form .field{min-height:46px; text-align:center;}
.pl-seg{grid-template-columns:1fr 1fr;}
.pl-best{border:2px solid var(--accent);}
.pl-kick{font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--accent);}
.pl-best h3{margin:2px 0 2px; font-size:19px;}
.pl-sub{font-size:13px; color:var(--ink-2); margin:0 0 10px;}
.pl-sum{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:8px 0;}
.pl-sum div{background:var(--surface-2); border-radius:12px; padding:9px 11px;}
.pl-sum small{display:block; font-size:11.5px; color:var(--ink-2);}
.pl-sum b{font-size:18px;}
.pl-save{grid-column:1/-1; background:var(--accent-soft)!important;}
.pl-save.neg{background:var(--warn-soft)!important;}
.pl-line{font-size:13.5px; margin:6px 0; line-height:1.45;}
.pl-warn{font-size:12.5px; margin-top:8px; padding:8px 10px; border-radius:10px; background:var(--warn-soft); line-height:1.4;}
.pl-note{font-size:12px; color:var(--ink-3); margin-top:8px; line-height:1.4;}
.pl-btns{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;}
.pl-opt{display:grid; grid-template-columns:1fr auto; gap:2px 10px; padding:10px 0; border-top:1px solid var(--border); font-size:13.5px;}
.pl-opt:first-of-type{border-top:none;}
.pl-opt b{font-size:14px;}
.pl-opt span{color:var(--ink-2); font-size:12.5px;}
.pl-opt .pl-p{grid-row:1/3; grid-column:2; text-align:right; font-weight:700; align-self:center;}
.pl-src{font-size:12px; color:var(--ink-2); line-height:1.5; margin:0; padding-left:16px;}
.pl-taxi{display:flex; justify-content:space-between; gap:8px; align-items:center; padding:7px 0; font-size:13.5px;}
.pl-det{padding:0;} .pl-det>summary{cursor:pointer; padding:13px 14px; font-weight:700; font-size:14px; list-style:none;}
.pl-det>summary::-webkit-details-marker{display:none;}
.pl-det>summary::after{content:"▾"; float:right; color:var(--ink-3);}
.pl-det[open]>summary::after{content:"▴";}
.pl-det>*:not(summary){margin-left:14px; margin-right:14px;} .pl-det>*:last-child{margin-bottom:14px;}
@media (max-width:420px){ .tabbar:not(.x) .tab{font-size:11px;} .tab svg{width:22px; height:22px;} }

.pl-sech{margin-top:14px;}
.pl-chips{display:flex; gap:8px; flex-wrap:wrap; margin:0 0 10px;}
.pl-chips button{border:1.5px solid var(--border-strong); background:var(--surface); color:var(--ink); border-radius:999px; padding:8px 14px; font-weight:700; font-size:13.5px; min-height:40px;}
.pl-chips button small{color:var(--ink-3); font-weight:700;}
.pl-chips button[aria-pressed="true"]{border-color:var(--accent); background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent);}
.pl-chips button:disabled{opacity:.5;}
.pl-opts{padding:4px 12px;}
.pl-o{display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; width:100%; text-align:left; border:none; background:none; color:var(--ink); padding:11px 0; border-top:1px solid var(--border); min-height:56px;}
.pl-o:first-child{border-top:none;}
.pl-r{width:20px; height:20px; border-radius:50%; border:2px solid var(--border-strong); display:block;}
.pl-o[aria-checked="true"] .pl-r{border-color:var(--accent); box-shadow:inset 0 0 0 4px var(--surface), inset 0 0 0 12px var(--accent);}
.pl-om{display:flex; flex-direction:column; gap:2px; min-width:0;}
.pl-om b{font-size:14.5px;} .pl-om em{font-style:normal; font-size:11px; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:.05em; margin-left:4px;}
.pl-om span{font-size:12.5px; color:var(--ink-2); line-height:1.35;}
.pl-op{text-align:right; font-weight:700; font-size:15px; display:flex; flex-direction:column;}
.pl-op small{font-size:11.5px; color:var(--ink-2); font-weight:700;}
.pl-msg{min-height:150px; font-size:13.5px; line-height:1.45; text-align:left; resize:vertical; margin-top:8px;}
.pl-help{margin-top:10px; padding:9px 11px; border-radius:10px; background:var(--accent-soft); font-size:13px; line-height:1.45;} .pl-help a{font-weight:700; white-space:nowrap;}