:root {
  color-scheme: dark;
  --primary: #6e9fc4;
  --primary-strong: #557fa3;
  --hit: #5f91bd;
  --hit-alt: #c97786;
  --route0: #6c9d82;
  --route1: #6793a8;
  --route2: #9b89af;
  --chart-1: #6e9fc4;
  --chart-2: #c97786;
  --chart-3: #d4a45d;
  --chart-4: #75a58d;
  --chart-5: #9b89af;
  --chart-6: #6f9ba4;
  --primary-soft: color-mix(in srgb, var(--primary) 14%, transparent);
  --selection: color-mix(in srgb, var(--primary) 24%, var(--panel));
  --selection-text: var(--text);
  --route0-soft: color-mix(in srgb, var(--route0) 17%, var(--panel));
  --route1-soft: color-mix(in srgb, var(--route1) 16%, var(--panel));
  --route2-soft: color-mix(in srgb, var(--route2) 14%, var(--panel));
  --issue-width: 92px;
  --number-width: 68px;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #10151c;
  --bg-soft: #151c24;
  --sidebar: #131a22;
  --panel: #1a222c;
  --panel-2: #202a35;
  --input: #151d26;
  --line: #354352;
  --table-line: #3b4a59;
  --text: #e7edf3;
  --muted: #9aa7b4;
  --warning: #d4a75f;
  --danger: #d77986;
  --summary: #3d3a2d;
  --summary-text: #eee4b9;
  --row-alt: rgba(255,255,255,.018);
  --shadow: 0 12px 34px rgba(0,0,0,.2);
  --chart-grid: rgba(91,108,126,.34);
  --panel-highlight: rgba(255,255,255,.022);
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f1f4f6;
  --bg-soft: #f7f9fa;
  --sidebar: #f6f8f9;
  --panel: #ffffff;
  --panel-2: #f7f9fb;
  --input: #ffffff;
  --line: #d3dbe2;
  --table-line: #cbd4dc;
  --text: #26323d;
  --muted: #75818c;
  --warning: #ad7a2f;
  --danger: #bc5e6c;
  --summary: #fff9df;
  --summary-text: #625a30;
  --row-alt: #f9fbfc;
  --shadow: 0 5px 18px rgba(47,65,82,.075);
  --chart-grid: rgba(133,149,164,.22);
  --panel-highlight: rgba(255,255,255,.72);
}

html[data-palette="mist"] {
  --primary: #6e9fc4;
  --primary-strong: #557fa3;
  --hit: #5f91bd;
  --hit-alt: #c97786;
  --route0: #6c9d82;
  --route1: #6793a8;
  --route2: #9b89af;
  --chart-1: #6e9fc4;
  --chart-2: #c97786;
  --chart-3: #d4a45d;
  --chart-4: #75a58d;
  --chart-5: #9b89af;
  --chart-6: #6f9ba4;
}

html[data-palette="mint"] {
  --primary: #72a792;
  --primary-strong: #588a76;
  --hit: #639889;
  --hit-alt: #c67f8f;
  --route0: #72a792;
  --route1: #7196a7;
  --route2: #9b8eaf;
  --chart-1: #72a792;
  --chart-2: #c67f8f;
  --chart-3: #d2a76b;
  --chart-4: #7196a7;
  --chart-5: #9b8eaf;
  --chart-6: #82a6a0;
}

html[data-palette="indigo"] {
  --primary: #788bb7;
  --primary-strong: #6074a0;
  --hit: #7086b2;
  --hit-alt: #c87a89;
  --route0: #729b86;
  --route1: #6f8fa7;
  --route2: #9487b3;
  --chart-1: #788bb7;
  --chart-2: #c87a89;
  --chart-3: #d0a35e;
  --chart-4: #729b86;
  --chart-5: #9487b3;
  --chart-6: #6f9aa2;
}

html[data-palette="lavender"] {
  --primary: #9789b6;
  --primary-strong: #7d6fa0;
  --hit: #8e83b1;
  --hit-alt: #c77891;
  --route0: #7a9b87;
  --route1: #748fa6;
  --route2: #a184b0;
  --chart-1: #9789b6;
  --chart-2: #c77891;
  --chart-3: #d0a269;
  --chart-4: #7a9b87;
  --chart-5: #748fa6;
  --chart-6: #aa8fa0;
}

html[data-palette="rose"] {
  --primary: #b78491;
  --primary-strong: #9b6b78;
  --hit: #aa7d91;
  --hit-alt: #d17c78;
  --route0: #789c87;
  --route1: #718fa5;
  --route2: #9887ac;
  --chart-1: #b78491;
  --chart-2: #d17c78;
  --chart-3: #d3a060;
  --chart-4: #789c87;
  --chart-5: #9887ac;
  --chart-6: #7e9ba3;
}

html[data-palette="apricot"] {
  --primary: #bd9366;
  --primary-strong: #9f784f;
  --hit: #ad8966;
  --hit-alt: #c87982;
  --route0: #779b83;
  --route1: #7291a3;
  --route2: #9788aa;
  --chart-1: #bd9366;
  --chart-2: #c87982;
  --chart-3: #d2a354;
  --chart-4: #779b83;
  --chart-5: #9788aa;
  --chart-6: #7c9a9f;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: "Microsoft YaHei", "Segoe UI", system-ui, sans-serif; }
body { display: flex; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; border: 1px solid var(--line); border-radius: 5px; padding: 7px 13px; background: var(--primary); color: #fff; font-weight: 600; }
button:hover { filter: brightness(1.05); }
button:disabled { opacity: .62; cursor: wait; }
button.ghost { background: var(--panel-2); border-color: var(--line); color: var(--text); }
button.primary { background: var(--primary-strong); }
button.danger { background: color-mix(in srgb, var(--danger) 12%, var(--panel)); border-color: color-mix(in srgb, var(--danger) 55%, var(--line)); color: var(--danger); }
button.wide { width: 100%; margin-top: 18px; padding: 11px; }
input, select, textarea { width: 100%; background: var(--input); border: 1px solid var(--line); color: var(--text); border-radius: 4px; padding: 7px 9px; outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
textarea { resize: vertical; }

.sidebar { position: fixed; inset: 0 auto 0 0; width: 252px; background: var(--sidebar); border-right: 1px solid var(--line); display: flex; flex-direction: column; z-index: 10; }
.brand { display: flex; gap: 10px; align-items: center; padding: 14px 14px 12px; border-bottom: 1px solid var(--line); background: var(--panel-2); }
.brand-mark { width: 37px; height: 37px; border-radius: 5px; display: grid; place-items: center; font-weight: 900; background: var(--primary-strong); color: #fff; }
.brand strong { display: block; font-size: 15px; }
.brand small { display: block; color: var(--muted); margin-top: 2px; font-size: 11px; }
.tree-nav { overflow-y: auto; padding: 7px 5px 14px; scrollbar-width: thin; }
.nav-divider { color: var(--muted); font-size: 11px; padding: 10px 9px 5px; border-bottom: 1px solid color-mix(in srgb, var(--line) 65%, transparent); margin-bottom: 3px; }
.nav-item, .tree-folder, .tree-leaf { width: 100%; text-align: left; background: transparent; color: var(--text); border: 0; border-radius: 1px; font-weight: 400; white-space: nowrap; }
.nav-item { padding: 7px 9px; display: flex; align-items: center; gap: 7px; }
.nav-item:hover, .tree-folder:hover, .tree-leaf:hover { background: var(--primary-soft); filter: none; }
.nav-item.active, .tree-leaf.active { background: var(--selection); color: var(--selection-text); }
.nav-icon { color: var(--primary-strong); width: 16px; text-align: center; }
.tree-group { margin: 1px 0; }
.tree-folder { padding: 6px 8px; display: flex; align-items: center; gap: 5px; font-size: 13px; }
.twisty { width: 13px; font-size: 11px; transition: transform .15s; }
.folder-icon { color: #4f8bb0; font-size: 11px; }
.tree-group:not(.open) .twisty { transform: rotate(-90deg); }
.tree-group:not(.open) .tree-children { display: none; }
.tree-children { position: relative; }
.tree-children::before { content: ""; position: absolute; left: 16px; top: 0; bottom: 0; border-left: 1px dotted var(--line); }
.tree-leaf { padding: 5px 8px 5px 26px; font-size: 12px; display: flex; align-items: center; gap: 5px; }
.leaf-dot { width: 14px; height: 14px; border: 1px solid currentColor; border-radius: 50%; display: inline-grid; place-items: center; font-size: 9px; line-height: 1; background: var(--sidebar); }
.tree-leaf.active .leaf-dot { background: transparent; }
.sidebar-note { margin: auto 8px 9px; color: var(--muted); font-size: 11px; line-height: 1.55; padding: 9px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 5px; }

.main { margin-left: 252px; width: calc(100% - 252px); min-height: 100vh; padding: 0 18px 30px; }
.topbar { min-height: 72px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(12px); z-index: 6; border-bottom: 1px solid var(--line); }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 3px; font-size: 21px; }
h2 { font-size: 16px; margin-bottom: 4px; }
h3 { font-size: 13px; margin: 17px 0 9px; color: var(--text); }
.topbar p, .panel-head p, .analysis-title-wrap p { color: var(--muted); margin-bottom: 0; font-size: 12px; }
.top-actions { display: flex; align-items: center; gap: 12px; }
.theme-toggle { background: var(--panel); color: var(--text); padding: 7px 10px; display: inline-flex; align-items: center; gap: 6px; }
.status { color: var(--muted); display: flex; align-items: center; gap: 7px; font-size: 12px; }
.status span:first-child { width: 8px; height: 8px; border-radius: 50%; background: var(--warning); box-shadow: 0 0 8px currentColor; }
.status.online span:first-child { background: var(--primary); }
.status.offline span:first-child { background: var(--danger); }

.page { display: none; padding-top: 16px; }
.page.active { display: block; }
.notice { border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--line)); background: var(--primary-soft); color: var(--text); border-radius: 5px; padding: 9px 12px; margin-bottom: 13px; font-size: 12px; line-height: 1.55; }
.notice.warning { border-color: color-mix(in srgb, var(--warning) 45%, var(--line)); background: color-mix(in srgb, var(--warning) 10%, var(--panel)); }
.cards { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 11px; margin-bottom: 11px; }
.cards.compact { margin-top: 11px; }
.metric-card, .panel, .analysis-toolbar { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow); }
.metric-card { padding: 14px; min-height: 108px; display: flex; flex-direction: column; }
.metric-card span, .metric-card small { color: var(--muted); }
.metric-card strong { font-size: 24px; margin: 9px 0 auto; letter-spacing: .3px; }
.metric-card strong.number-display { letter-spacing: 4px; color: var(--primary); }
.metric-card small { font-size: 11px; }
.panel { padding: 13px; margin-bottom: 11px; min-width: 0; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.grid { display: grid; gap: 11px; }
.two-col { grid-template-columns: repeat(2, minmax(0,1fr)); }
.generator-grid { grid-template-columns: minmax(520px, 1.25fr) minmax(350px, .75fr); }
.chart { height: 280px; width: 100%; }
.chart.large { height: 350px; }

.analysis-toolbar { padding: 10px 12px; display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 11px; }
.analysis-title-wrap { display: flex; align-items: center; gap: 9px; min-width: 265px; }
.analysis-title-wrap h2 { margin: 0 0 2px; }
.analysis-folder { color: #4f8bb0; font-size: 18px; }
.filter-strip { display: flex; align-items: end; gap: 10px; }
.filter-strip.compact { flex-wrap: wrap; justify-content: flex-end; }
.filter-strip.wrap { flex-wrap: wrap; }
.filter-strip label { min-width: 132px; }

.table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 3px; }
.table-wrap.tall { max-height: calc(100vh - 185px); }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th, td { padding: 8px 9px; text-align: left; border-bottom: 1px solid var(--table-line); white-space: nowrap; }
th { color: var(--text); background: var(--panel-2); position: sticky; top: 0; z-index: 1; font-weight: 600; }
tbody tr:hover { background: var(--primary-soft); }
.ball { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 5px; border-radius: 50%; background: color-mix(in srgb, var(--primary) 16%, var(--panel)); color: var(--primary); border: 1px solid color-mix(in srgb, var(--primary) 42%, var(--line)); margin-right: 3px; font-weight: 800; }
.tag { display: inline-block; border: 1px solid var(--line); border-radius: 99px; padding: 2px 6px; color: var(--muted); font-size: 10px; }

.matrix-panel { padding: 9px; }
.matrix-wrap { max-height: 590px; }
.matrix-table { min-width: 1110px; table-layout: fixed; font-size: 11px; }
.matrix-table th, .matrix-table td { padding: 3px 4px; height: 25px; text-align: center; border: 1px solid var(--table-line); }
.matrix-table th { position: sticky; top: 0; z-index: 3; background: var(--panel-2); }
.matrix-table thead tr:first-child th { top: 0; }
.matrix-table thead tr:nth-child(2) th { top: 25px; }
.matrix-table .issue-col { width: 78px; }
.matrix-table .number-col { width: 62px; color: var(--danger); font-weight: 700; }
.matrix-table .digit-col { width: 31px; }
.matrix-table .group-col { width: 57px; }
.matrix-table .route-col { width: 38px; }
.matrix-cell-hit { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--hit); color: #fff; font-weight: 800; box-shadow: inset 0 -1px 0 rgba(0,0,0,.18); }
.matrix-cell-hit.repeat { background: var(--hit-alt); }
.matrix-cell-omit { color: var(--muted); }
.matrix-group-active { background: var(--selection); color: var(--selection-text); font-weight: 700; }
.matrix-route-0 { background: color-mix(in srgb, var(--route0) 17%, var(--panel)); color: var(--route0); font-weight: 700; }
.matrix-route-1 { background: color-mix(in srgb, var(--route1) 16%, var(--panel)); color: var(--route1); font-weight: 700; }
.matrix-route-2 { font-weight: 700; }
.matrix-table tfoot th, .matrix-table tfoot td { position: static; background: var(--summary); color: var(--summary-text); font-weight: 600; }
.matrix-legend { display: flex; gap: 13px; color: var(--muted); font-size: 11px; }
.matrix-legend span { display: flex; align-items: center; gap: 5px; }
.matrix-legend i { width: 13px; height: 13px; display: inline-block; }
.legend-hit { border-radius: 50%; background: var(--hit); }
.legend-omit { border: 1px solid var(--table-line); background: var(--panel-2); }

.inline-controls, .button-row, .check-row { display: flex; align-items: center; gap: 8px; }
.inline-controls input { width: 200px; }
.inline-controls select { width: 82px; }
label { display: block; color: var(--text); font-size: 11px; }
label input, label select, label textarea { margin-top: 4px; }
.form-grid { display: grid; gap: 9px; }
.form-grid.three { grid-template-columns: repeat(3, minmax(0,1fr)); }
.form-grid.four { grid-template-columns: repeat(4, minmax(0,1fr)); }
.span-two { grid-column: span 2; }
.position-inputs { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 8px; }
.position-inputs label.inactive-position { opacity: .42; }
.position-inputs label.inactive-position input { pointer-events: none; }
.check-row { flex-wrap: wrap; align-items: flex-start; }
.check-row label { display: flex; align-items: center; gap: 6px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel-2); }
.check-row input { width: auto; margin: 0; }
.results-panel { align-self: start; position: sticky; top: 85px; }
.candidate-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; max-height: 650px; overflow: auto; padding-right: 2px; }
.candidate-item { border: 1px solid var(--line); background: var(--panel-2); border-radius: 4px; padding: 9px; display: grid; grid-template-columns: 30px 1fr; gap: 8px; align-items: center; }
.rank { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 4px; background: var(--primary-soft); color: var(--primary); font-size: 11px; }
.candidate-item strong { letter-spacing: 2px; color: var(--primary); font-size: 17px; }
.candidate-item small { color: var(--muted); display: block; margin-top: 3px; font-size: 10px; }
.empty-state { min-height: 240px; display: grid; place-items: center; color: var(--muted); text-align: center; }
.upload-zone { min-height: 135px; border: 1px dashed var(--line); border-radius: 5px; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; color: var(--muted); background: var(--panel-2); margin-bottom: 11px; }
.upload-zone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.upload-zone strong { color: var(--text); }
.block-label { margin-bottom: 10px; }
.result-box { margin-top: 11px; border: 1px solid var(--line); border-radius: 4px; padding: 9px; color: var(--muted); font-size: 12px; min-height: 39px; }
pre { white-space: pre-wrap; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 4px; padding: 11px; color: var(--text); overflow: auto; }
.muted { color: var(--muted); line-height: 1.6; font-size: 12px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 17px 0; }
.toast { position: fixed; right: 20px; bottom: 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 5px; padding: 10px 13px; box-shadow: var(--shadow); opacity: 0; transform: translateY(8px); pointer-events: none; transition: .2s; z-index: 20; }
.toast.show { opacity: 1; transform: none; }
.positive { color: var(--primary); }
.negative { color: var(--danger); }

@media (max-width: 1120px) {
  .cards { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .two-col, .generator-grid { grid-template-columns: 1fr; }
  .results-panel { position: static; }
  .form-grid.four { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .analysis-toolbar { align-items: stretch; flex-direction: column; }
  .filter-strip.compact { justify-content: flex-start; }
}

@media (max-width: 760px) {
  body { display: block; }
  .sidebar { position: static; width: 100%; max-height: 52vh; }
  .tree-nav { max-height: 38vh; }
  .brand { padding: 9px 12px; }
  .sidebar-note { display: none; }
  .main { margin-left: 0; width: 100%; padding: 0 9px 22px; }
  .topbar { min-height: 64px; }
  .status { display: none; }
  .theme-toggle span:last-child { display: none; }
  .cards, .form-grid.three, .form-grid.four, .position-inputs { grid-template-columns: 1fr; }
  .span-two { grid-column: auto; }
  .candidate-list { grid-template-columns: 1fr; }
  .filter-strip { align-items: stretch; flex-direction: column; }
  .inline-controls { flex-wrap: wrap; }
  .inline-controls input { width: 100%; }
  .analysis-title-wrap { min-width: 0; }
}

/* ===== V4 adaptive layout and soft appearance ===== */
html { scrollbar-color: color-mix(in srgb, var(--primary) 45%, var(--line)) transparent; }
body { overflow-x: hidden; }
.main { min-width: 0; overflow-x: clip; }
.page, .grid, .panel, .analysis-toolbar, .metric-card { min-width: 0; max-width: 100%; }
.panel, .analysis-toolbar, .metric-card {
  background: linear-gradient(145deg, var(--panel-highlight), transparent 34%), var(--panel);
  border-color: color-mix(in srgb, var(--line) 86%, transparent);
}
button, input, select, textarea { transition: border-color .16s, box-shadow .16s, background-color .16s, color .16s, transform .16s; }
button:hover { filter: none; transform: translateY(-1px); box-shadow: 0 5px 14px color-mix(in srgb, var(--primary) 12%, transparent); }
button:active { transform: translateY(0); }

.top-actions { min-width: 0; flex-wrap: wrap; justify-content: flex-end; }
.palette-control {
  height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--muted);
}
.palette-control select { width: 76px; margin: 0; padding: 3px 22px 3px 5px; border: 0; background: transparent; box-shadow: none; }
.palette-dot { width: 12px; height: 12px; flex: 0 0 12px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
.theme-toggle { min-height: 34px; }

.chart { width: 100%; max-width: 100%; min-width: 0; height: clamp(250px, 27vw, 330px); overflow: hidden; }
.chart.large { height: clamp(300px, 32vw, 390px); }

.table-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable both-edges;
  -webkit-overflow-scrolling: touch;
}
.table-wrap table { max-width: none; }
tbody tr:nth-child(even) { background: var(--row-alt); }
tbody tr:hover { background: color-mix(in srgb, var(--primary) 9%, var(--panel)); }
th { box-shadow: inset 0 -1px 0 var(--table-line); }

.matrix-panel { overflow: hidden; }
.matrix-panel-head { align-items: flex-start; flex-wrap: wrap; }
.matrix-head-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex-wrap: wrap; }
.matrix-density-control { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--muted); }
.matrix-density-control select { width: 94px; margin: 0; padding: 5px 7px; }
.compact-button { padding: 6px 9px; white-space: nowrap; }
.matrix-wrap {
  width: 100%;
  max-width: 100%;
  height: clamp(390px, 60vh, 680px);
  max-height: none;
  contain: layout paint;
  container-type: inline-size;
  background: var(--panel);
  isolation: isolate;
}
.matrix-table {
  width: max-content;
  min-width: 100%;
  max-width: none;
  table-layout: fixed;
  font-size: 11px;
  border-collapse: separate;
  border-spacing: 0;
}
.matrix-table col.matrix-col-issue { width: var(--issue-width); }
.matrix-table col.matrix-col-number { width: var(--number-width); }
.matrix-table col.matrix-col-digit { width: 34px; }
.matrix-table col.matrix-col-group { width: 62px; }
.matrix-table col.matrix-col-route { width: 46px; }
.matrix-table th, .matrix-table td {
  min-width: 0;
  padding: 3px 4px;
  height: 27px;
  overflow: hidden;
  text-overflow: ellipsis;
  border-right: 1px solid var(--table-line);
  border-bottom: 1px solid var(--table-line);
  border-top: 0;
  border-left: 0;
}
.matrix-table thead th { background: color-mix(in srgb, var(--panel-2) 94%, var(--primary) 6%); }
.matrix-table thead tr:first-child th { height: 29px; }
.matrix-table thead tr:nth-child(2) th { top: 29px; }
.matrix-table tbody td:nth-child(1),
.matrix-table thead tr:nth-child(2) th:nth-child(1) {
  position: sticky;
  left: 0;
  z-index: 4;
  background: var(--panel);
  box-shadow: 1px 0 0 var(--table-line);
}
.matrix-table tbody td:nth-child(2),
.matrix-table thead tr:nth-child(2) th:nth-child(2) {
  position: sticky;
  left: var(--issue-width);
  z-index: 4;
  background: var(--panel);
  box-shadow: 1px 0 0 var(--table-line), 5px 0 10px rgba(0,0,0,.035);
}
.matrix-table thead tr:nth-child(2) th:nth-child(1),
.matrix-table thead tr:nth-child(2) th:nth-child(2) { background: var(--panel-2); z-index: 6; }
.matrix-table tbody tr:nth-child(even) td:nth-child(1),
.matrix-table tbody tr:nth-child(even) td:nth-child(2) { background: color-mix(in srgb, var(--row-alt) 88%, var(--panel)); }
.matrix-table tbody tr:hover td:nth-child(1),
.matrix-table tbody tr:hover td:nth-child(2) { background: color-mix(in srgb, var(--primary) 9%, var(--panel)); }
.matrix-table .matrix-issue { display: block; max-width: calc(var(--issue-width) - 9px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.matrix-cell-hit {
  width: 20px;
  height: 20px;
  background: var(--hit);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.12), 0 2px 5px color-mix(in srgb, var(--hit) 20%, transparent);
}
.matrix-cell-hit.repeat { background: var(--hit-alt); }
.matrix-group-active { background: color-mix(in srgb, var(--primary) 24%, var(--panel)); color: var(--text); }
.matrix-route-0 { background: var(--route0-soft); color: color-mix(in srgb, var(--route0) 88%, var(--text)); }
.matrix-route-1 { background: var(--route1-soft); color: color-mix(in srgb, var(--route1) 88%, var(--text)); }
.matrix-route-2 { background: var(--route2-soft); color: color-mix(in srgb, var(--route2) 88%, var(--text)); font-weight: 700; }
.matrix-table tfoot th, .matrix-table tfoot td { background: var(--summary); }

.matrix-wrap[data-density="comfortable"] .matrix-table { font-size: 12px; }
.matrix-wrap[data-density="comfortable"] .matrix-table col.matrix-col-digit { width: 39px; }
.matrix-wrap[data-density="comfortable"] .matrix-table col.matrix-col-group { width: 68px; }
.matrix-wrap[data-density="comfortable"] .matrix-table col.matrix-col-route { width: 50px; }
.matrix-wrap[data-density="comfortable"] .matrix-table th,
.matrix-wrap[data-density="comfortable"] .matrix-table td { height: 30px; padding: 4px 6px; }
.matrix-wrap[data-density="comfortable"] .matrix-cell-hit { width: 22px; height: 22px; }

.matrix-wrap[data-density="compact"] { --issue-width: 86px; --number-width: 64px; }
.matrix-wrap[data-density="compact"] .matrix-table { font-size: 10.5px; }
.matrix-wrap[data-density="compact"] .matrix-table col.matrix-col-digit { width: 31px; }
.matrix-wrap[data-density="compact"] .matrix-table col.matrix-col-group { width: 56px; }
.matrix-wrap[data-density="compact"] .matrix-table col.matrix-col-route { width: 40px; }
.matrix-wrap[data-density="compact"] .matrix-table th,
.matrix-wrap[data-density="compact"] .matrix-table td { height: 25px; padding: 2px 3px; }
.matrix-wrap[data-density="compact"] .matrix-table thead tr:first-child th { height: 27px; }
.matrix-wrap[data-density="compact"] .matrix-table thead tr:nth-child(2) th { top: 27px; }
.matrix-wrap[data-density="compact"] .matrix-cell-hit { width: 19px; height: 19px; }

.matrix-wrap[data-density="ultra"] { --issue-width: 76px; --number-width: 57px; }
.matrix-wrap[data-density="ultra"] .matrix-table { font-size: 9.5px; }
.matrix-wrap[data-density="ultra"] .matrix-table col.matrix-col-digit { width: 27px; }
.matrix-wrap[data-density="ultra"] .matrix-table col.matrix-col-group { width: 48px; }
.matrix-wrap[data-density="ultra"] .matrix-table col.matrix-col-route { width: 34px; }
.matrix-wrap[data-density="ultra"] .matrix-table th,
.matrix-wrap[data-density="ultra"] .matrix-table td { height: 23px; padding: 1px 2px; }
.matrix-wrap[data-density="ultra"] .matrix-table thead tr:first-child th { height: 25px; }
.matrix-wrap[data-density="ultra"] .matrix-table thead tr:nth-child(2) th { top: 25px; }
.matrix-wrap[data-density="ultra"] .matrix-cell-hit { width: 17px; height: 17px; font-size: 9px; }

.matrix-panel:fullscreen {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 16px;
  border: 0;
  border-radius: 0;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}
.matrix-panel:fullscreen .matrix-wrap { flex: 1; height: auto; min-height: 0; }
.matrix-panel:fullscreen .panel-head { flex: 0 0 auto; }

@container (max-width: 1040px) {
  .matrix-legend { display: none; }
}

@media (max-width: 1280px) {
  .main { padding-left: 12px; padding-right: 12px; }
  .matrix-head-actions { width: 100%; justify-content: flex-start; }
}

@media (max-width: 920px) {
  .topbar { align-items: flex-start; padding: 10px 0; gap: 8px; }
  .top-actions { gap: 7px; }
  .palette-control select { width: 68px; }
  .chart { height: 280px; }
  .chart.large { height: 330px; }
}

@media (max-width: 760px) {
  .main { overflow-x: hidden; }
  .topbar { position: relative; flex-wrap: wrap; }
  .top-actions { width: 100%; justify-content: flex-start; }
  .palette-control { flex: 1 1 120px; }
  .palette-control select { width: 100%; }
  .theme-toggle { flex: 0 0 auto; }
  .matrix-panel { padding: 7px; }
  .matrix-wrap { height: min(64vh, 540px); }
  .matrix-density-control { flex: 1 1 140px; }
  .matrix-density-control select { width: 100%; }
  .matrix-head-actions { align-items: stretch; }
  .matrix-legend { display: none; }
}

/* ===== V5 secure real-time data ===== */
.admin-link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
  text-decoration: none;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.admin-link-button:hover { border-color: color-mix(in srgb, var(--primary) 48%, var(--line)); color: var(--primary); }
.sync-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 15px;
  margin-bottom: 15px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: linear-gradient(90deg, var(--primary-soft), transparent 45%), var(--panel);
  min-width: 0;
}
.sync-strip.sync-error { background: color-mix(in srgb, var(--danger) 7%, var(--panel)); border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); }
.sync-strip-main { display: flex; align-items: center; gap: 11px; min-width: 0; }
.sync-strip-main > div { display: grid; gap: 4px; min-width: 0; }
.sync-strip-main strong { overflow-wrap: anywhere; }
.sync-strip-main small { color: var(--muted); line-height: 1.5; overflow-wrap: anywhere; }
.sync-dot { width: 11px; height: 11px; flex: 0 0 11px; border-radius: 50%; background: var(--muted); box-shadow: 0 0 0 5px color-mix(in srgb, var(--muted) 12%, transparent); }
.sync-success .sync-dot { background: var(--primary); box-shadow: 0 0 0 5px var(--primary-soft); }
.sync-error .sync-dot { background: var(--danger); box-shadow: 0 0 0 5px color-mix(in srgb, var(--danger) 12%, transparent); }
.sync-dot.running { animation: syncPulse 1.15s ease-in-out infinite; }
@keyframes syncPulse { 50% { transform: scale(1.3); opacity: .55; } }
.sync-strip-side { display: flex; align-items: center; justify-content: flex-end; gap: 12px; color: var(--muted); white-space: nowrap; }
.sync-strip-side a { color: var(--primary); text-decoration: none; font-weight: 700; }
.remote-data-panel { margin-bottom: 15px; }
.remote-status-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.remote-status-grid > div { display: grid; gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel-2); min-width: 0; }
.remote-status-grid span { color: var(--muted); font-size: 11px; }
.remote-status-grid strong { overflow-wrap: anywhere; }
.remote-error { margin-top: 11px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--danger) 38%, var(--line)); border-radius: 6px; color: var(--danger); background: color-mix(in srgb, var(--danger) 7%, var(--panel)); overflow-wrap: anywhere; }
@media (max-width: 920px) {
  .remote-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sync-strip { align-items: flex-start; flex-direction: column; }
  .sync-strip-side { width: 100%; justify-content: space-between; }
}
@media (max-width: 620px) {
  .admin-link-button span:last-child { display: none; }
  .remote-status-grid { grid-template-columns: 1fr; }
  .sync-strip-side { align-items: flex-start; flex-direction: column; }
}
.hidden { display: none !important; }

/* V6 professional indicator matrix */
:root {
  --matrix-line-blue: color-mix(in srgb, var(--hit) 88%, #1476c9 12%);
  --matrix-line-red: color-mix(in srgb, var(--hit-alt) 88%, #c70000 12%);
  --matrix-blue-soft: color-mix(in srgb, var(--hit) 8%, var(--panel));
  --matrix-cream-soft: color-mix(in srgb, #e4bb65 9%, var(--panel));
  --matrix-active-block: color-mix(in srgb, #008e72 82%, var(--primary));
}
.matrix-stage {
  position: relative;
  width: max-content;
  min-width: 100%;
  min-height: 100%;
}
.matrix-table { position: relative; z-index: 1; }
.matrix-lines {
  position: absolute;
  inset: 0 auto auto 0;
  display: block;
  overflow: visible;
  pointer-events: none;
  z-index: 2;
}
.matrix-table tbody td { position: relative; }
.matrix-table tbody td > span { position: relative; z-index: 4; }
.matrix-table col.matrix-col-small { width: 38px; }
.matrix-table col.matrix-col-ratio { width: 43px; }
.matrix-table col.matrix-col-metric { width: 47px; }
.matrix-table col.matrix-col-group { width: 61px; }
.matrix-table .matrix-tone-blue { background-color: var(--matrix-blue-soft); }
.matrix-table .matrix-tone-cream { background-color: var(--matrix-cream-soft); }
.matrix-table thead .matrix-tone-blue { background: color-mix(in srgb, var(--hit) 10%, var(--panel-2)); }
.matrix-table thead .matrix-tone-cream { background: color-mix(in srgb, #d9ab4d 12%, var(--panel-2)); }
.matrix-section-head { font-weight: 700; letter-spacing: .2px; }
.matrix-cell-hit.red-hit { background: var(--matrix-line-red); }
.matrix-category-hit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  min-height: 19px;
  padding: 1px 4px;
  border-radius: 2px;
  background: var(--matrix-active-block);
  color: #fff;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.14);
}
.matrix-active.matrix-route-0 .matrix-category-hit { background: var(--route0); }
.matrix-active.matrix-route-1 .matrix-category-hit { background: var(--route1); }
.matrix-active.matrix-route-2 .matrix-category-hit { background: var(--route0); }
.matrix-table tbody tr:last-child td {
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--primary) 65%, transparent);
}
.matrix-table tfoot th:first-child {
  position: sticky;
  left: 0;
  z-index: 5;
}
.matrix-table tfoot th { white-space: nowrap; }
.matrix-wrap[data-density="compact"] .matrix-category-hit { min-height: 17px; padding: 0 3px; }
.matrix-wrap[data-density="ultra"] .matrix-category-hit { min-width: 18px; min-height: 15px; padding: 0 2px; font-size: 9px; }
.matrix-wrap[data-density="comfortable"] .matrix-table col.matrix-col-small { width: 44px; }
.matrix-wrap[data-density="comfortable"] .matrix-table col.matrix-col-ratio { width: 49px; }
.matrix-wrap[data-density="comfortable"] .matrix-table col.matrix-col-metric { width: 54px; }
.matrix-wrap[data-density="compact"] .matrix-table col.matrix-col-small { width: 35px; }
.matrix-wrap[data-density="compact"] .matrix-table col.matrix-col-ratio { width: 39px; }
.matrix-wrap[data-density="compact"] .matrix-table col.matrix-col-metric { width: 43px; }
.matrix-wrap[data-density="ultra"] .matrix-table col.matrix-col-small { width: 31px; }
.matrix-wrap[data-density="ultra"] .matrix-table col.matrix-col-ratio { width: 35px; }
.matrix-wrap[data-density="ultra"] .matrix-table col.matrix-col-metric { width: 39px; }
.matrix-table thead tr:first-child th { z-index: 8; }
.matrix-table thead tr:first-child th:first-child {
  position: sticky;
  left: 0;
  z-index: 10;
  background: var(--panel-2);
  box-shadow: 1px 0 0 var(--table-line), 5px 0 10px rgba(0,0,0,.04);
}

/* V7: multi-source selector and line switch */
.source-control { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--muted); white-space: nowrap; }
.source-control span { font-size: 12px; font-weight: 700; }
.source-control select { width: auto; min-width: 120px; max-width: 220px; margin: 0; padding: 6px 28px 6px 9px; border: 0; background-color: transparent; box-shadow: none; }
.matrix-lines { pointer-events: none; }
@media (max-width: 980px) {
  .top-actions { flex-wrap: wrap; justify-content: flex-end; }
  .source-control { order: -1; }
}
@media (max-width: 760px) {
  .source-control { width: 100%; justify-content: space-between; }
  .source-control select { flex: 1; max-width: none; }
}

/* ===== V10 live-draw matching built on V8 stable matrix, latest draw banner, three-star auto base ===== */
.latest-draw-banner {
  position: relative;
  top: auto;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 50px;
  margin: 0 -1px;
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 9px 9px;
  background: color-mix(in srgb, var(--panel) 96%, var(--primary) 4%);
  box-shadow: 0 7px 18px rgba(0,0,0,.06);
  backdrop-filter: blur(10px);
}
.latest-draw-label {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 800;
  font-size: 12px;
}
.latest-draw-meta { display: grid; grid-template-columns: auto; gap: 1px; min-width: 90px; }
.latest-draw-meta span { color: var(--muted); font-size: 10px; }
.latest-draw-meta strong { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.latest-draw-number { display: flex; gap: 5px; margin-left: auto; }
.latest-ball {
  width: 29px;
  height: 29px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: var(--hit);
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.12), 0 3px 8px color-mix(in srgb, var(--hit) 25%, transparent);
}

/* Avoid Chromium repaint and sticky-column overlap glitches when the pointer moves. */
.matrix-wrap {
  contain: none !important;
  container-type: normal !important;
  overflow-anchor: none;
}
.matrix-table,
.matrix-table *,
.matrix-stage,
.matrix-lines { transition: none !important; animation: none !important; }
.matrix-table tbody tr:hover { background: transparent !important; }
.matrix-table tbody tr:hover td { filter: none !important; transform: none !important; }
.matrix-table tbody td:nth-child(1),
.matrix-table tbody td:nth-child(2),
.matrix-table thead tr:nth-child(2) th:nth-child(1),
.matrix-table thead tr:nth-child(2) th:nth-child(2),
.matrix-table thead tr:first-child th:first-child,
.matrix-table tfoot th:first-child {
  position: static !important;
  left: auto !important;
  box-shadow: inset 0 -1px 0 var(--table-line) !important;
}
.matrix-table thead tr:nth-child(2) th:nth-child(1),
.matrix-table thead tr:nth-child(2) th:nth-child(2) { z-index: 3; }
.matrix-stage { transform: translateZ(0); }
.matrix-lines { transform: translateZ(0); }

.form-grid.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.three-auto-control { overflow: visible; }
.three-auto-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.three-auto-form { align-items: end; }
.wide-setting { width: 100%; margin-top: 6px; }
.three-auto-grid { grid-template-columns: minmax(0, 1.6fr) minmax(280px, .65fr); }
.three-auto-set-panel { min-width: 0; }
.three-auto-numbers {
  width: 100%;
  min-height: 360px;
  max-height: 56vh;
  resize: vertical;
  font-family: Consolas, "Cascadia Mono", monospace;
  font-size: 12px;
  line-height: 1.75;
  letter-spacing: .3px;
  word-spacing: 4px;
  white-space: pre-wrap;
}
.three-auto-latest-panel { align-self: start; }
.three-auto-latest { min-height: 270px; }
.three-auto-latest:not(.empty-state) { display: grid; gap: 13px; align-content: start; }
.three-auto-latest-number { display: flex; justify-content: center; gap: 8px; padding: 10px 0; }
.three-auto-latest-number .latest-ball { width: 46px; height: 46px; font-size: 22px; }
.three-auto-result-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 900;
}
.three-auto-result-badge.hit { color: #fff; background: var(--primary); }
.three-auto-result-badge.miss { color: #fff; background: var(--danger); }
.three-auto-latest-meta { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.three-auto-latest-meta div { padding: 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel-2); }
.three-auto-latest-meta span { display: block; color: var(--muted); font-size: 10px; margin-bottom: 4px; }
.three-auto-table-wrap { max-height: 520px; }
.three-auto-table th, .three-auto-table td { text-align: center; }
.three-auto-table .status-hit { color: var(--primary); font-weight: 900; }
.three-auto-table .status-miss { color: var(--danger); font-weight: 900; }
.three-auto-table .auto-reset { color: var(--warning); font-weight: 800; }

@media (max-width: 1180px) {
  .latest-draw-banner { flex-wrap: wrap; gap: 8px 12px; }
  .latest-draw-number { margin-left: 0; }
  .form-grid.five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .three-auto-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .latest-draw-banner { position: relative; top: auto; border-radius: 8px; margin-top: 8px; }
  .latest-draw-meta { min-width: calc(50% - 25px); }
  .latest-draw-number { width: 100%; }
  .form-grid.five { grid-template-columns: 1fr; }
  .three-auto-actions { width: 100%; justify-content: flex-start; }
  .three-auto-actions button { flex: 1 1 120px; }
  .three-auto-latest-meta { grid-template-columns: 1fr; }
}

/* V10 三星实时匹配 */
.form-grid.six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.three-auto-metrics { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.three-auto-metrics .metric-card { min-height: 116px; }
.three-auto-metrics .streak-card strong { color: var(--primary); }
.three-auto-metrics .match-card strong { font-size: 21px; }
.three-auto-metrics .match-card.matched { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 52%, transparent), var(--shadow); }
.three-auto-metrics .match-card.unmatched { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warning) 58%, transparent), var(--shadow); }

.three-auto-matcher {
  position: relative;
  overflow: hidden;
  margin-bottom: 12px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--line));
  border-radius: 10px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 7%, transparent), transparent 55%),
    var(--panel-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.three-auto-matcher::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 18px 18px;
}
.matcher-head, .matcher-foot { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; }
.matcher-head strong { flex: 1; font-size: 12px; letter-spacing: .4px; }
.matcher-head > span:last-child, .matcher-foot { color: var(--muted); font-size: 11px; }
.matcher-foot { justify-content: space-between; margin-top: 8px; }
.matcher-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); box-shadow: 0 0 0 4px color-mix(in srgb, var(--muted) 13%, transparent); }
.three-auto-matcher.scanning .matcher-dot { background: var(--primary); animation: matcherPulse .85s infinite; }
.three-auto-matcher.hit .matcher-dot { background: var(--primary); }
.three-auto-matcher.miss .matcher-dot { background: var(--danger); }
.matcher-display { position: relative; z-index: 1; display: flex; align-items: baseline; justify-content: center; gap: 13px; padding: 9px 0 8px; }
.matcher-display > span { min-width: 84px; text-align: center; font: 900 31px/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: 7px; color: var(--text); text-shadow: 0 0 18px color-mix(in srgb, var(--primary) 30%, transparent); }
.matcher-display small { color: var(--muted); font-size: 11px; }
.matcher-track { position: relative; z-index: 1; height: 7px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--line) 70%, transparent); }
.matcher-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), var(--primary-2)); transition: width .12s linear; }
.matcher-track b { position: absolute; top: -4px; left: -14%; width: 18%; height: 15px; opacity: 0; transform: skewX(-22deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.72), transparent); }
.three-auto-matcher.scanning .matcher-track b { opacity: .8; animation: matcherSweep 1.05s linear infinite; }
.three-auto-matcher.hit .matcher-track i { background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary) 55%, white)); }
.three-auto-matcher.miss .matcher-track i { background: linear-gradient(90deg, var(--warning), var(--danger)); }

.three-auto-number-shell { position: relative; overflow: hidden; border-radius: 8px; }
.three-auto-number-shell .three-auto-numbers { display: block; margin: 0; }
.three-auto-scan-line {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  top: -4px;
  height: 3px;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, transparent, var(--primary), #fff, var(--primary), transparent);
  box-shadow: 0 0 13px color-mix(in srgb, var(--primary) 70%, transparent);
}
.three-auto-number-shell.scanning .three-auto-scan-line { opacity: .9; animation: numberScan 1.4s ease-in-out infinite; }
.three-auto-table tr.match-latest td { animation: tableMatchFlash 1.4s ease-out; }
.three-auto-table tr.match-latest { outline: 2px solid color-mix(in srgb, var(--primary) 45%, transparent); outline-offset: -2px; }
.three-auto-table .hit-streak-cell { color: var(--primary); font-weight: 900; }

@keyframes matcherPulse { 0%,100% { transform: scale(.85); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); } 50% { transform: scale(1.15); box-shadow: 0 0 0 7px color-mix(in srgb, var(--primary) 4%, transparent); } }
@keyframes matcherSweep { from { left: -18%; } to { left: 104%; } }
@keyframes numberScan { 0% { top: 2%; } 50% { top: 96%; } 100% { top: 2%; } }
@keyframes tableMatchFlash { 0% { background: color-mix(in srgb, var(--primary) 34%, transparent); } 100% { background: transparent; } }

@media (max-width: 1450px) {
  .form-grid.six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .three-auto-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .form-grid.six, .three-auto-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .form-grid.six, .three-auto-metrics { grid-template-columns: 1fr; }
  .matcher-display { flex-direction: column; align-items: center; gap: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .three-auto-matcher.scanning .matcher-dot,
  .three-auto-matcher.scanning .matcher-track b,
  .three-auto-number-shell.scanning .three-auto-scan-line,
  .three-auto-table tr.match-latest td { animation: none !important; }
}

/* V10 data-update notification: long issue/number/time text stays readable. */
.toast {
  max-width: min(560px, calc(100vw - 32px));
  white-space: normal;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

/* V11 换号后回测与盈亏K线 */
.mini-stat-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.mini-stat-grid > div {
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: color-mix(in srgb, var(--panel-2) 92%, transparent);
}
.mini-stat-grid span {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 11px;
}
.mini-stat-grid strong {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-size: 18px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.current-set-backtest-metrics strong { color: var(--primary); }
.current-set-backtest-wrap { max-height: 390px; }
.compact-table th, .compact-table td { padding-top: 8px; padding-bottom: 8px; }
.kline-panel-head { align-items: flex-end; }
.kline-controls {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 9px;
  flex-wrap: wrap;
}
.kline-controls label { width: 118px; }
.kline-controls label.wager-mode-control { width: 240px; }
.kline-controls button { height: 37px; }
.three-auto-kline { height: 520px; min-height: 420px; }
.finance-metrics strong.positive { color: var(--primary); }
.finance-metrics strong.negative { color: var(--danger); }
.kline-note { margin: 10px 2px 0; }

@media (max-width: 1250px) {
  .mini-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kline-panel-head { align-items: flex-start; flex-direction: column; }
  .kline-controls { justify-content: flex-start; width: 100%; }
}
@media (max-width: 720px) {
  .mini-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kline-controls label { width: calc(50% - 5px); }
  .kline-controls label.wager-mode-control { width: calc(50% - 5px); }
  .kline-controls button { width: 100%; }
  .three-auto-kline { height: 460px; }
}
@media (max-width: 480px) {
  .mini-stat-grid { grid-template-columns: 1fr; }
  .kline-controls label { width: 100%; }
  .kline-controls label.wager-mode-control { width: 100%; }
}

/* V14 user session */
.user-session-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 5px 10px 5px 6px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); color: var(--text); font-size: 12px; white-space: nowrap; }
.user-avatar { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; background: var(--primary-soft); color: var(--primary); font-weight: 800; }
.logout-button { min-height: 36px; padding: 7px 11px; background: color-mix(in srgb, var(--danger) 8%, var(--panel)); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 32%, var(--line)); }
@media (max-width: 1180px) { .user-session-chip { max-width: 125px; overflow: hidden; } .user-session-chip #currentUsername { overflow: hidden; text-overflow: ellipsis; } }
.finance-metrics { grid-template-columns: repeat(7, minmax(0, 1fr)); }
@media (max-width: 1250px) { .finance-metrics { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (max-width: 720px) { .finance-metrics { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 480px) { .finance-metrics { grid-template-columns: 1fr; } }

/* V15 account access information */
.user-session-chip > span:last-child { display: grid; gap: 1px; min-width: 0; }
.user-session-chip b { font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.user-session-chip small { color: var(--muted); font-size: 9px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; }
.logout-button.secondary { color: var(--warning); background: color-mix(in srgb, var(--warning) 8%, var(--panel)); border-color: color-mix(in srgb, var(--warning) 32%, var(--line)); }
@media (max-width: 1320px) { .user-session-chip small { display: none; } }

/* ===== V16 personal auto runner and calm themes ===== */
html[data-palette="chatgpt"] {
  --primary: #10a37f;
  --primary-2: #0d8f70;
  --primary-soft: rgba(16,163,127,.12);
  --primary-border: rgba(16,163,127,.26);
  --trend-line: #6aa9d8;
  --repeat-ball: #cf6b78;
  --group-hit: #0d9b7a;
  --route-zero: #dff4ec;
  --route-one: #e4eff8;
  --route-two: #f4eee0;
}
html[data-palette="slate"] {
  --primary: #64748b;
  --primary-2: #475569;
  --primary-soft: rgba(100,116,139,.13);
  --primary-border: rgba(100,116,139,.30);
  --trend-line: #7894b0;
  --repeat-ball: #b76f7a;
  --group-hit: #52677f;
  --route-zero: #e8edf2;
  --route-one: #edf1f5;
  --route-two: #f3eee7;
}
html[data-palette="ocean"] {
  --primary: #1687a7;
  --primary-2: #116d87;
  --primary-soft: rgba(22,135,167,.12);
  --primary-border: rgba(22,135,167,.27);
  --trend-line: #4d9bc3;
  --repeat-ball: #cc7380;
  --group-hit: #177e94;
  --route-zero: #dff3f5;
  --route-one: #e2eef8;
  --route-two: #f6efe2;
}
html[data-palette="sand"] {
  --primary: #8a6d3b;
  --primary-2: #72592f;
  --primary-soft: rgba(138,109,59,.12);
  --primary-border: rgba(138,109,59,.26);
  --trend-line: #7c9db9;
  --repeat-ball: #c7777f;
  --group-hit: #8b7650;
  --route-zero: #edf1e7;
  --route-one: #ebf0f4;
  --route-two: #f5eddd;
}
.auto-page-intro {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  color: var(--muted);
}
.auto-page-intro strong { color: var(--text); font-size: 15px; }
.auto-page-intro span { flex: 1; }
.auto-running-badge {
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid var(--line);
}
.auto-running-badge.running { color: var(--primary); background: var(--primary-soft); border-color: var(--primary-border); }
.auto-running-badge.stopped { color: var(--muted); background: var(--panel-2); }
.hidden { display: none !important; }

/* ChatGPT-like neutral surfaces */
html[data-palette="chatgpt"][data-theme="light"] {
  --bg: #f7f7f8;
  --panel: #ffffff;
  --panel-2: #f3f4f6;
  --line: #e1e3e6;
  --text: #202123;
  --muted: #6b6f76;
  --shadow: 0 8px 24px rgba(0,0,0,.06);
}
html[data-palette="chatgpt"][data-theme="dark"] {
  --bg: #171717;
  --panel: #212121;
  --panel-2: #2a2a2a;
  --line: #3b3b3b;
  --text: #ececec;
  --muted: #a8a8a8;
  --shadow: 0 10px 28px rgba(0,0,0,.25);
}

/* V17 draw sound and play-aware finance */
.draw-sound-control {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 4px;
  padding: 5px;
  border: 1px solid color-mix(in srgb, var(--primary) 26%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel-2) 92%, var(--primary) 8%);
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
}
.draw-sound-toggle,
.draw-sound-test {
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 8px;
}
.draw-sound-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid color-mix(in srgb, var(--danger) 32%, var(--line));
  background: color-mix(in srgb, var(--danger) 10%, var(--panel));
  color: var(--text);
}
.draw-sound-toggle.enabled {
  border-color: color-mix(in srgb, var(--primary) 58%, var(--line));
  background: color-mix(in srgb, var(--primary) 16%, var(--panel));
  color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 10%, transparent);
}
.draw-sound-toggle span { font-size: 17px; }
.draw-sound-toggle strong { font-size: 11px; white-space: nowrap; }
.draw-sound-control select {
  width: 112px;
  min-height: 32px;
  margin: 0;
  padding: 5px 7px;
  font-size: 11px;
}
.draw-sound-test {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  font-size: 11px;
}
.play-payout-preview {
  min-width: 150px;
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 34%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 8%, var(--panel));
}
.play-payout-preview span { display: block; color: var(--muted); font-size: 10px; margin-bottom: 3px; }
.play-payout-preview strong { color: var(--primary); font-size: 16px; }
.three-auto-kline.sparse-data { height: 380px; min-height: 340px; }

@media (max-width: 1320px) {
  .draw-sound-control { width: 100%; order: 10; margin-left: 0; }
  .draw-sound-control select { flex: 1; width: auto; }
}
@media (max-width: 760px) {
  .draw-sound-control { display: grid; grid-template-columns: 1fr 1fr auto; }
  .draw-sound-toggle { justify-content: center; }
  .draw-sound-control select { width: 100%; }
  .play-payout-preview { width: 100%; }
  .three-auto-kline.sparse-data { height: 340px; min-height: 300px; }
}

/* ===== V18 interaction preferences, experiment lab, refined surfaces ===== */
html { scroll-behavior: smooth; }
body { letter-spacing: .005em; }
.panel, .metric-card, .latest-draw-banner, .sync-strip, .auto-page-intro {
  border-radius: 14px;
  box-shadow: var(--shadow);
}
.panel { padding: 20px; }
button, input, select, textarea { border-radius: 9px; }
button { transition: transform .14s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease; }
button:hover:not(:disabled) { transform: translateY(-1px); }
button:active:not(:disabled) { transform: translateY(0); }
.topbar { padding: 8px 0; }
.latest-draw-banner { margin-top: 14px; }
.metric-card { transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.metric-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--primary) 28%, var(--line)); }
.table-wrap { border-radius: 11px; }
tbody tr { transition: background .12s ease; }

.auto-scroll-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
}
.auto-scroll-toggle.enabled {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 42%, var(--line));
  background: color-mix(in srgb, var(--primary) 10%, var(--panel));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 8%, transparent);
}
.auto-scroll-toggle span:first-child { font-size: 16px; font-weight: 800; }

.auto-lab {
  margin-top: 18px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--primary) 8%, transparent), transparent 34%),
    var(--panel);
  box-shadow: var(--shadow);
}
.auto-lab-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
  margin-bottom: 18px;
}
.auto-lab-heading h2 { margin: 3px 0 5px; font-size: 19px; }
.auto-lab-heading p { margin: 0; color: var(--muted); font-size: 12px; }
.eyebrow { color: var(--primary); font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.auto-lab-common { display: grid; grid-template-columns: 210px 130px; gap: 10px; min-width: 350px; }
.auto-lab-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.lab-card {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  align-content: start;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel-2) 78%, var(--panel));
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.lab-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--primary) 32%, var(--line));
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
}
.lab-card-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 22px;
  font-weight: 700;
}
.lab-card h3 { margin: 2px 0 4px; font-size: 15px; }
.lab-card p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.lab-controls, .lab-actions, .lab-summary, .lab-output { grid-column: 1 / -1; }
.lab-controls { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; margin-top: 4px; }
.lab-controls.two { grid-template-columns: repeat(2, minmax(0,1fr)); }
.lab-controls.three { grid-template-columns: repeat(3, minmax(0,1fr)); }
.lab-actions { display: flex; gap: 8px; }
.lab-actions .primary { flex: 1; }
.lab-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  min-height: 34px;
  padding: 9px 11px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--primary) 5%, var(--panel));
  color: var(--muted);
  font-size: 11px;
}
.lab-summary strong { color: var(--primary); }
.lab-output {
  min-height: 122px;
  max-height: 190px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 11px;
  line-height: 1.65;
  background: color-mix(in srgb, var(--input) 92%, var(--primary) 2%);
}

html[data-palette="chatgpt"] .sidebar { background: color-mix(in srgb, var(--sidebar) 96%, var(--primary) 4%); }
html[data-palette="chatgpt"] .nav-item.active,
html[data-palette="chatgpt"] .tree-leaf.active { border-radius: 8px; }
html[data-palette="chatgpt"] .panel,
html[data-palette="chatgpt"] .metric-card { border-color: color-mix(in srgb, var(--line) 92%, var(--primary) 8%); }

@media (max-width: 1180px) {
  .auto-lab-heading { align-items: stretch; flex-direction: column; }
  .auto-lab-common { min-width: 0; width: 100%; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .auto-lab-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .auto-lab { padding: 14px; }
  .auto-lab-common, .lab-controls, .lab-controls.two, .lab-controls.three { grid-template-columns: 1fr; }
  .three-auto-actions { align-items: stretch; }
  .auto-scroll-toggle { justify-content: center; }
}

/* V19: next-draw number-set confirmation */
.three-auto-next-notice {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, 1.25fr) minmax(180px, .72fr) minmax(220px, .9fr);
  align-items: center;
  gap: 14px;
  margin: 0 0 12px;
  padding: 13px 15px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary) 46%, var(--line));
  border-radius: 12px;
  background:
    radial-gradient(circle at 12% 50%, color-mix(in srgb, var(--primary) 13%, transparent), transparent 34%),
    linear-gradient(110deg, color-mix(in srgb, var(--primary) 8%, var(--panel-2)), var(--panel-2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 8px 24px color-mix(in srgb, var(--primary) 8%, transparent);
}
.three-auto-next-notice::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(100deg, transparent 12%, rgba(255,255,255,.32) 46%, transparent 76%);
  transform: translateX(-120%);
}
.three-auto-next-notice.updated::after { animation: nextNoticeSweep 1.25s ease-out; }
.three-auto-next-notice.updated { animation: nextNoticePulse 1.35s ease-out; }
.three-auto-next-notice.stopped { border-color: var(--line); background: var(--panel-2); box-shadow: none; }
.next-notice-status { display: flex; align-items: center; min-width: 0; gap: 11px; }
.next-notice-icon {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(145deg, var(--primary), var(--primary-2));
  box-shadow: 0 7px 18px color-mix(in srgb, var(--primary) 28%, transparent);
  font-size: 21px;
  font-weight: 900;
}
.three-auto-next-notice.stopped .next-notice-icon { background: var(--muted); box-shadow: none; }
.next-notice-status div { min-width: 0; }
.next-notice-status strong { display: block; color: var(--text); font-size: 15px; line-height: 1.35; }
.next-notice-status small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.next-notice-issue {
  padding: 9px 13px;
  text-align: center;
  border-left: 1px solid color-mix(in srgb, var(--primary) 24%, var(--line));
  border-right: 1px solid color-mix(in srgb, var(--primary) 24%, var(--line));
}
.next-notice-issue span, .next-notice-issue small { display: block; color: var(--muted); font-size: 10px; }
.next-notice-issue strong {
  display: block;
  margin: 3px 0;
  color: var(--primary);
  font: 900 23px/1.15 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: 1.2px;
}
.next-notice-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 5px 10px;
  min-width: 0;
  font-size: 11px;
}
.next-notice-meta span { color: var(--muted); }
.next-notice-meta strong { min-width: 0; color: var(--text); overflow-wrap: anywhere; }
@keyframes nextNoticeSweep { 0% { opacity: 0; transform: translateX(-120%); } 24% { opacity: .85; } 100% { opacity: 0; transform: translateX(120%); } }
@keyframes nextNoticePulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 40%, transparent); } 45% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--primary) 12%, transparent), 0 12px 30px color-mix(in srgb, var(--primary) 16%, transparent); } 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 8px 24px color-mix(in srgb, var(--primary) 8%, transparent); } }
@media (max-width: 980px) {
  .three-auto-next-notice { grid-template-columns: 1fr 1fr; }
  .next-notice-status { grid-column: 1 / -1; }
  .next-notice-issue { border-left: 0; border-right: 1px solid color-mix(in srgb, var(--primary) 24%, var(--line)); }
}
@media (max-width: 620px) {
  .three-auto-next-notice { grid-template-columns: 1fr; }
  .next-notice-status { grid-column: auto; }
  .next-notice-issue { border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) {
  .three-auto-next-notice.updated,
  .three-auto-next-notice.updated::after { animation: none !important; }
}

/* V20: nested analysis navigation and theoretical-cycle trend dashboard */
:root {
  --trend-hit: #ef4444;
  --trend-miss: #10b981;
}
.root-tree-group { margin: 3px 0; }
.root-tree-folder {
  padding: 8px 9px;
  font-weight: 700;
  background: color-mix(in srgb, var(--panel-2) 66%, transparent);
  border-radius: 7px;
}
.root-tree-folder .folder-icon { color: var(--primary); }
.root-tree-children { margin-left: 8px; padding-left: 5px; }
.root-tree-children::before { left: 8px; }
.nested-tree-group { margin: 2px 0; }
.nested-tree-folder { padding-left: 14px; color: color-mix(in srgb, var(--text) 92%, var(--muted)); }
.nested-tree-children::before { left: 28px; }
.nested-tree-children .tree-leaf { padding-left: 38px; }

.trend-console {
  display: grid;
  gap: 15px;
  margin-bottom: 12px;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background:
    radial-gradient(circle at 90% 0, color-mix(in srgb, var(--primary) 11%, transparent), transparent 34%),
    linear-gradient(145deg, color-mix(in srgb, var(--panel-2) 92%, var(--primary) 2%), var(--panel));
  box-shadow: var(--shadow);
}
.trend-console-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.trend-console-title h2 { margin: 3px 0 5px; font-size: 19px; }
.trend-console-title p { margin: 0; color: var(--muted); font-size: 12px; }
.trend-live-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}
.trend-live-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.trend-live-chip.running { color: var(--trend-miss); border-color: color-mix(in srgb, var(--trend-miss) 42%, var(--line)); }
.trend-live-chip.running i { background: var(--trend-miss); box-shadow: 0 0 0 4px color-mix(in srgb, var(--trend-miss) 13%, transparent); }
.trend-controls {
  display: grid;
  grid-template-columns: minmax(180px, 1.2fr) repeat(5, minmax(120px, .72fr)) auto auto;
  gap: 9px;
  align-items: end;
}
.trend-controls button { min-height: 34px; }
.trend-metrics { grid-template-columns: repeat(6, minmax(0,1fr)); }
.trend-metrics .metric-card { min-height: 108px; }
.trend-metrics .metric-card strong { font-size: 23px; }
.trend-chart-panel { overflow: hidden; }
.trend-chart-head { align-items: flex-start; }
.trend-legend { display: flex; flex-wrap: wrap; gap: 10px 14px; color: var(--muted); font-size: 11px; }
.trend-legend span { display: inline-flex; align-items: center; gap: 5px; }
.trend-legend i { width: 19px; height: 8px; border-radius: 3px; }
.trend-red { background: var(--trend-hit); }
.trend-green { background: var(--trend-miss); }
.trend-band { border: 1px solid var(--primary); background: var(--primary-soft); }
.trend-chart { width: 100%; height: min(720px, calc(100vh - 185px)); min-height: 520px; }
.trend-summary-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
.trend-summary-list > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel-2);
}
.trend-summary-list span { color: var(--muted); font-size: 11px; }
.trend-summary-list strong { text-align: right; font-size: 12px; }
.trend-empty-summary { grid-column: 1 / -1; padding: 30px; color: var(--muted); text-align: center; }
.trend-table-wrap { max-height: 440px; }
.trend-table .trend-result { display: inline-flex; min-width: 28px; justify-content: center; padding: 3px 7px; border-radius: 999px; color: #fff; font-weight: 800; }
.trend-table .trend-result.hit { background: var(--trend-hit); }
.trend-table .trend-result.miss { background: var(--trend-miss); }
.trend-hit-row { background: color-mix(in srgb, var(--trend-hit) 4%, transparent); }
.trend-miss-row { background: color-mix(in srgb, var(--trend-miss) 4%, transparent); }

@media (max-width: 1500px) {
  .trend-controls { grid-template-columns: repeat(4, minmax(140px, 1fr)); }
  .trend-metrics { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 980px) {
  .trend-controls { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .trend-metrics { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .trend-detail-grid { grid-template-columns: 1fr; }
  .trend-chart { min-height: 500px; height: 620px; }
}
@media (max-width: 620px) {
  .trend-console-title { flex-direction: column; }
  .trend-controls, .trend-metrics, .trend-summary-list { grid-template-columns: 1fr; }
  .trend-chart { min-height: 470px; height: 560px; }
  .trend-legend { display: none; }
}

/* V21: number-based trend analysis and clearer chart separation */
.number-trend-controls {
  grid-template-columns: minmax(170px, 1.15fr) minmax(150px, .9fr) minmax(120px, .65fr) minmax(130px, .75fr) minmax(110px, .6fr) minmax(110px, .6fr) minmax(105px, .55fr) minmax(115px, .6fr) auto auto auto;
}
.trend-main-chart {
  height: 540px;
  min-height: 500px;
  max-height: 620px;
}
.trend-sub-chart {
  height: 320px;
  min-height: 280px;
}
.trend-chart-panel .echarts-for-react,
.trend-chart-panel canvas { max-width: 100%; }
.trend-table td:nth-child(3),
.trend-table td:nth-child(4),
.trend-table td:nth-child(5) { letter-spacing: 1px; }
.trend-metrics #trendCurrentPicks { letter-spacing: 4px; color: var(--primary); }
@media (max-width: 1650px) {
  .number-trend-controls { grid-template-columns: repeat(6, minmax(125px, 1fr)); }
}
@media (max-width: 1100px) {
  .number-trend-controls { grid-template-columns: repeat(3, minmax(140px, 1fr)); }
  .trend-main-chart { height: 500px; min-height: 460px; }
}
@media (max-width: 700px) {
  .number-trend-controls { grid-template-columns: 1fr 1fr; }
  .trend-main-chart { height: 460px; min-height: 420px; }
  .trend-sub-chart { height: 300px; }
}
@media (max-width: 460px) {
  .number-trend-controls { grid-template-columns: 1fr; }
}

/* V22 五星独胆趋势与个人跟踪记录 */
.single-digit-trend-controls {
  display: grid;
  grid-template-columns: minmax(430px, 1.8fr) repeat(3, minmax(130px, .7fr)) auto auto;
  align-items: end;
  gap: 12px;
}
.trend-digit-field > span {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.trend-digit-picker {
  display: grid;
  grid-template-columns: repeat(10, minmax(34px, 1fr));
  gap: 5px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel-2) 82%, transparent);
}
.trend-digit-btn {
  min-width: 34px;
  height: 38px;
  padding: 0;
  border-radius: 9px;
  border: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
  background: var(--panel);
  color: var(--text);
  font-size: 15px;
  font-weight: 850;
  box-shadow: none;
}
.trend-digit-btn:hover {
  border-color: color-mix(in srgb, var(--primary) 48%, var(--line));
  transform: translateY(-1px);
}
.trend-digit-btn.active {
  color: #fff;
  border-color: var(--primary);
  background: linear-gradient(145deg, var(--primary), color-mix(in srgb, var(--primary) 66%, var(--primary-2)));
  box-shadow: 0 7px 18px color-mix(in srgb, var(--primary) 24%, transparent);
}
.auto-track-row td { transition: background-color .15s ease; }
.auto-track-row.auto-track-hit td { background: color-mix(in srgb, #ef4444 7%, var(--panel)); }
.auto-track-row.auto-track-miss td { background: color-mix(in srgb, #10b981 7%, var(--panel)); }
.auto-track-row.auto-track-hit:hover td { background: color-mix(in srgb, #ef4444 12%, var(--panel)); }
.auto-track-row.auto-track-miss:hover td { background: color-mix(in srgb, #10b981 12%, var(--panel)); }
.auto-track-result {
  display: inline-flex;
  min-width: 30px;
  height: 28px;
  padding: 0 8px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #fff;
  font-weight: 900;
}
.auto-track-result.hit { background: #ef4444; box-shadow: 0 4px 12px rgba(239,68,68,.2); }
.auto-track-result.miss { background: #10b981; box-shadow: 0 4px 12px rgba(16,185,129,.2); }
.auto-track-money { font-weight: 850; font-variant-numeric: tabular-nums; }
.three-auto-table th, .three-auto-table td { min-width: 78px; }
.three-auto-table th:nth-child(2), .three-auto-table td:nth-child(2) { min-width: 105px; }
.three-auto-table th:nth-child(3), .three-auto-table td:nth-child(3) { min-width: 145px; }

@media (max-width: 1250px) {
  .single-digit-trend-controls { grid-template-columns: 1fr 1fr 1fr; }
  .trend-digit-field { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .single-digit-trend-controls { grid-template-columns: 1fr; }
  .trend-digit-field { grid-column: auto; }
  .trend-digit-picker { grid-template-columns: repeat(5, 1fr); }
}

/* V24 announcement, multi-play trend and exact main/pair banker lab */
.site-announcement { margin: 14px 0 0; display: grid; grid-template-columns: 36px minmax(0,1fr) 34px; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--primary) 8%, var(--panel)); box-shadow: 0 10px 28px rgba(0,0,0,.08); }
.site-announcement.user-closed, .site-announcement.hidden { display: none; }
.site-announcement[data-tone="success"] { border-color: color-mix(in srgb, #2fa36b 40%, var(--line)); background: color-mix(in srgb, #2fa36b 8%, var(--panel)); }
.site-announcement[data-tone="warning"] { border-color: color-mix(in srgb, var(--warning) 45%, var(--line)); background: color-mix(in srgb, var(--warning) 9%, var(--panel)); }
.site-announcement[data-tone="danger"] { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); background: color-mix(in srgb, var(--danger) 8%, var(--panel)); }
.site-announcement-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: var(--primary); color: white; font-weight: 900; }
.site-announcement-copy { min-width: 0; }
.site-announcement-copy strong { display: block; margin-bottom: 3px; }
.site-announcement-copy p { margin: 0; white-space: pre-wrap; color: var(--muted); line-height: 1.55; font-size: 12px; }
.site-announcement button { border: 0; background: transparent; color: var(--muted); font-size: 22px; padding: 0; }
.special-leaf { margin-top: 7px; border-top: 1px dashed var(--line) !important; padding-top: 12px !important; }
.single-digit-trend-controls { grid-template-columns: minmax(150px, 190px) minmax(380px,1fr) repeat(3,minmax(120px,160px)) auto auto; }
.dantuo-console { padding-bottom: 18px; }
.dantuo-toolbar { display: grid; grid-template-columns: minmax(180px,240px) 140px repeat(4,auto); gap: 10px; align-items: end; }
.dantuo-pickers { margin-top: 16px; display: grid; gap: 10px; }
.dantuo-row { display: grid; grid-template-columns: 52px minmax(0,1fr) 64px; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); }
.dantuo-row > strong { color: var(--text); }
.dantuo-digit-grid { display: grid; grid-template-columns: repeat(10,minmax(30px,1fr)); gap: 5px; }
.dantuo-digit { min-width: 0; padding: 7px 4px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--text); }
.dantuo-digit:hover { border-color: var(--primary); }
.dantuo-digit.active { color: white; background: var(--primary); border-color: var(--primary); box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 28%, transparent); }
.dantuo-digit[disabled] { opacity: .25; cursor: not-allowed; }
.dantuo-count { text-align: center; padding: 6px 8px; border-radius: 999px; color: var(--primary); background: var(--primary-soft); font-size: 11px; font-weight: 800; }
.dantuo-combination-list { min-height: 205px; max-height: 290px; overflow: auto; line-height: 1.8; word-break: break-all; }
@media (max-width: 1280px) { .single-digit-trend-controls { grid-template-columns: repeat(3,minmax(0,1fr)); } .trend-digit-field { grid-column: span 2; } .dantuo-toolbar { grid-template-columns: repeat(4,minmax(0,1fr)); } }
@media (max-width: 760px) { .single-digit-trend-controls, .dantuo-toolbar { grid-template-columns: 1fr; } .trend-digit-field { grid-column: auto; } .dantuo-row { grid-template-columns: 1fr; } .dantuo-digit-grid { grid-template-columns: repeat(5,1fr); } .dantuo-count { justify-self: start; } }
.announcement-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(8,14,24,.52); backdrop-filter: blur(8px); }
.announcement-modal.hidden { display: none; }
.announcement-modal-card { width: min(520px,100%); padding: 26px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); box-shadow: 0 28px 90px rgba(0,0,0,.32); }
.announcement-modal-card h2 { margin: 8px 0 10px; }
.announcement-modal-card p { white-space: pre-wrap; color: var(--muted); line-height: 1.75; }
.announcement-modal-card button { margin-top: 10px; width: 100%; }

/* V26 configurable navigation, notices and permissions */
.permission-hidden{display:none!important}
.sidebar-notice-board{margin:14px 10px 10px;padding:10px;border:1px solid var(--border);border-radius:12px;background:var(--panel);min-height:92px}
.sidebar-notice-title{font-size:12px;font-weight:800;color:var(--muted);margin-bottom:8px;letter-spacing:.08em}
.sidebar-notice-list{max-height:210px;overflow-y:auto;display:grid;gap:8px;font-size:12px}
.sidebar-notice-item{padding:9px;border-radius:9px;background:var(--panel-soft);border-left:3px solid var(--accent)}
.sidebar-notice-item strong{display:block;margin-bottom:4px}.sidebar-notice-item p{margin:0;line-height:1.5;color:var(--muted)}.sidebar-notice-item a{display:inline-block;margin-top:5px;color:var(--accent)}
.app-ad-slot{margin:0 0 14px;display:grid;gap:8px}.app-ad-slot article{display:flex;gap:12px;align-items:center;padding:12px 16px;border:1px solid var(--border);border-radius:12px;background:linear-gradient(135deg,var(--panel),var(--accent-soft))}.app-ad-slot span{flex:1;color:var(--muted)}

/* V27 technical indicator alerts */
.trend-alert-mount { margin: 14px 16px 16px; }
.trend-alert-panel { border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--panel) 94%, var(--primary) 6%); overflow: hidden; }
.trend-alert-panel summary { min-height: 48px; display:flex; align-items:center; gap:10px; padding: 0 14px; cursor:pointer; user-select:none; list-style:none; }
.trend-alert-panel summary::-webkit-details-marker { display:none; }
.trend-alert-panel summary strong { font-size:14px; color:var(--text); }
.trend-alert-panel summary em { margin-left:auto; font-style:normal; font-size:12px; color:var(--muted); padding:4px 9px; border-radius:999px; background:var(--soft); }
.trend-alert-panel.enabled summary em { color:var(--success); background: color-mix(in srgb, var(--success) 12%, transparent); }
.trend-alert-bell { width:30px; height:30px; display:grid; place-items:center; border-radius:10px; background:color-mix(in srgb,var(--primary) 12%,transparent); }
.trend-alert-body { border-top:1px solid var(--line); padding:14px; display:grid; gap:12px; }
.trend-alert-topline,.trend-alert-thresholds { display:flex; flex-wrap:wrap; gap:10px; align-items:end; }
.trend-alert-topline label,.trend-alert-thresholds label { display:flex; align-items:center; gap:7px; font-size:12px; color:var(--muted); }
.trend-alert-topline input[type="number"],.trend-alert-thresholds input { width:72px; }
.trend-alert-topline input[type="time"] { width:112px; }
.trend-alert-switch { padding:7px 10px; border:1px solid var(--line); border-radius:10px; background:var(--panel); }
.trend-alert-rules { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
.trend-alert-rule { display:flex; gap:7px; align-items:center; padding:8px 9px; border:1px solid var(--line); border-radius:10px; font-size:12px; background:var(--panel); }
.trend-alert-status { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; background:var(--soft); color:var(--muted); font-size:12px; }
.trend-alert-status span { flex:1; }
.trend-alert-history { max-height:160px; overflow:auto; display:grid; gap:6px; }
.trend-alert-history>div { padding:9px 10px; border-left:3px solid var(--primary); border-radius:8px; background:var(--panel); }
.trend-alert-history b { font-size:12px; margin-right:8px; }
.trend-alert-history span { font-size:11px; color:var(--muted); }
.trend-alert-history p { margin:4px 0 0; font-size:12px; color:var(--muted); }
.trend-alert-empty { color:var(--muted); text-align:center; border-left:0!important; }
.trend-alert-panel.triggered { animation: trendAlertPulse 1.1s ease 3; border-color:var(--warning); box-shadow:0 0 0 4px color-mix(in srgb,var(--warning) 14%,transparent); }
@keyframes trendAlertPulse { 50% { transform:translateY(-2px); } }
@media (max-width:1050px){.trend-alert-rules{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:650px){.trend-alert-rules{grid-template-columns:1fr}.trend-alert-topline label,.trend-alert-thresholds label{width:100%;justify-content:space-between}.trend-alert-topline input[type="time"]{width:105px}}

/* ===== V28 professional signal center ===== */
.trend-alert-toolbar,.trend-alert-options,.trend-alert-record-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.trend-alert-toolbar label,.trend-alert-param-grid label{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted)}
.trend-alert-toolbar input[type="number"]{width:68px}.trend-alert-toolbar input[type="time"]{width:108px}
.trend-alert-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);padding-bottom:8px}
.trend-alert-tabs button{border:0;background:transparent;color:var(--muted);padding:7px 12px;border-radius:9px;cursor:pointer}
.trend-alert-tabs button.active{background:var(--soft);color:var(--text);font-weight:700}
.trend-alert-param-grid{display:grid;grid-template-columns:repeat(5,minmax(120px,1fr));gap:9px}
.trend-alert-param-grid label{justify-content:space-between;border:1px solid var(--line);background:var(--panel);padding:8px 10px;border-radius:10px}
.trend-alert-param-grid input{width:70px}.trend-alert-help{margin:8px 0 0;color:var(--muted);font-size:12px}
.trend-alert-options{margin-top:10px}.trend-alert-status{justify-content:space-between;flex-wrap:wrap}.trend-alert-status [data-alert-quality]{font-weight:700;color:var(--primary)}
.trend-alert-history-item{padding:10px!important;border-left:3px solid var(--primary)!important}.trend-alert-history-item.is-hidden{opacity:.56}
.trend-alert-history-item>div:first-child{display:flex;gap:8px;align-items:center}.trend-alert-history-item em{margin-left:auto;font-style:normal;font-size:11px;color:var(--primary);font-weight:700}
.trend-alert-history-actions{display:flex;gap:6px;margin-top:7px}.trend-alert-history-actions button{border:1px solid var(--line);background:var(--soft);color:var(--muted);border-radius:7px;padding:4px 8px;font-size:11px;cursor:pointer}
.trend-signal-modal-layer{position:fixed;inset:0;z-index:99999;background:transparent;display:flex;align-items:flex-end;justify-content:flex-end;padding:22px;pointer-events:none}
.trend-signal-modal{pointer-events:none;width:min(430px,calc(100vw - 28px));background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:18px;box-shadow:0 18px 55px rgba(0,0,0,.22);padding:0 18px 18px;animation:signalModalIn .28s ease}
.trend-signal-modal header{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--line);font-weight:800}.trend-signal-modal header button{border:0;background:var(--soft);border-radius:9px;width:32px;height:32px;font-size:20px;cursor:pointer;color:var(--text)}
.trend-signal-modal h3{margin:8px 0 3px;font-size:19px}.trend-signal-modal p{margin:8px 0;color:var(--muted)}.trend-signal-modal .trend-signal-issue{font-size:12px}
.trend-signal-score{float:right;width:76px;height:76px;border-radius:50%;display:grid;place-content:center;text-align:center;background:color-mix(in srgb,var(--primary) 13%,transparent);color:var(--primary);margin:14px 0 8px 14px}.trend-signal-score strong{font-size:24px}.trend-signal-score small{font-size:10px}
.trend-signal-modal dl{clear:both;margin:14px 0;display:grid;gap:8px}.trend-signal-modal dl div{display:grid;grid-template-columns:72px 1fr;gap:8px;font-size:12px}.trend-signal-modal dt{color:var(--muted)}.trend-signal-modal dd{margin:0}
.trend-signal-modal footer{display:flex;justify-content:flex-end;gap:8px}.trend-signal-modal footer button{border:1px solid var(--line);background:var(--soft);color:var(--text);border-radius:10px;padding:8px 13px;cursor:pointer}.trend-signal-modal footer .primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.three-auto-kline{height:680px;min-height:560px}
@keyframes signalModalIn{from{transform:translateY(18px);opacity:0}to{transform:none;opacity:1}}
@media(max-width:1050px){.trend-alert-param-grid{grid-template-columns:repeat(3,minmax(120px,1fr))}.three-auto-kline{height:620px}}
@media(max-width:650px){.trend-alert-param-grid{grid-template-columns:1fr 1fr}.trend-signal-modal-layer{padding:10px}.trend-alert-toolbar label{width:100%;justify-content:space-between}.three-auto-kline{height:560px;min-height:480px}}
.trend-alert-param-grid label>span:first-child{display:flex;flex-direction:column;align-items:flex-start;gap:2px;line-height:1.25}
.trend-alert-param-grid label>span:first-child>small{display:block;color:var(--muted);font-size:10px;font-weight:400;max-width:190px}
.trend-alert-input-unit{display:flex;align-items:center;gap:5px}.trend-alert-input-unit small{color:var(--muted)}


/* ===== V31 professional non-blocking signal center ===== */
.trend-signal-modal-group{width:min(520px,calc(100vw - 28px))}
.trend-signal-group-list{clear:both;display:grid;gap:8px;max-height:min(52vh,440px);overflow:auto;margin:14px 0;padding-right:3px}
.trend-signal-group-item{border:1px solid var(--line);background:var(--soft);border-radius:12px;padding:10px 11px}
.trend-signal-group-item p{margin:6px 0;color:var(--text);font-size:13px}
.trend-signal-group-item>small{display:block;color:var(--muted);font-size:11px}
.trend-signal-group-head{display:flex;align-items:center;gap:8px}
.trend-signal-group-head strong{font-size:14px}.trend-signal-group-head em{margin-left:auto;font-style:normal;color:var(--primary);font-size:11px;font-weight:700}
.trend-signal-index{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--primary);color:#fff;font-size:11px;font-weight:700;flex:0 0 auto}
@media(max-width:650px){.trend-signal-modal-group{width:calc(100vw - 20px)}.trend-signal-group-list{max-height:48vh}}

.trend-signal-modal button,.trend-signal-modal a{pointer-events:auto}.trend-signal-modal-group-list{pointer-events:auto}.trend-signal-nonblocking{box-shadow:0 12px 40px rgba(0,0,0,.18);backdrop-filter:blur(12px);background:color-mix(in srgb,var(--panel) 94%,transparent)}.trend-alert-param-grid select{min-width:92px}.trend-alert-options .trend-alert-switch{background:color-mix(in srgb,var(--panel) 96%,var(--primary) 4%)}