/* =====================================================================
   iOS 26 · Liquid Glass — підключається після app.css і перекриває його
   ===================================================================== */
:root{
  --bg:#eef1f8;
  --surface:rgba(255,255,255,.56);--surface-2:rgba(118,118,128,.12);--line:rgba(60,60,67,.14);
  --ink:#0b0c10;--muted:rgba(60,60,67,.62);
  --brand:#0a84ff;--brand-2:#5ac8fa;--brand-ink:#fff;--ok:#1f9d4a;--danger:#ff3b30;
  --glass-edge:rgba(255,255,255,.75);--glass-hi:rgba(255,255,255,.9);--seg:rgba(255,255,255,.92);
  --glass-shadow:0 1px 1px rgba(255,255,255,.4) inset,0 12px 40px rgba(31,45,90,.12),0 2px 6px rgba(31,45,90,.06);
  --r:26px;
  --blob1:#b9d6ff;--blob2:#e2c8ff;--blob3:#ffd8c0;--blob4:#c4f0df;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#05060b;
    --surface:rgba(44,46,60,.50);--surface-2:rgba(255,255,255,.09);--line:rgba(255,255,255,.12);
    --ink:#f5f5f7;--muted:rgba(235,235,245,.62);
    --brand:#409cff;--brand-2:#64d2ff;--brand-ink:#fff;--ok:#32d74b;--danger:#ff6961;
    --glass-edge:rgba(255,255,255,.16);--glass-hi:rgba(255,255,255,.22);--seg:rgba(255,255,255,.2);
    --glass-shadow:0 1px 1px rgba(255,255,255,.08) inset,0 14px 44px rgba(0,0,0,.45),0 2px 8px rgba(0,0,0,.3);
    --blob1:#0b3b8f;--blob2:#4c1d95;--blob3:#7a2e1f;--blob4:#0b5a52;
  }
}
html{background:var(--bg)}
body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI Variable Display",Inter,system-ui,sans-serif;
  background:transparent;-webkit-font-smoothing:antialiased;letter-spacing:-.011em}
body::before{content:"";position:fixed;inset:-10%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(55% 45% at 8% 4%,var(--blob1),transparent 70%),
    radial-gradient(45% 40% at 96% 8%,var(--blob2),transparent 70%),
    radial-gradient(50% 45% at 86% 98%,var(--blob3),transparent 70%),
    radial-gradient(45% 40% at 2% 96%,var(--blob4),transparent 70%);
  animation:drift 28s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate3d(2%,-2%,0) scale(1.06)}}
h1{font-size:clamp(28px,4vw,38px);font-weight:800;letter-spacing:-.035em}
h2{font-size:19px;font-weight:700;letter-spacing:-.02em}

/* скло */
.card,.side,.kpi,.live,.login-card,details.pw form,.topbar{
  background:var(--surface);
  -webkit-backdrop-filter:blur(30px) saturate(190%);backdrop-filter:blur(30px) saturate(190%);
  border:1px solid var(--glass-edge);box-shadow:var(--glass-shadow)}
.card,.kpi,.live{position:relative;border-radius:var(--r)}
.card::before,.kpi::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.34),rgba(255,255,255,0) 38%);opacity:.7}
.card>*,.kpi>*{position:relative}
.card+.card{margin-top:18px}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root{--surface:#fff}
  @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--surface:#1c1d27}}
}

/* сайдбар — плаваюча скляна панель */
.shell{grid-template-columns:292px 1fr}
.side{margin:14px;height:calc(100vh - 28px);top:14px;border-radius:32px;padding:20px 14px 14px}
.nav a{border-radius:18px;padding:11px 14px;font-weight:600;color:var(--ink);gap:12px}
.nav a:hover{background:var(--surface-2)}
.nav a.on{background:color-mix(in srgb,var(--brand) 16%,transparent);color:var(--brand);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 0 0 1px color-mix(in srgb,var(--brand) 25%,transparent)}
.me{border-top:1px solid var(--line)}
.me-link{border-radius:20px;padding:8px}
.me-link.on,.me-link:hover{background:var(--surface-2)}
.ava{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 4px 12px color-mix(in srgb,var(--brand) 40%,transparent);
  background:linear-gradient(160deg,var(--brand-2),var(--brand))}
.main{padding-top:34px}
.logo img{filter:drop-shadow(0 6px 10px rgba(10,60,140,.25))}

/* кнопки */
.btn{border-radius:99px;padding:11px 20px;font-weight:600;background:var(--surface);color:var(--ink);
  -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
  border:1px solid var(--glass-edge);box-shadow:0 1px 0 var(--glass-hi) inset,0 3px 10px rgba(31,45,90,.08)}
.btn.sm{padding:6px 14px}
.btn:hover{filter:none;box-shadow:0 1px 0 var(--glass-hi) inset,0 8px 20px rgba(31,45,90,.14)}
.btn.primary{border:0;color:#fff;background:linear-gradient(180deg,#52b0ff 0%,#0a84ff 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(0,0,0,.12),0 8px 20px rgba(10,132,255,.38)}
.btn.primary:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 12px 28px rgba(10,132,255,.5)}
.btn.danger{color:var(--danger)}

/* поля */
input,select,textarea{background:var(--surface-2);border:1px solid transparent;border-radius:16px;padding:12px 15px;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--brand);background:var(--surface);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 22%,transparent)}
label{font-size:12.5px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.alert{border-radius:20px;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.badge{background:var(--surface-2);border:0;font-weight:600}

/* прогрес */
.progress{height:12px;border:0;background:var(--surface-2)}
.progress>div{border-radius:99px;box-shadow:0 0 14px color-mix(in srgb,var(--brand) 55%,transparent)}

/* сегментований перемикач (iOS) */
.tabs{display:flex;gap:2px;padding:3px;background:var(--surface-2);border-radius:22px;width:fit-content;max-width:100%}
.tab{border:0;background:transparent;border-radius:19px;padding:8px 16px;font-weight:600;color:var(--ink)}
.tab:hover{transform:none;border:0;background:rgba(255,255,255,.18)}
.tab.on{background:var(--seg);color:var(--ink);border:0;
  box-shadow:0 3px 10px rgba(31,45,90,.14),0 1px 0 var(--glass-hi) inset}

/* теплові клітинки: глянцеві */
.cell,.mk{position:relative}
.cell{border-radius:22px;box-shadow:inset 0 1.5px 0 rgba(255,255,255,.7),inset 0 -10px 18px rgba(0,0,0,.07),0 8px 20px rgba(31,45,90,.14)}
.cell::after,.mk::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(170deg,rgba(255,255,255,.5),rgba(255,255,255,0) 46%)}
.c-green{background:linear-gradient(180deg,#6ee58a,#2fbf57);color:#04361a}
.c-yellow{background:linear-gradient(180deg,#ffe36e,#ffc800);color:#4a3600}
.c-orange{background:linear-gradient(180deg,#ffbe55,#ff9300);color:#4a2400}
.c-gray{background:linear-gradient(180deg,rgba(174,174,178,.55),rgba(142,142,147,.45));color:var(--ink)}
.c-empty{background:var(--surface-2);border:1.5px dashed var(--line)}
.c-error{background:color-mix(in srgb,var(--danger) 20%,transparent);color:var(--danger)}
.mk{border-radius:17px;border:1.5px solid rgba(255,255,255,.85);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.7),0 8px 20px rgba(0,0,0,.28)}
.cell.ctr,.mk.ctr{box-shadow:0 0 0 3px var(--brand),0 8px 22px color-mix(in srgb,var(--brand) 50%,transparent);outline:0}
.stat{background:var(--surface-2);border:0;border-radius:20px}
.mini i{border-radius:7px;box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}
.kpi{padding:18px 20px}
.kpi b{font-size:34px;font-weight:800;letter-spacing:-.04em}
.biz-grid .card{border-radius:30px}
.delta{border:0;background:var(--surface-2)}

/* таблиці */
.tbl th{letter-spacing:.06em}
.tbl tr:hover td{background:color-mix(in srgb,var(--brand) 6%,transparent)}

/* карта */
#map{border-radius:26px;border:1px solid var(--glass-edge);box-shadow:var(--glass-shadow)}
.leaflet-bar{border:0!important;border-radius:16px!important;overflow:hidden;box-shadow:var(--glass-shadow)!important}
.leaflet-bar a{background:var(--surface)!important;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);color:var(--ink)!important;border-color:var(--line)!important}
.leaflet-control-attribution{background:var(--surface)!important;border-radius:12px 0 0 0;color:var(--muted)!important;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}

/* логін */
.login-card{border-radius:36px;padding:30px 28px}
.login-title{font-weight:800;letter-spacing:-.035em}
.login .btn.primary{padding:14px 20px;font-size:16px}

/* мобільне: нижня плаваюча панель вкладок (як у iOS 26) */
.topbar{display:none}
@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  .side{display:none}
  .main{padding:22px 16px calc(116px + env(safe-area-inset-bottom))}
  .topbar{display:flex;position:fixed;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));
    bottom:calc(12px + env(safe-area-inset-bottom));top:auto;z-index:60;border-radius:34px;padding:7px;
    justify-content:space-between;gap:2px;overflow:visible;
    box-shadow:var(--glass-shadow),0 18px 50px rgba(20,30,70,.22)}
  .topbar a{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 2px 7px;border-radius:26px;
    font-size:10px;font-weight:600;color:var(--muted);white-space:nowrap;text-decoration:none;transition:all .25s cubic-bezier(.34,1.56,.64,1)}
  .topbar a svg{width:22px;height:22px}
  .topbar a.on{color:var(--brand);background:color-mix(in srgb,var(--brand) 16%,transparent);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.5);transform:translateY(-1px)}
  .topbar a span{overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .card,.kpi{border-radius:24px}
  .kpis{grid-template-columns:1fr 1fr}
  .tabs{border-radius:18px}
}

@media (max-width:900px){.tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;width:auto}.tabs::-webkit-scrollbar{display:none}.tab{flex:none;white-space:nowrap}}

/* контент на всю ширину екрана */
.main{max-width:2000px;width:100%;margin:0 auto;padding-left:clamp(16px,2.6vw,48px);padding-right:clamp(16px,2.6vw,48px)}
#map{height:clamp(480px,64vh,820px)}
.map-wrap{grid-template-columns:minmax(300px,520px) 1fr}
.biz-grid{grid-template-columns:repeat(auto-fill,minmax(360px,1fr))}
@media (max-width:900px){.main{padding-left:16px;padding-right:16px}.map-wrap{grid-template-columns:1fr}}

/* блок користувача: без некрасивого переносу */
.me-link>span:nth-child(2){min-width:0;flex:1}
.me-link b,.me-link small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me-link small{margin-top:1px}
.me .logout{padding:4px 12px}

/* ===== випадний список з пошуком ===== */
.combo{position:relative}
.combo>input[type=text]{padding-right:44px;cursor:pointer;text-overflow:ellipsis}
.combo-chev{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:auto;
  display:grid;place-items:center;transition:transform .25s cubic-bezier(.34,1.56,.64,1);cursor:pointer}
.combo.open .combo-chev{transform:translateY(-50%) rotate(180deg);color:var(--brand)}
.combo-panel{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:80;max-height:min(320px,50vh);overflow-y:auto;
  list-style:none;margin:0;padding:6px;border-radius:22px;background:var(--surface);
  -webkit-backdrop-filter:blur(34px) saturate(200%);backdrop-filter:blur(34px) saturate(200%);
  border:1px solid var(--glass-edge);box-shadow:var(--glass-shadow),0 22px 60px rgba(20,30,70,.25);
  animation:comboIn .22s cubic-bezier(.34,1.3,.64,1) both;transform-origin:top center}
@keyframes comboIn{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:none}}
.combo-panel[hidden]{display:none}
.combo-opt{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:10px 14px;border-radius:15px;cursor:pointer;
  font-weight:600;font-size:14.5px}
.combo-opt em{font-style:normal;font-weight:500;font-size:12.5px;color:var(--muted);white-space:nowrap}
.combo-opt.hl{background:color-mix(in srgb,var(--brand) 16%,transparent)}
.combo-opt.sel{color:var(--brand)}
.combo-opt.sel::after{content:"✓";margin-left:8px;font-weight:800}
.combo-opt.sel em{margin-left:auto}
.combo-group{padding:10px 14px 4px;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}
.combo-empty{padding:16px;text-align:center;color:var(--muted)}
.card:has(.combo.open){z-index:30}


/* ===== скрол-бари в стилі iOS: тонкі, заокруглені, напівпрозорі ===== */
:root{--sb:rgba(60,60,67,.30);--sb-h:rgba(60,60,67,.55)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--sb:rgba(235,235,245,.28);--sb-h:rgba(235,235,245,.5)}}
::-webkit-scrollbar{width:14px;height:14px}
::-webkit-scrollbar-track,::-webkit-scrollbar-corner{background:transparent}
::-webkit-scrollbar-thumb{background:var(--sb);border-radius:99px;border:4px solid transparent;background-clip:padding-box;min-height:44px;min-width:44px}
::-webkit-scrollbar-thumb:hover{background:var(--sb-h);background-clip:padding-box;border-width:3px}
::-webkit-scrollbar-thumb:active{background:var(--brand);background-clip:padding-box;border-width:3px}
@supports not selector(::-webkit-scrollbar){*{scrollbar-width:thin;scrollbar-color:var(--sb) transparent}}
.combo-panel::-webkit-scrollbar{width:12px}
.combo-panel{border-radius:22px}
textarea{scrollbar-gutter:auto}

/* ===== видалення бізнесу та скляний діалог ===== */
.biz-wrap{position:relative}
.biz-wrap .card.biz{height:100%}
.first-load .biz-wrap{animation:rise .55s both;animation-delay:calc(var(--i,0) * 90ms)}
.first-load .biz-wrap .card.biz{animation:none}
.biz-del{position:absolute;top:14px;right:14px;z-index:3;margin:0}
.icon-btn{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--glass-edge);cursor:pointer;
  color:var(--muted);background:var(--surface);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  opacity:.0;transform:scale(.85);transition:all .22s cubic-bezier(.34,1.56,.64,1)}
.biz-wrap:hover .icon-btn,.icon-btn:focus-visible{opacity:1;transform:none}
.icon-btn:hover{color:#fff;background:var(--danger);border-color:transparent;box-shadow:0 6px 16px rgba(255,59,48,.4)}
@media (hover:none){.icon-btn{opacity:.9;transform:none}}
.biz-wrap .biz-top{padding-right:40px}
dialog.glass-dialog{border:1px solid var(--glass-edge);border-radius:30px;padding:0;color:var(--ink);width:min(380px,calc(100vw - 32px));
  background:var(--surface);-webkit-backdrop-filter:blur(40px) saturate(200%);backdrop-filter:blur(40px) saturate(200%);
  box-shadow:var(--glass-shadow),0 30px 80px rgba(10,20,50,.4);animation:dlgIn .32s cubic-bezier(.34,1.4,.64,1) both}
dialog.glass-dialog::backdrop{background:rgba(10,14,28,.38);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:fade .25s both}
dialog.glass-dialog form{padding:28px 24px 22px;text-align:center}
@keyframes dlgIn{from{opacity:0;transform:scale(.9) translateY(10px)}to{opacity:1;transform:none}}
.gd-ico{width:54px;height:54px;border-radius:50%;margin:0 auto 14px;display:grid;place-items:center;font-size:28px;font-weight:800;color:#fff;
  background:linear-gradient(180deg,#ff6b60,#ff3b30);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 8px 22px rgba(255,59,48,.45)}
.gd-title{margin:0 0 6px;font-size:19px;letter-spacing:-.02em}
.gd-text{margin:0 0 20px;color:var(--muted);font-size:14.5px;line-height:1.45}
.gd-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gd-actions .btn{width:100%;padding:13px 10px}
.btn.danger-fill{border:0;color:#fff;background:linear-gradient(180deg,#ff6b60,#ff3b30);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 8px 20px rgba(255,59,48,.38)}

/* ===== рекомендації ===== */
.adv-card{margin-bottom:18px}
.adv-head{display:flex;gap:20px;align-items:center;margin-bottom:18px;flex-wrap:wrap}
.ring{--c:var(--brand);width:92px;height:92px;border-radius:50%;flex:none;display:grid;place-items:center;position:relative;
  background:conic-gradient(var(--c) calc(var(--p) * 1%),var(--surface-2) 0);animation:ringIn 1.1s cubic-bezier(.22,1,.36,1) both}
.ring::before{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--bg);opacity:.92}
.ring b,.ring span{position:relative;grid-area:1/1}
.ring b{font-size:28px;font-weight:800;letter-spacing:-.04em;transform:translateY(-6px)}
.ring span{font-size:11px;color:var(--muted);transform:translateY(16px)}
@property --p{syntax:"<number>";inherits:false;initial-value:0}
@keyframes ringIn{from{--p:0}}
.adv-list{display:grid;gap:10px}
.adv{border-radius:20px;background:var(--surface-2);border:1px solid transparent;overflow:hidden;transition:background .2s,border-color .2s}
.adv[open]{background:color-mix(in srgb,var(--accent) 9%,var(--surface-2));border-color:color-mix(in srgb,var(--accent) 30%,transparent)}
.adv summary,.adv-check summary{list-style:none;cursor:pointer;display:flex;gap:12px;align-items:center;padding:14px 16px;font-weight:650}
.adv summary::-webkit-details-marker,.adv-check summary::-webkit-details-marker{display:none}
.adv summary::after,.adv-check summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg);margin-left:6px;transition:transform .25s;flex:none}
.adv[open] summary::after,.adv-check[open] summary::after{transform:rotate(225deg)}
.adv-title{flex:1}
.adv-dot{width:11px;height:11px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent);flex:none}
.adv-tag{font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:99px;color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent);white-space:nowrap}
.adv-high{--accent:#ff3b30}.adv-mid{--accent:#ff9500}.adv-low{--accent:#0a84ff}.adv-ok{--accent:#30b050}
.adv-body{padding:0 18px 16px 39px;animation:rise .3s both}
.adv-why{margin:0 0 8px;color:var(--muted);font-size:14px}
.adv-body ul,.adv-check ul{margin:0;padding-left:18px;display:grid;gap:6px;font-size:14.5px}
.adv-check{margin-top:14px;border-radius:20px;background:var(--surface-2)}
.adv-check ul{padding:0 18px 16px 36px}
.first-load .adv{animation:rise .5s both;animation-delay:calc(var(--i,0) * 70ms + .2s)}
.biz-tip{display:flex;align-items:center;gap:9px;margin:2px 0 12px;padding:8px 12px;border-radius:14px;font-size:12.5px;font-weight:600;
  background:color-mix(in srgb,var(--accent) 11%,transparent);color:var(--ink)}
.biz-tip span:nth-child(2){flex:1;line-height:1.3}
.biz-tip em{font-style:normal;color:var(--accent);font-weight:800}
.biz-tip .adv-dot{width:9px;height:9px;box-shadow:none}

/* ===== сторінка «Бізнеси» ===== */
.biz-list{display:grid;gap:14px}
.biz-list .card+.card{margin-top:0}
.biz-row{display:grid;grid-template-columns:minmax(220px,1.6fr) minmax(220px,1fr) auto;gap:20px;align-items:center;padding:18px 22px;
  transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s}
.biz-row:hover{transform:translateY(-3px)}
.biz-row.is-hidden{opacity:.78}
.first-load .biz-row{animation:rise .5s both;animation-delay:calc(var(--i,0) * 60ms)}
.br-title{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:4px}
.br-title h3{font-size:18px;letter-spacing:-.02em}
.br-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}
.br-nums b{display:block;font-size:20px;letter-spacing:-.02em}.br-nums span{font-size:11.5px;color:var(--muted)}
.br-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.br-actions form{margin:0}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none!important;box-shadow:none!important}
.icon-btn.soft:hover{color:var(--ink);background:var(--surface-2);box-shadow:none}
@media (max-width:900px){.biz-row{grid-template-columns:1fr;gap:14px}.br-actions{justify-content:flex-start}}

dialog.glass-dialog.soft .gd-ico{background:linear-gradient(180deg,#52b0ff,#0a84ff);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 8px 22px rgba(10,132,255,.45)}
dialog.glass-dialog.soft .danger-fill{background:linear-gradient(180deg,#52b0ff,#0a84ff);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 8px 20px rgba(10,132,255,.38)}