* { box-sizing: border-box; } html { color-scheme: light; } body { margin: 0; font-family: var(--font-sans); -webkit-font-smoothing: antialiased; } button, select { font: inherit; } button { cursor: pointer; } button:disabled { cursor: not-allowed; opacity: .68; } a:focus-visible, button:focus-visible, select:focus-visible { outline: 3px solid #f1be50; outline-offset: 3px; }.skip-link { position: fixed; z-index: 20; left: 16px; top: -50px; padding: 8px 11px; color: white; background: var(--color-ink); border-radius: 0 0 var(--radius-sm) var(--radius-sm); text-decoration: none; font-size: .75rem; }.skip-link:focus { top: 0; }.app-bar { display: flex; align-items: center; justify-content: space-between; height: 76px; border-bottom: 1px solid var(--color-line); }.brand { display: flex; align-items: center; gap: 9px; color: var(--color-ink); font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-decoration: none; }.brand b { font-weight: 500; }.brand-shield { display: grid; place-items: center; width: 28px; height: 32px; clip-path: polygon(50% 0,100% 18%,100% 73%,50% 100%,0 73%,0 18%); color: white; background: var(--color-green); font-size: .85rem; letter-spacing: 0; }.profile-button { width: 34px; height: 34px; border: 0; border-radius: 50%; color: var(--color-green); background: #fff1ce; font-size: .65rem; font-weight: 800; }.eyebrow { margin: 0 0 var(--space-2); color: var(--color-green); font: 600 .65rem var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }.button { border: 0; border-radius: var(--radius-sm); padding: 11px 14px; font-size: .75rem; font-weight: 800; }.button--primary { color: #1a1308; background: #e5a128; }.button--primary:hover { background: #f4bf4b; }.button--secondary { color: var(--color-ink); background: white; border: 1px solid var(--color-line); }.section-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }.section-header h2 { margin: 0; font-size: .94rem; letter-spacing: -.025em; }.section-header a { color: var(--color-green); font-size: .72rem; font-weight: 800; text-decoration: none; }.state { display: grid; justify-items: center; padding: var(--space-9) var(--space-5); text-align: center; border: 1px dashed #e0d0b5; border-radius: var(--radius-lg); background: var(--color-surface); }.state-icon { display: grid; place-items: center; width: 33px; height: 33px; margin-bottom: var(--space-3); border-radius: 50%; color: var(--color-green); background: var(--color-mint); font-weight: 800; }.state h1, .state h2 { margin: 0; color: var(--color-ink); font-size: .95rem; letter-spacing: -.02em; }.state p { max-width: 470px; margin: var(--space-2) 0 0; color: var(--color-muted); font-size: .75rem; line-height: 1.6; }.state .button { margin-top: var(--space-5); }.state--error { border-style: solid; border-color: #f0cbc6; background: var(--color-danger-bg); }.state--error .state-icon { color: var(--color-danger); background: #fbdad6; }.state--loading { display: flex; align-items: center; justify-content: center; gap: var(--space-3); min-height: 120px; color: var(--color-muted); font-size: .75rem; }.loading-spinner { width: 18px; height: 18px; border: 2px solid #eadcc1; border-top-color: var(--color-green); border-radius: 50%; animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } }.date-selector { display: flex; flex-direction: column; gap: 4px; color: var(--color-muted); font-size: .62rem; font-weight: 700; }.date-selector select { min-width: 124px; padding: 8px 27px 8px 9px; color: var(--color-ink); border: 1px solid var(--color-line); border-radius: 7px; background: white; font-size: .72rem; font-weight: 700; }.premium-lock { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-5); padding: var(--space-4); border: 1px solid #f0d9a4; border-radius: var(--radius-md); background: var(--color-warning-bg); }.premium-lock > span { color: var(--color-warning); }.premium-lock p { flex: 1; margin: 0; color: #77520f; font-size: .72rem; line-height: 1.5; }.premium-lock .button { flex: none; }.league-badge { display: inline-flex; align-items: center; max-width: 145px; padding: 5px 7px; overflow: hidden; border-radius: 5px; color: var(--color-ink-soft); background: var(--color-mint); font: 600 .58rem var(--font-mono); white-space: nowrap; text-overflow: ellipsis; }.match-card { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--color-line); border-radius: var(--radius-md); background: white; }.match-teams { display: flex; gap: 7px; align-items: center; font-size: .78rem; }.match-teams span, .match-card small { color: var(--color-muted); font-size: .67rem; }.match-card small { display: block; margin-top: 4px; }.prediction-card { position: relative; padding: var(--space-4); border: 1px solid var(--color-line); border-radius: var(--radius-md); background: white; }.prediction-card .match-card { padding: 0 0 var(--space-3); border: 0; border-bottom: 1px solid var(--color-line); border-radius: 0; }.prediction-card__footer { display: flex; align-items: end; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-3); }.prediction-card__footer small, .prediction-card__footer strong { display: block; }.prediction-card__footer small { color: var(--color-muted); font-size: .58rem; }.prediction-card__footer strong { margin: 2px 0 5px; font-size: .72rem; }.prediction-signals { display: flex; align-items: center; gap: var(--space-2); }.percentage { --percentage: 0; display: grid; place-items: center; width: 37px; height: 37px; border-radius: 50%; background: conic-gradient(var(--color-green) calc(var(--percentage) * 1%), #eee0c7 0); color: var(--color-ink); font: 700 .58rem var(--font-mono); }.percentage::before { content: ''; position: absolute; width: 29px; height: 29px; border-radius: 50%; background: white; }.percentage span { position: relative; }.percentage--unavailable { color: var(--color-muted); background: #fbf4e6; }.confidence { padding: 5px 6px; border-radius: 5px; font-size: .58rem; font-weight: 800; }.confidence--unavailable { color: var(--color-muted); background: #f4ede1; }.development-badge { position: absolute; top: -8px; left: 12px; padding: 3px 6px; border-radius: 4px; color: #745114; background: #fff0c7; font: 600 .55rem var(--font-mono); text-transform: uppercase; }.bottom-navigation { display: none; }
@media (max-width: 760px) { .app-bar { height: 65px; }.bottom-navigation { position: fixed; z-index: 5; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-around; height: calc(67px + env(safe-area-inset-bottom)); padding: 8px 7px env(safe-area-inset-bottom); border-top: 1px solid var(--color-line); background: rgba(255,255,255,.96); backdrop-filter: blur(12px); }.bottom-navigation a { display: grid; place-items: center; align-content: center; gap: 2px; min-width: 69px; color: var(--color-muted); font-size: .58rem; font-weight: 700; text-decoration: none; }.bottom-navigation a span { font-size: 1.05rem; }.bottom-navigation a.active { color: var(--color-green); }.premium-lock { align-items: flex-start; flex-wrap: wrap; }.premium-lock .button { margin-left: 25px; } }