/* style.css — 宜昌长江航段气象应用 (windy.com 风格暗色主题) */

:root {
  --bg: #07111c;
  --bg2: #0c1a29;
  --panel: rgba(13, 24, 37, 0.86);
  --panel-solid: #0d1825;
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.18);
  --text: #e9f1f8;
  --muted: #8ba2b8;
  --accent: #36c6f0;
  --accent2: #2ee6a6;
  --past: #2e6bff;     /* windy 风格: 过去=蓝 */
  --future: #ff7a32;   /* windy 风格: 未来=橙 */
  --shadow: 0 10px 34px rgba(0, 0, 0, 0.5);
  --radius: 12px;
  font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); overflow: hidden; }

#app {
  display: grid;
  grid-template-columns: 252px 1fr 332px;
  grid-template-rows: 56px 1fr 98px;
  grid-template-areas:
    "top    top     top"
    "left   map     right"
    "bottom bottom  bottom";
  height: 100vh;
  transition: grid-template-columns .2s ease;
}
#app.left-collapsed { grid-template-columns: 0 1fr 332px; }
#app.left-collapsed .panel-left { opacity: 0; pointer-events: none; }

/* 通用图标按钮 */
.icon-btn {
  background: rgba(255,255,255,0.06); border: 1px solid var(--border);
  color: var(--text); border-radius: 9px; min-width: 36px; height: 36px;
  padding: 0 10px; font-size: 15px; cursor: pointer; transition: all .15s ease;
}
.icon-btn:hover { background: rgba(54,198,240,0.16); border-color: var(--accent); }

/* ---------- 顶栏 ---------- */
.topbar {
  grid-area: top;
  display: flex; align-items: center; gap: 14px;
  padding: 0 16px;
  background: linear-gradient(180deg, #102234, #0a1623);
  border-bottom: 1px solid var(--border);
  z-index: 700;
}
.brand { display: flex; align-items: center; gap: 11px; }
.brand .logo {
  width: 30px; height: 30px; border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  display: grid; place-items: center; color: #04212e; font-weight: 800; font-size: 15px;
  box-shadow: 0 0 18px rgba(54,198,240,0.35);
}
.brand h1 { font-size: 16px; margin: 0; letter-spacing: .5px; }
.brand .sub { font-size: 11px; color: var(--muted); margin-top: 1px; }
.topbar .spacer { flex: 1; }

.search-wrap {
  position: relative; display: flex; align-items: center;
  width: min(420px, 38vw);
}
.search-wrap .search-ico { position: absolute; left: 11px; font-size: 13px; opacity: .7; }
.top-search {
  width: 100%; padding: 9px 12px 9px 32px; border-radius: 22px;
  background: rgba(255,255,255,0.06); border: 1px solid var(--border);
  color: var(--text); font-size: 13px; outline: none;
}
.top-search:focus { border-color: var(--accent); background: rgba(54,198,240,0.08); }
.top-search::placeholder { color: #5f7488; }

/* 数据源徽标 */
.source-badge {
  display: flex; align-items: center; gap: 7px;
  text-decoration: none; cursor: pointer;
  font-size: 12px; color: var(--text);
  padding: 6px 12px; border: 1px solid var(--border-strong);
  border-radius: 20px; background: rgba(46,230,166,0.08);
  transition: all .15s ease; white-space: nowrap;
}
.source-badge:hover { border-color: var(--accent2); background: rgba(46,230,166,0.16); }
.source-badge .dot {
  width: 8px; height: 8px; border-radius: 50%; background: #8ba2b8;
}
.source-badge .dot.ok { background: var(--accent2); animation: pulse 2s infinite; }
.source-badge .dot.err { background: #e74c3c; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(46,230,166,0.5); }
  70% { box-shadow: 0 0 0 7px rgba(46,230,166,0); }
  100% { box-shadow: 0 0 0 0 rgba(46,230,166,0); }
}
.source-badge .sb-text b { color: var(--accent2); }
.source-badge .sb-upd { color: var(--muted); font-size: 11px; }

/* ---------- 左抽屉 ---------- */
.panel-left {
  grid-area: left;
  background: var(--panel-solid);
  border-right: 1px solid var(--border);
  overflow-y: auto; padding: 14px 13px;
  transition: opacity .2s ease;
}
.drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.drawer-title { font-size: 13px; font-weight: 700; letter-spacing: .5px; }
.close-drawer { min-width: 30px; height: 30px; font-size: 13px; display: none; }
.section-title {
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--muted); margin: 18px 4px 10px;
}
.layer-menu { display: flex; flex-direction: column; gap: 7px; }
.layer-item {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 11px; border-radius: 10px; cursor: pointer;
  background: rgba(255,255,255,0.04); border: 1px solid var(--border);
  transition: all .14s ease; text-align: left; color: var(--text);
}
.layer-item:hover { background: rgba(54,198,240,0.12); border-color: var(--accent); }
.layer-item.active {
  background: linear-gradient(135deg, rgba(54,198,240,0.26), rgba(46,230,166,0.16));
  border-color: var(--accent); box-shadow: 0 0 14px rgba(54,198,240,0.25);
}
.layer-item .li-glyph {
  width: 30px; height: 30px; border-radius: 8px; flex: none;
  display: grid; place-items: center; font-size: 14px; font-weight: 700;
  background: rgba(255,255,255,0.08); border: 1px solid var(--border-strong);
}
.layer-item.active .li-glyph { background: rgba(54,198,240,0.3); color: #fff; }
.layer-item .li-name { font-size: 13.5px; font-weight: 650; }
.layer-item .li-sub { font-size: 10.5px; color: var(--muted); }

/* 雷达源切换器 */
.radar-source {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  margin: 10px 0 2px; padding: 9px 9px; border-radius: 10px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--border);
}
.radar-source .rs-label {
  font-size: 11px; color: var(--muted); letter-spacing: .5px; margin-right: 2px;
}
.rs-btn {
  flex: 1 1 auto; min-width: 56px; padding: 7px 6px; border-radius: 8px; cursor: pointer;
  font-size: 12px; color: var(--text); text-align: center;
  background: rgba(255,255,255,0.05); border: 1px solid var(--border); transition: all .14s ease;
}
.rs-btn:hover { background: rgba(54,198,240,0.12); border-color: var(--accent); }
.rs-btn.active {
  background: linear-gradient(135deg, rgba(54,198,240,0.3), rgba(46,230,166,0.18));
  border-color: var(--accent); color: #fff; font-weight: 650;
  box-shadow: 0 0 12px rgba(54,198,240,0.25);
}

.station-list { display: flex; flex-direction: column; gap: 4px; }
.station-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 10px; border-radius: 9px; cursor: pointer;
  border: 1px solid transparent; transition: all .12s ease;
}
.station-item:hover { background: rgba(255,255,255,0.05); }
.station-item.active { background: rgba(54,198,240,0.14); border-color: var(--accent); }
.station-item .si-name { font-size: 13.5px; font-weight: 600; }
.station-item .si-role { font-size: 10.5px; color: var(--muted); }

/* 实况站点(CMA) */
.cma-note { font-size: 10.5px; color: var(--muted); line-height: 1.5; margin: 0 2px 8px; }
.cma-note.warn { color: #f1c40f; }
.cma-list { display: flex; flex-direction: column; gap: 5px; }
.cma-item {
  padding: 8px 10px; border-radius: 9px; cursor: pointer;
  background: rgba(70,230,166,0.06); border: 1px solid var(--border); transition: all .12s ease;
}
.cma-item:hover { background: rgba(70,230,166,0.14); border-color: var(--accent2); }
.cma-item.active { background: rgba(70,230,166,0.18); border-color: var(--accent2); }
.cma-item .ci-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.cma-item .ci-name { font-size: 13px; font-weight: 650; }
.cma-item .ci-age { font-size: 10px; color: var(--muted); }
.cma-item .ci-age.err { color: #e74c3c; }
.cma-item .ci-row { display: flex; justify-content: space-between; font-size: 11px; color: var(--text); }
.cma-item .ci-row span { opacity: .92; }
.empty.sm { font-size: 11.5px; padding: 10px 0; }

/* 实况站点地图菱形标记 */
.yc-cma-icon { display: flex; align-items: center; gap: 5px; }
.yc-cma-icon .yc-diamond {
  width: 11px; height: 11px; border-radius: 2px;
  transform: rotate(45deg);
  border: 2px solid #fff; box-shadow: 0 0 8px rgba(0,0,0,0.6);
}

/* 调试: 雷达对位参考网格(经纬度刻度标签) */
.yc-grid-label {
  font-size: 10px; color: #ff9f43; text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 0 6px rgba(0,0,0,.8);
  white-space: nowrap; pointer-events: none;
}
.yc-grid-label span { padding: 1px 4px; background: rgba(0,0,0,.35); border-radius: 3px; }

.about { font-size: 11.5px; line-height: 1.6; color: var(--muted); }

/* ---------- 地图 ---------- */
.map-wrap { grid-area: map; position: relative; overflow: hidden; }
#map { position: absolute; inset: 0; background: #06101a; }
/* 加深底图, 贴近 windy 暗色观感 */
.leaflet-tile-pane { filter: saturate(0.9) brightness(0.92); }
.yc-windy-canvas { position: absolute; top: 0; left: 0; pointer-events: none; }

.data-banner {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  z-index: 620; max-width: 80%;
  background: rgba(231,76,60,0.92); color: #fff;
  font-size: 13px; font-weight: 600; padding: 9px 16px;
  border-radius: 10px; box-shadow: var(--shadow); text-align: center;
}
.data-banner[hidden] { display: none; }

.map-hint {
  position: absolute; left: 12px; bottom: 12px; z-index: 410;
  background: var(--panel); backdrop-filter: blur(10px);
  border: 1px solid var(--border); border-radius: 20px;
  padding: 6px 13px; font-size: 11.5px; color: var(--muted);
  pointer-events: none;
}

.legend {
  position: absolute; right: 14px; bottom: 14px; z-index: 410;
  background: var(--panel); backdrop-filter: blur(10px);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; width: 210px; box-shadow: var(--shadow);
}
.legend-title { font-size: 12px; margin-bottom: 7px; color: var(--text); font-weight: 600; }
.legend-bar { height: 10px; border-radius: 5px; border: 1px solid var(--border); }
.legend-scale { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--muted); margin-top: 4px; }

/* 风级离散色阶横条: 6 段拼接为一条小横条, hover 任一段在该段上方弹出对应标气泡 */
.legend-grades {
  display: flex; flex-direction: row; gap: 1px;
  margin-top: 4px; border-radius: 5px; overflow: visible;
  position: relative;
  background: rgba(255,255,255,0.04);
}
.legend-grade {
  flex: 1; position: relative; cursor: help;
  transition: transform 0.18s ease, filter 0.18s ease;
}
.legend-grade:hover {
  transform: translateY(-3px);
  filter: brightness(1.35) saturate(1.15);
  z-index: 5;
}
.legend-grade:hover::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 6px); left: 50%;
  transform: translateX(-50%);
  padding: 6px 10px;
  background: rgba(15,20,35,0.96);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 6px;
  font-size: 11px; white-space: nowrap;
  color: var(--text);
  pointer-events: none; z-index: 10;
  box-shadow: 0 4px 14px rgba(0,0,0,0.55);
}
.legend-swatch {
  display: block; width: 100%; height: 18px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 0 6px rgba(0,0,0,0.25);
}
.legend-foot {
  margin-top: 6px; padding-top: 5px; border-top: 1px dashed var(--border);
  font-size: 9.5px; color: var(--muted); line-height: 1.4;
}

/* 站点图标 */
.yc-station-icon { display: flex; align-items: center; gap: 5px; }
.yc-station-icon .yc-dot {
  width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 0 8px rgba(0,0,0,0.6);
}
.yc-station-icon .yc-label {
  font-size: 11px; color: #fff; font-weight: 600;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.8);
  white-space: nowrap;
}

/* 地图点击点 (weather picker) */
.yc-pick .yc-pick-pin {
  width: 14px; height: 14px; border-radius: 50% 50% 50% 0;
  background: var(--accent); border: 2px solid #fff;
  transform: rotate(-45deg); box-shadow: 0 0 10px rgba(54,198,240,0.8);
}

/* ---------- 右面板: 气象 picker ---------- */
.panel-right {
  grid-area: right; background: var(--panel-solid);
  border-left: 1px solid var(--border); overflow-y: auto; padding: 14px;
}
.empty { color: var(--muted); font-size: 13px; text-align: center; padding: 30px 0; }
.sp-head { display: flex; justify-content: space-between; align-items: flex-start; }
.sp-head h2 { margin: 0; font-size: 19px; }
.sp-sub { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.sp-time { font-size: 12px; color: var(--accent); margin-top: 6px; }
.sp-close { background: none; border: none; color: var(--muted); font-size: 18px; cursor: pointer; }

.kv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0; }
.kv {
  background: rgba(255,255,255,0.04); border: 1px solid var(--border);
  border-radius: 9px; padding: 8px 10px; display: flex; flex-direction: column; gap: 3px;
}
.kv span { font-size: 11px; color: var(--muted); }
.kv b { font-size: 15px; font-weight: 700; }

/* meteogram */
.meteo-box { border: 1px solid var(--border); border-radius: 11px; padding: 10px; margin-bottom: 14px; }
.meteo-title { font-size: 12px; color: var(--muted); margin-bottom: 6px; display:flex; justify-content:space-between;}
#meteoCanvas { width: 100%; height: 150px; display: block; }
.meteo-legend { display: flex; gap: 14px; font-size: 11px; margin-top: 4px; }
.meteo-legend .t-t { color: #ff9f43; }
.meteo-legend .t-w { color: #4aa3ff; }
.meteo-legend .t-p { color: #6ec6ff; }

/* 模型 */
.model-box { border: 1px solid var(--border); border-radius: 11px; padding: 12px; background: rgba(54,198,240,0.05); }
.model-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.model-head span { font-size: 12px; color: var(--muted); }
.model-head select { background: #0d1827; color: var(--text); border: 1px solid var(--border); border-radius: 7px; padding: 5px 8px; font-size: 12px; max-width: 200px; }
.risk-card { display: flex; align-items: center; gap: 14px; padding: 10px; border: 1.5px solid; border-radius: 10px; margin-bottom: 10px; }
.risk-score { font-size: 38px; font-weight: 800; line-height: 1; }
.risk-meta { display: flex; flex-direction: column; gap: 5px; }
.risk-level { align-self: flex-start; color: #04212e; font-weight: 800; font-size: 13px; padding: 3px 12px; border-radius: 20px; }
.risk-model { font-size: 11px; color: var(--muted); }
.m-placeholder { font-size: 13px; color: var(--accent2); margin-bottom: 8px; }
.factors { display: flex; flex-direction: column; gap: 5px; margin: 4px 0 10px; }
.factor { display: grid; grid-template-columns: 52px 1fr 42px 1fr; align-items: center; gap: 6px; font-size: 12px; padding: 5px 0; border-bottom: 1px solid var(--border); }
.factor .f-name { color: var(--muted); }
.factor .f-val { font-weight: 600; }
.factor .f-impact { text-align: center; border-radius: 5px; font-weight: 700; font-size: 11px; }
.factor .f-impact.neg { color: #ff7b7b; }
.factor .f-impact.pos { color: #6ee7a8; }
.factor .f-impact.neu { color: var(--muted); }
.factor .f-note { color: var(--muted); font-size: 11px; }
.m-advice { font-size: 12.5px; color: var(--text); background: rgba(255,255,255,0.04); padding: 8px 10px; border-radius: 8px; line-height: 1.5; }

/* ---------- 底部播放器 ---------- */
.player {
  grid-area: bottom; background: var(--panel-solid);
  border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 18px; padding: 0 20px;
  position: relative; z-index: 600;   /* 时间轴置顶: 不被图例/源切换等其他组件覆盖 */
}
.player-ctrls { display: flex; align-items: center; gap: 10px; }
.player-ctrls.right { margin-left: auto; }
.clock { font-size: 14px; font-weight: 700; min-width: 168px; color: var(--accent); }
.clock .rel { color: var(--muted); font-weight: 500; font-size: 12px; margin-left: 6px; }

.track-wrap { flex: 1; position: relative; }
.track {
  position: absolute; left: 0; right: 0; top: 6px; height: 8px;
  border-radius: 5px; overflow: hidden;
  background: linear-gradient(90deg, var(--past) 0%, var(--past) 50%, var(--future) 50%, var(--future) 100%);
  opacity: .55;
}
.track-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, var(--past), var(--past) 50%, var(--future) 50%, var(--future));
  width: 0%;
}
.now-mark {
  position: absolute; top: 1px; height: 18px; width: 3px;
  background: #fff; border-radius: 2px; left: 50%; z-index: 7;
  box-shadow: 0 0 8px rgba(0,0,0,0.6);
}
.scrubber {
  /* 圆形 thumb, 视觉中心 1+9=10px, 与 .track (top:6 height:8 -> 中心 10px) 完全对齐 */
  position: absolute; top: 1px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 3px solid var(--accent); z-index: 10;   /* z-index 10 > #timeSlider (5) > now-mark (7 之上 7) > trackFill (2), 不被任何东西覆盖 */
  transform: translateX(-50%);
  box-shadow: 0 0 12px rgba(54,198,240,0.9), 0 2px 6px rgba(0,0,0,0.45);
  pointer-events: none;
}
#timeSlider {
  position: relative; width: 100%; -webkit-appearance: none; appearance: none;
  height: 20px; background: transparent; outline: none; margin: 0; z-index: 5;
}
#timeSlider::-webkit-slider-thumb { -webkit-appearance: none; width: 1px; height: 1px; background: transparent; }
#timeSlider::-moz-range-thumb { width: 1px; height: 1px; background: transparent; border: none; }
.track-scale {
  display: flex; justify-content: space-between; font-size: 10.5px; color: var(--muted);
  margin-top: 2px;
}
.track-scale .now-tag { color: #fff; }

/* 滚动条 */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; }

/* ---------- 响应式 ---------- */
@media (max-width: 980px) {
  #app { grid-template-columns: 0 1fr 0; grid-template-areas: "top" "map" "bottom"; }
  #app.left-collapsed { grid-template-columns: 0 1fr 0; }
  .panel-left, .panel-right {
    position: absolute; top: 56px; bottom: 98px; width: 270px; z-index: 700;
  }
  .panel-left { left: 0; box-shadow: var(--shadow); }
  .panel-right { right: 0; box-shadow: var(--shadow); }
  #app.show-left .panel-left { display: block; }
  .close-drawer { display: block; }
  .search-wrap { display: none; }
}

/* ---------- ICP 备案 (工信部要求首页底部显著位置) ---------- */
.beian {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 28px; padding: 0 16px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  border-top: 1px solid var(--border);
  z-index: 600;
  font-size: 11px;
}
.beian-link {
  display: inline-flex; align-items: center; gap: 5px;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.15s ease;
}
.beian-link:hover { color: var(--accent); text-decoration: underline; }
.beian-icon {
  width: 14px; height: 14px;
  display: inline-block; vertical-align: middle;
  filter: invert(1) brightness(0.95);
}