/* ==========================================================================
   侧栏常用工具 · 汇率走势组件
   ========================================================================== */

/* 工具项：外链标识 */
.sb-item .ext-mark {
  margin-left: auto;
  font-size: 10px;
  color: var(--faint);
  opacity: 0;
  transition: opacity .12s;
}
.sb-item:hover .ext-mark { opacity: 1; }

/* ---------- 汇率卡片 ---------- */
.fx-card {
  margin: 10px 5px 0;
  padding: 10px 12px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--secondary);
  transition: border-color .12s;
}

.fx-card:hover { border-color: var(--tertiary); }

.fx-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 2px;
}

.fx-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}

.fx-date {
  margin-left: auto;
  font-size: 10.5px;
  color: var(--faint);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

/* 日期标签：今日 / 昨日 */
.fx-date-tag {
  font-size: 9px;
  padding: 0 4px;
  border-radius: 3px;
  line-height: 1.6;
  color: var(--muted);
  background: var(--hover);
}

.fx-date-tag:empty { display: none; }

/* 今日官方汇率尚未发布时的提示 */
.fx-await {
  margin-top: 4px;
  font-size: 10px;
  color: var(--tertiary);
  line-height: 1.4;
}

/* 数据长期未更新的告警 */
.fx-date-warn {
  margin-top: 4px;
  font-size: 10px;
  color: #e8590c;
  line-height: 1.4;
}

body.dark .fx-date-warn { color: #ffa94d; }

.fx-rate {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: 2px 0 0;
  flex-wrap: wrap;
}

.fx-base {
  font-size: 11.5px;
  color: var(--faint);
}

.fx-num {
  font-size: 19px;
  font-weight: 700;
  color: var(--primary);
  font-family: 'Inter', sans-serif;
  line-height: 1.2;
}

.fx-unit {
  font-size: 11.5px;
  color: var(--faint);
}

/* 涨跌标记 */
.fx-chg {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  font-family: 'Inter', sans-serif;
}

/* 中国习惯：涨=红，跌=绿 */
.fx-chg.up { color: #e03131; background: #fff0f0; }
.fx-chg.down { color: #2f9e44; background: #eaf7ee; }
.fx-chg.flat { color: var(--text2); background: var(--hover); }

body.dark .fx-chg.up { background: rgba(224, 49, 49, .16); color: #ff8787; }
body.dark .fx-chg.down { background: rgba(47, 158, 68, .16); color: #69db7c; }

/* 折线图 */
.fx-spark {
  display: block;
  width: 100%;
  height: 34px;
  margin-top: 6px;
  overflow: visible;
}

.fx-spark .spark-line {
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fx-spark .spark-area {
  stroke: none;
  opacity: .12;
}

.fx-spark .spark-dot {
  stroke: var(--secondary);
  stroke-width: 1.5;
}

.fx-spark .spark-grid {
  stroke: var(--border);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}

.fx-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 10.5px;
  color: var(--faint);
}

.fx-points { margin-left: auto; }

/* 来源行：注明数据出处并提供溯源链接 */
.fx-src {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px dashed var(--border);
  font-size: 10px;
  color: var(--faint);
  line-height: 1.4;
}

.fx-src-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fx-src a {
  margin-left: auto;
  flex-shrink: 0;
  color: var(--tertiary);
  text-decoration: none;
}

.fx-src a:hover { text-decoration: underline; }

.fx-loading {
  font-size: 11.5px;
  color: var(--faint);
  padding: 4px 0;
}

/* ==========================================================================
   侧栏 · 马来西亚公共假期卡片
   ========================================================================== */
.holiday-card {
  margin: 8px 5px 0;
  padding: 10px 12px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--secondary);
  transition: border-color .12s;
}

.holiday-card:hover { border-color: var(--tertiary); }

/* 卡片头：标题 + 倒数/今日徽章 */
.hl-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}

.hl-title {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}

/* 倒数：数字大，单位小 */
.hl-countdown {
  margin-left: auto;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}

.hl-countdown-num {
  font-size: 17px;
  font-weight: 700;
  color: var(--primary);
  font-family: 'Inter', sans-serif;
  line-height: 1.2;
}

.hl-countdown-unit {
  font-size: 10.5px;
  color: var(--faint);
}

/* 今天放假徽章 */
.hl-today-badge {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 600;
  color: #e03131;
  background: #fff0f0;
  padding: 1px 7px;
  border-radius: 3px;
}

body.dark .hl-today-badge { background: rgba(224, 49, 49, .16); color: #ff8787; }

/* 日期行 */
.hl-date {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin: 3px 0 4px;
}

.hl-date-main {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
}

.hl-date-week {
  font-size: 10.5px;
  color: var(--faint);
}

/* 同日多节日提示 */
.hl-multi {
  margin-left: auto;
  font-size: 10px;
  color: var(--tertiary);
  background: var(--hover);
  padding: 1px 6px;
  border-radius: 3px;
}

/* 节日主体 */
.hl-body {
  position: relative;
}

.hl-item {
  padding: 1px 0;
}

/* 节日名：中文为主 */
.hl-item-head {
  display: flex;
  align-items: baseline;
  gap: 5px;
  flex-wrap: wrap;
}

.hl-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
}

/* 全国徽章 */
.hl-badge {
  font-size: 9.5px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 3px;
  line-height: 1.5;
}

.hl-badge-all {
  color: #1971c2;
  background: rgba(25, 113, 194, .1);
}

/* 日期待定 */
.hl-tentative {
  font-size: 9.5px;
  color: #e8590c;
  background: rgba(232, 89, 12, .1);
  padding: 1px 5px;
  border-radius: 3px;
}

/* 马来语原文：小字 */
.hl-origin {
  font-size: 10px;
  color: var(--faint);
  line-height: 1.4;
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 放假州属 */
.hl-states {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-top: 4px;
  font-size: 10.5px;
  line-height: 1.5;
}

.hl-states-label {
  color: var(--faint);
  flex-shrink: 0;
}

.hl-states-val {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 同日多节日：横向滑动 */
.hl-scroll {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}

.hl-scroll::-webkit-scrollbar { display: none; }
.hl-scroll.dragging { cursor: grabbing; scroll-snap-type: none; }

.hl-scroll .hl-item {
  flex: 0 0 100%;
  scroll-snap-align: start;
  min-width: 0;
}

/* 分页圆点 */
.hl-dots {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 5px;
}

.hl-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--border);
  cursor: pointer;
  transition: background .12s, transform .12s;
}

.hl-dot.active {
  background: var(--tertiary);
  transform: scale(1.25);
}

/* 来源行 */
.hl-src {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px dashed var(--border);
  font-size: 10px;
  color: var(--faint);
  line-height: 1.4;
}

.hl-src-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hl-src a {
  margin-left: auto;
  flex-shrink: 0;
  color: var(--tertiary);
  text-decoration: none;
}

.hl-src a:hover { text-decoration: underline; }

.hl-loading {
  font-size: 11.5px;
  color: var(--faint);
  padding: 4px 0;
}

/* ==========================================================================
   侧栏 · 空气质量卡片
   ========================================================================== */
.air-card {
  margin: 8px 5px 0;
  padding: 10px 12px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--secondary);
  transition: border-color .12s;
}

.air-card:hover { border-color: var(--tertiary); }

/* 头部：标题 + 分级徽章 */
.aq-head {
  display: flex;
  align-items: center;
  gap: 6px;
}

.aq-title {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}

/* 天气 + AQI 一行：温度(左) / AQI(右)，两端对齐 */
.aq-wx {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 2px;
}

.aq-wx-temp {
  font-size: 22px;
  font-weight: 700;
  color: var(--primary);
  font-family: 'Inter', sans-serif;
  line-height: 1.15;
}

/* AQI 与温度同行，右侧对齐 */
.aq-wx-aqi {
  font-size: 19px;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  line-height: 1.15;
  white-space: nowrap;
}

/* 细节行：体感 / 天气 / 湿度 */
.aq-wx-sub {
  margin-top: 1px;
  font-size: 11px;
  color: var(--faint);
  line-height: 1.5;
}

/* 城市名独立行 */
.aq-cityname {
  margin-top: 3px;
  font-size: 11px;
  color: var(--muted);
}

/* 降雨概率提示 */
.aq-rain {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  padding: 4px 7px;
  border-radius: 5px;
  background: rgba(25, 113, 194, .08);
  color: #1971c2;
  font-size: 10.5px;
  line-height: 1.45;
}

.aq-rain.high {
  background: rgba(232, 89, 12, .1);
  color: #e8590c;
}

body.dark .aq-rain { background: rgba(25, 113, 194, .16); color: #74c0fc; }
body.dark .aq-rain.high { background: rgba(232, 89, 12, .18); color: #ffa94d; }

.aq-rain-dot {
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

/* 分级徽章：颜色由数据驱动（inline style） */
.aq-level {
  margin-left: auto;
  font-size: 10px;
  font-weight: 500;
  color: #fff;
  padding: 1px 7px;
  border-radius: 3px;
  line-height: 1.6;
}

/* 主体：AQI 大数字 */
.aq-main {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 3px;
}

.aq-num {
  font-size: 24px;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  line-height: 1.1;
}

.aq-unit {
  font-size: 11px;
  color: var(--faint);
}

.aq-city {
  margin-left: auto;
  font-size: 11px;
  color: var(--muted);
}

/* 污染物数值 */
.aq-pollutants {
  display: flex;
  gap: 10px;
  margin-top: 4px;
  font-size: 10px;
  color: var(--faint);
}

.aq-pollutants b {
  font-weight: 600;
  color: var(--muted);
  font-family: 'Inter', sans-serif;
}

/* 健康建议 */
.aq-advice {
  margin-top: 5px;
  font-size: 10.5px;
  color: var(--text2);
  line-height: 1.5;
}

/* 学校提示（官方规定） */
.aq-school {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin-top: 6px;
  padding: 5px 7px;
  border-radius: 5px;
  font-size: 10.5px;
  line-height: 1.45;
}

.aq-school.noOutdoor {
  background: rgba(232, 89, 12, .1);
  color: #e8590c;
}

.aq-school.closed {
  background: rgba(224, 49, 49, .12);
  color: #e03131;
}

body.dark .aq-school.noOutdoor { background: rgba(232, 89, 12, .18); color: #ffa94d; }
body.dark .aq-school.closed { background: rgba(224, 49, 49, .18); color: #ff8787; }

.aq-school-icon {
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  margin-top: 5px;
  border-radius: 50%;
  background: currentColor;
}

/* 全国最差提示 */
.aq-worst {
  margin-top: 5px;
  font-size: 10px;
  color: var(--faint);
  line-height: 1.4;
}

/* 城市切换：4 个城市一行排下，无需滚动 */
.aq-cities {
  display: flex;
  gap: 4px;
  margin-top: 7px;
  padding-top: 6px;
  border-top: 1px dashed var(--border);
  flex-wrap: wrap;
}

.aq-city {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid transparent;
  background: var(--hover);
  color: var(--text2);
  cursor: pointer;
  font-family: inherit;
  line-height: 1.5;
  white-space: nowrap;
  transition: background .12s, color .12s;
}

.aq-city:hover { background: var(--border); }

.aq-city.active {
  background: var(--tertiary);
  color: #fff;
}

.aq-city-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* 来源行 */
.aq-src {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  font-size: 10px;
  color: var(--faint);
  line-height: 1.4;
}

.aq-src-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aq-src a {
  margin-left: auto;
  flex-shrink: 0;
  color: var(--tertiary);
  text-decoration: none;
}

.aq-src a:hover { text-decoration: underline; }

.aq-loading {
  font-size: 11.5px;
  color: var(--faint);
  padding: 4px 0;
}

/* ==========================================================================
   侧栏 · 驻马使领馆紧急联系卡片
   ========================================================================== */
.emb-card {
  margin: 8px 5px 0;
  padding: 10px 12px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--secondary);
  transition: border-color .12s;
}

.emb-card:hover { border-color: var(--tertiary); }

/* 头部 */
.eb-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 5px;
}

.eb-title {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}

.eb-sub {
  margin-left: auto;
  font-size: 9.5px;
  color: var(--faint);
}

/* 短号一行并排（999 / 997） */
.eb-row {
  display: flex;
  gap: 6px;
  margin-bottom: 2px;
}

.eb-row .eb-item {
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 3px 6px;
}

.eb-row .eb-num {
  margin-left: 0;
  font-size: 13px;
}

/* 联系条目 */
.eb-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* display:flex 会覆盖 hidden 属性的默认样式，需显式声明 */
.eb-list[hidden] { display: none; }

.eb-item {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 5px;
  border-radius: 4px;
  text-decoration: none;
  transition: background .12s;
}

.eb-item:hover { background: var(--hover); }

.eb-name {
  font-size: 11px;
  color: var(--text2);
  flex-shrink: 0;
}

.eb-num {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  letter-spacing: .2px;
}

/* 紧急号码标红 */
.eb-item.emergency .eb-num { color: #e03131; }
.eb-item.consular .eb-num { color: #1971c2; }
.eb-item.local .eb-num { color: var(--muted); }

body.dark .eb-item.emergency .eb-num { color: #ff8787; }
body.dark .eb-item.consular .eb-num { color: #74c0fc; }

/* 来源 */
.eb-src {
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px dashed var(--border);
  font-size: 10px;
  color: var(--faint);
  line-height: 1.4;
}

.eb-src a {
  color: var(--faint);
  text-decoration: none;
}

.eb-src a:hover { color: var(--tertiary); text-decoration: underline; }

.eb-loading {
  font-size: 11.5px;
  color: var(--faint);
  padding: 4px 0;
}