.feather-8{width:8px;height:8px}.feather-12{width:12px;height:12px}.feather-14{width:14px;height:14px}.feather-16{width:16px;height:16px}.feather-18{width:18px;height:18px}.feather-20{width:20px;height:20px}.feather-24{width:24px;height:24px}.feather-32{width:32px;height:32px}
.wx-shell{padding-top:18px;padding-bottom:36px;background:
linear-gradient(180deg,rgba(241,245,249,.9) 0%,rgba(248,250,252,0) 180px)}
.wx-page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:28px}
.wx-page-title{display:flex;align-items:center;gap:12px;font-size:2rem;line-height:1.1;font-weight:700;color:#0f172a;margin:0}
.wx-page-title-mark{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:14px;background:#dbeafe;color:#2563eb;box-shadow:inset 0 1px 0 rgba(255,255,255,.75)}
.wx-page-sub{margin-top:8px;color:#64748b;font-size:.98rem}
.wx-head-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.wx-country-pill{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 16px;border:1px solid #dbe3ee;border-radius:16px;background:#fff;color:#0f172a;font-weight:600;box-shadow:0 10px 24px rgba(15,23,42,.05)}
.wx-city-wrap{position:relative;min-width:320px}
.wx-city-icon{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:#94a3b8;z-index:3;pointer-events:none}
.wx-card{background:#fff;border:1px solid #e2e8f0;border-radius:20px;box-shadow:0 12px 30px rgba(15,23,42,.06);transition:transform .2s ease,box-shadow .2s ease}
.wx-card:hover{transform:translateY(-2px);box-shadow:0 18px 38px rgba(15,23,42,.08)}
.wx-hero{overflow:hidden;background:linear-gradient(135deg,#1d4ed8 0%,#2563eb 42%,#0f172a 100%);color:#fff;border:none}
.wx-hero .card-body{padding:32px}
.wx-hero-top{display:flex;align-items:center;justify-content:space-between;gap:28px}
.wx-hero-place{display:flex;align-items:center;gap:10px;font-size:1.1rem;opacity:.95}
.wx-hero-temp{font-size:5.35rem;line-height:.92;font-weight:800;margin:16px 0 10px;letter-spacing:-.04em}
.wx-hero-summary{font-size:1.55rem;font-weight:600;margin:0 0 4px}
.wx-hero-desc{color:rgba(255,255,255,.8);margin:0}
.wx-hero-meta{display:flex;flex-wrap:wrap;gap:14px;margin-top:18px;font-size:.92rem;color:rgba(255,255,255,.86)}
.wx-hero-icon-wrap{display:flex;align-items:center;justify-content:center;min-width:190px}
.wx-hero-icon{width:160px;height:160px;filter:drop-shadow(0 18px 30px rgba(15,23,42,.18))}
.wx-hero-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:18px}
.wx-hero-metric{background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:12px}
.wx-hero-metric-head{display:flex;align-items:center;gap:6px;margin-bottom:3px}
.wx-hero-metric-head span{font-size:.7rem;color:rgba(255,255,255,.74)}
.wx-hero-metric strong{display:block;font-size:1rem;color:#fff}
.wx-hero-uv{margin-top:12px;background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:12px}
.wx-hero-uv-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.wx-hero-uv-top span{font-size:.72rem;color:rgba(255,255,255,.74)}
.wx-hero-uv-value{display:inline-flex;align-items:center;gap:6px}
.wx-hero-uv-value strong{font-size:1rem;color:#fff}
.wx-hero-uv-pill{font-size:.66rem;font-weight:700;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.18);color:#fff}
.wx-hero-uv-bar{height:5px;background:rgba(255,255,255,.16);border-radius:999px;margin-top:8px;overflow:hidden}
.wx-hero-uv-bar>i{display:block;height:100%;width:0;background:linear-gradient(90deg,#39d98a 0%,#ffd166 55%,#ff6b6b 100%);border-radius:999px}
.wx-hero-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px;font-size:.72rem;color:rgba(255,255,255,.8)}
.wx-hero-foot strong{color:#fff;margin-left:4px}
.wx-details .card-body{padding:26px}
.wx-panel-head{display:flex;flex-direction:column;gap:4px;margin-bottom:20px}
.wx-section-title{display:flex;align-items:center;gap:10px;font-size:1.08rem;font-weight:700;color:#0f172a;margin:0}
.wx-section-sub{font-size:.88rem;color:#64748b}
.wx-muted-chip{display:inline-flex;align-items:center;gap:7px;min-height:28px;padding:0 10px;border-radius:999px;background:#eef2ff;color:#4f46e5;font-size:.76rem;font-weight:700}
.wx-hourly-compact{display:grid;gap:10px}
.wx-hourly-compact-row{display:grid;grid-template-columns:56px 40px minmax(0,1fr) 54px;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:#f8fafc}
.wx-hourly-compact-time{font-size:.82rem;font-weight:700;color:#0f172a}
.wx-hourly-compact-copy{min-width:0}
.wx-hourly-compact-summary{font-size:.8rem;color:#475569;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wx-hourly-compact-temp{font-size:.92rem;font-weight:700;color:#0f172a;text-align:right}
.wx-detail-list{display:grid;gap:14px}
.wx-detail-item{display:flex;align-items:center;justify-content:space-between;gap:12px}
.wx-detail-copy{display:flex;align-items:center;gap:12px;min-width:0}
.wx-detail-icon{width:42px;height:42px;border-radius:14px;background:#eff6ff;display:flex;align-items:center;justify-content:center;color:#2563eb;flex-shrink:0}
.wx-detail-label{font-size:.82rem;color:#64748b}
.wx-detail-sub{font-size:.74rem;color:#94a3b8;margin-top:1px}
.wx-detail-value{font-size:.98rem;font-weight:700;color:#0f172a;text-align:right}
.wx-panel .card-body{padding:26px}
.wx-hourly-strip{display:flex;gap:16px;overflow:auto;padding-bottom:2px}
.wx-hour-card{flex:0 0 106px;padding:16px 12px;background:#f8fafc;border-radius:16px;text-align:center}
.wx-hour-card canvas{display:block!important;width:30px!important;height:30px!important;margin:0 auto;flex-shrink:0}
#wx_hourly_cards canvas{display:block!important;width:30px!important;height:30px!important;margin:0 auto;flex-shrink:0}
.wx-hour-time{font-size:.82rem;color:#64748b;margin-bottom:8px}
.wx-hour-temp{font-size:1.3rem;font-weight:700;color:#0f172a}
.wx-hour-sub{font-size:.74rem;color:#94a3b8;margin-top:4px}
.wx-chart-wrap{margin-top:22px;padding:16px 14px 8px;border-radius:16px;background:#f8fafc}
#flotChart1{height:220px}
.wx-daily-list{display:grid;gap:10px}
.wx-day-row{display:grid;grid-template-columns:minmax(92px,120px) minmax(0,1fr) 88px 96px;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:#fff;transition:background-color .18s ease,transform .18s ease}
.wx-day-row:hover{background:#f8fafc;transform:translateY(-1px)}
.wx-day-label{font-weight:600;color:#0f172a}
.wx-day-summary{display:flex;align-items:center;gap:12px;color:#475569;font-size:.92rem;min-width:0}
.wx-day-summary canvas{display:block!important;width:28px!important;height:28px!important;flex-shrink:0}
#wx_daily_cards canvas{display:block!important;width:28px!important;height:28px!important;flex-shrink:0}
.wx-day-rain{display:flex;align-items:center;gap:8px;color:#2563eb;font-size:.85rem;justify-content:flex-start}
.wx-day-range{text-align:right}
.wx-day-hi{font-size:1rem;font-weight:700;color:#0f172a}
.wx-day-lo{font-size:.92rem;color:#64748b;margin-left:10px}
.wx-map-box{height:264px;border-radius:16px;background:linear-gradient(180deg,#dbeafe 0%,#eff6ff 100%);display:flex;align-items:center;justify-content:center;text-align:center;color:#475569;padding:20px}
.wx-alerts{display:grid;gap:12px}
.wx-alert{padding:14px 16px;border-left:4px solid #f59e0b;background:#fffbeb;border-radius:12px}
.wx-alert--info{border-left-color:#2563eb;background:#eff6ff}
.wx-alert-title{display:flex;align-items:center;gap:8px;font-weight:700;color:#92400e;margin-bottom:4px}
.wx-alert--info .wx-alert-title{color:#1d4ed8}
.wx-alert-copy{font-size:.88rem;color:#6b7280}
.wx-empty{padding:24px;border-radius:16px;background:#f8fafc;color:#64748b;text-align:center}
.wx-loading{opacity:.65}
.select2-container--default .select2-selection--single{height:48px;border:1px solid #dbe3ee;border-radius:16px;padding:9px 14px 9px 42px;background:#fff}
.select2-container--default .select2-selection--single .select2-selection__rendered{line-height:28px;color:#0f172a;font-weight:500}
.select2-container--default .select2-selection--single .select2-selection__arrow{height:46px;right:10px}
.select2-dropdown{border:1px solid #dbe3ee;border-radius:16px;overflow:hidden;box-shadow:0 18px 40px rgba(15,23,42,.12)}
.select2-search--dropdown{padding:10px}
.select2-search--dropdown .select2-search__field{border:1px solid #dbe3ee;border-radius:12px;padding:9px 12px}
.select2-results__option{padding:10px 14px}
.select2-container--default .select2-results__option--highlighted[aria-selected]{background:#2563eb}
@media (max-width: 991.98px){
  .wx-page-head{flex-direction:column}
  .wx-city-wrap{width:100%;min-width:0}
  .wx-country-pill{display:none}
  .wx-hero-top{flex-direction:column;align-items:flex-start}
  .wx-hero-icon-wrap{min-width:0;width:100%;justify-content:flex-start}
}
@media (max-width: 767.98px){
  .wx-page-title{font-size:1.7rem}
  .wx-page-title-mark{width:38px;height:38px}
  .wx-hero .card-body,.wx-details .card-body,.wx-panel .card-body{padding:20px}
  .wx-hero-temp{font-size:4rem}
  .wx-hero-icon-wrap{justify-content:center}
  .wx-hero-metrics{grid-template-columns:1fr}
  .wx-hero-foot{flex-direction:column;align-items:flex-start}
  .wx-hourly-compact-row{grid-template-columns:48px 34px minmax(0,1fr) 44px;gap:8px;padding:9px 10px}
  .wx-day-row{grid-template-columns:1fr;gap:8px}
  .wx-day-range{text-align:left}
}
.wx-metric-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.wx-day-metric{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:12px 14px}
.wx-day-metric span{display:block;font-size:.72rem;color:#64748b;margin-bottom:3px}
.wx-day-metric strong{display:block;font-size:.97rem;color:#0f172a}
/* ── Wind direction label ─────────────────────────── */
.wx-wind-dir{display:inline-flex;align-items:center;gap:3px;font-weight:400;font-size:.88em;opacity:.82}
/* ── Chart metric toggles ─────────────────────────── */
.wx-chart-toggles{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.wx-chart-btn{padding:4px 14px;border-radius:999px;border:1px solid #e2e8f0;background:#fff;color:#64748b;font-size:.78rem;font-weight:600;cursor:pointer;line-height:1.6;transition:all .15s ease}
.wx-chart-btn.active,.wx-chart-btn:hover{background:#2563eb;border-color:#2563eb;color:#fff}
/* ── AQI gauge ────────────────────────────────────── */
.wx-aqi-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.wx-aqi-score{font-size:1.6rem;font-weight:800;line-height:1}
.wx-aqi-cat{font-size:.75rem;font-weight:700;padding:3px 10px;border-radius:999px;color:#fff}
.wx-aqi-bar-wrap{height:10px;border-radius:999px;background:linear-gradient(90deg,#22c55e 0%,#eab308 33%,#f97316 54%,#ef4444 72%,#a855f7 88%,#7c3aed 100%);position:relative;margin-bottom:14px}
.wx-aqi-marker{position:absolute;top:-4px;width:4px;height:18px;background:#0f172a;border-radius:2px;transform:translateX(-50%)}
/* ── Comfort note ─────────────────────────────────── */
.wx-comfort-note{margin-top:10px;padding:8px 12px;background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.14);border-radius:10px;font-size:.79rem;color:rgba(255,255,255,.85);display:flex;align-items:flex-start;gap:7px}
/* ── Hourly wind info ─────────────────────────────── */
.wx-hour-wind{font-size:.72rem;color:#94a3b8;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}