/* ================= tokens ================= */
:root{
  --accent:#3B82F6; --accent-2:#2563EB; --accent-glow:rgba(59,130,246,.45); --accent-dim:rgba(59,130,246,.14);
  --ad:#F97316; --ad-dim:rgba(249,115,22,.14); --pin:#A855F7; --vip:#F59E0B;
  --ok:#22C55E; --warn:#F5A524; --bad:#EF4444;
  --radius-lg:22px; --radius-md:16px; --radius-sm:10px;
  --ease:cubic-bezier(.22,1,.36,1);
  --page:#dce8f0;
  --glass-bg:rgba(255,255,255,.66); --glass-bg-strong:rgba(255,255,255,.84); --glass-border:rgba(255,255,255,.6);
  --glass-shadow:0 8px 32px rgba(15,35,65,.14), 0 1px 0 rgba(255,255,255,.6) inset;
  --text-1:#0F1720; --text-2:#5B6472; --text-3:#8A93A3;
  --line:rgba(120,140,170,.18); --fill:rgba(120,140,170,.12); --fill-2:rgba(120,140,170,.2);
  --video-bg:rgba(12,15,22,.94);
  --label-halo:0 1px 2px rgba(255,255,255,.95), 0 0 8px rgba(255,255,255,.8);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --page:#0b0e14;
  --glass-bg:rgba(22,26,36,.7); --glass-bg-strong:rgba(20,24,33,.88); --glass-border:rgba(255,255,255,.09);
  --glass-shadow:0 8px 36px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.05) inset;
  --text-1:#EDEFF3; --text-2:#9AA3B2; --text-3:#6E7787;
  --line:rgba(255,255,255,.08); --fill:rgba(255,255,255,.06); --fill-2:rgba(255,255,255,.11);
  --label-halo:0 1px 3px rgba(0,0,0,.85), 0 0 8px rgba(0,0,0,.6);
  color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;overflow:hidden;font-family:'Inter',system-ui,sans-serif;background:var(--page);color:var(--text-1)}
#map{position:absolute;inset:0}
.maplibregl-ctrl-bottom-right,.maplibregl-ctrl-bottom-left,.maplibregl-ctrl-top-right{display:none!important}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;font-size:inherit}
input,textarea,select{font-family:inherit}
.num{font-family:'Sora',sans-serif}
[hidden]{display:none!important}
::selection{background:var(--accent-glow)}

.glass{background:var(--glass-bg);backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow)}
.glass-strong{background:var(--glass-bg-strong);backdrop-filter:blur(28px) saturate(160%);-webkit-backdrop-filter:blur(28px) saturate(160%);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow)}

/* ================= top-left toggle + panel ================= */
#panelToggle{position:absolute;top:20px;left:20px;z-index:20;display:flex;align-items:center;gap:10px;padding:13px 20px;border-radius:16px;font-weight:700;font-size:14.5px;color:var(--text-1);transition:transform .25s var(--ease),opacity .25s}
#panelToggle:hover{transform:translateY(-1px)}
#panelToggle svg{width:18px;height:18px}
body.panel-open #panelToggle{opacity:0;pointer-events:none}
#leftPanel{position:absolute;top:20px;left:20px;bottom:20px;z-index:21;width:350px;border-radius:var(--radius-lg);display:flex;flex-direction:column;opacity:0;transform:translateX(-24px) scale(.98);pointer-events:none;transition:opacity .32s var(--ease),transform .32s var(--ease);overflow:hidden}
body.panel-open #leftPanel{opacity:1;transform:none;pointer-events:auto}
.panel-head{padding:14px 14px 8px;flex-shrink:0;display:flex;flex-direction:column;gap:10px}
.tabs{display:flex;gap:4px;background:var(--fill);padding:4px;border-radius:13px}
.tabs button{flex:1;padding:8px 4px;border-radius:10px;font-size:12.5px;font-weight:600;color:var(--text-2);transition:background .15s,color .15s}
.tabs button.on{background:var(--glass-bg-strong);color:var(--text-1);box-shadow:0 1px 4px rgba(0,0,0,.1)}
.tab-n{font-size:10.5px;color:var(--text-3);font-weight:700}
.search-box{display:flex;align-items:center;gap:9px;padding:10px 13px;border-radius:13px;background:var(--fill);border:1px solid var(--line)}
.search-box svg{width:16px;height:16px;color:var(--text-2);flex-shrink:0}
.search-box input{border:none;background:none;outline:none;flex:1;font-size:14px;color:var(--text-1);font-weight:500;min-width:0}
.search-box input::placeholder{color:var(--text-2)}
.chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.chips::-webkit-scrollbar{display:none}
.chip{flex-shrink:0;padding:6px 11px;border-radius:20px;font-size:12px;font-weight:600;background:var(--fill);color:var(--text-2);border:1px solid transparent}
.chip.on{background:var(--ad-dim);color:var(--ad);border-color:rgba(249,115,22,.35)}
.panel-scroll{overflow-y:auto;flex:1;padding:2px 8px 8px;scrollbar-width:thin}
.panel-foot{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-top:1px solid var(--line);flex-shrink:0}
.status-line{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600}
.dot-pulse{width:8px;height:8px;border-radius:50%;background:var(--ok);position:relative}
.dot-pulse::after{content:'';position:absolute;inset:-4px;border-radius:50%;background:var(--ok);opacity:.4;animation:pulseRing 2s infinite var(--ease)}
@keyframes pulseRing{0%{transform:scale(.6);opacity:.5}100%{transform:scale(2.1);opacity:0}}

.city-group{margin:4px 6px}
.city-head{display:flex;align-items:center;justify-content:space-between;padding:9px 8px;cursor:pointer;user-select:none;border-radius:9px}
.city-head:hover{background:var(--fill)}
.city-head-left{display:flex;align-items:center;gap:8px}
.city-head .label{font-size:11.5px;font-weight:700;letter-spacing:.06em;color:var(--text-2);text-transform:uppercase}
.city-count{font-size:10.5px;font-weight:700;color:var(--accent);background:var(--accent-dim);padding:2px 7px;border-radius:20px}
.chev{width:13px;height:13px;color:var(--text-2);transition:transform .25s var(--ease)}
.city-group.collapsed .chev{transform:rotate(-90deg)}
.city-group.collapsed .cam-list{display:none}
.cam-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:11px;cursor:pointer;transition:background .15s}
.cam-row:hover{background:var(--accent-dim)}
.cam-row.active{background:var(--accent-dim)}
.cam-icon{width:28px;height:28px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--fill);color:var(--text-2)}
.cam-row.active .cam-icon{background:var(--accent);color:#fff}
.cam-icon svg{width:14px;height:14px}
.cam-name{flex:1;font-size:13.5px;font-weight:500;line-height:1.25;min-width:0}
.cam-name small{display:block;font-size:11px;color:var(--text-2);font-weight:500}
.status-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;background:var(--ok)}
.status-dot.off{background:var(--bad)}
.prec-dot{width:7px;height:7px;border-radius:2px;flex-shrink:0}
.star{display:inline-flex;width:12px;height:12px;color:var(--vip);vertical-align:-1px}
.star svg{width:100%;height:100%}
.empty{padding:28px 12px;text-align:center;color:var(--text-2);font-size:13px;line-height:1.5}

/* list cards for ads / pins */
.ad-card{display:flex;gap:11px;padding:9px;border-radius:14px;cursor:pointer;transition:background .15s;margin:2px 0}
.ad-card:hover{background:var(--fill)}
.ad-thumb{width:74px;height:74px;border-radius:11px;background:var(--fill-2) center/cover no-repeat;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--text-3)}
.ad-thumb svg{width:22px;height:22px}
.ad-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ad-title{font-size:13.5px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ad-price{font-size:14px;font-weight:700}
.ad-meta{font-size:11px;color:var(--text-2);display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.badge{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;padding:2px 7px;border-radius:6px;letter-spacing:.02em;text-transform:uppercase}
.badge.vip{background:linear-gradient(135deg,#FFC94A,#F59E0B);color:#fff}
.badge.pending{background:rgba(245,165,36,.16);color:#B7791F}
.badge.rejected{background:rgba(239,68,68,.14);color:var(--bad)}
.badge.approved{background:rgba(34,197,94,.14);color:#15803D}
.badge.cat{background:var(--ad-dim);color:var(--ad)}
:root[data-theme="dark"] .badge.pending{color:#FBBF24} :root[data-theme="dark"] .badge.approved{color:#4ADE80}
.ad-card.vip{background:linear-gradient(90deg,rgba(245,158,11,.1),transparent 70%)}
.pin-row .cam-icon{color:#fff}

/* ================= top right ================= */
#topRight{position:absolute;top:20px;right:20px;z-index:25;display:flex;gap:8px;align-items:center}
.icon-btn{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:var(--text-1)}
.icon-btn svg{width:18px;height:18px}
.icon-btn:hover{transform:translateY(-1px)}
:root[data-theme="dark"] .i-moon,:root:not([data-theme="dark"]) .i-sun{display:none}
.acct-pill{height:44px;padding:0 8px 0 14px;border-radius:14px;font-size:13px;font-weight:600;display:flex;align-items:center;gap:9px}
.acct-pill .who{display:flex;align-items:center;gap:8px;cursor:pointer;padding:6px 6px 6px 0}
.avatar{width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.avatar.admin{background:linear-gradient(135deg,#FFC94A,#F59E0B)}
.acct-login-btn{font-weight:700;color:var(--accent);padding:8px 8px 8px 0}
.q-badge{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--bad);color:#fff;font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}

.menu{position:fixed;z-index:70;min-width:230px;border-radius:16px;padding:6px;display:flex;flex-direction:column}
.menu button,.menu .menu-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;font-size:13.5px;font-weight:500;text-align:left;color:var(--text-1)}
.menu button:hover{background:var(--fill)}
.menu button.on{color:var(--accent);font-weight:700}
.menu .sep{height:1px;background:var(--line);margin:5px 6px}
.menu .hdr{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--text-2);text-transform:uppercase;padding:8px 12px 4px}
.menu .menu-sub{font-size:11px;color:var(--text-2);display:block}

/* ================= markers ================= */
#markerLayer{position:absolute;inset:0;pointer-events:none;z-index:5;overflow:hidden}
.mk{position:absolute;left:0;top:0;pointer-events:auto;cursor:pointer;display:flex;align-items:center;justify-content:center;will-change:transform}
.mk-circle{width:30px;height:30px;border-radius:50%;background:var(--accent);border:2.5px solid #fff;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:700;box-shadow:0 3px 10px rgba(30,80,200,.35);transition:transform .18s var(--ease)}
.mk-circle svg{width:13px;height:13px}
.mk:hover .mk-circle{transform:scale(1.16)}
.mk.active .mk-circle{transform:scale(1.25);box-shadow:0 0 0 4px var(--accent-glow),0 4px 16px rgba(30,80,200,.5)}
.mk.offline .mk-circle{background:#94A3B8}
.mk-ring{position:absolute;inset:-9px;border-radius:50%;border:2px solid var(--accent-glow);animation:mkPulse 2.6s infinite var(--ease);pointer-events:none}
.mk.offline .mk-ring,.mk.ad .mk-ring,.mk.pin .mk-ring{display:none}
@keyframes mkPulse{0%{transform:scale(.7);opacity:.7}75%{transform:scale(1.9);opacity:0}100%{opacity:0}}
.mk.featured .mk-circle{background:linear-gradient(135deg,#FFC94A,#F59E0B);box-shadow:0 3px 14px rgba(245,158,11,.55)}
.mk.featured .mk-ring{border-color:rgba(245,158,11,.5)}
/* cameras added by visitors: teal, so it's clear they're not from the official networks */
.mk.cam.user .mk-circle{background:#14B8A6;box-shadow:0 3px 10px rgba(20,184,166,.4)}
.mk.cam.user .mk-ring{border-color:rgba(20,184,166,.45)}
.mk.pending .mk-circle{border-style:dashed}
.mk-label{position:absolute;top:34px;left:50%;transform:translateX(-50%);font-size:11.5px;font-weight:700;color:var(--text-1);text-shadow:var(--label-halo);white-space:nowrap;pointer-events:none;max-width:180px;overflow:hidden;text-overflow:ellipsis}
/* markers fanned out around a shared point: only the first keeps its label, the rest show it on hover */
.mk.grouped .mk-ring{display:none}
.mk.grouped-sub .mk-label{display:none}
.mk.grouped:hover{z-index:3}
.mk.grouped:hover .mk-label{display:block;background:var(--glass-bg-strong);padding:2px 7px;border-radius:7px;text-shadow:none}
/* ad marker: rounded photo pin */
.mk.ad .ad-pin{width:40px;height:40px;border-radius:12px;border:2.5px solid #fff;background:var(--ad) center/cover no-repeat;box-shadow:0 4px 12px rgba(0,0,0,.28);display:flex;align-items:center;justify-content:center;color:#fff;transition:transform .18s var(--ease);position:relative}
.mk.ad .ad-pin::after{content:'';position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:#fff}
.mk.ad .ad-pin svg{width:17px;height:17px}
.mk.ad.vip .ad-pin{border-color:#F59E0B;box-shadow:0 0 0 3px rgba(245,158,11,.35),0 4px 14px rgba(0,0,0,.3)}
.mk.ad:hover .ad-pin{transform:scale(1.1) translateY(-2px)}
.mk.ad .price-tag{position:absolute;top:44px;left:50%;transform:translateX(-50%);background:var(--glass-bg-strong);color:var(--text-1);font-size:11px;font-weight:700;padding:2px 7px;border-radius:7px;white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.15);pointer-events:none}
.mk.pin .pin-shape{width:30px;height:30px;border-radius:50% 50% 50% 4px;transform:rotate(-45deg);background:var(--pin-color,var(--pin));border:2.5px solid #fff;box-shadow:0 3px 10px rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;transition:transform .18s}
.mk.pin .pin-shape span{transform:rotate(45deg);font-size:14px;line-height:1}
.mk.pin:hover .pin-shape{transform:rotate(-45deg) scale(1.12)}
.mk.pending{opacity:.7}
.mk.pending .pin-shape,.mk.pending .ad-pin{border-style:dashed}
/* admin edit mode */
.mk.editable{cursor:grab}
.mk.dragging{cursor:grabbing;z-index:20;opacity:.9}
.mk.prec-approx .mk-circle{box-shadow:0 0 0 3px #EF4444,0 3px 10px rgba(0,0,0,.3)}
.mk.prec-poi .mk-circle{box-shadow:0 0 0 3px #F59E0B,0 3px 10px rgba(0,0,0,.3)}
.mk.prec-exact .mk-circle,.mk.prec-manual .mk-circle{box-shadow:0 0 0 3px #22C55E,0 3px 10px rgba(0,0,0,.3)}
.map-tip{position:absolute;left:0;top:0;z-index:7;pointer-events:none;padding:6px 10px;border-radius:10px;font-size:12px;font-weight:600;white-space:nowrap;max-width:280px;overflow:hidden;text-overflow:ellipsis}
.map-popup{position:absolute;z-index:8;pointer-events:auto;width:260px;border-radius:16px;padding:12px;font-size:13px;transform:translate(-50%,calc(-100% - 26px))}
.map-popup .pp-title{font-weight:700;margin-bottom:4px;display:flex;align-items:center;gap:6px}
.map-popup .pp-text{color:var(--text-2);line-height:1.45;white-space:pre-wrap;word-break:break-word}
.map-popup .pp-meta{font-size:11px;color:var(--text-3);margin-top:6px}
.map-popup .pp-actions{display:flex;gap:6px;margin-top:8px}

/* ================= video windows ================= */
#winContainer{position:absolute;inset:0;z-index:30;pointer-events:none}
/* camera windows sit above everything, except the list and the viewing-modes menu while they are open */
body.panel-open #leftPanel,#rightControls:has(#modes.open){z-index:35}
#winContainer .vwin{pointer-events:auto}
.vwin{position:absolute;width:420px;min-width:300px;min-height:260px;border-radius:20px;overflow:hidden;background:var(--video-bg);border:1px solid rgba(255,255,255,.1);box-shadow:0 20px 55px rgba(0,0,10,.4);display:flex;flex-direction:column;opacity:0;transform:scale(.94) translateY(10px);transition:opacity .28s var(--ease),transform .28s var(--ease);color:#EDEFF3}
.vwin.show{opacity:1;transform:none}
.vwin.fullscreen{position:fixed!important;inset:16px!important;width:auto!important;height:auto!important;z-index:100}
.vwin-bar{display:flex;align-items:center;gap:8px;padding:11px 12px;flex-shrink:0;cursor:grab;background:rgba(255,255,255,.03);border-bottom:1px solid rgba(255,255,255,.07)}
.vwin-bar .cam-tag{width:26px;height:26px;border-radius:8px;background:rgba(59,130,246,.18);display:flex;align-items:center;justify-content:center;color:var(--accent);flex-shrink:0}
.vwin-bar .cam-tag svg{width:13px;height:13px}
.vwin-title{flex:1;min-width:0}
.vwin-title .name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vwin-title .sub{font-size:10.5px;color:#8891A0;font-weight:500}
.vwin-btn{width:28px;height:28px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#B4BBC7;transition:background .15s,color .15s;position:relative}
.vwin-btn:hover{background:rgba(255,255,255,.09);color:#fff}
.vwin-btn svg{width:14px;height:14px}
.vwin-btn.close:hover{background:rgba(239,68,68,.22);color:#F87171}
.vwin-btn.on{color:var(--accent);background:rgba(59,130,246,.16)}
.vwin-btn.fav.on{color:var(--vip);background:rgba(245,158,11,.16)}
.vwin-btn .cnt{position:absolute;top:-3px;right:-3px;font-size:9px;font-weight:700;background:var(--accent);color:#fff;border-radius:7px;padding:0 4px;line-height:14px}
.vwin-body{position:relative;flex:1;min-height:0;overflow:hidden;background:#000}
.vwin-body iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.vwin-body video{width:100%;height:100%;object-fit:contain;display:block;background:#000;transform-origin:center}
.stream-status{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;text-align:center;padding:20px;background:#0b0e14;color:#8891A0;font-size:12px;font-weight:600;line-height:1.5}
.stream-status .icon{width:26px;height:26px}
.stream-status .spinner{width:28px;height:28px;border-radius:50%;border:3px solid rgba(255,255,255,.12);border-top-color:var(--accent);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.vwin-live-badge{position:absolute;top:10px;left:10px;display:flex;align-items:center;gap:5px;background:rgba(0,0,0,.45);backdrop-filter:blur(6px);padding:5px 9px;border-radius:7px;font-size:10.5px;font-weight:700;letter-spacing:.03em}
.vwin-live-badge .rd{width:6px;height:6px;border-radius:50%;background:#EF4444;animation:blink 1.6s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.vwin-expand{position:absolute;top:10px;right:10px;width:28px;height:28px;border-radius:8px;background:rgba(0,0,0,.4);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;color:#fff}
.vwin-expand svg{width:13px;height:13px}
.vwin-info{display:grid;grid-template-columns:1fr 1fr 1fr;flex-shrink:0;padding:11px 14px 12px;gap:6px;border-top:1px solid rgba(255,255,255,.06)}
.vwin-info .item{display:flex;align-items:center;gap:7px;min-width:0}
.vwin-info .item svg{width:15px;height:15px;color:#9BA6B8;flex-shrink:0}
.vwin-info .v{font-size:12.5px;font-weight:700;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vwin-info .l{font-size:10px;color:#828B99;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vwin-info .item.status .v{color:#4ADE80}
.vwin-info .item.status.offline .v{color:#F87171}
.vwin-comments{display:none;flex-direction:column;border-top:1px solid rgba(255,255,255,.06);max-height:240px;flex-shrink:0}
.vwin.show-comments .vwin-comments{display:flex}
.vwin-comments .c-list{overflow-y:auto;padding:8px 14px;display:flex;flex-direction:column;gap:8px;scrollbar-width:thin}
.vwin-comments .c-form{display:flex;gap:6px;padding:8px 10px;border-top:1px solid rgba(255,255,255,.06)}
.vwin-comments input{flex:1;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);border-radius:9px;padding:8px 10px;color:#fff;font-size:12.5px;outline:none;min-width:0}
.vwin-comments button.send{background:var(--accent);color:#fff;border-radius:9px;padding:0 12px;font-size:12px;font-weight:700}
.cmt{font-size:12.5px;line-height:1.4}
.cmt b{font-weight:700;margin-right:6px}
.cmt .t{color:var(--text-3);font-size:10.5px}
.vwin .cmt .t{color:#6E7787}
.cmt .del{font-size:10.5px;color:#F87171;margin-left:6px}
.vwin.fullscreen .vwin-bar,.vwin.fullscreen .vwin-info,.vwin.fullscreen .vwin-comments,.vwin:fullscreen .vwin-bar,.vwin:fullscreen .vwin-info,.vwin:fullscreen .vwin-comments{display:none}
.vwin:fullscreen{width:100vw;height:100vh;border-radius:0}
.rsz{position:absolute;z-index:5}
.rsz-e{top:10px;bottom:10px;width:8px;right:-4px;cursor:ew-resize}
.rsz-w{top:10px;bottom:10px;width:8px;left:-4px;cursor:ew-resize}
.rsz-s{left:10px;right:10px;height:8px;bottom:-4px;cursor:ns-resize}
.rsz-se{bottom:-4px;right:-4px;width:16px;height:16px;cursor:nwse-resize}
.rsz-sw{bottom:-4px;left:-4px;width:16px;height:16px;cursor:nesw-resize}
.vwin.fullscreen .rsz{display:none}
/* full screen: camera name + position, shown briefly after a switch or when the pointer moves */
.fs-cap{display:none}
.vwin.fullscreen .fs-cap,.vwin:fullscreen .fs-cap{display:flex}
.fs-cap{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:3;flex-direction:column;align-items:center;gap:2px;max-width:80%;padding:8px 14px;border-radius:12px;background:rgba(0,0,0,.5);backdrop-filter:blur(6px);color:#fff;text-align:center;pointer-events:none;opacity:0;transition:opacity .25s}
.fs-cap .n{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.fs-cap .k{font-size:11px;color:#C9CFD8}
.vwin.nav-on .fs-cap{opacity:1}
.zoom-chip{position:absolute;left:12px;bottom:12px;z-index:6;display:flex;align-items:center;gap:9px;background:rgba(0,0,0,.5);backdrop-filter:blur(8px);padding:6px 8px 6px 12px;border-radius:10px;font-size:11.5px;font-weight:700}
.zoom-chip button{font-size:10.5px;font-weight:700;color:#fff;background:rgba(255,255,255,.16);padding:4px 9px;border-radius:7px}

/* ================= bottom controls ================= */
#legend{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:15;display:flex;align-items:center;gap:4px;padding:5px;border-radius:16px}
.layer-t{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;padding:8px 13px;border-radius:12px;color:var(--text-2);transition:background .15s,color .15s}
.layer-t.on{color:var(--text-1);background:var(--fill)}
.layer-t:not(.on) .legend-dot{background:transparent!important;box-shadow:inset 0 0 0 2px var(--text-3)}
.legend-dot{width:10px;height:10px;border-radius:50%}
.legend-dot.cam{background:var(--accent)}
.cam-preview{position:relative;flex-shrink:0;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000;display:flex;align-items:center;justify-content:center;color:#8891A0;font-size:12.5px;text-align:center;padding:0}
.cam-preview video,.cam-preview iframe{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:contain}
.provider-list{display:flex;flex-wrap:wrap;gap:5px}
.provider-list span{font-size:11px;font-weight:600;padding:3px 8px;border-radius:7px;background:var(--fill);color:var(--text-2)}
.check-row{display:flex;gap:8px}
.check-row .inp{flex:1;min-width:0}
.consent{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;line-height:1.45;color:var(--text-2);cursor:pointer}
.consent input{margin-top:2px;flex-shrink:0}
details.howto summary{cursor:pointer;font-size:12.5px;font-weight:600;color:var(--accent)}
details.howto div{font-size:12px;color:var(--text-2);line-height:1.5;margin-top:6px} .legend-dot.ad{background:var(--ad);border-radius:3px} .legend-dot.pin{background:var(--pin)}
.layer-t .short{display:none}
#rightControls{position:absolute;bottom:20px;right:20px;z-index:15;width:224px;display:flex;flex-direction:column;gap:8px}
/* bright on purpose (it's what makes the map a board), but glassy like the rest */
.fab{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:13px;border-radius:16px;color:#fff;font-weight:700;font-size:14px;
  background:linear-gradient(135deg,rgba(251,146,60,.8),rgba(234,88,12,.74));
  backdrop-filter:blur(20px) saturate(170%);-webkit-backdrop-filter:blur(20px) saturate(170%);
  border:1px solid rgba(255,255,255,.38);
  box-shadow:0 8px 26px rgba(234,88,12,.32),inset 0 1px 0 rgba(255,255,255,.45);
  text-shadow:0 1px 2px rgba(120,40,0,.25);transition:transform .2s var(--ease),box-shadow .2s}
:root[data-theme="dark"] .fab{background:linear-gradient(135deg,rgba(251,146,60,.62),rgba(234,88,12,.55));border-color:rgba(255,190,140,.3)}
.fab:hover{transform:translateY(-1px);box-shadow:0 10px 30px rgba(234,88,12,.42),inset 0 1px 0 rgba(255,255,255,.5)}
.fab svg{width:16px;height:16px;flex-shrink:0}
#modes{border-radius:18px;overflow:hidden}
.modes-rows{max-height:0;overflow:hidden;transition:max-height .32s var(--ease)}
#modes.open .modes-rows{max-height:320px;border-bottom:1px solid var(--line)}
.modes-toggle{display:flex;align-items:center;gap:11px;width:100%;padding:11px 15px;text-align:left}
.modes-toggle:hover{background:var(--fill)}
.modes-toggle>svg{width:16px;height:16px;color:var(--text-2);flex-shrink:0}
.modes-toggle .lbl{flex:1;font-size:13px;font-weight:600}
.modes-toggle .lbl .sub{display:block;font-size:10.5px;font-weight:500;color:var(--text-2);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.modes-toggle .chev-up{transition:transform .25s var(--ease)}
#modes.open .chev-up{transform:rotate(180deg)}
.modes-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--accent-dim);flex-shrink:0}
.ctrl-row{display:flex;align-items:center;gap:11px;padding:11px 15px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .15s}
.ctrl-row:last-child{border-bottom:none}
.ctrl-row:hover{background:var(--fill)}
.ctrl-row svg{width:16px;height:16px;color:var(--text-2);flex-shrink:0}
.ctrl-row .lbl{flex:1;font-size:13px;font-weight:600}
.ctrl-row .lbl .sub{display:block;font-size:10.5px;font-weight:500;color:var(--text-2);margin-top:1px}
.ctrl-row.active svg{color:var(--accent)}
.swtch{width:34px;height:20px;border-radius:12px;background:rgba(120,140,170,.3);position:relative;flex-shrink:0;transition:background .2s}
.swtch::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s var(--ease)}
.swtch.on{background:var(--accent)}
.swtch.on::after{transform:translateX(14px)}
#zoomCtrl{position:absolute;bottom:20px;left:20px;z-index:15;display:flex;flex-direction:column;border-radius:14px;overflow:hidden}
body.panel-open #zoomCtrl{left:390px}
.zbtn{width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--line)}
.zbtn:last-child{border-bottom:none}
.zbtn:hover{background:var(--fill)}
.zbtn svg{width:16px;height:16px}
#attrib{position:absolute;bottom:4px;right:250px;z-index:14;font-size:9.5px;color:var(--text-3);opacity:.8}
#attrib a{color:inherit}

#tourBanner,#pickBanner{position:absolute;top:20px;left:50%;transform:translate(-50%,-80px);z-index:40;display:flex;align-items:center;gap:12px;padding:10px 12px 10px 18px;border-radius:16px;opacity:0;transition:opacity .4s var(--ease),transform .4s var(--ease);pointer-events:none}
#tourBanner.show,#pickBanner.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
#tourBanner .dot,#pickBanner .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:blink 1.4s infinite}
#pickBanner .dot{background:var(--ad)}
.txt{font-size:13px;font-weight:600}
.txt b{color:var(--accent)}
#tourBanner button,#pickBanner button{font-size:12px;font-weight:700;color:#fff;background:rgba(15,23,32,.8);padding:7px 13px;border-radius:9px}
body.picking #map canvas{cursor:crosshair!important}

body.ambient #panelToggle,body.ambient #leftPanel,body.ambient #legend,body.ambient #rightControls,body.ambient #zoomCtrl,body.ambient #topRight,body.ambient #tourBanner{opacity:0!important;pointer-events:none!important}
#ambientHint{position:absolute;bottom:20px;right:20px;z-index:50;font-size:11.5px;font-weight:600;color:rgba(255,255,255,.75);background:rgba(0,0,0,.4);backdrop-filter:blur(8px);padding:8px 14px;border-radius:10px;display:none;cursor:pointer}
body.ambient #ambientHint{display:block}

/* ================= modals & forms ================= */
.overlay{position:fixed;inset:0;z-index:90;background:rgba(8,12,20,.42);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:16px;animation:fadeIn .2s}
@keyframes fadeIn{from{opacity:0}}
.modal{width:100%;max-width:520px;max-height:calc(100vh - 32px);overflow:hidden;border-radius:22px;display:flex;flex-direction:column;animation:popIn .28s var(--ease)}
.modal.wide{max-width:760px}
@keyframes popIn{from{transform:translateY(12px) scale(.98);opacity:0}}
.modal-head{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--line);flex-shrink:0}
.modal-head h2{font-size:16px;margin:0;flex:1;font-weight:700}
.x-btn{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--text-2);font-size:16px}
.x-btn:hover{background:var(--fill)}
.modal-body{padding:16px 18px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;scrollbar-width:thin}
.modal-foot{display:flex;gap:8px;padding:14px 18px;border-top:1px solid var(--line);flex-shrink:0;flex-wrap:wrap}
.modal-foot .btn{flex:1}
.field{display:flex;flex-direction:column;gap:5px}
.field label,.flabel{font-size:11.5px;font-weight:700;color:var(--text-2);text-transform:uppercase;letter-spacing:.04em}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.inp{width:100%;padding:10px 12px;border-radius:11px;font-size:14px;background:var(--fill);border:1px solid var(--line);color:var(--text-1);outline:none}
.inp:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
textarea.inp{min-height:110px;resize:vertical;line-height:1.45}
select.inp{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--text-2) 50%),linear-gradient(135deg,var(--text-2) 50%,transparent 50%);background-position:calc(100% - 17px) 55%,calc(100% - 12px) 55%;background-size:5px 5px;background-repeat:no-repeat;padding-right:30px}
select.inp option{background:var(--page);color:var(--text-1)}
.hint{font-size:12px;color:var(--text-2);line-height:1.45}
.err{font-size:12.5px;color:var(--bad);font-weight:600;min-height:0}
.btn{padding:11px 16px;border-radius:12px;font-size:13.5px;font-weight:600;background:var(--fill-2);color:var(--text-1);text-align:center;transition:filter .15s,background .15s}
.btn:hover{filter:brightness(1.05);background:var(--fill-2)}
.btn.primary{background:var(--accent);color:#fff}
.btn.orange{background:var(--ad);color:#fff}
.btn.danger{background:rgba(239,68,68,.12);color:var(--bad)}
.btn.sm{padding:7px 11px;font-size:12px;border-radius:10px}
.btn:disabled{opacity:.55;cursor:default}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{padding:8px 12px;border-radius:10px;font-size:12.5px;font-weight:600;background:var(--fill);border:1px solid var(--line);color:var(--text-2)}
.seg button.on{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}
.place-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:11px;background:var(--fill);border:1px dashed var(--line);font-size:13px}
.place-row span{flex:1;color:var(--text-2)}
.place-row.set span{color:var(--text-1);font-weight:600}
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
.ph{position:relative;aspect-ratio:1;border-radius:11px;background:var(--fill) center/cover no-repeat;border:1px solid var(--line)}
.ph .rm{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center}
.ph.add{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;color:var(--text-2);font-size:11px;font-weight:600;cursor:pointer;border-style:dashed}
.ph.add svg{width:20px;height:20px}
.auth-tabs{margin-bottom:4px}
.tg-box{display:flex;justify-content:center;padding:4px 0}
.or{display:flex;align-items:center;gap:10px;color:var(--text-3);font-size:12px}
.or::before,.or::after{content:'';flex:1;height:1px;background:var(--line)}

/* ad detail */
.gallery{position:relative;background:#000;aspect-ratio:16/10;flex-shrink:0}
.gallery img{width:100%;height:100%;object-fit:contain;display:block}
.gallery .nav{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;font-size:18px;display:flex;align-items:center;justify-content:center}
.gallery .nav.l{left:10px} .gallery .nav.r{right:10px}
.gallery .dots{position:absolute;bottom:10px;left:0;right:0;display:flex;justify-content:center;gap:5px}
.gallery .dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.45)}
.gallery .dots i.on{background:#fff}
.thumbs{display:flex;gap:6px;overflow-x:auto;padding:8px 18px 0;scrollbar-width:none}
.thumbs img{width:56px;height:42px;object-fit:cover;border-radius:7px;cursor:pointer;opacity:.6;flex-shrink:0}
.thumbs img.on{opacity:1;outline:2px solid var(--accent)}
.detail-price{font-size:22px;font-weight:700}
.detail-body{font-size:14px;line-height:1.55;white-space:pre-wrap;word-break:break-word}
.contacts{display:flex;gap:8px;flex-wrap:wrap}
.contacts a{flex:1;min-width:140px;text-decoration:none}
.notice{padding:10px 12px;border-radius:11px;font-size:12.5px;line-height:1.45}
.notice.warn{background:rgba(245,165,36,.14);color:#B7791F}
.notice.bad{background:rgba(239,68,68,.12);color:var(--bad)}
:root[data-theme="dark"] .notice.warn{color:#FBBF24}
.cmt-list{display:flex;flex-direction:column;gap:10px}
.cmt-form{display:flex;gap:8px}
.cmt-form .inp{flex:1}

/* admin drawer */
#adminDrawer{position:fixed;top:0;right:0;bottom:0;z-index:80;width:440px;max-width:100vw;display:flex;flex-direction:column;border-radius:22px 0 0 22px;transform:translateX(105%);transition:transform .35s var(--ease)}
#adminDrawer.open{transform:none}
.adm-list{display:flex;flex-direction:column;gap:10px}
.adm-item{padding:12px;border-radius:14px;background:var(--fill);display:flex;flex-direction:column;gap:6px}
.adm-item .t{font-weight:700;font-size:13.5px}
.adm-item .s{font-size:12px;color:var(--text-2);line-height:1.4}
.adm-item .acts{display:flex;gap:6px;flex-wrap:wrap}
.adm-photos{display:flex;gap:5px;overflow-x:auto}
.adm-photos img{width:64px;height:48px;object-fit:cover;border-radius:7px}
.adm-table{width:100%;border-collapse:collapse;font-size:12.5px}
.adm-table td{padding:7px 4px;border-bottom:1px solid var(--line);vertical-align:middle}
.stat-row{display:flex;gap:8px}
.stat{flex:1;padding:10px;border-radius:12px;background:var(--fill);text-align:center}
.stat b{display:block;font-size:18px}
.stat span{font-size:11px;color:var(--text-2)}
.prec-legend{display:flex;gap:10px;flex-wrap:wrap;font-size:11.5px;color:var(--text-2)}
.prec-legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:4px;vertical-align:-1px}

.global-toast{position:fixed;left:50%;bottom:84px;transform:translateX(-50%) translateY(10px);z-index:120;padding:11px 20px;border-radius:14px;font-size:13px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .25s var(--ease),transform .25s var(--ease);max-width:calc(100vw - 32px);text-align:center}
.global-toast.show{opacity:1;transform:translateX(-50%)}

/* ================= responsive ================= */
@media (max-width:860px){
  #leftPanel{top:66px;left:12px;right:12px;bottom:auto;height:min(62vh,calc(100vh - 150px));width:auto}
  #panelToggle{top:12px;left:12px;padding:11px 14px}
  #panelToggle span{display:none}
  #topRight{top:12px;right:12px}
  .acct-pill .who span.nm{display:none}
  /* one bottom row: [layers …] [modes] [+] */
  #legend{bottom:12px;left:12px;right:auto;transform:none;max-width:calc(100vw - 132px);gap:2px}
  .layer-t{padding:8px 8px;font-size:11.5px;gap:6px;min-width:0;white-space:nowrap}
  .layer-t .full{display:none} .layer-t .short{display:inline}
  #rightControls{right:12px;bottom:12px;width:auto;flex-direction:row;align-items:flex-end}
  .fab{order:2;width:46px;height:46px;padding:0;border-radius:15px}
  .fab .fab-txt{display:none}
  .fab svg{width:20px;height:20px}
  #modes{order:1;background:none;border:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;overflow:visible}
  .modes-toggle{width:46px;height:46px;padding:0;justify-content:center;border-radius:15px;position:relative;
    background:var(--glass-bg);backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow)}
  .modes-toggle .lbl,.modes-toggle .chev-up{display:none}
  .modes-toggle>svg{width:18px;height:18px;color:var(--text-1)}
  .modes-dot{position:absolute;top:7px;right:7px}
  .modes-rows{position:absolute;right:0;bottom:56px;width:250px;border-radius:18px;
    background:var(--glass-bg-strong);backdrop-filter:blur(28px) saturate(160%);-webkit-backdrop-filter:blur(28px) saturate(160%);
    border:1px solid transparent;box-shadow:none;transition:max-height .32s var(--ease),border-color .2s}
  #modes.open .modes-rows{border:1px solid var(--glass-border);box-shadow:var(--glass-shadow)}
  #multiBtn{display:none}   /* on a phone only one video fits the screen */
  #zoomCtrl{display:none}
  body.panel-open #legend,body.has-win #legend,body.has-win #rightControls{display:none}
  #attrib{right:12px;bottom:2px}
  /* one window, centred on the screen; height follows the picture */
  .vwin{left:0!important;right:0;top:50%!important;bottom:auto;margin:0 auto;translate:0 -50%;width:min(720px,calc(100vw - 16px))!important;height:auto!important;max-height:calc(100vh - 32px)}
  .vwin-body{flex:none}
  .vwin.fullscreen,.vwin:fullscreen{translate:none;margin:0}
  .rsz{display:none}
  .vwin.fullscreen{inset:0!important;border-radius:0}
  .vwin.fullscreen,.vwin:fullscreen{max-height:none}
  .vwin.fullscreen .vwin-body,.vwin:fullscreen .vwin-body{aspect-ratio:auto;flex:1}
  #adminDrawer{border-radius:0;width:100vw}
  .row2{grid-template-columns:1fr}
  .map-popup{width:230px}
}