/* Self-hosted WOFF2 subsets (tools/build_fonts.py). Orbitron: logo, Kp number, verdict only. */
@font-face{font-family:'NP Inter';src:url('assets/fonts/inter-latin.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'NP Orbitron';src:url('assets/fonts/orbitron-latin.woff2') format('woff2');font-weight:500 800;font-style:normal;font-display:swap}
@font-face{font-family:'NP Mono';src:url('assets/fonts/jbmono-latin.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'NP Noto SC';src:url('assets/fonts/noto-sc.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'NP Noto TC';src:url('assets/fonts/noto-tc.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'NP Noto JP';src:url('assets/fonts/noto-jp.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'NP Noto KR';src:url('assets/fonts/noto-kr.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'NP Noto Thai';src:url('assets/fonts/noto-thai.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
:root{--font-lang:'NP Noto SC','PingFang SC','Noto Sans CJK SC','Microsoft YaHei',sans-serif;--cjk:var(--font-lang)}
:lang(zh-TW),:lang(zh-Hant){--font-lang:'NP Noto TC','PingFang TC','Noto Sans CJK TC','Microsoft JhengHei',sans-serif}
:lang(ja){--font-lang:'NP Noto JP','Hiragino Sans','Noto Sans CJK JP','Yu Gothic',sans-serif}
:lang(ko){--font-lang:'NP Noto KR','Apple SD Gothic Neo','Noto Sans CJK KR','Malgun Gothic',sans-serif}
:lang(th){--font-lang:'NP Noto Thai','Sukhumvit Set','Leelawadee UI',sans-serif}
:root,[lang]{--font-ui:'NP Inter',var(--font-lang),system-ui,-apple-system,'Segoe UI',sans-serif;--font-data:'NP Mono',ui-monospace,Menlo,var(--font-lang),monospace;--font-display:'NP Orbitron','NP Inter',var(--font-lang),sans-serif;--cjk:var(--font-lang)}
body{line-height:1.45}
:lang(th) body,:lang(th){line-height:1.6}
button,input,select,textarea{font-family:var(--font-ui)}

:root {
  --bg: #03060c;
  --bg2: #070e1a;
  --panel: rgba(8, 18, 36, 0.55);
  --panel-solid: rgba(10, 22, 42, 0.82);
  --panel-border: rgba(0, 255, 210, 0.22);
  --panel-glow: 0 0 24px rgba(0, 245, 212, 0.08), inset 0 1px 0 rgba(255,255,255,0.06);
  --cyan: #00f5d4;
  --cyan-bright: #5ffbf1;
  --cyan-dim: rgba(0, 245, 212, 0.28);
  --green: #7cff6b;
  --green-dim: rgba(124, 255, 107, 0.28);
  --magenta: #ff4ecd;
  --violet: #8b6cff;
  --amber: #ffc14d;
  --red: #ff5c7a;
  --text: #eef8ff;
  --muted: #7e97ad;
  --glow: 0 0 20px rgba(0, 245, 212, 0.4);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: var(--bg);
  font-family:var(--font-ui);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  min-height: 100%;
}
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
a { color: var(--cyan); }

.app {
  min-height: 100dvh;
  max-width: 480px;
  margin: 0 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  overflow: hidden;
}
.app::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(255,255,255,0.9), transparent),
    radial-gradient(1px 1px at 28% 8%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1.5px 1.5px at 45% 22%, rgba(255,255,255,0.85), transparent),
    radial-gradient(1px 1px at 62% 12%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1.2px 1.2px at 78% 20%, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 88% 9%, rgba(255,255,255,0.55), transparent),
    radial-gradient(1.5px 1.5px at 8% 42%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 35% 38%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.2px 1.2px at 55% 45%, rgba(255,255,255,0.65), transparent),
    radial-gradient(1px 1px at 72% 35%, rgba(255,255,255,0.5), transparent);
  z-index: 0; pointer-events: none;
}
.aurora-bg {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; opacity: 0.85;
}
.aurora-bg svg { width: 100%; height: 100%; }
.app::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 100% 60% at 50% -5%, rgba(0, 140, 120, 0.18), transparent 50%),
    radial-gradient(ellipse 80% 40% at 90% 100%, rgba(80, 40, 180, 0.12), transparent 50%),
    linear-gradient(rgba(0, 245, 212, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 245, 212, 0.025) 1px, transparent 1px);
  background-size: auto, auto, 32px 32px, 32px 32px;
  z-index: 2; pointer-events: none;
}

.topbar, .content, .tab-bar { position: relative; z-index: 10; }
.topbar {
  padding: 14px 16px 8px;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.brand-name {
  font-family:var(--font-display); font-size: 14px; font-weight: 700;
  letter-spacing: 2px; color: var(--cyan); text-shadow: var(--glow);
}
.brand-sub {
  font-family:var(--font-ui); font-size: 12px; font-weight: 500;
  color: var(--muted); letter-spacing: 0.8px; margin-top: 2px;
}
.header-right { display: flex; align-items: center; gap: 8px; }
.lang-toggle {
  display: flex; background: rgba(0, 245, 212, 0.06); border: 1px solid var(--panel-border);
  border-radius: 20px; overflow: hidden; font-size: 11px; font-family:var(--font-ui);font-variant-numeric:tabular-nums;
}
.lang-toggle button { padding: 5px 11px; color: var(--muted); }
.lang-toggle button.active {
  background: linear-gradient(135deg, rgba(0,245,212,0.35), rgba(124,255,107,0.2));
  color: var(--cyan-bright); font-weight: 600;
}
.live-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size:11px; font-family:var(--font-data);font-variant-numeric:tabular-nums; color: var(--green);
  border: 1px solid rgba(124,255,107,0.4); padding: 3px 8px; border-radius: 999px;
  background: rgba(124,255,107,0.08);
}
.live-pill.warn { color: var(--amber); border-color: rgba(255,193,77,0.4); background: rgba(255,193,77,0.08); }
.live-pill.err { color: var(--red); border-color: rgba(255,92,122,0.4); background: rgba(255,92,122,0.08); }
.live-dot {
  width: 6px; height: 6px; border-radius: 50%; background: currentColor;
  box-shadow: 0 0 8px currentColor; animation: pulse 1.6s infinite;
}
@keyframes pulse { 0%,100%{ opacity:1 } 50%{ opacity:.45 } }

.content {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: 0 16px 100px; display: flex; flex-direction: column; gap: 10px;
  -webkit-overflow-scrolling: touch;
}
.view { display: none; flex-direction: column; gap: 10px; }
.view.active { display: flex; }

.panel {
  background: var(--panel); border: 1px solid var(--panel-border); border-radius: 18px;
  padding: 14px 15px; backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: var(--panel-glow); position: relative;
}
.panel::before {
  content: ''; position: absolute; top: 0; left: 16px; right: 16px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,245,212,0.45), transparent); opacity: 0.7;
}
.panel-title {
  font-size:11px; color: var(--muted); letter-spacing: 1.5px; text-transform: uppercase;
  font-family:var(--font-ui); font-weight: 600; margin-bottom: 8px;
  display: flex; justify-content: space-between; align-items: center;
}
.mono { font-family:var(--font-data);font-variant-numeric:tabular-nums; }
.skel { background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.1), rgba(255,255,255,0.04));
  background-size: 200% 100%; animation: shimmer 1.2s infinite; border-radius: 8px; min-height: 14px; }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.unavailable { font-size: 12px; color: var(--amber); font-family:var(--font-ui);font-variant-numeric:tabular-nums; padding: 8px 0; }

/* Kp meter */
.kp-meter { width: 100%; }
.kp-meter-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 10px; gap: 10px; }
.kp-big { font-family:var(--font-display); font-size: 36px; font-weight: 800; line-height: 1; letter-spacing: -1px; }
.kp-big.lvl-calm { color: #00f5d4; text-shadow: 0 0 18px rgba(0,245,212,0.5); }
.kp-big.lvl-active { color: #ffc14d; text-shadow: 0 0 18px rgba(255,193,77,0.5); }
.kp-big.lvl-storm { color: #ff5c7a; text-shadow: 0 0 18px rgba(255,92,122,0.55); }
.kp-big.lvl-severe { color: #c77dff; text-shadow: 0 0 18px rgba(199,125,255,0.55); }
.kp-plain { font-family:var(--font-ui); font-size: 15px; font-weight: 600; margin-top: 4px; }
.kp-plain-en { font-size: 11px; color: var(--muted); font-family:var(--font-ui);font-variant-numeric:tabular-nums; margin-top: 2px; }
.kp-needed { text-align: right; font-size: 11px; color: var(--muted); font-family:var(--font-ui);font-variant-numeric:tabular-nums; line-height: 1.35; }
.kp-needed b { color: var(--cyan); font-size: 14px; }
.kp-track { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; position: relative; padding-top: 18px; padding-bottom: 22px; margin-top: 10px; }
.kp-seg { height: 14px; border-radius: 3px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.06); }
.kp-seg.on-0, .kp-seg.on-1, .kp-seg.on-2 { background: linear-gradient(180deg,#5ffbf1,#00c9a7); border-color: rgba(0,245,212,0.4); box-shadow: 0 0 8px rgba(0,245,212,0.35); }
.kp-seg.on-3 { background: linear-gradient(180deg,#7cff6b,#00c9a7); border-color: rgba(124,255,107,0.4); box-shadow: 0 0 8px rgba(124,255,107,0.35); }
.kp-seg.on-4 { background: linear-gradient(180deg,#ffc14d,#e8a020); border-color: rgba(255,193,77,0.45); box-shadow: 0 0 8px rgba(255,193,77,0.4); }
.kp-seg.on-5 { background: linear-gradient(180deg,#ff8a5c,#ff5c7a); border-color: rgba(255,92,122,0.45); box-shadow: 0 0 8px rgba(255,92,122,0.4); }
.kp-seg.on-6 { background: linear-gradient(180deg,#ff5c7a,#e04080); border-color: rgba(255,92,122,0.5); box-shadow: 0 0 10px rgba(255,92,122,0.45); }
.kp-seg.on-7 { background: linear-gradient(180deg,#e040a0,#c77dff); border-color: rgba(199,125,255,0.5); box-shadow: 0 0 10px rgba(199,125,255,0.45); }
.kp-seg.on-8, .kp-seg.on-9 { background: linear-gradient(180deg,#c77dff,#9b5de5); border-color: rgba(155,93,229,0.55); box-shadow: 0 0 12px rgba(155,93,229,0.5); }
.kp-marker { position: absolute; top: 12px; width: 2px; height: 26px; background: #fff; box-shadow: 0 0 8px #fff, 0 0 14px var(--cyan); border-radius: 1px; z-index: 3; transform: translateX(-50%); }
.kp-marker::after { content: attr(data-label); position: absolute; top: -14px; left: 50%; transform: translateX(-50%); font-size:11px; font-family:var(--font-data);font-variant-numeric:tabular-nums; color: #fff; white-space: nowrap; letter-spacing: 0.5px; background: rgba(3,6,12,0.85); padding: 1px 4px; border-radius: 3px; }
.kp-need-marker { position: absolute; top: 34px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 7px solid var(--cyan); transform: translateX(-50%); z-index: 2; filter: drop-shadow(0 0 4px var(--cyan)); }
.kp-need-marker::after { content: attr(data-label); position: absolute; top: 10px; left: 50%; transform: translateX(-50%); font-size:11px; font-family:var(--font-data);font-variant-numeric:tabular-nums; color: var(--cyan); white-space: nowrap; }
.live-pill { max-width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kp-scale { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; margin-top: 2px; font-family:var(--font-data);font-variant-numeric:tabular-nums; font-size:11px; color: var(--muted); text-align: center; }

.verdict { border-radius: 20px; padding: 16px 18px; border: 1.5px solid; position: relative; overflow: hidden; backdrop-filter: blur(20px) saturate(1.4); }
.verdict.go { background: linear-gradient(135deg, rgba(124,255,107,0.18), rgba(0,245,212,0.1)); border-color: rgba(124,255,107,0.55); box-shadow: 0 0 30px rgba(124,255,107,0.15); }
.verdict.maybe { background: linear-gradient(135deg, rgba(255,193,77,0.16), rgba(255,140,60,0.08)); border-color: rgba(255,193,77,0.5); }
.verdict.no { background: linear-gradient(135deg, rgba(255,92,122,0.16), rgba(180,40,80,0.08)); border-color: rgba(255,92,122,0.5); }
.verdict-word { font-family:var(--font-display); font-size: 42px; font-weight: 800; letter-spacing: 2px; line-height: 1; }
.verdict.go .verdict-word { color: #7cff6b; text-shadow: 0 0 24px rgba(124,255,107,0.6); }
.verdict.maybe .verdict-word { color: #ffc14d; text-shadow: 0 0 24px rgba(255,193,77,0.55); }
.verdict.no .verdict-word { color: #ff5c7a; text-shadow: 0 0 24px rgba(255,92,122,0.55); }
.verdict-zh { font-family:var(--font-ui); font-size: 18px; font-weight: 600; margin-top: 6px; }
.verdict.go .verdict-zh { color: #b8ffae; }
.verdict.maybe .verdict-zh { color: #ffe0a0; }
.verdict.no .verdict-zh { color: #ffb0be; }
.verdict-meta { display: flex; gap: 16px; margin-top: 12px; flex-wrap: wrap; font-family:var(--font-ui);font-variant-numeric:tabular-nums; font-size: 12px; }
.verdict-meta .k { color: var(--muted); margin-right: 4px; }
.verdict-reason { margin-top: 10px; font-size: 12px; color: var(--muted); line-height: 1.45; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.08); }

.metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mchip { border-radius: 14px; padding: 12px; border: 1px solid var(--panel-border); background: var(--panel); backdrop-filter: blur(16px); box-shadow: var(--panel-glow); }
.mchip.good { border-color: rgba(124,255,107,0.4); }
.mchip.warn { border-color: rgba(255,193,77,0.4); }
.mchip.bad { border-color: rgba(255,92,122,0.4); }
.mchip-label { font-size: 11px; color: var(--muted); font-family:var(--font-ui); font-weight: 500; }
.mchip-plain { font-size:11px; color: var(--cyan); margin-top: 1px; font-family:var(--font-ui);font-variant-numeric:tabular-nums; }
.mchip-val { font-family:var(--font-data);font-variant-numeric:tabular-nums; font-size: 22px; font-weight: 700; margin-top: 6px; color: var(--cyan); text-shadow: var(--glow); }
.mchip.good .mchip-val { color: var(--green); text-shadow: 0 0 14px rgba(124,255,107,0.45); }
.mchip.warn .mchip-val { color: var(--amber); text-shadow: 0 0 14px rgba(255,193,77,0.4); }
.mchip.bad .mchip-val { color: var(--red); text-shadow: 0 0 14px rgba(255,92,122,0.4); }
.mchip-state { font-size:11px; margin-top: 4px; }
.mchip.good .mchip-state { color: var(--green); }
.mchip.warn .mchip-state { color: var(--amber); }
.mchip.bad .mchip-state { color: var(--red); }

.loc-row { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.loc-name { font-family:var(--font-ui); font-size:18px; font-weight:600; }
.loc-sub { font-size:11px; color:var(--muted); font-family:var(--font-ui);font-variant-numeric:tabular-nums; margin-top:2px; }
.btn-chip {
  font-size:11px; font-family:var(--font-ui);font-variant-numeric:tabular-nums; color:var(--cyan);
  border:1px solid var(--cyan-dim); padding:5px 10px; border-radius:12px; background:rgba(0,245,212,0.08);
}

/* Map */
.country-picker { display:flex; gap:6px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none; }
.country-picker::-webkit-scrollbar { display:none; }
.chip {
  flex-shrink:0; font-size:11px; font-family:var(--font-ui);font-variant-numeric:tabular-nums; padding:7px 11px; border-radius:14px;
  border:1px solid var(--panel-border); color:var(--muted); background:rgba(0,245,212,0.04); white-space:nowrap;
}
.chip.on { color:var(--cyan-bright); border-color:var(--cyan); background:rgba(0,245,212,0.18); box-shadow:0 0 14px rgba(0,245,212,0.25); }
.map-stage {
  position:relative; border-radius:18px; overflow:hidden; border:1px solid var(--panel-border);
  min-height:410px; background:linear-gradient(180deg,#041018,#0a1628); box-shadow:var(--panel-glow);
}
.map-grid {
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(0,245,212,0.035) 1px,transparent 1px),linear-gradient(90deg,rgba(0,245,212,0.035) 1px,transparent 1px);
  background-size:28px 28px; opacity:0.65; pointer-events:none;
}
.map-svg { position:absolute; inset:6px 2px 26px 2px; width:calc(100% - 4px); height:calc(100% - 32px); z-index:2; }
.country-label { position:absolute; top:10px; left:12px; z-index:5; font-family:var(--font-ui);font-weight:700; font-size:12px; letter-spacing:2px; color:var(--cyan); text-shadow:var(--glow); pointer-events:none; }
.country-sub { font-family:var(--font-ui);font-variant-numeric:tabular-nums; font-size:11px; color:var(--muted); letter-spacing:0.5px; margin-top:3px; }
.legend { position:absolute; bottom:8px; left:8px; z-index:6; font-size:11px; font-family:var(--font-ui);font-variant-numeric:tabular-nums; color:var(--muted); background:rgba(5,10,20,0.9); padding:7px 9px; border-radius:10px; border:1px solid var(--panel-border); line-height:1.65; backdrop-filter:blur(10px); }
.lg-dot { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:4px; vertical-align:middle; }
.map-svg .marker { cursor:pointer; }
.landmark-card { display:flex; gap:12px; align-items:stretch; padding:12px !important; }
.photo-ph { width:96px; height:96px; border-radius:14px; flex-shrink:0; border:1px solid var(--panel-border); background-size:cover; background-position:center; position:relative; box-shadow:0 0 16px rgba(124,255,107,0.15); }
.photo-ph::after { content:'Wikimedia'; position:absolute; bottom:5px; right:7px; font-size:11px; color:rgba(255,255,255,0.55); font-family:var(--font-ui);font-variant-numeric:tabular-nums; background:rgba(0,0,0,0.45); padding:1px 4px; border-radius:3px; }
.card-body { flex:1; display:flex; flex-direction:column; justify-content:center; min-width:0; }
.card-title { font-size:15px; font-weight:600; font-family:var(--font-ui); }
.card-sub { font-size:11px; color:var(--muted); font-family:var(--font-ui);font-variant-numeric:tabular-nums; margin-top:2px; }
.card-stats { display:flex; gap:10px; margin-top:6px; font-family:var(--font-ui);font-variant-numeric:tabular-nums; font-size:11px; }
.card-stats b { color:var(--green); }
.zone-tag { display:inline-block; font-size:11px; font-family:var(--font-ui);font-variant-numeric:tabular-nums; color:var(--green); border:1px solid rgba(124,255,107,0.45); padding:3px 8px; border-radius:8px; background:rgba(124,255,107,0.1); margin-top:5px; align-self:flex-start; }

/* Weather */
.hour-scroll { display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
.hour-scroll::-webkit-scrollbar { display:none; }
.hour { flex:0 0 52px; text-align:center; padding:8px 2px; border-radius:12px; border:1px solid transparent; background:rgba(255,255,255,0.02); font-family:var(--font-data);font-variant-numeric:tabular-nums; }
.hour.good { border-color:rgba(124,255,107,0.4); background:rgba(124,255,107,0.08); }
.hh { font-size:11px; color:var(--muted); }
.ht { font-family:var(--font-ui);font-weight:700; font-size:14px; color:var(--text); margin:4px 0; }
.hw { font-size:11px; color:var(--cyan); }
.hg { font-size:11px; color:var(--muted); margin-top:2px; }
.clouds { display:flex; gap:2px; justify-content:center; align-items:flex-end; height:36px; margin:6px 0 4px; }
.cbar { width:6px; height:100%; background:rgba(255,255,255,0.06); border-radius:2px; position:relative; overflow:hidden; }
.cbar i { position:absolute; bottom:0; left:0; right:0; background:linear-gradient(180deg,#7a93a8,#4a6070); border-radius:2px; }
.cbar.mid i { background:linear-gradient(180deg,#a0b4c4,#607888); }
.cbar.hi i { background:linear-gradient(180deg,#c8d8e4,#8090a0); }
.ctot { font-size:11px; color:var(--amber); }
.pr { font-size:11px; color:var(--cyan); margin-top:3px; min-height:12px; }
.hour-legend { display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; font-size:11px; color:var(--muted); font-family:var(--font-ui);font-variant-numeric:tabular-nums; }
.day-row { display:grid; grid-template-columns: 72px 70px 62px 48px 42px 40px; align-items:center; gap:2px; padding:9px 0; border-bottom:1px solid rgba(0,245,212,0.08); font-size:11px; }
.day-row:last-child { border-bottom:none; }
.dd b { display:block; font-family:var(--font-ui); font-size:13px; }
.dd span { font-size:11px; color:var(--muted); font-family:var(--font-data);font-variant-numeric:tabular-nums; }
.dt .hi { font-family:var(--font-data);font-variant-numeric:tabular-nums; color:var(--text); }
.dt .lo { color:var(--muted); font-family:var(--font-data);font-variant-numeric:tabular-nums; }
.dw { font-family:var(--font-ui);font-variant-numeric:tabular-nums; font-size:11px; color:var(--cyan); }
.dw small { color:var(--muted); }
.dc,.dp { font-family:var(--font-data);font-variant-numeric:tabular-nums; font-size:11px; color:var(--muted); }
.dbadge { font-size:11px; font-family:var(--font-ui);font-variant-numeric:tabular-nums; padding:2px 5px; border-radius:6px; text-align:center; }
.dbadge.go { color:var(--green); border:1px solid rgba(124,255,107,0.4); background:rgba(124,255,107,0.1); }
.dbadge.meh { color:var(--amber); border:1px solid rgba(255,193,77,0.35); background:rgba(255,193,77,0.08); }

/* Forecast */
.days { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.day-chip { text-align:center; padding:11px 6px; border-radius:14px; border:1px solid var(--panel-border); background:rgba(0,245,212,0.04); cursor:pointer; }
.day-chip.on { border-color:var(--cyan); background:rgba(0,245,212,0.14); box-shadow:0 0 16px rgba(0,245,212,0.18); }
.day-name { font-size:11px; color:var(--muted); }
.day-date { font-family:var(--font-ui);font-weight:700; font-size:13px; margin-top:2px; }
.day-kp { font-family:var(--font-data);font-variant-numeric:tabular-nums; font-size:18px; color:var(--green); margin-top:6px; font-weight:700; }
.day-tag { font-size:11px; color:var(--muted); margin-top:2px; }
.chart { height:160px; position:relative; padding:6px 2px 22px 26px; }
.chart-y { position:absolute; left:0; top:6px; bottom:22px; width:22px; display:flex; flex-direction:column; justify-content:space-between; font-family:var(--font-data);font-variant-numeric:tabular-nums; font-size:11px; color:var(--muted); text-align:right; padding-right:4px; }
.chart-area { height:100%; position:relative; border-left:1px solid rgba(0,245,212,0.22); border-bottom:1px solid rgba(0,245,212,0.22); }
.grid-h { position:absolute; left:0; right:0; border-top:1px dashed rgba(0,245,212,0.1); }
.bars { position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:space-around; padding:0 2px; }
.bar-col { display:flex; flex-direction:column; align-items:center; width:28px; height:100%; justify-content:flex-end; position:relative; }
.bar { width:13px; border-radius:4px 4px 2px 2px; background:linear-gradient(180deg,var(--green),var(--cyan)); box-shadow:0 0 10px rgba(0,245,212,0.35); }
.bar.storm { background:linear-gradient(180deg,#ff5c7a,#ffc14d); }
.bar.mid { background:linear-gradient(180deg,var(--amber),var(--cyan)); }
.bar-val { font-family:var(--font-data);font-variant-numeric:tabular-nums; font-size:11px; color:var(--cyan); margin-bottom:2px; }
.bar-h { font-family:var(--font-data);font-variant-numeric:tabular-nums; font-size:11px; color:var(--muted); position:absolute; bottom:-16px; }
.legend-row { display:flex; gap:14px; font-size:11px; color:var(--muted); font-family:var(--font-ui);font-variant-numeric:tabular-nums; justify-content:center; margin-top:4px; }
.summary { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.sum-card .val { font-family:var(--font-data);font-variant-numeric:tabular-nums; font-size:22px; color:var(--cyan); margin-top:4px; text-shadow:var(--glow); }
.sum-card .note { font-size:11px; color:var(--muted); margin-top:5px; line-height:1.4; }

/* Moon / more */
.spotlight{display:flex;gap:14px;align-items:center}
.big-moon{width:70px;height:70px;border-radius:50%;background:linear-gradient(118deg,#12182a 40%,#e0e8f8 40%);box-shadow:0 0 24px rgba(180,200,255,0.28),inset -8px -4px 16px rgba(0,0,0,0.45);flex-shrink:0;border:1px solid rgba(0,245,212,0.25)}
.spot-title{font-size:15px;font-weight:600;font-family:var(--font-ui)}
.spot-bright{font-family:var(--font-data);font-variant-numeric:tabular-nums;font-size:22px;color:var(--amber);margin-top:4px}
.spot-note{font-size:11px;color:var(--muted);margin-top:4px;line-height:1.4;font-family:var(--font-ui);font-variant-numeric:tabular-nums}
.dark-chip{display:inline-block;margin-top:6px;font-size:11px;font-family:var(--font-ui);font-variant-numeric:tabular-nums;color:var(--green);border:1px solid rgba(124,255,107,0.45);padding:3px 9px;border-radius:8px;background:rgba(124,255,107,0.1)}
.month-head{display:flex;justify-content:space-between;align-items:center}
.month-title{font-family:var(--font-ui);font-weight:700;font-size:15px;color:var(--cyan);letter-spacing:2px}
.weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:10px;margin-bottom:5px;text-align:center;font-size:11px;color:var(--muted);font-family:var(--font-ui);font-variant-numeric:tabular-nums}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cell{aspect-ratio:1;border-radius:9px;border:1px solid transparent;background:rgba(255,255,255,0.025);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;position:relative}
.cell .d{font-family:var(--font-data);font-variant-numeric:tabular-nums;font-size:11px}
.cell .m{width:12px;height:12px;border-radius:50%;background:#c8d0e0;box-shadow:inset -3px -1px 4px rgba(0,0,0,0.5)}
.cell.empty{background:transparent}
.cell.dark{border-color:rgba(124,255,107,0.5);background:rgba(124,255,107,0.1)}
.cell.dark .d{color:var(--green)}
.cell.today{border-color:var(--cyan);box-shadow:0 0 12px rgba(0,245,212,0.28)}
.cell.new .m{background:#1a2030;border:1px solid rgba(200,210,230,0.3);box-shadow:none}
.cell.full .m{background:#eef2ff;box-shadow:0 0 8px rgba(200,220,255,0.45)}
.cell.crescent .m{background:linear-gradient(110deg,#1a2030 45%,#d0d8e8 45%)}
.cell.gibbous .m{background:linear-gradient(250deg,#1a2030 25%,#d8e0f0 25%)}
.cell.quarter .m{background:linear-gradient(90deg,#1a2030 50%,#d8e0f0 50%)}
.seg{display:flex;background:rgba(0,245,212,0.06);border:1px solid var(--panel-border);border-radius:14px;overflow:hidden}
.seg button{flex:1;text-align:center;padding:9px 4px;font-size:12px;color:var(--muted)}
.seg button.on{background:linear-gradient(135deg,rgba(0,245,212,0.28),rgba(124,255,107,0.15));color:var(--cyan-bright);font-weight:600}
.gallery-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.g-card{border-radius:14px;overflow:hidden;border:1px solid var(--panel-border);background:rgba(0,20,30,0.55)}
.g-photo{height:100px;display:flex;align-items:center;justify-content:center;position:relative;text-align:center;background:repeating-linear-gradient(45deg,rgba(0,245,212,0.05) 0 8px,transparent 8px 16px),linear-gradient(160deg,#0a1520,#122438)}
.ph-label{font-family:var(--font-ui);font-weight:700;font-size:11px;letter-spacing:1px;color:var(--amber);line-height:1.4}
.g-meta{padding:8px 10px 10px}
.g-title{font-size:12px;font-weight:600}
.g-loc{font-size:11px;color:var(--amber);margin-top:2px;font-family:var(--font-ui);font-variant-numeric:tabular-nums}
.trip-card{display:flex;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid rgba(0,245,212,0.08)}
.trip-card:last-child{border-bottom:none}
.trip-photo{width:48px;height:48px;border-radius:12px;flex-shrink:0;background-size:cover;background-position:center;border:1px solid var(--panel-border)}
.trip-title{font-size:13px;font-weight:600}
.trip-sub{font-size:11px;color:var(--muted);margin-top:2px}
.trip-price{font-family:var(--font-data);font-variant-numeric:tabular-nums;font-size:12px;color:var(--amber);margin-top:3px}
.aff-tag{font-size:11px;color:var(--muted);border:1px solid rgba(122,147,168,0.4);padding:3px 6px;border-radius:4px;font-family:var(--font-ui);font-variant-numeric:tabular-nums}
.cta-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cta{text-align:center;padding:12px 8px;border-radius:14px;border:1px solid var(--panel-border);background:rgba(0,245,212,0.05)}
.cta strong{display:block;font-family:var(--font-ui);font-weight:700;font-size:11px;color:var(--cyan);letter-spacing:1px;margin-bottom:4px}
.cta span{color:var(--muted);font-size:11px}
.footer-brand{text-align:center;font-size:11px;color:var(--muted);padding:8px 0 4px;font-family:var(--font-ui);font-variant-numeric:tabular-nums}

.tab-bar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: 100%; max-width: 480px;
  height: calc(72px + var(--safe-bottom)); padding: 8px 8px calc(12px + var(--safe-bottom));
  display: flex; justify-content: space-around; align-items: flex-start;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.85) 28%);
  border-top: 1px solid rgba(0, 245, 212, 0.1); z-index: 40; backdrop-filter: blur(16px);
}
.tab { display:flex; flex-direction:column; align-items:center; gap:3px; font-size:11px; color:var(--muted); width:60px; }
.tab.active { color:var(--cyan); text-shadow:0 0 10px rgba(0,245,212,0.55); }
.tab-icon { width:28px; height:28px; display:flex; align-items:center; justify-content:center; font-size:15px; border-radius:10px; }
.tab.active .tab-icon { background:rgba(0,245,212,0.12); box-shadow:0 0 14px rgba(0,245,212,0.2); }

.home-desktop { display: none; }
.desk-days { display:flex; gap:8px; }
.desk-day { flex:1; text-align:center; padding:10px 6px; border-radius:12px; border:1px solid var(--panel-border); background:rgba(0,245,212,0.05); }
.desk-day .ddn { font-size:11px; color:var(--muted); }
.desk-day .ddk { font-family:var(--font-data);font-variant-numeric:tabular-nums; font-size:16px; color:var(--cyan); margin-top:4px; }
.desk-hour-row { display:flex; gap:8px; }
.desk-h { flex:1; text-align:center; font-family:var(--font-data);font-variant-numeric:tabular-nums; font-size:11px; }
.desk-h .hbar { height:48px; margin:6px auto; width:14px; background:rgba(255,255,255,0.06); border-radius:4px; position:relative; overflow:hidden; }
.desk-h .hbar i { position:absolute; bottom:0; left:0; right:0; background:linear-gradient(180deg,#a0b4c4,#4a6070); }
.desk-h .hv { color:var(--amber); }
.mini-map-svg { width:100%; height:220px; display:block; }
.mini-map-cap { margin-top:6px; font-family:var(--font-ui);font-variant-numeric:tabular-nums; font-size:11px; color:var(--cyan); }

/* Desktop dashboard */
@media (min-width: 900px) {
  body { background: #02050a; }
  .app { max-width: 1240px; min-height: 100vh; border-left:1px solid rgba(0,245,212,0.08); border-right:1px solid rgba(0,245,212,0.08); }
  .content { padding: 0 24px 40px; }
  .tab-bar { position: sticky; transform: none; left: auto; max-width: none; height: 64px; padding-bottom: 10px; }
  .home-desktop { display: contents; }
  #homeDesktop[hidden] { display: contents !important; }
  #view-home.active {
    display: grid;
    grid-template-columns: 1.15fr 0.95fr 0.95fr;
    grid-template-areas:
      "loc loc loc"
      "locate locate locate"
      "verdict kp kp"
      "metrics kp kp"
      "hours hours moon"
      "map map trip"
      "fc fc trip";
    gap: 12px;
    align-items: stretch;
  }
  #view-home .loc-panel { grid-area: loc; }
  #view-home .verdict { grid-area: verdict; }
  #view-home .kp-panel { grid-area: kp; min-height: 280px; }
  #view-home .metric-grid { grid-area: metrics; }
  #homeDesktop .desk-fc { grid-area: fc; }
  #homeDesktop .desk-hours { grid-area: hours; }
  #homeDesktop .desk-map { grid-area: map; min-height: 280px; }
  #homeDesktop .desk-moon { grid-area: moon; }
  #homeDesktop .desk-trip { grid-area: trip; }
  #view-map.active { display:grid; grid-template-columns: minmax(0,1.5fr) minmax(320px,0.9fr); grid-template-rows: auto auto auto 1fr; gap:12px; align-items:start; }
  #view-map .country-picker { grid-column: 1 / -1; grid-row:2; }
  #view-map #mapLocate { grid-column: 1 / -1; grid-row:1; }
  #view-home #homeLocate { grid-area: locate; }
  #view-mw #mwLocate { grid-area: locate; }
  #view-map .map-stage { grid-column:1; grid-row: 3 / span 2; }
  #view-map .landmark-card { grid-column:2; grid-row:3; }
  #view-map .lm-list { grid-column:2; grid-row:4; }
  #view-weather.active { display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
  #view-weather .wx-loc { grid-column: 1 / -1; }
  #view-forecast.active { display:grid; grid-template-columns: 1.1fr 0.9fr; gap:12px; }
  #view-forecast #fcKp { grid-column: 1 / -1; }
  #view-forecast #fcDays { grid-column: 1 / -1; }
}

/* —— Milky Way tab —— */
.tab { width: 52px; font-size:11px; }
.mw-presets {
  display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.mw-presets::-webkit-scrollbar { display: none; }
.mw-chip {
  flex: 0 0 auto; scroll-snap-align: start;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px 6px 6px; border-radius: 999px;
  border: 1px solid var(--panel-border); background: rgba(0,245,212,0.05);
  min-width: 0; max-width: 200px;
}
.mw-chip.on {
  border-color: rgba(139,108,255,0.65);
  background: linear-gradient(135deg, rgba(139,108,255,0.22), rgba(0,245,212,0.1));
  box-shadow: 0 0 16px rgba(139,108,255,0.25);
}
.mw-chip img {
  width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
  border: 1.5px solid rgba(0,245,212,0.35);
}
.mw-chip .mw-chip-t { font-size: 11px; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mw-chip .mw-chip-s { font-size:11px; color: var(--muted); font-family:var(--font-ui);font-variant-numeric:tabular-nums; }

.mw-core-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px;
}
.mw-core-cell {
  text-align: center; padding: 10px 6px; border-radius: 12px;
  background: rgba(0,245,212,0.05); border: 1px solid var(--panel-border);
}
.mw-core-cell .k { font-size:11px; color: var(--muted); letter-spacing: 0.5px; }
.mw-core-cell .v {
  font-family:var(--font-data);font-variant-numeric:tabular-nums; font-size: 14px; color: var(--cyan-bright);
  margin-top: 4px; letter-spacing: 0.5px;
}
.mw-core-cell .u { font-size:11px; color: var(--muted); margin-top: 2px; font-family:var(--font-data);font-variant-numeric:tabular-nums; }

.mw-tl {
  position: relative; height: 118px; margin-top: 8px;
  border-radius: 12px; overflow: hidden;
  background: linear-gradient(180deg, #061018, #0a1524);
  border: 1px solid var(--panel-border);
}
.mw-tl svg { width: 100%; height: 100%; display: block; }
.mw-tl-legend {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px;
  font-size:11px; color: var(--muted); font-family:var(--font-ui);font-variant-numeric:tabular-nums;
}
.mw-tl-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }

.mw-season-bar {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; margin-top: 10px;
}
.mw-mo {
  text-align: center; padding: 8px 2px; border-radius: 8px;
  border: 1px solid transparent; font-family:var(--font-ui);font-variant-numeric:tabular-nums; font-size:11px;
}
.mw-mo .alt { font-family:var(--font-data);font-variant-numeric:tabular-nums; font-size: 11px; margin-top: 3px; }
.mw-mo.best { background: rgba(124,255,107,0.18); border-color: rgba(124,255,107,0.45); color: #b8ffae; }
.mw-mo.good { background: rgba(0,245,212,0.12); border-color: rgba(0,245,212,0.35); color: var(--cyan-bright); }
.mw-mo.edge { background: rgba(255,193,77,0.1); border-color: rgba(255,193,77,0.3); color: var(--amber); }
.mw-mo.poor { background: rgba(255,92,122,0.08); border-color: rgba(255,92,122,0.22); color: #ff8fa3; }
.mw-mo.cur { outline: 2px solid var(--violet); outline-offset: 1px; box-shadow: 0 0 12px rgba(139,108,255,0.4); }

.mw-tips-list { margin-top: 8px; display: grid; gap: 8px; }
.mw-tip {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px; border-radius: 12px;
  background: rgba(139,108,255,0.08); border: 1px solid rgba(139,108,255,0.25);
  font-size: 12px; line-height: 1.45; color: var(--text);
}
.mw-tip .ico {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,245,212,0.12); color: var(--cyan); font-size: 14px;
}
.mw-light-note {
  margin-top: 8px; font-size: 11px; color: var(--muted); line-height: 1.4;
  padding: 8px 10px; border-radius: 10px; background: rgba(255,193,77,0.06);
  border: 1px solid rgba(255,193,77,0.2);
}

@media (min-width: 900px) {
  #view-mw.active {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr 0.9fr;
    grid-template-areas:
      "locate locate locate"
      "presets presets presets"
      "loc loc loc"
      "verdict core tips"
      "timeline timeline season"
      "metrics metrics metrics";
    gap: 12px;
  }
  #view-mw .mw-presets { grid-area: presets; }
  #view-mw #mwLoc { grid-area: loc; }
  #view-mw #mwVerdict { grid-area: verdict; }
  #view-mw #mwCore { grid-area: core; }
  #view-mw #mwTips { grid-area: tips; }
  #view-mw #mwTimeline { grid-area: timeline; min-height: 200px; }
  #view-mw #mwSeason { grid-area: season; }
  #view-mw #mwMetrics { grid-area: metrics; }
  #view-mw .footer-brand { grid-column: 1 / -1; }
}

/* —— Map v2: picker, zoomable map, hero card, list —— */
.country-picker.cp2, .country-picker { display:grid; grid-template-rows:repeat(2,auto); grid-auto-flow:column; grid-auto-columns:max-content; gap:6px; overflow-x:auto; padding:2px 2px 4px; scroll-snap-type:x proximity; }
.cchip { display:flex; align-items:center; gap:6px; scroll-snap-align:start; padding:7px 10px 7px 9px; cursor:pointer; }
.cchip .cflag { font-size:14px; line-height:1; }
.cchip .cname { font-size:11px; }
.cchip .ccount { font-size:11px; color:var(--bg); background:var(--cyan-dim); color:var(--cyan-bright); border-radius:8px; padding:1px 6px; font-weight:700; }
.cchip.on .ccount { background:var(--cyan); color:#03141a; }
.cchip .chemi { font-size:11px; color:var(--violet); border:1px solid rgba(139,108,255,0.5); border-radius:6px; padding:0 4px; }
.map-stage { min-height:0 !important; display:flex; flex-direction:column; padding:0; }
.map-head { display:flex; justify-content:space-between; align-items:flex-start; padding:10px 12px 4px; gap:8px; position:relative; z-index:4; }
.map-head .country-label { position:static; font-size:12px; }
.map-head .country-label span { color:var(--text); font-family:var(--font-ui); letter-spacing:1px; }
.map-head .country-sub { position:static; }
.map-count { font-family:var(--font-ui);font-variant-numeric:tabular-nums; font-size:11px; color:var(--muted); white-space:nowrap; border:1px solid var(--panel-border); border-radius:10px; padding:4px 8px; background:rgba(5,10,20,0.6); }
.map-count b { color:var(--green); font-size:13px; font-family:var(--font-data);font-variant-numeric:tabular-nums; }
.map-canvas { position:relative; width:100%; max-height:72vh; min-height:260px; touch-action:none; overflow:hidden; margin:0 auto; }
.map-canvas .map-svg { position:absolute; inset:0; width:100%; height:100%; touch-action:none; user-select:none; -webkit-user-select:none; }
.map-svg text { font-family:var(--font-ui);font-variant-numeric:tabular-nums; pointer-events:auto; }
.map-svg .marker { cursor:pointer; }
.map-svg .marker.on circle { filter:drop-shadow(0 0 4px rgba(124,255,107,0.8)); }
.map-ctrl { position:absolute; right:8px; top:8px; z-index:6; display:flex; flex-direction:column; gap:6px; }
.map-ctrl button { width:34px; height:34px; border-radius:10px; border:1px solid var(--panel-border); background:rgba(5,12,24,0.88); color:var(--cyan-bright); font-size:16px; line-height:1; cursor:pointer; backdrop-filter:blur(8px); box-shadow:0 0 12px rgba(0,245,212,0.12); }
.map-ctrl button:active { background:rgba(0,245,212,0.2); }
.map-scale { position:absolute; left:10px; bottom:8px; z-index:5; font-family:var(--font-data);font-variant-numeric:tabular-nums; font-size:11px; color:var(--muted); display:flex; align-items:center; gap:6px; pointer-events:none; }
.map-scale i { display:inline-block; height:4px; border:1px solid var(--muted); border-top:none; }
.map-hint { position:absolute; right:10px; bottom:8px; z-index:5; font-size:11px; font-family:var(--font-ui);font-variant-numeric:tabular-nums; color:var(--muted); background:rgba(5,10,20,0.75); padding:3px 7px; border-radius:8px; pointer-events:none; transition:opacity .4s; max-width:60%; text-align:right; }
.map-hint.gone { opacity:0; }
.map-stage .legend { position:static; display:flex; flex-wrap:wrap; gap:4px 12px; border:none; border-top:1px solid var(--panel-border); border-radius:0; background:rgba(5,10,20,0.7); padding:8px 12px; font-size:11px; line-height:1.4; }
.map-stage .legend span { display:inline-flex; align-items:center; white-space:nowrap; }
.map-stage .legend .lg-note { color:var(--cyan); margin-left:auto; }
.landmark-card { display:block !important; padding:0 !important; overflow:hidden; }
.lm-hero { position:relative; height:220px; background:linear-gradient(135deg,#0a2030,#14304a) center/cover no-repeat; }
.lm-hero-ph { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:56px; opacity:0.6; }
.lm-hero-grad { position:absolute; inset:0; background:linear-gradient(180deg,rgba(3,6,12,0.35) 0%,rgba(3,6,12,0) 30%,rgba(3,6,12,0.15) 55%,rgba(3,6,12,0.92) 100%); }
.lm-hero-top { position:absolute; top:10px; left:10px; right:10px; display:flex; justify-content:space-between; gap:8px; }
.lm-hero-top .zone-tag { margin:0; background:rgba(3,10,16,0.75); backdrop-filter:blur(6px); }
.zone-tag.z-good { color:var(--cyan); border-color:rgba(0,245,212,0.5); }
.zone-tag.z-poss { color:var(--amber); border-color:rgba(255,193,77,0.5); }
.zone-tag.z-city { color:var(--red); border-color:rgba(255,92,122,0.5); }
.kp-need { font-family:var(--font-data);font-variant-numeric:tabular-nums; font-size:11px; font-weight:700; color:var(--kc); border:1px solid var(--kc); border-radius:8px; padding:3px 8px; background:rgba(3,10,16,0.75); white-space:nowrap; }
.lm-hero-txt { position:absolute; left:12px; right:12px; bottom:22px; }
.lm-hero-txt .card-title { font-size:20px; font-weight:700; text-shadow:0 2px 10px rgba(0,0,0,0.7); }
.lm-hero-txt .card-title span { font-size:15px; color:var(--cyan-bright); font-family:var(--font-ui); margin-left:4px; }
.lm-hero-txt .card-sub { color:#b8cde0; }
.lm-credit { position:absolute; right:8px; bottom:5px; font-size:11px; color:rgba(255,255,255,0.55); font-family:var(--font-ui);font-variant-numeric:tabular-nums; text-decoration:none; max-width:70%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.photo-ph::after { content:none; }
.lm-stats { display:grid; grid-template-columns:1.1fr 1fr 1fr 1fr; gap:6px; padding:10px 12px 4px; font-family:var(--font-ui);font-variant-numeric:tabular-nums; }
.lm-stats > div { display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid var(--panel-border); border-radius:10px; padding:6px 2px; background:rgba(0,245,212,0.03); }
.lm-stats span { font-size:11px; color:var(--muted); }
.lm-stats b { font-size:15px; color:var(--text); font-family:var(--font-data);font-variant-numeric:tabular-nums; }
.lm-v.v-go { border-color:rgba(124,255,107,0.6) !important; } .lm-v.v-go b { color:var(--green); }
.lm-v.v-maybe { border-color:rgba(255,193,77,0.6) !important; } .lm-v.v-maybe b { color:var(--amber); }
.lm-v.v-no { border-color:rgba(255,92,122,0.6) !important; } .lm-v.v-no b { color:var(--red); }
.lm-actions { display:flex; gap:6px; padding:8px 12px 12px; flex-wrap:wrap; }
.lm-actions .btn-chip { text-decoration:none; cursor:pointer; font-size:11px; padding:7px 11px; }
.lm-list { padding:12px !important; }
.lm-list .panel-title b { color:var(--green); }
.lm-sort { font-size:11px; color:var(--cyan); cursor:pointer; font-family:var(--font-ui);font-variant-numeric:tabular-nums; }
.lm-search { display:flex; align-items:center; gap:8px; border:1px solid var(--panel-border); border-radius:12px; padding:0 10px; background:rgba(3,8,16,0.7); }
.lm-search span { color:var(--cyan); font-size:15px; }
.lm-search input { flex:1; min-width:0; background:transparent; border:none; outline:none; color:var(--text); font-size:14px; padding:10px 0; font-family:var(--font-ui); }
.lm-filters { display:flex; gap:6px; overflow-x:auto; margin:8px 0; scrollbar-width:none; }
.lm-filters::-webkit-scrollbar { display:none; }
.lm-filters button { flex-shrink:0; font-size:11px; font-family:var(--font-ui);font-variant-numeric:tabular-nums; padding:5px 10px; border-radius:10px; border:1px solid var(--panel-border); background:transparent; color:var(--muted); cursor:pointer; }
.lm-filters button.on { color:#03141a; background:var(--cyan); border-color:var(--cyan); }
.lm-rows { display:flex; flex-direction:column; gap:4px; max-height:420px; overflow-y:auto; scrollbar-width:thin; }
.lm-row { display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:6px 8px; border-radius:12px; border:1px solid transparent; background:rgba(255,255,255,0.025); color:var(--text); cursor:pointer; font:inherit; }
.lm-row:hover { border-color:var(--panel-border); }
.lm-row.on { border-color:rgba(124,255,107,0.55); background:rgba(124,255,107,0.08); }
.lm-thumb { width:40px; height:40px; border-radius:50%; flex-shrink:0; background:#0a2030 center/cover; border:1.5px solid rgba(0,245,212,0.35); display:flex; align-items:center; justify-content:center; font-size:18px; }
.lm-row.on .lm-thumb { border-color:var(--green); }
.lm-txt { flex:1; min-width:0; display:flex; flex-direction:column; }
.lm-n { font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lm-n i { font-style:normal; color:var(--amber); font-size:11px; margin-left:4px; }
.lm-s { font-size:11px; color:var(--muted); font-family:var(--font-ui);font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lm-kp { font-family:var(--font-data);font-variant-numeric:tabular-nums; font-size:11px; font-weight:700; color:var(--kc); border:1px solid var(--kc); border-radius:8px; padding:2px 6px; white-space:nowrap; }
.lm-z { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
@media (min-width: 900px) {
  .country-picker { display:flex; flex-wrap:wrap; overflow:visible; }
  .map-canvas { max-height:calc(100vh - 230px); }
  .lm-rows { max-height:calc(100vh - 640px); min-height:220px; }
  .lm-hero { height:200px; }
}

.map-stage .legend .lg-hint { flex-basis:100%; color:var(--muted); opacity:0.8; white-space:normal; font-size:11px; }
@media (max-width: 899px) { .map-ctrl button { width:30px; height:30px; font-size:14px; border-radius:9px; } .map-ctrl { gap:5px; right:6px; top:6px; } }
/* MW presets: 2-row scroller for 27 spots; wraps on desktop */
.mw-presets { display:grid; grid-template-rows:repeat(2,auto); grid-auto-flow:column; grid-auto-columns:max-content; scroll-snap-type:x proximity; }
@media (min-width: 900px) { .mw-presets { display:flex; flex-wrap:wrap; overflow:visible; } .mw-chip { max-width:230px; } }

.map-head-r { display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.map-ctrl { position:static !important; flex-direction:row !important; gap:5px !important; }
.map-ctrl button { width:30px !important; height:28px !important; font-size:14px !important; border-radius:9px !important; }

/* —— Locate me —— */
.locate-box:empty { display:none; }
.locate-panel { padding:12px 14px; border-color: rgba(255,78,205,0.28); background: linear-gradient(135deg, rgba(255,78,205,0.07), rgba(0,245,212,0.04)); }
.locate-row { display:flex; align-items:center; gap:12px; }
.locate-txt { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.locate-txt b { font-size:14px; color:#fff; }
.locate-txt span { font-size:11px; color:var(--muted); line-height:1.35; }
.locate-btn { display:inline-flex; align-items:center; gap:7px; border:1.5px solid #ff4ecd; color:#ffd6f3; background:rgba(255,78,205,0.12); border-radius:999px; padding:7px 12px; font:600 12px/1 var(--font-ui);font-variant-numeric:tabular-nums; letter-spacing:.5px; cursor:pointer; white-space:nowrap; box-shadow:0 0 14px rgba(255,78,205,0.25); }
.locate-btn .xh { width:16px; height:16px; color:#ff4ecd; }
.locate-btn.big { padding:12px 16px; font-size:14px; border-radius:14px; flex-direction:column; gap:5px; min-width:84px; }
.locate-btn.big .xh { width:26px; height:26px; filter:drop-shadow(0 0 6px #ff4ecd); }
.locate-btn:active { transform:scale(.97); }
.locate-btn.busy .xh { animation: xhSpin 1.1s linear infinite; }
@keyframes xhSpin { to { transform: rotate(360deg); } }
.link-btn { background:none; border:0; color:var(--cyan); font:600 11px/1.2 var(--font-ui);font-variant-numeric:tabular-nums; cursor:pointer; padding:6px 4px; white-space:nowrap; }
.link-btn.dim { color:var(--muted); }
.loc-err { margin-top:10px; font-size:12px; color:#ffd08a; background:rgba(255,193,77,0.08); border:1px solid rgba(255,193,77,0.35); border-radius:10px; padding:8px 10px; line-height:1.45; }
.loc-hint { margin-top:8px; font-size:11px; color:var(--muted); line-height:1.4; }
.loc-manual { margin-top:10px; border-top:1px dashed rgba(0,245,212,0.18); padding-top:10px; }
.loc-manual-t { font-size:11px; color:var(--cyan); font-family:var(--font-ui);font-variant-numeric:tabular-nums; margin-bottom:6px; }
.loc-search { display:flex; align-items:center; gap:6px; background:rgba(5,12,22,0.8); border:1px solid rgba(0,245,212,0.25); border-radius:10px; padding:4px 4px 4px 10px; }
.loc-search span { color:var(--muted); }
.loc-search input { flex:1; min-width:0; background:none; border:0; color:#e8f7ff; font-size:13px; outline:none; padding:6px 0; }
.loc-search button { background:rgba(0,245,212,0.15); color:var(--cyan); border:1px solid rgba(0,245,212,0.4); border-radius:8px; padding:6px 10px; font-size:12px; cursor:pointer; }
.loc-results { display:flex; flex-direction:column; gap:4px; margin-top:6px; }
.loc-results button { text-align:left; background:rgba(255,255,255,0.03); border:1px solid rgba(0,245,212,0.15); border-radius:8px; padding:7px 10px; color:#e8f7ff; cursor:pointer; display:flex; gap:8px; align-items:baseline; }
.loc-results b { font-size:13px; } .loc-results span { font-size:11px; color:var(--muted); }
.loc-note { font-size:11px; color:var(--muted); margin-top:6px; }
.loc-quick { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.loc-quick button { background:rgba(0,245,212,0.06); border:1px solid rgba(0,245,212,0.22); color:#cfe6f5; border-radius:999px; padding:5px 10px; font-size:12px; cursor:pointer; }
.me-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.me-pin { width:12px; height:12px; border-radius:50%; background:#ff4ecd; box-shadow:0 0 0 0 rgba(255,78,205,0.7); animation: mePing 1.8s ease-out infinite; flex:none; border:2px solid #fff; }
@keyframes mePing { 0% { box-shadow:0 0 0 0 rgba(255,78,205,0.7); } 100% { box-shadow:0 0 0 12px rgba(255,78,205,0); } }
.me-txt { flex:1; min-width:150px; display:flex; flex-direction:column; gap:2px; }
.me-txt b { font-size:14px; color:#fff; }
.me-txt span { font-size:11px; color:var(--muted); font-family:var(--font-ui);font-variant-numeric:tabular-nums; }
.me-act { display:flex; align-items:center; gap:4px; }
.near-msg { margin-top:10px; font-size:12px; color:#cfe6f5; line-height:1.5; }
.near-msg.far { color:#ffe0a0; }
.near-msg em { font-style:normal; color:#ff9ce0; }
.near-title { margin-top:12px; }
.near-list { display:flex; flex-direction:column; gap:6px; margin-top:6px; }
.near-row { display:grid; grid-template-columns: 18px 44px minmax(0,1fr) auto; grid-template-areas: "rank ph txt km" "rank ph txt meta"; align-items:center; column-gap:10px; row-gap:3px; text-align:left; background:rgba(255,255,255,0.025); border:1px solid rgba(0,245,212,0.14); border-radius:12px; padding:7px 10px; color:inherit; cursor:pointer; }
.near-row:hover { border-color: rgba(0,245,212,0.45); }
.near-row .lm-thumb { grid-area: ph; width:44px; height:44px; }
.near-row .lm-txt { grid-area: txt; }
.near-rank { grid-area: rank; font:700 12px var(--font-data);font-variant-numeric:tabular-nums; color:#ff4ecd; text-align:center; }
.near-km { grid-area: km; justify-self:end; font:11px var(--font-data);font-variant-numeric:tabular-nums; color:var(--muted); white-space:nowrap; }
.near-km b { font-size:14px; color:#fff; }
.near-meta { grid-area: meta; justify-self:end; display:flex; gap:5px; align-items:center; }
.mw-near .near-row, .near-row:not(:has(.near-rank)) { grid-template-columns: 44px minmax(0,1fr) auto; grid-template-areas: "ph txt km" "ph txt meta"; }
.vb { font:700 11px/1 var(--font-data);font-variant-numeric:tabular-nums; font-style:normal; padding:3px 6px; border-radius:6px; letter-spacing:.5px; }
.vb.v-go { color:#03060c; background:#7cff6b; } .vb.v-maybe { color:#03060c; background:#ffc14d; } .vb.v-no { color:#fff; background:rgba(255,92,122,0.85); }
.own-chance { margin-top:10px; display:grid; grid-template-columns: 74px 1fr; gap:6px 12px; align-items:center; background:rgba(5,12,22,0.55); border:1px solid rgba(255,78,205,0.25); border-radius:12px; padding:10px; }
.own-v { grid-row: span 2; text-align:center; border-radius:10px; padding:8px 4px; display:flex; flex-direction:column; gap:4px; }
.own-v b { font:800 17px var(--font-data);font-variant-numeric:tabular-nums; } .own-v span { font-size:11px; color:var(--muted); }
.own-v.v-go { background:rgba(124,255,107,0.12); color:#7cff6b; } .own-v.v-maybe { background:rgba(255,193,77,0.12); color:#ffc14d; } .own-v.v-no { background:rgba(255,92,122,0.12); color:#ff5c7a; }
.own-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:6px; }
.own-grid span { display:block; font-size:11px; color:var(--muted); font-family:var(--font-ui);font-variant-numeric:tabular-nums; }
.own-grid b { font-size:12.5px; color:#fff; }
.own-note { font-size:11px; color:#cfe6f5; line-height:1.45; }
.own-note em { font-style:normal; color:var(--muted); }
.locate-panel.compact .near-msg { margin-top:8px; }
.near-strip { display:grid; grid-auto-flow:column; grid-auto-columns: 128px; gap:8px; overflow-x:auto; margin-top:8px; padding-bottom:4px; scroll-snap-type:x proximity; }
.near-card { scroll-snap-align:start; text-align:left; background:rgba(255,255,255,0.03); border:1px solid rgba(0,245,212,0.16); border-radius:12px; padding:6px; color:inherit; cursor:pointer; display:flex; flex-direction:column; gap:4px; }
.near-ph { position:relative; height:70px; border-radius:8px; background:#0a1a26 center/cover no-repeat; }
.near-ph .vb { position:absolute; top:5px; right:5px; }
.near-n { font-size:12px; font-weight:600; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.near-s { font:11px var(--font-ui);font-variant-numeric:tabular-nums; color:var(--muted); }
.home-mode { display:inline-flex; border:1px solid rgba(255,78,205,0.35); border-radius:999px; overflow:hidden; }
.home-mode button { background:none; border:0; color:var(--muted); font-size:11px; padding:6px 10px; cursor:pointer; white-space:nowrap; max-width:140px; overflow:hidden; text-overflow:ellipsis; }
.home-mode button.on { background:rgba(255,78,205,0.18); color:#fff; }
.loc-r { display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.me-pulse { transform-box: fill-box; transform-origin: center; animation: meSvgPulse 1.8s ease-out infinite; }
@keyframes meSvgPulse { 0% { transform: scale(.35); opacity:.95; } 100% { transform: scale(1.6); opacity:0; } }
@media (min-width: 900px) {
  #homeLocate .near-list { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); }
  #homeLocate .locate-panel.on { display:grid; grid-template-columns: minmax(0,0.9fr) minmax(0,1.4fr); column-gap:16px; align-items:start; }
  #homeLocate .locate-panel.on > .me-head, #homeLocate .locate-panel.on > .loc-err, #homeLocate .locate-panel.on > .loc-manual, #homeLocate .locate-panel.on > .near-msg, #homeLocate .locate-panel.on > .loc-hint { grid-column: 1 / -1; }
  #homeLocate .locate-panel.on > .own-chance { grid-column:1; grid-row: span 2; }
  #homeLocate .locate-panel.on > .near-title { grid-column:2; margin-top:10px; }
  #homeLocate .locate-panel.on > .near-list { grid-column:2; }
  #mwLocate .near-list { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); }
  .near-strip { grid-auto-flow: initial; grid-template-columns: repeat(5, minmax(0,1fr)); overflow: visible; }
}

/* —— Languages: picker + per-script font stacks —— */
html:lang(th) body { line-height: 1.5; }
.lang-pick { position: relative; }
.lang-btn { display:inline-flex; align-items:center; gap:5px; height:28px; padding:0 10px; border-radius:20px; border:1px solid rgba(0,245,212,0.3); background:rgba(0,245,212,0.06); color:var(--cyan); font:600 11px/1 var(--font-ui);font-variant-numeric:tabular-nums; cursor:pointer; }
.lang-btn svg { width:14px; height:14px; }
.lang-btn i { font-style:normal; font-size:11px; opacity:.7; }
.lang-menu { position:absolute; right:0; top:34px; z-index:60; min-width:170px; padding:6px; border-radius:14px; background:rgba(4,10,20,0.97); border:1px solid rgba(0,245,212,0.3); box-shadow:0 12px 40px rgba(0,0,0,0.6), 0 0 20px rgba(0,245,212,0.12); backdrop-filter: blur(16px); }
.lang-menu[hidden] { display:none; }
.lang-menu button { display:flex; justify-content:space-between; align-items:center; width:100%; padding:9px 10px; border:0; border-radius:9px; background:none; color:#e8f7ff; font-size:13.5px; text-align:left; cursor:pointer; font-family:var(--font-ui); }
.lang-menu button[lang="ja"] { font-family:var(--font-ui); }
.lang-menu button[lang="ko"] { font-family:var(--font-ui); }
.lang-menu button[lang="th"] { font-family:var(--font-ui); }
.lang-menu button:hover, .lang-menu button.on { background:rgba(0,245,212,0.1); }
.lang-menu button i { font-style:normal; color:var(--green); }
/* longer strings (ms/th/ko): let labels wrap instead of overflowing */
.tab span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; display:block; }
html:lang(ms) .tab span, html:lang(th) .tab span { font-size:11px; }
.mchip-label, .mchip-plain, .mchip-state, .verdict-zh, .btn-chip { overflow-wrap:anywhere; }
.topbar { z-index: 40; }
.locate-btn.big { max-width: 112px; white-space: normal; text-align: center; line-height: 1.15; flex: none; }
.locate-row .link-btn { white-space: normal; max-width: 92px; text-align: right; }

/* ===== Lazy thumbs ===== */
.lm-thumb { overflow:hidden; }
.lm-thumb img { width:100%; height:100%; object-fit:cover; display:block; border-radius:50%; }

/* ===== Map layers (aurora probability / cloud cover) ===== */
.ov-row { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:0 0 8px; padding:0 12px; }
.ov-legend { margin-left:10px !important; margin-right:10px !important; }
.ov-lbl { font-family:var(--font-ui);font-variant-numeric:tabular-nums; font-size:11px; letter-spacing:.12em; color:var(--muted); text-transform:uppercase; margin-right:2px; }
.ov-btn { display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:999px; border:1px solid var(--panel-border); background:rgba(5,16,24,0.6); color:var(--text); font:600 12px/1.2 var(--font-ui); font-family:inherit; cursor:pointer; min-height:32px; }
.ov-btn.on { border-color:var(--cyan); background:rgba(0,245,212,0.14); box-shadow:0 0 12px rgba(0,245,212,0.25); }
.ov-sw { width:14px; height:14px; border-radius:4px; display:inline-block; }
.ov-aurora { background:linear-gradient(90deg, rgba(124,255,107,0.25), #7cff6b 25%, #00f5d4 45%, #ffc14d 65%, #ff5c7a 85%, #ff4ecd); }
.ov-cloud { background:linear-gradient(90deg, rgba(220,228,240,0.05), rgba(220,228,240,0.95)); }
.ov-legend { display:grid; grid-template-columns:auto 1fr; grid-template-areas:"t bar" ". ticks" "src src"; gap:2px 10px; align-items:center; padding:8px 10px; margin-top:8px; border:1px solid var(--panel-border); border-radius:10px; background:rgba(3,10,16,0.6); }
.ov-legend .ov-t { grid-area:t; font-size:12px; font-weight:700; white-space:nowrap; }
.ov-legend .ov-bar { grid-area:bar; height:8px; border-radius:6px; display:block; }
.ov-legend .ov-ticks { grid-area:ticks; display:flex; justify-content:space-between; font-family:var(--font-data);font-variant-numeric:tabular-nums; font-size:11px; color:var(--muted); }
.ov-legend .ov-ticks b { font-weight:400; }
.ov-legend .ov-src { grid-area:src; font-family:var(--font-ui);font-variant-numeric:tabular-nums; font-size:11px; color:var(--muted); overflow-wrap:anywhere; }
.lm-prob, .loc-prob { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin:6px 12px 2px; padding:7px 10px; border-radius:10px; border:1px solid rgba(124,255,107,0.25); background:rgba(124,255,107,0.05); font-size:12px; }
.loc-prob { margin:8px 0 0; }
.lm-prob b, .loc-prob b { font-family:var(--font-data);font-variant-numeric:tabular-nums; font-size:16px; }
.lm-prob em, .loc-prob em { font-style:normal; font-family:var(--font-ui);font-variant-numeric:tabular-nums; font-size:11px; color:var(--muted); margin-left:auto; }

/* ===== Alerts ===== */
.alerts-panel { display:flex; flex-direction:column; gap:9px; }
.alerts-panel .panel-title { display:flex; justify-content:space-between; align-items:center; }
.sw { display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-size:12px; text-transform:none; letter-spacing:0; }
.sw input { position:absolute; opacity:0; width:1px; height:1px; }
.sw i { width:40px; height:22px; border-radius:11px; background:rgba(126,151,173,0.35); position:relative; transition:background .2s; }
.sw i::after { content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; transition:left .2s; }
.sw input:checked + i { background:var(--green); }
.sw input:checked + i::after { left:21px; }
.sw input:focus-visible + i { outline:2px solid var(--cyan); outline-offset:2px; }
.al-perm { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; font-size:12.5px; padding:8px 10px; border-radius:10px; background:rgba(255,193,77,0.07); border:1px solid rgba(255,193,77,0.3); }
.al-perm.granted { background:rgba(124,255,107,0.07); border-color:rgba(124,255,107,0.3); }
.al-perm.denied { background:rgba(255,92,122,0.08); border-color:rgba(255,92,122,0.35); }
.al-row { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.al-l { font-size:12.5px; color:var(--muted); }
.al-seg { margin:0; }
.al-seg button[disabled] { opacity:.4; cursor:not-allowed; }
.al-sel { width:100%; min-height:40px; padding:8px 10px; border-radius:10px; border:1px solid var(--panel-border); background:#06121b; color:var(--text); font:inherit; font-size:13px; }
.al-me { font-weight:700; font-size:14px; }
.al-kp { font-family:var(--font-data);font-variant-numeric:tabular-nums; font-size:18px; }
#alKp { width:100%; accent-color:#7cff6b; }
.al-hint { font-size:11.5px; color:var(--muted); }
.al-chk { display:flex; align-items:center; gap:9px; font-size:13px; cursor:pointer; min-height:30px; }
.al-chk input { width:18px; height:18px; accent-color:#7cff6b; flex-shrink:0; }
.al-quiet { display:flex; align-items:center; gap:8px; }
.al-quiet.dim { opacity:.45; }
.al-quiet input { padding:6px 8px; border-radius:8px; border:1px solid var(--panel-border); background:#06121b; color:var(--text); font-family:var(--font-data);font-variant-numeric:tabular-nums; color-scheme:dark; }
.al-status { font-family:var(--font-ui);font-variant-numeric:tabular-nums; font-size:11px; color:var(--cyan); line-height:1.5; }
.al-note { font-size:11.5px; color:var(--muted); line-height:1.55; border-top:1px dashed var(--panel-border); padding-top:8px; }
.site-links { display:flex; flex-wrap:wrap; gap:6px 14px; justify-content:center; font-size:11.5px; margin:14px 0 4px; }
.site-links a { color:var(--muted); text-decoration:none; }
.site-links a:hover { color:var(--cyan); }
.al-seg button { white-space:nowrap; }
.al-row .al-seg { flex-shrink:0; }

/* horizon estimate + moon svg (2026-11-10) */
.lm-prob .prob-sep, .loc-prob .prob-sep { width:1px; height:14px; background:rgba(124,255,107,0.3); align-self:center; }
.lm-prob .prob-note, .loc-prob .prob-note { flex-basis:100%; font-size:11px; line-height:1.4; color:var(--muted); }
.big-moon.np-moon{background:none;border:none;box-shadow:none;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 0 14px rgba(180,200,255,0.28))}
.cell .m.np-moon{background:none!important;border:none!important;box-shadow:none!important;width:14px;height:14px}
.np-moon-svg{display:block}

/* ===== 2026-11-10 batch: photo backdrops, best windows, photo-pin map, time scrubber ===== */
.np-bg { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.np-bg i { position: absolute; inset: 0; background: #03060c center / cover no-repeat; opacity: 0; transition: opacity .9s ease; will-change: opacity; }
.np-bg i.on { opacity: 1; }
.np-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3,6,12,0.42) 0%, rgba(3,6,12,0.70) 28%, rgba(3,6,12,0.86) 60%, rgba(3,6,12,0.94) 100%); opacity: 0; transition: opacity .9s ease; }
.app.has-photo .np-bg::after { opacity: 1; }
.app.has-photo .aurora-bg { opacity: 0.25; transition: opacity .9s; }
.app.has-photo { background: transparent; }
.app.has-photo::after { opacity: .5; }
.np-bg-cr { position: fixed; right: 10px; bottom: calc(78px + var(--safe-bottom)); z-index: 30; font:400 11px/1.2 var(--font-ui); color: rgba(200,220,235,0.55); text-decoration: none; background: rgba(3,6,12,0.45); padding: 3px 7px; border-radius: 8px; }
@media (min-width: 900px) { .np-bg-cr { bottom: 12px; } }
.app.has-photo .panel { background: rgba(4, 12, 22, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

.bw-line { display: flex; align-items: flex-start; gap: 8px; margin: 8px 12px 2px; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(0,245,212,0.22); background: rgba(0,245,212,0.05); font:600 12.5px/1.45 var(--font-ui); color: var(--text); }
.bw-line i { flex: 0 0 8px; height: 8px; border-radius: 50%; margin-top: 5px; box-shadow: 0 0 8px currentColor; }
.bw-line.lv-go { border-color: rgba(124,255,107,0.45); background: rgba(124,255,107,0.07); }
.bw-line.lv-maybe { border-color: rgba(255,193,77,0.45); background: rgba(255,193,77,0.06); }
.bw-line.lv-no { border-color: rgba(255,92,122,0.35); background: rgba(255,92,122,0.05); }
.bw-line.lv-next { border-color: rgba(95,184,255,0.4); background: rgba(95,184,255,0.06); }
.bw-home { margin: 10px 0 4px; }
.bw-for { font:400 11px/1.3 var(--font-ui); color: var(--muted); margin: 0 0 4px 18px; }
.near-w { display: flex; align-items: center; gap: 5px; font:500 11px/1.3 var(--font-ui); color: var(--text); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.near-w i { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 6px; }
.near-card .near-w { padding: 0 6px 4px; }

.map-look { position: absolute; left: 10px; top: 10px; z-index: 5; display: flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 10px; background: rgba(4,10,20,0.86); border: 1px solid rgba(0,245,212,0.3); font:500 11px/1 var(--font-ui); color: #cfeff5; pointer-events: none; }
.map-look .ml-arrow { color: var(--green); font-size: 14px; line-height: 1; text-shadow: 0 0 8px rgba(124,255,107,0.6); }
.map-look b { font:700 11px/1 var(--font-ui); color: var(--green); }
.legend.legend2 { position: static; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font:400 11px/1.4 var(--font-ui); backdrop-filter: none; }
.legend2 .lg-ring { display: inline-block; width: 11px; height: 11px; border-radius: 50%; border: 2.4px solid; margin-right: 5px; vertical-align: -1px; }
.legend2 .lg-note { color: var(--muted); }
.legend2 .lg-hint { flex-basis: 100%; color: var(--muted); }
.map-svg .marker { cursor: pointer; }
.map-svg .pin image, .mini-map-svg .pin image { pointer-events: none; }
.pin-more { cursor: zoom-in; }

.scrub { margin-top: 10px; padding: 10px 12px 8px; border-radius: 14px; border: 1px solid var(--panel-border); background: rgba(4,10,20,0.82); }
.sc-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sc-play { flex: 0 0 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(0,245,212,0.5); color: var(--cyan); font-size: 12px; background: rgba(0,245,212,0.08); box-shadow: 0 0 12px rgba(0,245,212,0.18); }
.sc-read { flex: 1 1 220px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; font:400 11px/1.3 var(--font-ui); color: var(--muted); min-width: 0; }
.sc-read b { font:600 13px/1.2 var(--font-ui); color: var(--text); font-variant-numeric: tabular-nums; }
.sc-read b.dim { color: #9fb6c9; font-weight: 500; }
.sc-read .sc-sep { width: 1px; height: 12px; background: rgba(0,245,212,0.25); margin: 0 2px; }
.sc-read .sc-note { flex-basis: 100%; font-style: normal; color: var(--amber); }
.sc-leg { display: flex; align-items: center; gap: 5px; font:400 11px/1 var(--font-ui); color: var(--muted); }
.sc-leg i { display: inline-block; width: 52px; height: 7px; border-radius: 4px; }
.sc-leg.odds i { width: 9px; height: 9px; border-radius: 50%; margin-left: 4px; }
.sc-leg em { font:400 11px/1 var(--font-ui); font-style: normal; }
.sc-leg .sw-cloud { background: linear-gradient(90deg, rgba(150,170,196,0.15) 0 20%, rgba(150,170,196,0.6) 20% 40%, rgba(178,194,214,0.75) 40% 60%, rgba(206,218,232,0.85) 60% 80%, #eef3fa 80%); }
.sc-leg .sw-aurora { background: linear-gradient(90deg, rgba(124,255,107,0.3), #7cff6b 25%, #00f5d4 45%, #ffc14d 65%, #ff5c7a 85%, #ff4ecd); }
.sc-track { position: relative; height: 40px; margin: 10px 6px 0; border-radius: 9px; background: rgba(255,255,255,0.035); border: 1px solid rgba(0,245,212,0.16); touch-action: none; cursor: grab; outline: none; }
.sc-track:focus-visible { box-shadow: 0 0 0 2px rgba(0,245,212,0.5); }
.sc-track .sc-dark { position: absolute; top: 0; bottom: 0; background: rgba(40,60,130,0.28); border-radius: 8px; }
.sc-track .sc-best { position: absolute; top: 3px; bottom: 15px; border-radius: 6px; background: rgba(124,255,107,0.2); border: 1px solid rgba(124,255,107,0.75); box-shadow: 0 0 12px rgba(124,255,107,0.25); }
.sc-track .sc-best.lv-maybe { background: rgba(255,193,77,0.16); border-color: rgba(255,193,77,0.7); box-shadow: none; }
.sc-track .sc-best.lv-next { background: rgba(95,184,255,0.16); border-color: rgba(95,184,255,0.7); box-shadow: none; }
.sc-track .sc-best b { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font:700 11px/1 var(--font-ui); color: #eafff0; white-space: nowrap; text-shadow: 0 0 6px #000; }
.sc-track .sc-odds { position: absolute; left: 0; right: 0; bottom: 3px; height: 7px; display: grid; grid-template-columns: repeat(24, 1fr); gap: 1px; padding: 0 1px; }
.sc-track .sc-odds i { border-radius: 2px; }
.sc-track .sc-now { position: absolute; top: -4px; bottom: -4px; width: 2px; background: #fff; box-shadow: 0 0 8px #fff; transform: translateX(-1px); }
.sc-track .sc-now b { position: absolute; top: -15px; left: 3px; font:600 11px/1 var(--font-ui); color: #fff; white-space: nowrap; }
.sc-handle { position: absolute; top: 50%; width: 26px; height: 26px; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, #eafffb 0 4px, rgba(0,245,212,0.9) 5px 9px, rgba(0,245,212,0.25) 10px); border: 1.5px solid #00f5d4; box-shadow: 0 0 14px rgba(0,245,212,0.7); pointer-events: none; }
.sc-ticks { position: relative; height: 30px; margin: 4px 6px 0 6px; }
.sc-tick { position: absolute; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px; font:500 11px/1 var(--font-ui); color: #cfe3f0; font-variant-numeric: tabular-nums; }
.sc-tick em { font-style: normal; color: var(--muted); font-size:11px; }
.sc-axis { position: absolute; right: -4px; top: 0; display: none; }
@media (min-width: 900px) { .sc-axis { display: flex; flex-direction: column; gap: 2px; right: auto; left: -46px; font:400 11px/1 var(--font-ui); color: var(--muted); } .sc-axis em { font-style: normal; } .sc-ticks { margin-left: 50px; } .sc-track { margin-left: 50px; } }

.mini-wrap { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(220px, 1fr); gap: 14px; align-items: stretch; height: 100%; }
.mini-map-box { position: relative; min-height: 300px; border-radius: 12px; background: radial-gradient(ellipse at 50% 40%, rgba(0,60,60,0.25), transparent 70%); }
.mini-map-box .mini-map-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mini-rank { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mr-t { font:600 11px/1.3 var(--font-ui); color: var(--muted); letter-spacing: .04em; margin-bottom: 4px; }
.mr-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 28px; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 10px; border: 1px solid transparent; text-align: left; background: rgba(255,255,255,0.02); }
.mr-row:hover, .mr-row.on { border-color: rgba(124,255,107,0.45); background: rgba(124,255,107,0.06); }
.mr-ph { width: 34px; height: 34px; border-radius: 50%; background: #0a1a26 center / cover no-repeat; border: 2px solid; }
.mr-n { font:500 12.5px/1.25 var(--font-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr-w { font:500 12px/1 var(--font-ui); color: #cfe3f0; }
.mr-row b { font:700 12.5px/1 var(--font-ui); text-align: right; }
.mw-chip-w { font:600 11px/1.2 var(--font-ui); margin-top: 2px; }
.mw-chip img { border: 2px solid transparent; }
.np-data { font-family: var(--font-data); font-variant-numeric: tabular-nums; }
.np-ui { font-family: var(--font-ui); }
.tab-icon svg { display: block; }
.sc-track { margin-top: 22px; }
.sc-track .sc-now b { top: -17px; left: -2px; transform: translateX(-50%); padding: 1px 4px; border-radius: 4px; background: rgba(4,10,20,0.9); }
.sc-leg.odds { flex-wrap: wrap; row-gap: 4px; }
/* background credit sits at the end of the active tab, never over content */
.np-bg-cr, .view .np-bg-cr { position: static; display: block; width: max-content; max-width: 100%; margin: 14px auto 4px; z-index: auto; background: none; color: rgba(200,220,235,0.5); }
.np-bg-cr[hidden] { display: none; }
@media (min-width: 900px) { .view .np-bg-cr { grid-column: 1 / -1; } }
/* let the photo breathe behind the top of the page */
.np-bg::after { background: linear-gradient(180deg, rgba(3,6,12,0.18) 0%, rgba(3,6,12,0.5) 30%, rgba(3,6,12,0.8) 62%, rgba(3,6,12,0.92) 100%); }
/* header + tab bar: long localized labels never collide */
.topbar > :first-child { min-width: 0; flex: 1 1 auto; }
.header-right { flex: 0 0 auto; }
.brand-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 899px) { .tab-bar .tab { flex: 1 1 0; min-width: 0; width: auto; padding-left: 1px; padding-right: 1px; } }
html:lang(th) .tab span, html:lang(ms) .tab span, html:lang(ko) .tab span { white-space: normal; line-height: 1.12; text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.np-bg::after { background: linear-gradient(180deg, rgba(3,6,12,0.66) 0%, rgba(3,6,12,0.42) 14%, rgba(3,6,12,0.58) 34%, rgba(3,6,12,0.82) 62%, rgba(3,6,12,0.93) 100%); }
.app.has-photo .topbar .brand-sub, .app.has-photo .page-title-sub { color: #b9cad8; text-shadow: 0 1px 6px rgba(0,0,0,0.85); }
/* Milky Way at your location */
.mw-me-ic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--magenta); background: radial-gradient(circle, rgba(255,78,205,0.22), rgba(8,18,36,0.9) 70%); }
.mw-me-ic.big { width: 48px; height: 48px; }
.mw-me-ic .me-pin { margin: 0; }
.mw-chip-me { border-color: rgba(255,78,205,0.45); }
.mw-me-go { display: inline-block; margin: 8px 0 2px; }
.mw-back { display: block; color: var(--amber); font-weight: 600; margin-bottom: 4px; }
.mw-cl { margin-top: 12px; }
.mw-cl-t { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font: 600 11px/1.3 var(--font-ui); color: var(--muted); margin-bottom: 6px; }
.mw-cl-t em { font-style: normal; font-weight: 400; color: #7cff6b; }
.mw-cl-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; height: 78px; }
.mw-cl-strip.wait { display: block; height: auto; color: var(--muted); font-size: 12px; }
.mw-cl-c { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; border-radius: 6px; background: rgba(255,255,255,0.035); border: 1px solid rgba(126,151,173,0.15); padding-bottom: 14px; overflow: hidden; }
.mw-cl-c.core { border-color: rgba(124,255,107,0.6); background: rgba(124,255,107,0.08); }
.mw-cl-c i { display: block; width: 100%; background: linear-gradient(180deg, rgba(206,218,232,0.85), rgba(150,170,196,0.35)); max-height: calc(100% - 14px); }
.mw-cl-c b { position: absolute; top: 3px; font: 600 11px/1 var(--font-data); font-variant-numeric: tabular-nums; color: #e8f2fa; }
.mw-cl-c em { position: absolute; bottom: 2px; font: 400 11px/1 var(--font-data); font-style: normal; color: var(--muted); }
@media (max-width: 899px) { .mw-cl-strip { overflow-x: auto; grid-auto-columns: 30px; } }

/* best-window label lifted into the label lane when it would collide with Now / the handle */
.sc-track .sc-best b.up { top: -20px; transform: none; padding: 1px 4px; border-radius: 4px; background: rgba(4,10,20,0.9); box-shadow: inset 0 0 0 1px currentColor; color: #7cff6b; text-shadow: none; }
.sc-track .sc-best.lv-maybe b.up { color: #ffc14d; }
.sc-track .sc-best.lv-next b.up { color: #5fb8ff; }
/* Bortle (?) */
.bq-wrap { display: inline-flex; align-items: center; gap: 0; }
.near-meta .bq { margin-left: 6px; }
#mwAff { margin-top: 14px; }