:root {
  color-scheme: light;
  --bg: #f6f7f6;
  --surface: #ffffff;
  --surface-soft: #fafafa;
  --line: #e2e7e3;
  --text: #111713;
  --muted: #68716c;
  --brand: #991b1b;
  --brand-deep: #991b1b;
  --brand-soft: #fae5e6;
  --green: #1f9a6b;
  --shadow: 0 10px 30px rgba(35, 39, 42, 0.06);
  font-family: Inter, "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }
body { font-size: 14px; }
button, input { font: inherit; }
button { border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.app-shell { min-height: 100vh; display: flex; justify-content: center; }
.app { width: min(100%, 540px); min-height: 100vh; background: var(--bg); padding-bottom: 86px; }
.app.no-nav { padding-bottom: 26px; }

.topbar { position: relative; padding: 20px 20px 0; background: transparent; }
.refresh-data { position: absolute; top: 22px; right: 14px; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--brand); font-size: 19px; line-height: 1; }
.refresh-data:active { background: var(--brand-soft); }
.brand-row { display: flex; align-items: center; min-height: 44px; gap: 9px; }
.brand-mark { min-width: 35px; height: 32.5px; display: grid; place-items: center; padding: 0 5px; background: #b91c1c; color: #fff; border-radius: 4px; font-size: 25px; line-height: 32.5px; font-weight: 900; }
.brand-title { margin: 0; font-size: 24px; line-height: 36px; font-weight: 700; letter-spacing: 0; }
.brand-subtitle { margin: 0 0 4px; color: #d52c2c; font-size: 13px; line-height: 19.5px; font-weight: 700; }
.list-header { display: flex; align-items: center; width: 100%; height: 68px; gap: 12px; padding: 14px 16px; }
.list-header .brand { width: 105.21875px; margin-right: -4.20833px; color: var(--brand); font-size: 21px; font-weight: 850; transform: scaleX(.96); transform-origin: left center; }
.list-header h1 { margin: 0; padding-left: 12px; border-left: 1px solid var(--line); font-size: 23px; line-height: 23px; font-weight: 700; }
.date-label { display: flex; align-items: center; gap: 5px; margin-left: auto; font-size: 12px; white-space: nowrap; }
.ui-icon { display: block; width: 15px; height: 15px; }
.date-label .ui-icon { width: 17px; height: 17px; }
.detail-topbar { position: relative; display: flex; align-items: center; justify-content: center; height: 36px; min-height: 36px; padding: 0 48px; background: var(--surface); }
.detail-top-back { position: absolute; left: 12px; top: 0; width: 44px; height: 44px; display: grid; place-items: center; color: var(--text); }
.detail-top-back .ui-icon { width: 22px; height: 22px; }
.detail-top-meta { display: flex; flex-direction: column; align-items: stretch; gap: 2px; text-align: center; }
.detail-top-meta strong { font-size: 14px; line-height: 18px; }
.detail-top-meta time { color: var(--muted); font-size: 11px; line-height: 16px; }
.detail-top-brand { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 850; }
.detail-top-brand .brand-mark { width: 30px; height: 30px; border-radius: 5px; font-size: 15px; }

.content { padding: 6px 14px 26px; }
.section-kicker { color: var(--muted); font-size: 12px; margin: 0 0 8px; }
.privacy-note { margin: 72px 2px 0; color: var(--muted); font-size: 11px; line-height: 1.6; text-align: center; }
.date-bar { display: flex; gap: 0; margin-bottom: 12px; }
.date-input { min-width: 0; flex: 1; height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); }
.primary-btn { height: 42px; padding: 0 17px; border-radius: 10px; background: var(--brand); color: white; font-weight: 700; box-shadow: 0 5px 12px rgba(195, 44, 53, .18); }
.primary-btn:active { transform: translateY(1px); }
.date-bar .date-input { border-radius: 9px 0 0 9px; }
.date-bar .primary-btn, .date-bar .ghost-btn { border: 1px solid var(--line); border-left: 0; border-radius: 0 9px 9px 0; background: var(--surface); color: var(--text); box-shadow: none; }
.ghost-btn { height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--text); font-weight: 650; }
.status-line { display: flex; align-items: center; gap: 7px; min-height: 22px; margin-bottom: 10px; color: var(--muted); font-size: 12px; }
.app[data-active="parlays"] .status-line { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.app[data-active="reviews"] .status-line { display: block; min-height: 21px; margin: 0; color: var(--text); font-size: 14px; line-height: 21px; }
.app[data-active="reviews"] .status-line:empty { display: none; }
.app[data-active="reviews"] .status-line small { display: block; margin: 0; color: var(--muted); font-size: 12px; line-height: 18px; }
.status-dot { width: 7px; height: 7px; border-radius: 99px; background: var(--green); }
.home-date-bar { gap: 0; }
.home-date-bar .date-input { border-radius: 9px 0 0 9px; }
.home-load-btn { height: 42px; border-radius: 0 9px 9px 0; border-left: 0; padding: 0 17px; color: var(--text); background: var(--surface); }
.home-status { margin-top: 1px; }
.v2n-poster-download[hidden] { display: none; }
.v2n-poster-download { margin: 8px 0; text-align: center; }
.v2n-poster-download a { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 5px 10px; border-radius: 5px; background: var(--brand); color: #fff; font-size: 13px; line-height: 20px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.v2n-poster-download a:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.v2n-poster-download a[aria-busy="true"] { opacity: .72; cursor: wait; pointer-events: none; }
body.poster-preview-open { overflow: hidden; }
.poster-save-preview { position: fixed; z-index: 80; inset: 0; display: grid; place-items: center; padding: 16px; }
.poster-save-backdrop { position: absolute; inset: 0; background: rgba(16, 20, 27, .72); }
.poster-save-panel { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: min(680px, 100%); height: min(92dvh, 860px); overflow: hidden; border: 1px solid #dce1e8; border-radius: 8px; background: #fff; box-shadow: 0 20px 50px rgba(0, 0, 0, .28); }
.poster-save-panel header { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 8px 10px 8px 16px; border-bottom: 1px solid #e7eaf0; }
.poster-save-panel header strong { min-width: 0; overflow: hidden; color: #172033; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.poster-save-close { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: #526075; font-size: 28px; line-height: 1; cursor: pointer; }
.poster-save-close:hover { background: #f0f2f5; }
.poster-save-image { min-height: 0; overflow: auto; padding: 12px; background: #eef1f5; text-align: center; overscroll-behavior: contain; }
.poster-save-image img { display: block; width: auto; max-width: 100%; height: auto; margin: 0 auto; background: #fff; box-shadow: 0 2px 10px rgba(20, 28, 42, .12); touch-action: pinch-zoom; -webkit-user-select: auto; user-select: auto; -webkit-touch-callout: default; }
.poster-save-panel footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 10px 14px; border-top: 1px solid #e7eaf0; background: #fff; }
.poster-save-panel footer > span { color: #657084; font-size: 13px; }
.poster-save-panel footer > div { display: flex; flex: 0 0 auto; gap: 8px; }
.poster-save-panel footer a,
.poster-share-button { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 7px 14px; border: 1px solid var(--brand); border-radius: 5px; background: var(--brand); color: #fff; font: inherit; font-size: 14px; font-weight: 600; line-height: 22px; text-decoration: none; cursor: pointer; }
.poster-share-button { background: #fff; color: var(--brand); }
.poster-share-button[hidden] { display: none; }
.poster-save-close:focus-visible,
.poster-save-panel footer a:focus-visible,
.poster-share-button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

@media (max-width: 600px) {
  .poster-save-preview { padding: 0; place-items: stretch; }
  .poster-save-panel { width: 100%; height: 100dvh; max-height: none; border: 0; border-radius: 0; }
  .poster-save-image { padding: 8px; }
  .poster-save-panel footer { align-items: stretch; flex-direction: column; gap: 8px; padding: 9px 10px max(9px, env(safe-area-inset-bottom)); text-align: center; }
  .poster-save-panel footer > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
}
.v2n-delivery-notice { margin-bottom: 14px; padding: 14px; border: 1px solid #e1b86e; border-radius: 7px; background: #fff8dc; line-height: 1.5; }
.v2n-delivery-notice p { margin: 4px 0 0; color: var(--muted); }

.prediction-list { display: grid; gap: 10px; }
.prediction-card { padding: 14px 13px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.prediction-head, .prediction-foot, .match-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.prediction-head { color: var(--muted); font-size: 12px; }
.prediction-head strong { color: var(--brand); font-size: 12px; }
.teams { display: grid; grid-template-columns: 1fr 38px 1fr; align-items: center; gap: 6px; margin: 12px 0; }
.team { display: flex; align-items: center; gap: 8px; min-width: 0; }
.team.away { justify-content: flex-end; text-align: right; }
.team-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; font-size: 16px; }
.versus { text-align: center; color: var(--muted); font-size: 12px; font-weight: 700; }
.team-badge { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; border-radius: 50%; color: #fff; font-weight: 800; font-size: 11px; box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); }
.image-badge { position: relative; overflow: hidden; background: var(--surface); }
.image-badge img { width: 100%; height: 100%; object-fit: contain; padding: 2px; background: #fff; }
.image-badge > span { position: absolute; inset: 0; display: none; place-items: center; background: rgba(31,35,39,.58); color: #fff; font-size: 9px; }
.badge-red { background: #d95157; }
.badge-navy { background: #253654; }
.badge-green { background: #2c8b64; }
.badge-yellow { background: #d69b26; }
.badge-purple { background: #6c4d9e; }
.badge-orange { background: #de7650; }
.badge-blue { background: #2d5ea4; }
.prediction-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.prediction-chip { padding: 8px 9px; border-radius: 8px; background: var(--brand-soft); color: var(--brand-deep); font-size: 12px; font-weight: 750; }
.prediction-chip span { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: 600; }
.prediction-foot { margin-top: 10px; color: var(--muted); font-size: 11px; }
.detail-link { color: var(--brand); font-weight: 800; }
.prediction-line { display: grid; grid-template-columns: auto 1fr auto 1fr; align-items: center; gap: 7px; margin-top: 2px; color: var(--brand-deep); font-size: 12px; }
.prediction-line strong { padding: 5px 7px; border-radius: 7px; background: var(--brand-soft); white-space: nowrap; }
.prediction-line span { color: var(--muted); font-size: 11px; text-align: right; }
.prediction-line.single { grid-template-columns: auto 1fr; }
.prediction-detail-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 7px; color: var(--brand-deep); font-size: 12px; }
.prediction-detail-row b { font-weight: 850; }
.prediction-detail-row .detail-link { padding: 0; background: transparent; font-size: 11px; }

.app[data-active="home"] .content { padding: 6px 20px 26px; }
.app[data-active="home"] .home-date-bar { display: grid; grid-template-columns: minmax(0, 1fr) 108px; margin-bottom: 5px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); overflow: hidden; }
.app[data-active="home"] .home-date-bar .date-input { height: 44px; padding: 10px 16px; border: 0; border-radius: 0; background: var(--surface); color: #000; font-size: 14px; line-height: 21px; }
.app[data-active="home"] .home-load-btn { height: 44px; padding: 10px 16px; border: 0; border-left: 1px solid var(--line); border-radius: 0; background: var(--surface); color: #000; font-size: 14px; line-height: 21px; font-weight: 750; }
.app[data-active="home"] .home-status { display: block; min-height: 18px; margin: 0 0 10px; color: var(--muted); font-size: 12px; line-height: 18px; }
.app[data-active="home"] .home-state-panel { width: 500px; max-width: 100%; }
.app[data-active="home"] .v2n-state-waiting { margin: 0 0 14px; padding: 26px 16px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); text-align: center; }
.app[data-active="home"] .v2n-state-waiting h2 { margin: 0; color: var(--text); font-size: 21px; font-weight: 700; line-height: 31.5px; }
.app[data-active="home"] .v2n-state-waiting p { margin: 0; color: var(--muted); font-size: 14px; font-weight: 400; line-height: 21px; }
.app[data-active="home"] .prediction-list { display: block; }
.app[data-active="home"] .prediction-card { margin: 0 0 10px; padding: 0; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); box-shadow: 0 2px 5px rgba(17, 23, 19, .016); font-size: 14px; line-height: 21px; }
.app[data-active="home"] .privacy-note { width: 500px; max-width: 100%; min-height: 70.6667px; margin: 28px 0 0; padding: 14px; color: #68716c; font-size: 14px; line-height: 21px; text-align: center; }
.prediction-content { padding: 10px 12px; }
.app[data-active="home"] .prediction-head { display: flex; flex-wrap: wrap; align-items: normal; justify-content: space-between; min-height: 18px; color: var(--muted); font-size: 12px; line-height: 18px; }
.app[data-active="home"] .prediction-head > span:nth-child(2) { margin-left: auto; flex-shrink: 0; }
.app[data-active="home"] .prediction-head .v2n-prediction-state { flex-basis: 100%; font-size: 11px; line-height: 16px; white-space: normal; }
.prediction-teams { display: flex; align-items: center; height: 44px; gap: 8px; margin: 3px 0 4px; font-size: 17px; line-height: 1.4; font-weight: 700; }
.prediction-team-link { display: flex; align-items: center; gap: 7px; height: 44px; color: var(--text); }
.compact-team-logo { display: block; width: 24px; height: 24px; object-fit: contain; }
.compact-logo-fallback { display: grid; place-items: center; border-radius: 50%; color: #fff; font-size: 8px; font-weight: 800; }
.prediction-primary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; min-height: 23px; gap: 6px; margin-bottom: 4px; }
.prediction-pick { padding: 1px 8px; border-radius: 7px; background: #fee2e2; color: var(--brand); font-size: 14px; line-height: 21px; font-weight: 700; white-space: nowrap; }
.prediction-probability { color: var(--muted); font-size: 12px; line-height: 18px; white-space: nowrap; }
.prediction-compact-line { display: flex; align-items: center; min-height: 23px; gap: 8px; color: var(--brand); font-size: 13px; line-height: 19.5px; font-weight: 700; }
.prediction-half { position: relative; height: 32px; padding-right: 76px; }
.prediction-detail { position: absolute; top: -6px; right: 0; display: flex; align-items: center; justify-content: flex-end; width: 76px; height: 44px; padding: 0; background: transparent; color: var(--brand); font-size: 12px; line-height: 18px; font-weight: 700; }
.app[data-active="home"] .v2n-parlay-focus { display: inline-flex; align-items: center; margin: 0 0 5px; padding: 2px 8px; border: 1px solid #b45309; border-radius: 5px; background: #fffbeb; color: #92400e; font-size: 12px; line-height: 18px; font-weight: 700; }
.app[data-active="home"] .bottom-nav { left: 0; width: 100%; grid-template-columns: repeat(5, minmax(0, 90px)); justify-content: center; padding: 4px 0; }
.app[data-active="home"] .nav-item { min-height: 44px; gap: 2px; padding: 2px 0; font-size: 12px; line-height: 18px; font-weight: 400; }
.app[data-active="home"] .nav-item.active { font-weight: 800; }
.app[data-active="home"] .nav-item img { width: 20px; height: 20px; }

.page-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.page-title-row h1 { margin: 0; font-size: 29px; font-weight: 850; letter-spacing: 0; }
.page-title-row p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.filter-row { display: flex; align-items: center; gap: 8px; overflow-x: auto; padding-bottom: 2px; margin-bottom: 14px; }
.filter-pill { flex: 0 0 auto; padding: 8px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--muted); font-size: 12px; font-weight: 750; }
.filter-pill.active { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.group-title { display: flex; align-items: center; justify-content: space-between; margin: 16px 2px 8px; color: var(--brand); font-size: 13px; font-weight: 800; }
.group-title small { color: var(--muted); font-size: 11px; font-weight: 600; }
.app[data-active="matches"] { font-size: 16px; }
.app[data-active="matches"] .content { padding: 0 0 26px; }
.app[data-active="matches"] .privacy-note { display: none; }
.app[data-active="matches"] .bottom-nav { left: 0; width: 100%; grid-template-columns: repeat(5, minmax(0, 90px)); justify-content: center; padding: 4px 0; }
.app[data-active="matches"] .nav-item { min-height: 44px; gap: 2px; padding: 2px 0; font-size: 12px; line-height: 18px; font-weight: 400; }
.app[data-active="matches"] .nav-item.active { font-weight: 800; }
.app[data-active="matches"] .nav-item img { width: 20px; height: 20px; }
.app[data-active="matches"] .match-filter-empty { width: 100%; max-width: 540px; margin: 0; padding: 30px 16px; color: #68716c; font-size: 14px; line-height: 1.6; text-align: center; }
.batch-tools { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 50px; gap: 8px; padding: 0 14px 12px; font-size: 12px; }
.batch-tools button { height: 38px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--text); font-size: 12px; font-weight: 700; }
.batch-tools button.selected { border-color: #edd1d1; background: #fcf2f2; color: var(--brand); }
.batch-tools button[aria-pressed="true"] { border-color: var(--brand); background: var(--brand); color: #fff; box-shadow: 0 2px 6px rgba(153, 27, 27, .18); }
.batch-tools label { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; }
.batch-tools input { width: 101.3333px; height: 38px; padding: 6px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--text); font-size: 12px; }
.status-tabs { position: sticky; z-index: 4; top: 0; display: flex; width: 100%; min-height: 49px; background: var(--surface); border-bottom: 1px solid var(--line); }
.status-tabs button { flex: 1; min-height: 48px; padding: 10px 2px; border-bottom: 3px solid transparent; background: transparent; color: var(--muted); font-size: 16px; font-weight: 700; }
.status-tabs button.selected { border-bottom-color: var(--brand); color: var(--brand); font-weight: 800; }
.batch-heading { display: flex; align-items: center; justify-content: space-between; min-height: 50.6667px; gap: 8px; margin: 0; padding: 13px 16px; color: var(--brand); font-size: 14px; font-weight: 700; }
.batch-heading span { color: var(--muted); font-size: 11px; font-weight: 500; }
.group-heading { display: flex; align-items: center; height: 40px; gap: 8px; margin: 0; padding: 10px 16px; background: var(--bg); color: var(--text); font-size: 14px; font-weight: 750; }
.group-heading::before { content: ""; width: 3px; height: 16px; flex: 0 0 3px; background: var(--muted); }
.group-heading span { color: var(--muted); font-size: 12px; font-weight: 500; }
.group-heading.live-group { background: #fcf2f2; color: var(--brand); }
.group-heading.live-group::before { background: var(--brand); }
.group-heading.live-group span { color: var(--brand); }
.match-card { width: 100%; border-bottom: 1px solid var(--line); background: transparent; }
.match-row { display: grid; grid-template-columns: 57px minmax(0, 1fr) 12px; align-items: center; width: 100%; min-height: 116px; gap: 8px; padding: 12px 14px; background: transparent; }
.match-row:active { background: #fafafa; }
.match-meta { display: flex; flex-direction: column; align-items: stretch; justify-content: normal; gap: 6px; color: var(--muted); font-size: 11px; }
.match-meta span { font-size: 11px; }
.match-meta strong { color: var(--brand); font-size: 11px; font-weight: 650; }
.match-meta time { font-size: 11px; line-height: 1.45; }
.match-main { display: block; min-width: 0; }
.match-phase { display: table; margin: 0 auto 7px; padding: 2px 8px; border-radius: 5px; background: var(--bg); color: var(--muted); font-size: 11px; }
.match-phase.live { background: #fff1f1; color: #d52c2c; }
.match-teams { display: grid; grid-template-columns: minmax(0, 1fr) 62px minmax(0, 1fr); align-items: center; gap: 5px; }
.match-team { min-width: 0; text-align: center; }
.team-logo { display: block; width: 35px; height: 35px; margin: 0 auto; object-fit: contain; }
.team-logo-fallback { display: grid; place-items: center; border-radius: 50%; color: #fff; font-size: 10px; font-weight: 800; }
.match-team strong { display: block; overflow: hidden; margin-top: 5px; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; line-height: 1.4; font-weight: 700; }
.match-score { color: var(--text); font-size: 27px; font-weight: 850; text-align: center; }
.match-score.live { color: #d52c2c; }
.match-secondary { display: flex; align-items: center; justify-content: center; min-height: 16px; gap: 7px; margin-top: 7px; color: var(--muted); font-size: 10px; }
.match-secondary .stale-badge, .match-secondary .pending-badge { display: block; color: #935407; }
.row-chevron { display: block; width: 12px; }
.row-chevron img { width: 15px; height: 15px; transform: rotate(180deg); }
.match-actions { display: flex; justify-content: flex-end; height: 43px; padding: 0 15px 7px; }
.match-actions a { display: grid; place-items: center; height: 36px; padding: 4px 12px; background: transparent; color: var(--muted); font-size: 11px; font-weight: 400; }
.match-actions a:first-child { width: 68px; color: var(--brand); font-weight: 650; }
.match-actions a:nth-child(2), .match-actions a:nth-child(3) { width: 46.6667px; }
.match-actions a:last-child { width: 34.6667px; padding-right: 0; }
.match-prediction { display: flex; align-items: center; min-height: 34px; padding: 7px 14px; border-top: 1px solid #f4eeee; background: #fff5f4; font-size: 12px; line-height: 1.5; white-space: nowrap; overflow-x: auto; scrollbar-width: thin; }
.match-prediction > span { flex: 1 0 auto; padding: 0 9px; color: var(--brand); text-align: center; }
.match-prediction > span:first-child { padding-left: 0; }
.match-prediction > span + span { border-left: 1px solid #e5dddd; }
.match-prediction-label, .match-prediction-direction { font-weight: 750; }
.prediction-hit { display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: 6px; background: #fff0b5; font-weight: 750; }
.prediction-hit-check { width: 12px; height: 12px; flex: none; }
.match-group[hidden], .batch-group.filter-empty { display: none; }

.hero-panel { padding: 18px 16px; border-radius: 14px; background: linear-gradient(135deg, #b82731, #df5a5f); color: #fff; box-shadow: 0 12px 24px rgba(195,44,53,.18); }
.hero-panel h2 { margin: 0 0 5px; font-size: 19px; }
.hero-panel p { margin: 0; color: rgba(255,255,255,.8); line-height: 1.55; font-size: 12px; }
.steps { display: grid; gap: 9px; margin-top: 14px; }
.step-card { display: flex; align-items: center; gap: 11px; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.step-index { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 28px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font-weight: 900; }
.step-card strong { display: block; font-size: 13px; }
.step-card span { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.step-odd { margin-left: auto; color: var(--brand); font-weight: 800; font-size: 12px; }

.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.stat { padding: 12px 9px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; text-align: center; }
.stat strong { display: block; color: var(--brand); font-size: 21px; }
.stat span { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.review-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.review-item + .review-item { margin-top: 8px; }
.result-win { color: var(--green); font-weight: 800; }
.result-draw { color: #9c7c19; font-weight: 800; }

.stats-panel { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 14px; padding: 17px 6px 62px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.stats-item { display: grid; justify-items: center; gap: 5px; padding: 0 8px; border-right: 1px solid var(--line); text-align: center; }
.stats-item:last-of-type { border-right: 0; }
.stats-item span { color: var(--text); font-size: 11px; font-weight: 750; }
.stats-item strong { font-size: 23px; letter-spacing: -.5px; }
.stats-item small { color: var(--muted); font-size: 10px; }
.stats-note { position: absolute; left: 12px; right: 12px; bottom: 7px; padding: 7px 0 0; border-top: 1px solid var(--line); background: transparent; color: var(--muted); text-align: left; font-size: 11px; }
.expand-panel { margin-top: 9px; padding: 10px 11px; border-radius: 8px; background: var(--surface-soft); color: var(--muted); font-size: 11px; line-height: 1.65; }
.expand-panel p { margin: 0 0 7px; }
.expand-panel p:last-child { margin-bottom: 0; }
.stats-panel > .expand-panel { grid-column: 1 / -1; margin: 7px 6px 0; }
.challenge-card, .round-card { margin-top: 10px; padding: 15px 13px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.challenge-card h2, .round-card h2 { margin: 0; font-size: 16px; }
.challenge-card > p { margin: 13px 0 0; color: var(--muted); text-align: center; font-size: 11px; }
.challenge-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 15px 0 0; }
.challenge-step { position: relative; display: grid; justify-items: center; gap: 5px; text-align: center; }
.challenge-step::before { content: ""; position: absolute; z-index: 0; top: 16px; left: -50%; width: 100%; height: 3px; background: #dedfe0; }
.challenge-step:first-child::before { display: none; }
.challenge-step span, .challenge-step strong, .challenge-step small, .challenge-step em { position: relative; z-index: 1; }
.challenge-step span { width: 34px; height: 34px; display: grid; place-items: center; border: 2px solid #b8b9bb; border-radius: 50%; background: #b8b9bb; color: #fff; font-size: 16px; }
.challenge-step.current span { border-color: var(--brand); background: var(--surface); color: var(--brand); }
.challenge-step strong { font-size: 12px; }
.challenge-step small { padding: 4px 7px; border-radius: 4px; background: #f1f2f2; color: var(--muted); font-size: 10px; }
.challenge-step em { color: var(--muted); font-size: 10px; font-style: normal; }
.round-card { border: 2px solid var(--brand); }
.round-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.round-head > div { min-width: 0; }
.round-status { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }
.round-head span { padding: 5px 7px; border-radius: 4px; background: var(--brand-soft); color: var(--brand); font-size: 10px; font-weight: 800; }
.leg-row { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 9px; padding: 11px 0; border-top: 1px solid var(--line); }
.leg-index { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--brand); color: #fff; font-size: 11px; font-weight: 850; }
.leg-row small { display: block; color: var(--muted); font-size: 10px; }
.leg-row strong { display: block; margin-top: 4px; font-size: 13px; }
.leg-row strong i { color: var(--muted); font-size: 10px; font-style: normal; font-weight: 600; }
.leg-row p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.leg-row > b { color: var(--brand); font-size: 14px; text-align: right; }
.leg-row > b small { margin-top: 4px; color: var(--muted); font-weight: 600; }
.round-return { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 10px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.round-return strong { color: var(--brand); font-size: 14px; }
.round-note { margin: 0 0 8px; color: var(--muted); font-size: 10px; line-height: 1.55; }
.round-copy { margin: 0; color: var(--muted); line-height: 1.65; font-size: 11px; }
.disclosure { padding: 8px 0 0; background: transparent; color: var(--muted); font-size: 11px; }
.decision-card, .history-card { margin-top: 10px; padding: 14px 13px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.decision-card h2, .history-card h2 { margin: 0; font-size: 15px; }
.decision-card p { margin: 9px 0 0; color: var(--muted); line-height: 1.65; font-size: 11px; }
.decision-card .decision-note { padding-top: 8px; border-top: 1px solid var(--line); }
.history-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.history-title span, .history-meta { color: var(--muted); font-size: 11px; }
.history-meta { margin: 7px 0 11px; }
.history-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.history-step { display: grid; gap: 4px; padding: 8px 5px; border: 1px solid var(--line); border-radius: 8px; text-align: center; }
.history-step b { color: var(--brand); font-size: 16px; }
.history-step span { font-size: 11px; font-weight: 750; }
.history-step small { color: var(--muted); font-size: 10px; }
.history-ticket { display: grid; gap: 5px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 11px; }
.history-ticket strong { font-size: 12px; }
.history-ticket span { color: var(--brand); font-weight: 800; }
.history-ticket small { color: var(--muted); }
.round-footnote { margin: 13px 2px 0; color: var(--muted); font-size: 10px; line-height: 1.6; }

.app[data-active="parlays"] .content { padding: 4px 20px 26px; font-size: 14px; line-height: 21px; }
.app[data-active="parlays"] .page-title-row { height: 43.2px; margin: 0 0 10px; }
.app[data-active="parlays"] .page-title-row h1 { font-size: 36px; line-height: 43.2px; font-weight: 700; }
.app[data-active="parlays"] .stats-panel { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; min-height: 162.2px; margin: 0 0 16px; padding: 16px 10px; border: 1px solid #e5e5e5; border-radius: 8px; background: var(--surface); box-shadow: none; }
.app[data-active="parlays"] .stats-item { display: block; height: 88.2px; padding: 0; border-right: 1px solid #e5e5e5; text-align: center; }
.app[data-active="parlays"] .stats-item span { font-size: 12px; line-height: 18px; font-weight: 650; }
.app[data-active="parlays"] .stats-item strong { display: block; margin: 7px 0; font-size: 23px; line-height: 32.2px; font-weight: 700; }
.app[data-active="parlays"] .stats-item small { font-size: 11px; line-height: 16.5px; }
.app[data-active="parlays"] .stats-note { position: static; grid-column: 1 / -1; min-height: 28.6667px; padding: 10px 8px 0; border-top: 1px solid #eee; background: transparent; color: #777; text-align: left; font-size: 12px; line-height: 18px; }
.app[data-active="parlays"] .stats-note summary { cursor: pointer; }
.app[data-active="parlays"] .stats-note p { margin: 12px 0; font-size: 12px; line-height: 1.6; }
.app[data-active="parlays"] .date-bar { display: grid; grid-template-columns: minmax(0, 1fr) 108px; margin: 0 0 5px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); overflow: hidden; }
.app[data-active="parlays"] .date-bar .date-input { height: 44px; padding: 10px 16px; border: 0; border-radius: 0; background: var(--surface); color: #000; font-size: 14px; line-height: 21px; }
.app[data-active="parlays"] .date-bar .primary-btn { height: 44px; padding: 10px 16px; border: 0; border-left: 1px solid var(--line); border-radius: 0; background: var(--surface); color: #000; font-size: 14px; line-height: 21px; font-weight: 750; }
.app[data-active="parlays"] .status-line { position: absolute; width: 1px; height: 1px; min-height: 0; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.app[data-active="parlays"] .challenge-card { margin: 0 0 16px; padding: 16px; border: 1px solid #e5e5e5; border-radius: 8px; background: var(--surface); box-shadow: none; }
.app[data-active="parlays"] .challenge-card h2 { margin: 0 0 14px; font-size: 19px; line-height: 28.5px; font-weight: 700; }
.app[data-active="parlays"] .challenge-track { display: grid; grid-template-columns: repeat(3, 1fr); height: 118.5px; margin: 0; }
.app[data-active="parlays"] .challenge-track.compact { height: 102px; }
.app[data-active="parlays"] .challenge-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; height: 118.5px; font-size: 13px; line-height: 19.5px; text-align: center; }
.app[data-active="parlays"] .challenge-track.compact .challenge-step { height: 102px; }
.app[data-active="parlays"] .challenge-step::before { top: 17px; height: 3px; }
.app[data-active="parlays"] .challenge-step span { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: 0 0 36px; border-width: 2px; font-size: 20px; line-height: 30px; }
.app[data-active="parlays"] .challenge-step strong { font-size: 13px; line-height: 19.5px; }
.app[data-active="parlays"] .challenge-step small { padding: 3px 7px; background: #f0f0f0; color: var(--text); font-size: 13px; line-height: 19.5px; }
.app[data-active="parlays"] .challenge-step em { min-height: 16.5px; color: #777; font-size: 11px; line-height: 16.5px; }
.app[data-active="parlays"] .challenge-card > p { min-height: 30.6667px; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid #eee; color: #777; text-align: center; font-size: 12px; line-height: 18px; }
.app[data-active="parlays"] .round-card { margin: 0 0 16px; padding: 16px; border: 2px solid #b92127; border-radius: 8px; background: var(--surface); box-shadow: none; }
.app[data-active="parlays"] .round-head { display: flex; align-items: center; justify-content: flex-start; gap: 9px; margin: 0; padding: 0 0 14px; }
.app[data-active="parlays"] .round-head { min-height: 49.1667px; }
.app[data-active="parlays"] .round-head h2 { margin: 0; font-size: 23px; line-height: 34.5px; font-weight: 700; }
.app[data-active="parlays"] .round-kind { padding: 3px 7px; border: 1px solid #b92127; border-radius: 4px; background: transparent; color: #b92127; font-size: 13px; line-height: 19.5px; font-weight: 650; }
.app[data-active="parlays"] .round-status { padding: 3px 7px; border-radius: 4px; background: #eee; color: #666; font-size: 12px; line-height: 18px; font-weight: 400; }
.app[data-active="parlays"] .leg-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) 80px; align-items: center; gap: 10px; padding: 16px 0; border-top: 1px solid #eee; }
.app[data-active="parlays"] .leg-index { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #b92127; color: #fff; font-size: 14px; line-height: 21px; font-weight: 700; }
.app[data-active="parlays"] .leg-body small { display: block; margin: 0 0 6px; color: #777; font-size: 12px; line-height: 18px; }
.app[data-active="parlays"] .leg-body h3 { margin: 0 0 7px; font-size: 17px; line-height: 25.5px; }
.app[data-active="parlays"] .leg-body p { margin: 0 0 6px; font-size: 12px; line-height: 18px; }
.app[data-active="parlays"] .leg-options { display: block; align-self: center; padding: 8px 12px; text-align: center; }
.app[data-active="parlays"] .leg-options strong { display: block; color: #b92127; font-size: 15px; line-height: 22.5px; }
.app[data-active="parlays"] .leg-options small { display: block; margin-top: 3px; color: #666; font-size: 12px; line-height: 18px; }
.app[data-active="parlays"] .round-return { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 16px 0 0; padding: 0; border: 0; color: var(--text); font-size: 14px; line-height: 21px; }
.app[data-active="parlays"] .round-return > div { display: block; padding: 0; border-radius: 0; background: transparent; }
.app[data-active="parlays"] .round-return > div + div { padding-left: 12px; border-left: 1px solid #eee; }
.app[data-active="parlays"] .round-return span { font-size: 13px; line-height: 19.5px; }
.app[data-active="parlays"] .round-return strong { display: block; color: #b92127; font-size: 24px; line-height: 36px; }
.app[data-active="parlays"] .round-stake, .app[data-active="parlays"] .round-note { margin: 12px 0; color: #777; font-size: 12px; line-height: 18px; }
.app[data-active="parlays"] .round-return-rule { margin: 13px 0; color: #b92127; font-size: 13px; line-height: 19.5px; font-weight: 650; }
.app[data-active="parlays"] .round-details { display: block; padding: 12.6667px 0 12px; color: var(--text); font-size: 13px; line-height: 19.5px; }
.app[data-active="parlays"] .round-details summary { cursor: pointer; }
.app[data-active="parlays"] .round-details p { margin: 13px 0; font-size: 13px; line-height: 1.7; }
.app[data-active="parlays"] .round-details .decision-note { margin: 12px 0; color: #777; font-size: 12px; line-height: 1.7; }
.app[data-active="parlays"] .parlay-material-evidence { padding: 10px; background: #faf7f7; font-size: 13px; line-height: 1.6; }
.app[data-active="parlays"] .round-copy { margin: 13px 0; color: var(--text); font-size: 13px; line-height: 1.7; }
.app[data-active="parlays"] .round-decision { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.app[data-active="parlays"] .round-decision h3 { margin: 1em 0; font-size: 1.17em; line-height: 1.5; }
.app[data-active="parlays"] .round-decision > p { margin: 14px 0; color: var(--text); font-size: 14px; line-height: 21px; }
.app[data-active="parlays"] .round-decision > .decision-note { margin: 12px 0; color: #777; font-size: 12px; line-height: 18px; }
.app[data-active="parlays"] .round-frozen { margin: 11px 0 0; color: #888; font-size: 11px; line-height: 16.5px; }
.app[data-active="parlays"] .decision-card .decision-note { padding-top: 0; border-top: 0; color: #777; }
.app[data-active="parlays"] .c3-history { margin: 0 0 16px; padding: 16px; border: 1px solid #e5e5e5; border-radius: 8px; background: #fff; }
.app[data-active="parlays"] .c3-history h2 { margin: 0 0 14px; font-size: 19px; line-height: 1.5; }
.app[data-active="parlays"] .c3-history-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.app[data-active="parlays"] .c3-history-header h3 { margin: 0; font-size: 17px; line-height: 1.5; }
.app[data-active="parlays"] .c3-result { padding: 3px 7px; border-radius: 4px; background: #eee; color: #666; font-size: 12px; line-height: 1.5; }
.app[data-active="parlays"] .c3-result.hit,
.app[data-active="parlays"] .c3-result.success { background: #fcecee; color: #b92127; }
.app[data-active="parlays"] .c3-muted { color: #777; font-size: 12px; line-height: 1.5; }
.app[data-active="parlays"] .c3-steps { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 0; list-style: none; }
.app[data-active="parlays"] .c3-history > .c3-steps { margin: 16px 0; }
.app[data-active="parlays"] .c3-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 13px; line-height: 1.5; text-align: center; }
.app[data-active="parlays"] .c3-step:not(:last-child)::after { position: absolute; top: 17px; right: calc(-50% + 18px); left: calc(50% + 18px); height: 3px; background: #ddd; content: ""; }
.app[data-active="parlays"] .c3-step.hit:not(:last-child)::after { background: #b92127; }
.app[data-active="parlays"] .c3-step-number { z-index: 1; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #aaa; color: #fff; font-size: 20px; }
.app[data-active="parlays"] .c3-step.hit .c3-step-number { background: #b92127; }
.app[data-active="parlays"] .c3-step.pending .c3-step-number { border: 2px solid #b92127; background: #fff; color: #b92127; }
.app[data-active="parlays"] .c3-step-state { padding: 3px 7px; border-radius: 4px; background: #f0f0f0; }
.app[data-active="parlays"] .c3-step.hit .c3-step-state { background: #fcecee; color: #b92127; }
.app[data-active="parlays"] .c3-step small { color: #777; font-size: 11px; }
.app[data-active="parlays"] .c3-previous { margin-top: 18px; padding-top: 16px; border-top: 1px solid #eee; }
.app[data-active="parlays"] .c3-history-match { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 14px 0; border-bottom: 1px solid #eee; }
.app[data-active="parlays"] .c3-history-match:last-child { padding-bottom: 0; border-bottom: 0; }
.app[data-active="parlays"] .c3-match-number { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #b92127; color: #fff; font-weight: 700; }
.app[data-active="parlays"] .c3-match-body { min-width: 0; }
.app[data-active="parlays"] .c3-history-match h4 { margin: 0 0 6px; overflow-wrap: anywhere; font-size: 15px; line-height: 1.5; }
.app[data-active="parlays"] .c3-match-body p { margin: 0 0 6px; font-size: 12px; line-height: 1.5; }
.app[data-active="parlays"] .c3-history-match .c3-result { white-space: nowrap; }
.app[data-active="parlays"] .c3-history-match p:last-child { margin-bottom: 0; }
.app[data-active="parlays"] .c3-rules { padding: 12px; border-radius: 5px; background: #eee; color: #666; font-size: 12px; line-height: 1.7; }
.app[data-active="parlays"] .privacy-note { width: 500px; max-width: 100%; min-height: 70.6667px; margin: 28px 0 0; padding: 14px; color: #68716c; font-size: 14px; line-height: 21px; text-align: center; }
.app[data-active="parlays"] .bottom-nav { left: 0; width: 100%; grid-template-columns: repeat(5, minmax(0, 90px)); justify-content: center; padding: 4px 0; }
.app[data-active="parlays"] .nav-item { min-height: 44px; gap: 2px; padding: 2px 0; font-size: 12px; line-height: 18px; font-weight: 400; }
.app[data-active="parlays"] .nav-item.active { font-weight: 800; }
.app[data-active="parlays"] .nav-item img { width: 20px; height: 20px; }

/* The challenge page follows the origin's c3-* structure for both empty and published days. */
.app[data-active="parlays"] .c3-root { line-height: 1.5; }
.app[data-active="parlays"] .c3-stats,
.app[data-active="parlays"] .c3-progress,
.app[data-active="parlays"] .c3-history,
.app[data-active="parlays"] .c3-empty { margin: 0 0 16px; padding: 16px; border: 1px solid #e5e5e5; border-radius: 8px; background: #fff; }
.app[data-active="parlays"] .c3-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 16px 10px; }
.app[data-active="parlays"] .c3-stat { min-width: 0; text-align: center; }
.app[data-active="parlays"] .c3-stat + .c3-stat { border-left: 1px solid #ddd; }
.app[data-active="parlays"] .c3-stat span { font-size: 12px; font-weight: 650; }
.app[data-active="parlays"] .c3-stat strong { display: block; margin: 7px 0; font-size: 23px; line-height: 1.4; }
.app[data-active="parlays"] .c3-stat small { color: #777; font-size: 11px; }
.app[data-active="parlays"] .c3-stat-explanation { grid-column: 1 / -1; padding: 10px 8px 0; border-top: 1px solid #eee; color: #777; font-size: 12px; }
.app[data-active="parlays"] .c3-stat-explanation summary,
.app[data-active="parlays"] .c3-details summary { cursor: pointer; }
.app[data-active="parlays"] .c3-stat-explanation p { line-height: 1.6; }
.app[data-active="parlays"] .c3-progress h2,
.app[data-active="parlays"] .c3-history h2,
.app[data-active="parlays"] .c3-empty h2 { margin: 0 0 14px; font-size: 19px; }
.app[data-active="parlays"] .c3-steps { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 0; list-style: none; }
.app[data-active="parlays"] .c3-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 13px; text-align: center; }
.app[data-active="parlays"] .c3-step:not(:last-child)::after { position: absolute; z-index: 0; top: 17px; right: calc(-50% + 18px); left: calc(50% + 18px); height: 3px; background: #ddd; content: ""; }
.app[data-active="parlays"] .c3-step.hit:not(:last-child)::after { background: #b92127; }
.app[data-active="parlays"] .c3-step-number { z-index: 1; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #aaa; color: #fff; font-size: 20px; }
.app[data-active="parlays"] .c3-step.hit .c3-step-number { background: #b92127; }
.app[data-active="parlays"] .c3-step.pending .c3-step-number { border: 2px solid #b92127; background: #fff; color: #b92127; }
.app[data-active="parlays"] .c3-step-state { padding: 3px 7px; border-radius: 4px; background: #f0f0f0; }
.app[data-active="parlays"] .c3-step.hit .c3-step-state { background: #fcecee; color: #b92127; }
.app[data-active="parlays"] .c3-step small { color: #777; font-size: 11px; }
.app[data-active="parlays"] .c3-progress > p { margin-bottom: 0; padding-top: 12px; border-top: 1px solid #eee; text-align: center; }
.app[data-active="parlays"] .c3-muted { color: #777; font-size: 12px; line-height: 1.5; }
.app[data-active="parlays"] .c3-plan { margin-bottom: 16px; padding: 16px; border: 2px solid #b92127; border-radius: 8px; background: #fff; }
.app[data-active="parlays"] .c3-plan-header { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; padding-bottom: 14px; border-bottom: 1px solid #eee; }
.app[data-active="parlays"] .c3-plan-header h2 { margin: 0; font-size: 23px; }
.app[data-active="parlays"] .c3-badge { padding: 3px 7px; border: 1px solid #b92127; border-radius: 4px; color: #b92127; font-size: 13px; font-weight: 650; }
.app[data-active="parlays"] .c3-match { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 16px 0; border-bottom: 1px solid #eee; }
.app[data-active="parlays"] .c3-match-number { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #b92127; color: #fff; font-weight: 700; }
.app[data-active="parlays"] .c3-match-body { min-width: 0; }
.app[data-active="parlays"] .c3-match-body p { margin: 0 0 6px; font-size: 12px; }
.app[data-active="parlays"] .c3-match-body h3 { margin: 0 0 7px; overflow-wrap: anywhere; font-size: 17px; }
.app[data-active="parlays"] .c3-options { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px; }
.app[data-active="parlays"] .c3-option { min-width: 80px; padding: 8px 12px; border-radius: 5px; background: #fcecee; text-align: center; }
.app[data-active="parlays"] .c3-option strong { display: block; color: #b92127; font-size: 15px; }
.app[data-active="parlays"] .c3-option small { display: block; margin-top: 3px; color: #777; font-size: 12px; }
.app[data-active="parlays"] .c3-prices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 16px; }
.app[data-active="parlays"] .c3-prices > div + div { padding-left: 12px; border-left: 1px solid #ddd; }
.app[data-active="parlays"] .c3-prices span { font-size: 13px; }
.app[data-active="parlays"] .c3-prices strong { display: block; color: #b92127; font-size: 24px; line-height: 1.5; white-space: nowrap; }
.app[data-active="parlays"] .c3-return-rule { color: #b92127; font-size: 13px; font-weight: 650; }
.app[data-active="parlays"] .c3-details { padding: 12px 0; border-top: 1px solid #eee; font-size: 13px; }
.app[data-active="parlays"] .c3-details p,
.app[data-active="parlays"] .c3-reason { overflow-wrap: anywhere; font-size: 13px; line-height: 1.7; }
.app[data-active="parlays"] .c3-decision h3 { margin: 1em 0; font-size: 1.17em; }
.app[data-active="parlays"] .c3-decision > p:not(.c3-muted) { margin: 14px 0; font-size: 14px; line-height: 21px; }
.app[data-active="parlays"] .c3-decision .decision-note { color: #777; font-size: 12px; line-height: 1.7; }
.app[data-active="parlays"] .c3-frozen { margin-bottom: 0; color: #888; font-size: 11px; text-align: right; }
.app[data-active="parlays"] .v2n-material-evidence { max-width: 650px; padding: 10px; border-radius: 5px; background: #faf7f7; white-space: normal; overflow-wrap: anywhere; font-size: 13px; line-height: 1.6; }

@media (min-width: 700px) {
  .app[data-active="parlays"] .c3-match { grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; }
  .app[data-active="parlays"] .c3-options { grid-column: 3; }
}

@media (max-width: 360px) {
  .app[data-active="parlays"] .c3-prices strong { font-size: 20px; }
  .app[data-active="parlays"] .c3-stat span { font-size: 11px; }
  .app[data-active="parlays"] .c3-plan { padding: 12px; }
  .app[data-active="parlays"] .c3-plan-header h2 { font-size: 20px; }
  .app[data-active="parlays"] .c3-history-match { gap: 7px; }
}

@media (max-width: 420px) {
  .app[data-active="parlays"] .content { padding-right: 14px; padding-left: 14px; }
}

.app[data-active="market"] { min-height: 0; padding-bottom: 112px; }
.app-shell:has(.app[data-active="market"]) { min-height: 0; }
.app[data-active="market"] .content { padding: 6px 20px 0; }
.app[data-active="market"] .page-title-row { margin: 0 0 8px; }
.app[data-active="market"] .page-title-row h1 { position: relative; top: -2px; font-size: 36px; line-height: 43.2px; font-weight: 700; }
.app[data-active="market"] .date-bar { height: auto; margin-bottom: 5px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); overflow: hidden; }
.app[data-active="market"] .date-input,
.app[data-active="market"] .primary-btn { height: 44px; border: 0; border-radius: 0; }
.app[data-active="market"] .date-input { padding: 10px 16px; color: #000; font-size: 14px; line-height: 21px; }
.app[data-active="market"] .primary-btn { min-width: 108px; padding: 10px 16px; border-left: 1px solid var(--line); color: #000; font-weight: 750; line-height: 21px; }
.app[data-active="market"] .status-line { min-height: 21px; margin: 0; color: var(--text); font-size: 14px; line-height: 21px; }
.app[data-active="market"] .privacy-note { height: 70.6667px; margin: 28px 0 0; padding: 14px; color: #68716c; font-size: 14px; line-height: 21px; text-align: center; }
.market-tabs { display: flex; margin: 12px 0 20px; border-bottom: 1px solid var(--line); }
.market-tab { position: relative; flex: 1; height: 47.6667px; padding: 12px; border-bottom: 3px solid transparent; background: var(--surface); color: var(--muted); font-size: 14px; line-height: 21px; font-weight: 400; }
.market-tab:focus { outline: 0; }
.market-tab.active { border-bottom-color: var(--brand); color: var(--brand); }
.market-tab.active { font-weight: 700; }
.market-view { line-height: 1.5; }
.market-view h2, .market-heading { margin: 16px 0; font-size: 18px; line-height: 27px; font-weight: 700; }
.market-empty { margin: 14px 0; padding: 24px 0; color: var(--muted); font-size: 14px; line-height: 21px; }
.market-combo-list { display: block; }
.market-statistics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 16px 0 8px; }
.market-statistic { display: flex; flex-direction: column; gap: 6px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.market-statistic-label { color: var(--muted); font-size: 13px; }
.market-statistic-rate { color: var(--brand); font-size: 24px; overflow-wrap: anywhere; }
.market-statistic-sample { font-size: 13px; }
.market-statistic-status,
.market-statistics-range { color: var(--muted); font-size: 12px; }
.market-statistics-range { display: block; margin-bottom: 16px; }
.market-ticket { margin: 0 0 16px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.market-ticket-header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px; }
.market-ticket-header h3 { margin: 0; color: var(--brand); font-size: 17px; }
.market-combo { margin: 0 0 16px; padding: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: none; }
.market-combo-head { display: flex; align-items: center; gap: 8px; min-height: 62px; padding: 14px; }
.market-combo-head h3 { margin: 0; color: var(--brand); font-size: 17px; line-height: 25.5px; }
.market-kind { color: var(--muted); font-size: 12px; line-height: 18px; }
.market-price { margin-left: auto; color: var(--brand); font-size: 23px; line-height: 34.5px; }
.market-status { padding: 3px 7px; border-radius: 4px; font-size: 12px; line-height: 18px; font-weight: 400; white-space: nowrap; }
.market-status.hit { background: #e7f5ec; color: #167049; }
.market-status.miss { background: #fee2e2; color: #991b1b; }
.market-status.pending { background: #fff5df; color: #915900; }
.market-leg { display: grid; grid-template-columns: 1.33fr 1fr; align-items: center; gap: 12px; min-height: 133px; margin: 0; padding: 14px; border-top: 1px solid var(--line); }
.market-match, .market-choice { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.market-match small, .market-choice small { color: var(--muted); font-size: 12px; line-height: 18px; }
.market-teams { overflow-wrap: anywhere; font-size: 15px; line-height: 22.5px; }
.market-choice strong { color: var(--brand); font-size: 14px; line-height: 21px; }
.market-outcome { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 5px; min-height: 24px; }
.market-outcome strong { font-size: 14px; line-height: 21px; }
.market-reason { padding: 10px 14px; border-top: 1px solid var(--line); font-size: 13px; line-height: 19.5px; }
.market-reason summary { color: var(--muted); cursor: pointer; }
.market-reason p { margin: 13px 0; font-size: 13px; line-height: 1.7; }
.market-history { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; margin-bottom: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.market-history strong, .market-history small { display: block; }
.market-history small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.market-history > b { color: var(--brand); font-size: 14px; }
@media (max-width: 400px) {
  .market-statistic { padding: 10px; }
  .market-statistic-rate { font-size: 20px; }
}
.app[data-active="reviews"] { padding-bottom: 112px; background: #fff; }
.app[data-active="reviews"] .content { padding: 0; }
.app[data-active="reviews"] .date-bar { display: grid; grid-template-columns: minmax(0, 1fr) 108px; margin: 0; border: 0; border-top: 1px solid #f2f3f2; border-bottom: 1px solid #f2f3f2; border-radius: 0; background: var(--surface); overflow: hidden; }
.app[data-active="reviews"] .date-input,
.app[data-active="reviews"] .primary-btn { height: 38px; min-height: 38px; padding: 7px 14px; border: 0; border-radius: 0; background: var(--surface); color: #000; font-size: 12px; line-height: 21px; }
.app[data-active="reviews"] .primary-btn { border-left: 1px solid var(--line); font-weight: 750; }
.app[data-active="reviews"] .status-line { padding: 6px 14px; font-size: 11px; line-height: 17px; }
.app[data-active="reviews"] .privacy-note { height: 70.6667px; margin: 28px 0 0; padding: 14px; color: #68716c; font-size: 14px; line-height: 21px; text-align: center; }
.review-view { background: #fff; }
.review-intro { margin: 0; padding: 8px 14px; background: #fff; border: 0; border-radius: 0; color: var(--muted); }
.review-intro p { margin: 0; font-size: 11px; line-height: 17px; }
.review-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 4px 6px 10px; background: #fff; border: 0; border-radius: 0; overflow: hidden; }
.review-metrics > div { display: grid; min-width: 0; justify-items: center; gap: 2px; padding: 8px 4px; border-right: 1px solid #f0f0ef; text-align: center; }
.review-metrics > div:nth-child(3n) { border-right: 0; }
.review-metrics span { color: var(--muted); font-size: 11px; line-height: 16px; overflow-wrap: anywhere; }
.review-metrics strong { color: var(--brand-deep); font-size: 21px; line-height: 1.3; font-variant-numeric: tabular-nums; }
.review-filters { display: flex; position: sticky; top: 0; z-index: 3; border-top: 6px solid var(--bg); border-bottom: 6px solid var(--bg); background: #fff; }
.review-filters button { flex: 1; min-height: 46px; padding: 6px 3px; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: #fff; color: var(--muted); font: inherit; font-size: 14px; cursor: pointer; }
.review-filters button small { margin-left: 5px; font-size: 11px; font-weight: 400; }
.review-filters button.selected { border-bottom-color: var(--brand); color: var(--brand); font-weight: 750; }
.review-card { margin: 0; padding: 0; background: #fff; border: 0; border-bottom: 7px solid var(--bg); border-radius: 0; overflow: visible; }
.review-card[hidden], .review-detail[hidden], .review-empty[hidden] { display: none; }
.review-match-header { display: block; }
.review-match-row { display: grid; grid-template-columns: 54px minmax(0, 1fr) 12px; align-items: center; gap: 7px; min-height: 116px; padding: 12px 14px 8px; color: var(--text); text-decoration: none; }
.review-match-meta { display: flex; flex-direction: column; gap: 6px; min-width: 0; color: var(--muted); font-size: 10px; }
.review-match-meta strong { color: var(--brand); font-size: 11px; }
.review-match-meta time { line-height: 1.5; }
.review-match-main { min-width: 0; }
.review-phase { display: table; margin: 0 auto 6px; padding: 2px 7px; border-radius: 4px; background: var(--bg); color: var(--muted); font-size: 10px; line-height: 1.2; }
.review-teams { display: grid; grid-template-columns: minmax(0, 1fr) 68px minmax(0, 1fr); align-items: center; gap: 4px; }
.review-team { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 0; min-height: 60px; text-align: center; }
.review-team img { display: block; width: 35px; height: 35px; margin: 0 auto 6px; object-fit: contain; }
.review-team img[hidden] { display: none; }
.review-team strong { width: 100%; font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
.review-score { color: var(--text); font-size: 29px; line-height: 1.2; font-weight: 850; letter-spacing: 0; text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.review-secondary { min-height: 14px; margin: 7px 0 0; color: var(--muted); font-size: 10px; text-align: center; }
.review-chevron { width: 14px; height: 14px; transform: rotate(180deg); opacity: .5; }
.review-actions { display: flex; justify-content: flex-end; padding: 0 14px 6px; }
.review-actions a, .review-actions button { display: grid; place-items: center; min-height: 36px; padding: 4px 12px; border: 0; border-left: 1px solid #f2f3f2; border-radius: 0; background: none; color: var(--muted); font: inherit; font-size: 11px; text-decoration: none; cursor: pointer; }
.review-actions button { border-left: 0; color: var(--brand); font-weight: 650; }
.review-actions a:last-child { padding-right: 0; }
.review-predictions { display: grid; gap: 5px; padding: 9px 14px; border-top: 1px solid #f4eeee; background: #fff5f4; color: var(--brand); font-size: 12px; }
.review-prediction-line { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: baseline; gap: 8px; line-height: 1.7; }
.review-prediction-line > strong { font-size: 11px; font-weight: 650; }
.review-prediction-values { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.review-hit { display: inline-flex; align-items: center; gap: 3px; padding: 1px 5px; border-radius: 4px; background: #fff0b5; color: var(--brand); font-weight: 700; white-space: nowrap; }
.review-hit img { width: 11px; height: 11px; }
.review-value { display: inline-block; max-width: 100%; overflow-wrap: normal; }
.review-value-separator { display: inline; }
.review-detail { padding: 10px 14px 14px; }
.review-metric-table { width: 100%; margin: 0; border-collapse: collapse; table-layout: fixed; color: var(--text); font-size: 12px; line-height: 1.6; text-align: left; }
.review-metric-table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.review-metric-table thead { color: var(--muted); }
.review-metric-table thead th:nth-child(1) { width: 24%; }
.review-metric-table thead th:nth-child(2) { width: 40%; }
.review-metric-table thead th:nth-child(3) { width: 18%; }
.review-metric-table thead th:nth-child(4) { width: 18%; }
.review-metric-table th, .review-metric-table td { padding: 8px 4px; border-bottom: 1px solid #f0f0ef; overflow-wrap: anywhere; text-align: left; vertical-align: middle; }
.review-metric-card:nth-of-type(even) { background: #fff; }
.review-metric-card th { color: var(--text); font-weight: 500; }
.review-metric-card td { color: var(--muted); }
.review-metric-card td:last-child { text-align: center; }
.review-result { font-size: 11px; line-height: 1.4; font-weight: 750; }
.review-result.correct { color: var(--brand); }
.review-result.wrong { color: #9c7c19; }
.review-result.pending { color: var(--muted); }
.review-result.not_triggered { color: #9c7c19; }
.review-result.unavailable { color: var(--muted); }
.review-result.correct { background: #fff5d6; }
.review-metric-note td { padding: 3px 4px 8px; font-size: 11px; line-height: 1.4; }
.review-metric-note p { overflow-wrap: anywhere; }
.review-list-title { margin: 0; padding: 8px 14px; font-size: 18px; line-height: 27px; }
.review-empty { margin: 0; padding: 26px 14px; color: var(--muted); font-size: 13px; text-align: center; }
.review-parlay-card { margin: 0; padding: 14px; border-top: 1px solid var(--line); background: #fff; }
.review-parlay-card h3 { margin: 0 0 4px; font-size: 15px; }
.review-parlay-card > .review-result { margin: 0 0 10px; }
.review-parlay-card.is-correct { border-left: 3px solid var(--brand); }
.review-parlay-leg { display: grid; gap: 2px; margin: 10px 0 0; padding-top: 10px; border-top: 1px solid #f0f0ef; color: var(--muted); font-size: 11px; line-height: 1.5; }
.review-parlay-leg strong { color: var(--text); font-size: 12px; }
.app[data-active="market"] .bottom-nav,
.app[data-active="reviews"] .bottom-nav { left: 0; width: 100%; grid-template-columns: repeat(5, minmax(0, 90px)); justify-content: center; padding: 4px 0; }
.app[data-active="market"] .nav-item,
.app[data-active="reviews"] .nav-item { min-height: 44px; gap: 2px; padding: 2px 0; font-size: 12px; line-height: 18px; font-weight: 400; }
.app[data-active="market"] .nav-item.active,
.app[data-active="reviews"] .nav-item.active { font-weight: 800; }
.app[data-active="market"] .nav-item img,
.app[data-active="reviews"] .nav-item img { width: 20px; height: 20px; }
.review-metric-card p { margin: 0; }
@media (max-width: 360px) {
  .app[data-active="matches"] .batch-tools { gap: 6px; padding-right: 8px; padding-left: 8px; }
  .app[data-active="matches"] .batch-tools button { padding-right: 9px; padding-left: 9px; }
  .app[data-active="matches"] .batch-tools label { min-width: 0; gap: 5px; font-size: 11px; }
  .app[data-active="matches"] .batch-tools input { width: 96px; min-width: 0; padding-right: 4px; padding-left: 4px; }
  .app[data-active="matches"] .status-tabs button { font-size: 14px; }
  .app[data-active="matches"] .batch-heading,
  .app[data-active="matches"] .group-heading { padding-right: 12px; padding-left: 12px; }
  .app[data-active="matches"] .match-row { grid-template-columns: 53px minmax(0, 1fr) 10px; gap: 6px; padding-right: 10px; padding-left: 10px; }
  .app[data-active="matches"] .match-teams { grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr); gap: 3px; }
  .app[data-active="matches"] .match-team strong { font-size: 12px; }
  .app[data-active="matches"] .match-score { font-size: 24px; }
  .app[data-active="matches"] .match-actions { padding-right: 10px; padding-left: 10px; }
  .app[data-active="matches"] .match-actions a { padding-right: 8px; padding-left: 8px; }
  .review-match-row { grid-template-columns: 48px minmax(0, 1fr) 10px; padding-right: 10px; padding-left: 10px; }
  .review-teams { grid-template-columns: minmax(0, 1fr) 60px minmax(0, 1fr); gap: 3px; }
  .review-score { font-size: 26px; }
  .review-team strong { font-size: 11px; }
  .review-detail { padding-right: 10px; padding-left: 10px; }
}
.detail-tabs { grid-template-columns: repeat(4, 1fr); gap: 0; border-bottom: 1px solid var(--line); }
.detail-tab { border-radius: 0; padding: 11px 4px; background: transparent; }
.detail-tab.active { position: relative; background: transparent; color: var(--brand); }
.detail-tab.active::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: -1px; height: 3px; background: var(--brand); }
.detail-team-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 12px 0; padding: 4px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); }
.detail-team-switch button { padding: 10px 8px; border-radius: 6px; background: transparent; color: var(--muted); font-weight: 750; }
.detail-team-switch button.active { background: var(--brand); color: white; }
.card-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card-title h3 { margin: 0; padding-left: 9px; border-left: 3px solid var(--brand); }
.lineup-card { padding: 13px 10px 10px; }
.pitch { position: relative; min-height: 430px; margin-top: 10px; overflow: hidden; border-radius: 8px; background: linear-gradient(180deg, #2d7d35 0%, #246d2d 100%); border: 1px solid #4e7354; }
.pitch::before { content: ""; position: absolute; left: 8%; right: 8%; top: 18%; height: 59%; border: 1px solid rgba(255,255,255,.2); border-radius: 2px; }
.pitch::after { content: ""; position: absolute; left: 50%; top: 18%; bottom: 23%; width: 1px; background: rgba(255,255,255,.18); }
.pitch-label { position: absolute; z-index: 2; top: 10px; left: 12px; color: rgba(255,255,255,.88); font-size: 11px; }
.pitch-mode { position: absolute; z-index: 2; top: 10px; right: 12px; color: rgba(255,255,255,.88); font-size: 10px; }
.formation { position: absolute; left: 12px; bottom: 9px; color: rgba(255,255,255,.8); font-size: 10px; }
.player { position: absolute; z-index: 1; width: 74px; display: grid; justify-items: center; gap: 4px; padding: 0; background: transparent; color: white; font-size: 10px; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.player-avatar { position: relative; display: grid; place-items: center; width: 36px; height: 36px; overflow: visible; border-radius: 50%; background: #edf0e9; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.player-avatar img { display: block; width: 36px; height: 36px; object-fit: cover; border-radius: 50%; }
.player-avatar b { position: absolute; left: -5px; top: -3px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--brand); color: #fff; font-size: 9px; text-shadow: none; }
.player span { line-height: 1.25; }
.p1 { left: 10%; top: 16%; } .p2 { left: 42%; top: 16%; } .p3 { right: 10%; top: 16%; }
.p4 { left: 10%; top: 33%; } .p5 { left: 42%; top: 33%; } .p6 { right: 10%; top: 33%; }
.p7 { left: 4%; top: 51%; } .p8 { left: 30%; top: 51%; } .p9 { right: 30%; top: 51%; } .p10 { right: 4%; top: 51%; }
.p11 { left: 42%; top: 70%; }
.bench-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; margin-top: 10px; }
.bench-grid button { display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: 7px; padding: 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-soft); text-align: left; }
.bench-grid b { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font-size: 10px; }
.bench-grid span, .bench-grid small { grid-column: 2; }
.bench-grid span { font-size: 11px; font-weight: 750; }
.bench-grid small { color: var(--muted); font-size: 10px; }

.detail-back { display: inline-flex; align-items: center; gap: 5px; padding: 0; margin: 2px 0 12px; background: transparent; color: var(--brand); font-weight: 800; }
.detail-header { display: grid; align-items: center; min-height: 102px; padding: 4px 14px 12px; background: var(--surface); text-align: center; }
.detail-competition { display: grid; justify-items: center; gap: 3px; color: var(--text); font-size: 12px; }
.detail-competition strong { font-size: 14px; }
.detail-competition time { color: var(--muted); font-size: 11px; }
.detail-scoreboard { display: grid; grid-template-columns: minmax(0, 1fr) 92px minmax(0, 1fr); align-items: center; gap: 8px; margin: 0; }
.detail-team { min-width: 0; text-align: center; }
.detail-team .team-badge { width: 54px; height: 54px; margin: 0 auto; border-radius: 0; box-shadow: none; font-size: 13px; }
.detail-team .image-badge img { padding: 0; }
.detail-team h1 { margin: 8px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 18.2px; }
.detail-score-block { min-width: 0; display: flex; flex-direction: column; align-items: center; padding-bottom: 0; text-align: center; }
.detail-score-block:has(.detail-stale) { padding-bottom: 2.333px; }
.detail-score-block .detail-phase { display: inline-block; margin: 4px 0 0; padding: 2px 7px; border-radius: 5px; background: var(--surface-soft); color: var(--muted); font-size: 11px; line-height: 16.5px; }
.detail-score-block .detail-phase.live { background: #d52c2c; color: #fff; }
.live-second-clock { position: relative; display: inline-block; width: 12px; height: 12px; margin-left: 3px; vertical-align: -1px; border: 1px solid currentColor; border-radius: 50%; }
.live-second-clock::before { position: absolute; top: 50%; left: calc(50% - .5px); width: 1px; height: 4px; background: currentColor; transform-origin: 50% 0; animation: live-second-sweep 1s linear infinite; content: ""; }
.live-second-clock::after { position: absolute; top: calc(50% - 1px); left: calc(50% - 1px); width: 2px; height: 2px; border-radius: 50%; background: currentColor; content: ""; }
.minute-unit { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@keyframes live-second-sweep { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { .live-second-clock::before { animation: none; } }
.detail-score-block strong { order: -1; display: block; color: var(--brand); font-size: 40px; font-weight: 850; line-height: 42px; letter-spacing: 0; white-space: nowrap; }
.detail-score-block .detail-half { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 16.5px; }
.detail-score-block .detail-stale { display: inline-block; margin-top: 7px; color: #935407; font-size: 10px; line-height: 14px; }
.detail-tabs { display: flex; align-items: center; height: 46px; min-height: 46px; margin: 0; border-bottom: 1px solid var(--line); background: var(--surface); }
.detail-tab, .detail-tabs > button { position: relative; top: .333px; flex: 1 1 16.6667%; min-width: 0; height: 44.667px; min-height: 44px; display: grid; place-items: center; padding: 10px 2px; border: 0; border-bottom: 2.667px solid transparent; border-radius: 0; background: var(--surface); color: var(--muted); font-size: 15px; font-weight: 400; text-align: center; text-decoration: none; }
.detail-tab.active, .detail-tabs > button.selected { border-bottom-color: var(--brand); background: var(--surface); color: var(--brand); font-weight: 800; }
.detail-tab.active::after, .detail-tabs > button.selected::after { content: none; }
.app.detail-page { padding-bottom: 52px; }
.app[data-active="matches"] { padding-bottom: 52px; }
.analysis-host { display: block; }
.detail-section-nav { display: flex; gap: 0; margin: 0 -14px 10px; overflow-x: auto; border-bottom: 1px solid var(--line); background: var(--surface); }
.detail-section-link { position: relative; flex: 0 0 auto; padding: 10px 13px 9px; color: var(--muted); font-size: 11px; }
.detail-section-link.active { color: var(--brand); font-weight: 750; }
.detail-section-link.active::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; background: var(--brand); }
.detail-section-card { scroll-margin-top: 12px; }
.section-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.section-disclosure { display: flex; align-items: center; justify-content: space-between; flex: 1; min-width: 0; padding: 0; background: transparent; color: var(--text); text-align: left; }
.section-disclosure strong { padding-left: 8px; border-left: 3px solid var(--brand); font-size: 14px; }
.section-disclosure span { color: var(--muted); font-size: 12px; }
.section-card-head > small, .section-kicker { color: var(--muted); font-size: 11px; }
.section-card-body[hidden] { display: none; }
.standings-detail-toggle { padding: 6px 8px; border-radius: 6px; background: var(--surface-soft); color: var(--muted); font-size: 10px; }
.h2h-table { margin-top: 12px; font-size: 10px; }
.h2h-table th, .h2h-table td { vertical-align: middle; }
.h2h-table td:first-child, .h2h-table td:nth-child(2) { display: grid; gap: 2px; }
.h2h-table td:nth-child(2) { grid-template-columns: 1fr auto 1fr; align-items: center; gap: 4px; text-align: center; }
.h2h-table td:nth-child(2) span:first-child { text-align: left; }
.h2h-table td:nth-child(2) span:nth-of-type(2) { text-align: right; }
.h2h-table td:nth-child(2) small { grid-column: 1 / -1; color: var(--muted); }
.h2h-table td:first-child small { color: var(--muted); }
.form-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 9px 0; }
.form-summary > div { display: grid; justify-items: center; gap: 2px; padding: 8px 4px; border: 1px solid var(--line); border-radius: 7px; }
.form-summary strong { color: var(--brand-deep); font-size: 16px; }
.form-summary span { color: var(--muted); font-size: 10px; }
.goal-team + .goal-team { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.goal-team > strong, .schedule-team > strong, .transfer-team > strong { display: block; margin-bottom: 8px; font-size: 12px; }
.goal-grid { display: grid; grid-template-columns: repeat(6, 1fr); align-items: end; gap: 5px; min-height: 100px; }
.goal-grid > div { display: grid; justify-items: center; align-content: end; gap: 4px; min-width: 0; }
.goal-grid span { color: var(--muted); font-size: 9px; white-space: nowrap; }
.goal-grid b { color: var(--text); font-size: 11px; }
.goal-grid i { display: block; width: 14px; max-height: 62px; border-radius: 3px 3px 0 0; background: var(--brand); }
.half-table { min-width: 590px; font-size: 10px; }
.half-table th, .half-table td { padding: 7px 4px; text-align: center; white-space: nowrap; }
.half-table th:first-child, .half-table td:first-child { text-align: left; }
.schedule-team + .schedule-team, .transfer-team + .transfer-team { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.schedule-row { display: grid; grid-template-columns: 66px 1fr; gap: 3px 8px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 11px; }
.schedule-row time, .schedule-row span { color: var(--muted); }
.schedule-row b { grid-column: 2; font-size: 11px; font-weight: 650; }
.transfer-team .detail-table { font-size: 10px; }
.overview-toolbar { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: stretch; gap: 7px; min-height: 104px; margin: 0 0 10px; padding: 7px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.overview-toolbar button, .h2h-tools button { padding: 8px 9px; border-radius: 6px; background: transparent; color: var(--muted); font-size: 10px; }
.overview-toolbar button.active, .h2h-tools button.active { background: var(--brand-soft); color: var(--brand); font-weight: 750; }
.overview-mode { display: flex; flex-direction: column; gap: 3px; }
.overview-options { display: flex; flex-wrap: wrap; align-content: center; gap: 3px; margin-left: 0; overflow-x: auto; }
.overview-options button:nth-child(-n + 2) { flex: 1 1 44%; }
.overview-options button:nth-child(n + 3) { flex: 1 1 27%; }
.overview-card { padding: 13px 11px 12px; }
.overview-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.overview-card-head strong { padding-left: 8px; border-left: 3px solid var(--brand); font-size: 14px; }
.overview-card-head span { color: var(--muted); font-size: 12px; }
.overview-team-head { display: flex; align-items: center; justify-content: space-between; margin: 0 3px 5px; font-size: 12px; font-weight: 750; }
.overview-metric { padding: 7px 0 8px; border-top: 1px solid var(--line); }
.overview-metric-values { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.overview-metric-values strong { font-size: 13px; }
.overview-metric-values strong:last-child { text-align: right; }
.overview-metric-values span { color: var(--muted); text-align: center; font-size: 10px; }
.overview-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 5px; }
.overview-bars i { display: block; height: 4px; border-radius: 99px; background: var(--brand); }
.overview-bars i.home { justify-self: end; transform-origin: right center; }
.overview-bars i.away { background: #a9b6c0; transform-origin: left center; }
.standings-card { margin-top: 10px; }
.standings-caption { margin: -4px 0 8px; color: var(--muted); font-size: 11px; }
.standings-team + .standings-team { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.standings-team > strong { display: block; margin-bottom: 4px; font-size: 12px; }
.h2h-card { margin-top: 10px; }
.h2h-tools, .h2h-team-switch { display: flex; gap: 4px; margin-bottom: 8px; overflow-x: auto; }
.h2h-team-switch button { flex: 1; min-width: 0; padding: 8px; border-radius: 6px; background: var(--surface-soft); color: var(--muted); font-size: 11px; }
.h2h-team-switch button.active { background: var(--brand-soft); color: var(--brand); font-weight: 750; }
.h2h-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.h2h-summary > div { display: grid; justify-items: center; gap: 3px; padding: 9px 4px; border: 1px solid var(--line); border-radius: 7px; }
.h2h-summary strong { color: var(--brand-deep); font-size: 17px; }
.h2h-summary span, .h2h-summary small { color: var(--muted); font-size: 10px; }
.odds-market-tabs, .odds-period-tabs { display: grid; gap: 8px; margin: 10px 0; }
.odds-market-tabs { grid-template-columns: repeat(3, 1fr); }
.odds-period-tabs { grid-template-columns: repeat(2, 1fr); width: 128px; }
.odds-market-tabs { margin-bottom: 13px; }
.odds-period-tabs { margin-bottom: 14px; }
.odds-market-tabs button, .odds-period-tabs button { padding: 15px 7px; border-radius: 6px; background: var(--surface-soft); color: var(--muted); font-size: 11px; }
.odds-market-tabs button.active, .odds-period-tabs button.active { background: var(--brand); color: #fff; font-weight: 750; }
.odds-card { margin-top: 10px; }
.odds-table th, .odds-table td { white-space: nowrap; }
.odds-table thead th span, .odds-table thead th small { display: block; }
.odds-table thead th small { margin-top: 3px; color: var(--muted); font-size: 9px; font-weight: 500; }
.odds-table td { font-variant-numeric: tabular-nums; font-size: 10px; }
.odds-trend-card, .odds-records-card { margin-top: 10px; }
.odds-company-select { max-width: 112px; padding: 5px 20px 5px 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--muted); font-size: 10px; }
.odds-trend-caption { margin: -2px 0 3px; color: var(--text); font-size: 11px; }
.odds-trend-range { display: block; margin-bottom: 9px; color: var(--muted); font-size: 10px; }
.odds-trend-list { display: grid; gap: 0; max-height: 188px; overflow: auto; border-top: 1px solid var(--line); }
.odds-trend-row { display: grid; grid-template-columns: 1fr repeat(3, auto); gap: 9px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 10px; }
.odds-trend-row time { color: var(--muted); }
.odds-trend-row b { color: var(--text); font-variant-numeric: tabular-nums; font-weight: 650; }
.odds-record-table td { font-variant-numeric: tabular-nums; }
.live-stats-card { padding: 14px 12px 12px; }
.live-stats-card .card-title { margin-bottom: 4px; }
.live-stat-row { padding: 10px 0 8px; border-top: 1px solid var(--line); }
.live-stat-values { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; }
.live-stat-values b { color: var(--text); font-size: 11px; font-weight: 700; text-align: center; }
.live-stat-values span:last-child { text-align: right; }
.live-meter { display: flex; height: 5px; margin-top: 7px; overflow: hidden; border-radius: 99px; background: #d2d5d5; }
.live-meter i { display: block; height: 100%; min-width: 0; background: var(--brand); }
.live-meter i.home { background: #bfc4c4; }
.live-meter i.away { background: #bfc4c4; }
.live-stats-disclosure { display: block; width: 100%; margin-top: 12px; padding: 7px 0 3px; background: transparent; color: var(--muted); font-size: 11px; text-align: center; }
.live-stats-disclosure[aria-expanded="true"] { color: var(--brand); }
.event-filters { display: flex; gap: 16px; margin: 0 0 10px; padding-top: 1px; }
.event-filters label { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 11px; }
.event-filters input { width: 14px; height: 14px; margin: 0; accent-color: var(--brand); }
.player-team-switch { margin: 10px 0 8px; }
.player-season { margin: 7px 1px 9px; color: var(--muted); font-size: 11px; }
.player-overview-card, .player-stats-card { margin-top: 10px; }
.player-overview-card .detail-table th, .player-overview-card .detail-table td { padding-top: 12px; padding-bottom: 12px; }
.player-category-tabs, .player-position-tabs { display: grid; gap: 6px; margin: 0 0 9px; }
.player-category-tabs { grid-template-columns: repeat(4, 1fr); }
.player-position-tabs { grid-template-columns: repeat(5, 1fr); }
.player-category-tabs button, .player-position-tabs button { padding: 10px 4px; border-radius: 6px; background: var(--surface-soft); color: var(--muted); font-size: 11px; }
.player-category-tabs button.active, .player-position-tabs button.active { background: var(--brand); color: #fff; font-weight: 750; }
.player-overview-card .section-card-head, .player-stats-card .section-card-head, .player-compare-card .section-card-head { margin-bottom: 9px; }
.player-compare-card { margin-top: 10px; }
.player-compare-selects { display: grid; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); align-items: end; gap: 6px; }
.player-compare-selects label { display: grid; gap: 5px; min-width: 0; color: var(--muted); font-size: 10px; }
.player-compare-selects select { width: 100%; min-width: 0; padding: 9px 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--text); font: inherit; }
.player-compare-vs { padding-bottom: 10px; color: var(--muted); font-size: 11px; text-align: center; }
.player-compare-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.player-compare-metrics > div { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 5px; padding: 8px 5px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; text-align: center; }
.player-compare-metrics strong { color: var(--text); font-size: 13px; font-variant-numeric: tabular-nums; }
.analysis-card { padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.analysis-card + .analysis-card { margin-top: 10px; }
.analysis-card h3 { margin: 0 0 10px; font-size: 14px; }
.detail-table { width: 100%; border-collapse: collapse; color: var(--muted); font-size: 11px; }
.detail-table th, .detail-table td { padding: 9px 5px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.detail-table th { color: var(--text); font-weight: 750; }
.detail-table td:last-child, .detail-table th:last-child { text-align: right; }
.detail-table strong { color: var(--brand-deep); }
.detail-muted { color: var(--muted); }
.meter { height: 8px; overflow: hidden; border-radius: 99px; background: #f0f1f1; }
.meter > span { display: block; height: 100%; border-radius: inherit; background: var(--brand); }
.metric-row { display: grid; grid-template-columns: 1fr 44px 1fr; align-items: center; gap: 8px; margin-top: 9px; color: var(--muted); font-size: 11px; }
.metric-row strong { color: var(--text); text-align: center; font-size: 13px; }
.metric-row .right { text-align: right; }
.recommendation { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px; border-radius: 9px; background: var(--brand-soft); color: var(--brand-deep); }
.recommendation strong { font-size: 15px; }
.recommendation span { font-size: 12px; font-weight: 750; }

.lineup-mode-tabs { display: flex; gap: 4px; margin: -7px 0 10px; }
.lineup-mode-tabs button { padding: 11px 12px; border-radius: 6px; background: var(--surface-soft); color: var(--muted); font-size: 12px; font-weight: 750; }
.lineup-mode-tabs button.active { background: var(--brand-soft); color: var(--brand); }
.lineup-card > .card-title { display: none; }
.lineup-team + .lineup-team { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.lineup-team-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lineup-team-head h3 { margin: 0; font-size: 15px; }
.lineup-team-head strong { color: var(--muted); font-size: 12px; }
.lineup-team h4 { margin: 15px 0 7px; color: var(--muted); font-size: 12px; }
.lineup-player { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 7px; min-height: 36px; border-top: 1px solid var(--line); }
.lineup-player b { color: var(--brand); font-size: 12px; font-weight: 500; }
.lineup-player strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.lineup-player small { color: var(--muted); font-size: 10px; }
.bench-heading { margin-top: 14px !important; }
.bench-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.bench-player { grid-template-columns: 22px minmax(0, 1fr); min-height: 32px; }
.bench-player small { grid-column: 2; margin-top: -5px; }
.availability-list { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.availability-list h4 { margin-top: 0; }
.availability-list p { margin: 4px 0; color: var(--muted); font-size: 11px; }

.detail-nav {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #fff;
}
.detail-nav .detail-tabs { position: static; }
.mini-score {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
}
.mini-score.visible { display: flex; }
.mini-score span { line-height: 14px; }
.mini-score strong {
  color: var(--brand);
  font-size: 18px;
  line-height: 24px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mini-score span {
  max-width: 36%;
  overflow-wrap: anywhere;
}

.lineup-switch {
  display: flex;
  gap: 5px;
  padding: 8px 14px;
  background: #fff;
}
.lineup-switch button {
  min-height: 38px;
  padding: 6px 13px;
  border: 0;
  border-radius: 5px;
  background: var(--bg);
  color: var(--muted);
  font-size: 12px;
}
.lineup-switch button[aria-pressed="true"] {
  background: #fcf2f2;
  color: var(--brand);
  font-weight: 700;
}
.official-lineup .lineup-team {
  margin: 0;
  padding: 16px;
  border: 0;
  border-bottom: 8px solid var(--bg);
}
.official-lineup .lineup-team + .lineup-team {
  margin: 0;
  padding-top: 16px;
}
.official-lineup .lineup-team h3 {
  display: flex;
  justify-content: space-between;
  margin: 0 0 14px;
  font-size: 17px;
}
.official-lineup .lineup-team h3 span {
  color: var(--muted);
  font-size: 14px;
}
.official-lineup .lineup-team h4 {
  margin: 1.33em 0;
  color: var(--muted);
  font-size: 13px;
}
.official-lineup .lineup-team ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
.official-lineup .lineup-player {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 40px;
  gap: 8px;
  align-items: normal;
  min-height: 0;
  padding: 10px 0;
  border-top: 0;
  border-bottom: 1px solid #eef0ee;
  font-size: 14px;
}
.official-lineup .lineup-player > span { color: var(--brand); }
.official-lineup .lineup-player strong { font-size: 14px; }
.official-lineup .lineup-player small {
  color: var(--muted);
  font-size: smaller;
  text-align: right;
}
.empty-state {
  margin: 0;
  padding: 30px 16px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
}

.detail-section {
  padding: 16px 16px 20px;
  border-bottom: 8px solid var(--bg);
}
.detail-section h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  font-size: 17px;
}
.detail-section h2::before {
  content: "";
  width: 3px;
  height: 17px;
  background: var(--brand);
}

/* The origin collapses pending matches because no verified crest or score exists yet. */
.app.detail-page:has(.pending-detail),
.app.detail-page:has(.compact-detail) {
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", system-ui, sans-serif;
}
.app.detail-page:has(.pending-detail) .detail-topbar,
.app.detail-page:has(.compact-detail) .detail-topbar {
  height: 36px;
  min-height: 36px;
  padding: 0 48px;
}
.app.detail-page:has(.pending-detail) .detail-top-back,
.app.detail-page:has(.compact-detail) .detail-top-back {
  top: 0;
  left: 12px;
}
.app.detail-page:has(.pending-detail) .detail-top-meta,
.app.detail-page:has(.compact-detail) .detail-top-meta {
  align-items: stretch;
  gap: 2px;
}
.app.detail-page:has(.pending-detail) .detail-top-meta strong,
.app.detail-page:has(.compact-detail) .detail-top-meta strong {
  font-size: 14px;
  line-height: 18px;
}
.app.detail-page:has(.pending-detail) .detail-top-meta time,
.app.detail-page:has(.compact-detail) .detail-top-meta time {
  font-size: 11px;
  line-height: 16px;
}
.detail-header.pending-detail,
.detail-header.compact-detail {
  min-height: 96px;
  padding: 4px 14px 12px;
}
.pending-detail .detail-scoreboard,
.compact-detail .detail-scoreboard {
  grid-template-columns: minmax(0, 1fr) 92px minmax(0, 1fr);
  gap: 8px;
  margin: 0;
}
.pending-detail .detail-team h1,
.compact-detail .detail-team h1 {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 18.2px;
}
.pending-detail .detail-score-block,
.compact-detail .detail-score-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 0;
}
.pending-detail .detail-score-block > strong,
.compact-detail .detail-score-block > strong {
  order: -1;
  font-size: 40px;
  line-height: 42px;
  letter-spacing: 2px;
}
.pending-detail .detail-score-block .detail-phase,
.compact-detail .detail-score-block .detail-phase {
  margin: 4px 0 0;
  padding: 2px 7px;
  line-height: 16.5px;
}
.compact-detail .detail-team .team-badge {
  width: 54px;
  height: 54px;
}
.compact-detail .detail-score-block .detail-stale {
  margin-top: 3px;
  line-height: 13.333px;
}
.pending-detail .detail-pending-gap {
  width: 0;
  height: 0;
  margin: 3px 0 0;
}
.pending-detail .pending-badge {
  color: #935407;
  font-size: 10px;
}
.app.detail-page:has(.pending-detail) .detail-tabs,
.app.detail-page:has(.compact-detail) .detail-tabs {
  height: 46px;
  min-height: 46px;
}
.app.detail-page:has(.pending-detail) .detail-tabs > button,
.app.detail-page:has(.compact-detail) .detail-tabs > button {
  top: .333px;
  flex-basis: 16.6667%;
  height: 44.667px;
  min-height: 44px;
  border-bottom-width: 2.667px;
}

.pending-detail ~ .detail-nav + #matchPanel .detail-section h2::before { display: none; }
#matchLivePanel .live-progress {
  --home-color: #f5b800;
  --away-color: #168af4;
  padding: 12px 16px 8px;
  border-bottom: 8px solid var(--bg);
}
#matchLivePanel .live-summary {
  --home-color: #f5b800;
  --away-color: #168af4;
  padding: 10px 16px;
  border-bottom: 8px solid var(--bg);
}
#matchLivePanel .latest-events {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 8px;
  padding: 16px 16px 20px;
  border-bottom: 8px solid var(--bg);
}
#matchLivePanel .live-progress h2,
#matchLivePanel .live-summary h2,
#matchLivePanel .latest-events h2 {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 23.4px;
}
#matchLivePanel .live-progress h2::before,
#matchLivePanel .live-summary h2::before,
#matchLivePanel .latest-events h2::before { display: none; }
.live-progress-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
}
#matchLivePanel .live-progress .live-progress-header h2 { margin: 0; }
.live-progress-header time {
  min-width: 31px;
  color: var(--brand);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: right;
}
.timeline-mode-toggle {
  display: grid;
  grid-template-columns: repeat(2, 42px);
  gap: 2px;
  padding: 2px;
  border: 1px solid #e2e5e6;
  border-radius: 6px;
  background: #f3f5f5;
}
.timeline-mode-toggle button {
  height: 24px;
  padding: 0 7px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  line-height: 24px;
  font-weight: 650;
}
.timeline-mode-toggle button[aria-pressed="true"] {
  background: #fff;
  color: var(--text);
  box-shadow: 0 1px 3px rgb(17 24 39 / 12%);
}
.timeline-scroll { min-width: 0; }
.timeline-scroll.is-detail {
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 5px;
  overscroll-behavior-x: contain;
  scrollbar-color: #c8ced1 transparent;
  scrollbar-width: thin;
}
.timeline-scroll.is-detail .match-timeline { width: var(--timeline-detail-width, 1080px); margin-right: 16px; }
.timeline-scroll.is-detail .timeline-lanes { height: 212px; }
.timeline-scroll.is-detail .timeline-lane { height: 100px; }
.timeline-scroll.is-detail .timeline-logo { top: 39px; }
.match-timeline {
  margin: 0 8px 0 32px;
}
.timeline-ruler,
.timeline-lane-chart,
.timeline-grid-layer { display: block; }
.timeline-ruler { height: 22px; font-variant-numeric: tabular-nums; }
.timeline-tick {
  fill: var(--muted);
  font-size: 11px;
}
.timeline-lanes {
  position: relative;
  height: 100px;
  padding: 2px 0 10px;
}
.timeline-grid-layer {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}
.timeline-grid {
  stroke: #f1f3f2;
  stroke-width: 1;
}
.timeline-event-stem {
  stroke: #aeb6ba;
  stroke-width: 1;
  stroke-dasharray: 2 2;
  pointer-events: none;
}
.timeline-lane {
  position: relative;
  height: 44px;
}
.timeline-lane-chart { overflow: visible; }
.timeline-logo {
  position: absolute;
  top: 5px;
  left: -32px;
  width: 22px;
  height: 22px;
  object-fit: contain;
}
.timeline-track { fill: #edf0f1; }
.timeline-elapsed { fill: var(--home-color); }
[data-timeline-side="away"] .timeline-elapsed { fill: var(--away-color); }
.timeline-marker {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  isolation: isolate;
}
.timeline-marker::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 20px;
  left: 20px;
  width: 4px;
  height: 4px;
  border: 1px solid #fff;
  border-radius: 50%;
  background: #4b5563;
  box-shadow: 0 0 0 1px rgb(17 24 39 / 8%);
}
.timeline-event-chip {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid #d8dddf;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgb(17 24 39 / 13%);
  transform: translateY(var(--timeline-icon-offset, 0));
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
.timeline-event-chip.multi-icon {
  grid-auto-flow: column;
  grid-auto-columns: 14px;
  gap: 1px;
  width: 34px;
  padding: 0 2px;
  border-radius: 12px;
}
.timeline-cluster-icon { display: grid; place-items: center; }
.timeline-event-chip.multi-icon .ui-icon { width: 14px; height: 14px; }
.timeline-marker:hover .timeline-event-chip {
  border-color: #aeb6ba;
  box-shadow: 0 3px 8px rgb(17 24 39 / 18%);
  transform: translateY(var(--timeline-icon-offset, 0)) scale(1.06);
}
.timeline-marker:focus-visible { outline: none; }
.timeline-marker:focus-visible .timeline-event-chip {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.timeline-marker .ui-icon { position: relative; z-index: 1; width: 16px; height: 16px; }
.timeline-marker.yellow-card .timeline-event-chip,
.timeline-marker.second-yellow .timeline-event-chip { background: #fffdf2; border-color: #f3dc78; }
.timeline-marker.red-card .timeline-event-chip { background: #fff7f7; border-color: #efb0b0; }
.timeline-marker.yellow-card .ui-icon,
.timeline-marker.second-yellow .ui-icon {
  filter: invert(71%) sepia(94%) saturate(1145%) hue-rotate(359deg) brightness(100%) contrast(106%);
}
.timeline-marker.red-card .ui-icon {
  filter: invert(24%) sepia(78%) saturate(2681%) hue-rotate(342deg) brightness(85%) contrast(104%);
}
.timeline-cluster-icon.yellow-card .ui-icon,
.timeline-cluster-icon.second-yellow .ui-icon {
  filter: invert(71%) sepia(94%) saturate(1145%) hue-rotate(359deg) brightness(100%) contrast(106%);
}
.timeline-cluster-icon.red-card .ui-icon {
  filter: invert(24%) sepia(78%) saturate(2681%) hue-rotate(342deg) brightness(85%) contrast(104%);
}
.timeline-event-count {
  position: absolute;
  z-index: 2;
  top: -7px;
  right: -7px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border: 2px solid #fff;
  border-radius: 9px;
  background: var(--brand);
  color: #fff;
  box-shadow: 0 1px 3px rgb(127 29 29 / 25%);
  font-size: 9px;
  font-weight: 700;
  line-height: 12px;
}
.timeline-cursor {
  stroke: var(--brand);
  stroke-width: 1;
  pointer-events: none;
}
.live-statistics { min-height: 265.865px; }
.possession-comparison {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  height: 96px;
  margin-bottom: 6px;
}
.possession-team {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 0;
}
.possession-team.away { flex-direction: row-reverse; }
.summary-logo {
  width: 44px;
  height: 54px;
  object-fit: contain;
}
.possession-team strong {
  color: #936600;
  font-size: 25px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.possession-team.away strong { color: #087dab; }
.possession-ring {
  position: relative;
  width: 96px;
  height: 96px;
}
.possession-ring svg {
  display: block;
  width: 96px;
  height: 96px;
  transform: rotate(-90deg) scaleY(-1);
}
.possession-ring span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 650;
}
.possession-track {
  fill: none;
  stroke: #e8ebed;
  stroke-width: 13px;
}
.possession-ring circle { fill: none; stroke-width: 13px; stroke-linecap: butt; }
.possession-away { stroke: var(--away-color); }
.possession-home { stroke: var(--home-color); }
.comparison-statistics { height: 110px; }
.comparison-row {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  align-items: center;
  min-height: 30px;
  row-gap: 4px;
  margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}
.comparison-row:last-child { margin-bottom: 0; }
.comparison-row strong {
  grid-area: 1 / 1 / 3;
  font-size: 20px;
  line-height: 24px;
}
.comparison-row strong:last-of-type {
  grid-column: 3;
  text-align: right;
}
.comparison-row > span:not(.comparison-track) {
  grid-area: 1 / 2;
  text-align: center;
  font-size: 13px;
  line-height: 16.9px;
}
.comparison-track {
  grid-area: 2 / 2;
  display: block;
  width: 100%;
  height: 6px;
  overflow: hidden;
  border: 0;
  border-radius: 4px;
  appearance: none;
  background: var(--away-color);
}
.comparison-track::-webkit-progress-bar { background: var(--away-color); }
.comparison-track::-webkit-progress-value { background: var(--home-color); }
.comparison-track::-moz-progress-bar { background: var(--home-color); }
.comparison-track.is-empty { background: #e8ebed; }
.summary-counters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-height: 43.865px;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}
.summary-counter { text-align: center; }
.summary-counter + .summary-counter { border-left: 1px solid var(--line); }
.summary-counter > span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 16px;
  color: var(--muted);
  font-size: 11px;
  line-height: 13.2px;
}
.summary-counter .ui-icon { width: 16px; height: 16px; }
.summary-counter.yellowCards .ui-icon { filter: invert(.71) sepia(.94) saturate(11.45) hue-rotate(359deg) brightness(1) contrast(1.06); }
.summary-counter.redCards .ui-icon { filter: invert(.24) sepia(.78) saturate(26.81) hue-rotate(342deg) brightness(.85) contrast(1.04); }
.summary-counter > strong {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 2px;
  font-size: 16px;
  line-height: 19.2px;
}
#matchLivePanel .live-summary .statistics-toggle {
  min-height: 36px;
  margin: 2px auto -5px;
  font-size: 13px;
}
#matchLivePanel .latest-events h2 {
  align-self: center;
  margin-bottom: 8px;
}
#matchLivePanel .latest-events .event-filters {
  width: max-content;
  padding-bottom: 12px;
}
#matchLivePanel .latest-events .empty-state,
#matchLivePanel .latest-events .event-list {
  grid-column: 1 / -1;
  width: 100%;
}
.full-statistics {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.full-statistics .stat-row { line-height: 18px; }
.stat-row {
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  align-items: center;
  row-gap: 5px;
  margin-bottom: 13px;
  font-size: 14px;
}
.stat-row:last-child { margin-bottom: 0; }
.stat-row > span { text-align: center; }
.stat-row > strong:last-of-type { text-align: right; }
.stat-row progress,
.unknown-track {
  grid-column: 1 / -1;
  display: block;
  width: 100%;
  height: 6px;
  overflow: hidden;
  border: 0;
  border-radius: 4px;
  background: #d1d5d3;
}
.stat-row progress { appearance: none; -webkit-appearance: none; }
.stat-row progress::-webkit-progress-bar { border-radius: 4px; background: #d1d5d3; }
.stat-row progress::-webkit-progress-value { border-radius: 4px; background: #d52c2c; }
.stat-row progress::-moz-progress-bar { background: #d52c2c; }
.statistics-toggle {
  display: block;
  min-height: 40px;
  margin: 14px auto 0;
  padding: 8px 18px;
  border: 0;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
}
.event-filters {
  display: flex;
  gap: 5px;
  margin: 0;
  padding: 0 0 17px;
  background: #fff;
}
.event-filters button {
  min-height: 38px;
  padding: 6px 13px;
  border: 0;
  border-radius: 5px;
  background: var(--bg);
  color: var(--muted);
  font-size: 12px;
}
.event-filters button[aria-pressed="true"] {
  background: #fcf2f2;
  color: var(--brand);
  font-weight: 700;
}
.event-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.event-item {
  position: relative;
  display: grid;
  grid-template-columns: 38px 24px minmax(0, 1fr);
  gap: 9px;
  padding: 0 0 23px;
  line-height: 1.5;
}
.event-item:last-child { padding-bottom: 0; }
.event-item:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 27px;
  bottom: 5px;
  left: 58px;
  width: 1px;
  background: var(--line);
}
.event-item time {
  color: var(--brand);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  font-weight: 750;
}
.event-item .ui-icon { width: 23px; height: 23px; }
.event-item strong { overflow-wrap: anywhere; font-size: 14px; }
.event-item strong span { font-weight: 500; }
.event-item p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}
.event-item.yellow-card .event-icon,
.event-item.second-yellow .event-icon {
  filter: invert(71%) sepia(94%) saturate(1145%) hue-rotate(359deg) brightness(100%) contrast(106%);
}
.event-item.red-card .event-icon {
  filter: invert(24%) sepia(78%) saturate(2681%) hue-rotate(342deg) brightness(85%) contrast(104%);
}
#matchLivePanel .latest-events .event-item {
  grid-template-columns: 54px 24px minmax(0, 1fr);
  padding-bottom: 18px;
  scroll-margin-top: 120px;
}
#matchLivePanel .latest-events .event-item p:not(.event-related) {
  display: inline;
  margin: 0 0 0 8px;
}
#matchLivePanel .latest-events .event-item time {
  font-size: 12px;
  white-space: nowrap;
}
#matchLivePanel .latest-events .event-item:not(:last-child)::before { left: 75px; }
#matchLivePanel .latest-events .event-item:focus {
  outline: 2px solid var(--brand);
  outline-offset: 5px;
}
#matchLivePanel .latest-events .event-item.timeline-target {
  background: linear-gradient(90deg, #fff7e8, transparent 78%);
}

@media (max-width: 370px) {
  .possession-comparison { grid-template-columns: minmax(0, 1fr) 90px minmax(0, 1fr); gap: 5px; }
  .possession-ring { width: 90px; height: 90px; }
  .possession-team { gap: 4px; }
  .summary-logo { width: 32px; height: 42px; }
  .possession-team strong { font-size: 22px; }
  .possession-ring > span { font-size: 13px; }
  .match-timeline { margin-right: 8px; margin-left: 28px; }
  .timeline-logo { left: -28px; width: 20px; }
  .comparison-row { grid-template-columns: 30px minmax(0, 1fr) 30px; }
  .comparison-row > strong { font-size: 18px; }
}

.bottom-nav { position: fixed; z-index: 5; bottom: 0; width: min(100%, 540px); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 7px 6px max(7px, env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); }
.nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-width: 0; min-height: 42px; padding: 0; background: transparent; color: var(--muted); font-size: 10px; font-weight: 700; }
.nav-item img { width: 22px; height: 22px; opacity: .62; }
.nav-item .nav-glyph { display: grid; place-items: center; width: 20px; height: 20px; font-size: 20px; line-height: 20px; font-weight: 400; }
.nav-item.active { color: var(--brand); font-weight: 800; }
.nav-item > span:last-child { white-space: nowrap; }
.app[data-active="service"] { min-height: 0; padding-bottom: 112px; }
.app-shell:has(.app[data-active="service"]) { min-height: 0; }
.app[data-active="service"] .content { padding: 14px 20px 0; }
.app[data-active="service"] .privacy-note { width: 100%; height: auto; margin-top: 28px; }
.app[data-active="service"] .bottom-nav { left: 0; width: 100%; grid-template-columns: repeat(5, minmax(0, 90px)); justify-content: center; padding: 4px 0; }
.app[data-active="service"] .nav-item { min-height: 44px; gap: 2px; padding: 2px 0; font-size: 12px; line-height: 18px; font-weight: 400; }
.app[data-active="service"] .nav-item.active { font-weight: 800; }
.app[data-active="service"] .nav-item img { width: 20px; height: 20px; }
.service-view { width: 100%; max-width: 500px; margin: 0 auto; }
.site-announcements { display: grid; gap: 8px; margin: 0 0 14px; }
.v2n-announcement-slot { padding: 12px 20px 0; }
.v2n-announcement-slot:empty { display: none; }
.site-announcement { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 58px; padding: 11px 13px; border: 1px solid #b9d3c4; border-left: 4px solid var(--brand); border-radius: 6px; background: #f2f8f4; }
.site-announcement.warning { border-color: #e4ca8b; border-left-color: #b37a12; background: #fff9e9; }
.site-announcement.success { border-color: #a9d2b8; border-left-color: #23844d; background: #edf8f1; }
.site-announcement.urgent { border-color: #e1aaa5; border-left-color: #b84138; background: #fdf1f0; }
.site-announcement strong { display: block; margin-bottom: 2px; color: var(--ink); font-size: 13px; }
.site-announcement p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
.site-announcement a { flex: 0 0 auto; color: var(--brand); font-size: 12px; font-weight: 800; text-decoration: none; }
.site-announcement a:hover { text-decoration: underline; }
.service-header { display: flex; align-items: center; gap: 14px; padding: 14px 0 22px; border-bottom: 1px solid var(--line); }
.service-mark { display: grid; flex: 0 0 52px; place-items: center; width: 52px; height: 52px; border-radius: 7px; background: var(--brand); color: #fff; }
.service-mark img { width: 28px; height: 28px; filter: invert(1); }
.service-header p { margin: 0 0 3px; color: var(--brand); font-size: 10px; line-height: 1.4; font-weight: 800; }
.service-header h1 { margin: 0; font-size: 25px; line-height: 1.25; }
.service-header span { color: var(--muted); font-size: 12px; }
.service-section { padding: 20px 0; border-bottom: 1px solid var(--line); }
.service-section h2 { margin: 0 0 7px; font-size: 17px; }
.service-section > p { margin: 0 0 16px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.service-pending { display: flex; align-items: center; gap: 11px; min-height: 58px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-soft); }
.service-status-dot { flex: 0 0 9px; width: 9px; height: 9px; border-radius: 50%; background: #9ca3a0; }
.service-pending div { display: grid; gap: 2px; }
.service-pending strong { font-size: 14px; }
.service-pending small { color: var(--muted); font-size: 11px; }
.service-contact-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: 6px; background: var(--brand); color: #fff; font-size: 14px; font-weight: 800; }
.service-qr { display: block; width: min(68vw, 240px); aspect-ratio: 1; margin: 0 auto 10px; object-fit: contain; }
.service-section > .service-qr + p { margin: 0; text-align: center; }
.service-qr ~ .service-contact-link { display: flex; width: fit-content; margin: 14px auto 0; }
.service-chat { overflow: hidden; border: 1px solid #cdd7d1; border-radius: 7px; background: #fff; box-shadow: 0 10px 26px rgba(31, 52, 40, .07); }
.service-chat > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 62px; padding: 10px 13px; border-bottom: 1px solid var(--line); background: #f8faf9; }
.service-agent { display: flex; align-items: center; gap: 10px; min-width: 0; }
.service-agent-avatar { display: grid; flex: 0 0 36px; place-items: center; width: 36px; height: 36px; border-radius: 7px; background: #173f2d; }
.service-agent-avatar img { width: 19px; height: 19px; filter: brightness(0) invert(1); }
.service-agent > div > strong { display: block; color: var(--text); font-size: 13px; }
.service-chat-status { display: flex; align-items: center; gap: 5px; margin-top: 3px; color: var(--muted); font-size: 10px; }
.service-chat-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #9da7a1; box-shadow: 0 0 0 2px #e8ece9; }
.service-chat-status.connected { color: #16734f; }
.service-chat-status.connected::before { background: #20a66b; box-shadow: 0 0 0 2px #dff3e8; }
.service-chat-status.closed { color: #8a5c12; }
.service-chat-status.closed::before { background: #c9902f; box-shadow: 0 0 0 2px #f8ecd3; }
.service-customer-id { display: block; margin-top: 2px; color: #66736c; font-size: 9px; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.service-chat > header time { max-width: 150px; color: var(--muted); font-size: 9px; line-height: 1.4; text-align: right; }
.service-chat-messages { display: flex; flex-direction: column; gap: 12px; height: clamp(230px, 32vh, 330px); overflow-y: auto; padding: 16px 13px; background: #f3f6f4; scroll-behavior: smooth; }
.service-chat-empty { display: grid; justify-items: center; gap: 9px; margin: auto; color: var(--muted); font-size: 12px; line-height: 1.6; text-align: center; }
.service-chat-empty > span { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #d8e1db; border-radius: 7px; background: white; }
.service-chat-empty img { width: 21px; height: 21px; opacity: .64; }
.service-chat-empty strong { color: #536059; font-size: 12px; }
.service-chat-row { display: flex; align-items: flex-end; gap: 7px; width: 100%; }
.service-chat-row.from-visitor { justify-content: flex-end; }
.service-chat-avatar { display: grid; flex: 0 0 26px; place-items: center; width: 26px; height: 26px; border: 1px solid #d6dfd9; border-radius: 6px; background: #fff; color: #68736c; font-size: 9px; font-weight: 800; }
.service-chat-avatar img { width: 14px; height: 14px; opacity: .72; }
.service-chat-row.from-visitor .service-chat-avatar { border-color: #c7d7ce; background: #e7f1eb; color: #176b48; }
.service-chat-message { width: fit-content; max-width: calc(84% - 33px); padding: 9px 11px; border: 1px solid #d7dfda; border-radius: 4px 7px 7px; background: #fff; box-shadow: 0 2px 7px rgba(35, 53, 42, .05); }
.service-chat-row.from-visitor .service-chat-message { border-color: #176b48; border-radius: 7px 4px 7px 7px; background: #176b48; color: #fff; box-shadow: 0 3px 9px rgba(23, 107, 72, .14); }
.service-chat-message p { margin: 0; font-size: 13px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.service-chat-message small { display: block; margin-top: 5px; color: var(--muted); font-size: 9px; }
.service-chat-row.from-visitor .service-chat-message small { color: rgba(255, 255, 255, .72); text-align: right; }
.service-chat-form { display: grid; grid-template-columns: minmax(0, 1fr) 72px; align-items: end; gap: 8px; padding: 10px; border-top: 1px solid var(--line); background: #fff; }
.service-chat-input { position: relative; min-width: 0; }
.service-chat-form textarea { display: block; width: 100%; min-width: 0; min-height: 58px; max-height: 120px; box-sizing: border-box; resize: none; border: 1px solid #cbd3ce; border-radius: 6px; background: #fbfcfb; padding: 9px 10px 22px; font: inherit; line-height: 1.45; }
.service-chat-form textarea:focus { border-color: #79a18d; outline: 3px solid rgba(23, 107, 72, .12); background: #fff; }
.service-chat-input > span { position: absolute; right: 8px; bottom: 5px; color: #909a94; font-size: 9px; pointer-events: none; }
.service-chat-form button { min-height: 42px; border: 0; border-radius: 6px; background: var(--brand); color: #fff; font-weight: 800; white-space: nowrap; }
.service-chat-form button:disabled { opacity: .55; }
.service-chat-header-actions { display: flex; align-items: center; gap: 8px; }
.service-chat-close { display: grid; flex: 0 0 34px; place-items: center; width: 34px; height: 34px; border: 1px solid #d7dfda; border-radius: 50%; background: #fff; color: #4e5952; font-size: 22px; line-height: 1; }
.service-chat-close:hover { border-color: #b7c5bc; background: #f3f6f4; }
.support-launcher { position: fixed; z-index: 29; right: max(10px, calc((100vw - 540px) / 2 + 10px)); bottom: max(132px, calc(env(safe-area-inset-bottom) + 126px)); display: grid; grid-template-rows: 25px 12px; place-items: center; width: 56px; height: 56px; padding: 7px 0 5px; border: 1px solid rgba(123, 19, 25, .28); border-radius: 50%; background: var(--brand); color: #fff; box-shadow: 0 9px 24px rgba(89, 18, 22, .25); cursor: grab; touch-action: none; user-select: none; transition: opacity .16s ease, transform .16s ease, box-shadow .16s ease, left .18s ease, top .18s ease; }
.support-launcher:hover { box-shadow: 0 11px 28px rgba(89, 18, 22, .32); transform: translateY(-1px); }
.support-launcher.is-dragging { cursor: grabbing; transform: scale(1.04); box-shadow: 0 14px 32px rgba(89, 18, 22, .32); transition: none; }
.support-launcher:focus-visible { outline: 3px solid rgba(153, 27, 27, .22); outline-offset: 3px; }
.support-launcher img { width: 24px; height: 24px; filter: brightness(0) invert(1); }
.support-launcher > span { font-size: 9px; line-height: 12px; font-weight: 850; }
.support-launcher > b { position: absolute; top: -4px; right: -4px; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border: 2px solid #fff; border-radius: 10px; background: #d93025; color: #fff; font-size: 9px; line-height: 16px; font-weight: 850; }
.support-launcher > b[hidden] { display: none; }
.support-launcher.is-collapsed { right: 0; display: grid; grid-template-rows: 1fr; width: 34px; height: 72px; padding: 9px 7px; border-right: 0; border-radius: 8px 0 0 8px; box-shadow: 0 8px 20px rgba(89, 18, 22, .22); transform: none; }
.support-launcher.is-collapsed[data-side="left"] { border-right: 1px solid rgba(123, 19, 25, .28); border-left: 0; border-radius: 0 8px 8px 0; }
.support-launcher.is-collapsed img { display: none; }
.support-launcher.is-collapsed > span { writing-mode: vertical-rl; text-orientation: upright; font-size: 14px; line-height: 18px; letter-spacing: 4px; }
.support-launcher.is-collapsed:hover { transform: none; box-shadow: 0 10px 24px rgba(89, 18, 22, .3); }
.support-launcher.is-collapsed > b { right: auto; left: -9px; }
.support-launcher.is-collapsed[data-side="left"] > b { right: -9px; left: auto; }
body.support-chat-open .support-launcher { pointer-events: none; opacity: 0; transform: translateY(8px); }
.support-float[hidden] { display: none; }
.support-float { position: fixed; z-index: 35; inset: 0; pointer-events: none; }
.support-float-backdrop { position: absolute; inset: 0; pointer-events: auto; }
.support-float-panel { position: absolute; right: max(10px, calc((100vw - 540px) / 2 + 10px)); bottom: max(74px, calc(env(safe-area-inset-bottom) + 68px)); width: min(390px, calc(100vw - 20px)); overflow: hidden; border: 1px solid #c8d3cc; border-radius: 8px; background: #fff; box-shadow: 0 22px 60px rgba(17, 34, 24, .24); pointer-events: auto; }
.support-float-panel .service-chat { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-height: calc(100dvh - 96px); border: 0; border-radius: 0; box-shadow: none; }
.support-float-panel .service-chat-messages { height: min(48vh, 360px); min-height: 230px; }
.service-faq details { border-top: 1px solid var(--line); }
.service-faq summary { padding: 14px 2px; cursor: pointer; font-size: 14px; font-weight: 700; }
.service-faq details p { margin: -2px 2px 14px; color: var(--muted); font-size: 12px; line-height: 1.7; }

.app.prediction-page { min-height: 0; padding: 0; }
.prediction-page .v2n-shell { width: min(100%, 540px); margin: 0 auto; padding: 20px 20px 112px; color: var(--text); font-size: 14px; line-height: 1.5; }
.prediction-page .v2n-shell button,
.prediction-page .v2n-shell input,
.prediction-page .v2n-shell a,
.prediction-page .v2n-bottom-nav a { min-height: 44px; }
.prediction-page .v2n-appbar { margin-bottom: 10px; }
.prediction-page .v2n-brand { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; color: var(--text); text-decoration: none; }
.prediction-page .v2n-brand span { padding: 0 5px; border-radius: 4px; background: #b91c1c; color: #fff; font-size: 25px; line-height: 1.3; font-weight: 900; }
.prediction-page .v2n-brand strong { font-size: 24px; }
.prediction-page .v2n-tagline { margin: 0 0 4px; color: #d52c2c; font-size: 13px; font-weight: 700; }
.prediction-page .v2n-page-title { margin: 8px 0 0; font-size: 36px; line-height: 1.2; }
.prediction-page .v2n-page-title:empty { display: none; }
.prediction-page .v2n-page-date { margin: 2px 0 0; color: var(--muted); }
.prediction-page .v2n-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.prediction-page .v2n-date-control { display: grid; grid-template-columns: minmax(0, 1fr) 108px; width: 100%; margin-bottom: 5px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); overflow: hidden; }
.prediction-page .v2n-date-control input,
.prediction-page .v2n-date-control button { min-width: 0; padding: 10px 16px; border: 0; background: var(--surface); }
.prediction-page .v2n-date-control button { border-left: 1px solid var(--line); font-weight: 750; }
.prediction-page .v2n-poster-download[hidden] { display: none; }
.prediction-page .v2n-poster-download { margin: 8px 0; text-align: center; }
.prediction-page .v2n-poster-download a { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 5px 10px; border-radius: 5px; background: var(--brand); color: #fff; font-size: 13px; line-height: 20px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.prediction-page .v2n-status { min-height: 0; }
.prediction-page .v2n-status:empty { display: none; }
.prediction-page .v2n-detail > section,
.prediction-page .v2n-pool,
.prediction-page .v2n-state { margin-bottom: 14px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); overflow: hidden; }
.prediction-page .v2n-back-link { display: inline-flex; align-items: center; margin-bottom: 10px; color: var(--brand); text-decoration: none; }
.prediction-page .v2n-detail-hero { padding: 12px; }
.prediction-page .v2n-detail-hero .v2n-match-code { margin: 0 0 5px; color: var(--brand); font-size: 13px; font-weight: 800; }
.prediction-page .v2n-detail-hero h1 { margin: 4px 0; font-size: 20px; }
.prediction-page .v2n-detail-hero h1.v2n-detail-teams { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; margin: 0; font-size: 23px; line-height: 1.35; text-align: center; }
.prediction-page .v2n-detail-team-name { min-width: 0; overflow-wrap: anywhere; }
.prediction-page .v2n-detail-vs { color: #a8afb8; font-size: 18px; font-weight: 600; }
.prediction-page .v2n-detail-hero .v2n-match-meta { margin: 6px 0; color: var(--muted); font-size: 12px; }
.prediction-page .v2n-tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0; }
.prediction-page .v2n-tag { display: inline-flex; align-items: center; min-height: 24px; padding: 1px 7px; border: 1px solid var(--brand); border-radius: 5px; color: var(--brand); font-size: 12px; font-weight: 750; }
.prediction-page .v2n-official-wdl { display: grid; gap: 6px; }
.prediction-page .v2n-official-wdl-title { margin: 0; color: var(--muted); font-size: 12px; font-weight: 750; }
.prediction-page .v2n-detail-probabilities { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.prediction-page .v2n-probability { display: grid; gap: 3px; padding: 8px 4px; border-left: 1px solid var(--line); font-size: 12px; text-align: center; }
.prediction-page .v2n-probability:first-child { border-left: 0; }
.prediction-page .v2n-probability span { color: var(--muted); }
.prediction-page .v2n-probability strong { font-size: 19px; }
.prediction-page .v2n-probability.is-best { background: var(--brand); color: #fff; }
.prediction-page .v2n-detail-section > h2 { margin: 0; padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 17px; }
.prediction-page .v2n-detail-core > h2 { padding: 10px 12px; font-size: 16px; }
.prediction-page .v2n-card-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 10px 12px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.prediction-page .v2n-card-metric { display: grid; gap: 3px; min-height: 60px; padding: 8px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.prediction-page .v2n-card-metric span { color: var(--muted); font-size: 12px; }
.prediction-page .v2n-card-metric strong { font-size: 13px; }
.prediction-page .v2n-detail-opinion .v2n-opinion-commentary { margin: 0; padding: 12px 16px; color: #323a35; font-size: 14px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
.prediction-page .v2n-score-box { display: grid; grid-column: 1 / -1; gap: 9px; padding: 12px; }
.prediction-page .v2n-score-box > span:first-child { color: #d52c2c; font-size: 16px; }
.prediction-page .v2n-formal-score { font-weight: 900; }
.prediction-page .v2n-score-candidates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); color: var(--brand); text-align: center; }
.prediction-page .v2n-score-candidates .v2n-formal-score { display: grid; align-content: start; gap: 5px; min-width: 0; padding: 4px 6px 6px; border-right: 1px solid var(--line); }
.prediction-page .v2n-score-candidates .v2n-formal-score:last-child { border-right: 0; }
.prediction-page .v2n-score-rank { color: var(--muted); font-size: 12px; font-weight: 400; }
.prediction-page .v2n-score-value { font-size: 27px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.prediction-page .v2n-score-note { font-size: 12px; line-height: 1.5; font-weight: 500; overflow-wrap: anywhere; }
.prediction-page .v2n-pool > summary { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 10px 16px; background: #fff0ed; color: #9c3329; font-weight: 800; text-align: center; cursor: pointer; }
.prediction-page .v2n-pool > summary strong { font-weight: 900; }
.prediction-page .v2n-pool-table-wrap { margin: 0 16px 16px; overflow: auto; border: 1px solid var(--line); }
.prediction-page .v2n-pool-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 12px; }
.prediction-page .v2n-pool-table th,
.prediction-page .v2n-pool-table td { padding: 8px 9px; border-bottom: 1px solid var(--line); text-align: left; }
.prediction-page .v2n-pool-table th { background: var(--bg); }
.prediction-page .v2n-kimi-research { display: grid; gap: 8px; margin: 12px 16px 14px; padding: 13px; border: 1px solid var(--line); border-radius: 6px; background: #fff7f7; }
.prediction-page .v2n-kimi-research > h2 { margin: 0 0 2px; font-size: 17px; }
.prediction-page .v2n-kimi-research p,
.prediction-page .v2n-kimi-research ul { margin: 0; }
.prediction-page .v2n-kimi-recommendation { color: var(--brand); font-size: 16px; }
.prediction-page .v2n-kimi-recommendation { display: flex; align-items: start; gap: 10px; }
.prediction-page .v2n-recommendation-event,
.prediction-page .v2n-recommendation-price { min-width: 0; overflow-wrap: anywhere; }
.prediction-page .v2n-recommendation-price { margin-left: auto; text-align: right; font-variant-numeric: tabular-nums; }
.prediction-page .v2n-kimi-frozen,
.prediction-page .v2n-kimi-counter { color: var(--muted); }
.prediction-page .v2n-kimi-risks { padding-left: 20px; }
.prediction-page .v2n-state { padding: 20px; text-align: center; }
.prediction-page .v2n-state h2,
.prediction-page .v2n-state p { margin: 0; }
.prediction-page .v2n-state p { color: var(--muted); }
.prediction-page .v2n-state-action { margin-top: 12px; padding: 0 20px; border: 0; border-radius: 5px; background: #080a09; color: #fff; font-weight: 800; }
.prediction-page .v2n-disclaimer { margin: 28px 0 0; padding: 14px; border-top: 1px solid var(--line); color: var(--muted); text-align: center; }
.prediction-page .v2n-bottom-nav { position: fixed; z-index: 20; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 4px max(12px, calc((100% - 540px) / 2)); border-top: 1px solid var(--line); background: rgba(255, 255, 255, .97); }
.prediction-page .v2n-bottom-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; padding: 2px 0; color: var(--muted); font-size: 12px; text-align: center; text-decoration: none; }
.prediction-page .v2n-bottom-nav a > span:last-child { white-space: nowrap; }
.prediction-page .v2n-bottom-nav img { width: 20px; height: 20px; opacity: .62; }
.prediction-page .v2n-bottom-nav a.active { color: var(--brand); font-weight: 800; }
.prediction-page .v2n-bottom-nav a.active img { opacity: 1; }
.prediction-page .v2n-nav-icon { display: grid; place-items: center; width: 20px; height: 20px; font-size: 20px; line-height: 1; }

@media (max-width: 760px) {
  .prediction-page .v2n-shell { padding: 16px 14px 106px; }
  .prediction-page .v2n-card-metrics { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 360px) {
  .prediction-page .v2n-date-control { grid-template-columns: 1fr 102px; }
  .prediction-page .v2n-card-metrics { grid-template-columns: 1fr; }
  .prediction-page .v2n-kimi-research { margin: 10px 12px; }
}

/* Current-origin detail layout. Keep it route-scoped so prediction cards retain their compact layout. */
body.v2n-detail-page {
  --bg: #f7f8fa;
  --surface: #fff;
  --line: #e6e9ed;
  --text: #141b26;
  --muted: #626c78;
  --brand: #981c28;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  line-height: 1.5;
}
body.v2n-detail-page .app-shell,
body.v2n-detail-page .app.prediction-page { background: var(--bg); }
body.v2n-detail-page .app.prediction-page { width: min(100%, 640px); }
body.v2n-detail-page .prediction-page .v2n-shell { width: min(100%, 540px); padding: 18px 16px 88px; color: var(--text); }
body.v2n-detail-page .prediction-page .v2n-appbar { margin-bottom: 12px; }
body.v2n-detail-page .prediction-page .v2n-tagline { color: var(--muted); font-weight: 500; }
body.v2n-detail-page .prediction-page .v2n-date-control { margin-bottom: 6px; }
body.v2n-detail-page .prediction-page .v2n-status { color: var(--muted); font-size: 13px; }
body.v2n-detail-page .prediction-page .v2n-back-link { min-height: 44px; margin-bottom: 14px; font-size: 14px; }
body.v2n-detail-page .prediction-page .v2n-detail > section {
  margin: 0 0 14px;
  padding: 14px;
  border: 0;
  border-radius: 5px;
  background: var(--surface);
  overflow: visible;
}
body.v2n-detail-page .prediction-page .v2n-detail .v2n-detail-hero { padding: 16px 14px; }
body.v2n-detail-page .prediction-page .v2n-detail-hero .v2n-match-code { margin: 0 0 10px; font-size: 14px; }
body.v2n-detail-page .prediction-page .v2n-detail-hero h1.v2n-detail-teams {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 23px;
  line-height: 1.35;
  text-align: center;
}
body.v2n-detail-page .prediction-page .v2n-detail-team-name { min-width: 0; overflow-wrap: anywhere; }
body.v2n-detail-page .prediction-page .v2n-detail-vs { color: #a8afb8; font-size: 18px; font-weight: 600; }
body.v2n-detail-page .prediction-page .v2n-detail-hero .v2n-match-meta { margin: 8px 0 0; text-align: center; font-size: 12px; }
body.v2n-detail-page .prediction-page .v2n-detail-hero .v2n-tags { justify-content: center; gap: 8px; padding: 14px 12px 12px; }
body.v2n-detail-page .prediction-page .v2n-detail-hero .v2n-tag {
  flex: 1 1 auto;
  justify-content: center;
  min-height: 30px;
  padding: 4px 10px;
  border-color: #c78189;
  color: var(--brand);
  font-size: 13px;
}
body.v2n-detail-page .prediction-page .v2n-detail-hero .v2n-official-wdl { gap: 10px; }
body.v2n-detail-page .prediction-page .v2n-detail-hero .v2n-official-wdl-title { margin: 0; text-align: center; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
body.v2n-detail-page .prediction-page .v2n-detail-hero .v2n-detail-probabilities { margin: 0; border-radius: 4px; }
body.v2n-detail-page .prediction-page .v2n-detail-hero .v2n-probability { gap: 4px; padding: 10px 6px; font-size: 13px; font-variant-numeric: tabular-nums; }
body.v2n-detail-page .prediction-page .v2n-detail-hero .v2n-probability strong { font-size: 24px; line-height: 1.3; }
body.v2n-detail-page .prediction-page .v2n-detail .v2n-probability.is-best { background: var(--brand); color: #fff; }
body.v2n-detail-page .prediction-page .v2n-detail .v2n-probability.is-best span { color: #fff; }
body.v2n-detail-page .prediction-page .v2n-detail-section > h2,
body.v2n-detail-page .prediction-page .v2n-detail .v2n-kimi-research > h2 {
  margin: 0 0 12px;
  padding: 0 0 0 10px;
  border: 0;
  border-left: 4px solid var(--brand);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.35;
}
body.v2n-detail-page .prediction-page .v2n-detail-core .v2n-card-metrics { grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0; border-radius: 4px; }
body.v2n-detail-page .prediction-page .v2n-detail-core .v2n-card-metric {
  grid-column: span 2;
  align-content: start;
  gap: 6px;
  min-width: 0;
  min-height: 86px;
  padding: 10px;
  border: 0;
}
body.v2n-detail-page .prediction-page .v2n-detail-core .v2n-card-metric:nth-child(-n+2) { grid-column: span 3; border-bottom: 1px solid var(--line); }
body.v2n-detail-page .prediction-page .v2n-detail-core .v2n-card-metric:nth-child(1),
body.v2n-detail-page .prediction-page .v2n-detail-core .v2n-card-metric:nth-child(4),
body.v2n-detail-page .prediction-page .v2n-detail-core .v2n-card-metric:nth-child(5) { border-right: 1px solid var(--line); }
body.v2n-detail-page .prediction-page .v2n-detail-core .v2n-card-metric:nth-child(3) { grid-column: 1 / -1; min-height: 0; border-bottom: 1px solid var(--line); }
body.v2n-detail-page .prediction-page .v2n-detail-core .v2n-card-metric span { font-size: 12px; }
body.v2n-detail-page .prediction-page .v2n-detail-core .v2n-card-metric strong { font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
body.v2n-detail-page .prediction-page .v2n-detail-opinion .v2n-opinion-commentary { margin: 0; padding: 0; font-size: 14px; line-height: 1.85; }
body.v2n-detail-page .prediction-page .v2n-detail .v2n-score-box { padding: 0; }
body.v2n-detail-page .prediction-page .v2n-detail .v2n-score-candidates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); color: var(--brand); text-align: center; }
body.v2n-detail-page .prediction-page .v2n-detail .v2n-formal-score { display: grid; align-content: start; gap: 5px; min-width: 0; padding: 4px 6px 6px; border-right: 1px solid var(--line); }
body.v2n-detail-page .prediction-page .v2n-detail .v2n-formal-score:last-child { border-right: 0; }
body.v2n-detail-page .prediction-page .v2n-detail .v2n-score-rank { color: var(--muted); font-size: 12px; font-weight: 400; }
body.v2n-detail-page .prediction-page .v2n-detail .v2n-score-value { font-size: 27px; line-height: 1.2; font-variant-numeric: tabular-nums; }
body.v2n-detail-page .prediction-page .v2n-detail .v2n-score-note { font-size: 12px; font-weight: 500; line-height: 1.5; overflow-wrap: anywhere; }
body.v2n-detail-page .prediction-page .v2n-detail > section.v2n-detail-scores { margin-bottom: 0; padding-bottom: 10px; border-radius: 5px 5px 0 0; }
body.v2n-detail-page .prediction-page .v2n-detail .v2n-pool {
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: var(--surface);
  overflow: hidden;
}
body.v2n-detail-page .prediction-page .v2n-detail .v2n-detail-scores + .v2n-pool { padding: 0 14px 14px; border-radius: 0 0 5px 5px; }
body.v2n-detail-page .prediction-page .v2n-detail .v2n-pool > summary {
  display: list-item;
  min-height: 48px;
  padding: 12px 14px;
  background: #fff1f2;
  color: var(--brand);
  list-style-position: inside;
  text-align: left;
  font-size: 14px;
}
body.v2n-detail-page .prediction-page .v2n-detail .v2n-pool .v2n-note { padding: 0 14px; line-height: 1.7; }
body.v2n-detail-page .prediction-page .v2n-detail .v2n-pool-table-wrap { margin: 0 14px 14px; }
body.v2n-detail-page .prediction-page .v2n-detail .v2n-kimi-research { gap: 7px; margin: 0 0 14px; background: var(--surface); font-size: 14px; line-height: 1.8; overflow-wrap: anywhere; }
body.v2n-detail-page .prediction-page .v2n-detail .v2n-kimi-research > h2 { margin-bottom: 0; }
body.v2n-detail-page .prediction-page .v2n-detail .v2n-kimi-recommendation {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0;
  padding: 8px 10px;
  background: #fff2f3;
  color: var(--brand);
  font-size: 14px;
  line-height: 1.7;
}
body.v2n-detail-page .prediction-page .v2n-detail .v2n-kimi-frozen { font-size: 12px; line-height: 1.5; }
body.v2n-detail-page .prediction-page .v2n-detail .v2n-kimi-counter { color: var(--muted); }
body.v2n-detail-page .prediction-page .v2n-detail .v2n-kimi-risks { display: grid; gap: 6px; padding-left: 20px; }
body.v2n-detail-page .prediction-page .v2n-disclaimer { margin: 18px 0 0; padding: 12px 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
body.v2n-detail-page .prediction-page .v2n-bottom-nav { line-height: 1.5; }

@media (max-width: 360px) {
  body.v2n-detail-page .prediction-page .v2n-shell { padding-right: 12px; padding-left: 12px; }
  body.v2n-detail-page .prediction-page .v2n-detail-hero h1.v2n-detail-teams { gap: 8px; font-size: 21px; }
  body.v2n-detail-page .prediction-page .v2n-detail-core .v2n-card-metric { padding: 9px 8px; }
  body.v2n-detail-page .prediction-page .v2n-detail .v2n-score-note { font-size: 11px; }
}

@media (min-width: 700px) {
  body.v2n-detail-page .prediction-page .v2n-shell { width: min(100%, 640px); padding: 8px 20px 88px; }
  body.v2n-detail-page .prediction-page .v2n-brand span,
  body.v2n-detail-page .prediction-page .v2n-brand strong { font-size: 30px; }
  body.v2n-detail-page .prediction-page .v2n-tagline,
  body.v2n-detail-page .prediction-page .v2n-date-control { font-size: 16px; }
  body.v2n-detail-page .prediction-page .v2n-status { font-size: 15px; }
  body.v2n-detail-page .prediction-page .v2n-back-link { font-size: 16px; }
  body.v2n-detail-page .prediction-page .v2n-detail .v2n-detail-hero { padding: 16px; }
  body.v2n-detail-page .prediction-page .v2n-detail-hero .v2n-match-code { font-size: 20px; }
  body.v2n-detail-page .prediction-page .v2n-detail-hero h1.v2n-detail-teams { font-size: 32px; }
  body.v2n-detail-page .prediction-page .v2n-detail-vs { font-size: 23px; }
  body.v2n-detail-page .prediction-page .v2n-detail-hero .v2n-match-meta,
  body.v2n-detail-page .prediction-page .v2n-detail-hero .v2n-official-wdl-title { font-size: 16px; }
  body.v2n-detail-page .prediction-page .v2n-detail-hero .v2n-tag { min-height: 40px; font-size: 18px; }
  body.v2n-detail-page .prediction-page .v2n-detail-hero .v2n-probability { padding: 12px 8px; font-size: 16px; }
  body.v2n-detail-page .prediction-page .v2n-detail-hero .v2n-probability strong { font-size: 32px; }
  body.v2n-detail-page .prediction-page .v2n-detail-section > h2,
  body.v2n-detail-page .prediction-page .v2n-detail .v2n-kimi-research > h2 { font-size: 26px; }
  body.v2n-detail-page .prediction-page .v2n-detail-core .v2n-card-metric { min-height: 106px; padding: 12px; }
  body.v2n-detail-page .prediction-page .v2n-detail-core .v2n-card-metric span { font-size: 16px; }
  body.v2n-detail-page .prediction-page .v2n-detail-core .v2n-card-metric strong { font-size: 19px; }
  body.v2n-detail-page .prediction-page .v2n-detail-opinion .v2n-opinion-commentary { font-size: 18px; line-height: 1.65; }
  body.v2n-detail-page .prediction-page .v2n-detail .v2n-score-rank,
  body.v2n-detail-page .prediction-page .v2n-detail .v2n-score-note { font-size: 16px; }
  body.v2n-detail-page .prediction-page .v2n-detail .v2n-score-value { font-size: 34px; }
  body.v2n-detail-page .prediction-page .v2n-detail .v2n-pool > summary,
  body.v2n-detail-page .prediction-page .v2n-detail .v2n-kimi-research,
  body.v2n-detail-page .prediction-page .v2n-detail .v2n-kimi-recommendation { font-size: 18px; }
  body.v2n-detail-page .prediction-page .v2n-detail .v2n-kimi-research { line-height: 1.6; }
  body.v2n-detail-page .prediction-page .v2n-detail .v2n-kimi-frozen { font-size: 15px; }
  body.v2n-detail-page .prediction-page .v2n-disclaimer { font-size: 14px; }
}

@media (max-width: 340px) {
  .app[data-active="home"] .nav-item,
  .app[data-active="parlays"] .nav-item,
  .app[data-active="market"] .nav-item,
  .app[data-active="reviews"] .nav-item,
  .app[data-active="service"] .nav-item,
  .prediction-page .v2n-bottom-nav a { font-size: 11px; }
}
.nav-item.active img { opacity: 1; filter: invert(.15) sepia(.81) saturate(35.37) hue-rotate(351deg) brightness(.91) contrast(.91); }

.empty { padding: 28px 18px; color: var(--muted); background: var(--surface); border: 1px dashed var(--line); border-radius: 12px; text-align: center; }
.toast { position: fixed; z-index: 10; left: 50%; bottom: 92px; transform: translateX(-50%); padding: 9px 13px; border-radius: 99px; background: rgba(27,29,31,.9); color: #fff; font-size: 12px; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.toast.show { opacity: 1; }

body.membership-open { overflow: hidden; }
.membership-chip {
  position: fixed;
  z-index: 28;
  bottom: max(70px, calc(env(safe-area-inset-bottom) + 64px));
  right: max(10px, calc((100vw - 540px) / 2 + 10px));
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 12px;
  align-items: center;
  gap: 8px;
  min-width: 164px;
  min-height: 52px;
  padding: 7px 9px 7px 8px;
  border: 1px solid rgba(153, 27, 27, .24);
  border-radius: 8px;
  background: rgba(255, 255, 255, .96);
  color: var(--text);
  box-shadow: 0 8px 24px rgba(17, 23, 19, .13);
  text-align: left;
  backdrop-filter: blur(10px);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.membership-chip:hover { box-shadow: 0 10px 28px rgba(17, 23, 19, .17); transform: translateY(-1px); }
.membership-chip:focus-visible { outline: 3px solid rgba(153, 27, 27, .18); outline-offset: 2px; }
.membership-chip.is-static { grid-template-columns: 32px minmax(0, 1fr); cursor: default; }
.app > .membership-chip.is-static {
  position: relative;
  inset: auto;
  z-index: 2;
  width: auto;
  min-width: 0;
  min-height: 44px;
  margin: 8px 14px 0;
  padding: 5px 9px 5px 7px;
  border-color: #e3e8e5;
  background: #f8faf9;
  box-shadow: none;
  backdrop-filter: none;
}
.app > .membership-chip.is-static.state-member { border-color: #d5e8de; background: #f3f9f6; }
.membership-chip.is-static:hover { box-shadow: 0 8px 24px rgba(17, 23, 19, .13); transform: none; }
.app > .membership-chip.is-static:hover { box-shadow: none; }
.membership-chip-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 7px; background: var(--brand); color: #fff; font-size: 9px; line-height: 1; font-style: normal; font-weight: 900; }
.membership-chip-copy { display: grid; gap: 2px; min-width: 0; }
.membership-chip-label { color: #727c76; font-size: 9px; line-height: 12px; font-weight: 750; }
.membership-chip-time { display: flex; align-items: baseline; gap: 5px; color: var(--brand); font-size: 12px; line-height: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.membership-time-days { font-size: 15px; line-height: 16px; font-weight: 900; }
.membership-time-days small { margin-left: 1px; font-size: 9px; font-weight: 800; }
.membership-time-clock { font-size: 11px; font-weight: 850; }
.membership-chip-action { color: var(--brand); font-size: 12px; line-height: 16px; white-space: nowrap; }
.membership-chip-chevron { color: #a4aca7; font-size: 20px; line-height: 1; font-weight: 400; text-align: center; }
.membership-chip.state-member { border-color: rgba(31, 154, 107, .28); }
.membership-chip.state-member .membership-chip-icon { background: #16734f; }
.membership-chip.state-member .membership-chip-time { color: #16734f; }
.membership-chip.state-expired { border-color: rgba(153, 27, 27, .38); background: #fff9f9; }
.membership-chip.state-error { border-color: #c9ceca; }
.membership-chip.state-error .membership-chip-icon { background: #737b76; }
.membership-chip.state-error .membership-chip-action { color: #525a55; }

.premium-locked-view {
  display: grid;
  align-content: start;
  min-height: calc(100dvh - 250px);
  padding: 18px 0 34px;
}
.premium-lock-card {
  width: 100%;
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 16px;
  border: 1px solid #eceeed;
  border-right: 0;
  border-left: 0;
  border-radius: 0;
  background: #fff;
  color: var(--text);
  text-align: left;
  transition: background-color .16s ease;
}
.premium-lock-card:hover { background: #fff9f9; }
.premium-lock-card:active { background: #fff3f3; }
.premium-lock-card:focus-visible { outline: 3px solid rgba(197, 43, 52, .18); outline-offset: 2px; }
.premium-lock-icon {
  position: relative;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 5px;
  background: #e60000;
}
.premium-lock-icon::before {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 11px;
  height: 11px;
  border: 3px solid #fff;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  content: "";
  transform: translateX(-50%);
}
.premium-lock-icon::after {
  position: absolute;
  top: 18px;
  left: 50%;
  width: 17px;
  height: 14px;
  border-radius: 2px;
  background: #fff;
  content: "";
  transform: translateX(-50%);
}
.premium-lock-copy { display: grid; gap: 2px; min-width: 0; }
.premium-lock-copy strong { color: #f00000; font-size: 16px; line-height: 22px; font-weight: 800; }
.premium-lock-copy small { color: #8b8f8c; font-size: 13px; line-height: 18px; font-weight: 400; }
.app[data-active="matches"] .premium-locked-view { padding-top: 0; }
.app[data-active="matches"] .premium-lock-card { border-top: 0; }
.app.detail-page .premium-locked-view { min-height: calc(100dvh - 110px); }
.app.prediction-page .premium-locked-view { min-height: calc(100dvh - 290px); }

.premium-preview-title { padding-top: 2px; }
.premium-preview-list { display: grid; min-width: 0; background: #f4f5f4; }
.premium-preview-list .batch-heading { background: #fff; }
.premium-preview-list .group-heading { border-top: 1px solid var(--line); }
.premium-preview-list .premium-preview-card { border-bottom: 10px solid #f4f5f4; background: #fff; }
.premium-preview-list .premium-preview-card:last-child { border-bottom-width: 0; }
.premium-preview-card .match-row { grid-template-columns: 57px minmax(0, 1fr); cursor: default; }
.premium-preview-card .premium-lock-card { border-top: 1px solid var(--line); border-bottom: 0; }
.premium-preview-state { min-height: 132px; display: grid; place-items: center; margin: 0; padding: 24px; background: #fff; color: var(--muted); font-size: 13px; text-align: center; }
.detail-premium-preview { min-height: calc(100dvh - 100px); align-content: start; }
.prediction-page .premium-preview-list { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }

.membership-dialog[hidden] { display: none; }
.membership-dialog { position: fixed; z-index: 40; inset: 0; display: grid; align-items: end; justify-items: center; padding: 16px; }
.membership-backdrop { position: absolute; inset: 0; background: rgba(14, 20, 16, .58); backdrop-filter: blur(4px); }
.membership-panel {
  position: relative;
  width: min(100%, 500px);
  max-height: min(760px, calc(100dvh - 32px));
  overflow: auto;
  padding: 20px;
  border-radius: 8px 8px 4px 4px;
  background: #fff;
  box-shadow: 0 18px 60px rgba(12, 18, 14, .28);
}
.membership-panel header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.membership-panel header span { color: var(--brand); font-size: 10px; line-height: 14px; font-weight: 850; }
.membership-panel h2 { margin: 1px 0 0; font-size: 23px; line-height: 30px; }
.membership-close { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--text); font-size: 25px; line-height: 1; }
.membership-state { margin: 0 0 16px; padding: 11px 12px; border-left: 3px solid var(--brand); background: #fff5f5; color: #5c171b; font-size: 13px; line-height: 20px; }
.membership-state.state-member { border-color: var(--green); background: #effaf5; color: #155e43; }
.membership-state strong { font-variant-numeric: tabular-nums; }
.membership-account { display: grid; gap: 10px; margin: 0 0 16px; padding: 0 0 16px; border-bottom: 1px solid var(--line); }
.phone-auth-card { display: grid; gap: 11px; margin: 0 0 16px; padding: 14px; border: 1px solid #e0c76e; border-radius: 7px; background: #fffbee; }
.phone-auth-heading { display: grid; gap: 2px; }
.phone-auth-heading > span { color: #9b6b14; font-size: 10px; font-weight: 800; }
.phone-auth-heading > strong { color: #3f2e10; font-size: 16px; line-height: 22px; }
.phone-auth-heading > small { color: #806f49; font-size: 10px; line-height: 16px; }
.phone-auth-card label { display: grid; gap: 5px; min-width: 0; }
.phone-auth-card label > span { color: #746846; font-size: 10px; font-weight: 700; }
.phone-auth-card input { width: 100%; min-width: 0; height: 42px; padding: 0 11px; border: 1px solid #d7c88e; border-radius: 6px; outline: none; background: #fff; color: var(--text); font: inherit; font-size: 14px; }
.phone-auth-card input:focus { border-color: #b37a16; box-shadow: 0 0 0 2px rgba(179, 122, 22, .12); }
.phone-auth-card input:disabled { background: #f0eee7; color: #8b877b; }
.phone-code-row { display: grid; grid-template-columns: minmax(0, 1fr) 112px; gap: 8px; align-items: end; }
.phone-code-row button, .phone-verify-button { min-height: 42px; border: 1px solid #b37a16; border-radius: 6px; background: #fff; color: #865a0d; font-size: 12px; font-weight: 800; }
.phone-code-row button:disabled, .phone-verify-button:disabled { cursor: wait; opacity: .55; }
.phone-verify-button { width: 100%; background: #9b6810; color: #fff; }
.phone-auth-card .auth-message { min-height: 16px; margin: 0; }
.phone-auth-card.is-verified { grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; border-color: #b7d8c8; background: #f2fbf7; }
.phone-auth-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #187451; color: #fff; font-size: 18px; font-weight: 900; }
.phone-auth-card.is-verified > div:nth-child(2) { display: grid; gap: 1px; min-width: 0; }
.phone-auth-card.is-verified span, .phone-auth-card.is-verified small { color: #5b7569; font-size: 10px; }
.phone-auth-card.is-verified strong { color: #155e43; font-size: 15px; font-variant-numeric: tabular-nums; }
.phone-auth-card.is-verified > button { min-height: 34px; padding: 0 10px; border: 1px solid #b7d8c8; border-radius: 6px; background: white; color: #426456; font-size: 11px; }
.account-heading { display: grid; gap: 2px; }
.account-heading > span, .membership-account.signed-in > div > span { color: var(--text); font-size: 13px; line-height: 18px; font-weight: 800; }
.account-heading small, .membership-account.signed-in small { color: var(--muted); font-size: 10px; line-height: 16px; }
.membership-account label { display: grid; gap: 5px; min-width: 0; }
.membership-account label > span { color: var(--muted); font-size: 10px; line-height: 14px; font-weight: 700; }
.membership-account input { width: 100%; min-width: 0; height: 42px; padding: 0 11px; border: 1px solid #cfd4d0; border-radius: 6px; outline: none; background: #fff; color: var(--text); font: inherit; font-size: 14px; }
.membership-account input:focus { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(197, 43, 52, .11); }
.membership-account [hidden] { display: none !important; }
.auth-mode-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); height: 38px; padding: 3px; border: 1px solid var(--line); border-radius: 7px; background: #f4f6f4; }
.auth-mode-switch button { border: 0; border-radius: 5px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 750; }
.auth-mode-switch button.active { background: #fff; color: var(--brand); box-shadow: 0 1px 4px rgba(26, 38, 30, .12); }
.auth-login { min-height: 42px; border-radius: 6px; font-size: 12px; font-weight: 800; }
.auth-login:disabled, .membership-account.signed-in button:disabled { cursor: wait; opacity: .56; }
.auth-login { width: 100%; border: 1px solid var(--brand); background: var(--brand); color: #fff; }
.auth-message { min-height: 16px; margin: 0; color: var(--muted); font-size: 10px; line-height: 16px; }
.auth-message[data-kind="error"] { color: #a11c24; }
.auth-message[data-kind="success"] { color: #16734f; }
.membership-account.signed-in { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.membership-account.signed-in > div { display: grid; gap: 2px; min-width: 0; }
.membership-account.signed-in > div > strong { color: #155e43; font-size: 16px; line-height: 22px; }
.membership-account.signed-in .account-actions { display: flex; gap: 6px; }
.membership-account.signed-in .account-actions button { min-width: 58px; min-height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--muted); font-size: 12px; }
.membership-account.signed-in .password-change-form { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-top: 4px; }
.membership-account.signed-in .password-change-form .auth-login { grid-column: 1 / -1; }
.membership-account.signed-in .auth-message { grid-column: 1 / -1; }
.membership-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.membership-plans button { display: grid; gap: 4px; min-height: 70px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--text); text-align: left; }
.membership-plans button.selected { border-color: var(--brand); background: #fff7f7; box-shadow: inset 0 0 0 1px var(--brand); }
.membership-plans span { color: var(--muted); font-size: 12px; }
.membership-plans strong { font-size: 20px; line-height: 24px; }
.membership-payments { display: grid; border-top: 1px solid var(--line); }
.membership-payments > button { display: grid; grid-template-columns: 40px minmax(0, 1fr) 18px; align-items: center; gap: 10px; min-height: 58px; padding: 8px 4px; border-bottom: 1px solid var(--line); background: #fff; color: var(--text); text-align: left; }
.membership-payments > button:disabled { cursor: wait; opacity: .56; }
.membership-payments > button > span:nth-child(2) { display: grid; gap: 2px; font-size: 14px; font-weight: 750; }
.membership-payments small { color: var(--muted); font-size: 10px; font-weight: 500; }
.membership-payments b { color: #929a95; font-size: 22px; font-weight: 400; text-align: center; }
.membership-payment-unavailable { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0; border: 1px dashed #d8ddd9; border-radius: 7px; background: #f7f9f8; color: var(--muted); padding: 10px 12px; font-size: 12px; line-height: 1.5; }
.membership-payment-unavailable > span { min-width: 0; }
.membership-payment-unavailable > button { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 7px 11px; border: 1px solid #b9c8bf; border-radius: 6px; background: #fff; color: #17643f; font-size: 12px; font-weight: 800; }
.membership-payment-unavailable > button:hover { border-color: #8eaa9a; background: #f0f7f3; }
.membership-payment-unavailable > button img { width: 16px; height: 16px; }
.payment-provider-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 7px; color: #fff; font-size: 14px; font-weight: 900; }
.payment-provider-icon.wechat { background: #20ad5d; }
.payment-provider-icon.alipay { background: #1677ff; }
.payment-provider-icon.stripe { background: #30313d; }
.dev-activate { width: 100%; min-height: 42px; margin-top: 14px; border: 1px dashed #aeb5b0; border-radius: 6px; background: #f7f8f7; color: #3f4842; font-size: 12px; font-weight: 750; }
.payment-message { min-height: 20px; margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 20px; }
.payment-message[data-kind="error"] { color: #a11c24; }
.payment-message[data-kind="success"] { color: #16734f; }
.membership-note { margin: 5px 0 0; color: var(--muted); font-size: 10px; line-height: 16px; }

.app.membership-page-host { min-height: 100dvh; background: #fff7d6; }
.membership-dialog.locked {
  display: block;
  overflow: auto;
  padding: 0;
  background: #fff7d6;
}
.membership-dialog.locked[hidden] { display: none; }
.membership-dialog.locked .membership-backdrop { display: none; }
.membership-expired-panel {
  width: min(100%, 540px);
  min-height: calc(100dvh - 96px);
  max-height: none;
  margin: 96px auto 0;
  padding: 24px 18px max(28px, env(safe-area-inset-bottom));
  border-radius: 18px 18px 0 0;
  background: #4b3b2a;
  color: #fff0bd;
  box-shadow: 0 -10px 34px rgba(76, 54, 25, .16);
}
.membership-expired-header { align-items: center !important; justify-content: center !important; margin-bottom: 14px !important; text-align: center; }
.membership-expired-header > div { display: grid; gap: 1px; }
.membership-expired-header span { color: #d9bd70 !important; letter-spacing: 0; }
.membership-expired-header h2 { color: #fff1bd; font-size: 20px; }
.membership-expired-back {
  position: fixed;
  z-index: 42;
  top: max(22px, env(safe-area-inset-top));
  left: max(16px, calc((100vw - 540px) / 2 + 16px));
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: #9b5d16;
  font-size: 31px;
  line-height: 1;
}
.membership-expired-features { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 18px; color: #ffe8a4; font-size: 13px; font-weight: 750; }
.membership-expired-features span { position: relative; }
.membership-expired-features span:not(:first-child)::before { position: absolute; left: -10px; content: "•"; }
.membership-buyer { display: grid; justify-items: center; gap: 1px; margin-bottom: 14px; }
.membership-buyer span { color: #bda56d; font-size: 10px; }
.membership-buyer strong { color: #fff4b9; font-size: 30px; line-height: 36px; overflow-wrap: anywhere; }
.membership-buyer small { color: #bda56d; font-size: 10px; }
.membership-expired-panel .membership-state { margin-bottom: 14px; border: 1px solid rgba(255, 228, 143, .22); border-left-width: 3px; background: rgba(255, 247, 212, .08); color: #f5e5b5; }
.membership-expired-account .membership-account { margin-bottom: 16px; padding: 12px; border: 1px solid rgba(255, 232, 164, .24); border-radius: 7px; background: rgba(255, 255, 255, .06); }
.membership-expired-account .phone-auth-card { border-color: rgba(255, 232, 164, .34); background: rgba(255, 255, 255, .07); }
.membership-expired-account .phone-auth-heading > span,
.membership-expired-account .phone-auth-heading > strong { color: #fff0bd; }
.membership-expired-account .phone-auth-heading > small,
.membership-expired-account .phone-auth-card label > span { color: #cdbf9a; }
.membership-expired-account .phone-auth-card input { border-color: rgba(255, 232, 164, .34); background: #fffdf4; }
.membership-expired-account .phone-code-row button { border-color: #e1bd45; background: rgba(255, 255, 255, .08); color: #ffe49b; }
.membership-expired-account .phone-verify-button { border-color: #f3cf46; background: #f3cf46; color: #5d3b0b; }
.membership-expired-account .phone-auth-card.is-verified { border-color: rgba(163, 224, 193, .34); background: rgba(58, 126, 91, .18); }
.membership-expired-account .phone-auth-card.is-verified strong { color: #d6ffe7; }
.membership-expired-account .phone-auth-card.is-verified span,
.membership-expired-account .phone-auth-card.is-verified small { color: #b9d8c7; }
.membership-expired-account .phone-auth-card.is-verified > button { border-color: rgba(193, 229, 211, .35); background: rgba(255, 255, 255, .08); color: #d6ffe7; }
.membership-expired-account .account-heading > span,
.membership-expired-account .membership-account.signed-in > div > span { color: #fff0bd; }
.membership-expired-account .account-heading small,
.membership-expired-account .membership-account.signed-in small,
.membership-expired-account .membership-account label > span { color: #cdbf9a; }
.membership-expired-account .membership-account input { border-color: rgba(255, 232, 164, .34); background: #fffdf4; }
.membership-expired-account .auth-mode-switch { border-color: rgba(255, 232, 164, .28); background: rgba(0, 0, 0, .14); }
.membership-expired-account .auth-mode-switch button { color: #cfbf92; }
.membership-expired-account .auth-mode-switch button.active { background: #fff3c3; color: #7d3c22; }
.membership-expired-account .auth-login { border-color: #f3cf46; background: #f3cf46; color: #5d3b0b; }
.membership-expired-account .membership-account.signed-in > div > strong { color: #fff4b9; }
.membership-expired-account .membership-account.signed-in .account-actions button { border-color: rgba(255, 232, 164, .3); background: rgba(255, 255, 255, .08); color: #f7e8bb; }
.membership-spec-title { display: grid; grid-template-columns: minmax(30px, 86px) auto minmax(30px, 86px); align-items: center; justify-content: center; gap: 10px; margin: 10px 0 14px; color: #ddc784; }
.membership-spec-title span { height: 1px; background: rgba(255, 232, 164, .35); }
.membership-spec-title strong { font-size: 13px; font-weight: 650; }
.membership-expired-plans { grid-template-columns: repeat(auto-fit, minmax(122px, 1fr)); gap: 10px; margin-bottom: 18px; }
.membership-expired-plans button { position: relative; min-height: 112px; align-content: center; justify-items: center; gap: 8px; padding: 16px 9px 12px; border-color: rgba(255, 232, 164, .48); background: transparent; color: #fff0bd; text-align: center; }
.membership-expired-plans button > small { position: absolute; top: 0; left: 0; padding: 4px 7px; border-radius: 5px 0 5px 0; background: #d5bd71; color: #fff9dc; font-size: 10px; font-weight: 750; }
.membership-expired-plans button > span { color: #f5e6b9; font-size: 13px; }
.membership-expired-plans button > strong { color: #ffd927; font-size: 24px; }
.membership-expired-plans button.selected { border-color: #d5aa54; background: #742b28; box-shadow: inset 0 0 0 1px #d5aa54; }
.membership-purchase-primary { width: calc(100% - 36px); min-height: 54px; margin: 0 18px 16px; border: 0; border-radius: 27px; background: #ffd923; color: #6a4209; font-size: 18px; font-weight: 900; }
.membership-purchase-primary:disabled { opacity: .45; }
.membership-payment-chooser { margin: 0 0 14px; padding: 12px; border: 1px solid rgba(255, 232, 164, .24); border-radius: 7px; background: rgba(255, 255, 255, .06); }
.membership-payment-chooser[hidden] { display: none; }
.membership-payment-chooser h3 { margin: 0 0 8px; color: #fff0bd; font-size: 14px; }
.membership-payment-chooser .membership-payments { border-top-color: rgba(255, 232, 164, .24); }
.membership-payment-chooser .membership-payments > button { border-bottom-color: rgba(255, 232, 164, .18); background: transparent; color: #fff0bd; }
.membership-payment-chooser .membership-payments small { color: #cdbf9a; }
.membership-payment-chooser .membership-payments b { color: #d8c78e; }
.membership-payment-chooser .membership-payment-unavailable { border-color: rgba(255, 232, 164, .28); background: rgba(255, 255, 255, .05); color: #d8c99e; }
.membership-payment-chooser .membership-payment-unavailable > button { border-color: rgba(255, 217, 35, .72); background: rgba(255, 255, 255, .05); color: #ffe68a; }
.membership-payment-chooser .membership-payment-unavailable > button:hover { background: rgba(255, 217, 35, .12); }
.membership-payment-chooser .membership-payment-unavailable > button img { filter: sepia(1) saturate(2.2) brightness(1.2); }
.membership-expired-panel .dev-activate { border-color: rgba(255, 232, 164, .38); background: rgba(255, 255, 255, .06); color: #f5e5b5; }
.membership-expired-panel .payment-message { color: #d8c99e; text-align: center; }
.membership-expired-panel .payment-message[data-kind="error"] { color: #ffb8b8; }
.membership-expired-panel .payment-message[data-kind="success"] { color: #aee8c9; }
.membership-expired-panel .membership-note { color: #a99a74; text-align: center; }
.membership-empty-plans { color: #d8c99e; text-align: center; }
body.membership-open .support-launcher { z-index: 42; }
body.membership-open .support-float { z-index: 45; }

@media (min-width: 700px) {
  .membership-dialog { align-items: center; }
  .membership-panel { border-radius: 8px; }
}

@media (max-width: 420px) {
  .site-announcement { align-items: flex-start; flex-direction: column; gap: 7px; }
  .support-launcher { right: 8px; bottom: max(128px, calc(env(safe-area-inset-bottom) + 124px)); }
  .membership-chip:not(.is-static) { right: 8px; bottom: max(66px, calc(env(safe-area-inset-bottom) + 62px)); min-width: 156px; }
  .app > .membership-chip.is-static { margin-right: 10px; margin-left: 10px; }
  .membership-dialog { padding: 0; }
  .membership-panel { width: 100%; max-height: 92dvh; padding: 18px 16px max(18px, env(safe-area-inset-bottom)); border-radius: 8px 8px 0 0; }
  .membership-dialog.locked { padding: 0; }
  .membership-dialog.locked .membership-expired-panel { min-height: calc(100dvh - 88px); max-height: none; margin-top: 88px; padding: 22px 14px max(24px, env(safe-area-inset-bottom)); border-radius: 16px 16px 0 0; }
  .membership-expired-features { gap: 6px 13px; font-size: 12px; }
  .membership-expired-features span:not(:first-child)::before { left: -8px; }
  .membership-expired-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .membership-purchase-primary { width: calc(100% - 16px); margin-right: 8px; margin-left: 8px; }
  .membership-payment-unavailable { align-items: stretch; flex-direction: column; text-align: center; }
  .membership-payment-unavailable > button { width: 100%; }
  .membership-plans { grid-template-columns: 1fr 1fr; }
  .membership-account.signed-in { grid-template-columns: minmax(0, 1fr); }
  .membership-account.signed-in .account-actions { justify-content: flex-start; }
  .membership-account.signed-in .password-change-form { grid-template-columns: minmax(0, 1fr); }
  .membership-account.signed-in .password-change-form .auth-login { grid-column: auto; }
  .phone-code-row { grid-template-columns: minmax(0, 1fr) 104px; }
  .phone-auth-card.is-verified { grid-template-columns: 34px minmax(0, 1fr); }
  .phone-auth-card.is-verified > button { grid-column: 1 / -1; width: 100%; }
}

@media (max-width: 699px) {
  body.support-chat-open { overflow: hidden; }
  .support-float-backdrop { background: rgba(14, 20, 16, .48); backdrop-filter: blur(2px); }
  .support-float-panel { right: 0; bottom: 0; width: 100%; max-height: 88dvh; border-width: 1px 0 0; border-radius: 8px 8px 0 0; }
  .support-float-panel .service-chat { max-height: 88dvh; }
  .support-float-panel .service-chat-messages { height: min(55dvh, 430px); min-height: 230px; }
  .support-float-panel .service-chat-form { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
}