:root {
  --ink: #10221d;
  --muted: #66736f;
  --forest: #071a16;
  --forest-2: #12342a;
  --cream: #f4f2ea;
  --paper: #fffdf7;
  --gold: #d7b45b;
  --gold-soft: #f2e5bd;
  --green: #1f7a55;
  --amber: #a86216;
  --red: #a84237;
  --line: #dfe3dc;
  --shadow: 0 14px 40px rgba(7, 26, 22, .10);
  --radius: 22px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--cream); color: var(--ink); }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 90% -10%, rgba(215,180,91,.22), transparent 33rem), var(--cream); }
button, input, select { font: inherit; }
a { color: inherit; }
.app-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; min-height: 74px; padding: calc(10px + env(safe-area-inset-top)) clamp(18px,4vw,48px) 10px; color: #fff; background: rgba(7,26,22,.94); backdrop-filter: blur(18px); }
.brand { display: flex; gap: 12px; align-items: center; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(215,180,91,.7); border-radius: 50%; color: var(--gold); font-family: Georgia,serif; font-weight: 800; }
.brand strong, .brand small { display: block; }
.brand strong { font-family: Georgia,serif; font-size: 1.24rem; letter-spacing: .02em; }
.brand small { margin-top: 1px; color: #aab9b4; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.icon-button, .primary-button { border: 0; border-radius: 999px; padding: 10px 16px; color: var(--forest); background: var(--gold); font-weight: 800; cursor: pointer; }
main { width: min(1080px, 100%); margin: 0 auto; padding: 22px clamp(16px,4vw,36px) 116px; }
.hero { position: relative; overflow: hidden; padding: clamp(24px,6vw,54px); border-radius: 30px; color: #fff; background: linear-gradient(135deg,var(--forest),var(--forest-2)); box-shadow: var(--shadow); }
.hero::after { content:""; position:absolute; width:260px; height:260px; right:-90px; top:-100px; border:1px solid rgba(215,180,91,.35); border-radius:50%; box-shadow:0 0 0 34px rgba(215,180,91,.06),0 0 0 68px rgba(215,180,91,.04); }
.eyebrow { margin: 0 0 10px; color: var(--gold); font-size: .74rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.hero h1 { position:relative; z-index:1; max-width: 680px; margin: 0; font-family: Georgia,serif; font-size: clamp(2rem,8vw,4rem); line-height: .98; font-weight: 500; }
.hero-intro { position:relative; z-index:1; max-width: 650px; margin: 18px 0 0; color:#d7e0dc; font-size: clamp(.98rem,2.5vw,1.1rem); line-height:1.6; }
.hero-meta { position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.meta-pill { padding:8px 11px; border:1px solid rgba(255,255,255,.14); border-radius:999px; background:rgba(255,255,255,.08); font-size:.78rem; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:18px; margin:32px 2px 14px; }
.section-heading h2 { margin:0; font-family:Georgia,serif; font-size:1.55rem; font-weight:600; }
.section-heading p { margin:4px 0 0; color:var(--muted); font-size:.84rem; }
.best-pick { margin-top:18px; padding:22px; border:1px solid rgba(16,34,29,.08); border-radius:var(--radius); background:var(--paper); box-shadow:0 8px 24px rgba(7,26,22,.06); }
.best-pick-row { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; }
.best-pick h2 { margin:0; font-family:Georgia,serif; font-size:clamp(1.45rem,5vw,2rem); font-weight:600; }
.best-pick-row p { margin:6px 0 0; color:var(--muted); }
.best-score { flex:none; text-align:right; color:var(--green); }
.best-score strong,.best-score small { display:block; }
.best-score strong { font-family:Georgia,serif; font-size:1.65rem; }
.best-score small { color:var(--muted); font-size:.65rem; text-transform:uppercase; }
.best-model { display:inline-block; margin-top:15px; padding:7px 10px; border-radius:999px; color:#145a3d; background:#dcefe5; font-size:.72rem; font-weight:800; }
.market-list { display:grid; gap:11px; }
.market-section { overflow:hidden; border:1px solid rgba(16,34,29,.09); border-radius:18px; background:var(--paper); box-shadow:0 6px 20px rgba(7,26,22,.045); }
.market-section > summary { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:17px; cursor:pointer; list-style:none; }
.market-section > summary::-webkit-details-marker,.reason-toggle summary::-webkit-details-marker { display:none; }
.market-title { display:flex; align-items:center; gap:12px; }
.market-title h3 { margin:0; font-family:Georgia,serif; font-size:1.1rem; }
.market-title p { margin:3px 0 0; color:var(--muted); font-size:.74rem; }
.market-icon { display:grid; place-items:center; width:36px; height:36px; border-radius:11px; color:var(--forest); background:var(--gold-soft); font-weight:900; }
.section-chevron { color:var(--muted); transition:transform .18s ease; }
.market-section[open] > summary .section-chevron { transform:rotate(180deg); }
.market-picks { padding:0 17px 5px; border-top:1px solid var(--line); }
.market-pick { padding:16px 0; border-bottom:1px solid var(--line); }
.market-pick:last-child { border-bottom:0; }
.market-pick-row { display:flex; align-items:flex-start; gap:11px; }
.market-selection { margin:8px 0 0; font-size:.92rem; font-weight:800; }
.market-selection span { color:var(--muted); font-weight:500; }
.market-score { margin-left:auto; flex:none; text-align:right; color:var(--green); }
.market-score strong,.market-score small { display:block; }
.market-score strong { font-size:1rem; }
.market-score small { max-width:92px; color:var(--muted); font-size:.63rem; }
.reason-toggle { margin:12px 0 0 49px; }
.reason-toggle summary { display:flex; align-items:center; justify-content:space-between; color:var(--green); cursor:pointer; list-style:none; font-size:.77rem; font-weight:800; }
.reason-toggle summary span { transition:transform .18s ease; }
.reason-toggle[open] summary span { transform:rotate(45deg); }
.reason-body { margin-top:10px; padding:13px; border-radius:13px; background:#f3f4ef; color:#465650; font-size:.82rem; line-height:1.55; }
.reason-body p { margin:0; }
.reason-body ul { margin:8px 0 0; padding-left:18px; }
.evidence-strip { display:flex; gap:18px; flex-wrap:wrap; margin-top:12px; padding-top:11px; border-top:1px solid var(--line); }
.evidence-strip small,.evidence-strip strong { display:block; }
.evidence-strip small { color:var(--muted); }
.pick-grid { display:grid; gap:14px; }
.pick-card { overflow:hidden; border:1px solid rgba(16,34,29,.08); border-radius:var(--radius); background:var(--paper); box-shadow:0 8px 24px rgba(7,26,22,.06); }
.pick-card summary { list-style:none; cursor:pointer; padding:18px; }
.pick-card summary::-webkit-details-marker { display:none; }
.pick-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.pick-rank { display:grid; place-items:center; flex:0 0 38px; width:38px; height:38px; border-radius:12px; color:var(--forest); background:var(--gold-soft); font-family:Georgia,serif; font-weight:800; }
.pick-main { flex:1; min-width:0; }
.pick-fixture { margin:0; font-size:1rem; font-weight:850; }
.pick-sub { margin:4px 0 0; color:var(--muted); font-size:.75rem; }
.confidence { flex:0 0 auto; padding:6px 9px; border-radius:999px; font-size:.66rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.confidence.high { color:#145a3d; background:#dcefe5; }
.confidence.medium { color:#754310; background:#f7e5c5; }
.confidence.low { color:#7e3029; background:#f4deda; }
.selection { display:flex; align-items:end; justify-content:space-between; gap:12px; margin-top:18px; padding-top:15px; border-top:1px solid var(--line); }
.selection small { display:block; margin-bottom:3px; color:var(--muted); font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; }
.selection strong { font-size:1.08rem; }
.agreement { color:var(--green); font-size:.75rem; font-weight:800; text-align:right; }
.pick-summary { margin:13px 0 0; color:#465650; font-size:.88rem; line-height:1.5; }
.expand-label { display:block; margin-top:12px; color:var(--green); font-size:.75rem; font-weight:800; }
.pick-detail { padding:0 18px 20px; border-top:1px solid var(--line); }
.detail-grid { display:grid; gap:14px; padding-top:17px; }
.detail-block { padding:14px; border-radius:14px; background:#f3f4ef; }
.detail-block h3 { margin:0 0 8px; font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; }
.detail-block ul { margin:0; padding-left:18px; color:#465650; font-size:.84rem; line-height:1.55; }
.evidence-row { display:flex; justify-content:space-between; gap:14px; padding:7px 0; border-bottom:1px solid #dfe3dc; font-size:.8rem; }
.evidence-row:last-child { border:0; }
.evidence-row span { color:var(--muted); }
.panel-grid { display:grid; gap:14px; }
.panel { padding:20px; border:1px solid rgba(16,34,29,.08); border-radius:var(--radius); background:var(--paper); }
.panel h3 { margin:0 0 12px; font-family:Georgia,serif; font-size:1.2rem; }
.leg-list { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.leg-list li { padding:10px 12px; border-radius:10px; background:#f1f2ed; font-size:.84rem; }
.performance-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; overflow:hidden; border-radius:18px; background:var(--line); }
.stat { padding:17px 10px; text-align:center; background:var(--paper); }
.stat strong { display:block; font-family:Georgia,serif; font-size:1.55rem; }
.stat span { color:var(--muted); font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; }
.sport-tabs { display:flex; gap:8px; overflow:auto; margin:18px 0; padding-bottom:3px; scrollbar-width:none; }
.sport-tabs button { flex:0 0 auto; border:1px solid var(--line); border-radius:999px; padding:9px 14px; color:var(--muted); background:rgba(255,255,255,.55); font-weight:800; cursor:pointer; }
.sport-tabs button.active { color:#fff; border-color:var(--forest); background:var(--forest); }
.report-list { display:grid; gap:10px; }
.report-link { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:17px; border:1px solid var(--line); border-radius:16px; background:var(--paper); text-decoration:none; }
.report-link strong, .report-link small { display:block; }
.report-link small { margin-top:4px; color:var(--muted); }
.disclaimer { margin-top:28px; padding:17px; border-radius:16px; color:#5e5c50; background:#e9e5d7; font-size:.76rem; line-height:1.55; }
.bottom-nav { position:fixed; z-index:30; left:50%; bottom:max(12px,env(safe-area-inset-bottom)); transform:translateX(-50%); display:flex; width:min(430px,calc(100% - 24px)); padding:7px; border:1px solid rgba(255,255,255,.14); border-radius:22px; background:rgba(7,26,22,.96); box-shadow:0 14px 45px rgba(0,0,0,.25); backdrop-filter:blur(18px); }
.bottom-nav a { flex:1; display:grid; place-items:center; gap:2px; padding:7px; border-radius:15px; color:#aab9b4; text-decoration:none; font-size:.67rem; font-weight:800; }
.bottom-nav a span { font-size:1.15rem; }
.bottom-nav a.active { color:var(--gold); background:rgba(255,255,255,.07); }
.empty-state { padding:80px 20px; text-align:center; }
.empty-icon { display:grid; place-items:center; width:54px; height:54px; margin:0 auto 18px; border-radius:50%; color:#fff; background:var(--red); font-weight:900; }
.empty-state h1 { font-family:Georgia,serif; }
.skeleton { position:relative; overflow:hidden; border-radius:var(--radius); background:#e4e3dc; }
.skeleton::after { content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent); animation:shimmer 1.3s infinite; }
.hero-skeleton { height:300px; }
.card-skeleton { height:180px; margin-top:16px; }
@keyframes shimmer { to { transform:translateX(100%); } }
@media (min-width:760px) {
  .pick-grid { grid-template-columns:repeat(2,1fr); }
  .pick-card:first-child { grid-column:span 2; }
  .panel-grid { grid-template-columns:repeat(2,1fr); }
  .detail-grid { grid-template-columns:1.2fr .8fr; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; } }