/* shared navigation: slim left rail on desktop, bottom tab bar on phones */
:root { --nav-w: 76px; --nav-h: 66px; }
.nav {
  position: fixed; z-index: 40; display: flex; align-items: center; background: #fff; font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  left: 0; top: 0; bottom: 0; width: var(--nav-w); flex-direction: column; gap: 6px; padding: 14px 0; border-right: 1px solid rgba(29,20,69,.1);
}
.nav-logo { width: 46px; height: 46px; margin-bottom: 14px; display: grid; place-items: center; }
.nav-logo svg { width: 38px; height: 38px; filter: drop-shadow(0 3px 8px rgba(255,120,0,.35)); }
.nav-item {
  position: relative; width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; color: #1d1445; text-decoration: none;
  transition: background .15s, transform .15s;
}
.nav-item svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.nav-item span { position: absolute; left: calc(100% + 10px); top: 50%; translate: 0 -50%; padding: 6px 10px; border-radius: 10px; background: #1d1445; color: #fff; font: 700 12.5px/1 inherit; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s; }
.nav-item:hover { background: rgba(80,50,170,.09); }
.nav-item:hover span { opacity: 1; }
.nav-item.on { background: #1d1445; color: #fff; }
.nav-create { margin: 6px 0; background: linear-gradient(135deg, #ffd23a, #ff9d00); color: #1a0b4a; }
.nav-create:hover { background: linear-gradient(135deg, #ffdc5c, #ffab1f); transform: scale(1.05); }
.nav-create.on { background: linear-gradient(135deg, #ff8a00, #e11fc0); color: #fff; }

@media (max-width: 767px) {
  .nav { inset: auto 0 0 0; width: auto; height: calc(var(--nav-h) + env(safe-area-inset-bottom)); padding: 6px 8px env(safe-area-inset-bottom); flex-direction: row; justify-content: space-around; gap: 0; border-right: 0; border-top: 1px solid rgba(29,20,69,.1); }
  .nav-logo { display: none; }
  .nav-item { width: auto; flex: 1; height: 54px; border-radius: 14px; gap: 3px; align-content: center; justify-items: center; grid-template-rows: auto auto; }
  .nav-item span { position: static; translate: none; opacity: 1; background: none; color: inherit; padding: 0; font-size: 11px; font-weight: 700; }
  .nav-item:hover { background: none; }
  .nav-item.on { background: none; color: #c425d6; }
  .nav-create { flex: 0 0 62px; height: 46px; border-radius: 16px; margin: 0 6px; align-self: center; }
  .nav-create span { display: none; }
  .nav-create.on { color: #fff; }
}

/* active tab from the page's data-page */
body[data-page="home"] [data-nav="home"], body[data-page="map"] [data-nav="map"], body[data-page="analytics"] [data-nav="analytics"] { background: #1d1445; color: #fff; }
body[data-page="upload"] .nav-create { background: linear-gradient(135deg, #ff8a00, #e11fc0); color: #fff; }
@media (max-width: 767px) {
  body[data-page="home"] [data-nav="home"], body[data-page="map"] [data-nav="map"], body[data-page="analytics"] [data-nav="analytics"] { background: none; color: #c425d6; }
}

/* map page: leave room for the nav */
@media (min-width: 768px) { .has-nav .topbar, .has-nav .ctl, .has-nav .legend { left: calc(var(--nav-w) + var(--gap)); } }
@media (max-width: 767px) {
  .has-nav .ctl { bottom: calc(var(--nav-h) + 22px + env(safe-area-inset-bottom)); }
  .has-nav .attrib { bottom: calc(var(--nav-h) + 6px + env(safe-area-inset-bottom)); }
  .has-nav .toast { bottom: auto; }
}
/* upload page */
@media (min-width: 768px) { body.upload-page { padding-left: var(--nav-w); } }
@media (max-width: 767px) { body.upload-page { padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); } }

/* ---------- Spotlight-style search dock ---------- */
.spl { position: fixed; inset: 0; z-index: 100; display: grid; justify-items: center; align-content: start; padding: 13vh 14px 0; font-family: 'Plus Jakarta Sans', 'Anek Malayalam', system-ui, sans-serif; color: #1d1445; }
.spl-bg { position: absolute; inset: 0; background: rgba(20,10,50,.34); animation: splfade .16s ease-out; }
.spl-panel {
  position: relative; width: min(700px, 100%); border-radius: 24px; overflow: hidden;
  background: rgba(255,255,255,.84); -webkit-backdrop-filter: blur(36px) saturate(1.8); backdrop-filter: blur(36px) saturate(1.8);
  border: 1px solid rgba(255,255,255,.75); box-shadow: 0 34px 90px rgba(30,10,90,.4), 0 0 0 .5px rgba(29,20,69,.18);
  animation: splpop .24s cubic-bezier(.2,1.25,.3,1);
}
@keyframes splfade { from { opacity: 0; } }
@keyframes splpop { from { opacity: 0; transform: translateY(-10px) scale(.96); } }
.spl-bar { display: flex; align-items: center; gap: 14px; height: 68px; padding: 0 18px 0 22px; }
.spl-bar svg { width: 26px; height: 26px; flex: none; fill: none; stroke: #c425d6; stroke-width: 2.4; stroke-linecap: round; }
.spl-in { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font: 600 21px 'Anek Malayalam', 'Plus Jakarta Sans', system-ui, sans-serif; color: #1d1445; }
.spl-in::placeholder { color: rgba(29,20,69,.4); font-weight: 500; }
.spl-x { flex: none; border: 0; background: rgba(29,20,69,.08); color: rgba(29,20,69,.6); border-radius: 8px; padding: 5px 9px; font: 700 12px 'Plus Jakarta Sans', system-ui; cursor: pointer; }
.spl-list { list-style: none; margin: 0; padding: 4px 10px 10px; max-height: min(52vh, 440px); overflow-y: auto; border-top: 1px solid rgba(29,20,69,.1); overscroll-behavior: contain; }
.spl-head { padding: 12px 12px 6px; font: 800 11px 'Plus Jakarta Sans', system-ui; letter-spacing: .09em; text-transform: uppercase; color: rgba(29,20,69,.45); }
.spl-row { display: flex; align-items: center; gap: 14px; padding: 8px 12px; border-radius: 14px; cursor: pointer; }
.spl-ico { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: #fff; }
.spl-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.t-sector .spl-ico { background: linear-gradient(135deg, #ffb000, #ff6a00); }
.t-division .spl-ico { background: linear-gradient(135deg, #b44bff, #6a3ad6); }
.t-district .spl-ico { background: linear-gradient(135deg, #3d7bff, #2417ff); }
.t-page .spl-ico { background: linear-gradient(135deg, #5a5675, #1d1445); }
.spl-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.spl-txt b { font: 700 16px/1.3 'Anek Malayalam', 'Plus Jakarta Sans', system-ui, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spl-txt small { font: 500 12.5px/1.3 'Anek Malayalam', 'Plus Jakarta Sans', system-ui, sans-serif; color: rgba(29,20,69,.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spl-row kbd { display: none; }
.spl-row.on { background: linear-gradient(135deg, #ff8a00, #c425d6); color: #fff; }
.spl-row.on small { color: rgba(255,255,255,.85); }
.spl-row.on .spl-ico { background: rgba(255,255,255,.22); }
.spl-row.on kbd { display: inline-block; }
.spl kbd { font: 700 11.5px 'Plus Jakarta Sans', system-ui; padding: 2px 7px; border-radius: 6px; background: rgba(29,20,69,.08); color: rgba(29,20,69,.6); }
.spl-row.on kbd { background: rgba(255,255,255,.25); color: #fff; }
.spl-none { padding: 28px 12px; text-align: center; color: rgba(29,20,69,.5); font-weight: 600; }
.spl-foot { display: flex; gap: 18px; padding: 10px 20px; border-top: 1px solid rgba(29,20,69,.1); font: 600 12px 'Plus Jakarta Sans', system-ui; color: rgba(29,20,69,.5); background: rgba(255,255,255,.4); }
.spl-foot kbd { margin-right: 4px; }
body.spl-open [data-nav="home"], body.spl-open [data-nav="map"] { background: none; color: #1d1445; }
body.spl-open [data-nav="search"] { background: #1d1445; color: #fff; }
@media (max-width: 767px) {
  .spl { padding-top: calc(env(safe-area-inset-top) + 8vh); }
  .spl-bar { height: 60px; }
  .spl-in { font-size: 18px; }
  .spl-foot { display: none; }
  .spl-list { max-height: 58vh; }
  body.spl-open [data-nav="search"] { background: none; color: #c425d6; }
}
@media (prefers-reduced-motion: reduce) { .spl-bg, .spl-panel { animation: none; } }

/* logo */
.nav-logo { width: 60px; height: auto; margin-bottom: 12px; }
.nav-logo img { display: block; width: 100%; height: auto; }
.has-nav .brand-logo { display: block; height: 40px; width: auto; }

/* ---------- map controls: one tidy, evenly aligned column ---------- */
.has-nav .ctl { --cs: 48px; align-items: center; gap: 10px; bottom: 74px; }
.has-nav .ctl button { width: var(--cs); height: var(--cs); border-radius: 16px; flex: none; padding: 0; }
.has-nav .ctl #c-north { position: relative; width: var(--cs); height: var(--cs); padding: 0; border-radius: 50%; margin-bottom: 18px; overflow: visible; }
.has-nav .ctl #c-north svg { width: calc(var(--cs) - 6px); height: calc(var(--cs) - 6px); }
.has-nav .ctl #compass-deg { position: absolute; top: calc(100% + 4px); left: 50%; translate: -50% 0; margin: 0; padding: 2px 8px; border-radius: 9px; background: rgba(255,255,255,.92); border: 1px solid var(--line); box-shadow: 0 2px 8px rgba(60,30,140,.12); font: 800 10.5px/1.2 var(--en); color: var(--ink); white-space: nowrap; pointer-events: none; }
/* zoom in / out read as one joined pair */
.has-nav .ctl #c-in { border-radius: 16px 16px 5px 5px; margin-bottom: -8px; }
.has-nav .ctl #c-out { border-radius: 5px 5px 16px 16px; }
.has-nav .ctl #c-tilt, .has-nav .ctl #c-sat { font-size: 12.5px; letter-spacing: .03em; }
@media (max-width: 767px) {
  .has-nav .ctl { --cs: 44px; gap: 9px; left: var(--gap); bottom: calc(var(--nav-h) + 46px + env(safe-area-inset-bottom)); }
  .has-nav .ctl #c-north { margin-bottom: 16px; }
}

/* ---------- compass top right; zoom buttons sit right above the heatmap indicator ---------- */
.ctl-tr { position: fixed; z-index: 9; top: var(--gap); right: var(--gap); }
.ctl-tr #c-north { position: relative; width: 48px; height: 48px; padding: 0; border-radius: 50%; display: grid; place-items: center; overflow: visible; background: var(--glass); border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(60,30,140,.18); transition: transform .15s, background .15s; }
.ctl-tr #c-north:hover { background: #fff; transform: translateY(-1px); }
.ctl-tr #c-north svg { width: 42px; height: 42px; display: block; }
.ctl-tr #compass-deg { position: absolute; top: calc(100% + 4px); left: 50%; translate: -50% 0; padding: 2px 8px; border-radius: 9px; background: rgba(255,255,255,.92); border: 1px solid var(--line); box-shadow: 0 2px 8px rgba(60,30,140,.12); font: 800 10.5px/1.2 var(--en); color: var(--ink); white-space: nowrap; pointer-events: none; }
.has-nav .topbar { right: calc(var(--gap) + 64px); }          /* keep the search / filters clear of the compass */
@media (min-width: 768px) { .has-nav .ctl { bottom: 68px; } } /* zoom pair ends just above the legend */
@media (max-width: 767px) {
  .ctl-tr { top: calc(var(--gap) + env(safe-area-inset-top)); }
  .ctl-tr #c-north { width: 44px; height: 44px; }
  .ctl-tr #c-north svg { width: 38px; height: 38px; }
}

/* ---------- bottom right: zoom above the heatmap indicator; bottom left: map-type switcher ---------- */
.has-nav .legend { left: auto; right: var(--gap); }
.ctl-br { position: fixed; z-index: 10; right: var(--gap); bottom: calc(var(--gap) + 38px + 14px); display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.ctl-br button { width: 48px; height: 48px; display: grid; place-items: center; padding: 0; font: 800 22px var(--en); color: var(--ink); background: var(--glass); border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(60,30,140,.18); transition: transform .15s, background .15s; }
.ctl-br button:hover { background: #fff; }
.ctl-br #c-in { border-radius: 16px 16px 5px 5px; }
.ctl-br #c-out { border-radius: 5px 5px 16px 16px; }
.ctl-bl { position: fixed; z-index: 10; left: calc(var(--nav-w) + var(--gap)); bottom: var(--gap); }
.layer { position: relative; display: block; width: 68px; height: 68px; padding: 0; border: 3px solid #fff; border-radius: 18px; overflow: hidden; cursor: pointer; box-shadow: 0 6px 20px rgba(40,20,110,.3), 0 0 0 1px rgba(80,50,170,.18); transition: transform .15s, box-shadow .15s; background: #ddd; }
.layer:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(40,20,110,.36), 0 0 0 1px rgba(80,50,170,.25); }
.layer:focus-visible { outline: 3px solid #c425d6; outline-offset: 2px; }
.layer-thumb { position: absolute; inset: 0; background: url('/brand/thumb-sat.jpg') center / cover; transition: transform .3s; }
.layer:hover .layer-thumb { transform: scale(1.08); }
.layer.on .layer-thumb { background-image: url('/brand/thumb-map.png'); }
.layer-label { position: absolute; inset: auto 0 0 0; padding: 12px 0 5px; text-align: center; font: 800 11.5px/1 var(--en); letter-spacing: .01em; color: #fff; background: linear-gradient(180deg, transparent, rgba(15,8,40,.82)); text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.has-nav .ctl { bottom: calc(var(--gap) + 68px + 14px); }
@media (min-width: 768px) {
  .attrib { left: calc(var(--nav-w) + var(--gap) + 68px + 12px); translate: none; max-width: calc(100vw - var(--nav-w) - 68px - 271px - var(--gap) * 4 - 12px); overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 767px) {
  .ctl-bl { left: var(--gap); bottom: calc(var(--nav-h) + 38px + env(safe-area-inset-bottom)); }
  .layer { width: 60px; height: 60px; border-radius: 16px; }
  .layer-label { font-size: 10.5px; }
  .has-nav .ctl { --cs: 44px; bottom: calc(var(--nav-h) + 38px + 60px + 14px + env(safe-area-inset-bottom)); }
}

/* ---------- mobile tab bar: floating dock, highlighted active tab, + button on the right ---------- */
@media (max-width: 767px) {
  :root { --nav-h: 80px; }
  .nav { inset: auto 10px calc(10px + env(safe-area-inset-bottom)) 10px; width: auto; height: 64px; padding: 6px 8px; gap: 2px; justify-content: space-between; border: 0; border-radius: 26px; background: #fff; box-shadow: 0 10px 34px rgba(40,20,110,.28), 0 0 0 1px rgba(80,50,170,.1); }
  .nav-item { flex: 1; height: 52px; min-width: 0; border-radius: 18px; gap: 2px; -webkit-tap-highlight-color: transparent; transition: background .2s, transform .15s; }
  .nav-item svg { width: 23px; height: 23px; }
  .nav-item span { font: 700 10.5px/1 'Plus Jakarta Sans', system-ui, sans-serif; color: rgba(29,20,69,.55); }
  .nav-item:active { transform: scale(.93); }
  body[data-page="home"] [data-nav="home"], body[data-page="map"] [data-nav="map"], body[data-page="analytics"] [data-nav="analytics"] { background: linear-gradient(135deg, #fff0d9, #f5e4ff); color: #c425d6; }
  body[data-page="home"] [data-nav="home"] span, body[data-page="map"] [data-nav="map"] span, body[data-page="analytics"] [data-nav="analytics"] span { color: #1d1445; font-weight: 800; }
  .nav-create { flex: none; width: 58px; height: 58px; margin: -14px 8px 0; border-radius: 50%; color: #1a0b4a; background: linear-gradient(135deg, #ffd23a, #ff8a00); box-shadow: 0 8px 22px rgba(255,138,0,.5), 0 0 0 4px #fff; }
  .nav-create svg { width: 28px; height: 28px; stroke-width: 2.7; }
  body[data-page="upload"] .nav-create { background: linear-gradient(135deg, #ff8a00, #e11fc0); color: #fff; }
}

/* ---------- suggest a location fix ---------- */
.has-nav .ctl #c-fix { display: grid; place-items: center; align-content: center; gap: 1px; color: #c2410c; }
.ctl-cap { font: 800 9.5px/1 var(--en); letter-spacing: .02em; }
#c-fix svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#c-fix .pen { fill: currentColor; stroke-width: 1.4; }
.has-nav .ctl #c-fix.on { background: linear-gradient(135deg, #ff9d00, #e8650a); color: #fff; border: 0; }
.fixnew { position: relative; width: 0; height: 0; }
.fixpin { position: absolute; left: -17px; top: -43px; width: 34px; height: 44px; display: block; cursor: grab; filter: drop-shadow(0 5px 6px rgba(120,40,0,.4)); }
.fixnew:active .fixpin { cursor: grabbing; }
.fixring { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; box-sizing: border-box; border-radius: 50%; border: 3px solid #ff7a00; background: rgba(255,255,255,.9); pointer-events: none; }
.fixtag { position: absolute; left: 0; top: -76px; translate: -50% 0; padding: 3px 10px; border-radius: 10px; background: #ff7a00; color: #fff; font: 800 11px/1.3 var(--en); white-space: nowrap; box-shadow: 0 3px 10px rgba(120,40,0,.35); pointer-events: none; }
.fixold { display: grid; place-items: center; pointer-events: none; }
.fixold i { width: 18px; height: 18px; border-radius: 50%; border: 3px solid #fff; background: #8a84a3; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.fixold span { position: absolute; top: 22px; padding: 2px 8px; border-radius: 9px; background: #6d6788; color: #fff; font: 700 10.5px/1.3 var(--en); white-space: nowrap; }
.fixbar { position: fixed; z-index: 30; left: 50%; translate: -50% 0; bottom: 78px; width: min(540px, calc(100vw - 160px)); display: grid; gap: 10px; padding: 14px 16px; border-radius: 22px; background: #fff; box-shadow: 0 16px 48px rgba(40,20,110,.34), 0 0 0 1px rgba(80,50,170,.12); font-family: var(--en); animation: fixrise .3s cubic-bezier(.2,1.1,.3,1); }
@keyframes fixrise { from { opacity: 0; transform: translateY(14px); } }
.fixbar-t b { display: block; font: 800 16px/1.3 var(--ml), var(--en); color: var(--ink); }
.fixbar-t small { display: block; margin-top: 2px; font: 500 12.5px/1.4 var(--en); color: var(--ink-2); }
.fixbar input { height: 42px; padding: 0 14px; border: 1px solid var(--line); border-radius: 21px; background: var(--soft); font: 500 14px var(--ml), var(--en); outline: none; width: 100%; }
.fixbar input:focus { border-color: #ff7a00; background: #fff; }
.fixbar-b { display: flex; align-items: center; gap: 8px; }
#fix-dist { margin-right: auto; font: 700 13px var(--en); color: #c2410c; }
.fixbar-b button { height: 42px; padding: 0 18px; border: 0; border-radius: 21px; font: 800 14px var(--en); cursor: pointer; background: var(--soft); color: var(--ink); }
#fix-send { background: linear-gradient(135deg, #ffd23a, #ff8a00); color: #1a0b4a; }
#fix-send:disabled { opacity: .45; cursor: not-allowed; }
body.fixing .ctl-br, body.fixing .legend { opacity: .35; pointer-events: none; }
@media (max-width: 767px) {
  .fixbar { left: 10px; right: 10px; translate: none; width: auto; bottom: calc(var(--nav-h) + 6px + env(safe-area-inset-bottom)); }
  body.fixing .ctl, body.fixing .ctl-bl { display: none; }
}

/* popup extra line */
.notice-card .sm { display: none; }
.notice-card .notice-fix { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: #fff4e6; color: #7a3300; font-size: 14px; }
/* help button next to the compass */
.ctl-tr { display: flex; align-items: flex-start; gap: 10px; }
.ctl-tr #c-help { width: 48px; height: 48px; padding: 0; border-radius: 50%; display: grid; place-items: center; background: var(--glass); border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(60,30,140,.18); color: var(--ink); cursor: pointer; }
.ctl-tr #c-help svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.ctl-tr #c-help:hover { background: #fff; }
.has-nav .topbar { right: calc(var(--gap) + 128px); }
@media (max-width: 767px) { .ctl-tr #c-help { width: 44px; height: 44px; } .has-nav .topbar { right: calc(var(--gap) + 116px); } }
/* tutorial */
.tour { position: fixed; inset: 0; z-index: 130; }
.tour-spot { position: fixed; box-shadow: 0 0 0 9999px rgba(20,10,50,.66); outline: 3px solid #ffb000; outline-offset: -1px; transition: all .3s cubic-bezier(.2,.9,.3,1); pointer-events: none; }
.tour-card { position: fixed; width: min(340px, calc(100vw - 24px)); padding: 18px 18px 14px; border-radius: 20px; background: #fff; color: var(--ink); box-shadow: 0 20px 56px rgba(20,10,60,.5); font-family: var(--en); transition: left .3s cubic-bezier(.2,.9,.3,1), top .3s cubic-bezier(.2,.9,.3,1); }
.tour-n { font: 800 11px/1 var(--en); letter-spacing: .08em; text-transform: uppercase; color: #c425d6; margin-bottom: 8px; }
.tour-card h3 { font: 800 18px/1.25 var(--en); margin-bottom: 6px; }
.tour-card p { font: 500 14px/1.5 var(--en); color: rgba(29,20,69,.8); }
.tour-cta { width: 100%; margin-top: 12px; height: 42px; border: 0; border-radius: 21px; background: linear-gradient(135deg, #ff9d00, #e8650a); color: #fff; font: 800 14px var(--en); cursor: pointer; }
.tour-off { display: flex; align-items: center; gap: 8px; margin-top: 12px; font: 600 12.5px var(--en); color: rgba(29,20,69,.62); cursor: pointer; }
.tour-off input { width: 16px; height: 16px; accent-color: #c425d6; }
.tour-b { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.tour-b button { height: 38px; padding: 0 16px; border: 0; border-radius: 19px; font: 800 13.5px var(--en); cursor: pointer; background: var(--soft); color: var(--ink); }
.tour-b .tour-next { background: var(--ink); color: #fff; }
.tour-b .tour-skip { background: none; color: rgba(29,20,69,.6); padding: 0 8px; }
.tour-b button:disabled { opacity: .35; cursor: default; }
.tour-dots { display: flex; gap: 4px; margin: 0 auto 0 4px; }
.tour-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(29,20,69,.18); }
.tour-dots i.on { background: #c425d6; width: 16px; border-radius: 3px; }
@media (prefers-reduced-motion: reduce) { .tour-spot, .tour-card { transition: none; } }

.fix-key { display: flex; align-items: center; gap: 10px; margin-top: 8px; font: 700 12px var(--en); color: var(--ink); }
.fix-key span { display: inline-flex; align-items: center; gap: 6px; }
.fix-key i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.fix-key i.g { background: #8a84a3; } .fix-key i.o { background: #ff7a00; }
.fix-key .arr { color: var(--ink-2); }

/* notice: a bottom sheet on phones (slides up from the bottom edge, full width, rounded top) */
@media (max-width: 767px) {
  .notice { place-items: end stretch; padding: 0; background: rgba(20,10,50,.55); }
  .notice-card { width: 100%; max-width: none; max-height: 90dvh; overflow-y: auto; overscroll-behavior: contain; border-radius: 28px 28px 0 0; padding: 14px 20px calc(20px + env(safe-area-inset-bottom)); text-align: left; box-shadow: 0 -14px 44px rgba(20,10,60,.4); animation: sheetup .34s cubic-bezier(.2,.9,.3,1); }
  .notice-card::before { content: ""; display: block; width: 44px; height: 5px; margin: 0 auto 14px; border-radius: 3px; background: rgba(29,20,69,.18); }
  .notice-ico { margin: 0 0 10px; }
  .notice-card h2 { font-size: 21px; }
  .notice-card p { font-size: 14px; line-height: 1.45; margin: 8px 0 0; }
  .notice-card .lg { display: none; }
  .notice-card .sm { display: inline; }
  .notice-card .notice-fix { padding: 8px 12px; font-size: 13.5px; }
  .notice-card .notice-ml { font-size: 13px; }
  .notice-card .notice-check small { font-size: 12px; }
  .notice-go { height: 52px; font-size: 17px; }
}
@keyframes sheetup { from { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { .notice-card { animation: none; } }
.fixbar-b button { white-space: nowrap; }
#fix-dist { white-space: nowrap; }
@media (max-width: 767px) { .fixbar-b { gap: 6px; } .fixbar-b button { padding: 0 13px; font-size: 13px; } #fix-dist { font-size: 12px; } }
@media (max-width: 767px) {
  .nav-item.on { background: linear-gradient(135deg, #fff0d9, #f5e4ff); color: #c425d6; }
  .nav-item.on span { color: #1d1445; font-weight: 800; }
}

.has-nav .ctl #c-rot { display: grid; place-items: center; }
.has-nav .ctl #c-rot.on { background: linear-gradient(135deg, #7c3aed, #5b3fa8); color: #fff; border: 0; }
.has-nav .ctl #c-rot.on svg { animation: rot-spin 2.4s linear infinite; }
@keyframes rot-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .has-nav .ctl #c-rot.on svg { animation: none; } }