/* ============================================================ FootballTipster — DarkPro Theme All rules scoped to [data-theme="darkpro"] to prevent leakage ============================================================ */ [data-theme="darkpro"] { --dp-bg: #0b0d12; --dp-bg2: #11141c; --dp-surface: #161a25; --dp-surface2: #1c2130; --dp-line: #232838; --dp-line2: #2b3145; --dp-ink: #eef1f7; --dp-ink-dim: #aab2c5; --dp-ink-mute: #6f7891; --dp-accent: #56c7a0; /* mint green = ต่อ / win */ --dp-accent2: #e06b4e; /* warm red = รอง */ --dp-accent3: #e8c45a; /* gold = highlight */ --dp-accent4: #6e9ecc; /* steel blue = league */ --dp-radius: 14px; --dp-radius-sm: 8px; --dp-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 8px 30px rgba(0,0,0,.35); background: radial-gradient(1200px 600px at 80% -200px, rgba(86,199,160,.08), transparent 60%), radial-gradient(900px 500px at -10% 10%, rgba(110,158,204,.07), transparent 60%), var(--dp-bg); color: var(--dp-ink); font-family: 'IBM Plex Sans Thai', 'Sarabun', 'Kanit', system-ui, sans-serif; font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; min-height: 100vh; } [data-theme="darkpro"] *, [data-theme="darkpro"] *::before, [data-theme="darkpro"] *::after { box-sizing: border-box; } /* Reset browser default body margin (8px) so the topbar / subnav / bottom-nav can span the full viewport width without gaps along the edges. Note: data-theme="darkpro" is on the element, so we target its immediate child here. */ html[data-theme="darkpro"], html[data-theme="darkpro"] > body { margin: 0; padding: 0; overflow-x: hidden; } /* Reserve space for the fixed bottom navigation so content isn't hidden behind it (sized to match .dp-bottom-nav height). */ html[data-theme="darkpro"] > body { padding-bottom: 64px; } @media (max-width: 640px) { html[data-theme="darkpro"] > body { padding-bottom: 58px; } } [data-theme="darkpro"] a { color: inherit; text-decoration: none; } [data-theme="darkpro"] button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } /* ── Google Fonts import ── */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@300;400;500;600;700&display=swap'); /* ── Unified typography ── Force all darkpro elements to use IBM Plex Sans Thai regardless of per-rule font-family declarations elsewhere in this file. */ [data-theme="darkpro"], [data-theme="darkpro"] * { font-family: 'IBM Plex Sans Thai', 'Sarabun', 'Kanit', system-ui, sans-serif !important; } /* ── Container ── */ [data-theme="darkpro"] .dp-container { max-width: 1200px; margin-left: auto; margin-right: auto; padding: 0 32px; width: 100%; } @media (max-width: 1100px) { [data-theme="darkpro"] .dp-container { padding: 0 24px; } } @media (max-width: 700px) { [data-theme="darkpro"] .dp-container { padding: 0 16px; } } /* ══════════════════════════════════════ TOP BAR ══════════════════════════════════════ */ [data-theme="darkpro"] .dp-topbar { position: sticky; top: 0; z-index: 50; width: 100%; max-width: 100%; backdrop-filter: blur(14px); background: rgba(11,13,18,.82); border-bottom: 1px solid var(--dp-line); } [data-theme="darkpro"] .dp-topbar-inner { display: flex; align-items: center; gap: 20px; height: 64px; } /* Brand */ [data-theme="darkpro"] .dp-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; letter-spacing: -0.01em; flex-shrink: 0; color: var(--dp-ink); } [data-theme="darkpro"] .dp-brand-mark { width: 30px; height: 30px; border-radius: 9px; background: conic-gradient(from 220deg, var(--dp-accent) 0 25%, #0b0d12 0 50%, var(--dp-accent) 0 75%, #0b0d12 0); display: grid; place-items: center; box-shadow: inset 0 0 0 2px #0b0d12, 0 0 0 1px var(--dp-line2); position: relative; flex-shrink: 0; } [data-theme="darkpro"] .dp-brand-mark::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; border: 2px solid #0b0d12; } [data-theme="darkpro"] .dp-brand-text { line-height: 1; } [data-theme="darkpro"] .dp-brand-text small { color: var(--dp-ink-mute); font-weight: 500; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; display: block; line-height: 1; margin-top: 2px; } /* Main nav */ [data-theme="darkpro"] .dp-nav { display: flex; gap: 4px; margin-left: auto; flex-wrap: nowrap; } [data-theme="darkpro"] .dp-nav a { padding: 8px 14px; border-radius: 999px; color: var(--dp-ink-dim); font-size: 13.5px; transition: background .15s, color .15s; white-space: nowrap; font-weight: 500; } [data-theme="darkpro"] .dp-nav a:hover, [data-theme="darkpro"] .dp-nav a.active { background: var(--dp-surface); color: var(--dp-ink); } [data-theme="darkpro"] .dp-nav a.active { color: var(--dp-accent); background: rgba(86,199,160,.12); } /* Sub nav */ [data-theme="darkpro"] .dp-subnav { background: var(--dp-bg2); border-bottom: 1px solid var(--dp-line); } [data-theme="darkpro"] .dp-subnav-inner { display: flex; align-items: center; justify-content: center; gap: 4px; height: 44px; flex-wrap: wrap; } [data-theme="darkpro"] .dp-subnav-label { font-size: 12px; color: var(--dp-ink-mute); letter-spacing: .04em; margin-right: 8px; font-weight: 600; } [data-theme="darkpro"] .dp-subnav a { padding: 6px 12px; border-radius: 6px; color: var(--dp-ink-dim); font-size: 13px; transition: all .15s; white-space: nowrap; } [data-theme="darkpro"] .dp-subnav a:hover { color: var(--dp-ink); background: var(--dp-surface); } [data-theme="darkpro"] .dp-subnav a.active { color: var(--dp-accent); background: rgba(86,199,160,.12); font-weight: 600; } /* Sub-nav + bottom quick-nav: span full viewport (inner row not capped at 1200px) */ [data-theme="darkpro"] .dp-subnav, [data-theme="darkpro"] .dp-bottom-nav { width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; box-sizing: border-box; } [data-theme="darkpro"] .dp-subnav > .dp-container.dp-subnav-inner, [data-theme="darkpro"] .dp-bottom-nav > .dp-container { max-width: none; width: 100%; } /* (mobile nav handled in the Responsive section at the bottom of this file) */ /* ══════════════════════════════════════ HERO ══════════════════════════════════════ */ [data-theme="darkpro"] .dp-hero { padding: 48px 0 28px; } [data-theme="darkpro"] .dp-hero-eyebrow { color: var(--dp-accent); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; margin-bottom: 14px; } [data-theme="darkpro"] .dp-hero h1 { font-family: 'Inter Tight', system-ui, sans-serif; font-weight: 700; font-size: clamp(32px, 5vw, 56px); letter-spacing: -0.025em; line-height: 1.05; margin: 0 0 16px; color: var(--dp-ink); } [data-theme="darkpro"] .dp-hero h1 em { font-style: normal; color: var(--dp-accent); } [data-theme="darkpro"] .dp-hero-desc { color: var(--dp-ink-dim); max-width: 680px; font-size: 15px; margin-bottom: 24px; } [data-theme="darkpro"] .dp-hero-meta { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; } /* Quick stats bar placed above “4 เซียนล้มโต๊ะ” (not in hero) */ [data-theme="darkpro"] .dp-hero-meta.dp-meta-above-4zean { margin: 0 0 18px; padding: 14px 18px; background: var(--dp-surface); border: 1px solid var(--dp-line); border-radius: var(--dp-radius); } [data-theme="darkpro"] .dp-stat { display: flex; flex-direction: column; } [data-theme="darkpro"] .dp-stat-num { font-family: 'Inter Tight', sans-serif; font-weight: 700; font-size: 22px; letter-spacing: -0.02em; color: var(--dp-ink); } [data-theme="darkpro"] .dp-stat-lbl { color: var(--dp-ink-mute); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; } /* ── Highlight Banner ── */ [data-theme="darkpro"] .dp-highlight { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding: 18px 22px; background: linear-gradient(90deg, rgba(86,199,160,.1), transparent); border: 1px solid rgba(86,199,160,.3); border-radius: var(--dp-radius); margin-bottom: 24px; } [data-theme="darkpro"] .dp-highlight-ic { width: 44px; height: 44px; border-radius: 12px; background: rgba(86,199,160,.2); color: var(--dp-accent); display: grid; place-items: center; font-size: 22px; flex-shrink: 0; } [data-theme="darkpro"] .dp-highlight h4 { margin: 0; font-family: 'Inter Tight', sans-serif; font-size: 15px; color: var(--dp-ink); } [data-theme="darkpro"] .dp-highlight p { margin: 3px 0 0; color: var(--dp-ink-dim); font-size: 13px; } [data-theme="darkpro"] .dp-btn-primary { background: var(--dp-accent); color: #0b0d12; padding: 10px 20px; border-radius: 10px; font-weight: 700; font-size: 13.5px; letter-spacing: -0.01em; white-space: nowrap; transition: filter .15s; } [data-theme="darkpro"] .dp-btn-primary:hover { filter: brightness(1.08); } /* ══════════════════════════════════════ SECTION HEADER ══════════════════════════════════════ */ [data-theme="darkpro"] .dp-section { margin-top: 28px; margin-bottom: 48px; } [data-theme="darkpro"] .dp-section-head { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; } [data-theme="darkpro"] .dp-section-num { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--dp-ink-mute); padding-bottom: 3px; } [data-theme="darkpro"] .dp-section-title { font-family: 'Inter Tight', sans-serif; font-weight: 700; font-size: 22px; letter-spacing: -0.02em; line-height: 1.15; white-space: nowrap; color: var(--dp-ink); } [data-theme="darkpro"] .dp-section-sub { color: var(--dp-ink-dim); font-size: 13px; padding-bottom: 3px; } [data-theme="darkpro"] .dp-section-line { flex: 1; min-width: 20px; height: 1px; background: linear-gradient(to right, var(--dp-line), transparent); margin-bottom: 5px; } /* Date stepper (compact, in section head) */ [data-theme="darkpro"] .dp-date-nav { display: inline-flex; align-items: stretch; background: var(--dp-surface); border: 1px solid var(--dp-line); border-radius: 10px; overflow: hidden; font-size: 12px; } [data-theme="darkpro"] .dp-date-nav a, [data-theme="darkpro"] .dp-date-nav span { padding: 7px 12px; color: var(--dp-ink-dim); border-right: 1px solid var(--dp-line); transition: background .12s, color .12s; white-space: nowrap; display: flex; align-items: center; } [data-theme="darkpro"] .dp-date-nav a:last-child, [data-theme="darkpro"] .dp-date-nav span:last-child { border-right: 0; } [data-theme="darkpro"] .dp-date-nav a:hover { background: var(--dp-surface2); color: var(--dp-ink); } [data-theme="darkpro"] .dp-date-nav .dp-date-current { background: var(--dp-surface2); color: var(--dp-ink); font-weight: 600; border-left: 1px solid var(--dp-line); border-right: 1px solid var(--dp-line); } /* ══════════════════════════════════════ 4 ZEAN TABLE ══════════════════════════════════════ */ [data-theme="darkpro"] .dp-tipster-wrap { background: var(--dp-surface); border: 1px solid var(--dp-line); border-radius: 18px; overflow: hidden; box-shadow: var(--dp-shadow); } /* Filter tabs */ [data-theme="darkpro"] .dp-tabs { display: flex; gap: 6px; padding: 6px; background: var(--dp-surface); border-bottom: 1px solid var(--dp-line); flex-wrap: wrap; } [data-theme="darkpro"] .dp-tab { padding: 9px 15px; border-radius: 10px; color: var(--dp-ink-dim); font-size: 13px; font-weight: 500; transition: all .15s; cursor: pointer; } [data-theme="darkpro"] .dp-tab .dp-count { color: var(--dp-ink-mute); margin-left: 5px; font-size: 12px; } [data-theme="darkpro"] .dp-tab:hover { color: var(--dp-ink); } [data-theme="darkpro"] .dp-tab.active { background: var(--dp-surface2); color: var(--dp-ink); box-shadow: 0 0 0 1px var(--dp-line2), 0 4px 12px rgba(0,0,0,.25); } [data-theme="darkpro"] .dp-tab.active .dp-count { color: var(--dp-accent); } /* Table head */ [data-theme="darkpro"] .dp-tt-head { display: grid; grid-template-columns: minmax(260px, 1.6fr) 64px repeat(4, minmax(64px, 1fr)); background: var(--dp-bg2); color: var(--dp-ink-mute); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; padding: 13px 0; border-bottom: 1px solid var(--dp-line); } [data-theme="darkpro"] .dp-tt-head > div { padding: 0 16px; display: flex; align-items: center; justify-content: center; text-align: center; } [data-theme="darkpro"] .dp-tt-head > div + div { border-left: 1px solid var(--dp-line); } /* Table row */ [data-theme="darkpro"] .dp-tt-row { display: grid; grid-template-columns: minmax(260px, 1.6fr) 64px repeat(4, minmax(64px, 1fr)); padding: 16px 0; border-bottom: 1px solid var(--dp-line); align-items: center; transition: background .13s; } [data-theme="darkpro"] .dp-tt-row:hover { background: rgba(28,33,48,.6); } [data-theme="darkpro"] .dp-tt-row:last-child { border-bottom: 0; } [data-theme="darkpro"] .dp-tt-row > div { padding: 0 16px; } /* Time/League cell */ [data-theme="darkpro"] .dp-tt-time { display: flex; flex-direction: column; gap: 2px; } [data-theme="darkpro"] .dp-tt-time .dp-t { font-family: 'JetBrains Mono', monospace; font-size: 15px; font-weight: 600; color: var(--dp-ink); } [data-theme="darkpro"] .dp-tt-time .dp-l { font-size: 11px; color: var(--dp-ink-mute); letter-spacing: .03em; } /* Match cell */ [data-theme="darkpro"] .dp-tt-match { display: flex; flex-direction: column; gap: 4px; } [data-theme="darkpro"] .dp-tt-meta { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--dp-ink-mute); letter-spacing: .03em; margin-bottom: 2px; } [data-theme="darkpro"] .dp-tt-meta .dp-t { font-family: 'JetBrains Mono', monospace; font-weight: 600; color: var(--dp-ink); font-size: 12.5px; } [data-theme="darkpro"] .dp-tt-meta .dp-l { font-weight: 500; } [data-theme="darkpro"] .dp-tt-team { display: flex; align-items: center; gap: 9px; font-size: 14px; padding: 5px 9px; border-radius: 8px; border-left: 3px solid transparent; } [data-theme="darkpro"] .dp-tt-team.is-fav { background: linear-gradient(90deg, rgba(86,199,160,.12), transparent 70%); border-left-color: var(--dp-accent); } [data-theme="darkpro"] .dp-tt-team.is-fav .dp-tt-name { color: var(--dp-accent); font-weight: 600; } [data-theme="darkpro"] .dp-tt-team.is-und { background: linear-gradient(90deg, rgba(224,107,78,.07), transparent 70%); border-left-color: rgba(224,107,78,.5); } [data-theme="darkpro"] .dp-tt-name { flex: 1; } [data-theme="darkpro"] .dp-fav-tag, [data-theme="darkpro"] .dp-und-tag { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px; letter-spacing: .03em; } [data-theme="darkpro"] .dp-fav-tag { background: var(--dp-accent); color: #0b0d12; } [data-theme="darkpro"] .dp-und-tag { background: rgba(224,107,78,.22); color: #f0a090; border: 1px solid rgba(224,107,78,.35); } [data-theme="darkpro"] .dp-tt-vs { color: var(--dp-ink-mute); font-size: 11px; letter-spacing: .06em; padding-left: 10px; } [data-theme="darkpro"] .dp-tt-vs b { color: var(--dp-accent3); margin-left: 4px; font-family: 'JetBrains Mono', monospace; } [data-theme="darkpro"] .dp-tt-score { color: var(--dp-ink-dim); font-family: 'JetBrains Mono', monospace; font-size: 12px; } /* Handicap cell */ [data-theme="darkpro"] .dp-tt-hdp { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 15px; text-align: center; color: var(--dp-accent3); } /* Pick cell */ [data-theme="darkpro"] .dp-tt-pick { display: grid; place-items: center; } [data-theme="darkpro"] .dp-pick-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; padding: 6px 9px; border-radius: 8px; font-size: 13px; font-weight: 600; } [data-theme="darkpro"] .dp-pick-chip.tor { background: rgba(86,199,160,.14); color: var(--dp-accent); border: 1px solid rgba(86,199,160,.28); } [data-theme="darkpro"] .dp-pick-chip.rong { background: rgba(224,107,78,.14); color: #f0a090; border: 1px solid rgba(224,107,78,.28); } [data-theme="darkpro"] .dp-pick-chip.win-icon { background: rgba(86,199,160,.18); border-color: rgba(86,199,160,.4); } [data-theme="darkpro"] .dp-pick-chip.posted { background: rgba(58,66,88,.4); color: var(--dp-ink-mute); border-color: var(--dp-line); } /* Team logo (initial-based, fallback when no image) */ [data-theme="darkpro"] .dp-team-logo { border-radius: 50%; display: inline-grid; place-items: center; font-family: 'Inter Tight', sans-serif; font-weight: 800; color: #0b0d12; flex-shrink: 0; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.15), 0 1px 2px rgba(0,0,0,.4); position: relative; overflow: hidden; } [data-theme="darkpro"] .dp-team-logo > span { position: relative; z-index: 1; line-height: 1; letter-spacing: -0.02em; } /* Team logo (real image variant) — used when team_img / imgshow is available */ [data-theme="darkpro"] .dp-team-logo.has-img { background: var(--dp-surface2) !important; padding: 2px; box-shadow: inset 0 0 0 1px var(--dp-line2), 0 1px 2px rgba(0,0,0,.4); } [data-theme="darkpro"] .dp-team-logo.has-img > img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 50%; } /* Consensus bar */ [data-theme="darkpro"] .dp-consensus { display: grid; grid-template-columns: 88px minmax(240px, 1.4fr) 58px repeat(4, minmax(64px, 1fr)); background: var(--dp-bg2); padding: 13px 0; border-top: 2px solid var(--dp-line2); } [data-theme="darkpro"] .dp-consensus > div { padding: 0 16px; } [data-theme="darkpro"] .dp-consensus .dp-c-label { grid-column: 1 / 4; font-size: 12px; color: var(--dp-ink-mute); text-transform: uppercase; letter-spacing: .09em; font-weight: 600; align-self: center; } [data-theme="darkpro"] .dp-consensus-cell { text-align: center; } [data-theme="darkpro"] .dp-consensus-cell .dp-cv { font-family: 'JetBrains Mono', monospace; font-size: 17px; font-weight: 700; color: var(--dp-accent); } [data-theme="darkpro"] .dp-consensus-cell .dp-cv.zero { color: var(--dp-ink-mute); } [data-theme="darkpro"] .dp-consensus-cell .dp-cl { font-size: 10px; color: var(--dp-ink-mute); letter-spacing: .09em; text-transform: uppercase; } /* Legend */ [data-theme="darkpro"] .dp-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; padding: 0 4px; color: var(--dp-ink-mute); font-size: 12px; } [data-theme="darkpro"] .dp-legend span { display: inline-flex; align-items: center; gap: 6px; } [data-theme="darkpro"] .dp-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; } @media (max-width: 800px) { [data-theme="darkpro"] .dp-tt-head { display: none; } [data-theme="darkpro"] .dp-tt-row, [data-theme="darkpro"] .dp-consensus { grid-template-columns: 1fr; gap: 8px; padding: 14px 16px; } [data-theme="darkpro"] .dp-tt-row > div, [data-theme="darkpro"] .dp-consensus > div { padding: 0; border: 0 !important; } } @media (max-width: 1100px) { [data-theme="darkpro"] .dp-tt-head, [data-theme="darkpro"] .dp-tt-row, [data-theme="darkpro"] .dp-consensus { grid-template-columns: 72px 1fr 54px repeat(4, 64px); font-size: 13px; } } /* ══════════════════════════════════════ CARD GRID ══════════════════════════════════════ */ [data-theme="darkpro"] .dp-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } /* When only one card is present (e.g. step3/step6 with a single tipster), span the full row instead of leaving the right column empty. */ [data-theme="darkpro"] .dp-grid-2 > :only-child { grid-column: 1 / -1; } @media (max-width: 800px) { [data-theme="darkpro"] .dp-grid-2 { grid-template-columns: 1fr; } } /* Generic card */ [data-theme="darkpro"] .dp-card { background: var(--dp-surface); border: 1px solid var(--dp-line); border-radius: var(--dp-radius); padding: 20px; box-shadow: var(--dp-shadow); display: flex; flex-direction: column; gap: 14px; } [data-theme="darkpro"] .dp-card-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px dashed var(--dp-line); } [data-theme="darkpro"] .dp-avatar { width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; background: linear-gradient(135deg, var(--dp-accent4), var(--dp-accent)); display: grid; place-items: center; font-family: 'Inter Tight', sans-serif; font-weight: 700; color: #0b0d12; font-size: 15px; } [data-theme="darkpro"] .dp-avatar.gold { background: linear-gradient(135deg, var(--dp-accent3), #b8860b); } [data-theme="darkpro"] .dp-avatar.red { background: linear-gradient(135deg, var(--dp-accent2), #8b1a00); } [data-theme="darkpro"] .dp-avatar.mint { background: linear-gradient(135deg, var(--dp-accent), #1a7a5a); } [data-theme="darkpro"] .dp-card-head h3 { margin: 0; font-family: 'Inter Tight', sans-serif; font-size: 16px; letter-spacing: -0.01em; color: var(--dp-ink); } [data-theme="darkpro"] .dp-card-head p { margin: 2px 0 0; color: var(--dp-ink-mute); font-size: 12px; } [data-theme="darkpro"] .dp-card-tag { margin-left: auto; padding: 4px 10px; border-radius: 999px; background: var(--dp-bg2); border: 1px solid var(--dp-line); font-size: 11px; color: var(--dp-ink-dim); letter-spacing: .05em; text-transform: uppercase; font-weight: 600; } /* ── Prediction cells (default-theme parity: logo → time/odds bar → pick → result) ── */ [data-theme="darkpro"] .dp-step-strip { display: grid; gap: 10px; padding: 4px 0 8px; } [data-theme="darkpro"] .dp-step-strip.step3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } [data-theme="darkpro"] .dp-step-strip.step6 { /* 6 picks shown as 2 rows of 3 — avoids cramped cards on desktop */ grid-template-columns: repeat(3, minmax(0, 1fr)); } [data-theme="darkpro"] .dp-ball-picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 4px 0 8px; } [data-theme="darkpro"] .dp-pick-cell { background: var(--dp-bg2); border: 1px solid var(--dp-line); border-radius: 12px; padding: 10px 8px 8px; min-width: 0; display: flex; flex-direction: column; align-items: stretch; } [data-theme="darkpro"] .dp-pick-cell.is-empty { opacity: .85; } [data-theme="darkpro"] .dp-pick-thumb { text-align: center; min-height: 76px; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; } [data-theme="darkpro"] .dp-thumb-pl { display: inline-block; width: 72px; height: 72px; border-radius: 12px; background: var(--dp-surface2); border: 1px dashed var(--dp-line2); } [data-theme="darkpro"] .dp-thumb-logo { margin: 0 auto; } [data-theme="darkpro"] .dp-pick-datas { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-family: 'JetBrains Mono', monospace; font-size: 12.5px; background: var(--dp-surface); border: 1px solid var(--dp-line); border-radius: 8px; padding: 6px 8px; margin-bottom: 6px; } [data-theme="darkpro"] .dp-pd-time { color: var(--dp-ink); font-weight: 600; flex: 0 0 38%; } [data-theme="darkpro"] .dp-pd-stats { flex: 1; text-align: center; color: var(--dp-ink-mute); } [data-theme="darkpro"] .dp-pd-odds { color: var(--dp-accent3); font-weight: 700; text-align: right; flex: 0 0 38%; } [data-theme="darkpro"] .dp-pick-select { text-align: center; font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--dp-ink); min-height: 2.6em; padding: 0 4px; word-break: break-word; } [data-theme="darkpro"] .dp-pick-cell--toerong .dp-pick-select { margin-bottom: 6px; min-height: 2.8em; } [data-theme="darkpro"] .dp-pick-cell--toerong .dp-pick-datas { margin-bottom: 0; } /* Favourite pick — matches legacy .tded-too (red on default; mint accent here) */ [data-theme="darkpro"] .dp-pick-select .tded-too { color: var(--dp-accent); font-weight: 700; } [data-theme="darkpro"] .dp-pick-check { text-align: center; font-size: 12px; margin-top: 4px; color: var(--dp-ink-mute); } [data-theme="darkpro"] .tded-icheck { display: inline-block; font-weight: 700; font-size: 11px; padding: 2px 6px; border-radius: 4px; margin: 0 2px; line-height: 1.4; } [data-theme="darkpro"] .tded-icheck.win { background: rgba(86,199,160,.2); color: var(--dp-accent); } [data-theme="darkpro"] .tded-icheck.draw { background: rgba(110,158,204,.2); color: var(--dp-accent4); } [data-theme="darkpro"] .tded-icheck.lost { background: rgba(224,107,78,.2); color: #f0a090; } [data-theme="darkpro"] .tded-icheck.post { background: rgba(58,66,88,.5); color: var(--dp-ink-mute); } /* Result legend — slightly more padding around the badges */ [data-theme="darkpro"] .dp-legend-results { margin-top: 14px; padding: 10px 12px; background: var(--dp-bg2); border: 1px solid var(--dp-line); border-radius: 8px; font-size: 12.5px; color: var(--dp-ink-dim); } [data-theme="darkpro"] .dp-legend-results .tded-icheck { margin-right: 4px; } [data-theme="darkpro"] .dp-score-inline { color: var(--dp-ink-dim); font-size: 11.5px; margin-left: 4px; } @media (max-width: 1100px) { [data-theme="darkpro"] .dp-step-strip.step6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 700px) { [data-theme="darkpro"] .dp-step-strip.step3, [data-theme="darkpro"] .dp-step-strip.step6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } [data-theme="darkpro"] .dp-ball-picks { grid-template-columns: 1fr; } } [data-theme="darkpro"] .dp-side-tag { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 5px; } [data-theme="darkpro"] .dp-side-tag.tor { background: rgba(86,199,160,.16); color: var(--dp-accent); } [data-theme="darkpro"] .dp-side-tag.rong { background: rgba(224,107,78,.16); color: #f0a090; } [data-theme="darkpro"] .dp-side-tag.high { background: rgba(232,196,90,.16); color: var(--dp-accent3); } [data-theme="darkpro"] .dp-side-tag.low { background: rgba(110,158,204,.16); color: var(--dp-accent4); } [data-theme="darkpro"] .dp-side-tag.win { background: rgba(86,199,160,.16); color: var(--dp-accent); } [data-theme="darkpro"] .dp-side-tag.lose { background: rgba(224,107,78,.16); color: #f0a090; } [data-theme="darkpro"] .dp-side-tag.draw { background: rgba(110,158,204,.16); color: var(--dp-accent4); } [data-theme="darkpro"] .dp-side-tag.post { background: rgba(58,66,88,.4); color: var(--dp-ink-mute); } /* ── Step combo card ── */ [data-theme="darkpro"] .dp-combo-card { background: linear-gradient(180deg, var(--dp-surface) 0%, var(--dp-surface2) 100%); border: 1px solid var(--dp-line2); border-radius: var(--dp-radius); overflow: hidden; box-shadow: var(--dp-shadow); display: flex; flex-direction: column; } [data-theme="darkpro"] .dp-combo-head { padding: 16px 20px; display: flex; align-items: center; gap: 14px; background: var(--dp-bg2); border-bottom: 1px solid var(--dp-line); } [data-theme="darkpro"] .dp-step-badge { width: 42px; height: 42px; border-radius: 11px; background: linear-gradient(135deg, var(--dp-accent), #1a7a5a); color: #0b0d12; font-weight: 800; font-size: 17px; display: grid; place-items: center; font-family: 'Inter Tight', sans-serif; flex-shrink: 0; } [data-theme="darkpro"] .dp-combo-head h3 { margin: 0; font-family: 'Inter Tight', sans-serif; font-size: 17px; letter-spacing: -0.01em; color: var(--dp-ink); } [data-theme="darkpro"] .dp-combo-head p { margin: 2px 0 0; color: var(--dp-ink-mute); font-size: 12px; } [data-theme="darkpro"] .dp-combo-body { padding: 6px 20px 16px; display: flex; flex-direction: column; } /* ── OU pick box ── */ [data-theme="darkpro"] .dp-ou-pick { background: var(--dp-bg2); border: 1px solid var(--dp-line); border-radius: 12px; padding: 14px; margin-bottom: 10px; } [data-theme="darkpro"] .dp-ou-pick:last-child { margin-bottom: 0; } [data-theme="darkpro"] .dp-ou-vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin-bottom: 10px; } [data-theme="darkpro"] .dp-ou-team { font-size: 13px; display: flex; align-items: center; gap: 8px; min-width: 0; } [data-theme="darkpro"] .dp-ou-team.right { text-align: right; justify-content: flex-end; } [data-theme="darkpro"] .dp-ou-team > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [data-theme="darkpro"] .dp-ou-vs-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--dp-ink-mute); letter-spacing: .14em; padding: 3px 7px; border-radius: 5px; background: var(--dp-surface2); } [data-theme="darkpro"] .dp-ou-call { display: flex; align-items: center; gap: 10px; padding-top: 10px; border-top: 1px dashed var(--dp-line); flex-wrap: wrap; } [data-theme="darkpro"] .dp-ou-call .dp-ou-predict { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 14px; color: var(--dp-ink); } [data-theme="darkpro"] .dp-ou-score { color: var(--dp-ink-dim); font-size: 12px; font-family: 'JetBrains Mono', monospace; } /* ══════════════════════════════════════ AD / PROMO SLOTS ══════════════════════════════════════ */ [data-theme="darkpro"] .dp-promo-slot { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 18px; padding: 20px 26px; margin: 32px 0; background: radial-gradient(circle at 20% 30%, rgba(232,196,90,.07), transparent 50%), repeating-linear-gradient(135deg, var(--dp-surface) 0, var(--dp-surface) 14px, var(--dp-bg2) 14px, var(--dp-bg2) 28px); border: 2px dashed rgba(232,196,90,.45); border-radius: 14px; position: relative; min-height: 110px; box-shadow: 0 0 0 1px var(--dp-bg) inset, 0 8px 30px rgba(0,0,0,.28); } [data-theme="darkpro"] .dp-promo-slot::before { content: 'AD'; position: absolute; top: -10px; left: 22px; background: var(--dp-accent3); color: #0b0d12; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 800; padding: 3px 9px; border-radius: 4px; letter-spacing: .14em; } [data-theme="darkpro"] .dp-promo-tag { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .16em; padding: 6px 11px; border-radius: 6px; background: rgba(232,196,90,.16); color: var(--dp-accent3); font-weight: 700; border: 1px solid rgba(232,196,90,.36); } [data-theme="darkpro"] .dp-promo-star { width: 34px; height: 34px; border-radius: 8px; background: linear-gradient(135deg, var(--dp-accent3), #a07000); display: grid; place-items: center; color: #0b0d12; font-weight: 800; font-size: 17px; box-shadow: 0 4px 10px rgba(0,0,0,.4); } [data-theme="darkpro"] .dp-promo-body { text-align: center; display: flex; flex-direction: column; gap: 5px; } [data-theme="darkpro"] .dp-promo-size { font-family: 'JetBrains Mono', monospace; font-size: 15px; color: var(--dp-ink); font-weight: 700; letter-spacing: .07em; } [data-theme="darkpro"] .dp-promo-contact { font-size: 12px; color: var(--dp-ink-mute); } /* ── Promo slot in "has ads" mode ── Strip the placeholder decoration when real banners are present so the banners themselves take centre stage and margins stay tight. */ [data-theme="darkpro"] .dp-promo-slot.has-ads { display: block; padding: 0; margin: 12px 0; background: transparent; border: 0; box-shadow: none; min-height: 0; } [data-theme="darkpro"] .dp-promo-slot.has-ads::before { content: none; } [data-theme="darkpro"] .dp-promo-slot.has-ads .dp-promo-tag, [data-theme="darkpro"] .dp-promo-slot.has-ads .dp-promo-star { display: none; } [data-theme="darkpro"] .dp-promo-slot.has-ads .dp-promo-body { display: flex; flex-direction: column; gap: 8px; text-align: center; } [data-theme="darkpro"] .dp-promo-slot.has-ads .dp-ad-unit { margin: 0; } /* ── Generic ad unit (banner partial output) ── Centred, responsive, no inherent margin. Spacing is owned by the container. */ [data-theme="darkpro"] .dp-ad-unit { text-align: center; line-height: 0; } [data-theme="darkpro"] .dp-ad-unit > a, [data-theme="darkpro"] .dp-ad-unit > img { display: inline-block; line-height: 0; } [data-theme="darkpro"] .dp-ad-unit img { max-width: 100%; height: auto; display: inline-block; } [data-theme="darkpro"] .dp-ad-unit .dp-ad-code { line-height: normal; text-align: center; } /* ══════════════════════════════════════ SEO BLOCK ══════════════════════════════════════ */ [data-theme="darkpro"] .dp-seo-section { background: linear-gradient(180deg, transparent, var(--dp-bg2)); padding: 24px; border-radius: 18px; } [data-theme="darkpro"] .dp-seo-grid { display: grid; grid-template-columns: 1.3fr 1fr 1.3fr; gap: 20px; } @media (max-width: 1100px) { [data-theme="darkpro"] .dp-seo-grid { grid-template-columns: 1fr; } } [data-theme="darkpro"] .dp-seo-card { background: var(--dp-surface); border: 1px solid var(--dp-line); border-radius: 14px; padding: 20px; display: flex; flex-direction: column; gap: 10px; } [data-theme="darkpro"] .dp-seo-card h3 { margin: 0; font-family: 'Inter Tight', sans-serif; font-size: 15px; letter-spacing: -0.01em; color: var(--dp-accent); padding-bottom: 10px; border-bottom: 1px dashed var(--dp-line); } [data-theme="darkpro"] .dp-seo-card p { margin: 0; color: var(--dp-ink-dim); font-size: 13.5px; line-height: 1.75; } [data-theme="darkpro"] .dp-seo-card p b { color: var(--dp-ink); font-weight: 600; } [data-theme="darkpro"] .dp-seo-stats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } [data-theme="darkpro"] .dp-seo-stats li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--dp-line); } [data-theme="darkpro"] .dp-seo-stats li:last-child { border-bottom: 0; } [data-theme="darkpro"] .dp-seo-stats .dp-seo-num { font-family: 'JetBrains Mono', monospace; font-size: 20px; font-weight: 700; color: var(--dp-accent3); min-width: 60px; letter-spacing: -0.01em; } [data-theme="darkpro"] .dp-seo-stats .dp-seo-desc { color: var(--dp-ink-dim); font-size: 13px; } /* Keyword cloud */ [data-theme="darkpro"] .dp-tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; } [data-theme="darkpro"] .dp-tag-cloud span, [data-theme="darkpro"] .dp-tag-cloud a { display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--dp-surface); border: 1px solid var(--dp-line); color: var(--dp-ink-dim); font-size: 12.5px; text-decoration: none; transition: color .13s, border-color .13s, background .13s; } [data-theme="darkpro"] .dp-tag-cloud span:hover, [data-theme="darkpro"] .dp-tag-cloud a:hover { color: var(--dp-ink); border-color: var(--dp-line2); } /* ══════════════════════════════════════ FOOTER ══════════════════════════════════════ */ [data-theme="darkpro"] .dp-footer { border-top: 1px solid var(--dp-line); padding: 34px 0 24px; margin-top: 56px; color: var(--dp-ink-mute); font-size: 13px; } [data-theme="darkpro"] .dp-footer-row { display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start; } [data-theme="darkpro"] .dp-footer-brand { max-width: 540px; } [data-theme="darkpro"] .dp-footer-brand .dp-brand { margin-bottom: 10px; } [data-theme="darkpro"] .dp-footer-desc { color: var(--dp-ink-dim); line-height: 1.7; } [data-theme="darkpro"] .dp-footer-links { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; } [data-theme="darkpro"] .dp-footer-links a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border: 1px solid var(--dp-line); border-radius: 8px; font-size: 12px; color: var(--dp-ink-dim); transition: color .13s, border-color .13s; } [data-theme="darkpro"] .dp-footer-links a:hover { color: var(--dp-ink); border-color: var(--dp-line2); } [data-theme="darkpro"] .dp-footer-nav { margin-top: 24px; } [data-theme="darkpro"] .dp-footer-nav a { display: inline-block; margin-right: 16px; margin-bottom: 8px; color: var(--dp-ink-mute); font-size: 13px; transition: color .13s; } [data-theme="darkpro"] .dp-footer-nav a:hover { color: var(--dp-ink); } [data-theme="darkpro"] .dp-disclaimer { margin-top: 18px; padding: 14px 16px; background: var(--dp-bg2); border: 1px solid var(--dp-line); border-radius: 10px; font-size: 12.5px; line-height: 1.7; color: var(--dp-ink-mute); } [data-theme="darkpro"] .dp-copyright { margin-top: 16px; display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--dp-ink-mute); } /* Bottom quick-nav bar — fixed to viewport bottom */ [data-theme="darkpro"] .dp-bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: rgba(17, 20, 28, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--dp-line); padding: 8px 0; box-shadow: 0 -8px 24px rgba(0, 0, 0, .35); } [data-theme="darkpro"] .dp-bottom-nav ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: 4px; flex-wrap: wrap; } [data-theme="darkpro"] .dp-bottom-nav ul li a { padding: 7px 14px; border-radius: 8px; color: var(--dp-ink-dim); font-size: 13px; transition: all .13s; } [data-theme="darkpro"] .dp-bottom-nav ul li a:hover, [data-theme="darkpro"] .dp-bottom-nav ul li a.active { background: var(--dp-surface); color: var(--dp-accent); } /* Back to top */ [data-theme="darkpro"] .dp-to-top { position: fixed; right: 22px; bottom: 80px; z-index: 51; width: 42px; height: 42px; border-radius: 12px; background: var(--dp-surface); border: 1px solid var(--dp-line2); color: var(--dp-ink); display: grid; place-items: center; box-shadow: var(--dp-shadow); transition: transform .15s, opacity .15s; } [data-theme="darkpro"] .dp-to-top:hover { transform: translateY(-2px); } /* Floating share (current page URL) */ [data-theme="darkpro"] .dp-share-float { position: fixed; right: 14px; bottom: 134px; z-index: 52; display: flex; flex-direction: column; align-items: stretch; gap: 6px; max-width: 92vw; font-family: system-ui, "Segoe UI", Roboto, "Noto Sans Thai", sans-serif; } [data-theme="darkpro"] .dp-share-label { display: block; text-align: center; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--dp-ink-mute); padding: 2px 0; } [data-theme="darkpro"] .dp-share-btn { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 6px 10px; border-radius: 10px; border: 1px solid transparent; font-size: 11px; font-weight: 600; text-decoration: none; color: #fff; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, .35); transition: transform .12s, filter .12s; } [data-theme="darkpro"] .dp-share-btn:hover { filter: brightness(1.08); transform: translateY(-1px); } [data-theme="darkpro"] .dp-share-btn svg { flex-shrink: 0; } [data-theme="darkpro"] .dp-share-fb { background: #1877f2; } [data-theme="darkpro"] .dp-share-line { background: #06c755; } [data-theme="darkpro"] .dp-share-x { background: #000; border-color: #333; } [data-theme="darkpro"] .dp-share-copy { background: var(--dp-surface2); color: var(--dp-ink); border-color: var(--dp-line2); } [data-theme="darkpro"] .dp-share-copy .dp-share-btn-text { color: var(--dp-ink-dim); } [data-theme="darkpro"] .dp-share-toast { position: fixed; left: 50%; bottom: 100px; transform: translateX(-50%); z-index: 55; padding: 10px 18px; border-radius: 10px; background: var(--dp-surface); border: 1px solid var(--dp-line2); color: var(--dp-ink); font-size: 13px; box-shadow: var(--dp-shadow); } @media (max-width: 800px) { [data-theme="darkpro"] .dp-share-float { left: 0; right: 0; bottom: 52px; width: 100%; max-width: none; /* override desktop max-width:92vw — full-bleed on mobile */ box-sizing: border-box; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; gap: 0; padding: 8px 0; margin: 0; border-radius: 0; background: rgba(17, 20, 28, .94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-top: 1px solid var(--dp-line); box-shadow: 0 -4px 16px rgba(0, 0, 0, .35); } [data-theme="darkpro"] .dp-share-label { display: none; } [data-theme="darkpro"] .dp-share-btn { flex: 1 1 0; min-width: 0; justify-content: center; min-height: 38px; padding: 6px 4px; border-radius: 0; box-shadow: none; border-width: 0 0 0 1px; border-style: solid; border-color: rgba(255, 255, 255, .08); } [data-theme="darkpro"] .dp-share-btn:first-child { border-left-width: 0; } [data-theme="darkpro"] .dp-share-btn-text { display: none; } [data-theme="darkpro"] .dp-share-toast { bottom: 160px; } } /* ══════════════════════════════════════ UTILITY / LEGACY BRIDGE (keep result_span output readable) ══════════════════════════════════════ */ [data-theme="darkpro"] .tded-win { color: var(--dp-accent); font-weight: 700; } [data-theme="darkpro"] .tded-lose { color: var(--dp-accent2); } [data-theme="darkpro"] .tded-draw { color: var(--dp-accent4); } [data-theme="darkpro"] .tded-post { color: var(--dp-ink-mute); background: rgba(58,66,88,.4); padding: 1px 5px; border-radius: 4px; } /* ══════════════════════════════════════ FLOATING / POPUP AD ZONES (S1 = left, S2 = right, S3 = bottom strip, F1 = popup) ══════════════════════════════════════ */ [data-theme="darkpro"] .dp-ads-float { position: fixed; z-index: 45; background: var(--dp-surface); border: 1px solid var(--dp-line); border-radius: 12px; padding: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.45); max-width: 200px; } [data-theme="darkpro"] .dp-ads-float img, [data-theme="darkpro"] .dp-ads-popup-box img { max-width: 100%; height: auto; display: block; } [data-theme="darkpro"] .dp-ads-float > div { margin: 0 !important; } [data-theme="darkpro"] .dp-ads-float-left { left: 14px; bottom: 80px; } [data-theme="darkpro"] .dp-ads-float-right { right: 14px; bottom: 80px; } [data-theme="darkpro"] .dp-ads-float-bottom { left: 0; right: 0; bottom: 0; max-width: none; border-radius: 0; border: 0; border-top: 1px solid var(--dp-line); background: rgba(11,13,18,.94); backdrop-filter: blur(10px); padding: 10px 16px; } [data-theme="darkpro"] .dp-ads-float-bottom .dp-ads-float-inner { max-width: 1200px; margin: 0 auto; text-align: center; } [data-theme="darkpro"] .dp-ads-float-bottom .dp-ads-float-inner > div { margin: 0 !important; } [data-theme="darkpro"] .dp-ads-close { position: absolute; top: -10px; right: -10px; width: 26px; height: 26px; border-radius: 50%; background: var(--dp-surface2); color: var(--dp-ink); border: 1px solid var(--dp-line2); font-size: 16px; line-height: 1; display: grid; place-items: center; box-shadow: 0 4px 10px rgba(0,0,0,.4); cursor: pointer; z-index: 1; } [data-theme="darkpro"] .dp-ads-close:hover { background: var(--dp-accent); color: #0b0d12; } [data-theme="darkpro"] .dp-ads-float-bottom .dp-ads-close { top: 6px; right: 10px; } /* Popup F1 */ [data-theme="darkpro"] .dp-ads-popup-overlay { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.72); backdrop-filter: blur(4px); display: grid; place-items: center; padding: 20px; } [data-theme="darkpro"] .dp-ads-popup-box { position: relative; background: var(--dp-surface); border: 1px solid var(--dp-line2); border-radius: 14px; padding: 16px; max-width: 92vw; max-height: 88vh; overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,.6); } [data-theme="darkpro"] .dp-ads-popup-box > div { margin: 0 !important; } /* On mobile, hide the side ads (S1/S2) so they don't cover content — keep S3 (bottom strip) and F1 (popup) which are designed to be visible. */ @media (max-width: 800px) { [data-theme="darkpro"] .dp-ads-float-left, [data-theme="darkpro"] .dp-ads-float-right { display: none; } } /* ══════════════════════════════════════ MOBILE MENU TOGGLE (hamburger) ══════════════════════════════════════ */ [data-theme="darkpro"] .dp-menu-toggle { display: none; margin-left: auto; width: 40px; height: 40px; border-radius: 10px; background: var(--dp-surface); border: 1px solid var(--dp-line); flex-direction: column; align-items: center; justify-content: center; gap: 4px; flex-shrink: 0; } [data-theme="darkpro"] .dp-menu-toggle span { width: 18px; height: 2px; background: var(--dp-ink); border-radius: 2px; transition: transform .18s, opacity .18s; } [data-theme="darkpro"] .dp-topbar.is-open .dp-menu-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); } [data-theme="darkpro"] .dp-topbar.is-open .dp-menu-toggle span:nth-child(2) { opacity: 0; } [data-theme="darkpro"] .dp-topbar.is-open .dp-menu-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* ══════════════════════════════════════ RESPONSIVE — TABLET (≤ 1100px) ══════════════════════════════════════ */ @media (max-width: 1100px) { [data-theme="darkpro"] .dp-promo-slot { grid-template-columns: auto 1fr; gap: 14px; padding: 18px; } [data-theme="darkpro"] .dp-promo-star { display: none; } } /* ══════════════════════════════════════ RESPONSIVE — MOBILE (≤ 800px) ══════════════════════════════════════ */ @media (max-width: 800px) { /* Topbar — show hamburger, collapse main nav into drawer */ [data-theme="darkpro"] .dp-topbar-inner { gap: 10px; height: 56px; } [data-theme="darkpro"] .dp-menu-toggle { display: flex; } [data-theme="darkpro"] .dp-brand { font-size: 15px; } [data-theme="darkpro"] .dp-brand-text small { display: none; } [data-theme="darkpro"] .dp-nav { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 2px; margin: 0; padding: 10px 14px 14px; background: rgba(11,13,18,.97); backdrop-filter: blur(12px); border-bottom: 1px solid var(--dp-line); max-height: 0; overflow: hidden; opacity: 0; pointer-events: none; transition: max-height .22s ease, opacity .15s ease, padding .22s ease; } [data-theme="darkpro"] .dp-topbar.is-open .dp-nav { max-height: 70vh; opacity: 1; pointer-events: auto; } [data-theme="darkpro"] .dp-nav a { width: 100%; padding: 12px 14px; border-radius: 10px; font-size: 14.5px; } /* Sub-nav — horizontal scroll instead of wrapping awkwardly */ [data-theme="darkpro"] .dp-subnav-inner { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; height: 42px; gap: 4px; padding-bottom: 4px; scrollbar-width: none; -ms-overflow-style: none; } [data-theme="darkpro"] .dp-subnav-inner::-webkit-scrollbar { display: none; } [data-theme="darkpro"] .dp-subnav-label { flex-shrink: 0; } [data-theme="darkpro"] .dp-subnav a { flex-shrink: 0; } /* Hero — tighter spacing */ [data-theme="darkpro"] .dp-hero { padding: 28px 0 18px; } [data-theme="darkpro"] .dp-hero h1 { font-size: clamp(26px, 7vw, 36px); margin-bottom: 12px; } [data-theme="darkpro"] .dp-hero-desc { font-size: 14px; margin-bottom: 18px; } [data-theme="darkpro"] .dp-hero-meta { gap: 18px; } [data-theme="darkpro"] .dp-stat-num { font-size: 19px; } /* Section header — date stepper goes below title */ [data-theme="darkpro"] .dp-section { margin-top: 18px; margin-bottom: 32px; } [data-theme="darkpro"] .dp-section-head { gap: 8px 12px; align-items: center; } [data-theme="darkpro"] .dp-section-title { font-size: 18px; white-space: normal; } [data-theme="darkpro"] .dp-section-sub { font-size: 12px; } [data-theme="darkpro"] .dp-section-line { display: none; } [data-theme="darkpro"] .dp-date-nav { width: 100%; justify-content: space-between; font-size: 11.5px; } [data-theme="darkpro"] .dp-date-nav a, [data-theme="darkpro"] .dp-date-nav span { padding: 8px 10px; } [data-theme="darkpro"] .dp-date-nav .dp-date-current { flex: 1; justify-content: center; } /* Tipster table → card layout (4-zean section) */ [data-theme="darkpro"] .dp-tt-row { grid-template-columns: 1fr 1fr; gap: 6px 12px; padding: 14px; border-bottom: 1px solid var(--dp-line); } [data-theme="darkpro"] .dp-tt-row > div { padding: 0; border: 0 !important; } [data-theme="darkpro"] .dp-tt-match { grid-column: 1 / -1; } [data-theme="darkpro"] .dp-tt-hdp { grid-column: 1 / -1; text-align: left; align-self: start; font-size: 13px; } [data-theme="darkpro"] .dp-tt-pick { grid-column: auto; place-items: stretch; background: var(--dp-bg2); border: 1px solid var(--dp-line); border-radius: 8px; padding: 8px 6px; text-align: center; position: relative; } [data-theme="darkpro"] .dp-tt-pick::before { content: attr(data-tipster); display: block; font-size: 9.5px; color: var(--dp-ink-mute); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; font-weight: 600; } [data-theme="darkpro"] .dp-tt-pick .dp-pick-chip { width: 100%; min-width: 0; } /* Consensus bar — also card-grid */ [data-theme="darkpro"] .dp-consensus { grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 12px 14px; } [data-theme="darkpro"] .dp-consensus > div { padding: 0; } [data-theme="darkpro"] .dp-consensus .dp-c-label { grid-column: 1 / -1; margin-bottom: 4px; text-align: center; } [data-theme="darkpro"] .dp-consensus-cell { background: var(--dp-surface); border: 1px solid var(--dp-line); border-radius: 8px; padding: 8px 6px; } /* Promo slot — vertical stack */ [data-theme="darkpro"] .dp-promo-slot { grid-template-columns: 1fr; gap: 10px; padding: 22px 14px 14px; margin: 22px 0; min-height: auto; } [data-theme="darkpro"] .dp-promo-tag { justify-self: start; } [data-theme="darkpro"] .dp-promo-star { display: none; } [data-theme="darkpro"] .dp-promo-body { gap: 4px; } [data-theme="darkpro"] .dp-promo-size { font-size: 13px; } /* Tipster cards (ballteng/toerong/hilow) — slightly tighter */ [data-theme="darkpro"] .dp-card { padding: 16px; gap: 12px; } [data-theme="darkpro"] .dp-card-head { gap: 10px; padding-bottom: 12px; } [data-theme="darkpro"] .dp-avatar { width: 36px; height: 36px; font-size: 14px; } [data-theme="darkpro"] .dp-card-head h3 { font-size: 15px; } [data-theme="darkpro"] .dp-card-head p { font-size: 11.5px; } /* Prediction cells — slightly tighter on mobile */ [data-theme="darkpro"] .dp-pick-thumb { min-height: 68px; } [data-theme="darkpro"] .dp-thumb-pl { width: 64px; height: 64px; } [data-theme="darkpro"] .dp-pick-datas { font-size: 12px; padding: 5px 6px; } [data-theme="darkpro"] .dp-pick-select { font-size: 13px; } /* OU pick (hilow) */ [data-theme="darkpro"] .dp-ou-pick { padding: 12px; } [data-theme="darkpro"] .dp-ou-vs { gap: 6px; } [data-theme="darkpro"] .dp-ou-team { font-size: 12px; gap: 6px; } [data-theme="darkpro"] .dp-ou-team > span { font-size: 12px; } /* Step combo */ [data-theme="darkpro"] .dp-combo-head { padding: 14px 16px; gap: 10px; } [data-theme="darkpro"] .dp-combo-head h3 { font-size: 15px; } [data-theme="darkpro"] .dp-combo-body { padding: 4px 16px 12px; } [data-theme="darkpro"] .dp-step-badge { width: 36px; height: 36px; font-size: 14px; } /* SEO section */ [data-theme="darkpro"] .dp-seo-section { padding: 18px 14px; } [data-theme="darkpro"] .dp-seo-card { padding: 16px; } [data-theme="darkpro"] .dp-seo-card h3 { font-size: 14px; } [data-theme="darkpro"] .dp-seo-card p { font-size: 13px; line-height: 1.7; } /* Footer */ [data-theme="darkpro"] .dp-footer { padding: 24px 0 18px; margin-top: 36px; } [data-theme="darkpro"] .dp-footer-row { gap: 16px; } [data-theme="darkpro"] .dp-footer-links { margin-left: 0; } /* Bottom nav — horizontal scroll */ [data-theme="darkpro"] .dp-bottom-nav ul { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; } [data-theme="darkpro"] .dp-bottom-nav ul::-webkit-scrollbar { display: none; } [data-theme="darkpro"] .dp-bottom-nav ul li a { white-space: nowrap; padding: 7px 12px; font-size: 12.5px; } /* Back-to-top: above bottom nav + floating share strip */ [data-theme="darkpro"] .dp-to-top { right: 14px; bottom: 108px; width: 38px; height: 38px; } } /* ══════════════════════════════════════ RESPONSIVE — SMALL MOBILE (≤ 480px) ══════════════════════════════════════ */ @media (max-width: 480px) { [data-theme="darkpro"] { font-size: 14px; } /* Hero a touch tighter */ [data-theme="darkpro"] .dp-hero { padding: 22px 0 14px; } [data-theme="darkpro"] .dp-hero-meta { gap: 14px; } /* Section header — title smaller */ [data-theme="darkpro"] .dp-section-title { font-size: 16.5px; } [data-theme="darkpro"] .dp-step-strip.step3, [data-theme="darkpro"] .dp-step-strip.step6 { grid-template-columns: 1fr; } /* OU section — stack team / vs vertically when very narrow */ [data-theme="darkpro"] .dp-ou-vs { grid-template-columns: 1fr; gap: 4px; text-align: center; } [data-theme="darkpro"] .dp-ou-team, [data-theme="darkpro"] .dp-ou-team.right { justify-content: center; text-align: center; } [data-theme="darkpro"] .dp-ou-vs-label { justify-self: center; } [data-theme="darkpro"] .dp-tag-cloud span, [data-theme="darkpro"] .dp-tag-cloud a { font-size: 11.5px; padding: 5px 10px; } } /* H2H/Stats — icon-only button (pick rows + 4-zean VS line) */ [data-theme="darkpro"] .dp-pd-h2h, [data-theme="darkpro"] .dp-h2h-btn { display: inline-flex; align-items: center; justify-content: center; padding: 5px; border-radius: 6px; background: rgba(110,158,204,.12); color: var(--dp-accent4); border: 1px solid rgba(110,158,204,.3); line-height: 0; transition: background .13s, color .13s, border-color .13s; } [data-theme="darkpro"] .dp-pd-h2h:hover, [data-theme="darkpro"] .dp-h2h-btn:hover { background: var(--dp-accent4); color: #0b0d12; border-color: var(--dp-accent4); } [data-theme="darkpro"] .dp-h2h-icon { display: block; width: 14px; height: 14px; flex-shrink: 0; } [data-theme="darkpro"] .dp-h2h-btn { margin-left: 8px; } /* ══════════════════════════════════════ STATS / H2H PAGE — /stats/{id} ══════════════════════════════════════ */ [data-theme="darkpro"] .dp-stats-wrap { padding: 24px 32px 48px; } [data-theme="darkpro"] .dp-stats-h1 { font-size: 22px; font-weight: 700; margin: 4px 0 18px; color: var(--dp-ink); letter-spacing: -.01em; } [data-theme="darkpro"] .dp-stats-h1 em { font-style: normal; color: var(--dp-accent); } [data-theme="darkpro"] .dp-stats-h2 { font-size: 16px; font-weight: 700; margin: 24px 0 10px; padding: 8px 14px; background: var(--dp-bg2); border-left: 3px solid var(--dp-accent); border-radius: 6px; color: var(--dp-ink); } [data-theme="darkpro"] .dp-stats-h3 { text-align: center; font-size: 18px; font-weight: 700; margin: 28px 0 14px; color: var(--dp-ink); } /* Header card */ [data-theme="darkpro"] .dp-stats-header { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 16px; background: linear-gradient(180deg, var(--dp-surface), var(--dp-bg2)); border: 1px solid var(--dp-line); border-radius: var(--dp-radius); padding: 22px; box-shadow: var(--dp-shadow); } [data-theme="darkpro"] .dp-st-team { text-align: center; } [data-theme="darkpro"] .dp-st-logo { width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 8px; background: var(--dp-bg2); border: 2px solid var(--dp-line2); overflow: hidden; display: grid; place-items: center; } [data-theme="darkpro"] .dp-st-logo img { max-width: 88px; max-height: 88px; object-fit: contain; } [data-theme="darkpro"] .dp-st-name { font-size: 17px; font-weight: 700; color: var(--dp-ink); margin-bottom: 4px; } [data-theme="darkpro"] .dp-st-meta { font-size: 11.5px; color: var(--dp-ink-mute); } [data-theme="darkpro"] .dp-st-mid { text-align: center; padding-top: 10px; } [data-theme="darkpro"] .dp-st-score { font-size: 14px; color: var(--dp-ink-dim); margin-bottom: 8px; } [data-theme="darkpro"] .dp-st-ft { display: inline-block; padding: 2px 8px; border-radius: 4px; background: var(--dp-accent2); color: #fff; font-size: 11px; font-weight: 700; margin-right: 8px; vertical-align: middle; } [data-theme="darkpro"] .dp-st-num { font-size: 30px; font-weight: 700; color: var(--dp-ink); font-family: 'JetBrains Mono', monospace; letter-spacing: -.01em; } [data-theme="darkpro"] .dp-st-num span { color: var(--dp-ink-mute); margin: 0 6px; } [data-theme="darkpro"] .dp-st-vs { font-size: 28px; font-weight: 700; color: var(--dp-ink-mute); letter-spacing: .1em; } [data-theme="darkpro"] .dp-st-half { font-size: 11px; color: var(--dp-ink-mute); margin-top: 4px; } [data-theme="darkpro"] .dp-st-league { font-size: 14px; font-weight: 600; color: var(--dp-accent4); margin-top: 6px; } [data-theme="darkpro"] .dp-st-league small { color: var(--dp-ink-mute); font-weight: 400; } [data-theme="darkpro"] .dp-st-kick { font-size: 12.5px; color: var(--dp-ink-dim); margin-top: 8px; } [data-theme="darkpro"] .dp-st-odds { font-size: 12px; color: var(--dp-accent3); margin-top: 4px; } [data-theme="darkpro"] .dp-st-tv { margin-top: 10px; font-size: 12px; color: var(--dp-ink-mute); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; } [data-theme="darkpro"] .dp-st-tv img { max-height: 18px; vertical-align: middle; } /* Stats summary bar */ [data-theme="darkpro"] .dp-stats-bar { background: var(--dp-bg2); border: 1px solid var(--dp-line); border-radius: 8px; padding: 10px 14px; font-size: 13px; color: var(--dp-ink-dim); margin-bottom: 12px; } [data-theme="darkpro"] .dp-stats-bar b { color: var(--dp-ink); } [data-theme="darkpro"] .dp-stats-bar .t1 { color: var(--dp-accent); font-weight: 600; } [data-theme="darkpro"] .dp-stats-bar .t2 { color: var(--dp-accent2); font-weight: 600; } /* H2H list */ [data-theme="darkpro"] .dp-h2h-list { display: flex; flex-direction: column; gap: 6px; } [data-theme="darkpro"] .dp-h2h-row { display: block; background: var(--dp-bg2); border: 1px solid var(--dp-line); border-radius: 8px; padding: 10px 14px; transition: background .13s, border-color .13s; } [data-theme="darkpro"] .dp-h2h-row:hover { background: var(--dp-surface); border-color: var(--dp-line2); } [data-theme="darkpro"] .dp-h2h-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--dp-ink-mute); margin-bottom: 6px; } [data-theme="darkpro"] .dp-h2h-pg { color: var(--dp-accent4); } [data-theme="darkpro"] .dp-h2h-body { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; } [data-theme="darkpro"] .dp-h2h-team { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--dp-ink); } [data-theme="darkpro"] .dp-h2h-team.home { justify-content: flex-end; text-align: right; } [data-theme="darkpro"] .dp-h2h-team.away { justify-content: flex-start; text-align: left; } [data-theme="darkpro"] .dp-h2h-logo { width: 26px; height: 26px; display: grid; place-items: center; flex-shrink: 0; } [data-theme="darkpro"] .dp-h2h-logo img { max-width: 24px; max-height: 24px; object-fit: contain; border-radius: 50%; } [data-theme="darkpro"] .dp-h2h-score { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 16px; color: var(--dp-ink); padding: 4px 12px; background: var(--dp-surface); border: 1px solid var(--dp-line2); border-radius: 6px; min-width: 64px; text-align: center; } [data-theme="darkpro"] .dp-h2h-score span { color: var(--dp-ink-mute); margin: 0 4px; } [data-theme="darkpro"] .dp-h2h-note { font-size: 11px; color: var(--dp-accent2); margin-top: 4px; text-align: right; } [data-theme="darkpro"] .dp-h2h-empty { padding: 18px; text-align: center; color: var(--dp-ink-mute); font-style: italic; } /* H2H doughnut summary */ [data-theme="darkpro"] .dp-stats-fix { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; background: var(--dp-bg2); border: 1px solid var(--dp-line); border-radius: 10px; padding: 18px; margin: 14px 0 0; } [data-theme="darkpro"] .dp-fix-cell { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; } [data-theme="darkpro"] .dp-fix-cell canvas { max-width: 64px; max-height: 64px; } [data-theme="darkpro"] .dp-fix-label { font-size: 12px; color: var(--dp-ink-dim); } [data-theme="darkpro"] .dp-fix-cell.win .dp-fix-label b { color: var(--dp-accent); } [data-theme="darkpro"] .dp-fix-cell.draw .dp-fix-label b { color: var(--dp-accent3); } [data-theme="darkpro"] .dp-fix-cell.lost .dp-fix-label b { color: var(--dp-accent2); } /* Side-by-side recent form */ [data-theme="darkpro"] .dp-stats-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 16px; } [data-theme="darkpro"] .dp-stats-col { min-width: 0; } [data-theme="darkpro"] .dp-last-list { display: flex; flex-direction: column; gap: 4px; } [data-theme="darkpro"] .dp-last-row { display: grid; grid-template-columns: 28px 22px 1fr 22px 1.4fr; gap: 8px; align-items: center; background: var(--dp-bg2); border: 1px solid var(--dp-line); border-radius: 6px; padding: 6px 10px; font-size: 12.5px; color: var(--dp-ink-dim); transition: background .13s; } [data-theme="darkpro"] .dp-last-row:hover { background: var(--dp-surface); } [data-theme="darkpro"] .dp-last-result { display: inline-block; width: 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 50%; font-weight: 700; font-size: 11px; background: var(--dp-surface); color: var(--dp-ink-mute); } [data-theme="darkpro"] .dp-last-result.win { background: var(--dp-accent); color: #0b0d12; } [data-theme="darkpro"] .dp-last-result.draw { background: var(--dp-accent3); color: #0b0d12; } [data-theme="darkpro"] .dp-last-result.lost { background: var(--dp-accent2); color: #fff; } [data-theme="darkpro"] .dp-last-h { font-size: 10.5px; color: var(--dp-ink-mute); text-align: center; font-weight: 600; } [data-theme="darkpro"] .dp-last-score { font-family: 'JetBrains Mono', monospace; font-weight: 600; color: var(--dp-ink); font-size: 12.5px; } [data-theme="darkpro"] .dp-last-vs { color: var(--dp-ink-mute); font-size: 10.5px; text-align: center; } [data-theme="darkpro"] .dp-last-opp { color: var(--dp-ink); display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [data-theme="darkpro"] .dp-last-opp img { width: 18px; height: 18px; object-fit: contain; border-radius: 50%; } /* Line graph block */ [data-theme="darkpro"] .dp-graph-line { background: var(--dp-bg2); border: 1px solid var(--dp-line); border-radius: 10px; padding: 14px; margin-top: 12px; position: relative; } [data-theme="darkpro"] .dp-gline-abs { position: absolute; top: 8px; left: 12px; font-size: 10.5px; color: var(--dp-ink-mute); letter-spacing: .04em; } [data-theme="darkpro"] .dp-gline-abs.r { left: auto; right: 12px; } [data-theme="darkpro"] .dp-gline-foot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--dp-line); } [data-theme="darkpro"] .dp-gline-cell { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; } [data-theme="darkpro"] .dp-gline-cell canvas { max-width: 48px; max-height: 48px; } [data-theme="darkpro"] .dp-gline-cell.win span { color: var(--dp-accent); } [data-theme="darkpro"] .dp-gline-cell.draw span { color: var(--dp-accent3); } [data-theme="darkpro"] .dp-gline-cell.lost span { color: var(--dp-accent2); } /* Overview */ [data-theme="darkpro"] .dp-stats-overview { background: var(--dp-bg2); border: 1px solid var(--dp-line); border-radius: 10px; padding: 18px; } [data-theme="darkpro"] .dp-overview-charts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--dp-line); } [data-theme="darkpro"] .dp-overview-col { text-align: center; min-width: 0; } [data-theme="darkpro"] .dp-overview-col canvas { max-width: 100%; max-height: 220px; } [data-theme="darkpro"] .dp-overview-info { padding-top: 14px; } [data-theme="darkpro"] .dp-overview-info p { font-size: 13px; color: var(--dp-ink-dim); line-height: 1.7; margin: 0 0 8px; } [data-theme="darkpro"] .dp-overview-info b { color: var(--dp-ink); } /* Standings table */ [data-theme="darkpro"] .dp-stats-table-wrap { overflow-x: auto; background: var(--dp-bg2); border: 1px solid var(--dp-line); border-radius: 10px; } [data-theme="darkpro"] .dp-stats-table { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 720px; } [data-theme="darkpro"] .dp-stats-table th, [data-theme="darkpro"] .dp-stats-table td { padding: 8px 6px; text-align: center; border-bottom: 1px solid var(--dp-line); } [data-theme="darkpro"] .dp-stats-table thead th { background: var(--dp-surface); color: var(--dp-ink-dim); font-weight: 600; font-size: 11px; letter-spacing: .04em; } [data-theme="darkpro"] .dp-stats-table .dp-st-tname { text-align: left; color: var(--dp-ink); font-weight: 600; } [data-theme="darkpro"] .dp-stats-table tbody tr:hover { background: rgba(255,255,255,.02); } /* Stats responsive */ @media (max-width: 900px) { [data-theme="darkpro"] .dp-stats-wrap { padding: 18px 16px 36px; } [data-theme="darkpro"] .dp-stats-header { grid-template-columns: 1fr; gap: 14px; padding: 18px; } [data-theme="darkpro"] .dp-st-mid { order: 1; } [data-theme="darkpro"] .dp-st-team:first-of-type { order: 0; } [data-theme="darkpro"] .dp-st-team:last-of-type { order: 2; } [data-theme="darkpro"] .dp-stats-grid2 { grid-template-columns: 1fr; } [data-theme="darkpro"] .dp-overview-charts { grid-template-columns: 1fr; gap: 18px; } } @media (max-width: 480px) { [data-theme="darkpro"] .dp-stats-h1 { font-size: 18px; } [data-theme="darkpro"] .dp-st-num { font-size: 24px; } [data-theme="darkpro"] .dp-h2h-body { grid-template-columns: 1fr auto 1fr; gap: 8px; } [data-theme="darkpro"] .dp-h2h-team { font-size: 12px; } [data-theme="darkpro"] .dp-h2h-score { font-size: 13px; padding: 4px 8px; min-width: 52px; } [data-theme="darkpro"] .dp-last-row { grid-template-columns: 22px 18px 1fr; row-gap: 4px; } [data-theme="darkpro"] .dp-last-vs { display: none; } [data-theme="darkpro"] .dp-last-opp { grid-column: 1 / -1; padding-left: 4px; font-size: 12px; } [data-theme="darkpro"] .dp-last-score { grid-column: 3 / 4; } } /* ══════════════════════════════════════════════════════════ PROGRAMBALL / SCHEDULE — /programball (DarkPro) ══════════════════════════════════════════════════════════ */ [data-theme="darkpro"] .dp-programball-wrap { padding: 22px 24px 56px; max-width: 1240px; margin: 0 auto; } /* ── Hero ── */ [data-theme="darkpro"] .dp-pg-hero { position: relative; overflow: hidden; background: radial-gradient(800px 220px at 100% -40px, rgba(86,199,160,.15), transparent 60%), radial-gradient(600px 200px at -10% 0%, rgba(110,158,204,.13), transparent 60%), linear-gradient(135deg, var(--dp-surface) 0%, var(--dp-bg2) 100%); border: 1px solid var(--dp-line); border-radius: var(--dp-radius); padding: 22px 26px; margin-bottom: 18px; box-shadow: var(--dp-shadow); } [data-theme="darkpro"] .dp-pg-hero::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--dp-accent), var(--dp-accent4)); } [data-theme="darkpro"] .dp-pg-hero-top { margin-bottom: 16px; } [data-theme="darkpro"] .dp-pg-eyebrow { display: inline-block; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--dp-accent); font-weight: 600; margin-bottom: 6px; } [data-theme="darkpro"] .dp-pg-title { font-size: 22px; font-weight: 700; color: var(--dp-ink); margin: 0; line-height: 1.35; letter-spacing: -.01em; } [data-theme="darkpro"] .dp-pg-title em { font-style: normal; color: var(--dp-accent); } [data-theme="darkpro"] .dp-pg-hero-meta { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding-top: 14px; border-top: 1px dashed var(--dp-line); } [data-theme="darkpro"] .dp-pg-date-now { display: flex; align-items: center; gap: 12px; } [data-theme="darkpro"] .dp-pg-date-num { font-family: 'JetBrains Mono', monospace; font-size: 38px; font-weight: 700; line-height: 1; color: var(--dp-accent3); background: linear-gradient(180deg, var(--dp-accent3), #b8860b); -webkit-background-clip: text; background-clip: text; color: transparent; } [data-theme="darkpro"] .dp-pg-date-info { display: flex; flex-direction: column; line-height: 1.3; } [data-theme="darkpro"] .dp-pg-date-info b { color: var(--dp-ink); font-size: 15px; font-weight: 600; } [data-theme="darkpro"] .dp-pg-date-info small { color: var(--dp-ink-mute); font-size: 12px; } [data-theme="darkpro"] .dp-pg-stat { display: flex; flex-direction: column; align-items: center; padding: 4px 14px; border-left: 1px solid var(--dp-line); } [data-theme="darkpro"] .dp-pg-stat-num { font-family: 'JetBrains Mono', monospace; font-size: 22px; font-weight: 700; color: var(--dp-accent); line-height: 1; } [data-theme="darkpro"] .dp-pg-stat-lbl { font-size: 11px; color: var(--dp-ink-mute); margin-top: 4px; } /* ── Date stepper ── */ [data-theme="darkpro"] .dp-pg-stepper { display: flex; align-items: center; gap: 8px; background: var(--dp-bg2); border: 1px solid var(--dp-line); border-radius: var(--dp-radius); padding: 10px; margin-bottom: 22px; box-shadow: var(--dp-shadow); } [data-theme="darkpro"] .dp-pg-step-arrow { flex: 0 0 36px; height: 56px; display: flex; align-items: center; justify-content: center; background: var(--dp-surface); border: 1px solid var(--dp-line); border-radius: var(--dp-radius-sm); color: var(--dp-ink-dim); transition: background .15s, color .15s, border-color .15s, transform .15s; } [data-theme="darkpro"] .dp-pg-step-arrow:hover { background: var(--dp-accent); color: #0b0d12; border-color: var(--dp-accent); transform: translateY(-1px); } [data-theme="darkpro"] .dp-pg-step-list { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } [data-theme="darkpro"] .dp-pg-step { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 4px; height: 56px; background: var(--dp-surface); border: 1px solid var(--dp-line); border-radius: var(--dp-radius-sm); color: var(--dp-ink-dim); transition: background .15s, border-color .15s, color .15s, transform .15s; position: relative; } [data-theme="darkpro"] .dp-pg-step:hover { background: var(--dp-surface2); border-color: var(--dp-line2); color: var(--dp-ink); transform: translateY(-1px); } [data-theme="darkpro"] .dp-pg-step-dow { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--dp-ink-mute); line-height: 1; margin-bottom: 4px; } [data-theme="darkpro"] .dp-pg-step-num { font-family: 'JetBrains Mono', monospace; font-size: 17px; font-weight: 700; line-height: 1; } [data-theme="darkpro"] .dp-pg-step-mon { font-size: 10px; color: var(--dp-ink-mute); line-height: 1; margin-top: 3px; } [data-theme="darkpro"] .dp-pg-step.is-today { border-color: var(--dp-accent4); } [data-theme="darkpro"] .dp-pg-step.is-today .dp-pg-step-dow { color: var(--dp-accent4); } [data-theme="darkpro"] .dp-pg-step.is-active { background: linear-gradient(135deg, var(--dp-accent), #1f7d5e); border-color: var(--dp-accent); color: #0b0d12; box-shadow: 0 4px 14px rgba(86,199,160,.25); } [data-theme="darkpro"] .dp-pg-step.is-active .dp-pg-step-dow, [data-theme="darkpro"] .dp-pg-step.is-active .dp-pg-step-mon { color: rgba(11,13,18,.7); } [data-theme="darkpro"] .dp-pg-step.is-active::after { content: ""; position: absolute; left: 50%; bottom: -3px; transform: translateX(-50%); width: 6px; height: 6px; border-radius: 50%; background: var(--dp-accent); box-shadow: 0 0 8px var(--dp-accent); } /* ── League block ── */ [data-theme="darkpro"] .dp-pg-league { margin-bottom: 18px; background: var(--dp-bg2); border: 1px solid var(--dp-line); border-radius: var(--dp-radius); overflow: hidden; } [data-theme="darkpro"] .dp-pg-league-head { display: flex; align-items: center; gap: 10px; padding: 12px 18px; background: linear-gradient(90deg, var(--dp-surface) 0%, var(--dp-bg2) 100%); border-bottom: 1px solid var(--dp-line); } [data-theme="darkpro"] .dp-pg-league-bar { width: 4px; height: 22px; border-radius: 2px; background: linear-gradient(180deg, var(--dp-accent4), var(--dp-accent)); } [data-theme="darkpro"] .dp-pg-league-logo { flex: 0 0 24px; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; background: var(--dp-surface); border: 1px solid var(--dp-line); border-radius: 5px; overflow: hidden; padding: 2px; } [data-theme="darkpro"] .dp-pg-league-logo img { width: 100%; height: 100%; object-fit: contain; } [data-theme="darkpro"] .dp-pg-league-name { flex: 1; margin: 0; font-size: 15px; font-weight: 700; color: var(--dp-ink); letter-spacing: -.005em; } [data-theme="darkpro"] .dp-pg-league-name small { display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 400; color: var(--dp-ink-mute); text-transform: uppercase; letter-spacing: .04em; } [data-theme="darkpro"] .dp-pg-league-count { font-size: 11px; padding: 3px 9px; border-radius: 999px; background: rgba(110,158,204,.16); color: var(--dp-accent4); font-weight: 600; letter-spacing: .04em; } /* ── Match rows ── */ [data-theme="darkpro"] .dp-pg-matches { display: flex; flex-direction: column; } [data-theme="darkpro"] .dp-pg-match { display: grid; grid-template-columns: 92px 1fr 110px 1fr 168px; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--dp-line); transition: background .12s; } [data-theme="darkpro"] .dp-pg-match:last-child { border-bottom: none; } [data-theme="darkpro"] .dp-pg-match:hover { background: rgba(110,158,204,.04); } [data-theme="darkpro"] .dp-pg-match.is-finished { background: rgba(255,255,255,.012); } /* time column */ [data-theme="darkpro"] .dp-pg-time { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; } [data-theme="darkpro"] .dp-pg-time-num { font-family: 'JetBrains Mono', monospace; font-size: 16px; font-weight: 700; color: var(--dp-ink); line-height: 1; } [data-theme="darkpro"] .dp-pg-ftbadge { display: inline-block; padding: 2px 7px; font-size: 9px; font-weight: 700; letter-spacing: .12em; background: rgba(86,199,160,.18); color: var(--dp-accent); border-radius: 4px; } [data-theme="darkpro"] .dp-pg-h2h { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; font-size: 11px; font-weight: 600; background: rgba(110,158,204,.12); color: var(--dp-accent4); border: 1px solid rgba(110,158,204,.3); border-radius: 5px; line-height: 1; transition: background .13s, color .13s, border-color .13s; } [data-theme="darkpro"] .dp-pg-h2h:hover { background: var(--dp-accent4); color: #0b0d12; border-color: var(--dp-accent4); } [data-theme="darkpro"] .dp-pg-h2h svg { display: block; } /* team columns */ [data-theme="darkpro"] .dp-pg-team { display: flex; align-items: center; gap: 10px; min-width: 0; } [data-theme="darkpro"] .dp-pg-team.home { justify-content: flex-end; text-align: right; } [data-theme="darkpro"] .dp-pg-team.away { justify-content: flex-start; text-align: left; } [data-theme="darkpro"] .dp-pg-team-name { font-size: 14px; color: var(--dp-ink-dim); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [data-theme="darkpro"] .dp-pg-team-name small { font-size: 11px; color: var(--dp-ink-mute); font-weight: 400; } [data-theme="darkpro"] .dp-pg-team.is-too .dp-pg-team-name { color: var(--dp-accent3); font-weight: 700; } [data-theme="darkpro"] .dp-pg-team-logo { flex: 0 0 32px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; background: var(--dp-surface); border: 1px solid var(--dp-line); border-radius: 50%; overflow: hidden; } [data-theme="darkpro"] .dp-pg-team-logo img { width: 100%; height: 100%; object-fit: contain; } [data-theme="darkpro"] .dp-pg-team-pl { font-size: 13px; font-weight: 700; color: var(--dp-ink-mute); } [data-theme="darkpro"] .dp-pg-team.is-too .dp-pg-team-logo { border-color: var(--dp-accent3); box-shadow: 0 0 0 2px rgba(232,196,90,.18); } /* cards */ [data-theme="darkpro"] .dp-pg-card { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 18px; padding: 0 3px; font-size: 10px; font-weight: 700; color: #0b0d12; border-radius: 2px; line-height: 1; } [data-theme="darkpro"] .dp-pg-card.red { background: var(--dp-accent2); color: #fff; } [data-theme="darkpro"] .dp-pg-card.yellow { background: var(--dp-accent3); } /* score / center column */ [data-theme="darkpro"] .dp-pg-score { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 44px; position: relative; } [data-theme="darkpro"] .dp-pg-score-vs { font-size: 11px; letter-spacing: .14em; color: var(--dp-ink-mute); font-weight: 600; } [data-theme="darkpro"] .dp-pg-score-ft { display: inline-flex; align-items: center; gap: 6px; font-family: 'JetBrains Mono', monospace; font-size: 22px; font-weight: 800; color: var(--dp-ink); background: rgba(86,199,160,.1); border: 1px solid rgba(86,199,160,.25); padding: 4px 14px; border-radius: 8px; line-height: 1; } [data-theme="darkpro"] .dp-pg-score-ft span { color: var(--dp-ink-mute); font-weight: 400; font-size: 16px; } [data-theme="darkpro"] .dp-pg-score-ht { font-size: 10px; color: var(--dp-ink-mute); letter-spacing: .04em; } [data-theme="darkpro"] .dp-pg-odds { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; color: var(--dp-accent3); padding: 3px 10px; border-radius: 5px; background: rgba(232,196,90,.12); border: 1px solid rgba(232,196,90,.28); line-height: 1; } [data-theme="darkpro"] .dp-pg-odds.home { color: var(--dp-accent); background: rgba(86,199,160,.1); border-color: rgba(86,199,160,.28); } [data-theme="darkpro"] .dp-pg-odds.away { color: var(--dp-accent2); background: rgba(224,107,78,.1); border-color: rgba(224,107,78,.28); } /* Tipster pick pill — "ฟันธงทีม ต่อ / รอง" */ [data-theme="darkpro"] .dp-pg-pick { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; color: var(--dp-ink-dim); padding: 3px 9px; border-radius: 5px; background: var(--dp-surface); border: 1px solid var(--dp-line); line-height: 1.2; } [data-theme="darkpro"] .dp-pg-pick b { font-weight: 800; letter-spacing: .02em; } [data-theme="darkpro"] .dp-pg-pick.too { background: rgba(86,199,160,.1); border-color: rgba(86,199,160,.3); color: var(--dp-accent); } [data-theme="darkpro"] .dp-pg-pick.too b { color: var(--dp-accent); } [data-theme="darkpro"] .dp-pg-pick.notoo { background: rgba(224,107,78,.1); border-color: rgba(224,107,78,.3); color: var(--dp-accent2); } [data-theme="darkpro"] .dp-pg-pick.notoo b { color: var(--dp-accent2); } [data-theme="darkpro"] .dp-pg-pick-res { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; font-size: 10px; font-weight: 800; line-height: 1; } [data-theme="darkpro"] .dp-pg-pick-res.win { background: var(--dp-accent); color: #0b0d12; } [data-theme="darkpro"] .dp-pg-pick-res.lost { background: var(--dp-accent2); color: #fff; } /* Meta column — odds + tipster pick (right-aligned) */ [data-theme="darkpro"] .dp-pg-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; min-width: 0; } [data-theme="darkpro"] .dp-pg-meta-empty { font-size: 11px; color: var(--dp-ink-mute); } [data-theme="darkpro"] .dp-pg-nohome { position: absolute; top: -4px; right: 4px; font-size: 9px; font-weight: 700; color: #0b0d12; background: var(--dp-accent2); padding: 2px 5px; border-radius: 3px; line-height: 1; } /* empty state */ [data-theme="darkpro"] .dp-pg-empty { text-align: center; padding: 64px 20px; background: var(--dp-bg2); border: 1px dashed var(--dp-line); border-radius: var(--dp-radius); color: var(--dp-ink-mute); } [data-theme="darkpro"] .dp-pg-empty svg { color: var(--dp-line2); margin-bottom: 14px; } [data-theme="darkpro"] .dp-pg-empty h3 { font-size: 16px; color: var(--dp-ink-dim); margin: 0 0 6px; font-weight: 600; } [data-theme="darkpro"] .dp-pg-empty p { font-size: 13px; margin: 0; } /* ── Responsive ── */ @media (max-width: 900px) { [data-theme="darkpro"] .dp-programball-wrap { padding: 16px 14px 40px; } [data-theme="darkpro"] .dp-pg-hero { padding: 18px 18px; } [data-theme="darkpro"] .dp-pg-title { font-size: 18px; } [data-theme="darkpro"] .dp-pg-date-num { font-size: 30px; } [data-theme="darkpro"] .dp-pg-stat-num { font-size: 18px; } [data-theme="darkpro"] .dp-pg-match { grid-template-columns: 76px 1fr 86px 1fr 140px; gap: 8px; padding: 12px 12px; } [data-theme="darkpro"] .dp-pg-team-name { font-size: 13px; } [data-theme="darkpro"] .dp-pg-team-logo { flex: 0 0 28px; width: 28px; height: 28px; } [data-theme="darkpro"] .dp-pg-score-ft { font-size: 18px; padding: 3px 10px; } [data-theme="darkpro"] .dp-pg-time-num { font-size: 14px; } [data-theme="darkpro"] .dp-pg-h2h { padding: 2px 6px; font-size: 10px; } [data-theme="darkpro"] .dp-pg-pick { font-size: 11px; padding: 2px 7px; } [data-theme="darkpro"] .dp-pg-odds { font-size: 12px; padding: 2px 8px; } } @media (max-width: 640px) { [data-theme="darkpro"] .dp-pg-hero-meta { gap: 14px; } [data-theme="darkpro"] .dp-pg-stat { padding: 4px 10px; } [data-theme="darkpro"] .dp-pg-stepper { padding: 8px; gap: 6px; } [data-theme="darkpro"] .dp-pg-step-arrow { flex: 0 0 30px; height: 50px; } [data-theme="darkpro"] .dp-pg-step-list { gap: 4px; } [data-theme="darkpro"] .dp-pg-step { height: 50px; padding: 6px 2px; } [data-theme="darkpro"] .dp-pg-step-num { font-size: 15px; } [data-theme="darkpro"] .dp-pg-step-dow, [data-theme="darkpro"] .dp-pg-step-mon { font-size: 9px; } /* Match becomes 3-row layout on small screens */ [data-theme="darkpro"] .dp-pg-match { grid-template-columns: auto 1fr auto; grid-template-areas: "time center meta" "home center away"; column-gap: 8px; row-gap: 8px; padding: 12px 12px; position: relative; } [data-theme="darkpro"] .dp-pg-time { grid-area: time; flex-direction: row; align-items: center; gap: 6px; } [data-theme="darkpro"] .dp-pg-score { grid-area: center; min-height: auto; } [data-theme="darkpro"] .dp-pg-team.home { grid-area: home; } [data-theme="darkpro"] .dp-pg-team.away { grid-area: away; } [data-theme="darkpro"] .dp-pg-meta { grid-area: meta; flex-direction: row; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } [data-theme="darkpro"] .dp-pg-meta-empty { display: none; } } @media (max-width: 480px) { [data-theme="darkpro"] .dp-pg-title { font-size: 16px; line-height: 1.4; } [data-theme="darkpro"] .dp-pg-eyebrow { font-size: 10px; } [data-theme="darkpro"] .dp-pg-hero-meta { padding-top: 10px; } [data-theme="darkpro"] .dp-pg-date-num { font-size: 26px; } [data-theme="darkpro"] .dp-pg-stat { padding: 2px 8px; } [data-theme="darkpro"] .dp-pg-stat-num { font-size: 16px; } [data-theme="darkpro"] .dp-pg-stat-lbl { font-size: 10px; } [data-theme="darkpro"] .dp-pg-team-name { font-size: 12px; } [data-theme="darkpro"] .dp-pg-team-logo { flex: 0 0 24px; width: 24px; height: 24px; } [data-theme="darkpro"] .dp-pg-score-ft { font-size: 15px; padding: 3px 8px; } [data-theme="darkpro"] .dp-pg-score-ft span { font-size: 13px; } [data-theme="darkpro"] .dp-pg-odds { font-size: 11px; padding: 2px 7px; } } /* ══════════════════════════════════════════════════════════ RATEODDS — /rateodds (DarkPro) ══════════════════════════════════════════════════════════ */ [data-theme="darkpro"] .dp-rateodds-wrap { padding: 22px 24px 56px; max-width: 1240px; margin: 0 auto; } /* Hero */ [data-theme="darkpro"] .dp-ro-hero { position: relative; overflow: hidden; background: radial-gradient(800px 220px at 100% -40px, rgba(232,196,90,.12), transparent 60%), radial-gradient(600px 200px at -10% 0%, rgba(86,199,160,.10), transparent 60%), linear-gradient(135deg, var(--dp-surface) 0%, var(--dp-bg2) 100%); border: 1px solid var(--dp-line); border-radius: var(--dp-radius); padding: 22px 26px; margin-bottom: 18px; box-shadow: var(--dp-shadow); } [data-theme="darkpro"] .dp-ro-hero::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--dp-accent3), var(--dp-accent)); } [data-theme="darkpro"] .dp-ro-eyebrow { display: inline-block; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--dp-accent3); font-weight: 600; margin-bottom: 6px; } [data-theme="darkpro"] .dp-ro-title { font-size: 22px; font-weight: 700; color: var(--dp-ink); margin: 0 0 8px; line-height: 1.35; letter-spacing: -.01em; } [data-theme="darkpro"] .dp-ro-title em { font-style: normal; color: var(--dp-accent3); } [data-theme="darkpro"] .dp-ro-sub { font-size: 13px; color: var(--dp-ink-mute); margin: 0; } /* Tabs */ [data-theme="darkpro"] .dp-ro-tabs { display: flex; flex-wrap: wrap; gap: 8px; background: var(--dp-bg2); border: 1px solid var(--dp-line); border-radius: var(--dp-radius); padding: 10px; margin-bottom: 18px; box-shadow: var(--dp-shadow); } [data-theme="darkpro"] .dp-ro-tab { flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--dp-surface); border: 1px solid var(--dp-line); border-radius: var(--dp-radius-sm); color: var(--dp-ink-dim); font-size: 13px; font-weight: 600; white-space: nowrap; transition: background .15s, border-color .15s, color .15s, transform .15s; cursor: pointer; } [data-theme="darkpro"] .dp-ro-tab:hover { background: var(--dp-surface2); border-color: var(--dp-line2); color: var(--dp-ink); transform: translateY(-1px); } [data-theme="darkpro"] .dp-ro-tab-num { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; padding: 3px 6px; border-radius: 4px; background: rgba(110,158,204,.16); color: var(--dp-accent4); letter-spacing: .04em; } [data-theme="darkpro"] .dp-ro-tab-label { overflow: hidden; text-overflow: ellipsis; } [data-theme="darkpro"] .dp-ro-tab.is-active { background: linear-gradient(135deg, var(--dp-accent3), #b8860b); border-color: var(--dp-accent3); color: #0b0d12; box-shadow: 0 4px 14px rgba(232,196,90,.22); } [data-theme="darkpro"] .dp-ro-tab.is-active .dp-ro-tab-num { background: rgba(11,13,18,.18); color: #0b0d12; } /* Panels */ [data-theme="darkpro"] .dp-ro-panels { position: relative; } [data-theme="darkpro"] .dp-ro-panel { display: none; background: var(--dp-bg2); border: 1px solid var(--dp-line); border-radius: var(--dp-radius); overflow: hidden; box-shadow: var(--dp-shadow); } [data-theme="darkpro"] .dp-ro-panel.is-active { display: block; } [data-theme="darkpro"] .dp-ro-panel-head { display: flex; align-items: center; gap: 10px; padding: 12px 18px; background: linear-gradient(90deg, var(--dp-surface) 0%, var(--dp-bg2) 100%); border-bottom: 1px solid var(--dp-line); } [data-theme="darkpro"] .dp-ro-panel-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dp-accent); box-shadow: 0 0 10px var(--dp-accent); animation: dpRoBlink 1.6s infinite; } @keyframes dpRoBlink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } [data-theme="darkpro"] .dp-ro-panel-title { flex: 1; margin: 0; font-size: 14px; font-weight: 700; color: var(--dp-ink); letter-spacing: -.005em; } [data-theme="darkpro"] .dp-ro-live-tag { font-size: 10px; font-weight: 700; letter-spacing: .14em; padding: 3px 9px; border-radius: 999px; background: rgba(86,199,160,.16); color: var(--dp-accent); } /* Frame container — accepts iframes/embeds from rateball_code */ [data-theme="darkpro"] .dp-ro-frame { padding: 14px; background: var(--dp-bg); min-height: 400px; overflow-x: auto; } [data-theme="darkpro"] .dp-ro-frame iframe, [data-theme="darkpro"] .dp-ro-frame object, [data-theme="darkpro"] .dp-ro-frame embed { max-width: 100%; width: 100%; border: 0; background: var(--dp-surface); border-radius: var(--dp-radius-sm); display: block; } /* Empty state */ [data-theme="darkpro"] .dp-ro-empty { text-align: center; padding: 64px 20px; background: var(--dp-bg2); border: 1px dashed var(--dp-line); border-radius: var(--dp-radius); color: var(--dp-ink-mute); } [data-theme="darkpro"] .dp-ro-empty svg { color: var(--dp-line2); margin-bottom: 14px; } [data-theme="darkpro"] .dp-ro-empty h3 { font-size: 16px; color: var(--dp-ink-dim); margin: 0 0 6px; font-weight: 600; } [data-theme="darkpro"] .dp-ro-empty p { font-size: 13px; margin: 0; } /* Responsive */ @media (max-width: 900px) { [data-theme="darkpro"] .dp-rateodds-wrap { padding: 16px 14px 40px; } [data-theme="darkpro"] .dp-ro-hero { padding: 18px 18px; } [data-theme="darkpro"] .dp-ro-title { font-size: 18px; } [data-theme="darkpro"] .dp-ro-tabs { padding: 8px; gap: 6px; } [data-theme="darkpro"] .dp-ro-tab { padding: 9px 12px; font-size: 12px; } [data-theme="darkpro"] .dp-ro-frame { padding: 10px; min-height: 300px; } } @media (max-width: 640px) { [data-theme="darkpro"] .dp-ro-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; } [data-theme="darkpro"] .dp-ro-tab { flex: 0 0 auto; } [data-theme="darkpro"] .dp-ro-tab-num { display: none; } [data-theme="darkpro"] .dp-ro-frame { padding: 8px; } } @media (max-width: 480px) { [data-theme="darkpro"] .dp-ro-title { font-size: 16px; line-height: 1.4; } [data-theme="darkpro"] .dp-ro-eyebrow { font-size: 10px; } [data-theme="darkpro"] .dp-ro-sub { font-size: 12px; } [data-theme="darkpro"] .dp-ro-tab { padding: 8px 10px; font-size: 11px; } } /* ══════════════════════════════════════════════════════════ LIVESCORE — /livescore (DarkPro) ══════════════════════════════════════════════════════════ */ [data-theme="darkpro"] .dp-livescore-wrap { padding: 22px 24px 56px; max-width: 1240px; margin: 0 auto; } [data-theme="darkpro"] .dp-ls-hero { position: relative; overflow: hidden; background: radial-gradient(800px 220px at 100% -40px, rgba(86,199,160,.15), transparent 60%), radial-gradient(600px 200px at -10% 0%, rgba(110,158,204,.10), transparent 60%), linear-gradient(135deg, var(--dp-surface) 0%, var(--dp-bg2) 100%); border: 1px solid var(--dp-line); border-radius: var(--dp-radius); padding: 22px 26px; margin-bottom: 18px; box-shadow: var(--dp-shadow); } [data-theme="darkpro"] .dp-ls-hero::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--dp-accent), var(--dp-accent4)); } [data-theme="darkpro"] .dp-ls-eyebrow { display: inline-block; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--dp-accent); font-weight: 600; margin-bottom: 6px; } [data-theme="darkpro"] .dp-ls-title { font-size: 22px; font-weight: 700; color: var(--dp-ink); margin: 0 0 8px; line-height: 1.35; letter-spacing: -.01em; } [data-theme="darkpro"] .dp-ls-title em { font-style: normal; color: var(--dp-accent); } [data-theme="darkpro"] .dp-ls-sub { font-size: 13px; color: var(--dp-ink-mute); margin: 0; } [data-theme="darkpro"] .dp-ls-tabs { display: flex; flex-wrap: wrap; gap: 8px; background: var(--dp-bg2); border: 1px solid var(--dp-line); border-radius: var(--dp-radius); padding: 10px; margin-bottom: 18px; box-shadow: var(--dp-shadow); } [data-theme="darkpro"] .dp-ls-tab { flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--dp-surface); border: 1px solid var(--dp-line); border-radius: var(--dp-radius-sm); color: var(--dp-ink-dim); font-size: 13px; font-weight: 600; white-space: nowrap; transition: background .15s, border-color .15s, color .15s, transform .15s; cursor: pointer; } [data-theme="darkpro"] .dp-ls-tab:hover { background: var(--dp-surface2); border-color: var(--dp-line2); color: var(--dp-ink); transform: translateY(-1px); } [data-theme="darkpro"] .dp-ls-tab-num { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; padding: 3px 6px; border-radius: 4px; background: rgba(86,199,160,.16); color: var(--dp-accent); letter-spacing: .04em; } [data-theme="darkpro"] .dp-ls-tab-label { overflow: hidden; text-overflow: ellipsis; } [data-theme="darkpro"] .dp-ls-tab.is-active { background: linear-gradient(135deg, var(--dp-accent), #1f7d5e); border-color: var(--dp-accent); color: #0b0d12; box-shadow: 0 4px 14px rgba(86,199,160,.22); } [data-theme="darkpro"] .dp-ls-tab.is-active .dp-ls-tab-num { background: rgba(11,13,18,.18); color: #0b0d12; } [data-theme="darkpro"] .dp-ls-panels { position: relative; } [data-theme="darkpro"] .dp-ls-panel { display: none; background: var(--dp-bg2); border: 1px solid var(--dp-line); border-radius: var(--dp-radius); overflow: hidden; box-shadow: var(--dp-shadow); } [data-theme="darkpro"] .dp-ls-panel.is-active { display: block; } [data-theme="darkpro"] .dp-ls-panel-head { display: flex; align-items: center; gap: 10px; padding: 12px 18px; background: linear-gradient(90deg, var(--dp-surface) 0%, var(--dp-bg2) 100%); border-bottom: 1px solid var(--dp-line); } [data-theme="darkpro"] .dp-ls-panel-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dp-accent2); box-shadow: 0 0 10px var(--dp-accent2); animation: dpLsBlink 1.4s infinite; } @keyframes dpLsBlink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } [data-theme="darkpro"] .dp-ls-panel-title { flex: 1; margin: 0; font-size: 14px; font-weight: 700; color: var(--dp-ink); letter-spacing: -.005em; } [data-theme="darkpro"] .dp-ls-live-tag { font-size: 10px; font-weight: 700; letter-spacing: .14em; padding: 3px 9px; border-radius: 999px; background: rgba(224,107,78,.16); color: var(--dp-accent2); } [data-theme="darkpro"] .dp-ls-frame { padding: 14px; background: var(--dp-bg); min-height: 500px; overflow-x: auto; } [data-theme="darkpro"] .dp-ls-frame iframe, [data-theme="darkpro"] .dp-ls-frame object, [data-theme="darkpro"] .dp-ls-frame embed { max-width: 100%; width: 100%; border: 0; background: var(--dp-surface); border-radius: var(--dp-radius-sm); display: block; } [data-theme="darkpro"] .dp-ls-empty { text-align: center; padding: 64px 20px; background: var(--dp-bg2); border: 1px dashed var(--dp-line); border-radius: var(--dp-radius); color: var(--dp-ink-mute); } [data-theme="darkpro"] .dp-ls-empty svg { color: var(--dp-line2); margin-bottom: 14px; } [data-theme="darkpro"] .dp-ls-empty h3 { font-size: 16px; color: var(--dp-ink-dim); margin: 0 0 6px; font-weight: 600; } [data-theme="darkpro"] .dp-ls-empty p { font-size: 13px; margin: 0; } @media (max-width: 900px) { [data-theme="darkpro"] .dp-livescore-wrap { padding: 16px 14px 40px; } [data-theme="darkpro"] .dp-ls-hero { padding: 18px 18px; } [data-theme="darkpro"] .dp-ls-title { font-size: 18px; } [data-theme="darkpro"] .dp-ls-tabs { padding: 8px; gap: 6px; } [data-theme="darkpro"] .dp-ls-tab { padding: 9px 12px; font-size: 12px; } [data-theme="darkpro"] .dp-ls-frame { padding: 10px; min-height: 380px; } } @media (max-width: 640px) { [data-theme="darkpro"] .dp-ls-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; } [data-theme="darkpro"] .dp-ls-tab { flex: 0 0 auto; } [data-theme="darkpro"] .dp-ls-tab-num { display: none; } [data-theme="darkpro"] .dp-ls-frame { padding: 8px; } } @media (max-width: 480px) { [data-theme="darkpro"] .dp-ls-title { font-size: 16px; line-height: 1.4; } [data-theme="darkpro"] .dp-ls-eyebrow { font-size: 10px; } [data-theme="darkpro"] .dp-ls-sub { font-size: 12px; } [data-theme="darkpro"] .dp-ls-tab { padding: 8px 10px; font-size: 11px; } } /* ══════════════════════════════════════════════════════════ PAGE — /live , /livesod , /{slug} (DarkPro) ══════════════════════════════════════════════════════════ */ [data-theme="darkpro"] .dp-page-wrap { padding: 22px 24px 56px; max-width: 1240px; margin: 0 auto; } [data-theme="darkpro"] .dp-page-hero { position: relative; overflow: hidden; background: radial-gradient(800px 220px at 100% -40px, rgba(110,158,204,.13), transparent 60%), radial-gradient(600px 200px at -10% 0%, rgba(86,199,160,.08), transparent 60%), linear-gradient(135deg, var(--dp-surface) 0%, var(--dp-bg2) 100%); border: 1px solid var(--dp-line); border-radius: var(--dp-radius); padding: 22px 26px; margin-bottom: 18px; box-shadow: var(--dp-shadow); } [data-theme="darkpro"] .dp-page-hero::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--dp-accent4), var(--dp-accent)); } [data-theme="darkpro"] .dp-page-hero.is-live::before { background: linear-gradient(180deg, var(--dp-accent2), var(--dp-accent3)); } [data-theme="darkpro"] .dp-page-eyebrow { display: inline-block; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--dp-accent4); font-weight: 600; margin-bottom: 6px; } [data-theme="darkpro"] .dp-page-hero.is-live .dp-page-eyebrow { color: var(--dp-accent2); } [data-theme="darkpro"] .dp-page-title { font-size: 22px; font-weight: 700; color: var(--dp-ink); margin: 0; line-height: 1.4; letter-spacing: -.005em; } [data-theme="darkpro"] .dp-page-live-badges { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 11px; font-weight: 700; letter-spacing: .12em; padding: 5px 12px; border-radius: 999px; background: rgba(224,107,78,.14); color: var(--dp-accent2); border: 1px solid rgba(224,107,78,.3); } [data-theme="darkpro"] .dp-page-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dp-accent2); box-shadow: 0 0 8px var(--dp-accent2); animation: dpPageBlink 1.2s infinite; } @keyframes dpPageBlink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } /* Content card — accepts iframe/embed/HTML from page.pages_detail */ [data-theme="darkpro"] .dp-page-content { background: var(--dp-bg2); border: 1px solid var(--dp-line); border-radius: var(--dp-radius); padding: 16px; box-shadow: var(--dp-shadow); color: var(--dp-ink-dim); font-size: 14px; line-height: 1.7; overflow-x: auto; } [data-theme="darkpro"] .dp-page-content iframe, [data-theme="darkpro"] .dp-page-content object, [data-theme="darkpro"] .dp-page-content embed, [data-theme="darkpro"] .dp-page-content video { max-width: 100%; width: 100%; border: 0; display: block; background: var(--dp-surface); border-radius: var(--dp-radius-sm); margin: 8px auto; } [data-theme="darkpro"] .dp-page-content img { max-width: 100%; height: auto; border-radius: var(--dp-radius-sm); } [data-theme="darkpro"] .dp-page-content h1, [data-theme="darkpro"] .dp-page-content h2, [data-theme="darkpro"] .dp-page-content h3, [data-theme="darkpro"] .dp-page-content h4 { color: var(--dp-ink); margin: 16px 0 8px; line-height: 1.3; } [data-theme="darkpro"] .dp-page-content h2 { font-size: 18px; } [data-theme="darkpro"] .dp-page-content h3 { font-size: 16px; } [data-theme="darkpro"] .dp-page-content a { color: var(--dp-accent); text-decoration: underline; } [data-theme="darkpro"] .dp-page-content a:hover { color: var(--dp-accent3); } [data-theme="darkpro"] .dp-page-content ul, [data-theme="darkpro"] .dp-page-content ol { padding-left: 22px; } [data-theme="darkpro"] .dp-page-content code { background: var(--dp-surface); padding: 2px 6px; border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--dp-accent3); } [data-theme="darkpro"] .dp-page-content blockquote { margin: 10px 0; padding: 10px 14px; border-left: 3px solid var(--dp-accent4); background: var(--dp-surface); color: var(--dp-ink-dim); border-radius: var(--dp-radius-sm); } @media (max-width: 900px) { [data-theme="darkpro"] .dp-page-wrap { padding: 16px 14px 40px; } [data-theme="darkpro"] .dp-page-hero { padding: 18px 18px; } [data-theme="darkpro"] .dp-page-title { font-size: 17px; } [data-theme="darkpro"] .dp-page-content { padding: 12px; font-size: 13px; } } @media (max-width: 480px) { [data-theme="darkpro"] .dp-page-title { font-size: 15px; line-height: 1.45; } [data-theme="darkpro"] .dp-page-eyebrow { font-size: 10px; } } /* ══════════════════════════════════════════════════════════ RANKING / STANDINGS — /ranking (DarkPro) ══════════════════════════════════════════════════════════ */ [data-theme="darkpro"] .dp-rank-wrap { padding: 22px 24px 56px; max-width: 1320px; margin: 0 auto; } /* ── Hero ── */ [data-theme="darkpro"] .dp-rank-hero { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; position: relative; overflow: hidden; background: radial-gradient(800px 220px at 100% -40px, rgba(232,196,90,.13), transparent 60%), radial-gradient(600px 200px at -10% 0%, rgba(86,199,160,.10), transparent 60%), linear-gradient(135deg, var(--dp-surface) 0%, var(--dp-bg2) 100%); border: 1px solid var(--dp-line); border-radius: var(--dp-radius); padding: 22px 26px; margin-bottom: 18px; box-shadow: var(--dp-shadow); } [data-theme="darkpro"] .dp-rank-hero::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--dp-accent3), var(--dp-accent4)); } [data-theme="darkpro"] .dp-rank-hero-main { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 0; } [data-theme="darkpro"] .dp-rank-league-logo { flex: 0 0 56px; width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; background: var(--dp-surface); border: 1px solid var(--dp-line); border-radius: var(--dp-radius-sm); padding: 6px; box-shadow: 0 4px 14px rgba(0,0,0,.25); } [data-theme="darkpro"] .dp-rank-league-logo img { width: 100%; height: 100%; object-fit: contain; } [data-theme="darkpro"] .dp-rank-hero-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; } [data-theme="darkpro"] .dp-rank-eyebrow { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--dp-accent3); font-weight: 600; } [data-theme="darkpro"] .dp-rank-title { font-size: 22px; font-weight: 700; color: var(--dp-ink); margin: 0; line-height: 1.3; letter-spacing: -.01em; } [data-theme="darkpro"] .dp-rank-season-tag { display: inline-block; align-self: flex-start; font-size: 11px; padding: 3px 10px; border-radius: 999px; background: rgba(232,196,90,.14); color: var(--dp-accent3); font-weight: 600; letter-spacing: .04em; } [data-theme="darkpro"] .dp-rank-update { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--dp-ink-mute); padding: 6px 12px; border-radius: var(--dp-radius-sm); background: var(--dp-bg); border: 1px solid var(--dp-line); } [data-theme="darkpro"] .dp-rank-update svg { color: var(--dp-accent4); } [data-theme="darkpro"] .dp-rank-update b { color: var(--dp-ink-dim); margin-left: 4px; font-weight: 600; } /* ── Layout grid: main + side ── */ [data-theme="darkpro"] .dp-rank-grid { display: grid; grid-template-columns: 1fr 280px; gap: 18px; align-items: start; } [data-theme="darkpro"] .dp-rank-main { min-width: 0; } /* ── Filters (season/round chips) ── */ [data-theme="darkpro"] .dp-rank-filters { display: flex; flex-direction: column; gap: 10px; background: var(--dp-bg2); border: 1px solid var(--dp-line); border-radius: var(--dp-radius); padding: 14px 18px; margin-bottom: 14px; box-shadow: var(--dp-shadow); } [data-theme="darkpro"] .dp-rank-filter { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } [data-theme="darkpro"] .dp-rank-filter-label { flex: 0 0 auto; font-size: 12px; font-weight: 600; color: var(--dp-ink-mute); letter-spacing: .04em; } [data-theme="darkpro"] .dp-rank-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; } [data-theme="darkpro"] .dp-rank-chip { display: inline-block; padding: 5px 12px; font-size: 12px; font-weight: 600; color: var(--dp-ink-dim); background: var(--dp-surface); border: 1px solid var(--dp-line); border-radius: 999px; transition: background .12s, color .12s, border-color .12s; white-space: nowrap; } [data-theme="darkpro"] .dp-rank-chip:hover { background: var(--dp-surface2); border-color: var(--dp-line2); color: var(--dp-ink); } [data-theme="darkpro"] .dp-rank-chip.is-active { background: var(--dp-accent4); border-color: var(--dp-accent4); color: #0b0d12; } /* ── Standings table ── */ [data-theme="darkpro"] .dp-rank-table-wrap { background: var(--dp-bg2); border: 1px solid var(--dp-line); border-radius: var(--dp-radius); overflow: hidden; box-shadow: var(--dp-shadow); } [data-theme="darkpro"] .dp-rank-table { width: 100%; border-collapse: collapse; font-size: 13px; } [data-theme="darkpro"] .dp-rank-table thead tr { background: linear-gradient(180deg, var(--dp-surface) 0%, var(--dp-bg2) 100%); } [data-theme="darkpro"] .dp-rank-th, [data-theme="darkpro"] .dp-rank-td { padding: 10px 8px; border-bottom: 1px solid var(--dp-line); text-align: center; vertical-align: middle; } [data-theme="darkpro"] .dp-rank-th { font-size: 11px; font-weight: 700; color: var(--dp-ink-mute); text-transform: uppercase; letter-spacing: .06em; } [data-theme="darkpro"] .dp-rank-th.team, [data-theme="darkpro"] .dp-rank-td.team { text-align: left; padding-left: 14px; } [data-theme="darkpro"] .dp-rank-th.pos, [data-theme="darkpro"] .dp-rank-td.pos { width: 44px; padding-left: 12px; padding-right: 6px; } [data-theme="darkpro"] .dp-rank-th.pts, [data-theme="darkpro"] .dp-rank-td.pts { background: rgba(86,199,160,.06); border-left: 1px solid var(--dp-line); font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 800; color: var(--dp-accent); width: 56px; } [data-theme="darkpro"] .dp-rank-td.num { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--dp-ink-dim); font-weight: 500; width: 38px; } [data-theme="darkpro"] .dp-rank-td.diff.pos { color: var(--dp-accent); font-weight: 600; } [data-theme="darkpro"] .dp-rank-td.diff.neg { color: var(--dp-accent2); font-weight: 600; } [data-theme="darkpro"] .dp-rank-row { transition: background .12s; } [data-theme="darkpro"] .dp-rank-row:hover { background: rgba(110,158,204,.06); } [data-theme="darkpro"] .dp-rank-row:nth-child(even) { background: rgba(255,255,255,.012); } [data-theme="darkpro"] .dp-rank-row:nth-child(even):hover { background: rgba(110,158,204,.08); } [data-theme="darkpro"] .dp-rank-row:last-child .dp-rank-td { border-bottom: none; } /* Position pill */ [data-theme="darkpro"] .dp-rank-pos-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 7px; font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; background: var(--dp-surface); color: var(--dp-ink-dim); border-radius: 5px; } /* Team cell */ [data-theme="darkpro"] .dp-rank-team { display: inline-flex; align-items: center; gap: 10px; min-width: 0; } [data-theme="darkpro"] .dp-rank-team-logo { flex: 0 0 24px; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; background: var(--dp-surface); border: 1px solid var(--dp-line); border-radius: 50%; overflow: hidden; } [data-theme="darkpro"] .dp-rank-team-logo img { width: 100%; height: 100%; object-fit: contain; } [data-theme="darkpro"] .dp-rank-team-pl { font-size: 11px; font-weight: 700; color: var(--dp-ink-mute); } [data-theme="darkpro"] .dp-rank-team-name { font-size: 13px; font-weight: 600; color: var(--dp-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Grouped header (home/away/total) */ [data-theme="darkpro"] .dp-rank-h-grouped { background: var(--dp-bg) !important; } [data-theme="darkpro"] .dp-rank-th-grp { font-size: 10px; font-weight: 700; letter-spacing: .12em; color: var(--dp-ink-mute); padding: 6px 4px; text-transform: uppercase; text-align: center; border-bottom: 1px solid var(--dp-line); } [data-theme="darkpro"] .dp-rank-th-grp.home { color: var(--dp-accent); } [data-theme="darkpro"] .dp-rank-th-grp.away { color: var(--dp-accent2); } [data-theme="darkpro"] .dp-rank-th-grp.all { color: var(--dp-accent3); } [data-theme="darkpro"] .dp-rank-th-blank { border-bottom: 1px solid var(--dp-line); } [data-theme="darkpro"] .dp-rank-th.g-h, [data-theme="darkpro"] .dp-rank-td.g-h { background: rgba(86,199,160,.04); } [data-theme="darkpro"] .dp-rank-th.g-a, [data-theme="darkpro"] .dp-rank-td.g-a { background: rgba(224,107,78,.04); } [data-theme="darkpro"] .dp-rank-th.g-t, [data-theme="darkpro"] .dp-rank-td.g-t { background: rgba(232,196,90,.04); } /* Note + legend */ [data-theme="darkpro"] .dp-rank-note { margin-top: 12px; padding: 10px 14px; font-size: 12px; color: var(--dp-ink-mute); line-height: 1.6; background: var(--dp-bg2); border: 1px dashed var(--dp-line); border-radius: var(--dp-radius-sm); } [data-theme="darkpro"] .dp-rank-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; padding: 12px 14px; background: var(--dp-bg2); border: 1px solid var(--dp-line); border-radius: var(--dp-radius-sm); } [data-theme="darkpro"] .dp-rank-legend-item { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--dp-ink-dim); } [data-theme="darkpro"] .dp-rank-legend-dot { width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(255,255,255,.1); flex-shrink: 0; } /* ── Side nav ── */ [data-theme="darkpro"] .dp-rank-side { background: var(--dp-bg2); border: 1px solid var(--dp-line); border-radius: var(--dp-radius); overflow: hidden; box-shadow: var(--dp-shadow); position: sticky; top: 12px; } [data-theme="darkpro"] .dp-rank-side-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; font-size: 13px; font-weight: 700; color: var(--dp-ink); background: linear-gradient(90deg, var(--dp-surface) 0%, var(--dp-bg2) 100%); border-bottom: 1px solid var(--dp-line); } [data-theme="darkpro"] .dp-rank-side-head svg { color: var(--dp-accent4); } [data-theme="darkpro"] .dp-rank-countries { padding: 6px; } [data-theme="darkpro"] .dp-rank-country { border-radius: var(--dp-radius-sm); margin-bottom: 2px; overflow: hidden; } [data-theme="darkpro"] .dp-rank-country[open] { background: var(--dp-bg); } [data-theme="darkpro"] .dp-rank-country-head { display: flex; align-items: center; gap: 8px; padding: 9px 12px; font-size: 12px; font-weight: 600; color: var(--dp-ink-dim); cursor: pointer; user-select: none; list-style: none; border-radius: var(--dp-radius-sm); transition: background .12s, color .12s; } [data-theme="darkpro"] .dp-rank-country-head::-webkit-details-marker { display: none; } [data-theme="darkpro"] .dp-rank-country-head:hover { background: var(--dp-surface); color: var(--dp-ink); } [data-theme="darkpro"] .dp-rank-country[open] .dp-rank-country-head { color: var(--dp-ink); background: var(--dp-surface); } [data-theme="darkpro"] .dp-rank-country-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } [data-theme="darkpro"] .dp-rank-country-count { font-size: 10px; padding: 2px 6px; border-radius: 999px; background: var(--dp-line); color: var(--dp-ink-mute); font-weight: 700; } [data-theme="darkpro"] .dp-rank-country-icon { color: var(--dp-ink-mute); transition: transform .15s; } [data-theme="darkpro"] .dp-rank-country[open] .dp-rank-country-icon { transform: rotate(90deg); } [data-theme="darkpro"] .dp-rank-leagues { display: flex; flex-direction: column; padding: 4px 8px 6px 22px; } [data-theme="darkpro"] .dp-rank-league-link { display: block; padding: 6px 10px; font-size: 12px; color: var(--dp-ink-dim); border-radius: 5px; transition: background .12s, color .12s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [data-theme="darkpro"] .dp-rank-league-link:hover { background: var(--dp-surface); color: var(--dp-ink); } [data-theme="darkpro"] .dp-rank-league-link.is-active { background: rgba(86,199,160,.14); color: var(--dp-accent); font-weight: 700; } /* ── Responsive ── */ @media (max-width: 1100px) { [data-theme="darkpro"] .dp-rank-grid { grid-template-columns: 1fr; } [data-theme="darkpro"] .dp-rank-side { position: static; } } @media (max-width: 900px) { [data-theme="darkpro"] .dp-rank-wrap { padding: 16px 14px 40px; } [data-theme="darkpro"] .dp-rank-hero { padding: 18px 18px; } [data-theme="darkpro"] .dp-rank-title { font-size: 18px; } [data-theme="darkpro"] .dp-rank-league-logo { flex: 0 0 44px; width: 44px; height: 44px; } [data-theme="darkpro"] .dp-rank-table-wrap { overflow-x: auto; } [data-theme="darkpro"] .dp-rank-table { font-size: 12px; min-width: 640px; } [data-theme="darkpro"] .dp-rank-table.is-split { min-width: 980px; } [data-theme="darkpro"] .dp-rank-th, [data-theme="darkpro"] .dp-rank-td { padding: 8px 6px; } } @media (max-width: 480px) { [data-theme="darkpro"] .dp-rank-title { font-size: 16px; line-height: 1.4; } [data-theme="darkpro"] .dp-rank-eyebrow { font-size: 10px; } [data-theme="darkpro"] .dp-rank-team-name { font-size: 12px; } [data-theme="darkpro"] .dp-rank-team-logo { flex: 0 0 20px; width: 20px; height: 20px; } [data-theme="darkpro"] .dp-rank-table { min-width: 580px; } } /* ══════════════════════════════════════════════════════════ SEO — Breadcrumb, related links, hub pages, semantic strip ══════════════════════════════════════════════════════════ */ [data-theme="darkpro"] .dp-breadcrumb { padding: 10px 0 0; margin-bottom: 4px; } [data-theme="darkpro"] .dp-breadcrumb-list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px; list-style: none; margin: 0; padding: 0; font-size: 12.5px; color: var(--dp-ink-mute); } [data-theme="darkpro"] .dp-breadcrumb-item { display: inline-flex; align-items: center; gap: 4px; } [data-theme="darkpro"] .dp-breadcrumb a { color: var(--dp-accent4); text-decoration: none; font-weight: 500; } [data-theme="darkpro"] .dp-breadcrumb a:hover { text-decoration: underline; color: var(--dp-accent); } [data-theme="darkpro"] .dp-breadcrumb-sep { color: var(--dp-line2); margin: 0 2px; user-select: none; } [data-theme="darkpro"] .dp-breadcrumb span[aria-current="page"] { color: var(--dp-ink-dim); font-weight: 600; } [data-theme="darkpro"] .dp-rank-team-link { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: color .12s; } [data-theme="darkpro"] .dp-rank-team-link:hover .dp-rank-team-name { color: var(--dp-accent4); text-decoration: underline; } [data-theme="darkpro"] .dp-related-block { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--dp-line); } [data-theme="darkpro"] .dp-related-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } [data-theme="darkpro"] .dp-related-list a { color: var(--dp-accent4); font-weight: 600; text-decoration: none; } [data-theme="darkpro"] .dp-related-list a:hover { text-decoration: underline; color: var(--dp-accent); } [data-theme="darkpro"] .dp-related-meta { display: block; font-size: 11px; color: var(--dp-ink-mute); margin-top: 2px; } [data-theme="darkpro"] .dp-related-nav { display: flex; flex-wrap: wrap; gap: 10px 14px; } [data-theme="darkpro"] .dp-related-nav a { font-size: 13px; color: var(--dp-accent4); text-decoration: none; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: var(--dp-bg2); border: 1px solid var(--dp-line); } [data-theme="darkpro"] .dp-related-nav a:hover { border-color: var(--dp-accent4); color: var(--dp-accent); } [data-theme="darkpro"] .dp-related-inline { font-size: 13px; color: var(--dp-ink-dim); margin-top: 16px; line-height: 1.6; } [data-theme="darkpro"] .dp-related-inline a { color: var(--dp-accent4); font-weight: 600; } [data-theme="darkpro"] .dp-hub-page { padding: 18px 0 48px; } [data-theme="darkpro"] .dp-hub-head { margin-bottom: 22px; } [data-theme="darkpro"] .dp-hub-team-mark { margin-bottom: 10px; } [data-theme="darkpro"] .dp-hub-team-mark img { border-radius: 12px; border: 1px solid var(--dp-line); } [data-theme="darkpro"] .dp-hub-h1 { font-size: 22px; font-weight: 700; color: var(--dp-ink); margin: 0 0 8px; letter-spacing: -.01em; } [data-theme="darkpro"] .dp-hub-h2 { font-size: 16px; font-weight: 700; margin: 0 0 12px; color: var(--dp-ink); padding: 8px 12px; background: var(--dp-bg2); border-left: 3px solid var(--dp-accent); border-radius: 6px; } [data-theme="darkpro"] .dp-hub-h3 { font-size: 14px; font-weight: 700; margin: 0 0 10px; color: var(--dp-ink-dim); } [data-theme="darkpro"] .dp-hub-lead { font-size: 14px; color: var(--dp-ink-mute); line-height: 1.65; margin: 0; } [data-theme="darkpro"] .dp-hub-badge { display: inline-block; margin-top: 10px; font-size: 13px; color: var(--dp-ink-dim); padding: 4px 10px; border-radius: 6px; background: var(--dp-surface); border: 1px solid var(--dp-line); } [data-theme="darkpro"] .dp-hub-section { margin-bottom: 28px; } [data-theme="darkpro"] .dp-hub-muted { color: var(--dp-ink-mute); font-size: 13px; } [data-theme="darkpro"] .dp-hub-muted a { color: var(--dp-accent4); } [data-theme="darkpro"] .dp-hub-match-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } [data-theme="darkpro"] .dp-hub-match-link { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 12px 14px; background: var(--dp-bg2); border: 1px solid var(--dp-line); border-radius: 8px; text-decoration: none; color: var(--dp-ink); transition: border-color .12s, background .12s; } [data-theme="darkpro"] .dp-hub-match-link:hover { background: var(--dp-surface); border-color: var(--dp-accent4); } [data-theme="darkpro"] .dp-hub-vs em { font-style: normal; color: var(--dp-ink-mute); margin: 0 6px; } [data-theme="darkpro"] .dp-hub-date { font-size: 12px; color: var(--dp-ink-mute); flex-shrink: 0; } [data-theme="darkpro"] .dp-hub-match-vs-wrap { flex: 1 1 200px; min-width: 0; } [data-theme="darkpro"] .dp-hub-match-link .dp-stats-vs { min-width: 0; } /* Stats hub / league hub — logo placeholder when team_img missing */ [data-theme="darkpro"] .dp-stats-logo-fallback { flex-shrink: 0; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; background: var(--dp-surface); border: 1px solid var(--dp-line); border-radius: 4px; font-size: 10px; font-weight: 700; color: var(--dp-ink-mute); } [data-theme="darkpro"] .dp-stats-logo-fallback--sm { width: 20px; height: 20px; font-size: 9px; } /* Sidebar / aside — single-line team names (ellipsis), shared tokens */ [data-theme="darkpro"] .dp-side-team-name, [data-theme="darkpro"] .dp-sb-name, [data-theme="darkpro"] .dp-pred-mini-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [data-theme="darkpro"] .dp-pred-mini-name { font-weight: 500; color: var(--dp-ink-dim); } [data-theme="darkpro"] .dp-pred-card-vsblock.dp-pred-card-vsblock--nowrap { flex-wrap: nowrap; } [data-theme="darkpro"] .dp-pred-card-vsblock--pair { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px 8px; min-width: 0; flex: 1 1 0; max-width: 100%; overflow: hidden; box-sizing: border-box; } [data-theme="darkpro"] .dp-pred-card-vsblock--pair .dp-pred-mini-side { flex: 1 1 0; min-width: 0; } [data-theme="darkpro"] .dp-pred-card-vsblock--pair .dp-pred-card-vs { flex: 0 0 auto; flex-shrink: 0; } [data-theme="darkpro"] .dp-pred-mini-side--home, [data-theme="darkpro"] .dp-pred-mini-side--away { flex: 1 1 0; min-width: 0; } [data-theme="darkpro"] .dp-pred-mini-side .dp-pred-mini-name, [data-theme="darkpro"] .dp-pred-mini-side .dp-sb-name { flex: 1 1 0; min-width: 0; max-width: none; } [data-theme="darkpro"] .dp-pred-card-link--stack-meta .dp-pred-card-meta { flex: 1 0 100%; width: 100%; } [data-theme="darkpro"] .dp-hub-vs--split { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px 10px; min-width: 0; flex: 1 1 auto; } [data-theme="darkpro"] .dp-hub-vs--split .dp-sb-name { flex: 1 1 0; } [data-theme="darkpro"] .dp-hub-vs--split em { flex-shrink: 0; font-style: normal; color: var(--dp-ink-mute); margin: 0 4px; } [data-theme="darkpro"] .dp-related-match-side.dp-stats-side { min-width: 0; } /* Stats sidebar — today’s fixtures line */ [data-theme="darkpro"] .dp-pred-card-link--matchline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; width: 100%; max-width: 100%; overflow: hidden; box-sizing: border-box; } [data-theme="darkpro"] .dp-pred-card-link--matchline > .dp-pred-card-time { flex: 0 0 auto; flex-shrink: 0; } [data-theme="darkpro"] .dp-pred-card-vsblock { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px 8px; min-width: 0; flex: 1 1 0; max-width: 100%; overflow: hidden; box-sizing: border-box; } [data-theme="darkpro"] .dp-pred-card-vsblock .dp-pred-card-vs { flex: 0 0 auto; flex-shrink: 0; } [data-theme="darkpro"] .dp-pred-mini-side { display: flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; } [data-theme="darkpro"] .dp-pred-mini-side img { flex-shrink: 0; width: 18px; height: 18px; border-radius: 3px; object-fit: contain; } [data-theme="darkpro"] .dp-pred-mini-fallback { flex-shrink: 0; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; background: var(--dp-surface); border: 1px solid var(--dp-line); border-radius: 3px; font-size: 9px; font-weight: 700; color: var(--dp-ink-mute); } /* Sidebar — program / league logo + fallback (db_program.pg_img → images/programs/thumbs/) */ [data-theme="darkpro"] .dp-pred-sb-program-logo { flex-shrink: 0; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; } [data-theme="darkpro"] .dp-pred-sb-program-logo img { width: 20px; height: 20px; border-radius: 4px; object-fit: contain; flex-shrink: 0; } [data-theme="darkpro"] .dp-pred-sb-program-logo--rank { width: 18px; height: 18px; } [data-theme="darkpro"] .dp-pred-sb-program-logo--rank img { width: 18px; height: 18px; border-radius: 3px; } [data-theme="darkpro"] .dp-pred-program-fallback { flex-shrink: 0; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; background: var(--dp-surface); border: 1px solid var(--dp-line); border-radius: 4px; font-size: 9px; font-weight: 700; color: var(--dp-ink-mute); } [data-theme="darkpro"] .dp-pred-sb-program-logo--rank .dp-pred-program-fallback { width: 18px; height: 18px; border-radius: 3px; font-size: 8px; } [data-theme="darkpro"] .dp-pred-program-fallback--semantic { width: 22px; height: 22px; font-size: 10px; } [data-theme="darkpro"] .dp-pred-card-link--program { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; font-weight: 600; color: var(--dp-accent4); } [data-theme="darkpro"] .dp-pred-card-link--program:hover { color: var(--dp-accent); text-decoration: none; } [data-theme="darkpro"] .dp-pred-card-link--program-static { cursor: default; color: var(--dp-ink-dim); pointer-events: none; } [data-theme="darkpro"] .dp-pred-program-name { flex: 1 1 0; min-width: 0; font-size: 12.5px; } /* Odds teaser row — center: vs + handicap */ [data-theme="darkpro"] .dp-pred-card-vs--with-odds { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; flex-shrink: 0; min-width: 36px; max-width: 52px; text-align: center; line-height: 1.15; } [data-theme="darkpro"] .dp-pred-card-vs--with-odds em { font-style: normal; font-size: 10px; color: var(--dp-ink-mute); margin: 0; } [data-theme="darkpro"] .dp-pred-card-odds-mini { font-size: 10px; font-weight: 700; color: var(--dp-accent); white-space: nowrap; } [data-theme="darkpro"] .dp-semantic-p--league-feature { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; } [data-theme="darkpro"] .dp-semantic-league-mark { flex-shrink: 0; margin-top: 2px; } [data-theme="darkpro"] .dp-semantic-league-mark img { width: 22px; height: 22px; border-radius: 4px; object-fit: contain; vertical-align: middle; flex-shrink: 0; } [data-theme="darkpro"] .dp-semantic-odds--rich.dp-semantic-odds > li.dp-pred-card-row { margin-bottom: 0; font-size: inherit; } [data-theme="darkpro"] .dp-rank-league-link--with-logo { display: flex; align-items: center; gap: 8px; min-width: 0; white-space: normal; } [data-theme="darkpro"] .dp-rank-league-link--with-logo .dp-rank-league-link-text { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Stats detail — related fixtures row */ [data-theme="darkpro"] .dp-related-match-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; text-decoration: none; color: var(--dp-accent4); font-weight: 600; min-width: 0; max-width: 100%; overflow: hidden; box-sizing: border-box; } [data-theme="darkpro"] .dp-related-match-row:hover .dp-stats-team { color: var(--dp-accent); } [data-theme="darkpro"] .dp-related-match-vs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; flex: 1 1 0; min-width: 0; max-width: 100%; overflow: hidden; } [data-theme="darkpro"] .dp-related-match-side { font-size: 13px; } [data-theme="darkpro"] .dp-related-match-side img { border-radius: 4px; } [data-theme="darkpro"] .dp-related-match-mid { min-width: 48px; text-align: center; } [data-theme="darkpro"] .dp-related-match-li .dp-related-meta { margin-top: 0; } [data-theme="darkpro"] .dp-related-match-row > .dp-related-meta { flex: 0 0 auto; flex-shrink: 0; } [data-theme="darkpro"] .dp-hub-inline-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 14px; } [data-theme="darkpro"] .dp-hub-inline-links a { color: var(--dp-accent4); font-weight: 600; font-size: 13px; } [data-theme="darkpro"] .dp-hub-inline-teams { align-items: center; } [data-theme="darkpro"] .dp-hub-inline-teams li { display: inline-flex; align-items: center; max-width: 100%; } [data-theme="darkpro"] .dp-hub-inline-teams .dp-rank-team-name { font-size: 13px; font-weight: 600; } [data-theme="darkpro"] .dp-semantic-strip { padding: 8px 0 20px; } [data-theme="darkpro"] .dp-semantic-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } [data-theme="darkpro"] .dp-semantic-card { background: var(--dp-bg2); border: 1px solid var(--dp-line); border-radius: 10px; padding: 14px 16px; } [data-theme="darkpro"] .dp-semantic-h { font-size: 14px; font-weight: 700; color: var(--dp-ink); margin: 0 0 8px; } [data-theme="darkpro"] .dp-semantic-p { font-size: 13px; color: var(--dp-ink-mute); line-height: 1.65; margin: 0; } [data-theme="darkpro"] .dp-semantic-p a { color: var(--dp-accent4); font-weight: 600; text-decoration: none; } [data-theme="darkpro"] .dp-semantic-p a:hover { text-decoration: underline; } [data-theme="darkpro"] .dp-semantic-odds { list-style: none; margin: 0; padding: 0; } [data-theme="darkpro"] .dp-semantic-odds li { margin-bottom: 8px; font-size: 13px; } [data-theme="darkpro"] .dp-semantic-odds a { color: var(--dp-accent4); font-weight: 600; } [data-theme="darkpro"] .dp-semantic-meta { color: var(--dp-ink-mute); font-size: 11px; margin-left: 8px; } [data-theme="darkpro"] .dp-semantic-foot { margin: 10px 0 0; font-size: 12px; } [data-theme="darkpro"] .dp-semantic-foot a { color: var(--dp-accent); font-weight: 700; } @media (max-width: 768px) { [data-theme="darkpro"] .dp-semantic-grid { grid-template-columns: 1fr; } } /* ══════════════════════════════════════════════════════════ PREDICTION PAGES — hero, sidebar, semantic blocks (Modules A–I, mobile-first; reuses dp-card / dp-grid tokens) ══════════════════════════════════════════════════════════ */ [data-theme="darkpro"] .dp-pred-page { padding: 14px 0 56px; } [data-theme="darkpro"] .dp-pred-hero { padding: 18px 18px 16px; margin-bottom: 14px; background: linear-gradient(180deg, var(--dp-surface), var(--dp-bg2)); border: 1px solid var(--dp-line); border-radius: 12px; } [data-theme="darkpro"] .dp-pred-hero-eyebrow { font-size: 12px; color: var(--dp-accent4); letter-spacing: .04em; margin-bottom: 6px; text-transform: uppercase; } [data-theme="darkpro"] .dp-pred-h1 { font-size: clamp(20px, 2.4vw, 26px); font-weight: 800; color: var(--dp-ink); margin: 0 0 8px; letter-spacing: -.01em; line-height: 1.25; } [data-theme="darkpro"] .dp-pred-lead { font-size: 14px; color: var(--dp-ink-mute); line-height: 1.65; margin: 0 0 14px; max-width: 64ch; } [data-theme="darkpro"] .dp-pred-meta { display: flex; flex-wrap: wrap; gap: 10px; } [data-theme="darkpro"] .dp-pred-stat { flex: 1 1 80px; min-width: 80px; padding: 8px 10px; border-radius: 8px; background: var(--dp-bg2); border: 1px solid var(--dp-line); text-align: center; } [data-theme="darkpro"] .dp-pred-stat-num { font-size: 18px; font-weight: 800; color: var(--dp-ink); line-height: 1.1; } [data-theme="darkpro"] .dp-pred-stat-lbl { font-size: 11px; color: var(--dp-ink-mute); margin-top: 2px; } /* League hub — page rhythm + hero links (reuses .dp-pred-hero) */ [data-theme="darkpro"] .dp-league-hub { padding: 14px 0 56px; } [data-theme="darkpro"] .dp-league-hero .dp-pred-lead a { color: var(--dp-accent4); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } [data-theme="darkpro"] .dp-league-hero .dp-pred-lead a:hover { color: var(--dp-accent); } [data-theme="darkpro"] .dp-league-hero-tablemeta { margin: -4px 0 14px; font-size: 12px; color: var(--dp-ink-mute); line-height: 1.5; } [data-theme="darkpro"] .dp-league-hero-tablemeta time { color: var(--dp-ink-dim); font-weight: 600; } /* Date nav */ [data-theme="darkpro"] .dp-pred-datenav { display: flex; gap: 8px; align-items: stretch; margin: 0 0 14px; } [data-theme="darkpro"] .dp-pred-datenav-now { flex: 1; display: flex; align-items: center; justify-content: center; padding: 10px 14px; border-radius: 8px; background: var(--dp-bg2); border: 1px solid var(--dp-line); font-size: 13px; color: var(--dp-ink); text-align: center; } [data-theme="darkpro"] .dp-pred-datenav-btn { padding: 10px 14px; border-radius: 8px; text-decoration: none; background: var(--dp-surface); border: 1px solid var(--dp-line); color: var(--dp-accent4); font-weight: 600; font-size: 12.5px; white-space: nowrap; transition: border-color .12s, background .12s; } [data-theme="darkpro"] .dp-pred-datenav-btn:hover { border-color: var(--dp-accent4); background: var(--dp-bg2); color: var(--dp-accent); } /* SEO intro */ [data-theme="darkpro"] .dp-pred-intro { padding: 12px 16px; margin: 0 0 14px; border-left: 3px solid var(--dp-accent); background: var(--dp-bg2); border-radius: 6px; } [data-theme="darkpro"] .dp-pred-intro-h { font-size: 14px; font-weight: 700; color: var(--dp-ink); margin: 0 0 4px; } [data-theme="darkpro"] .dp-pred-intro-p { font-size: 13px; color: var(--dp-ink-mute); line-height: 1.6; margin: 0; } /* Main grid: cards + sidebar (sticky on desktop, stacked on mobile) */ [data-theme="darkpro"] .dp-pred-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 18px; } [data-theme="darkpro"] .dp-pred-main { min-width: 0; } [data-theme="darkpro"] .dp-pred-aside { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 16px; align-self: start; min-width: 0; max-width: 100%; } /* Sidebar cards */ [data-theme="darkpro"] .dp-pred-card { background: var(--dp-surface); border: 1px solid var(--dp-line); border-radius: 10px; padding: 12px 14px; min-width: 0; max-width: 100%; overflow-x: hidden; box-sizing: border-box; } [data-theme="darkpro"] .dp-pred-card-h { font-size: 13px; font-weight: 700; color: var(--dp-ink); margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px dashed var(--dp-line); } [data-theme="darkpro"] .dp-pred-card-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; max-width: 100%; } [data-theme="darkpro"] .dp-pred-card-list a { color: var(--dp-accent4); text-decoration: none; font-size: 12.5px; font-weight: 600; } [data-theme="darkpro"] .dp-pred-card-list a:hover { text-decoration: underline; color: var(--dp-accent); } [data-theme="darkpro"] .dp-pred-card-row { display: block; padding: 4px 0; border-bottom: 1px solid var(--dp-line); min-width: 0; max-width: 100%; } [data-theme="darkpro"] .dp-pred-card-row:last-child { border-bottom: none; } [data-theme="darkpro"] .dp-pred-card-link { display: block; color: var(--dp-ink); font-size: 12.5px; line-height: 1.4; text-decoration: none; } [data-theme="darkpro"] .dp-pred-card-link:hover .dp-pred-card-vs { color: var(--dp-accent4); } [data-theme="darkpro"] .dp-pred-card-time { display: inline-block; font-size: 11px; color: var(--dp-accent); font-weight: 700; margin-right: 6px; min-width: 36px; } [data-theme="darkpro"] .dp-pred-card-vs { color: var(--dp-ink-dim); font-weight: 500; } [data-theme="darkpro"] .dp-pred-card-vs em { font-style: normal; color: var(--dp-ink-mute); margin: 0 4px; } [data-theme="darkpro"] .dp-pred-card-meta { display: block; font-size: 11px; color: var(--dp-ink-mute); margin-top: 2px; } [data-theme="darkpro"] .dp-pred-card-foot { margin: 8px 0 0; font-size: 12px; } [data-theme="darkpro"] .dp-pred-card-foot a { color: var(--dp-accent4); font-weight: 600; } [data-theme="darkpro"] .dp-pred-card-list--cross { display: flex; flex-wrap: wrap; gap: 6px 10px; flex-direction: row; } /* Aside: plain list links (ลีกยอดนิยม / ลีกเด่น…) — ellipsis without expanding card */ [data-theme="darkpro"] .dp-pred-aside .dp-pred-card-list:not(.dp-pred-card-list--cross) > li:not(.dp-pred-card-row--program) > a:not(.dp-pred-card-link--matchline), [data-theme="darkpro"] .dp-pred-aside .dp-pred-card-list:not(.dp-pred-card-list--cross) > li:not(.dp-pred-card-row--program) > span { display: block; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [data-theme="darkpro"] .dp-pred-aside .dp-pred-card-list--cross > li { min-width: 0; max-width: 100%; } [data-theme="darkpro"] .dp-pred-aside .dp-pred-card-list--cross > li > a { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: top; } /* Related rail (reuses .dp-related-nav) */ [data-theme="darkpro"] .dp-pred-related-nav { margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--dp-line); } /* Bottom semantic content */ [data-theme="darkpro"] .dp-pred-bottom { margin-top: 22px; display: grid; gap: 12px; } [data-theme="darkpro"] .dp-pred-bottom-block { padding: 14px 16px; border-radius: 10px; background: var(--dp-bg2); border: 1px solid var(--dp-line); } [data-theme="darkpro"] .dp-pred-bottom-h2 { font-size: 16px; font-weight: 700; color: var(--dp-ink); margin: 0 0 6px; } [data-theme="darkpro"] .dp-pred-bottom-h3 { font-size: 14px; font-weight: 700; color: var(--dp-ink-dim); margin: 0 0 6px; } [data-theme="darkpro"] .dp-pred-bottom-block p { font-size: 13px; color: var(--dp-ink-mute); line-height: 1.7; margin: 0; } [data-theme="darkpro"] .dp-pred-bottom-block a { color: var(--dp-accent4); font-weight: 600; } [data-theme="darkpro"] .dp-pred-bottom-block a:hover { color: var(--dp-accent); text-decoration: underline; } /* ── Mobile (Module I) ── */ @media (max-width: 1024px) { [data-theme="darkpro"] .dp-pred-grid { grid-template-columns: 1fr; } [data-theme="darkpro"] .dp-pred-aside { position: static; max-height: none; overflow: visible; flex-direction: column; } } @media (max-width: 640px) { [data-theme="darkpro"] .dp-pred-hero { padding: 14px; } [data-theme="darkpro"] .dp-pred-h1 { font-size: 18px; } [data-theme="darkpro"] .dp-pred-lead { font-size: 13px; } [data-theme="darkpro"] .dp-pred-stat { flex-basis: calc(50% - 5px); } [data-theme="darkpro"] .dp-pred-datenav { flex-direction: column; } [data-theme="darkpro"] .dp-pred-datenav-btn { text-align: center; } [data-theme="darkpro"] .dp-pred-datenav-now { order: -1; } [data-theme="darkpro"] .dp-pred-bottom-h2 { font-size: 15px; } [data-theme="darkpro"] .dp-pred-related-nav a { font-size: 12.5px; padding: 5px 10px; } } /* ══════════════════════════════════════════════════════════ /stats hub — search · list · pager ══════════════════════════════════════════════════════════ */ [data-theme="darkpro"] .dp-stats-hub { padding: 14px 0 56px; } [data-theme="darkpro"] .dp-stats-search { margin: 0 0 16px; padding: 12px 14px; background: var(--dp-surface); border: 1px solid var(--dp-line); border-radius: 10px; } [data-theme="darkpro"] .dp-stats-search-label { display: block; font-size: 12px; color: var(--dp-ink-mute); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; } [data-theme="darkpro"] .dp-stats-search-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } [data-theme="darkpro"] .dp-stats-search-input { flex: 1 1 220px; min-width: 0; padding: 9px 12px; border-radius: 8px; background: var(--dp-bg2); border: 1px solid var(--dp-line); color: var(--dp-ink); font-size: 14px; } [data-theme="darkpro"] .dp-stats-search-input:focus { outline: none; border-color: var(--dp-accent4); box-shadow: 0 0 0 2px color-mix(in oklch, var(--dp-accent4) 20%, transparent); } [data-theme="darkpro"] .dp-stats-search-btn { padding: 9px 16px; border-radius: 8px; border: 1px solid var(--dp-accent4); background: var(--dp-accent4); color: #0b0d12; font-weight: 700; font-size: 13px; cursor: pointer; transition: filter .12s; } [data-theme="darkpro"] .dp-stats-search-btn:hover { filter: brightness(1.08); } [data-theme="darkpro"] .dp-stats-search-reset { font-size: 12.5px; color: var(--dp-ink-mute); text-decoration: none; padding: 4px 8px; } [data-theme="darkpro"] .dp-stats-search-reset:hover { color: var(--dp-accent); text-decoration: underline; } [data-theme="darkpro"] .dp-stats-active-filter { margin-top: 8px; font-size: 12.5px; color: var(--dp-ink-dim); } [data-theme="darkpro"] .dp-stats-active-filter strong { color: var(--dp-ink); } [data-theme="darkpro"] .dp-stats-active-filter a { color: var(--dp-accent4); margin-left: 8px; font-weight: 600; text-decoration: none; } [data-theme="darkpro"] .dp-stats-active-filter a:hover { text-decoration: underline; } /* List */ [data-theme="darkpro"] .dp-stats-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } [data-theme="darkpro"] .dp-stats-item { background: var(--dp-bg2); border: 1px solid var(--dp-line); border-radius: 10px; padding: 10px 14px; } [data-theme="darkpro"] .dp-stats-link { display: block; color: var(--dp-ink); text-decoration: none; } [data-theme="darkpro"] .dp-stats-link:hover .dp-stats-team { color: var(--dp-accent4); } [data-theme="darkpro"] .dp-stats-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; font-size: 11.5px; color: var(--dp-ink-mute); margin-bottom: 6px; } [data-theme="darkpro"] .dp-stats-league { color: var(--dp-accent4); font-weight: 600; } [data-theme="darkpro"] .dp-stats-vs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; min-width: 0; } [data-theme="darkpro"] .dp-stats-side { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--dp-ink); min-width: 0; } [data-theme="darkpro"] .dp-stats-side--away { justify-content: flex-end; text-align: right; } [data-theme="darkpro"] .dp-stats-side img { border-radius: 4px; flex-shrink: 0; } [data-theme="darkpro"] .dp-stats-team { font-weight: 600; min-width: 0; flex: 1 1 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [data-theme="darkpro"] .dp-stats-result { min-width: 56px; text-align: center; font-size: 13px; padding: 3px 8px; border-radius: 6px; background: var(--dp-surface); border: 1px solid var(--dp-line); color: var(--dp-ink-mute); font-weight: 700; } [data-theme="darkpro"] .dp-stats-score { color: var(--dp-accent); } [data-theme="darkpro"] .dp-stats-vs-label { color: var(--dp-ink-mute); font-size: 11px; letter-spacing: .04em; } [data-theme="darkpro"] .dp-stats-league-link { display: inline-block; margin-top: 6px; font-size: 11.5px; color: var(--dp-ink-mute); text-decoration: none; } [data-theme="darkpro"] .dp-stats-league-link:hover { color: var(--dp-accent4); text-decoration: underline; } /* Empty state */ [data-theme="darkpro"] .dp-stats-empty { padding: 28px 18px; text-align: center; background: var(--dp-bg2); border: 1px dashed var(--dp-line); border-radius: 10px; } [data-theme="darkpro"] .dp-stats-empty h2 { font-size: 16px; color: var(--dp-ink); margin: 0 0 6px; } [data-theme="darkpro"] .dp-stats-empty p { font-size: 13px; color: var(--dp-ink-mute); margin: 0; } [data-theme="darkpro"] .dp-stats-empty a { color: var(--dp-accent4); font-weight: 600; } /* Pager */ [data-theme="darkpro"] .dp-stats-pager { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; margin: 18px 0 0; } [data-theme="darkpro"] .dp-stats-pager-btn, [data-theme="darkpro"] .dp-stats-pager-num { padding: 7px 11px; border-radius: 6px; font-size: 12.5px; font-weight: 600; background: var(--dp-bg2); border: 1px solid var(--dp-line); color: var(--dp-accent4); text-decoration: none; transition: border-color .12s, background .12s; min-width: 36px; text-align: center; } [data-theme="darkpro"] .dp-stats-pager-btn:hover, [data-theme="darkpro"] .dp-stats-pager-num:hover { border-color: var(--dp-accent4); background: var(--dp-surface); } [data-theme="darkpro"] .dp-stats-pager-num.is-current { background: var(--dp-accent4); color: #0b0d12; border-color: var(--dp-accent4); } [data-theme="darkpro"] .dp-stats-pager-btn.is-disabled { opacity: .45; cursor: not-allowed; pointer-events: none; color: var(--dp-ink-mute); } [data-theme="darkpro"] .dp-stats-pager-gap { color: var(--dp-ink-mute); padding: 0 4px; } /* Sidebar active league chip */ [data-theme="darkpro"] .dp-pred-card-list a.is-active { color: var(--dp-accent); } @media (max-width: 640px) { [data-theme="darkpro"] .dp-stats-vs { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 6px; } [data-theme="darkpro"] .dp-stats-team { font-size: 12.5px; } [data-theme="darkpro"] .dp-stats-result { min-width: 50px; padding: 3px 6px; font-size: 12px; } }