/* site-wide Apple.com light chrome v2026-09-24c search-fix */
@import url("./tokens.css");

body {
  font-family: var(--font) !important;
  background: var(--bg, #f5f5f7) !important;
  color: var(--text, #1d1d1f) !important;
}

/* Frosted side rail */
aside.rail {
  background: var(--frost, rgba(255,255,255,.72)) !important;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  box-shadow: none !important;
  border-right: 1px solid var(--border, #d2d2d7) !important;
}
.brand { color: var(--text) !important; letter-spacing: -0.02em; }
.brand small { color: var(--muted) !important; letter-spacing: 0.12em; }

nav button {
  color: var(--text) !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: var(--radius-pill, 980px) !important;
  font-weight: 500 !important;
}
nav button:hover {
  background: rgba(0,0,0,0.04) !important;
  color: var(--text) !important;
}
nav button.on {
  background: var(--accent-soft, rgba(0,113,227,.10)) !important;
  color: var(--accent, #0071e3) !important;
  box-shadow: none !important;
}

/* White Apple cards */
.hero, .card, .ai-card, .recap, .tablewrap, .dlg, .menu,
.frame-well, .dept-well, .night-hist, .search-row, .search-wrap,
.wetab-search, .gate, .step, .progress-wrap, .note,
.mod-idle, .lazy-idle, .eight-idle, .dash-card, .kpi-rule-block {
  background: var(--card, #fff) !important;
  box-shadow: var(--shadow, 0 2px 12px rgba(0,0,0,.06)) !important;
  border: 1px solid var(--border, #d2d2d7) !important;
  border-radius: var(--radius, 18px) !important;
  color: var(--text, #1d1d1f);
}

.label, .section-label {
  background: transparent !important;
  color: var(--muted) !important;
  box-shadow: none !important;
  border: 0 !important;
  letter-spacing: 0.06em;
  font-weight: 600 !important;
}

.hero h1, h1.sec, .sec {
  color: var(--text) !important;
  letter-spacing: -0.03em;
  font-weight: 700 !important;
}
.hero h1 .accent { color: var(--accent) !important; }
.hero p, .lead, .night-frame-hint { color: var(--muted) !important; }

/* Pills / chips / mod buttons — Apple capsule */
.mods button, .wtabs button, .icon-add, .menu button, .dlg button,
.rpanel .kpi, .kpis .kpi, button.kpi, .pill, .tick .pill {
  background: #fff !important;
  color: var(--text) !important;
  box-shadow: none !important;
  border: 1px solid var(--border, #d2d2d7) !important;
  border-radius: var(--radius-pill, 980px) !important;
  font-weight: 500 !important;
}
.mods button.on, .wtabs button.on, .kpis .kpi.on, button.kpi.on,
.pill.on, .tick .pill.on {
  background: var(--accent, #0071e3) !important;
  border-color: var(--accent, #0071e3) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.kpis .kpi b, button.kpi b { color: var(--text) !important; font-size: 24px; font-weight: 700; letter-spacing: -0.03em; }
.kpis .kpi.on b, button.kpi.on b { color: #fff !important; }
.kpis .kpi span, button.kpi span { color: var(--muted) !important; }
.kpis .kpi.on span, button.kpi.on span { color: rgba(255,255,255,.85) !important; }

/* Dash KPI cards (隔夜统计) — white, blue accent numbers */
#night .night-stats .kpi,
#night .kpi-rule-block .kpi,
.desk-dash .kpi,
.kpi-grid .kpi {
  background: #fff !important;
  border: 1px solid var(--border, #d2d2d7) !important;
  box-shadow: var(--shadow, 0 2px 12px rgba(0,0,0,.06)) !important;
  border-radius: var(--radius, 18px) !important;
  text-align: left !important;
  cursor: default;
  color: var(--text) !important;
}
#night .night-stats .kpi .k-label { color: var(--muted) !important; font-weight: 600; }
#night .night-stats .kpi .k-value {
  color: var(--text) !important;
  font-size: clamp(18px, 1.6vw, 24px) !important;
  font-weight: 700;
  letter-spacing: -0.03em;
  white-space: nowrap;
  line-height: 1.15;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
#night .night-stats .kpi-rule-block .kpi .k-value {
  font-size: clamp(16px, 1.35vw, 20px) !important;
}
#night .night-stats .kpi-rule-block .kpi {
  min-width: 0 !important;
  overflow: hidden !important;
  padding: 8px 10px !important;
}
#night .night-stats .kpi-rule-block .kpi .k-label {
  font-size: 11px !important;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
#night .night-stats .kpi-rule-block .kpi-grid {
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)) !important;
  gap: 6px !important;
}
#night .night-stats .kpi .k-sub { color: var(--muted) !important; }
#night .night-stats .kpi.up .k-value { color: var(--up) !important; }
#night .night-stats .kpi.down .k-value { color: var(--down) !important; }
#night .night-stats .kpi-rule-hd { color: var(--accent) !important; }
#night .night-stats .dash-card .cnt,
.dash-card .cnt {
  background: var(--track, #e8e8ed) !important;
  color: var(--accent) !important;
  border: 0 !important;
  border-radius: var(--radius-pill) !important;
}

/* Tags on light */
.tag {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  border: 0 !important;
  border-radius: var(--radius-pill) !important;
}
.tag.up, #night .night-stats .tag.hit {
  background: rgba(255,59,48,.10) !important;
  color: var(--up) !important;
}
.tag.down, #night .night-stats .tag.miss {
  background: rgba(36,138,61,.10) !important;
  color: var(--down) !important;
}
.tag.info, #night .night-stats .tag.rule-v1 {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
}
#night .night-stats .tag.rule-v2, #night .night-stats .tag.okish {
  background: rgba(0,113,227,.12) !important;
  color: var(--accent) !important;
}
#night .night-stats .verdict-legend b.hit { color: var(--up) !important; }
#night .night-stats .verdict-legend b.miss { color: var(--down) !important; }
#night .night-stats .verdict-legend b.okish { color: var(--accent) !important; }
#night .night-stats tr.night-stats-divider td {
  background: rgba(0,113,227,.06) !important;
  color: var(--accent) !important;
  border-bottom-color: rgba(0,113,227,.25) !important;
}
#night .night-stats .funnel { color: var(--accent) !important; }

.icon-btn, .icon-add {
  background: #fff !important;
  box-shadow: var(--shadow) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  color: var(--text) !important;
}
.icon-btn .mark, .icon-add .plus {
  background: var(--track, #e8e8ed) !important;
  box-shadow: none !important;
  border: 0;
  color: var(--accent);
}

input, select, textarea {
  background: #fff !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-pill) !important;
  box-shadow: none !important;
}
input::placeholder { color: var(--muted); }

/* Tables: white + light zebra */
tbody tr:nth-child(even) td,
table tr:nth-child(even) td,
.tablewrap tr:nth-child(even) td,
.dash-card tr:nth-child(even) td {
  background: #fafafc !important;
}
th { color: var(--muted) !important; font-weight: 600 !important; background: #fff !important; }
td { color: var(--text); border-bottom: 1px solid #e8e8ed !important; }
.dash-card th, table.dash-table th { background: #fff !important; }

.searchbox, .search-bar, #search-form, .qbox {
  background: #fff !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
  border-radius: var(--radius-pill) !important;
}

#corner-btn, #corner-branch .branch, button#set-pass, button#set-login,
button#set-logout, button#set-close, button#wetab-cancel, button#wetab-ok {
  background: #fff !important;
  color: var(--text) !important;
  box-shadow: none !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-pill) !important;
}

/* Primary CTA — Apple blue pill */
.cta, .start-btn, .go-btn, #night-start, #lazy-start, #eight-start, #auction-start,
button.go, #start-btn, #brief-refresh, .refresh {
  background: var(--accent, #0071e3) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: var(--radius-pill) !important;
  font-weight: 600 !important;
}
.cta:hover, .start-btn:hover { filter: brightness(1.05); }

/* Bars / fills use accent + A-share */
.hbar .fill, .hbar-fill, .bar > i {
  background: linear-gradient(90deg, #0077ed, #0071e3) !important;
}
.hbar .fill.up, .hbar-fill.up { background: linear-gradient(90deg, #ff6961, var(--up)) !important; }
.hbar .fill.down, .hbar-fill.down { background: linear-gradient(90deg, #30d158, var(--down)) !important; }

/* desk-dash pages inherit light page */
body.desk-dash, .desk-dash {
  background: transparent !important;
  color: var(--text) !important;
}

/* === Launcher bg skins: keep feature; force LIGHT Apple chrome surfaces === */
body[data-bg] {
  --card: #ffffff;
  --raised: #ffffff;
  --track: #e8e8ed;
  --border: #d2d2d7;
  --border-strong: #d2d2d7;
  --light: #ffffff;
  --dark: rgba(0,0,0,0.06);
  --text: #1d1d1f;
  --muted: #6e6e73;
  --dash-bg: #f5f5f7;
  --dash-card: #ffffff;
  --dash-line: #d2d2d7;
  --dash-text: #1d1d1f;
  --dash-muted: #6e6e73;
  --dash-gold: #0071e3;
  --dash-up: #ff3b30;
  --dash-down: #248a3d;
  --dash-info: #0071e3;
  --dash-track: #e8e8ed;
  color: var(--text);
}

/* Default apple = Apple.com light */
body[data-bg="apple"] {
  --bg: #f5f5f7;
  --accent: #0071e3;
  background-color: #f5f5f7 !important;
  background-image: none !important;
}

/* Light-named skins: keep gentle page tints, chrome stays white cards */
body[data-bg="sand"], body[data-bg="fog"], body[data-bg="paper"],
body[data-bg="linen"], body[data-bg="mist"], body[data-bg="marble"],
body[data-bg="cloud"], body[data-bg="snow"], body[data-bg="dots"],
body[data-bg="grid"] {
  --accent: #0071e3;
  /* allow original soft page tint from inline CSS; cards forced white above */
}

/* Dark-named skins: remap to light Apple cousins (no black pages) */
body[data-bg="ink"], body[data-bg="night"], body[data-bg="wine"],
body[data-bg="pine"], body[data-bg="slate"], body[data-bg="star"],
body[data-bg="moon"], body[data-bg="ember"], body[data-bg="aurora"],
body[data-bg="ocean"] {
  --bg: #f5f5f7;
  --accent: #0071e3;
  background-color: #f5f5f7 !important;
  background-image: none !important;
}
body[data-bg="night"], body[data-bg="ocean"], body[data-bg="aurora"] {
  --accent: #0071e3;
  background-image: linear-gradient(180deg, #eef3f8, #f5f5f7) !important;
}
body[data-bg="pine"], body[data-bg="moss"] {
  background-image: linear-gradient(180deg, #eef6f0, #f5f5f7) !important;
}
body[data-bg="wine"], body[data-bg="ember"] {
  background-image: linear-gradient(180deg, #f8eef0, #f5f5f7) !important;
}

@media (max-width: 720px) {
  aside.rail { font-size: 15px; }
  .mods button, .wtabs button { font-size: 15px !important; padding: 10px 16px !important; }
  #night .night-stats .kpi .k-value { font-size: clamp(15px, 4.2vw, 18px) !important; }
  #night .night-stats .kpi-rule-block .kpi .k-value { font-size: clamp(14px, 3.8vw, 17px) !important; }
  .hero h1, h1.sec { font-size: 28px !important; }
}

/* Search bar — Apple light pill */
.websearch {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #fff !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.06) !important;
  border: 1px solid var(--border, #d2d2d7) !important;
  border-radius: 980px !important;
  padding: 6px 6px 6px 10px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}
.websearch .engine {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  color: var(--text, #1d1d1f) !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  border-radius: 980px !important;
  padding: 10px 12px !important;
}
.websearch input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  color: var(--text, #1d1d1f) !important;
  border-radius: 980px !important;
}
.websearch .go-search {
  background: #0071e3 !important;
  color: #fff !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 980px !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  padding: 10px 16px !important;
  font-weight: 600 !important;
}
.websearch .go-search:hover { filter: brightness(1.05); background: #0071e3 !important; color: #fff !important; }
@media (max-width: 420px) {
  .websearch { gap: 4px !important; padding: 4px 4px 4px 8px !important; }
  .websearch .engine { padding: 8px 6px !important; font-size: 13px !important; max-width: 68px !important; }
  .websearch .go-search { padding: 8px 12px !important; font-size: 13px !important; }
  .websearch input { padding: 8px 4px !important; font-size: 14px !important; }
}

/* Overnight table full bleed */
#night .night-stats,
#night .night-stats .dash-card,
#night .night-stats .kpi-rule-wrap {
  max-width: none !important;
  width: 100% !important;
}
#main, main { max-width: none; }
@media (min-width: 1100px) {
  #night .night-stats .kpi-rule-block .kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}