:root {
  --outer: #090d13;
  --panel: #111923;
  --panel-2: #151f2b;
  --line: #303a45;
  --line-strong: #46515d;
  --text: #e0e7ef;
  --muted: #8d98a5;
  --status: #e9b84a;
  --gold: #d2a657;
  --red: #ff3f52;
  --blue: #2f91ff;
}

html {
  color-scheme: dark;
}

body {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  background:
    linear-gradient(118deg, rgba(52, 70, 89, 0.72) 0%, rgba(24, 36, 49, 0.2) 36%, transparent 56%),
    linear-gradient(242deg, rgba(35, 46, 59, 0.48) 0%, transparent 40%),
    linear-gradient(180deg, #202d3a 0%, #111a24 34%, #070b10 68%, #010203 100%);
  background-attachment: fixed;
  color: var(--text);
  font-family: "Segoe UI", "Malgun Gothic", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(196, 211, 226, 0.035) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(0deg, rgba(196, 211, 226, 0.025) 0 1px, transparent 1px 80px),
    linear-gradient(112deg, transparent 18%, rgba(138, 160, 184, 0.12) 42%, transparent 64%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.82) 56%, transparent 100%);
}

.shell {
  position: relative;
  z-index: 1;
  width: min(1280px, calc(100% - 64px));
}

.assist-zone,
.prediction-zone,
.flow-zone {
  margin-top: 3px;
}

.top-nav {
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 3;
  display: flex;
  gap: 5px;
  transform: translateY(-50%);
  white-space: nowrap;
}

.top-nav .history-link {
  position: static;
  transform: none;
}

.theme-toggle {
  position: absolute;
  top: 50%;
  left: 176px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 64px;
  height: 29px;
  padding: 0 9px;
  transform: translateY(-50%);
  border: 1px solid var(--line);
  border-radius: 7px;
  color: #aeb8c4;
  background: #181d23;
  font-family: inherit;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

.board-mode-toggle {
  position: absolute;
  top: 50%;
  left: 246px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 66px;
  height: 29px;
  padding: 0 9px;
  transform: translateY(-50%);
  border: 1px solid var(--line);
  border-radius: 7px;
  color: #aeb8c4;
  background: #181d23;
  font-family: inherit;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

.board-mode-toggle:hover,
.board-mode-toggle:focus-visible {
  border-color: rgba(233, 184, 74, 0.68);
  color: var(--text);
  outline: none;
}

.board-mode-icon {
  width: 12px;
  color: var(--status);
  font-size: 13px;
  line-height: 1;
  text-align: center;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  border-color: rgba(233, 184, 74, 0.68);
  color: var(--text);
  outline: none;
}

.theme-icon {
  width: 12px;
  color: var(--status);
  font-size: 12px;
  line-height: 1;
  text-align: center;
}

.brand-mark {
  display: inline-block;
  transform: translateY(-2px);
  border: 1px solid rgba(255, 225, 145, 0.72);
  color: #1d170b;
  background: linear-gradient(180deg, #f8d77d 0%, #dda948 52%, #a87524 100%);
  text-shadow: 0 1px 0 rgba(255, 244, 203, 0.62);
  box-shadow:
    0 3px 0 #76511c,
    0 7px 14px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

html.board-mode,
html.board-mode body {
  height: 100%;
  overflow: hidden;
}

.board-mode .shell {
  width: 100%;
  max-width: none;
  height: 100dvh;
  padding: 4px;
  display: grid;
  grid-template-rows: 42px minmax(68px, 0.8fr) minmax(218px, 2.05fr) minmax(178px, 2.35fr);
  gap: 4px;
}

.board-mode .topbar {
  min-width: 0;
  min-height: 38px;
  padding: 4px 10px;
}

.board-mode .assist-zone,
.board-mode .prediction-zone,
.board-mode .flow-zone {
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
}

.board-mode .zone-label,
.board-mode .flow-toolbar,
.board-mode .footer,
.board-mode .flow-head span {
  display: none;
}

.board-mode .ticker-strip,
.board-mode .prediction-grid,
.board-mode .extra-grid,
.board-mode .flow-card-grid {
  height: 100%;
}

.board-mode .ticker-card,
.board-mode .predict-card,
.board-mode .flow-card {
  min-height: 0;
  height: 100%;
}

.board-mode .prediction-zone {
  display: grid;
  grid-template-rows: minmax(0, 1.72fr) minmax(0, 1fr);
  gap: 4px;
}

.board-mode .extra-grid {
  margin-top: 0;
}

.board-mode .flow-zone,
.board-mode .flow-card-grid {
  overflow: hidden;
}

.board-mode .flow-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.board-mode .flow-bars {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.ticker-head .live-badge,
.predict-card > .live-badge,
.flow-card .live-badge,
.flow-state.live {
  padding: 1px 4px;
  font-size: 8px;
  line-height: 1.15;
}

.ticker-card .live-badge,
.predict-card > .live-badge,
.flow-card .live-badge {
  top: 4px;
  right: 5px;
}

.ticker-card,
.predict-card,
.flow-card {
  background: linear-gradient(145deg, #303944 0%, #1a2027 58%, #11161c 100%);
}

.ticker-card.live-card,
.predict-card.live-card,
.extra-grid .predict-card.live-card,
.flow-card.live-card {
  border-color: rgba(233, 184, 74, 0.5);
  background:
    radial-gradient(circle at 92% 8%, rgba(233, 184, 74, 0.11) 0%, rgba(233, 184, 74, 0.025) 34%, transparent 58%),
    linear-gradient(145deg, #353e48 0%, #20272f 58%, #14191f 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 224, 145, 0.1),
    0 3px 12px rgba(0, 0, 0, 0.12);
}

.predict-compare {
  position: relative;
  max-width: 100%;
  margin: 8px 0 0;
  padding: 9px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.predict-compare::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(47, 145, 255, 0.08) 0%,
    rgba(47, 145, 255, 0.92) 22%,
    rgba(233, 184, 74, 0.78) 50%,
    rgba(47, 145, 255, 0.92) 78%,
    rgba(47, 145, 255, 0.08) 100%
  );
  box-shadow: 0 0 8px rgba(47, 145, 255, 0.2);
}

html[data-theme="light"] {
  color-scheme: light;
  --outer: #f1f3f6;
  --panel: #ffffff;
  --panel-2: #f6f8fa;
  --line: #d5dce4;
  --line-strong: #b8c2cd;
  --text: #17212b;
  --muted: #657282;
  --status: #c9931f;
  --gold: #a87317;
  --red: #e52f43;
  --blue: #147ee5;
}

html[data-theme="light"] body {
  background: linear-gradient(180deg, #ffffff 0%, #edf1f5 48%, #dfe5eb 100%);
  background-attachment: fixed;
  color: var(--text);
}

html[data-theme="light"] body::before {
  display: none;
}

html[data-theme="light"] .brand-title,
html[data-theme="light"] .brand-rest {
  color: #25313d;
}

html[data-theme="light"] .brand-title i {
  color: #949faa;
}

html[data-theme="light"] .brand-mark {
  border-color: rgba(150, 101, 18, 0.54);
  color: #251b08;
  background: linear-gradient(180deg, #f8d77d 0%, #dda948 52%, #ad7925 100%);
  text-shadow: 0 1px 0 rgba(255, 247, 218, 0.7);
  box-shadow:
    0 3px 0 #8b611e,
    0 6px 12px rgba(67, 47, 15, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

html[data-theme="light"] .history-link,
html[data-theme="light"] .theme-toggle,
html[data-theme="light"] .board-mode-toggle,
html[data-theme="light"] .flow-toolbar input,
html[data-theme="light"] .flow-toolbar button {
  border-color: #cbd3dc;
  color: #455362;
  background: #ffffff;
}

html[data-theme="light"] .history-link:hover,
html[data-theme="light"] .history-link:focus-visible,
html[data-theme="light"] .theme-toggle:hover,
html[data-theme="light"] .theme-toggle:focus-visible {
  border-color: #b88920;
  color: #1f2b36;
  background: #f8fafb;
}

html[data-theme="light"].board-mode .board-mode-toggle {
  border-color: rgba(168, 115, 23, 0.44);
  color: #455362;
  background: rgba(255, 255, 255, 0.84);
}

html[data-theme="light"] .runline span {
  border-color: #d7dee6;
  background: #ffffff;
}

html[data-theme="light"] .runline,
html[data-theme="light"] .flow-toolbar label,
html[data-theme="light"] .legend,
html[data-theme="light"] .flow-head span,
html[data-theme="light"] .predict-name small {
  color: #697686;
}

html[data-theme="light"] .runline b,
html[data-theme="light"] .zone-label,
html[data-theme="light"] .flow-toolbar strong {
  color: #354250;
}

html[data-theme="light"] .ticker-card,
html[data-theme="light"] .predict-card,
html[data-theme="light"] .flow-card {
  border-color: #d4dce4;
  background: linear-gradient(145deg, #ffffff 0%, #eef2f5 100%);
}

html[data-theme="light"] .ticker-card.live-card,
html[data-theme="light"] .predict-card.live-card,
html[data-theme="light"] .extra-grid .predict-card.live-card,
html[data-theme="light"] .flow-card.live-card {
  border-color: rgba(185, 132, 19, 0.58);
  background: linear-gradient(145deg, #ffffff 0%, #eef2f5 100%);
  box-shadow: inset 0 1px 0 rgba(185, 132, 19, 0.08);
}

html[data-theme="light"] .ticker-head span,
html[data-theme="light"] .predict-name b,
html[data-theme="light"] .flow-head b {
  color: #455362;
}

html[data-theme="light"] .ticker-card strong,
html[data-theme="light"] .predict-value,
html[data-theme="light"] .main-card .predict-value {
  color: #17212b;
}

html[data-theme="light"] .ticker-head em,
html[data-theme="light"] .flow-state.closed {
  color: #687585;
  background: #edf1f4;
}

html[data-theme="light"] .ticker-head .live-badge,
html[data-theme="light"] .predict-card > .live-badge,
html[data-theme="light"] .flow-state.live {
  color: #2b2109;
  background: #e4b64f;
}

html[data-theme="light"] .predict-compare {
  border: 0;
  background: transparent;
  box-shadow: none;
}

html[data-theme="light"] .predict-compare::before {
  background: linear-gradient(
    90deg,
    rgba(20, 126, 229, 0.06) 0%,
    rgba(20, 126, 229, 0.82) 22%,
    rgba(174, 122, 17, 0.66) 50%,
    rgba(20, 126, 229, 0.82) 78%,
    rgba(20, 126, 229, 0.06) 100%
  );
  box-shadow: 0 0 7px rgba(20, 126, 229, 0.14);
}

html[data-theme="light"] .predict-basis {
  color: #526170;
}

html[data-theme="light"] .predict-meta span,
html[data-theme="light"] .main-card .predict-meta span {
  border-color: #d9e0e7;
  color: #667383;
  background: #f7f9fa;
}

html[data-theme="light"] .flow-card:hover {
  background: #f8fafb;
}

html[data-theme="light"] .flow-bar-row {
  border-color: #dce3ea;
  background: #f7f9fa;
}

html[data-theme="light"] .flow-axis {
  background: #dfe6ed;
}

html[data-theme="light"] .flow-axis .zero {
  background: rgba(50, 62, 74, 0.34);
}

html[data-theme="light"] .flow-other-detail {
  border-color: #d7dee6;
  background: #ffffff;
  box-shadow: none;
}

html[data-theme="light"] .footer {
  border-color: #d5dce4;
  color: #74808e;
}

html[data-theme="light"] .flow-chart-modal {
  background: rgba(26, 34, 42, 0.48);
}

html[data-theme="light"] .flow-chart-dialog,
html[data-theme="light"] .flow-chart-plot {
  border-color: #cbd4dd;
  background: #ffffff;
}

html[data-theme="light"] .flow-chart-close,
html[data-theme="light"] .flow-series-toggle,
html[data-theme="light"] .flow-series-toggle.muted {
  border-color: #cbd4dd;
  color: #263340;
  background: #f4f6f8;
}

html[data-theme="light"] .flow-chart-tooltip {
  border-color: #cbd4dd;
  background: rgba(255, 255, 255, 0.97);
}

html[data-theme="light"] .chart-grid,
html[data-theme="light"] .chart-x-tick {
  stroke: rgba(60, 72, 84, 0.14);
}

html[data-theme="light"] .chart-zero {
  stroke: rgba(48, 58, 69, 0.44);
}

html[data-theme="light"] .chart-last-point {
  stroke: #ffffff;
}

@media (max-width: 640px) {
  .shell {
    width: calc(100% - 14px);
  }
}

@media (max-width: 560px) {
  .top-nav {
    top: 5px;
    left: 0;
    gap: 3px;
    transform: none;
  }

  .top-nav .history-link {
    min-height: 29px;
    padding: 5px 6px;
    font-size: 9px;
  }

  .theme-toggle {
    top: 5px;
    left: 130px;
    transform: none;
  }

  .board-mode-toggle {
    top: 5px;
    left: 200px;
    transform: none;
  }
}

@media (max-width: 900px), (max-height: 620px) {
  html.board-mode,
  html.board-mode body {
    height: auto;
    overflow: auto;
  }

  .board-mode .shell {
    width: calc(100% - 10px);
    height: auto;
    min-height: 100dvh;
    padding: 5px 0;
    display: block;
  }

  .board-mode .assist-zone,
  .board-mode .prediction-zone,
  .board-mode .flow-zone {
    display: block;
    margin-top: 4px;
  }

  .board-mode .ticker-strip,
  .board-mode .prediction-grid,
  .board-mode .extra-grid,
  .board-mode .flow-card-grid {
    height: auto;
  }

  .board-mode .ticker-card,
  .board-mode .predict-card,
  .board-mode .flow-card {
    height: auto;
  }

  .board-mode .ticker-card,
  .board-mode .predict-card.compact {
    min-height: 56px;
  }

  .board-mode .predict-card.main-card {
    min-height: 102px;
  }

  .board-mode .flow-card {
    min-height: 148px;
  }
}