@font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url("vendor/archivo-latin-wdth-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("vendor/jetbrains-mono-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("vendor/jetbrains-mono-latin-600-normal.woff2") format("woff2"); }

:root {
  --ground: #F3F4F5;
  --surface: #FFFFFF;
  --surface-2: #F5F6F7;
  --line: #E1E4E8;
  --line-2: #C5CBD2;
  --ink: #15181C;
  --muted: #59606A;
  --accent: #1E4E8C;
  --hi: #C27C00;
  --bar: #0F1214;
  --flex-blue: #0578FF;   
  --bar-ink: #ECEAE5;
  --bar-muted: #A0A6AB;
  --bar-line: #262C30;
  --bar-line-2: #3A4146;
  --find-bg: #181D20;
  --open: #1A7A3E;
  --open-bg: #E3F3E8;
  --caution: #8F5600;
  --caution-bg: #FAEFD8;
  --closed: #B3261E;
  --closed-bg: #FCE6E3;
  --closed-fill: #B3261E;
  --unknown: #6B7380;
  --unknown-bg: #ECEEF1;
  --land: #E6E9EC;
  --map-bg: #F7F8F9;
  --border-line: #FFFFFF;
  --sea: transparent;
  --overlay: rgba(255, 255, 255, .95);
  --tip-bg: #15181C;
  --tip-ink: #F2F3F5;
  --scrim: rgba(16, 19, 24, .48);
  --focus: #1E4E8C;
  --strike: #5A3FD1;
  --tornado: #C2410C;
  --body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
  --radius: 8px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0B0D0E; --surface: #121617; --surface-2: #191E20; --line: #23282B; --line-2: #3A4146;
    --ink: #E8E6E1; --muted: #9AA0A5; --accent: #8DB5E8; --hi: #F5B700;
    --bar: #0B0D0E; --bar-ink: #E8E6E1; --bar-muted: #9AA0A5; --bar-line: #23282B; --bar-line-2: #3A4146; --find-bg: #15191B;
    --open: #4CC274; --open-bg: rgba(76, 194, 116, .14); --caution: #F5B700; --caution-bg: rgba(245, 183, 0, .13);
    --closed: #FF6B5F; --closed-bg: rgba(255, 91, 79, .14); --closed-fill: #C4392D;
    --unknown: #8C9196; --unknown-bg: rgba(140, 145, 150, .14);
    --land: #1A1F22; --map-bg: #0E1214; --border-line: #0B0D0E; --overlay: rgba(18, 22, 23, .94);
    --tip-bg: #E8E6E1; --tip-ink: #0B0D0E; --scrim: rgba(0, 0, 0, .62);
    --focus: #8DB5E8; --strike: #B49CFF; --tornado: #F3904F;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #0B0D0E; --surface: #121617; --surface-2: #191E20; --line: #23282B; --line-2: #3A4146;
  --ink: #E8E6E1; --muted: #9AA0A5; --accent: #8DB5E8; --hi: #F5B700;
  --bar: #0B0D0E; --bar-ink: #E8E6E1; --bar-muted: #9AA0A5; --bar-line: #23282B; --bar-line-2: #3A4146; --find-bg: #15191B;
  --open: #4CC274; --open-bg: rgba(76, 194, 116, .14); --caution: #F5B700; --caution-bg: rgba(245, 183, 0, .13);
  --closed: #FF6B5F; --closed-bg: rgba(255, 91, 79, .14); --closed-fill: #C4392D;
  --unknown: #8C9196; --unknown-bg: rgba(140, 145, 150, .14);
  --land: #1A1F22; --map-bg: #0E1214; --border-line: #0B0D0E; --overlay: rgba(18, 22, 23, .94);
  --tip-bg: #E8E6E1; --tip-ink: #0B0D0E; --scrim: rgba(0, 0, 0, .62);
  --focus: #8DB5E8; --strike: #B49CFF; --tornado: #F3904F;
  color-scheme: dark;
}


*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-behavior: smooth; }
body { background: var(--ground); color: var(--ink); font: 400 15px/1.5 var(--body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; padding-bottom: env(safe-area-inset-bottom, 0px); }
[hidden] { display: none !important; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.code { font: 600 13px/1.2 var(--mono); letter-spacing: .03em; }
.ic { width: 1em; height: 1em; vertical-align: -.15em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic-tornado { color: var(--tornado); }
.num { font-variant-numeric: tabular-nums; }

.code-tile { flex: none; font: 600 13px/1 var(--mono); letter-spacing: .06em; padding: 5px 7px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line-2); color: var(--ink); }
.tx-closed { color: var(--closed); }
.tx-caution { color: var(--caution); }
.tx-open { color: var(--open); }
.tx-lx { color: var(--strike); }
.tx-unknown { color: var(--muted); }


.bar { position: sticky; top: 0; z-index: 20; background: var(--bar); color: var(--bar-ink); padding-top: env(safe-area-inset-top, 0px); border-bottom: 1px solid var(--bar-line); }
.bar-inner { max-width: 1600px; margin: 0 auto; padding: 10px 20px; min-height: 68px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; color: inherit; text-decoration: none; }

.wordmark { margin: 0; font-size: inherit; font-weight: inherit; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; line-height: 1; white-space: nowrap; }   

.wm-name { font: 800 23px/1 var(--display); font-stretch: 125%; letter-spacing: -.01em; background: var(--flex-blue); color: #FFFFFF; padding: 7px 11px 8px 9px; border-radius: 8px; display: inline-flex; align-items: center; gap: 6px; }

.wm-bolt { width: .95em; height: .95em; flex: none; fill: #FFC52E; }

@keyframes wm-bolt-flash {
  0%, 0.5%, 1.7%, 100% { fill: #FFC52E; filter: none; }
  0.2%, 0.9%, 1.3% { fill: #fff; filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 8px rgba(255, 255, 255, .8)); }
}
.wordmark.lx-alert .wm-bolt { animation: wm-bolt-flash 60s linear infinite; }
@media (prefers-reduced-motion: reduce) { .wordmark.lx-alert .wm-bolt { animation: none; } }
.wm-sub { font: 500 12px/1 var(--mono); color: var(--bar-muted); display: inline-flex; align-items: center; gap: 6px; }

.s-closed { color: #FF6B5F; font-weight: 600; }
.s-free { color: #4CC274; font-weight: 600; }

.pay-example { margin: 0 0 12px; padding: 10px 14px; border: 1px solid var(--line); border-left: 4px solid var(--open); border-radius: 0 10px 10px 0; background: var(--open-bg); }
.pay-example p { margin: 0; }
.pay-example-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; color: var(--ink); }
.pay-example-line strong { color: var(--open); font-weight: 700; }
.pay-example-icon { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--open); color: #fff; font-weight: 700; font-size: 13px; flex: none; align-self: center; }
.pay-example-terms { margin-top: 4px !important; font-size: 12px; color: var(--muted); }
.slogan[lang="es"], html[lang="es"] .slogan[lang="en"] { display: none; }
html[lang="es"] .slogan[lang="es"] { display: inline; }
.wm-dollar { width: 15px; height: 15px; flex: none; }
.wm-dollar circle { fill: #4CC274; }
.wm-dollar path { fill: none; stroke: var(--bar); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.mark { width: 34px; height: 34px; border-radius: 7px; background: var(--bar-ink); color: var(--bar); display: grid; place-items: center; flex: none; }
.mark .ic { width: 20px; height: 20px; stroke-width: 2.2; }
.brand h1:not(.wordmark) { margin: 0; display: flex; flex-direction: column; line-height: 1; }
.brand .kicker { font: 500 12px/1 var(--mono); color: var(--bar-muted); margin-bottom: 4px; }
.brand .word { font: 800 22px/1 var(--display); font-stretch: 115%; }
.fresh { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 0; white-space: nowrap; font: 500 12.5px/1.3 var(--mono); color: var(--bar-muted); }
#freshText { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.fresh-a, .fresh-b { display: block; overflow: hidden; text-overflow: ellipsis; }
.fresh-b { padding-left: 12px; margin-top: 3px; }

.fresh-refresh { display: none; }
.fresh strong { color: var(--bar-ink); font-weight: 500; }

.fresh-btn { flex: none; min-height: 24px; padding: 2px 6px; margin: -2px 0; border: 0; background: none; font: inherit; color: var(--bar-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #4CC274; box-shadow: 0 0 0 3px rgba(76, 194, 116, .2); margin-right: 4px; vertical-align: 1px; }
.live-dot.stale { background: #F5B700; box-shadow: 0 0 0 3px rgba(245, 183, 0, .2); }
.live-dot.down { background: #FF6B5F; box-shadow: 0 0 0 3px rgba(255, 91, 79, .22); }
.bar-actions { display: flex; align-items: center; gap: 8px; flex: none; }

.acct-menu { position: relative; display: flex; }
.acct-pop { display: none; position: absolute; top: 100%; right: 0; padding-top: 6px; z-index: 40; }
.acct-pop[hidden] { display: none !important; }
@media (hover: hover) { .acct-menu:hover .acct-pop { display: block; } }
.acct-menu:focus-within .acct-pop { display: block; }
.acct-pop-box { min-width: 168px; padding: 6px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); color: var(--ink); box-shadow: 0 12px 32px rgba(0, 0, 0, .28); display: grid; gap: 2px; }
.acct-pop-box a, .acct-pop-box button { display: block; width: 100%; padding: 10px 12px; border: 0; border-radius: 7px; background: none; color: inherit; font: inherit; font-size: 14.5px; text-align: left; text-decoration: none; cursor: pointer; }
.acct-pop-box a:hover, .acct-pop-box button:hover, .acct-pop-box a:focus-visible, .acct-pop-box button:focus-visible { background: var(--line); outline: none; }
#acctPopSignOut { color: var(--closed); }
.btn-bar { padding: 0 14px; min-height: 44px; border-radius: var(--radius); border: 1px solid var(--bar-line-2); background: transparent; color: var(--bar-ink); font-weight: 500; font-size: 14.5px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; line-height: 1; white-space: nowrap; }
.btn-bar:hover { border-color: var(--bar-muted); }
.btn-bar[disabled] { opacity: .55; cursor: default; }
.btn-bar.primary { background: var(--bar-ink); color: var(--bar); border-color: var(--bar-ink); font-weight: 600; }
.btn-bar.icon { padding: 0; width: 44px; justify-content: center; }
.btn-bar.donate { border-color: var(--bar-muted); }
.btn-bar.donate::before { content: "♥"; font-size: 12px; line-height: 1; }
.btn-bar.icon .ic { width: 18px; height: 18px; }

.lang-btn { display: none; padding: 0 10px; font-weight: 600; letter-spacing: .04em; }

.lang-pick > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; }
.lang-pick > summary::-webkit-details-marker { display: none; }
.lang-pick > summary::after { content: ""; flex: none; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: .7; }
.lang-pick[open] > summary::after { transform: translateY(1px) rotate(225deg); }
.lang-pick > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.lang-pick .ic { flex: none; width: 16px; height: 16px; }
.lang-menu { list-style: none; margin: 0; padding: 0; }
.lang-menu a[aria-current="true"] { font-weight: 600; }
.lang-foot > summary { color: inherit; padding: 4px 0; }
.lang-foot > summary:hover { color: var(--ink); }
.lang-foot .lang-menu { display: flex; flex-wrap: wrap; gap: 2px 18px; margin-top: 4px; }
.lang-foot .lang-menu a { display: inline-block; padding: 6px 0; }
body > .site-foot .lang-foot .lang-menu { justify-content: center; }
.drawer-nav .lang-nav > summary { display: flex; gap: 12px; min-height: 44px; padding: 0 10px; border-radius: var(--radius); color: var(--ink); font-size: 15px; }
.drawer-nav .lang-nav > summary:hover { background: var(--surface-2); }
.drawer-nav .lang-nav > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--radius); }
.drawer-nav .lang-nav > summary .ic { width: 18px; height: 18px; color: var(--muted); }
.lang-nav .lang-now { margin-left: auto; color: var(--muted); }
.drawer-nav .lang-nav .lang-menu a { padding-left: 40px; }
.lang-bar { position: relative; display: none; }
.lang-bar > summary::after { display: none; }
.lang-bar .lang-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; min-width: 168px; padding: 6px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); color: var(--ink); box-shadow: 0 12px 32px rgba(0, 0, 0, .28); display: grid; gap: 2px; }
.lang-bar .lang-menu a { display: block; padding: 10px 12px; border-radius: 7px; color: inherit; font-size: 14.5px; text-decoration: none; }
.lang-bar .lang-menu a:hover, .lang-bar .lang-menu a:focus-visible { background: var(--line); outline: none; }
.btn-bar.primary:hover { opacity: .92; }

#refreshBtn { font-variant-numeric: tabular-nums; }
#refreshBtn[disabled] { opacity: 1; background: transparent; color: var(--bar-muted); border-color: var(--bar-line-2); font-weight: 500; }
#refreshBtn[disabled]:hover { opacity: 1; border-color: var(--bar-line-2); }


.find { position: relative; flex: 1 1 360px; max-width: 640px; min-width: 0; }
.find-field { display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 12px 0 14px; background: var(--find-bg); border: 1.5px solid var(--bar-line-2); border-radius: 10px; color: var(--bar-ink); }
.find-field:focus-within { border-color: #F5B700; box-shadow: 0 0 0 3px rgba(245, 183, 0, .16); }
.find-field > .ic { width: 19px; height: 19px; color: var(--bar-muted); }
#find { flex: 1 1 auto; min-width: 0; min-height: 0; height: 100%; padding: 0; background: transparent; border: 0; outline: none; box-shadow: none; color: var(--bar-ink); font: 500 17px/1 var(--body); }
#find:focus { box-shadow: none; border: 0; }
#find::placeholder { color: var(--bar-muted); opacity: 1; }
.find-key { font: 500 12px/1 var(--mono); color: var(--bar-muted); border: 1px solid var(--bar-line-2); border-radius: 5px; padding: 4px 8px; }
.find-field:focus-within .find-key { display: none; }
.find-list { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30; max-height: min(72vh, 540px); overflow: auto; padding: 6px; background: var(--surface); color: var(--ink); border: 1px solid var(--line-2); border-radius: 10px; box-shadow: 0 18px 44px rgba(0, 0, 0, .34); }
.find-group { font: 500 11.5px/1 var(--mono); color: var(--muted); padding: 10px 10px 6px; }
.find-group + .find-opt { margin-top: 0; }
.find-opt { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.find-opt[aria-selected="true"], .find-opt:hover { background: var(--surface-2); }
.find-opt[aria-selected="true"] { box-shadow: inset 0 0 0 1px var(--line-2); }
.find-main { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; font-weight: 500; }
.find-sub { font-size: 12.5px; font-weight: 400; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.find-state { flex: none; max-width: 46%; text-align: right; font-size: 13.5px; font-weight: 600; }
.find-ic { width: 20px; height: 20px; color: var(--muted); }
.find-hint { margin-top: 6px; padding: 8px 10px 4px; border-top: 1px solid var(--line); font: 500 11.5px/1.3 var(--mono); color: var(--muted); }


.wrap { max-width: 1600px; margin: 0 auto; padding: 16px 20px 64px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; min-width: 0; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--line); min-height: 50px; }

.panel-head h2, .panel-head h1 { margin: 0; font: 700 18px/1.15 var(--display); font-stretch: 108%; }
.panel-head .hint { font-size: 13px; color: var(--muted); }
.link-quiet { background: none; border: 0; padding: 6px 0; min-height: 32px; color: var(--muted); font-size: 13.5px; text-decoration: underline; text-underline-offset: 3px; }
.link-quiet:hover { color: var(--ink); }
.banner { border: 1px solid var(--closed); background: var(--closed-bg); color: var(--ink); border-radius: 10px; padding: 12px 16px; }
.banner strong { color: var(--closed); }
.status-line { margin: 0; padding: 8px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--muted); font-size: 13.5px; line-height: 1.4; }

.status-line.quiet { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 70; background: var(--tip-bg); color: var(--tip-ink); padding: 11px 15px; border-radius: var(--radius); font-size: 14px; max-width: min(560px, calc(100% - 32px)); box-shadow: 0 10px 30px rgba(0, 0, 0, .28); overflow-wrap: anywhere; }

.toast a { color: inherit; text-decoration: underline; font-weight: 600; }
.badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 5px; font-size: 12.5px; font-weight: 600; }
.badge.free { background: var(--unknown-bg); color: var(--unknown); }
.badge.supporter { background: var(--caution-bg); color: var(--caution); }
.badge.ultra { background: var(--closed-bg); color: var(--closed); }
.plan-card.ultra { border-color: var(--closed); }
.note.ending { color: var(--caution); font-weight: 600; }


.now { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; }
.now-line { flex: 1 1 420px; min-width: 0; margin: 0; font-size: 18px; font-weight: 500; line-height: 1.35; }
.now-line strong { font-weight: 700; }
.now-line .code { font-size: 15px; }
.now-line .muted { font-size: 15px; font-weight: 400; }

.now-upsell { display: block; margin-top: 4px; font-size: 15px; font-weight: 400; }
.now-upsell .linklike { color: var(--accent); font-weight: 600; text-decoration-color: currentColor; }

.linklike { appearance: none; display: inline; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; cursor: pointer; }
.linklike:hover { text-decoration-color: currentColor; }
.now-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.tile { appearance: none; display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font: 500 14.5px/1 var(--body); }
.tile:hover { border-color: var(--muted); }
.tile-label { display: inline-flex; align-items: center; gap: 8px; }
.tile-label::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--swatch, var(--muted)); flex: none; }
.tile-num { font: 600 13.5px/1 var(--mono); font-variant-numeric: tabular-nums; }
.tile[data-level="closed"] { --swatch: var(--closed); }
.tile[data-level="caution"] { --swatch: var(--caution); }
.tile[data-level="open"] { --swatch: var(--open); }
.tile[data-level="lightning"] { --swatch: var(--strike); }
.tile[data-level="risk"] { --swatch: var(--strike); }
.tile[data-level="all"] .tile-label::before { display: none; }
.tile.hot { border-color: var(--closed); background: var(--closed-bg); color: var(--closed); font-weight: 600; }
.tile[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); --swatch: currentColor; }
.tile.hot[aria-pressed="true"] { background: var(--closed-fill); border-color: var(--closed-fill); color: #fff; }

.active-filters { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.af-label { font-size: 13px; font-weight: 600; color: var(--muted); }
.af-chips { display: contents; }
.af-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; max-width: 100%; padding: 0 2px 0 12px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface-2); font-size: 14px; }
.af-k { flex: none; color: var(--muted); white-space: nowrap; }
.af-v { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.af-chip .chip-x { flex: none; width: 34px; height: 34px; padding: 0; }
.chip-x { width: 36px; height: 36px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); display: grid; place-items: center; }
.chip-x:hover { color: var(--ink); background: var(--surface); }
.chip-x .ic { width: 16px; height: 16px; }


.split { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 16px; align-items: start; }

.main-col { display: grid; gap: 16px; min-width: 0; }
.map-panel { overflow: hidden; }
.map-box { position: relative; background: var(--map-bg); overflow: hidden; }
#map { display: block; width: 100%; height: auto; touch-action: none; cursor: grab; }
#map:active { cursor: grabbing; }
#map .sea { fill: var(--sea); }
#map .land path { fill: var(--land); }
#map .land .world-land { fill-rule: evenodd; }   
#map .borders { fill: none; stroke: var(--border-line); stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
#map .dot { stroke: var(--map-bg); stroke-width: .8; cursor: pointer; vector-effect: non-scaling-stroke; }
#map .dot.open { fill: var(--open); fill-opacity: .75; }
#map .dot.caution { fill: var(--caution); }
#map .dot.closed { fill: var(--closed); stroke-width: 1.6; }
#map .dot.unknown { fill: var(--unknown); }

#map .dot.none { fill: var(--muted); fill-opacity: .32; stroke-opacity: .35; }
#map .dot.lx { stroke: var(--strike); stroke-width: 2; }
#map .dot.risk { stroke: var(--map-bg); stroke-width: .8; }
#map .dot.dim { fill-opacity: .14; stroke-opacity: .2; }
#map .tornado { fill: var(--tornado); cursor: pointer; filter: drop-shadow(0 0 1px rgba(0, 0, 0, .45)); animation: tornado 1.4s ease-in-out infinite alternate; }
@keyframes tornado { from { opacity: .7; } to { opacity: 1; } }

#map .tracks path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
#map .tracks .track-edge { stroke: rgba(0, 0, 0, .5); stroke-width: 5.5; }
#map .tracks .track { stroke: #FF453A; stroke-width: 3; }
#map .tracks .track-ahead { stroke: #FF453A; stroke-opacity: .6; stroke-width: 2; stroke-dasharray: 5 5; stroke-linecap: butt; }
#map .tracks .track-head { fill: #FF453A; stroke: rgba(0, 0, 0, .5); stroke-width: 1; }
#map .strikes path { fill: none; stroke: var(--strike); stroke-linecap: round; stroke-width: 2.4; vector-effect: non-scaling-stroke; }

#map .lx path { fill: none; stroke: var(--strike); stroke-linecap: round; stroke-width: 2.4; vector-effect: non-scaling-stroke; }
#map .lx path.fresh { stroke-width: 3.6; }
#map .focus-ring { fill: none; stroke: var(--ink); stroke-width: 2.5; pointer-events: none; vector-effect: non-scaling-stroke; }
#map .you { fill: var(--accent); stroke: var(--surface); stroke-width: 2.5; pointer-events: none; vector-effect: non-scaling-stroke; }

#map .spot-area { fill: var(--strike); fill-opacity: .08; stroke: var(--strike); stroke-width: 2; stroke-dasharray: 7 5; vector-effect: non-scaling-stroke; pointer-events: none; }
#map .spot-area.active { fill-opacity: .18; stroke-dasharray: none; }
#map .spot-area.off { fill: var(--muted); stroke: var(--muted); fill-opacity: .05; }
#map .spot-area.draft { fill-opacity: .05; stroke-dasharray: 3 4; }
#map .spot-dot { fill: var(--strike); stroke: var(--surface); stroke-width: 2; vector-effect: non-scaling-stroke; pointer-events: none; }
#map .spot-dot.off { fill: var(--muted); }
#map .spot-label { font-family: var(--body); font-weight: 700; fill: var(--ink); stroke: var(--map-bg); paint-order: stroke; stroke-linejoin: round; text-anchor: middle; pointer-events: none; }
#map .ring { fill: none; stroke: var(--closed); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: ring 2.6s ease-out infinite; pointer-events: none; vector-effect: non-scaling-stroke; }

.map-box.offscreen #map .ring, .map-box.offscreen #map .tornado { animation-play-state: paused; }
#map .sea, #map .land, #map .tiles-world, #map .tiles, #map .sat, #map .radar, #map .borders, #map .strikes, #map .lx, #map .tracks { pointer-events: none; }
@keyframes ring { from { opacity: .85; transform: scale(1); } to { opacity: 0; transform: scale(2.8); } }
#map .radar image { opacity: .74; pointer-events: none; }

#map .sat image { pointer-events: none; }
:root[data-theme="light"] #map .sat image { filter: brightness(.55); }
@media (prefers-color-scheme: light) { :root:not([data-theme]) #map .sat image { filter: brightness(.55); } }

#map .tiles image { pointer-events: none; }
#map .tiles.relief { clip-path: url(#landClip); mix-blend-mode: multiply; opacity: .7; }

:root[data-theme="dark"] #map .tiles { filter: url(#tileDark); }
:root[data-theme="dark"] #map .tiles.relief { filter: url(#reliefDark); mix-blend-mode: screen; opacity: .5; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #map .tiles { filter: url(#tileDark); }
  :root:not([data-theme="light"]) #map .tiles.relief { filter: url(#reliefDark); mix-blend-mode: screen; opacity: .5; }
}

#map .tiles-world image { pointer-events: none; }
#map.carto-on .world-borders { display: none; }
.map-attrib { position: absolute; right: 0; bottom: 0; z-index: 3; padding: 2px 8px; border-top-left-radius: 6px; background: var(--overlay); color: var(--ink); font-size: 11px; line-height: 1.4; }
.map-attrib a { color: inherit; }
.map-box.attrib-on .map-bars { bottom: 28px; }

.map-layers { position: absolute; top: 12px; left: 12px; z-index: 3; display: flex; flex-wrap: wrap; gap: 6px; }
.toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: 8px; background: var(--overlay); border: 1px solid var(--line-2); color: var(--ink); font-size: 14px; font-weight: 500; cursor: pointer; }
.toggle input { margin: 0; width: 16px; height: 16px; accent-color: var(--ink); }
.map-tools { position: absolute; top: 12px; right: 12px; z-index: 3; display: flex; flex-direction: column; gap: 6px; }

.map-clock { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 3; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: 8px; background: var(--overlay); border: 1px solid var(--line-2); color: var(--ink); font: 500 13px/1 var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }
.map-clock .mc-label { color: var(--muted); font: 500 12px/1 var(--body); }
.map-clock time:empty { display: none; }
.tool { width: 44px; height: 44px; padding: 0; border-radius: 8px; background: var(--overlay); border: 1px solid var(--line-2); color: var(--ink); display: grid; place-items: center; }
.tool:hover { border-color: var(--muted); }
.tool .ic { width: 18px; height: 18px; }

.map-bars { position: absolute; left: 12px; right: 68px; bottom: 12px; z-index: 3; display: flex; flex-direction: column; gap: 6px; }
.map-bars > [hidden] { display: none; }
.radar-bar { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; padding: 8px 12px; background: var(--overlay); border: 1px solid var(--line-2); border-radius: 10px; font-size: 13px; color: var(--muted); }
.radar-bar input[type="range"] { flex: 1 1 160px; min-width: 120px; margin: 0; accent-color: var(--hi); }
.lx-bar input[type="range"] { accent-color: var(--strike); }

.lx-bar .lx-fade { display: inline-block; width: 42px; height: 6px; border-radius: 3px; vertical-align: middle; background: linear-gradient(90deg, var(--strike), transparent); }

.radar-bar .radar-time { flex: none; width: 27ch; font: 500 12.5px/1.3 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }
html:not([lang="en"]) .radar-bar .radar-time { width: 33ch; }   
#radarBar > .muted { flex-basis: 100%; }

#radarBar .radar-track { --thumb: 18px; --now-p: 0; position: relative; flex: 1 1 160px; min-width: 120px; height: 40px; }
#radarBar .radar-track[hidden] { display: none; }
#radarBar .radar-track::before, #radarBar .rt-ahead { content: ''; position: absolute; top: 50%; height: 4px; margin-top: -2px; right: calc(var(--thumb) / 2); border-radius: 2px; }
#radarBar .radar-track::before { left: calc(var(--thumb) / 2); background: var(--line-2); }
#radarBar .rt-ahead { left: calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--now-p)); background: repeating-linear-gradient(90deg, var(--hi) 0 6px, transparent 6px 10px); }
#radarBar .radar-track:not(.has-ahead) .rt-ahead { display: none; }
#radarBar .rt-now { position: absolute; top: 9px; bottom: 7px; left: calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--now-p)); width: 2px; margin-left: -1px; border-radius: 1px; background: var(--ink); }
#radarBar .rt-now > span { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 1px; font: 700 10.5px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
#radarBar .radar-track input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
#radarBar .radar-track input[type="range"]::-webkit-slider-runnable-track { height: 100%; background: transparent; border: 0; }
#radarBar .radar-track input[type="range"]::-moz-range-track { height: 100%; background: transparent; border: 0; }
#radarBar .radar-track input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; box-sizing: border-box; width: var(--thumb); height: var(--thumb); margin-top: calc((40px - var(--thumb)) / 2); border-radius: 50%; border: 2px solid var(--surface); background: var(--hi); box-shadow: 0 1px 4px rgba(0, 0, 0, .45); }
#radarBar .radar-track input[type="range"]::-moz-range-thumb { box-sizing: border-box; width: var(--thumb); height: var(--thumb); border-radius: 50%; border: 2px solid var(--surface); background: var(--hi); box-shadow: 0 1px 4px rgba(0, 0, 0, .45); }
#radarBar .radar-track input[type="range"]:focus { outline: none; }
#radarBar .radar-track input[type="range"]:focus-visible { outline: 2px solid var(--hi); outline-offset: 2px; border-radius: 6px; }
.radar-bar .muted .radar-loading { display: inline-block; min-width: 10ch; }

#map image.ahead, #radarTiles.ahead { opacity: .62; }
.radar-bar .btn.small.icon { min-width: 40px; min-height: 40px; padding: 0 10px; border-radius: 20px; }
.radar-bar .btn.small.icon .ic { width: 15px; height: 15px; }

.radar-bar .radar-ff .ic { fill: currentColor; }
.radar-bar .radar-ff.on { background: var(--hi); border-color: var(--hi); color: #111; }
.radar-bar .radar-ff:disabled { opacity: .6; cursor: progress; }
.radar-bar .radar-past { min-height: 0; padding: 0; margin-left: 6px; font-size: 13px; }
.map-empty { padding: 48px 16px; text-align: center; color: var(--muted); }
.lock-note { position: absolute; left: 12px; right: 68px; top: 60px; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; background: var(--overlay); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 8px 12px; font-size: 13.5px; color: var(--muted); }
.legend { display: flex; gap: 6px 16px; flex-wrap: wrap; padding: 10px 16px 4px; font-size: 13px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.legend i.sw-closed { background: var(--closed); }
.legend i.sw-caution { background: var(--caution); }
.legend i.sw-open { background: var(--open); }
.legend i.strike-key { width: 6px; height: 6px; background: var(--strike); }
.legend i.track-key { width: 16px; height: 3px; border-radius: 2px; background: #FF453A; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); }
.legend i.tornado-key { width: 0; height: 0; border-radius: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 9px solid var(--tornado); }
.map-credit { margin: 0; padding: 2px 16px 12px; font-size: 12px; color: var(--muted); }
.tip { position: absolute; z-index: 5; pointer-events: none; background: var(--tip-bg); color: var(--tip-ink); border-radius: var(--radius); padding: 8px 10px; font-size: 13px; line-height: 1.45; max-width: 280px; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); }
.tip .code { font-size: 13px; }

.fc-hours { display: flex; gap: 4px; overflow-x: auto; padding: 4px 0 6px; scrollbar-width: thin; }
.fc-h { display: grid; justify-items: center; gap: 3px; min-width: 46px; padding: 6px 2px; border-radius: 8px; background: var(--surface-2); font-size: 12px; color: var(--muted); }
.fc-h .ic, .fc-day .ic { width: 20px; height: 20px; color: var(--ink); }
.fc-temp { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.fc-pop { font-size: 11px; min-height: 1.2em; color: var(--muted); }
.fc-pop.wet { color: var(--accent); font-weight: 600; }
.fc-days { display: grid; }
.fc-day { display: grid; grid-template-columns: minmax(84px, 110px) 20px minmax(60px, 76px) minmax(56px, 72px) 1fr; gap: 8px; align-items: center; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.fc-day:first-child { border-top: 0; }
.fc-name { font-weight: 500; }
.fc-short { color: var(--muted); }
.fc-src { margin-top: 8px; }
.fc-src a { color: inherit; }

.fc-warnings { list-style: none; margin: 4px 0 10px; padding: 0; display: grid; gap: 6px; }
.fc-warnings li { padding: 8px 10px; border-radius: 8px; border-left: 3px solid var(--warn, #d97706); background: var(--surface-2); font-size: 13.5px; line-height: 1.45; }

.fc-warnings li.lvl-advisory { border-left-color: #e0b400; }
.fc-warnings li.lvl-warning { border-left-color: #e0362c; }
.fc-warnings li.lvl-danger { border-left-color: #a02cd8; }
.fc-warnings li.lvl-emergency { border-left-color: #5b0f8a; border-left-width: 5px; }
.fc-disclaimer { font-size: 12px; }
.fc-soon, .fc-obs { display: flex; align-items: center; gap: 6px; }
.fc-soon .ic, .fc-obs .ic { width: 18px; height: 18px; flex: none; }
.fc-soon.wet, .fc-obs.wet { color: var(--accent); font-weight: 600; }

.fc-wind { font-size: 10.5px; white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; }
.fc-wind.gusty { color: var(--accent); font-weight: 600; }
@media (max-width: 480px) { .fc-day { grid-template-columns: 78px 20px 1fr; } .fc-day .fc-pop, .fc-day .fc-short { grid-column: 3; } }

.change-ad { margin: 12px 0; min-height: 90px; }
.change-ad:empty { display: none; }


.side { display: grid; gap: 16px; min-width: 0; }
.list { list-style: none; margin: 0; padding: 0; max-height: 380px; overflow: auto; }
.list li + li { border-top: 1px solid var(--line); }
.row-btn { display: grid; gap: 6px; width: 100%; text-align: left; padding: 12px 16px; background: none; border: 0; color: inherit; }
.row-btn:hover { background: var(--surface-2); }
.row-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.row-place { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; }
.row-meta { flex: none; }
.row-dist { font: 500 12px/1 var(--mono); color: var(--muted); white-space: nowrap; }
.row-state { flex: none; max-width: 54%; text-align: right; font-size: 13.5px; font-weight: 600; color: var(--muted); }
li.lv-closed .row-state { color: var(--closed); }
li.lv-caution .row-state { color: var(--caution); }
li.lv-open .row-state { color: var(--open); }
li.lv-lx .row-state { color: var(--strike); }
.row-why { font-size: 13px; color: var(--muted); }

.tl { display: block; width: 100%; height: 10px; }
.tl-track { fill: var(--line); }
.tl-closed { fill: var(--closed); }
.tl-caution { fill: var(--caution); }
.tl-unknown { fill: var(--unknown); }
.tl-lx { fill: var(--strike); }
.tl-scale { display: flex; justify-content: space-between; padding: 6px 16px 12px; font: 500 11px/1 var(--mono); color: var(--muted); }
.empty { padding: 16px; color: var(--muted); margin: 0; font-size: 14px; }

.fav-add { list-style: none; position: relative; display: grid; gap: 8px; padding: 14px 16px 16px; }
.fav-add-label { font-weight: 600; font-size: 14.5px; color: var(--ink); }
.fav-add input { box-sizing: border-box; width: 100%; min-height: 44px; padding: 0 12px; border: 1.5px solid var(--line-2); border-radius: var(--radius); background: var(--surface-2); color: var(--ink); font-size: 16px; }
.fav-add input:focus { outline: none; border-color: #F5B700; box-shadow: 0 0 0 3px rgba(245, 183, 0, .16); }
.fav-add .suggest { left: 16px; right: 16px; top: auto; }

#favList { max-height: none; overflow: visible; }
.list li.has-grip { display: flex; align-items: stretch; position: relative; background: var(--surface); }
.list li.has-grip .row-btn { flex: 1; min-width: 0; padding-left: 2px; }
.row-grip { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; padding: 0; border: 0; background: none; color: var(--muted); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.row-grip .ic { width: 20px; height: 20px; stroke-width: 3.4; }
.row-grip:hover, .row-grip:focus-visible { color: var(--ink); background: var(--surface-2); }
.list.sorting, .list.sorting * { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.list li.dragging { z-index: 2; background: var(--surface-2); box-shadow: 0 12px 30px rgba(0, 0, 0, .32), 0 0 0 2px var(--hi); border-radius: 8px; border-top-color: transparent; }
.list li.dragging .row-grip { color: var(--hi); }
.fav-more { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; padding: 10px 16px; border: 0; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; background: var(--surface-2); color: var(--ink); font-size: 14.5px; font-weight: 600; cursor: pointer; }
.fav-more:hover { background: var(--line); }
.fav-more .ic { width: 18px; height: 18px; }
.ic.flip { transform: rotate(180deg); }
.find-more { border-top: 1px dashed var(--line-2); border-radius: 0 0 8px 8px; }
.find-more .find-ic { color: var(--hi); }
.shift { font-weight: 600; font-size: 13px; color: var(--ink); }
.shift .to-closed { color: var(--closed); }
.shift .to-caution { color: var(--caution); }
.shift .to-open { color: var(--open); }


.controls { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: end; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.field { display: grid; gap: 5px; min-width: 0; }

.field select { min-width: 0; max-width: 100%; }
.field-label { font-size: 13px; font-weight: 600; color: var(--muted); }
input:not([type="checkbox"]), select { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 6px 10px; min-height: 40px; max-width: 100%; color: var(--ink); }
input:not([type="checkbox"]):focus, select:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(30, 78, 140, .18); }
input::placeholder { color: var(--muted); opacity: .85; }
.field.grow { flex: 1 1 220px; }
.field.grow input { width: 100%; }
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; flex-wrap: wrap; }
.seg button { border: 0; background: var(--surface); padding: 0 12px; min-height: 40px; font-size: 14px; font-weight: 500; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 14px; min-height: 40px; border-radius: var(--radius); border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font-weight: 500; font-size: 14px; text-decoration: none; white-space: nowrap; }
.btn:hover { border-color: var(--muted); background: var(--surface-2); }
.btn.primary { background: var(--ink); color: var(--surface); border-color: var(--ink); font-weight: 600; }
.btn.primary:hover { opacity: .92; background: var(--ink); }
.btn.small { min-height: 34px; padding: 0 11px; font-size: 13.5px; }
.btn[disabled] { opacity: .55; cursor: default; }

.btn[data-busy] { opacity: .8; cursor: progress; }
.btn.done, .btn.primary.done, .btn.done:hover { background: var(--open); border-color: var(--open); color: #fff; opacity: 1; }
.btn.done .ic { width: 15px; height: 15px; }

.spot-where input#spotAddress { flex: 1 1 240px; min-width: 0; }
.spot-or { font-size: 13.5px; }
.alert-form { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: end; padding: 14px 16px; }
.alert-form .alert-msg { flex-basis: 100%; min-height: 1.5em; }
.alerts-fine { padding: 12px 16px; margin: 0; border-top: 1px solid var(--line); }
.code-btn { background: none; border: 0; padding: 0; font: 600 13.5px/1.3 var(--mono); letter-spacing: .03em; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.code-btn:hover { text-decoration-color: currentColor; }
.link-btn { display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; min-height: 44px; border-radius: var(--radius); border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); text-decoration: none; font-weight: 500; font-size: 14px; }
.link-btn:hover { border-color: var(--muted); }
.link-btn.primary { background: var(--ink); color: var(--surface); border-color: var(--ink); font-weight: 600; }
.link-btn.primary.on .ic { fill: currentColor; }

#dAlert.on { border-color: var(--open); color: var(--open); font-weight: 600; }
#dAlert.on .ic { fill: currentColor; }

#alertsDialog .modal-body { padding: 14px 16px 16px; }

.plans-notice { margin: 10px 0; padding: 10px 12px; border: 1px dashed var(--line-2); border-radius: 10px; font-size: 14px; line-height: 1.5; }
.plans-notice p { margin: 0; }
.plans-notice p + p { margin-top: 6px; }

.donate-banner.promo-banner { border-color: var(--flex-blue, #0578FF); }
.donate-banner.promo-banner > .ic { color: #FFC52E; }
#promoDialog .modal-body { padding: 14px 16px 16px; }
.promo-lead { margin: 0 0 12px; line-height: 1.5; }
#promoDialog p { line-height: 1.5; }
.promo-plans { display: grid; gap: 8px; margin: 8px 0 12px; }
.promo-plans .btn { justify-content: flex-start; }
.promo-hush { margin-top: 12px; font-size: 13px; color: var(--muted); }

.flash-timer { display: flex; align-items: baseline; gap: 8px; margin: 0 0 10px; color: var(--muted); }
.flash-timer .flash-clock { font-size: 34px; font-weight: 700; color: var(--flex-blue, #0578FF); }
.flash-clock { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.flash-chip { position: fixed; right: 16px; bottom: 76px; z-index: 65; display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border: 0; border-radius: 999px; background: var(--flex-blue, #0578FF); color: #fff; font: inherit; font-size: 14px; cursor: pointer; box-shadow: 0 8px 24px rgba(0, 0, 0, .28); }
.flash-chip[hidden] { display: none; }
.flash-chip .ic { width: 16px; height: 16px; fill: currentColor; }
.flash-chip .flash-clock { font-weight: 700; }
.flash-chip span:last-child { text-decoration: underline; }

.signup-box { display: grid; gap: 8px; justify-items: start; padding: 12px 14px; border: 1px solid var(--flex-blue, #0578FF); border-radius: var(--radius); background: var(--surface-2); }
.signup-box p { margin: 0; line-height: 1.5; }

.my-widget { margin: 8px 0 10px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--surface); }
.mw-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px 0; }
.mw-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.mw-tag .ic { width: 14px; height: 14px; color: var(--hi); }
.mw-pick { font: inherit; font-size: 13px; padding: 4px 8px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--surface-2); color: var(--ink); max-width: 50%; }
.mw-body { display: grid; gap: 6px; width: 100%; padding: 8px 12px 12px; border: 0; background: transparent; color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.mw-body:hover { background: var(--surface-2); }
.mw-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mw-place { color: var(--muted); font-size: 14px; }
.mw-state { margin-left: auto; font-weight: 700; font-size: 15px; }
.mw-why, .mw-lx { font-size: 13px; color: var(--muted); }
.mw-body.lv-closed { box-shadow: inset 4px 0 0 var(--closed); }
.mw-body.lv-caution, .mw-body.lv-lx { box-shadow: inset 4px 0 0 var(--caution); }
.mw-body.lv-open { box-shadow: inset 4px 0 0 var(--open); }
.mw-empty { margin: 0; padding: 10px 12px; }

.ap-page { max-width: 860px; }
.ap-pad { padding: 14px 16px 18px; }
.ap-pad h3 { margin: 16px 0 6px; font-size: 15px; }
.ap-lede { margin: 0 0 4px; line-height: 1.55; }
.ap-steps { margin: 4px 0 10px; padding-left: 20px; line-height: 1.6; }
.ap-steps li { margin: 4px 0; }
.ap-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0; }
.ap-form { display: grid; gap: 12px; }
.ap-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.ap-row input, .ap-form input:not([type="radio"]):not([type="checkbox"]), .ap-form textarea { width: 100%; box-sizing: border-box; }
.ap-issue input { flex: none; width: auto; margin: 0; }
.ap-form textarea { font: inherit; line-height: 1.5; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--surface); color: var(--ink); resize: vertical; }
.ap-due { margin: 0; }
.ap-due.late { color: var(--hi); }
.ap-issues { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; }
.ap-issue { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--surface); cursor: pointer; }
.ap-issue:has(input:checked) { border-color: var(--ink); background: var(--surface-2); font-weight: 600; }
.ap-out { display: grid; gap: 10px; border-top: 1px solid var(--line); padding-top: 12px; }
.ap-tips { margin: 0; padding-left: 18px; font-size: 13px; color: var(--muted); line-height: 1.55; }
.ap-msg { margin: 0; }

.tm-big { font-size: 17px; }
.tm-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin: 12px 0; }
.tm-way { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--surface); color: var(--ink); text-decoration: none; line-height: 1.45; }
.tm-way:hover { border-color: var(--ink); }
.tm-num { flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--flex-blue, #0578FF); color: #fff; font-weight: 700; font-size: 17px; }
.tm-one { margin: 0 0 12px; padding: 10px 12px; border-left: 4px solid var(--flex-blue, #0578FF); background: var(--surface-2); border-radius: 0 var(--radius) var(--radius) 0; line-height: 1.5; }
.tm-steps { list-style: none; counter-reset: tm; margin: 0; padding: 0; display: grid; gap: 14px; }
.tm-steps > li { counter-increment: tm; position: relative; padding-left: 48px; line-height: 1.55; }
.tm-steps > li::before { content: counter(tm); position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); border: 2px solid var(--flex-blue, #0578FF); font-weight: 700; }
.tm-steps h3 { margin: 4px 0 4px; font-size: 16px; }
.tm-steps p { margin: 4px 0; }
.tm-look, .tm-small { margin: 6px 0; padding-left: 20px; line-height: 1.55; }
.tm-look li, .tm-small li { margin: 3px 0; }
.tm-clock { margin: 8px 0 4px; max-width: 460px; }
.tm-box { margin: 16px 0 4px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--surface-2); line-height: 1.55; }
.tm-box h3 { margin: 0 0 6px; font-size: 15px; }
.tm-box p { margin: 4px 0; }
.tm-addr { font-style: normal; font-family: var(--mono); margin: 8px 0; padding: 10px 12px; border: 1px dashed var(--line-2); border-radius: var(--radius); line-height: 1.5; }
.tm-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.tm-tab[aria-selected="true"] { border-color: var(--ink); background: var(--surface-2); font-weight: 700; }
.tm-proof { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
#tmPrintOut { display: none; }
@media print {
  body.tm-printing #tmPrintOut, body.tm-printing #tmPrintOut * { visibility: visible; }
  body.tm-printing #tmPrintOut { display: block; position: absolute; left: 0; top: 0; margin: 0; white-space: pre-wrap; font: 12pt/1.5 Georgia, 'Times New Roman', serif; color: #000; }
}

#authDialog .keep-row { margin-top: 12px; }
#authDialog .keep-hint { margin: 2px 0 0; }

#donateDialog .modal-body { padding: 14px 16px 16px; }
#donateDialog p { line-height: 1.5; }
.donate-amounts { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 8px; margin: 0 0 10px; }
.donate-amount { display: grid; gap: 2px; justify-items: center; padding: 10px 8px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; }
.donate-amount strong { font-size: 16px; }
.donate-amount span { font-size: 12px; color: var(--muted); }
.donate-amount.year { border-color: var(--hi); }
.donate-amount.year span { color: var(--ink); font-weight: 600; }
.donate-amount:hover { border-color: var(--ink); background: var(--surface-2); }
.donate-amount[aria-checked="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.donate-amount[aria-checked="true"] span { color: var(--surface); }
.donate-amount:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.donate-other { display: grid; gap: 4px; margin: 0 0 6px; }
.donate-other input { max-width: 160px; }
.donate-coins-title { margin: 12px 0 8px; font-size: 14px; }
#donateCoins { display: grid; gap: 8px; margin-bottom: 10px; }

#newsDialog .modal-body { padding: 14px 16px 16px; }
.news-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 12px; }
.news-list li { display: grid; gap: 3px; line-height: 1.45; }
.news-list strong { font-size: 15px; }
.news-list span { color: var(--muted); font-size: 14px; }
.alerts-lead { margin: 0 0 12px; line-height: 1.5; }
.alerts-steps { margin: 0 0 16px; padding-left: 22px; display: grid; gap: 8px; line-height: 1.45; }
.alerts-steps.one { padding-left: 0; list-style: none; }
.alerts-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.alerts-love { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.alerts-love a { color: var(--closed); font-weight: 600; }

.link-btn.share-closed { background: var(--closed-fill); border-color: var(--closed-fill); color: #fff; font-weight: 600; }
.link-btn.share-closed:hover { border-color: var(--closed-fill); filter: brightness(1.08); }
.list li.has-share { display: flex; align-items: stretch; }
.list li.has-share .row-btn { flex: 1; min-width: 0; }
.row-share { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 48px; border: 0; border-left: 1px solid var(--line); background: none; color: var(--closed); cursor: pointer; }
.row-share:hover { background: var(--closed-bg); }
.share-hello { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); font-size: 14px; }
.share-hello > span { flex: 1 1 220px; }

.donate-banner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 8px 12px; padding: 8px 8px 8px 14px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); font-size: 14px; line-height: 1.4; }
.donate-banner > .ic { width: 18px; height: 18px; color: var(--closed); fill: currentColor; stroke: none; }
.donate-banner > p { margin: 0; min-width: 0; }
.donate-banner > p span { color: var(--muted); }
.donate-banner > .chip-x:hover { background: var(--surface-2); }
@media (max-width: 720px) {
  
  .donate-banner { grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; }
  .donate-banner > .ic { margin-top: 1px; }
  .donate-banner > .chip-x { grid-column: 3; grid-row: 1; margin: -6px 0 -6px; }
  .donate-banner > .btn { grid-column: 2 / 4; justify-self: start; }
}
:root[data-donate="off"] .donate-banner { display: none; }

.emergency-banner { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 8px 12px; margin: 0 0 12px; padding: 10px 14px; border: 1px solid var(--caution); border-left-width: 4px; border-radius: 10px; background: var(--caution-bg, var(--surface)); font-size: 14px; line-height: 1.45; }
.emergency-banner > .ic { width: 20px; height: 20px; margin-top: 1px; color: var(--caution); fill: currentColor; stroke: none; }
.emergency-banner > p { margin: 0; min-width: 0; }
.emergency-banner > p span { color: var(--muted); }
.note { font-size: 13.5px; color: var(--muted); margin: 0; }
.note.mt { margin-top: 8px; }


.account-body { padding: 16px; display: grid; gap: 16px; }

.sg-promo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface-2); }
.sg-promo p { margin: 0; flex: 1 1 260px; }
.sg-promo .note { display: block; margin-top: 3px; }
.account-body > p { margin: 0; max-width: 70ch; }
.account-row { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.watch-editor { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: end; }
.watch-editor .alert-msg { flex-basis: 100%; }
.watch-editor .field > .note { max-width: 40ch; }   
.watch-list { display: grid; gap: 8px; }
.watch-row { display: flex; gap: 8px; align-items: center; position: relative; }
.watch-row input[data-i] { flex: 1 1 200px; }

.suggest { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; margin-top: 4px; max-height: 280px; overflow-y: auto; background: var(--surface); border: 1px solid var(--line-2); border-radius: 8px; box-shadow: 0 12px 30px rgba(0, 0, 0, .18); }
.suggest [role="option"] { display: grid; gap: 2px; padding: 8px 10px; cursor: pointer; font-size: 13.5px; border-top: 1px solid var(--line); }
.suggest [role="option"]:first-child { border-top: 0; }
.suggest [role="option"][aria-selected="true"], .suggest [role="option"]:hover { background: var(--surface-2); }
.suggest .s-line { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.suggest .s-code { font: 600 13px/1.2 var(--mono); color: var(--ink); }
.suggest .s-place { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest .s-addr { color: var(--ink); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-place .addr { white-space: normal; }
.row-alert { white-space: nowrap; }
.quiet-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.push-field { flex-basis: 100%; }

.receipt { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 10px 0 14px; font-size: 14px; }
.receipt dt { color: var(--muted); }
.receipt dd { margin: 0; font-family: var(--mono); word-break: break-all; }
@media print {
  body * { visibility: hidden; }
  #noticeDialog, #noticeDialog * { visibility: visible; }
  #noticeDialog { position: absolute; left: 0; top: 0; border: 0; box-shadow: none; }
  #noticeDialog .btn, #noticeDialog .close-btn { display: none; }
}

.account-page main.wrap > :not(#alertsPanel):not(#banner):not(#adblockBar):not(#toast) { display: none !important; }
.account-page #alertsPanel { margin-top: 16px; }
.account-page .find { display: none; }
.push-field .note { flex: 1 1 200px; }
.quiet-row input[type="time"] { min-height: 40px; width: 8.5em; }
.history { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.history li { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 4px 10px; align-items: baseline; font-size: 13.5px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.history .when { font: 500 12px/1.4 var(--mono); color: var(--muted); }
.history .muted { font-size: 13px; }
.credits-box { border: 1px solid var(--line); background: var(--surface-2); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.credits-box .note { flex-basis: 100%; }
.auto-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }

.notify-days { gap: 6px; }
.day-toggle { position: relative; display: inline-flex; cursor: pointer; }
.day-toggle input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.day-toggle span { min-width: 44px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0 8px; border: 1px solid var(--line); border-radius: 18px; font-size: 14px; color: var(--muted); }
.day-toggle input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--surface); font-weight: 600; }
.day-toggle input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.auto-toggle input { margin: 0; accent-color: var(--ink); }
.plan-box { display: grid; gap: 10px; }
.plan-box > strong { font: 700 17px/1.1 var(--display); font-stretch: 108%; }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.plan-grid .plan-foot { grid-column: 1 / -1; margin: 0; }
.plan-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; display: grid; gap: 6px; align-content: start; background: var(--surface); }
.plan-card.current { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.plan-card.pass { background: var(--surface-2); }
.plan-card .btn[disabled] { opacity: .45; }
.plan-card strong { font: 600 13px/1.3 var(--body); color: var(--muted); }
.plan-price { font: 800 26px/1 var(--display); font-stretch: 105%; }
.plan-price .muted { font: 400 13px/1.2 var(--body); }
.plan-tag { margin: 2px 0 4px; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.plan-card ul { margin: 2px 0 0; padding-left: 16px; font-size: 13px; color: var(--muted); line-height: 1.55; }
.plan-card .btn { justify-self: start; margin-top: 6px; }
.account-sub { display: grid; gap: 10px; padding-top: 10px; }
.device-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.device-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); font-size: 13.5px; }
.device-list li > span:first-child { flex: 1 1 160px; }
.sec-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.sec-row strong { min-width: 140px; }
.link-channel { border-top: 1px solid var(--line); padding-top: 12px; }
.link-channel summary { cursor: pointer; font-size: 14px; font-weight: 500; color: var(--ink); list-style: none; display: flex; align-items: center; gap: 8px; min-height: 32px; }
.link-channel summary::-webkit-details-marker { display: none; }
.link-channel summary::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(-45deg); transition: transform .15s; margin-left: 2px; }
.link-channel[open] summary::before { transform: rotate(45deg); }
.link-channel .alert-form { padding: 10px 0 0; }

#watchLabel { font: 700 17px/1.2 var(--display); font-stretch: 108%; color: var(--ink); text-transform: none; letter-spacing: 0; }
#alertSettings .watch-editor { padding-top: 12px; }
.captcha-row { display: grid; gap: 8px; padding: 0 16px; }
.puzzle-foot { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }

.puzzle { display: grid; gap: 8px; min-height: 60px; user-select: none; -webkit-user-select: none; }
.pz-prompt { margin: 0; font-weight: 600; }
.pz-wait { margin: 0; font-size: 13px; }
.pz-stage, .pz-grid { position: relative; width: 100%; border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; background: var(--surface-2); }
.pz-grid { aspect-ratio: 1 / 1; }
.pz-bg { display: block; width: 100%; height: 100%; pointer-events: none; }
.pz-piece { position: absolute; left: 0; height: auto; cursor: grab; touch-action: none; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .45)); }
.puzzle.dragging .pz-piece, .puzzle.dragging .pz-handle { cursor: grabbing; }
.pz-track { position: relative; width: 100%; height: 40px; border-radius: 20px; background: var(--surface-2); border: 1px solid var(--line-2); }
.pz-handle { position: absolute; top: 2px; left: 0; height: 34px; min-width: 40px; border-radius: 17px; border: 1px solid var(--accent); background: var(--accent); color: var(--surface); font-size: 18px; cursor: grab; touch-action: none; }
.pz-handle:focus-visible { outline: 3px solid var(--hi, #F5B700); outline-offset: 2px; }
.pz-cells { position: absolute; inset: 0; display: grid; }
.pz-cell { border: 0; padding: 0; margin: 0; background: transparent; cursor: pointer; position: relative; border-radius: 4px; }
.pz-cell:hover { background: rgba(255, 255, 255, .12); }
.pz-cell:focus-visible { outline: 3px solid var(--hi, #F5B700); outline-offset: -3px; }
.pz-cell[aria-pressed="true"] { box-shadow: inset 0 0 0 4px var(--accent); background: rgba(30, 78, 140, .18); }
.pz-cell[aria-pressed="true"]::after { content: "✓"; position: absolute; top: 4px; right: 6px; width: 22px; height: 22px; border-radius: 11px; background: var(--accent); color: #fff; font-size: 14px; line-height: 22px; text-align: center; }
.email-hint { margin: 0 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.alert-form .email-hint { margin: 0; flex-basis: 100%; }
.mail-paused { margin: 10px 0; padding: 10px 12px; border: 1px solid #C9851A; border-left-width: 4px; border-radius: var(--radius); background: rgba(245, 183, 0, .1); }
.mail-paused p { margin: 4px 0; }
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.report-box { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; display: grid; gap: 8px; background: var(--surface-2); }
.report-box h3 { margin: 0; }
.report-badge { display: inline-flex; align-items: center; gap: 5px; padding: 1px 7px; border-radius: 5px; font-size: 12px; font-weight: 600; background: var(--closed-bg); color: var(--closed); margin-left: 6px; white-space: nowrap; }
.report-badge.open { background: var(--open-bg); color: var(--open); }
.tornado-flag { color: var(--tornado); margin-left: 4px; }
.tornado-note { color: var(--tornado); }


.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th { text-align: left; font-size: 12.5px; font-weight: 600; color: var(--muted); padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--surface); }
th button { background: none; border: 0; padding: 0; font: inherit; color: inherit; min-height: 28px; }
th button[aria-sort]::after { content: " ↓"; }
th button[aria-sort="ascending"]::after { content: " ↑"; }
td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 14px; }
tbody tr { cursor: pointer; }
tbody tr:hover { background: var(--surface-2); }
tbody tr.lv-closed td:first-child { box-shadow: inset 3px 0 0 var(--closed); }
tbody tr.lv-caution td:first-child { box-shadow: inset 3px 0 0 var(--caution); }
.tags { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.al-title { display: block; }
.al-group { display: block; font-size: 12.5px; color: var(--muted); }
.c-until, .c-lx { white-space: nowrap; }
.lx-hit { color: var(--strike); font-weight: 600; }

li.forming .row-why { color: var(--ink); }
p.note.forming { border-left: 3px solid var(--strike); padding-left: 8px; }

.rings { display: flex; align-items: center; gap: 5px; margin: 4px 0 0; }
.rings i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--strike); box-sizing: border-box; }
.rings i.on { background: var(--strike); }
.rings-label { font: 500 11px/1 var(--mono); color: var(--muted); }
.risk-val { font-weight: 600; }
.risk-val.hi { color: var(--strike); }
.table-foot { margin: 0; padding: 12px 16px; font-size: 13px; color: var(--muted); }
.pager { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--line); }
.pager .note { min-width: 9ch; text-align: center; font-variant-numeric: tabular-nums; }
.pager-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 40px; }
.star { background: none; border: 0; padding: 4px; margin-left: 4px; color: var(--line-2); vertical-align: -2px; line-height: 1; }
.star .ic { width: 16px; height: 16px; stroke-width: 1.8; }
.star:hover { color: var(--caution); }
.star.on { color: var(--caution); }
.star.on .ic { fill: currentColor; }

.pin { background: none; border: 0; padding: 4px; margin-left: 2px; color: var(--muted); vertical-align: -2px; line-height: 1; cursor: pointer; }
.pin .ic { width: 16px; height: 16px; }
.pin:hover, .pin:focus-visible { color: var(--accent); }
.c-code .star { margin-left: 6px; }


.board .c-rank { width: 3ch; color: var(--muted); font-variant-numeric: tabular-nums; }
.board .c-num, .board-counts .c-num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.board tr.board-row.sel td { background: var(--surface-2); }
.board tr.board-row.sel td:first-child { box-shadow: inset 3px 0 0 var(--closed); }
.board tbody tr.board-detail { cursor: default; }
.board tbody tr.board-detail:hover { background: none; }
.board tr.board-detail > td { background: var(--surface-2); padding: 4px 14px 14px; }
.board-box { display: grid; gap: 8px; max-width: 760px; }
.board-box p { margin: 0; font-size: 13.5px; line-height: 1.45; }
.board-counts th, .board-counts td { padding: 6px 10px; font-size: 13px; background: none; white-space: nowrap; }
.board-counts tbody th { text-align: left; color: var(--muted); font-weight: 600; }
.board-counts tbody tr { cursor: default; }
.board-counts tbody tr:hover { background: none; }

#dPast { display: grid; gap: 8px; }
#dPast .note { margin: 0; }

.past-pay { padding: 8px 12px; border-left: 4px solid var(--open); border-radius: 0 8px 8px 0; background: var(--open-bg); }
.past-pay p { margin: 0; }
.past-pay strong { color: var(--open); }
.past-pay-terms { margin-top: 2px !important; font-size: 12px; color: var(--muted); }
.past-grid { display: grid; grid-template-columns: 42px repeat(12, minmax(0, 1fr)); gap: 3px; align-items: center; }
.past-mh { text-align: center; font-size: 11px; font-weight: 600; color: var(--muted); }
.past-mh .m3 { display: none; }
.past-y { font-size: 12px; font-weight: 600; line-height: 1.15; }
.past-y small { display: block; font-size: 11px; font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }
.past-none { text-align: center; color: var(--line-2); font-size: 12px; }
.past-cell { position: relative; min-width: 0; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--ink); font: inherit; font-size: 12px; font-variant-numeric: tabular-nums; cursor: pointer; }
.past-cell.lv0 { color: var(--muted); }
.past-cell.lv1 { background: var(--closed-bg); border-color: transparent; }
.past-cell.lv2 { background: var(--closed-bg); background: color-mix(in srgb, var(--closed) 38%, var(--surface)); border-color: transparent; }
.past-cell.lv3 { background: var(--closed); background: color-mix(in srgb, var(--closed) 68%, var(--surface)); border-color: transparent; color: #fff; }
.past-cell.lv4 { background: var(--closed); border-color: transparent; color: #fff; font-weight: 700; }
.past-cell.sel { outline: 2px solid var(--ink); outline-offset: 1px; }
.past-cell.part::after { content: ''; position: absolute; top: 3px; right: 3px; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .7; }
.past-month p { margin: 0; font-size: 13.5px; line-height: 1.45; }
.past-list { list-style: none; margin: 6px 0 0; padding: 0; }
.past-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
@media (min-width: 721px) { .past-mh .m1 { display: none; } .past-mh .m3 { display: inline; } }


.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; line-height: 1.25; white-space: nowrap; }
.pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.pill.closed { color: var(--closed); }
.pill.caution { color: var(--caution); }
.pill.open { color: var(--open); }
.pill.unknown { color: var(--unknown); }
.pill .ovr { font-weight: 500; opacity: .85; }


.method { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px 28px; padding: 18px 16px 22px; }
.method h3 { margin: 0 0 6px; font: 700 15.5px/1.3 var(--display); color: var(--ink); }
.method p, .method ul { margin: 0 0 8px; color: var(--muted); max-width: 62ch; font-size: 14px; }
.method ul { padding-left: 18px; }

.method-more { margin: 0; padding: 14px 16px 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chip { font-size: 12.5px; padding: 3px 8px; border-radius: 5px; background: var(--closed-bg); color: var(--closed); }


dialog.sheet { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(460px, 100%); max-width: 100%; height: 100%; max-height: none; border: 0; border-left: 1px solid var(--line); padding: 0; background: var(--surface); color: var(--ink); box-shadow: -16px 0 40px rgba(0, 0, 0, .2); overflow: auto; overscroll-behavior: contain; }
dialog.sheet::backdrop { background: var(--scrim); }

dialog.sheet.beside { z-index: 15; top: var(--bar-h, 68px); height: calc(100% - var(--bar-h, 68px)); }
.sheet-head { position: sticky; top: 0; z-index: 1; background: var(--surface); border-bottom: 1px solid var(--line); padding: calc(14px + env(safe-area-inset-top, 0px)) 20px 14px; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 12px; }
dialog.sheet.beside .sheet-head { padding-top: 12px; }
.sheet-back { flex-basis: 100%; display: inline-flex; align-items: center; gap: 4px; justify-content: flex-start; min-height: 32px; padding: 0; background: none; border: 0; color: var(--muted); font-size: 14px; }
.sheet-back:hover { color: var(--ink); }
.sheet-back .ic { width: 16px; height: 16px; }
.sheet-title { flex: 1 1 auto; min-width: 0; }
.sheet-head h2 { margin: 0; font: 600 30px/1 var(--mono); letter-spacing: .05em; }
.sheet-head h2:focus { outline: none; }
.sheet-head .place { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
.close-btn { flex: none; width: 40px; height: 40px; border-radius: var(--radius); border: 1px solid var(--line-2); background: var(--surface); font-size: 19px; line-height: 1; color: var(--muted); }
.close-btn:hover { color: var(--ink); border-color: var(--muted); }

.sheet-body { padding: 16px 20px calc(28px + env(safe-area-inset-bottom, 0px)); display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.sheet-body > * { min-width: 0; }
.sheet h3 { margin: 0 0 8px; font: 700 15.5px/1.3 var(--display); font-stretch: 105%; color: var(--ink); }

.d-status { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface-2); }
.d-status:has(.pill.closed) { border-color: var(--closed); background: var(--closed-bg); }
.d-status:has(.pill.caution) { border-color: var(--caution); }
#dStatus .pill { font-size: 22px; font-weight: 700; white-space: normal; }
#dStatus .pill::before { width: 12px; height: 12px; }
#dStatus .note { font-size: 14px; color: var(--ink); }
.d-next:empty { display: none; }

.nearby { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); }
.nearby li + li { border-top: 1px solid var(--line); }
.nearby .row-btn, .nearby .row-plain { box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 12px; }
.nearby .pill { flex: none; }
.d-next-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-size: 14px; font-weight: 600; }
.d-next .tl-scale { padding: 6px 0 0; }
.d-next .note { margin-top: 8px; }
.facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; margin: 0; }
.facts dt { font-size: 13px; font-weight: 600; color: var(--muted); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.alerts { display: grid; gap: 10px; }
.alert-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; display: grid; gap: 6px; }
.alert-card.lv-closed { border-color: var(--closed); }
.alert-card.lv-caution { border-color: var(--caution); }
.alert-card .ac-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.alert-card .ac-group { font-size: 12.5px; color: var(--muted); }
.alert-card .ac-title { font-weight: 600; }
.alert-card .ac-msg { margin: 0; color: var(--muted); font-size: 13.5px; }
.alert-card .ac-time { font: 500 12px/1.4 var(--mono); color: var(--muted); }
.links { display: flex; flex-wrap: wrap; gap: 8px; }

.page-link-row { flex-basis: 100%; margin: 0; font-size: 14px; }
.page-link { display: inline-block; padding: 6px 0; text-decoration: underline; text-underline-offset: 3px; }



.menu-btn { flex: none; }
dialog.drawer { position: fixed; inset: 0 auto 0 0; margin: 0; width: min(320px, 86vw); max-width: 100%; height: 100%; max-height: none; border: 0; border-right: 1px solid var(--line-2); padding: 0 0 env(safe-area-inset-bottom, 0px); background: var(--surface); color: var(--ink); box-shadow: 16px 0 40px rgba(0, 0, 0, .3); overflow: auto; overscroll-behavior: contain; }
dialog.drawer::backdrop { background: var(--scrim); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(12px + env(safe-area-inset-top, 0px)) 12px 12px 18px; border-bottom: 1px solid var(--line); }
.drawer-title { font: 800 19px/1 var(--display); font-stretch: 115%; }
.drawer-nav { display: grid; padding: 4px 8px 20px; }
.nav-group { margin: 16px 10px 4px; font: 600 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.drawer-nav a, .drawer-nav button { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 10px; border: 0; border-radius: var(--radius); background: none; color: var(--ink); font: inherit; font-size: 15px; text-align: left; text-decoration: none; cursor: pointer; }
.drawer-nav a[hidden], .drawer-nav button[hidden] { display: none; }
.drawer-nav a:hover, .drawer-nav button:hover { background: var(--surface-2); }
.drawer-nav a:focus-visible, .drawer-nav button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.drawer-nav .ic { flex: none; width: 18px; height: 18px; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  dialog.drawer[open] { animation: drawer-in .18s ease-out; }
  @keyframes drawer-in { from { transform: translateX(-100%); } }
}

main .panel { scroll-margin-top: calc(var(--bar-h, 68px) + 12px); }
dialog.modal { margin: auto; width: min(460px, calc(100% - 32px)); border: 1px solid var(--line-2); border-radius: 12px; padding: 0; background: var(--surface); color: var(--ink); box-shadow: 0 20px 50px rgba(0, 0, 0, .3); }
dialog.modal::backdrop { background: var(--scrim); }

.oauth-row { display: grid; gap: 10px; padding: 14px 16px 0; }
.oauth-btn { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0 16px; border: 1px solid; border-radius: var(--radius); font: 500 15px/1 var(--body); text-decoration: none; }
.oauth-btn:hover { filter: brightness(.95); }
.oauth-btn.google { background: #FFFFFF; color: #1F1F1F; border-color: #747775; }
.oauth-btn.apple { background: #000000; color: #FFFFFF; border-color: #000000; }
.oauth-logo { width: 18px; height: 18px; flex: none; }
.oauth-btn.apple .oauth-logo { width: 15px; height: 18px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .oauth-btn.google { background: #131314; color: #E3E3E3; border-color: #8E918F; }
  :root:not([data-theme="light"]) .oauth-btn.apple { background: #FFFFFF; color: #000000; border-color: #FFFFFF; }
}
:root[data-theme="dark"] .oauth-btn.google { background: #131314; color: #E3E3E3; border-color: #8E918F; }
:root[data-theme="dark"] .oauth-btn.apple { background: #FFFFFF; color: #000000; border-color: #FFFFFF; }
.oauth-or { display: flex; align-items: center; gap: 10px; margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.oauth-or::before, .oauth-or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.oauth-tag { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; font-size: 13.5px; color: var(--muted); }

#checkoutDialog { width: min(520px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow: auto; }
.checkout-price { padding: 14px 16px 0; margin: 0; font: 700 22px/1.2 var(--display); }
.checkout-group { padding: 12px 16px 4px; }
.checkout-group h3 { margin: 0 0 6px; font: 600 13px/1.3 var(--body); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.checkout-group > .note { margin: 0 0 8px; }
.checkout-opts { display: grid; gap: 8px; }
.checkout-opt { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name price" "desc price"; align-items: center; gap: 2px 12px; width: 100%; padding: 11px 14px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--surface); color: var(--ink); text-align: left; text-decoration: none; font: inherit; cursor: pointer; }
.checkout-opt:hover { border-color: var(--ink); background: var(--surface-2); }
.checkout-opt[disabled] { opacity: .5; cursor: default; }
.co-name { grid-area: name; font-weight: 600; font-size: 15px; }
.co-desc { grid-area: desc; font-size: 13px; color: var(--muted); }
.co-price { grid-area: price; font: 600 14px/1 var(--mono); }
#checkoutOpts { padding-bottom: 12px; }

dialog.modal.wide { width: min(1080px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow: auto; }
.welcome-plans { padding: 12px 16px 0; }

@keyframes fav-pulse { 0% { box-shadow: 0 0 0 0 rgba(5, 120, 255, .65); transform: scale(1); } 60% { box-shadow: 0 0 0 12px rgba(5, 120, 255, 0); transform: scale(1.04); } 100% { box-shadow: 0 0 0 0 rgba(5, 120, 255, 0); transform: scale(1); } }

@keyframes fav-colors { 0%, 100% { background: #0578FF; border-color: #0578FF; color: #fff; } 50% { background: #FFB000; border-color: #FFB000; color: #16212C; } }
.link-btn.pulse { background: #0578FF; border-color: #0578FF; color: #fff; animation: fav-pulse 1.25s ease-out 4, fav-colors 1.25s ease-in-out 4; }
@media (prefers-reduced-motion: reduce) { .link-btn.pulse { animation: none; outline: 3px solid #FFB000; outline-offset: 2px; } }

#homeDialog .modal-body { display: grid; gap: 10px; }
#homeSearch, #homeState, #homeAddr, #homeBrowse { width: 100%; box-sizing: border-box; font-size: 16px; }
#homeStationField { display: grid; gap: 10px; }
.home-addr { display: flex; gap: 8px; }
.home-addr #homeAddr { flex: 1; min-width: 0; }
#homeResultsNote { margin: 0; }

.main-box { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); }
.main-facts { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 0; flex: 1; min-width: 0; }
.main-facts dt { font-size: 12px; color: var(--muted); }
.main-facts dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.main-facts dd .muted { font-weight: 400; }
.main-box .note { flex-basis: 100%; margin: 0; }
.main-box .note:empty { display: none; }
.home-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 320px; overflow-y: auto; }
.home-results:empty { display: none; }
.home-results .btn { width: 100%; justify-content: flex-start; text-align: left; gap: 8px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.modal-head h2 { margin: 0; font: 700 19px/1.1 var(--display); font-stretch: 108%; }
.modal-body { padding: 4px 0 8px; }
.modal-body > .note { padding: 12px 16px 0; }
.modal-body .alert-form { padding: 12px 16px; }
.modal-body .alert-msg { padding: 0 16px 8px; }
.modal-body > .puzzle { padding: 12px 16px 0; }


.btc-body { padding: 12px 16px 16px; display: grid; gap: 12px; }
.btc-body > .note { padding: 0; }
.btc-amount { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.btc-amount > span:first-child { font: 700 28px/1 var(--mono); font-variant-numeric: tabular-nums; }
.btc-qr { justify-self: center; width: 232px; height: 232px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 6px; }
.btc-qr svg { display: block; width: 100%; height: 100%; }
.btc-address-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.btc-address { flex-basis: 100%; font: 500 12.5px/1.5 var(--mono); word-break: break-all; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; user-select: all; }
.btc-status { margin: 0; font-weight: 600; font-size: 14px; }
.btc-status.paid { color: var(--open); }
.btc-status.seen { color: var(--caution); }
.btc-status.underpaid, .btc-status.expired { color: var(--closed); }
.btc-open { display: grid; gap: 6px; }
.btc-open button { justify-self: start; }
.plan-card .plan-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.admin-page .sub-head { font: 600 14px/1.3 var(--body); margin: 14px 0 4px; }
.plan-box .card-plan { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--surface-2); font-size: 13.5px; color: var(--muted); }
.plan-box .card-plan strong { font: inherit; font-weight: 600; color: var(--ink); }
.card-plan-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.card-plan-actions .btn { margin-top: 0; }

.checkout-mode { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 14px 16px 4px; }
.mode-switch { display: inline-grid; grid-auto-flow: column; padding: 3px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface-2); }
.mode-switch button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: 600 13.5px/1 var(--body); cursor: pointer; }
.mode-switch button::before { content: ""; width: 9px; height: 9px; border: 1.5px solid currentColor; border-radius: 50%; box-sizing: border-box; }
.mode-switch button[aria-checked="true"] { background: var(--ink); color: var(--surface); }
.mode-switch button[aria-checked="true"]::before { background: currentColor; }
.mode-switch button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.checkout-mode .note { margin: 0; flex: 1 1 200px; }
.mode-badge { margin-left: 8px; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line-2); font: 700 11px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); vertical-align: middle; }
.mode-badge.recurring { border-color: var(--ink); color: var(--ink); }
.modal-head .mode-badge { margin-left: auto; }


.trial-box { margin: 10px 0; padding: 12px 14px; border: 1px solid var(--flex-blue, #0578FF); border-radius: 10px; background: var(--surface-2); font-size: 14px; line-height: 1.5; }
.trial-box p { margin: 0; }
.trial-box .trial-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pass-ready { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 10px 0 0; padding: 10px 12px; border: 1px solid var(--ink); border-radius: 10px; background: var(--surface-2); font-size: 14px; }
.pass-ready > span { flex: 1 1 220px; }
.plan-queue { display: grid; gap: 6px; font-size: 13.5px; color: var(--muted); }
.plan-queue > span { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.plan-queue .btn { margin-top: 0; }
#passDialog { width: min(440px, calc(100% - 32px)); }
.pass-body { padding: 14px 16px 16px; }
.pass-warn { margin: 0 0 12px; font-size: 15px; line-height: 1.45; }
.pass-count { margin: 0 0 14px; font: 700 26px/1.2 var(--display); font-variant-numeric: tabular-nums; }
.pass-actions { display: flex; justify-content: flex-end; gap: 8px; }
.pass-actions .btn { margin-top: 0; }
.plan-card .plan-actions .btn { margin-top: 0; }


.msg-page { max-width: 640px; padding-top: 40px; }
.msg-body { padding: 16px; }
.msg-body p { margin: 0 0 12px; }
.msg-body .btc-qr { margin: 0 auto 12px; }
.pay-addr { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; }   


.site-foot { display: grid; gap: 6px; padding: 0 4px; font-size: 13px; color: var(--muted); }
.site-foot p { margin: 0; max-width: 90ch; }
.site-foot a { color: inherit; }
.site-foot a:hover { color: var(--ink); }
.link-btn-inline { border: 0; padding: 0; background: none; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
.link-btn-inline:hover { color: var(--ink); }

.cookie-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line-2); box-shadow: 0 -8px 24px rgba(0, 0, 0, .25); }
.cookie-inner { max-width: 1100px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.cookie-text { margin: 0; flex: 1 1 320px; font-size: 14px; }
.cookie-actions { display: flex; gap: 8px; flex-wrap: wrap; }


.grecaptcha-badge { visibility: hidden; }


.doc-page { max-width: 780px; padding-top: 28px; }
.doc { padding: 6px 18px 22px; }

.doc h2 { margin: 26px 0 8px; font: 700 16px/1.3 var(--display); font-stretch: 105%; color: var(--ink); }
.doc h2:first-child { margin-top: 12px; }
.doc h2 + h3 { margin-top: 12px; }
.doc h3 { margin: 22px 0 6px; font: 700 15.5px/1.3 var(--display); color: var(--ink); }
.doc h3:first-child { margin-top: 12px; }
.doc p, .doc li { color: var(--muted); font-size: 14.5px; max-width: 72ch; }
.doc p { margin: 0 0 10px; }
.doc ul, .doc ol { margin: 0 0 10px; padding-left: 20px; }
.doc ol { padding-left: 22px; }
.doc li { margin: 0 0 4px; }
.doc strong { color: var(--ink); }
.doc h3 .hint { margin-left: 6px; font: 500 13px/1.3 var(--body); color: var(--muted); }
.doc h4 { margin: 16px 0 6px; font: 600 14.5px/1.3 var(--display); color: var(--ink); }
.doc h3 + h4 { margin-top: 8px; }
.doc p.note { font-size: 13px; }

.doc table { display: table; border-collapse: collapse; width: calc(100% + 20px); margin: 4px -10px 14px; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.doc thead { display: table-header-group; }
.doc tbody { display: table-row-group; }
.doc tr { display: table-row; padding: 0; border: 0; box-shadow: none; cursor: auto; }
.doc th, .doc td { display: table-cell; text-align: left; vertical-align: top; padding: 7px 10px; border: 0; border-bottom: 1px solid var(--line); color: var(--muted); background: none; white-space: normal; }
.doc th { color: var(--ink); font-weight: 600; font-size: inherit; }
.doc thead th, .doc thead td { vertical-align: bottom; font-size: 12.5px; color: var(--muted); border-bottom-color: var(--line-2); }
.doc .num { text-align: right; }
.doc .table-scroll, .doc .table-wrap {
  overflow-x: auto; margin: 4px -10px 14px;
  background:
    linear-gradient(to right, var(--surface) 30%, transparent) left / 32px 100% no-repeat local,
    linear-gradient(to left, var(--surface) 30%, transparent) right / 32px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--ink) 16%, transparent), transparent) left / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--ink) 16%, transparent), transparent) right / 12px 100% no-repeat scroll;
}
.doc .table-scroll > table, .doc .table-wrap > table { width: 100%; margin: 0; }
.doc .table-scroll td, .doc .table-wrap td { color: var(--ink); }

.doc :is(th, td, li) > a[href^="/station/"] { font: 600 13px/1.2 var(--mono); letter-spacing: .03em; }

.doc .facts { grid-template-columns: max-content minmax(0, 1fr); align-items: baseline; gap: 6px 18px; margin: 4px 0 14px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); }
.doc .facts dd { font-size: 14px; color: var(--ink); }
.doc .updated { font-size: 12.5px; color: var(--muted); }
.doc .link-btn { margin-top: 8px; }

.doc .day-pager { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; max-width: none; margin: 18px 0 12px; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 0; }
.doc .day-pager a { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 500; line-height: 1.25; text-align: center; text-decoration: none; }
.doc .day-pager a:hover { border-color: var(--muted); }



.site-nav { background: var(--bar); border-bottom: 1px solid var(--bar-line); }
.site-nav-inner { max-width: 1600px; margin: 0 auto; padding: 0 20px; display: flex; gap: 20px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.site-nav-inner::-webkit-scrollbar { display: none; }
.site-nav a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; color: var(--bar-muted); font-size: 14px; font-weight: 500; white-space: nowrap; text-decoration: none; box-shadow: inset 0 -3px 0 transparent; }
.site-nav a:hover { color: var(--bar-ink); }
.site-nav a:focus-visible { outline: 2px solid var(--bar-ink); outline-offset: -2px; border-radius: 4px; }
.site-nav a[aria-current="page"] { color: var(--bar-ink); font-weight: 600; box-shadow: inset 0 -3px 0 var(--flex-blue); }

.crumbs { margin: 0 0 -4px; padding: 0 2px; font-size: 13px; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
.crumbs a { padding: 3px 0; color: inherit; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.crumbs a:hover { color: var(--ink); text-decoration-color: currentColor; }
.crumbs [aria-current="page"] { color: var(--ink); font-weight: 500; }
.crumbs [aria-hidden="true"] { margin: 0 2px; }

body > .site-foot { width: calc(100% - 40px); max-width: 740px; margin: 0 auto; padding: 18px 0 32px; border-top: 1px solid var(--line); text-align: center; justify-items: center; }
.doc-page:has(+ .site-foot) { padding-bottom: 28px; }
@media (max-width: 1180px) { .site-nav-inner { padding: 0 14px; } }
@media (max-width: 1100px) { .site-nav-inner { padding: 0 16px; } }
@media (max-width: 720px) {
  .site-nav-inner { gap: 18px; }
  .doc { padding: 4px 14px 18px; }
  
  .doc table { width: calc(100% + 16px); margin: 4px -8px 14px; font-size: 13px; }
  .doc .table-scroll, .doc .table-wrap { margin: 4px -8px 14px; }
  .doc th, .doc td { padding: 7px 8px; }
  .doc tbody th, .doc td { min-width: 5em; }
  body > .site-foot { width: calc(100% - 24px); padding-bottom: 28px; }
}
@media (max-width: 560px) {
  .doc .day-pager a[rel] { max-width: calc(50% - 4px); }
  .doc .day-pager a:not([rel]) { order: 1; flex: 1 0 100%; margin-top: 8px; }
}
@media (max-width: 420px) {
  .doc .facts { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .doc .facts dd { margin-bottom: 8px; }
  .doc .facts dd:last-child { margin-bottom: 0; }
}


.admin-page .brand .mark { font-size: 20px; }
.admin-form { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end; padding: 14px 16px; }
.admin-form input, .admin-form select, .admin-actions input, .admin-actions select { min-height: 36px; }
.admin-table-wrap { overflow-x: auto; }

#emailTotals, #shareTotals { margin: 0; padding: 0 16px 8px; }
.admin tr.pick { cursor: pointer; }
.admin tr.pick:hover td { background: var(--surface-2); }
.admin tr.sel td { background: var(--surface-2); font-weight: 500; }
.admin-detail { padding: 6px 16px 4px; }
.admin-detail .receipt { grid-template-columns: max-content minmax(0, 1fr); }
.admin-detail .receipt dd { font-family: inherit; word-break: normal; }
.admin-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px 24px; padding-bottom: 8px; }
.admin-cols h3 { margin: 8px 0 4px; font-size: 13.5px; }
.admin-list { max-height: 260px; }
.admin-list li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 13.5px; }
.house-list { max-height: none; }
.house-list .house-item { align-items: center; justify-content: flex-start; }
.house-list .house-item > span { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.house-thumb { flex: 0 0 auto; width: 120px; max-height: 64px; object-fit: contain; border: 1px solid var(--line-2); border-radius: 4px; background: var(--surface-2); display: grid; place-items: center; font-size: 12px; }
.admin-actions { display: flex; flex-wrap: wrap; gap: 10px 14px; padding: 12px 16px; border-top: 1px solid var(--line); align-items: end; }
.admin .btn.danger { border-color: var(--closed); color: var(--closed); }
.admin-log { list-style: none; margin: 0; padding: 8px 16px; font-size: 13px; color: var(--muted); display: grid; gap: 4px; max-height: 220px; overflow: auto; }
.health { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 12px 16px; font-size: 13.5px; color: var(--muted); }
.health b { color: var(--ink); font-weight: 600; }

.desk-tools { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; padding: 12px 16px 0; }
.desk-tools input[type="search"] { flex: 1 1 260px; min-height: 34px; }
.desk-count:not(:empty)::before { content: "· "; }
.desk-inbound { margin: 0; padding: 8px 16px 0; }
.desk { display: grid; grid-template-columns: minmax(260px, 360px) minmax(0, 1fr); gap: 0; margin-top: 12px; border-top: 1px solid var(--line); min-height: 320px; }
.desk-list { list-style: none; margin: 0; padding: 0; border-right: 1px solid var(--line); max-height: 640px; overflow: auto; }
.desk-list li.desk-item { padding: 10px 14px; border-bottom: 1px solid var(--line); cursor: pointer; display: grid; gap: 3px; font-size: 13.5px; }
.desk-list li.desk-item:hover { background: var(--surface-2); }
.desk-list li.desk-item.sel { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--accent); }
.desk-item-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.desk-item-who { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.desk-item.unread .desk-item-who::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-right: 6px; vertical-align: 1px; }
.desk-item-when { color: var(--muted); font-size: 12px; white-space: nowrap; }
.desk-item-sub { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.desk-item-prev { color: var(--muted); font-size: 12.5px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.desk-empty { padding: 16px; margin: 0; }
.desk-state { display: inline-block; font: 600 11px/1 var(--body); text-transform: uppercase; letter-spacing: .04em; padding: 3px 6px; border-radius: 4px; background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.desk-state.open { background: var(--caution-bg); color: var(--caution); border-color: transparent; }
.desk-state.answered { background: var(--open-bg); color: var(--open); border-color: transparent; }
.desk-detail { min-width: 0; }
.desk-head { display: flex; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.desk-head-text { min-width: 0; }
.desk-head h3 { margin: 0 0 4px; font: 600 15px/1.3 var(--body); overflow-wrap: anywhere; }
.desk-head .note { margin: 0; overflow-wrap: anywhere; }
.desk-head-actions { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.desk-thread { list-style: none; margin: 0; padding: 14px 16px; display: grid; gap: 12px; max-height: 520px; overflow: auto; }
.desk-msg { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--surface-2); max-width: 88%; }
.desk-msg.support { justify-self: end; background: var(--surface); border-color: var(--line-2); }
.desk-msg-head { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.desk-msg-head b { color: var(--ink); font-weight: 600; }
.desk-msg-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.45; margin: 0; }
.desk-reply { display: grid; gap: 10px; padding: 12px 16px 14px; border-top: 1px solid var(--line); }
.desk-reply .field { display: grid; gap: 4px; }
.desk-reply select { min-height: 36px; max-width: 100%; }
.desk-reply textarea, .desk-replies-edit textarea { width: 100%; box-sizing: border-box; font: 14px/1.45 var(--body); padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--surface); color: var(--ink); resize: vertical; }
.desk-reply .note { margin: 0; }
.desk-reply-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.desk-replies { border-top: 1px solid var(--line); }
.desk-replies > summary { padding: 12px 16px; cursor: pointer; font-weight: 600; font-size: 14px; }
.desk-replies > .note { padding: 0 16px; margin: 0 0 8px; }
.desk-replies-edit { display: grid; gap: 12px; padding: 0 16px 8px; }
.desk-reply-item { display: grid; gap: 6px; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: var(--surface-2); }
.desk-reply-item-top { display: flex; gap: 8px; align-items: center; }
.desk-reply-item-top input { flex: 1 1 auto; min-height: 34px; min-width: 0; }
@media (max-width: 760px) {
  .desk { grid-template-columns: minmax(0, 1fr); }
  .desk-list { border-right: 0; border-bottom: 1px solid var(--line); max-height: 300px; }
  .desk-msg { max-width: 100%; }
}

.md-seg { display: flex; gap: 6px; flex-wrap: wrap; }
.md-seg .btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.md-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; padding: 14px 16px 4px; }
.md-kpi { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: var(--surface-2); min-width: 0; }
.md-kpi-v { font: 600 26px/1.1 var(--mono); }
.md-kpi-l { font-size: 13px; font-weight: 600; margin-top: 2px; }
.md-kpi-s { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.md-cols { padding: 6px 16px 12px; }
.md-pad { padding: 10px 16px 0; }
.md-tag { display: inline-block; padding: 1px 7px; border-radius: 5px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.md-tag.ok { background: var(--open-bg); color: var(--open); }
.md-tag.warn { background: var(--caution-bg); color: var(--caution); }
.md-tag.bad { background: var(--closed-bg); color: var(--closed); }
.md-tag.muted { background: var(--surface-2); color: var(--muted); }
.md-call.bad { color: var(--closed); }
.md-call.warn { color: var(--caution); }
.md-why { color: var(--muted); max-width: 420px; }
.md-detail-row > td { background: var(--surface-2); }
.md-detail { padding: 4px 0 8px; }
.md-detail h3 { margin: 10px 0 4px; font-size: 13.5px; }
.md-verdict { margin: 4px 0 6px; font-size: 14px; }
.md-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 8px 24px; align-items: start; }
.md-chip { margin: 10px 0 0; }
.md-chip canvas { width: 246px; max-width: 100%; height: auto; border: 1px solid var(--line-2); border-radius: 6px; image-rendering: pixelated; display: block; }
.md-chip figcaption { font-size: 12.5px; color: var(--muted); margin-top: 4px; max-width: 246px; }
.md-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 12px; margin: 0; font-size: 13px; }
.md-dl dt { color: var(--muted); }
.md-dl dd { margin: 0; }
.md-metars { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.md-metars li.md-hit { color: var(--closed); }
.md-metars code { display: block; font-family: var(--mono); font-size: 12px; color: var(--muted); word-break: break-word; margin-top: 1px; }


.tile[data-level="risk"], .panel[aria-labelledby="riskH"], th:has(> button[data-sort="risk"]), td.c-risk,
#seg button[data-level="risk"], section:has(> #dRisk) { display: none !important; }


@media (max-width: 1240px) {
  .split { grid-template-columns: minmax(0, 1fr) 360px; }
}
@media (max-width: 1000px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .list { max-height: none; }
  
  .side, .main-col { display: contents; }
  #nearPanel { order: -2; }
  .split:has(#favList .row-btn) #favPanel { order: -1; }
  #tablePanel { order: 1; }
}

@media (max-width: 1360px) {
  .bar-inner { gap: 10px 14px; }
  .find { flex-basis: 260px; }
}
@media (max-width: 1180px) {
  .bar-inner { gap: 10px; padding-left: 14px; padding-right: 14px; }
  .find-field { gap: 8px; padding: 0 10px 0 12px; }
  .find { flex-basis: 220px; }
  .find-key { display: none; }   
  .bar-actions .donate { font-size: 0; gap: 0; width: 44px; padding: 0; justify-content: center; }
  .bar-actions .donate::before { font-size: 14px; }
}
@media (max-width: 1100px) {
  .bar-inner { gap: 8px 12px; padding: 10px 16px; }
  .find { order: 5; flex-basis: 100%; max-width: none; }
  .fresh { order: 6; flex-basis: 100%; margin-left: 0; }
  .fresh-a, .fresh-b { display: inline; }
  .fresh-b { padding-left: 0; margin-top: 0; }
  .fresh-b::before { content: "\00a0\00b7\00a0"; }
  .bar-actions { margin-left: auto; }
  .bar-actions .donate { font-size: 14.5px; gap: 6px; width: auto; padding: 0 14px; }
}
@media (max-width: 720px) {
  
  .bar-actions .donate, #settingsBtn, #refreshBtn { display: none; }
  .lang-btn { display: inline-flex; }
  .lang-bar { display: block; }
  .wrap { padding: 12px 12px 56px; gap: 12px; }
  .wm-name { font-size: 16px; font-stretch: 106%; padding: 6px 9px 7px 7px; gap: 5px; }
  .brand { min-width: 0; }
  .bar-inner { column-gap: 8px; }   
  
  .fresh { white-space: normal; }
  #freshText { overflow: visible; }
  .fresh-snap, .fresh-tier { display: none; }
  .fresh-refresh { display: inline; }
  .wm-sub { display: none; }
  .now-line { font-size: 16.5px; }
  
  .linklike { position: relative; }
  .linklike::after { content: ""; position: absolute; inset: -11px -2px; }
  .tile { min-height: 40px; padding: 0 12px; font-size: 14px; }
  
  .map-bars { position: static; gap: 0; }
  .radar-bar { border: 0; border-top: 1px solid var(--line); border-radius: 0; }
  .lock-note { position: static; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
  
  .map-tools { top: 8px; right: 8px; flex-direction: row; gap: 4px; }
  
  .map-layers { top: 8px; left: 8px; max-width: calc(100% - 108px); }
  .map-clock { top: 52px; left: 8px; transform: none; min-height: 30px; padding: 0 10px; font-size: 12.5px; }
  .tool { width: 40px; height: 40px; }
  .toggle { min-height: 36px; padding: 0 10px; font-size: 13.5px; }
  
  .now { min-width: 0; }
  
  
  .now-filters { position: relative; flex: 1 1 100%; min-width: 0; max-width: calc(100% + 24px); flex-wrap: nowrap; overflow-x: auto; margin: -4px -12px; padding: 6px 12px; scrollbar-width: none; }
  .now-filters::-webkit-scrollbar { display: none; }
  .tile { flex: none; }
  thead { display: none; }
  table, tbody, tr, td { display: block; }
  tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
  td { padding: 0; border: 0; }
  tbody tr.lv-closed, tbody tr.lv-caution { box-shadow: inset 3px 0 0 var(--stripe); }
  tbody tr.lv-closed { --stripe: var(--closed); }
  tbody tr.lv-caution { --stripe: var(--caution); }
  tbody tr.lv-closed td:first-child, tbody tr.lv-caution td:first-child { box-shadow: none; }
  td.c-code { grid-column: 1; grid-row: 1; }
  td.c-status { grid-column: 2; grid-row: 1; }
  td.c-place, td.c-alert, td.c-lx, td.c-risk, td.c-until { grid-column: 1 / -1; }
  td.c-lx:not(:empty)::before { content: "Lightning "; color: var(--muted); }
  td.c-lx { white-space: normal; }
  td.c-until:not(:empty)::before { content: "Advisory window ends "; color: var(--muted); }
  td.c-until { white-space: normal; }
  
  .board, .board-counts { display: table; }
  .board thead, .board-counts thead { display: table-header-group; }
  .board tbody, .board-counts tbody { display: table-row-group; }
  .board tr, .board-counts tr { display: table-row; padding: 0; border: 0; }
  .board th, .board td { display: table-cell; padding: 8px 10px; border-bottom: 1px solid var(--line); }
  .board-counts th, .board-counts td { display: table-cell; padding: 5px 8px; border-bottom: 1px solid var(--line); }
  .board tr.board-detail > td { padding: 4px 10px 12px; }
}
@media (max-width: 600px) {
  dialog.sheet { inset: auto 0 0 0; width: 100%; height: auto; max-height: 90%; border-left: 0; border-top: 1px solid var(--line); border-radius: 14px 14px 0 0; box-shadow: 0 -16px 40px rgba(0, 0, 0, .24); }
  dialog.sheet.beside { top: auto; height: auto; max-height: 55%; }   
  .sheet-head { padding-top: 12px; }
  .sheet-head h2 { font-size: 26px; }
  
  .fc-hours { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; overflow: visible; }
  .fc-h { min-width: 0; padding: 6px 0; }
  .find-state { max-width: 40%; font-size: 13px; }
}
@media (pointer: coarse) {
  #zoomIn, #zoomOut { display: none; }
}

@media (max-width: 720px) and (pointer: fine) {
  .map-tools { flex-direction: column; }
  .map-layers { max-width: calc(100% - 64px); }
}

@media (pointer: coarse), (any-pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: max(16px, 1em); }
}

@media (min-width: 900px) and (hover: hover) and (pointer: fine) and (not (any-pointer: coarse)) {
  body { font-size: 14px; }
  .note { font-size: 13px; }
  .wm-name { font-size: 20px; padding: 6px 10px 7px 8px; }
  .bar-inner { min-height: 56px; padding-top: 8px; padding-bottom: 8px; }
  .btn-bar { min-height: 36px; padding: 0 11px; font-size: 13px; }
  .btn-bar.icon { width: 36px; padding: 0; }
  .find-field { height: 42px; }
  #find { font-size: 16px; }
  .panel-head { min-height: 42px; padding: 9px 14px; }
  .panel-head h2, .panel-head h1 { font-size: 16px; }
  .btn { min-height: 34px; padding: 0 12px; font-size: 13px; }
  .btn.small { min-height: 28px; padding: 0 9px; font-size: 12.5px; }
  .tile { min-height: 34px; padding: 0 11px; font-size: 13px; }
  .seg button { min-height: 34px; font-size: 13px; }
  .toggle { min-height: 34px; font-size: 13px; }
  .tool { width: 36px; height: 36px; }
  td { font-size: 13.5px; padding: 8px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  #map .ring { animation: none; opacity: .45; transform: scale(1.8); }
  #map .tornado { animation: none; }
  .link-channel summary::before { transition: none; }
}