/* Add-site form, slide-over / iOS sheet, Settings page — Apple-style (system font, inset grouped, segmented, toggles) */
:root{--spring:cubic-bezier(.32,.72,0,1);--spring-b:cubic-bezier(.34,1.56,.64,1);--group:#fff;--group-line:rgba(60,60,67,.18);--fill:rgba(118,118,128,.12);--label2:rgba(60,60,67,.6);--sys-bg:#f2f2f7}
:root[data-theme=dark]{--group:#1c1c1e;--group-line:rgba(84,84,88,.6);--fill:rgba(118,118,128,.24);--label2:rgba(235,235,245,.6);--sys-bg:#000}
.site-form,.settings-page{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",system-ui,sans-serif;letter-spacing:-.01em}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- sheet header: Cancel · Title · Done ---- */
.sheet-h{position:sticky;top:0;z-index:5;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:52px;margin:-4px -4px 6px;padding:4px;background:inherit;border-bottom:.5px solid var(--group-line)}
.sheet-h h2{margin:0;font-size:17px;font-weight:600;text-align:center}
.hbtn{justify-self:start;min-height:44px;min-width:44px;padding:0 10px;border:0;background:none;color:var(--accent);font:inherit;font-size:17px;cursor:pointer;border-radius:10px}
.hbtn.done{justify-self:end;font-weight:600}
.hbtn:active{opacity:.4}
.grab{display:none}

/* ---- inset grouped sections ---- */
.site-form{display:flex;flex-direction:column;gap:6px}
.site-form fieldset.group{border:0;margin:0 0 14px;padding:0}
.site-form legend{padding:0 16px 6px;font-size:13px;text-transform:uppercase;letter-spacing:.02em;color:var(--label2)}
.site-form legend .muted{text-transform:none;letter-spacing:0;display:block;margin-top:2px;font-size:12px}
.site-form fieldset.group>*:not(legend){background:var(--group);margin:0}
.site-form fieldset.group>:nth-child(2){border-radius:12px 12px 0 0;padding-top:4px}
.site-form fieldset.group>:last-child{border-radius:0 0 12px 12px;padding-bottom:6px}
.site-form .field{display:flex;flex-direction:column;gap:2px;padding:8px 16px;border-bottom:.5px solid var(--group-line);min-width:0}
.site-form .row2,.site-form .row3{display:grid;grid-template-columns:1fr 1fr;gap:0}
.site-form .row3{grid-template-columns:1fr 1fr 1.2fr}
.site-form .row2>.field+.field,.site-form .row3>.field+.field{border-left:.5px solid var(--group-line)}
.site-form label{font-size:12px;color:var(--label2)}
.site-form input:not([type=checkbox]),.site-form select{font:inherit;font-size:17px;color:var(--fg);background:transparent;border:0;outline:0;padding:6px 0;min-height:32px;width:100%;border-radius:6px;-webkit-appearance:none;appearance:none}
.site-form select{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'%3E%3Cpath d='M3 6l3-3 3 3M3 10l3 3 3-3' fill='none' stroke='%238e8e93' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") right 2px center/10px 14px no-repeat;padding-right:18px;cursor:pointer}
.site-form select option{color:#000}
.site-form input:focus-visible,.site-form select:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 35%,transparent)}
.site-form [aria-invalid=true]{color:var(--down)}
.site-form .field:has([aria-invalid=true]) label{color:var(--down)}
.site-form .err{font-size:12px;color:var(--down);padding:0 16px;min-height:0;transition:opacity .2s}
.site-form .err:empty{display:none}
.site-form .field .err{padding:2px 0 0}
.site-form .hint{font-size:12px;color:var(--label2);padding:6px 16px 8px}

/* ---- Apple Maps-style search ---- */
.site-form .geo{padding:10px 12px 0;border:0}
.combo{position:relative}
.combo .mag{position:absolute;left:10px;top:50%;width:17px;height:17px;transform:translateY(-50%);color:var(--label2);pointer-events:none}
.site-form #geoQ{background:var(--fill);border-radius:10px;padding:0 12px 0 34px;min-height:40px;font-size:17px}
#geoList{list-style:none;margin:8px 0 0;padding:6px;position:absolute;left:0;right:0;z-index:1200;background:var(--group);border-radius:14px;box-shadow:0 10px 40px rgba(0,0,0,.25),0 0 0 .5px var(--group-line);max-height:320px;overflow:auto;animation:popIn .28s var(--spring)}
#geoList li{display:flex;gap:12px;align-items:center;min-height:52px;padding:6px 10px;border-radius:10px;cursor:pointer}
#geoList li+li{box-shadow:inset 0 .5px 0 var(--group-line)}
#geoList li.act,#geoList li:active{background:var(--fill)}
@media (hover:hover){#geoList li:hover{background:var(--fill)}}
.rc-ic{flex:none;width:32px;height:32px;border-radius:50%;background:#ff3b30;color:#ff3b30;display:grid;place-items:center}
.rc-ic svg{width:18px;height:18px;color:#fff}.rc-ic svg circle{fill:#ff3b30}
.rc-t{display:flex;flex-direction:column;min-width:0}.rc-t b{font-weight:600;font-size:15px}.rc-t span{font-size:13px;color:var(--label2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@keyframes popIn{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}

#miniMap{height:230px;margin:10px 12px!important;border-radius:12px;overflow:hidden;background:var(--fill)!important;z-index:0;-webkit-touch-callout:none}
.apin{background:none;border:0}
.apin svg{width:30px;height:40px;filter:drop-shadow(0 3px 4px rgba(0,0,0,.35));transform-origin:50% 100%;transition:transform .25s var(--spring-b)}
.apin .shadow{position:absolute;left:9px;bottom:-1px;width:12px;height:4px;border-radius:50%;background:rgba(0,0,0,.35);transition:transform .25s}
.apin.drop svg{animation:pinDrop .55s var(--spring-b)}
.apin.drop .shadow{animation:pinShadow .55s ease-out}
.apin.lift svg{transform:translateY(-12px) scale(1.08)}.apin.lift .shadow{transform:scale(1.5);opacity:.6}
@keyframes pinDrop{0%{transform:translateY(-60px);opacity:0}55%{transform:translateY(0);opacity:1}72%{transform:scaleY(.85)}100%{transform:none}}
@keyframes pinShadow{0%{transform:scale(.3);opacity:0}100%{transform:none;opacity:1}}

/* ---- segmented control ---- */
.seg-src{position:absolute!important;opacity:0;pointer-events:none;width:1px!important;height:1px}
.seg{--i:0;--n:2;position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--fill);border-radius:9px;padding:2px;margin:4px 0;min-height:36px}
.seg-thumb{position:absolute;top:2px;bottom:2px;left:2px;width:calc((100% - 4px)/var(--n));transform:translateX(calc(100% * var(--i)));background:var(--panel-solid);border-radius:7px;box-shadow:0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04);transition:transform .35s var(--spring)}
:root[data-theme=dark] .seg-thumb{background:#636366}
.seg button{position:relative;z-index:1;border:0;background:none;color:var(--fg);font:inherit;font-size:13px;font-weight:500;min-height:40px;cursor:pointer;border-radius:7px;padding:0 6px}
.seg button[aria-checked=true]{font-weight:600}
.seg button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.seg.single button{cursor:default}

/* ---- iOS toggle ---- */
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;font-size:15px}
.ios-toggle{position:relative;display:inline-block;width:51px;height:31px;flex:none;cursor:pointer}
.ios-toggle input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:1}
.ios-toggle i{position:absolute;inset:0;border-radius:16px;background:var(--fill);transition:background .25s}
.ios-toggle i::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 3px 8px rgba(0,0,0,.15),0 3px 1px rgba(0,0,0,.06);transition:transform .3s var(--spring)}
.ios-toggle input:checked+i{background:#34c759}
.ios-toggle input:checked+i::after{transform:translateX(20px)}
.ios-toggle input:focus-visible+i{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 45%,transparent)}

/* ---- uplink cards ---- */
.uplinks{display:grid;grid-template-columns:1fr 1fr;gap:12px;background:none!important;padding:0!important}
.ul-card{background:var(--group);border-radius:12px;overflow:hidden}
.ul-card h3{margin:0;padding:12px 16px 4px;font-size:15px;font-weight:600;display:flex;align-items:center;gap:8px}
.ulb{font-style:normal;width:22px;height:22px;border-radius:6px;display:grid;place-items:center;font-size:12px;font-weight:700;color:#fff;background:var(--accent)}.ulb.s{background:#af52de}

/* ---- buttons, messages ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 18px;border-radius:12px;border:0;background:var(--fill);color:var(--accent);font:inherit;font-size:15px;font-weight:600;cursor:pointer;transition:transform .2s var(--spring),opacity .2s;-webkit-tap-highlight-color:transparent}
.btn:active{transform:scale(.96);opacity:.8}
.btn.primary{background:var(--accent);color:#fff}
.btn.danger{color:var(--down)}.btn.primary.danger,.btn.danger[value=ok]{background:var(--down);color:#fff}
.btn.ghost{background:none}
.btn.sm{min-height:44px;padding:0 14px;font-size:14px}
.btn:focus-visible,.hbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.form-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:4px}
.form-msg{margin-right:auto;font-size:14px}.form-msg.good{color:var(--up)}.form-msg.bad{color:var(--down)}
.site-form.shake{animation:shake .4s}
@keyframes shake{20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.saved-hud{position:fixed;left:50%;top:50%;z-index:5000;transform:translate(-50%,-50%);width:150px;height:150px;border-radius:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:rgba(120,120,128,.32);backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);color:var(--fg);font-size:17px;animation:hud 1.3s var(--spring) forwards;pointer-events:none}
.saved-hud svg{width:56px;height:56px}.saved-hud path{stroke-dasharray:40;stroke-dashoffset:40;animation:tick .45s .1s ease-out forwards}
@keyframes hud{0%{opacity:0;transform:translate(-50%,-50%) scale(.8)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.03)}25%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(.96)}}
@keyframes tick{to{stroke-dashoffset:0}}

/* ---- dashboard: + Add site, context popover, slide-over (desktop) / sheet (phone) ---- */
.ctx-pop .leaflet-popup-content-wrapper{border-radius:14px;padding:0;background:var(--panel-solid);box-shadow:0 10px 30px rgba(0,0,0,.3)}
.ctx-pop .leaflet-popup-content{margin:4px}.ctx-pop .leaflet-popup-tip{background:var(--panel-solid)}
.ctx-add{min-height:44px;padding:0 16px;border:0;background:none;color:var(--accent);font:inherit;font-size:15px;font-weight:600;cursor:pointer;border-radius:10px}
.ctx-add:hover,.ctx-add:focus-visible{background:var(--fill);outline:0}
.leaflet-container{-webkit-touch-callout:none}
.slide-scrim{position:fixed;inset:0;z-index:2990;background:rgba(0,0,0,.28);opacity:0;transition:opacity .3s}
body.adding .slide-scrim{opacity:1}
.slide-over{position:fixed;z-index:3000;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));width:min(560px,calc(100vw - 24px));overflow:auto;overscroll-behavior:contain;padding:4px 14px 18px;border-radius:20px;background:var(--sys-bg)!important;transform:translateX(calc(100% + 24px));transition:transform .45s var(--spring);-webkit-overflow-scrolling:touch}
body.adding .slide-over{transform:none}
.slide-over .sheet-h{background:var(--sys-bg)}
.so-top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 2px 0}
.so-top .close{min-width:44px;min-height:44px}
.slide-over .sheet-h .hbtn{font-size:17px}
@media (max-width:700px){
  .slide-over{top:auto;left:0;right:0;bottom:0;width:auto;max-height:calc(100% - max(44px,env(safe-area-inset-top)));border-radius:14px 14px 0 0;padding:0 12px calc(18px + env(safe-area-inset-bottom));transform:translateY(105%)}
  .slide-over .grab{display:block;position:absolute;top:6px;left:50%;width:36px;height:5px;margin-left:-18px;border-radius:3px;background:var(--group-line)}
  .slide-over .so-top{order:2}
  .site-form .row3{grid-template-columns:1fr 1fr}.site-form .row3>.field:last-child{grid-column:span 2;border-left:0}
  .uplinks{grid-template-columns:1fr}
}

/* ---- Settings page ---- */
.settings-page{padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));background:var(--sys-bg)}
.settings-page .topbar{margin-bottom:12px}
.settings-page .brand{display:flex!important;align-items:center;gap:10px}
.settings-page .icon-btn{width:44px;height:44px;border-radius:12px}
.link-btn{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;color:var(--accent);text-decoration:none;font-weight:600;border-radius:10px}
.note{padding:12px 16px;margin-bottom:12px;font-size:14px;line-height:1.45;border-left:4px solid var(--degraded)}
.note code{font-size:12px;background:var(--fill);padding:1px 4px;border-radius:4px}
.set-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);gap:14px;align-items:start}
.card{padding:6px 14px 16px}
#formHost{background:var(--sys-bg)}
#formHost .sheet-h{background:var(--sys-bg)}
#manage{position:sticky;top:12px}
.io{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0}
.io label.small{display:flex;align-items:center;gap:8px;min-height:44px}
.custom-list{list-style:none;margin:8px 0 0;padding:0;background:var(--group);border-radius:12px;overflow:hidden}
.custom-list li{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-bottom:.5px solid var(--group-line)}
.custom-list li:last-child{border-bottom:0}
.custom-list li.empty{color:var(--label2);font-size:14px}
.custom-list .ci{display:flex;flex-direction:column;gap:2px;font-size:13px;min-width:0}.ci b{font-size:15px}
.custom-list .ca{display:flex;gap:6px;flex-wrap:wrap}
dialog#confirmDlg{border:0;border-radius:14px;max-width:320px;padding:18px;color:var(--fg);background:var(--panel-solid);text-align:center}
dialog#confirmDlg::backdrop{background:rgba(0,0,0,.35)}
dialog#confirmDlg[open]{animation:popIn .3s var(--spring)}
dialog#confirmDlg .form-actions{justify-content:stretch}dialog#confirmDlg .btn{flex:1}
@media (max-width:900px){.set-layout{grid-template-columns:1fr}#manage{position:static}.settings-page .topbar .brand{display:flex!important}}
@media (prefers-reduced-motion:reduce){
  .slide-over,.slide-scrim,.seg-thumb,.ios-toggle i::after,.btn,.apin svg{transition:none!important}
  .apin.drop svg,.apin.drop .shadow,#geoList,.saved-hud,.saved-hud path,.site-form.shake,dialog#confirmDlg[open]{animation:none!important}
  .saved-hud path{stroke-dashoffset:0}
}
#useHub{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;color:var(--accent);font-size:inherit}
.site-form .toggle-row{flex-wrap:wrap}
.site-form [hidden]{display:none!important}
#addSiteBtn{color:var(--muted)}#addSiteBtn:hover,#addSiteBtn:focus-visible{color:var(--accent)}