*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --ink:#1b1c20; --panel:#232428; --card:#2b2c31; --card-2:#34353b; --border:#3d3e45;
  --purple-deep:#3c096c; --purple:#7b2cbf; --purple-h:#9d4edd;
  --gold:#f0a800; --gold-h:#ffc531; --green:#00c584; --red:#e5484d;
  --text:#eceef2; --dim:#9498a3; --faint:#55575f;
  --radius:10px; --radius-md:16px; --tracking:0.16em;
}

html, body {
  height:100%;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--ink); color:var(--text); font-size:15px; line-height:1.6;
  color-scheme:dark;
}
.logo-mark { display:block; flex-shrink:0; }

.app { display:flex; height:100vh; overflow:hidden; }

/* ============ SIDEBAR ============ */
.sidebar {
  width:248px; min-width:248px; overflow:hidden;
  background:rgba(35,36,40,.82);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  transition:width .2s ease, min-width .2s ease;
}
.sb-head { display:flex; align-items:center; justify-content:space-between; padding:18px 16px 0; white-space:nowrap; }
.sb-brand { display:flex; align-items:center; gap:9px; overflow:hidden; }
.sb-word { font-size:12px; font-weight:800; letter-spacing:var(--tracking); text-transform:uppercase; }
.sb-toggle { background:none; border:none; color:var(--dim); cursor:pointer; padding:6px; border-radius:8px; display:grid; place-items:center; flex-shrink:0; transition:background .15s, color .15s; }
.sb-toggle:hover { background:rgba(255,255,255,.06); color:var(--text); }
.sb-toggle svg { transition:transform .2s ease; }

.sb-new {
  margin:16px 12px 4px; display:flex; align-items:center; gap:10px;
  border:1px solid var(--purple); background:transparent; color:var(--purple-h);
  border-radius:12px; padding:10px 14px; font-size:13px; font-weight:600;
  font-family:inherit; cursor:pointer; white-space:nowrap; transition:background .15s, color .15s;
}
.sb-new:hover { background:var(--purple); color:var(--text); }
.sb-new-icon { font-size:16px; line-height:1; flex-shrink:0; }

.sb-scroll { flex:1; overflow-y:auto; overflow-x:hidden; padding:16px 12px 6px; display:flex; flex-direction:column; gap:22px; }

.sb-label {
  font-size:10px; font-weight:700; letter-spacing:var(--tracking); text-transform:uppercase;
  color:var(--faint); padding:0 4px 10px; display:flex; align-items:center; gap:8px;
}
.sb-label::before { content:""; width:3px; height:11px; background:linear-gradient(var(--purple-h),var(--purple)); border-radius:2px; flex-shrink:0; }

/* ---- History (capped so it reads as "top third," not the whole bar) ---- */
.sb-history-box { white-space:nowrap; }
.history { max-height:190px; overflow-y:auto; overflow-x:hidden; padding-right:2px; }
.history-empty { font-size:13px; color:var(--faint); padding:4px 4px; }
.hist-item {
  display:block; width:100%; text-align:left; background:none; border:none;
  font-size:13px; color:var(--dim); padding:7px 10px; border-radius:8px; cursor:pointer;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:1px;
  border-left:2px solid transparent; font-family:inherit;
  transition:border-color .15s, color .15s, background .15s;
}
.hist-item:hover { background:var(--card); color:var(--text); border-left-color:var(--purple-h); }

/* ---- Feature sections ---- */
.sb-section { white-space:normal; }

.potd-card { border:1px solid var(--border); overflow:hidden; border-radius:2px; }
.potd-head {
  position:relative; background:linear-gradient(135deg,var(--purple-h),var(--purple)); color:#fff;
  padding:8px 12px 11px; display:flex; justify-content:space-between; align-items:center;
}
.potd-head::after {
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:6px;
  background-image:radial-gradient(circle, var(--panel) 2.6px, transparent 2.7px);
  background-size:11px 6px; background-position:5px 0; background-repeat:repeat-x;
}
.potd-sport { font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.potd-odds { font-size:13px; font-weight:800; color:var(--gold); }
.potd-legs { background:var(--card); padding:9px 12px 3px; display:flex; flex-direction:column; }
.potd-leg { font-size:12px; color:var(--dim); padding:5px 0; border-top:1px dashed var(--border); }
.potd-leg:first-child { border-top:none; }
.potd-cta {
  display:block; width:100%; border:none; background:var(--card-2); color:var(--purple-h);
  font-size:12px; font-weight:700; padding:10px; cursor:pointer; font-family:inherit;
  transition:background .15s, color .15s;
}
.potd-cta:hover { background:linear-gradient(135deg,var(--purple-h),var(--purple)); color:var(--text); }

.season-pills { display:flex; flex-wrap:wrap; gap:6px; }
.season-pill {
  border:1px solid var(--border); background:var(--card); color:var(--dim);
  border-radius:999px; padding:6px 12px; font-size:12px; font-weight:600; cursor:pointer;
  font-family:inherit; transition:color .15s, border-color .15s, background .15s;
}
.season-pill:hover { color:var(--text); border-color:var(--purple); background:var(--card-2); }

.sb-bottom { padding:12px 14px; border-top:1px solid var(--border); white-space:nowrap; }
.sb-links { display:flex; gap:14px; padding:0 4px; }
.sb-links a { font-size:11px; color:var(--faint); text-decoration:none; transition:color .15s; }
.sb-links a:hover { color:var(--dim); }

/* ---- Collapsed rail (desktop) ---- */
.app:not(.sidebar-open) .sidebar { width:64px; min-width:64px; }
.app:not(.sidebar-open) .sb-brand,
.app:not(.sidebar-open) .sb-new-label,
.app:not(.sidebar-open) .sb-history-box,
.app:not(.sidebar-open) .sb-section,
.app:not(.sidebar-open) .sb-links { display:none; }
.app:not(.sidebar-open) .sb-head { justify-content:center; padding-top:18px; }
.app:not(.sidebar-open) .sb-toggle svg { transform:rotate(180deg); }
.app:not(.sidebar-open) .sb-new { justify-content:center; padding:10px; margin:16px auto 4px; }

.sb-backdrop { display:none; }

/* ============ MAIN ============ */
.main { flex:1; display:flex; flex-direction:column; min-width:0; overflow:hidden; }

.topbar {
  margin:16px 22px 0; display:flex; align-items:center; gap:14px;
  padding:11px 20px; border-radius:999px;
  background:rgba(43,44,49,.6);
  backdrop-filter:blur(20px) saturate(140%); -webkit-backdrop-filter:blur(20px) saturate(140%);
  border:1px solid rgba(255,255,255,.07);
  box-shadow:0 8px 30px rgba(0,0,0,.35); flex-shrink:0;
}
.mark { display:flex; align-items:center; gap:10px; }
.mark-word { font-size:12px; font-weight:800; letter-spacing:var(--tracking); text-transform:uppercase; }
.topbar-right { display:flex; align-items:center; gap:10px; margin-left:auto; }
.chip-21 { font-size:11px; font-weight:700; color:var(--dim); border:1px solid var(--border); border-radius:999px; padding:4px 10px; }
.pulse-chip { display:flex; align-items:center; gap:7px; font-size:11px; font-weight:700; color:var(--dim); }
.pulse-dot { width:6px; height:6px; border-radius:50%; background:var(--green); animation:blink 1.8s infinite; }
@keyframes blink { 50% { opacity:.3; } }

.signin-btn {
  border:1px solid var(--purple); background:transparent; color:var(--purple-h);
  border-radius:999px; padding:7px 16px; font-size:12px; font-weight:700;
  cursor:pointer; font-family:inherit; white-space:nowrap;
  transition:background .15s, color .15s, border-color .15s;
}
.signin-btn:hover { background:linear-gradient(135deg,var(--purple-h),var(--purple)); color:var(--text); border-color:transparent; }

/* ---- Ticker (JS-driven seamless loop) ---- */
.ticker { margin-top:12px; border-top:1px solid var(--border); border-bottom:1px solid var(--border); height:30px; display:flex; align-items:center; overflow:hidden; flex-shrink:0; }
.track { display:flex; gap:10px; width:max-content; padding-left:22px; will-change:transform; }
.track.play { animation:scroll linear infinite; animation-duration:var(--scroll-dur, 30s); }
@keyframes scroll { to { transform:translateX(calc(-1 * var(--scroll-dist, 900px))); } }
.tchip { display:flex; align-items:center; gap:5px; background:var(--card); border:1px solid var(--border); border-radius:999px; padding:4px 11px; font-size:11px; color:var(--text); flex-shrink:0; }
.tag { color:var(--purple-h); font-weight:800; font-size:9px; letter-spacing:.04em; margin-right:2px; }
.old { color:var(--faint); text-decoration:line-through; text-decoration-color:var(--faint); opacity:.8; }
.g { color:var(--gold); font-weight:800; }
.dir { font-weight:900; font-size:10px; line-height:1; }
.tchip[data-dir="up"] .dir { color:var(--green); }
.tchip[data-dir="up"] .dir::before { content:"▲"; }
.tchip[data-dir="down"] .dir { color:var(--red); }
.tchip[data-dir="down"] .dir::before { content:"▼"; }

/* ---- Scroll region ---- */
.scroll-region { flex:1; overflow-y:auto; scroll-behavior:smooth; }

/* ---- Landing ---- */
.landing { min-height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px; padding:40px 20px 28px; }
.hero { display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; animation:rise .5s ease both; }
.hero-mark { margin-bottom:4px; }
.hero-eyebrow { font-family:ui-monospace,monospace; font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--purple-h); }
.hero-title { font-size:clamp(28px,5vw,44px); font-weight:700; letter-spacing:-.02em; line-height:1.1; }
.hero-title .accent { color:var(--purple-h); }
.hero-sub { font-size:15px; color:var(--dim); max-width:420px; line-height:1.55; }
.cats { display:flex; gap:9px; flex-wrap:wrap; justify-content:center; max-width:640px; animation:rise .5s ease .08s both; }
.pill { flex:0 0 auto; white-space:nowrap; background:var(--card); border:1px solid var(--border); color:var(--dim); border-radius:999px; padding:9px 16px; font-size:13px; font-weight:600; font-family:inherit; cursor:pointer; transition:color .15s, border-color .15s, background .15s, transform .12s; }
.pill:hover { color:var(--text); background:var(--card-2); border-color:var(--purple); transform:translateY(-2px); }
.pill:active { transform:translateY(0); }
@keyframes rise { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }

/* ---- Messages ---- */
.messages { max-width:760px; margin:0 auto; padding:30px 20px 12px; display:flex; flex-direction:column; gap:26px; }
.msg { display:flex; flex-direction:column; width:100%; }
.msg.user { align-items:flex-end; }
.msg.assistant { align-items:flex-start; }
.msg.user .bubble { background:var(--card); color:var(--text); padding:11px 16px; border-radius:var(--radius-md); font-size:15px; line-height:1.6; max-width:80%; word-wrap:break-word; }
.msg.assistant .bubble { color:var(--text); font-size:15px; line-height:1.7; max-width:100%; padding-left:16px; border-left:3px solid var(--purple); word-wrap:break-word; white-space:pre-wrap; }

.bubble.loading { display:flex; align-items:center; gap:5px; height:20px; padding-left:16px; border-left:3px solid var(--purple); }
.bubble.loading .dot { width:5px; height:5px; border-radius:50%; background:var(--purple-h); opacity:.35; animation:dot-pulse 1.1s ease-in-out infinite; }
.bubble.loading .dot:nth-child(2) { animation-delay:.15s; }
.bubble.loading .dot:nth-child(3) { animation-delay:.3s; }
@keyframes dot-pulse { 0%,60%,100% { opacity:.35; transform:scale(1);} 30% { opacity:1; transform:scale(1.25);} }

/* ---- Parlay slip (ticket — stays sharp) ---- */
.slip { margin-top:16px; border:1px solid var(--border); border-radius:0; overflow:hidden; width:100%; max-width:500px; font-feature-settings:"tnum"; }
.slip-head { position:relative; background:linear-gradient(135deg,var(--purple-h),var(--purple)); color:#fff; padding:9px 16px 13px; display:flex; justify-content:space-between; align-items:center; }
.slip-head::after { content:""; position:absolute; left:0; right:0; bottom:-4px; height:8px; background-image:radial-gradient(circle, var(--ink) 3.5px, transparent 3.6px); background-size:14px 8px; background-position:7px 0; background-repeat:repeat-x; }
.slip-brand { font-size:10px; font-weight:800; letter-spacing:var(--tracking); text-transform:uppercase; }
.slip-count { font-size:11px; font-weight:700; letter-spacing:.06em; opacity:.85; }
.leg { display:flex; justify-content:space-between; align-items:center; padding:13px 16px; border-top:1px dashed var(--border); gap:16px; background:var(--panel); }
.leg-info { display:flex; flex-direction:column; gap:3px; min-width:0; }
.leg-sel { font-size:14px; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.leg-meta { font-size:11px; letter-spacing:.02em; color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-transform:uppercase; }
.leg-odds { font-size:15px; font-weight:800; color:var(--gold); flex-shrink:0; white-space:nowrap; letter-spacing:.02em; }

/* ============ COMPOSER ============ */
.composer { padding:14px 20px 16px; flex-shrink:0; }
.composer-inner {
  max-width:720px; margin:0 auto; display:flex; align-items:flex-end; gap:10px;
  background:rgba(43,44,49,.55);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.08); border-radius:28px; padding:12px 12px 12px 22px;
  box-shadow:0 10px 34px rgba(0,0,0,.35);
  transition:border-color .15s, background .15s, box-shadow .15s;
}
.composer-inner:focus-within { border-color:var(--purple); background:rgba(52,53,59,.7); box-shadow:0 10px 34px rgba(0,0,0,.42); }
#input { flex:1; background:transparent; border:none; outline:none; color:var(--text); caret-color:var(--purple-h); font-size:15px; font-family:inherit; resize:none; max-height:160px; line-height:1.55; padding:4px 0; }
#input::placeholder { color:var(--faint); opacity:1; }
#input::selection { background:rgba(123,44,191,.4); color:var(--text); }
.send-btn { width:40px; height:40px; border:none; border-radius:50%; background:linear-gradient(135deg,var(--purple-h),var(--purple)); color:var(--text); font-size:18px; font-weight:800; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:transform .12s, opacity .15s; }
.send-btn:hover { transform:translateY(-2px); }
.send-btn:active { transform:scale(.92); }
.send-btn:disabled { background:var(--border); color:var(--faint); cursor:not-allowed; transform:none; }
.disclaimer { font-size:11px; color:var(--faint); text-align:center; margin-top:10px; max-width:720px; margin-left:auto; margin-right:auto; }
.disclaimer a { color:var(--faint); text-decoration:underline; text-underline-offset:2px; }
.disclaimer a:hover { color:var(--dim); }

/* ============ SCROLLBAR ============ */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }

/* ============ MODAL ============ */
.modal-overlay { position:fixed; inset:0; background:rgba(10,10,14,.72); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; padding:24px; z-index:100; opacity:0; pointer-events:none; transition:opacity .18s ease; }
.modal-overlay.open { opacity:1; pointer-events:auto; }
.modal { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-md); max-width:380px; width:100%; padding:24px; position:relative; transform:translateY(8px) scale(.98); transition:transform .18s ease; box-shadow:0 24px 60px rgba(0,0,0,.55); }
.modal-overlay.open .modal { transform:translateY(0) scale(1); }
.modal-close { position:absolute; top:12px; right:12px; background:none; border:none; color:var(--faint); font-size:20px; line-height:1; cursor:pointer; padding:4px; border-radius:8px; transition:color .15s, background .15s; }
.modal-close:hover { color:var(--text); background:var(--card); }
.modal-eyebrow { font-size:10px; font-weight:700; letter-spacing:var(--tracking); text-transform:uppercase; color:var(--purple-h); margin-bottom:10px; }
.modal h2 { font-size:19px; font-weight:800; letter-spacing:-.3px; margin-bottom:8px; }
.modal p { font-size:14px; color:var(--dim); line-height:1.6; margin-bottom:20px; }
.modal-actions { display:flex; gap:10px; }
.modal-btn { flex:1; padding:10px 16px; border-radius:var(--radius-md); font-size:14px; font-weight:700; cursor:pointer; border:1px solid var(--border); font-family:inherit; transition:background .15s, color .15s, border-color .15s, transform .1s; }
.modal-btn:active { transform:scale(.97); }
.modal-btn.yes { background:linear-gradient(135deg,var(--purple-h),var(--purple)); color:var(--text); border-color:var(--purple); }
.modal-btn.no { background:transparent; color:var(--dim); }
.modal-btn.no:hover { color:var(--text); border-color:var(--dim); }
.modal-thanks { font-size:14px; color:var(--purple-h); text-align:center; font-weight:600; padding:8px 0; }

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  .hero, .cats { animation:none; opacity:1; transform:none; }
  .track.play { animation:none; }
  .bubble.loading .dot { animation:none; opacity:.7; }
  .modal-overlay, .modal { transition:none; }
}

/* ============ MOBILE ============ */
@media (max-width:768px) {
  .sidebar { width:56px; min-width:56px; }
  .app:not(.sidebar-open) .sidebar { width:56px; min-width:56px; }
  .app.sidebar-open .sidebar {
    position:fixed; top:0; left:0; height:100%; width:264px; min-width:264px; z-index:60;
    box-shadow:4px 0 30px rgba(0,0,0,.5);
  }
  .app.sidebar-open .sb-backdrop { display:block; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:55; }
  .topbar { margin:12px 14px 0; }
  .hero-title { font-size:26px; }
  .msg.user .bubble { max-width:92%; }
}

/* ============================================================
   DOCUMENT PAGES (about.html, terms.html)
   ============================================================ */

.doc-layout { min-height:100vh; background:var(--ink); color:var(--text); }

.doc-nav {
  position:sticky; top:16px; z-index:10;
  margin:16px 22px 0; display:flex; align-items:center; justify-content:space-between;
  padding:11px 20px; border-radius:999px;
  background:rgba(43,44,49,.6);
  backdrop-filter:blur(20px) saturate(140%); -webkit-backdrop-filter:blur(20px) saturate(140%);
  border:1px solid rgba(255,255,255,.07);
  box-shadow:0 8px 30px rgba(0,0,0,.35);
}
.doc-nav-brand { display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--text); font-size:12px; font-weight:800; letter-spacing:var(--tracking); text-transform:uppercase; }
.doc-nav-links { display:flex; align-items:center; gap:22px; }
.doc-nav-links a { font-size:13px; color:var(--dim); text-decoration:none; transition:color .15s; }
.doc-nav-links a:hover, .doc-nav-links a.active { color:var(--text); }
.doc-nav-links .back-link { color:var(--purple-h); font-weight:600; }
.doc-nav-links .back-link:hover { color:var(--text); }

.doc-content { max-width:740px; margin:0 auto; padding:52px 32px 96px; width:100%; }
.doc-eyebrow { font-family:ui-monospace,monospace; font-size:11px; font-weight:700; letter-spacing:var(--tracking); text-transform:uppercase; color:var(--purple-h); margin-bottom:14px; }
.doc-title { font-size:34px; font-weight:700; letter-spacing:-.02em; line-height:1.15; margin-bottom:10px; }
.doc-subtitle { font-size:15px; color:var(--dim); line-height:1.6; margin-bottom:44px; padding-bottom:28px; border-bottom:1px solid var(--border); }

.doc-section { margin-bottom:38px; }
.doc-section h2 { font-size:17px; font-weight:700; letter-spacing:-.01em; margin-bottom:10px; color:var(--text); display:flex; align-items:center; gap:10px; }
.doc-section h2::before { content:""; display:block; width:3px; height:16px; background:linear-gradient(var(--purple-h),var(--purple)); border-radius:2px; flex-shrink:0; }
.doc-section p { font-size:14.5px; color:var(--dim); line-height:1.75; margin-bottom:12px; }
.doc-section p:last-child { margin-bottom:0; }
.doc-section ul, .doc-section ol { margin:10px 0 12px 20px; display:flex; flex-direction:column; gap:6px; }
.doc-section li { font-size:14.5px; color:var(--dim); line-height:1.7; }
.doc-section strong { color:var(--text); font-weight:600; }
.doc-section a { color:var(--purple-h); text-decoration:underline; text-underline-offset:2px; }

.doc-divider { border:none; border-top:1px solid var(--border); margin:40px 0; }

.doc-callout {
  background:var(--panel); border:1px solid var(--border); border-left:3px solid var(--purple);
  border-radius:0 var(--radius-md) var(--radius-md) 0; padding:16px 20px; margin:20px 0;
}
.doc-callout p { margin:0; font-size:14px; color:var(--dim); }
.doc-callout strong { color:var(--text); }

.doc-sport-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:14px; }
.doc-sport-pill {
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:8px 12px; font-size:12px; font-weight:600; letter-spacing:.03em; color:var(--dim); text-align:center;
}

.doc-footer {
  margin-top:60px; padding-top:24px; border-top:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
}
.doc-footer-brand { display:flex; align-items:center; gap:8px; font-size:11px; font-weight:700; letter-spacing:var(--tracking); text-transform:uppercase; color:var(--faint); }
.doc-footer-links { display:flex; gap:16px; }
.doc-footer-links a { font-size:12px; color:var(--faint); text-decoration:none; transition:color .15s; }
.doc-footer-links a:hover { color:var(--dim); }

@media (max-width:768px) {
  .doc-nav { margin:12px 14px 0; }
  .doc-content { padding:36px 20px 72px; }
  .doc-sport-grid { grid-template-columns:repeat(2,1fr); }
  .doc-footer { flex-direction:column; align-items:flex-start; }
}