/* iPad Air 3 compact landscape layout: weather A, forecast A, RSS carousel A. */
body {
  background:
    radial-gradient(circle at 88% -8%, rgba(57, 140, 210, .28), transparent 32rem),
    radial-gradient(circle at -12% 102%, rgba(36, 199, 168, .12), transparent 28rem),
    #07101d;
}

.panel {
  border-color: rgba(158, 209, 255, .18);
  box-shadow: 0 16px 35px rgba(0, 0, 0, .2), inset 0 1px rgba(255, 255, 255, .025);
}

.weather-side {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 10px;
}

.weather-side .forecast-section { grid-column: 1 / -1; }

.weather-side .weather-panel {
  border: 1px solid rgba(158, 209, 255, .14);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(3, 16, 29, .46), rgba(25, 59, 92, .34));
}

.rss-carousel {
  display: flex;
  gap: 12px;
  margin-top: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding: 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(104, 177, 255, .55) transparent;
}

.rss-carousel::-webkit-scrollbar { height: 5px; }
.rss-carousel::-webkit-scrollbar-thumb { background: rgba(104, 177, 255, .55); border-radius: 99px; }

.rss-card {
  flex: 0 0 min(88%, 520px);
  min-width: 0;
  max-height: 355px;
  padding: 12px 14px;
  border: 1px solid rgba(158, 209, 255, .16);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(4, 17, 32, .64), rgba(17, 45, 72, .5));
  scroll-snap-align: start;
}

.rss-card > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(183, 213, 247, .13);
}

.rss-card > header strong { color: #8bc5ff; font-size: 13px; }
.rss-card > header span { color: #8fa9c5; font: 10px "Space Mono", monospace; }
.rss-card ol { list-style: none; padding: 0; margin: 0; max-height: 287px; overflow-y: auto; }
.rss-card li { border-bottom: 1px solid rgba(183, 213, 247, .1); }
.rss-card li:last-child { border-bottom: 0; }
.rss-card a { display: grid; grid-template-columns: 26px 1fr auto; gap: 7px; align-items: baseline; padding: 8px 0; color: inherit; text-decoration: none; }
.rss-card a:hover { color: #9cd1ff; }
.rss-card a b { color: #5c83ac; font: 10px "Space Mono", monospace; }
.rss-card a strong { font-size: 12px; line-height: 1.35; }
.rss-card a time { color: #8fa9c5; font-size: 10px; white-space: nowrap; }
.rss-hint { margin: 8px 0 0; color: #7892af; font-size: 10px; text-align: center; }

@media (min-width: 900px) and (max-width: 1200px) {
  .dashboard { max-width: 1180px; margin: 0 auto; padding: 15px 18px; gap: 12px; }
  .panel { border-radius: 16px; padding: 16px; }
  .topbar { min-height: 28px; }
  .summary-grid { grid-template-columns: minmax(420px, .9fr) minmax(520px, 1.2fr); gap: 12px; }
  .clock { margin: 9px 0 5px; font-size: clamp(64px, 7.1vw, 82px); }
  .date { font-size: 17px; }
  .clock-panel .muted { margin-top: 8px; font-size: 11px; }
  .weather-side { padding: 12px; gap: 8px; }
  .weather-panel { align-self: start; min-height: 0; padding: 9px; }
  .weather-panel .panel-head { display: block; }
  .weather-panel .panel-head .eyebrow { font-size: 9px; }
  .weather-panel .panel-head .muted { display: block; margin-top: 2px; font-size: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .current-weather { gap: 4px; margin: 5px 0 0; }
  .weather-icon { width: 29px; font-size: 24px; }
  .current-weather strong { font-size: 33px; }
  .current-weather p, .weather-panel .metrics { display: none; }
  .weather-side .forecast-section { padding: 8px 1px 0; border-top: 1px solid rgba(183, 213, 247, .16); }
  .forecast-section .section-caption, .forecast-key { font-size: 10px; }
  .weather-side .forecast-columns { display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: 5px; }
  .weather-side .forecast-columns > div + div { padding: 6px 0 0; border: 0; border-top: 1px solid rgba(183, 213, 247, .13); }
  .forecast-columns h2 { margin-bottom: 6px; font-size: 12px; }
  .weather-side .forecast-list { grid-template-columns: repeat(9, 45px); gap: 4px; padding-bottom: 2px; }
  .forecast-day { min-width: 45px; padding: 3px 1px; border-radius: 7px; background: rgba(4, 15, 28, .28); }
  .forecast-day time { font-size: 8px; }
  .forecast-day .icon { font-size: 13px; line-height: 1.18; }
  .forecast-day strong, .forecast-day span { font-size: 9px; }
  .forecast-day small { display: none; }
  .lower-grid { grid-template-columns: .82fr 1.18fr; gap: 12px; }
  .commute-list { grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 11px; }
  .route { min-height: 78px; padding: 9px; }
  .route .route-label { font-size: 11px; }
  .route strong { margin-top: 5px; font-size: 20px; }
  .route small { font-size: 10px; }
  .rss-card { flex-basis: min(82%, 430px); max-height: 278px; padding: 10px 12px; }
  .rss-card ol { max-height: 218px; }
  .rss-card a { padding: 6px 0; }
  .rss-card a strong { font-size: 11px; }
  .news-panel .panel-head { align-items: flex-start; }
  .news-panel .section-caption { max-width: 360px; }
}

@media (max-width: 899px) {
  .rss-card { flex-basis: 92%; }
  .weather-side { grid-column: 1 / -1; }
  .weather-side .forecast-columns { grid-template-columns: 1fr; gap: 10px; }
  .weather-side .forecast-columns > div + div { padding: 10px 0 0; border-left: 0; border-top: 1px solid rgba(183, 213, 247, .13); }
  .weather-side .forecast-list { grid-template-columns: repeat(9, 48px); }
}

/* 重新排版：左側時間與通勤，右側以箭頭切換單一城市天氣。 */
.summary-grid { grid-template-columns: minmax(395px, .78fr) minmax(520px, 1.22fr); }
.left-stack { display: grid; gap: 10px; }
.weather-side { display: block; padding: 12px; }
.weather-side .weather-panel { min-height: 168px; padding: 11px 13px; }
.weather-side .forecast-section { padding: 9px 1px 1px; margin-top: 9px; border-top: 1px solid rgba(183, 213, 247, .16); }

.city-switcher-head { display: grid; grid-template-columns: 34px 1fr 34px; align-items: center; gap: 8px; min-height: 36px; margin-bottom: 8px; }
.city-switcher-head h2 { margin: 1px 0 0; font-size: 17px; line-height: 1.1; color: #dceeff; }
.city-arrow { width: 32px; height: 32px; padding: 0; border: 1px solid rgba(158, 209, 255, .22); border-radius: 50%; background: rgba(6, 22, 40, .55); color: #b9ddff; font: 400 29px/.82 system-ui, sans-serif; cursor: pointer; }
.city-arrow:active { transform: scale(.94); }
.city-view { display: none; }
.city-view.is-active { display: block; }

.weather-panel .panel-head .eyebrow { font-size: 9px; }
.weather-panel .panel-head .muted { font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.weather-panel .current-weather { margin: 7px 0 10px; gap: 9px; }
.weather-panel .weather-icon { width: 42px; font-size: 35px; }
.weather-panel .current-weather strong { font-size: 47px; }
.weather-panel .current-weather p { margin-top: 3px; font-size: 12px; }
.weather-panel .metrics { gap: 7px; }
.weather-panel .metrics div { padding-top: 6px; }
.weather-panel .metrics dt { font-size: 9px; }
.weather-panel .metrics dd { margin-top: 2px; font-size: 13px; }
.forecast-section .section-caption, .forecast-key { font-size: 9px; }
.weather-side .forecast-list { display: grid; grid-template-columns: repeat(9, 50px); gap: 5px; margin-top: 6px; padding-bottom: 2px; }
.weather-side .forecast-day { min-width: 50px; padding: 4px 2px; border-radius: 8px; background: rgba(4, 15, 28, .28); }
.weather-side .forecast-day time { font-size: 8px; }
.weather-side .forecast-day .icon { font-size: 15px; line-height: 1.15; }
.weather-side .forecast-day strong, .weather-side .forecast-day span { font-size: 9px; }
.weather-side .forecast-day small { display: none; }

.lower-grid { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 900px) and (max-width: 1200px) {
  .summary-grid { grid-template-columns: minmax(395px, .78fr) minmax(520px, 1.22fr); gap: 12px; }
  .clock-panel { min-height: 204px; padding: 16px 17px; }
  .clock { margin: 9px 0 5px; font-size: 50px; }
  .date { font-size: 16px; }
  .clock-panel .muted { margin-top: 8px; font-size: 10px; }
  .commute-panel { min-height: 115px; padding: 9px 12px; }
  .commute-panel .panel-head .eyebrow { font-size: 10px; }
  .commute-panel .section-caption { margin-top: 2px; font-size: 9px; }
  .commute-panel .tag { padding: 4px 6px; font-size: 9px; }
  .commute-list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; margin-top: 8px; }
  .route { min-height: 45px; padding: 4px; border-radius: 8px; }
  .route .route-label { font-size: 8px; line-height: 1.12; word-break: break-all; }
  .route strong { margin-top: 3px; font-size: 15px; }
  .route small, .privacy-note { display: none; }
  .commute-panel #commute-updated { margin: 6px 0 0; font-size: 9px; }
  .weather-side { padding: 11px 13px; }
  .city-switcher-head { margin-bottom: 7px; }
  .weather-side .weather-panel { min-height: 168px; }
  .weather-side .forecast-section { margin-top: 8px; }
  .weather-side .forecast-list { grid-template-columns: repeat(9, minmax(48px, 1fr)); }
  .weather-side .forecast-day { min-width: 48px; }
}

@media (max-width: 899px) {
  .summary-grid { grid-template-columns: 1fr; }
  .left-stack { grid-column: 1 / -1; }
  .weather-side { grid-column: 1 / -1; }
  .commute-list { grid-template-columns: repeat(3, 1fr); }
}

/* 預報與新聞同屬一張資訊卡，並跟隨上方城市切換。 */
.city-weather, .city-forecast { display: none; }
.city-weather.is-active, .city-forecast.is-active { display: block; }
.detail-grid { display: grid; grid-template-columns: minmax(395px, .78fr) minmax(520px, 1.22fr); gap: 12px; }
.insights-panel { min-width: 0; }
.insights-divider { height: 1px; margin: 10px 0; background: rgba(183, 213, 247, .16); }
.insights-panel .forecast-list { display: grid; grid-template-columns: repeat(9, minmax(48px, 1fr)); gap: 5px; margin-top: 6px; padding-bottom: 2px; }
.insights-panel .forecast-day { min-width: 48px; padding: 4px 2px; border-radius: 8px; background: rgba(4, 15, 28, .28); }
.insights-panel .forecast-day time { font-size: 8px; }
.insights-panel .forecast-day .icon { font-size: 15px; line-height: 1.15; }
.insights-panel .forecast-day strong, .insights-panel .forecast-day span { font-size: 9px; }
.insights-panel .forecast-day small { display: none; }

@media (min-width: 900px) and (max-width: 1200px) {
  .summary-grid { grid-template-columns: minmax(395px, .78fr) minmax(520px, 1.22fr); }
  .weather-side { min-height: 204px; }
  .detail-grid { grid-template-columns: minmax(395px, .78fr) minmax(520px, 1.22fr); }
  .insights-panel { padding: 12px 13px; }
  .insights-panel .rss-card { flex-basis: min(82%, 430px); }
}

@media (max-width: 899px) {
  .detail-grid { grid-template-columns: 1fr; }
}

/* 通勤下方的加密貨幣與美股日內走勢。 */
.tesla-panel { padding: 10px 12px; border-color: rgba(111, 199, 255, .24); background: linear-gradient(135deg, rgba(19, 53, 80, .9), rgba(7, 21, 37, .9)); }
.tesla-panel h2 { margin: 1px 0 0; color: #f2f8ff; font: 700 15px "Space Mono", monospace; letter-spacing: -.04em; }
.tesla-panel .panel-head { margin-bottom: 7px; }
.tesla-overview { display: grid; grid-template-columns: 58px minmax(78px, .82fr) minmax(108px, 1.18fr); gap: 8px; align-items: center; }
.tesla-battery { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: radial-gradient(circle at center, #0b2237 57%, transparent 58%), conic-gradient(#5ee6c3 calc(var(--battery) * 1%), rgba(152, 192, 225, .15) 0); box-shadow: inset 0 0 0 1px rgba(192, 225, 255, .12); }
.tesla-battery strong { color: #effaff; font: 700 11px "Space Mono", monospace; }
.tesla-battery span { margin-top: -14px; color: #8fa9c5; font-size: 8px; }
.tesla-primary p, .tesla-primary small { margin: 0; color: #8fa9c5; font-size: 9px; }
.tesla-primary strong { display: block; margin: 2px 0; color: #effaff; font: 700 16px "Space Mono", monospace; letter-spacing: -.07em; white-space: nowrap; }
.tesla-primary small { display: block; max-width: 105px; line-height: 1.3; }
.tesla-details { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.tesla-details div, .tesla-stats div { min-width: 0; padding: 5px; border: 1px solid rgba(184, 218, 247, .1); border-radius: 7px; background: rgba(2, 13, 25, .28); }
.tesla-details span, .tesla-stats span { display: block; color: #8fa9c5; font-size: 8px; }
.tesla-details b, .tesla-stats b { display: block; margin-top: 2px; overflow: hidden; color: #eaf7ff; font: 700 10px "Space Mono", monospace; letter-spacing: -.06em; text-overflow: ellipsis; white-space: nowrap; }
.tesla-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 7px; }
.tesla-panel #tesla-updated { margin: 6px 0 0; font-size: 9px; }
.tesla-panel .privacy-note { margin: 3px 0 0; font-size: 8px; line-height: 1.3; }
.tesla-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tesla-v11-grid { display: grid; grid-template-columns: 1.22fr .78fr; gap: 6px; margin-top: 7px; }
.tesla-map-card, .tesla-history-card, .tesla-chart-grid > section, .tesla-alert-card { min-width: 0; padding: 6px; border: 1px solid rgba(184, 218, 247, .1); border-radius: 8px; background: rgba(2, 13, 25, .28); }
.tesla-subhead { display: flex; align-items: center; justify-content: space-between; gap: 5px; color: #9ec9ee; font-size: 8px; }
.tesla-subhead > b { color: #eaf7ff; font: 700 9px "Space Mono", monospace; }
.tesla-subhead a { color: #73ebcf; font-size: 8px; text-decoration: none; }
.tesla-map-wrap { position: relative; display: grid; min-height: 72px; margin-top: 5px; overflow: hidden; border-radius: 5px; background: linear-gradient(135deg, rgba(39, 99, 125, .25), rgba(4, 15, 28, .5)); place-items: center; }
.tesla-map-wrap img { width: 100%; height: 72px; object-fit: cover; }
.tesla-map-wrap p { margin: 0; color: #8fa9c5; font-size: 8px; text-align: center; }
.tesla-range-controls { display: flex; gap: 3px; }
.tesla-range-controls button { padding: 2px 4px; border: 1px solid rgba(143, 169, 197, .22); border-radius: 4px; background: transparent; color: #8fa9c5; font-size: 8px; cursor: pointer; }
.tesla-range-controls button.is-active { border-color: rgba(94, 230, 195, .45); color: #7fe8cd; background: rgba(94, 230, 195, .1); }
.tesla-history-stats { display: grid; grid-template-columns: 1fr; gap: 3px; margin-top: 5px; }
.tesla-history-stats div { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.tesla-history-stats span, #tesla-history-note { color: #8fa9c5; font-size: 8px; }
.tesla-history-stats b { color: #eaf7ff; font: 700 9px "Space Mono", monospace; white-space: nowrap; }
#tesla-history-note { min-height: 19px; margin: 5px 0 0; line-height: 1.22; }
.tesla-chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.tesla-chart-grid svg { display: block; width: 100%; height: 34px; margin-top: 4px; overflow: visible; }
.tesla-chart-grid polyline { fill: none; stroke: #63b9fb; stroke-width: 2.4; vector-effect: non-scaling-stroke; }
.tesla-chart-grid section + section polyline { stroke: #5ee6c3; }
.tesla-alert-card { margin-top: 6px; }
.tesla-alert-card ol { max-height: 62px; margin: 5px 0 0; padding: 0; list-style: none; overflow-y: auto; }
.tesla-alert-card li { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; padding: 3px 0; border-top: 1px solid rgba(184, 218, 247, .08); color: #dceeff; font-size: 8px; }
.tesla-alert-card li:first-child { border-top: 0; }
.tesla-alert-card li b { font-weight: 600; }
.tesla-alert-card time { flex: 0 0 auto; color: #8fa9c5; font-size: 8px; }
.tesla-footer #tesla-updated { min-width: 0; }
.tesla-connect { flex: 0 0 auto; padding: 4px 7px; border: 1px solid rgba(94, 230, 195, .4); border-radius: 999px; color: #73ebcf; font-size: 9px; text-decoration: none; white-space: nowrap; }
.tesla-connect:hover { background: rgba(94, 230, 195, .12); }
.market-panel { padding: 10px 12px; }
.market-panel .panel-head .eyebrow { font-size: 10px; }
.market-panel .section-caption { margin-top: 2px; font-size: 9px; }
.market-panel .tag { padding: 4px 6px; font-size: 9px; }
.market-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-top: 5px; }
.market-card { min-width: 0; padding: 6px; border: 1px solid rgba(183, 213, 247, .1); border-radius: 8px; background: rgba(4, 15, 28, .32); }
.market-label { display: flex; align-items: center; justify-content: space-between; gap: 3px; min-width: 0; color: #bcd6f0; font-size: 9px; }
.market-label strong { font: 700 10px "Space Mono", monospace; }
.market-card b { display: block; margin-top: 3px; overflow: hidden; color: #eef7ff; font: 700 12px "Space Mono", monospace; letter-spacing: -.06em; white-space: nowrap; }
.market-card svg { display: block; width: 100%; height: 30px; margin-top: 4px; overflow: visible; }
.market-card polyline { fill: none; stroke: #8fa9c5; stroke-width: 2.4; vector-effect: non-scaling-stroke; }
.market-card svg.is-up polyline { stroke: #59ddbd; }
.market-card svg.is-down polyline { stroke: #ff8e94; }
.market-range + .market-range { margin-top: 7px; padding-top: 7px; border-top: 1px solid rgba(143, 169, 197, .14); }
.market-range-title { margin: 0; color: #8fa9c5; font-size: 9px; line-height: 1.2; }
.market-range .market-card { padding: 5px; }
.market-range .market-card b { margin-top: 2px; font-size: 10px; }
.market-range .market-card svg { height: 25px; margin-top: 3px; }
.market-up { color: #59ddbd; font-size: 8px; white-space: nowrap; }
.market-down { color: #ff8e94; font-size: 8px; white-space: nowrap; }
.stock-card { position: relative; }
.stock-card select { width: 78px; min-width: 0; padding: 2px 14px 2px 3px; border: 0; border-radius: 4px; background: rgba(104, 177, 255, .13); color: #cde6ff; font: 8px "Space Mono", monospace; outline: none; }
.stock-card option { background: #102840; color: #f3f7fb; }
.stock-change { display: block; margin-top: -2px; font-size: 8px; }
.market-panel #market-updated { margin: 5px 0 0; font-size: 9px; }
.weather-news { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(183, 213, 247, .16); }
.weather-news .rss-carousel { margin-top: 8px; }
.weather-news .rss-card { flex-basis: min(82%, 430px); max-height: 245px; }
.weather-news .rss-card ol { max-height: 183px; }
.news-tabs { display: flex; gap: 6px; margin: 0 0 10px; }
.news-tab { padding: 5px 9px; border: 1px solid rgba(158, 209, 255, .18); border-radius: 999px; background: transparent; color: #8fa9c5; font-size: 10px; cursor: pointer; }
.news-tab.is-active { border-color: rgba(89, 221, 189, .45); background: rgba(89, 221, 189, .1); color: #7fe8cd; }
.news-feed { display: none; }
.news-feed.is-active { display: block; }
.ai-news-list { margin-top: 8px; padding: 9px 11px; border: 1px solid rgba(158, 209, 255, .14); border-radius: 11px; background: rgba(4, 17, 32, .38); }
.ai-news-list ol { max-height: 202px; margin: 0; padding: 0; list-style: none; overflow-y: auto; }
.ai-news-list li { border-bottom: 1px solid rgba(183, 213, 247, .1); }
.ai-news-list li:last-child { border-bottom: 0; }
.ai-news-list a { display: grid; grid-template-columns: 24px 1fr auto; gap: 7px; align-items: baseline; padding: 7px 0; color: inherit; text-decoration: none; }
.ai-news-list a:hover { color: #9cd1ff; }
.ai-news-list b { color: #5c83ac; font: 10px "Space Mono", monospace; }
.ai-news-list strong { display: block; font-size: 11px; line-height: 1.35; }
.ai-news-list small, .ai-news-list time { color: #8fa9c5; font-size: 9px; }
.ai-news-list time { white-space: nowrap; }

@media (min-width: 900px) and (max-width: 1200px) {
  .market-panel { min-height: 0; }
  .tesla-v11-grid { grid-template-columns: 1.15fr .85fr; }
}