/* FairOdds Terminal Theme — matches `index -example.html` aesthetics */
:root{
  --bg:#000000; 
  --panel:#000000; 
  --panel-2:#0d0d0e; 
  --panel-3:#000000;
  --text:#d5d9e0; 
  --muted:#93a0af; 
  --accent:#32d46a; 
  --accent-2:#22d3ee; 
  --border:#18222e;
  --tile:#0d1621; 
  --up:#34d399; 
  --down:#f87171;
  --radius:12px;
}

html, body{
  background: var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

a{ color: var(--accent-2); text-decoration: none; }
a:hover, a:focus{ text-decoration: underline; }

header{
  background: #000000 !important;
  border-bottom: 1px solid var(--border) !important;
}

/* Panels and cards */
section.card,
.panel,
.k{
  background: linear-gradient(180deg, rgba(42,42,42,0.7), rgba(42,42,42,0.4)) !important;
  border: 1px solid #333 !important;
  border-radius: var(--radius) !important;
  backdrop-filter: blur(6px);
}

/* Typography helpers */
.muted,
label,
small,
footer small a{ color: var(--muted) !important; }

h1, h2, h3{ letter-spacing: -.01em; }

/* Buttons */
.btn,
button,
input[type=button],
input[type=submit]{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,0)) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: var(--radius) !important;
  font-weight: 600;
  cursor: pointer;
}
.btn:hover,
button:hover{
  border-color:#234055 !important;
  box-shadow: 0 0 0 1px #234055 inset;
}

/* Primary CTA */
.btn.primary{
  background: linear-gradient(180deg, rgba(50,212,106,.15), rgba(50,212,106,.05)) !important;
  border-color: rgba(50,212,106,.35) !important;
}
.btn.primary:hover{
  border-color: rgba(50,212,106,.6) !important;
  box-shadow: 0 0 0 1px rgba(50,212,106,.6) inset;
}

/* Inputs */
input,
select,
textarea{
  background: var(--panel-2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  font-family: inherit !important;
  border-radius: var(--radius) !important;
}
input::placeholder,
textarea::placeholder{ color: #a8b3c2 !important; }
input:focus,
select:focus,
textarea:focus{
  outline: none !important;
  border-color: #234055 !important;
  box-shadow: 0 0 0 1px #234055 inset;
}

/* KPI highlight */
.k .v{ color: var(--accent) !important; font-weight: 700; }

/* Pills, dropdowns, notices */
.pill{ 
  background: rgba(13,22,33,.6) !important; 
  border: 1px solid var(--border) !important; 
  color: var(--muted) !important; 
}
.dropdown{ background: var(--panel-2) !important; border: 1px solid var(--border) !important; }

code, pre{
  background: var(--panel-2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: 8px !important;
}

/* Footer */
footer{
  border-top: 1px solid var(--border);
  background: #0d0d0e;
  padding: 14px 18px;
}

/* Status helpers */
.success{ color: #b9ffd0 !important; border-color: #2a5d3c !important; background: #0f1510 !important; }
.notice, .banner, .affiliate{ background: var(--panel-2) !important; border: 1px dashed var(--border) !important; }

/* Misc spacing tweaks */
.grid, .row{ gap: 14px; }
::selection{ background: rgba(34, 211, 238, 0.25); color: var(--text); }

/* Disabled */
input:disabled, select:disabled, textarea:disabled, button:disabled{ opacity:.7; cursor:not-allowed; }

/* CTA banner */
.cta-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(42,42,42,0.6), rgba(42,42,42,0.3));
  border-radius:12px;
  margin:10px 0 12px;
}
.cta-banner p{ margin:0; color:var(--muted); }