/* Layout: mapa preko celog ekrana ispod hedera; filteri kao pill red gore levo, lista kao plutajući panel desno, na telefonu bottom sheet */
:root{
  --bg:#fafaf6; --panel:rgba(255,255,255,.94); --panel-solid:#ffffff; --surface-2:#f4f6f2; --line:#e5eae5; --line-strong:#d5ddd8;
  --fg:#18211b; --muted:#59615e; --accent:#008365; --accent-hover:#08715b; --accent-soft:#e7f4e4; --accent-fg:#ffffff;
  --sky:#eef3ee; --facade:#dfe5df; --facade-2:#cfd8d0; --win:#8fa69b; --bgbld:#e4eae4; --crane:#be5c36; --tree:#b9d1b1;
  --ph0:#8a948f; --ph1:#c9932b; --ph2:#be5c36; --ph3:#0369a1; --ph4:#0f766e;
  --late:#806325; --late-bg:#fff7de;
  --shadow-sm:0 1px 2px rgba(23,37,28,.05),0 1px 3px rgba(23,37,28,.06);
  --shadow:0 16px 40px rgba(23,37,28,.12),0 2px 6px rgba(23,37,28,.05);
  --panelW:468px;
  --f:"Plus Jakarta Sans",ui-sans-serif,system-ui,"Segoe UI",Roboto,Arial,sans-serif;
}
/* Sajt je podrazumevano svetao; tamni prikaz se uključuje dugmetom u zaglavlju */
:root[data-theme="dark"]{
  --bg:#0e1411; --panel:rgba(22,29,25,.94); --panel-solid:#161d19; --surface-2:#1e2722; --line:#28332d; --line-strong:#36433b;
  --fg:#e9efea; --muted:#9daaa2; --accent:#34c296; --accent-hover:#5ad3ac; --accent-soft:#15302a; --accent-fg:#06221a;
  --sky:#1b241f; --facade:#3d4a43; --facade-2:#33403a; --win:#7f9a8e; --bgbld:#243029; --crane:#e07a52; --tree:#2c4433;
  --ph0:#a1ada6; --ph1:#e3b04f; --ph2:#e07a52; --ph3:#4aa3d8; --ph4:#2fb3a6;
  --late:#f0c868; --late-bg:#3a3014;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow:0 16px 40px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.35); color-scheme:dark;}

[hidden]{display:none!important}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--accent);color:var(--accent-fg);border:0;border-radius:8px;padding:10px 14px;font-weight:700}
.skip:focus{top:10px}
.qf{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px}
.qf::-webkit-scrollbar{display:none}
.qchip{flex:none;border:1px solid var(--line);background:var(--panel-solid);border-radius:999px;padding:5px 11px;font-size:12.5px;font-weight:600;color:var(--fg);white-space:nowrap;transition:background .15s,border-color .15s}
.qchip:hover{border-color:var(--line-strong)}
.qchip[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface-2)}
.seg button{border:0;background:none;padding:5px 9px;font-size:12.5px;font-weight:600;color:var(--muted);white-space:nowrap}
.fpill.ghost{background:var(--panel-solid)!important;box-shadow:var(--shadow-sm)!important;border-color:var(--line)!important}
.seg button[aria-pressed="true"]{background:var(--panel-solid);color:var(--fg);box-shadow:var(--shadow-sm)}
.togs{display:flex;gap:6px}
.mapwrap:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.tour{position:absolute;z-index:12;left:12px;bottom:58px;width:300px;max-width:calc(100% - 24px);background:var(--panel-solid);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:16px;box-sizing:border-box;display:flex;flex-direction:column;gap:10px}
.tour b{font-size:15px}
.tour p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.5}
.tour .tf{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tour .dots{display:flex;gap:5px}
.tour .dots i{width:7px;height:7px;border-radius:50%;background:var(--line-strong)}
.tour .dots i.on{background:var(--accent)}
.tour-hl{box-shadow:0 0 0 3px var(--accent),var(--shadow)!important;border-radius:14px}
.mtog{display:none}
.sharebox{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.sharebox .row{display:flex;gap:6px;flex-wrap:wrap}
.sharebox input{flex:1;min-width:0;font-size:12.5px}
.sharebox a{font-size:13px;font-weight:600}
.recent-clear{float:right;background:none;border:0;color:var(--muted);font-size:11.5px;text-decoration:underline;padding:0}
.tright{display:flex;align-items:center;gap:10px}
.themebtn{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:var(--panel-solid);color:var(--fg);display:grid;place-items:center;flex:none;transition:border-color .15s,color .15s}
.themebtn:hover{border-color:var(--accent);color:var(--accent)}
.themebtn svg{width:17px;height:17px}
.mobbtn{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;border-radius:9px;border:1px solid var(--line);background:var(--panel-solid);font-size:13.5px;font-weight:600;color:var(--fg);white-space:nowrap;transition:border-color .15s,background .15s}
.mobbtn:hover{border-color:var(--accent);color:var(--accent)}
.mobbtn svg{width:15px;height:15px}
html.inframe .mobbtn,html.inframe .demo{display:none}
html.inframe .top{padding-top:46px}
.mobov{position:fixed;inset:0;z-index:100;background:rgba(8,12,20,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;gap:28px;padding:16px;box-sizing:border-box}
.mobside{display:flex;flex-direction:column;gap:10px;color:#fff;max-width:220px}
.mobside b{font-size:18px}
.mobside p{margin:0;font-size:13.5px;color:#c9d2e2;line-height:1.5}
.mobside .btn{align-self:flex-start}
.phone{flex:none;width:390px;height:844px;border-radius:52px;background:#0a0d14;padding:12px;box-sizing:content-box;box-shadow:0 30px 80px rgba(0,0,0,.55),inset 0 0 0 2px #2a2f3a;position:relative;transform-origin:center center}
.phone::before{content:"";position:absolute;top:22px;left:50%;transform:translateX(-50%);width:110px;height:30px;border-radius:16px;background:#0a0d14;z-index:2}
.phone iframe{width:390px;height:844px;border:0;border-radius:40px;display:block;background:#fff}
@media (max-width:960px){.mobbtn{display:none}.top{grid-template-columns:auto minmax(0,1fr) auto!important}.top .search{grid-column:2/4;grid-row:1}.nav{grid-column:1/3!important;grid-row:2}.tright{grid-column:3;grid-row:2;justify-self:end}}
html,body{height:100%}
body{display:flex;flex-direction:column;background:var(--bg);color:var(--fg);font-family:var(--f);font-size:14px;line-height:1.45;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--panel-solid)}
a{color:var(--accent);text-underline-offset:2px}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1,h2,h3{text-wrap:balance;margin:0;letter-spacing:-.045em;font-weight:700}
.muted{color:var(--muted)}
.lbl{font-size:12px;color:var(--muted);font-weight:500}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}

/* Header */
.top{position:relative;z-index:20;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:20px;padding-block:9px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));background:var(--panel-solid);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--fg)}
.brand b{font-weight:800;font-size:19px;letter-spacing:-.02em;color:var(--fg)}
.brand b span{color:var(--accent)}
.brand small{color:var(--muted);font-size:13px}
.brand svg{width:22px;height:22px;flex:none}
.search{position:relative;max-width:440px;width:100%;justify-self:center}
.search input{width:100%;box-sizing:border-box;height:38px;border:1px solid var(--line);background:var(--surface-2);border-radius:10px;padding:0 12px 0 36px;font-size:14px;transition:border-color .15s,background .15s}
.search input:focus{background:var(--panel-solid);border-color:var(--line-strong);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
.search svg{position:absolute;left:11px;top:11px;width:16px;height:16px;color:var(--muted)}
.sres{position:absolute;top:44px;left:0;right:0;background:var(--panel-solid);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px;z-index:40;max-height:420px;overflow:auto}
.sres .grp{font-size:11.5px;color:var(--muted);padding:8px 10px 4px;font-weight:500}
.sres button{display:flex;width:100%;text-align:left;border:0;background:none;padding:8px 10px;border-radius:8px;gap:10px;align-items:baseline}
.sres button[aria-selected="true"],.sres button:hover{background:var(--surface-2)}
.sres button span{color:var(--muted);font-size:12.5px;margin-left:auto;white-space:nowrap}
.sres .none{padding:12px 10px;color:var(--muted)}
.nav{display:flex;gap:2px}
.nav a{text-decoration:none;color:var(--muted);padding:7px 11px;border-radius:8px;font-weight:500;font-size:14px;white-space:nowrap}
.nav a:hover{color:var(--fg);background:var(--surface-2)}
.nav a[aria-current="page"]{color:var(--fg);background:var(--surface-2)}
.demo{font-size:12px;color:var(--muted);border:1px dashed var(--line-strong);padding:3px 9px;border-radius:999px;white-space:nowrap}

main{flex:1;min-height:0;position:relative}
.view{position:absolute;inset:0;overflow:auto;background:var(--bg)}
#v-map{overflow:hidden}

/* Map */
.mapwrap{position:absolute;inset:0;overflow:hidden;background:#4d6059;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.mapwrap.dragging{cursor:grabbing}
canvas.mapc{position:absolute;left:0;top:0;display:block;transform-origin:0 0;will-change:transform}
.labels{transform-origin:0 0;will-change:transform}
.mapwrap{background:#4d6059}
.mapwrap[data-ms="light"],.mini[data-ms="light"]{background:#eaece6}
.mapwrap[data-ms="light"] .ml{color:#6b736d;text-shadow:0 0 2px #eef0eb,0 0 4px #eef0eb,0 0 6px #eef0eb}
.mapwrap[data-ms="light"] .ml.op,.mapwrap[data-ms="light"] .ml.city{color:#5c5c5c}
.mapwrap[data-ms="light"] .ml.st{color:#7b7b7b}
.mapwrap[data-ms="light"] .ml.rv{color:#5f7d78;text-shadow:none}
.mapwrap[data-ms="light"] .mk b{box-shadow:0 1px 3px rgba(0,0,0,.18),0 0 0 1px #d4d7dc}
.mapwrap[data-ms="light"] .mk em{background:#fff;color:#333;box-shadow:0 0 0 1px #d4d7dc}
.mapwrap[data-ms="light"] .cl{box-shadow:0 1px 4px rgba(0,0,0,.2)}
.msw{position:absolute;z-index:5;right:calc(var(--panelW) + 36px);bottom:150px;display:flex;flex-direction:column;background:var(--panel-solid);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-sm);overflow:hidden}
.msw button{border:0;background:none;padding:7px 10px;font-size:12px;font-weight:600;color:var(--muted);display:flex;align-items:center;gap:7px;white-space:nowrap}
.msw button+button{border-top:1px solid var(--line)}
.msw button i{width:14px;height:14px;border-radius:4px;display:block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.msw button[aria-pressed="true"]{color:var(--fg);background:var(--surface-2)}
@media (max-width:760px){.msw{right:12px;bottom:auto;top:62px;flex-direction:row}.msw button+button{border-top:0;border-left:1px solid var(--line)}.msw button{min-height:40px}}
.labels,.pins{position:absolute;inset:0;pointer-events:none}
.ml{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;color:#d5ddd9;text-shadow:0 0 2px rgba(36,40,43,.9),0 0 5px rgba(36,40,43,.7)}
.ml.op{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;opacity:.9}
.ml.city{font-size:22px;font-weight:800;letter-spacing:.02em;color:#e6ece9}
.ml.nb{font-size:12px;font-weight:700}
.ml.st{font-size:11px;font-weight:600;color:#b9c4c0;letter-spacing:.02em}
.ml.rv{font-size:13px;font-style:italic;font-weight:600;color:#8b9a96;letter-spacing:.08em;text-shadow:none}
/* markers */
.mk{will-change:transform;position:absolute;pointer-events:auto;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:3px;border:0;background:none;padding:0}
.mk b{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#0f1b2d;font-weight:600;font-size:12.5px;padding:4px 9px 4px 7px;border-radius:999px;box-shadow:0 1px 2px rgba(0,0,0,.12),0 0 0 1px var(--line);white-space:nowrap;transition:transform .14s ease,box-shadow .14s ease}
.mk em{font-style:normal;font-size:11.5px;font-weight:600;color:#fff;background:rgba(15,22,38,.75);padding:1px 6px;border-radius:4px;white-space:nowrap;max-width:150px;overflow:hidden;text-overflow:ellipsis;box-shadow:0 0 0 1px var(--line)}
.mk:hover b,.mk.hl b{transform:translateY(-3px) scale(1.06);box-shadow:var(--shadow),0 0 0 1px var(--line-strong)}
.mk:hover,.mk.hl{z-index:3}
.mk.sel{z-index:4}
.mk.sel b{background:var(--accent);color:#fff;box-shadow:var(--shadow)}
.cl{will-change:transform;position:absolute;pointer-events:auto;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;border:0;padding:0;display:grid;place-items:center;box-shadow:var(--shadow-sm);transition:scale .14s}
.cl span{width:29px;height:29px;border-radius:50%;background:#fff;display:grid;place-items:center;font-weight:800;font-size:13px;color:#0f1b2d}
.cl:hover,.cl.hl{scale:1.12;z-index:3}

/* floating chrome */
.fbar{position:absolute;top:12px;left:12px;right:calc(var(--panelW) + 36px);z-index:6;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px}
.fbar::-webkit-scrollbar{display:none}
.fpill{flex:none;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 13px;border-radius:999px;border:1px solid var(--line);background:var(--panel-solid);font-size:13.5px;font-weight:500;box-shadow:var(--shadow-sm);white-space:nowrap;transition:border-color .15s,background .15s}
.fpill:hover{border-color:var(--line-strong)}
.fpill[aria-expanded="true"]{border-color:var(--fg)}
.fpill.on{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.fpill svg{width:14px;height:14px}
.fpill .n{font-size:12px;background:var(--accent);color:var(--accent-fg);border-radius:999px;padding:0 6px;line-height:18px}
.fpill.ghost{background:transparent;box-shadow:none;border-color:transparent;color:var(--accent);font-weight:600}
.pop{position:absolute;z-index:9;width:320px;max-width:calc(100% - 24px);background:var(--panel-solid);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:16px;box-sizing:border-box}
.pfoot{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}
.drawer{position:absolute;z-index:8;top:60px;left:12px;bottom:12px;width:340px;background:var(--panel-solid);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden}
.dhead{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line)}
.dhead h2{font-size:16px}
.dbody{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:22px}
.dfoot{padding:12px 16px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:10px}
.x{border:0;background:var(--surface-2);width:30px;height:30px;border-radius:50%;font-size:17px;line-height:1;color:var(--muted)}
.fg{display:flex;flex-direction:column;gap:9px}
.fg h4{margin:0;font-size:13px;font-weight:600}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px}
.checks.one{grid-template-columns:1fr}
.checks label{display:flex;align-items:center;gap:8px;font-size:13.5px;cursor:pointer;padding:3px 0;min-width:0}
.checks label .c{margin-left:auto;color:var(--muted);font-size:12px}
.checks.scroll{max-height:180px;overflow:auto}
input[type=checkbox]{accent-color:var(--accent);width:16px;height:16px;margin:0;flex:none}
.range{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.inp{width:100%;box-sizing:border-box;border:1px solid var(--line);background:var(--panel-solid);border-radius:9px;padding:8px 10px;font-size:14px}
.inp:focus{outline:none;border-color:var(--line-strong);box-shadow:0 0 0 3px var(--accent-soft)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--line);background:var(--panel-solid);border-radius:999px;padding:5px 11px;font-size:13px;display:inline-flex;align-items:center;gap:6px;transition:background .15s,border-color .15s}
.chip:hover{border-color:var(--line-strong)}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.btn{background:var(--accent);color:var(--accent-fg);border:0;border-radius:10px;padding:9px 15px;font-weight:600;font-size:14px;transition:background .15s}
.btn:hover{background:var(--accent-hover)}
.btn.ghost{background:var(--panel-solid);color:var(--fg);border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--line-strong)}
.btn.wide{width:100%}
.linkbtn{background:none;border:0;padding:0;color:var(--fg);text-decoration:underline;text-underline-offset:3px;font-weight:500;font-size:13.5px}

.zoomctl{position:absolute;z-index:5;right:calc(var(--panelW) + 36px);bottom:30px;display:flex;flex-direction:column;background:var(--panel-solid);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-sm);overflow:hidden}
.zoomctl button{width:36px;height:36px;border:0;background:none;font-size:17px;display:grid;place-items:center;color:var(--fg)}
.zoomctl button+button{border-top:1px solid var(--line)}
.zoomctl button:hover{background:var(--surface-2)}
.zoomctl svg{width:15px;height:15px}
.legend{position:absolute;z-index:5;left:12px;bottom:12px;background:var(--panel);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:10px;padding:7px 12px;display:flex;gap:14px;font-size:12px;box-shadow:var(--shadow-sm);flex-wrap:wrap;max-width:calc(100% - var(--panelW) - 110px)}
.legend span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.legend i{font-style:normal;color:var(--muted)}
.attrib{position:absolute;z-index:4;right:calc(var(--panelW) + 36px);bottom:8px;font-size:10.5px;color:#dfe5f5;background:rgba(15,22,38,.55);padding:1px 6px;border-radius:4px}
.attrib a{color:inherit}

/* popup */
.popup{position:absolute;z-index:7;width:272px;background:var(--panel-solid);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;cursor:default;border:1px solid var(--line)}
.popup .img{aspect-ratio:16/9;background:var(--surface-2);position:relative}
.popup .img svg{width:100%;height:100%;display:block}
.popup .x{position:absolute;top:8px;right:8px;background:var(--panel-solid);box-shadow:var(--shadow-sm)}
.popup .pb{padding:12px 14px 14px;display:flex;flex-direction:column;gap:8px}
.popup h3{font-size:15.5px}
.popup .meta{font-size:13px;color:var(--muted);margin-top:-4px}
.prow{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.price{font-weight:600;font-size:15px}

/* list panel */
.listpanel{position:absolute;z-index:6;top:12px;right:12px;bottom:12px;width:var(--panelW);background:var(--panel-solid);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden}
.lhead{padding:14px 16px 12px;display:flex;flex-direction:column;gap:10px;border-bottom:1px solid var(--line);touch-action:none}
.grab{display:none;width:38px;height:4px;border-radius:2px;background:var(--line-strong);margin:0 auto 2px}
.lhead .row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.lhead strong{font-size:15px;font-weight:600}
.lhead label{font-size:13px;display:flex;gap:7px;align-items:center;color:var(--muted);cursor:pointer;white-space:nowrap}
.lhead select{width:auto;padding:5px 8px;font-size:13px;border-radius:8px}
.cards{flex:1;overflow:auto;padding:14px 16px 24px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px;align-content:start}
.card{cursor:pointer;min-width:0;display:flex;flex-direction:column;gap:2px}
.cimg{position:relative;aspect-ratio:16/10;border-radius:11px;overflow:hidden;background:var(--surface-2);transition:transform .16s ease,box-shadow .16s ease;margin-bottom:8px}
.cimg svg{width:100%;height:100%;display:block}
.card:hover .cimg,.card.hl .cimg{transform:translateY(-2px);box-shadow:var(--shadow)}
.card h3{font-size:14.5px;line-height:1.3;font-weight:600}
.card .meta{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .meta a{color:inherit;text-decoration:none}
.card .meta a:hover{text-decoration:underline}
.card .price{font-size:14px;margin-top:3px}
.badge{position:absolute;left:8px;bottom:8px;display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:3px 8px;border-radius:999px;background:var(--panel);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.badge.late{left:auto;right:8px;background:var(--late-bg);color:var(--late)}
.star{position:absolute;top:7px;right:7px;width:30px;height:30px;border-radius:50%;border:0;background:var(--panel);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:grid;place-items:center;color:var(--fg)}
.star svg{width:15px;height:15px}
.star[aria-pressed="true"] svg{fill:var(--ph1);stroke:var(--ph1)}
.sub2{font-size:12.5px;color:var(--muted)}
.nophoto{display:grid;place-items:center;height:100%;font-size:12px;color:var(--muted);text-align:center;padding:6px;box-sizing:border-box;background:repeating-linear-gradient(135deg,var(--surface-2) 0 7px,var(--panel-solid) 7px 14px)}
.empty{grid-column:1/-1;padding:40px 12px;text-align:center;color:var(--muted);font-size:14px;line-height:1.6}
.sk .cimg,.sk .l{background:var(--surface-2);position:relative;overflow:hidden}
.sk .l{height:11px;border-radius:5px;margin-top:6px}
.sk .cimg::after,.sk .l::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--panel-solid),transparent);opacity:.6;animation:sh 1.1s infinite}
@keyframes sh{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

/* pages */
.page{max-width:1140px;margin:0 auto;padding-block:22px 56px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.back{display:inline-flex;gap:6px;align-items:center;margin-bottom:16px;font-weight:500;text-decoration:none;font-size:14px;color:var(--muted)}
.back:hover{color:var(--fg)}
.gallery{border-radius:16px;overflow:hidden;height:min(380px,48vw);min-height:220px;background:var(--surface-2);position:relative}
.gallery svg{width:100%;height:100%;display:block}
.gallery .cap{position:absolute;left:12px;bottom:12px;font-size:12px;background:var(--panel);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:3px 9px;border-radius:999px;color:var(--muted)}
.ptitle{margin-top:24px}
.ptitle h1{font-size:clamp(26px,3.6vw,36px);line-height:1.1;letter-spacing:-.025em}
.ptitle .sub{margin-top:8px;color:var(--muted);font-size:15px}
.ptitle .sub a{color:var(--fg)}
.pgrid2{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:44px;margin-top:24px;align-items:start}
.side{position:sticky;top:16px;background:var(--panel-solid);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-sm);padding:18px;display:flex;flex-direction:column;gap:14px}
.side .big{font-size:24px;font-weight:600;letter-spacing:-.02em}
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;margin:0;font-size:13.5px}
.kv dt{color:var(--muted)} .kv dd{margin:0;font-weight:500;text-align:right}
.hr{height:1px;background:var(--line)}
.crow{display:flex;justify-content:space-between;align-items:center;gap:10px}
.crow code{font-family:inherit;font-weight:500;user-select:all}
.copy{font-size:12px;border:1px solid var(--line);background:var(--panel-solid);border-radius:7px;padding:3px 9px}
.phases{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.phases div{font-size:12px;color:var(--muted)}
.phases div::before{content:"";display:block;height:5px;border-radius:3px;background:var(--surface-2);margin-bottom:7px}
.phases .done::before{background:var(--accent);opacity:.55}
.phases .cur::before{background:var(--accent)}
.phases .cur{color:var(--fg);font-weight:600}
section.blk{margin-top:36px}
section.blk>h2{font-size:19px;margin-bottom:12px}
.lead{font-size:15.5px;max-width:64ch}
.tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--panel-solid)}
table{border-collapse:collapse;width:100%;font-size:13.5px}
th,td{text-align:left;padding:9px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
th{font-size:12px;color:var(--muted);font-weight:500;background:var(--surface-2)}
th button{background:none;border:0;padding:0;font:inherit;color:inherit}
th button[data-dir]{color:var(--fg)}
th button[data-dir]::after{content:" ↓"} th button[data-dir="asc"]::after{content:" ↑"}
td.num,th.num{text-align:right}
tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--surface-2)}
.st{font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:999px}
.st.slobodan{background:var(--accent-soft);color:var(--accent)}
.st.rezervisan{background:var(--late-bg);color:var(--late)}
.st.prodat{color:var(--muted);background:var(--surface-2)}
tr.sold td{color:var(--muted)}
.note{font-size:12.5px;color:var(--muted);margin-top:10px}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;margin:0}
.facts div{padding:11px 0;border-bottom:1px solid var(--line)}
.facts dt{font-size:12.5px;color:var(--muted)} .facts dd{margin:3px 0 0;font-weight:500}
.mini{position:relative;height:280px;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#4d6059}
.mini canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.mini .pinc{position:absolute;left:50%;top:50%;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;pointer-events:none}
.mini .pinc b{background:var(--accent);color:#fff;font-size:12.5px;font-weight:600;padding:5px 10px;border-radius:999px;box-shadow:var(--shadow)}
.mini .pinc i{width:2px;height:12px;background:var(--accent)}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;padding:2px 9px;border-radius:999px;background:var(--surface-2);color:var(--fg)}
.tag.late{background:var(--late-bg);color:var(--late)}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:22px}
.stat{background:var(--panel-solid);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.stat b{display:block;font-size:30px;line-height:1.1;font-weight:600;letter-spacing:-.03em}
.stat span{font-size:13px;color:var(--muted)}
.chartbox{border:1px solid var(--line);border-radius:14px;background:var(--panel-solid);padding:14px 16px;overflow-x:auto}
.chartbox svg{display:block;min-width:640px;width:100%;height:auto}
.leg2{display:flex;gap:16px;font-size:12.5px;color:var(--muted);margin-bottom:8px;flex-wrap:wrap}
.leg2 span{display:inline-flex;gap:6px;align-items:center}
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:24px 16px}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:760px}
.form label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:500}
.form .wide{grid-column:1/-1}
.form textarea{min-height:96px;resize:vertical}
.ok{background:var(--accent-soft);border-radius:12px;padding:16px 18px;max-width:760px}
.report form{display:flex;flex-direction:column;gap:8px;margin-top:10px}
footer.pf{margin-top:48px;padding-top:16px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 20px}
footer.pf a{color:inherit}
.intro{max-width:66ch;color:var(--muted);margin-top:8px;font-size:15px}
.ph1{font-size:clamp(26px,3.4vw,34px);letter-spacing:-.025em}


/* Cybook stil: mirni zaobljeni pravougaonici umesto pilula, tanke zelenkaste ivice */
.top{border-bottom-color:#e5eae5}
:root[data-theme="dark"] .top{border-bottom-color:var(--line)}
.fpill,.qchip,.chip{border-radius:9px}
.fpill.on,.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent)}
.qchip[aria-pressed="true"]{background:var(--accent-soft);border-color:#d5e8cf;color:var(--accent-hover)}
.btn{border-radius:10px;padding:10px 18px}
.nav a{border-radius:6px}
.badge{border-radius:6px}
.tag{border-radius:6px}
.st{border-radius:6px}
.listpanel,.drawer,.pop,.popup,.tour{border-radius:14px}
.cimg{border-radius:13px}
.stat,.side,.tblwrap,.chartbox,.contact{border-radius:13px}
.ph1,.ptitle h1{font-weight:700;letter-spacing:-.05em}
.lbl{letter-spacing:.01em}
.brand b{letter-spacing:-.04em}
@media (max-width:1180px){:root{--panelW:410px}}
@media (max-width:960px){
  .top{grid-template-columns:auto minmax(0,1fr);row-gap:8px}
  .nav{grid-column:1/-1;order:3}
  .demo{display:none}
  .pgrid2{grid-template-columns:1fr}
  .side{position:static}
}
@media (max-width:760px){
  :root{--panelW:0px}
  .brand small{display:none}
  .fbar{right:12px}
  .listpanel{left:0;right:0;bottom:0;width:auto;top:50%;border-radius:18px 18px 0 0;border-bottom:0;transition:top .3s cubic-bezier(.2,.8,.2,1)}
  .listpanel.drag{transition:none}
  .grab{display:block}
  .lhead{padding-top:8px;cursor:grab}
  .cards{grid-template-columns:1fr}
  .zoomctl,.legend{display:none}
  .attrib{top:56px;left:12px;bottom:auto;right:auto}
  .drawer{inset:0;width:auto;border-radius:0;z-index:25;border:0}
  .pop{left:12px!important;right:12px;width:auto}
  .stats{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr}
  .phases div{font-size:11px}
}
@media (min-width:480px) and (max-width:760px){.cards{grid-template-columns:1fr 1fr}}
@media (max-width:760px){
  .fpill{height:44px}
  .chip{min-height:40px;padding:8px 14px}
  .qchip{min-height:40px;padding:8px 14px;font-size:13.5px}
  .seg button{min-height:38px;padding:8px 12px}
  .srow{flex-wrap:wrap}
  .srow #sort{flex:1 1 100%}
  .srow .togs{flex:1 1 100%;justify-content:space-between}
  .star{width:40px;height:40px}
  .x{width:40px;height:40px}
  .checks label{padding:8px 0}
  .lhead select{min-height:40px}
  .nav a{padding:10px 12px}
  .tour{left:12px;right:12px;width:auto;bottom:auto;top:66px}
  .mtog{display:inline-flex;position:absolute;z-index:11;left:50%;transform:translateX(-50%);bottom:calc(18px + env(safe-area-inset-bottom,0px));align-items:center;gap:8px;height:46px;padding:0 20px;border-radius:999px;border:0;background:#0f1b2d;color:#fff;font-weight:700;font-size:14.5px;box-shadow:var(--shadow)}
  .mtog svg{width:16px;height:16px}
}
@media (prefers-reduced-motion:reduce){*,*::after{transition:none!important;animation:none!important}}
/* ===================== Stalne stranice (projekti, investitori, opštine, blog) ===================== */
html.static,html.static body{height:auto;min-height:100%}
html.static body{display:block}
html.static main{display:block}
.spage{max-width:1140px;margin:0 auto;padding-block:22px 56px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.spage.narrow{max-width:760px}
.top.stop{grid-template-columns:auto minmax(0,1fr) auto}
.top.stop .nav{justify-self:end}
@media (max-width:960px){.top.stop{grid-template-columns:auto minmax(0,1fr) auto!important}.top.stop .nav{grid-column:1/-1!important;grid-row:2;justify-self:start;overflow-x:auto;max-width:100%}.top.stop .tright{grid-column:3;grid-row:1}}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;font-size:13px;color:var(--muted);margin:0 0 14px;padding:0;list-style:none}
.crumbs li+li::before{content:"/";margin-right:6px;color:var(--line-strong)}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--fg)}
.sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin-top:18px}
.scard{display:flex;flex-direction:column;gap:6px;background:var(--panel-solid);border:1px solid var(--line);border-radius:13px;padding:15px 16px;text-decoration:none;color:var(--fg);transition:border-color .15s,box-shadow .15s}
.scard:hover{border-color:var(--line-strong);box-shadow:var(--shadow-sm)}
.scard b{font-size:15.5px;font-weight:700;letter-spacing:-.02em;line-height:1.25}
.scard .m{font-size:13px;color:var(--muted)}
.scard .p{font-weight:600;font-size:14px;margin-top:auto;padding-top:6px}
.scard .ph{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex:none}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.pills a{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--panel-solid);border-radius:9px;padding:7px 12px;text-decoration:none;color:var(--fg);font-weight:600;font-size:13.5px}
.pills a:hover{border-color:var(--accent);color:var(--accent)}
.pills a span{color:var(--muted);font-weight:500}
.maplink{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font-weight:600;font-size:14px;text-decoration:none}
.sfoot{border-top:1px solid var(--line);background:var(--panel-solid)}
.sfoot .in{max-width:1140px;margin:0 auto;padding:22px 16px 28px;display:flex;flex-wrap:wrap;gap:10px 28px;font-size:13px;color:var(--muted)}
.sfoot a{color:inherit}
.sfoot .grow{flex:1 1 260px}
/* Blog */
.postlist{display:flex;flex-direction:column;gap:12px;margin-top:22px}
.post-card{display:block;background:var(--panel-solid);border:1px solid var(--line);border-radius:13px;padding:18px 20px;text-decoration:none;color:var(--fg)}
.post-card:hover{border-color:var(--line-strong);box-shadow:var(--shadow-sm)}
.post-card h2{font-size:20px;line-height:1.25}
.post-card p{margin:6px 0 0;color:var(--muted);font-size:14.5px}
.post-card time,.meta{font-size:12.5px;color:var(--muted)}
.prose{font-size:16.5px;line-height:1.7;margin-top:22px}
.prose h2{font-size:23px;margin:34px 0 10px;line-height:1.25}
.prose h3{font-size:18.5px;margin:26px 0 8px}
.prose p,.prose ul,.prose ol{margin:0 0 14px}
.prose li{margin:4px 0}
.prose table{font-size:14.5px;margin:6px 0 18px;border:1px solid var(--line);border-radius:12px;border-collapse:separate;border-spacing:0;overflow:hidden;width:100%}
.prose tr:last-child td{border-bottom:0}
.prose th,.prose td{white-space:normal}
.prose blockquote{margin:18px 0;padding:12px 16px;border-left:3px solid var(--accent);background:var(--accent-soft);border-radius:0 10px 10px 0}
.prose blockquote p{margin:0}
.prose img{max-width:100%;height:auto;border-radius:12px}
.prose a{font-weight:500}
.post-h1{font-size:clamp(28px,4vw,40px);line-height:1.12;margin-top:4px}
.post-lead{font-size:18px;color:var(--muted);margin:12px 0 0;max-width:62ch}

.mini .pinc.dotonly b{width:12px;height:12px;padding:0;border:2px solid #fff;font-size:0}
.mini .pinc.dotonly{transform:translate(-50%,-50%)}
.mini .pinc.dotonly i{display:none}
@media (max-width:760px){.nav-blog{display:none}}