/* Weather Studio - public site styles.
   Fonts: Manrope (main) and Sora (headers) only. Icons: Lucide only. Corner radius from admin (4-5px). */
:root {
  --c1: #2563eb; --c2: #7c3aed; --angle: 90deg; --bg: #ffffff; --radius: 5px; --maxw: 1240px; --gap: 20px;
  --ink: #0f172a; --muted: #64748b; --line: #e3e7f5; --soft: #f5f7ff;
  --grad: linear-gradient(var(--angle), var(--c1), var(--c2));
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: 'Manrope', sans-serif; font-size: 15px; line-height: 1.5; }
h1, h2, h3, h4, .ws-brand, .big-temp, .ws-num { font-family: 'Sora', sans-serif; letter-spacing: -0.015em; }
button, input, select { font-family: inherit; }
a { color: var(--c1); }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.lucide-icon { flex: none; display: inline-block; vertical-align: middle; }
:focus-visible { outline: 2px solid var(--c1); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* shell */
.ws-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.ws-header { border-bottom: 1px solid var(--line); background: #fff; position: sticky; top: 0; z-index: 500; }
.ws-header .ws-wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.ws-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.ws-logo-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--radius); background: var(--grad); color: #fff; }
.ws-brand { font-weight: 700; font-size: 1.35rem; line-height: 1.1; }
.ws-tagline { display: block; font-family: 'Manrope', sans-serif; font-size: .72rem; font-weight: 600; color: var(--muted); letter-spacing: 0; margin-top: 2px; }
.ws-head-actions { display: flex; align-items: center; gap: 10px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }
.seg button { border: 0; background: transparent; padding: 7px 12px; font-weight: 700; font-size: .85rem; cursor: pointer; color: var(--muted); }
.seg button.on { background: var(--grad); color: #fff; }
.ws-main { padding: 24px 0 40px; }
.ws-rows { display: grid; gap: var(--gap); }
.ws-row { display: grid; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.ws-cell { grid-column: span var(--span, 1); min-width: 0; }
.ws-boot-msg { color: var(--muted); padding: 40px 0; text-align: center; font-weight: 600; }
.ws-footer { border-top: 1px solid var(--line); padding: 22px 0 30px; color: var(--muted); font-size: .8rem; }
.ws-footer .ws-wrap { display: grid; gap: 8px; }
.ws-footer a { color: var(--muted); font-weight: 700; }
.ws-footer a:hover { color: var(--c1); }
.ws-credits { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.ws-admin-link { display: inline-flex; align-items: center; gap: 5px; }

/* cards */
.card { background: var(--card-bg, #fff); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 1px 2px rgba(30, 41, 90, .05), 0 6px 20px -12px rgba(60, 50, 150, .18); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px 0; }
.card-head h2 { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 1rem; font-weight: 700; }
.card-head h2 .chip { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius); background: var(--soft); color: var(--c2); }
.card-body { padding: 14px 18px 18px; }
.link-btn { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; color: var(--muted); font-weight: 700; font-size: .8rem; cursor: pointer; padding: 4px 6px; border-radius: var(--radius); }
.link-btn:hover { color: var(--c1); background: var(--soft); }
.muted { color: var(--muted); }
.empty { color: var(--muted); font-size: .88rem; padding: 4px 0; }

/* search */
.search-card { overflow: visible; position: relative; z-index: 400; }
.search-card .card-body { padding: 14px; }
.search-row { display: flex; gap: 10px; }
.search-box { position: relative; flex: 1; }
.search-box input { width: 100%; height: 48px; padding: 0 44px 0 46px; font-size: 1rem; font-weight: 600; color: var(--ink); border: 1px solid #cdd3ea; border-radius: var(--radius); background: #fff; }
.search-box input::placeholder { color: #94a3b8; font-weight: 500; }
.search-box input:focus { outline: 2px solid color-mix(in srgb, var(--c1) 30%, transparent); border-color: var(--c1); }
.search-box .s-ico { position: absolute; left: 15px; top: 14px; color: var(--c1); pointer-events: none; }
.search-box .s-spin, .search-box .s-clear { position: absolute; right: 12px; top: 12px; }
.s-clear { border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 2px; border-radius: var(--radius); }
.s-clear:hover { color: var(--ink); background: var(--soft); }
.spin { animation: ws-spin 0.9s linear infinite; color: var(--c2); }
@keyframes ws-spin { to { transform: rotate(360deg); } }
.suggest { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 50; list-style: none; margin: 0; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 14px 40px -10px rgba(40, 30, 120, .3); max-height: 340px; overflow: auto; }
.suggest li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius); cursor: pointer; }
.suggest li:hover, .suggest li.act { background: var(--soft); }
.suggest li svg { color: var(--c2); }
.suggest .s-name { font-weight: 700; }
.suggest .s-sub { color: var(--muted); font-size: .82rem; }
.suggest .s-none { cursor: default; color: var(--muted); font-weight: 600; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 16px; border: 1px solid #cdd3ea; border-radius: var(--radius); background: #fff; color: var(--ink); font-weight: 700; font-size: .9rem; cursor: pointer; white-space: nowrap; }
.btn:hover { border-color: var(--c1); color: var(--c1); }
.btn.primary { background: var(--grad); color: #fff; border: 0; }
.btn.primary:hover { filter: brightness(1.07); color: #fff; }
@media (max-width: 560px) { .btn .btn-txt { display: none; } .btn { padding: 0 14px; } }

/* chips (recent & saved) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-btn { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: #fff; border-radius: var(--radius); padding: 7px 11px; font-weight: 700; font-size: .85rem; color: var(--ink); cursor: pointer; }
.chip-btn:hover { border-color: var(--c1); color: var(--c1); background: var(--soft); }
.chip-btn svg { color: var(--c2); }
.chip-btn small { color: var(--muted); font-weight: 600; }
.chip-btn.active { border-color: transparent; background: var(--grad); color: #fff; }
.chip-btn.active svg, .chip-btn.active small { color: #fff; }
.chip-wrap { display: inline-flex; align-items: stretch; }
.chip-wrap .chip-btn { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.chip-x { border: 1px solid var(--line); border-left: 0; background: #fff; color: var(--muted); padding: 0 7px; cursor: pointer; border-radius: 0 var(--radius) var(--radius) 0; display: inline-flex; align-items: center; }
.chip-x:hover { color: #dc2626; background: #fef2f2; border-color: #fecaca; }

/* current weather - the big card */
.current { position: relative; overflow: hidden; color: #fff; border: 0; text-shadow: 0 1px 2px rgba(15, 23, 70, .22);
  --sky1: color-mix(in srgb, var(--c1) 72%, #8ec9ff); --sky2: color-mix(in srgb, var(--c2) 72%, #b9a9ff);
  background: linear-gradient(160deg, var(--sky1), var(--sky2)); transition: background .6s; }
.current.fxk-clear-day { --sky1: color-mix(in srgb, var(--c1) 70%, #86c9ff); --sky2: color-mix(in srgb, var(--c2) 66%, #c4b5fd); }
.current.fxk-cloud-day { --sky1: color-mix(in srgb, var(--c1) 55%, #8fa3c4); --sky2: color-mix(in srgb, var(--c2) 58%, #a9a3cf); }
.current.fxk-clear-night { --sky1: color-mix(in srgb, var(--c1) 42%, #141a4a); --sky2: color-mix(in srgb, var(--c2) 48%, #251a58); }
.current.fxk-cloud-night { --sky1: color-mix(in srgb, var(--c1) 34%, #1c2350); --sky2: color-mix(in srgb, var(--c2) 40%, #2a2260); }
.current.fxk-rain { --sky1: color-mix(in srgb, var(--c1) 40%, #5b6b8c); --sky2: color-mix(in srgb, var(--c2) 44%, #766f9e); }
.current.fxk-rain.is-night { --sky1: color-mix(in srgb, var(--c1) 30%, #2c3656); --sky2: color-mix(in srgb, var(--c2) 36%, #3b3466); }
.current.fxk-snow { --sky1: color-mix(in srgb, var(--c1) 52%, #a8cdf0); --sky2: color-mix(in srgb, var(--c2) 50%, #c3b8ec); }
.current.fxk-storm { --sky1: color-mix(in srgb, var(--c1) 32%, #263052); --sky2: color-mix(in srgb, var(--c2) 40%, #3b2f6e); }
.current.fxk-fog { --sky1: color-mix(in srgb, var(--c1) 38%, #9aa8c4); --sky2: color-mix(in srgb, var(--c2) 40%, #aaa6c9); }

/* animated weather layers (behind the content) */
.fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.fx canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.fx-sun { position: absolute; right: -60px; top: -80px; width: 340px; height: 340px; }
.fx-glow { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(255, 246, 200, .95) 0 14%, rgba(255, 232, 150, .5) 28%, rgba(255, 225, 140, 0) 66%); animation: fx-pulse 6s ease-in-out infinite; }
.fx-rays { position: absolute; inset: -40px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(255, 244, 190, .3) 0 6deg, rgba(255, 244, 190, 0) 6deg 18deg);
  -webkit-mask-image: radial-gradient(circle, #000 18%, transparent 68%); mask-image: radial-gradient(circle, #000 18%, transparent 68%); animation: fx-spin 120s linear infinite; }
@keyframes fx-pulse { 50% { transform: scale(1.07); opacity: .85; } }
@keyframes fx-spin { to { transform: rotate(360deg); } }
.fx-moon { position: absolute; right: 60px; top: 36px; width: 84px; height: 84px; border-radius: 50%; background: radial-gradient(circle at 38% 38%, #fffdf0, #e8e4cc 60%, #cfcab0); box-shadow: 0 0 60px 18px rgba(255, 253, 230, .28), 0 0 140px 50px rgba(190, 180, 255, .2); opacity: .95; }
.fx-cloud { position: absolute; width: 230px; height: 64px; border-radius: 64px; background: rgba(255, 255, 255, .26); filter: blur(7px); animation: fx-drift calc(90s * var(--cs, 1)) linear infinite; }
.fx-cloud::before, .fx-cloud::after { content: ''; position: absolute; border-radius: 50%; background: inherit; }
.fx-cloud::before { width: 110px; height: 90px; left: 34px; top: -40px; }
.fx-cloud::after { width: 88px; height: 70px; left: 104px; top: -26px; }
.fx-cloud.c0 { top: 9%; left: -280px; animation-duration: calc(110s * var(--cs, 1)); }
.fx-cloud.c1 { top: 44%; left: -280px; animation-duration: calc(140s * var(--cs, 1)); animation-delay: -70s; transform: scale(1.3); opacity: .8; }
.fx-cloud.c2 { top: 22%; left: -280px; animation-duration: calc(95s * var(--cs, 1)); animation-delay: -30s; transform: scale(.8); }
.fx-cloud.c3 { top: 62%; left: -280px; animation-duration: calc(125s * var(--cs, 1)); animation-delay: -95s; transform: scale(1.1); opacity: .7; }
.fx-cloud.c4 { top: 2%; left: -280px; animation-duration: calc(160s * var(--cs, 1)); animation-delay: -50s; transform: scale(1.5); opacity: .6; }
.fx-cloud.dark { background: rgba(25, 30, 80, .38); }
.fxk-rain .fx-cloud, .fxk-snow .fx-cloud { background: rgba(255, 255, 255, .2); }
.fxk-storm .fx-cloud { background: rgba(20, 24, 70, .4); }
@keyframes fx-drift { from { translate: 0 0; } to { translate: calc(100vw + 600px) 0; } }
.fx-fog i { position: absolute; left: -20%; width: 140%; height: 90px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent); filter: blur(14px); animation: fx-fog 26s ease-in-out infinite alternate; }
.fx-fog i:nth-child(1) { top: 18%; } .fx-fog i:nth-child(2) { top: 46%; animation-duration: 34s; animation-delay: -10s; } .fx-fog i:nth-child(3) { top: 72%; animation-duration: 30s; animation-delay: -18s; }
@keyframes fx-fog { from { transform: translateX(-8%); } to { transform: translateX(8%); } }
.fx-night::after { content: ''; position: absolute; inset: 0; background: rgba(6, 10, 45, .18); }
@media (prefers-reduced-motion: reduce) { .fx-cloud, .fx-rays, .fx-glow, .fx-fog i { animation: none; } .fx-cloud.c0 { left: 8%; } .fx-cloud.c1 { left: 52%; } .fx-cloud.c2 { left: 30%; } .fx-cloud.c3 { left: 66%; } .fx-cloud.c4 { left: 40%; } }
/* ---- more weather scenery ---- */
.current.fxk-overcast { --sky1: color-mix(in srgb, var(--c1) 30%, #7d8aa3); --sky2: color-mix(in srgb, var(--c2) 34%, #8f93b3); }
.current.fxk-drizzle { --sky1: color-mix(in srgb, var(--c1) 36%, #7886a0); --sky2: color-mix(in srgb, var(--c2) 38%, #8d8bb0); }
.current.fxk-drizzle.is-night { --sky1: color-mix(in srgb, var(--c1) 30%, #2c3656); --sky2: color-mix(in srgb, var(--c2) 36%, #3b3466); }
.current.fxk-shower { --sky1: color-mix(in srgb, var(--c1) 58%, #7fa8d0); --sky2: color-mix(in srgb, var(--c2) 54%, #aaa0cc); }
.fx-cloud.grey { background: rgba(105, 116, 140, .46); filter: blur(10px); }
.fx-blanket { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(70, 80, 108, .5), rgba(110, 120, 148, .22) 62%, rgba(150, 160, 186, .08)); }
.fx-blanket::before, .fx-blanket::after { content: ''; position: absolute; inset: -20% -30%; background: radial-gradient(ellipse 26% 18% at 20% 30%, rgba(255, 255, 255, .17), transparent 70%), radial-gradient(ellipse 30% 20% at 70% 18%, rgba(255, 255, 255, .13), transparent 70%), radial-gradient(ellipse 24% 16% at 48% 60%, rgba(40, 48, 80, .22), transparent 70%); filter: blur(12px); animation: fx-blanket calc(70s * var(--cs, 1)) linear infinite alternate; }
.fx-blanket::after { animation-duration: calc(95s * var(--cs, 1)); animation-direction: alternate-reverse; opacity: .8; transform: scaleX(-1); }
@keyframes fx-blanket { from { transform: translateX(-9%); } to { transform: translateX(9%); } }
.fx-sun.dim { opacity: .5; }
.fx-sun.dim .fx-glow { background: radial-gradient(circle, rgba(255, 255, 255, .65) 0 12%, rgba(235, 240, 255, .3) 30%, rgba(235, 240, 255, 0) 66%); }
.fx-sun.low { top: auto; bottom: -190px; }
.fx-sun.low .fx-glow { background: radial-gradient(circle, rgba(255, 220, 160, .95) 0 14%, rgba(255, 160, 90, .5) 28%, rgba(255, 130, 80, 0) 66%); }
.fx-golden { position: absolute; inset: 0; }
.fx-golden.dawn { background: linear-gradient(to top, rgba(255, 175, 115, .6), rgba(255, 145, 175, .32) 42%, rgba(255, 205, 165, 0) 82%); }
.fx-golden.dusk { background: linear-gradient(to top, rgba(255, 120, 70, .6), rgba(220, 80, 140, .38) 42%, rgba(90, 60, 170, .22) 76%, transparent); }
.fx-rainbow { position: absolute; left: 3%; bottom: -250px; width: 560px; height: 560px; border-radius: 50%; pointer-events: none; filter: blur(1.5px);
  background: radial-gradient(circle, transparent 0 57%, rgba(255, 60, 60, .38) 58%, rgba(255, 165, 0, .38) 60%, rgba(255, 240, 60, .34) 62%, rgba(60, 200, 80, .34) 64%, rgba(60, 130, 255, .38) 66%, rgba(140, 60, 220, .38) 68%, transparent 70%);
  animation: fx-rb 16s ease-in-out infinite alternate; }
@keyframes fx-rb { from { opacity: .18; } to { opacity: .6; } }
.fx-flare i { position: absolute; border-radius: 50%; mix-blend-mode: screen; background: radial-gradient(circle, rgba(255, 255, 255, .4), rgba(255, 240, 180, .14) 58%, transparent 70%); animation: fx-pulse 7s ease-in-out infinite; }
.fx-flare i:nth-child(1) { right: 24%; top: 34%; width: 46px; height: 46px; }
.fx-flare i:nth-child(2) { right: 37%; top: 56%; width: 78px; height: 78px; animation-delay: -2s; }
.fx-flare i:nth-child(3) { right: 50%; top: 76%; width: 30px; height: 30px; animation-delay: -4s; }
.fx-wisps i { position: absolute; left: -380px; width: 360px; height: 12px; border-radius: 12px; filter: blur(6px); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .42), transparent); transform: rotate(-3deg); animation: fx-drift calc(150s * var(--cs, 1)) linear infinite; }
.fx-wisps i:nth-child(1) { top: 15%; } .fx-wisps i:nth-child(2) { top: 32%; width: 480px; animation-delay: -60s; animation-duration: calc(190s * var(--cs, 1)); } .fx-wisps i:nth-child(3) { top: 54%; width: 280px; animation-delay: -110s; opacity: .7; }
.fx-cloud.occ { top: 0; left: -300px; transform: scale(1.9); opacity: .9; background: rgba(255, 255, 255, .42); filter: blur(9px); animation-duration: calc(75s * var(--cs, 1)); animation-delay: -22s; }
.fx-fog.light i { opacity: .55; height: 70px; }
.fx-heat { position: absolute; inset: 0; background: linear-gradient(to top, rgba(255, 170, 60, .3), rgba(255, 190, 80, .1) 45%, transparent 70%); }
.fx-heat::before { content: ''; position: absolute; left: -10px; right: -10px; bottom: 0; height: 48%; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .07) 0 2px, transparent 2px 8px); filter: blur(1px); animation: fx-shimmer 3.2s ease-in-out infinite; }
@keyframes fx-shimmer { 0%, 100% { transform: translateX(-5px) scaleY(1); } 50% { transform: translateX(5px) scaleY(1.05); } }
.fx-frost { position: absolute; inset: 0; box-shadow: inset 0 0 80px 20px rgba(220, 240, 255, .62), inset 0 0 10px 2px rgba(255, 255, 255, .7); }
.fx-frost::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, #fff 0 1px, transparent 2px), radial-gradient(circle, #fff 0 1.2px, transparent 2.4px); background-size: 74px 61px, 117px 97px; background-position: 0 0, 31px 23px;
  -webkit-mask-image: radial-gradient(ellipse at center, transparent 45%, #000 95%); mask-image: radial-gradient(ellipse at center, transparent 45%, #000 95%); animation: fx-twinkle 4.5s ease-in-out infinite alternate; }
@keyframes fx-twinkle { from { opacity: .25; } to { opacity: .95; } }
@media (prefers-reduced-motion: reduce) { .fx-blanket::before, .fx-blanket::after, .fx-rainbow, .fx-flare i, .fx-wisps i, .fx-heat::before, .fx-frost::after { animation: none; } .fx-wisps i { left: 20%; } .fx-cloud.occ { left: 55%; } }

.cur-inner { position: relative; z-index: 1; padding: 26px 28px 24px; display: grid; gap: 22px; }
.cur-top { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.cur-place h2 { margin: 0; font-size: 1.7rem; font-weight: 700; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cur-sub { opacity: .88; font-weight: 600; margin-top: 2px; }
.cur-time { display: inline-flex; align-items: center; gap: 6px; opacity: .9; font-weight: 600; font-size: .88rem; margin-top: 6px; }
.cur-actions { display: flex; gap: 8px; }
.icon-btn { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 13px; border-radius: var(--radius); border: 1px solid rgba(255, 255, 255, .4); background: rgba(20, 28, 90, .16); color: #fff; font-weight: 700; font-size: .82rem; cursor: pointer; }
.icon-btn:hover { background: rgba(255, 255, 255, .26); }
.icon-btn.on { text-shadow: none; }
.icon-btn.on { background: #fff; color: var(--c2); border-color: #fff; }
.cur-main { display: grid; grid-template-columns: auto 1fr; gap: 10px 34px; align-items: center; }
.cur-temp-row { display: flex; align-items: center; gap: 22px; }
.cur-icon { filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .18)); }
.big-temp { font-size: clamp(4.2rem, 11vw, 7rem); font-weight: 700; line-height: 1; letter-spacing: -0.04em; }
.big-temp sup { font-size: .38em; vertical-align: top; position: relative; top: .25em; font-weight: 600; margin-left: 2px; letter-spacing: 0; }
.cur-cond { font-family: 'Sora', sans-serif; font-size: 1.5rem; font-weight: 600; }
.cur-meta { display: flex; gap: 18px; flex-wrap: wrap; font-weight: 700; opacity: .95; margin-top: 6px; }
.cur-meta span { display: inline-flex; align-items: center; gap: 6px; }
.cur-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.tile { background: rgba(20, 28, 90, .16); border: 1px solid rgba(255, 255, 255, .24); border-radius: var(--radius); padding: 11px 13px; backdrop-filter: blur(3px); }
.tile .t-label { display: flex; align-items: center; gap: 7px; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; opacity: .85; }
.tile .t-val { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 1.2rem; margin-top: 4px; }
.tile .t-sub { font-size: .78rem; opacity: .85; font-weight: 600; }
@media (max-width: 640px) { .cur-inner { padding: 20px 18px; } .cur-main { grid-template-columns: 1fr; } .cur-place h2 { font-size: 1.4rem; } }

/* hourly */
.hours-scroll { overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; }
.hours-inner { position: relative; width: max-content; }
.hours-chart { display: block; }
.hours-row { display: flex; }
.hour { width: 74px; flex: none; text-align: center; padding: 8px 4px 6px; display: grid; gap: 3px; justify-items: center; border-radius: var(--radius); }
.hour.now { background: var(--soft); }
.hour .h-time { font-size: .78rem; font-weight: 700; color: var(--muted); }
.hour.now .h-time { color: var(--c2); }
.hour .h-temp { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 1.02rem; }
.hour .h-pop { display: inline-flex; align-items: center; gap: 3px; font-size: .74rem; font-weight: 700; color: var(--c1); min-height: 18px; }
.hour .h-wind { font-size: .72rem; color: var(--muted); font-weight: 600; }
.hour .h-day { font-size: .68rem; font-weight: 800; color: var(--c2); text-transform: uppercase; letter-spacing: .05em; min-height: 14px; }
.hour svg.lucide-icon { color: var(--c1); }

/* daily */
.day { display: grid; grid-template-columns: minmax(78px, 1.1fr) 28px minmax(40px, .5fr) 38px minmax(60px, 2fr) 38px; gap: 10px; align-items: center; padding: 10px 6px; border-bottom: 1px solid var(--line); font-weight: 700; }
.day:last-child { border-bottom: 0; }
.day .d-name small { display: block; color: var(--muted); font-weight: 600; font-size: .74rem; }
.day .d-pop { display: inline-flex; align-items: center; gap: 3px; color: var(--c1); font-size: .8rem; min-height: 20px; }
.day svg.lucide-icon.d-ico { color: var(--c1); }
.day .d-lo { color: var(--muted); text-align: right; }
.day .d-hi { text-align: left; }
.range { position: relative; height: 6px; border-radius: 3px; background: #e8ebf7; }
.range i { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: var(--grad); }
.day.today { background: var(--soft); border-radius: var(--radius); }
@media (max-width: 440px) { .day { grid-template-columns: 1fr 26px 36px 34px 1fr 34px; gap: 6px; } }

/* map */
.map-card .card-body { padding: 12px; }
.map-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; align-items: center; }
.pill { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: #fff; border-radius: var(--radius); padding: 6px 10px; font-weight: 700; font-size: .8rem; cursor: pointer; color: var(--ink); }
.pill:hover { border-color: var(--c1); color: var(--c1); }
.pill.on { background: var(--grad); color: #fff; border-color: transparent; }
.pill.on svg { color: #fff; }
.pill svg { color: var(--c2); }
.map-tools select { height: 32px; border: 1px solid var(--line); border-radius: var(--radius); padding: 0 8px; font-weight: 700; font-size: .8rem; background: #fff; color: var(--ink); }
.map-frame { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: #eef1fb; }
.map-frame .leaflet-container, .map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.leaflet-container { font-family: 'Manrope', sans-serif; background: #eef1fb; }
.leaflet-control-attribution { font-family: 'Manrope', sans-serif; font-size: 10px; }
.leaflet-bar a { font-family: 'Manrope', sans-serif; font-weight: 700; color: var(--ink); border-radius: var(--radius) !important; }
.leaflet-bar { border-radius: var(--radius); }
.ws-pin { color: var(--c2); filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .35)); }
.ws-pin svg { width: 34px; height: 34px; fill: #fff; }
.map-player { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.map-player input[type=range] { flex: 1; min-width: 120px; accent-color: var(--c2); }
.map-player .stamp { font-weight: 700; font-size: .82rem; color: var(--muted); min-width: 118px; text-align: right; }
.map-note { color: var(--muted); font-size: .76rem; margin-top: 8px; }
.map-note a { color: var(--muted); font-weight: 700; }
.map-fs { position: absolute; z-index: 800; }

/* states */
.skeleton { background: linear-gradient(90deg, #eef1fb 25%, #f7f8fe 37%, #eef1fb 63%); background-size: 400% 100%; animation: ws-shim 1.3s ease infinite; border-radius: var(--radius); }
@keyframes ws-shim { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.current.loading .cur-inner { min-height: 330px; align-content: center; }
.current .skeleton { background: rgba(255, 255, 255, .2); }
.notice { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: var(--radius); background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; font-weight: 600; }
.notice .link-btn { color: #991b1b; margin-left: auto; }
.info-bar { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: var(--radius); background: var(--soft); border: 1px solid var(--line); color: var(--muted); font-weight: 600; font-size: .85rem; margin-bottom: var(--gap); }
.info-bar svg { color: var(--c2); }
@media (prefers-reduced-motion: reduce) { .spin, .skeleton { animation: none; } }

/* map: full screen */
.map-wrap:fullscreen { background: #fff; padding: 14px; overflow: auto; display: flex; flex-direction: column; }
.map-wrap:fullscreen .map-frame { height: auto !important; flex: 1; min-height: 300px; }

/* current card footer: last update + auto-update */
.cur-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: .8rem; font-weight: 700; opacity: .95; border-top: 1px solid rgba(255,255,255,.22); padding-top: 12px; }
.cur-foot span, .cur-foot label { display: inline-flex; align-items: center; gap: 7px; }
.cur-foot select { height: 30px; border: 1px solid rgba(255,255,255,.45); background: rgba(255,255,255,.14); color: #fff; border-radius: var(--radius); padding: 0 8px; font-weight: 700; font-size: .8rem; }
.cur-foot select option { color: var(--ink); background: #fff; }

/* small segmented control inside card headers */
.seg.small button { padding: 5px 10px; font-size: .78rem; }

/* alerts */
.alerts-card { padding: 12px 16px 12px; border-left: 4px solid #22c55e; }
.alerts-card.top-advisory { border-left-color: #f59e0b; }
.alerts-card.top-warning { border-left-color: #f97316; }
.alerts-card.top-severe { border-left-color: #dc2626; }
.alerts-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.alerts-head h2 { margin: 0; font-size: .98rem; display: flex; align-items: center; gap: 8px; }
.alerts-head h2 svg { color: var(--c2); }
.alert-count { background: var(--grad); color: #fff; border-radius: var(--radius); font-size: .72rem; padding: 1px 7px; font-family: 'Manrope', sans-serif; }
.alerts-src { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 700; color: var(--muted); text-decoration: none; }
.alerts-src:hover { color: var(--c1); }
.alerts-none { display: flex; align-items: center; gap: 8px; margin: 4px 0; font-weight: 700; color: #15803d; font-size: .9rem; }
.alert-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.alert { border-radius: var(--radius); border: 1px solid; overflow: hidden; }
.alert.advisory { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.alert.warning { background: #fff7ed; border-color: #fdba74; color: #9a3412; }
.alert.severe { background: #fef2f2; border-color: #fca5a5; color: #991b1b; }
.alert-btn { width: 100%; display: flex; align-items: flex-start; gap: 11px; text-align: left; border: 0; background: transparent; color: inherit; padding: 9px 12px; cursor: pointer; font: inherit; }
.alert-main { flex: 1; display: grid; gap: 1px; min-width: 0; }
.alert-main strong { font-family: 'Sora', sans-serif; font-size: .9rem; }
.alert-text { color: #1e293b; font-weight: 600; font-size: .82rem; }
.alert-when { font-size: .75rem; font-weight: 800; white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; }
.tag-official { background: #0f172a; color: #fff; border-radius: var(--radius); padding: 1px 6px; font-size: .65rem; text-transform: uppercase; letter-spacing: .04em; }
.alert-detail { padding: 0 12px 10px 43px; font-size: .82rem; color: #1e293b; }
.alert-detail p { margin: 6px 0; white-space: pre-line; }
.alerts-note { margin: 8px 0 0; font-size: .72rem; color: var(--muted); }
@media (max-width: 560px) { .alert-btn { flex-wrap: wrap; } .alert-when { width: 100%; padding-left: 31px; } }

/* moon */
.moon-top { display: flex; gap: 20px; align-items: center; }
.moon-art { flex: none; width: 104px; height: 104px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, rgba(124,58,237,.14), rgba(37,99,235,0) 70%); }
.moon-emoji { line-height: 1; }
.moon-name { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 1.35rem; }
.moon-sub { font-size: .85rem; margin-top: 2px; font-weight: 600; }
.moon-facts { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: .82rem; font-weight: 700; }
.moon-facts span { display: inline-flex; align-items: center; gap: 5px; }
.moon-facts svg { color: var(--c2); }
.moon-list { margin-top: 14px; border-top: 1px solid var(--line); }
.moon-row { display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: center; padding: 9px 2px; border-bottom: 1px solid var(--line); }
.moon-row:last-child { border-bottom: 0; }
.moon-row small { display: block; color: var(--muted); font-weight: 600; font-size: .74rem; }
.mr-name { font-weight: 700; } .mr-date { font-weight: 700; text-align: right; }
.moon-row .moon-emoji { font-size: 30px; }
@media (max-width: 480px) { .moon-top { flex-direction: column; align-items: flex-start; } }

/* thunder & lightning */
.tl-status { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--radius); border: 1px solid #bbf7d0; background: #f0fdf4; color: #166534; }
.tl-status.warn { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.tl-status.bad { background: #fef2f2; border-color: #fca5a5; color: #991b1b; }
.tl-sub { font-size: .8rem; font-weight: 600; opacity: .9; }
.tl-grid { display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: 16px; align-items: center; margin-top: 14px; }
.tl-plot svg { display: block; background: var(--soft); border-radius: 50%; }
.tl-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.tl-count { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; background: #fff; }
.tl-count .ws-num { font-size: 1.4rem; font-weight: 700; display: block; }
.tl-count small { color: var(--muted); font-weight: 700; font-size: .72rem; }
.tl-forecast { display: flex; gap: 8px; align-items: center; font-weight: 700; font-size: .85rem; margin: 14px 0 0; }
.tl-forecast svg { color: var(--c2); }
.fb { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; }
.fb h3 { margin: 0 0 4px; font-size: 1rem; display: flex; align-items: center; gap: 8px; }
.fb h3 svg { color: var(--c2); }
.fb-help { font-size: .8rem; margin: 6px 0; display: flex; gap: 6px; align-items: flex-start; }
.fb-clock { text-align: center; margin: 10px 0; }
.fb-clock .ws-num { font-size: clamp(2.8rem, 9vw, 4.2rem); font-weight: 700; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.fb-clock small { display: block; color: var(--muted); font-weight: 700; margin-top: -4px; }
.fb-clock.run .ws-num { animation: ws-pulse 0.8s ease-in-out infinite; }
@keyframes ws-pulse { 50% { opacity: .6; } }
.fb-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.fb .btn.big { height: 56px; padding: 0 22px; font-size: 1.02rem; }
.btn.bang { background: #0f172a; color: #fff; border: 0; }
.btn.bang:hover { color: #fff; filter: brightness(1.25); }
.fb-result { margin-top: 14px; padding: 14px 16px; border-radius: var(--radius); border: 1px solid #bbf7d0; background: #f0fdf4; color: #166534; }
.fb-result.warn { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.fb-result.bad { background: #fef2f2; border-color: #fca5a5; color: #991b1b; }
.fb-dist { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.05rem; }
.fb-dist .ws-num { font-size: 1.9rem; }
.fb-alt { font-size: .78rem; font-weight: 700; opacity: .85; margin-top: 2px; }
.fb-result p { margin: 8px 0 0; font-weight: 700; font-size: .9rem; }
.fb-manual { margin-top: 12px; font-size: .82rem; font-weight: 700; color: var(--muted); }
.fb-manual-row { display: flex; gap: 8px; margin-top: 6px; }
.fb-manual input { flex: 1; height: 44px; border: 1px solid #cdd3ea; border-radius: var(--radius); padding: 0 12px; font-weight: 600; font-size: 1rem; }
.fb-manual .btn { height: 44px; }
@media (max-width: 560px) { .tl-grid { grid-template-columns: 1fr; } .tl-plot { max-width: 240px; margin: 0 auto; } }

/* earthquakes */
.quake-list { display: grid; gap: 8px; }
.quake { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); }
.q-mag { text-align: center; border-radius: var(--radius); padding: 6px 4px; color: #fff; background: linear-gradient(135deg, #60a5fa, #3b82f6); }
.quake.l4 .q-mag { background: linear-gradient(135deg, #3b82f6, #6366f1); }
.quake.l5 .q-mag { background: linear-gradient(135deg, #6366f1, #7c3aed); }
.quake.l6 .q-mag { background: linear-gradient(135deg, #7c3aed, #c026d3); }
.quake.l7 .q-mag, .quake.l8 .q-mag { background: linear-gradient(135deg, #c026d3, #dc2626); }
.q-mag .ws-num { font-size: 1.35rem; font-weight: 700; display: block; line-height: 1.1; }
.q-mag small { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; opacity: .95; }
.q-place { font-weight: 800; }
.q-meta { display: flex; flex-wrap: wrap; gap: 3px 14px; color: var(--muted); font-size: .78rem; font-weight: 700; margin-top: 3px; }
.q-meta span { display: inline-flex; align-items: center; gap: 4px; }
.q-tsu { color: #b91c1c; }
.q-link { color: var(--muted); padding: 6px; border-radius: var(--radius); }
.q-link:hover { color: var(--c1); background: var(--soft); }
@media (max-width: 520px) { .quake { grid-template-columns: 54px 1fr; } .q-link { display: none; } }


/* equal-height sections within a row */
.ws-row { align-items: stretch; }
.ws-cell { display: flex; }
.ws-cell > * { flex: 1 1 auto; min-width: 0; width: 100%; }
.card { display: flex; flex-direction: column; }
.card-body { flex: 1 1 auto; display: flex; flex-direction: column; }
.current { display: block; }
.search-card .card-body { display: block; }
.daily-list { flex: 1; display: flex; flex-direction: column; }
.daily-list .day { flex: 1; }
.moon-list { flex: 1; display: flex; flex-direction: column; }
.moon-list .moon-row { flex: 1; }
.map-card .map-wrap { flex: 1; display: flex; flex-direction: column; }
.map-frame { position: relative; flex: 1; }
.map-frame > div, .map-frame > iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-wrap:fullscreen .map-frame { min-height: 300px !important; }
.quake-list, .chips { flex: 0 0 auto; }
@media (max-width: 860px) { .ws-cell { display: block; } .daily-list .day, .moon-list .moon-row { flex: none; } }


/* current weather: details on the right, button-style icon */
.current { container-type: inline-size; }
.cur-inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 22px 36px; align-items: stretch; }
.cur-inner.no-tiles { grid-template-columns: minmax(0, 1fr); }
.cur-left { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; min-width: 0; }
.cur-main { display: flex; flex-direction: column; gap: 14px; }
.cur-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: center; align-self: center; width: 100%; }
.cur-foot { grid-column: 1 / -1; }
.cur-icon { display: grid; place-items: center; flex: none; width: 118px; height: 118px; border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .12)); border: 1px solid rgba(255, 255, 255, .5);
  box-shadow: 0 10px 24px -6px rgba(15, 23, 70, .38), inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -3px 8px rgba(15, 23, 70, .14); backdrop-filter: blur(4px); filter: none; }
.cur-icon svg { filter: drop-shadow(0 3px 6px rgba(15, 23, 70, .3)); }
.cur-temp-row { gap: 20px; }
.big-temp { font-size: clamp(4rem, 9cqw, 6.6rem); }
@container (max-width: 860px) {
  .cur-inner { grid-template-columns: minmax(0, 1fr); }
  .cur-tiles { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}
@container (max-width: 480px) { .cur-icon { width: 92px; height: 92px; } .cur-icon svg { width: 54px; height: 54px; } }
.cur-main { align-items: flex-start; gap: 12px; }
.cur-left { gap: 18px; }

/* daily outlook: roomier columns, rain chance tucked under the icon */
.day { grid-template-columns: minmax(96px, 1.5fr) 46px 32px minmax(36px, 1.2fr) 32px; gap: 12px; }
.day .d-wx { display: grid; justify-items: center; gap: 1px; }
.day .d-wx .d-pop { min-height: 15px; font-size: .72rem; }
.day .d-lo { text-align: right; }
@media (max-width: 440px) { .day { grid-template-columns: minmax(84px, 1.4fr) 42px 30px minmax(30px, 1fr) 30px; gap: 8px; } }

/* active storms list */
.storm-list { display: grid; gap: 8px; }
.storm { display: grid; grid-template-columns: 42px 1fr auto auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card-bg, #fff); }
.storm-ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--radius); background: var(--soft); color: var(--c2); }
.storm.hot { border-color: #fca5a5; background: #fff7f7; } .storm.hot .storm-ico { background: #fee2e2; color: #dc2626; }
.storm-name { font-weight: 800; }
.storm-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; color: var(--muted); font-size: .76rem; font-weight: 700; margin-top: 2px; }
.storm-meta span { display: inline-flex; align-items: center; gap: 4px; }
.storm-count { text-align: right; } .storm-count .ws-num { font-size: 1.25rem; font-weight: 700; display: block; line-height: 1.1; } .storm-count small { color: var(--muted); font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 520px) { .storm { grid-template-columns: 38px 1fr auto; } .storm .link-btn { grid-column: 2 / -1; justify-self: start; } }

.tile .t-layers { display: block; opacity: .8; font-size: .68rem; margin-top: 1px; }

.tile .t-trend { display: inline-flex; align-items: center; gap: 4px; }

/* legal pages */
.legal-wrap { padding-top: 28px; padding-bottom: 50px; }
.legal { max-width: 820px; margin: 0 auto; }
.legal h1 { font-size: 2rem; margin: 0 0 4px; }
.legal h2 { font-size: 1.15rem; margin: 28px 0 8px; }
.legal h3 { font-size: 1rem; margin: 18px 0 6px; font-family: 'Sora', sans-serif; }
.legal p, .legal li { line-height: 1.7; }
.legal ul { padding-left: 22px; }
.legal a { font-weight: 700; }

/* consent popup */
.consent { position: fixed; z-index: 2000; left: 16px; bottom: 16px; width: min(460px, calc(100vw - 32px)); background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 18px 50px -12px rgba(40, 30, 120, .4); padding: 16px 18px 18px; border-top: 3px solid transparent; border-image: var(--grad) 1; border-image-slice: 1; }
.consent-head { display: flex; align-items: center; gap: 10px; }
.consent-head h2 { margin: 0; font-size: 1.02rem; flex: 1; }
.consent-ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius); background: var(--soft); color: var(--c2); }
.consent-x { border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 4px; border-radius: var(--radius); }
.consent-x:hover { background: var(--soft); color: var(--ink); }
.consent p { margin: 10px 0 12px; font-size: .86rem; line-height: 1.55; color: #334155; }
.consent-opts { display: grid; gap: 8px; margin-bottom: 12px; }
.consent-opt { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; }
.consent-opt input { width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--c2); }
.consent-opt strong { display: block; font-size: .86rem; } .consent-opt small { display: block; color: var(--muted); font-weight: 600; font-size: .76rem; }
.consent-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.consent-btns .btn { height: 40px; font-size: .84rem; padding: 0 14px; }
.ws-legal { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; }
.ws-legal .link-btn { padding: 0; font-size: .8rem; }
.map-consent { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; padding: 20px; background: var(--soft); color: #334155; }
.map-consent svg { color: var(--c2); } .map-consent p { margin: 0; max-width: 420px; font-size: .88rem; line-height: 1.55; }
.map-consent .btn { height: 42px; }
@media (max-width: 520px) { .consent { left: 8px; right: 8px; bottom: 8px; width: auto; } }

.map-sep { width: 1px; align-self: stretch; background: var(--line); margin: 0 4px; }
.map-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; font-size: .76rem; font-weight: 700; color: var(--muted); }
.map-legend span { display: inline-flex; align-items: center; gap: 5px; } .map-legend svg { color: var(--c2); }
.leaflet-popup-content { font-family: 'Manrope', sans-serif; font-size: 13px; line-height: 1.45; } .leaflet-popup-content a { font-weight: 700; }

.alert-snd { margin-left: auto; } .alert-snd.on { color: var(--c2); }
.alerts-head { gap: 8px 14px; }

/* map legend */
.map-key { position: absolute; left: 10px; bottom: 26px; z-index: 800; width: 224px; max-height: calc(100% - 60px); overflow: auto; background: rgba(255, 255, 255, .95); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 10px 8px; box-shadow: 0 6px 20px -8px rgba(30, 30, 90, .35); font-size: .72rem; font-weight: 700; color: #334155; text-shadow: none; }
.map-key.closed { width: auto; padding: 4px 8px; }
.key-toggle { display: flex; align-items: center; gap: 6px; width: 100%; border: 0; background: transparent; padding: 3px 0; font: inherit; font-weight: 800; font-size: .76rem; color: var(--ink); cursor: pointer; }
.key-toggle svg:first-child { color: var(--c2); } .key-toggle svg:last-child { margin-left: auto; color: var(--muted); }
.key-sec { padding: 6px 0; border-top: 1px solid var(--line); }
.key-t { font-weight: 800; color: var(--ink); margin-bottom: 4px; }
.key-bar { height: 9px; border-radius: 3px; }
.key-lab { display: flex; justify-content: space-between; margin-top: 2px; color: var(--muted); font-size: .66rem; }
.key-note { color: var(--muted); font-weight: 600; font-size: .66rem; margin-top: 4px; line-height: 1.35; }
.key-dots { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.key-dot { display: inline-flex; align-items: center; gap: 5px; } .key-dot i { display: inline-block; border-radius: 50%; flex: none; }
.key-loc { display: flex; align-items: center; gap: 6px; color: var(--ink); } .key-loc svg { color: var(--c2); }
@media (max-width: 520px) { .map-key { width: 190px; } }
.key-sec { padding: 5px 0; } .key-dots { gap: 3px 8px; } .map-key { width: 214px; }

/* compact recent / saved strips */
.card.strip { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 6px 10px; box-shadow: none; min-height: 0; }
.strip-label { display: inline-flex; align-items: center; gap: 5px; font-family: 'Sora', sans-serif; font-weight: 700; font-size: .74rem; color: var(--ink); white-space: nowrap; }
.strip-label svg { color: var(--c2); }
.strip-empty { color: var(--muted); font-size: .74rem; font-weight: 600; }
.card.strip .chips { flex: 1 1 0; gap: 5px; min-width: 0; flex-wrap: wrap; }
.card.strip .chip-btn { padding: 3px 8px; font-size: .74rem; gap: 4px; }
.card.strip .chip-btn small { font-size: .62rem; }
.card.strip .chip-x { padding: 0 5px; } .card.strip .chip-wrap { display: inline-flex; }
.strip-clear { border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 4px; border-radius: var(--radius); margin-left: auto; display: inline-flex; }
.strip-clear:hover { color: #dc2626; background: #fef2f2; }

/* search in the header */
.ws-header .ws-wrap { flex-wrap: wrap; gap: 8px 18px; padding-top: 8px; padding-bottom: 8px; }
.ws-head-search { flex: 1 1 380px; max-width: 700px; min-width: 0; margin: 0 auto; }
.search-head .search-row { gap: 8px; }
.search-head .search-box input { height: 42px; font-size: .92rem; padding-left: 42px; }
.search-head .search-box .s-ico { top: 11px; left: 13px; }
.search-head .search-box .s-spin, .search-head .search-box .s-clear { top: 9px; }
.search-head .btn { height: 42px; }
.search-head .suggest { box-shadow: 0 18px 44px -10px rgba(40, 30, 120, .35); }
@media (max-width: 860px) { .ws-head-search { order: 3; flex-basis: 100%; max-width: none; } .ws-header .ws-wrap { justify-content: space-between; } }
@media (max-width: 560px) { .search-head .btn .btn-txt { display: none; } }
@media (max-width: 560px) { .ws-tagline { display: none; } .ws-logo-mark { width: 34px; height: 34px; } .ws-brand { font-size: 1.15rem; } .seg button { padding: 6px 10px; } .ws-header .ws-wrap { padding-left: 12px; padding-right: 12px; } }

/* inner boxes follow the box gradient setting */
.storm, .tl-count, .quake { background: var(--card-bg, #fff); }
.storm.hot { background: #fff7f7; }