:root {
  color-scheme: light dark;
  --bg: #0b0f18;
  --panel: #171d2c;
  --panel-2: #1d2438;
  --border: #2a3348;
  --text: #e6e9ef;
  --muted: #8b93a7;
  --arb: #1fbf75;
  --near: #d9a441;
  --row-alt: #131826;
  --radius: 10px;
  --radius-sm: 7px;
  --shadow: 0 4px 20px rgba(0, 0, 0, 0.28);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f2f4f8;
    --panel: #ffffff;
    --panel-2: #f7f8fb;
    --border: #dde1ea;
    --text: #1a1f2c;
    --muted: #5b6376;
    --row-alt: #f7f8fb;
    --shadow: 0 4px 20px rgba(30, 40, 60, 0.08);
    --shadow-sm: 0 2px 8px rgba(30, 40, 60, 0.06);
  }
}

* { box-sizing: border-box; }

html { scrollbar-color: var(--border) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: padding-box; }

body {
  margin: 0;
  overflow-x: hidden;
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(1200px 500px at 15% -10%, rgba(31, 191, 117, 0.07), transparent 60%),
    radial-gradient(900px 400px at 100% 0%, rgba(31, 191, 117, 0.05), transparent 55%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
}

header {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}

.site-logo-text {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
.logo-icon {
  height: 24px;
  width: auto;
  flex: 0 0 auto;
  filter: drop-shadow(0 0 6px rgba(31, 191, 117, 0.55));
}
.logo-mark {
  font-size: 27px;
  font-weight: 800;
  font-style: italic;
  letter-spacing: 0.02em;
  background: linear-gradient(90deg, #00ff86, #1fbf75 65%, #17945a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 22px rgba(31, 191, 117, 0.5);
}
.logo-sub {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.logo-sub-dim {
  font-weight: 500;
  color: var(--muted);
}
.beta-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--arb);
  background: rgba(31, 191, 117, 0.14);
  border: 1px solid rgba(31, 191, 117, 0.35);
  border-radius: 8px;
  padding: 2px 7px;
  align-self: center;
}


.header-stats {
  /* Pinned to the true horizontal center of the header via absolute
     positioning, rather than flex:1 centering within whatever space happens
     to be left over between the logo/nav on one side and the settings
     button on the other - those two sides aren't equal widths, so flex
     centering alone left it visibly off-center. */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
.header-stats-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.header-stats-row {
  display: flex;
  align-items: center;
  gap: 18px;
}
.header-stat-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: default;
}
.header-stat-value {
  font-weight: 700;
  color: var(--text);
}
.header-stat-delay {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 8px;
  white-space: nowrap;
}
.delay-instant {
  color: var(--arb);
  background: rgba(31, 191, 117, 0.14);
}
.delay-slow {
  color: #e0a83f;
  background: rgba(224, 168, 63, 0.14);
}

#toolbar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}

.rating-count-stat {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
.rating-count-stat strong {
  color: var(--arb);
  font-weight: 700;
}

.search-wrap {
  /* Pinned to the true horizontal page center, same technique as
     .header-stats above it - flex-centering it in the leftover space next
     to the rating-count-stat text put it visibly off from the header
     stats' center since that stat has no matching spacer on the other side. */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  display: flex;
  justify-content: center;
}

.match-search {
  width: 100%;
  max-width: 480px;
}

.feed-limit-label {
  font-size: 12px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 auto;
}

.status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
}
/* On the Arb Finder page, .status lives in #toolbar (not the header) - push
   it to that row's right edge. feed.html/admin.html keep their own .status
   in the header instead, pushed right via .whoami's own margin, untouched. */
#toolbar .status {
  margin-left: auto;
}
#last-update {
  display: none;
}
#toolbar .status:hover #last-update {
  display: inline;
}

.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d9534f;
  display: inline-block;
}
.dot.live {
  background: var(--arb);
  animation: dot-blink 1.6s ease-in-out infinite;
}
@keyframes dot-blink {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(31, 191, 117, 0.5); }
  50% { opacity: 0.5; box-shadow: 0 0 0 4px rgba(31, 191, 117, 0); }
}

button {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
button:hover { border-color: var(--muted); background: var(--panel); }
button:active { transform: translateY(1px); }
button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  color: var(--muted);
}
button:disabled:hover { border-color: var(--border); background: var(--panel-2); }
button:disabled:active { transform: none; }
button:focus-visible {
  outline: 2px solid rgba(31, 191, 117, 0.5);
  outline-offset: 1px;
}

#save-settings {
  background: linear-gradient(135deg, #1fbf75, #17945a);
  border-color: transparent;
  color: #06110b;
  font-weight: 700;
}
#save-settings:hover {
  background: linear-gradient(135deg, #29d183, #1aa564);
  border-color: transparent;
}

#settings-panel {
  padding: 16px 20px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  animation: settings-in 0.15s ease;
}
#settings-panel.hidden { display: none; }
.hidden { display: none !important; }
.whoami {
  /* Pushes itself and everything after it (Settings/Admin-only, then Log out)
     to the header's right edge, so it always sits directly next to whichever
     of those two buttons is visible for the current user. */
  margin-left: auto;
  font-size: 13px;
  font-weight: 700;
  color: var(--arb);
}

@keyframes settings-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.latest-arbs-box {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 12px 16px;
  margin-top: 20px;
}
.latest-arbs-header {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.latest-arbs-sub {
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  opacity: 0.75;
}
.latest-arbs-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.latest-arbs-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  text-decoration: none;
  color: inherit;
  border: 1px solid transparent;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.latest-arbs-item:hover { border-color: var(--muted); background: var(--panel); }
.latest-arbs-match {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
}
.latest-arbs-match strong { color: var(--text); }
.latest-arbs-roi { font-weight: 700; white-space: nowrap; flex-shrink: 0; }
.latest-arbs-item .odds-age { font-size: 11px; white-space: nowrap; flex-shrink: 0; }
.latest-arbs-empty { font-size: 13px; color: var(--muted); padding: 6px 8px; }

.settings-hint {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 10px;
}

.settings-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  align-items: center;
}
.settings-row label {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 12px;
  color: var(--muted);
  gap: 8px;
  white-space: nowrap;
}
input, select {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input:hover, select:hover { border-color: var(--muted); }
input:focus, select:focus {
  outline: none;
  border-color: var(--arb);
  box-shadow: 0 0 0 3px rgba(31, 191, 117, 0.15);
}
#league-search { width: 100%; margin-bottom: 8px; }

.settings-columns { align-items: flex-start; }
.settings-col { flex: 1; min-width: 260px; }
.settings-col-narrow { flex: 0 0 auto; min-width: 160px; }
.settings-col-label {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.selected-count {
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}
.selected-count-num {
  color: var(--arb);
  font-weight: 700;
}

.league-list {
  display: grid;
  /* Fixed column count instead of auto-fill/minmax: at any viewport width,
     each column is always exactly 1/4 of the container, so there's no
     interaction between a minimum track width and the container's actual
     size to cause overflow - text simply wraps within its quarter. */
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  max-height: 260px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.league-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  padding: 4px 7px;
  border-radius: 6px;
  border: 1px solid transparent;
  transition: background 0.12s ease, border-color 0.12s ease;
  cursor: pointer;
  /* Grid items default to min-width:auto, which lets their content's natural
     (unwrapped) size force the whole grid wider than the container - the
     same underlying issue as the earlier flexbox overflow bug, just one
     level up. Without this, long names push the grid into horizontal
     scrolling instead of respecting the track's minmax() width. */
  min-width: 0;
}
.league-item input[type="checkbox"] {
  /* The global `input, select` rule below also styles checkboxes (padding,
     border, background meant for text/number/select inputs), which was
     inflating each checkbox to ~70px+ wide - starving .league-name down to
     zero available width and forcing it to wrap one character per line in
     narrower containers (first seen on the Alerts page's two-column
     layout). Reset back to a normal small checkbox regardless of what the
     generic input rule does elsewhere. */
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  padding: 0;
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: 3px;
}
.league-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
}
.league-item:not(.selected):hover {
  background: var(--panel-2);
  border-color: var(--border);
}
.league-item.selected {
  background: rgba(31, 191, 117, 0.14);
  border-color: rgba(31, 191, 117, 0.35);
  color: var(--text);
  font-weight: 600;
}
.league-item.selected input[type="checkbox"] {
  accent-color: var(--arb);
}

.bookmaker-toggle-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.bookmaker-toggle-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding: 4px 6px;
}

.bookie-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

/* logos are white-on-transparent; a dark pill keeps them visible in both themes */
.bookie-badge:has(.bookie-logo) {
  background: #0b0b0b;
  padding: 4px 10px;
}
.bookie-logo {
  height: 14px;
  width: auto;
  display: block;
}

.bookie-cell {
  display: flex;
  align-items: center;
}
.odds-age {
  font-size: 10px;
  margin-left: 6px;
  font-weight: 600;
}
.age-fresh { color: #2fd287; }
.age-ok { color: #e0a83f; }
.age-stale { color: #e0524a; }

.confidence-warn {
  margin-left: 5px;
  color: #e0a83f;
  cursor: help;
  vertical-align: middle;
}
.confidence-warn:empty { display: none; }
.confidence-warn svg { display: block; }

.kickoff-cell {
  display: flex;
  gap: 18px;
}
.kickoff-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 54px;
}
.kickoff-icon {
  display: inline-flex;
  opacity: 0.75;
}
.kickoff-icon svg {
  display: block;
}
.kickoff-label {
  font-size: 12px;
  color: var(--text);
}
.kickoff-time {
  font-weight: 700;
  color: var(--text);
  font-size: 13.5px;
}

.match-league-line {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 3px;
}
.league-flag {
  width: 14px;
  height: 10px;
  object-fit: cover;
  border-radius: 2px;
  flex: 0 0 auto;
}
.league-logo {
  width: 14px;
  height: 14px;
  object-fit: contain;
  border-radius: 3px;
  flex: 0 0 auto;
}
.match-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}
.match-name {
  font-weight: 400;
  font-size: 13.5px;
  color: var(--muted);
}
.match-outcome-label {
  font-weight: 700;
  color: var(--text);
}
.copy-btn {
  padding: 3px 9px;
  font-size: 11px;
  border-radius: var(--radius-sm);
  opacity: 0.55;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}
.copy-btn:hover { opacity: 1; border-color: var(--muted); }

.poly-link-col, td.poly-link-cell {
  width: 1%;
  white-space: nowrap;
  text-align: center;
}
.poly-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background: #1b6fd6;
  border: 1px solid transparent;
  opacity: 0.9;
  text-decoration: none;
  transition: opacity 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.poly-link-btn:hover { opacity: 1; background: #2a7fe8; }
.poly-link-btn:active { transform: translateY(1px); }
.poly-link-icon {
  height: 14px;
  width: auto;
  display: block;
}

#copy-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 16px;
  border-radius: var(--radius);
  font-size: 13px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 1000;
}
#copy-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Always shows on the page itself when an alert fires, regardless of
   whether desktop Notification permission was ever granted - the sound
   alone doesn't say what just qualified, and a browser notification can be
   missed, blocked, or never permitted in the first place. */
.alert-toast-container {
  position: fixed;
  top: 68px;
  right: 16px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 320px;
  pointer-events: none;
}
.alert-toast {
  pointer-events: auto;
  background: var(--panel);
  border: 1px solid #1b6fd6;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 10px 14px;
  font-size: 13px;
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.alert-toast.visible { opacity: 1; transform: translateX(0); }
.alert-toast-roi { font-weight: 800; color: var(--arb); font-size: 14px; }
.alert-toast-match { margin-top: 3px; color: var(--muted); }
.alert-toast-match strong { color: var(--text); }
.alert-toast-link { display: inline-block; margin-top: 6px; font-size: 11.5px; color: #6fb0f5; text-decoration: none; }
.alert-toast-link:hover { text-decoration: underline; }

main { padding: 20px; }

.table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: auto;
  max-height: calc(100vh - 220px);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: var(--panel);
}

th, td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--panel);
  color: var(--muted);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: inset 0 -1px 0 var(--border);
}
th.sortable {
  cursor: pointer;
  user-select: none;
  transition: color 0.12s ease;
}
th.sortable:hover { color: var(--text); }
.sort-arrow {
  display: inline-flex;
  color: var(--muted);
  opacity: 0.5;
  transition: transform 0.12s ease;
}
.sort-arrow svg {
  display: block;
}
.sort-arrow.active {
  color: var(--arb);
  opacity: 1;
}
/* The icon itself only draws an up-arrow-then-down-arrow pair - flipping it
   vertically when sorting ascending reuses that same icon to still show
   which direction is currently active. */
.sort-arrow.asc {
  transform: scaleY(-1);
}

tbody tr:nth-child(even) { background: var(--row-alt); }
tbody tr {
  transition: background 0.1s ease;
}
tbody tr.high-arb-row {
  background: rgba(31, 191, 117, 0.16);
}
tbody tr.both-positive-row {
  background: #05170d;
}
tbody tr:hover {
  background: rgba(31, 191, 117, 0.24);
}
tbody tr.both-positive-row:hover {
  background: #08210f;
}
tbody tr:last-child td { border-bottom: none; }

.poly-book {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.poly-row {
  display: grid;
  /* The odds column was "auto" (sized per-row), which shifted the $ total
     column left/right depending on that row's own odds text width, since
     each row is a separate grid instance - fixing it keeps every row's $
     total starting at the same x position, same fix as .kickoff-col. */
  grid-template-columns: 44px 48px 74px 1fr;
  align-items: baseline;
  gap: 10px;
}
.poly-roi {
  font-size: 11px;
  font-weight: 700;
}
.poly-side-badge {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 8px;
  text-align: center;
  white-space: nowrap;
}
.poly-bid-badge { color: #06110b; background: var(--arb); }
.poly-ask-badge { color: #e0524a; background: rgba(224, 82, 74, 0.14); }
.poly-cents {
  font-size: 10px;
  color: var(--muted);
  font-weight: 400;
  margin-left: 3px;
}
.poly-total { color: var(--muted); white-space: nowrap; }

/* Bid/Maker is the value roi_pct is actually derived from - bold and
   full-size. Ask/Taker is shown purely as extra book-depth context, so it's
   deliberately smaller/dimmer to keep Maker the visual focus of the cell. */
.poly-bid .poly-odds { font-weight: 700; font-size: 14px; color: var(--arb); }
.poly-bid .poly-total { font-weight: 600; color: var(--text); }
.poly-ask {
  font-size: 11.5px;
  opacity: 0.75;
}
.poly-ask .poly-odds { font-weight: 500; color: var(--text); }

.roi-positive { color: var(--arb); font-weight: 700; }
.roi-negative { color: var(--near); font-weight: 700; }

/* Liquidity Advantage: higher is better (thinner bid book relative to ask) */
.liq-tier-1 { color: #1fbf75; font-weight: 700; } /* 85-100%: best */
.liq-tier-2 { color: #8bc34a; font-weight: 700; } /* 70-85% */
.liq-tier-3 { color: #d9a441; font-weight: 700; } /* 50-70% */
.liq-tier-4 { color: #e07b39; font-weight: 700; } /* 30-50% */
.liq-tier-5 { color: #e0524a; font-weight: 700; } /* 0-30%: worst */

.nav-links {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}
.nav-link {
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.nav-link:hover { border-color: var(--muted); color: var(--text); }
.nav-link.active {
  color: var(--arb);
  border-color: rgba(31, 191, 117, 0.5);
  background: rgba(31, 191, 117, 0.14);
}
.nav-link.active:hover { border-color: rgba(31, 191, 117, 0.7); color: var(--arb); }

.admin-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
}
.admin-tab-btn {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.admin-tab-btn:hover { border-color: var(--muted); color: var(--text); }
.admin-tab-btn.active {
  color: var(--arb);
  border-color: rgba(31, 191, 117, 0.5);
  background: rgba(31, 191, 117, 0.14);
}
.admin-tab-btn.active:hover { border-color: rgba(31, 191, 117, 0.7); color: var(--arb); }

.feed-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.feed-row {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, transform 0.1s ease;
  animation: feed-row-in 0.2s ease;
}
.feed-row:hover { border-color: var(--muted); }

@keyframes feed-row-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.feed-row-top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.feed-match {
  font-weight: 700;
}
.feed-league {
  font-size: 12px;
  color: var(--muted);
}
.feed-source {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--near);
  background: rgba(217, 164, 65, 0.14);
  padding: 1px 6px;
  border-radius: 8px;
}
.feed-api-delay {
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 8px;
  white-space: nowrap;
}
.feed-api-delay.delay-good { color: #2fd287; background: rgba(47, 210, 135, 0.14); }
.feed-api-delay.delay-ok { color: #e0a83f; background: rgba(224, 168, 63, 0.14); }
.feed-api-delay.delay-bad { color: #e0524a; background: rgba(224, 82, 74, 0.14); }
.feed-time {
  margin-left: auto;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
.feed-row-changes {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.feed-change {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
.feed-change-outcome {
  color: var(--muted);
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.feed-change-old {
  color: var(--muted);
}
.feed-change-arrow {
  color: var(--muted);
}
.feed-change-new {
  font-weight: 700;
}
.change-up { color: var(--arb); }
.change-down { color: #e0524a; }

.empty { text-align: center; color: var(--muted); padding: 24px; }

.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.login-card {
  width: 100%;
  max-width: 340px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px 28px;
}
.login-logo {
  justify-content: center;
  margin-bottom: 24px;
}
.login-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.login-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}
.login-form input {
  font-size: 14px;
  padding: 9px 11px;
}
.login-form button {
  margin-top: 6px;
  padding: 10px;
  background: linear-gradient(135deg, #1fbf75, #17945a);
  border-color: transparent;
  color: #06110b;
  font-weight: 700;
}
.login-form button:hover {
  background: linear-gradient(135deg, #29d183, #1aa564);
}
.pin-inputs {
  position: relative;
  display: flex;
  gap: 10px;
  border-radius: var(--radius-sm);
  transition: box-shadow 0.15s ease;
}
.pin-inputs.focused {
  box-shadow: 0 0 0 3px rgba(31, 191, 117, 0.15);
  border-radius: var(--radius-sm);
}
/* The one real <input> a password manager can see and autofill into - laid
   over the visual boxes below but fully transparent, so it's still focusable
   and clickable while the 4 boxes do the actual on-screen rendering. */
.pin-real-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 2;
  cursor: text;
  padding: 0;
  border: none;
  background: transparent;
}
.pin-box {
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
}
.pin-box.filled {
  border-color: var(--arb);
}
.maintenance-banner {
  font-size: 12.5px;
  color: #e0524a;
  background: rgba(224, 82, 74, 0.12);
  border: 1px solid rgba(224, 82, 74, 0.35);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  margin-bottom: 14px;
  text-align: center;
}
.restart-banner {
  font-size: 12.5px;
  color: #3d9bf0;
  background: rgba(61, 155, 240, 0.12);
  border: 1px solid rgba(61, 155, 240, 0.35);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  margin-bottom: 14px;
  text-align: center;
}
.login-error {
  font-size: 12.5px;
  color: #e0524a;
  min-height: 16px;
}

.admin-wrap { max-width: 720px; margin: 0 auto; padding: 24px 20px; }
.quota-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}
.quota-box {
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.quota-box-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 8px;
}
.quota-box-label span[title] {
  cursor: help;
  text-transform: none;
  letter-spacing: normal;
}
.quota-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 13px;
}
.quota-reset {
  font-size: 12px;
  color: var(--muted);
}
.quota-bar-track {
  height: 6px;
  border-radius: 4px;
  background: var(--panel-2);
  overflow: hidden;
}
.quota-bar-fill {
  height: 100%;
  background: var(--arb);
  border-radius: 4px;
  transition: width 0.3s ease, background 0.3s ease;
}
.quota-bar-fill.quota-warn { background: #e0a83f; }
.quota-bar-fill.quota-danger { background: #e0524a; }
.quota-projection {
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
}
.quota-projection-ok { color: var(--arb); }
.quota-projection-danger { color: #e0524a; font-weight: 700; }

.maintenance-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 24px;
}
.maintenance-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#maintenance-status-text { font-weight: 700; }
#maintenance-status-text.on { color: #e0524a; }
#maintenance-status-text.off { color: var(--arb); }
.maintenance-hint {
  font-size: 12px;
  color: var(--muted);
  max-width: 480px;
}
.bookmaker-box,
.server-settings-box {
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 24px;
}
#admin-league-search { width: 100%; margin-bottom: 8px; }
.bookmaker-current-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  margin-bottom: 8px;
}
.bookmaker-hint {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 10px;
}
#bookmaker-search { width: 100%; margin-bottom: 8px; }
.bookmaker-apply-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}
.maintenance-toggle-btn.maintenance-on {
  background: linear-gradient(135deg, #e0524a, #b5372f);
  border-color: transparent;
  color: #fff;
}
.maintenance-toggle-btn.maintenance-on:hover {
  background: linear-gradient(135deg, #e86962, #c23f36);
}
.user-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}
.user-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.user-row-name { font-weight: 700; flex: 1; }
.user-row-activity {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
.user-row-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 8px;
  color: var(--arb);
  background: rgba(31, 191, 117, 0.14);
}
.user-row-delete {
  padding: 4px 10px;
  font-size: 12px;
}
.add-user-form {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-wrap: wrap;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
}

.watch-config-match {
  font-weight: 700;
  margin-bottom: 10px;
}
.watch-inline-checks {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.watch-inline-checks label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
}
.watch-inline-checks input[type="checkbox"] {
  width: 15px;
  height: 15px;
}
#watch-config-form {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.watch-alert-row-summary { flex: 1; }
.watch-alert-row-match { font-weight: 700; }
.watch-alert-row-detail { font-size: 12px; color: var(--muted); }
.add-user-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}
.add-user-form label.checkbox-label {
  flex-direction: row;
  align-items: center;
  gap: 6px;
}

/* --- dutching calculator --- */
.calc-wrap { max-width: 900px; margin: 0 auto; padding: 24px 20px; }
.calc-back {
  display: inline-block;
  margin-bottom: 16px;
  color: var(--muted);
  font-size: 13px;
  text-decoration: none;
  transition: color 0.15s ease;
}
.calc-back:hover { color: var(--text); }

.calc-match-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 16px 18px;
  margin-bottom: 20px;
}
.calc-match-card-inner {
  display: flex;
  align-items: center;
  gap: 12px;
}
.calc-match-info { flex: 1; min-width: 0; }
.calc-match-card-inner > .poly-link-btn {
  flex-shrink: 0;
  padding: 9px 16px;
}
.calc-match-card-inner > .poly-link-btn .poly-link-icon { height: 18px; width: auto; }
.calc-match-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.calc-match-name { font-size: 16px; font-weight: 700; }
.calc-match-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12.5px;
  color: var(--muted);
}
.calc-match-outcome strong { color: var(--text); }
.calc-match-blank { font-size: 13px; color: var(--muted); text-align: center; padding: 4px 0; }

.calc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}
@media (max-width: 720px) {
  .calc-grid { grid-template-columns: 1fr; }
}

.calc-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 18px 20px;
}

.calc-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.calc-live-status {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--muted);
}

.history-legend {
  display: flex;
  gap: 16px;
  margin: 10px 0 4px;
}
.history-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}
.history-legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex: 0 0 auto;
}
.history-swatch-book { background: #1b6fd6; }
.history-swatch-poly { background: #e0a83f; }
.history-canvas {
  width: 100%;
  display: block;
  margin-top: 6px;
  cursor: crosshair;
}
.history-tooltip {
  position: fixed;
  z-index: 50;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 12px;
  color: var(--text);
  pointer-events: none;
  box-shadow: var(--shadow-sm);
  line-height: 1.5;
}

.calc-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
}
.calc-field-label {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12.5px;
  color: var(--muted);
}
.calc-field-hint { font-size: 11px; color: var(--muted); opacity: 0.75; font-weight: 400; }
.calc-field input { font-size: 15px; padding: 9px 12px; width: 100%; }

.calc-updated-badge {
  position: absolute;
  top: 1px;
  right: 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #6fb0f5;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}
.calc-updated-badge.visible { opacity: 1; transform: translateY(0); }

/* A field the live feed just changed pulses noticeably (not just a static
   border color) so an update is hard to miss even at a glance, then settles
   back to normal - the badge above adds the same "just updated" signal in
   words, in case the pulse itself is caught mid-fade. */
@keyframes calc-pulse {
  0% {
    border-color: #1b6fd6;
    background: rgba(27, 111, 214, 0.16);
    box-shadow: 0 0 0 0 rgba(27, 111, 214, 0.45);
  }
  55% {
    border-color: #1b6fd6;
    background: rgba(27, 111, 214, 0.16);
    box-shadow: 0 0 0 7px rgba(27, 111, 214, 0);
  }
  100% {
    border-color: var(--border);
    background: transparent;
    box-shadow: 0 0 0 0 rgba(27, 111, 214, 0);
  }
}
.calc-field input.calc-flash { animation: calc-pulse 1.6s ease; }

.calc-basis-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.calc-basis-chip {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 10px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.calc-basis-chip:hover:not(:disabled) { border-color: var(--muted); }
.calc-basis-chip.active {
  border-color: #1b6fd6;
  background: rgba(27, 111, 214, 0.14);
  color: var(--text);
}
.calc-basis-chip:disabled { opacity: 0.4; cursor: not-allowed; }
.calc-basis-hint { font-weight: 400; opacity: 0.8; }
.calc-basis-value { font-size: 14px; font-weight: 800; color: var(--text); }
.calc-basis-chip.active .calc-basis-value { color: #6fb0f5; }

.calc-hero {
  text-align: center;
  padding: 18px 0 16px;
  border-bottom: 1px solid var(--border);
  margin: 12px 0 16px;
}
.calc-hero-label {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.calc-hero-value { font-size: 38px; font-weight: 800; line-height: 1; }
.calc-hero-sub { font-size: 13px; color: var(--muted); margin-top: 8px; }

.calc-hero-shares { padding-top: 4px; }
.calc-shares-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
/* Same blue-highlight treatment as the active Maker/Taker basis chip below,
   so the two blue accents on this page read as one consistent visual
   language instead of two different button styles. */
.calc-copy-link {
  background: rgba(27, 111, 214, 0.14);
  border: 1px solid #1b6fd6;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  transition: background 0.15s ease, transform 0.1s ease;
}
.calc-copy-link:hover { background: rgba(27, 111, 214, 0.22); }
.calc-copy-link:active { transform: translateY(1px); }

/* Live-update pulse for the shares/profit hero numbers - a plain color
   shift, consistent with these being unboxed stat numbers rather than a
   bordered "readout" widget. */
@keyframes calc-pulse-text {
  0%, 40% { color: #6fb0f5; }
  100% { color: var(--text); }
}
.calc-hero-value.calc-flash { animation: calc-pulse-text 1.6s ease; }

.calc-breakdown { display: flex; flex-direction: column; gap: 12px; }
.calc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 13.5px;
  color: var(--muted);
}
.calc-row strong { color: var(--text); font-weight: 700; white-space: nowrap; }
/* Higher specificity than the plain rule above (class+element vs. class),
   so a colored ROI value inside a .calc-row doesn't lose its green/near
   color back to the row's default off-white - this was silently broken
   before (ROI on total capital always rendered plain white). */
.calc-row strong.roi-positive { color: var(--arb); }
.calc-row strong.roi-negative { color: var(--near); }

.calc-row-summary {
  margin-top: 2px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 14px;
}
.calc-row-summary strong { font-size: 15px; }

.calc-warning {
  margin-top: 16px;
  font-size: 12.5px;
  color: var(--near);
  background: rgba(217, 164, 65, 0.12);
  border: 1px solid rgba(217, 164, 65, 0.35);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
}

.calc-col, td.calc-cell { width: 1%; white-space: nowrap; text-align: center; }
.calc-cell-links { display: flex; gap: 6px; justify-content: center; }
/* Same blue as the calculator page's active Maker/Taker chip and Copy
   button, so this entry point reads as "leads to the calculator" at a
   glance rather than blending in as just another neutral icon. */
.calc-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  background: rgba(27, 111, 214, 0.14);
  border: 1px solid #1b6fd6;
  color: var(--text);
  opacity: 0.85;
  transition: opacity 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.calc-link-btn:hover { opacity: 1; background: rgba(27, 111, 214, 0.24); }
.calc-link-btn:active { transform: translateY(1px); }
.calc-link-btn svg { display: block; }