/* ===== RESET ===== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

/* ===== DESIGN TOKENS (DESIGN.md) ===== */
:root {
  --nav-w: 248px;
  --top-h: 58px;

  /* Primary — China Red */
  --primary: #c82121;
  --primary-light: #ffdad6;
  --primary-muted: rgba(200, 33, 33, .08);
  --on-primary: #ffffff;

  /* Surface layers */
  --bg: #f8f9fa;
  --card: #ffffff;
  --surface-low: #f3f4f5;
  --surface: #edeeef;
  --surface-high: #e7e8e9;

  /* Text */
  --text: #191c1d;
  --text-secondary: #5c403d;
  --muted: #6c757d;
  --hint: #906f6b;

  /* Borders */
  --border: #e9ecef;
  --border-strong: #d0cece;

  /* Accent colours */
  --gold: #c8960c;
  --gold-bg: rgba(200, 150, 12, .08);
  --lottery-blue: #2563eb;
  --lottery-orange: #d97706;
  --lottery-green: #16a34a;

  /* Radii (Soft) */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 8px;

  /* Elevation */
  --shadow: 0 2px 8px rgba(26, 30, 38, .04);
  --shadow-hover: 0 4px 16px rgba(26, 30, 38, .08);
}

[data-theme="dark"] {
  --bg: #0f1012;
  --card: #1a1c1e;
  --surface-low: #1f2123;
  --surface: #242628;
  --surface-high: #2a2c2f;
  --text: #e8eaed;
  --text-secondary: #c4a8a5;
  --muted: #8f9193;
  --hint: #7a6866;
  --border: #2e3032;
  --border-strong: #3a3c3f;
  --primary-muted: rgba(200, 33, 33, .12);
  --gold-bg: rgba(200, 150, 12, .1);
}

/* ===== BASE ===== */
html,
body {
  height: 100%;
  font-family: "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.65;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
}

/* ===== TOP NAV ===== */
.topnav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  height: var(--top-h);
  background: var(--card);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px 0 20px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--text)
}

.logo-mark {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: -.02em;
}

.logo-name {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--text)
}

.logo-sub {
  font-size: 14px;
  color: var(--muted);
  font-weight: 400
}

.topnav-right {
  display: flex;
  align-items: center;
  gap: 8px
}

.btn {
  padding: 7px 16px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  transition: all .15s;
  font-family: inherit;
}

.btn:hover {
  background: var(--surface-low);
  border-color: var(--border-strong)
}

.btn-accent {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary)
}

.btn-accent:hover {
  background: #a91a1a;
  border-color: #a91a1a
}

.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 17px;
  transition: all .15s;
}

.icon-btn:hover {
  background: var(--surface-low);
  color: var(--text)
}

.menu-btn {
  display: none
}

/* ===== SIDEBAR ===== */
.sidebar {
  position: fixed;
  top: var(--top-h);
  left: 0;
  bottom: 0;
  width: var(--nav-w);
  background: var(--card);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 100;
  transition: transform .25s ease;
}

.sidebar::-webkit-scrollbar {
  width: 3px
}

.sidebar::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 2px
}

.sidebar-inner {
  padding: 10px 10px 24px
}

.nav-section-label {
  padding: 12px 12px 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  color: var(--hint);
  text-transform: uppercase;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  transition: background .12s;
  user-select: none;
  color: var(--text);
}

.nav-item:hover {
  background: var(--surface-low)
}

.nav-item.active {
  background: var(--primary-muted);
  color: var(--primary);
  font-weight: 500
}

.nav-item i {
  font-size: 16px;
  flex-shrink: 0;
  color: var(--hint);
  width: 20px;
  text-align: center
}

.nav-item.active i {
  color: var(--primary)
}

.nav-item.is-disabled,
.nav-sub-item.is-disabled {
  opacity: .46;
  cursor: not-allowed;
}

.nav-item.is-disabled:hover,
.nav-sub-item.is-disabled:hover {
  background: transparent;
  color: var(--muted);
}

.nav-item .chev {
  margin-left: auto;
  font-size: 13px;
  color: var(--hint);
  transition: transform .2s
}

.nav-item.is-open .chev {
  transform: rotate(180deg)
}

.nav-sub {
  max-height: 0;
  overflow: hidden;
  transition: max-height .28s ease
}

.nav-sub.open {
  max-height: 1000px
}

.nav-sub-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px 7px 38px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13.5px;
  color: var(--muted);
  transition: all .12s;
}

.nav-sub-item:hover {
  background: var(--surface-low);
  color: var(--text)
}

.nav-sub-item.active {
  color: var(--primary) !important;
  background: var(--primary-muted)
}

.vip {
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 2px;
  background: #fef3c7;
  color: #92400e;
  margin-left: auto;
  flex-shrink: 0;
  border: 1px solid #fde68a;
}

[data-theme="dark"] .vip {
  background: rgba(200, 150, 12, .15);
  color: #fcd34d;
  border-color: rgba(200, 150, 12, .25)
}

/* ===== MAIN CONTENT AREA ===== */
.main {
  margin-left: var(--nav-w);
  margin-top: var(--top-h);
  padding: 28px 32px 48px;
  min-height: calc(100vh - var(--top-h));
}

/* 大屏 1440px 居中约束 */
.main-inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* ===== SECTION HEADER ===== */
.sec-head {
  margin-bottom: 16px
}

.sec-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.01em;
  margin-bottom: 5px;
  color: var(--text);
}

.sec-meta {
  font-size: 12.5px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.dot-live {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
  animation: blink 2s infinite;
}

@keyframes blink {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .35
  }
}

.status-ok {
  color: #16a34a;
  font-weight: 600
}

/* ===== BENTO GRID ===== */
.bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 32px
}

.lcard {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  transition: box-shadow .18s, border-color .18s;
}

.lcard:hover {
  box-shadow: var(--shadow-hover);
  border-color: var(--border-strong)
}

.lcard-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px
}

.lottery-tag {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: var(--radius-sm);
  letter-spacing: .04em;
}

.t-ssq {
  background: #fde8eb;
  color: #9b1924
}

.t-dlt {
  background: #fef3c7;
  color: #92400e
}

.t-kl8 {
  background: #dcfce7;
  color: #14532d
}

[data-theme="dark"] .t-ssq {
  background: rgba(155, 25, 36, .2);
  color: #fca5a5
}

[data-theme="dark"] .t-dlt {
  background: rgba(146, 64, 14, .2);
  color: #fcd34d
}

[data-theme="dark"] .t-kl8 {
  background: rgba(20, 83, 45, .2);
  color: #86efac
}

.issue {
  font-size: 14px;
  color: var(--muted);
  font-family: "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

.balls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 10px 0 12px
}

.ball {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
  font-family: "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  letter-spacing: -.02em;
}

.b-red {
  background: var(--primary)
}

.b-blue {
  background: var(--lottery-blue)
}

.b-orange {
  background: var(--lottery-orange)
}

.b-green {
  background: var(--lottery-green)
}

.b-plus {
  font-size: 15px;
  color: var(--hint);
  margin: 0 2px
}

.draw-date {
  font-size: 12.5px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px
}

.draw-date i {
  font-size: 13px;
  color: var(--hint)
}

/* ===== SECTION SPACING ===== */
.section {
  margin-bottom: 32px
}

/* ===== HONOR CARDS ===== */
.honor-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 32px
}

.hcard {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow);
}

.hcard-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px
}

.trophy-ico {
  font-size: 20px;
  color: var(--gold)
}

.hcard-amt {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--text);
  font-family: "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-variant-numeric: tabular-nums;
}

.pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px
}

.pill {
  font-size: 0.9rem;
  padding: 3px 9px;
  border-radius: var(--radius-sm);
  background: var(--surface-low);
  color: var(--muted);
  border: 1px solid var(--border);
}

.hcard-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  flex-wrap: wrap
}

.uid {
  font-size: 14px;
  color: var(--hint);
  display: flex;
  align-items: center;
  gap: 4px
}

.uid i {
  font-size: 12px
}

.hit {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--primary)
}

.expected{
  display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
    margin-bottom: 8px;
}

.expected-font {
    font-size: 14px;
    font-weight: 700;
    padding: 4px 7px;
    border-radius: 4px;
    background: var(--primary);
    color: #fff;
    margin-right: 1.05em;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;

}

.home-help-combo-pill {
  max-width: 100%;
  margin-bottom: 10px
}

.home-help-plan-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px
}

.home-help-plan-name {
  color: #2563eb;
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap
}

.home-help-expected {
  color: var(--primary);
  font-size: 14px;
  font-weight: 900;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap
}

.home-help-combos,
.home-help-combo-pill .home-help-combo-lines {
  max-width: 520px;
  white-space: normal;
}

.home-help-table td:last-child {
  white-space: normal;
  min-width: 260px;
}

.home-help-combo-lines {
  display: grid;
  gap: 6px;
  color: var(--text);
  line-height: 1.55;
  word-break: break-all
}

.home-help-combo-line {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px
}

.home-help-ball-plus {
  color: var(--hint);
  font-size: 12px;
  font-weight: 900;
  margin: 0 2px
}

/* ===== TABLE ===== */
.table-wrap {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.htable {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px
}

.htable th {
  padding: 11px 16px;
  text-align: left;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .05em;
  text-transform: uppercase;
  background: var(--surface-low);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.htable td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  white-space: nowrap
}

.htable tr:last-child td {
  border-bottom: none
}

.htable tbody tr:hover td {
  background: var(--surface-low)
}

.rank {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 700;
  color: #fff;
}

.r1 {
  background: #c8960c
}

.r2 {
  background: #7e8a8a
}

.r3 {
  background: #a0522d
}

.rn {
  background: var(--surface-high);
  color: var(--muted)
}

.amt-cell {
  font-weight: 700;
  color: var(--primary);
  font-family: "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-variant-numeric: tabular-nums;
}

.mini-balls {
  display: inline-flex;
  gap: 3px;
  align-items: center
}

.mini-ball {
  width: 21px;
  height: 21px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  color: #fff;
  font-weight: 700;
}

#home-latest-help-winners .mini-ball,
#home-help-rank-body .mini-ball {
  width: 24px;
  height: 24px;
  font-size: 0.8rem;
  font-weight: 400;
}

.mb-r {
  background: var(--primary)
}

.mb-b {
  background: var(--lottery-blue)
}

.mb-o {
  background: var(--lottery-orange)
}

.mb-g {
  background: #16a34a
}

/* ===== OVERLAY ===== */
#overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .4);
  z-index: 99
}

/* ===== PAGE HEADER ===== */
.page-header {
  margin-bottom: 24px
}

.page-breadcrumb {
  font-size: 12.5px;
  color: var(--hint);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.page-breadcrumb i {
  font-size: 12px
}

.page-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap
}

.page-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text)
}

.page-badge {
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--primary-muted);
  color: var(--primary);
  border: 1px solid rgba(200, 33, 33, .15);
}

/* ===== TIP BOX ===== */
.tip-box {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 22px;
  border-left: 3px solid #3b82f6;
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.85;
}

.tip-box .tip-title {
  font-size: 14px;
  font-weight: 700;
  color: #3b82f6;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.tip-row {
  margin-bottom: 5px
}

.tip-row b {
  color: var(--text);
  font-weight: 600
}

.tip-note {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  color: var(--hint);
}

/* ===== TAB BAR ===== */
.tab-bar {
  display: flex;
  gap: 4px;
  margin-bottom: 22px;
  background: var(--surface-low);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px;
}

.tab {
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  color: var(--muted);
  transition: all .15s;
  border: none;
  background: transparent;
  font-family: inherit;
}

.tab:hover {
  color: var(--text)
}

.tab.active {
  background: var(--card);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

/* ===== FORM CARD ===== */
.form-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 18px;
  margin-bottom: 20px;
  box-shadow: var(--shadow);
}

.form-section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.form-section-title i {
  font-size: 17px
}

.form-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  flex-wrap: wrap
}

.form-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  width: 76px;
  flex-shrink: 0;
}

.form-value {
  font-size: 14px;
  color: var(--muted)
}

.form-value b {
  color: var(--primary);
  font-weight: 600
}

/* ===== BUDGET BUTTONS ===== */
.budget-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap
}

.budget-btn {
  padding: 8px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-low);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  color: var(--muted);
  transition: all .15s;
  font-family: inherit;
}

.budget-btn:hover {
  border-color: var(--primary);
  color: var(--primary)
}

.budget-btn.active {
  background: var(--primary-muted);
  border-color: var(--primary);
  color: var(--primary);
  font-weight: 600;
}

.budget-hint {
  font-size: 14px;
  color: var(--hint);
  margin-top: 6px
}

/* ===== SUBMIT BUTTONS ===== */
.ssq-budget-group,
.dlt-budget-group,
.kl8-budget-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap
}

.ssq-budget-hint,
.dlt-budget-hint,
.kl8-budget-hint {
  font-size: 14px;
  color: var(--hint);
  margin-top: 6px
}

.ssq-submit-btn,
.dlt-submit-btn,
.kl8-submit-btn,
.submit-btn {
  padding: 10px 26px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ssq-submit-btn:hover,
.dlt-submit-btn:hover,
.kl8-submit-btn:hover,
.submit-btn:hover {
  background: #a91a1a;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(200, 33, 33, .28);
}

.ssq-submit-btn:active,
.dlt-submit-btn:active,
.kl8-submit-btn:active,
.submit-btn:active {
  transform: none
}

.ssq-submit-btn.loading,
.dlt-submit-btn.loading,
.kl8-submit-btn.loading {
  opacity: .7;
  cursor: not-allowed;
  pointer-events: none;
}

/* ===== RESULTS ===== */
.result-section {
  margin-bottom: 20px
}

.result-label {
  font-size: 14px;
  font-weight: 700;
  color: #16a34a;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.result-label i {
  font-size: 16px
}

.no-result {
  font-size: 13.5px;
  color: var(--hint);
  padding: 12px 0
}

.result-cards {
  display: flex;
  flex-direction: column;
  gap: 10px
}

.result-card {
  background: var(--surface-low);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.result-card:hover {
  border-color: var(--border-strong)
}

.result-type {
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: var(--radius-sm);
  background: var(--primary-muted);
  color: var(--primary);
  flex-shrink: 0;
}

.result-balls {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  flex: 1
}

.result-algo {
  font-size: 11.5px;
  color: var(--hint);
  margin-left: auto;
  white-space: nowrap
}

/* ===== INTRO PAGE ===== */
.intro-overview {
  margin-bottom: 16px;
}

.intro-copy {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 2;
}

.intro-copy b {
  color: var(--text);
  font-weight: 700;
}

.intro-copy a {
  color: var(--primary);
  font-weight: 700;
  text-decoration: none;
  word-break: break-all;
}

.intro-copy a:hover {
  text-decoration: underline;
}

.intro-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.intro-section {
  min-width: 0;
}

.intro-list {
  display: grid;
  gap: 12px;
}

.intro-list div {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--border);
}

.intro-list div:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.intro-list b {
  color: var(--text);
  font-size: 14px;
}

.intro-list span {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.75;
}

.intro-member {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: var(--gold-bg);
  border-color: rgba(200, 150, 12, .24);
}

.intro-member .form-section-title {
  color: var(--gold);
}

.intro-buy-link {
  flex-shrink: 0;
  text-decoration: none;
}

.intro-risk {
  margin-top: 0;
}

.system-help-records,
.ssq-system-records {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.system-help-run-panel {
  border: 1px solid rgba(148, 163, 184, .34);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .95), rgba(248, 250, 252, .88)),
    var(--surface);
  padding: 16px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .08);
}

.system-help-run-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.system-help-run-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: #111827;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  box-shadow: 0 10px 20px rgba(17, 24, 39, .18);
}

.system-help-run-icon i {
  font-size: 19px;
}

.system-help-run-title {
  color: var(--text);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.35;
}

.system-help-run-detail {
  color: var(--muted);
  font-size: 13px;
  margin-top: 3px;
  line-height: 1.5;
}

.system-help-run-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 13px;
}

.system-help-run-metrics span {
  min-height: 30px;
  padding: 6px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-low);
  color: var(--text);
  font-size: 12.5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
}

.system-help-run-metrics b {
  color: var(--hint);
  font-weight: 800;
}

.system-help-run-meter {
  height: 9px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(148, 163, 184, .22);
  margin-top: 15px;
}

.system-help-run-bar {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #0050ff, #5f91ff, #91d1ff);
  transition: width .42s ease;
}

.system-help-run-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 13px;
}

.system-help-run-step {
  min-width: 0;
  min-height: 34px;
  color: var(--hint);
  font-size: 12px;
  line-height: 1.35;
  display: flex;
  align-items: center;
  gap: 7px;
}

.system-help-run-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(148, 163, 184, .45);
  background: var(--surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.system-help-run-dot i {
  color: #fff;
  font-size: 11px;
}

.system-help-run-step.is-active {
  color: var(--text);
  font-weight: 800;
}

.system-help-run-step.is-active .system-help-run-dot {
  border-color: #2563eb;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
}

.system-help-run-step.is-done {
  color: var(--muted);
}

.system-help-run-step.is-done .system-help-run-dot {
  border-color: #16a34a;
  background: #16a34a;
}

.system-help-record-grid,
.ssq-system-record-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.system-help-card,
.ssq-system-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  position: relative;
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.system-help-card-compact,
.ssq-system-card-compact {
  padding: 10px 12px;
}

.system-help-export-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(88deg, rgb(254 243 199), rgba(22, 163, 74, .06)), #ffffff;
}

.system-help-export-count {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.system-help-export-count i {
  color: var(--primary);
  font-size: 16px;
}

.system-help-export-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.system-help-export-btn {
  height: 34px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
}

.system-help-export-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.system-help-export-btn.copy {
border-color: #007fff;
    background: #007fff;
    color: #ffffff;
  box-shadow: 0 8px 18px rgba(115, 185, 255, .28);
}

.system-help-export-btn.copy:hover:not(:disabled) {
  border-color: #52a8fb;
    background: #52a8fb;
  color: #062f53;
}

.system-help-export-btn.primary {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
  box-shadow: 0 8px 18px rgba(37, 99, 235, .18);
}

.system-help-export-btn:disabled {
  cursor: not-allowed;
  opacity: .52;
  box-shadow: none;
}

.system-help-exportable-card {
  padding-top: 10px;
  border-color: rgba(148, 163, 184, .42);
  background: linear-gradient(359deg, rgba(255, 255, 255, .78), rgba(248, 250, 252, .62)), #fee2e2;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .06);
}

.system-help-exportable-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: #dc2626;
  opacity: .85;
}

.system-help-exportable-card.is-selected {
  border-color: rgb(255 255 255);
  box-shadow: 0 1px 30px rgb(234 235 233);
}

.system-help-exportable-card:hover {
  transform: translateY(-1px);
}

.system-help-select-pill {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.system-help-select-pill input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.system-help-select-pill span {
  height: 28px;
  min-width: 70px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-low);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 800;
}

.system-help-select-pill input:checked + span {
    border-color: rgb(200 35 35);
    background: rgb(255 255 255);
    color: var(--primary);
}

.system-help-exportable-card .system-help-plan-title {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-right: 84px;
  margin-bottom: 10px;
}

.system-help-exportable-card .system-help-plan-title i {
  color: var(--primary);
  font-size: 15px;
}

.system-help-exportable-card .system-help-line-plain {
  border-radius: var(--radius-sm);
  padding: 5px 5px;
}

.system-help-exportable-card .system-help-line + .system-help-line {
  margin-top: 0px;
  border-top: 0;
}

[data-theme="dark"] .system-help-export-toolbar {
  background:
    linear-gradient(135deg, rgba(248, 113, 113, .12), rgba(74, 222, 128, .08)),
    var(--surface-low);
}

[data-theme="dark"] .system-help-exportable-card {
  border-color: rgba(148, 163, 184, .24);
  background:
    linear-gradient(180deg, rgba(30, 41, 59, .8), rgba(15, 23, 42, .68)),
    var(--surface);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .22);
}

[data-theme="dark"] .system-help-run-panel {
  border-color: rgba(148, 163, 184, .24);
  background:
    linear-gradient(135deg, rgba(30, 41, 59, .86), rgba(15, 23, 42, .76)),
    var(--surface);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .22);
}

[data-theme="dark"] .system-help-run-icon {
  background: #e5e7eb;
  color: #0f172a;
  box-shadow: 0 10px 20px rgba(0, 0, 0, .26);
}

.system-help-plan-title,
.ssq-system-plan-title {
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 6px;
}

.system-help-line,
.ssq-system-line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
}

.system-help-line + .system-help-line,
.ssq-system-line + .ssq-system-line {
  border-top: 1px dashed var(--border);
}

.system-help-line .result-balls,
.ssq-system-line .result-balls {
  flex: 1;
}

.system-help-line-plain,
.ssq-system-line-plain {
  color: var(--text);
  font-size: 13px;
  letter-spacing: 0;
}

.kl8-base-pool-line {
  align-items: flex-start;
}

.kl8-base-pool-label {
  flex: 0 0 32px;
  color: var(--muted);
  font-family: "Noto Sans SC", sans-serif;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
}

.kl8-base-pool-numbers {
  flex: 1;
  min-width: 0;
  line-height: 1.6;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.system-help-card-head,
.ssq-system-card-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.system-help-card-head b,
.ssq-system-card-head b {
  display: block;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 4px;
}

.system-help-card-head span,
.ssq-rank-meta {
  font-size: 12px;
  color: var(--muted);
}

.system-help-rate,
.ssq-system-rate,
.ssq-rank-money {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 800;
  padding: 4px 9px;
  border-radius: var(--radius-sm);
  background: var(--gold-bg);
  color: var(--gold);
  border: 1px solid rgba(200, 150, 12, .22);
}

.ssq-rank-money {
  color: #b91c1c;
  background: #fee2e2;
  border-color: #fecaca;
}

[data-theme="dark"] .ssq-rank-money {
  color: #fecaca;
  background: rgba(185, 28, 28, .2);
  border-color: rgba(248, 113, 113, .28);
}

.system-help-item,
.ssq-system-item {
  padding: 10px 12px;
}

.system-help-rank-grid,
.ssq-rank-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 280px);
    gap: 12px;
    align-items: stretch;
    justify-content: center;
}

.system-help-rank-card-compact,
.ssq-rank-card-compact {
  display: flex;
  flex-direction: column;
  min-height: 244px;
  height: 100%;
  width: 310px;
  max-width: 100%;
  padding: 12px;
}

.system-help-rank-headline,
.ssq-rank-headline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
}

.system-help-rank-title,
.ssq-rank-title {
  color: #2563eb;
  font-size: 13px;
  font-weight: 800;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.system-help-rank-amount,
.ssq-rank-amount {
  color: #b91c1c;
  font-size: 13px;
  font-weight: 900;
  text-align: right;
  flex-shrink: 0;
}

[data-theme="dark"] .system-help-rank-amount,
[data-theme="dark"] .ssq-rank-amount {
  color: #fecaca;
}

.system-help-rank-lines,
.ssq-rank-lines {
  display: grid;
  gap: 6px;
}

.system-help-rank-line,
.ssq-rank-line {
  color: var(--text);
  font-size: 13px;
  letter-spacing: 0;
  word-break: break-all;
}

.system-help-line-index {
display: inline-block;
min-width: 18px;
font-size: 13px;
color: var(--hint);
}

.system-help-rank-issue-foot,
.ssq-rank-issue-foot {
  color: var(--hint);
  font-size: 12px;
  font-weight: 700;
  margin-top: auto;
  padding-top: 8px;
  text-align: right;
}

.system-help-purchase-row,
.ssq-purchase-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
  font-size: 12.5px;
  color: var(--muted);
}

.system-help-purchase-btn,
.ssq-purchase-btn {
  border: 1px solid var(--border);
  background: var(--surface-low);
  color: var(--muted);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}

.system-help-purchase-btn:hover,
.ssq-purchase-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.system-help-purchase-btn.active,
.ssq-purchase-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.system-help-rank-card .result-cards,
.ssq-rank-card .result-cards {
  margin-top: 10px;
}

.system-help-rank-issue,
.ssq-rank-issue {
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 10px;
}

/* ===== EXCLUSIVE CARD ===== */
.exclusive-card {
  background: var(--gold-bg);
  border: 1px solid rgba(200, 150, 12, .2);
  border-radius: var(--radius);
  padding: 18px 20px;
}

.exclusive-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px
}

.exclusive-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--gold)
}

.exclusive-badge {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 2px;
  background: var(--gold);
  color: #fff;
  font-weight: 700;
}

.exclusive-desc {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 12px;
  line-height: 1.7
}

.exclusive-id {
  color: var(--primary);
  font-weight: 600
}

/* ===== SSQ HISTORY PAGE ===== */
.ssq-history-tip {
  border-left-color: var(--primary)
}

.ssq-history-tip .tip-title {
  color: var(--primary)
}

.ssq-history-switch {
  max-width: 420px
}

.ssq-history-toolbar {
  padding: 18px 20px
}

.ssq-history-actions,
.ssq-similar-form {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap
}

.ssq-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 136px
}

.ssq-field-wide {
  flex: 1;
  min-width: 280px
}

.ssq-field span {
  font-size: 13px;
  font-weight: 600;
  color: var(--text)
}

.ssq-input {
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-low);
  color: var(--text);
  padding: 8px 11px;
  outline: none;
  font: inherit;
  font-size: 14px;
  transition: border-color .15s, box-shadow .15s, background .15s
}

.ssq-input:focus {
  border-color: var(--primary);
  background: var(--card);
  box-shadow: 0 0 0 3px var(--primary-muted)
}

.system-help-muted,
.ssq-muted {
  font-size: 13px;
  color: var(--hint)
}

.ssq-similar-help {
  margin-top: 12px
}

.ssq-picker-block {
  padding: 14px 0 16px;
  border-bottom: 1px solid var(--border)
}

.ssq-picker-block + .ssq-picker-block {
  padding-top: 16px
}

.ssq-picker-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px
}

.ssq-picker-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text)
}

.ssq-pick-count,
.ssq-play-summary {
  font-size: 13px;
  color: var(--primary);
  background: var(--primary-muted);
  border: 1px solid rgba(200, 33, 33, .15);
  border-radius: var(--radius-sm);
  padding: 5px 9px;
  font-weight: 600;
  white-space: nowrap
}

.ssq-pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(34px, 34px));
  gap: 8px
}

.ssq-pick-ball {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface-low);
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
  font-family: inherit
}

.ssq-pick-ball:hover {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-muted)
}

.ssq-pick-ball.red.selected {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff
}

.ssq-pick-ball.blue.selected {
  background: var(--lottery-blue);
  border-color: var(--lottery-blue);
  color: #fff
}

.ssq-pick-ball.orange.selected {
  background: var(--lottery-orange);
  border-color: var(--lottery-orange);
  color: #fff
}

.ssq-pick-ball.green.selected {
  background: var(--lottery-green);
  border-color: var(--lottery-green);
  color: #fff
}

.ssq-history-table-wrap {
  overflow-x: auto
}

.ssq-history-table {
  min-width: 780px
}

.dlt-history-table {
  min-width: 1120px
}

.kl8-history-table {
  min-width: 760px
}

.ssq-history-table th,
.ssq-history-table td {
  text-align: center
}

.ssq-history-table th:nth-child(2),
.ssq-history-table td:nth-child(2) {
  text-align: left
}

.ssq-empty-cell {
  text-align: center !important;
  color: var(--hint) !important;
  padding: 28px 16px !important
}

.ssq-money {
  color: var(--muted);
  font-variant-numeric: tabular-nums
}

.ssq-mini-set {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap
}

.ssq-num {
  width: 25px;
  height: 25px;
  min-width: 25px;
  min-height: 25px;
  flex: 0 0 25px;
  box-sizing: border-box;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums
}

.ssq-num.red {
  background: var(--primary)
}

.ssq-num.blue {
  background: var(--lottery-blue)
}

.ssq-num.orange {
  background: var(--lottery-orange)
}

.ssq-num.green {
  background: var(--lottery-green)
}

.ssq-similar-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 116px 1fr auto;
  gap: 12px;
  align-items: center;
  box-shadow: var(--shadow)
}

.ssq-similar-card + .ssq-similar-card {
  margin-top: 10px
}

.ssq-similar-issue {
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums
}

.ssq-similar-date {
  font-size: 12.5px;
  color: var(--hint)
}

.ssq-similar-score {
  min-width: 76px;
  text-align: center;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: var(--primary-muted);
  color: var(--primary);
  font-size: 13px;
  font-weight: 700
}

.ssq-match-note {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 5px
}

.ssq-prize-note {
  font-size: 13px;
  color: var(--text);
  margin-top: 6px;
  line-height: 1.7
}

/* ===== SSQ SIMILARITY ===== */
.ssq-similarity-tip {
  border-left-color: var(--primary)
}

.ssq-similarity-tip .tip-title {
  color: var(--primary)
}

.dlt-similarity-tip {
  border-left-color: var(--lottery-orange)
}

.dlt-similarity-tip .tip-title {
  color: var(--lottery-orange)
}

.similarity-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr);
  gap: 16px;
  align-items: start
}

.similarity-panel {
  min-width: 0
}

.similarity-mode-group,
.similarity-actions,
.similarity-rule-tools {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center
}

.similarity-mode-group {
  margin-bottom: 16px
}

.similarity-mode-group .budget-btn,
.similarity-rule-tools .budget-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px
}

.similarity-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(136px, 1fr));
  gap: 12px;
  margin-bottom: 4px
}

.similarity-red-picker {
  margin-top: 10px
}

.similarity-global-row,
.similarity-rule-row,
.similarity-rule-head {
  display: grid;
  grid-template-columns: 92px minmax(96px, 1fr) minmax(92px, .8fr) 82px auto;
  gap: 10px;
  align-items: end
}

.similarity-global-row {
  grid-template-columns: 108px minmax(96px, 1fr) minmax(92px, .8fr) 96px;
  padding: 14px 0 2px
}

.similarity-rule-head {
  grid-template-columns: 92px minmax(96px, 1fr) minmax(92px, .8fr) 82px auto;
  align-items: center;
  color: var(--hint);
  font-size: 12.5px;
  font-weight: 700;
  padding: 4px 0 9px;
  border-bottom: 1px solid var(--border)
}

.similarity-rule-list {
  display: grid;
  gap: 10px;
  padding: 12px 0
}

.similarity-rule-name {
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap
}

.similarity-check {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap
}

.similarity-check input {
  width: 16px;
  height: 16px;
  accent-color: var(--primary)
}

.similarity-icon-btn {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-low);
  color: var(--hint);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color .15s, color .15s, background .15s
}

.similarity-icon-btn:hover {
  border-color: rgba(200, 33, 33, .28);
  background: var(--primary-muted);
  color: var(--primary)
}

.similarity-secondary {
  background: var(--surface-low);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: none
}

.similarity-result-section {
  margin-top: 16px
}

.similarity-summary {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  background: var(--card)
}

.similarity-summary b {
  display: block;
  color: var(--text);
  margin-bottom: 6px
}

.similarity-summary span {
  color: var(--muted);
  font-size: 13px
}

.similarity-summary.passed {
  border-color: rgba(22, 163, 74, .25);
  background: rgba(22, 163, 74, .06)
}

.similarity-summary.failed {
  border-color: rgba(200, 33, 33, .24);
  background: var(--primary-muted)
}

.similarity-summary-count {
  color: var(--hint);
  font-size: 13px;
  white-space: nowrap
}

.similarity-verify-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px
}

.similarity-verify-item,
.similarity-random-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  padding: 14px;
  box-shadow: var(--shadow)
}

.similarity-verify-item.passed {
  border-color: rgba(22, 163, 74, .24)
}

.similarity-verify-item.failed {
  border-color: rgba(200, 33, 33, .24)
}

.similarity-verify-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px
}

.similarity-verify-head b {
  color: var(--text);
  font-size: 14px
}

.similarity-verify-head span {
  color: var(--primary);
  background: var(--primary-muted);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 700
}

.similarity-verify-item.passed .similarity-verify-head span {
  color: #15803d;
  background: rgba(22, 163, 74, .1)
}

.similarity-verify-desc,
.similarity-verify-best,
.similarity-random-note {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65
}

.similarity-verify-best {
  margin-top: 6px;
  color: var(--text)
}

.similarity-random-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px
}

.similarity-random-index {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px
}

.similarity-random-balls {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 8px
}

/* ===== DLT RULE FILTER ===== */
.dlt-rule-tip {
  border-left-color: var(--lottery-orange);
}

.dlt-rule-tip .tip-title {
  color: var(--lottery-orange);
}

.dlt-rule-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(310px, .55fr);
  gap: 16px;
  align-items: start;
}

.dlt-rule-panel {
  min-width: 0;
}

.dlt-rule-form {
  display: grid;
  gap: 16px;
}

.dlt-rule-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
  padding-top: 2px;
}

.dlt-rule-section-title::before {
  content: "";
  width: 4px;
  height: 16px;
  border-radius: 2px;
  background: var(--lottery-orange);
}

.dlt-rule-range-list {
  display: grid;
  gap: 12px;
}

.dlt-rule-select-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: 12px;
}

.dlt-rule-slider {
  --range-left: 0%;
  --range-right: 100%;
  padding: 12px 13px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-low);
}

.dlt-rule-slider-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.dlt-rule-slider-head span {
  color: var(--text);
  font-size: 13.5px;
  font-weight: 700;
}

.dlt-rule-slider-head strong {
  min-width: 84px;
  text-align: right;
  color: var(--lottery-orange);
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.dlt-rule-slider-track {
  position: relative;
  height: 34px;
}

.dlt-rule-slider-track::before,
.dlt-rule-slider-track::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 5px;
  border-radius: 999px;
  transform: translateY(-50%);
}

.dlt-rule-slider-track::before {
  background: var(--border);
}

.dlt-rule-slider-track::after {
  left: var(--range-left);
  right: calc(100% - var(--range-right));
  background: var(--lottery-orange);
}

.dlt-rule-slider-track input[type="range"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 34px;
  margin: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  pointer-events: none;
  z-index: 2;
}

.dlt-rule-slider-track input[type="range"]::-webkit-slider-runnable-track {
  height: 5px;
  background: transparent;
}

.dlt-rule-slider-track input[type="range"]::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  border: 3px solid var(--card);
  border-radius: 50%;
  background: var(--lottery-orange);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
  cursor: pointer;
  pointer-events: auto;
  -webkit-appearance: none;
  margin-top: -6px;
}

.dlt-rule-slider-track input[type="range"]::-moz-range-track {
  height: 5px;
  background: transparent;
}

.dlt-rule-slider-track input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 3px solid var(--card);
  border-radius: 50%;
  background: var(--lottery-orange);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
  cursor: pointer;
  pointer-events: auto;
}

.dlt-rule-slider-scale {
  display: flex;
  justify-content: space-between;
  color: var(--hint);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

.dlt-rule-side {
  position: sticky;
  top: 84px;
}

.dlt-rule-picker-block {
  padding-bottom: 18px;
}

.dlt-rule-picker-block + .dlt-rule-picker-block {
  padding-top: 18px;
}

.dlt-rule-pick-grid {
  grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
}

.dlt-rule-back-pick-grid {
  grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
}

.dlt-rule-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.dlt-rule-actions .submit-btn {
  min-height: 40px;
  justify-content: center;
}

.dlt-rule-secondary {
  background: var(--surface-low);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: none;
}

.dlt-rule-secondary:hover {
  background: var(--card);
  color: var(--primary);
  border-color: var(--primary);
}

.dlt-rule-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 18px;
}

.dlt-rule-stat-card {
  padding: 15px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.dlt-rule-stat-card span,
.dlt-rule-stat-card small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}

.dlt-rule-stat-card strong {
  display: block;
  color: var(--text);
  font-size: 24px;
  margin: 4px 0 5px;
}

.dlt-rule-current-card {
  align-items: center;
}

.dlt-rule-save-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.dlt-rule-save-btn {
  min-height: 40px;
}

.dlt-rule-saved-table {
  min-width: 820px;
}

.dlt-rule-saved-table .ssq-num {
  margin: 0 2px 2px 0;
}

/* ===== HOT/WARM/COLD SSQ ===== */
.hwl-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 16px;
  align-items: stretch;
  margin-bottom: 16px
}

.hwl-panel {
  min-width: 0
}

.hwl-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px
}

.hwl-kill-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px
}

.hwl-action-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px
}

.hwl-generation-tip {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 7px 11px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(200, 33, 33, .18);
  background: var(--primary-muted);
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35
}

.hwl-generation-tip.is-final {
  border-color: rgba(217, 119, 6, .28);
  background: rgba(217, 119, 6, .1);
  color: #b45309
}

.hwl-last-card {
  display: flex;
  flex-direction: column;
  gap: 14px
}

.hwl-last-issue {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums
}

/* ===== SSQ DISCOVERY PAGE ===== */
.ssq-discovery-switch {
  max-width: 430px
}

.ssq-discovery-form-card {
  padding: 18px 20px
}

.ssq-discovery-form-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(132px, 1fr));
  gap: 12px;
  align-items: end
}

.ssq-discovery-actions {
  margin-top: 16px
}

.ssq-discovery-table {
  min-width: 1060px
}

.ssq-discovery-table th:nth-child(4),
.ssq-discovery-table td:nth-child(4),
.ssq-discovery-table th:nth-child(5),
.ssq-discovery-table td:nth-child(5) {
  text-align: left
}

.ssq-discovery-param {
  min-width: 280px;
  color: var(--muted);
  font-size: 12.5px
}

.ssq-discovery-code {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  background: var(--primary-muted);
  color: var(--primary);
  border: 1px solid rgba(200, 33, 33, .14);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap
}

.ssq-discovery-rate {
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums
}

.system-help-pagination,
.ssq-discovery-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px
}

.system-help-pagination .budget-btn,
.ssq-discovery-pagination .budget-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 92px
}

.system-help-pagination .budget-btn:disabled,
.ssq-discovery-pagination .budget-btn:disabled {
  opacity: .45;
  cursor: not-allowed
}

.ssq-discovery-range-note {
  margin: 10px 2px 12px;
  line-height: 1.7
}

.ssq-discovery-detail {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-low)
}

.ssq-discovery-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px
}

.ssq-discovery-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--muted);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 600
}

/* ===== KL8 AUTO KILL / NEIGHBOR PAGES ===== */
.kl8-auto-kill-switch,
.kl8-neighbor-switch {
  max-width: 430px
}

.kl8-auto-kill-form-card,
.kl8-neighbor-form-card {
  padding: 14px 16px;
  margin-bottom: 16px
}

.kl8-auto-kill-form-grid,
.kl8-neighbor-form-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.35fr) repeat(5, minmax(110px, .72fr));
  gap: 10px;
  align-items: end
}

.kl8-neighbor-form-grid {
  grid-template-columns: minmax(220px, 1.35fr) repeat(4, minmax(118px, .8fr))
}

.kl8-auto-kill-issue-field,
.kl8-neighbor-issue-field {
  min-width: 0
}

.kl8-auto-kill-form-grid .ssq-field,
.kl8-neighbor-form-grid .ssq-field {
  gap: 5px
}

.kl8-auto-kill-form-grid .ssq-field span,
.kl8-neighbor-form-grid .ssq-field span {
  font-size: 12px
}

.kl8-auto-kill-form-grid .ssq-input,
.kl8-neighbor-form-grid .ssq-input {
  min-height: 34px;
  padding: 6px 9px;
  font-size: 13px
}

.kl8-auto-kill-actions,
.kl8-neighbor-actions {
  margin-top: 12px
}

.kl8-auto-kill-range-note,
.kl8-neighbor-range-note {
  margin: 10px 2px 12px;
  line-height: 1.7
}

.kl8-auto-kill-table,
.kl8-neighbor-table {
  min-width: 1040px
}

.kl8-auto-kill-table tr.is-clickable,
.kl8-neighbor-table tr.is-clickable {
  cursor: pointer
}

.kl8-auto-kill-table tr.is-active td,
.kl8-auto-kill-table tr.is-clickable:hover td,
.kl8-neighbor-table tr.is-active td,
.kl8-neighbor-table tr.is-clickable:hover td {
  background: rgba(29, 191, 103, .08)
}

.kl8-auto-kill-code,
.kl8-neighbor-code {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  background: rgba(29, 191, 103, .12);
  color: #15803d;
  border: 1px solid rgba(29, 191, 103, .18);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap
}

.kl8-auto-kill-param,
.kl8-neighbor-param {
  min-width: 220px;
  color: var(--muted);
  font-size: 12.5px
}

.kl8-auto-kill-rate,
.kl8-neighbor-rate {
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums
}

.kl8-auto-kill-distribution,
.kl8-neighbor-summary-grid {
  display: grid;
  gap: 10px
}

.kl8-auto-kill-bucket,
.kl8-neighbor-summary-card {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-low)
}

.kl8-auto-kill-bucket-title,
.kl8-neighbor-summary-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
  color: var(--text);
  font-weight: 800
}

.kl8-auto-kill-bucket-title span,
.kl8-neighbor-summary-title span {
  color: #15803d;
  font-size: 12px
}

.kl8-auto-kill-bucket-text,
.kl8-neighbor-summary-text {
  color: var(--muted);
  line-height: 1.75;
  word-break: break-all;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px
}

.kl8-auto-kill-detail,
.kl8-neighbor-detail {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-low)
}

.kl8-auto-kill-detail-grid,
.kl8-neighbor-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 12px
}

.kl8-auto-kill-detail-grid div,
.kl8-neighbor-detail-grid div {
  padding: 10px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card)
}

.kl8-auto-kill-detail-grid span,
.kl8-neighbor-detail-grid span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 12px
}

.kl8-auto-kill-detail-grid b,
.kl8-neighbor-detail-grid b {
  color: var(--text);
  font-size: 13px
}

/* ===== SSQ COLD/HOT SUM SORT ===== */
.ssq-sum-sort-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 16px;
  align-items: stretch;
  margin-bottom: 16px
}

.ssq-sum-sort-panel,
.ssq-sum-sort-summary-card {
  min-width: 0
}

.ssq-sum-sort-issue-field {
  max-width: 360px;
  margin-bottom: 16px
}

.ssq-sum-sort-rule-head,
.ssq-sum-sort-rule {
  display: grid;
  grid-template-columns: 84px minmax(150px, 1fr) minmax(130px, .75fr) 82px 38px;
  gap: 10px;
  align-items: center
}

.ssq-sum-sort-rule-head {
  min-height: 32px;
  color: var(--hint);
  font-size: 12.5px;
  font-weight: 700
}

.ssq-sum-sort-rules {
  display: flex;
  flex-direction: column;
  gap: 10px
}

.ssq-sum-sort-rule {
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-low)
}

.ssq-sum-sort-rule-name {
  color: var(--text);
  font-size: 13px;
  font-weight: 800
}

.ssq-sum-sort-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap
}

.ssq-sum-sort-check input {
  width: 16px;
  height: 16px;
  accent-color: var(--primary)
}

.ssq-sum-sort-icon-btn {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(200, 33, 33, .18);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer
}

.ssq-sum-sort-icon-btn:hover:not(:disabled) {
  background: var(--primary);
  color: #fff
}

.ssq-sum-sort-icon-btn:disabled {
  opacity: .45;
  cursor: not-allowed
}

.ssq-sum-sort-secondary {
  background: #fff;
  color: var(--primary);
  border: 1px solid rgba(200, 33, 33, .22)
}

.ssq-sum-sort-secondary:hover {
  color: #fff
}

.ssq-sum-sort-reference {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums
}

.ssq-sum-sort-result-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  box-shadow: var(--shadow-sm);
  overflow: hidden
}

.ssq-sum-sort-result-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  background: var(--surface-low);
  border-bottom: 1px solid var(--border)
}

.ssq-sum-sort-result-top b {
  display: block;
  color: var(--text);
  font-size: 16px;
  margin-bottom: 4px
}

.ssq-sum-sort-result-top span {
  display: block;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5
}

.ssq-sum-sort-row {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 14px;
  align-items: flex-start;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line)
}

.ssq-sum-sort-row:last-child {
  border-bottom: 0
}

.ssq-sum-sort-row > span:first-child {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700
}

.ssq-sum-sort-order .ssq-mini-set {
  gap: 6px 7px
}

.ssq-sum-sort-hit-note {
  padding: 12px 16px;
  color: var(--muted);
  font-size: 13px;
  background: rgba(217, 119, 6, .08)
}

.ssq-sum-sort-table {
  min-width: 860px
}

.ssq-sum-sort-table th:nth-child(4),
.ssq-sum-sort-table td:nth-child(4) {
  text-align: left
}

.ssq-sum-sort-contrib {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.7
}

.hwl-last-balls {
  min-height: 36px
}

.hwl-prize-meta {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 2px;
  border-top: 1px solid var(--line)
}

.hwl-prize-row {
  min-height: 31px;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35
}

.hwl-prize-row b {
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  text-align: left;
  font-variant-numeric: tabular-nums
}

.hwl-prize-row:last-child {
  border-bottom: 0
}

.hwl-mini-stats {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto
}

.hwl-mini-stats span,
.hwl-result-note {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6
}

.hwl-analysis-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
  gap: 16px
}

.hwl-number-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(126px, 1fr));
  gap: 10px
}

.hwl-number-grid.blue {
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr))
}

.hwl-number-card {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 52px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  padding: 9px 10px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, .04)
}

.hwl-number-card.hot {
  border-color: rgba(200, 33, 33, .22);
  background: linear-gradient(180deg, rgba(200, 33, 33, .08), var(--card))
}

.hwl-number-card.warm {
  border-color: rgba(217, 119, 6, .24);
  background: linear-gradient(180deg, rgba(217, 119, 6, .08), var(--card))
}

.hwl-number-card.cold {
  border-color: rgba(37, 99, 235, .2);
  background: linear-gradient(180deg, rgba(37, 99, 235, .07), var(--card))
}

.hwl-number-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px
}

.hwl-number-meta b {
  color: var(--text);
  font-size: 13px
}

.hwl-number-meta span {
  color: var(--hint);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.hwl-result-card {
  grid-template-columns: 82px minmax(0, 1fr) auto
}

.hwl-field-tip {
  display: block;
  margin-top: 5px;
  color: var(--hint);
  font-size: 12px;
  font-style: normal
}

.hwl-kill-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px
}

.hwl-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  user-select: none
}

.hwl-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none
}

.hwl-switch span {
  width: 38px;
  height: 20px;
  border-radius: 999px;
  background: #e5e7eb;
  border: 1px solid var(--border);
  position: relative;
  transition: background .18s ease, border-color .18s ease
}

.hwl-switch span::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(15, 23, 42, .2);
  transition: transform .18s ease
}

.hwl-switch input:checked + span {
  background: var(--primary);
  border-color: var(--primary)
}

.hwl-switch input:checked + span::after {
  transform: translateX(18px)
}

.hwl-switch b {
  color: var(--text);
  font-size: 13px
}

.hwl-mini-btn {
  min-height: 28px;
  border: 1px solid rgba(200, 33, 33, .18);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer
}

.hwl-mini-btn:hover {
  background: var(--primary);
  color: #fff
}

.hwl-kill-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
  gap: 7px;
  margin-bottom: 10px
}

.hwl-kill-grid.blue {
  grid-template-columns: repeat(auto-fill, minmax(36px, 1fr))
}

.hwl-kill-ball {
  aspect-ratio: 1;
  min-height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(200, 33, 33, .2);
  background: #fff7f7;
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  cursor: pointer
}

.hwl-kill-ball.blue {
  border-color: rgba(37, 99, 235, .22);
  background: #eff6ff;
  color: #2563eb
}

.hwl-kill-ball.selected {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: 0 5px 12px rgba(200, 33, 33, .22)
}

.hwl-kill-ball.blue.selected {
  background: #2563eb;
  border-color: #2563eb;
  box-shadow: 0 5px 12px rgba(37, 99, 235, .22)
}

/* ===== SSQ RED FIXED RANDOM ===== */
.ssq-red-fixed-tip {
  border-left-color: var(--primary)
}

.ssq-red-fixed-tip .tip-title {
  color: var(--primary)
}

.red-fixed-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
  gap: 16px;
  margin-bottom: 18px;
}

.red-fixed-panel {
  min-width: 0
}

.red-fixed-picker-block {
  padding-bottom: 24px
}

.red-fixed-picker-block + .red-fixed-picker-block {
  padding-top: 20px
}

.red-fixed-grid {
  grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
  max-width: 640px
}

.red-fixed-ball {
  width: 36px;
  height: 36px
}

.red-fixed-control {
  display: flex;
  flex-direction: column;
  gap: 14px
}

.red-fixed-quota {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5
}

.red-fixed-actions {
  margin-top: 2px
}

.red-fixed-pool-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 12px
}

.red-fixed-pool-tools .budget-btn {
  min-height: 32px;
  padding: 6px 12px;
  font-size: 12.5px
}

.red-fixed-reset-btn {
  background: #fff;
  color: var(--primary);
  border: 1px solid rgba(200, 33, 33, .22)
}

.red-fixed-reset-btn:hover {
  color: #fff
}

.red-fixed-result-card {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 13px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
}

.red-fixed-result-card + .red-fixed-result-card {
  margin-top: 10px
}

.red-fixed-result-index {
  font-size: 13px;
  font-weight: 800;
  color: var(--text)
}

.red-fixed-result-balls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0
}

.red-fixed-result-groups {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  min-width: 0
}

.red-fixed-result-groups div {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 8px;
  align-items: center
}

.red-fixed-result-groups b {
  color: var(--text);
  font-size: 13px
}

.red-fixed-result-ball {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff7f7;
  border: 1px solid rgba(200, 33, 33, .22);
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
}

.red-fixed-result-ball.is-dan {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  font-weight: 900;
  box-shadow: 0 4px 10px rgba(200, 33, 33, .22)
}

.red-fixed-result-note {
  color: var(--muted);
  font-size: 12.5px;
  white-space: nowrap
}

/* ===== SSQ DANTUO RANDOM ===== */
.ssq-dantuo-tip {
  border-left-color: #2563eb
}

.ssq-dantuo-tip .tip-title {
  color: #1d4ed8
}

.dlt-dantuo-tip {
  border-left-color: #f59e0b
}

.dlt-dantuo-tip .tip-title {
  color: #b45309
}

.ssq-dantuo-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(290px, .75fr);
  gap: 16px;
  margin-bottom: 18px
}

.ssq-dantuo-panel {
  min-width: 0
}

.ssq-dantuo-side {
  display: flex;
  flex-direction: column;
  gap: 14px
}

.ssq-dantuo-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 180px));
  gap: 12px;
  margin-bottom: 4px
}

.ssq-dantuo-picker-block {
  padding-bottom: 0
}

.ssq-dantuo-grid {
  grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
  max-width: 640px;
  margin-top: 12px
}

.ssq-dantuo-grid.blue {
  max-width: 360px
}

.ssq-dantuo-mode-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px
}

.ssq-dantuo-mode-row .budget-btn {
  min-height: 32px;
  padding: 6px 12px;
  font-size: 12.5px
}

.ssq-dantuo-mini-tool {
  background: #fff;
  color: var(--muted)
}

.ssq-pick-ball.disabled {
  opacity: .32;
  cursor: not-allowed;
  box-shadow: none
}

.ssq-dantuo-preview {
  padding: 13px 14px;
  border-radius: 8px;
  background: #f8fbff;
  border: 1px solid rgba(37, 99, 235, .18);
  color: #1d4ed8;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0
}

.ssq-dantuo-preview.warn {
  background: #fff7ed;
  border-color: rgba(234, 88, 12, .22);
  color: #c2410c;
  font-size: 14px
}

.ssq-dantuo-actions {
  margin-top: 0
}

.ssq-dantuo-result-card {
  padding: 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-sm)
}

.ssq-dantuo-result-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--border)
}

.ssq-dantuo-result-head b {
  color: var(--text);
  font-size: 18px
}

.ssq-dantuo-result-head span {
  color: #c2410c;
  font-weight: 900
}

.ssq-dantuo-result-groups {
  gap: 10px
}

.ssq-dantuo-blue-ball {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eff6ff;
  border: 1px solid rgba(37, 99, 235, .24);
  color: #2563eb;
  font-size: 13px;
  font-weight: 800
}

.dlt-dantuo-back-ball {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff7ed;
  border: 1px solid rgba(245, 158, 11, .28);
  color: #b45309;
  font-size: 13px;
  font-weight: 800
}

.dlt-dantuo-back-ball.is-dan {
  background: #f59e0b;
  color: #fff;
  border-color: #f59e0b;
  font-weight: 900;
  box-shadow: 0 4px 10px rgba(245, 158, 11, .22)
}

.ssq-dantuo-amount-note {
  margin-top: 14px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7
}

/* ===== COLD HOT COMBO STATS ===== */
.cold-hot-combo-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
  align-items: stretch;
  margin-bottom: 18px
}

.cold-hot-combo-panel,
.cold-hot-combo-summary-card {
  min-width: 0
}

.cold-hot-combo-form {
  display: grid;
  grid-template-columns: minmax(200px, 1.4fr) minmax(130px, .8fr) minmax(130px, .8fr);
  gap: 12px
}

.cold-hot-combo-actions {
  margin-top: 18px
}

.cold-hot-combo-summary {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px
}

.cold-hot-combo-summary div {
  min-height: 54px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-low);
  padding: 9px 11px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px
}

.cold-hot-combo-summary span {
  color: var(--hint);
  font-size: 12px
}

.cold-hot-combo-summary b {
  color: var(--text);
  font-size: 18px;
  font-variant-numeric: tabular-nums
}

.cold-hot-combo-rank {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 18px
}

.cold-hot-combo-rank .result-section,
.cold-hot-combo-result-section {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow)
}

.cold-hot-combo-chipset {
  display: flex;
  flex-wrap: wrap;
  gap: 8px
}

.cold-hot-combo-rank-chip,
.cold-hot-combo-token {
  font-family: inherit;
  cursor: pointer;
  transition: all .15s
}

.cold-hot-combo-rank-chip {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-low);
  color: var(--text);
  padding: 8px 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px
}

.cold-hot-combo-rank-chip.hot {
  border-color: rgba(200, 33, 33, .2);
  background: rgba(200, 33, 33, .06)
}

.cold-hot-combo-rank-chip.cold {
  border-color: rgba(37, 99, 235, .2);
  background: rgba(37, 99, 235, .06)
}

.cold-hot-combo-rank-chip b {
  font-size: 13px;
  color: var(--text)
}

.cold-hot-combo-rank-chip span {
  color: var(--muted);
  font-size: 12px
}

.cold-hot-combo-rank-chip:hover,
.cold-hot-combo-token:hover {
  transform: translateY(-1px);
  border-color: var(--primary);
  box-shadow: 0 7px 16px rgba(15, 23, 42, .08)
}

.cold-hot-combo-result {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px
}

.cold-hot-combo-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-low)
}

.cold-hot-combo-context b {
  color: var(--text);
  font-size: 14px
}

.cold-hot-combo-context span,
.cold-hot-combo-actual span {
  color: var(--muted);
  font-size: 13px
}

.cold-hot-combo-actual {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(217, 119, 6, .22);
  border-radius: var(--radius-sm);
  background: rgba(217, 119, 6, .06)
}

.cold-hot-combo-group {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  overflow: hidden
}

.cold-hot-combo-group summary {
  min-height: 42px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  background: var(--surface-low);
  color: var(--text);
  font-weight: 800;
  list-style: none
}

.cold-hot-combo-group summary::-webkit-details-marker {
  display: none
}

.cold-hot-combo-group summary b {
  color: var(--muted);
  font-size: 13px
}

.cold-hot-combo-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  max-height: 320px;
  overflow: auto;
  padding: 12px;
  scrollbar-width: thin
}

.cold-hot-combo-token {
  border: 1px solid rgba(200, 33, 33, .16);
  border-radius: 999px;
  background: #fff7f7;
  color: var(--primary);
  padding: 5px 9px;
  font-size: 12.5px;
  font-weight: 750;
  line-height: 1.2
}

/* ===== KL8 COLD HOT SELECT ===== */
.kl8-select-mode {
  margin-bottom: 16px
}

.kl8-select-mode .tab i {
  font-size: 14px;
  vertical-align: -2px;
  margin-right: 5px
}

.kl8-select-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
  align-items: stretch;
  margin-bottom: 18px
}

.kl8-select-panel,
.kl8-select-summary-card {
  min-width: 0
}

.kl8-select-form {
  display: grid;
  grid-template-columns: minmax(200px, 1.2fr) repeat(3, minmax(120px, .7fr));
  gap: 12px
}

.kl8-select-actions {
  margin-top: 18px
}

.kl8-select-summary {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px
}

.kl8-select-summary div {
  min-height: 54px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-low);
  padding: 9px 11px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px
}

.kl8-select-summary span {
  color: var(--hint);
  font-size: 12px
}

.kl8-select-summary b {
  color: var(--text);
  font-size: 18px;
  font-variant-numeric: tabular-nums
}

.kl8-select-result-section,
.kl8-select-detail-section {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow)
}

.kl8-select-result {
  display: flex;
  flex-direction: column;
  gap: 12px
}

.kl8-select-context,
.kl8-select-actual {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-low)
}

.kl8-select-context b {
  color: var(--text);
  font-size: 14px
}

.kl8-select-context span,
.kl8-select-actual span {
  color: var(--muted);
  font-size: 13px
}

.kl8-select-actual {
  justify-content: flex-start;
  border-color: rgba(22, 163, 74, .22);
  background: rgba(22, 163, 74, .06)
}

.kl8-select-number-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(54px, 1fr));
  gap: 9px
}

.kl8-select-number {
  min-height: 54px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: var(--surface-low);
  box-shadow: var(--shadow-sm);
  transition: all .15s
}

.kl8-select-number:hover,
.kl8-select-number.selected {
  transform: translateY(-1px);
  border-color: var(--primary);
  box-shadow: 0 8px 18px rgba(15, 23, 42, .1)
}

.kl8-select-number b {
  font-size: 17px;
  color: var(--text);
  font-variant-numeric: tabular-nums
}

.kl8-select-number span {
  color: var(--muted);
  font-size: 12px
}

.kl8-select-number.red {
  border-color: rgba(200, 33, 33, .2);
  background: rgba(200, 33, 33, .06)
}

.kl8-select-number.blue {
  border-color: rgba(37, 99, 235, .2);
  background: rgba(37, 99, 235, .06)
}

.kl8-select-number.green {
  border-color: rgba(22, 163, 74, .2);
  background: rgba(22, 163, 74, .06)
}

.kl8-select-number.yellow {
  border-color: rgba(217, 119, 6, .22);
  background: rgba(217, 119, 6, .07)
}

.kl8-select-result-count {
  color: var(--muted);
  font-size: 14px
}

.kl8-select-result-count b {
  color: var(--text);
  font-size: 18px;
  font-variant-numeric: tabular-nums
}

.kl8-select-detail-card {
  margin-top: 4px
}

.kl8-select-detail-hero {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-low)
}

.kl8-select-detail-ball {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 900;
  font-size: 18px;
  font-variant-numeric: tabular-nums
}

.kl8-select-detail-ball.red {
  background: var(--primary)
}

.kl8-select-detail-ball.blue {
  background: var(--lottery-blue)
}

.kl8-select-detail-ball.green {
  background: var(--lottery-green)
}

.kl8-select-detail-ball.yellow {
  background: var(--lottery-orange)
}

.kl8-select-detail-hero b {
  display: block;
  color: var(--text);
  font-size: 16px;
  margin-bottom: 4px
}

.kl8-select-detail-hero span,
.kl8-select-detail-note {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6
}

.kl8-select-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px
}

.kl8-select-detail-grid div {
  min-height: 58px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  padding: 9px 11px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px
}

.kl8-select-detail-grid span {
  color: var(--hint);
  font-size: 12px
}

.kl8-select-detail-grid b {
  color: var(--text);
  font-size: 13px
}

.kl8-select-detail-note {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: rgba(22, 163, 74, .06);
  border: 1px solid rgba(22, 163, 74, .18)
}

/* ===== SUM COMBINATION ===== */
.sum-combo-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
  align-items: stretch
}

.sum-combo-panel,
.sum-combo-summary-card {
  min-width: 0
}

.sum-combo-form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 12px
}

.sum-combo-actions {
  margin-top: 18px
}

.sum-combo-secondary-btn {
  background: var(--surface-low);
  color: var(--text);
  border: 1px solid var(--border)
}

.sum-combo-secondary-btn:hover {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-strong);
  box-shadow: none
}

.sum-combo-status {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 7px 11px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(22, 163, 74, .22);
  background: rgba(22, 163, 74, .08);
  color: #15803d;
  font-size: 13px;
  font-weight: 700
}

.sum-combo-status.is-muted {
  border-color: var(--border);
  background: var(--surface-low);
  color: var(--hint)
}

.sum-combo-summary-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px
}

.sum-combo-summary-grid div {
  min-height: 50px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-low);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px
}

.sum-combo-summary-grid span {
  font-size: 12px;
  color: var(--hint)
}

.sum-combo-summary-grid b {
  font-size: 17px;
  color: var(--text);
  font-variant-numeric: tabular-nums
}

.sum-combo-results-section {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow)
}

.sum-combo-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px
}

.sum-combo-copy-all,
.sum-combo-copy-one {
  border: 1px solid var(--border);
  background: var(--surface-low);
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  transition: all .15s
}

.sum-combo-copy-all {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap
}

.sum-combo-copy-all:hover:not(:disabled),
.sum-combo-copy-one:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-muted)
}

.sum-combo-copy-all:disabled {
  opacity: .45;
  cursor: not-allowed
}

.sum-combo-results {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.sum-combo-total-line {
  color: var(--muted);
  font-size: 13.5px;
  padding: 0 0 4px
}

.sum-combo-total-line b {
  color: var(--primary);
  font-size: 16px
}

.sum-combo-item {
  min-height: 44px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto 34px;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-low)
}

.sum-combo-index {
  color: var(--hint);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums
}

.sum-combo-numbers {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap
}

.sum-combo-number {
  min-width: 28px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  background: var(--card);
  border: 1px solid rgba(200, 33, 33, .16);
  color: var(--primary);
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums
}

.sum-combo-eq {
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums
}

.sum-combo-copy-one {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px
}

/* ===== SPINNER ===== */
.ssq-spinner,
.dlt-spinner,
.kl8-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, .3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .6s linear infinite;
  display: none;
}

@keyframes spin {
  to {
    transform: rotate(360deg)
  }
}

/* ===== RULES GRID ===== */
.rules-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 8px
}

.rule-item {
  background: var(--surface-low);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 10px;
  text-align: center;
  font-size: 12.5px;
}

.rule-budget {
  font-weight: 700;
  color: var(--primary);
  font-size: 15px;
  margin-bottom: 3px
}

.rule-detail {
  color: var(--muted);
  font-size: 12px
}

/* ===== SPA ===== */
.page-panel {
  display: none
}

.page-panel.active {
  display: block
}

/* ===== RESPONSIVE ===== */
@media(max-width:1100px) {

  .bento,
  .honor-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .dlt-rule-layout {
    grid-template-columns: 1fr
  }

  .dlt-rule-side {
    position: static
  }

  .logo-sub {
    display: none
  }
}

@media(max-width:900px) {
  .main {
    padding: 20px 20px 40px
  }
}

@media(max-width:768px) {
  :root {
    --nav-w: 260px
  }

  .menu-btn {
    display: flex
  }

  .sidebar {
    transform: translateX(-100%)
  }

  .sidebar.open {
    transform: translateX(0)
  }

  .main {
    margin-left: 0;
    padding: 16px 14px 36px
  }

  .bento,
  .honor-grid {
    grid-template-columns: 1fr
  }

  .topnav {
    padding: 0 14px
  }

  .logo-sub {
    display: none
  }

  .htable {
    font-size: 12.5px
  }

  .htable th,
  .htable td {
    padding: 9px 10px
  }

  .rules-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .ssq-history-switch {
    max-width: none
  }

  .ssq-history-switch .tab {
    flex: 1;
    padding-left: 8px;
    padding-right: 8px
  }

  .ssq-field,
  .ssq-field-wide {
    width: 100%;
    min-width: 0
  }

  .ssq-history-actions .submit-btn,
  .ssq-similar-form .submit-btn {
    width: 100%;
    justify-content: center
  }

  .ssq-similar-card {
    grid-template-columns: 1fr;
    align-items: flex-start
  }

  .ssq-similar-score {
    text-align: left
  }

  .intro-grid,
  .intro-member {
    grid-template-columns: 1fr;
  }

  .intro-grid {
    display: grid;
  }

  .intro-member {
    display: grid;
  }

  .intro-buy-link {
    width: 100%;
    justify-content: center;
  }

  .similarity-workbench,
  .similarity-form-grid {
    grid-template-columns: 1fr
  }

  .similarity-global-row,
  .similarity-rule-row {
    grid-template-columns: 1fr 1fr;
    align-items: end
  }

  .similarity-rule-head {
    display: none
  }

  .similarity-rule-name,
  .similarity-check {
    grid-column: span 1
  }

  .similarity-icon-btn {
    width: 100%
  }

  .similarity-actions .submit-btn,
  .similarity-mode-group .budget-btn {
    width: 100%;
    justify-content: center
  }

  .similarity-summary {
    align-items: flex-start;
    flex-direction: column
  }

  .dlt-rule-select-grid,
  .dlt-rule-stats {
    grid-template-columns: 1fr
  }

  .dlt-rule-actions .submit-btn,
  .dlt-rule-save-btn {
    width: 100%;
  }

  .hwl-dashboard,
  .hwl-analysis-grid,
  .hwl-kill-row,
  .red-fixed-layout,
  .ssq-dantuo-layout,
  .ssq-sum-sort-layout,
  .cold-hot-combo-layout,
  .cold-hot-combo-rank,
  .kl8-select-layout {
    grid-template-columns: 1fr
  }

  .hwl-form-grid {
    grid-template-columns: 1fr
  }

  .ssq-dantuo-form-grid {
    grid-template-columns: 1fr
  }

  .hwl-action-row .submit-btn {
    width: 100%;
    justify-content: center
  }

  .sum-combo-layout,
  .sum-combo-form-grid,
  .ssq-discovery-form-grid,
  .kl8-auto-kill-form-grid,
  .kl8-neighbor-form-grid,
  .kl8-auto-kill-detail-grid,
  .kl8-neighbor-detail-grid {
    grid-template-columns: 1fr
  }

  .ssq-sum-sort-rule-head {
    display: none
  }

  .ssq-sum-sort-rule {
    grid-template-columns: 1fr 1fr;
    gap: 9px
  }

  .ssq-sum-sort-rule-name,
  .ssq-sum-sort-check {
    grid-column: span 1
  }

  .ssq-sum-sort-icon-btn {
    width: 100%
  }

  .ssq-sum-sort-row {
    grid-template-columns: 1fr;
    gap: 8px
  }

  .ssq-discovery-pagination {
    justify-content: space-between
  }

  .sum-combo-result-head {
    align-items: flex-start;
    flex-direction: column
  }

  .sum-combo-copy-all {
    width: 100%;
    justify-content: center
  }

  .sum-combo-item {
    grid-template-columns: 34px minmax(0, 1fr) auto 34px;
    gap: 8px
  }

  .hwl-generation-tip {
    width: 100%;
    justify-content: center;
    text-align: center
  }

  .hwl-result-card {
    grid-template-columns: 1fr
  }

  .red-fixed-result-card {
    grid-template-columns: 1fr;
    align-items: flex-start
  }

  .red-fixed-result-note {
    white-space: normal
  }

  .cold-hot-combo-form {
    grid-template-columns: 1fr
  }

  .cold-hot-combo-context {
    flex-direction: column;
    align-items: flex-start
  }

  .kl8-select-form {
    grid-template-columns: 1fr
  }

  .kl8-select-detail-grid {
    grid-template-columns: 1fr 1fr
  }

  .form-label {
    width: 66px
  }

  .page-title {
    font-size: 19px
  }
}

/* ===== AUTH SYSTEM ===== */
.auth-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  z-index: 300;
  backdrop-filter: blur(2px);
}

.auth-overlay.active {
  display: block;
}

.auth-modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -48%);
  z-index: 400;
  width: 420px;
  max-width: calc(100vw - 32px);
  max-height: 90vh;
  overflow-y: auto;
}

.auth-modal::-webkit-scrollbar {
  width: 3px;
}

.auth-modal::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 2px;
}

.auth-modal.active {
  display: block;
  animation: modalIn .22s ease;
}

@keyframes modalIn {
  from {
    opacity: 0;
    transform: translate(-50%, -46%);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -48%);
  }
}

.auth-modal-inner {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 32px 32px 28px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .18);
  position: relative;
}

.auth-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 14px;
  transition: all .15s;
}

.auth-close:hover {
  background: var(--surface-low);
  color: var(--text);
}

.auth-logo-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.auth-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--text);
  margin-bottom: 6px;
}

.auth-subtitle {
  font-size: 13.5px;
  color: var(--muted);
  margin-bottom: 22px;
}

.auth-alert {
  font-size: 13px;
  padding: 0;
  margin-bottom: 0;
  border-radius: var(--radius-sm);
  display: none;
}

.auth-alert:not(:empty) {
  display: block;
  padding: 10px 14px;
  margin-bottom: 16px;
}

.auth-alert.error {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

.auth-alert.success {
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

[data-theme="dark"] .auth-alert.error {
  background: rgba(185, 28, 28, .12);
  color: #fca5a5;
  border-color: rgba(185, 28, 28, .25);
}

[data-theme="dark"] .auth-alert.success {
  background: rgba(21, 128, 61, .12);
  color: #86efac;
  border-color: rgba(21, 128, 61, .25);
}

.auth-field {
  margin-bottom: 16px;
}

.auth-label {
  display: block;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 7px;
}

.auth-input-wrap {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--surface-low);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color .15s, box-shadow .15s;
  overflow: hidden;
}

.auth-input-wrap:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-muted);
}

.auth-input-icon {
  width: 38px;
  text-align: center;
  font-size: 15px;
  color: var(--hint);
  flex-shrink: 0;
}

.auth-input {
  flex: 1;
  padding: 10px 12px 10px 0;
  border: none;
  background: transparent;
  font-size: 14px;
  color: var(--text);
  outline: none;
  font-family: inherit;
  min-width: 0;
}

.auth-input::placeholder {
  color: var(--hint);
}

.auth-eye {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--hint);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
  transition: color .15s;
}

.auth-eye:hover {
  color: var(--text);
}

.auth-send-code {
  padding: 8px 12px;
  background: var(--primary-muted);
  border: none;
  border-left: 1px solid var(--border);
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background .15s;
  flex-shrink: 0;
}

.auth-send-code:hover:not(:disabled) {
  background: rgba(200, 33, 33, .15);
}

.auth-code-timer {
  font-size: 12px;
  color: var(--muted);
  padding: 0 8px;
  flex-shrink: 0;
}

.auth-pwd-strength {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 7px;
}

.pwd-bar-track {
  flex: 1;
  height: 4px;
  background: var(--surface-high);
  border-radius: 2px;
  overflow: hidden;
}

.pwd-bar-fill {
  height: 100%;
  width: 0;
  border-radius: 2px;
  transition: width .3s, background .3s;
}

.pwd-bar-label {
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

.auth-agree {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 18px;
}

.auth-btn {
  width: 100%;
  padding: 12px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 18px;
}

.auth-btn:hover {
  background: #a91a1a;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(200, 33, 33, .28);
}

.auth-btn:active {
  transform: none;
}

.auth-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, .3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .6s linear infinite;
  display: none;
}

.auth-spinner[style*="inline-block"] {
  display: inline-block !important;
}

.auth-switch {
  font-size: 13.5px;
  color: var(--muted);
  text-align: center;
}

.auth-link {
  color: var(--primary);
  cursor: pointer;
  font-weight: 500;
}

.auth-link:hover {
  text-decoration: underline;
}

.auth-success-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #f0fdf4;
  border: 2px solid #bbf7d0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: #15803d;
  margin: 0 auto 20px;
}

.auth-uid-display {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
  background: var(--primary-muted);
  border: 1px solid rgba(200, 33, 33, .15);
  border-radius: var(--radius);
  padding: 14px 24px;
  text-align: center;
  margin: 10px 0 14px;
}

.uid-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: var(--primary-muted);
  color: var(--primary);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
}

.account-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--surface-high);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.account-badge.is-vip {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}

[data-theme="dark"] .account-badge.is-vip {
  background: rgba(234, 179, 8, .14);
  color: #facc15;
  border-color: rgba(234, 179, 8, .28);
}

.vip-page-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.vip-plan-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vip-plan-card.is-featured {
  border-color: rgba(200, 33, 33, .32);
  box-shadow: 0 10px 28px rgba(200, 33, 33, .1);
}

.vip-plan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.vip-plan-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.vip-plan-days {
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--primary-muted);
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.vip-plan-subtitle {
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
}

.vip-plan-desc {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.7;
  flex: 1;
}

.vip-plan-price {
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}

.vip-plan-price span {
  font-size: 26px;
  font-weight: 800;
  color: var(--primary);
  margin-right: 3px;
  font-variant-numeric: tabular-nums;
}

.vip-status-line {
  padding: 10px 12px;
  margin-bottom: 14px;
  background: var(--surface-low);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 13.5px;
}

.vip-activation-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 14px;
}

.vip-activation-field {
  margin-bottom: 0;
}

.vip-activation-btn {
  width: auto;
  min-width: 128px;
  margin-bottom: 0;
  padding: 10px 18px;
  min-height: 40px;
  white-space: nowrap;
}

.vip-contact-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 14px;
  background: var(--surface-low);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.7;
}

/* ===== RANDOM PAGE ===== */
.random-panel {
  max-width: 860px;
}

.random-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.random-panel-head .form-section-title {
  margin-bottom: 5px;
}

.random-panel-subtitle {
  color: var(--muted);
  font-size: 13.5px;
}

.random-limit-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  background: var(--primary-muted);
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.random-control-grid {
  display: grid;
  grid-template-columns: minmax(250px, 1fr) minmax(130px, 160px) auto;
  gap: 12px;
  align-items: end;
}

.random-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.random-field .form-label {
  width: auto;
}

.random-submit-btn {
  min-height: 40px;
  justify-content: center;
  white-space: nowrap;
}

.random-result {
  margin-top: 18px;
}

.random-result-grid {
  display: grid;
  gap: 10px;
}

.random-result-card {
  display: grid;
  grid-template-columns: 98px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-low);
}

.random-result-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.random-result-meta strong {
  color: var(--text);
  font-size: 13px;
}

.random-result-balls {
  gap: 6px;
}

.random-result-card .ball {
  width: 30px;
  height: 30px;
  font-size: 11.5px;
  letter-spacing: 0;
}

.random-kl8 .ball {
  width: 28px;
  height: 28px;
  font-size: 10.5px;
}

.random-tag-ssq {
  background: #fde8eb;
  color: #9b1924;
}

.random-tag-dlt {
  background: #fef3c7;
  color: #92400e;
}

.random-tag-kl8 {
  background: #dcfce7;
  color: #14532d;
}

@media(max-width:1080px) {
  .vip-page-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media(max-width:640px) {
  .system-help-run-panel {
    padding: 14px;
  }

  .system-help-run-head {
    align-items: flex-start;
  }

  .system-help-run-metrics {
    display: grid;
    grid-template-columns: 1fr;
  }

  .system-help-run-metrics span {
    width: 100%;
  }

  .system-help-run-steps {
    grid-template-columns: 1fr;
  }

  .system-help-export-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .system-help-export-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .system-help-export-btn {
    width: 100%;
    padding: 0 8px;
  }

  .system-help-rank-grid,
  .ssq-rank-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .system-help-rank-card-compact,
  .ssq-rank-card-compact {
    width: 100%;
  }

  .vip-page-grid {
    grid-template-columns: 1fr;
  }

  .vip-activation-row,
  .random-control-grid,
  .random-result-card {
    grid-template-columns: 1fr;
  }

  .vip-activation-btn,
  .random-submit-btn {
    width: 100%;
  }

  .random-panel-head {
    display: grid;
  }
}

.user-avatar {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

.user-avatar.lg {
  width: 44px;
  height: 44px;
  font-size: 18px;
}

.user-avatar.xl {
  width: 60px;
  height: 60px;
  font-size: 24px;
}

.user-avatar-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px 5px 5px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all .15s;
  position: relative;
  user-select: none;
}

.user-avatar-btn:hover {
  background: var(--surface-low);
  border-color: var(--border-strong);
}

.aff-top-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(200, 150, 12, .28);
  border-radius: var(--radius-sm);
  background: var(--gold-bg);
  color: var(--gold);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.aff-top-btn i {
  font-size: 15px;
}

.user-name-nav {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topnav-right {
  position: relative;
}

#nav-user {
  position: relative;
  min-width: 0;
}

.user-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(280px, calc(100vw - 24px));
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .12);
  z-index: 250;
  overflow: hidden;
}

.user-dropdown.active {
  display: block;
  animation: dropdownIn .14s ease;
  transform-origin: top right;
}

@keyframes dropdownIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.user-dropdown-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface-low);
  min-width: 0;
}

.user-dropdown-header > div:last-child {
  flex: 1;
  min-width: 0;
}

#dropdown-username,
#dropdown-email {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#dropdown-uid {
  display: inline-block;
  max-width: calc(100% - 32px);
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
  white-space: nowrap;
}

.user-dropdown-sep {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

.user-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  transition: background .12s;
}

.user-dropdown-item i {
  font-size: 15px;
  color: var(--hint);
}

.user-dropdown-item:hover {
  background: var(--surface-low);
}

.user-dropdown-item.danger {
  color: #b91c1c;
}

.user-dropdown-item.danger i {
  color: #b91c1c;
}

.user-dropdown-item.danger:hover {
  background: #fef2f2;
}

[data-theme="dark"] .user-dropdown-item.danger:hover {
  background: rgba(185, 28, 28, .12);
}

.auth-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 20px;
  font-size: 14px;
  color: var(--text);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .15);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 500;
  opacity: 0;
  transition: all .3s ease;
  max-width: 360px;
  white-space: pre-line;
}

.auth-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.auth-toast.success i {
  color: #16a34a;
}

.auth-toast.error i {
  color: #b91c1c;
}

.auth-toast.info i {
  color: var(--primary);
}

.aff-link-modal {
  max-width: 560px;
}

.aff-link-message {
  padding: 16px;
  background: var(--surface-low);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 16px;
}

.aff-link-message__text {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 14px;
}

.aff-link-message__url {
  display: block;
  color: var(--primary);
  font-weight: 700;
  line-height: 1.6;
  word-break: break-all;
}

.aff-link-message__status {
  margin-top: 8px;
  color: var(--hint);
  font-size: 12px;
}

.aff-link-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.aff-close-btn {
  background: var(--surface-low);
  color: var(--text);
  border: 1px solid var(--border);
}

.aff-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.aff-rule-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.aff-rule-card {
  padding: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.aff-rule-card.is-gold {
  background: var(--gold-bg);
  border-color: rgba(200, 150, 12, .2);
}

.aff-rule-card span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 4px;
}

.aff-rule-card strong {
  display: block;
  color: var(--text);
  font-size: 18px;
  margin-bottom: 8px;
}

.aff-rule-card div,
.aff-rule-card small {
  display: block;
  color: var(--hint);
  font-size: 13px;
  line-height: 1.7;
}

.aff-stat {
  padding: 15px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.aff-stat span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 6px;
}

.aff-stat strong {
  color: var(--text);
  font-size: 24px;
}

.aff-link-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.aff-link-value {
  color: var(--primary);
  font-weight: 700;
  word-break: break-all;
  line-height: 1.6;
}

.aff-tabs .tab i {
  font-size: 14px;
  vertical-align: -2px;
  margin-right: 5px;
}

.aff-money-filter {
  display: flex;
  align-items: end;
  gap: 12px;
  margin-bottom: 12px;
}

.aff-table {
  min-width: 760px;
}

.aff-status {
  display: inline-flex;
  padding: 4px 7px;
  border-radius: 4px;
  background: var(--gold-bg);
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
}

.aff-status.settled {
  background: #ecfdf5;
  color: #047857;
}

@media(max-width:480px) {
  .auth-modal-inner {
    padding: 24px 18px 20px;
  }

  .auth-title {
    font-size: 19px;
  }

  .user-name-nav {
    display: none;
  }

  .aff-top-btn span {
    display: none;
  }
}

@media(max-width:760px) {
  .aff-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .aff-rule-grid {
    grid-template-columns: 1fr;
  }

  .aff-link-card,
  .aff-money-filter {
    display: grid;
    grid-template-columns: 1fr;
  }
}

/* ===== Ideas page ===== */
.ideas-tip .tip-note {
  color: var(--hint);
}

.ideas-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, .55fr);
  gap: 16px;
  margin-bottom: 16px;
}

.ideas-form-grid {
  display: grid;
  grid-template-columns: minmax(160px, .45fr) minmax(220px, .55fr);
  gap: 12px;
  margin-bottom: 12px;
}

.ideas-field-wide {
  margin-top: 12px;
}

.ideas-textarea {
  min-height: 172px;
  resize: vertical;
  line-height: 1.7;
}

.ideas-actions {
  margin-top: 14px;
}

.ideas-side-card {
  align-self: start;
}

.ideas-safe-list {
  display: grid;
  gap: 12px;
}

.ideas-safe-list div {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 12px;
  background: var(--surface-low);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.6;
}

.ideas-safe-list i {
  color: var(--primary);
  font-size: 17px;
  margin-top: 2px;
}

.ideas-tabs {
  margin-top: 2px;
}

.ideas-list {
  display: grid;
  gap: 12px;
}

.ideas-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 15px;
  box-shadow: var(--shadow-sm);
}

.ideas-card-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 9px;
}

.ideas-card h3 {
  margin: 5px 0 0;
  font-size: 17px;
  line-height: 1.45;
  color: var(--text);
  word-break: break-word;
}

.ideas-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.8;
  font-size: 14px;
  word-break: break-word;
}

.ideas-type,
.ideas-status-tag {
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
}

.ideas-type {
  padding: 4px 7px;
  background: var(--surface-low);
  color: var(--primary);
  border: 1px solid var(--border);
}

.ideas-status-tag {
  flex-shrink: 0;
  padding: 5px 8px;
  background: var(--surface-low);
  color: var(--muted);
}

.ideas-status-tag.adopted {
  background: #ecfdf5;
  color: #047857;
}

.ideas-status-tag.reviewed {
  background: #eff6ff;
  color: #1d4ed8;
}

.ideas-status-tag.archived {
  background: #f3f4f6;
  color: #6b7280;
}

.ideas-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 12px;
  color: var(--hint);
  font-size: 12.5px;
}

.ideas-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.ideas-admin-note {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--gold-bg);
  color: var(--gold);
  border: 1px solid rgba(200, 150, 12, .18);
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 1.6;
}

@media(max-width:900px) {
  .ideas-layout,
  .ideas-form-grid {
    grid-template-columns: 1fr;
  }
}

@media(max-width:560px) {
  .ideas-card-head {
    display: block;
  }

  .ideas-status-tag {
    margin-top: 8px;
  }
}