/* Trend detail page — comprehensive layout */
.td-body{background:#f5f7fa;}

/* ========== HERO ========== */
.td-hero{
  background: linear-gradient(135deg,#04250f,#0a3a1c 65%,#0e4c25);
  color:#fff; padding:36px 0 28px; position:relative; overflow:hidden;
}
.td-hero::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 75% 30%, rgba(74,222,128,.18), transparent 55%),
             radial-gradient(circle at 20% 80%, rgba(76,148,255,.10), transparent 60%);
  pointer-events:none;
}
.td-hero-inner{position:relative;}
.td-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; text-transform:uppercase; letter-spacing:.1em;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18);
  padding:5px 11px; border-radius:999px; font-weight:700; color:rgba(255,255,255,.85);
}
.td-dot{
  width:9px; height:9px; border-radius:50%; background:#4ade80;
  box-shadow:0 0 0 0 rgba(74,222,128,.75);
  animation: tdPulse 1.6s ease-out infinite;
}
@keyframes tdPulse{0%{box-shadow:0 0 0 0 rgba(74,222,128,.75)}70%{box-shadow:0 0 0 10px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}
.td-hero h1{
  margin:14px 0 8px; font-family:'Plus Jakarta Sans',sans-serif;
  font-size:42px; font-weight:800; letter-spacing:-.5px;
  display:flex; align-items:center; gap:14px; line-height:1.1;
}
.td-emoji{font-size:46px; line-height:1;}
.td-sub{font-size:16px; color:rgba(255,255,255,.78); max-width:780px; line-height:1.5;}
.td-statbar{display:flex; flex-wrap:wrap; gap:14px; margin-top:22px;}
.td-stat{
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  border-radius:12px; padding:14px 18px; min-width:150px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.td-stat .v{
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:28px; line-height:1;
  display:block; color:#fff;
}
.td-stat .l{font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:rgba(255,255,255,.62); margin-top:6px; font-weight:600;}
.td-stat.crit .v{color:#fca5a5;}
.td-stat.warn .v{color:#fcd34d;}
.td-stat.good .v{color:#86efac;}

/* ========== MAIN GRID ========== */
.td-main{padding:28px 0 60px;}
.td-card{
  background:#fff; border:1px solid var(--line,#e5e7eb);
  border-radius:16px; box-shadow:0 4px 24px rgba(0,0,0,.06);
  overflow:hidden; margin-bottom:20px;
}
.td-card-h{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 18px; border-bottom:1px solid var(--line,#e5e7eb);
}
.td-card-h h3{
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:15px;
  margin:0; color:var(--ink,#1f2937); display:flex; align-items:center; gap:8px;
}
.td-card-sub{font-size:12px; color:var(--ink-soft,#6b7280); font-weight:500;}
.td-refresh{
  cursor:pointer; font-size:18px; opacity:.5; transition:opacity .2s, transform .3s;
  padding:4px 8px; border-radius:8px;
}
.td-refresh:hover{opacity:1; background:#f1f5f9;}
.td-refresh.spin{animation:tdSpin .6s linear; opacity:1;}
@keyframes tdSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* ========== TIME-FILTER BAR ========== */
.td-filter-bar{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  background:#fff; border:1px solid var(--line,#e5e7eb);
  border-radius:14px; padding:10px 14px;
  margin-bottom:16px; box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.td-filter-label{font-size:12px; color:var(--ink-soft,#6b7280); font-weight:700; text-transform:uppercase; letter-spacing:.06em;}
.td-filter-pills{display:flex; gap:6px; flex-wrap:wrap;}
.td-filter-pill{
  background:#f1f5f9; color:var(--ink,#1f2937);
  border:1px solid transparent; border-radius:999px;
  padding:5px 14px; font-size:12.5px; font-weight:600; cursor:pointer;
  transition:all .15s;
}
.td-filter-pill:hover{background:#e2e8f0;}
.td-filter-pill.active{
  background:var(--feed-color, #009b3a); color:#fff;
  border-color:var(--feed-color, #009b3a);
  box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.td-filter-info{font-size:12px; color:var(--ink-soft,#6b7280); margin-left:auto;}

/* ========== CHARTS GRID ========== */
.td-charts-grid{
  display:grid; grid-template-columns: 1.3fr 1fr; gap:18px; margin-bottom:20px;
}
@media (max-width: 900px){ .td-charts-grid{grid-template-columns:1fr;} }
.td-chart-wrap{padding:18px; height:260px; position:relative;}
.td-chart-wrap-sm{height:260px;}
.td-trend-card, .td-break-card{margin-bottom:0;}

/* ========== PAGINATION ========== */
.td-pager{
  display:flex; align-items:center; justify-content:center; gap:14px;
  padding:12px 18px; border-top:1px solid var(--line,#e5e7eb);
  background:#fafbfc;
}
.td-pager-btn{
  border:1px solid var(--line,#e5e7eb); background:#fff;
  border-radius:8px; padding:6px 14px; font-size:12.5px; font-weight:600;
  color:var(--ink,#1f2937); cursor:pointer; transition:all .15s;
}
.td-pager-btn:hover:not(:disabled){background:#f1f5f9; transform:translateY(-1px); box-shadow:0 2px 6px rgba(0,0,0,.06);}
.td-pager-btn:disabled{opacity:.4; cursor:not-allowed;}
.td-pager-info{font-size:12px; color:var(--ink-soft,#6b7280); font-variant-numeric:tabular-nums;}

/* ========== LIVE TICKER ========== */
.td-ticker-card .td-card-h h3{color:#dc2626;}
.td-ticker{max-height:240px; overflow-y:auto; padding:0;}
.td-tick-row{
  display:grid; grid-template-columns:auto 1fr auto;
  gap:10px; align-items:center;
  padding:9px 18px; border-bottom:1px solid var(--line-2,#eef2f6);
  font-size:13px; animation: tdSlideIn .4s ease-out;
}
.td-tick-row:first-child{background:linear-gradient(90deg, rgba(239,68,68,.10), transparent 70%);}
@keyframes tdSlideIn { from{opacity:0; transform:translateY(-8px)} to{opacity:1; transform:translateY(0)} }
.td-tick-dot{width:8px; height:8px; border-radius:50%; background:#ef4444; animation: tdPulse 1.4s ease-out infinite;}
.td-tick-msg{color:var(--ink,#1f2937); font-weight:600;}
.td-tick-time{color:var(--ink-soft,#6b7280); font-size:11px; font-variant-numeric:tabular-nums;}

/* ========== TWO-UP LIST + MAP ========== */
.td-grid{
  display:grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap:20px;
  margin-bottom:20px;
}
@media (max-width: 900px){
  .td-grid{grid-template-columns:1fr;}
  .td-hero h1{font-size:30px;}
  .td-emoji{font-size:34px;}
  .td-chart-wrap{height:240px;}
}
.td-list-card, .td-map-card{margin-bottom:0;}

/* LIST */
.td-list{max-height:480px; overflow-y:auto;}
.td-row{
  display:grid; grid-template-columns:44px 1fr auto;
  gap:12px; align-items:center;
  padding:12px 18px; border-bottom:1px solid var(--line-2,#eef2f6);
  transition:background .15s;
}
.td-row:last-child{border-bottom:none;}
.td-row:hover{background:#f8fafc;}
.td-badge{
  width:42px; height:42px; border-radius:10px;
  display:grid; place-items:center;
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:13px;
  color:#fff; line-height:1; text-align:center;
}
.td-badge.eq-low{background:#a16207;} .td-badge.eq-mod{background:#ea580c;}
.td-badge.eq-high{background:#dc2626;} .td-badge.eq-sev{background:#7f1d1d;}
.td-badge.wnd-calm{background:#0d9488;} .td-badge.wnd-mod{background:#16a34a;}
.td-badge.wnd-fresh{background:#f59e0b;} .td-badge.wnd-gale{background:#ea580c;}
.td-badge.wnd-storm{background:#dc2626;} .td-badge.wnd-hurr{background:#7f1d1d;}
.td-badge.rain-light{background:#67e8f9; color:#0f3a4a;}
.td-badge.rain-mod{background:#06b6d4;} .td-badge.rain-heavy{background:#2563eb;}
.td-badge.rain-extreme{background:#1e40af;}
.td-badge.ltn{background:#ef4444;} .td-badge.inc{background:#eb556d;}
.td-badge.cls{background:#dc2626;} .td-badge.rep{background:#f97316;}
.td-badge.hur{background:#1e3a8a;}
.td-info{min-width:0;}
.td-name{font-weight:700; font-size:14px; color:var(--ink,#1f2937); margin-bottom:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.td-meta{font-size:12px; color:var(--ink-soft,#6b7280);}
.td-when{font-size:11px; color:var(--ink-soft,#6b7280); text-align:right; white-space:nowrap;}
.td-empty{padding:32px 18px; text-align:center; color:var(--ink-soft,#6b7280); font-size:13px;}

/* MAP */
.td-map{height:480px; width:100%;}

/* ========== DATA SOURCE CARD ========== */
.td-source-body{padding:18px;}
.td-source-body p{margin:0 0 10px; font-size:13.5px; line-height:1.6; color:var(--ink,#1f2937);}
.td-source-body p:last-child{margin-bottom:0;}
.td-source-body .td-prov{font-weight:700; color:var(--ink,#1f2937); display:inline-flex; align-items:center; gap:8px;}
.td-source-body .td-prov::before{
  content:""; width:9px; height:9px; border-radius:50%; background:#22c55e;
  box-shadow:0 0 0 0 rgba(34,197,94,.7); animation: tdPulse 1.6s ease-out infinite;
}
.td-source-body .td-kind{
  display:inline-block; font-size:11px; font-weight:700; padding:2px 8px; border-radius:5px;
  letter-spacing:.02em; margin-left:8px;
}
.td-source-body .td-kind.direct{background:#dbeafe; color:#1e3a8a;}
.td-source-body .td-kind.modelled{background:#fef3c7; color:#854d0e;}

/* ========== FOOT ========== */
.td-foot{padding:18px 0 30px; color:var(--ink-soft,#6b7280); font-size:12.5px; text-align:center;}
.td-foot a{color:var(--ink,#1f2937); text-decoration:underline;}