:root {
    --ink:#14171c; --text:#1f2329; --muted:#6b7280; --faint:#9aa1ab;
    --border:#e4e6ea; --field-border:#d6d9de; --bg:#ffffff; --soft:#f6f7f9;
    --bar:#0f1115; --bar-text:#e9ebef; --bar-muted:#9097a3;
    --blue:#2f6fd6; --blue-soft:#eaf1fc; --blue-line:#cadcf5;
    --red:#e5432d; --red-dark:#c9361f;
    --good:#1f8a5b; --mid:#c98a12; --low:#d0452f;
    --panel-w:540px; --top-h:52px;
  }
  * { box-sizing:border-box; }
  html, body { height:100%; margin:0; }
  body { font-family:Inter, system-ui, -apple-system, "Segoe UI", sans-serif; font-size:14px; color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased; overflow:hidden; }
  button, select, input { font:inherit; color:inherit; }
  button { cursor:pointer; }
  .tnum { font-variant-numeric:tabular-nums; }

  /* ---------- Top bar ---------- */
  .topbar { position:fixed; inset:0 0 auto 0; height:var(--top-h); background:var(--bar); color:var(--bar-text); display:flex; align-items:center; gap:14px; padding:0 14px; z-index:1000; }
  .tb-left, .tb-center, .tb-right { display:flex; align-items:center; gap:10px; min-width:0; }
  .tb-center { flex:1; justify-content:center; }
  .tb-btn { background:none; border:0; color:var(--bar-text); width:34px; height:34px; border-radius:7px; display:grid; place-items:center; }
  .tb-btn:hover { background:#22262d; }
  .brand { font-weight:600; letter-spacing:.02em; white-space:nowrap; }
  .tb-div { width:1px; height:22px; background:#2c3038; }
  .tb-select { display:flex; align-items:center; gap:7px; padding:0 4px 0 9px; height:34px; border-radius:7px; color:var(--bar-text); }
  .tb-select:hover { background:#22262d; }
  .tb-select svg { flex:none; color:var(--bar-muted); }
  .tb-select select { appearance:none; background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23c9ced6' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 6px center; border:0; color:var(--bar-text); padding:6px 22px 6px 0; font-weight:500; max-width:220px; outline:none; }
  .tb-select select option { color:#111; }
  .dd { position:relative; }
  .dd > button { background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23c9ced6' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 6px center; border:0; color:var(--bar-text); padding:6px 24px 6px 0; font-weight:500; max-width:300px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:left; outline:none; }
  .dd > button .cc { color:var(--bar-muted); font-size:12px; margin-left:6px; font-weight:400; }
  .dd > button:focus-visible { box-shadow:0 0 0 2px var(--blue); border-radius:4px; }
  .dd-list { position:absolute; top:40px; left:0; width:330px; max-height:min(70vh, 640px); overflow-y:auto; margin:0; padding:5px; list-style:none; background:#fff; color:var(--text); border:1px solid var(--border); border-radius:10px; box-shadow:0 12px 32px rgba(15,17,21,.22); z-index:1500; }
  #regionList { width:290px; }
  .dd-list li { display:flex; align-items:center; gap:8px; padding:6px 10px 6px 26px; border-radius:6px; cursor:pointer; position:relative; font-size:14px; }
  .dd-list li .n { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .dd-list li .c { flex:none; color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; letter-spacing:.02em; }
  .dd-list li[aria-selected="true"]::before { content:"✓"; position:absolute; left:9px; font-weight:600; }
  .dd-list li.active { background:var(--blue); color:#fff; }
  .dd-list li.active .c { color:rgba(255,255,255,.85); }
  .dd-list li.filtered { color:var(--faint); }
  .dd-list .sep { height:1px; background:var(--border); margin:5px 4px; padding:0; cursor:default; }
  .tb-select .lab { font-size:11px; color:var(--bar-muted); text-transform:uppercase; letter-spacing:.06em; }
  .btn-red { background:var(--red); color:#fff; border:0; border-radius:6px; height:34px; padding:0 13px; display:inline-flex; align-items:center; gap:8px; font-weight:500; white-space:nowrap; }
  .btn-red:hover { background:var(--red-dark); }
  .kbd { font-size:11px; background:rgba(255,255,255,.18); border-radius:4px; padding:1px 5px; }

  /* ---------- Map ---------- */
  #map { position:fixed; top:var(--top-h); left:0; right:0; bottom:0; background:#dfe8ee; z-index:1; }
  .leaflet-container { font-family:inherit; }
  .pin { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:600; color:#fff; background:var(--c); border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.35); transition:transform .15s; font-variant-numeric:tabular-nums; }
  .pin:hover { transform:scale(1.12); }
  .pin.sel { background:var(--red); width:38px; height:38px; margin:-4px; font-size:14px; box-shadow:0 0 0 5px rgba(229,67,45,.25), 0 2px 6px rgba(0,0,0,.35); }
  .pin.star::after { content:"★"; position:absolute; top:-7px; right:-7px; font-size:12px; color:#f2b01e; text-shadow:0 0 2px #fff, 0 0 2px #fff; }
  .pin { position:relative; }
  .pin.dim { opacity:.28; }
  .ap { width:22px; height:22px; border-radius:6px; background:#fff; border:1px solid #c7ccd4; display:grid; place-items:center; color:#3b4250; box-shadow:0 1px 3px rgba(0,0,0,.2); }
  .ap.on { background:var(--ink); color:#fff; border-color:var(--ink); }
  .leaflet-tooltip.town-tip { background:#fff; border:1px solid var(--border); border-radius:6px; box-shadow:0 2px 8px rgba(0,0,0,.12); font-weight:500; font-size:12px; padding:3px 7px; color:var(--text); }
  .leaflet-tooltip.town-tip::before { display:none; }
  .leaflet-tooltip.route-tip { background:var(--ink); color:#fff; border:0; border-radius:5px; font-size:11px; padding:3px 7px; font-weight:500; }
  .leaflet-tooltip.route-tip::before { display:none; }

  .map-ui { position:fixed; z-index:500; }
  .map-tr { top:calc(var(--top-h) + 14px); right:14px; display:flex; gap:8px; }
  .seg { display:flex; background:#fff; border:1px solid var(--border); border-radius:8px; padding:3px; box-shadow:0 1px 4px rgba(0,0,0,.08); }
  .seg button { border:0; background:none; padding:5px 10px; border-radius:6px; font-size:13px; font-weight:500; color:var(--muted); }
  .seg button.on { color:var(--blue); background:var(--blue-soft); }
  .sq { width:36px; height:36px; display:grid; place-items:center; background:#fff; border:1px solid var(--border); border-radius:8px; box-shadow:0 1px 4px rgba(0,0,0,.08); color:var(--text); }
  .dock { bottom:18px; left:calc(var(--panel-w) + (100vw - var(--panel-w)) / 2); transform:translateX(-50%); background:#16191e; border-radius:9px; padding:5px; display:flex; gap:2px; align-items:center; box-shadow:0 6px 20px rgba(0,0,0,.25); }
  body.collapsed .dock { left:50%; }
  .dock button { background:none; border:0; color:#dfe2e8; width:38px; height:36px; border-radius:6px; display:grid; place-items:center; position:relative; }
  .dock button:hover { background:#2a2e36; }
  .dock button.on { background:#2f343d; color:#fff; }
  .dock button.on::after { content:""; position:absolute; bottom:3px; left:50%; width:4px; height:4px; margin-left:-2px; border-radius:50%; background:var(--red); }
  .dock .sep { width:1px; height:22px; background:#353a43; margin:0 4px; }
  .dock button[data-tip]:hover::before { content:attr(data-tip); position:absolute; bottom:44px; left:50%; transform:translateX(-50%); background:#16191e; color:#fff; font-size:12px; padding:4px 8px; border-radius:5px; white-space:nowrap; }
  .legend { top:calc(var(--top-h) + 60px); right:14px; background:#fff; border:1px solid var(--border); border-radius:8px; padding:8px 10px; box-shadow:0 1px 4px rgba(0,0,0,.08); font-size:12px; color:var(--muted); }
  .legend .ramp { display:flex; align-items:center; gap:6px; margin-top:5px; }
  .legend .ramp i { width:14px; height:14px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px #d6d9de; }

  /* ---------- Panel ---------- */
  .panel { position:fixed; top:var(--top-h); left:0; bottom:0; width:var(--panel-w); background:var(--bg); z-index:600; display:flex; flex-direction:column; box-shadow:4px 0 18px rgba(15,17,21,.12); transition:transform .25s ease; }
  body.collapsed .panel { transform:translateX(calc(-1 * var(--panel-w))); }
  .p-head { display:flex; align-items:center; gap:10px; padding:16px 18px 10px; }
  .p-title { display:flex; align-items:center; gap:9px; min-width:0; flex:1; }
  .p-title svg { flex:none; color:var(--muted); }
  .p-title h1 { margin:0; font-size:19px; font-weight:600; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .p-title .reg { color:var(--muted); font-size:13px; white-space:nowrap; }
  .ghost { background:none; border:0; color:var(--muted); display:inline-flex; align-items:center; gap:6px; font-size:13px; padding:6px 6px; border-radius:6px; white-space:nowrap; }
  .ghost:hover { background:var(--soft); color:var(--text); }
  .ghost.on { color:var(--blue); }
  .btn-outline { background:#fff; border:1px solid var(--ink); border-radius:6px; height:34px; padding:0 12px; display:inline-flex; align-items:center; gap:7px; font-weight:500; white-space:nowrap; }
  .btn-outline:hover { background:var(--soft); }
  .btn-outline.on { border-color:#f2b01e; background:#fff8e6; }
  .tabs { display:flex; border-bottom:1px solid var(--border); padding:0 18px; gap:4px; }
  .tabs button { border:0; background:none; padding:10px 12px 11px; font-weight:500; color:var(--muted); border-bottom:2px solid transparent; margin-bottom:-1px; }
  .tabs button.on { color:var(--red); border-bottom-color:var(--red); }
  .p-body { flex:1; overflow-y:auto; padding:16px 18px 24px; }
  .p-foot { border-top:1px solid var(--border); padding:12px 18px; display:flex; align-items:center; justify-content:space-between; gap:10px; background:#fff; }
  .p-foot .ghost { color:var(--text); }

  .banner { display:flex; gap:12px; background:var(--blue-soft); border:1px solid var(--blue-line); border-radius:8px; padding:13px 14px; align-items:flex-start; }
  .banner svg { flex:none; color:var(--blue); margin-top:2px; }
  .banner b { font-weight:600; display:block; margin-bottom:3px; }
  .banner p { margin:0; line-height:1.45; color:#2b3340; }
  .banner .big { margin-left:auto; text-align:center; background:#fff; border:1px solid var(--blue-line); border-radius:7px; padding:6px 10px; min-width:66px; }
  .banner .big strong { display:block; font-size:22px; font-weight:600; color:var(--blue); line-height:1.1; }
  .banner .big span { font-size:11px; color:var(--muted); }

  .line { display:grid; grid-template-columns:150px 1fr auto; align-items:center; gap:12px; padding:14px 0; border-bottom:1px solid var(--border); }
  .lbl { color:var(--muted); font-size:13px; }
  .field { min-height:34px; border:1px solid var(--field-border); border-radius:6px; padding:7px 10px; display:flex; align-items:center; justify-content:space-between; gap:8px; background:#fff; line-height:1.3; }
  .field em { font-style:normal; color:var(--faint); font-size:12px; white-space:nowrap; }
  .field small { display:block; color:var(--muted); font-size:12px; margin-top:1px; }

  .tiles { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; margin:16px 0 4px; }
  .tile { border:1px solid var(--border); border-radius:7px; padding:8px 10px; min-width:0; }
  .tile.hl { border-color:var(--blue); box-shadow:inset 0 0 0 1px var(--blue); }
  .tile .k { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
  .tile.hl .k, .tile.hl .v { color:var(--blue); }
  .tile .v { font-weight:600; font-size:15px; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .tile .s { font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  .sec { padding:18px 0 6px; border-bottom:1px solid var(--border); }
  .sec:last-child { border-bottom:0; }
  .sec-h { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
  .sec h3 { margin:0; font-size:15px; font-weight:600; }
  .sec-h .gw { color:var(--faint); font-size:12px; margin-left:8px; font-weight:400; }
  .chip { font-size:12px; font-weight:600; border-radius:999px; padding:2px 9px; color:#fff; background:var(--c); font-variant-numeric:tabular-nums; }

  .crow { display:grid; grid-template-columns:150px 1fr 64px; gap:12px; align-items:center; padding:5px 0; }
  .crow .lbl { line-height:1.3; }
  .sc { display:flex; flex-direction:column; align-items:flex-end; gap:4px; font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--c); }
  .sc i { display:block; width:100%; height:4px; border-radius:2px; background:#eceef1; position:relative; overflow:hidden; }
  .sc i::after { content:""; position:absolute; inset:0 auto 0 0; width:calc(var(--s) * 10%); background:var(--c); border-radius:2px; }
  .sc.off { color:var(--faint); }
  .hint { grid-column:1 / -1; font-size:12px; color:var(--muted); margin:-1px 0 6px 162px; line-height:1.4; }
  .tag { display:inline-block; font-size:10px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; border-radius:4px; padding:1px 5px; margin-right:6px; vertical-align:1px; }
  .tag.k { background:#e3f3ea; color:#17704a; }
  .tag.e { background:#fdf1dc; color:#9a6508; }

  .gbars { display:grid; grid-template-columns:repeat(2, 1fr); gap:6px 20px; margin-top:8px; }
  .gbar { display:grid; grid-template-columns:1fr 34px; gap:3px 8px; align-items:center; font-size:12px; cursor:pointer; padding:3px 0; }
  .gbar:hover span:first-child { color:var(--blue); }
  .gbar b { text-align:right; font-weight:600; font-variant-numeric:tabular-nums; color:var(--c); }
  .gbar i { grid-column:1 / -1; height:5px; border-radius:3px; background:#eceef1; position:relative; overflow:hidden; }
  .gbar i::after { content:""; position:absolute; inset:0 auto 0 0; width:calc(var(--s) * 10%); background:var(--c); }

  .pc { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:6px; }
  .card { border:1px solid var(--border); border-radius:8px; padding:12px; }
  .card h4 { margin:0 0 6px; font-size:13px; font-weight:600; display:flex; align-items:center; gap:6px; }
  .card p { margin:0; line-height:1.45; color:#39414d; }
  .card.pro h4 { color:var(--good); }
  .card.con h4 { color:var(--low); }
  .foot-note { font-size:12px; color:var(--muted); line-height:1.5; margin-top:16px; }
  .foot-note a { color:var(--blue); }

  /* photos */
  .photos { margin:0 -18px 16px; padding:0 18px; }
  .ph-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
  .ph-head h3 { margin:0; font-size:15px; font-weight:600; }
  .ph-head .links { display:flex; gap:2px; }
  .ph-head a { font-size:12px; color:var(--muted); text-decoration:none; padding:4px 6px; border-radius:5px; }
  .ph-head a:hover { background:var(--soft); color:var(--blue); }
  .strip { display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x proximity; padding-bottom:6px; min-height:118px; }
  .strip::-webkit-scrollbar { height:6px; } .strip::-webkit-scrollbar-thumb { background:#d6d9de; border-radius:3px; }
  .ph { flex:none; width:168px; height:112px; border-radius:7px; overflow:hidden; border:0; padding:0; background:#eceef1; scroll-snap-align:start; position:relative; }
  .ph img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .25s; }
  .ph:hover img { transform:scale(1.04); }
  .ph.sk { background:linear-gradient(90deg,#eceef1 0%,#f6f7f9 50%,#eceef1 100%); background-size:200% 100%; animation:sk 1.2s linear infinite; }
  @keyframes sk { to { background-position:-200% 0; } }
  .ph-msg { font-size:13px; color:var(--muted); padding:10px 0 4px; }
  .ph-msg button { border:0; background:none; color:var(--blue); padding:0; text-decoration:underline; }
  .ph-head { flex-wrap:wrap; row-gap:2px; }
  .ph-head h3 { white-space:nowrap; }
  .ph-head .links { flex-wrap:wrap; justify-content:flex-end; margin-left:auto; }
  .ph-head .via { font-size:12px; font-weight:400; color:var(--faint); margin-left:8px; }
  .ph-head .links { align-items:center; }
  .ph-gear { border:0; background:none; color:var(--muted); width:28px; height:28px; border-radius:6px; display:grid; place-items:center; }
  .ph-gear:hover { background:var(--soft); color:var(--text); }
  .ph-cta { flex:1; display:flex; align-items:center; justify-content:space-between; gap:14px; border:1px dashed var(--field-border); border-radius:8px; padding:14px; background:var(--soft); }
  .ph-cta b { display:block; font-weight:600; margin-bottom:2px; } .ph-cta span { color:var(--muted); font-size:13px; line-height:1.4; }
  .dlg-wrap { position:fixed; inset:0; z-index:2100; background:rgba(10,12,15,.45); display:none; align-items:center; justify-content:center; padding:16px; }
  .dlg-wrap.open { display:flex; }
  .dlg { background:#fff; border-radius:10px; width:min(440px, 100%); padding:20px; box-shadow:0 20px 50px rgba(0,0,0,.25); display:grid; gap:12px; }
  .dlg h3 { margin:0; font-size:17px; font-weight:600; } .dlg p { margin:0; color:var(--muted); line-height:1.45; font-size:13px; }
  .dlg .sel span { display:flex; justify-content:space-between; } .dlg .sel a { color:var(--blue); font-size:12px; text-decoration:none; }
  .dlg input[type=text] { height:36px; border:1px solid var(--field-border); border-radius:6px; padding:0 10px; outline:none; font-family:ui-monospace, Menlo, monospace; font-size:13px; }
  .dlg input[type=text]:focus { border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft); }
  .seg2 { display:flex; gap:8px; } .seg2 label { flex:1; display:flex; align-items:center; gap:8px; border:1px solid var(--field-border); border-radius:7px; padding:9px 12px; cursor:pointer; font-weight:500; }
  .seg2 label:has(input:checked) { border-color:var(--blue); background:var(--blue-soft); color:var(--blue); }
  .dlg .note { font-size:12px; }
  .dlg-foot { display:flex; align-items:center; gap:8px; margin-top:4px; } .dlg-foot span { flex:1; }
  .lb { position:fixed; inset:0; z-index:2000; background:rgba(10,12,15,.92); display:none; flex-direction:column; align-items:center; justify-content:center; padding:56px 64px 24px; }
  .lb.open { display:flex; }
  .lb img { max-width:100%; max-height:calc(100vh - 170px); object-fit:contain; border-radius:6px; box-shadow:0 10px 40px rgba(0,0,0,.5); background:#1b1e24; }
  .lb .cap { color:#e9ebef; font-size:13px; line-height:1.45; margin-top:14px; max-width:900px; text-align:center; }
  .lb .cap small { display:block; color:#9097a3; font-size:12px; margin-top:4px; }
  .lb .cap a { color:#9fc0f5; }
  .lb button { position:absolute; background:rgba(255,255,255,.1); border:0; color:#fff; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; font-size:20px; }
  .lb button:hover { background:rgba(255,255,255,.2); }
  .lb .x { top:14px; right:16px; } .lb .pv { left:14px; top:50%; } .lb .nx { right:14px; top:50%; }
  .lb .count { position:absolute; top:24px; left:24px; color:#9097a3; font-size:13px; }
  @media (max-width:720px) { .lb { padding:56px 12px 16px; } .lb .pv, .lb .nx { top:auto; bottom:16px; } .ph { width:140px; height:96px; } .photos { margin:0 -16px 14px; padding:0 16px; } }

  /* ranking + weights */
  .filters { display:grid; grid-template-columns:1fr 1fr auto; gap:8px; margin:14px 0 10px; align-items:end; }
  .sel { display:grid; gap:4px; }
  .sel span { font-size:12px; color:var(--muted); }
  .sel select { height:34px; border:1px solid var(--field-border); border-radius:6px; padding:0 28px 0 10px; appearance:none; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b7280' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 10px center; }
  .check { display:flex; align-items:center; gap:7px; height:34px; font-size:13px; white-space:nowrap; }
  table.rank { width:100%; border-collapse:collapse; font-size:13px; }
  table.rank th { text-align:left; font-weight:500; color:var(--muted); font-size:12px; padding:8px 6px; border-bottom:1px solid var(--border); white-space:nowrap; cursor:pointer; user-select:none; position:sticky; top:-16px; background:#fff; z-index:1; }
  table.rank th.num, table.rank td.num { text-align:right; }
  table.rank th.on { color:var(--text); }
  table.rank td { padding:8px 6px; border-bottom:1px solid var(--border); vertical-align:middle; }
  table.rank tr.r { cursor:pointer; }
  table.rank tr.r:hover td { background:var(--soft); }
  table.rank tr.cur td { background:#fff4f2; }
  table.rank .nm { font-weight:500; }
  table.rank .rg { font-size:12px; color:var(--muted); }
  .rk { display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%; color:#fff; font-size:11px; font-weight:600; background:var(--c); }
  .mini { display:flex; align-items:center; gap:7px; justify-content:flex-end; }
  .mini i { width:44px; height:5px; background:#eceef1; border-radius:3px; position:relative; overflow:hidden; }
  .mini i::after { content:""; position:absolute; inset:0 auto 0 0; width:calc(var(--s)*10%); background:var(--c); }
  .starbtn { border:0; background:none; font-size:15px; color:#c7ccd4; padding:2px; }
  .starbtn.on { color:#f2b01e; }

  .wrow { display:grid; grid-template-columns:1fr 118px; gap:12px; align-items:center; padding:6px 0; }
  .wrow .lbl { color:var(--text); font-size:13px; }
  .wrow .lbl small { display:block; color:var(--muted); font-size:12px; margin-top:1px; }
  .stepper { display:grid; grid-template-columns:1fr 26px; border:1px solid var(--field-border); border-radius:6px; overflow:hidden; height:34px; background:#fff; }
  .stepper input { border:0; padding:0 10px; width:100%; outline:none; font-variant-numeric:tabular-nums; }
  .stepper .arr { display:grid; grid-template-rows:1fr 1fr; border-left:1px solid var(--field-border); }
  .stepper .arr button { border:0; background:#fff; color:var(--muted); font-size:9px; padding:0; line-height:1; }
  .stepper .arr button:first-child { border-bottom:1px solid var(--field-border); }
  .stepper .arr button:hover { background:var(--soft); color:var(--text); }
  .stepper.zero input { color:var(--faint); }
  .preset { display:grid; grid-template-columns:150px 1fr auto; gap:12px; align-items:center; padding:14px 0; border-bottom:1px solid var(--border); }

  @media (max-width: 900px) { :root { --panel-w:440px; } .crow, .line { grid-template-columns:120px 1fr 56px; } .hint { margin-left:132px; } .tiles { grid-template-columns:repeat(2,1fr); } .tb-center .tb-select:nth-child(n+2) { display:none; } }
  @media (max-width: 720px) {
    :root { --panel-w:100vw; }
    body { overflow-x:hidden; overflow-y:auto; }
    .gmaps { display:none; }
    #map { position:relative; top:var(--top-h); height:42vh; }
    .panel { position:relative; top:var(--top-h); width:100%; height:auto; box-shadow:none; border-top:1px solid var(--border); }
    body.collapsed .panel { transform:none; }
    .p-body { overflow:visible; padding:14px 16px 20px; }
    .p-head, .tabs, .p-foot { padding-left:16px; padding-right:16px; }
    .p-foot { position:sticky; bottom:0; }
    .map-ui { position:absolute; }
    .map-tr { top:calc(var(--top-h) + 10px); right:10px; }
    .dock { left:50%; top:calc(var(--top-h) + 42vh - 54px); bottom:auto; }
    .legend, #collapseBtn, .tb-center, .brand, .tb-div, .sl-txt { display:none; }
    .topbar { gap:6px; padding:0 8px; } .tb-left { flex:1; } .tb-select select { max-width:none; width:100%; } .dd { flex:1; min-width:0; } .dd > button { max-width:none; width:100%; } .dd-list { position:fixed; top:calc(var(--top-h) - 4px); left:8px; right:8px; width:auto; }
    .crow, .line { grid-template-columns:110px 1fr 50px; gap:8px; }
    .line { grid-template-columns:110px 1fr; } .line .btn-outline { grid-column:1 / -1; justify-content:center; }
    .hint { margin-left:0; }
    .pc, .gbars { grid-template-columns:1fr; }
    .filters { grid-template-columns:1fr 1fr; } .filters .check { grid-column:1 / -1; }
    table.rank .hide-sm { display:none; }
    .preset { grid-template-columns:1fr; }
  }