/* ===================== Reset & Base ===================== */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root{
  --bg-0: #060a13;
  --bg-1: #0a0f1c;
  --bg-2: #0d1526;
  --glass-bg: rgba(24, 32, 51, 0.55);
  --glass-bg-strong: rgba(20, 27, 45, 0.72);
  --glass-border: rgba(255,255,255,0.08);
  --glass-border-strong: rgba(255,255,255,0.14);
  --text-0: #f5f7fb;
  --text-1: rgba(245,247,251,0.72);
  --text-2: rgba(245,247,251,0.48);
  --green: #30d158;
  --green-glow: rgba(48,209,88,0.35);
  --orange: #ff9f0a;
  --red: #ff453a;
  --yellow: #ffd60a;
  --blue: #0a84ff;
  --cyan: #64d2ff;
  --purple: #bf5af2;
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
}

html, body{
  height: 100%;
  background: radial-gradient(120% 90% at 50% -10%, #101c33 0%, var(--bg-1) 45%, var(--bg-0) 100%);
  color: var(--text-0);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang HK", "PingFang TC", "Helvetica Neue", "Microsoft JhengHei", sans-serif;
  overscroll-behavior-y: none;
  scroll-behavior: smooth;
}

body{
  max-width: 560px;
  margin: 0 auto;
  position: relative;
  min-height: 100vh;
}

button{ font-family: inherit; color: inherit; background: none; border: none; cursor: pointer; }
svg{ display:block; }
input[type="range"]{ -webkit-appearance:none; appearance:none; background:transparent; }

::-webkit-scrollbar{ width:0; height:0; }

/* ===================== Glass Morphism ===================== */
.glass{
  background: var(--glass-bg);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--glass-border);
}

/* ===================== Ripple ===================== */
.ripple{ position: relative; overflow: hidden; }
.ripple-effect{
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(255,255,255,0.35);
  pointer-events: none;
  animation: rippleAnim 600ms cubic-bezier(.22,.61,.36,1);
}
@keyframes rippleAnim{
  to{ transform: scale(2.6); opacity: 0; }
}

/* ===================== Skeleton Loading ===================== */
.skeleton-screen{
  position: fixed; inset: 0; z-index: 999;
  background: var(--bg-1);
  padding: calc(20px + var(--safe-top)) 16px 16px;
  display: flex; flex-direction: column; gap: 14px;
  max-width: 560px; margin: 0 auto;
  transition: opacity .5s ease, visibility .5s ease;
}
.skeleton-screen.hidden{ opacity: 0; visibility: hidden; pointer-events: none; }
.sk-header, .sk-banner, .sk-map, .sk-card{
  border-radius: var(--radius-md);
  background: linear-gradient(100deg, #131b2c 20%, #1b2740 40%, #131b2c 60%);
  background-size: 220% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}
.sk-header{ height: 56px; border-radius: 18px; }
.sk-banner{ height: 46px; }
.sk-map{ height: 46vh; }
.sk-row{ display: flex; gap: 10px; }
.sk-card{ flex: 1; height: 90px; }
@keyframes shimmer{
  0%{ background-position: 200% 0; }
  100%{ background-position: -20% 0; }
}

.app-shell{
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .5s ease, transform .5s ease;
}
.app-shell.ready{ opacity: 1; transform: translateY(0); }

/* ===================== Header ===================== */
.app-header{
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 10px;
  padding: calc(10px + var(--safe-top)) 14px 10px;
  border-left: none; border-right: none; border-top: none;
  border-bottom: 1px solid var(--glass-border);
}
.icon-btn{
  width: 38px; height: 38px; display:flex; align-items:center; justify-content:center;
  border-radius: 12px; color: var(--text-1);
  transition: background .2s ease, transform .15s ease;
}
.icon-btn:active{ transform: scale(0.9); background: rgba(255,255,255,0.06); }
.icon-btn svg{ width: 21px; height: 21px; }

.header-title{ display:flex; align-items:center; gap:9px; flex:1; min-width:0; }
.logo-wrap{
  width: 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(145deg, #1c3a63, #0f2440);
  display:flex; align-items:center; justify-content:center;
  border: 1px solid var(--glass-border-strong);
  flex-shrink:0;
}
.logo-emoji{ font-size: 17px; filter: drop-shadow(0 0 6px rgba(100,180,255,0.5)); }
.title-text h1{ font-size: 16px; font-weight: 700; letter-spacing: 0.2px; line-height:1.15; }
.title-text p{ font-size: 10.5px; color: var(--text-2); margin-top:1px; }

.header-actions{ display:flex; align-items:center; gap:8px; }
.badge-dot{
  position:absolute; top:7px; right:7px; width:7px; height:7px; border-radius:50%;
  background: var(--red); box-shadow: 0 0 0 2px var(--bg-1);
}
#notifBtn{ position: relative; }
.loc-btn{
  display:flex; align-items:center; gap:5px;
  padding: 8px 12px; border-radius: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--glass-border-strong);
  font-size: 12.5px; font-weight: 600; color: var(--text-0);
  transition: background .2s ease, transform .15s ease;
}
.loc-btn:active{ transform: scale(0.94); background: rgba(255,255,255,0.12); }
.loc-btn svg{ color: var(--blue); }

/* ===================== Content ===================== */
.content{
  padding: 12px 12px calc(96px + var(--safe-bottom));
  display: flex; flex-direction: column; gap: 12px;
}

/* ===================== Warning Banner ===================== */
.warning-banner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, rgba(139,20,20,0.55), rgba(90,10,10,0.35));
  border: 1px solid rgba(255,69,58,0.35);
  animation: bannerPulse 2.6s ease-in-out infinite;
  cursor: pointer;
}
.warning-banner.level-yellow{ background: linear-gradient(90deg, rgba(150,110,10,0.5), rgba(90,65,5,0.32)); border-color: rgba(255,214,10,0.4); }
.warning-banner.level-red{ background: linear-gradient(90deg, rgba(150,20,20,0.55), rgba(90,10,10,0.35)); border-color: rgba(255,69,58,0.45); }
.warning-banner.level-black{ background: linear-gradient(90deg, rgba(60,10,70,0.55), rgba(30,5,40,0.4)); border-color: rgba(191,90,242,0.45); }
.warning-banner.level-t8{ background: linear-gradient(90deg, rgba(20,60,140,0.55), rgba(10,30,80,0.4)); border-color: rgba(10,132,255,0.45); }
@keyframes bannerPulse{
  0%, 100%{ box-shadow: 0 0 0 0 rgba(255,69,58,0.0); }
  50%{ box-shadow: 0 0 16px 0 rgba(255,69,58,0.18); }
}
.warning-left{ display:flex; align-items:center; gap:8px; }
.warning-icon{ font-size: 16px; }
.warning-text{ font-size: 13.5px; font-weight: 700; color: #ffdcda; }
.warning-right{ display:flex; align-items:center; gap:4px; font-size: 12px; color: rgba(255,255,255,0.65); }
.warning-right svg{ color: rgba(255,255,255,0.5); }

/* ===================== Radar Card ===================== */
.radar-card{
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
.radar-topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--glass-border);
}
.radar-mode-select{
  display:flex; align-items:center; gap:7px;
  font-size: 13px; font-weight: 600; color: var(--text-0);
  padding: 6px 8px; border-radius: 9px;
  transition: background .2s;
}
.radar-mode-select:active{ background: rgba(255,255,255,0.06); }
.radar-time{ color: var(--text-2); font-weight: 500; font-variant-numeric: tabular-nums; }
.radar-mode-select svg{ color: var(--text-2); }

.radar-legend{ display:flex; align-items:center; gap:6px; }
.legend-label{ font-size: 11px; color: var(--text-2); }
.legend-word{ font-size: 10px; color: var(--text-2); }
.legend-bar{
  width: 74px; height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, #1e88c7, #22b0a5, #3fd15b, #d6d63a, #e08a2b, #d94b3a, #a83bb0);
}

.radar-map-wrap{
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  background: #060b14;
  overflow: hidden;
}
#radarCanvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.radar-overlay-svg{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }

.city-label{
  position:absolute; font-size: 11px; color: rgba(255,255,255,0.78);
  text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 0 8px rgba(0,0,0,0.6);
  font-weight: 500; pointer-events:none; white-space:nowrap;
}

.work-marker{
  position:absolute; width: 26px; height: 26px; transform: translate(-50%,-100%);
  pointer-events:none;
}
.work-marker svg{ width:100%; height:100%; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6)); }
.work-marker::after{
  content:''; position:absolute; left:50%; bottom:-3px; transform:translateX(-50%);
  width: 26px; height: 8px; border-radius: 50%;
  background: rgba(10,132,255,0.35); filter: blur(3px);
}
.marker-pulse{
  position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%);
  width: 14px; height: 14px; border-radius: 50%;
  background: rgba(10,132,255,0.5);
  animation: markerPulse 2s ease-out infinite;
}
@keyframes markerPulse{
  0%{ transform: translateX(-50%) scale(0.5); opacity: 0.8; }
  100%{ transform: translateX(-50%) scale(2.6); opacity: 0; }
}

.scale-legend{
  position:absolute; left: 10px; top: 10px;
  background: rgba(10,14,22,0.55);
  backdrop-filter: blur(6px);
  border-radius: 10px;
  padding: 8px 8px;
  border: 1px solid rgba(255,255,255,0.08);
}
.scale-title{ font-size: 9px; color: var(--text-2); line-height:1.3; margin-bottom:5px; text-align:center; }
.scale-list{ display:flex; flex-direction:column-reverse; gap: 3px; }
.scale-item{ display:flex; align-items:center; gap:6px; }
.scale-swatch{ width: 12px; height: 8px; border-radius: 2px; flex-shrink:0; }
.scale-num{ font-size: 9.5px; color: rgba(255,255,255,0.65); font-variant-numeric: tabular-nums; }

.map-side-controls{
  position:absolute; right: 10px; top: 10px;
  display:flex; flex-direction:column; gap: 8px;
}
.map-ctrl-btn{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  width: 52px; padding: 8px 4px;
  border-radius: 12px;
  background: rgba(10,14,22,0.6);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-1); font-size: 9.5px;
  transition: transform .15s ease, background .2s ease;
}
.map-ctrl-btn:active{ transform: scale(0.92); background: rgba(255,255,255,0.14); }
.map-ctrl-btn svg{ color: var(--cyan); }

.rain-band-tip{
  position:absolute; left: 10px; bottom: 10px; max-width: 62%;
  background: rgba(10,14,22,0.62);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 9px 12px;
  animation: floatTip 3.4s ease-in-out infinite;
}
@keyframes floatTip{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-3px); }
}
.rbt-title{ font-size: 12px; font-weight: 700; color: #fff; margin-bottom: 3px; }
.rbt-eta{ font-size: 11px; color: rgba(255,255,255,0.68); line-height: 1.4; }

/* ===================== Radar Playback ===================== */
.radar-playback{
  display:flex; align-items:center; gap: 10px;
  padding: 10px 14px 14px;
}
.play-btn{
  width: 40px; height: 40px; border-radius: 50%; flex-shrink:0;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--glass-border-strong);
  display:flex; align-items:center; justify-content:center;
  color: var(--text-0);
  transition: background .2s ease, transform .15s ease;
}
.play-btn:active{ transform: scale(0.9); }
.play-btn svg{ margin-left: 1px; }

.timeline-wrap{ position: relative; flex:1; height: 34px; display:flex; flex-direction:column; justify-content:center; }
#timelineSlider{
  position: relative; z-index: 3;
  width: 100%; height: 20px; margin:0;
  cursor: pointer;
}
#timelineSlider::-webkit-slider-runnable-track{
  height: 4px; border-radius: 2px; background: transparent;
}
#timelineSlider::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff;
  border: 3px solid var(--blue);
  margin-top: -6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  transition: transform .15s ease;
}
#timelineSlider:active::-webkit-slider-thumb{ transform: scale(1.15); }
#timelineSlider::-moz-range-track{ height: 4px; border-radius: 2px; background: transparent; }
#timelineSlider::-moz-range-thumb{
  width: 14px; height: 14px; border-radius: 50%; background:#fff; border: 3px solid var(--blue);
}
.timeline-track-fill{
  position:absolute; left:0; top: 15px; height: 4px; border-radius:2px;
  background: rgba(255,255,255,0.12);
  width: 100%;
  z-index: 1;
  overflow: hidden;
}
.timeline-track-fill::before{
  content:''; position:absolute; inset:0;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  width: var(--fill, 50%);
  transition: width .25s ease;
}
.timeline-labels{
  display:flex; justify-content:space-between;
  font-size: 9.5px; color: var(--text-2);
  margin-top: 14px; font-variant-numeric: tabular-nums;
}
.timeline-labels span.now{ color: var(--blue); font-weight: 700; }

/* ===================== Status Row ===================== */
.status-row{
  border-radius: var(--radius-md);
  display:flex; align-items:stretch;
  padding: 14px 6px;
}
.status-col{
  flex:1; display:flex; flex-direction:column; gap: 4px;
  padding: 0 10px; align-items: flex-start; justify-content:center;
}
.status-col.divider{ border-left: 1px solid var(--glass-border); border-right: 1px solid var(--glass-border); }
.status-label{ font-size: 10.5px; color: var(--text-2); }
.status-value-row strong{ font-size: 15px; font-weight: 700; }
.mini-link-btn{
  font-size: 10.5px; color: var(--blue); margin-top: 2px;
  padding: 2px 0;
}
.eta-strong{ font-size: 17px; font-weight: 800; color: var(--green); font-variant-numeric: tabular-nums; }
.eta-sub{ font-size: 10px; color: var(--text-2); }

.work-status-badge{ display:flex; align-items:center; gap: 8px; }
.wsb-emoji{ font-size: 24px; line-height:1; }
.wsb-text{ display:flex; flex-direction:column; }
.wsb-text strong{ font-size: 14px; font-weight: 800; }
.wsb-text span{ font-size: 9.5px; color: var(--text-2); }
.work-status-badge.status-green .wsb-text strong{ color: var(--green); }
.work-status-badge.status-orange .wsb-text strong{ color: var(--orange); }
.work-status-badge.status-red .wsb-text strong{ color: var(--red); }

/* ===================== Forecast Section ===================== */
.forecast-section{ display:flex; flex-direction:column; gap: 10px; }
.section-head{ display:flex; align-items:center; gap: 6px; padding: 2px 4px; }
.section-head h2{ font-size: 15px; font-weight: 700; }
.info-icon-btn{ color: var(--text-2); display:flex; }
.update-time{ margin-left:auto; font-size: 10.5px; color: var(--text-2); }

.forecast-cards{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.forecast-card{
  border-radius: var(--radius-md);
  padding: 12px 6px 10px;
  display:flex; flex-direction:column; align-items:center; gap: 5px;
  text-align:center;
  transition: transform .25s cubic-bezier(.22,.61,.36,1), border-color .25s ease, background .25s ease;
}
.forecast-card:active{ transform: scale(0.96); }
.forecast-card.active{
  border-color: var(--orange);
  background: rgba(255,159,10,0.1);
  box-shadow: 0 0 0 1px rgba(255,159,10,0.25), 0 8px 20px rgba(255,159,10,0.08);
}
.fc-range{ font-size: 9px; color: var(--text-2); line-height:1.35; }
.fc-range-main{ font-size: 10.5px; color: var(--text-1); font-weight: 600; }
.fc-icon{ font-size: 22px; margin: 2px 0; }
.fc-mm{ font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.fc-mm span{ font-size: 10px; font-weight: 600; margin-left:1px; }
.fc-label{ font-size: 10px; color: var(--text-1); font-weight: 600; }

.forecast-progress{
  display:flex; align-items:center; padding: 0 4px;
}
.fp-seg{ flex:1; height: 3px; }
.fp-dot{
  width: 8px; height: 8px; border-radius: 50%; flex-shrink:0;
  box-shadow: 0 0 0 3px var(--bg-1);
}

/* ===================== Info Grid ===================== */
.info-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.info-card{
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display:flex; flex-direction:column; gap: 6px;
  transition: transform .2s ease, background .2s ease;
}
.info-card:active{ transform: scale(0.97); }
.info-card-top{ display:flex; align-items:center; gap: 6px; font-size: 11px; color: var(--text-2); }
.info-card-top svg{ width:14px; height:14px; flex-shrink:0; }
.info-card-value{ font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.info-card-value span{ font-size: 11px; font-weight: 600; color: var(--text-2); margin-left: 2px; }
.info-card-sub{ font-size: 10.5px; color: var(--text-2); }
.sparkline{ display:flex; align-items:flex-end; gap: 2px; height: 20px; margin-top: 2px; }
.sparkline i{ flex:1; background: var(--blue); border-radius: 2px 2px 0 0; opacity: 0.85; }

/* ===================== Bottom Nav ===================== */
.bottom-nav{
  position: fixed; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 100%; max-width: 560px;
  display:flex; align-items:center; justify-content: space-around;
  padding: 8px 6px calc(8px + var(--safe-bottom));
  border-radius: 0;
  border-left: none; border-right: none; border-bottom: none;
  z-index: 70;
}
.nav-item{
  display:flex; flex-direction:column; align-items:center; gap: 3px;
  color: var(--text-2); font-size: 10px; font-weight: 600;
  padding: 4px 10px; border-radius: 12px;
  transition: color .2s ease, transform .15s ease;
  flex: 1;
}
.nav-item:active{ transform: scale(0.92); }
.nav-item.active{ color: var(--green); }
.nav-item.active svg path, .nav-item.active svg{ color: var(--green); }
.nav-center{ position: relative; margin-top: -26px; color: var(--text-0); }
.nav-center-circle{
  width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(150deg, #3ee06a, #1fae46);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 6px 18px var(--green-glow), 0 0 0 4px var(--bg-1);
  margin-bottom: 3px;
  transition: transform .2s ease;
}
.nav-center:active .nav-center-circle{ transform: scale(0.92); }
.nav-center span:last-child{ color: var(--green); }

/* ===================== Bottom Sheet ===================== */
.sheet-backdrop{
  position: fixed; inset:0; background: rgba(0,0,0,0.5);
  opacity:0; visibility:hidden; transition: opacity .3s ease, visibility .3s ease;
  z-index: 80;
}
.sheet-backdrop.show{ opacity:1; visibility:visible; }
.bottom-sheet{
  position: fixed; left: 50%; bottom:0; transform: translateX(-50%) translateY(100%);
  width: 100%; max-width: 560px;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(30px) saturate(160%);
  -webkit-backdrop-filter: blur(30px) saturate(160%);
  border: 1px solid var(--glass-border-strong);
  border-bottom: none;
  border-radius: 24px 24px 0 0;
  padding: 10px 16px calc(24px + var(--safe-bottom));
  z-index: 90;
  transition: transform .4s cubic-bezier(.22,.61,.36,1);
}
.bottom-sheet.show{ transform: translateX(-50%) translateY(0); }
.sheet-handle{ width: 36px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.25); margin: 4px auto 14px; }
.bottom-sheet h3{ font-size: 15px; font-weight:700; margin-bottom: 12px; }
.sheet-list{ display:flex; flex-direction:column; gap: 6px; }
.sheet-item{
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 14px; border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--glass-border);
  font-size: 13.5px; font-weight: 600;
  transition: background .2s ease;
}
.sheet-item.selected{ background: rgba(48,209,88,0.12); border-color: rgba(48,209,88,0.4); color: var(--green); }
.sheet-item:active{ background: rgba(255,255,255,0.1); }

/* ===================== Responsive tweaks ===================== */
@media (min-width: 400px){
  .fc-mm{ font-size: 18px; }
}
@media (max-width: 340px){
  .forecast-cards{ gap: 6px; }
  .fc-range{ font-size: 8.3px; }
}