/* 乐28清爽 · shared visual skin. Layout remains owned by each page stylesheet. */
body {
  --skin-blue: #1f5eff;
  --skin-blue-hover: #194edb;
  --skin-red: #f23b3b;
  --skin-text: #202b3e;
  --skin-muted: #6e7c90;
  --skin-line: #dfe4eb;
  --skin-grid: #e5e9ef;
  --skin-head: #f5f6f8;
  --skin-input: #fff;
  --skin-soft: #f0f2f5;
  --skin-radius: 5px;
  --skin-font: "Microsoft YaHei UI", "Microsoft YaHei", "Segoe UI", sans-serif;
  --skin-title-weight: 600;
  --skin-table-weight: 400;
  --skin-header-weight: 500;
  --primary: var(--skin-blue);
  --primary-dark: var(--skin-blue-hover);
  --red: var(--skin-red);
  --text: var(--skin-text);
  --muted: var(--skin-muted);
  --line: var(--skin-line);
  --blue-soft: #eef3ff;
  --red-soft: #fff0f0;
  --radius: var(--skin-radius);
  --shadow: none;
  font-family: var(--skin-font);
  color: var(--skin-text);
}

/* Typography changes retain the original line boxes and existing control sizes. */
button, input, select, textarea { font-family: inherit; }
.mono, .number, td.numeric { font-family: var(--skin-font); font-variant-numeric: tabular-nums; }
.page-heading h1 { font-size: 22px; line-height: 39.2px; font-weight: 600; letter-spacing: 0; color: var(--text); }
.stats-main .page-heading h1 { font-size: 22px; line-height: 28px; }
.omission-main .page-heading h1, .streaks-main .page-heading h1 { font-size: 22px; line-height: 33.6px; }
.tr-heading h1 { font-size: 22px; line-height: 34px; font-weight: 600; color: var(--text); }
.panel-head h2, .stat-section h2, .stat-dashboard h2, .ball-dashboard h2, .other-dashboard h2 { font-weight: 600; color: var(--text); }
.login-form h2 { font-weight: 600; color: var(--text); }
.muted, .breadcrumb, .clock, .footer, .nav-label { color: var(--muted); }

/* Shell: the sidebar, top bar, and content geometry are untouched. */
.sidebar, .topbar, .sidebar-bottom, .nav-submenu { border-color: var(--line); }
#main:focus-visible { outline: none; }
#nav > a, #nav .nav-group-toggle, #nav .nav-submenu a { color: var(--muted); }
#nav > a, #nav .nav-group-toggle { border-radius: var(--skin-radius); }
#nav > a:hover, #nav .nav-group-toggle:hover, #nav .nav-submenu a:hover { background: #f7f8fa; color: var(--text); }
#nav > a.active, #nav .nav-group-toggle.active, #nav .nav-submenu a.active { background: var(--skin-soft); color: var(--text); font-weight: 600; }
#nav > a > svg, #nav .nav-group-toggle > svg:first-child { background: #f5f6f8; color: var(--muted); border-radius: var(--skin-radius); }
#nav > a.active > svg, #nav .nav-group-toggle.active > svg:first-child { background: #e7ebf1; color: var(--primary); }
.brand { color: var(--text); }
.brand-number { color: var(--primary); }
.badge.neutral { background: var(--skin-soft); color: var(--muted); }

/* Shared surfaces, tables and controls. Never replace a component's spacing. */
.panel, .metric, .counter, .account-unified, .detail-overview-row { border-color: var(--line); border-radius: var(--skin-radius); box-shadow: none; }
.panel-head, .table-footer, .filters, .table-caption, .tabs { border-color: var(--line); }
button.button, a.button, button.primary, .primary, .pager button, .login-form input, .account-password input { border-radius: var(--skin-radius); }
.button { border-color: var(--line); color: var(--text); }
button.primary, .primary { background: var(--primary); border-color: var(--primary); color: #fff; }
button.primary:hover, .primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.button:hover, .pager button:hover { background: var(--skin-head); }
body :is(#app, #login-screen, dialog) input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]),
body :is(#app, #login-screen, dialog) textarea,
body :is(#app, #login-screen, dialog) select {
  color: var(--text);
  background-color: var(--skin-input);
  border-color: var(--line);
  border-radius: var(--skin-radius);
  box-shadow: none;
  font-family: var(--skin-font);
}
body :is(#app, #login-screen, dialog) input::placeholder,
body :is(#app, #login-screen, dialog) textarea::placeholder { color: #8b96a6; }
body :is(#app, #login-screen, dialog) input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]):focus,
body :is(#app, #login-screen, dialog) input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]):focus-visible,
body :is(#app, #login-screen, dialog) textarea:focus,
body :is(#app, #login-screen, dialog) textarea:focus-visible,
body :is(#app, #login-screen, dialog) select:focus,
body :is(#app, #login-screen, dialog) select:focus-visible,
body :is(#app, #login-screen, dialog) select:open {
  border-color: var(--line);
  outline: 0;
  outline-offset: 0;
  box-shadow: none;
}
body :is(#app, #login-screen, dialog) input:disabled,
body :is(#app, #login-screen, dialog) textarea:disabled,
body :is(#app, #login-screen, dialog) select:disabled { background: #f7f8fa; color: var(--muted); }
/* Keep keyboard location visible without a second border around fields. */
body :is(#app, #login-screen, dialog) input:not([type=checkbox]):not([type=radio]):not([type=range]):focus-visible,
body :is(#app, #login-screen, dialog) textarea:focus-visible,
body :is(#app, #login-screen, dialog) select:focus-visible { background-color: #f5f6f8; }
button:focus-visible, a:focus-visible { outline-color: #a4afbe; }
th { background: var(--skin-head); color: var(--muted); font-weight: 500; border-color: var(--skin-grid); }
td { border-color: var(--skin-grid); }
tbody tr:hover { background: #fafbfc; }
.notice:not(.warning):not(.error) { background: #f7f9fc; border-color: var(--line); color: var(--muted); border-radius: var(--skin-radius); }

/* Home and trend chart keep the existing red/blue data semantics. */
.classic-home { --classic-border: var(--line); --classic-blue: var(--primary); color: var(--text); }
.classic-card, .classic-history { border-color: var(--line); border-radius: var(--skin-radius); }
.classic-card-top, .classic-countdown-meta, .classic-draw-header p span { color: var(--muted); }
.classic-history-heading h2 { color: var(--text); font-weight: 600; }
.classic-history-title span, .classic-history-tools label, .classic-recent > span { color: var(--muted); }
.classic-history-tools a { color: var(--primary); background: #fafbfc; border-radius: var(--skin-radius); }
.classic-total, .classic-history-ball { background: var(--primary); }
.classic-home .classic-scratch-toggle { border-color: var(--line); border-radius: var(--skin-radius); color: var(--muted); }
.classic-home .classic-scratch-toggle:hover { background: var(--skin-head); border-color: var(--line); }
.classic-history th, .classic-home table thead th { background: var(--skin-head); border-color: var(--skin-grid); color: var(--muted); font-weight: 500; }
.classic-history td, .classic-home table td { border-color: var(--skin-grid); }
.trends-page { --tr-blue: var(--primary); --tr-red: var(--red); --tr-line: var(--skin-grid); color: var(--text); }
.tr-scroll { border-color: var(--line); }
.tr-table thead th { background: var(--skin-head); color: var(--muted); font-weight: 500; }
.tr-controls { color: var(--muted); }
.tr-controls button { border-color: var(--line); color: var(--muted); }
.tr-controls button:hover { background: var(--skin-head); }
.tr-controls button.active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* Statistics share neutral surfaces and retain each chart's layout and scale. */
.draw-statistics { --stat-border: var(--line); --stat-blue: var(--primary); --stat-muted: var(--muted); color: var(--text); }
.ball-dashboard, .other-dashboard { color: var(--text); }
.bp-position, .bp-metric, .bp-number, .od-card, .od-number, .sd-number, .stat-count { border-color: var(--skin-grid); border-radius: var(--skin-radius); }
.bp-position, .od-card { border-color: var(--line); }
.bp-position-head, .od-position .od-heading { border-color: var(--skin-grid); }
.bp-combo, .sd-combo-item, .bp-number, .od-number, .sd-number, .stat-count { background: #fafbfc; }
.bp-position-head small, .bp-number > span, .bp-heading > span,
.ball-dashboard small, .other-dashboard small, .od-heading > span, .od-percentage, .od-number .stat-label { color: var(--muted); }
.sd-metric > strong, .stat-summary strong { color: var(--text); font-weight: 600; }
.sd-combo-item strong, .bp-metric > strong, .bp-combo strong, .bp-number strong, .od-number strong { font-weight: 600; }
.bp-number strong, .od-number strong, .sd-number strong { color: var(--primary); }
.sd-meter-value, .bp-meter .bp-meter-fill, .sd-bar-high { fill: var(--primary); }
.sd-red .sd-meter-value, .bp-meter.red .bp-meter-fill { fill: var(--red); }
.sd-chart-grid, .bp-chart-grid { stroke: var(--skin-grid); }
.stats-main .stats-panel > .tabs { border-color: var(--line); }
.stats-main .tabs button.active { background: var(--skin-soft); color: var(--text); border-bottom-color: var(--primary); }
.stat-categories button, .stat-scopes button { color: var(--muted); }
.stat-categories button.active, .stat-scopes button.active { background: var(--skin-soft); color: var(--text); border-color: transparent; }
.omission-page { --om-blue: var(--primary); --om-red: var(--red); --om-text: var(--text); --om-muted: var(--muted); --om-border: var(--skin-grid); }
.streaks-page { --st-blue: var(--primary); --st-red: var(--red); --st-line: var(--skin-grid); color: var(--text); }
.om-table-wrap, .st-table-wrap { border-color: var(--line); }
.omission-page .om-table thead th, .st-table thead th { background: var(--skin-head); color: var(--muted); font-weight: 500; }
.omission-page .om-dimensions button, .streaks-page .st-types button { color: var(--muted); }
.omission-page .om-dimensions button.active, .streaks-page .st-types button.active { color: var(--text); background: var(--skin-soft); }
.omission-page .om-scopes button { color: var(--muted); background: #fff; border-color: var(--line); }
.omission-page .om-scopes button.active { color: #fff; border-color: var(--primary); background: var(--primary); }
.omission-page .om-table tbody tr:hover > *, .st-table tbody tr:hover > td { background: #fafbfc; }
.st-table td { color: var(--text); }
.st-filters label, .st-table .st-status, .st-footer, .st-missing, .st-omitted, .st-unavailable { color: var(--muted); }
.st-table .st-count, .st-table .st-status.active { color: var(--primary); }
.om-number { background: var(--primary); }

/* Algorithm list and its detail dialog. */
.hall-panel table { border-color: var(--line); }
.hall-panel th, .hall-panel td { border-color: var(--skin-grid); }
.hall-panel th { background: var(--skin-head); color: var(--muted); font-weight: 500; }
.hall-panel .hall-category-button, .hall-panel .hall-window-button { color: var(--muted); }
.hall-panel .hall-category-button.active, .hall-panel .hall-window-button.active { background: var(--skin-soft); color: var(--text); font-weight: 600; }
.hall-score, .hall-streak { font-weight: 600; }
.detail-rates, .detail-rates > div, .detail-overview-row, .detail-predict-status { border-color: var(--skin-grid); }
.detail-rates strong { color: var(--text); font-weight: 600; }
.detail-rates p, .detail-predict-status, .detail-predict-main > p span { color: var(--muted); }
#algorithm-history th { background: var(--skin-head); color: var(--muted); border-color: var(--skin-grid); font-weight: 500; }
#algorithm-history td { color: var(--text); border-color: var(--skin-grid); }
#algorithm-history .detail-prediction-tag, #algorithm-history .badge.good,
#dialog-body .detail-overview-row .detail-prediction-tag { background: var(--red); }
#algorithm-history .detail-prediction-tag.blue, #algorithm-history .badge.bad,
#dialog-body .detail-overview-row .detail-prediction-tag.blue { background: var(--primary); }

/* Account, authentication, Telegram settings and remaining configuration dialogs. */
.account-summary strong, .account-unified h2 { color: var(--text); font-weight: 600; }
.account-summary p, .account-stats span, .account-group-label, .account-entry small { color: var(--muted); }
.account-entry { border-color: var(--skin-grid); }
.account-entry:hover, .account-stats > a:hover, .account-stats > button:hover { background: #fafbfc; }
.account-logout { color: var(--red); background: var(--red-soft); }
.account-avatar { border-color: var(--line); }
dialog { color: var(--text); border-color: var(--line); border-radius: var(--skin-radius); box-shadow: 0 10px 32px #17233818; font-family: var(--skin-font); }
dialog::backdrop { background: #17233844; backdrop-filter: none; }
body :is(#flight-settings-dialog, #flight-config-dialog) { color: var(--text); border-color: var(--line); border-radius: var(--skin-radius); box-shadow: 0 10px 32px #17233818; }
body :is(#flight-settings-dialog, #flight-config-dialog)::backdrop { background: #17233844; backdrop-filter: none; }
body :is(#flight-settings-dialog, #flight-config-dialog) :is(button, summary):focus-visible { outline-color: #a4afbe; }
.flight-settings-head h2 { color: var(--text); font-weight: 600; }
.dialog-header, .flight-config-header, .flight-config-actions, .flight-config-tabs { border-color: var(--line); }
.dialog-header h2, .flight-config-header h2 { font-weight: 600; color: var(--text); }
.flight-main { --flight-blue: var(--primary); --flight-text: var(--text); --flight-muted: var(--muted); --flight-line: var(--line); }
.flight-direction, .flight-message-order, .flight-risk-control, .flight-setting-block { border-color: var(--line); }
.flight-direction label:has(input:checked), .flight-message-order label:has(input:checked) { color: var(--text); background: var(--skin-soft); }
.flight-positive { color: var(--red); }
.flight-negative { color: var(--primary); }
.scheme-picker { --scheme-fill: #f7f8fa; --scheme-border: var(--line); }
.scheme-picker button:focus-visible { outline-color: #a4afbe; }

/* Compensate the new font's inline-number baseline, preserving desktop row height. */
@media (min-width: 768px) {
  .omission-page .om-table tbody th { line-height: 24px; }
}

@media (max-width: 767px) {
  .page-heading h1 { line-height: 33.6px; }
  .stats-main .page-heading h1 { line-height: 28px; }
  .omission-main .page-heading h1, .streaks-main .page-heading h1 { line-height: 30.8px; }
}

/* Approved option 1: hangup tables and runtime/create dialogs. */
.hu-page,.hu-dialog{font-family:var(--skin-font);color:var(--skin-text);--text:var(--skin-text);--muted:var(--skin-muted);--line:var(--skin-line);--hu-grid:var(--skin-grid);--primary:var(--skin-blue);--primary-dark:var(--skin-blue-hover);--red:var(--skin-red)}
.hu-heading h1{font-size:22px;font-weight:var(--skin-title-weight);color:var(--skin-text)}
.hu-funds-heading h2,.hu-tracking-toggle,.hu-page .flight-records-heading h2{font-size:15px;font-weight:var(--skin-title-weight);color:var(--skin-text)}
.hu-task-select,.hu-tracking td,.hu-funds-table td{color:var(--skin-text)}
.hu-task-select{font-size:13px;font-weight:400}
.hu-task-select[aria-pressed=true]{color:var(--skin-text);font-weight:600}
.hu-funds-table td{font-size:17px;font-weight:600}
.hu-funds-table td.positive{color:var(--skin-red)}
.hu-funds-heading>span,.hu-config-name{color:var(--skin-muted);font-size:12px}
.hu-table-wrap,.hu-funds-scroll,.hu-page .flight-record-panel{border-color:var(--skin-line);border-radius:var(--skin-radius)!important;box-shadow:none}
.hu-tracking th,.hu-funds-table th,.hu-page .flight-record-panel th{background:var(--skin-head);color:var(--skin-muted);font-size:12px;font-weight:var(--skin-header-weight);border-color:var(--skin-grid)}
.hu-tracking td,.hu-funds-table td,.hu-page .flight-record-panel td{background:#fff;border-color:var(--skin-grid);font-weight:var(--skin-table-weight)}
.hu-funds-table td{font-weight:600}
.hu-tracking th,.hu-tracking td{border-right-color:var(--skin-grid)}
.hu-table-wrap tr.hu-task-selected td,.hu-table-wrap tbody tr:hover td{background:#fff}
.hu-task-actions .hu-task-start,.hu-button.hu-add-primary,.hu-create-grid button[aria-pressed=true],.hu-create-tabs button[aria-pressed=true]{background:var(--skin-blue);border-color:var(--skin-blue);color:#fff;border-radius:var(--skin-radius)}
.hu-task-actions .hu-task-start:hover,.hu-button.hu-add-primary:hover{background:var(--skin-blue-hover);border-color:var(--skin-blue-hover)}
.hu-task-actions .hu-task-stop{background:var(--skin-red);border-color:var(--skin-red);color:#fff;border-radius:var(--skin-radius)}
.hu-task-actions .hu-task-stop:hover{filter:brightness(.94);background:var(--skin-red)}
.hu-section-head .hu-config-entry{color:var(--skin-muted);background:#fff;border-color:var(--skin-line);border-radius:var(--skin-radius);font-weight:400}
.hu-heading .hu-link,.hu-dialog .hu-link{color:var(--skin-muted)}
.hu-button,.hu-task-actions button,.hu-link,.hu-page .flight-records-heading select,.hu-dialog button,.hu-dialog input,.hu-dialog select{font-family:var(--skin-font)}
.hu-page .flight-records-heading select,.hu-dialog select{color:var(--skin-text);background:var(--skin-input);border-color:var(--skin-line);border-radius:var(--skin-radius);box-shadow:none;font-size:12px}
.hu-dialog select:focus,.hu-dialog select:focus-visible,.hu-dialog select:open,.hu-page select:focus,.hu-page select:focus-visible,.hu-page select:open{outline:0;box-shadow:none;border-color:var(--skin-line)}
.hu-page .flight-record-panel .hu-record-empty{color:var(--skin-muted);font-size:12px;background:#fff}
.hu-config-dialog{border-color:var(--skin-line);border-radius:var(--skin-radius);box-shadow:0 10px 32px #17233818;background:#fff}
.hu-config-dialog::backdrop{background:#17233844;backdrop-filter:none}
.hu-config-dialog .hu-dialog-head{border-color:var(--skin-line);background:#fff}
.hu-config-dialog .hu-dialog-head h2{font-size:16px;color:var(--skin-text);font-weight:var(--skin-title-weight)}
.hu-config-dialog [data-hu-close]{color:var(--skin-muted);background:transparent}
.hu-config-dialog .scheme-task-page{color:var(--skin-text);--line:var(--skin-line);--text:var(--skin-text);--muted:var(--skin-muted);--primary:var(--skin-blue);--primary-dark:var(--skin-blue-hover)}
.scheme-task-page h2{font-size:13px;font-weight:600;color:var(--skin-text)}
.scheme-task-page label,.scheme-task-page .st-limit>span,.scheme-task-page .st-trigger-line{font-size:12px;color:var(--skin-muted);font-weight:400}
.scheme-task-page input,.scheme-task-page select{font-size:13px;font-weight:400;color:var(--skin-text);border-color:var(--skin-line);background:var(--skin-input);border-radius:var(--skin-radius);box-shadow:none}
.scheme-task-page input:focus,.scheme-task-page input:focus-visible{border-color:var(--skin-line);outline:0;box-shadow:none}
.scheme-task-page input:disabled,.scheme-task-page select:disabled{color:var(--skin-muted);background:#f7f8fa}
.scheme-task-page .st-direction,.scheme-task-page .st-risk-control,.scheme-task-page .st-trigger-control{border-color:var(--skin-line);border-radius:var(--skin-radius)}
.scheme-task-page .st-direction button{color:var(--skin-muted);font-size:12px;background:#fff;font-weight:400}
.scheme-task-page .st-direction button+button{border-color:var(--skin-line)}
.scheme-task-page .st-direction button[aria-pressed=true]{background:var(--skin-soft);color:var(--skin-text);font-weight:600}
.scheme-task-page .st-band+.st-band,.scheme-task-page .st-actions,.scheme-task-page .st-switch-holder{border-color:var(--skin-line)}
.scheme-task-page .st-switch{background:#c7d0dc}
.scheme-task-page .st-switch[aria-checked=true]{background:var(--skin-blue)}
.scheme-task-page .st-save{border-color:var(--skin-blue);background:var(--skin-blue);border-radius:var(--skin-radius);font-size:13px}
.scheme-task-page .st-save:hover{background:var(--skin-blue-hover)}
.scheme-task-page .st-delete{color:var(--skin-red);border-color:var(--skin-line);border-radius:var(--skin-radius);background:#fff}
.hu-create-dialog{font-family:var(--skin-font);color:var(--skin-text);border-color:var(--skin-line);border-radius:var(--skin-radius)}
.hu-create-name input{font-family:var(--skin-font);color:var(--skin-text);border-color:var(--skin-line);background:var(--skin-input);border-radius:var(--skin-radius)}
.hu-create-picks,.hu-create-tabs,.hu-create-footer,.hu-create-dialog .hu-dialog-head{border-color:var(--skin-line)}
.hu-create-grid button{background:var(--skin-head);color:var(--skin-text)}
.hu-create-grid button[aria-pressed=true]{background:var(--skin-blue);color:#fff}
@media(min-width:768px){body :is(#app,dialog.hu-dialog) .hu-page select,body dialog.hu-dialog select{font-size:12px}}