/* ============================================================
   fxddd 财经日历 —— 视觉系统
   时间轴 + 卡片布局 · 旗帜 · 涨跌色 · 等宽数字
   ============================================================ */

:root {
  --bg:        #0a0e14;
  --bg-card:   #11161f;
  --bg-card2:  #151c27;
  --bg-hover:  #1a2230;
  --bg-chip:   #141a24;
  --line:      #1e2634;
  --line-soft: #18202c;

  --fg:        #e8edf4;
  --fg-mid:    #a4b0c0;
  --fg-dim:    #5f6b7c;
  --fg-faint:  #3d4756;

  --accent:    #3d8bfd;
  --accent-d:  #1f4f9e;
  --gold:      #f0b429;

  --up:        #ff5b56;   /* 利多 → 中文语境红色 */
  --dn:        #2ec27e;   /* 利空 → 绿色 */
  --up-bg:     rgba(255,91,86,.09);
  --dn-bg:     rgba(46,194,126,.09);
  --gold-bg:   rgba(240,180,41,.10);

  --r-card:    12px;
  --r-sm:      7px;
}

html.light {
  --bg:        #f4f6f9;
  --bg-card:   #ffffff;
  --bg-card2:  #f9fafc;
  --bg-hover:  #f0f3f7;
  --bg-chip:   #ffffff;
  --line:      #e2e7ee;
  --line-soft: #eceff4;

  --fg:        #171c24;
  --fg-mid:    #4c5766;
  --fg-dim:    #8a94a2;
  --fg-faint:  #b4bcc7;

  --accent:    #0b62d6;
  --accent-d:  #d3e2f9;
  --gold:      #b8810a;

  --up:        #d93025;
  --dn:        #0d8a55;
  --up-bg:     rgba(217,48,37,.07);
  --dn-bg:     rgba(13,138,85,.07);
  --gold-bg:   rgba(184,129,10,.08);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior-y: none;
}

body { padding-bottom: env(safe-area-inset-bottom); }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

/* 数值等宽 */
.ev-v b, .tl-time span, .mg-v, .wd-l b, .t-big {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ============ 顶栏 ============ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--line-soft);
  padding-top: env(safe-area-inset-top);
}
.tb-inner {
  max-width: 860px;
  margin: 0 auto;
  height: 52px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .3px;
  background: linear-gradient(120deg, var(--accent), #7c5cff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
}
.tb-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.search-form input {
  width: 118px;
  height: 34px;
  padding: 0 12px;
  border-radius: 17px;
  border: 1px solid var(--line);
  background: var(--bg-card);
  color: var(--fg);
  font-size: 13px;
  outline: none;
  transition: width .2s ease, border-color .2s;
}
.search-form input:focus { width: 170px; border-color: var(--accent); }
.search-form input::placeholder { color: var(--fg-dim); }
.icon-btn {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg-card);
  color: var(--fg-mid);
  font-size: 15px;
  cursor: pointer;
  display: grid; place-items: center;
  transition: transform .15s, color .15s;
}
.icon-btn:active { transform: scale(.92); color: var(--accent); }

/* ============ 页面容器 ============ */
main, .page {
  max-width: 860px;
  margin: 0 auto;
  padding: 14px 16px 60px;
}

/* ============ 日期条（周滑条）============ */
.ds-week {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 10px 16px 4px;
}
.ds-arrow {
  flex: 0 0 36px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-card);
  color: var(--fg-mid);
  font-size: 18px;
  display: grid; place-items: center;
  cursor: pointer;
}
.ds-arrow:active { background: var(--bg-hover); }
.ds-scroll {
  flex: 1 1 auto;
  display: flex;
  gap: 5px;
  overflow-x: auto;
  scrollbar-width: none;
}
.ds-scroll::-webkit-scrollbar { display: none; }
.ds {
  flex: 1 1 0;
  min-width: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5px 0 6px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  transition: background .15s;
}
.ds .ds-w {
  font-size: 9.5px;
  color: var(--fg-dim);
  font-weight: 500;
}
.ds b {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
}
.ds:active { background: var(--bg-hover); }
.ds.on {
  background: var(--accent);
  border-color: var(--accent);
}
.ds.on .ds-w { color: rgba(255,255,255,.75); }
.ds.on b { color: #fff; }
.ds.off { opacity: .28; }

/* ============ 头部 ============ */
.day-h {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 2px 12px;
}
.day-h h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.3px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.h1-week {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-mid);
  background: var(--bg-chip);
  border: 1px solid var(--line);
  padding: 2px 8px;
  border-radius: 6px;
}
.h1-week.wk-today {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.h1-sub {
  margin: 7px 0 0;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.pill {
  font-size: 11px;
  color: var(--fg-mid);
  background: var(--bg-chip);
  border: 1px solid var(--line);
  padding: 2px 9px;
  border-radius: 10px;
  white-space: nowrap;
}
.pill-hi {
  color: var(--gold);
  border-color: color-mix(in srgb, var(--gold) 35%, transparent);
  background: var(--gold-bg);
}
.today-tag {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  padding: 3px 10px;
  border-radius: 9px;
  margin-top: 4px;
}
.today-tag.sm { font-size: 10px; padding: 1px 7px; }

/* ============ chips 过滤 ============ */
.chips {
  display: flex;
  gap: 6px;
  padding: 0 2px 14px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.chips::-webkit-scrollbar { display: none; }
.ch {
  flex: 0 0 auto;
  padding: 6px 13px;
  border-radius: 16px;
  background: var(--bg-chip);
  border: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--fg-mid);
  white-space: nowrap;
  transition: all .15s;
}
.ch em { font-style: normal; font-size: 10px; opacity: .55; margin-left: 4px; }
.ch:active { transform: scale(.96); }
.ch.on {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  color: var(--accent);
  font-weight: 600;
}

/* ============ 通用区块 ============ */
.sec { margin: 18px 0 6px; }
.sec-h {
  font-size: 13px;
  font-weight: 700;
  color: var(--fg-mid);
  margin: 0 0 9px;
  padding-left: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: .3px;
}
.sec-ico { font-size: 14px; }

/* ============ 假期 / 大事件 ============ */
.hol {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 12px 14px;
  margin-bottom: 7px;
}
.hol.hi-ev {
  border-color: color-mix(in srgb, var(--gold) 30%, transparent);
  background: linear-gradient(135deg, var(--gold-bg), var(--bg-card));
}
.hol-flag { font-size: 21px; line-height: 1.2; flex: 0 0 auto; }
.hol-t b {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
}
.hol-t p {
  margin: 3px 0 0;
  font-size: 13.5px;
  color: var(--fg-mid);
  line-height: 1.5;
}

/* ============ 核心时间轴 ============ */
.tl { position: relative; }

.tl-row {
  display: grid;
  grid-template-columns: 46px 14px 1fr;
  gap: 0 4px;
  margin-bottom: 10px;
}

/* 时间 */
.tl-time {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  padding-top: 13px;
  text-align: right;
}
.tl-time span {
  font-size: 12px;
  font-weight: 700;
  color: var(--fg-mid);
  letter-spacing: .3px;
}
.tl-time .now-t {
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
}
.tl-time.wd { padding-top: 14px; }
.tl-time.wd .t-big {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--fg);
}
.tl-time.wd .t-sm {
  font-size: 10px;
  color: var(--fg-dim);
  margin-top: 1px;
}

/* 时间轴线 + 节点 */
.tl-line {
  position: relative;
  margin-top: 20px;
}
.tl-line::before {          /* 竖线 */
  content: "";
  position: absolute;
  left: 6px;
  top: -20px;
  bottom: -38px;
  width: 2px;
  background: var(--line-soft);
}
.tl-row:first-child .tl-line::before { top: 2px; }
.tl-row:last-child .tl-line::before { bottom: 12px; }
.tl-line::after {           /* 节点圆点 */
  content: "";
  position: absolute;
  left: 2.5px;
  top: -16px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--fg-faint);
  border: 2px solid var(--bg);
}
.tl-card.hi ~ * .tl-line::after { background: var(--gold); }
.tl-row .tl-card.hi + * { }
.tl-row:has(.tl-line.now) .tl-card {
  border-top: 2px solid var(--accent);
}
.tl-line.now::after {
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}
.tl-row:has(.tl-card.hi) .tl-line::after {
  background: var(--gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent);
}

/* 卡片 */
.tl-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 0 14px 10px;
  min-width: 0;
  transition: border-color .15s, transform .1s;
}
.tl-card:active { transform: scale(.995); }
.tl-card.hi {
  border-color: color-mix(in srgb, var(--gold) 35%, transparent);
  background: linear-gradient(160deg, var(--gold-bg) 0%, var(--bg-card) 55%);
}

/* 卡片头：旗帜 + 国家 + 星 */
.card-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 0 8px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 4px;
}
.card-flag { font-size: 16px; line-height: 1; }
.card-country {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-mid);
  letter-spacing: .2px;
}
.card-star { color: var(--gold); font-size: 11px; }
.card-star.inl { margin-right: 4px; }

/* 事件行 */
.ev { padding: 7px 0; }
.ev + .ev { border-top: 1px dashed var(--line-soft); }
.ev.sub { padding-left: 14px; border-left: 2px solid color-mix(in srgb, var(--line) 60%, transparent); }

.ev-t {
  font-size: 14px;
  line-height: 1.45;
  color: var(--fg);
  word-break: break-word;
}
.ev-t.strong { font-weight: 650; }
.ev.sub .ev-t { font-size: 13px; color: var(--fg-mid); font-weight: 400; }

/* 数值行 */
.ev-v {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.v-item {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}
.v-item i {
  font-style: normal;
  font-size: 9.5px;
  color: var(--fg-dim);
  letter-spacing: .5px;
}
.v-item b {
  font-size: 14px;
  font-weight: 700;
}
.v-item b.dim { color: var(--fg-mid); font-weight: 600; font-size: 13px; }
.v-item b.act { color: var(--fg); }
.v-item b.act:empty { display: none; }
/* 公布值仍是占位时（r.actual 为空但渲染了 —）不额外处理，文本本身是 — */
.v-item b.up {
  color: var(--up);
  background: var(--up-bg);
  padding: 1px 7px;
  border-radius: 5px;
}
.v-item b.dn {
  color: var(--dn);
  background: var(--dn-bg);
  padding: 1px 7px;
  border-radius: 5px;
}
.ev.sub .v-item b { font-size: 12.5px; }

/* ============ 周视图 ============ */
.wday { margin-bottom: 26px; }
.wday-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px;
  margin-bottom: 10px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.wday.on { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.wday.on .wd-l b { color: var(--accent); }
.wd-l { display: flex; align-items: baseline; gap: 7px; }
.wd-l b { font-size: 15px; font-weight: 800; }
.wd-l span { font-size: 12px; color: var(--fg-dim); }
.wd-r { display: flex; align-items: center; gap: 8px; }
.wd-r i { font-style: normal; font-size: 11px; color: var(--fg-dim); }

/* ============ 月视图 ============ */
.mcal {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--bg-card);
}
.mc-head, .mc-week { display: grid; grid-template-columns: repeat(7, 1fr); }
.mc-head {
  background: var(--bg-card2);
  border-bottom: 1px solid var(--line);
}
.mc-head span {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-dim);
  padding: 9px 0;
}
.mc-head .we { color: var(--fg-faint); }
.mc {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  position: relative;
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.mc:nth-child(7n) { border-right: none; }
.mc-week:last-child .mc { border-bottom: none; }
.mc b { font-size: 14.5px; font-weight: 650; }
.mc i { font-style: normal; font-size: 9px; color: var(--fg-dim); }
.mc.zero { opacity: .3; }
.mc.zero b { font-weight: 400; }
.mc.out { opacity: .15; }
.mc.today {
  background: color-mix(in srgb, var(--accent) 13%, transparent);
}
.mc.today b { color: var(--accent); }
.mc u {
  position: absolute;
  bottom: 7px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--gold);
  text-decoration: none;
}
.mnote {
  text-align: center;
  font-size: 11px;
  color: var(--fg-dim);
  margin: 12px 0 0;
}
.mnote .lvd {
  display: inline-block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--gold);
  text-decoration: none;
  vertical-align: 2px;
}

/* ============ 宏观网格 ============ */
.mcountry { margin: 20px 0; }
.mc-h {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 9px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mc-flag { font-size: 18px; }
.mgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(102px, 1fr));
  gap: 7px;
}
.mg {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 10px 11px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mg-n { font-size: 10.5px; color: var(--fg-dim); }
.mg-v {
  font-size: 16px;
  font-weight: 750;
  color: var(--fg);
}
.mg-p { font-size: 9.5px; color: var(--fg-faint); }

/* ============ 搜索 / 指标页头 ============ */
.phead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 2px 14px;
  flex-wrap: wrap;
}
.phead h1 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -.3px; }
.ph-nav, .wk-nav { display: flex; gap: 7px; }
.wk-a {
  font-size: 12px;
  color: var(--fg-mid);
  background: var(--bg-chip);
  border: 1px solid var(--line);
  padding: 5px 11px;
  border-radius: var(--r-sm);
  white-space: nowrap;
}
.wk-a:active { background: var(--bg-hover); }

/* ============ 空态 / 页脚 ============ */
.empty {
  text-align: center;
  color: var(--fg-dim);
  font-size: 13px;
  padding: 48px 0;
}
.empty.sm { padding: 18px 0; font-size: 12px; }
.foot {
  max-width: 860px;
  margin: 0 auto;
  padding: 20px 16px calc(30px + env(safe-area-inset-bottom));
  text-align: center;
  font-size: 10.5px;
  color: var(--fg-faint);
}

/* ============ 404 ============ */
.e404 {
  text-align: center;
  padding: 70px 20px;
}
.e404 h1 { font-size: 20px; font-weight: 700; margin: 0 0 10px; }
.e404 p { color: var(--fg-mid); font-size: 13px; margin: 0 0 24px; }

/* ============ 响应式 ============ */
@media (max-width: 400px) {
  .tl-row { grid-template-columns: 42px 12px 1fr; }
  .tl-time span { font-size: 11px; }
  .v-item b { font-size: 13px; }
  .ev-v { gap: 11px; }
  .ch { padding: 5px 11px; font-size: 12px; }
  .day-h h1 { font-size: 20px; }
}
@media (min-width: 700px) {
  .ds { flex: 0 0 52px; }
  .tl-card { padding: 0 18px 12px; }
  .mgrid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}