/* ============ 通用表面与控件 ============ */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow), var(--card-glow), inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 40px rgba(54,221,236,.04);
  -webkit-backdrop-filter: blur(var(--blur)); backdrop-filter: blur(var(--blur));
}
.card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, rgba(120,220,255,.07), transparent 38%); }
.card-solid { background: var(--surface-solid); }
.card-2 { background: var(--surface-2); }
.card-pad { padding: var(--card-pad); }
.card-title { font-size: var(--t-h2); line-height: var(--t-h2-lh); font-weight: 600; letter-spacing: .01em; display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; white-space: nowrap; }
.card-title .cap { white-space: nowrap; font-size: 11px; }
.card-title .sub { font-size: var(--t-cap); color: var(--ink-3); font-weight: 400; white-space: normal; }
.section { padding: 0 var(--page-x); }
.stack { display: flex; flex-direction: column; gap: var(--card-gap); }
.row { display: flex; align-items: center; gap: 8px; }
.grow { flex: 1 1 auto; min-width: 0; }
.muted { color: var(--ink-3); }
.dim { color: var(--ink-4); }
.cap { font-size: var(--t-cap); line-height: var(--t-cap-lh); }
.ellip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pos { color: var(--pos); } .neg { color: var(--neg); } .warn { color: var(--warn); } .cyan { color: var(--cyan); } .violet { color: var(--violet); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--touch); padding: 0 16px; border-radius: var(--r-ctl);
  font-size: var(--t-body); font-weight: 500; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--ink);
  transition: transform var(--m-fast) var(--ease), background var(--m-fast), border-color var(--m-fast);
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--cyan); color: var(--cyan-ink); border-color: transparent; font-weight: 600; box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 6px 18px rgba(54,221,236,.18); }
.btn-blue { background: var(--blue); color: #fff; border-color: transparent; font-weight: 600; }
:root[data-ace-theme="light"] .btn-blue, :root:not([data-ace-theme="dark"]) .btn-blue { color: #fff; }
.btn-ghost { background: transparent; }
.btn-sm { min-height: 36px; padding: 0 12px; font-size: 13px; }
.btn-xs { min-height: 30px; padding: 0 10px; font-size: 12px; border-radius: 8px; }
.btn:disabled { opacity: .5; }
.iconbtn { display: inline-flex; align-items: center; justify-content: center; width: var(--touch); height: 40px; border-radius: 12px; color: var(--ink-2); }
.iconbtn:active { background: var(--surface-hi); }
.iconbtn.on { color: var(--warn); }

.pill { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: var(--r-pill); font-size: 12px; line-height: 1; font-weight: 500; border: 1px solid var(--line); color: var(--ink-2); background: var(--surface-2); white-space: nowrap; }
.pill-live { color: var(--live); border-color: rgba(73,226,173,.5); background: var(--pos-soft); box-shadow: 0 0 12px rgba(73,226,173,.22); }
.pill-live .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 3px rgba(73,226,173,.18); animation: breathe 1.6s ease-in-out infinite; }
.pill-ht { color: var(--warn); border-color: rgba(255,208,131,.35); background: var(--warn-soft); }
.pill-ft { color: var(--ink-3); }
.pill-warn { color: var(--warn); border-color: rgba(255,208,131,.4); background: var(--warn-soft); }
.pill-neg { color: var(--neg); border-color: rgba(255,137,146,.4); background: var(--neg-soft); }
.pill-cyan { color: var(--cyan); border-color: rgba(54,221,236,.4); background: var(--cyan-soft); }
.pill-violet { color: var(--violet); border-color: rgba(178,154,255,.4); background: var(--violet-soft); }
.pill-demo { color: var(--violet); border-color: rgba(178,154,255,.45); background: var(--violet-soft); font-weight: 600; letter-spacing: .04em; }
.pill-xs { height: 18px; padding: 0 6px; font-size: 11px; }
@keyframes breathe { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .pill-live .dot { animation: none; } }
:root[data-ace-motion="reduced"] .pill-live .dot { animation: none; }

.seg { display: inline-flex; padding: 3px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); gap: 2px; }
.seg > button { min-height: 28px; padding: 0 12px; border-radius: 9px; font-size: 13px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.seg > button[aria-pressed="true"] { background: var(--cyan); color: var(--cyan-ink); font-weight: 600; box-shadow: 0 2px 8px rgba(54,221,236,.25); }
.seg-sm > button { min-height: 28px; padding: 0 10px; font-size: 12px; }

.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface-2); font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.chip[aria-pressed="true"], .chip.on { background: var(--cyan-soft); border-color: rgba(54,221,236,.5); color: var(--cyan); }
.chip .cnt { font-size: 12px; color: var(--ink-3); }

.tag { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 5px; font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: .02em; }
.tag-a { background: var(--pos-soft); color: var(--pos); }
.tag-b { background: var(--blue-soft); color: var(--blue); }
.tag-c { background: var(--surface-3); color: var(--ink-2); }
.tag-t5 { background: var(--cyan-soft); color: var(--cyan); }
.tag-ord { background: var(--surface-3); color: var(--ink-2); }
.tag-red { background: var(--neg-soft); color: var(--neg); }
.tag-black { background: rgba(120,140,170,.18); color: var(--ink-2); }
.tag-push { background: var(--push-soft); color: var(--push); }
.tag-void { background: var(--warn-soft); color: var(--warn); }
.tag-pending, .tag-review, .tag-revised { background: var(--warn-soft); color: var(--warn); }
.tag-legacy { background: var(--violet-soft); color: var(--violet); }
.tag-demo { background: var(--violet-soft); color: var(--violet); }

.hr { height: 1px; background: var(--line); margin: 8px 0; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 13px; }
.kv dt { color: var(--ink-3); } .kv dd { margin: 0; text-align: right; }
.note { font-size: var(--t-cap); line-height: var(--t-cap-lh); color: var(--ink-3); }
.note-box { padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px dashed var(--line-strong); font-size: 13px; line-height: 20px; color: var(--ink-2); }
.note-box.warn { border-color: rgba(255,208,131,.5); }
.note-box.neg { border-color: rgba(255,137,146,.5); }

/* 空值 */
.na { color: var(--ink-4); }
.na-reason { font-size: 11px; color: var(--ink-4); }

/* ============ 主框架 ============ */
.topbar {
  position: sticky; top: 0; z-index: 30; height: var(--topbar-h);
  display: flex; align-items: center; gap: 10px; padding: 0 var(--page-x);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-1) 62%, transparent), color-mix(in srgb, var(--bg-1) 38%, transparent));
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.brand .name { text-shadow: 0 0 16px rgba(54,221,236,.35); }
.brand .ico { filter: drop-shadow(0 0 8px rgba(54,221,236,.6)); }
.brand { display: flex; align-items: center; gap: 8px; color: var(--cyan); }
.brand .name { font-size: 18px; font-weight: 700; letter-spacing: .04em; color: var(--ink); }
.brand .en { font-size: 9px; letter-spacing: .18em; color: var(--ink-3); display: block; line-height: 1; margin-top: 2px; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.quota-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px 0 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); font-size: 12px; color: var(--ink-2); }
.quota-btn b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.quota-btn .bar { width: 44px; height: 4px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.quota-btn .bar i { display: block; height: 100%; background: var(--cyan); }

.page { padding-bottom: calc(var(--bottombar-h) + var(--safe-b) + 16px); }
.bottombar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  height: calc(var(--bottombar-h) + var(--safe-b)); padding-bottom: var(--safe-b);
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: color-mix(in srgb, var(--bg-1) 90%, transparent);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border-top: 1px solid var(--line);
}
.bottombar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--ink-3); font-size: 11px; font-weight: 500; min-height: var(--touch); }
.bottombar a .ico { transition: transform var(--m-fast) var(--ease); }
.bottombar a[aria-current="page"] { color: var(--cyan); }
.bottombar a[aria-current="page"] .ico { transform: translateY(-1px); filter: drop-shadow(0 0 6px rgba(54,221,236,.5)); }
.sidebar { display: none; }

/* 桌面 ≥981：侧栏 */
@media (min-width: 981px) {
  .bottombar { display: none; }
  .page { padding-bottom: 32px; }
  .sidebar {
    display: flex; flex-direction: column; gap: 4px; position: fixed; left: 0; top: 0; bottom: 0; width: var(--sidebar-w); z-index: 25;
    padding: 18px 14px; background: color-mix(in srgb, var(--bg-1) 86%, transparent);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-right: 1px solid var(--line);
  }
  .sidebar .brand { padding: 4px 10px 18px; }
  .sidebar a { display: flex; align-items: center; gap: 10px; min-height: var(--touch); padding: 0 12px; border-radius: 12px; color: var(--ink-2); font-size: 14px; font-weight: 500; }
  .sidebar a[aria-current="page"] { background: var(--cyan-soft); color: var(--cyan); box-shadow: inset 0 0 0 1px rgba(54,221,236,.3); }
  .sidebar .side-foot { margin-top: auto; font-size: 11px; color: var(--ink-4); line-height: 16px; padding: 0 10px; }
  .topbar { left: var(--sidebar-w); }
  .with-sidebar { padding-left: var(--sidebar-w); }
  .topbar .brand { display: none; }
  :root { --page-x: 24px; }
  .content-max { max-width: 1240px; margin: 0 auto; }
}

/* ============ 赛程 ============ */
.datebar { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 5px var(--page-x) 4px; height: 50px; scroll-snap-type: x proximity; }
.datebar::-webkit-scrollbar { display: none; }
.datebar button { line-height: 16px; flex: 0 0 calc((100% - 36px) / 7); scroll-snap-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; height: 41px; border-radius: 10px; border: 1px solid transparent; color: var(--ink-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.datebar button b { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.datebar button.today b { color: var(--ink); }
.datebar button[aria-pressed="true"] { background: var(--cyan-soft); border-color: rgba(54,221,236,.6); color: var(--cyan); box-shadow: inset 0 -2px 0 var(--cyan), 0 0 14px rgba(54,221,236,.25); }
.datebar button[aria-pressed="true"] b { color: var(--cyan); font-weight: 600; }

.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 2px var(--page-x) 6px; }
.tile { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 46px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--card-glow), inset 0 1px 0 rgba(255,255,255,.08); -webkit-backdrop-filter: blur(var(--blur)); backdrop-filter: blur(var(--blur)); }
.tile b { font-size: 19px; line-height: 22px; font-weight: 700; color: var(--cyan); font-variant-numeric: tabular-nums; text-shadow: 0 0 12px rgba(54,221,236,.35); }
.tile span { font-size: 10.5px; color: var(--ink-3); line-height: 13px; }
.tile.dimmed b { color: var(--ink-2); }

.toolbar { display: flex; flex-direction: column; gap: 6px; padding: 2px var(--page-x) 8px; }
.toolbar .line1 { display: flex; align-items: center; gap: 8px; }
.toolbar .line2 { display: flex; align-items: center; gap: 8px; }
.filter-entry { flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; }
.filter-entry .meta { overflow: hidden; text-overflow: ellipsis; }
.filter-entry .mode { font-weight: 600; color: var(--cyan); }
.filter-entry .meta { color: var(--ink-3); font-size: 12px; }
.filter-entry .ico { margin-left: auto; color: var(--ink-3); }

.list { display: flex; flex-direction: column; gap: var(--card-gap); padding: 0 var(--page-x); }
.divider-now { display: flex; align-items: center; gap: 10px; color: var(--cyan); font-size: 12px; padding: 2px 4px; }
.divider-now::before, .divider-now::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(54,221,236,.5), transparent); }

/* 比赛卡 */
.match { padding: 8px 12px 9px; cursor: pointer; transition: border-color var(--m-fast), transform var(--m-fast) var(--ease); }
.match:active { transform: scale(.995); }
.match.is-live { border-color: rgba(73,226,173,.42); box-shadow: var(--shadow), 0 0 0 1px rgba(73,226,173,.12), 0 0 26px rgba(73,226,173,.14), inset 0 1px 0 rgba(255,255,255,.08); }
.match.is-starred { border-color: rgba(255,208,131,.32); }
.m-head { display: flex; align-items: center; gap: 8px; height: 24px; }
.lg { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); font-weight: 500; min-width: 0; }
.lg .lg-dot { width: 8px; height: 8px; border-radius: 3px; background: var(--lg-c, var(--blue)); box-shadow: 0 0 6px color-mix(in srgb, var(--lg-c, var(--blue)) 60%, transparent); flex: 0 0 auto; }
.lg .lg-name { max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-time { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.m-status { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.m-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; align-items: center; margin-top: 4px; }
.teams { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.team { display: grid; grid-template-columns: 22px minmax(0, 1fr) 30px; align-items: center; gap: 7px; min-height: 30px; }
.team .name { font-size: 14px; line-height: 18px; font-weight: 600; color: var(--ink); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all; }
.team .name.long { font-size: 13px; line-height: 17px; }
.team .score { font-size: 26px; line-height: 28px; font-weight: 700; color: var(--score); text-shadow: 0 0 14px rgba(95,240,197,.35); font-variant-numeric: tabular-nums; min-width: 1.2em; text-align: right; letter-spacing: -.01em; }
.team .score.pending { color: var(--ink-3); font-size: 14px; font-weight: 500; }
.team .score.vs { color: var(--ink-4); font-size: 13px; font-weight: 500; }
.team .score.dim { color: var(--ink-2); }
.crest { display: inline-flex; flex: 0 0 auto; }
.odds3 { display: grid; grid-template-columns: 24px repeat(3, 42px); gap: 3px 3px; align-self: center; }
.odds3 .lab { font-size: 10.5px; color: var(--ink-4); display: flex; align-items: center; justify-content: flex-start; white-space: nowrap; letter-spacing: -.02em; }
.odds3 .cell { height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line); font-size: var(--t-odds); font-variant-numeric: tabular-nums; color: var(--ink); }
.odds3 .cell.line { color: var(--cyan); font-weight: 600; background: var(--cyan-soft); border-color: rgba(54,221,236,.45); box-shadow: 0 0 10px rgba(54,221,236,.14); }
.odds3 .cell.na { color: var(--ink-4); background: transparent; border-style: dashed; }
.odds3 .cell.closed { color: var(--ink-3); }
.odds3.stale .cell { opacity: .7; }
.star-btn { width: 44px; height: 44px; margin: -9px -12px -9px -4px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-4); border-radius: 10px; flex: 0 0 auto; }
.star-btn.on { color: var(--warn); filter: drop-shadow(0 0 5px rgba(255,208,131,.5)); }
.freeze { margin-top: 6px; display: flex; flex-direction: column; gap: 2px; padding: 4px 8px 4px; border-radius: 9px; background: var(--cyan-soft); border: 1px solid rgba(54,221,236,.22); font-size: 13px; line-height: 18px; }
.freeze .fz-row { display: flex; align-items: center; gap: 6px; min-height: 20px; flex-wrap: wrap; min-width: 0; }
.freeze .fz-one { flex-wrap: wrap; row-gap: 2px; }
.freeze .fz-one .pick { flex: 1 1 auto; font-size: 13px; white-space: nowrap; overflow: visible; text-overflow: clip; }
.freeze .fz-one .hit { flex: 0 0 auto; }
.freeze.is-waiting .fz-row, .freeze.is-missed .fz-row { min-height: 20px; }
.tag { white-space: nowrap; }
.freeze.is-waiting, .freeze.is-missed { background: var(--surface-2); border-color: var(--line); color: var(--ink-3); }
.freeze.is-ordinary { background: var(--blue-soft); border-color: rgba(100,181,255,.22); }
.freeze .pick { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.freeze .odd { color: var(--cyan); font-weight: 600; font-variant-numeric: tabular-nums; }
.freeze .hit { margin-left: auto; font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.freeze .pick-row { font-size: 13.5px; }
.freeze .hit b { color: var(--pos); font-weight: 600; font-variant-numeric: tabular-nums; }
.freeze .trend { display: inline-flex; align-items: center; gap: 2px; font-size: 11px; color: var(--ink-3); }
.freeze .trend.aligned { color: var(--pos); } .freeze .trend.against { color: var(--neg); }
.m-foot { margin-top: 4px; display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; font-size: 11px; color: var(--ink-4); line-height: 15px; min-height: 15px; }
.m-foot .w { color: var(--warn); }

/* 骨架 */
.skel { position: relative; overflow: hidden; background: var(--surface-2); border-radius: 8px; }
.skel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--surface-hi), transparent); animation: shimmer 1.4s infinite; }
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .skel::after { animation: none; } }

/* 状态面板 */
.state-panel { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 28px 20px; }
.state-panel .ico { color: var(--ink-3); }
.state-panel h3 { font-size: 16px; font-weight: 600; }
.state-panel p { font-size: 13px; color: var(--ink-3); line-height: 20px; max-width: 30em; }
.state-panel .actions { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; justify-content: center; }
.banner { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; font-size: 12px; line-height: 16px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2); }
.banner.warn { border-color: rgba(255,208,131,.45); color: var(--warn); background: var(--warn-soft); }
.banner.neg { border-color: rgba(255,137,146,.45); color: var(--neg); background: var(--neg-soft); }
.banner .ico { flex: 0 0 auto; }
.banner button { margin-left: auto; font-weight: 600; color: inherit; text-decoration: underline; text-underline-offset: 3px; min-height: 28px; }

.demo-strip { position: sticky; top: var(--topbar-h); z-index: 20; display: flex; justify-content: center; gap: 6px; padding: 1px 0; font-size: 10px; line-height: 16px; color: var(--violet); background: color-mix(in srgb, var(--bg-0) 45%, transparent); border-bottom: 1px solid rgba(178,154,255,.2); letter-spacing: .06em; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

.toast { position: fixed; left: 50%; bottom: calc(var(--bottombar-h) + var(--safe-b) + 16px); transform: translateX(-50%); z-index: 60; padding: 10px 14px; border-radius: 12px; background: var(--surface-solid); border: 1px solid var(--line-strong); box-shadow: var(--shadow); font-size: 13px; max-width: calc(100vw - 32px); animation: toast-in var(--m-sheet) var(--ease); }
.toast.warn { border-color: rgba(255,208,131,.5); color: var(--warn); }
.toast.neg { border-color: rgba(255,137,146,.5); color: var(--neg); }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } }
@media (min-width: 981px) { .toast { bottom: 24px; } }

/* 页面标题行（滚球/账本） */
.page-head { display: flex; align-items: center; gap: 10px; padding: 8px var(--page-x) 6px; }
.page-head h1 { font-size: var(--t-title); line-height: var(--t-title-lh); font-weight: 600; white-space: nowrap; flex: 0 0 auto; }
.page-head .cnt { font-size: 12px; color: var(--ink-3); }

@media (max-width: 359px) {
  :root { --page-x: 12px; }
  .brand .en { display: none; }
  .quota-btn .bar { display: none; }
  .odds3 { grid-template-columns: 22px repeat(3, 38px); }
  .odds3 .cell { font-size: 12px; }
  .team .name { font-size: 13px; }
  .team .score { font-size: 24px; }
  .toolbar .line2 > .cap { display: none; }
  .tiles { gap: 6px; }
  .tile b { font-size: 18px; }
  .freeze .hit { font-size: 11px; }
  .freeze { padding: 5px 6px 6px; }
  .freeze .tag { padding: 0 4px; }
  .filter-entry { padding: 0 8px; gap: 6px; font-size: 12px; }
  .chip { padding: 0 9px; }
}

/* ============ 参考图皮肤（用户 2026-09-06 要求：效果与布局对齐参考图） ============ */
:root {
  --neon: rgba(54, 221, 236, .55);
  --neon-soft: rgba(54, 221, 236, .22);
  --neon-glow: 0 0 10px rgba(54, 221, 236, .28), inset 0 0 12px rgba(54, 221, 236, .06);
  --gold: #ffcf5c;
}
.card { border-color: var(--neon-soft); box-shadow: var(--shadow), 0 0 0 1px rgba(54,221,236,.14), 0 0 26px rgba(54,221,236,.14), inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 50px rgba(54,221,236,.05); }
.tile { border-color: var(--neon-soft); box-shadow: 0 0 0 1px rgba(54,221,236,.12), 0 0 18px rgba(54,221,236,.16), inset 0 1px 0 rgba(255,255,255,.08); background: linear-gradient(180deg, rgba(20,60,100,.8), rgba(12,36,66,.85)); }
.tile b { font-size: 22px; line-height: 24px; text-shadow: 0 0 14px rgba(54,221,236,.5); }

/* 顶栏：logo 左，铃铛（仅赛程）与额度右 */
.topbar { height: 56px; }
.topbar .bell { color: var(--ink); position: relative; }
.topbar .bell .dot { position: absolute; top: 9px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: #ff5f6d; box-shadow: 0 0 6px #ff5f6d; }
.brand .name { font-size: 22px; font-weight: 800; letter-spacing: .02em; }
.brand .en { font-size: 9px; letter-spacing: .22em; color: var(--cyan); opacity: .85; }

/* 芯片行（参考：全部 / 热门 / 五大联赛 / 次级联赛 / 筛选图标） */
.chiprow { display: flex; align-items: center; gap: 8px; padding: 2px var(--page-x) 10px; overflow-x: auto; scrollbar-width: none; }
.chiprow::-webkit-scrollbar { display: none; }
.rchip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--neon); background: rgba(10,34,60,.8); color: var(--ink); font-size: 13px; font-weight: 500; box-shadow: var(--neon-glow); white-space: nowrap; }
.rchip[aria-pressed="true"], .rchip.on { background: linear-gradient(180deg, #5ef0ff, #22c9dc); color: #062033; font-weight: 700; border-color: transparent; box-shadow: 0 0 16px rgba(54,221,236,.55), 0 0 0 1px rgba(255,255,255,.25) inset; }
.rchip .cnt { font-size: 12px; opacity: .8; }
.rchip.icon { width: 40px; padding: 0; justify-content: center; }
.rchip.star-on { color: var(--gold); border-color: rgba(255,207,92,.6); box-shadow: 0 0 12px rgba(255,207,92,.25); }

/* 赛程卡：参考布局 */
.rm { padding: 0; overflow: hidden; }
.rm .rm-head { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; background: rgba(54,221,236,.07); border-bottom: 1px solid rgba(54,221,236,.16); }
.rm .rm-head .lgc { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--lg-c, var(--blue)); color: #fff; font-size: 10px; font-weight: 700; box-shadow: 0 0 8px var(--lg-c, var(--blue)); flex: 0 0 auto; }
.rm .rm-head .lgn { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm .rm-head .tm { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.rm .rm-head .m-status { margin-left: auto; }
.rm .rm-head .chev { color: var(--ink-3); flex: 0 0 auto; }
.rm .rm-teams { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) 40px; align-items: center; gap: 6px; padding: 8px 4px 6px 12px; }
.rm .rm-teams .tside { display: flex; align-items: center; gap: 7px; min-width: 0; }
.rm .rm-teams .tside.away { flex-direction: row-reverse; text-align: right; }
.rm .rm-teams .tn { font-size: 15px; line-height: 19px; font-weight: 700; color: var(--ink); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all; }
.rm .rm-teams .tn.long { font-size: 12.5px; line-height: 16px; }
.rm .rm-teams .sc { font-size: 26px; line-height: 30px; font-weight: 800; color: var(--score); font-variant-numeric: tabular-nums; letter-spacing: .04em; text-shadow: 0 0 16px rgba(95,240,197,.45); white-space: nowrap; min-width: 70px; text-align: center; }
.rm .rm-teams .sc.vs { color: var(--ink-2); font-size: 16px; font-weight: 700; letter-spacing: .2em; }
.rm .rm-teams .sc.na { color: var(--ink-3); font-size: 18px; }
.rm .rm-teams .star-btn { margin: 0; width: 40px; height: 40px; }
.rm .rm-odds { display: flex; flex-direction: column; gap: 5px; padding: 0 12px; }
.rm .rrow { display: grid; grid-template-columns: 26px repeat(3, 1fr); gap: 6px; align-items: center; }
.rm .rrow .rl { font-size: 11px; color: var(--ink-3); text-align: left; white-space: nowrap; letter-spacing: -.02em; }
.rcell { height: 28px; display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: 7px; border: 1px solid var(--neon-soft); background: rgba(10,34,60,.75); box-shadow: inset 0 0 12px rgba(54,221,236,.05), 0 0 8px rgba(54,221,236,.10); font-size: 14px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.rcell .k { font-size: 11px; font-weight: 400; color: var(--ink-3); }
.rcell.line { color: var(--cyan); border-color: var(--neon); box-shadow: 0 0 12px rgba(54,221,236,.28), inset 0 0 12px rgba(54,221,236,.10); }
.rcell.na { color: var(--ink-4); border-style: dashed; box-shadow: none; font-weight: 400; }
.rcell.closed { color: var(--ink-2); }
.rm .rfreeze { display: flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 12px 8px; font-size: 13px; }
.rm .rfreeze .crown { color: var(--gold); filter: drop-shadow(0 0 6px rgba(255,207,92,.6)); flex: 0 0 auto; }
.rm .rfreeze .grade { color: var(--ink-2); font-weight: 600; white-space: nowrap; }
.rm .rfreeze .pk { color: var(--ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rm .rfreeze .odd { color: var(--score); font-weight: 700; font-variant-numeric: tabular-nums; }
.rm .rfreeze .hit { margin-left: auto; color: var(--ink-3); font-size: 12px; white-space: nowrap; }
.rm .rfreeze .hit b { color: var(--score); font-size: 15px; font-weight: 800; text-shadow: 0 0 10px rgba(95,240,197,.4); }
.rm .rfreeze .trend { font-size: 11px; display: inline-flex; align-items: center; gap: 2px; }
.rm .rfreeze .trend.aligned { color: var(--pos); } .rm .rfreeze .trend.against { color: var(--neg); }
.rm .rfreeze.waiting { color: var(--ink-3); }
.rm .rfreeze.waiting .crown { color: var(--ink-4); filter: none; }
.rm .rfoot { padding: 0 12px 8px; font-size: 11px; color: var(--ink-4); line-height: 15px; display: flex; flex-wrap: wrap; gap: 2px 8px; }
.rm .rfoot .w { color: var(--warn); }
.rm.is-live .rm-head { background: rgba(73,226,173,.08); }
.pill-live { background: rgba(6,40,44,.85); color: #5ff0c5; border-color: rgba(95,240,197,.6); box-shadow: 0 0 14px rgba(95,240,197,.35); font-weight: 600; }
.pill-live .lbl { font-weight: 500; }

/* 滚球：参考布局 */
.live-title { text-align: center; font-size: 20px; font-weight: 700; padding: 6px 0 8px; letter-spacing: .1em; }
.segbar { display: flex; gap: 6px; margin: 0 var(--page-x) 10px; padding: 4px; border-radius: 12px; border: 1px solid var(--neon-soft); background: rgba(10,34,60,.7); box-shadow: var(--neon-glow); }
.segbar button { flex: 1; min-height: 36px; border-radius: 9px; font-size: 14px; color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.segbar button .cnt { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: rgba(54,221,236,.18); color: var(--ink); font-size: 12px; font-weight: 700; }
.segbar button[aria-pressed="true"] { background: linear-gradient(180deg, rgba(54,221,236,.28), rgba(54,221,236,.12)); color: var(--ink); font-weight: 700; box-shadow: inset 0 0 0 1px var(--neon), 0 0 12px rgba(54,221,236,.25); }
.segbar button[aria-pressed="true"] .cnt { background: var(--cyan); color: #062033; }
.rl-card { padding: 0; overflow: hidden; }
.rl-card .rm-head { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; }
.rl-card .rm-teams { padding: 6px 4px 8px 12px; }
.rl-card .rm-teams .sc { font-size: 30px; line-height: 34px; }
.rl-card .lstatus { padding: 0 12px 6px; margin: 0; }
.rl-card .rm-odds { padding: 0 12px 4px; }
.rl-tabs { display: flex; margin: 8px 12px 0; border-bottom: 1px solid rgba(54,221,236,.18); }
.rl-tabs button { flex: 1; min-height: 38px; font-size: 13px; color: var(--ink-3); border-bottom: 2px solid transparent; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.rl-tabs button[aria-expanded="true"] { color: var(--cyan); border-bottom-color: var(--cyan); font-weight: 600; text-shadow: 0 0 10px rgba(54,221,236,.5); }
.rl-card .lpanel { margin: 8px 12px 0; }
.rl-card .rfreeze { padding: 8px 12px 10px; }
.rl-card .rfoot { padding: 0 12px 10px; }

/* 账本：参考布局 */
.ltabs { display: flex; margin: 0 var(--page-x) 10px; border-bottom: 1px solid rgba(54,221,236,.2); }
.ltabs button { flex: 1; min-height: 40px; font-size: 14px; color: var(--ink-3); border-bottom: 2px solid transparent; }
.ltabs button[aria-pressed="true"] { color: var(--cyan); border-bottom-color: var(--cyan); font-weight: 700; text-shadow: 0 0 10px rgba(54,221,236,.5); }
.lrings { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; }
.lring { display: flex; align-items: center; gap: 10px; }
.lring .ring { width: 56px; height: 56px; }
.lring b { font-size: 26px; line-height: 30px; font-weight: 800; font-variant-numeric: tabular-nums; display: block; }
.lring span { font-size: 12px; color: var(--ink-3); }
.lring.red b { color: var(--neg); text-shadow: 0 0 12px rgba(255,137,146,.35); }
.lring.rate b { color: var(--score); text-shadow: 0 0 12px rgba(95,240,197,.4); }
.ltiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 0 var(--page-x); }
.ltile { height: 62px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ltile b { font-size: 22px; line-height: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ltile span { font-size: 11px; color: var(--ink-3); }
.ltile.black b { color: var(--neg); }
.ltile.push b { color: var(--gold); }
.legend .li i { border-radius: 3px; }
.tbl .more { margin-left: auto; font-size: 12px; color: var(--ink-3); }
.tbl .rate { color: var(--score); text-shadow: 0 0 10px rgba(95,240,197,.35); }

/* 详情：参考布局 */
.d-head .d-top .title b { font-size: 15px; }
.d-score .side .tn { font-size: 15px; font-weight: 700; }
.d-score .mid .sc { font-size: 40px; text-shadow: 0 0 20px rgba(95,240,197,.45); }
.pill-min { background: rgba(120,20,40,.75); color: #ff8b95; border: 1px solid rgba(255,120,140,.7); box-shadow: 0 0 12px rgba(255,90,110,.45); font-weight: 700; }
.d-foot { flex: 0 0 auto; display: grid; grid-template-columns: 1fr 1.3fr; gap: 10px; padding: 10px var(--page-x) calc(10px + var(--safe-b)); border-top: 1px solid rgba(54,221,236,.18); background: color-mix(in srgb, var(--bg-0) 85%, transparent); }
.d-foot .btn { min-height: 48px; font-size: 15px; font-weight: 700; border-color: var(--neon); box-shadow: var(--neon-glow); }
.d-foot .btn-primary { background: linear-gradient(180deg, #5ef0ff, #22c9dc); color: #062033; box-shadow: 0 0 18px rgba(54,221,236,.5); }
.tl-track { height: 10px; background: linear-gradient(90deg, #17d3a3 0%, #22c9dc 45%, #4e7dff 70%, #6b5bff 100%); border: 0; opacity: .95; }
.tl-fill { background: transparent; }
.tl-now { background: #ff5f6d; box-shadow: 0 0 8px #ff5f6d; width: 3px; }
.tl-ev { background: #0b2038; border-color: rgba(54,221,236,.5); }
.kd-seg { display: inline-flex; padding: 3px; border-radius: 10px; border: 1px solid var(--neon-soft); background: rgba(10,34,60,.7); }
.kd-seg button { min-height: 28px; padding: 0 12px; border-radius: 8px; font-size: 12px; color: var(--ink-2); }
.kd-seg button[aria-pressed="true"] { background: var(--cyan); color: #062033; font-weight: 700; box-shadow: 0 0 10px rgba(54,221,236,.4); }
.co-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.co-grid .rcell { height: 34px; }
.co-grid .lab { grid-column: 1 / -1; font-size: 12px; color: var(--ink-3); margin-top: 2px; }

@media (prefers-color-scheme: light) {
  :root:not([data-ace-theme="dark"]) { --neon: rgba(0,110,131,.5); --neon-soft: rgba(0,110,131,.28); --neon-glow: 0 0 8px rgba(0,110,131,.12); --gold: #a86b00; }
  :root:not([data-ace-theme="dark"]) .rchip, :root:not([data-ace-theme="dark"]) .rcell, :root:not([data-ace-theme="dark"]) .segbar, :root:not([data-ace-theme="dark"]) .kd-seg { background: rgba(255,255,255,.85); }
  :root:not([data-ace-theme="dark"]) .rchip[aria-pressed="true"], :root:not([data-ace-theme="dark"]) .rchip.on { background: #006e83; color: #fff; }
  :root:not([data-ace-theme="dark"]) .rm .rm-head { background: rgba(0,110,131,.06); }
  :root:not([data-ace-theme="dark"]) .pill-live { background: rgba(8,119,77,.1); color: #08774d; }
  :root:not([data-ace-theme="dark"]) .tl-ev { background: #fff; }
}
:root[data-ace-theme="light"] { --neon: rgba(0,110,131,.5); --neon-soft: rgba(0,110,131,.28); --neon-glow: 0 0 8px rgba(0,110,131,.12); --gold: #a86b00; }
:root[data-ace-theme="light"] .rchip, :root[data-ace-theme="light"] .rcell, :root[data-ace-theme="light"] .segbar, :root[data-ace-theme="light"] .kd-seg { background: rgba(255,255,255,.85); }
:root[data-ace-theme="light"] .rchip[aria-pressed="true"], :root[data-ace-theme="light"] .rchip.on { background: #006e83; color: #fff; }
:root[data-ace-theme="light"] .rm .rm-head { background: rgba(0,110,131,.06); }
:root[data-ace-theme="light"] .pill-live { background: rgba(8,119,77,.1); color: #08774d; }
:root[data-ace-theme="light"] .tl-ev { background: #fff; }
:root[data-ace-theme="light"] .tile { background: #fff; }

/* 参考皮肤 · 393 收紧 */
.topbar { gap: 8px; }
.brand .en { white-space: nowrap; }
.quota-btn { white-space: nowrap; padding: 0 8px 0 7px; gap: 5px; }
@media (max-width: 430px) { .quota-btn .bar { display: none; } .brand .name { font-size: 20px; } .topbar .pill-demo { display: none; } }
.rchip { padding: 0 11px; height: 36px; }
.rchip.filter-entry { padding: 0 10px; }
.rm .rm-teams { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) 36px; gap: 4px; }
.rm .rm-teams .tn { font-size: 14px; line-height: 18px; }
.rm .rm-teams .tn.long { font-size: 12.5px; line-height: 15px; }
.rm .rm-teams .sc { min-width: 64px; letter-spacing: .02em; }
.rm .rm-teams .star-btn { width: 36px; }
.rm .rfreeze { flex-wrap: nowrap; }
.rm .rfreeze .pk { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0; line-height: 18px; }
.rm .rfreeze .hit { flex: 0 0 auto; }

.rl-card .rm-teams .tn { font-size: 13.5px; line-height: 17px; }
.rl-card .rm-teams .sc { min-width: 60px; }

.rl-card .rm-teams .sc { font-size: 28px; min-width: 58px; }
.rl-card .crest svg { width: 24px; height: 24px; }

/* 参考布局 · 第二轮：单行主/平/客、头带国家+联赛、搜索/铃铛顶栏、演示条额度、筛选图标芯片 */
.rm .rrow.nolab { grid-template-columns: repeat(3, 1fr); }
.rcell { height: 34px; font-size: 16px; justify-content: flex-start; padding: 0 12px; gap: 12px; }
.rcell .k { font-size: 13px; }
.rcell.line { justify-content: center; }
.rm .rm-odds { gap: 6px; }
.rm .rm-head .lgn { font-size: 13px; }
.demo-strip { justify-content: flex-start; padding-left: var(--page-x); }
.demo-strip .quota-link { margin-left: auto; margin-right: var(--page-x); display: inline-flex; align-items: center; gap: 3px; color: var(--ink-2); font-size: 11px; min-height: 18px; }
.demo-strip .quota-link b { color: var(--ink); }
.rchip.icon { position: relative; }
.rchip .fdot { position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }
.rsel { position: relative; display: inline-flex; align-items: center; height: 36px; padding: 0 30px 0 14px; border-radius: 10px; border: 1px solid var(--neon); background: rgba(10,34,60,.8); box-shadow: var(--neon-glow); }
.rsel select { appearance: none; -webkit-appearance: none; background: transparent; border: 0; color: var(--ink); font: inherit; font-size: 14px; padding: 0; }
.rsel .ico { position: absolute; right: 8px; pointer-events: none; color: var(--ink-3); }
/* 滚球标题栏 */
.live-bar { display: flex; align-items: center; height: 52px; padding: 0 6px; }
.live-bar .t { flex: 1; text-align: center; font-size: 20px; font-weight: 700; letter-spacing: .1em; }
.live-bar .iconbtn { width: 44px; }
/* 攻击波 */
.wave { position: relative; }
.wave svg { width: 100%; height: 170px; display: block; }
.wave .ax { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-3); padding: 0 4px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.wave .side-lab { position: absolute; left: 4px; font-size: 11px; color: var(--ink-3); }
.hbars { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.hbar2 { display: grid; grid-template-columns: 54px 1fr 52px; align-items: center; gap: 10px; font-size: 13px; }
.hbar2 .tr { height: 8px; border-radius: 4px; background: rgba(120,140,170,.25); overflow: hidden; display: flex; }
.hbar2 .tr .l { height: 100%; background: linear-gradient(90deg, #17d3a3, #22c9dc); }
.hbar2 .tr .r { height: 100%; background: linear-gradient(90deg, #4e7dff, #6b5bff); }
.hbar2 .v { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.rl-tabs button[aria-pressed="true"] { color: var(--cyan); border-bottom-color: var(--cyan); font-weight: 600; text-shadow: 0 0 10px rgba(54,221,236,.5); }
/* 账本参考头部与净收益卡 */
.lprofit { display: grid; grid-template-columns: 1.1fr 1.4fr; gap: 10px; padding: 0 var(--page-x); }
.lprofit .pcard { padding: 12px; display: flex; flex-direction: column; justify-content: center; gap: 2px; border-color: rgba(95,240,197,.5); box-shadow: 0 0 0 1px rgba(95,240,197,.15), 0 0 26px rgba(95,240,197,.18); }
.lprofit .pcard b { font-size: 28px; line-height: 32px; font-weight: 800; color: var(--score); text-shadow: 0 0 14px rgba(95,240,197,.5); font-variant-numeric: tabular-nums; }
.lprofit .pcard b.neg { color: var(--neg); text-shadow: 0 0 14px rgba(255,137,146,.4); }
.lprofit .pcard span { font-size: 12px; color: var(--ink-3); display: flex; align-items: center; gap: 6px; }
.lprofit .lrings { padding: 10px; }
.ltabs5 button { font-size: 14px; }
.pchart svg { width: 100%; height: 190px; display: block; }
.pchart .lg { display: flex; gap: 14px; font-size: 11px; color: var(--ink-3); }
.pchart .lg i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 4px; }
.tbl .more-btn { display: block; width: 100%; text-align: center; min-height: 36px; font-size: 12px; color: var(--ink-3); }

/* 第二轮修整 */
.demo-strip { white-space: nowrap; overflow: hidden; }
.demo-strip > span { overflow: hidden; text-overflow: ellipsis; }
.demo-strip .quota-link { flex: 0 0 auto; }
.app-root.no-topbar .demo-strip { top: 0; }
.hbar2 { grid-template-columns: 54px 1fr 74px; }
.hbar2 .v { font-size: 12px; white-space: nowrap; }
.hbar2 .v.na { color: var(--ink-4); font-weight: 400; }
.lprofit { grid-template-columns: 1fr 1.25fr; }
.lprofit .pcard span { white-space: nowrap; flex-wrap: wrap; }
.lprofit .pcard b { font-size: 26px; }
.lprofit .lrings { padding: 8px 6px; gap: 4px; grid-template-columns: 1fr 1fr; }
.lprofit .lring { gap: 6px; }
.lprofit .lring .ring { width: 44px; height: 44px; }
.lprofit .lring b { font-size: 20px; line-height: 24px; }
.lprofit .lring span { font-size: 11px; white-space: nowrap; }

.rm .rm-teams .tn.long { font-size: 12px; line-height: 15px; }

@media (max-width: 359px) { .lprofit { grid-template-columns: 1fr; } .ltiles { grid-template-columns: repeat(2, 1fr); } .lprofit .lrings { grid-template-columns: 1fr 1fr; } .rsel { padding: 0 26px 0 10px; } .rsel select { font-size: 13px; } }

.tl-ev.goal .ico, .ev.goal .ico { filter: drop-shadow(0 0 3px rgba(255,255,255,.35)); }
.ev.yellow .ico, .ev.red .ico, .tl-ev.yellow .ico, .tl-ev.red .ico { filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.pill-live .ico-ballMono { filter: drop-shadow(0 0 4px rgba(95,240,197,.6)); }

.demo-strip.is-err { color: var(--warn); border-bottom-color: rgba(255,208,131,.35); }