:root {
  color-scheme: dark;
  --bg: #06090a;
  --sidebar: #080d0d;
  --panel: #0f1517;
  --panel-2: #16201f;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);
  --text: #f2f5f4;
  --muted: #9aa8a4;
  --faint: #5f6d69;
  --green: #5ee0a0;
  --green-2: #8ff0c0;
  --green-dim: rgba(94, 224, 160, 0.12);
  --amber: #f3ba69;
  --red: #f07d78;
  --blue: #76aef8;
  --purple: #b39df0;
  --radius: 18px;
}

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

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: "DM Sans", "Noto Sans SC", sans-serif;
}

/* Skip link for accessibility */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--green);
  color: var(--bg);
  padding: 8px 12px;
  text-decoration: none;
  border-radius: 0 0 4px 0;
  z-index: 1000;
  font-size: 13px;
  font-weight: 600;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 0;
}

/* Focus visible styles */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.sidebar {
  position: fixed; inset: 0 auto 0 0; width: 240px;
  display: flex; flex-direction: column;
  padding: 24px 15px; background: rgba(9, 21, 20, .96);
  border-right: 1px solid var(--line);
}
.brand { display:flex; gap: 11px; align-items:center; margin: 0 8px 34px; }
.brand-mark {
  width: 35px; height: 35px; display:grid; place-items:center;
  color:#061a12; background: var(--green);
  border-radius: 11px; font-weight:800; font-size:15px; box-shadow: 0 7px 20px rgba(94, 224, 160, .25);
}
.brand b, .brand span { display:block; }
.brand b { letter-spacing:.2px; font-size:15px; }
.brand span { margin-top:3px; color:var(--muted); font-size:10px; letter-spacing:1.6px; }
nav { display:flex; flex-direction:column; gap:4px; }
.nav-label { margin: 22px 11px 7px; color:var(--faint); font-size:10px; letter-spacing:1.7px; }
.nav-item {
  display:flex; align-items:center; gap:11px; width:100%; padding:11px 12px;
  color:var(--muted); background:transparent; border:1px solid transparent; border-radius:9px;
  text-align:left; font-size:13px; transition:.2s ease;
}
.nav-item:hover { color:var(--text); background:rgba(255,255,255,.025); }
.nav-item:focus-visible { color:var(--text); background:rgba(255,255,255,.025); outline: 2px solid var(--green); outline-offset: -2px; }
.nav-item.active { color:var(--green); background:var(--green-dim); border-color:rgba(85, 219, 164, .14); }
.nav-icon { width:17px; font-size:16px; text-align:center; }
.sidebar-bottom { margin-top:auto; }
.system-status { display:flex; gap:9px; padding:11px; border:1px solid var(--line); border-radius:10px; }
.system-status i, .live-pill i { width:7px; height:7px; margin-top:5px; border-radius:50%; background:var(--green-2); box-shadow:0 0 0 4px rgba(255,255,255,.1); }
.system-status b, .system-status span { display:block; }
.system-status b { font-size:11px; }
.system-status span, .disclaimer { color:var(--faint); font-size:10px; line-height:1.65; }
.disclaimer { margin:14px 4px 0; }

.main-shell { margin-left:240px; min-height:100vh; }
.topbar { height:95px; display:flex; align-items:center; justify-content:space-between; padding: 0 36px; border-bottom:1px solid var(--line); }
.eyebrow { margin:0 0 6px; color:var(--green); font-size:10px; letter-spacing:2px; }
h1 { margin:0; font-size:22px; font-weight:600; letter-spacing:.2px; }
.top-actions { display:flex; gap:13px; align-items:center; }
.live-pill, .icon-button, .avatar {
  border:1px solid var(--line-strong); color:var(--muted); background:rgba(255,255,255,.018);
}
.live-pill { display:flex; gap:9px; align-items:center; padding:8px 12px; border-radius:20px; font-size:11px; }
.live-pill i { margin:0; width:6px; height:6px; }
.icon-button, .avatar { width:34px; height:34px; border-radius:50%; position:relative; }
.icon-button span { position:absolute; right:6px; top:5px; width:6px; height:6px; border:1px solid var(--bg); border-radius:50%; background:var(--amber); }
.avatar { color:#061a12; border:0; background:var(--green); font-size:11px; font-weight:700; }
.content { padding:30px 36px 42px; }

.hero-row, .section-head, .card-head, .split-head, .market-meta, .bet-row, .risk-row, .footer-note { display:flex; justify-content:space-between; align-items:center; }
.hero-row { margin-bottom:22px; align-items:end; }
.hero-row h2, .section-head h2 { margin:0; font-size:20px; font-weight:600; }
.hero-row p, .section-head p { margin:7px 0 0; color:var(--muted); font-size:13px; }
.button-row { display:flex; gap:9px; }
.btn {
  padding:9px 13px; border:1px solid var(--line-strong); border-radius:8px;
  color:var(--muted); background:rgba(255,255,255,.02); font-size:12px; transition:.2s;
}
.btn:hover { color:var(--text); border-color:rgba(255,255,255,.4); }
.btn-primary { color:#07221b; border-color:transparent; background:var(--green); font-weight:700; }

.metrics { display:grid; grid-template-columns:repeat(4, 1fr); gap:13px; margin-bottom:22px; }
.metric-card, .card {
  border:1px solid var(--line); border-radius:var(--radius);
  background: var(--panel);
  box-shadow:0 12px 35px rgba(0,0,0,.08);
}
.metric-card { position:relative; overflow:hidden; min-height:118px; padding:17px; }
.metric-card::after { content:""; position:absolute; right:-22px; top:-30px; width:84px; height:84px; border-radius:50%; background:rgba(255,255,255,.03); }
.metric-label { color:var(--muted); font-size:11px; letter-spacing:.4px; }
.metric-value { margin:13px 0 5px; font-size:25px; font-weight:700; letter-spacing:.5px; }
.metric-delta, .chip, .status, .tag { display:inline-flex; align-items:center; gap:5px; padding:3px 7px; border-radius:10px; font-size:10px; }
.metric-delta.positive, .chip-positive { color:var(--green); background:var(--green-dim); }
.metric-delta.neutral { color:var(--amber); background:rgba(243,186,105,.1); }
.metric-delta.negative, .chip-negative { color:var(--red); background:rgba(240,125,120,.1); }
.grid-main { display:grid; grid-template-columns:minmax(0, 1.55fr) minmax(290px,.75fr); gap:18px; }
.grid-split { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px; }
.card { padding:18px; }
.card-title { margin:0; font-size:14px; font-weight:600; }
.card-subtitle { margin:4px 0 0; color:var(--faint); font-size:11px; }
.text-link { color:var(--green); border:0; background:transparent; font-size:11px; }

.match-list { margin-top:13px; }
.match-row {
  display:grid; grid-template-columns:60px 1fr 76px 90px; gap:12px; align-items:center;
  padding:14px 0; border-top:1px solid var(--line);
}
.match-time { color:var(--muted); font-size:11px; line-height:1.6; }
.match-time span { display:block; color:var(--faint); font-size:10px; }
.teams { display:flex; align-items:center; gap:9px; font-size:12px; }
.teams strong { width:74px; font-weight:500; }
.team-badge { width:27px; height:27px; display:grid; place-items:center; border-radius:8px; background:rgba(255,255,255,.045); color:var(--green); font-size:9px; font-weight:700; }
.versus { color:var(--faint); font-size:10px; }
.probability { color:var(--green); font-size:13px; font-weight:700; }
.probability span { display:block; color:var(--faint); font-size:9px; font-weight:500; letter-spacing:.5px; }
.status { justify-content:center; color:var(--green); border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.06); }

.signal-card { padding:16px 0; border-top:1px solid var(--line); }
.signal-card:first-of-type { margin-top:13px; }
.signal-card h3 { margin:0; font-size:12px; line-height:1.55; font-weight:500; }
.market-meta { margin-top:9px; color:var(--faint); font-size:10px; }
.market-meta b { color:var(--green); font-size:13px; }
.edge-bar { height:4px; margin-top:11px; overflow:hidden; background:rgba(255,255,255,.055); border-radius:5px; }
.edge-bar i { display:block; height:100%; background:var(--green); border-radius:inherit; }

.portfolio-preview { margin-top:19px; }
.risk-row, .bet-row { gap:12px; padding:11px 0; border-top:1px solid var(--line); font-size:11px; }
.bet-row b { color:var(--text); font-weight:500; }
.bet-row span, .risk-row span { color:var(--muted); }
.risk-meter { display:flex; gap:4px; flex:1; max-width:145px; }
.risk-meter i { height:5px; flex:1; border-radius:4px; background:rgba(255,255,255,.07); }
.risk-meter i.on { background:var(--green-2); }

.section-head { margin-bottom:20px; }
.large-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(290px,.75fr); gap:18px; }
.match-detail-header { display:flex; align-items:center; justify-content:center; gap:35px; padding:8px 0 22px; }
.club { width:150px; text-align:center; }
.club .crest { width:62px; height:62px; display:grid; place-items:center; margin:0 auto 10px; color:var(--green); border:1px solid rgba(255,255,255,.2); border-radius:18px; background:var(--green-dim); font-weight:700; }
.club b { display:block; font-size:14px; }
.club span { color:var(--muted); font-size:11px; }
.versus-large { color:var(--faint); font-size:12px; text-align:center; }
.versus-large b { display:block; margin-bottom:4px; color:var(--text); font-size:20px; }
.prob-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:9px; padding:13px; border:1px solid var(--line); border-radius:12px; background:rgba(0,0,0,.1); }
.prob-box { padding:11px; text-align:center; }
.prob-box span { display:block; margin-bottom:5px; color:var(--muted); font-size:10px; }
.prob-box b { color:var(--green); font-size:21px; }
.analysis-note { margin:16px 0 0; color:var(--muted); font-size:12px; line-height:1.8; }
.stat-row { display:grid; grid-template-columns:45px 1fr 45px; gap:9px; align-items:center; padding:10px 0; font-size:11px; }
.stat-row span:last-child { text-align:right; }
.stat-bars { display:flex; gap:3px; height:5px; }
.stat-bars i { border-radius:5px; background:rgba(255,255,255,.07); }
.stat-bars i:first-child { margin-left:auto; background:var(--green-2); }
.stat-bars i:last-child { background:var(--blue); }
.recommendation { padding:16px; border-radius:14px; background:var(--green-dim); border:1px solid rgba(255,255,255,.15); }
.recommendation h3 { margin:0 0 7px; color:var(--green); font-size:14px; }
.recommendation p { margin:0; color:var(--muted); font-size:12px; line-height:1.7; }
.recommendation-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:13px; }
.recommendation-grid div { padding:9px; border-radius:8px; background:rgba(0,0,0,.11); }
.recommendation-grid span, .recommendation-grid b { display:block; }
.recommendation-grid span { color:var(--muted); font-size:10px; }
.recommendation-grid b { margin-top:4px; color:var(--text); font-size:13px; }
.odds-card { grid-column:1 / -1; }
.odds-history { display:flex; gap:7px; margin-top:15px; overflow-x:auto; }
.odds-snapshot { min-width:105px; padding:10px; border:1px solid var(--line); border-radius:9px; background:rgba(0,0,0,.1); }
.odds-snapshot span, .odds-snapshot b, .odds-snapshot em { display:block; }
.odds-snapshot span, .odds-snapshot em { color:var(--faint); font-size:10px; font-style:normal; }
.odds-snapshot b { margin:5px 0; color:var(--green); font-size:17px; }

.market-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }
.market-card { padding:17px; border:1px solid var(--line); border-radius:15px; background:linear-gradient(145deg,rgba(17,34,32,.95),rgba(12,25,24,.9)); }
.tag { color:var(--blue); background:rgba(118,174,248,.1); }
.market-card h3 { min-height:48px; margin:14px 0 10px; font-size:14px; line-height:1.65; font-weight:500; }
.market-numbers { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:14px; }
.market-numbers div { padding:9px; border:1px solid var(--line); border-radius:8px; }
.market-numbers span, .market-numbers b { display:block; }
.market-numbers span { color:var(--faint); font-size:10px; }
.market-numbers b { margin-top:4px; font-size:18px; }
.market-numbers div:last-child b { color:var(--green); }
.sparkline { width:100%; height:50px; margin:7px 0 2px; }
.driver-list { display:flex; flex-wrap:wrap; gap:5px; margin-top:12px; }
.driver-list span { padding:4px 7px; color:var(--muted); border:1px solid var(--line); border-radius:9px; font-size:10px; }

.butterfly-layout { display:grid; grid-template-columns:330px 1fr; gap:18px; }
.field { display:block; margin-top:14px; }
.field span { display:block; margin-bottom:7px; color:var(--muted); font-size:11px; }
.field input, .field textarea, .field select {
  width:100%; padding:10px; color:var(--text); border:1px solid var(--line-strong); border-radius:8px; outline:none; background:rgba(0,0,0,.15); font-size:12px;
}
.field textarea { min-height:82px; resize:vertical; line-height:1.5; }
.field input:focus, .field textarea:focus, .field select:focus { border-color:rgba(255,255,255,.5); }
.range-row { display:flex; gap:8px; }
.range-row button { flex:1; padding:8px 0; color:var(--muted); border:1px solid var(--line); border-radius:7px; background:transparent; font-size:11px; }
.range-row button.active { color:var(--green); border-color:rgba(255,255,255,.3); background:var(--green-dim); }
.full { width:100%; margin-top:15px; }
.network { position:relative; min-height:352px; margin-top:15px; overflow:hidden; border:1px solid var(--line); border-radius:13px; background:rgba(255,255,255,.03); }
.network svg { position:absolute; inset:0; width:100%; height:100%; }
.network-line { stroke:rgba(255,255,255,.2); stroke-width:1.4; stroke-dasharray:4 4; }
.node { position:absolute; z-index:1; width:116px; padding:8px; transform:translate(-50%,-50%); color:var(--muted); border:1px solid var(--line-strong); border-radius:9px; background:#10201e; font-size:10px; line-height:1.35; text-align:center; box-shadow:0 5px 13px rgba(0,0,0,.1); }
.node.origin { color:var(--green); border-color:rgba(255,255,255,.35); background:#1a1a1a; }
.node.intervention { color:var(--amber); border-color:rgba(243,186,105,.35); }
.timeline { margin-top:15px; }
.timeline-row { display:grid; grid-template-columns:68px 1fr; gap:10px; padding:11px 0; border-top:1px solid var(--line); }
.timeline-row span { color:var(--green); font-size:10px; }
.timeline-row b { display:block; font-size:12px; }
.timeline-row p { margin:4px 0 0; color:var(--muted); font-size:11px; line-height:1.5; }

.portfolio-layout { display:grid; grid-template-columns:1.35fr .65fr; gap:18px; }
.portfolio-total { display:flex; align-items:end; gap:12px; padding:8px 0 16px; }
.portfolio-total b { font-size:30px; }
.portfolio-total span { margin-bottom:5px; color:var(--green); font-size:12px; }
.table { width:100%; border-collapse:collapse; font-size:12px; }
.table th { padding:10px 0; color:var(--faint); font-size:10px; font-weight:500; text-align:left; }
.table td { padding:13px 0; border-top:1px solid var(--line); color:var(--muted); }
.table td:first-child { color:var(--text); }
.table .pos { color:var(--green); }
.donut { width:150px; height:150px; display:grid; place-items:center; margin:16px auto; border-radius:50%; background:conic-gradient(#ffffff 0 46%, #888888 46% 72%, #cccccc 72% 88%, rgba(255,255,255,.07) 88% 100%); }
.donut::after { content:attr(data-label); display:grid; place-items:center; width:104px; height:104px; color:var(--text); border-radius:50%; background:var(--panel); font-size:20px; font-weight:700; }
.legend-row { display:flex; justify-content:space-between; padding:8px 0; color:var(--muted); font-size:11px; }
.legend-row i { display:inline-block; width:7px; height:7px; margin-right:6px; border-radius:50%; background:var(--green-2); }
.legend-row:nth-child(2) i { background:var(--blue); }
.legend-row:nth-child(3) i { background:var(--amber); }
.legend-row:nth-child(4) i { background:rgba(255,255,255,.2); }
.footer-note { margin-top:20px; padding:13px; color:var(--faint); border:1px solid var(--line); border-radius:10px; font-size:11px; }
.notice { margin-bottom:15px; padding:11px 13px; color:var(--green); border:1px solid rgba(255,255,255,.18); border-radius:9px; background:var(--green-dim); font-size:12px; }
.notice.error { color:var(--red); border-color:rgba(240,125,120,.2); background:rgba(240,125,120,.1); }
.bet-entry { grid-column:1 / -1; }
.bet-entry-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0 12px; }
.loader { display:grid; min-height:420px; place-items:center; align-content:center; gap:12px; color:var(--muted); font-size:12px; }
.loader div { width:25px; height:25px; border:2px solid var(--line-strong); border-top-color:var(--green); border-radius:50%; animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

@media (max-width: 1050px) {
  .grid-main, .large-grid, .portfolio-layout { grid-template-columns:1fr; }
  .market-grid { grid-template-columns:1fr 1fr; }
  .arbitrage-inputs { grid-template-columns:1fr; }
}
@media (max-width: 760px) {
  html, body { width:100%; max-width:100%; overflow-x:hidden; }
  .sidebar { width:66px; padding:17px 9px; }
  .brand { margin:0 auto 25px; }
  .brand > div:last-child, .nav-item:not(.active)::after, .nav-item { font-size:0; }
  .nav-item { justify-content:center; padding:11px 5px; }
  .nav-icon { font-size:17px; }
  .nav-label, .sidebar-bottom { display:none; }
  .main-shell { width:calc(100% - 66px); min-width:0; margin-left:66px; }
  .topbar { height:78px; padding:0 18px; }
  .content, #app { width:100%; min-width:0; max-width:100%; }
  .content { padding:20px 18px 30px; }
  .live-pill { display:none; }
  .metrics { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  .metric-card { min-height:102px; padding:13px; }
  .metric-value { font-size:21px; }
  .grid-split, .market-grid, .butterfly-layout { grid-template-columns:1fr; }
  .bet-entry-grid { grid-template-columns:1fr 1fr; }
  .match-row { grid-template-columns:46px 1fr 60px; }
  .match-row .status { display:none; }
  .teams strong { width:auto; }
  .club { width:100px; }
  .match-detail-header { gap:12px; }
  .arbitrage-inputs { grid-template-columns:1fr; }
  .result-grid { grid-template-columns:1fr; }
  .history-header { flex-direction:column; align-items:flex-start; gap:4px; }
}

/* ==========================================
   Arbitrage Analysis Styles
   ========================================== */

.arbitrage-form { margin-top:20px; }
.arbitrage-inputs { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:20px; }
.market-input { padding:16px; border:1px solid var(--line); border-radius:12px; background:var(--panel); }
.market-input h4 { margin:0 0 16px; color:var(--text); font-size:14px; }
.market-input .field { margin-bottom:12px; }
.arbitrage-result { margin-top:24px; }
.arbitrage-result-card { padding:24px; border:1px solid var(--line); border-radius:16px; background:var(--panel); }
.result-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--line); }
.result-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:20px; }
.result-section { padding:16px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.02); }
.result-section h4 { margin:0 0 12px; color:var(--text); font-size:13px; }
.odds-comparison { display:flex; align-items:center; gap:16px; }
.odds-comparison > div { flex:1; text-align:center; }
.odds-comparison .vs { flex:0; color:var(--muted); font-size:18px; font-weight:700; }
.odds-comparison .label { display:block; color:var(--muted); font-size:11px; margin-bottom:4px; }
.odds-comparison .value { display:block; color:var(--text); font-size:24px; font-weight:700; margin-bottom:4px; }
.odds-comparison .prob { display:block; color:var(--faint); font-size:10px; }
.analysis-details > div { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--line); font-size:12px; }
.analysis-details > div:last-child { border-bottom:none; }
.allocation-grid { display:flex; flex-direction:column; gap:10px; }
.allocation-item { padding:12px; border:1px solid var(--line); border-radius:8px; background:rgba(255,255,255,.02); }
.allocation-item.recommended { border-color:rgba(255,255,255,.3); background:rgba(255,255,255,.05); }
.allocation-item .label { display:block; color:var(--muted); font-size:11px; margin-bottom:4px; }
.allocation-item .value { display:block; color:var(--text); font-size:18px; font-weight:700; margin-bottom:4px; }
.allocation-item .profit { display:block; color:var(--green); font-size:11px; }
.recommendation-box { margin-top:20px; padding:16px; border:1px solid rgba(255,255,255,.15); border-radius:12px; background:rgba(255,255,255,.03); }
.recommendation-box h4 { margin:0 0 8px; color:var(--text); font-size:14px; }
.recommendation-box p { margin:0; color:var(--muted); font-size:13px; line-height:1.6; }
.polymarket-list { margin-top:16px; }
.market-item { display:flex; justify-content:space-between; align-items:center; padding:12px; border:1px solid var(--line); border-radius:10px; margin-bottom:8px; background:rgba(255,255,255,.02); }
.market-item:hover { background:rgba(255,255,255,.04); }
.market-info h4 { margin:0 0 6px; color:var(--text); font-size:13px; }
.market-meta { display:flex; gap:12px; color:var(--muted); font-size:10px; }
.instructions { padding:16px; }
.instructions ol { margin:0; padding-left:20px; color:var(--muted); font-size:13px; line-height:2; }
.instructions li strong { color:var(--text); }
.risk-level { color:var(--muted); font-size:12px; }
.positive { color:var(--green); }
.negative { color:var(--red); }
.neutral { color:var(--amber); }

/* History Styles */
.arbitrage-history { margin-top:16px; }
.history-list { display:flex; flex-direction:column; gap:10px; }
.history-item { padding:12px; border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.02); transition:background .2s; }
.history-item:hover { background:rgba(255,255,255,.04); }
.history-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.history-time { color:var(--faint); font-size:11px; }
.history-details { font-size:12px; color:var(--muted); }
.history-details .odds-comparison { color:var(--text); margin-left:8px; }
.history-ev { margin-top:4px; color:var(--green); font-size:11px; }
.empty { text-align:center; padding:20px; color:var(--muted); font-size:13px; }