:root{
  /* Layout: full-bleed panorama stage; chrome floats on dark glass; admin docks as a side panel (bottom sheet on phones). Single dark look by choice so overlays read on any photo. */
  --ink:#0c1014;
  --glass:rgba(12,16,20,.74);
  --glass-strong:rgba(17,22,28,.95);
  --panel:#11161c;
  --panel-2:#18202a;
  --field:#0b0f13;
  --line:rgba(205,219,233,.12);
  --line-strong:rgba(205,219,233,.24);
  --fg:#e8edf2;
  --muted:#98a6b5;
  --faint:#6a7785;
  --marker:#f0b43c;
  --marker-ink:#1d1405;
  --marker-soft:rgba(240,180,60,.26);
  --route:#6acfe3;
  --route-ink:#05232b;
  --route-soft:rgba(106,207,227,.26);
  --danger:#ef6e5e;
  --ok:#72c594;
  --f-display:'Barlow Condensed','Arial Narrow',system-ui,sans-serif;
  --f-body:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  --gl:max(16px,env(safe-area-inset-left,0px));
  --gr:max(16px,env(safe-area-inset-right,0px));
  --k-d:1;--k-m:1;
  color-scheme:dark;
}
html,body{height:100%;background:var(--ink);color:var(--fg)}
body{font-family:var(--f-body);font-size:14px;line-height:1.45;overflow:hidden;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--route);outline-offset:2px}
#app{position:fixed;inset:0;display:flex}
#stage{position:relative;flex:1;min-width:0;min-height:0;overflow:hidden;background:var(--ink)}
#pano{position:absolute;inset:0}
#pano .pnlm-container{background:var(--ink)}
#pano .pnlm-load-box{background:var(--glass-strong);border-radius:12px;font-family:var(--f-body)}
.is-placing #pano,.is-placing #pano .pnlm-grab,.is-placing #pano .pnlm-grabbing,.is-placing #pano .pnlm-dragfix{cursor:crosshair!important}

/* ---------- top bar ---------- */
#top{position:absolute;left:0;right:0;top:0;z-index:6;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
  padding:calc(12px + env(safe-area-inset-top,0px)) var(--gr) 36px var(--gl);
  background:linear-gradient(to bottom,rgba(6,9,12,.82),rgba(6,9,12,.35) 60%,transparent);pointer-events:none}
#top>*{pointer-events:auto}
.brand{min-width:0;display:flex;flex-direction:column;gap:2px}
.brand h1{margin:0;font-family:var(--f-display);font-weight:700;font-size:clamp(20px,3.2vw,30px);line-height:1.02;letter-spacing:.015em;text-transform:uppercase;text-wrap:balance;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.brand .sub{display:flex;align-items:baseline;gap:10px;min-width:0;color:var(--fg);font-size:14px}
.brand .idx{font-family:var(--f-mono);font-size:12px;color:var(--marker);font-variant-numeric:tabular-nums;flex:none}
.brand .scn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand .tag{font-size:12.5px;color:var(--muted)}
.tools{display:flex;align-items:center;gap:8px;flex:none}
.seg{display:flex;background:var(--glass);border:1px solid var(--line);border-radius:999px;padding:3px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.seg button{border:0;background:transparent;padding:5px 10px;border-radius:999px;font-size:12.5px;font-weight:600;color:var(--muted);letter-spacing:.02em}
.seg button[aria-pressed="true"]{background:var(--fg);color:var(--ink)}
.icon-btn{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:999px;border:1px solid var(--line);background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--fg);padding:0}
.icon-btn:hover{border-color:var(--line-strong)}
.icon-btn[aria-pressed="true"]{background:var(--marker);color:var(--marker-ink);border-color:transparent}
.lang-wrap{position:relative;display:none}
.lang-compact{font-size:12.5px;font-weight:600;letter-spacing:.02em}
.lang-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:190px;background:var(--glass-strong);border:1px solid var(--line-strong);border-radius:12px;padding:6px;box-shadow:0 14px 40px rgba(0,0,0,.5);display:flex;flex-direction:column;z-index:20}
.lang-menu button{display:flex;align-items:center;gap:12px;border:0;background:transparent;padding:11px 10px;border-radius:8px;text-align:left;font-size:14px}
.lang-menu button b{font-family:var(--f-mono);font-size:12px;font-weight:500;color:var(--muted);width:30px}
.lang-menu button[aria-checked="true"]{background:var(--panel-2)}
.lang-menu button[aria-checked="true"] b{color:var(--marker)}

/* ---------- compass ---------- */
#compass{position:absolute;z-index:6;right:var(--gr);top:calc(74px + env(safe-area-inset-top,0px));width:76px;display:flex;flex-direction:column;align-items:center;gap:4px;border:0;background:transparent;padding:0}
#compass svg{width:76px;height:76px;filter:drop-shadow(0 2px 8px rgba(0,0,0,.45))}
#compass .read{font-family:var(--f-mono);font-size:11.5px;background:var(--glass);border:1px solid var(--line);border-radius:999px;padding:2px 8px;font-variant-numeric:tabular-nums;white-space:nowrap}
#compass .dial-bg{fill:var(--glass-strong);stroke:var(--line-strong)}
#compass .tick{stroke:var(--faint);stroke-width:1}
#compass .tick.major{stroke:var(--muted);stroke-width:1.6}
#compass .lbl{font-family:var(--f-display);font-weight:700;font-size:11px;fill:var(--muted);text-anchor:middle;dominant-baseline:central}
#compass .lbl.n{fill:var(--marker);font-size:13px}
#compass .index{fill:var(--fg)}

/* ---------- banners ---------- */
.float-note{position:absolute;z-index:7;left:50%;transform:translateX(-50%);top:calc(86px + env(safe-area-inset-top,0px));display:flex;align-items:center;gap:12px;width:max-content;max-width:calc(100% - 32px);
  background:var(--glass-strong);border:1px solid var(--line-strong);border-radius:12px;padding:9px 10px 9px 14px;font-size:13.5px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.float-note .dot{width:8px;height:8px;border-radius:50%;background:var(--marker);flex:none}
.float-note.route .dot{background:var(--route)}
#demo-note{top:auto;bottom:calc(24px + env(safe-area-inset-bottom,0px))}

/* ---------- scene strip ---------- */
#strip{position:absolute;z-index:5;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;pointer-events:none;
  padding:0 var(--gr) calc(12px + env(safe-area-inset-bottom,0px)) var(--gl)}
#strip::before{content:"";position:absolute;inset:auto 0 0 0;height:190px;background:linear-gradient(to top,rgba(6,9,12,.85),rgba(6,9,12,.35) 60%,transparent);opacity:0;transition:opacity .25s;pointer-events:none}
#strip.open::before{opacity:1}
.strip-handle{position:relative;pointer-events:auto;display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-strong);background:var(--glass-strong);color:var(--fg);
  border-radius:999px;padding:7px 12px 7px 14px;font-size:12.5px;font-weight:500;letter-spacing:.02em;box-shadow:0 6px 20px rgba(0,0,0,.35);white-space:pre;font-variant-numeric:tabular-nums}
.strip-handle .chev{display:grid;place-items:center;color:var(--muted)}
#strip.pinned .strip-handle{border-color:var(--marker)}
#strip .row-wrap{position:relative;width:100%;display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s ease,opacity .2s;opacity:0}
#strip.open .row-wrap{grid-template-rows:1fr;opacity:1}
#strip .row{min-height:0;overflow:hidden;display:flex;gap:10px;justify-content:safe center;pointer-events:none}
#strip.open .row{overflow-x:auto;overflow-y:hidden;pointer-events:auto;padding:10px 2px 2px;scroll-snap-type:x proximity;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.thumb{flex:none;width:156px;scroll-snap-align:center;border:0;background:transparent;padding:0;text-align:left;display:flex;flex-direction:column;gap:6px}
.thumb .img{display:block;width:100%;aspect-ratio:2/1;border-radius:8px;overflow:hidden;background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--line-strong);transition:transform .15s}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb .t{font-size:12.5px;line-height:1.25;color:var(--muted);display:flex;gap:6px;min-width:0}
.thumb .t b{font-family:var(--f-mono);font-weight:500;color:var(--faint);font-size:11px;flex:none;padding-top:1px}
.thumb .t span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thumb[aria-current="true"] .img{box-shadow:0 0 0 2px var(--marker)}
.thumb[aria-current="true"] .t{color:var(--fg)}
.fine .thumb:hover .img{transform:translateY(-2px)}
.fine .thumb:hover .t{color:var(--fg)}

/* ---------- minimap ---------- */
#minimap{position:absolute;z-index:6;left:var(--gl);bottom:calc(16px + env(safe-area-inset-bottom,0px));width:224px;max-width:calc(100% - 32px);background:var(--glass-strong);border:1px solid var(--line-strong);border-radius:12px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.35);transition:bottom .28s ease}
#minimap.with-handle{bottom:calc(60px + env(safe-area-inset-bottom,0px))}
#minimap.with-strip{bottom:calc(168px + env(safe-area-inset-bottom,0px))}
#minimap.large{width:min(420px,calc(100% - 32px))}
#minimap .mm-head{display:flex;align-items:center;justify-content:space-between;padding:4px 4px 4px 12px;font-family:var(--f-display);font-weight:600;font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
#minimap .mm-tools{display:flex}
#minimap .mm-head button{width:32px;height:32px;border-radius:8px;border:0;background:transparent;color:var(--muted);display:grid;place-items:center}
#minimap .mm-head button:hover{background:var(--panel-2);color:var(--fg)}
#minimap .mm-body{position:relative;margin:0 6px 6px;border-radius:8px;overflow:hidden;background:var(--field);max-height:60vh}
#minimap .mm-body img{display:block;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}
#minimap.collapsed{width:auto}
#minimap.collapsed .mm-body{display:none}
#minimap.placing .mm-body{cursor:crosshair;box-shadow:inset 0 0 0 2px var(--route)}
#minimap.placing .pin{pointer-events:none}
.pin{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;border:0;padding:0;background:transparent;display:grid;place-items:center}
.pin i{display:block;width:10px;height:10px;border-radius:50%;background:var(--fg);box-shadow:0 0 0 2px var(--ink);position:relative;z-index:2}
.pin.active i{background:var(--marker);width:12px;height:12px}
.pin .cone{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;pointer-events:none;z-index:1}
.pin .cone path{fill:var(--marker-soft);stroke:var(--marker);stroke-width:1}

/* ---------- info card ---------- */
#card{position:absolute;z-index:9;right:var(--gr);top:calc(170px + env(safe-area-inset-top,0px));width:min(360px,calc(100% - 32px));max-height:calc(100% - 300px);min-height:120px;overflow:auto;
  background:var(--glass-strong);border:1px solid var(--line-strong);border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.5)}
#card .c-grab{display:none}
#card .c-img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--panel-2)}
#card .c-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px}
#card .c-eyebrow{font-family:var(--f-display);font-weight:600;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--marker)}
#card h2{margin:0;padding-right:36px;font-family:var(--f-display);font-weight:700;font-size:24px;line-height:1.1;text-wrap:balance}
#card p{margin:0;white-space:pre-line;color:#cdd6de;max-width:62ch;font-size:14.5px;line-height:1.55}
#card .c-close{position:absolute;right:8px;top:8px;z-index:2}
#card .c-link{align-self:flex-start;margin-top:4px}
#card .c-url{font-family:var(--f-mono);font-size:11.5px;color:var(--faint);word-break:break-all;user-select:all}

/* ---------- hotspot markers (inside pannellum) ---------- */
.hs{--k:var(--k-d);--sz:calc(var(--s,36px) * var(--k));width:var(--sz);height:var(--sz);cursor:pointer}
.hs .hs-dot{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;transition:transform .15s ease;
  background:var(--c);color:var(--ci);box-shadow:0 0 0 calc(var(--sz) * .13) var(--cs),0 3px 12px rgba(0,0,0,.5)}
.hs .hs-dot svg{width:56%;height:56%;transform:rotate(var(--rot,0deg))}
.hs .hs-dot.txt{font-family:var(--f-display);font-weight:700;font-size:calc(var(--sz) * .46);line-height:1;letter-spacing:.01em}
.hs.sh-ring .hs-dot{background:rgba(10,14,18,.55);color:var(--c);border:max(2px,calc(var(--sz) * .08)) solid var(--c);box-shadow:0 3px 12px rgba(0,0,0,.45);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.hs.sh-dot .hs-dot{inset:30%;box-shadow:0 0 0 calc(var(--sz) * .14) var(--cs),0 0 0 2px rgba(0,0,0,.35),0 2px 8px rgba(0,0,0,.5)}
.fine .hs:hover .hs-dot{transform:scale(1.12)}
.hs.pulse .hs-dot::after{content:"";position:absolute;inset:-12%;border-radius:50%;border:2px solid var(--c);opacity:0;animation:ping 2.6s ease-out infinite;pointer-events:none}
@keyframes ping{0%{transform:scale(.9);opacity:.7}70%,100%{transform:scale(1.7);opacity:0}}
.hs .hs-label{position:absolute;top:calc(100% + 9px);left:50%;transform:translateX(-50%);white-space:nowrap;max-width:240px;overflow:hidden;text-overflow:ellipsis;
  padding:4px 10px;border-radius:999px;background:var(--glass-strong);border:1px solid var(--line);color:var(--fg);font-family:var(--f-body);font-size:12.5px;font-weight:500;line-height:1.3;
  opacity:0;pointer-events:none;transition:opacity .15s}
.hs.lb-top .hs-label{top:auto;bottom:calc(100% + 9px)}
.hs .hs-label:empty{display:none}
.hs.lb-always .hs-label,.hs.is-sel .hs-label{opacity:1}
.fine .hs.lb-auto:hover .hs-label,.fine .hs.lb-hover:hover .hs-label,.fine .hs:focus-visible .hs-label{opacity:1}
.coarse .hs.lb-auto.t-scene .hs-label{opacity:1}
.hs.lb-none .hs-label{display:none}
.hs.is-sel .hs-dot{outline:2px dashed var(--fg);outline-offset:6px}
.coarse .hs::before{content:"";position:absolute;inset:min(0px,calc((44px - var(--sz)) / -2));border-radius:50%}
.hs-north{width:32px;height:32px;pointer-events:none}
.hs-north .hs-dot{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;background:rgba(12,16,20,.55);border:2px solid var(--marker);color:var(--marker);font-family:var(--f-display);font-weight:700;font-size:15px}
@media (prefers-reduced-motion:reduce){.hs.pulse .hs-dot::after{animation:none}.hs .hs-dot{transition:none}#strip .row-wrap,#minimap{transition:none}}

/* ---------- admin panel ---------- */
#admin{width:400px;flex:none;display:flex;flex-direction:column;min-height:0;background:var(--panel);border-left:1px solid var(--line)}
.adm-head{display:flex;align-items:center;gap:8px;padding:calc(12px + env(safe-area-inset-top,0px)) var(--gr) 12px 16px;border-bottom:1px solid var(--line)}
.adm-head h2{margin:0;font-family:var(--f-display);font-weight:700;font-size:20px;letter-spacing:.04em;text-transform:uppercase;flex:1;min-width:0;white-space:nowrap}
.adm-head .icon-btn{width:34px;height:34px;background:var(--panel-2)}
.only-coarse-narrow{display:none!important}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:500;padding:3px 9px;border-radius:999px;border:1px solid var(--line-strong);color:var(--muted);white-space:nowrap}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok)}
.pill.dirty{color:var(--fg)}
.pill.dirty::before{background:var(--marker)}
.adm-tabs{display:flex;gap:4px;padding:8px 16px;border-bottom:1px solid var(--line)}
.adm-tabs button{flex:1;border:0;background:transparent;padding:9px 6px;border-radius:8px;color:var(--muted);font-weight:500;font-size:13.5px}
.adm-tabs button[aria-selected="true"]{background:var(--panel-2);color:var(--fg)}
.adm-body{flex:1;min-height:0;overflow:auto;padding:16px var(--gr) 28px 16px;display:flex;flex-direction:column;gap:22px;overscroll-behavior:contain}
.adm-foot{border-top:1px solid var(--line);padding:10px var(--gr) calc(10px + env(safe-area-inset-bottom,0px)) 16px;display:flex;gap:8px;align-items:center}
.adm-foot .msg{flex:1;font-size:12.5px;color:var(--muted);min-width:0}
.sect{display:flex;flex-direction:column;gap:10px}
.sect>h3{margin:0;font-family:var(--f-display);font-weight:600;font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between;align-items:center;gap:8px}
.sect>h3 .btn{text-transform:none;letter-spacing:0;font-family:var(--f-body)}
.hint{margin:0;font-size:12.5px;color:var(--faint);line-height:1.45}
.mono{font-family:var(--f-mono);font-size:12px;font-variant-numeric:tabular-nums;color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line-strong);background:var(--panel-2);color:var(--fg);border-radius:9px;padding:8px 12px;font-size:13px;font-weight:500;white-space:nowrap;text-decoration:none}
.btn:hover:not(:disabled){border-color:var(--muted)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.primary{background:var(--marker);color:var(--marker-ink);border-color:transparent;font-weight:600}
.btn.route{background:var(--route);color:var(--route-ink);border-color:transparent;font-weight:600}
.btn.danger{color:var(--danger)}
.btn.danger-solid{background:var(--danger);color:#1c0805;border-color:transparent;font-weight:600}
.btn.small{padding:5px 9px;font-size:12.5px;border-radius:8px}
.btn.icon{padding:6px;width:32px;height:32px}
.btn-row{display:flex;flex-wrap:wrap;gap:8px}
.btn-row .btn{flex:1 1 auto}
.field{display:flex;flex-direction:column;gap:6px}
.field>label,.field>.lab,.lab-row .lab{font-size:12.5px;color:var(--muted);font-weight:500}
.lab-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
input[type=text],input[type=url],input[type=number],input[type=password],textarea,select{width:100%;box-sizing:border-box;background:var(--field);border:1px solid var(--line-strong);border-radius:8px;padding:8px 10px;font-size:13.5px;color:var(--fg);min-width:0}
input[type=range]{width:100%;accent-color:var(--marker)}
textarea{resize:vertical;min-height:62px;line-height:1.45}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--route);box-shadow:0 0 0 3px var(--route-soft)}
.i18n{display:grid;grid-template-columns:40px 1fr;gap:6px 8px;align-items:start}
.i18n .code{font-family:var(--f-mono);font-size:11px;color:var(--faint);padding-top:10px;letter-spacing:.04em}
.scene-list{display:flex;flex-direction:column;gap:6px}
.srow{display:grid;grid-template-columns:72px 1fr auto;gap:10px;align-items:center;padding:6px;border-radius:10px;border:1px solid transparent}
.srow.cur{background:var(--panel-2);border-color:var(--line-strong)}
.srow .sthumb{width:72px;aspect-ratio:2/1;border-radius:6px;overflow:hidden;border:0;padding:0;background:var(--field)}
.srow .sthumb img{width:100%;height:100%;object-fit:cover;display:block}
.srow .sname{min-width:0;display:flex;flex-direction:column;gap:2px;border:0;background:transparent;padding:0;text-align:left}
.srow .sname span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.srow .sname small{font-size:11.5px;color:var(--faint);display:flex;gap:8px;flex-wrap:wrap}
.srow .sname small .start{color:var(--marker)}
.srow .acts{display:flex;gap:4px}
.confirm{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px;border-radius:10px;border:1px solid rgba(239,110,94,.45);background:rgba(239,110,94,.08);font-size:13px}
.confirm span{flex:1 1 160px}
.hs-list{display:flex;flex-direction:column;gap:4px}
.hrow{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:9px;border:1px solid transparent;background:transparent;text-align:left;width:100%}
.hrow:hover{background:var(--panel-2)}
.hrow.sel{background:var(--panel-2);border-color:var(--line-strong)}
.hrow .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hrow .ty{font-size:11.5px;color:var(--faint)}
.sw{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--c);color:var(--ci);font-family:var(--f-display);font-weight:700;font-size:12px;position:relative}
.sw svg{width:15px;height:15px}
.sw.sh-ring{background:transparent;color:var(--c);box-shadow:inset 0 0 0 2px var(--c)}
.sw.sh-dot{background:transparent}
.sw.sh-dot::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--c)}
.types{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.types button{border:1px solid var(--line-strong);background:var(--field);border-radius:9px;padding:9px 6px;font-size:12.5px;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:6px}
.types button[aria-pressed="true"]{border-color:var(--marker);color:var(--fg);background:var(--panel-2)}
.editor{display:flex;flex-direction:column;gap:14px;padding:14px;border:1px solid var(--line-strong);border-radius:12px;background:rgba(255,255,255,.015)}
.style-ed{display:flex;flex-direction:column;gap:14px;padding:14px;border:1px solid var(--line);border-radius:12px}
.swatches{display:flex;flex-wrap:wrap;gap:8px}
.swc{width:30px;height:30px;border-radius:50%;border:0;padding:0;background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);position:relative;display:grid;place-items:center;overflow:hidden}
.swc[aria-pressed="true"]{box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--fg)}
.swc.custom{background:conic-gradient(#ef6e5e,#f0b43c,#72c594,#6acfe3,#4f8dfd,#b48cff,#ef6e5e);cursor:pointer}
.swc.custom input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;border:0;padding:0}
.seg-adm{display:flex;flex-wrap:wrap;gap:4px;background:var(--field);border:1px solid var(--line-strong);border-radius:10px;padding:3px}
.seg-adm button{flex:1 1 auto;border:0;background:transparent;border-radius:7px;padding:7px 8px;font-size:12.5px;color:var(--muted);white-space:nowrap}
.seg-adm button[aria-pressed="true"]{background:var(--panel-2);color:var(--fg);box-shadow:inset 0 0 0 1px var(--line-strong)}
.icon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:6px}
.icon-grid button{aspect-ratio:1;border:1px solid var(--line-strong);background:var(--field);border-radius:9px;display:grid;place-items:center;color:var(--muted);padding:0;font-family:var(--f-display);font-size:14px}
.icon-grid button svg{width:20px;height:20px}
.icon-grid button[aria-pressed="true"]{border-color:var(--marker);color:var(--fg);background:var(--panel-2)}
.img-prev{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.img-prev img{width:96px;aspect-ratio:16/10;object-fit:cover;border-radius:6px;background:var(--field)}
.map-prev{border-radius:8px;border:1px solid var(--line-strong);max-height:180px;object-fit:contain;background:var(--field)}
.switch{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13.5px;padding:2px 0}
.switch input{width:20px;height:20px;accent-color:var(--marker);flex:none}
.meter{height:6px;border-radius:999px;background:var(--field);overflow:hidden}
.meter i{display:block;height:100%;background:var(--route)}
.empty-adm{padding:18px;border:1px dashed var(--line-strong);border-radius:12px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.empty-adm strong{font-family:var(--f-display);font-size:18px;letter-spacing:.03em}
.busy{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--fg)}
.spin{width:14px;height:14px;border-radius:50%;border:2px solid var(--line-strong);border-top-color:var(--route);animation:spin .8s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- login ---------- */
#login{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:16px var(--gr) 16px var(--gl)}
#login .login-back{position:absolute;inset:0;background:rgba(4,6,8,.62);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
#login .login-card{position:relative;width:min(380px,100%);background:var(--panel);border:1px solid var(--line-strong);border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:14px;box-shadow:0 24px 60px rgba(0,0,0,.55)}
#login h2{margin:0;font-family:var(--f-display);font-weight:700;font-size:26px;letter-spacing:.03em;text-transform:uppercase}
#login .login-err{margin:0;color:var(--danger);font-size:13px}

#toast{position:fixed;z-index:80;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%) translateY(10px);opacity:0;pointer-events:none;
  width:max-content;max-width:calc(100% - 32px);background:var(--fg);color:var(--ink);font-weight:500;font-size:13.5px;border-radius:10px;padding:9px 14px;transition:opacity .2s,transform .2s;box-shadow:0 10px 30px rgba(0,0,0,.4)}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#toast.err{background:var(--danger);color:#1c0805}

/* ---------- touch devices: larger targets ---------- */
.coarse .hs{--k:var(--k-m)}
.coarse .seg button{padding:7px 11px}
.coarse .btn{padding:10px 13px}
.coarse .btn.small{padding:8px 11px}
.coarse .btn.icon{width:38px;height:38px}

/* ---------- tablet & phone ---------- */
@media (max-width:760px){
  .hs{--k:var(--k-m)}
  #app{flex-direction:column}
  #admin{width:auto;height:56%;border-left:0;border-top:1px solid var(--line);transition:height .25s ease}
  #admin.tall{height:86%}
  #admin .adm-head{padding-top:10px}
  .only-coarse-narrow{display:grid!important}
  .admin-open #strip,.admin-open #compass .read,.admin-open .brand .sub{display:none}
  .admin-open #minimap{bottom:12px}
  .brand .tag{display:none}
  .thumb{width:118px}
  #minimap{width:176px}
  #minimap.with-strip{bottom:calc(150px + env(safe-area-inset-bottom,0px))}
  #minimap.with-handle{bottom:calc(58px + env(safe-area-inset-bottom,0px))}
  #compass{top:calc(68px + env(safe-area-inset-top,0px));width:58px}
  #compass svg{width:58px;height:58px}
  #compass .read{font-size:10.5px;padding:1px 6px}
  #card{left:0;right:0;bottom:0;top:auto;width:auto;max-height:72%;border-radius:18px 18px 0 0;border-bottom:0;padding-bottom:env(safe-area-inset-bottom,0px)}
  #card .c-grab{display:block;width:40px;height:4px;border-radius:4px;background:var(--line-strong);margin:8px auto 0}
  .float-note{top:calc(76px + env(safe-area-inset-top,0px));font-size:13px;width:auto;left:var(--gl);right:var(--gr);transform:none;max-width:none}
  input[type=text],input[type=url],input[type=number],input[type=password],textarea,select{font-size:16px}
  .adm-tabs button{font-size:13px;padding:10px 4px}
}
@media (max-width:560px){
  .lang-wide{display:none}
  .lang-wrap{display:block}
  .tools{gap:6px}
  .brand h1{font-size:19px}
  .brand .sub{font-size:13px}
}
@media (max-height:480px) and (orientation:landscape){
  #compass{display:none}
  #top{padding-bottom:20px}
  .brand .tag{display:none}
  .thumb{width:104px}
  #minimap.with-strip{bottom:calc(130px + env(safe-area-inset-bottom,0px))}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}#toast,#admin{transition:none}}