:root {
  color-scheme: light;
  --red: #f32f39;
  --red-dark: #d91f2b;
  --green: #20a542;
  --orange: #ff7a1a;
  --ink: #22252b;
  --muted: #8d9097;
  --line: #e7e7e9;
  --soft: #f5f5f6;
  --rose: #fff0f1;
}

* { box-sizing: border-box; }
html { background: var(--soft); }
body { margin: 0; background: var(--soft); color: var(--ink); font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif; }
button, input { font: inherit; }
main { width: min(1420px, calc(100% - 32px)); min-height: 100vh; margin: auto; }

header {
  height: 70px; display: flex; align-items: center; gap: 28px; padding: 0 22px;
  background: var(--red); color: #fff; box-shadow: 0 1px 0 #d9232d;
}
.brand { display: flex; align-items: center; gap: 11px; margin-right: auto; }
.brand i { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 8px; background: #fff; color: var(--red); font-style: normal; font-size: 20px; font-weight: 900; }
.brand strong { display: block; font-size: 21px; }
.brand small { display: block; color: #ffd9dc; font-size: 12px; line-height: 1.35; }
.clock { font-size: 13px; color: #fff; }
.clock em, footer>span i { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #fff; }
.overview { display: grid; grid-template-columns: 1.15fr repeat(3, 1fr) 1.6fr; margin: 16px 0; background: #fff; border: 1px solid var(--line); }
.overview>div { min-height: 104px; padding: 17px 22px; background: #fff; border-right: 1px solid var(--line); }
.overview>div:last-child { border-right: 0; }
.overview span, .overview small { display: block; color: var(--muted); font-size: 12px; }
.overview b, .today strong { display: block; margin: 7px 0 4px; font-size: 29px; color: var(--ink); }
.today strong { font-size: 40px; color: var(--red); }
.today small { color: var(--red); }
.heat div { height: 5px; margin: 9px 0; border-radius: 4px; background: #ededee; }
.heat div i { display: block; width: 0; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #ff9b42, var(--red)); }

.tabs { height: 53px; display: flex; align-items: center; padding: 0 22px; background: #fff; border-bottom: 1px solid var(--line); }
.tabs .tab { height: 53px; line-height: 53px; padding: 0 18px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); cursor: pointer; font-size: 15px; }
.tabs .tab.chosen { color: var(--red); border-bottom-color: var(--red); }
.tabs span { margin-left: auto; color: var(--muted); font-size: 12px; }
.themes, .ladder { margin: 12px 0; padding: 18px; background: #fff; border: 1px solid var(--line); }
.section-title, .ladder-head { display: flex; justify-content: space-between; align-items: center; }
.section-title small, .ladder-head span { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }
.market-view { margin: 12px 0; padding: 18px; background: #fff; border: 1px solid var(--line); }
.market-cards { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-top: 16px; }
.market-card { padding: 16px; background: #fff6f6; border: 1px solid #f4d7d7; border-radius: 6px; }
.market-card span, .market-card small { display: block; color: var(--muted); font-size: 12px; }
.market-card b { display: block; margin: 8px 0 3px; color: var(--red); font-size: 26px; }
.market-row { position: relative; min-height: 72px; padding-right: 150px; }
.market-row button { position: absolute; right: 14px; bottom: 14px; border: 0; background: transparent; color: var(--red); cursor: pointer; font-size: 12px; }
.market-note { margin-top: 16px; color: var(--muted); font-size: 12px; }
.section-title button, .ladder-head button { padding: 7px 13px; border: 1px solid #dadadd; border-radius: 5px; background: #fff; color: #666; cursor: pointer; }
.ladder-actions { display: flex; gap: 8px; }
.ladder-head .export-button { border-color: var(--red); background: var(--red); color: #fff; }
.ladder-head .export-button:hover { background: var(--red-dark); }
.ladder-head button:disabled { cursor: wait; opacity: .55; }
.export-status { min-height: 22px; padding: 8px 0 0; color: var(--red); font-size: 12px; text-align: right; }
.chosen { border-color: var(--red)!important; background: var(--rose)!important; color: var(--red)!important; }
.theme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 15px; }
.theme-card { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid #f4dfe1; border-radius: 5px; background: var(--rose); color: var(--ink); text-align: left; cursor: pointer; }
.theme-card i { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: var(--red); color: #fff; font-style: normal; }
.theme-card:nth-child(2n) i { background: var(--orange); }
.theme-card b, .theme-card small { display: block; }
.theme-card small { margin-top: 4px; color: #a6a6aa; font-size: 11px; }

.ladder-head { padding-bottom: 15px; border-bottom: 1px solid var(--line); }
h2 { margin: 0; font-size: 19px; font-weight: 500; }
.board-row { display: grid; grid-template-columns: 78px 1fr; padding: 0; border-bottom: 1px solid #fff; background: #fafafa; }
.board-label { display: grid; place-content: center; min-height: 112px; text-align: center; border-right: 1px solid #fff; color: var(--ink); }
.board-label strong { display: inline; font-size: 23px; }
.board-label span { display: inline; font-weight: 700; }
.board-label small { display: block; margin-top: 5px; color: var(--muted); }
.stock-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: #fff; }
.stock-card { position: relative; min-height: 112px; padding: 11px 14px; border: 0; background: #f8f8f8; color: var(--ink); text-align: left; cursor: pointer; }
.stock-card:hover { background: #fff0f1; box-shadow: inset 0 0 0 1px #ffbec2; }
.stock-card .time { display: block; color: #8c8c90; font-size: 10px; text-align: right; }
.stock-card>b { display: block; margin-top: 5px; font-size: 16px; font-weight: 500; }
.stock-card small { color: #a1a1a5; }
.stock-card em { display: block; width: max-content; margin: 7px 0; color: var(--red); font-size: 11px; font-style: normal; }
.stock-card .money { color: #a2a2a6; font-size: 11px; }
.stock-card .money b { float: right; color: var(--red); }
.reason-tip { position: absolute; left: 12px; top: calc(100% - 8px); z-index: 20; width: min(330px, calc(100vw - 36px)); padding: 12px 13px; border: 1px solid #ffb2b7; border-radius: 6px; background: #fff; color: var(--ink); box-shadow: 0 10px 28px #70101822; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(6px); transition: .16s ease; }
.stock-card:hover .reason-tip { opacity: 1; visibility: visible; transform: translateY(0); }
.reason-tip b { display: block; margin-bottom: 7px; color: var(--red); font-size: 13px; }
.reason-tip ol { margin: 0; padding-left: 18px; }
.reason-tip li { margin: 4px 0; color: #565960; font-size: 12px; line-height: 1.45; white-space: normal; }
.empty { padding: 55px; color: var(--muted); text-align: center; }

footer { display: flex; align-items: center; gap: 24px; padding: 22px 5px 34px; color: var(--muted); font-size: 12px; }
footer>span i { background: var(--green); }
footer nav { display: flex; gap: 16px; margin-left: auto; }
footer a { color: #6f7177; text-decoration: none; }
.site-views { padding-left: 18px; border-left: 1px solid #d9d9dc; }
.site-views b { color: var(--red); font-size: 14px; }

.side-ad { display: none; position: absolute; top: 86px; width: 160px; height: 600px; }
.side-ad.left { right: calc(50% + 730px); }
.side-ad.right { left: calc(50% + 730px); }
.side-ad>div { width: 160px; height: 600px; overflow: hidden; background: #fff; }

dialog { width: min(430px, calc(100% - 30px)); padding: 25px; border: 1px solid #ddd; border-radius: 8px; background: #fff; color: var(--ink); }
dialog::backdrop { background: #0008; }
.close { position: absolute; top: 8px; right: 12px; border: 0; background: none; color: #999; font-size: 26px; cursor: pointer; }
dialog h2 { margin: 10px 0; }
dialog h2 em { color: var(--red); font-size: 15px; }
dialog>strong { display: block; margin: 18px 0; color: var(--red); font-size: 35px; }
dl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
dl div { padding: 10px; background: #f7f7f7; }
dt { color: var(--muted); font-size: 11px; }
dd { margin: 5px 0 0; font-weight: 700; }

@media (min-width: 1780px) { .side-ad { display: block; } }
@media (max-width: 900px) {
  main { width: 100%; }
  header { gap: 10px; padding: 0 14px; }
  .clock { display: none; }
  .overview { grid-template-columns: 1fr 1fr; margin: 10px; }
  .overview .heat { grid-column: 1/-1; }
  .overview>div:nth-child(2n) { border-right: 0; }
  .theme-grid { grid-template-columns: 1fr 1fr; }
  .stock-grid { grid-template-columns: repeat(2, 1fr); }
  .themes, .ladder { margin: 10px; }
  footer { padding: 20px 14px; align-items: flex-start; flex-wrap: wrap; }
  footer nav { margin-left: 0; }
}
@media (max-width: 520px) {
  .brand small { font-size: 10px; }
  .overview>div { padding: 13px; }
  .market-cards { grid-template-columns: 1fr 1fr; }
  .theme-grid { grid-template-columns: 1fr; }
  .board-row { grid-template-columns: 54px 1fr; }
  .stock-grid { grid-template-columns: 1fr; }
  .board-label strong { font-size: 21px; }
  .reason-tip { left: 8px; right: 8px; width: auto; }
}