/* ─── BetEdge Premium Dashboard ──────────────────────────── */

/* ============================================================================
   GLOBAL CUSTOM SCROLLBAR — dark theme, subtle, mint accent on hover
   ============================================================================ */
/* Firefox */
html {
  scrollbar-width: thin;
  scrollbar-color: #2a3245 transparent;
}
/* WebKit (Chrome / Safari / Edge / Brave) */
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: #2a3245;
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: content-box;
  transition: background-color .15s;
}
*::-webkit-scrollbar-thumb:hover {
  background: #34d399;
  background-clip: content-box;
  border: 2px solid transparent;
}
*::-webkit-scrollbar-thumb:active {
  background: #10b981;
  background-clip: content-box;
  border: 2px solid transparent;
}
*::-webkit-scrollbar-corner {
  background: transparent;
}
/* Sisemmät panelit: ohuempi scrollbar */
.notif-list::-webkit-scrollbar,
.ev-dd-menu::-webkit-scrollbar,
.db-dd-menu::-webkit-scrollbar,
.modal-overlay::-webkit-scrollbar,
.pb-modal::-webkit-scrollbar,
.strat-modal::-webkit-scrollbar,
.tier-modal::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
.notif-list::-webkit-scrollbar-thumb,
.ev-dd-menu::-webkit-scrollbar-thumb,
.db-dd-menu::-webkit-scrollbar-thumb {
  border: 1.5px solid transparent;
}

:root {
  /* Backgrounds */
  --bg-base: #0a0e1a;
  --bg-surface: #141925;
  --bg-surface-2: #1c2231;
  --bg-hover: #232a3d;
  --bg-elevated: #1a2033;

  /* Borders */
  --border: #242b3d;
  --border-strong: #323a52;

  /* Text */
  --text: #f1f3f9;
  --text-muted: #b4bacb;
  --text-dim: #7a8094;

  /* Brand — Overlay green */
  --primary: #10b981;
  --primary-hover: #34d399;
  --primary-soft: rgba(16, 185, 129, 0.13);
  --accent: #84cc16;
  --accent-soft: rgba(132, 204, 22, 0.14);
  --primary-deep: #059669;

  /* Semantic */
  --success: #10b981;
  --success-bg: rgba(16, 185, 129, 0.14);
  --success-strong: #059669;
  --warning: #f59e0b;
  --warning-bg: rgba(245, 158, 11, 0.14);
  --danger: #ef4444;
  --danger-bg: rgba(239, 68, 68, 0.14);

  /* EV hierarchy */
  --ev-exceptional: #10b981;
  --ev-exceptional-bg: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(16, 185, 129, 0.08));
  --ev-strong: #22c55e;
  --ev-strong-bg: rgba(34, 197, 94, 0.16);
  --ev-value: #84cc16;
  --ev-value-bg: rgba(132, 204, 22, 0.14);
  --ev-marginal: #94a3b8;
  --ev-marginal-bg: rgba(148, 163, 184, 0.10);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.4);
  --shadow-glow: 0 0 24px rgba(16, 185, 129, 0.25);

  /* Radius */
  --r-sm: 6px;
  --r: 10px;
  --r-lg: 14px;
  --r-xl: 20px;

  /* Legacy (backwards-compat) */
  --bg-dark: var(--bg-base);
  --bg-card: var(--bg-surface);
  --bg-card-hover: var(--bg-hover);
  --green: var(--success);
  --green-bg: var(--success-bg);
  --yellow: var(--warning);
  --yellow-bg: var(--warning-bg);
  --red: var(--danger);
  --red-bg: var(--danger-bg);

  /* ─── Uudistettu UI — mockup-yhteensopivat aliakset ─────── */
  --bg: var(--bg-base);
  --surface: var(--bg-surface);
  --surface-2: var(--bg-surface-2);
  --surface-3: #222a3d;
  --border-2: var(--border-strong);
  --muted: var(--text-muted);
  --dim: var(--text-dim);
  --green-2: #22c55e;
  --mint: var(--primary-hover);
  --amber: var(--warning);
}

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

html, body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  background: var(--bg-base);
  color: var(--text);
  min-height: 100vh;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Estä sivuttaisscroll mobiilissa — mikään lapsielementti ei saa puhkaista viewportia */
  overflow-x: hidden;
  max-width: 100%;
}

body {
  background-image:
    radial-gradient(ellipse 1000px 600px at 20% -10%, rgba(16, 185, 129, 0.08), transparent),
    radial-gradient(ellipse 800px 500px at 80% 10%, rgba(132, 204, 22, 0.05), transparent);
  background-attachment: fixed;
}

/* ─── Header ────────────────────────────────────────────── */

.header {
  background: rgba(20, 25, 37, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
  display: flex;
  align-items: center;
  height: 60px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.logo {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin-right: 32px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.nav {
  display: flex;
  gap: 2px;
}

.nav-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  padding: 8px 14px;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.15s ease;
  letter-spacing: 0.2px;
}

.nav-btn:hover {
  background: rgba(255,255,255,0.04);
  color: var(--text);
}

.nav-btn.active {
  background: var(--primary-soft);
  color: var(--primary-hover);
  font-weight: 600;
}

.nav-btn.disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Grouped dropdown navigation */
.nav-group {
  position: relative;
}

.nav-group-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.nav-caret {
  font-size: 10px;
  opacity: 0.6;
  transition: transform 0.15s ease;
}

.nav-group.open .nav-caret {
  transform: rotate(180deg);
  opacity: 1;
}

.nav-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 180px;
  background: var(--bg-card, #131826);
  border: 1px solid var(--border, #232a3a);
  border-radius: var(--r-md, 10px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.3);
  padding: 6px;
  display: none;
  z-index: 1000;
  flex-direction: column;
  gap: 1px;
}

.nav-group.open .nav-dropdown {
  display: flex;
  animation: navDropFade 0.12s ease-out;
}

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

.nav-dropdown-item {
  background: none;
  border: none;
  color: var(--text-muted);
  text-align: left;
  padding: 9px 12px;
  border-radius: var(--r-sm, 6px);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.12s ease;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

.nav-dropdown-item:hover {
  background: rgba(255,255,255,0.05);
  color: var(--text);
}

.nav-dropdown-item.active {
  background: var(--primary-soft);
  color: var(--primary-hover);
  font-weight: 600;
}

/* When a child tab is active, highlight the parent group button */
.nav-group.has-active .nav-group-btn {
  color: var(--primary-hover);
  background: var(--primary-soft);
  font-weight: 600;
}

/* Profile menu */
.profile-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-elev, rgba(255,255,255,0.03));
  border: 1px solid var(--border, #232a3a);
  border-radius: 999px;
  padding: 4px 10px 4px 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  color: var(--text);
}

.profile-trigger:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
}

.profile-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary, #10b981), var(--accent, #84cc16));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  flex-shrink: 0;
}

.profile-meta {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: 11px;
  line-height: 1.1;
}

.profile-tier {
  font-weight: 800;
  letter-spacing: 0.6px;
  font-size: 10.5px;
  text-transform: uppercase;
}

.profile-caret {
  font-size: 9px;
  opacity: 0.6;
  transition: transform 0.15s ease;
}

.profile-menu-wrapper.open .profile-caret {
  transform: rotate(180deg);
  opacity: 1;
}

.profile-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  background: var(--bg-card, #131826);
  border: 1px solid var(--border, #232a3a);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.55), 0 4px 12px rgba(0,0,0,0.35);
  padding: 6px;
  display: none;
  z-index: 1000;
  flex-direction: column;
  gap: 1px;
}

.profile-menu-wrapper.open .profile-dropdown {
  display: flex;
  animation: profileFadeIn 0.14s ease-out;
}

@keyframes profileFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.profile-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 10px;
}

.profile-avatar-lg {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary, #10b981), var(--accent, #84cc16));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
  flex-shrink: 0;
}

.profile-email {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-tier-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.profile-divider {
  height: 1px;
  background: var(--border, #232a3a);
  margin: 4px 6px;
}

.profile-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  color: var(--text-muted);
  text-align: left;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.12s ease;
  width: 100%;
}

.profile-item:hover {
  background: rgba(255,255,255,0.05);
  color: var(--text);
}

.profile-item-icon {
  font-size: 14px;
  width: 22px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  opacity: 0.95;
  color: var(--success, #22c55e);
}

.profile-item-icon .lucide-icon,
.profile-item-icon svg,
.profile-item-icon i[data-lucide] {
  stroke: currentColor;
  width: 16px;
  height: 16px;
}

/* Logout-painike — punainen ikoni vihreän sijaan */
.profile-item-danger .profile-item-icon {
  color: var(--danger, #ef4444);
}

/* Mobiilin sivuvalikon ikonit — vihreä currentColor → svg perii */
.ds-menu-item-icon {
  color: var(--success, #22c55e);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.ds-menu-item-icon i[data-lucide],
.ds-menu-item-icon svg {
  stroke: currentColor;
  width: 18px;
  height: 18px;
}

.profile-item-danger {
  color: var(--danger, #ef4444);
}

.profile-item-danger:hover {
  background: rgba(239,68,68,0.10);
  color: var(--danger, #ef4444);
}

@media (max-width: 600px) {
  .profile-meta { display: none; }
  .profile-trigger { padding: 4px 6px 4px 4px; }
  .profile-dropdown { min-width: 220px; }
}

/* Dashboard: Hot Opportunities / Alkaa pian — allekkain mobiilissa että nimet mahtuvat */
@media (max-width: 768px) {
  .dash-two-col {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* ─── Lucide-ikonit ──────────────────────────────────────── */
.lucide-icon,
i[data-lucide],
svg.lucide {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  flex-shrink: 0;
  /* SVG perii tekstin värin currentColor:n kautta */
  stroke: currentColor;
  fill: none;
}

/* Drawer-stat (Tulos / Panos / EV / CLV -grid bet-drawerissa) */
.drawer-stat-label {
  font-size: 10.5px;
  color: var(--text-dim);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.drawer-stat-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

/* W/L/P settle-napit — kompaktit ikonipohjaiset */
.settle-btn {
  border: none;
  border-radius: var(--r-sm, 6px);
  cursor: pointer;
  padding: 5px 9px;
  margin: 0 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: filter 0.12s ease, transform 0.05s ease;
  color: #fff;
  min-width: 30px;
}

.settle-btn:hover { filter: brightness(1.12); }
.settle-btn:active { transform: scale(0.95); }

.settle-btn-w { background: var(--success, #22c55e); }
.settle-btn-l { background: var(--danger, #ef4444); }
.settle-btn-p { background: var(--warning, #f59e0b); color: #1a1a1a; }

.settle-btn .lucide-icon { stroke: currentColor; }

.header-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.6);
}

.status-dot.error {
  background: var(--danger);
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.6);
}

.status-dot.loading {
  background: var(--warning);
  animation: pulse-soft 1.2s infinite;
}

@keyframes pulse-soft {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); }
}

.status-text {
  font-size: 12px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

/* ─── Main ──────────────────────────────────────────────── */

.main {
  max-width: 1480px;
  margin: 0 auto;
  padding: 24px;
}
/* Leveämpi container suurilla näytöillä (EV-taulukko + Historia hyötyvät tilasta) */
@media (min-width: 1700px) {
  .main { max-width: 1660px; }
}
@media (min-width: 1920px) {
  .main { max-width: 1840px; }
}
@media (min-width: 2200px) {
  .main { max-width: 2080px; }
}
@media (min-width: 2560px) {
  .main { max-width: 2400px; }
}

/* ─── Filters ───────────────────────────────────────────── */

.filters {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  align-items: flex-end;
}

/* Uusi yhtenäinen ruudukko: jokainen .filter-group samanlevyinen, käyttäjä näkee yhden siistin rivin
   (desktop auto-fill, tabletti 3-col, mobiili 2-col). */
.filters.fg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  align-items: stretch;
  gap: 10px 12px;
}
.filters.fg-grid .fg-full {
  grid-column: 1 / -1;
}
.filters.fg-grid .btn,
.filters.fg-grid .filter-actions {
  grid-column: 1 / -1;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.filter-group .filter-select,
.filter-group .filter-input {
  width: 100%;
  min-width: 0;
}

/* Filter actions — koko rivin ottava nappirivi */
.filter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
}
.filter-actions .btn { padding: 9px 16px; font-size: 13px; }

/* Bookmaker chip-rivi — tasakorkeat napit, ei rikkonaisia rivejä */
.bk-chip-row {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.bk-chip {
  padding: 6px 12px;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text-muted);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.12s ease;
  line-height: 1.15;
  white-space: nowrap;
}
.bk-chip:hover {
  border-color: var(--border-strong);
  color: var(--text);
  background: var(--bg);
}
.bk-chip.bk-chip-on {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary-hover);
  font-weight: 700;
}

.filter-label {
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 600;
}

.filter-select, .filter-input {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 9px 12px;
  border-radius: var(--r-sm);
  font-size: 13px;
  min-width: 140px;
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.filter-select:hover, .filter-input:hover {
  border-color: var(--border-strong);
}

.filter-select:focus, .filter-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

/* Buttons */

.btn {
  background: var(--primary);
  color: #fff;
  border: none;
  padding: 9px 18px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.btn:hover {
  background: var(--primary-hover);
  box-shadow: 0 6px 14px rgba(16, 185, 129, 0.35);
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn-outline {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
}

.btn-outline:hover {
  background: var(--bg-surface);
  border-color: var(--border-strong);
  color: var(--text);
  box-shadow: none;
  transform: none;
}

/* ─── Stats Bar ─────────────────────────────────────────── */

.stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}

.stat-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px 20px;
  transition: transform 0.15s ease, border-color 0.15s ease;
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.stat-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
}

.stat-card:hover::before {
  opacity: 0.7;
}

.stat-value {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.8px;
  font-variant-numeric: tabular-nums;
}

.stat-label {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}

.stat-value.green { color: var(--success); }
.stat-value.yellow { color: var(--warning); }
.stat-value.red { color: var(--danger); }

/* ─── Table ─────────────────────────────────────────────── */

.table-container {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow-x: auto;
  overflow-y: hidden;
  box-shadow: var(--shadow-sm);
}

.table-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 22px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface-2);
}

.table-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.2px;
}

.table-meta {
  font-size: 12px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th {
  text-align: left;
  padding: 12px 16px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-dim);
  font-weight: 700;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  background: var(--bg-surface-2);
}

th:hover {
  color: var(--text);
  background: var(--bg-hover);
}

td {
  padding: 13px 16px;
  font-size: 13px;
  border-bottom: 1px solid rgba(36, 43, 61, 0.4);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

tr:hover { background: rgba(255, 255, 255, 0.02); }
tr:last-child td { border-bottom: none; }

/* ─── EV Badges — Premium Hierarchy ─────────────────────── */

.ev-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2px;
  border: 1px solid transparent;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  max-width: 100%;
}

/* Exceptional: >=6% edge (badge shows "+X%") */
.ev-exceptional {
  background: var(--ev-exceptional-bg);
  color: var(--ev-exceptional);
  border-color: rgba(16, 185, 129, 0.4);
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.25);
}

.ev-exceptional::before { content: '🔥'; font-size: 11px; }

/* Strong: 4-6% */
.ev-strong {
  background: var(--ev-strong-bg);
  color: var(--ev-strong);
  border-color: rgba(34, 197, 94, 0.3);
}

.ev-strong::before { content: '⭐'; font-size: 10px; }

/* Value: 2-4% */
.ev-value {
  background: var(--ev-value-bg);
  color: var(--ev-value);
  border-color: rgba(132, 204, 22, 0.25);
}

.ev-value::before { content: '✓'; }

/* Marginal: <2% */
.ev-marginal {
  background: var(--ev-marginal-bg);
  color: var(--ev-marginal);
  border-color: rgba(148, 163, 184, 0.2);
}

/* Legacy aliases */
.ev-high { background: var(--ev-exceptional-bg); color: var(--ev-exceptional); border: 1px solid rgba(16, 185, 129, 0.4); padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; display: inline-block; }
.ev-mid { background: var(--ev-strong-bg); color: var(--ev-strong); border: 1px solid rgba(34, 197, 94, 0.3); padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; display: inline-block; }
.ev-low { background: var(--ev-marginal-bg); color: var(--ev-marginal); padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; display: inline-block; }

/* Loss result badge */
.result-won, .result-lost, .result-push {
  padding: 3px 9px;
  border-radius: var(--r-sm);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.result-won { background: var(--success-bg); color: var(--success); }
.result-lost { background: var(--danger-bg); color: var(--danger); }
.result-push { background: var(--warning-bg); color: var(--warning); }

/* ─── Book / Chips ──────────────────────────────────────── */

.book-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: var(--r-sm);
  font-size: 11px;
  font-weight: 600;
  background: var(--bg-hover);
  color: var(--text);
  letter-spacing: 0.3px;
  border: 1px solid var(--border);
}

.odds-cell {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  font-size: 13px;
}

.fair-odds {
  color: var(--text-dim);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.odds-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.odds-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 4px 9px;
  font-size: 12px;
  cursor: default;
}

.odds-chip:hover {
  background: var(--bg-hover);
}

.odds-name {
  color: var(--text-dim);
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.odds-val {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

/* ─── Bet Card (Premium) ────────────────────────────────── */

.bet-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bet-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.bet-card.ev-exceptional-card {
  border-color: rgba(16, 185, 129, 0.35);
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.05), transparent 60%), var(--bg-surface);
}

.bet-card.ev-exceptional-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--success), transparent);
}

.bet-card.is-new {
  animation: new-bet-glow 1.5s ease-out;
  border-color: var(--primary);
}

@keyframes new-bet-glow {
  0% { box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.5); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.bc-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding-right: 38px; /* Tilaa absoluuttiselle slip-add-btn:lle (+) että bc-time ei mene päälle */
}

.bc-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.bc-sport-league {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bc-sport {
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.bc-league {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bc-time {
  font-size: 11px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

.bc-match {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.3px;
  line-height: 1.3;
}

.bc-match-vs {
  color: var(--text-dim);
  font-weight: 400;
  margin: 0 6px;
}

.bc-body {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 16px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.bc-selection {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bc-market {
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.bc-pick {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.bc-pick-hdp {
  color: var(--primary-hover);
  font-weight: 800;
}

.bc-odds {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.bc-odds-label {
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.bc-odds-val {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
}

.bc-book {
  font-size: 11px;
  color: var(--text-muted);
}

.bc-stake {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  padding-left: 16px;
  border-left: 1px solid var(--border);
}

.bc-stake-label {
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.bc-stake-val {
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.bc-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.bc-meta {
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: var(--text-dim);
  align-items: center;
}

.bc-meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.bc-meta-label {
  color: var(--text-dim);
}

.bc-meta-val {
  color: var(--text-muted);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.bc-confidence {
  display: flex;
  align-items: center;
  gap: 6px;
}

.bc-confidence-bar {
  display: inline-flex;
  gap: 2px;
}

.bc-confidence-bar span {
  width: 6px;
  height: 8px;
  background: var(--border);
  border-radius: 1px;
  display: inline-block;
}

.bc-confidence-bar span.filled {
  background: var(--primary);
}

.bc-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.bc-action {
  background: var(--bg-surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 6px 12px;
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.bc-action:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
  color: var(--text);
}

.bc-action.primary {
  background: var(--primary-soft);
  color: var(--primary-hover);
  border-color: rgba(16, 185, 129, 0.25);
}

.bc-action.primary:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* Track-action (+ Trackeriin) — vihreä "tallenna omaan trackeriin" */
.bc-action.bc-action-track {
  background: rgba(34, 197, 94, 0.10);
  color: var(--success, #22c55e);
  border-color: rgba(34, 197, 94, 0.30);
}

.bc-action.bc-action-track i[data-lucide],
.bc-action.bc-action-track svg {
  stroke: currentColor;
  width: 14px;
  height: 14px;
}

.bc-action.bc-action-track:hover {
  background: var(--success, #22c55e);
  color: #fff;
  border-color: var(--success, #22c55e);
}

/* Fair odds mini-label EV badgen alla — kompakti versio mobiilille */
.bc-ev-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.bc-fair-mini {
  font-size: 9.5px;
  color: var(--text-dim);
  font-weight: 600;
  letter-spacing: 0.3px;
  font-variant-numeric: tabular-nums;
  margin-left: 4px;
}

/* Cards grid */
.bet-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 14px;
}

/* ─── Loading / Empty ───────────────────────────────────── */

.loading-container, .empty-container, .error-container {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-dim);
}

.spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 16px;
}

@keyframes spin { to { transform: rotate(360deg); } }

.error-container { color: var(--danger); }

/* Skeleton loading */
.skeleton {
  background: linear-gradient(90deg,
    var(--bg-surface) 0%,
    var(--bg-hover) 50%,
    var(--bg-surface) 100%);
  background-size: 200% 100%;
  animation: skeleton-wave 1.5s infinite;
  border-radius: var(--r-sm);
}

@keyframes skeleton-wave {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-card {
  height: 160px;
  border-radius: var(--r-lg);
}

/* ─── Footer ────────────────────────────────────────────── */

.footer {
  text-align: center;
  padding: 28px 24px 40px;
  color: var(--text-dim);
  font-size: 12px;
  border-top: 1px solid var(--border);
  margin-top: 40px;
}
.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
.footer-row { line-height: 1.6; }
.footer-row strong { color: var(--text-muted); }
.footer-links {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 600;
}
.footer-disclaimer {
  font-size: 11px;
  color: var(--text-dim);
  opacity: 0.85;
  max-width: 700px;
}
.footer a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.12s;
}
.footer a:hover { color: var(--text); }
@media (max-width: 600px) {
  .footer-links { gap: 14px; font-size: 12px; }
  .footer-disclaimer { font-size: 10.5px; }
}

/* ─── Utility ───────────────────────────────────────────── */

.text-dim { color: var(--text-dim); }
.text-muted { color: var(--text-muted); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.tabular { font-variant-numeric: tabular-nums; }

/* Pulsing dot for live events */
.live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.8);
  animation: pulse-soft 1s infinite;
  margin-right: 4px;
}

/* ─── EV Explainer popover ──────────────────────────────── */

.ev-explainer-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 12px;
  border-radius: 50%;
}

.ev-explainer-close:hover {
  background: var(--bg-hover);
  color: var(--text);
}

/* ─── Hot Opportunities pinned ──────────────────────────── */

.hot-section {
  margin-bottom: 24px;
  padding: 16px 18px 14px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.05) 100%);
  border: 1px solid rgba(16, 185, 129, 0.22);
  border-radius: var(--r-xl);
  position: relative;
  overflow: hidden;
}

.hot-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ev-exceptional), transparent);
}

.hot-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}

.hot-title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.2px;
}

.hot-subtitle {
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.hot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 12px;
}

/* ─── Quick toggle pills ────────────────────────────────── */

.quick-pills {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-bottom: 16px;
  padding-bottom: 2px;
}

.quick-pills::-webkit-scrollbar { display: none; }

.quick-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.15s ease;
  font-family: inherit;
}

.quick-pill:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
  color: var(--text);
}

.quick-pill.active {
  background: var(--primary-soft);
  border-color: rgba(16, 185, 129, 0.4);
  color: var(--primary-hover);
}

.quick-pill-count {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-dim);
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.quick-pill.active .quick-pill-count {
  background: var(--primary);
  color: #fff;
}

/* ─── Bottom Nav (Mobile) ───────────────────────────────── */

.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;
  background: rgba(20, 25, 37, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--border);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  justify-content: space-around;
  align-items: center;
}

.bn-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  padding: 8px 6px;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
  min-width: 0;
  border-radius: var(--r-sm);
  transition: all 0.15s ease;
  position: relative;
}

.bn-btn:active {
  background: rgba(255,255,255,0.05);
}

.bn-btn.active {
  color: var(--primary-hover);
}

.bn-btn.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 3px;
  background: var(--primary);
  border-radius: 0 0 3px 3px;
}

.bn-icon {
  font-size: 20px;
  line-height: 1;
}

.bn-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

/* Slip FAB */

.slip-fab {
  display: flex;
  position: fixed;
  right: 18px;
  bottom: 82px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #fff;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.5);
  z-index: 95;
  font-size: 24px;
  transition: transform 0.15s ease;
}

.slip-fab:hover {
  transform: scale(1.05);
}

.slip-fab:active {
  transform: scale(0.95);
}

.slip-count {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg-base);
  padding: 0 5px;
}

/* Slip Panel */

.slip-panel {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 400px;
  max-width: 100vw;
  max-height: 80vh;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--shadow-lg);
  z-index: 96;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slideUp 0.25s ease;
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.slip-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface-2);
}

.slip-title {
  font-size: 15px;
  font-weight: 700;
}

.slip-close {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 20px;
  cursor: pointer;
  padding: 0;
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
}

.slip-close:hover {
  background: var(--bg-hover);
  color: var(--text);
}

.slip-body {
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.slip-item {
  background: var(--bg-surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.slip-item-info {
  flex: 1;
  min-width: 0;
}

.slip-item-match {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.slip-item-pick {
  font-size: 11px;
  color: var(--text-dim);
}

.slip-item-odds {
  font-size: 16px;
  font-weight: 700;
  color: var(--primary-hover);
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════
   Phase 1 additions
   ═══════════════════════════════════════════════════════════ */

/* Tooltip — body-tasolla (ei clippaudu overflow:hidden containerissa) */
.tt { display: inline-flex; align-items: center; gap: 4px; cursor: help; }
.tt-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--bg-hover); color: var(--text-dim);
  font-size: 10px; font-weight: 700; border: 1px solid var(--border);
  transition: all 0.15s; flex-shrink: 0;
}
.tt:hover .tt-icon { background: var(--primary); color: white; border-color: var(--primary); }
#tt-floater {
  position: fixed;
  background: #1a1f2e; border: 1px solid var(--border); color: var(--text);
  padding: 10px 12px; border-radius: 8px;
  font-size: 12px; font-weight: 400; line-height: 1.5;
  width: 260px; max-width: 90vw;
  text-transform: none; letter-spacing: 0; white-space: normal; text-align: left;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.12s; z-index: 9999;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
#tt-floater.visible { opacity: 1; visibility: visible; }
#tt-floater::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent;
}
#tt-floater.above::after { top: 100%; border-top-color: #1a1f2e; }
#tt-floater.below::after { bottom: 100%; border-bottom-color: #1a1f2e; }

/* Toast */
.toast-container {
  position: fixed; bottom: 20px; right: 20px;
  display: flex; flex-direction: column; gap: 10px;
  z-index: 9999; pointer-events: none; max-width: 380px;
}
.toast {
  background: #1a1f2e; border: 1px solid var(--border); border-left: 3px solid var(--primary);
  border-radius: 10px; padding: 12px 16px; min-width: 280px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5); pointer-events: auto;
  animation: toastIn 0.25s cubic-bezier(.2,.9,.3,1.2);
  display: flex; flex-direction: column; gap: 4px;
}
.toast.toast-success { border-left-color: var(--success); }
.toast.toast-danger  { border-left-color: var(--danger); }
.toast.toast-warning { border-left-color: var(--warning); }
.toast.toast-leaving { animation: toastOut 0.22s forwards; }
@keyframes toastIn { from { transform: translateX(120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes toastOut { to { transform: translateX(120%); opacity: 0; } }
.toast-title {
  font-size: 13px; font-weight: 700; color: var(--text);
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.toast-msg { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
.toast-actions { margin-top: 6px; display: flex; gap: 8px; }
.toast-btn {
  background: transparent; border: 1px solid var(--border); color: var(--text-muted);
  padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 600; cursor: pointer;
}
.toast-btn:hover { background: var(--bg-hover); color: var(--text); }
.toast-close {
  background: transparent; border: none; color: var(--text-dim);
  cursor: pointer; font-size: 14px; line-height: 1; padding: 0;
}

/* Empty state */
.empty-state {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 40px 24px; gap: 14px; color: var(--text-muted);
}
.empty-state-icon { font-size: 44px; opacity: 0.5; }
.empty-state-title { font-size: 15px; font-weight: 700; color: var(--text); }
.empty-state-msg { font-size: 13px; color: var(--text-dim); line-height: 1.5; max-width: 380px; }
.empty-state-cta {
  margin-top: 4px; background: var(--primary); color: white; border: none;
  padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.empty-state-cta:hover { background: var(--primary-hover); }

/* Hero */
.hero-card {
  background: linear-gradient(135deg, rgba(16,185,129,0.08), rgba(168,85,247,0.05));
  border: 1px solid rgba(16,185,129,0.25); border-radius: 14px;
  padding: 18px 22px; margin-bottom: 18px;
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 20px; align-items: center;
}
.hero-col { display: flex; flex-direction: column; gap: 2px; }
.hero-label {
  font-size: 10.5px; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.6px; font-weight: 600;
}
.hero-value { font-size: 20px; font-weight: 800; line-height: 1.2; }
.hero-sub { font-size: 11.5px; color: var(--text-muted); }
@media (max-width: 900px) {
  .hero-card { grid-template-columns: 1fr 1fr; gap: 14px; padding: 14px 16px; }
}

/* Sport breakdown */
.sport-breakdown {
  display: flex; gap: 10px; padding: 14px 20px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.sport-breakdown::-webkit-scrollbar { height: 6px; }
.sport-breakdown::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.sport-row {
  display: flex; flex-direction: column; padding: 10px 12px;
  background: var(--bg-hover); border-radius: 8px; border: 1px solid var(--border);
  flex-shrink: 0; min-width: 160px;
}
.sport-row-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 4px;
}
.sport-row-meta {
  font-size: 11px;
  color: var(--text-dim);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2px 10px;
}
.sport-row-meta > span:first-child { flex: 1 1 auto; min-width: 0; }
.sport-row-meta > span:last-child { flex-shrink: 0; }
@media (max-width: 540px) {
  .sport-row { min-width: 200px !important; }  /* lisää tilaa molemmille */
}

/* Filter chips */
.chip-row {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 20px;
  border-bottom: 1px solid var(--border); background: rgba(0,0,0,0.1);
}
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--bg-hover); color: var(--text-muted); border: 1px solid var(--border);
  padding: 4px 10px 4px 12px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; cursor: pointer; transition: all 0.15s;
}
.chip:hover { background: var(--bg); color: var(--text); }
.chip.active {
  background: rgba(16,185,129,0.18); color: var(--primary-hover);
  border-color: rgba(16,185,129,0.4);
}
.chip-x { font-size: 13px; opacity: 0.7; line-height: 1; margin-left: 2px; }
.chip:hover .chip-x { opacity: 1; }

/* Bet drawer */
.drawer-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(2px);
  z-index: 2000; opacity: 0; animation: fadeIn 0.18s forwards;
}
@keyframes fadeIn { to { opacity: 1; } }
.drawer {
  position: fixed; top: 0; right: 0; width: 440px; max-width: 100vw; height: 100vh;
  background: var(--bg); border-left: 1px solid var(--border);
  z-index: 2001; overflow-y: auto; box-shadow: -12px 0 40px rgba(0,0,0,0.5);
  transform: translateX(100%); animation: drawerIn 0.25s cubic-bezier(.2,.9,.3,1) forwards;
}
@keyframes drawerIn { to { transform: translateX(0); } }
.drawer.closing { animation: drawerOut 0.22s forwards; }
@keyframes drawerOut { to { transform: translateX(100%); } }
.drawer-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--bg); z-index: 2;
}
.drawer-title { font-size: 15px; font-weight: 700; }
.drawer-close {
  background: transparent; border: none; color: var(--text-dim);
  cursor: pointer; font-size: 22px; line-height: 1; padding: 2px 8px;
}
.drawer-close:hover { color: var(--text); }
.drawer-body { padding: 16px 20px; }
.drawer-section { margin-bottom: 18px; }
.drawer-section-title {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--text-dim); margin-bottom: 8px; font-weight: 700;
}
.drawer-kv { display: grid; grid-template-columns: 140px 1fr; gap: 6px 12px; font-size: 12.5px; }
.drawer-kv dt { color: var(--text-dim); }
.drawer-kv dd { color: var(--text); margin: 0; font-weight: 600; }
@media (max-width: 600px) { .drawer { width: 100vw; } }

/* Chart toolbar — segmented pill group (cleanempi) */
.chart-toolbar {
  display: flex; align-items: center; gap: 0;
  padding: 10px 16px 4px;
  font-size: 11px; color: var(--text-dim);
}
.chart-toolbar > span:first-child {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
  color: var(--text-dim); margin-right: auto;
}
.chart-toolbar .chart-btn-group {
  display: inline-flex; padding: 3px;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 999px;
  gap: 2px;
}
.chart-btn {
  background: transparent; border: 0; color: var(--text-muted);
  padding: 5px 12px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.chart-btn:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.chart-btn.active {
  background: var(--primary-hover); color: #fff;
  box-shadow: 0 1px 4px rgba(16,185,129,0.35);
}
.chart-btn.active:hover { background: var(--primary-hover); color: #fff; }

/* Settlement chip */
.settle-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; background: rgba(245,158,11,0.12); color: var(--warning);
  border: 1px solid rgba(245,158,11,0.3); border-radius: 999px;
  font-size: 11.5px; font-weight: 600; cursor: pointer;
}
.settle-chip:hover { background: rgba(245,158,11,0.2); }
.settle-chip-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--warning); animation: pulse 1.6s infinite;
}
@keyframes pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}

/* ═══════════════════════════════════════════════════════════
   Iteraatio 1: Portfolio-näkymä, bottom sheet, history-kortit,
   swipe-actions, pull-to-refresh
   ═══════════════════════════════════════════════════════════ */

/* Portfolio-näkymä (Robinhood-tyyli iso KPI hero) */
.portfolio-hero {
  padding: 22px 20px 18px;
  margin-bottom: 18px;
  background: linear-gradient(180deg, rgba(16,185,129,0.07), transparent 80%);
  border-bottom: 1px solid var(--border);
}
.portfolio-label {
  font-size: 10.5px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
  margin-bottom: 6px;
}
.portfolio-value {
  font-size: 56px;
  font-weight: 800;
  letter-spacing: -2px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: color 0.3s;
}
.portfolio-value.flash-green { animation: flashGreen 0.8s; }
.portfolio-value.flash-red   { animation: flashRed 0.8s; }
@keyframes flashGreen { 0% { background: rgba(16,185,129,0.3); } 100% { background: transparent; } }
@keyframes flashRed   { 0% { background: rgba(239,68,68,0.3); } 100% { background: transparent; } }

.portfolio-delta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 6px;
  font-size: 14px;
}
.portfolio-delta-num {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.portfolio-delta-label {
  color: var(--text-dim);
  font-size: 11.5px;
}
.portfolio-spark {
  margin-top: 12px;
  height: 100px;
  width: 100%;
  cursor: pointer;
}
@media (max-width: 600px) {
  /* Mobiili-hero kompaktiksi */
  .portfolio-hero {
    padding: 14px 16px 12px;
    margin-bottom: 12px;
  }
  .portfolio-label { font-size: 9.5px; margin-bottom: 4px; }
  .portfolio-value {
    font-size: 38px;
    letter-spacing: -1.2px;
  }
  .portfolio-delta { margin-top: 4px; font-size: 12px; gap: 6px; }
  .portfolio-delta-num { font-size: 12px; }
  .portfolio-delta-label { font-size: 10px; }
  .portfolio-spark {
    margin-top: 8px;
    height: 70px;
  }

  /* Pienennä progressio-rinki mobiilissa */
  .progress-ring {
    padding: 8px 12px;
    font-size: 11px;
    gap: 10px;
    margin-top: 10px;
  }
  .progress-ring > div:first-child { font-size: 14px; }
}

/* Bottom sheet (mobiili drawer) */
.sheet-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  backdrop-filter: blur(2px); z-index: 2000;
  opacity: 0; animation: fadeIn 0.2s forwards;
}
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: var(--bg); z-index: 2001;
  border-radius: 16px 16px 0 0;
  border-top: 1px solid var(--border);
  max-height: 88vh; overflow-y: auto;
  box-shadow: 0 -12px 40px rgba(0,0,0,0.6);
  transform: translateY(100%);
  animation: sheetIn 0.28s cubic-bezier(.2,.9,.3,1) forwards;
  touch-action: pan-y;
}
@keyframes sheetIn { to { transform: translateY(0); } }
.sheet.closing { animation: sheetOut 0.22s forwards; }
@keyframes sheetOut { to { transform: translateY(100%); } }
.sheet-handle {
  position: sticky; top: 0;
  padding: 8px 0 4px; z-index: 3;
  background: var(--bg); border-radius: 16px 16px 0 0;
  display: flex; justify-content: center;
}
.sheet-handle-bar {
  width: 40px; height: 4px; border-radius: 2px;
  background: var(--border);
}
.sheet-head {
  padding: 4px 20px 12px;
  border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
  position: sticky; top: 20px; z-index: 2; background: var(--bg);
}
.sheet-title { font-size: 15px; font-weight: 700; }
.sheet-body { padding: 16px 20px 120px; }
.sheet-footer {
  position: sticky; bottom: 0;
  padding: 12px 20px;
  background: linear-gradient(0deg, var(--bg) 80%, transparent);
  border-top: 1px solid var(--border);
  z-index: 3;
}

/* History mobile cards */
.hbc-list { display: flex; flex-direction: column; gap: 6px; padding: 12px; }
.hbc {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s;
}
.hbc:active { background: var(--bg); }
.hbc-result {
  width: 40px; height: 40px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800;
}
.hbc-result.won  { background: rgba(16,185,129,0.15); color: var(--success); }
.hbc-result.lost { background: rgba(239,68,68,0.15); color: var(--danger); }
.hbc-result.push { background: rgba(245,158,11,0.15); color: var(--warning); }
.hbc-main { min-width: 0; }
.hbc-match {
  font-size: 13px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hbc-meta {
  font-size: 11px; color: var(--text-dim);
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hbc-pnl {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.hbc-pnl-kelly {
  font-size: 14px; font-weight: 700;
}
.hbc-pnl-clv {
  font-size: 10.5px; color: var(--text-dim); margin-top: 2px;
}

/* Swipe-action container trackerissa */
.swipe-container {
  position: relative;
  overflow: hidden;
  touch-action: pan-y;
}
.swipe-row {
  transition: transform 0.2s;
  position: relative;
  z-index: 1;
  background: var(--bg);
}
.swipe-row.swiping { transition: none; }
.swipe-actions-left, .swipe-actions-right {
  position: absolute; top: 0; bottom: 0;
  display: flex; align-items: center;
  padding: 0 16px; font-weight: 800; font-size: 14px; color: white;
  z-index: 0;
}
.swipe-actions-left  { left: 0; background: var(--success); }
.swipe-actions-right { right: 0; background: var(--danger); }

/* Pull-to-refresh indicator */
.ptr-indicator {
  position: fixed; top: 64px; left: 50%;
  transform: translateX(-50%) translateY(-200%);
  z-index: 500;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 16px; font-size: 12px;
  color: var(--text-muted);
  display: flex; align-items: center; gap: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  transition: transform 0.25s;
}
.ptr-indicator.active { transform: translateX(-50%) translateY(0); }
.ptr-spinner {
  width: 14px; height: 14px;
  border: 2px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Mobile: piilota top-nav (duplikaatti bottom-navin kanssa) ja anna tilaa */
@media (max-width: 900px) {
  .header .nav { display: none !important; }
  .header { padding: 10px 14px; }
  .logo { font-size: 18px; }
  .bottom-nav { display: flex !important; }
  main.main { padding-bottom: 80px; }
}
@media (min-width: 901px) {
  .bottom-nav { display: none; }
}

/* Mobile bet card: progressive disclosure (Session 2 redesign) */
@media (max-width: 600px) {
  /* Piilota turhat metat ja decorate-elementit */
  .bc-footer .bc-meta { display: none; }
  .bc-meta-item { display: none; }
  .bc-action.primary { font-size: 11px; padding: 6px 10px; }
  .bc-action:not(.primary):not(.bc-action-track) { display: none; }
  .bc-action.bc-action-track { font-size: 11px; padding: 6px 10px; }

  /* Piilota LOPPUTULOS-tyyliset markkinalabelit mobiilissa — bc-pick antaa kontekstin */
  .bc-selection .bc-market { display: none; }

  /* Tiivistä bet card */
  .bet-card {
    padding: 10px 12px !important;
    gap: 6px !important;
  }
  .bc-header { margin-bottom: 4px; }
  .bc-header-left { gap: 6px; }
  .bc-sport-league .bc-sport { font-size: 10px; }
  .bc-sport-league .bc-league { font-size: 9.5px; max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bc-time { font-size: 10px; }
  /* Mobile: fair näkyy EV-badgen alla, bc-book (fair 3.30) ja UNIBET-label piilotetaan oddseista */
  .bc-book { display: none !important; }
  .bc-odds-label { display: none !important; }

  /* Iso, selkeä ottelu */
  .bc-match {
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    margin: 2px 0 4px !important;
  }
  .bc-match-vs {
    font-size: 10px;
    color: var(--text-dim);
    margin: 0 6px;
    text-transform: lowercase;
  }

  /* Body — iso kerroin keskiössä */
  .bc-body {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 8px !important;
    align-items: center;
    padding: 6px 0 !important;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin: 4px 0;
  }
  .bc-selection { gap: 1px !important; }
  .bc-market { font-size: 9.5px !important; color: var(--text-dim) !important; text-transform: uppercase; letter-spacing: 0.4px; }
  .bc-pick { font-size: 13px !important; font-weight: 600 !important; }
  .bc-odds {
    text-align: right;
    border-left: none !important;
    padding-left: 0 !important;
    gap: 0 !important;
  }
  .bc-odds-label { font-size: 9px !important; color: var(--text-dim) !important; text-transform: uppercase; }
  .bc-odds-val {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: var(--text) !important;
    line-height: 1;
  }
  .bc-book { font-size: 9px !important; color: var(--text-dim) !important; }

  /* Stake puolelle, ei oma osio */
  .bc-stake {
    display: none !important;  /* Tieto näkyy drawerissa */
  }

  /* EV badge isompi tap-target */
  .ev-badge {
    font-size: 11px !important;
    padding: 4px 8px !important;
    min-height: 22px;
  }

  /* Footer kompakti */
  .bc-footer {
    margin-top: 4px;
    padding-top: 0;
    gap: 4px;
  }
  .bc-actions {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: stretch;
  }
  .bc-actions .bc-action {
    text-align: center;
    justify-content: center;
    padding: 9px 8px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 8px;
  }
  .bc-actions .bc-action-track {
    flex: 0 0 auto;
    min-width: 110px;
  }
  .bc-actions .bc-action.primary {
    flex: 1 1 auto;
  }

  /* Slip-add nappi suurempi */
  .slip-add-btn {
    width: 32px !important;
    height: 32px !important;
    font-size: 16px !important;
  }

  /* Sticky filter-bar mobiilissa */
  .quick-pills {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(10,14,26,0.95);
    backdrop-filter: blur(12px);
    margin: 0 -16px 8px !important;
    padding: 8px 16px !important;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .quick-pills::-webkit-scrollbar { display: none; }
  .quick-pills .quick-pill {
    flex-shrink: 0;
    font-size: 11px;
    padding: 6px 10px;
    min-height: 32px;
  }

  /* Vain primary-suodatin näkyvissä, "Lisää suodattimia" -drawer rest */
  .filters {
    display: none !important;
  }
  .filters.mobile-visible {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background: var(--bg-surface);
    border-radius: var(--r-md);
  }
  /* fg-grid -ruudukko mobiilissa myös drawer-tilassa */
  .filters.fg-grid.mobile-visible {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .filters.fg-grid.mobile-visible .fg-full { grid-column: 1 / -1; }

  /* Stats-bar pienempi + horizontal scroll */
  .stats-bar {
    grid-template-columns: repeat(4, minmax(110px, 1fr)) !important;
    gap: 6px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .stats-bar::-webkit-scrollbar { display: none; }
  .stats-bar .stat-card {
    min-width: 110px;
    padding: 8px 10px !important;
  }
  .stats-bar .stat-value { font-size: 16px !important; line-height: 1.2; }
  .stats-bar .stat-label { font-size: 10px !important; }

  /* Hero-card kompaktiksi */
  .hero-card {
    padding: 10px 12px !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .hero-value { font-size: 16px !important; }
  .hero-sub { font-size: 10px !important; }
  .hero-label { font-size: 9px !important; }

  /* Table-container otsikko kompaktimpi */
  .table-header-bar {
    padding: 10px 12px !important;
    flex-wrap: wrap;
    gap: 6px;
  }
  .table-title { font-size: 13px !important; }
  .table-meta { font-size: 11px !important; }

  /* Sport breakdown — vaakasuora scroll yhdellä rivillä mobiilissa */
  .sport-breakdown {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px !important;
    padding: 10px 12px !important;
  }
  .sport-breakdown::-webkit-scrollbar { display: none; }
  .sport-row {
    flex-shrink: 0;
    min-width: 130px;
    padding: 8px 10px !important;
  }
  .sport-row-head { font-size: 11px !important; }
  .sport-row-meta { font-size: 10px !important; }

  /* Mobile-only filter toggle */
  #ev-filters-toggle { display: flex !important; }

  /* Pakota header padding pienemmäksi */
  .header { padding: 8px 12px !important; }
  .logo { font-size: 18px !important; }
  .header-right { font-size: 11px; }

  /* Main-padding kapea mobiilissa */
  main.main {
    padding: 12px !important;
    padding-bottom: 80px !important;
  }
}

/* Flash effect for new +EV (kaikki kortit) */
@keyframes evFlash {
  0% { box-shadow: 0 0 0 2px rgba(16,185,129,0.6); background: rgba(16,185,129,0.08); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.bet-card.is-new { animation: evFlash 0.8s ease-out; }

/* ─── Number-input nuolet — dark theme yhtenäinen ─────────── */
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
  color-scheme: dark;
}
/* Webkit (Chrome/Edge/Safari): piilota natiivi-spinnerit kokonaan */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox: number arrows piilotettu (kompakti, ei sotke desin) */
input[type="number"]:hover,
input[type="number"]:focus {
  -moz-appearance: textfield;
}

/* Range-input + min/max -kentät tyyli */
input[type="number"]:focus {
  border-color: var(--primary) !important;
  outline: none;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.15);
}
input[type="number"]::placeholder {
  color: var(--text-dim);
  opacity: 0.6;
}

/* Historia-taulukko: tiivistä paddingia jotta sarakkeet mahtuu */
.table-container table[style*="table-layout:fixed"] td,
.table-container table[style*="table-layout:fixed"] th {
  padding: 8px 6px !important;
  font-size: 12px;
}
.table-container table[style*="table-layout:fixed"] th {
  font-size: 10.5px;
  letter-spacing: 0.4px;
}

/* Progressio-ring (sample size) */
.progress-ring {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 12px;
}
.progress-ring-track {
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,0.05);
  border-radius: 3px;
  overflow: hidden;
}
.progress-ring-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--primary-hover));
  border-radius: 3px;
  transition: width 0.6s cubic-bezier(.2,.9,.3,1);
}

.slip-item-remove {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 0 4px;
  font-size: 16px;
}

.slip-summary {
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  background: var(--bg-surface-2);
}

.slip-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 13px;
}

.slip-row.big {
  font-size: 16px;
  font-weight: 700;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  margin-top: 10px;
}

.slip-warning {
  background: var(--warning-bg);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: var(--warning);
  padding: 10px 12px;
  border-radius: var(--r-sm);
  font-size: 12px;
  margin-bottom: 12px;
}

.slip-add-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.slip-add-btn:hover {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary-hover);
}

.slip-add-btn.added {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}

.bet-card {
  position: relative;
}

/* ─── Mobile Responsive ─────────────────────────────────── */

@media (max-width: 768px) {
  .header {
    padding: 0 14px;
    height: 52px;
    justify-content: space-between;
  }

  .logo {
    font-size: 16px;
    margin-right: 0;
  }

  /* Hide top nav on mobile — bottom nav takes over */
  .nav {
    display: none;
  }

  .header-right {
    display: flex;
  }

  .status-text {
    display: none;
  }

  /* Show bottom nav on mobile */
  .bottom-nav {
    display: flex;
  }

  /* Add padding at bottom so content isn't hidden by nav */
  body {
    padding-bottom: 70px;
  }

  .footer {
    margin-bottom: 70px;
  }

  /* Slip panel full-width on mobile */
  .slip-panel {
    width: 100vw;
    max-height: 85vh;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    bottom: 0;
  }

  .slip-fab {
    bottom: 82px;
  }

  .main { padding: 12px; }

  .stats-bar {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .stat-card { padding: 12px 14px; }
  .stat-value { font-size: 20px; }
  .stat-label { font-size: 10px; }

  .filters {
    flex-direction: column;
    gap: 10px;
  }

  /* fg-grid pysyy 2-col mobiilissa → laatikot tasakokoiset */
  .filters.fg-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .filters.fg-grid .fg-full { grid-column: 1 / -1; }

  .filter-group { width: 100%; min-width: 0; }
  .filter-select, .filter-input {
    width: 100%;
    min-width: 0;
    padding: 11px 14px;
    font-size: 14px;
  }

  .btn {
    width: 100%;
    padding: 12px;
    font-size: 14px;
  }

  .table-container { border-radius: var(--r); }
  .table-header-bar { padding: 12px 14px; flex-wrap: wrap; gap: 4px; }

  /* Mobiilissa taulukoiden min-width nollataan jotta sisältö skaalautuu viewportiin.
     Yksittäiset taulukot (esim. .ev-tbl) voivat itse asettaa min-widthin tarvittaessa. */
  table { font-size: 12px; min-width: 0; max-width: 100%; }
  td, th { padding: 9px 8px; font-size: 11px; }
  th { font-size: 10px; }

  .ev-badge { padding: 3px 8px; font-size: 10px; }

  .table-container[style*="flex:1"] {
    min-width: unset !important;
    flex: 1 1 100% !important;
  }

  .footer { padding: 20px 12px; font-size: 10px; }

  /* Mobile bet cards */
  .bet-cards-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .bet-card {
    padding: 14px 16px;
  }

  .bc-body {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .bc-stake {
    padding-left: 0;
    border-left: none;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-top: 8px;
    border-top: 1px solid var(--border);
  }

  .bc-odds, .bc-selection {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .bc-odds { align-items: center; }
  .bc-odds-val { font-size: 20px; }

  .bc-match { font-size: 15px; }
}

@media (max-width: 400px) {
  .stats-bar { grid-template-columns: 1fr; }
  .stat-value { font-size: 18px; }
  .nav-btn { font-size: 11px; padding: 5px 8px; }
  table { min-width: 0; }
  td, th { padding: 7px 5px; font-size: 10px; }
}


/* ═══════════════════════════════════════════════════════════
   DESIGN SYSTEM v2 — Mobile-first overhaul (Session 1)
   Yhtenäiset tokenit kaikille uusille komponenteille.
   Vanhat luokat säilyvät — uudet luokat (.ds-*) käyttävät näitä.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Typography scale (single source of truth) */
  --fs-xs:   11px;  /* meta, labels, fine print */
  --fs-sm:   13px;  /* body small, secondary */
  --fs-base: 15px;  /* body, default */
  --fs-lg:   18px;  /* card titles, sub-headers */
  --fs-xl:   24px;  /* section titles, big numbers */
  --fs-2xl:  36px;  /* hero numbers, marketing */

  /* Font weights */
  --fw-normal:  400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;

  /* Spacing scale (8px grid) */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;

  /* Border radii */
  --r-xs: 4px;
  --r-md: 8px;
  --r-pill: 999px;

  /* Tap target minimum (Apple HIG) */
  --tap-target: 44px;
}

/* ─── Buttons (3 styles, consistent sizing) ─────────────── */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--tap-target);
  padding: 0 var(--sp-4);
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: var(--fw-semi);
  line-height: 1;
  border: none;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
}
.ds-btn:active { transform: scale(0.97); }

/* Primary — main action */
.ds-btn-primary {
  background: var(--primary);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.ds-btn-primary:hover { background: var(--primary-hover); box-shadow: var(--shadow); }

/* Secondary — supporting action */
.ds-btn-secondary {
  background: var(--bg-hover);
  color: var(--text);
  border: 1px solid var(--border);
}
.ds-btn-secondary:hover { background: var(--bg-elevated); border-color: var(--border-strong); }

/* Ghost — minimal */
.ds-btn-ghost {
  background: transparent;
  color: var(--text-muted);
}
.ds-btn-ghost:hover { background: var(--bg-hover); color: var(--text); }

/* Sizes */
.ds-btn-sm { min-height: 36px; font-size: var(--fs-sm); padding: 0 var(--sp-3); }
.ds-btn-lg { min-height: 52px; font-size: var(--fs-lg); padding: 0 var(--sp-5); }

/* Block (full width) */
.ds-btn-block { display: flex; width: 100%; }

/* ─── Inputs / Selects (consistent sizing) ─────────────── */
.ds-input, .ds-select {
  min-height: var(--tap-target);
  padding: 0 var(--sp-3);
  font-family: inherit;
  font-size: var(--fs-base);
  background: var(--bg-hover);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  width: 100%;
  outline: none;
  transition: border-color 0.15s;
}
.ds-input:focus, .ds-select:focus { border-color: var(--primary); }

/* ─── Cards (clean, mobile-first) ───────────────────────── */
.ds-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
}
.ds-card-flush { padding: 0; overflow: hidden; }

/* ─── Mobile bottom navigation v2 (5 buttons clean) ─────── */
.bn-v2 {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: rgba(20, 25, 37, 0.92);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  z-index: 100;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.bn-v2-inner {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: 100%;
}
.bn-v2-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 10px;
  font-weight: var(--fw-semi);
  cursor: pointer;
  transition: color 0.15s;
  padding: 0;
  position: relative;
}
.bn-v2-btn:active { transform: scale(0.92); }
.bn-v2-btn .bn-v2-icon {
  font-size: 22px;
  line-height: 1;
  transition: color 0.15s, transform 0.15s;
  color: var(--dim, #7a8094);   /* oletus: harmaa */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
}
.bn-v2-btn .bn-v2-label {
  color: var(--dim, #7a8094);   /* label sama harmaa default */
}
.bn-v2-btn.active .bn-v2-label {
  color: var(--mint, #34d399);
}

.bn-v2-btn .bn-v2-icon i[data-lucide],
.bn-v2-btn .bn-v2-icon svg {
  stroke: currentColor;
  width: 22px;
  height: 22px;
}

/* Aktiivinen tab — ikoni primary-värissä, ei vihreä */
.bn-v2-btn.active .bn-v2-icon {
  color: var(--primary-hover);
}
.bn-v2-btn.active {
  color: var(--primary-hover);
}
.bn-v2-btn.active .bn-v2-icon {
  transform: translateY(-1px) scale(1.05);
}
.bn-v2-btn.active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 3px;
  background: var(--primary);
  border-radius: 0 0 3px 3px;
}
.bn-v2-btn .bn-v2-label {
  font-size: 10px;
  letter-spacing: 0.2px;
}

/* Live-painikkeen erikoismerkki */
.bn-v2-btn[data-tab="live"] .bn-v2-icon {
  color: var(--danger);
}
.bn-v2-btn[data-tab="live"] .bn-v2-icon::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 28%;
  width: 6px;
  height: 6px;
  background: var(--danger);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--danger);
  animation: pulse 1.5s infinite;
}

/* ─── Mobile side menu (slide from right) ───────────────── */
.ds-menu-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(2px);
  z-index: 200;
  opacity: 0;
  transition: opacity 0.2s;
}
.ds-menu-overlay.open {
  display: block;
  opacity: 1;
}
.ds-menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 320px;
  max-width: 85vw;
  height: 100vh;
  background: var(--bg-surface);
  border-left: 1px solid var(--border);
  z-index: 201;
  overflow-y: auto;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.28s cubic-bezier(.22,.85,.4,1.04), visibility 0s linear 0.28s;
  box-shadow: -12px 0 30px rgba(0,0,0,0.5);
  will-change: transform;
}
.ds-menu.open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.32s cubic-bezier(.22,.85,.4,1.04), visibility 0s linear 0s;
}
.ds-menu.dragging { transition: none !important; }
.ds-menu-overlay {
  transition: opacity 0.25s ease-out, visibility 0s linear 0.25s;
  visibility: hidden;
  opacity: 0;
}
.ds-menu-overlay.open {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.25s ease-out, visibility 0s linear 0s;
}

/* Pyöreä sulje-nappi profiilirivissä (oikealla, pystyssä keskitetty) */
.ds-menu-close-btn {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface-3, #222a3d);
  border: 1px solid var(--border-2, #323a52);
  color: var(--mint, #34d399);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-left: auto;
  box-shadow: 0 4px 14px rgba(0,0,0,.3);
  transition: transform .15s, background .15s, border-color .15s;
}
.ds-menu-close-btn:hover {
  background: rgba(16,185,129,.14);
  border-color: var(--mint, #34d399);
}
.ds-menu-close-btn:active { transform: scale(.92); }
.ds-menu-close-btn svg { width: 20px; height: 20px; }

/* Desktop: piilota mobiilidrawer kokonaan (drawer, overlay, FAB) */
@media (min-width: 901px) {
  .ds-menu,
  .ds-menu-overlay,
  .ds-menu-fab-close {
    display: none !important;
  }
}

/* V2: Keskitetty scroll-lukko mobiilille kun jokin valikko / paneeli / overlay on auki */
body.bg-scroll-locked {
  overflow: hidden;
}
@media (max-width: 900px) {
  body.bg-scroll-locked {
    position: fixed;
    top: 0; left: 0; right: 0;
    width: 100%;
    overscroll-behavior: contain;
  }
  /* Salli scrollaus paneelien sisällä — myös pan-y kuljetus iOS:llä */
  body.bg-scroll-locked .ds-menu,
  body.bg-scroll-locked .ds-menu-nav,
  body.bg-scroll-locked .notif-panel,
  body.bg-scroll-locked .notif-list,
  body.bg-scroll-locked .cmd-overlay,
  body.bg-scroll-locked .cmd-body,
  body.bg-scroll-locked .arb-modal,
  body.bg-scroll-locked .arb-modal-steps,
  body.bg-scroll-locked .tier-modal,
  body.bg-scroll-locked .bv-modal {
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;  /* estä scroll-vuoto body:n (pull-to-refresh) */
  }
}

/* Notif-paneeli mobiilissa: estä pull-to-refresh-toiminto vetämällä alas */
.notif-panel,
.notif-list {
  overscroll-behavior: contain;
}
.notif-list {
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}
.ds-menu-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.ds-menu-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--text);
}
.ds-menu-close {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 24px;
  width: 36px;
  height: 36px;
  cursor: pointer;
}
.ds-menu-section {
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
}
.ds-menu-section:last-child { border-bottom: none; }
.ds-menu-section-title {
  padding: 0 var(--sp-4);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: var(--sp-2);
}
.ds-menu-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  color: var(--text);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  cursor: pointer;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  transition: background 0.12s;
  min-height: var(--tap-target);
}
.ds-menu-item:active { background: var(--bg-hover); }
.ds-menu-item.active { color: var(--primary-hover); background: var(--primary-soft); }
.ds-menu-item-icon { font-size: 18px; width: 24px; text-align: center; }

/* ─── Mobile responsive activation ──────────────────────── */
@media (max-width: 900px) {
  /* Aktivoi uusi bottom nav, piilota vanha */
  .bottom-nav { display: none !important; }
  .bn-v2 { display: block; }
  /* Anna sisällölle tilaa bottom-naville */
  main.main { padding-bottom: 80px !important; }
}
@media (min-width: 901px) {
  /* Desktop: piilota molemmat bottom-navit */
  .bottom-nav { display: none !important; }
  .bn-v2 { display: none !important; }
}

/* ============================================================
   Avoimet vedot — kokoonpantava stats-paneeli
   ============================================================ */
.ub-stats-collapse {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 0;
  margin-bottom: 14px;
  overflow: hidden;
}
.ub-stats-collapse summary {
  cursor: pointer;
  list-style: none;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.12s;
  font-weight: 700;
  font-size: 13.5px;
}
.ub-stats-collapse summary::-webkit-details-marker { display: none; }
.ub-stats-collapse summary:hover { background: rgba(255,255,255,0.025); }
.ub-stats-summary-text {
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ub-stats-chev {
  color: var(--text-dim);
  font-size: 14px;
  transition: transform 0.2s;
}
.ub-stats-collapse[open] .ub-stats-chev { transform: rotate(180deg); color: var(--primary-hover); }
.ub-stats-collapse > .stats-bar:first-of-type { padding: 0 18px; }
.ub-stats-collapse > .stats-bar:last-of-type { padding: 0 18px 16px; }

/* +EV-Finder yhdistetty pikasuodatin-rivi */
.ev-quick-row {
  display: flex;
  gap: 12px;
  margin-bottom: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.ev-quick-row .quick-pills {
  flex: 1 1 auto;
  margin: 0;
}
.ev-edge-toggles {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  flex-shrink: 0;
}
@media (max-width: 720px) {
  .ev-quick-row { flex-direction: column; align-items: stretch; gap: 8px; }
}

/* Backtest-tilastot modal */
.bt-stat {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
}
.bt-stat-lbl {
  font-size: 9.5px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 700;
  margin-bottom: 2px;
}
.bt-stat-val {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Settings-sivu (Asetukset)
   ============================================================ */
.settings-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px 24px;
  margin-bottom: 18px;
}
.settings-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.settings-card-head h2 {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.3px;
  margin: 0;
}
.settings-row {
  display: grid;
  grid-template-columns: 160px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.04);
}
.settings-row:last-child { border-bottom: none; }
.settings-lbl {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.settings-val {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.settings-edit-btn {
  background: rgba(16,185,129,0.10);
  border: 1px solid rgba(16,185,129,0.35);
  color: var(--primary-hover);
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.settings-edit-btn:hover { background: rgba(16,185,129,0.18); }
.settings-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(16,185,129,0.10);
  border: 1px solid rgba(16,185,129,0.3);
  color: var(--primary-hover);
  padding: 9px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.settings-action-btn:hover { background: rgba(16,185,129,0.18); }
.settings-action-danger {
  background: rgba(239,68,68,0.08);
  border-color: rgba(239,68,68,0.35);
  color: var(--danger);
}
.settings-action-danger:hover { background: rgba(239,68,68,0.18); }
.settings-danger { border-color: rgba(239,68,68,0.25); }
@media (max-width: 600px) {
  .settings-card { padding: 18px; }
  .settings-row { grid-template-columns: 1fr auto; gap: 10px; padding: 12px 0; }
  .settings-row .settings-lbl { grid-column: 1 / -1; }
  .settings-row .settings-val { grid-column: 1; }
  .settings-row .settings-edit-btn { grid-column: 2; grid-row: 2; }
}

/* Modaalit (settings) */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(6px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn 0.2s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 28px 28px 24px;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  animation: modalSlide 0.25s ease;
}
@keyframes modalSlide { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.modal-card h3 { font-size: 18px; font-weight: 800; letter-spacing: -0.3px; margin-bottom: 18px; }
.settings-form-field { margin-bottom: 14px; }
.settings-form-field label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 6px;
}
.settings-form-field input {
  width: 100%;
  padding: 10px 13px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}
.settings-form-field input:focus { outline: none; border-color: var(--primary); }
.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 22px;
}
.btn-cancel, .btn-primary, .btn-danger {
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
}
.btn-cancel {
  background: var(--bg-elev);
  border-color: var(--border);
  color: var(--text-muted);
}
.btn-cancel:hover { background: var(--bg-hover); color: var(--text); }
.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #fff;
  box-shadow: 0 6px 18px rgba(16,185,129,0.35);
}
.btn-primary:hover { transform: translateY(-1px); }
.btn-danger {
  background: var(--danger);
  color: #fff;
}
.modal-msg { margin-top: 14px; padding: 10px 12px; border-radius: 8px; font-size: 12.5px; }
.modal-msg.error { background: rgba(239,68,68,0.10); border: 1px solid rgba(239,68,68,0.3); color: var(--danger); }
.modal-msg.success { background: rgba(16,185,129,0.10); border: 1px solid rgba(16,185,129,0.3); color: var(--success); }

/* ============================================================
   Header user dropdown (profiili-valikko)
   ============================================================ */
.header-right { display: flex; align-items: center; gap: 14px; }
.header-user { position: relative; }
.header-user-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s;
}
.header-user-btn:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary-hover);
}
.header-user-email {
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.header-user-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: 0 14px 40px rgba(0,0,0,0.4);
  padding: 6px;
  z-index: 1000;
  display: none;
}
.header-user-menu.open { display: block; }
.header-user-menu button,
.header-user-menu a {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 6px;
  text-decoration: none;
  font-family: inherit;
}
.header-user-menu button:hover,
.header-user-menu a:hover {
  background: var(--bg-elev);
}
@media (max-width: 720px) {
  .header-user { display: none !important; }  /* Mobiilissa side menu hoitaa */
}

/* ============================================================
   18+ ikätarkistus modaali
   ============================================================ */
#age-gate-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.age-gate-modal {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 36px 32px;
  max-width: 440px;
  width: 100%;
  text-align: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.age-gate-icon { font-size: 48px; margin-bottom: 14px; }
.age-gate-modal h2 {
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 14px;
  letter-spacing: -0.5px;
}
.age-gate-modal p {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 16px;
}
.age-gate-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  background: var(--bg-elev);
  padding: 14px 16px;
  border-radius: var(--r);
  margin: 18px 0;
  cursor: pointer;
}
.age-gate-check input {
  width: 18px; height: 18px;
  margin-top: 1px;
  cursor: pointer;
  accent-color: var(--primary);
}
.age-gate-check a { color: var(--primary-hover); text-decoration: underline; }
.age-gate-btn {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #fff;
  border: none;
  border-radius: var(--r);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(16, 185, 129, 0.35);
  transition: all 0.15s;
}
.age-gate-btn:disabled {
  background: var(--bg-elev);
  color: var(--text-dim);
  cursor: not-allowed;
  box-shadow: none;
}
.age-gate-btn:not(:disabled):hover { transform: translateY(-1px); }
.age-gate-decline {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 12px;
  margin-top: 14px;
  cursor: pointer;
  text-decoration: underline;
}

/* ============================================================
   GDPR-evästebanneri
   ============================================================ */
#cookie-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 9998;
  background: rgba(10, 14, 26, 0.96);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(16, 185, 129, 0.3);
  padding: 16px 20px;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.4);
  animation: cookie-slide-up 0.4s ease;
}
@keyframes cookie-slide-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.cookie-banner-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
}
.cookie-banner-text {
  flex: 1 1 320px;
}
.cookie-banner-text strong {
  display: block;
  font-size: 14px;
  margin-bottom: 4px;
  color: var(--text);
}
.cookie-banner-text p {
  font-size: 12.5px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}
.cookie-banner-text a {
  color: var(--primary-hover);
  text-decoration: underline;
}
.cookie-banner-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.cookie-btn {
  padding: 9px 18px;
  border-radius: var(--r);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  text-decoration: none;
  display: inline-block;
}
.cookie-btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #fff;
}
.cookie-btn-link {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.cookie-btn-link:hover {
  color: var(--text);
  border-color: var(--border-strong);
}
@media (max-width: 600px) {
  .cookie-banner-inner { gap: 12px; }
  .cookie-banner-actions { width: 100%; }
  .cookie-btn { flex: 1; text-align: center; }
}

/* ============================================================
   Avoimet vedot — luettava mobiililayout
   Desktopilla normaali table-rivi. Mobiilissa rivi muuttuu kortiksi.
   ============================================================ */
.ub-match-name { display: block; font-size: 13px; line-height: 1.25; }
.ub-match-meta { font-size: 11px; color: var(--text-dim); margin-top: 2px; font-weight: 500; }
.ub-row-live .ub-match-when { font-weight: 700; }
/* Värillinen palkki vasemmalla: pseudo-elementti — ei vaikuta padding-alueeseen */
.ub-row-live td:first-child,
.ub-row-past td:first-child {
  position: relative;
}
.ub-row-live td:first-child::before,
.ub-row-past td:first-child::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
}
.ub-row-live td:first-child::before { background: var(--danger); }
.ub-row-past td:first-child::before { background: var(--warning); }

/* Desktop: piilota mobile-only info-rivit + mobile-only spanit */
.ub-mob-info { display: none; }
.ubs-mob-info { display: none; }
.ubs-res-ico { display: none; }
.ubs-pl-mob { display: none; }

/* Mobile/Desktop split */
.ub-mobile-only { display: none; }
@media (max-width: 720px) {
  .ub-desktop-only { display: none !important; }
  .ub-mobile-only { display: block !important; }
}

/* === Arbitraasi-kortti: mobiilissa legit pystysuoraan === */
@media (max-width: 720px) {
  .arb-legs {
    grid-template-columns: 1fr !important;
  }
  .arb-card {
    padding: 12px 14px !important;
  }
}

/* === Mobiili-kortti (umc = userbet mobile card, accordion) === */
.umc {
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
}
.umc:last-child { border-bottom: none; }
.umc-live > .umc-row {
  border-left: 3px solid var(--danger);
  background: linear-gradient(90deg, rgba(239,68,68,0.05), transparent 60%);
}
.umc-past > .umc-row {
  border-left: 3px solid var(--warning);
  opacity: 0.7;
}

.umc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 11px 12px;
  cursor: pointer;
  transition: background 0.12s;
}
.umc-row:hover { background: rgba(255,255,255,0.02); }
.umc-live > .umc-row,
.umc-past > .umc-row { padding-left: 9px; }

.umc-main {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
.umc-match {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}
.umc-res-ico { font-size: 14px; font-weight: 800; margin-right: 3px; }
.umc-info {
  font-size: 10.5px;
  color: var(--text-muted);
  line-height: 1.4;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.umc-info .umc-sep { color: var(--text-dim); margin: 0 4px; opacity: 0.5; }
.umc-info .umc-mkt { color: var(--accent); font-weight: 600; }
/* Kerroin: tabular-nums, hieman isompi/erottuva, monospace-tuntu */
.umc-info .umc-odds {
  color: var(--text);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Roboto Mono', monospace;
  font-size: 11.5px;
  letter-spacing: -0.2px;
}
.umc-info .umc-stake {
  color: var(--text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.umc-info .umc-time { color: var(--text-dim); }

/* Actions: kiinteä leveys oikealla */
.umc-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 4px;
  align-items: center;
}
.umc-btn {
  border: none;
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.umc-btn-w { background: var(--success); }
.umc-btn-l { background: var(--danger); }
.umc-btn-p { background: var(--warning); color: #000; }
.umc-btn-edit {
  background: rgba(16,185,129,0.15);
  border: 1px solid rgba(16,185,129,0.4);
  color: var(--success);
  width: 32px;
  font-size: 14px;
}
.umc-btn-del {
  background: transparent;
  color: var(--text-dim);
  font-size: 14px;
}
.umc-btn-del:hover { color: var(--danger); }

/* Chevron — pyörähtää kun avoinna */
.umc-chev {
  color: var(--text-dim);
  font-size: 12px;
  margin-left: 2px;
  transition: transform 0.18s;
  flex-shrink: 0;
}
.umc-open .umc-chev { transform: rotate(180deg); color: var(--primary-hover); }

/* Expanded sisältö — collapsed by default */
.umc-expanded {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
  background: rgba(255,255,255,0.015);
}
.umc-open .umc-expanded {
  max-height: 400px;
  border-top: 1px dashed var(--border);
}
.umc-exp-row {
  display: flex;
  gap: 12px;
  padding: 6px 14px;
  font-size: 12px;
  line-height: 1.4;
}
.umc-exp-row:first-child { padding-top: 10px; }
.umc-exp-row:last-child { padding-bottom: 10px; }
.umc-exp-lbl {
  flex: 0 0 80px;
  color: var(--text-dim);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.4px;
  align-self: center;
}
.umc-exp-val {
  flex: 1;
  color: var(--text);
  font-weight: 600;
  word-break: break-word;
}
.umc-exp-odds {
  font-variant-numeric: tabular-nums;
  font-family: 'SF Mono', 'Monaco', monospace;
  font-weight: 800;
  font-size: 13px;
}
.umc-exp-actions {
  padding: 8px 14px 12px;
}
.umc-exp-btn {
  background: rgba(16,185,129,0.12);
  border: 1px solid rgba(16,185,129,0.35);
  color: var(--primary-hover);
  cursor: pointer;
  font-size: 12px;
  padding: 7px 14px;
  border-radius: 6px;
  font-weight: 600;
  width: 100%;
}
.umc-exp-btn:hover { background: rgba(16,185,129,0.22); }

@media (max-width: 380px) {
  .umc-row { padding: 9px 8px 10px 10px; gap: 7px; }
  .umc-btn { width: 26px; height: 26px; }
  .umc-btn-edit { width: 30px; }
  .umc-match { font-size: 12.5px; }
  .umc-info { font-size: 10px; }
  .umc-info .umc-odds { font-size: 11px; }
  .umc-exp-lbl { flex: 0 0 70px; font-size: 9.5px; }
}

/* Book-sarake piiloon (sekä avoimet että ratkaistut) — bookmaker on tooltip rivin title-attribuutissa */
.ub-cell-book,
.ubs-cell-book { display: none !important; }

/* Stake-solu klikattavissa (avoimet) — selkeä hover-vihje muokattavuudesta */
.ub-stake-editable {
  position: relative;
  transition: background 0.15s;
  border-radius: 4px;
}
.ub-stake-editable:hover {
  background: rgba(16,185,129,0.08);
  outline: 1px dashed rgba(16,185,129,0.4);
  outline-offset: -1px;
}
.ub-stake-editable::after {
  content: '✎';
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--primary-hover);
  opacity: 0;
  transition: opacity 0.15s;
}
.ub-stake-editable:hover::after { opacity: 1; }

/* Sivunavigaatio Avoimet / Ratkaistut -taulukoissa */
.ub-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 20px 14px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.ub-pager-info {
  font-size: 12px;
  color: var(--text-dim);
  font-weight: 600;
}
.ub-pager-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
.ub-pg-btn {
  min-width: 32px;
  height: 30px;
  padding: 0 8px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s;
  font-variant-numeric: tabular-nums;
}
.ub-pg-btn:hover:not(:disabled) {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary-hover);
}
.ub-pg-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.ub-pg-btn.active {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 2px 8px rgba(16,185,129,0.35);
}
.ub-pg-ellipsis {
  padding: 0 4px;
  color: var(--text-dim);
  font-size: 14px;
}
.ub-pager-perpage {
  font-size: 12px;
  color: var(--text-dim);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ub-pp-lbl {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.ub-pp-group {
  display: inline-flex;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px;
  gap: 2px;
}
.ub-pp-pill {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.12s;
  font-variant-numeric: tabular-nums;
  min-width: 28px;
}
.ub-pp-pill:hover {
  color: var(--text);
  background: rgba(255,255,255,0.04);
}
.ub-pp-pill.active {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #fff;
  box-shadow: 0 2px 6px rgba(16,185,129,0.35);
}
@media (max-width: 600px) {
  .ub-pp-pill { padding: 3px 8px; font-size: 11.5px; min-width: 24px; }
  .ub-pp-lbl { display: none; }
}
@media (max-width: 600px) {
  .ub-pager { padding: 10px 12px 12px; gap: 8px; }
  .ub-pager-info { order: 1; flex: 1 1 auto; font-size: 11px; }
  .ub-pager-perpage { order: 2; font-size: 11px; }
  .ub-pager-nav { order: 3; flex: 1 1 100%; justify-content: center; }
  .ub-pg-btn { min-width: 28px; height: 28px; font-size: 12px; padding: 0 6px; }
}

/* Klikattavat rivit (desktop) — hover vihjaa expanderia */
@media (min-width: 721px) {
  .ub-clickable:hover { background: rgba(16,185,129,0.04); }
  .ub-clickable:hover .ub-cell-match { color: var(--text); }
}

/* Accordion-laajennus — animoituva max-height transition, 2-sarakkeinen grid */
.ub-row-expanded > td.ube-cell {
  padding: 0 !important;
  background: rgba(16,185,129,0.04);
  border-top: none;
  border-bottom: none;
}
.ube-inner {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
              opacity 0.22s ease,
              padding 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
  padding: 0 22px 0 56px;
}
.ub-row-expanded.ube-open > td.ube-cell {
  border-top: 1px solid rgba(16,185,129,0.18);
  border-bottom: 1px solid rgba(16,185,129,0.18);
}
.ub-row-expanded.ube-open .ube-inner {
  max-height: 600px;
  opacity: 1;
  padding: 14px 22px 16px 56px;
}
.ube-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 32px;
  max-width: 920px;
}
/* Uusi 2-sarakkeinen layout: vasen = konteksti, oikea = tuottometriikat.
   Erilliset div:t antavat selkeän loogisen ryhmittelyn (ei rivipohjaista
   grid-täytöltä joka sekoitti kentät keskenään). */
.ube-cols {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 6px 32px;
  max-width: 920px;
}
.ube-col { display: flex; flex-direction: column; gap: 0; }
@media (max-width: 720px) {
  .ube-cols { grid-template-columns: 1fr; gap: 0; }
}
.ube-row {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.05);
}
.ube-row:last-child { border-bottom: none; }
.ube-lbl {
  flex: 0 0 130px;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  line-height: 1.4;
}
.ube-val {
  flex: 1;
  font-size: 13px;
  color: var(--text);
  line-height: 1.4;
  min-width: 0;
}
.ube-sub {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
  line-height: 1.4;
}
@media (max-width: 920px) {
  .ube-grid { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 720px) {
  .ube-inner { padding: 0 14px; }
  .ub-row-expanded.ube-open .ube-inner { padding: 10px 14px 12px; }
  .ube-lbl { flex: 0 0 110px; font-size: 10px; }
}

/* Edit/Delete-napit (desktop + mobiili) */
.ubs-edit-btn {
  background: rgba(16,185,129,0.12);
  border: 1px solid rgba(16,185,129,0.35);
  color: var(--success);
  cursor: pointer;
  font-size: 13px;
  padding: 4px 9px;
  border-radius: 5px;
  margin-right: 4px;
  font-weight: 700;
  line-height: 1;
  transition: all 0.12s;
}
.ubs-edit-btn:hover {
  background: rgba(16,185,129,0.22);
  border-color: rgba(16,185,129,0.55);
}
.ubs-del-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 14px;
  padding: 4px 6px;
}
.ubs-del-btn:hover { color: var(--danger); }

@media (max-width: 720px) {
  /* Mobiilissa table piilotetaan kokonaan (ub-desktop-only), kortit otetaan käyttöön */
  .table-container:has(.ub-row),
  .table-container:has(.ub-row-settled) {
    overflow-x: hidden !important;
  }
  /* Vanhat mobile-säännöt tr-elementille ovat dead code — kortit (.umc) hoitavat näytön */
  table:has(.ub-row) tbody tr.ub-row,
  table:has(.ub-row-settled) tbody tr.ub-row-settled {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    column-gap: 6px;
    padding: 9px 8px 9px 10px;
    border-bottom: 1px solid var(--border);
    width: 100%;
    box-sizing: border-box;
  }
  .ub-row td,
  .ub-row-settled td {
    border: none !important;
    padding: 0 !important;
    min-width: 0 !important;
    display: block;
  }

  /* Piilota erilliset table-cellit — info-rivi näyttää kaiken */
  .ub-cell-date,
  .ub-cell-book,
  .ub-cell-market,
  .ub-cell-odds,
  .ub-cell-stake,
  .ub-cell-kelly { display: none !important; }

  /* MATCH-solu vie 1fr leveydestä, actions oikealla auto */
  .ub-cell-match {
    flex: 1 1 0% !important;        /* anna shrinkata, ottaa kaikki vapaa tila */
    display: block !important;
    overflow: hidden !important;
    min-width: 0 !important;
    order: 1;
  }
  .ub-match-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
    display: block;
  }
  .ub-match-meta { display: none; }  /* live-status näkyy nimen edessä */

  /* Info-rivi sub-spaneilla — näkyy match-cellin sisällä rivin alapuolella */
  .ub-mob-info {
    display: block;
    font-size: 10.5px;
    color: var(--text-muted);
    line-height: 1.4;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ub-mob-info .ub-mob-sep { color: var(--text-dim); margin: 0 4px; opacity: 0.5; }
  .ub-mob-info .ub-mob-mkt { color: var(--accent); font-weight: 600; }
  .ub-mob-info .ub-mob-odds { color: var(--text); font-weight: 700; }
  .ub-mob-info .ub-mob-stake {
    color: var(--text); font-weight: 600;
    cursor: pointer;
    border-bottom: 1px dashed var(--text-dim);
  }
  .ub-mob-info .ub-mob-time { color: var(--text-dim); }

  /* ACTIONS: KIINTEÄ leveys 92px (3 × 28px + 2 × gap 4px) — varaa tilan AINA */
  .ub-cell-actions {
    display: flex !important;
    flex: 0 0 92px !important;
    gap: 4px !important;
    align-items: center;
    justify-content: flex-end;
    white-space: nowrap !important;
    padding: 0 !important;
    order: 2;
  }
  .ub-cell-actions button {
    padding: 0 !important;
    font-size: 12px !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px;
    margin: 0 !important;
    border-radius: 6px !important;
    flex-shrink: 0;
    flex-grow: 0;
  }

  /* Live/past visuaaliset vihjeet */
  .ub-row-live {
    border-left: 3px solid var(--danger);
    padding-left: 9px !important;
    background: rgba(239,68,68,0.04);
  }
  .ub-row-past {
    border-left: 3px solid var(--warning);
    padding-left: 9px !important;
    opacity: 0.7;
  }

  /* === Ratkaistut-rivin mobiilinäkymä === */
  .ub-row-settled td.ubs-cell-date,
  .ub-row-settled td.ubs-cell-result,
  .ub-row-settled td.ubs-cell-book,
  .ub-row-settled td.ubs-cell-market,
  .ub-row-settled td.ubs-cell-odds,
  .ub-row-settled td.ubs-cell-stake,
  .ub-row-settled td.ubs-cell-pl { display: none !important; }
  .ub-row-settled td.ubs-cell-match {
    flex: 1 1 0% !important;
    display: block !important;
    overflow: hidden !important;
    min-width: 0 !important;
    order: 1;
  }
  .ub-row-settled .ubs-match-name {
    font-size: 13px; font-weight: 700; color: var(--text);
    display: flex; align-items: center; gap: 6px;
    line-height: 1.25;
    overflow: hidden;
  }
  .ubs-res-ico {
    display: inline-flex !important;
    flex-shrink: 0;
    font-size: 15px;
    font-weight: 800;
    width: 16px;
    text-align: center;
  }
  /* Voitto/häviö: ÄLÄ laita match-rivin sisään mobiilissa — sirret info-rivin loppuun jossa on selvästi tilaa */
  .ubs-pl-mob {
    display: none !important;
  }
  .ubs-mname-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 700;
    color: var(--text);
  }
  .ubs-mob-info {
    display: block; font-size: 10.5px; color: var(--text-muted);
    line-height: 1.4; margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    flex-basis: 100%;
    order: 3;
  }
  .ubs-mob-info .sep { color: var(--text-dim); margin: 0 4px; opacity: 0.5; }
  /* Edit-nappi vihreä + delete oikealle — kiinteä 68px */
  .ub-row-settled td.ubs-cell-remove {
    display: flex !important;
    flex: 0 0 68px !important;
    gap: 4px !important;
    align-items: center;
    justify-content: flex-end;
    order: 2;
    padding: 0 !important;
  }
  .ub-row-settled .ubs-edit-btn {
    font-size: 14px !important;
    padding: 0 !important;
    width: 32px !important;
    height: 28px !important;
    margin: 0 !important;
    flex-shrink: 0;
  }
  .ub-row-settled .ubs-del-btn {
    font-size: 14px !important;
    padding: 0 !important;
    width: 28px !important;
    height: 28px !important;
    flex-shrink: 0;
  }
}

/* === Bankroll-paneeli mobile-keskitys === */
@media (max-width: 720px) {
  .ub-bankroll-panel {
    text-align: center;
  }
  .ub-bankroll-panel > div:first-child {
    flex-direction: column;
    gap: 12px !important;
    align-items: center !important;
  }
  .ub-bankroll-panel > div:first-child > div {
    text-align: center;
  }
  /* Piilota erottimet · mobiilissa (eivät toimi pystysuunnassa) */
  .ub-bankroll-panel > div:first-child > div[style*="color:var(--border)"] { display: none !important; }
  /* Säädä asetuksia → omalle riville */
  .ub-bankroll-panel > div:first-child > div[style*="margin-left:auto"] {
    margin-left: 0 !important;
    margin-top: 4px;
  }
  .ub-bankroll-panel > div:last-child {
    text-align: left;
    font-size: 10px !important;
  }
}

/* === Stat-cards: keskitä sisältö + 2 saraketta mobiilissa === */
@media (max-width: 720px) {
  .stats-bar {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .stat-card {
    padding: 12px 10px !important;
    text-align: center;
    min-height: 78px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .stat-card .stat-value { font-size: 22px !important; }
  .stat-card .stat-label { font-size: 10px !important; line-height: 1.3; margin-top: 4px !important; }
}

/* ============================================================
   Dashboard dual-range slider — vapaa vetomäärä-alue
   ============================================================ */
/* Slider track — näkyy SELVÄSTI harmaana ilmaisemassa "ei näytetä chartilla" -alueet */
.dash-rng-track {
  position: absolute;
  left: 16px; right: 16px;
  top: 50%;
  transform: translateY(-50%);
  height: 8px;
  background: rgba(107, 114, 128, 0.25);
  border: 1px solid rgba(107, 114, 128, 0.35);
  border-radius: 4px;
  pointer-events: none;
}
/* Fill — vain valitulla alueella, kirkas väri */
.dash-rng-fill {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 8px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: 4px;
  pointer-events: none;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
  /* JS asettaa left/right täsmälleen — sama coordinate system kuin track */
  left: 16px; right: 16px;
}
.dash-rng {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  left: 16px; right: 16px;
  width: calc(100% - 32px);
  background: transparent;
  pointer-events: none;
  height: 24px;
  margin: 0;
  top: 50%;
  transform: translateY(-50%);
  /* Estetään sivun pan/zoom horisontaalisen liu'utuksen aikana */
  touch-action: pan-y;
}
/* Canvas-elementtien skaalautuminen — chart ei saa puhkaista viewportia */
#dash-chart, #chart-active, canvas.scaled {
  max-width: 100%;
  height: auto;
  display: block;
}
.dash-rng::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid #fff;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 2px 6px rgba(16,185,129,0.4);
  transition: transform 0.1s;
  touch-action: none;
}
.dash-rng::-webkit-slider-thumb:hover { transform: scale(1.15); }
.dash-rng::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid #fff;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 2px 6px rgba(16,185,129,0.4);
}
.dash-rng-a { z-index: 2; }
.dash-rng-b { z-index: 3; }

/* ============================================================
   Bet card v2 — clean landing-page-style layout
   ============================================================ */
.bet-card.bc2 {
  padding: 14px 16px;
  gap: 9px;
}

.bc2-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.bc2-head-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}
.bc2-ev {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 5px 10px;
  border-radius: 8px;
  background: rgba(16,185,129,0.16);
  color: var(--success);
  font-weight: 800;
  font-size: 15px;
  line-height: 1.1;
  letter-spacing: -0.3px;
  min-width: 56px;
  cursor: help;
  border: 1px solid transparent;
  transition: transform 0.12s;
}
.bc2-ev:hover { transform: translateY(-1px); }
.bc2-ev.exc {
  background: linear-gradient(135deg, rgba(16,185,129,0.28), rgba(52,211,153,0.18));
  color: #34d399;
  border-color: rgba(16,185,129,0.40);
  box-shadow: 0 0 12px -2px rgba(16,185,129,0.35);
}
.bc2-ev .fair {
  font-size: 9.5px;
  font-weight: 600;
  color: var(--text-dim);
  margin-top: 2px;
  letter-spacing: 0.2px;
}
.bc2-sl {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}
.bc2-sport {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bc2-league {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}
.bc2-time {
  font-size: 11.5px;
  color: var(--text-dim);
  font-weight: 600;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.bc2-time svg { width: 11px; height: 11px; }

.bc2-status {
  display: inline-block;
  margin-left: 4px;
}

/* Quality badge — markkinan koko / likviditeetti */
.bc2-quality {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px 2px 6px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  cursor: help;
  flex-shrink: 0;
}
.bc2-quality .dots {
  display: inline-flex;
  gap: 2px;
}
.bc2-quality .dots .d {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
}
.bc2-quality .dots .d.on { background: currentColor; }
.bc2-quality .lbl { line-height: 1; }
.bc2-q-high  { background: rgba(16,185,129,0.16); color: #10b981; }
.bc2-q-good  { background: rgba(52,211,153,0.14); color: #34d399; }
.bc2-q-mid   { background: rgba(251,191,36,0.14); color: #fbbf24; }
.bc2-q-low   { background: rgba(245,158,11,0.14); color: #f59e0b; }
.bc2-q-tiny  { background: rgba(239,68,68,0.14); color: #ef4444; }
.bc2-q-micro { background: rgba(107,114,128,0.16); color: #9ca3af; }

@media (max-width: 540px) {
  .bc2-quality { padding: 2px 6px 2px 5px; font-size: 8.5px; }
  .bc2-quality .dots .d { width: 4px; height: 4px; }
}

.bc2-match {
  font-size: 15px;
  font-weight: 700;
  color: var(--text, #f1f3f9);  /* Ottelu valkoisena (joukkueet) */
  line-height: 1.3;
  letter-spacing: -0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bc2-match .vs {
  color: var(--text-dim);
  font-weight: 500;
  margin: 0 8px;
  font-size: 13px;
}

.bc2-pick {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}
.bc2-pick-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.bc2-mkt {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.bc2-sel {
  font-size: 14px;
  font-weight: 700;
  color: var(--mint, #34d399);  /* Markkina / pelivalinta vihreänä */
  letter-spacing: -0.1px;
}
.bc2-odds {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.bc2-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.bc2-foot-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.bc2-book {
  font-size: 10.5px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 5px;
  background: var(--primary-soft);
  color: var(--primary-hover);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Bookmaker-spesifit värit (data-book-attribuutin pohjalta) */
.bc2-book[data-book="bet365"]    { background: #027B5B; color: #fff; }
.bc2-book[data-book="coolbet"]   { background: #facc15; color: #1a1a1a; }
.bc2-book[data-book="veikkaus"]  { background: #2563eb; color: #fff; }
.bc2-book[data-book="unibet"]    { background: #147B45; color: #fff; }
.bc2-book[data-book="pinnacle"]  { background: #dc2626; color: #fff; }
.bc2-book[data-book="betsson"]   { background: #7c3aed; color: #fff; }
.bc2-book[data-book="betfair"], .bc2-book[data-book="betfair-exchange"] { background: #ffc107; color: #1a1a1a; }
.bc2-book[data-book="nordicbet"] { background: #1e40af; color: #fff; }
.bc2-book[data-book="leovegas"]  { background: #ef4444; color: #fff; }
.bc2-book[data-book="comeon"]    { background: #f59e0b; color: #1a1a1a; }
.bc2-stake {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
  white-space: nowrap;
}
.bc2-stake strong { color: var(--text); font-weight: 700; }
.bc2-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}
.bc2-action {
  font-size: 12px;
  font-weight: 700;
  padding: 6px 11px;
  border-radius: 6px;
  letter-spacing: 0.2px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  transition: all 0.12s;
  border: 1px solid transparent;
  cursor: pointer;
}
.bc2-action.track {
  background: transparent;
  color: var(--text-muted);
  border-color: var(--border);
}
.bc2-action.track:hover {
  background: var(--bg-elev);
  color: var(--text);
  border-color: var(--border-strong);
}
.bc2-action.open {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #fff;
  box-shadow: 0 4px 12px -4px rgba(16,185,129,0.5);
}
.bc2-action.open:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -4px rgba(16,185,129,0.7);
}
.bc2-action svg { width: 12px; height: 12px; }

@media (max-width: 540px) {
  .bet-card.bc2 { padding: 12px 12px 12px; gap: 8px; position: relative; }

  /* Slip-add (+) nappi ankkuroidaan oikeaan yläkulmaan — ei overlap muiden kanssa */
  .slip-add-btn { width: 24px; height: 24px; top: 10px; right: 10px; font-size: 14px; z-index: 4; }

  /* HEAD: rivit pinotaan pystysuoraan jotta kukin metadata-elementti saa tilaa */
  .bc2-head { flex-direction: column; align-items: stretch; gap: 6px; }

  /* Rivi 1: EV-pilli + sport/league + quality-badge — sallitaan wrap, oikealla tila +-napille */
  .bc2-head-left {
    flex-wrap: wrap;
    row-gap: 6px;
    column-gap: 8px;
    align-items: center;
    padding-right: 34px;        /* tilaa slip-add (+) -napille */
    min-width: 0;
  }

  /* EV-badge: tiivis horisontaali pilli (ei stack), fair sivulla */
  .bc2-ev {
    flex-direction: row;
    align-items: baseline;
    gap: 5px;
    font-size: 13px;
    padding: 4px 9px;
    min-width: 0;
    flex-shrink: 0;
    white-space: nowrap;
    border-radius: 7px;
  }
  .bc2-ev.large { font-size: 12px; padding: 3px 8px; }
  .bc2-ev .fair { font-size: 9.5px; margin-top: 0; line-height: 1; opacity: 0.75; }

  /* Sport+league inline-rivinä, ei stackia */
  .bc2-sl { flex-direction: row; align-items: baseline; gap: 6px; min-width: 0; flex: 1; }
  .bc2-sport { font-size: 9.5px; letter-spacing: 0.5px; flex-shrink: 0; }
  .bc2-league { font-size: 11px; min-width: 0; flex: 1; max-width: 100%; }

  /* Quality-badge tiivis */
  .bc2-quality { padding: 2px 7px 2px 5px; font-size: 8.5px; }
  .bc2-quality .dots .d { width: 4px; height: 4px; }

  /* Rivi 2: aika omalla rivillä → ei katkea + ei overlap slip-add-napin kanssa */
  .bc2-time {
    font-size: 10.5px;
    align-self: flex-start;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
  }
  .bc2-time svg { width: 10px; height: 10px; }

  /* Match-rivi: hieman tiiviimpi */
  .bc2-match { font-size: 13.5px; line-height: 1.25; }
  .bc2-match .vs { font-size: 11px; margin: 0 5px; }

  /* Pick-rivi */
  .bc2-pick { gap: 8px; padding-top: 6px; }
  .bc2-mkt { font-size: 9.5px; letter-spacing: 0.5px; }
  .bc2-sel { font-size: 13px; white-space: normal; word-break: break-word; }
  .bc2-odds { font-size: 18px; }

  /* Footer */
  .bc2-foot { gap: 7px; }
  .bc2-foot-left { gap: 7px; flex-wrap: wrap; }
  .bc2-book { font-size: 9.5px; padding: 3px 7px; }
  .bc2-stake { font-size: 11px; }
  .bc2-action { padding: 5px 8px; font-size: 11px; }
  .bc2-action.track { padding: 5px 7px; }
  .bc2-action.track span { display: none; }
}
@media (max-width: 380px) {
  /* Erittäin kapeat näytöt */
  .bc2-ev { font-size: 12px; padding: 3px 7px; }
  .bc2-ev.large { font-size: 11px; padding: 3px 7px; }
  .bc2-ev .fair { font-size: 9px; }
  .bc2-match { font-size: 12.5px; }
  .bc2-odds { font-size: 16.5px; }
  .bc2-sel { font-size: 12px; }
  .bc2-sport { font-size: 9px; }
  .bc2-league { font-size: 10.5px; }
  .bc2-quality { font-size: 8px; padding: 2px 6px 2px 4px; }
}

/* ============================================================
   Overlay redesign — sidebar shell + topbar
   ============================================================ */
.ov-app { display: block; min-height: 100vh; }
/* Desktop sidebar — fixed: pysyy AINA paikallaan kun pääsisältö scrollaa.
   Käytetään fixed-positionia sticky:n sijaan koska html:lla on overflow-x:hidden
   joka rikkoo sticky-positiointi-kontekstin selaimissa. */
.ov-sidebar {
  position: fixed;
  left: 0; top: 0;
  width: 250px; height: 100vh;
  background: var(--bg-surface); border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  z-index: 40;
  transition: width .22s ease;
}
/* Pääsisältö-alue saa marginin sidebar:in tieltä */
.ov-main { margin-left: 250px; min-width: 0; display: flex; flex-direction: column; transition: margin-left .22s ease; }

/* V5++++ (käyttäjäpyyntö): Sidebar collapse-tila — vain ikonit näkyvissä */
body.ov-nav-collapsed .ov-sidebar { width: 68px; }
body.ov-nav-collapsed .ov-main { margin-left: 68px; }
body.ov-nav-collapsed .ov-sidebar .ov-brand a,
body.ov-nav-collapsed .ov-sidebar .ov-nav-item .lbl,
body.ov-nav-collapsed .ov-sidebar .ov-nav-label,
body.ov-nav-collapsed .ov-sidebar .ov-nav-badge,
body.ov-nav-collapsed .ov-sidebar .ov-userbar .username,
body.ov-nav-collapsed .ov-sidebar .ov-userbar .email,
body.ov-nav-collapsed .ov-sidebar .ov-social { display: none; }
body.ov-nav-collapsed .ov-sidebar .ov-brand { padding: 16px 14px; justify-content: center; }
body.ov-nav-collapsed .ov-sidebar .ov-nav-item { justify-content: center; padding: 11px 0; }
body.ov-nav-collapsed .ov-sidebar .ov-userbar { padding: 14px 12px; justify-content: center; }
body.ov-nav-collapsed .ov-nav-toggle svg { transform: rotate(180deg); }

/* Nav-toggle nappi brand-rivillä */
.ov-nav-toggle {
  margin-left: auto;
  width: 26px; height: 26px;
  border-radius: 7px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--text-dim, #7a8094);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: .12s;
}
.ov-nav-toggle:hover {
  background: rgba(52,211,153,.10);
  border-color: rgba(52,211,153,.30);
  color: var(--mint, #34d399);
}
.ov-nav-toggle svg { transition: transform .22s ease; }
body.ov-nav-collapsed .ov-nav-toggle { display: none; }
body.ov-nav-collapsed .ov-sidebar:hover .ov-nav-toggle { display: inline-flex; position: absolute; right: -13px; top: 14px; background: var(--bg-surface, #141925); }
.ov-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 20px 20px 18px;
  font-weight: 800; font-size: 20px; letter-spacing: -.02em;
}
.ov-brand svg { display: block; flex-shrink: 0; }
.ov-nav { flex: 1; overflow-y: auto; padding: 6px 12px 14px; }
.ov-nav-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--text-dim); padding: 16px 12px 7px;
}
.ov-nav-item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  border: none; background: none; color: var(--text-muted);
  font-size: 13.5px; font-weight: 500;
  padding: 9px 12px; border-radius: 9px;
  text-decoration: none;
  box-sizing: border-box;
  text-align: left; text-decoration: none;
  border-left: 2px solid transparent;
  cursor: pointer; transition: .13s;
  font-family: inherit;
}
.ov-nav-item:hover { background: rgba(255,255,255,.035); color: var(--text); }
.ov-nav-item.active {
  background: rgba(16,185,129,.13);
  color: var(--primary-hover); font-weight: 600;
  border-left-color: var(--primary);
}
.ov-nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
/* V2: lbl flex jotta badge oikealla */
.ov-nav-item .lbl { flex: 1; min-width: 0; }
.ov-nav-badge {
  font-size: 10.5px; font-weight: 800;
  padding: 2px 7px;
  border-radius: 20px;
  background: var(--surface-3, #222a3d);
  color: var(--text-muted, #b4bacb);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  flex-shrink: 0;
  min-width: 18px;
  text-align: center;
}
.ov-nav-badge:empty { display: none; }
.ov-nav-badge.green {
  background: rgba(16,185,129,.18);
  color: var(--mint, #34d399);
}
.ov-nav-badge.amber {
  background: rgba(245,158,11,.18);
  color: var(--amber, #f59e0b);
}
.ov-nav-badge.red {
  background: var(--red, #ef4444);
  color: #fff;
}

.ov-side-foot {
  border-top: 1px solid var(--border);
  padding: 14px 16px;
  display: flex; align-items: center; gap: 10px;
}
.ov-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, #10b981, #84cc16);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: #04130c; font-size: 13px;
  flex-shrink: 0;
}
.ov-who { min-width: 0; }
.ov-who b {
  display: block; font-size: 13px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ov-who span { font-size: 11.5px; color: var(--text-dim); }

.ov-topbar {
  position: sticky; top: 0; z-index: 30;
  background: rgba(10,14,26,.86); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 16px;
  padding: 0 26px; height: 64px;
}
.ov-topbar h1 { font-size: 21px; font-weight: 800; letter-spacing: -.02em; margin: 0; }
/* Desktop: piilota yläpalkin sivuotsikko — sidebar näyttää jo aktiivisen sivun */
@media (min-width: 901px) {
  .ov-topbar h1, #ov-page-title { display: none; }
}
.ov-burger {
  display: none; background: none; border: 1px solid var(--border-strong);
  color: var(--text); width: 38px; height: 38px; border-radius: 9px;
  align-items: center; justify-content: center; cursor: pointer;
}
.ov-burger svg { width: 19px; height: 19px; }
.ov-icon-btn {
  background: none; border: 1px solid var(--border-strong); color: var(--text-muted);
  width: 38px; height: 38px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: .13s;
}
.ov-icon-btn:hover { color: var(--text); border-color: var(--primary); }
.ov-icon-btn svg { width: 18px; height: 18px; }

.ov-scrim { display: none; }

@media (max-width: 768px) {
  /* Mobiili: piilota sivupalkki kokonaan, käytetään bn-v2 alavalikkoa */
  .ov-sidebar { display: none !important; }
  .ov-main    { margin-left: 0 !important; }
  .ov-burger  { display: none !important; }
  .ov-scrim   { display: none !important; }
  .ov-topbar  { padding: 0 14px; height: 56px; }
  .ov-topbar h1 { font-size: 17px; }
}

/* Vanha .header piilotetaan kun sidebar käytössä */
.header { display: none !important; }

/* ============================================================
   Overlay redesign — full component library
   ============================================================ */
.ov-live{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--primary-hover);background:rgba(16,185,129,.13);border:1px solid rgba(16,185,129,.25);padding:6px 12px;border-radius:20px}
.ov-live .pulse{width:7px;height:7px;border-radius:50%;background:var(--primary);box-shadow:0 0 8px var(--primary);animation:ovpulse 1.7s infinite}
@keyframes ovpulse{0%,100%{opacity:1}50%{opacity:.35}}

.ov-content{padding:26px;max-width:1340px;width:100%}
@media (max-width:880px){.ov-content{padding:18px}}

.ov-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:13px;font-weight:700;border:none;border-radius:9px;padding:9px 16px;background:var(--primary);color:#04130c;transition:.13s;white-space:nowrap;font-family:inherit;cursor:pointer}
.ov-btn:hover{background:var(--primary-hover)}
.ov-btn svg{width:14px;height:14px}
.ov-btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:13px;font-weight:600;border:1px solid var(--border-strong);border-radius:9px;padding:8px 14px;background:transparent;color:var(--text-muted);transition:.13s;white-space:nowrap;font-family:inherit;cursor:pointer}
.ov-btn-ghost:hover{color:var(--text);border-color:var(--primary)}
.ov-btn-ghost svg{width:14px;height:14px}

.ov-sec-head{display:flex;align-items:center;gap:10px;margin:30px 0 14px}
.ov-sec-head:first-child{margin-top:0}
.ov-sec-head h2{font-size:16px;font-weight:700;margin:0}
.ov-sec-head .ov-sec-sub{color:var(--text-dim);font-size:12.5px;font-weight:500;margin-left:auto}

.ov-opps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ov-opp{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px 16px 14px;display:flex;flex-direction:column;gap:11px}
.ov-opp.hot{border-color:rgba(16,185,129,.4);box-shadow:0 0 0 1px rgba(16,185,129,.12)}
.ov-opp-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.ov-opp-ev{font-size:24px;font-weight:900;color:#22c55e;letter-spacing:-.03em;line-height:1}
.ov-opp-ev span{display:block;font-size:10.5px;font-weight:600;color:var(--text-dim);margin-top:3px;letter-spacing:0}
.ov-opp-tags{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.ov-tag{font-size:9.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:3px 7px;border-radius:5px}
.ov-tag.fresh{background:rgba(16,185,129,.13);color:var(--primary-hover)}
.ov-tag.warn{background:rgba(245,158,11,.14);color:var(--warning)}
.ov-opp-cat{font-size:11.5px;color:var(--text-dim);font-weight:500}
.ov-opp-match{font-size:16px;font-weight:800;line-height:1.25}
.ov-opp-match span{color:var(--text-dim);font-weight:500;margin:0 4px;font-size:13px}
.ov-opp-pick{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.ov-opp-mkt{font-size:10.5px;color:var(--text-dim);font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.ov-opp-sel{font-size:13.5px;font-weight:600}
.ov-opp-odds{font-size:22px;font-weight:900;letter-spacing:-.02em}
.ov-opp-foot{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ov-book{font-size:10.5px;font-weight:700;letter-spacing:.03em;color:var(--primary-hover);background:rgba(16,185,129,.13);padding:3px 8px;border-radius:5px}
.ov-opp-time{font-size:11px;color:var(--text-dim);font-weight:500;display:flex;align-items:center;gap:4px}
.ov-opp-time svg{width:12px;height:12px}
.ov-opp-actions{display:flex;gap:7px}

.ov-filters{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:14px 16px;margin-bottom:16px}
.ov-sportpills{display:flex;gap:7px;flex-wrap:wrap;padding-bottom:13px;border-bottom:1px solid var(--border);margin-bottom:13px}
.ov-pill{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--text-muted);background:var(--bg-elev);border:1px solid var(--border);border-radius:20px;padding:6px 13px;transition:.13s;cursor:pointer;font-family:inherit}
.ov-pill:hover{color:var(--text)}
.ov-pill.active{background:rgba(16,185,129,.13);border-color:rgba(16,185,129,.35);color:var(--primary-hover)}
.ov-pill .ov-count{font-size:10.5px;font-weight:700;opacity:.7}
.ov-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ov-field{display:flex;flex-direction:column;gap:4px}
.ov-field label{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim)}
.ov-field select,.ov-field input{background:var(--bg-base);border:1px solid var(--border-strong);color:var(--text);font-family:inherit;font-size:13px;padding:8px 11px;border-radius:8px;outline:none;height:36px}
.ov-field input{width:96px}
.ov-field select:focus,.ov-field input:focus{border-color:var(--primary)}
.ov-toolbar .ov-spacer{flex:1;min-width:0}
.ov-adv{display:none;gap:10px;flex-wrap:wrap;padding-top:13px;margin-top:13px;border-top:1px solid var(--border)}
.ov-adv.open{display:flex}

.ov-panel{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.ov-panel-head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--border)}
.ov-panel-head h2{font-size:15px;font-weight:700;margin:0}
.ov-panel-head .ov-pill-sm{font-size:11px;font-weight:800;color:var(--primary-hover);background:rgba(16,185,129,.13);padding:2px 9px;border-radius:20px}
.ov-panel-head .ov-sec-sub{margin-left:auto;color:var(--text-dim);font-size:12px}
.ov-table-wrap{overflow-x:auto}

table.ov-table{width:100%;border-collapse:collapse;font-size:13px}
.ov-table thead th{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);text-align:left;padding:11px 16px;background:rgba(255,255,255,.018);white-space:nowrap}
.ov-table tbody td{padding:14px 16px;border-top:1px solid var(--border);vertical-align:middle}
.ov-table tbody tr:hover{background:rgba(255,255,255,.022)}
.ov-table .num{text-align:right;font-variant-numeric:tabular-nums}

.ov-edge{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:800;color:#0a3a2a;background:linear-gradient(135deg,#34d399,#84cc16);padding:4px 9px;border-radius:7px}
.ov-edge.mid{background:rgba(16,185,129,.16);color:var(--primary-hover)}
.ov-edge svg{width:12px;height:12px}
.ov-match{font-weight:700;font-size:13.5px;color:var(--text,#f1f3f9) !important}  /* Ottelu valkoisena (joukkueet) */
.ov-meta{font-size:11.5px;color:var(--text-dim);margin-top:2px}
.ov-mkt{color:var(--mint,#34d399) !important}  /* Markkina / pelivalinta vihreänä */
.ov-mkt b{font-weight:700;color:var(--mint,#34d399) !important}
.ov-mkt span{display:block;font-size:11px;color:var(--text-dim) !important;margin-top:1px}  /* alarivi pidetään himmeänä */
.ov-odds{font-size:15px;font-weight:800;letter-spacing:-.02em}
.ov-odds span{display:block;font-size:11px;color:var(--text-dim);font-weight:500}
.ov-rowact{display:flex;gap:7px;justify-content:flex-end}
.ov-linkbook{font-size:11.5px;font-weight:600;color:var(--text-muted)}
.ov-status{font-size:11px;font-weight:600;margin-top:3px;display:flex;align-items:center;gap:4px}
.ov-status.live{color:var(--danger)}
.ov-status.soon,.ov-status.past{color:var(--text-dim)}
.ov-status .lived{width:6px;height:6px;border-radius:50%;background:var(--danger)}
.ov-res{display:flex;gap:5px}
.ov-res button{width:26px;height:26px;border-radius:7px;border:1px solid var(--border-strong);background:transparent;font-size:11px;font-weight:800;color:var(--text-dim);transition:.12s;cursor:pointer;font-family:inherit}
.ov-res button.w:hover{background:var(--primary);color:#04130c;border-color:var(--primary)}
.ov-res button.l:hover{background:var(--danger);color:#fff;border-color:var(--danger)}
.ov-res button.p:hover{background:var(--warning);color:#04130c;border-color:var(--warning)}
.ov-kelly{color:var(--primary-hover);font-weight:700}
.ov-panel-foot{display:flex;align-items:center;gap:10px;padding:12px 18px;border-top:1px solid var(--border);font-size:12px;color:var(--text-dim)}

.ov-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.ov-metric{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r);padding:16px 18px}
.ov-metric .k{font-size:11.5px;color:var(--text-dim);font-weight:600}
.ov-metric .v{font-size:25px;font-weight:900;letter-spacing:-.02em;margin-top:5px}
.ov-metric .v.pos{color:#22c55e}
.ov-metric .v.neg{color:var(--danger)}

.ov-chart{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px 18px 12px;margin-bottom:18px}
.ov-chart svg{display:block;width:100%;height:auto}
.ov-chart-cap{font-size:11.5px;color:var(--text-dim);margin-top:8px}

details.ov-collapse{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r-lg);margin-bottom:16px;overflow:hidden}
details.ov-collapse>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:14px 18px;font-size:14px;font-weight:700}
details.ov-collapse>summary::-webkit-details-marker{display:none}
details.ov-collapse>summary .chev{margin-left:auto;transition:.2s;width:16px;height:16px;color:var(--text-dim)}
details.ov-collapse[open]>summary .chev{transform:rotate(180deg)}

.ov-placeholder{text-align:center;color:var(--text-dim);padding:80px 20px}
.ov-placeholder svg{width:38px;height:38px;margin-bottom:10px}
.ov-placeholder h2{font-size:18px;color:var(--text-muted);margin-bottom:6px}

@media (max-width:1040px){.ov-metrics{grid-template-columns:1fr 1fr}.ov-opps{grid-template-columns:1fr}}
@media (max-width:560px){
  .ov-metrics{grid-template-columns:1fr 1fr}
  /* Filterit mobiilissa: pinotaan ja venytetään täysleveiksi */
  .ov-filters{padding:12px}
  .ov-toolbar{gap:8px}
  .ov-toolbar .ov-field{flex:1 1 calc(50% - 4px);min-width:0}
  .ov-toolbar .ov-field select,
  .ov-toolbar .ov-field input{width:100%!important;min-width:0}
  .ov-toolbar .ov-spacer{display:none}
  .ov-toolbar .ov-btn,.ov-toolbar .ov-btn-ghost{flex:1 1 calc(50% - 4px)}
  .ov-adv .ov-field{flex:1 1 calc(50% - 6px);min-width:0}
  .ov-adv .ov-field select,.ov-adv .ov-field input{width:100%!important;min-width:0}
  /* Taulukko mobiilissa: tiivistä */
  .ov-table thead th,.ov-table tbody td{padding:10px 10px}
  .ov-table{font-size:12.5px}
  .ov-match{font-size:12.5px}
  .ov-meta{font-size:11px}
  .ov-odds{font-size:14px}
  /* Panel-head wrap */
  .ov-panel-head{flex-wrap:wrap;padding:12px 14px}
  .ov-panel-head .ov-sec-sub{flex-basis:100%;margin-left:0;margin-top:4px}
  .ov-sec-head{flex-wrap:wrap}
}

/* ============================================================
   Mockup: Dashboard (db-*) — new redesign per UI-UUDISTUS-TOTEUTUSOHJE.md
   ============================================================ */
.db-page{padding:22px 24px 24px; max-width:1680px; margin:0 auto}
@media (min-width: 1600px) {
  .db-page { padding: 22px 32px 24px; }
}
.db-h1{font-size:23px;font-weight:800;letter-spacing:-.025em}
.db-sub{font-size:13px;color:var(--dim);font-weight:500;margin-top:3px;margin-bottom:18px}

/* hero */
.db-hero{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden}
.db-hero-top{display:flex;align-items:flex-start;gap:16px;padding:18px 20px 8px;flex-wrap:wrap}
.db-hero-lab{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.db-hero-val{font-size:42px;font-weight:900;letter-spacing:-.035em;color:var(--green-2);line-height:1;margin-top:7px}
.db-hero-val.neg{color:#f87171}
.db-hero-meta{display:flex;align-items:center;gap:8px;margin-top:9px;font-size:12.5px;color:var(--dim);font-weight:600;flex-wrap:wrap}
.db-hero-delta{display:inline-flex;align-items:center;gap:5px;color:var(--mint);font-weight:800;
  background:rgba(16,185,129,.13);padding:3px 9px;border-radius:7px}
.db-hero-delta.neg{color:#f87171;background:rgba(239,68,68,.13)}
.db-hero-delta svg{width:12px;height:12px}
.db-hero-ctrls{margin-left:auto;display:flex;align-items:flex-start;gap:9px;flex-wrap:wrap}
.db-seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:3px;gap:2px}
.db-seg button{border:none;background:none;color:var(--dim);font-family:inherit;font-size:12px;font-weight:600;
  padding:6px 11px;border-radius:6px;cursor:pointer;transition:.12s}
.db-seg button:hover:not(.active){color:var(--text)}
.db-seg button.active{background:rgba(16,185,129,.16);color:var(--mint)}

/* Shared dropdown component (used everywhere) */
.db-dd{position:relative}
.db-dd-trigger{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 9px 0 11px;
  background:var(--surface-2);border:1px solid var(--border);border-radius:8px;color:var(--text);
  font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;transition:.12s}
.db-dd-trigger:hover{border-color:var(--green)}
.db-dd.open .db-dd-trigger{border-color:var(--green)}
.db-dd-trigger .lb{font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.db-dd-trigger .cv{width:14px;height:14px;color:var(--dim);transition:transform .18s}
.db-dd.open .db-dd-trigger .cv{transform:rotate(180deg);color:var(--mint)}
.db-dd-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:172px;background:var(--surface-2);
  border:1px solid var(--border-2);border-radius:10px;padding:5px;box-shadow:0 16px 40px rgba(0,0,0,.5);z-index:45;display:none}
.db-dd.open .db-dd-menu{display:block}
.db-dd-opt{display:flex;align-items:center;gap:8px;width:100%;padding:8px 9px;border-radius:6px;background:none;
  border:none;color:var(--muted);font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;text-align:left}
.db-dd-opt .lbl{flex:1}
.db-dd-opt .ck{width:14px;height:14px;color:var(--mint);opacity:0;flex-shrink:0}
.db-dd-opt:hover{background:rgba(255,255,255,.05);color:var(--text)}
.db-dd-opt.sel{color:var(--mint);background:rgba(16,185,129,.1)}
.db-dd-opt.sel .ck{opacity:1}

.db-chart{padding:2px 12px 0}
.db-chart svg{display:block;width:100%;height:auto}
.db-hero-foot{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--border);margin-top:4px}
.db-hf{padding:13px 20px;border-right:1px solid var(--border)}
.db-hf:last-child{border-right:none}
.db-hf .k{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--dim)}
.db-hf .v{font-size:19px;font-weight:900;letter-spacing:-.02em;margin-top:4px;font-variant-numeric:tabular-nums}
.db-hf .v.pos{color:var(--green-2)}
.db-hf .v.neg{color:#f87171}

/* stat cards */
.db-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:16px}
.db-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:15px 16px;
  display:flex;align-items:center;gap:13px}
.db-cico{width:42px;height:42px;border-radius:11px;background:var(--surface-2);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;color:var(--mint);flex-shrink:0}
.db-cico svg{width:21px;height:21px}
.db-card .v{font-size:23px;font-weight:900;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.db-card .k{font-size:11px;font-weight:600;color:var(--dim);margin-top:4px}

/* roi strip */
.db-strip{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px;background:var(--surface);
  border:1px solid var(--border);border-radius:11px;padding:11px 16px}
.db-strip .si{font-size:12px;color:var(--dim);font-weight:600;display:flex;align-items:center;gap:6px}
.db-strip .si b{color:var(--text);font-weight:800;font-variant-numeric:tabular-nums}
.db-strip .si b.pos{color:var(--green-2)}
.db-strip .si b.neg{color:#f87171}
.db-strip .sep{width:1px;height:15px;background:var(--border-2)}
.db-strip .right{margin-left:auto;font-size:11px;font-weight:700;color:var(--mint);background:rgba(16,185,129,.12);
  border:1px solid rgba(16,185,129,.22);padding:3px 9px;border-radius:20px}

/* panels */
.db-panel{background:var(--surface);border:1px solid var(--border);border-radius:13px;overflow:hidden;margin-top:16px}
.db-phead{display:flex;align-items:center;gap:9px;padding:13px 17px;border-bottom:1px solid var(--border)}
.db-phead .pi{width:28px;height:28px;border-radius:8px;background:var(--surface-2);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;color:var(--mint);flex-shrink:0}
.db-phead .pi svg{width:15px;height:15px}
.db-phead h2{font-size:14px;font-weight:700;margin:0}
.db-phead .pr{margin-left:auto;font-size:11.5px;color:var(--dim);font-weight:600}

/* sports grid */
.db-sports{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border)}
.db-sport{background:var(--surface);padding:13px 14px;display:flex;align-items:center;gap:11px}
.db-sico{width:34px;height:34px;border-radius:9px;background:var(--surface-2);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;color:var(--muted);flex-shrink:0}
.db-sico svg{width:19px;height:19px}
.db-smid{flex:1;min-width:0}
.db-sname{font-size:12.5px;font-weight:700}
.db-smeta{font-size:10.5px;color:var(--dim);font-weight:500;margin-top:2px}
.db-sright{text-align:right}
.db-su{font-size:13px;font-weight:900;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.db-su.pos{color:var(--green-2)}
.db-su.neg{color:#f87171}
.db-sroi{font-size:10px;font-weight:600;color:var(--dim);margin-top:1px;font-variant-numeric:tabular-nums}

/* opportunities */
.db-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.db-orow{display:flex;align-items:center;gap:12px;padding:11px 16px;border-top:1px solid var(--border);transition:.1s;cursor:pointer}
.db-orow:hover{background:rgba(255,255,255,.022)}
.db-edge{display:inline-flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:800;
  letter-spacing:-.01em;padding:5px 9px;border-radius:7px;flex-shrink:0;min-width:64px;white-space:nowrap;
  font-variant-numeric:tabular-nums;background:rgba(16,185,129,.15);color:var(--mint)}
.db-omid{flex:1;min-width:0}
.db-omatch{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.db-omkt{font-size:11px;color:var(--dim);font-weight:500;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.db-oright{text-align:right;flex-shrink:0}
.db-oodds{font-size:15px;font-weight:900;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.db-otime{font-size:10px;color:var(--dim);font-weight:600;margin-top:2px;display:flex;align-items:center;gap:3px;justify-content:flex-end}
.db-otime svg{width:10px;height:10px}
.db-pfoot{padding:11px 16px;border-top:1px solid var(--border);text-align:center}
.db-pfoot button{background:none;border:none;color:var(--mint);font-family:inherit;font-size:12px;font-weight:700;cursor:pointer}

@media(max-width:880px){
  .db-page{padding:16px 14px 24px}
  .db-cards{grid-template-columns:1fr 1fr}
  .db-sports{grid-template-columns:1fr 1fr}
  .db-cols{grid-template-columns:1fr}
  .db-hero-foot{grid-template-columns:1fr}
  .db-hf{border-right:none;border-bottom:1px solid var(--border)}
  .db-hf:last-child{border-bottom:none}
  .db-hero-val{font-size:34px}
  .db-hero-top{padding:14px 14px 6px}
  .db-hero-ctrls{margin-left:0;width:100%}
  .db-strip{gap:6px;padding:10px 12px}
  .db-strip .right{margin-left:auto}
}

/* ============================================================
   Mockup: +EV-arvovedot (ev-*) — UI-uudistus
   ============================================================ */
.ev-page{padding:22px 24px 28px}
.ev-pagehead{display:flex;align-items:flex-end;gap:16px;margin-bottom:15px;flex-wrap:wrap}
.ev-pagehead h1{font-size:23px;font-weight:800;letter-spacing:-.025em;margin:0}
.ev-pagehead .sub{font-size:13px;color:var(--dim);font-weight:500;margin-top:3px}
.ev-pagehead .spacer{flex:1;min-width:20px}
.ev-sortlabel{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);
  margin:0 8px 8px 0;align-self:flex-end}

/* Custom dropdown — sort */
.ev-dd{position:relative;align-self:flex-end}
/* Inline-versio (esim. lauseen keskellä label-tekstissä) */
.ev-dd-inline{align-self:auto;display:inline-flex;vertical-align:middle;margin:0 4px}
.ev-dd-inline .ev-dd-trigger{height:30px;padding:0 8px 0 10px;font-size:12px}
.ev-dd-inline .ev-dd-trigger .ddi{width:13px;height:13px}
.ev-dd-inline .ev-dd-trigger .ddi svg{width:13px;height:13px}
.ev-dd-inline .ev-dd-trigger .cv{width:13px;height:13px}
.ev-dd-trigger{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 10px 0 12px;
  background:var(--surface-2);border:1px solid var(--border-2);border-radius:9px;color:var(--text);
  font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:.12s}
.ev-dd-trigger:hover{border-color:var(--green)}
.ev-dd.open .ev-dd-trigger{border-color:var(--green);background:var(--surface-3)}
.ev-dd-trigger .ddi{width:15px;height:15px;color:var(--mint);display:flex}
.ev-dd-trigger .ddi svg{width:15px;height:15px}
.ev-dd-trigger .cv{width:15px;height:15px;color:var(--dim);transition:transform .18s;margin-left:2px}
.ev-dd.open .ev-dd-trigger .cv{transform:rotate(180deg);color:var(--mint)}
.ev-dd-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:214px;background:var(--surface-2);
  border:1px solid var(--border-2);border-radius:11px;padding:5px;box-shadow:0 18px 44px rgba(0,0,0,.55);z-index:45;display:none}
.ev-dd.open .ev-dd-menu{display:block}
.ev-dd-opt{display:flex;align-items:center;gap:9px;width:100%;padding:9px;border-radius:7px;background:none;
  border:none;color:var(--muted);font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;text-align:left;transition:.1s}
.ev-dd-opt .ddi{width:15px;height:15px;flex-shrink:0;color:var(--dim);display:flex}
.ev-dd-opt .ddi svg{width:15px;height:15px}
.ev-dd-opt .lbl{flex:1}
.ev-dd-opt .ck{width:15px;height:15px;color:var(--mint);opacity:0;flex-shrink:0;display:flex}
.ev-dd-opt .ck svg{width:15px;height:15px}
.ev-dd-opt:hover{background:rgba(255,255,255,.05);color:var(--text)}
.ev-dd-opt:hover .ddi{color:var(--muted)}
.ev-dd-opt.sel{color:var(--mint);background:rgba(16,185,129,.1)}
.ev-dd-opt.sel .ddi{color:var(--mint)}
.ev-dd-opt.sel .ck{opacity:1}

/* Sport chips — multi-select */
.ev-sportbar{display:flex;align-items:center;gap:9px;margin-bottom:14px;flex-wrap:wrap;min-width:0}
.ev-sportbar .hint{font-size:11px;color:var(--dim);font-weight:500}
/* Sportbar V5: yksi dropdown + valitut selpilleinä */
.ev-sportdd-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex:1;min-width:0}
.ev-sportdd .ev-dd-trigger{padding:8px 13px;border-radius:21px;background:var(--surface-2);border:1px solid var(--border);
  font-size:12.5px;font-weight:700;color:var(--text);font-family:inherit;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px}
.ev-sportdd .ev-dd-trigger:hover{border-color:var(--border-2)}
.ev-sportdd .ev-dd-trigger .ddi{width:15px;height:15px;display:flex}
.ev-sportdd .ev-dd-trigger .ddi svg{width:15px;height:15px}
.ev-sportdd .ev-sportdd-cnt{font-size:11px;font-weight:800;background:rgba(16,185,129,.13);
  border:1px solid rgba(16,185,129,.32);color:var(--mint);padding:2px 7px;border-radius:5px;
  letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.ev-sportdd .ev-dd-trigger .cv{width:11px;height:11px;opacity:.7}
.ev-sportdd-menu{left:0;right:auto;min-width:600px;max-width:720px;padding:10px}
.ev-sportdd-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.ev-sportdd-opt{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;cursor:pointer;
  font-size:12.5px;color:var(--muted);font-weight:600;background:transparent;border:1px solid transparent;
  font-family:inherit;text-align:left;width:100%}
.ev-sportdd-opt:hover{background:var(--surface-2);color:var(--text)}
.ev-sportdd-opt.on{background:rgba(16,185,129,.10);border-color:rgba(16,185,129,.32);color:var(--mint)}
.ev-sportdd-opt .ck{width:14px;height:14px;border-radius:4px;border:1.5px solid var(--border-2);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:.12s}
.ev-sportdd-opt.on .ck{background:var(--mint);border-color:var(--mint)}
.ev-sportdd-opt .ck svg{display:none;width:9px;height:9px;color:#04130c}
.ev-sportdd-opt.on .ck svg{display:block}
.ev-sportdd-opt .ic{width:17px;height:17px;display:flex;flex-shrink:0}
.ev-sportdd-opt .ic svg{width:17px;height:17px}
.ev-sportdd-opt .lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev-sportdd-opt .ct{font-size:10.5px;font-weight:800;color:var(--dim);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;flex-shrink:0}
.ev-sportdd-opt.on .ct{color:var(--mint)}
/* Selpilllit valituille lajeille */
.ev-selpills{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ev-selpill{display:inline-flex;align-items:center;gap:6px;background:rgba(16,185,129,.10);
  border:1px solid rgba(16,185,129,.32);color:var(--mint);
  padding:4px 4px 4px 10px;border-radius:14px;font-size:11.5px;font-weight:800;letter-spacing:-.01em}
.ev-selpill button{background:transparent;border:none;color:var(--mint);font-family:inherit;
  font-size:14px;font-weight:800;cursor:pointer;line-height:1;padding:0 6px 0 2px;
  opacity:.7;transition:.12s}
.ev-selpill button:hover{opacity:1}
.ev-selpills-clear{background:transparent;border:none;color:var(--dim);font-family:inherit;
  font-size:11px;font-weight:700;cursor:pointer;padding:4px 8px;letter-spacing:.02em}
.ev-selpills-clear:hover{color:var(--mint)}
/* Mobile: pienennetään menu täysleveäksi */
@media (max-width:760px){
  .ev-sportdd-menu{min-width:0;width:calc(100vw - 32px);max-width:none}
  .ev-sportdd-grid{grid-template-columns:repeat(2,1fr)}
}
.ev-chip{display:inline-flex;align-items:center;gap:8px;font-family:inherit;font-size:12.5px;font-weight:600;
  color:var(--muted);background:var(--surface-2);border:1px solid var(--border);border-radius:21px;
  padding:7px 13px;cursor:pointer;transition:.12s}
.ev-chip:hover{color:var(--text)}
.ev-chip.active{background:rgba(16,185,129,.13);border-color:rgba(16,185,129,.4);color:var(--mint)}
.ev-chip .ic{width:17px;height:17px;display:flex}
.ev-chip .ic svg{width:17px;height:17px}
.ev-chip .ck{width:14px;height:14px;border-radius:5px;border:1.5px solid var(--border-2);display:flex;
  align-items:center;justify-content:center;flex-shrink:0}
.ev-chip .ck svg{width:9px;height:9px;opacity:0;color:#04130c}
.ev-chip.active .ck{background:var(--green);border-color:var(--green)}
.ev-chip.active .ck svg{opacity:1}
.ev-chip .ct{font-size:11px;font-weight:700;color:var(--dim)}
.ev-chip.active .ct{color:var(--mint)}

/* Panel with bet table */
.ev-panel{background:var(--surface);border:1px solid var(--border);border-radius:13px;overflow:hidden}
.ev-panel-head{display:flex;align-items:center;gap:10px;padding:13px 18px;border-bottom:1px solid var(--border)}
.ev-panel-head svg{width:16px;height:16px;color:var(--mint)}
.ev-panel-head h2{font-size:14px;font-weight:700;margin:0}
.ev-panel-head .cnt{margin-left:auto;font-size:12px;color:var(--dim);font-weight:500}
.ev-panel-head .cnt b{color:var(--muted);font-weight:700}

/* V4: EV-sarake ensimmäisenä (Bet Hero -tyyli), leveämpi taulukko desktopissa */
.ev-row,.ev-colhead{display:grid;
  grid-template-columns:92px 44px minmax(0,2.0fr) minmax(0,1.6fr) 96px 88px 210px;
  align-items:center;gap:16px}
.ev-colhead{padding:10px 18px;background:rgba(255,255,255,.018);border-bottom:1px solid var(--border)}
.ev-colhead span{font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--dim)}
.ev-colhead .r{text-align:right}
/* V5++++ (käyttäjäpyyntö): Multi-select popover-hint */
.db-fpop-hint {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-muted, #8a8f9f);
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 8px 12px 6px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  margin-bottom: 4px;
}

/* V5++++ (käyttäjäpyyntö): Pikaskooppi-rivi — nopea aikavälin valinta */
.db-quickscope {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.db-qs-btn {
  background: var(--surface, #141925);
  border: 1px solid var(--border, #242b3d);
  color: var(--text-muted, #b4bacb);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: .12s;
  letter-spacing: -.005em;
}
.db-qs-btn:hover { border-color: rgba(255,255,255,.18); color: var(--text, #f1f3f9); }
.db-qs-btn.on {
  background: rgba(52,211,153,.13);
  border-color: rgba(52,211,153,.42);
  color: var(--mint, #34d399);
}

/* V5++++ (käyttäjäpyyntö): Mobiilissa filterbar chartin alapuolelle */
@media (max-width: 760px) {
  .db-page .db-quickscope { order: 0; }
  .db-page { display: flex; flex-direction: column; }
  .db-page .db-row2     { order: 1; }
  .db-page .db-filterbar { order: 2; margin-top: 14px; margin-bottom: 14px; }
  .db-page .db-filter-banner { order: 3; }
  .db-page .db-col-l    { order: 1; }
  .db-page .db-personal-panel { order: 4; }
  .db-page .db-insights-wrap  { order: 5; }
  .db-page .db-breakdown-panel { order: 6; }
}

/* V5 (mockup v3.5): Dashboard hero — clean, otsikko + iso luku vasemmalla, Expected EV/CLV oikealla */
.db-hero.db-hero-v3 {
  padding: 18px 20px 12px;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.022) 1px, transparent 0);
  background-size: 20px 20px;
  background-position: 0 0;
}
/* V5+++: 2-rivinen hero-otsikko vasemmassa yläkulmassa */
.db-hero-title-block {
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 6px;
}
.db-hero.db-hero-v3 .db-hero-title-block .db-hero-lab {
  font-size: 11.5px; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--text, #f1f3f9); opacity: .8;
  margin-bottom: 0;
}
.db-hero-meta-row {
  display: inline-flex; gap: 5px; flex-wrap: wrap;
}
.db-hero-meta-chip {
  display: inline-flex; align-items: center;
  padding: 2px 9px;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: -.005em;
  color: var(--mint, #34d399);
  background: rgba(52,211,153,.10);
  border: 1px solid rgba(52,211,153,.22);
  border-radius: 5px;
}
.db-hero-meta-chip.book { color: #22d3ee; background: rgba(34,211,238,.08); border-color: rgba(34,211,238,.22); }
.db-hero-meta-chip.sport { color: #a78bfa; background: rgba(167,139,250,.08); border-color: rgba(167,139,250,.22); }
.db-hero.db-hero-v3 .db-hero-h {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 6px;
}
.db-hero.db-hero-v3 .db-hero-h-l { min-width: 0; }
.db-hero.db-hero-v3 .db-hero-lab {
  font-size: 11px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.db-hero.db-hero-v3 .db-hero-val {
  font-size: 44px; font-weight: 900;
  letter-spacing: -.035em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--mint, #34d399);
  display: inline-flex; align-items: baseline; gap: 10px;
}
.db-hero.db-hero-v3 .db-hero-val.neg { color: #f87171; }
.db-hero.db-hero-v3 .db-hero-val .u {
  font-size: 19px; font-weight: 700;
  color: var(--text-dim); letter-spacing: 0;
}
.db-hero.db-hero-v3 .db-hero-meta {
  margin-top: 10px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 12.5px;
  font-weight: 600; color: var(--text-dim);
}
.db-hero.db-hero-v3 .db-hero-meta b.pos { color: var(--mint, #34d399); font-weight: 800; }
.db-hero.db-hero-v3 .db-hero-meta b.neg { color: #f87171; font-weight: 800; }
.db-hero.db-hero-v3 .db-hero-meta .sep { color: var(--border-2, #323a52); }

/* === Expected chips: EV-odotus + CLV-odotus hero-arvon alla === */
.db-hero-expected {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.db-exp {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 10px 5px 9px;
  border-radius: 8px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.06);
  font-size: 11.5px; font-weight: 700;
  letter-spacing: -.005em;
  font-variant-numeric: tabular-nums;
  transition: background .15s, border-color .15s;
}
.db-exp:hover {
  background: rgba(255,255,255,.045);
  border-color: rgba(255,255,255,.10);
}
.db-exp .dot {
  width: 7px; height: 7px; border-radius: 50%;
  flex-shrink: 0;
}
.db-exp.ev .dot { background: #22d3ee; box-shadow: 0 0 6px rgba(34,211,238,.6); }
.db-exp.clv .dot { background: #a78bfa; box-shadow: 0 0 6px rgba(167,139,250,.6); }
.db-exp .lbl {
  color: var(--text-dim, #8b94a8);
  font-weight: 700;
  letter-spacing: .02em;
}
.db-exp.ev  .lbl { color: rgba(34,211,238,.85); }
.db-exp.clv .lbl { color: rgba(167,139,250,.85); }
.db-exp .val {
  color: var(--text, #f1f3f9);
  font-weight: 800;
}
.db-exp .val.pos { color: var(--mint, #34d399); }
.db-exp .val.neg { color: #f87171; }
.db-exp .var {
  margin-left: 2px;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 10px; font-weight: 800;
  letter-spacing: 0;
}
.db-exp .var.over { color: var(--mint, #34d399); background: rgba(52,211,153,.10); }
.db-exp .var.under { color: #f87171; background: rgba(248,113,113,.10); }
@media (max-width: 760px) {
  .db-hero-expected { gap: 6px; margin-top: 8px; }
  .db-exp { padding: 4px 8px; font-size: 11px; }
  .db-exp .var { font-size: 9.5px; padding: 1px 4px; }
}

/* V5 (mockup v3.5): Expected EV/CLV -kortit hero-arvon viereen oikealle */
.db-exp-cards {
  display: flex;
  gap: 9px;
  flex-shrink: 0;
  align-items: flex-start;
}
.db-exp-card {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  border-radius: 11px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.08);
  min-width: 155px;
}
.db-exp-card .ico {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.db-exp-card .ico svg { width: 15px; height: 15px; }
.db-exp-card.ev .ico { background: rgba(34,211,238,.15); color: #22d3ee; }
.db-exp-card.clv .ico { background: rgba(167,139,250,.15); color: #a78bfa; }
.db-exp-card .tx { display: flex; flex-direction: column; gap: 1px; }
.db-exp-card .tx .l {
  font-size: 10px; font-weight: 700;
  color: var(--text-dim, #7a8094);
  letter-spacing: .03em;
}
.db-exp-card .tx .v {
  font-size: 15px; font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--text, #f1f3f9);
  letter-spacing: -.02em;
}
.db-exp-card .tx .v.pos { color: var(--mint, #34d399); }
.db-exp-card .tx .v.neg { color: #f87171; }

@media (max-width: 900px) {
  .db-hero.db-hero-v3 .db-hero-h { grid-template-columns: 1fr; gap: 12px; }
  .db-exp-cards { width: 100%; }
  .db-exp-card { flex: 1; min-width: 0; }
}
@media (max-width: 480px) {
  .db-exp-cards { flex-direction: column; }
}
.db-hero.db-hero-v3 .db-delta {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(16,185,129,.13);
  color: var(--mint, #34d399);
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 12px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.db-hero.db-hero-v3 .db-delta.neg {
  background: rgba(239,68,68,.13); color: #f87171;
}
.db-hero.db-hero-v3 .db-delta svg { width: 11px; height: 11px; }

/* Hero-rivin oikea puoli: rangeseg + CLV-pilli + u/€ */
.db-hero.db-hero-v3 .db-hero-h-r {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; justify-content: flex-end;
}
.db-hero.db-hero-v3 .db-clv-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg, #0a0e1a);
  border: 1px solid var(--border);
  padding: 5px 10px 5px 8px;
  border-radius: 8px;
  color: var(--text-dim);
  font-size: 11.5px; font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  transition: .15s;
}
.db-hero.db-hero-v3 .db-clv-pill .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--text-dim);
}
.db-hero.db-hero-v3 .db-clv-pill.on {
  background: rgba(96,165,250,.10);
  border-color: rgba(96,165,250,.32);
  color: #60a5fa;
}
.db-hero.db-hero-v3 .db-clv-pill.on .dot { background: #60a5fa; }

/* Chart-wrap + overlay-elementit (Now-pilli + inline CLV-label) */
.db-hero.db-hero-v3 .db-chart-wrap {
  position: relative;
  margin: 10px -4px 2px;
}
.db-hero.db-hero-v3 .db-now-pill {
  position: absolute; right: 6px; top: 4px;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 800;
  color: var(--mint, #34d399);
  background: var(--bg, #0a0e1a);
  border: 1px solid rgba(52,211,153,.32);
  padding: 3px 7px;
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
  z-index: 2;
}
.db-hero.db-hero-v3 .db-now-pill.neg {
  color: #f87171;
  border-color: rgba(248,113,113,.32);
}
.db-hero.db-hero-v3 .db-now-pill .pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
  animation: db-now-pulse 1.6s ease-in-out infinite;
}
@keyframes db-now-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .45; transform: scale(.7); }
}
.db-hero.db-hero-v3 .db-clv-label {
  position: absolute;
  right: 6px; bottom: 50px;
  font-size: 10.5px;
  color: #60a5fa;
  background: var(--bg, #0a0e1a);
  border: 1px dashed rgba(96,165,250,.4);
  padding: 2px 7px;
  border-radius: 5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  z-index: 2;
}

/* Brush V3 — korkeampi (helpompi klikata), ikkuna grab/move */
.db-brush-v3 {
  height: 38px !important;
  background: var(--bg, #0a0e1a) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  margin: 6px 4px 0 !important;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  touch-action: none;
}
/* Sparkline SVG: ei saa blokata pointer-eventejä */
.db-brush-v3 .db-brushsvg {
  pointer-events: none;
  position: absolute; inset: 0;
}
.db-brush-v3 .db-brushhandle {
  /* Näkymätön, mutta klikattava reuna-alue */
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width: 18px !important;
  height: 100% !important;
  top: 0 !important;
  transform: none !important;
  opacity: 0;
  z-index: 3;
  pointer-events: auto !important;
}
.db-brush-v3 .db-brushhandle::before { display: none !important; }
.db-brush-v3 .db-brushhandle.l { cursor: ew-resize; left: -9px !important; }
.db-brush-v3 .db-brushhandle.r { cursor: ew-resize; right: -9px !important; }
.db-brush-v3 .db-brushhandle:hover {
  opacity: 1;
  background: linear-gradient(90deg, rgba(52,211,153,.32), rgba(52,211,153,.12)) !important;
}
.db-brush-v3 .db-brushhandle.r:hover {
  background: linear-gradient(90deg, rgba(52,211,153,.12), rgba(52,211,153,.32)) !important;
}
.db-brush-v3 .db-brushwin {
  background: rgba(52,211,153,.13) !important;
  border-left: 2px solid var(--mint, #34d399) !important;
  border-right: 2px solid var(--mint, #34d399) !important;
  border-top: none !important;
  border-bottom: none !important;
  cursor: grab;
  pointer-events: auto !important;
  z-index: 2;
  top: 0 !important;
  bottom: 0 !important;
}
.db-brush-v3 .db-brushwin:active { cursor: grabbing; background: rgba(52,211,153,.20) !important; }
.db-brush-v3 .db-brushwin:hover { background: rgba(52,211,153,.18) !important; }
/* Lisää keskimerkki ikkunan keskelle helpoksi grabbi-kohteeksi */
.db-brush-v3 .db-brushwin::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 18px; height: 3px;
  border-radius: 2px;
  background: var(--mint, #34d399);
  opacity: .6;
  pointer-events: none;
}

/* ============================================================================
   EV MOBILE CARD — V5 V2 tekstilista (super minimal)
   ============================================================================ */
.ev-cards-stack { display: flex; flex-direction: column; gap: 10px; }
.ec-card {
  position: relative;
  background: var(--surface, #141925);
  border: 1px solid var(--border, #242b3d);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 10px;
  cursor: pointer;
  transition: border-color .15s;
  user-select: none;
}
.ec-card.open { border-color: rgba(16,185,129,.42); }
/* Seepra-efekti — joka toinen kortti selvästi tummempi taustalla, näkyy myös ilman swipe-wrappia */
.ev-cards-stack > .ec-card:nth-child(even),
.ev-cards-stack > .swipe-wrap:nth-child(even) > .ec-card,
.ev-cards-stack > div:nth-child(even) > .ec-card {
  background: #0c1119;
  border-color: rgba(255,255,255,.04);
}
.ev-cards-stack > .ec-card:nth-child(odd),
.ev-cards-stack > .swipe-wrap:nth-child(odd) > .ec-card,
.ev-cards-stack > div:nth-child(odd) > .ec-card {
  background: #161c28;
}
.ec-card .ec-top { display: flex; align-items: center; gap: 6px; }
.ec-edge-pill {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(16,185,129,.13);
  border: 1px solid rgba(16,185,129,.32);
  padding: 5px 10px; border-radius: 7px;
  font-size: 13px; font-weight: 900;
  color: var(--mint, #34d399);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.ec-edge-pill.exceptional { color: #84cc16; background: rgba(132,204,22,.13); border-color: rgba(132,204,22,.32); }
.ec-edge-pill.good { color: var(--mint, #34d399); }
.ec-edge-pill.modest { color: var(--mint, #34d399); opacity: .85; }
.ec-sport-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 9.5px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 5px;
  background: var(--bg, #0a0e1a);
  border: 1px solid var(--border, #242b3d);
}
.ec-sport-pill svg { width: 9px; height: 9px; }
.ec-time {
  margin-left: auto;
  font-size: 10.5px; color: var(--dim, #8d94a8);
  font-weight: 700;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 7px;
  border-radius: 5px;
  background: var(--bg, #0a0e1a);
  border: 1px solid var(--border, #242b3d);
}
.ec-time svg { width: 10px; height: 10px; opacity: .8; }
.ec-time.urgent {
  color: #f87171;
  background: rgba(248,113,113,.10);
  border-color: rgba(248,113,113,.35);
}
.ec-time.soon {
  color: #f59e0b;
  background: rgba(245,158,11,.10);
  border-color: rgba(245,158,11,.32);
}
.ec-time.warn {
  color: #fbbf24;
  background: rgba(251,191,36,.08);
  border-color: rgba(251,191,36,.28);
}
.ec-league { font-size: 10.5px; color: var(--dim, #8d94a8); font-weight: 600; }
.ec-match {
  font-size: 15.5px; font-weight: 800;
  color: var(--text, #f1f3f9);  /* Ottelu valkoisena (joukkueet) */
  letter-spacing: -.02em;
  line-height: 1.25;
}
.ec-mkt-section { border-top: 1px dashed var(--border, #242b3d); padding-top: 8px; }
.ec-mkt-label {
  font-size: 9.5px; font-weight: 800;
  color: var(--dim, #8d94a8);
  letter-spacing: .07em; text-transform: uppercase;
  margin-bottom: 4px;
}
.ec-mkt-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.ec-mkt-row .sel { font-size: 13.5px; font-weight: 800; color: var(--mint, #34d399); letter-spacing: -.01em; }  /* Markkina / pelivalinta vihreänä */
.ec-mkt-row .odds {
  font-size: 19px; font-weight: 900;
  color: var(--text, #f1f3f9);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.025em;
}
.ec-book {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--bg, #0a0e1a);
  border: 1px solid var(--border, #242b3d);
  padding: 4px 8px;
  border-radius: 5px;
  font-size: 9.5px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--text, #f1f3f9);
}
.ec-book .book-letter {
  width: 14px; height: 14px;
  border-radius: 3px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 8.5px; font-weight: 900;
  background: var(--mint, #34d399);
  color: #04130c;
}
/* Bookmaker-spesifit värit ec-book-elementille (book-letter saa väripaletin) */
.ec-book[data-book="bet365"] .book-letter    { background: #027B5B; color: #fff; }
.ec-book[data-book="coolbet"] .book-letter   { background: #facc15; color: #1a1a1a; }
.ec-book[data-book="veikkaus"] .book-letter  { background: #2563eb; color: #fff; }
.ec-book[data-book="unibet"] .book-letter    { background: #147B45; color: #fff; }
.ec-book[data-book="pinnacle"] .book-letter  { background: #dc2626; color: #fff; }
.ec-book[data-book="betsson"] .book-letter   { background: #7c3aed; color: #fff; }
.ec-book[data-book="betfair-exchange"] .book-letter,
.ec-book[data-book="betfair"] .book-letter   { background: #ffc107; color: #1a1a1a; }
.ec-book[data-book="nordicbet"] .book-letter { background: #1e40af; color: #fff; }
.ec-book[data-book="leovegas"] .book-letter  { background: #ef4444; color: #fff; }
.ec-book[data-book="comeon"] .book-letter    { background: #f59e0b; color: #1a1a1a; }
.ec-stake {
  font-size: 11.5px; color: var(--text, #f1f3f9);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ec-stake .u { color: var(--mint, #34d399); }
.ec-stake .sep { color: var(--dim, #8d94a8); margin: 0 4px; opacity: .7; }
/* Expand-tila (V2 tekstilista) — piilotettu oletuksena */
.ec-exp {
  display: none;
  flex-direction: column; gap: 8px;
  margin-top: 4px;
  border-top: 1px solid rgba(16,185,129,.18);
  padding-top: 10px;
}
.ec-card.open .ec-exp { display: flex; }
.ec-exp-line {
  display: flex; justify-content: space-between; align-items: center;
}
.ec-exp-line .lbl {
  font-size: 11px; color: var(--dim, #8d94a8);
  font-weight: 700;
  letter-spacing: .03em;
}
.ec-exp-line .val {
  font-size: 13.5px; font-weight: 800;
  color: var(--text, #f1f3f9);
  font-variant-numeric: tabular-nums;
}
.ec-exp-line .val.mint { color: var(--mint, #34d399); }
.ec-exp-line .val .sub {
  font-size: 11px; color: var(--dim, #8d94a8);
  font-weight: 600;
  margin-left: 5px;
}
/* "Tallenna trackeriin" -CTA (V5 V2 minimal — ei + ikonia) */
.ec-cta-save {
  margin-top: 6px;
  width: 100%;
  background: var(--green, #10b981);
  color: #04130c; border: none;
  padding: 11px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px; font-weight: 800;
  cursor: pointer;
  letter-spacing: -.01em;
}
.ec-cta-save:active { transform: scale(.985); }

/* Foot-rivi: aina näkyvissä. Päätetään chevroniin (suljettu) tai Pelaa-nappiin (auki) */
.ec-card .ec-foot-row {
  display: flex; align-items: center; gap: 10px;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px dashed var(--border, #242b3d);
}
.ec-card .ec-foot-row .ec-stake { flex: 1; }

/* Chevron — näkyvä, suljetussa tilassa foot-rivin lopussa */
.ec-chev-end {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 24px;
  border-radius: 6px;
  background: rgba(16,185,129,.10);
  border: 1px solid rgba(16,185,129,.28);
  color: var(--mint, #34d399);
  transition: background .15s;
  flex-shrink: 0;
}
.ec-chev-end svg { width: 14px; height: 14px; }
.ec-card:hover .ec-chev-end { background: rgba(16,185,129,.18); }

/* Pelaa-nappi — näkyy vain avatussa tilassa, korvaa chevronin */
.ec-cta-play {
  background: var(--mint, #34d399);
  color: #04130c; border: none;
  padding: 7px 16px; border-radius: 8px;
  font-family: inherit; font-size: 12.5px; font-weight: 800;
  cursor: pointer;
  flex-shrink: 0;
  display: none;
}
.ec-cta-play:active { transform: scale(.96); }

/* Tilan vaihto: suljettu = chevron, auki = Pelaa */
.ec-card.open .ec-chev-end { display: none; }
.ec-card.open .ec-cta-play { display: inline-flex; }

/* Chart legend: Tuotto + CLV togglet + u/€ -toggle (E-variantti) */
/* V5++++ (käyttäjäpyyntö): pienempi legend vasemmalla — ei reuna-erottimia */
.db-chart-legend {
  display: flex; align-items: center; justify-content: flex-start;
  gap: 10px;
  margin: 2px 0 8px;
  padding: 0;
  border: none;
  flex-wrap: wrap;
}
.db-chart-legend-left {
  display: flex; align-items: center; gap: 11px;
  flex-wrap: wrap;
}
.db-lg {
  display: inline-flex; align-items: center; gap: 5px;
  background: transparent; border: none;
  font-family: inherit;
  font-size: 10.5px; font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  padding: 2px 0;
  letter-spacing: -.005em;
  transition: opacity .12s;
}
.db-lg .ln { width: 14px !important; height: 2px !important; }
.db-lg .dot { width: 7px !important; height: 7px !important; }
.db-lg .val { font-size: 10.5px !important; }
.db-lg.tuotto { cursor: default; }
.db-lg.off { opacity: .4; }
.db-lg .ln {
  width: 18px; height: 2.5px;
  background: var(--mint);
  border-radius: 2px;
  flex-shrink: 0;
}
.db-lg.clv .ln {
  background-image: repeating-linear-gradient(90deg, #a78bfa 0 5px, transparent 5px 9px);
  background-color: transparent;
}
.db-lg.ev .ln {
  background-image: repeating-linear-gradient(90deg, #22d3ee 0 3px, transparent 3px 7px);
  background-color: transparent;
}
.db-lg.tuotto:not(.off) { color: var(--mint); }
.db-lg.ev:not(.off) { color: #22d3ee; }
.db-lg.clv:not(.off) { color: #a78bfa; }
/* V5+++: Daily P/L legend-marker (vihreä + punainen mini-palkki) */
.db-lg.daily { cursor: default; color: var(--text-muted, #b4bacb); }
.db-lg.daily .sq { display: inline-flex; gap: 1.5px; align-items: center; }
.db-lg.daily .sq span { width: 5px; height: 9px; border-radius: 1.5px; display: inline-block; }
.db-lg.daily .sq span.g { background: rgba(52,211,153,.55); }
.db-lg.daily .sq span.r { background: rgba(248,113,113,.50); }
.db-lg.ev.off, .db-lg.clv.off { opacity: .42; }
.db-lg.ev:hover, .db-lg.clv:hover { opacity: 1; }
.db-lg.ev:not(.on) .ln, .db-lg.clv:not(.on) .ln { filter: grayscale(.7); }
.db-lg .lbl {
  font-weight: 800;
  letter-spacing: .03em;
}
.db-lg .val {
  font-size: 11.5px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.db-lg:hover:not(.tuotto) { opacity: 1; }
.db-lg.clv.off:hover { opacity: .7; }

/* Mobile: legend wraps cleanly */
@media (max-width: 760px) {
  .db-chart-legend { gap: 8px; margin-top: 8px; padding-top: 8px; }
  .db-chart-legend-left { gap: 12px; }
  .db-lg { font-size: 11px; }
  .db-lg .val { font-size: 11px; }
}

/* Titlerow: label + ROI-pilli samalla rivillä */
.db-hero.db-hero-v3 .db-hero-titlerow {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 8px;
}
.db-hero.db-hero-v3 .db-hero-roi {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 6px;
  font-size: 11.5px; font-weight: 800;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
  white-space: nowrap; flex-shrink: 0;
}
.db-hero.db-hero-v3 .db-hero-roi .l {
  font-size: 9.5px; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase; opacity: .85;
}
.db-hero.db-hero-v3 .db-hero-roi.pos {
  background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.32);
  color: var(--mint);
}
.db-hero.db-hero-v3 .db-hero-roi.neg {
  background: rgba(248,113,113,.10); border: 1px solid rgba(248,113,113,.32);
  color: #f87171;
}
/* Otsikkorivi V3 — kun label saa oman rivin meta-rivi tulee tiivimmin */
.db-hero.db-hero-v3 .db-hero-titlerow + .db-hero-val { margin-top: 2px; }

/* Mobiili: V3-hero — aikaväli ylimpänä omanaan, CLV/u/€ chartin yhteyteen */
@media (max-width: 768px) {
  .db-hero.db-hero-v3 .db-hero-h {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .db-hero.db-hero-v3 .db-hero-val { font-size: 38px; letter-spacing: -.035em; line-height: 1; }
  .db-hero.db-hero-v3 .db-hero-val .u { font-size: 17px; }
  /* Range-tabit OMANA lohkona ylimpänä */
  .db-hero.db-hero-v3 .db-hero-h-r {
    order: -1;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .db-hero.db-hero-v3 .db-rangeseg {
    width: 100%;
    display: grid; grid-template-columns: repeat(5, 1fr);
    gap: 0;
  }
  .db-hero.db-hero-v3 .db-rangeseg button {
    padding: 9px 4px; font-size: 12px;
  }
  /* CLV ja u/€ omalle pikkurivilleen rinnan, oikealle */
  .db-hero.db-hero-v3 .db-clv-pill,
  .db-hero.db-hero-v3 .db-eur-toggle {
    align-self: flex-end;
  }
  /* Now-pill ja CLV-label pieneksi chartin yhteydessä */
  .db-hero.db-hero-v3 .db-now-pill { font-size: 10px; padding: 2px 6px; }
  .db-hero.db-hero-v3 .db-clv-label { font-size: 10px; }
  /* ROI-pilli pysyy titlerow:n oikealla mobiilissa */
  .db-hero.db-hero-v3 .db-hero-titlerow { flex-wrap: nowrap; }
  .db-hero.db-hero-v3 .db-hero-lab { font-size: 10.5px; }
}
@media (max-width: 480px) {
  /* CLV + u/€ samalle riville (rivin lopussa) */
  .db-hero.db-hero-v3 .db-hero-h-r {
    flex-direction: column;
  }
  .db-hero.db-hero-v3 .db-hero-toggles-row {
    display: flex; justify-content: flex-end; gap: 8px;
  }
}

/* V3: Bankroll — strategia & riskirajat -kortti (sectioned layout) */
.bk-strategy-v3 .bk-str-section {
  background: var(--bg, #0a0e1a);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.bk-strategy-v3 .bk-str-section:last-child { margin-bottom: 0; }
.bk-strategy-v3 .bk-str-section-h {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 10px;
}
.bk-strategy-v3 .bk-str-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.bk-strategy-v3 .bk-str-field.full {
  grid-column: 1 / -1;
}
.bk-strategy-v3 .bk-str-kelly-seg {
  flex-wrap: wrap;
}
.bk-strategy-v3 .bk-str-kelly-seg button {
  flex: 1 1 60px;
  min-width: 0;
}

/* Riskirajat-paneelin "Muokkaa"-nappi */
.bk-limits-hint {
  font-size: 10.5px; font-weight: 700;
  color: var(--dim, #8d94a8);
  letter-spacing: .04em;
  margin-left: auto;
  font-style: italic;
}
.bk-sim-card,
.bk-edge-card {
  background: var(--bg-surface, #141925);
  border: 1px solid var(--border, #232a3a);
  border-radius: 12px;
  padding: 16px 18px 18px;
  margin-top: 14px;
}
.bk-sim-card h3,
.bk-edge-card h3 {
  display: flex; align-items: center; gap: 8px;
  font-size: 14.5px; font-weight: 800;
  color: var(--text, #f1f3f9);
  letter-spacing: -.01em;
  margin-bottom: 14px;
}
.bk-sim-hint,
.bk-edge-hint {
  font-size: 10.5px; font-weight: 700;
  color: var(--dim, #8d94a8);
  letter-spacing: .04em;
  margin-left: auto;
  font-style: italic;
}
.bk-sim-fields {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
.bk-sim-field label {
  font-size: 10px; font-weight: 800;
  color: var(--dim, #8d94a8);
  letter-spacing: .07em; text-transform: uppercase;
  display: block;
  margin-bottom: 5px;
}
.bk-sim-input {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--bg, #0a0e1a);
  border: 1px solid var(--border, #242b3d);
  border-radius: 8px;
  padding: 6px 10px;
  width: 100%;
}
.bk-sim-input:focus-within { border-color: var(--mint, #34d399); }
.bk-sim-input input {
  background: transparent; border: none;
  color: var(--text, #f1f3f9);
  font-family: inherit;
  font-size: 14px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  width: 100%;
  outline: none;
}
.bk-sim-input .suff {
  font-size: 11.5px; color: var(--dim, #8d94a8);
  font-weight: 700;
  letter-spacing: .02em;
  flex-shrink: 0;
}
.bk-sim-run {
  width: 100%;
  background: var(--mint, #34d399);
  border: none;
  color: #04130c;
  font-family: inherit;
  font-size: 13px; font-weight: 800;
  padding: 11px;
  border-radius: 8px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.bk-sim-run svg { width: 14px; height: 14px; }
.bk-sim-run:hover { filter: brightness(1.05); }

.bk-edge-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.bk-edge-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.bk-edge-table thead th {
  font-size: 9.5px; font-weight: 800;
  color: var(--dim, #8d94a8);
  letter-spacing: .07em; text-transform: uppercase;
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border, #242b3d);
}
.bk-edge-table th.r, .bk-edge-table td.r { text-align: right; }
.bk-edge-table tbody td {
  padding: 10px 10px;
  color: var(--text, #f1f3f9);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid rgba(255,255,255,.04);
  letter-spacing: -.01em;
}
.bk-edge-table tbody tr:last-child td { border-bottom: none; }
.bk-edge-table td.pos { color: var(--mint, #34d399); }
.bk-edge-table td.neg { color: #f87171; }
.bk-edge-table tbody tr:hover td { background: rgba(255,255,255,.02); }
@media (max-width: 760px) {
  .bk-sim-fields { grid-template-columns: 1fr 1fr; }
  .bk-sim-fields .bk-sim-field:nth-child(3) { grid-column: 1 / -1; }
  .bk-edge-table { font-size: 11.5px; }
  .bk-edge-table thead th, .bk-edge-table tbody td { padding: 8px 6px; }
}

.bk-limits h3 .bk-limits-edit {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--border-2, #323a52);
  color: var(--text-dim);
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 6px;
  cursor: pointer;
  transition: .12s;
}
.bk-limits h3 .bk-limits-edit:hover {
  color: var(--mint, #34d399);
  border-color: var(--mint, #34d399);
}
.bk-limits .bk-fill.near {
  background: linear-gradient(90deg, #f59e0b, #fbbf24) !important;
}

/* Talletukset & nostot — V3 lisäykset */
.bk-tx-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto auto 24px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
}
.bk-tx-row:first-of-type { border-top: none; }
.bk-tx-row.bk-tx-base {
  background: rgba(255,255,255,.015);
  opacity: .85;
}
.bk-tx-ic {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.bk-tx-ic svg { width: 16px; height: 16px; }
.bk-tx-ic.dep { background: rgba(16,185,129,.14); color: var(--mint, #34d399); }
.bk-tx-ic.wd  { background: rgba(239,68,68,.14); color: #f87171; }
.bk-tx-ic.adj { background: rgba(132,204,22,.14); color: #bef264; }
.bk-tx-nm .n {
  font-size: 13px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bk-tx-nm .d {
  font-size: 11px; color: var(--text-dim); font-weight: 600;
  margin-top: 2px;
}
.bk-tx-am {
  font-size: 13.5px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bk-tx-am.pos { color: var(--mint, #34d399); }
.bk-tx-am.neg { color: #f87171; }
.bk-tx-bal {
  font-size: 11.5px; color: var(--text-dim); font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bk-tx-rm {
  width: 24px; height: 24px;
  border: none; background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  transition: .12s;
}
.bk-tx-rm svg { width: 13px; height: 13px; }
.bk-tx-rm:hover { background: rgba(239,68,68,.13); color: #f87171; }
.bk-tx-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--text-dim);
  font-size: 12.5px;
  font-weight: 500;
  font-style: italic;
}
.bk-tx-empty-btn {
  margin-top: 6px;
  background: rgba(16,185,129,.13);
  border: 1px solid rgba(16,185,129,.32);
  color: var(--mint, #34d399);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  padding: 6px 11px;
  border-radius: 6px;
  cursor: pointer;
  font-style: normal;
}
.bk-tx-empty-btn:hover { background: rgba(16,185,129,.22); }

/* Talletus-modal */
.bk-tx-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(5,8,14,.78);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.bk-tx-modal {
  width: 100%; max-width: 440px;
  background: var(--bg-surface, var(--surface, #141925));
  border: 1px solid var(--border-2, #323a52);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
}
.bk-tx-modal-head {
  display: flex; align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.bk-tx-modal-head h3 {
  font-size: 16px; font-weight: 800;
  letter-spacing: -.02em;
  margin: 0;
  flex: 1;
}
.bk-tx-modal-x {
  width: 30px; height: 30px;
  border: none; background: transparent;
  color: var(--text-dim);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  border-radius: 7px;
}
.bk-tx-modal-x:hover { background: rgba(255,255,255,.05); color: var(--text); }
.bk-tx-modal-x svg { width: 16px; height: 16px; }
.bk-tx-modal-body {
  padding: 16px 18px;
}
.bk-tx-types {
  display: flex; gap: 6px;
  margin-bottom: 14px;
}
.bk-tx-types button {
  flex: 1;
  background: var(--bg, #0a0e1a);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  padding: 9px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: .12s;
}
.bk-tx-types button.on {
  background: rgba(16,185,129,.13);
  border-color: rgba(16,185,129,.32);
  color: var(--mint, #34d399);
}
.bk-tx-modal-body label {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 10px 0 5px;
}
.bk-tx-modal-body label .opt {
  font-weight: 600;
  text-transform: none;
  color: var(--text-dim);
  opacity: .7;
  letter-spacing: 0;
}
.bk-tx-modal-body input {
  width: 100%;
  background: var(--bg, #0a0e1a);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 11px;
  border-radius: 8px;
}
.bk-tx-modal-body input:focus {
  outline: none;
  border-color: rgba(16,185,129,.55);
}
/* V5++++: bookmaker-select + talletusbonus-rivi modaalissa */
.bk-tx-modal-body select.bk-tx-bookselect {
  width: 100%;
  background: var(--bg, #0a0e1a);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 11px;
  border-radius: 8px;
  cursor: pointer;
}
.bk-tx-modal-body select.bk-tx-bookselect:focus {
  outline: none;
  border-color: rgba(16,185,129,.55);
}
.bk-tx-bonusrow {
  background: rgba(52,211,153,.05);
  border: 1px solid rgba(52,211,153,.18);
  border-radius: 10px;
  padding: 10px 12px;
  margin-top: 4px;
}
.bk-tx-bonusrow label { margin-top: 0; }
.bk-tx-bonushint {
  font-size: 11px;
  color: var(--text-dim, #8a8f9f);
  margin-top: 6px;
  line-height: 1.4;
}
/* Bookmaker-pillit ja bonus-badget transaktio-rivillä */
.bk-tx-bk {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  background: rgba(34,211,238,.13);
  color: #22d3ee;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: -.005em;
  vertical-align: 1px;
}
.bk-tx-bonus {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 7px;
  background: rgba(245,158,11,.14);
  color: #f59e0b;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: -.005em;
  vertical-align: 1px;
}
.bk-tx-modal-foot {
  display: flex; gap: 8px;
  padding: 12px 18px 16px;
  border-top: 1px solid var(--border);
}
.bk-tx-btn {
  flex: 1;
  font-family: inherit;
  font-size: 13px; font-weight: 800;
  padding: 11px 14px;
  border-radius: 9px;
  cursor: pointer;
  letter-spacing: -.01em;
}
.bk-tx-btn.ghost {
  background: transparent;
  border: 1px solid var(--border-2, #323a52);
  color: var(--text-muted, var(--muted, #b4bacb));
  flex: 0 0 35%;
}
.bk-tx-btn.save {
  background: linear-gradient(135deg, var(--green, #10b981), var(--accent, #84cc16));
  border: none;
  color: #04130c;
}
.bk-tx-btn.save:hover { filter: brightness(1.08); }

/* Mobile: Strategiakortti optimoidaan tiukemmaksi */
@media (max-width: 600px) {
  .bk-strategy-v3 .bk-str-grid { grid-template-columns: 1fr; gap: 8px; }
  .bk-strategy-v3 .bk-str-section { padding: 10px 11px; }
  .bk-strategy-v3 .bk-str-seg {
    flex-wrap: wrap;
  }
  .bk-strategy-v3 .bk-str-seg button {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    padding: 8px 6px;
    font-size: 11.5px;
  }
  .bk-strategy-v3 .bk-str-kelly-seg button {
    flex: 1 1 calc(25% - 4px);
    padding: 7px 4px;
    font-size: 11px;
  }
  .bk-strategy-v3 h3 { font-size: 15px; }
  .bk-tx-row {
    grid-template-columns: 28px minmax(0, 1fr) auto 22px;
    gap: 8px;
    padding: 9px 10px;
  }
  .bk-tx-bal { display: none; }   /* Mobile: piilota saldo-sarake tilanpäästöksi */
  .bk-tx-modal { max-width: 100%; border-radius: 14px 14px 0 0; align-self: flex-end; }
  .bk-tx-modal-overlay { align-items: flex-end; padding: 0; }
}

/* V3: Historia-suodatin (siistimpi rakenne — analyysin §4 #1 mukaan) */
.hv-filter-v3 {
  background: var(--bg-surface, var(--surface, #141925));
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
/* Yhteenvetorivi: tulos + aktiiviset suodattimet + Tyhjennä */
.hv-filter-v3 .hv-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}
.hv-filter-v3 .hv-filter-result {
  font-size: 12px;
  color: var(--text-dim);
  font-weight: 600;
}
.hv-filter-v3 .hv-filter-result b {
  color: var(--text);
  font-weight: 800;
  font-size: 13px;
}
.hv-filter-v3 .hv-filter-hint {
  font-size: 11.5px;
  color: var(--text-dim);
  font-style: italic;
  margin-left: 4px;
}
.hv-filter-v3 .hv-active-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.hv-filter-v3 .hv-apill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(16,185,129,.13);
  border: 1px solid rgba(16,185,129,.32);
  color: var(--mint, #34d399);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 6px;
  cursor: pointer;
  transition: .12s;
  white-space: nowrap;
  letter-spacing: -.01em;
}
.hv-filter-v3 .hv-apill:hover {
  background: rgba(16,185,129,.22);
}
.hv-filter-v3 .hv-apill .x {
  font-size: 14px;
  font-weight: 900;
  opacity: .8;
  margin-left: 1px;
}
.hv-filter-v3 .hv-clear-all {
  background: transparent;
  border: 1px solid var(--border-2, #323a52);
  color: var(--text-dim);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 7px;
  cursor: pointer;
  margin-left: auto;
}
.hv-filter-v3 .hv-clear-all:hover {
  color: #fca5a5;
  border-color: rgba(239,68,68,.45);
}

/* Chip-rivit (Laji + Toimisto) horisontaalisesti scrollattavat */
.hv-filter-v3 .hv-chip-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.hv-filter-v3 .hv-chip-strip-lbl {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-dim);
  letter-spacing: -.01em;
  flex-shrink: 0;
  min-width: 80px;
}
.hv-filter-v3 .hv-chip-strip-scroll {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex: 1;
  padding-bottom: 2px;
}
.hv-filter-v3 .hv-chip-strip-scroll::-webkit-scrollbar { display: none; }
.hv-filter-v3 .hv-fchip {
  background: var(--surface-2, #1c2231);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: .12s;
  flex-shrink: 0;
}
.hv-filter-v3 .hv-fchip:hover {
  color: var(--text);
  border-color: var(--border-2, #323a52);
}
.hv-filter-v3 .hv-fchip.active {
  background: rgba(16,185,129,.16);
  border-color: rgba(16,185,129,.4);
  color: var(--mint, #34d399);
}
/* Multi-select: × -merkki aktiivisen chipin lopussa */
.hv-filter-v3 .hv-fchip .x {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 5px;
  font-weight: 900; font-size: 13px;
  opacity: .7;
  line-height: 1;
}
.hv-filter-v3 .hv-fchip.active:hover .x { opacity: 1; }
/* Chip-strip-lbl: ikoni vasemmalla, teksti vieressä */
.hv-filter-v3 .hv-chip-strip-lbl {
  display: inline-flex; align-items: center; gap: 6px;
}
.hv-filter-v3 .hv-chip-strip-lbl svg {
  width: 13px; height: 13px;
  color: var(--mint, #34d399);
  opacity: .85;
}

/* Tarkemmat suodattimet (kollapsoituva details) */
.hv-filter-v3 .hv-more-filters {
  margin-top: 8px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}
.hv-filter-v3 .hv-more-filters > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
  user-select: none;
  padding: 4px 0;
  transition: color .15s;
}
.hv-filter-v3 .hv-more-filters > summary::-webkit-details-marker { display: none; }
.hv-filter-v3 .hv-more-filters > summary:hover { color: var(--text); }
.hv-filter-v3 .hv-more-filters > summary > svg:first-child {
  width: 14px; height: 14px;
  color: var(--text-dim);
  flex-shrink: 0;
}
.hv-filter-v3 .hv-more-hint {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-dim);
  opacity: .7;
  flex: 1;
  letter-spacing: -.01em;
}
.hv-filter-v3 .hv-more-filters .chev {
  width: 14px; height: 14px;
  transition: transform .2s;
}
.hv-filter-v3 .hv-more-filters[open] .chev {
  transform: rotate(180deg);
}
.hv-filter-v3 .hv-more-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 12px;
}
.hv-filter-v3 .hv-field label {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  color: var(--text-dim);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.hv-filter-v3 .hv-field select,
.hv-filter-v3 .hv-field input {
  width: 100%;
  background: var(--bg, #0a0e1a);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 10px;
  border-radius: 7px;
}
.hv-filter-v3 .hv-field select:focus,
.hv-filter-v3 .hv-field input:focus {
  outline: none;
  border-color: rgba(16,185,129,.55);
}
.hv-filter-v3 .hv-field .pair {
  display: flex;
  align-items: center;
  gap: 6px;
}
.hv-filter-v3 .hv-field .pair input {
  flex: 1;
  min-width: 0;
}
.hv-filter-v3 .hv-field .pair span {
  color: var(--text-dim);
  font-weight: 700;
}
@media (max-width: 600px) {
  .hv-filter-v3 { padding: 12px; }
  .hv-filter-v3 .hv-chip-strip-lbl { min-width: 60px; font-size: 10.5px; }
  .hv-filter-v3 .hv-more-grid { grid-template-columns: 1fr; gap: 8px; }
  .hv-filter-v3 .hv-clear-all { margin-left: 0; }
  .hv-filter-v3 .hv-more-hint { display: none; }
}

/* V2: Historia-tabit (analyysin §4 mukaan) — Yhteenveto / Käyrä / Kalenteri / Segmentit */
.hv-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--bg-surface, var(--surface, #141925));
  border: 1px solid var(--border);
  border-radius: 12px;
  margin: 12px 0 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.hv-tabs::-webkit-scrollbar { display: none; }
.hv-tab {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  letter-spacing: -.01em;
  transition: .15s;
  white-space: nowrap;
}
.hv-tab:hover {
  color: var(--text);
  background: rgba(255,255,255,.025);
}
.hv-tab.active {
  background: rgba(16,185,129,.13);
  color: var(--mint, #34d399);
}
.hv-tab-ic {
  width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.hv-tab-ic svg { width: 15px; height: 15px; }
.hv-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--mint, #34d399);
  color: #04130c;
  font-size: 10.5px;
  font-weight: 800;
  margin-left: 1px;
}
@media (max-width: 600px) {
  .hv-tabs { padding: 3px; gap: 2px; margin: 10px 0 12px; }
  .hv-tab { padding: 8px 8px; font-size: 11.5px; gap: 5px; }
  .hv-tab-lbl { display: none; }   /* mobiilissa vain ikoni + badge */
  .hv-tab.active .hv-tab-lbl { display: inline; }  /* aktiivinen näyttää myös tekstin */
  .hv-tab-ic svg { width: 16px; height: 16px; }
}

/* V2: Bankroll-strategia kollapsoituu (oletuksena piilossa, ei dominoi monitoroivaa Bankroll-sivua) */
.bk-strategy-collapse {
  margin: 14px 0;
  background: var(--bg-surface, var(--surface, #141925));
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.bk-strategy-collapse > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  user-select: none;
  transition: background .15s;
}
.bk-strategy-collapse > summary::-webkit-details-marker { display: none; }
.bk-strategy-collapse > summary:hover { background: rgba(16,185,129,.04); }
.bk-strategy-collapse .bk-strat-ic {
  width: 26px; height: 26px;
  border-radius: 7px;
  background: rgba(16,185,129,.13);
  color: var(--mint, #34d399);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.bk-strategy-collapse .bk-strat-ic svg { width: 15px; height: 15px; }
.bk-strategy-collapse .bk-strat-hint {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-dim);
  flex: 1;
  letter-spacing: -.01em;
}
.bk-strategy-collapse .bk-strat-chev {
  width: 16px; height: 16px;
  color: var(--text-dim);
  transition: transform .2s;
  flex-shrink: 0;
}
.bk-strategy-collapse[open] .bk-strat-chev {
  transform: rotate(180deg);
}
.bk-strategy-collapse-body {
  padding: 0 16px 16px;
  border-top: 1px solid var(--border);
}
.bk-strategy-collapse-body .bk-strategy-card {
  margin-top: 14px;
}
@media (max-width: 600px) {
  .bk-strategy-collapse > summary { padding: 12px 14px; gap: 10px; font-size: 12.5px; }
  .bk-strategy-collapse .bk-strat-hint { display: none; }
  .bk-strategy-collapse-body { padding: 0 12px 14px; }
}

/* V2: "Näytä kaikki lajit" -nappi Dashboardin urheilulajilistalla */
.db-sports-more {
  display: block;
  width: 100%;
  background: transparent;
  border: 1px dashed var(--border-2, #323a52);
  color: var(--text-dim);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 9px 12px;
  margin-top: 10px;
  border-radius: 9px;
  cursor: pointer;
  letter-spacing: -.01em;
  transition: .15s;
}
.db-sports-more:hover {
  color: var(--mint, #34d399);
  border-color: var(--mint, #34d399);
  background: rgba(16,185,129,.05);
}
.ev-row{padding:14px 20px;border-bottom:1px solid var(--border);transition:.1s;cursor:pointer;background:transparent}
.ev-row:last-child{border-bottom:none}
/* Seepra-efekti — joka toinen rivi tummempi (helpompi lukea) */
.ev-row:nth-child(even){background:rgba(255,255,255,.018)}
.ev-row:hover{background:rgba(16,185,129,.05)}
.ev-row:nth-child(even):hover{background:rgba(16,185,129,.065)}
/* Desktop: piilota Tallenna-label (pelkkä + näkyy) ja bookmaker-teksti (Avaa-nappiin integroitu) */
.ev-add-lbl{display:none}
.ev-book{display:none !important}

.ev-ico{width:38px;height:38px;border-radius:10px;background:var(--surface-2);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;color:var(--mint)}
.ev-ico svg{width:21px;height:21px}
.ev-match{font-size:13.5px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev-league{font-size:11px;color:var(--dim);font-weight:500;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev-sel{font-size:13px;font-weight:800;color:var(--mint,#34d399);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em}
.ev-mkt{font-size:10.5px;color:var(--dim);font-weight:600;margin-top:2px;text-transform:uppercase;letter-spacing:.04em}
.ev-odds{text-align:right}
.ev-odds .o{font-size:15px;font-weight:900;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ev-odds .f{font-size:10.5px;color:var(--dim);font-weight:600;margin-top:2px;white-space:nowrap}
.ev-edge{justify-self:start;display:inline-flex;align-items:center;font-size:14px;font-weight:900;
  letter-spacing:-.02em;padding:6px 11px;border-radius:9px;font-variant-numeric:tabular-nums;white-space:nowrap}
.ev-edge.hi{background:linear-gradient(135deg,#34d399,#84cc16);color:#06371f}
.ev-edge.mid{background:rgba(16,185,129,.16);color:var(--mint)}
.ev-edge.lo{background:rgba(132,204,22,.15);color:#bef264}
.ev-stake{text-align:right;font-size:13.5px;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums}
.ev-stake span{display:block;font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--dim);margin-top:1px}
.ev-act{display:flex;flex-direction:column;align-items:stretch;gap:5px;min-width:0;width:100%}
.ev-rc-act{min-width:0;overflow:hidden}
.ev-actbtns{display:flex;gap:18px;min-width:0;width:100%;justify-content:flex-start;align-items:center}
.ev-actbtns .ev-open{flex:0 0 140px;min-width:0;max-width:140px;width:140px;text-align:center;justify-content:center;display:inline-flex;align-items:center}
.ev-add{width:40px;height:40px;flex:0 0 40px;border-radius:8px;border:none;background:var(--green);color:#04130c;
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.12s}
.ev-add:hover{background:var(--mint)}
.ev-add svg{width:18px;height:18px}
.ev-open{font-family:inherit;font-size:12.5px;font-weight:700;border:1px solid var(--border-2);
  border-radius:8px;padding:0 12px;height:34px;background:transparent;color:var(--muted);cursor:pointer;transition:.12s;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev-open:hover{color:var(--text);border-color:var(--green)}
.ev-book{font-size:10px;color:var(--dim);font-weight:600}
.ev-empty{padding:40px 20px;text-align:center;color:var(--dim);font-size:13px;font-weight:500}

@media(max-width:820px){
  .ev-page{padding:16px 14px 22px}
  .ev-colhead{display:none}
  .ev-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 11px;padding:13px 14px}
  .ev-ico{width:36px;height:36px;order:1}
  .ev-rc-head{order:2;flex:1;min-width:0}
  .ev-edge{order:3}
  .ev-rc-mkt{order:4;flex-basis:100%;padding-left:47px}
  .ev-rc-odds{order:5;padding-left:47px;display:flex;gap:15px;align-items:baseline}
  .ev-rc-odds .f{margin-top:0}
  .ev-stake{order:6;text-align:left}
  .ev-rc-act{order:7;margin-left:auto}
  .ev-act{flex-direction:row;align-items:center;gap:9px}
  /* Mobiilissa chipit näyttävät vain ikonin; valittu näyttää myös tekstin */
  .ev-chip{padding:7px 10px;gap:6px}
  .ev-chip .ckl{display:none}
  .ev-chip:not(.active) .lbl,
  .ev-chip:not(.active) .ct{display:none}
  .ev-chip.active{padding:7px 12px}
}

/* +EV suodatinrivi (ev-* sama design system) */
.ev-filterbar{display:flex;align-items:center;gap:9px;margin-bottom:14px;flex-wrap:wrap}
.ev-filterbar .ev-dd-trigger.ev-advtoggle{font-weight:600;color:var(--muted)}
.ev-filterbar .ev-dd-trigger.ev-advtoggle.open{border-color:var(--green);background:var(--surface-3);color:var(--mint)}
.ev-filterbar .ev-dd-trigger.ev-advtoggle.open .ddi{color:var(--mint)}
/* Sort dropdown työnnetään oikealle reunalle samalla rivillä */
.ev-filterbar-sort{margin-left:auto}
/* Valittujen lajien selpilllit omalle rivilleen filtterien alle */
.ev-selpills-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:-6px 0 14px 0}

.ev-advbar{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 14px;margin-bottom:14px;padding:14px 16px;
  background:var(--surface);border:1px solid var(--border);border-radius:13px}
.ev-advfield{display:flex;flex-direction:column;gap:5px;min-width:0}
.ev-advfield label{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.ev-advfield select,.ev-advfield input{background:var(--bg);border:1px solid var(--border-2);color:var(--text);
  font-family:inherit;font-size:12.5px;font-weight:600;padding:8px 11px;border-radius:8px;outline:none;width:100%;min-width:0}
.ev-advfield select:focus,.ev-advfield input:focus{border-color:var(--green)}
.ev-advtoggles{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}

@media(max-width:820px){
  .ev-filterbar{gap:7px}
  .ev-filterbar .ev-dd-trigger{padding:0 9px 0 10px;height:32px;font-size:12px}
  .ev-filterbar .ev-dd-trigger>span:nth-child(2){max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ev-filterbar .ev-advtoggle{margin-left:0!important}
  .ev-advbar{grid-template-columns:1fr 1fr;padding:12px}
}
/* Mobile: yhtenäinen 2-sarakkeinen grid kaikille filtteri-dropdowneille — samat leveydet, ei truncointia */
@media(max-width:760px){
  .ev-filterbar{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    align-items:stretch;
  }
  .ev-filterbar .ev-dd,
  .ev-filterbar .ev-filterbar-sort{
    width:100%; min-width:0;
  }
  .ev-filterbar .ev-dd .ev-dd-trigger,
  .ev-filterbar .ev-advtoggle{
    width:100%; height:38px;
    padding:0 12px;
    justify-content:space-between;
    display:flex; align-items:center;
    gap:6px;
  }
  /* Reset: poista margin-left:auto sortin osalta gridissä */
  .ev-filterbar-sort{margin-left:0 !important}
  /* Label-teksti ei truncata enää 90px:ään, vaan ottaa kaiken vapaan tilan */
  .ev-filterbar .ev-dd-trigger>span:nth-child(2){
    max-width:none; flex:1; min-width:0;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    text-align:left;
  }
  /* Counter-pilli (esim. "Kaikki lajit") pysyy oikealla */
  .ev-filterbar .ev-sportdd .ev-sportdd-cnt{
    flex-shrink:0; font-size:10px;
  }
  /* Dropdown-menu mobiilissa täysleveä */
  .ev-filterbar .ev-dd-menu{
    left:0 !important; right:0 !important;
    min-width:0; width:100%;
  }
}
@media(max-width:480px){
  .ev-advbar{grid-template-columns:1fr}
}

/* Toimisto-dropdown: lukumäärä per toimisto */
.ev-dd-opt .ct{font-size:11px;font-weight:700;color:var(--dim);
  background:rgba(255,255,255,.04);padding:2px 7px;border-radius:9px;flex-shrink:0;
  min-width:24px;text-align:center;font-variant-numeric:tabular-nums}
.ev-dd-opt.sel .ct{color:var(--mint);background:rgba(16,185,129,.13)}
.ev-dd-opt:hover .ct{color:var(--muted)}

/* +EV-sivun layout pakottavasti täysleveä — empty-state ei saa kaventaa paneelia */
.ev-page{width:100%;max-width:1400px;margin:0 auto;box-sizing:border-box}
.ev-page > *{width:100%;box-sizing:border-box}
.ev-panel{display:block;width:100%}
.ev-empty{min-height:220px;display:flex;align-items:center;justify-content:center;width:100%}

/* ============================================================
   Mockup: Omat vedot (omv-*) — UI-uudistus
   Prefix valittu (omv- = omat vedot) jotta ei törmää aiempaan .ov-*
   sidebar/shell-CSS:n kanssa.
   ============================================================ */
.omv-page{padding:22px 24px 30px;width:100%;max-width:1400px;margin:0 auto;box-sizing:border-box}
.omv-h1{font-size:23px;font-weight:800;letter-spacing:-.025em}
.omv-sub{font-size:13px;color:var(--dim);font-weight:500;margin-top:3px;margin-bottom:18px}

/* Bankroll strip */
.omv-bank{display:flex;background:var(--surface);border:1px solid var(--border);border-radius:13px;overflow:hidden}
.omv-bseg{flex:1;padding:14px 17px;border-right:1px solid var(--border);min-width:0}
.omv-bseg:last-child{border-right:none}
.omv-bseg .k{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);
  display:flex;align-items:center;gap:6px}
.omv-bseg .v{font-size:21px;font-weight:900;letter-spacing:-.025em;margin-top:6px;font-variant-numeric:tabular-nums}
.omv-bseg .s{font-size:11px;font-weight:600;color:var(--dim);margin-top:3px}
.omv-bseg .s.neg{color:#f87171}
.omv-chip{font-size:10px;font-weight:800;padding:1px 6px;border-radius:5px;display:inline-block}
.omv-chip.neg{background:rgba(239,68,68,.16);color:#f87171}
.omv-chip.pos{background:rgba(16,185,129,.16);color:var(--mint)}
.omv-chip.amber{background:rgba(245,158,11,.16);color:var(--amber)}
.omv-bseg.adj{flex:0 0 auto;display:flex;flex-direction:column;justify-content:center;background:rgba(255,255,255,.014)}
.omv-adjbtn{display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px solid var(--border-2);
  color:var(--muted);font-family:inherit;font-size:12px;font-weight:600;padding:8px 13px;border-radius:8px;cursor:pointer;white-space:nowrap}
.omv-adjbtn:hover{color:var(--text);border-color:var(--green)}
.omv-adjbtn svg{width:13px;height:13px}

/* Collapsible stats */
.omv-stats{margin-top:18px;background:var(--surface);border:1px solid var(--border);border-radius:13px;overflow:hidden}
.omv-stats-head{display:flex;align-items:center;gap:10px;padding:13px 17px;cursor:pointer;width:100%;
  background:none;border:none;font-family:inherit;text-align:left;color:var(--text)}
.omv-stats-head svg.si{width:16px;height:16px;color:var(--mint)}
.omv-stats-head h2{font-size:14px;font-weight:700;margin:0}
.omv-stats-head .sum{margin-left:auto;font-size:12px;color:var(--dim);font-weight:500}
.omv-stats-head .chev{width:17px;height:17px;color:var(--dim);transition:transform .2s}
.omv-stats.open .omv-stats-head .chev{transform:rotate(180deg);color:var(--mint)}
.omv-stats-body{display:none;padding:4px 17px 17px}
.omv-stats.open .omv-stats-body{display:block}
.omv-hero{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-bottom:13px}
.omv-herocard{background:var(--bg);border:1px solid var(--border);border-radius:11px;padding:15px 16px}
.omv-herocard .k{font-size:11.5px;font-weight:600;color:var(--dim)}
.omv-herocard .v{font-size:27px;font-weight:900;letter-spacing:-.03em;margin-top:7px;font-variant-numeric:tabular-nums;line-height:1}
.omv-herocard .v.pos{color:var(--green-2)}
.omv-herocard .v.neg{color:#f87171}
.omv-herocard .s{font-size:11.5px;color:var(--dim);font-weight:500;margin-top:6px}
.omv-supp{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--border);
  border:1px solid var(--border);border-radius:10px;overflow:hidden}
.omv-suppi{background:var(--surface);padding:11px 13px;text-align:center}
.omv-suppi .k{font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--dim)}
.omv-suppi .v{font-size:16px;font-weight:800;color:var(--text);margin-top:4px;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
/* Streak-elementti tarvitsee inner-flex koska sisältää dotteja */
.omv-suppi.omv-streak { text-align: left; }
.omv-suppi.omv-streak .v { text-align: left; }
/* V-H-P värikoodaus */
.omv-suppi .vhp-w { color: var(--mint, #34d399); }
.omv-suppi .vhp-l { color: #f87171; }
.omv-suppi .vhp-p { color: var(--warning, #f59e0b); }

/* Panels with tables */
.omv-panel{margin-top:18px;background:var(--surface);border:1px solid var(--border);border-radius:13px;overflow:hidden}
.omv-phead{display:flex;align-items:center;gap:9px;padding:13px 17px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.omv-phead svg{width:16px;height:16px}
.omv-phead svg.open{color:var(--mint)}
.omv-phead svg.done{color:var(--green-2)}
.omv-phead h2{font-size:14px;font-weight:700;margin:0}
.omv-phead .pc{font-size:11px;font-weight:800;color:var(--mint);background:rgba(16,185,129,.13);
  padding:2px 8px;border-radius:20px}
.omv-phead .pright{margin-left:auto;font-size:12px;color:var(--dim);font-weight:600}
.omv-phead .pright b{color:var(--muted)}
.omv-tw{overflow-x:auto}
.omv-tbl{width:100%;border-collapse:collapse;table-layout:fixed}
.omv-tbl thead th{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);
  text-align:left;padding:10px 12px;background:rgba(255,255,255,.018);white-space:nowrap}
.omv-tbl th.r,.omv-tbl td.r{text-align:right}
.omv-tbl th.c,.omv-tbl td.c{text-align:center}
.omv-tbl tbody td{padding:12px;border-top:1px solid var(--border);vertical-align:top}

.omv-to{min-width:900px}
.omv-to th:nth-child(1){width:88px}    /* Päivä */
.omv-to th:nth-child(3){width:120px}   /* Markkina (pienempi) */
.omv-to th:nth-child(4){width:72px}    /* Kerroin (pienempi) */
.omv-to th:nth-child(5){width:96px}    /* Panos */
.omv-to th:nth-child(6){width:104px}   /* Kelly-suositus (pienempi) */
.omv-to th:nth-child(7){width:128px}   /* Ratkaisu */
.omv-to th:nth-child(8){width:88px}    /* Toiminnot — kiinteä leveys */
.omv-orow{cursor:pointer;transition:.1s}
.omv-orow:hover{background:rgba(255,255,255,.022)}
.omv-orow.open-row{background:var(--surface-2)}
.omv-orow td:first-child{border-left:4px solid transparent;padding-left:18px}
.omv-orow.live td:first-child{border-left-color:var(--red)}
.omv-orow.soon td:first-child{border-left-color:var(--amber)}

.omv-day .d{font-size:13px;font-weight:800;font-variant-numeric:tabular-nums}
.omv-day .t{font-size:11px;color:var(--dim);font-weight:600;margin-top:2px}
.omv-match .nm{font-size:13px;font-weight:700;line-height:1.32}
.omv-match .st{font-size:11px;font-weight:600;margin-top:4px;display:flex;align-items:center;gap:5px}
.omv-match .st .pd{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.omv-match .st.live{color:#fca5a5}
.omv-match .st.live .pd{background:var(--red);animation:omvpulse 1.4s infinite}
.omv-match .st.soon{color:var(--amber)}
.omv-match .st.soon .pd{background:var(--amber)}
.omv-match .st.up{color:var(--dim)}
.omv-match .st.up .pd{background:var(--border-2)}
@keyframes omvpulse{0%,100%{opacity:1}50%{opacity:.3}}

.omv-mk{font-size:12.5px;font-weight:600;color:var(--muted)}
.omv-od{font-size:14.5px;font-weight:900;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--text)}
.omv-num .u{font-size:12.5px;font-weight:800;font-variant-numeric:tabular-nums}
.omv-num .e{font-size:11px;color:var(--dim);font-weight:600;margin-top:2px}
.omv-num .u.k{color:var(--mint)}
.omv-vhp{display:flex;gap:5px;justify-content:center}
.omv-vhp button{width:30px;height:28px;border-radius:7px;border:1px solid var(--border-2);background:var(--surface-3);
  font-family:inherit;font-size:11px;font-weight:900;color:var(--dim);cursor:pointer;transition:.1s}
.omv-vhp button.v:hover{background:var(--green);border-color:var(--green);color:#04130c}
.omv-vhp button.h:hover{background:var(--red);border-color:var(--red);color:#fff}
.omv-vhp button.p:hover{background:var(--amber);border-color:var(--amber);color:#04130c}
.omv-odetail{display:none}
.omv-odetail.show{display:table-row}
.omv-odetail td{background:var(--bg);border-top:1px solid var(--border);padding:0}
.omv-detgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 20px;padding:15px 18px 16px}
.omv-detf .dk{font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.omv-detf .dv{font-size:12.5px;font-weight:700;color:var(--text);margin-top:4px}
.omv-detf .dv.ev{color:var(--mint)}
.omv-detf .dv.pos{color:var(--green-2)}
.omv-detf .dv.neg{color:#f87171}
.omv-detf .ds{font-size:11px;color:var(--dim);font-weight:500;margin-top:2px}
.omv-pfoot{display:flex;align-items:center;gap:10px;padding:11px 17px;border-top:1px solid var(--border);
  font-size:12px;color:var(--dim);font-weight:600;flex-wrap:wrap}

/* === V2 Pagination (Ratkaistut-listan sivutus) === */
.omv-pager { justify-content: space-between; gap: 14px; }
.omv-pager-info b { color: var(--text); font-weight: 800; }
.omv-pager-ctrl {
  display: inline-flex; align-items: center; gap: 4px;
  flex-wrap: wrap;
}
.omv-pager-size {
  font-size: 11.5px; color: var(--dim); font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase;
  margin-right: 4px;
}
.omv-pager-szbtn, .omv-pager-nav {
  font-family: inherit; font-size: 12px; font-weight: 700;
  color: var(--text-dim, #7a8094);
  background: var(--surface-2, #1c2231);
  border: 1px solid var(--border, #232a3a);
  padding: 5px 10px;
  border-radius: 7px;
  cursor: pointer;
  transition: .12s;
  font-variant-numeric: tabular-nums;
  min-width: 30px;
}
.omv-pager-szbtn:hover:not(.on), .omv-pager-nav:hover:not(:disabled) {
  color: var(--text); border-color: var(--mint, #34d399);
}
.omv-pager-szbtn.on {
  background: rgba(16,185,129,.13);
  border-color: rgba(16,185,129,.4);
  color: var(--mint, #34d399);
}
.omv-pager-nav:disabled {
  opacity: .35; cursor: not-allowed;
}
.omv-pager-nav { padding: 5px 9px; }
.omv-pager-sep {
  width: 1px; height: 18px; background: var(--border);
  margin: 0 4px;
}
.omv-pager-page {
  font-size: 12px; color: var(--text-dim);
  padding: 0 8px; font-weight: 600;
  white-space: nowrap;
}
.omv-pager-page b { color: var(--text); font-weight: 800; }

/* Mobiili-pager Ratkaistut-listan alapuolella */
.omv-pager-mobile {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 14px 12px 18px;
  border-top: 1px solid var(--border);
  margin-top: 12px;
  font-size: 12px; color: var(--text-dim); font-weight: 600;
}
.omv-pager-mobile .omv-pager-ctrl { justify-content: center; }
.omv-pager-mobile .omv-pager-info b { color: var(--text); }

@media (max-width: 768px) {
  .omv-pager { flex-direction: column; align-items: stretch; gap: 10px; }
  .omv-pager-info { text-align: center; }
  .omv-pager-ctrl { justify-content: center; }
  .omv-pager-size { display: none; }
}

/* Resolved table */
.omv-td-tbl{min-width:940px}
.omv-td-tbl th:nth-child(1){width:72px}    /* Päivä */
.omv-td-tbl th:nth-child(2){width:64px}    /* Tulos */
.omv-td-tbl th:nth-child(4){width:124px}   /* Markkina (pienempi) */
.omv-td-tbl th:nth-child(5){width:64px}    /* Kerroin (pienempi) */
.omv-td-tbl th:nth-child(6){width:92px}    /* Panos (pienempi) */
.omv-td-tbl th:nth-child(7){width:76px}    /* CLV (pienempi) */
.omv-td-tbl th:nth-child(8){width:106px}   /* P/L (pienempi) */
.omv-td-tbl th:nth-child(9){width:130px}   /* Toiminnot (isompi — ikonit isompina) */
.omv-drow{cursor:pointer;transition:.1s}
.omv-drow:hover{background:rgba(255,255,255,.022)}
.omv-drow.open-row{background:var(--surface-2)}
.omv-res{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:800;padding:3px 8px;border-radius:6px}
.omv-res svg{width:11px;height:11px}
.omv-res.v{background:rgba(16,185,129,.16);color:var(--mint)}
.omv-res.h{background:rgba(239,68,68,.16);color:#f87171}
.omv-res.p{background:rgba(245,158,11,.16);color:var(--amber)}
.omv-clv{font-size:12.5px;font-weight:800;font-variant-numeric:tabular-nums}
.omv-clv.pos{color:var(--mint)}
.omv-clv.neg{color:#f87171}
.omv-pl .u{font-size:13px;font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.omv-pl .s{font-size:11px;font-weight:600;margin-top:2px;font-variant-numeric:tabular-nums}
.omv-pl.pos .u,.omv-pl.pos .s{color:var(--green-2)}
.omv-pl.neg .u,.omv-pl.neg .s{color:#f87171}
.omv-pl.zero .u,.omv-pl.zero .s{color:var(--dim)}
.omv-tools{display:flex;gap:6px;justify-content:flex-end}
.omv-tools button{width:30px;height:28px;border-radius:7px;border:1px solid var(--border-2);background:var(--surface-3);
  color:var(--dim);cursor:pointer;display:flex;align-items:center;justify-content:center}
.omv-tools button.edit:hover{color:var(--mint);border-color:var(--green)}
.omv-tools button.del:hover{color:#f87171;border-color:var(--red)}
.omv-tools button svg{width:14px;height:14px}

/* Mobile — pinotaan paneelit, taulukot kortteina */
@media(max-width:880px){
  .omv-page{padding:16px 14px 24px}
  .omv-bank{flex-wrap:wrap}
  .omv-bseg{flex:1 0 45%;border-right:none;border-bottom:1px solid var(--border)}
  .omv-bseg.adj{flex-basis:100%;border-bottom:none}
  .omv-hero{grid-template-columns:1fr}
  .omv-supp{grid-template-columns:1fr 1fr}
  .omv-detgrid{grid-template-columns:1fr 1fr;padding:12px 14px 14px}
}

/* ============================================================
   Mockup: Historia (hv-*) — UI-uudistus
   ============================================================ */
.hv-page{padding:24px 26px 30px;width:100%;max-width:1400px;margin:0 auto;box-sizing:border-box}
.hv-pagehead{display:flex;align-items:flex-end;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.hv-pagehead h1{font-size:23px;font-weight:800;letter-spacing:-.025em;margin:0}
.hv-pagehead .sub{font-size:13px;color:var(--dim);font-weight:500;margin-top:3px}
.hv-pagehead .spacer{flex:1;min-width:20px}
.hv-toglabel{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);
  margin:0 9px 7px 0;align-self:flex-end}

.hv-seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:9px;padding:3px;gap:2px}
.hv-seg button{border:none;background:none;color:var(--dim);font-family:inherit;font-size:12.5px;font-weight:600;
  padding:6px 14px;border-radius:6px;cursor:pointer;transition:.12s}
.hv-seg button:hover:not(.active){color:var(--text)}
.hv-seg button.active{background:rgba(16,185,129,.16);color:var(--mint)}

.hv-scope{font-size:12px;color:var(--dim);font-weight:500;margin-bottom:11px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hv-scope b{color:var(--muted);font-weight:700}
.hv-scope .chip{font-size:10.5px;font-weight:700;color:var(--mint);background:rgba(16,185,129,.12);
  border:1px solid rgba(16,185,129,.22);padding:2px 9px;border-radius:20px}

.hv-kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:18px}
.hv-kpi{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:13px 14px 14px}

/* V3: 5 KPI samalla rivillä (Tuotto, ROI, Yield, Osumat, CLV) */
.hv-kpis-v3 {
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
}
.hv-kpi-hero {
  background: linear-gradient(135deg, rgba(16,185,129,.09), transparent 70%) !important;
  border-color: rgba(16,185,129,.32) !important;
}
.hv-kpi-hero .v { font-size: 30px !important; }
.hv-kpi-hero .s { font-size: 11.5px; }
.hv-kpis-v3 .hv-kpi .v { font-size: 22px; }
.hv-kpis-v3 .hv-kpi .s {
  display: flex; align-items: center; gap: 5px;
  flex-wrap: wrap;
  font-size: 11px;
}
.hv-kpis-v3 .hv-kpi .s b {
  color: var(--text);
  font-weight: 800;
}
.hv-kpis-v3 .hv-kpi .s .dot {
  color: var(--dim); opacity: .5;
}
/* Mobiili: hero täysleveys, muut 4 KPI 2x2 stripissä */
@media (max-width: 760px) {
  .hv-kpis-v3 {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .hv-kpis-v3 .hv-kpi-hero {
    grid-column: 1 / -1;
    padding: 14px 16px;
  }
  .hv-kpis-v3 .hv-kpi-hero .v { font-size: 32px !important; }
  .hv-kpis-v3 .hv-kpi:not(.hv-kpi-hero) {
    padding: 10px 8px;
    text-align: center;
    border-radius: 10px;
  }
  .hv-kpis-v3 .hv-kpi:not(.hv-kpi-hero) .k {
    font-size: 9.5px; font-weight: 800;
    letter-spacing: .07em; text-transform: uppercase;
    justify-content: center;
  }
  .hv-kpis-v3 .hv-kpi:not(.hv-kpi-hero) .v {
    font-size: 16px !important; margin-top: 4px;
  }
  .hv-kpis-v3 .hv-kpi:not(.hv-kpi-hero) .s {
    font-size: 9.5px; margin-top: 2px;
    justify-content: center;
  }
}
.hv-kpi .k{font-size:11.5px;color:var(--dim);font-weight:600;display:flex;align-items:center;gap:6px}
.hv-kpi .k svg{width:14px;height:14px}
.hv-kpi .v{font-size:27px;font-weight:900;letter-spacing:-.03em;margin-top:8px;font-variant-numeric:tabular-nums;
  line-height:1;color:var(--text)}
.hv-kpi .v.pos{color:var(--green-2)}
.hv-kpi .v.neg{color:#f87171}
.hv-kpi .s{font-size:11.5px;color:var(--dim);font-weight:500;margin-top:6px}
.hv-kpi .s em{font-style:normal;color:var(--muted);font-weight:600}

.hv-filter{background:var(--surface);border:1px solid var(--border);border-radius:13px;padding:13px 16px 15px;margin-bottom:18px}
.hv-filter-top{display:flex;align-items:center;gap:9px;margin-bottom:12px;flex-wrap:wrap}
.hv-filter-top svg{width:15px;height:15px;color:var(--dim)}
.hv-filter-top h3{font-size:12.5px;font-weight:700;letter-spacing:.02em;margin:0}
.hv-filter-top .res{margin-left:auto;font-size:12px;color:var(--dim);font-weight:500}
.hv-filter-top .res b{color:var(--mint);font-weight:700}
.hv-fields{display:flex;gap:11px;flex-wrap:wrap;align-items:flex-end}
.hv-field{display:flex;flex-direction:column;gap:5px;min-width:0}
.hv-field label{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.hv-field select,.hv-field input{background:var(--bg);border:1px solid var(--border-2);color:var(--text);
  font-family:inherit;font-size:12.5px;padding:0 10px;border-radius:8px;height:35px;outline:none;min-width:0}
.hv-field select:focus,.hv-field input:focus{border-color:var(--green)}
.hv-field .pair{display:flex;gap:5px;align-items:center;color:var(--dim);font-size:12px}
.hv-field .pair input{width:74px}
.hv-clear{margin-left:auto;background:transparent;border:1px solid var(--border-2);color:var(--muted);
  font-family:inherit;font-size:12px;font-weight:600;height:35px;padding:0 14px;border-radius:8px;cursor:pointer}
.hv-clear:hover{color:var(--text);border-color:var(--green)}

.hv-cal{background:var(--surface);border:1px solid var(--border);border-radius:13px;overflow:hidden}
.hv-cal-head{display:flex;align-items:center;gap:13px;padding:13px 16px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.hv-cal-head svg{width:16px;height:16px;color:var(--mint)}
.hv-cal-head h3{font-size:14px;font-weight:700;margin:0}
.hv-cal-head .spacer{flex:1;min-width:10px}
.hv-yearnav{display:flex;align-items:center;gap:4px}
.hv-yearnav b{font-size:13px;font-weight:800;padding:0 8px;font-variant-numeric:tabular-nums}
.hv-navarrow{width:28px;height:28px;border-radius:7px;border:1px solid var(--border-2);background:transparent;
  color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center}
.hv-navarrow:hover{color:var(--text);border-color:var(--green)}
.hv-navarrow svg{width:15px;height:15px}
/* V2: Compbar — Skooppi + Yksikkö */
.hv-compbar {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px; flex-wrap: wrap;
  background: var(--surface, #141925);
  border: 1px solid var(--border, #232a3a);
  border-radius: 12px;
  padding: 10px 14px;
}
.hv-compbar-lbl {
  font-size: 10.5px; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-dim, #7a8094);
}
.hv-compbar-spacer { flex: 1; }
.hv-compbar .hv-seg {
  display: inline-flex; gap: 3px;
  background: var(--surface-2, #1c2231);
  padding: 3px;
  border-radius: 9px;
}
.hv-compbar .hv-seg button {
  font-family: inherit; font-size: 11.5px; font-weight: 700;
  color: var(--text-dim, #7a8094);
  background: none; border: none;
  padding: 6px 12px;
  border-radius: 7px;
  cursor: pointer;
  transition: .15s;
}
.hv-compbar .hv-seg button.active {
  background: var(--bg, #0a0e1a);
  color: var(--text, #f1f3f9);
}
.hv-compbar .hv-seg button:hover:not(.active) { color: var(--text); }
@media (max-width: 600px) {
  .hv-compbar { padding: 9px 12px; gap: 8px; }
  .hv-compbar-lbl { font-size: 10px; }
  .hv-compbar-spacer { display: none; }
}

/* V2: Chip-rivit suodattimissa (Laji + Toimisto) */
.hv-chiprow {
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap; margin-bottom: 10px;
}
.hv-chiprow-lbl {
  font-size: 11px; font-weight: 800;
  letter-spacing: .04em;
  color: var(--text-dim, #7a8094);
  margin-right: 4px;
}
.hv-fchip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 28px; padding: 0 11px;
  border-radius: 14px;
  background: var(--surface-2, #1c2231);
  border: 1px solid var(--border, #232a3a);
  color: var(--text-muted, #b4bacb);
  font-family: inherit; font-size: 11.5px; font-weight: 700;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.hv-fchip:hover { color: var(--text); border-color: var(--mint, #34d399); }
.hv-fchip.active {
  background: rgba(16,185,129,.13);
  border-color: rgba(16,185,129,.36);
  color: var(--mint, #34d399);
}

/* V2: Chart-headerin toggle-kytkimet (CLV / 0-viiva) */
.hv-chart-head .hv-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700;
  color: var(--text-dim, #7a8094);
  cursor: pointer; user-select: none;
}
.hv-chart-head .hv-toggle .sw {
  width: 28px; height: 15px; border-radius: 8px;
  background: var(--surface-3, #222a3d);
  position: relative;
  transition: background .15s;
}
.hv-chart-head .hv-toggle .sw::after {
  content: ""; position: absolute; left: 2px; top: 2px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--text-dim);
  transition: .15s;
}
.hv-chart-head .hv-toggle.on .sw { background: rgba(132,204,22,.42); }
.hv-chart-head .hv-toggle.on .sw::after { left: 15px; background: var(--mint, #34d399); }
.hv-chart-head .hv-toggle.on { color: var(--mint, #34d399); }
@media (max-width: 600px) {
  .hv-chart-head .hv-toggle { font-size: 10.5px; }
  .hv-chart-head .hv-toggle .sw { width: 24px; height: 13px; }
  .hv-chart-head .hv-toggle .sw::after { width: 9px; height: 9px; }
  .hv-chart-head .hv-toggle.on .sw::after { left: 13px; }
}

/* V2: Lajien tuottosegmentit + Top markkinat -paneelit */
.hv-row2 {
  display: grid; gap: 14px; margin-top: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .hv-row2 { grid-template-columns: 1.4fr 1fr; }
}
.hv-segpanel {
  background: var(--surface, #141925);
  border: 1px solid var(--border, #232a3a);
  border-radius: 13px;
  padding: 14px 16px 12px;
}
.hv-segpanel h3 {
  font-size: 13.5px; font-weight: 800;
  margin: 0 0 10px;
  letter-spacing: -.01em;
}
.hv-segrow {
  display: grid;
  grid-template-columns: 22px 1fr 70px 90px;
  gap: 12px; align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
}
.hv-segrow:last-child { border-bottom: none; }
.hv-segrow-ico {
  width: 22px; height: 22px;
  color: var(--mint, #34d399);
  display: flex; align-items: center; justify-content: center;
}
.hv-segrow-ico svg { width: 18px; height: 18px; }
.hv-segrow-name { min-width: 0; }
.hv-segrow-name .t {
  display: block; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hv-segrow-name .s {
  display: block; font-size: 10.5px; color: var(--text-dim);
  font-weight: 500; margin-top: 1px;
}
.hv-segrow-bn {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  text-align: right;
}
.hv-segrow-bn.pos { color: var(--mint, #34d399); }
.hv-segrow-bn.neg { color: #f87171; }
.hv-segrow-bar {
  height: 6px; background: var(--surface-3, #222a3d);
  border-radius: 3px; overflow: hidden;
}
.hv-segrow-bar > div {
  height: 100%; background: var(--mint, #34d399);
  border-radius: 3px;
  transition: width .25s ease;
}
.hv-segrow-bar > div.neg { background: #f87171; }

@media (max-width: 600px) {
  .hv-segrow { grid-template-columns: 22px 1fr 60px; }
  .hv-segrow-bar { display: none; }
}

/* V2: Historia brush-slider (sama tyyli kuin Dashboard) */
.hv-brush {
  position: relative; height: 40px;
  margin: 10px 16px 14px;
  background: var(--bg, #0a0e1a);
  border: 1px solid var(--border, #232a3a);
  border-radius: 6px; overflow: hidden;
  user-select: none;
}
.hv-brushsvg { width: 100%; height: 100%; opacity: .55; }
.hv-brushsvg svg { width: 100%; height: 100%; display: block; }
.hv-brushwin {
  position: absolute; top: 0; bottom: 0;
  background: rgba(16,185,129,.10);
  border-left: 2px solid var(--mint, #34d399);
  border-right: 2px solid var(--mint, #34d399);
  pointer-events: none;
}
.hv-brushhandle {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 9px; height: 22px; background: var(--mint, #34d399);
  border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.4);
  cursor: ew-resize; touch-action: none; pointer-events: auto;
}
/* Kahvat ikkunan sisäpuolella ettei overflow:hidden leikkaa */
.hv-brushhandle.l { left: 0; }
.hv-brushhandle.r { right: 0; }
.hv-brushhandle:hover { background: #6ee7b7; }
/* Iso touch-target näkymättömänä laajennuksena */
.hv-brushhandle::before {
  content: ""; position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 32px; height: 44px;
}
@media (max-width: 768px) {
  .hv-brush { height: 40px; margin: 8px 12px 12px; touch-action: none; }
  .hv-brushhandle { width: 14px; height: 26px; border-radius: 5px; }
  .hv-brushhandle::before { width: 48px; height: 60px; }
}

/* Piilota vanhat HTML range-inputit (jätetty fallbackiksi vanhoille selaimille) */
.hv-rng-wrap { display: none !important; }

/* V2: 12 mini-kalenteria vuosi-näkymässä */
.hv-months{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px 22px;padding:17px 16px 6px}
.hv-month{display:flex;flex-direction:column;gap:7px}
.hv-month.now .hv-mlabel b,.hv-month.current .hv-mlabel b{color:var(--mint)}
.hv-month.future .hv-mlabel{color:var(--dim)}
.hv-month.future .hv-mlabel b{color:var(--dim)}
.hv-mlabel{display:flex;align-items:baseline;justify-content:space-between;margin:0;padding:0 2px 5px;border-bottom:1px solid var(--border);font-size:11.5px;font-weight:800;letter-spacing:.02em}
.hv-mlabel b{font-size:11.5px;font-weight:800;color:var(--text)}
.hv-mlabel span{font-size:10.5px;font-weight:800;color:var(--dim);font-variant-numeric:tabular-nums}
.hv-mlabel span.pos{color:var(--mint)}
.hv-mlabel span.neg{color:#f87171}
.hv-mlabel span.zero{color:var(--dim);font-weight:600}
.hv-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;padding:6px 5px;border-radius:8px;border:1px solid transparent}
.hv-month.current .hv-grid,.hv-month.now .hv-grid{border-color:rgba(16,185,129,.42);background:rgba(16,185,129,.025);box-shadow:0 0 0 1px rgba(16,185,129,.08) inset;outline:none;outline-offset:0}
.hv-day{aspect-ratio:1;border-radius:2.5px;background:var(--surface-3,#222a3d);cursor:default;transition:.1s}
.hv-day.has{cursor:pointer}
.hv-day.has:hover{outline:1.5px solid var(--mint);outline-offset:0;z-index:1;position:relative}
.hv-day.empty{background:transparent;cursor:default}
.hv-day.future-day{background:rgba(36,43,61,.5);cursor:default}
.hv-day.today{outline:1.5px solid var(--mint);outline-offset:0}
/* 8-sävyinen skaala (mockup) */
.hv-day.p0{background:var(--surface-3,#222a3d)}
.hv-day.p1{background:rgba(16,185,129,.22)}
.hv-day.p2{background:rgba(16,185,129,.44)}
.hv-day.p3{background:var(--green-2,#10b981)}
.hv-day.p4{background:var(--mint,#34d399)}
.hv-day.n1{background:rgba(239,68,68,.28)}
.hv-day.n2{background:rgba(239,68,68,.55)}
.hv-day.n3{background:#ef4444}

/* Vuoden legenda alalaidassa */
.hv-year-leg{
  grid-column:1/-1;display:flex;align-items:center;gap:8px;
  margin-top:8px;padding:0 4px;
  font-size:10.5px;color:var(--dim);font-weight:600;
  justify-content:flex-end;flex-wrap:wrap;
}
.hv-year-leg .scl{display:flex;gap:2px}
.hv-year-leg .scl span{width:13px;height:10px;border-radius:2px}
.hv-year-total{margin-left:14px;font-size:11.5px;color:var(--text)}
.hv-year-total b{font-weight:800;font-variant-numeric:tabular-nums}
.hv-year-total b.pos{color:var(--mint)}
.hv-year-total b.neg{color:#f87171}
.hv-legend{display:flex;align-items:center;gap:8px;padding:12px 16px 16px;font-size:11px;color:var(--dim);font-weight:500;flex-wrap:wrap}
.hv-legend .grp{display:flex;align-items:center;gap:4px}
.hv-legend .sw{width:13px;height:13px;border-radius:3px}
.hv-legend .sep{width:1px;height:13px;background:var(--border-2);margin:0 4px}

@media(max-width:780px){
  .hv-page{padding:18px 16px 24px}
  .hv-kpis{grid-template-columns:1fr 1fr}
  .hv-months{grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
  .hv-pagehead h1{font-size:20px}
}
@media(max-width:480px){
  .hv-kpis{grid-template-columns:1fr}
  .hv-months{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Historia: tuottograafi ja range slider */
.hv-chart-panel{background:var(--surface);border:1px solid var(--border);border-radius:13px;
  overflow:hidden;margin-bottom:18px}
.hv-chart-head{display:flex;align-items:center;gap:13px;padding:13px 16px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.hv-chart-head svg{width:16px;height:16px;color:var(--mint)}
.hv-chart-head h3{font-size:14px;font-weight:700;margin:0}
.hv-chart-head .spacer{flex:1;min-width:10px}
.hv-chart-head .info{font-size:11.5px;color:var(--dim);font-weight:500}
.hv-chart-head .info b{color:var(--muted);font-weight:700;font-variant-numeric:tabular-nums}
.hv-chart-svg{padding:6px 12px 0}
.hv-chart-svg svg{display:block;width:100%;height:auto}

/* Dual-range slider (sama kuin Dashboardilla, eri prefiksi) */
.hv-rng-wrap{padding:10px 22px 16px;position:relative;height:42px}
.hv-rng-track{position:absolute;left:22px;right:22px;top:50%;transform:translateY(-50%);
  height:6px;background:rgba(107,114,128,.22);border:1px solid rgba(107,114,128,.32);border-radius:4px;pointer-events:none}
.hv-rng-fill{position:absolute;top:50%;transform:translateY(-50%);height:6px;
  background:linear-gradient(90deg,var(--green),var(--accent));border-radius:4px;pointer-events:none;
  box-shadow:0 0 10px rgba(16,185,129,.35);left:22px;right:22px}
.hv-rng{-webkit-appearance:none;appearance:none;position:absolute;left:22px;right:22px;
  width:calc(100% - 44px);background:transparent;pointer-events:none;height:22px;margin:0;
  top:50%;transform:translateY(-50%);touch-action:pan-y}
.hv-rng::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;
  border-radius:50%;background:var(--green);border:2px solid #fff;cursor:pointer;pointer-events:auto;
  box-shadow:0 2px 6px rgba(16,185,129,.4);touch-action:none}
.hv-rng::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--green);
  border:2px solid #fff;cursor:pointer;pointer-events:auto;box-shadow:0 2px 6px rgba(16,185,129,.4)}
.hv-rng-a{z-index:2}
.hv-rng-b{z-index:3}

/* Kalenteri-näkymät */
.hv-cal-week,.hv-cal-month{padding:17px 16px 10px}
.hv-cal-week .hv-grid,.hv-cal-month .hv-grid{gap:6px}
.hv-cal-week .hv-day,.hv-cal-month .hv-day{aspect-ratio:1;border-radius:5px;
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;
  color:rgba(255,255,255,.7);font-variant-numeric:tabular-nums;position:relative}
.hv-cal-week .hv-day{font-size:12.5px}
.hv-cal-week .hv-day .dn,.hv-cal-month .hv-day .dn{font-size:10px;color:rgba(255,255,255,.55);
  position:absolute;top:3px;left:5px;font-weight:600}
.hv-cal-week .hv-day .dv,.hv-cal-month .hv-day .dv{position:absolute;bottom:3px;right:5px;font-size:9.5px}
.hv-cal-week .hv-day.empty,.hv-cal-month .hv-day.empty{color:rgba(255,255,255,.18)}
.hv-cal-week-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.hv-cal-month-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.hv-cal-month-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-bottom:6px;
  font-size:10px;font-weight:700;color:var(--dim);text-align:center;letter-spacing:.05em;text-transform:uppercase}
.hv-cal-all{padding:17px 16px 6px}
.hv-cal-all .yrow{margin-bottom:18px}
.hv-cal-all .yrow:last-child{margin-bottom:0}
.hv-cal-all .yhead{font-size:13px;font-weight:800;color:var(--muted);margin-bottom:8px;
  font-variant-numeric:tabular-nums}
.hv-cal-all .yhead .ysum{font-size:11px;color:var(--dim);font-weight:600;margin-left:8px}
.hv-cal-all .ymonths{display:grid;grid-template-columns:repeat(12,1fr);gap:6px}
.hv-cal-all .ymonth{aspect-ratio:1;border-radius:4px;background:rgba(255,255,255,.028);
  display:flex;align-items:flex-end;padding:4px;font-size:9px;font-weight:700;color:rgba(255,255,255,.7)}
.hv-cal-all .ymonth.l2{background:#ef4444}
.hv-cal-all .ymonth.l1{background:rgba(239,68,68,.42)}
.hv-cal-all .ymonth.p0{background:#586079}
.hv-cal-all .ymonth.w1{background:rgba(16,185,129,.5)}
.hv-cal-all .ymonth.w2{background:#10b981}

@media(max-width:780px){
  .hv-chart-svg{padding:4px 8px 0}
  .hv-rng-wrap{padding:8px 14px 12px}
  .hv-cal-all .ymonths{gap:4px}
}

/* Historia: stabiloi paneelien korkeudet jotta sivu ei "hyppää" kun KPI:t / graafi / kalenteri päivittyvät */
.hv-chart-svg{min-height:254px}
/* Kalenteri lukittu kiinteään korkeuteen — head + content + legend täyttävät tilan,
   sisällön korkeus on AINA sama vaikka näkymä vaihtuu (Viikko/Kuukausi/Vuosi) */
.hv-cal{min-height:560px;display:flex;flex-direction:column}
.hv-cal > .hv-cal-head{flex-shrink:0}
.hv-cal > .hv-legend{flex-shrink:0;margin-top:auto}
.hv-cal-week,.hv-cal-month{flex:1;overflow:visible;display:flex;flex-direction:column;padding-bottom:14px}
.hv-cal-week > div:last-child,.hv-cal-month > div:last-child{flex:1;display:flex;align-items:flex-start}
.hv-months{flex:1;overflow:hidden}
/* KPI-luvut: kiinteä rivikorkeus jotta arvon kasvu ei aiheuta korkeusmuutosta */
.hv-kpi .v{min-height:32px}
.hv-kpi .s{min-height:32px}
/* Kuukauden tuotto-yhteenveto vuosi-näkymässä */
.hv-mlabel .ms{font-size:10.5px;font-weight:700;font-variant-numeric:tabular-nums}
.hv-mlabel .ms.pos{color:var(--green-2)}
.hv-mlabel .ms.neg{color:#f87171}
.hv-mlabel .ms.zero{color:var(--dim)}

/* Dashboard tuottokäyrän range slider (sama tyyli kuin Historiassa) */
.db-rng-wrap{padding:10px 22px 8px;position:relative;height:42px}
.db-rng-track{position:absolute;left:22px;right:22px;top:50%;transform:translateY(-50%);
  height:6px;background:rgba(107,114,128,.22);border:1px solid rgba(107,114,128,.32);border-radius:4px;pointer-events:none}
.db-rng-fill{position:absolute;top:50%;transform:translateY(-50%);height:6px;
  background:linear-gradient(90deg,var(--green),var(--accent));border-radius:4px;pointer-events:none;
  box-shadow:0 0 10px rgba(16,185,129,.35);left:22px;right:22px}
.db-rng{-webkit-appearance:none;appearance:none;position:absolute;left:22px;right:22px;
  width:calc(100% - 44px);background:transparent;pointer-events:none;height:22px;margin:0;
  top:50%;transform:translateY(-50%);touch-action:pan-y}
.db-rng::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;
  border-radius:50%;background:var(--green);border:2px solid #fff;cursor:pointer;pointer-events:auto;
  box-shadow:0 2px 6px rgba(16,185,129,.4);touch-action:none}
.db-rng::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--green);
  border:2px solid #fff;cursor:pointer;pointer-events:auto;box-shadow:0 2px 6px rgba(16,185,129,.4)}
.db-rng-a{z-index:2}
.db-rng-b{z-index:3}
.db-rng-info{padding:0 22px 12px;font-size:11.5px;color:var(--dim);font-weight:500;text-align:center}
.db-rng-info b{color:var(--muted);font-weight:700;font-variant-numeric:tabular-nums}

/* Dashboard: lukitse mitat jotta Kelly/Flat ja muut filteröinnit eivät muuta layoutia */
.db-hero-val{min-height:46px;min-width:170px;display:inline-block}
.db-hero-meta{min-height:24px}
.db-hf .v{min-height:24px}
.db-card .v{min-height:25px}
.db-strip .si{min-width:0}
/* Stat-kortin numero pysyy paikallaan vaikka arvo kasvaa */
.db-card{min-width:0}
.db-card > div:last-child{min-width:0;flex:1}

/* Mobiili — tuottokäyrät isompia ja luettavampia */
@media (max-width: 768px) {
  .db-chart svg, .hv-chart-svg svg { min-height: 280px; }
  .hv-chart-svg { min-height: 280px; }
  .db-chart, .hv-chart-svg { padding: 4px 6px 0 6px; }
  .db-hero-val { min-width: 0; font-size: 30px; }
  /* Range slider mobiilissa: hieman isompi padding */
  .db-rng-wrap, .hv-rng-wrap { padding: 12px 18px 14px; }
  .db-rng::-webkit-slider-thumb, .hv-rng::-webkit-slider-thumb { width: 20px; height: 20px; }
  .db-rng::-moz-range-thumb, .hv-rng::-moz-range-thumb { width: 20px; height: 20px; }
}

/* ============================================================
   Mobiili-kattava optimointi — mockupien mukaisesti
   (mockup-dashboard-mobiili.html, mockup-ev-valikko-mobiili.html,
    mockup-omat-vedot-mobiili.html, mockup-historia-mobiili.html,
    mockup-avoimet-vedot-mobiili-v2.html)
   ============================================================ */
@media (max-width: 768px) {

  /* === Yleiset paneelit ja paddingit === */
  .ov-content { padding: 12px; }

  /* === Dashboard mobiili === */
  /* Urheilulajit-paneeli: pinotaan PYSTYSUUNTAAN (mockup näyttää vertikaalisen listan) */
  .db-sports { grid-template-columns: 1fr; }
  .db-sport { padding: 10px 13px; gap: 10px; }
  .db-sname { font-size: 12.5px; }
  .db-smeta { font-size: 10px; }
  .db-sico { width: 32px; height: 32px; border-radius: 8px; }
  .db-sico svg { width: 18px; height: 18px; }

  /* Stat-kortit pienempi padding mobiilissa */
  .db-card { padding: 12px 13px; gap: 11px; }
  .db-cico { width: 36px; height: 36px; border-radius: 10px; }
  .db-cico svg { width: 18px; height: 18px; }
  .db-card .v { font-size: 18px; }
  .db-card .k { font-size: 9.5px; line-height: 1.3; }

  /* Hero-osio tiiviimpi — pidetään horisontaalisena jotta u/€ toggle pysyy oikeassa yläkulmassa */
  .db-hero-top { padding: 14px 15px 4px; flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 10px; }
  .db-hero-top > div:first-child { min-width: 0; flex: 1; }
  .db-eur-toggle { flex-shrink: 0; align-self: flex-start; }
  .db-hero-lab { font-size: 10px; }
  .db-hero-ctrls { margin-left: 0; width: 100%; gap: 8px; padding-top: 11px; }
  .db-hero-foot { grid-template-columns: repeat(3, 1fr); }
  .db-hf { padding: 10px 12px; }
  .db-hf .k { font-size: 9px; }
  .db-hf .v { font-size: 15px; }

  /* Hero-arvo (kokonaistuotto) — ei vie liikaa tilaa mobiilissa */
  .db-hero-val { font-size: 30px !important; min-width: 0 !important; }
  .db-hero-meta { font-size: 11.5px; gap: 7px; flex-wrap: wrap; }
  .db-hero-delta { padding: 3px 8px; }

  /* Page heading */
  .db-h1 { font-size: 19px; }
  .db-sub { font-size: 11.5px; margin-bottom: 14px; }

  /* === +EV mobiili — chip-rivi vaakavieritys (mockupin tapaan) === */
  .ev-sports {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }
  .ev-sports::-webkit-scrollbar { display: none; }
  .ev-chip { flex: 0 0 auto; height: 38px; padding: 0 12px; border-radius: 19px; }
  .ev-chip .ic { width: 19px; height: 19px; }
  .ev-chip .ic svg { width: 19px; height: 19px; }
  .ev-sportbar .hint { font-size: 10.5px; padding-top: 4px; }

  /* +EV-rivi mobiilissa: kortti-tyyli (jo flex-wrap, mutta tiivistetään) */
  .ev-page { padding: 12px; }
  .ev-pagehead h1 { font-size: 19px; }
  .ev-pagehead .sub { font-size: 11.5px; }

  /* === Omat vedot mobiili === */
  .omv-page { padding: 12px; }
  .omv-h1 { font-size: 19px; }
  .omv-sub { font-size: 12px; margin-bottom: 14px; }
  /* Bankroll-strip: pinotaan vertikaaliseksi, isompi numero per kortti */
  .omv-bank { flex-direction: column; }
  .omv-bseg { border-right: none !important; border-bottom: 1px solid var(--border); padding: 12px 14px; }
  .omv-bseg:last-child { border-bottom: none; }
  .omv-bseg .v { font-size: 19px; }
  .omv-bseg.adj .omv-adjbtn { width: 100%; justify-content: center; }
  /* Hero-stats kortit pinotaan */
  .omv-hero { grid-template-columns: 1fr; gap: 10px; }
  .omv-herocard { padding: 13px 14px; }
  .omv-herocard .v { font-size: 23px; }
  /* Tukikortit 2-saraketta */
  .omv-supp { grid-template-columns: 1fr 1fr; }
  .omv-suppi { padding: 10px 12px; }
  /* Taulukot scrollautuvat horisontaalisesti (jo asetettu omv-tw:lla) */
  .omv-tbl thead th { padding: 9px 10px; font-size: 9.5px; }
  .omv-tbl tbody td { padding: 10px 10px; }

  /* === Historia mobiili === */
  .hv-page { padding: 12px; }
  .hv-pagehead h1 { font-size: 19px; }
  .hv-pagehead .sub { font-size: 11.5px; }
  .hv-pagehead { gap: 10px; margin-bottom: 14px; }
  /* KPI:t 2x2 mobiilissa, ei 4-saraketta */
  .hv-kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  .hv-kpi { padding: 13px 14px; }
  .hv-kpi .v { font-size: 22px; }
  .hv-kpi .k { font-size: 10.5px; }
  /* Suodatinrivi pinotaan */
  .hv-filter { padding: 12px 13px; }
  .hv-fields { flex-direction: column; align-items: stretch; gap: 9px; }
  .hv-field { width: 100%; }
  .hv-field .pair input { width: 100%; }
  .hv-clear { width: 100%; margin-left: 0; margin-top: 4px; }
  /* Kalenteri-paneeli pienempi mobiilissa */
  .hv-cal { min-height: 460px; height: auto; }
  .hv-cal-head { padding: 11px 13px; gap: 9px; flex-wrap: wrap; }
  .hv-cal-head h3 { font-size: 13px; }
  .hv-cal-head .hv-seg button { font-size: 11px; padding: 5px 10px; }
  .hv-months { grid-template-columns: 1fr 1fr 1fr; gap: 12px; padding: 13px 12px 6px; }
  .hv-grid { gap: 2px; }
  .hv-mlabel b { font-size: 10.5px; }
  .hv-mlabel .ms { font-size: 9.5px; }

  /* === Range slider mobiilissa — isompi kosketuskahva, riittävä tila === */
  .db-rng-wrap, .hv-rng-wrap { padding: 12px 18px 14px; height: 48px; }
  .db-rng::-webkit-slider-thumb, .hv-rng::-webkit-slider-thumb { width: 22px; height: 22px; }
  .db-rng::-moz-range-thumb, .hv-rng::-moz-range-thumb { width: 22px; height: 22px; }
  .db-rng-info, #hv-rng-info { font-size: 11.5px; }
}

/* Erittäin kapeat näytöt (≤ 380px / iPhone SE) */
@media (max-width: 380px) {
  .ov-content { padding: 10px; }
  .db-cards { grid-template-columns: 1fr; }   /* 1-sarake jos näyttö liian kapea */
  .db-card .v { font-size: 17px; }
  .omv-supp { grid-template-columns: 1fr; }
  .hv-kpis { grid-template-columns: 1fr; }
  .hv-months { grid-template-columns: 1fr 1fr; }
  .ev-chip { padding: 0 10px; height: 36px; }
}

/* ============================================================
   Mobiili — taulukot KORTTILAYOUTIIN (Omat vedot + EV-rivit)
   ============================================================ */
@media (max-width: 768px) {

  /* === +EV-rivit kortteina (CSS Grid: 4 riviä) === */
  /* Markup-järjestys: ev-ico, ev-rc-head, ev-rc-mkt, ev-rc-odds, ev-edge, ev-stake, ev-rc-act
     Grid-area:t pakottavat oikean visuaalisen järjestyksen riippumatta DOM-järjestyksestä. */
  .ev-row {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) auto !important;
    grid-template-areas:
      "icon head edge"
      "mkt  mkt  mkt"
      "odds odds stake"
      "act  act  act" !important;
    gap: 8px 10px !important;
    align-items: center !important;
    padding: 12px !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    margin-bottom: 8px !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    width: 100% !important;
    position: static !important;
  }
  /* Mobiili-zebra: joka toinen kortti hieman vaaleammalla */
  .ev-row:nth-child(even) {
    background: rgba(255,255,255,.028) !important;
  }
  .ev-row .ev-ico {
    grid-area: icon !important;
    position: static !important;
    width: 38px !important; height: 38px !important;
    border-radius: 9px;
  }
  .ev-row .ev-rc-head {
    grid-area: head !important;
    padding: 0 !important; min-width: 0;
  }
  .ev-row .ev-match {
    font-size: 13.5px; font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .ev-row .ev-league {
    font-size: 11px; color: var(--dim); margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .ev-row .ev-edge {
    grid-area: edge !important;
    justify-self: end !important;
    position: static !important;
    padding: 7px 11px !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    border-radius: 8px !important;
    white-space: nowrap;
    letter-spacing: -.02em;
    line-height: 1;
    /* Kirkas täytetty pilli — kontrasti tummalla taustalla */
    background: linear-gradient(135deg, #10b981, #84cc16) !important;
    color: #04130c !important;
    box-shadow: 0 2px 8px rgba(16,185,129,.22);
  }
  .ev-row .ev-edge.lo {
    background: linear-gradient(135deg, #84cc16, #facc15) !important;
    color: #1a2906 !important;
  }
  .ev-row .ev-edge.hi {
    background: linear-gradient(135deg, #10b981, #34d399) !important;
    color: #04130c !important;
  }
  /* Korkean edgen ⚠ -merkki */
  .ev-row .ev-edge .ev-warn {
    margin-right: 4px;
    color: #fbbf24;
    text-shadow: 0 0 6px rgba(251,191,36,.4);
  }
  /* Rivi 2: markkinatieto koko leveys */
  .ev-row .ev-rc-mkt {
    grid-area: mkt !important;
    padding: 6px 0 0 0 !important;
    border-top: 1px dashed var(--border);
    min-width: 0;
  }
  .ev-row .ev-sel {
    font-size: 13px; font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .ev-row .ev-mkt { font-size: 10.5px; color: var(--dim); margin-top: 1px; }
  /* Rivi 3: kerroin vasen, panos oikea */
  .ev-row .ev-rc-odds {
    grid-area: odds !important;
    padding: 0 !important;
    display: flex !important; align-items: baseline !important; gap: 10px;
    text-align: left;
  }
  /* Kerroin pienemmäksi — edge on päätösinfo, ei kerroin */
  .ev-row .ev-rc-odds .o { font-size: 15px; font-weight: 800; color: var(--text); }
  .ev-row .ev-rc-odds .f { font-size: 10.5px; margin-top: 0; color: var(--dim); font-weight: 600; }
  .ev-row .ev-stake {
    grid-area: stake !important;
    padding: 0 !important; text-align: right;
    font-size: 13px; font-weight: 800;
  }
  .ev-row .ev-stake .lbl {
    display: inline-block; margin-right: 6px;
    font-size: 9.5px; color: var(--dim); font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase;
  }
  /* Rivi 4: napit + toimisto */
  .ev-row .ev-rc-act {
    grid-area: act !important;
    padding: 8px 0 0 0 !important;
    border-top: 1px solid var(--border);
    width: 100%;
  }
  .ev-row .ev-act {
    display: flex !important; flex-direction: row !important;
    gap: 8px; width: 100%; align-items: center;
  }
  /* 2 yhtä leveää nappia — Tallenna + Avaa Bookmaker */
  .ev-row .ev-actbtns { display: flex; flex: 1; gap: 8px; width: 100%; }
  .ev-row .ev-add {
    flex: 1; min-width: 0; height: 44px; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    font-size: 13px; font-weight: 800; padding: 0 10px;
  }
  .ev-row .ev-add svg { width: 16px; height: 16px; }
  .ev-row .ev-add .ev-add-lbl {
    display: inline;
    font-weight: 800;
    letter-spacing: -.01em;
  }
  .ev-row .ev-open {
    flex: 1; height: 44px; font-size: 13px; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    font-weight: 800;
  }
  .ev-row .ev-open[disabled] {
    opacity: .4; cursor: not-allowed;
  }
  .ev-row .ev-open-arr { font-size: 14px; opacity: .8; }
  /* Bookmaker-tekstistä on jo info Avaa-napissa → piilota mobiilissa */
  .ev-row .ev-book { display: none !important; }
  /* Urgency- ja korkean edgen pillit */
  .ev-row .ev-match .ev-urgent {
    display: inline-block; margin-left: 8px;
    font-size: 10px; font-weight: 800;
    background: rgba(239,68,68,.18); color: #fca5a5;
    padding: 2px 7px; border-radius: 5px;
    letter-spacing: .04em; text-transform: uppercase;
    vertical-align: middle;
  }
  .ev-row .ev-match .ev-soon {
    display: inline-block; margin-left: 8px;
    font-size: 10px; font-weight: 800;
    background: rgba(245,158,11,.18); color: #fcd34d;
    padding: 2px 7px; border-radius: 5px;
    letter-spacing: .04em; text-transform: uppercase;
    vertical-align: middle;
  }
  /* Sport-ikoni värilliseen taustaan — selvempi */
  .ev-row .ev-ico {
    background: rgba(255,255,255,.04);
    border: 1px solid var(--border);
  }

  /* === Omat vedot — Avoimet (omv-to) ja Ratkaistut (omv-td-tbl) KORTTEINA === */
  .omv-tw { overflow-x: visible !important; }
  .omv-tbl, .omv-to, .omv-td-tbl {
    min-width: 0 !important;
    width: 100% !important;
    table-layout: auto !important;
  }
  .omv-tbl, .omv-tbl thead, .omv-tbl tbody,
  .omv-tbl tr, .omv-tbl td, .omv-tbl th {
    display: block; width: 100%;
    box-sizing: border-box;
  }
  /* Tyhjennä alkuperäisten taulukoiden colspan-leveyssäännöt */
  .omv-to th:nth-child(n), .omv-to td:nth-child(n),
  .omv-td-tbl th:nth-child(n), .omv-td-tbl td:nth-child(n) { width: auto !important; }
  .omv-tbl thead { display: none; }

  /* Jokainen rivi (TR) on nyt kortti */
  .omv-tbl tbody tr {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin: 0 0 8px 0;
    padding: 12px 13px;
    position: relative;
  }
  .omv-orow.live { border-left: 4px solid var(--red); padding-left: 14px; }
  .omv-orow.soon { border-left: 4px solid var(--amber); padding-left: 14px; }

  .omv-tbl tbody td {
    padding: 4px 0;
    border-top: none;
    text-align: left !important;
    font-size: 12.5px;
  }
  /* Päivä-sarake ylhäällä rivissä Ottelu-tekstin kanssa */
  .omv-orow td.omv-day,
  .omv-drow td.omv-day {
    display: inline-block; width: auto;
    margin-right: 12px;
    padding: 0; vertical-align: top;
  }
  .omv-day .d { font-size: 13px; }
  .omv-day .t { font-size: 10.5px; }

  /* Ottelu otsikkomaisesti */
  .omv-orow td.omv-match,
  .omv-drow td.omv-match {
    display: block; width: auto;
    padding: 0 0 6px 0;
    overflow: visible; white-space: normal;
  }
  .omv-match .nm { font-size: 14px; font-weight: 700; line-height: 1.3; }
  .omv-match .st { margin-top: 4px; }

  /* Markkina */
  .omv-tbl td.omv-mk {
    color: var(--muted); margin: 4px 0;
  }
  .omv-tbl td.omv-mk::before { content: "Markkina: "; color: var(--dim); font-weight: 600; }

  /* Kerroin */
  .omv-tbl td.omv-od {
    display: inline-block; width: auto; padding-right: 14px;
    font-size: 15px;
  }
  .omv-tbl td.omv-od::before { content: "Kerroin: "; color: var(--dim); font-size: 11px; font-weight: 600; margin-right: 4px; }

  /* Panos & Kelly-rivit inline */
  .omv-tbl td.omv-num {
    display: inline-block; width: auto;
    margin-right: 14px;
    padding: 4px 0;
  }
  .omv-num .u { font-size: 13px; }
  .omv-num .e { font-size: 10.5px; }

  /* V/H/P-napit täysleveä rivi */
  .omv-orow td:last-child {
    display: block; padding-top: 10px; margin-top: 8px;
    border-top: 1px solid var(--border); text-align: center !important;
  }
  .omv-vhp { gap: 8px; justify-content: stretch; }
  .omv-vhp button { flex: 1; height: 38px; font-size: 13px; }

  /* Tulos-chip (ratkaistut) inline matchin alla */
  .omv-drow td:nth-child(2) {
    display: inline-block; width: auto; padding: 2px 0 6px 0;
  }
  /* CLV ja P/L inline */
  .omv-drow td:nth-child(7),
  .omv-drow td:nth-child(8) {
    display: inline-block; width: auto; margin-right: 14px; padding: 4px 0;
  }
  .omv-drow td:nth-child(7)::before { content: "CLV: "; color: var(--dim); font-size: 11px; font-weight: 600; margin-right: 4px; }
  .omv-drow td:nth-child(8)::before { content: "P/L: "; color: var(--dim); font-size: 11px; font-weight: 600; margin-right: 4px; }
  .omv-pl { display: inline; }
  .omv-pl .u { display: inline; font-size: 13px; }
  .omv-pl .s { display: inline; font-size: 11px; margin-left: 6px; }

  /* Tools-napit (edit/del) ylä-/sivuasento */
  .omv-drow td:last-child {
    display: block; padding-top: 10px; margin-top: 6px;
    border-top: 1px solid var(--border);
  }
  .omv-tools { justify-content: flex-end; gap: 8px; }
  .omv-tools button { width: 36px; height: 36px; }

  /* Expanded-detail-rivit pysyvät */
  .omv-odetail td { padding: 0; border-top: none; background: transparent; }
  .omv-odetail .omv-detgrid {
    grid-template-columns: 1fr 1fr; padding: 12px 0 0 0;
    border-top: 1px solid var(--border); margin-top: 8px;
    gap: 10px 14px;
  }

  /* Panel-head paddingit hieman pienempiä */
  .omv-phead { padding: 11px 13px; }
  .omv-phead h2 { font-size: 13px; }
}

/* ============================================================
   Mobiili — yleissäännöt (UI-UUDISTUS-TOTEUTUSOHJE.md mukaisesti)
   • Kosketuskoot ≥ 44 px
   • "Merkitse pelatuksi" -modaali full-screen
   • Ei vaakascrollia missään
   ============================================================ */
@media (max-width: 768px) {
  /* Kosketuskoot — V/H/P, +-napit, dropdown-vaihtoehdot ≥ 44 px */
  .omv-vhp button { min-height: 44px; height: 44px; min-width: 44px; }
  .ev-add { min-width: 44px; min-height: 44px; }
  .ev-open { min-height: 44px; }
  .omv-tools button { min-width: 40px; min-height: 40px; }
  .ev-dd-opt, .db-dd-opt { min-height: 40px; }

  /* Estä vaakascroll vain juuritasoilla — EI lapsielementeissä jotka voivat
     käyttää absoluuttista positiointia (esim. .ev-row jossa .ev-ico, .ev-edge) */
  .ov-app, .ov-main { max-width: 100%; overflow-x: hidden; }
  .ov-content, .db-page, .ev-page, .omv-page, .hv-page { max-width: 100%; }

  /* "Merkitse pelatuksi" -modaali full-screen mobiilissa */
  #played-bet-modal {
    padding: 0 !important;
  }
  #played-bet-modal > div {
    border-radius: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow-y: auto;
  }

  /* Yleiset modaalit: täysleveä, kevyempi padding */
  .modal-overlay { padding: 0 !important; align-items: stretch !important; }
  .modal-card {
    border-radius: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100vh;
    padding: 18px !important;
  }
}

/* ============================================================
   Mobiili — Avoimet/Ratkaistut korttilista (bv-*)
   Lähde: mockup-avoimet-vedot-mobiili-v2.html
   ============================================================ */
.bv-list { display: flex; flex-direction: column; gap: 8px; padding: 0; }

.bv-row {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: opacity .16s;
}
.bv-row[data-status="live"] { border-color: rgba(239,68,68,.30); }
.bv-row[data-status="soon"] { border-color: rgba(245,158,11,.32); }

.bv-edge {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3.5px; background: var(--border-2); z-index: 1;
}
.bv-row[data-status="live"] .bv-edge { background: var(--red); }
.bv-row[data-status="soon"] .bv-edge { background: var(--amber); }
.bv-row.done { opacity: .65; }
.bv-row.done[data-result="V"] .bv-edge { background: var(--green); }
.bv-row.done[data-result="H"] .bv-edge { background: var(--red); }
.bv-row.done[data-result="P"] .bv-edge { background: var(--amber); }

.bv-rowmain {
  display: flex; align-items: center; gap: 11px; width: 100%;
  background: none; border: none; padding: 10px 12px 10px 16px;
  cursor: pointer; text-align: left; font-family: inherit;
  min-height: 64px;
}
.bv-row.open .bv-rowmain { border-bottom: 1px solid var(--border); }

.bv-sport {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--surface-2); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.bv-sport svg { width: 18px; height: 18px; }

.bv-rowmid { flex: 1; min-width: 0; }
.bv-rname {
  font-size: 13.5px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: block; line-height: 1.3;
}
.bv-rowsub { display: flex; align-items: center; gap: 7px; margin-top: 3px; flex-wrap: wrap; }
.bv-status {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 6px;
  white-space: nowrap;
}
.bv-status.live { color: #fca5a5; background: rgba(239,68,68,.15); }
.bv-status.soon { color: #fcd34d; background: rgba(245,158,11,.15); }
.bv-status.up   { color: var(--dim); background: rgba(255,255,255,.045); }
.bv-status .dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.bv-status.live .dot { background: var(--red); animation: bvpulse 1.4s infinite; }
.bv-status.soon .dot { background: var(--amber); }
.bv-status.up   .dot { background: var(--border-2); }
@keyframes bvpulse { 0%, 100% { opacity: 1 } 50% { opacity: .3 } }
.bv-rtime { font-size: 10.5px; color: var(--dim); font-weight: 600; }

.bv-rowright { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.bv-rodds {
  font-size: 16px; font-weight: 900; letter-spacing: -.02em;
  color: var(--text); text-align: right;
}
.bv-rodds span {
  display: block; font-size: 8.5px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--dim); margin-top: -1px;
}
.bv-rresult {
  display: none; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 800; padding: 4px 9px; border-radius: 7px;
}
.bv-row.done .bv-rodds { display: none; }
.bv-row.done .bv-rresult { display: inline-flex; }
.bv-row.done[data-result="V"] .bv-rresult { background: rgba(16,185,129,.16); color: var(--mint); }
.bv-row.done[data-result="H"] .bv-rresult { background: rgba(239,68,68,.16); color: #f87171; }
.bv-row.done[data-result="P"] .bv-rresult { background: rgba(245,158,11,.16); color: var(--amber); }

.bv-chev {
  width: 22px; height: 22px; color: var(--dim);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: transform .2s;
}
.bv-chev svg { width: 17px; height: 17px; }
.bv-row.open .bv-chev { transform: rotate(180deg); color: var(--mint); }

.bv-detail { display: none; padding: 10px 12px 12px 16px; }
.bv-row.open .bv-detail { display: block; }
.bv-mktline {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; padding: 8px 11px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 9px; margin-bottom: 8px;
}
.bv-mktline .lbl {
  font-size: 9px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--dim);
}
.bv-mktline .val { font-size: 13px; font-weight: 700; color: var(--text); }

.bv-stakes2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.bv-detcell {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 9px; padding: 9px 10px 10px;
  min-width: 0; text-align: center;
}
.bv-detcell .lbl {
  font-size: 9px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--dim); display: block;
}
.bv-detcell .val {
  font-size: 16px; font-weight: 800; color: var(--text);
  margin-top: 5px; display: block; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.bv-detcell .val.kelly { color: var(--mint); }
.bv-detcell .sub {
  font-size: 11px; font-weight: 500; color: var(--dim);
  display: block; margin-top: 2px; font-variant-numeric: tabular-nums;
}

.bv-resolve { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 7px; }
.bv-res {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 44px; border-radius: 10px;
  border: 1px solid var(--border-2); background: var(--surface-2);
  font-size: 12.5px; font-weight: 700; color: var(--muted);
  cursor: pointer; transition: .12s; font-family: inherit;
}
.bv-res .rb {
  width: 22px; height: 22px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 900; flex-shrink: 0;
}
.bv-res.w .rb { background: rgba(16,185,129,.2); color: var(--mint); }
.bv-res.l .rb { background: rgba(239,68,68,.2); color: #f87171; }
.bv-res.p .rb { background: rgba(245,158,11,.2); color: var(--amber); }
.bv-res.w:active { border-color: var(--green); background: rgba(16,185,129,.13); color: var(--text); }
.bv-res.l:active { border-color: var(--red);   background: rgba(239,68,68,.13); color: var(--text); }
.bv-res.p:active { border-color: var(--amber); background: rgba(245,158,11,.13); color: var(--text); }

.bv-resolved {
  display: none; align-items: center; gap: 9px;
  height: 44px; padding: 0 11px; border-radius: 10px;
}
.bv-row.done .bv-resolve { display: none; }
.bv-row.done .bv-resolved { display: flex; }
.bv-resolved .rdot {
  width: 22px; height: 22px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 900; flex-shrink: 0;
}
.bv-resolved .rtxt { font-size: 12.5px; font-weight: 700; }
.bv-resolved[data-r="V"] { background: rgba(16,185,129,.12); }
.bv-resolved[data-r="V"] .rdot { background: var(--green); color: #04130c; }
.bv-resolved[data-r="V"] .rtxt { color: var(--mint); }
.bv-resolved[data-r="H"] { background: rgba(239,68,68,.12); }
.bv-resolved[data-r="H"] .rdot { background: var(--red); color: #fff; }
.bv-resolved[data-r="H"] .rtxt { color: #f87171; }
.bv-resolved[data-r="P"] { background: rgba(245,158,11,.12); }
.bv-resolved[data-r="P"] .rdot { background: var(--amber); color: #04130c; }
.bv-resolved[data-r="P"] .rtxt { color: var(--amber); }

.bv-secthead {
  display: flex; align-items: center; gap: 9px; padding: 8px 4px 10px;
  margin-top: 18px;
}
.bv-secthead svg { width: 16px; height: 16px; color: var(--mint); }
.bv-secthead h2 { font-size: 14px; font-weight: 700; margin: 0; }
.bv-secthead .pc {
  font-size: 11px; font-weight: 800; color: var(--mint);
  background: rgba(16,185,129,.13); padding: 2px 8px; border-radius: 20px;
}
.bv-secthead .pright { margin-left: auto; font-size: 11.5px; color: var(--dim); font-weight: 600; }

/* Omat vedot — näkymänvaihto desktop ↔ mobiili */
.omv-mobile-only { display: none; }
@media (max-width: 768px) {
  .omv-desktop-only { display: none; }
  .omv-mobile-only { display: block; }
}

/* ============================================================
   AGGRESSIIVINEN anti-overflow-suoja mobiilille — viimeinen oljenkorsi
   ============================================================ */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100vw !important;
  }
  /* Suora-lapset ja syvät lapset eivät saa puhkaista viewportia */
  body > *, .ov-main > *, .ov-content > *,
  .ov-main, .ov-content,
  .db-page, .ev-page, .omv-page, .hv-page,
  .db-page > *, .ev-page > *, .omv-page > *, .hv-page > *,
  .ev-panel, .omv-panel, .db-panel, .db-hero, .omv-bank, .omv-stats,
  .hv-cal, .hv-filter, .hv-kpis, .hv-chart-panel,
  .bv-list, .bv-row, .bv-rowmain, .bv-detail {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* SVG-grafiikat skaalautuvat aina kontainerinsa mukaan */
  svg { max-width: 100%; }
  /* Pitkät tekstit eivät puhkaise containeria */
  .ev-match, .omv-match, .bv-rname,
  .db-omatch, .db-omkt, .ev-league, .ev-sel {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }
}

/* ============================================================
   Merkitse pelatuksi -modaali (pb-*) — mockup-ev-valikko-mobiili.html
   ============================================================ */
.pb-overlay{position:fixed;inset:0;background:rgba(5,8,14,.76);z-index:10000;
  display:flex;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(4px)}
.pb-modal{width:100%;max-width:440px;background:var(--surface);border:1px solid var(--border-2);
  border-radius:15px;box-shadow:0 30px 70px rgba(0,0,0,.6);overflow:hidden;max-height:92vh;overflow-y:auto}
.pb-head{display:flex;align-items:flex-start;gap:12px;padding:16px 18px 14px;border-bottom:1px solid var(--border)}
.pb-tag{font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--mint)}
.pb-title{font-size:17px;font-weight:800;letter-spacing:-.02em;margin-top:5px;line-height:1.25;color:var(--text)}
.pb-close{margin-left:auto;width:28px;height:28px;border:none;background:transparent;
  color:var(--dim);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:6px}
.pb-close:hover{color:var(--text);background:rgba(255,255,255,.05)}
.pb-close svg{width:17px;height:17px}
.pb-info{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:7px}
.pb-ir{font-size:13px;font-weight:600;line-height:1.45}
.pb-ir .il{color:var(--dim);font-weight:600}
.pb-ir .iv{color:var(--text);font-weight:700}
.pb-ir .iv.ev{color:var(--mint)}
.pb-ir .iv small{font-weight:500;color:var(--dim);font-size:11.5px;margin-left:4px}
.pb-form{padding:16px 18px 4px}
.pb-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pb-field{margin-bottom:13px}
.pb-field label{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--dim);
  display:block;margin-bottom:6px}
.pb-field input,.pb-field textarea{width:100%;background:var(--bg);border:1px solid var(--border-2);color:var(--text);
  font-family:inherit;font-size:14px;font-weight:700;padding:10px 12px;border-radius:9px;outline:none;
  box-sizing:border-box}
.pb-field input:focus,.pb-field textarea:focus{border-color:var(--green)}
.pb-field textarea{font-weight:500;font-size:13px;resize:none;height:60px}
.pb-help{font-size:11.5px;color:var(--dim);font-weight:500;margin:-3px 0 14px;line-height:1.55}
.pb-help b{color:var(--mint);font-weight:700}
.pb-foot{display:flex;gap:10px;padding:14px 0 18px;border-top:1px solid var(--border);margin-top:8px}
.pb-btn{font-family:inherit;font-size:13px;font-weight:700;border-radius:10px;padding:12px;cursor:pointer;transition:.12s;
  display:flex;align-items:center;justify-content:center;gap:7px;border:none}
.pb-btn.ghost{flex:0 0 33%;background:transparent;border:1px solid var(--border-2);color:var(--muted)}
.pb-btn.ghost:hover{color:var(--text);border-color:var(--muted)}
.pb-btn.save{flex:1;background:var(--green);color:#04130c}
.pb-btn.save:hover{background:var(--mint)}
.pb-btn.save svg{width:15px;height:15px}

@media(max-width:480px){
  .pb-overlay{padding:0;align-items:flex-end}
  .pb-modal{max-width:100%;border-radius:18px 18px 0 0;max-height:90vh}
}

/* === V2: Merkitse pelatuksi -modaali facelift === */
.pb-v2 .pb-form { padding: 14px 18px 6px; }
.pb-v2 .pb-hero {
  background: linear-gradient(135deg, rgba(16,185,129,.07), transparent);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.pb-v2 .pb-hero-top {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.pb-v2 .pb-edge {
  background: rgba(16,185,129,.13);
  border: 1px solid rgba(16,185,129,.32);
  color: var(--mint);
  padding: 4px 9px; border-radius: 6px;
  font-size: 12.5px; font-weight: 900;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.pb-v2 .pb-mkt-tag {
  font-size: 10px; font-weight: 800;
  color: var(--dim);
  letter-spacing: .07em; text-transform: uppercase;
}
.pb-v2 .pb-hero-pick {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 15px; font-weight: 800;
  color: var(--text);
  margin-bottom: 4px;
  letter-spacing: -.01em;
}
.pb-v2 .pb-pick-odds {
  color: var(--mint);
  font-size: 16px; font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  margin-left: auto;
}
.pb-v2 .pb-hero-meta {
  font-size: 11px; color: var(--dim); font-weight: 600;
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
}
.pb-v2 .pb-hero-meta b { color: var(--muted); font-weight: 800; }
.pb-v2 .pb-hero-meta .sep { opacity: .5; margin: 0 4px; }

/* Stake-kortti: € ensisijainen, u johdettu */
.pb-v2 .pb-stake-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.pb-v2 .pb-stake-card .pb-field { margin-bottom: 0; }
.pb-v2 .pb-field.with-suff { position: relative; }
.pb-v2 .pb-field.with-suff input { padding-right: 38px; }
.pb-v2 .pb-suff {
  position: absolute; right: 12px;
  bottom: 11px;
  font-size: 12px; color: var(--dim); font-weight: 800;
  letter-spacing: .03em; text-transform: uppercase;
  pointer-events: none;
}
.pb-v2 .pb-field.primary input {
  font-size: 17px;
  border-color: rgba(16,185,129,.32);
  background: var(--bg);
}
.pb-v2 .pb-field.primary input:focus {
  border-color: var(--mint);
  box-shadow: 0 0 0 3px rgba(16,185,129,.12);
}

/* Reco-rivi (klikkaa = Käytä Kelly-suositus) */
.pb-v2 .pb-reco {
  margin-top: 10px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  background: rgba(16,185,129,.06);
  border: 1px dashed rgba(16,185,129,.32);
  border-radius: 8px;
  padding: 9px 12px;
  cursor: pointer;
  transition: background .12s;
}
.pb-v2 .pb-reco:hover { background: rgba(16,185,129,.12); }
.pb-v2 .pb-reco-l {
  font-size: 11.5px; color: var(--dim); font-weight: 700;
}
.pb-v2 .pb-reco-l b { color: var(--text); font-weight: 800; }
.pb-v2 .pb-reco-apply {
  font-size: 11px; color: var(--mint); font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
  flex-shrink: 0;
}

/* Kerroin omalla rivillä, mutta kompakti */
.pb-v2 .pb-odds-row { max-width: 50%; margin-bottom: 12px; }

/* Kerroin-muutos collapsible (oletuksena piilossa, näkyy vain klikkauksen jälkeen) */
.pb-v2 .pb-odds-details {
  margin: 0 0 14px;
  background: var(--surface-2, #1c2231);
  border: 1px solid var(--border);
  border-radius: 9px;
  overflow: hidden;
}
.pb-v2 .pb-odds-details summary {
  padding: 10px 14px;
  font-size: 12px; font-weight: 600;
  color: var(--text-dim);
  cursor: pointer;
  list-style: none;
  display: flex; align-items: center;
}
.pb-v2 .pb-odds-details summary::-webkit-details-marker { display: none; }
.pb-v2 .pb-odds-details summary::before {
  content: '▸';
  margin-right: 8px;
  color: var(--dim);
  font-size: 10px;
}
.pb-v2 .pb-odds-details[open] summary::before { content: '▾'; }
.pb-v2 .pb-odds-details summary:hover { color: var(--text); }
.pb-v2 .pb-odds-details[open] summary { border-bottom: 1px solid var(--border); }
.pb-v2 .pb-odds-details .pb-odds-row {
  margin: 12px 14px 14px;
  max-width: none;
}

/* Mini-vihje yksiköstä */
.pb-v2 .pb-help-mini {
  font-size: 10.5px; color: var(--dim); font-weight: 600;
  margin: 6px 0 14px;
  line-height: 1.4;
}
.pb-v2 .pb-help-mini b { color: var(--muted); font-weight: 800; }

/* Optional-label */
.pb-v2 .pb-field label .opt {
  font-weight: 600; text-transform: none; letter-spacing: 0;
  color: var(--dim);
}

/* Foot: ei border-top kun stake-card antaa jo erotuksen */
.pb-v2 .pb-foot { border-top: none; padding: 0 0 18px; margin-top: 6px; }

/* Omat vedot — Tilastot-paneeli mobiilissa (kuvan mukainen) */
@media (max-width: 880px) {
  /* Tilastot-paneelin otsikko: counts oikealla pienempänä */
  .omv-stats-head { padding: 12px 14px; gap: 9px; }
  .omv-stats-head svg.si { width: 14px; height: 14px; }
  .omv-stats-head h2 { font-size: 13px; }
  .omv-stats-head .sum { font-size: 11px; text-align: right; line-height: 1.35; }
  .omv-stats-body { padding: 0 14px 14px; }

  /* HERO-luvut: TUOTTO yksin koko leveys ja iso, muut 2-saraketta */
  .omv-hero {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 9px !important;
    margin-bottom: 10px !important;
  }
  .omv-hero .omv-herocard:first-child {
    grid-column: 1 / -1;     /* Tuotto P/L spans full row */
  }
  .omv-herocard {
    padding: 13px 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 11px;
  }
  .omv-herocard .k { font-size: 11px; }
  .omv-herocard .v { font-size: 26px; margin-top: 6px; }
  .omv-herocard:first-child .v { font-size: 30px; }   /* Tuotto suurin */
  .omv-herocard .s { font-size: 11px; margin-top: 5px; }

  /* Tukikortit (Vetoja yht., Ratkaistut, V·H·P, Voitto%, Panostettu) — pystylista */
  .omv-supp {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
  }
  .omv-suppi {
    background: var(--surface);
    padding: 11px 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px;
  }
  .omv-suppi .k {
    font-size: 12.5px !important;
    color: var(--muted) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 600 !important;
    margin: 0 !important;
  }
  .omv-suppi .v {
    font-size: 13.5px !important;
    margin: 0 !important;
    text-align: right;
    color: var(--text) !important;
  }
}

/* ============================================================
   Lisää / Muokkaa veto -modaali + FAB (mockup-lisaa-veto-tyopoyta.html)
   ============================================================ */
.bv-modal-overlay {
  position: fixed; inset: 0; background: rgba(5,8,14,.78);
  display: flex; align-items: center; justify-content: center;
  padding: 30px 16px; z-index: 9990; backdrop-filter: blur(4px);
}
.bv-modal {
  width: 100%; max-width: 560px;
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: 16px; box-shadow: 0 40px 100px rgba(0,0,0,.6);
  overflow: hidden; display: flex; flex-direction: column; max-height: 92vh;
}
.bv-mhead { display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 24px 16px; border-bottom: 1px solid var(--border); }
.bv-mtag { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mint); }
.bv-mtitle { font-size: 18px; font-weight: 800; letter-spacing: -.02em; margin-top: 4px; line-height: 1.25; color: var(--text); }
.bv-msub { font-size: 12px; color: var(--dim); font-weight: 500; margin-top: 2px; }
.bv-mx { margin-left: auto; width: 34px; height: 34px; border-radius: 9px; border: none;
  background: transparent; color: var(--dim); cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bv-mx:hover { color: var(--text); background: var(--surface-2); }
.bv-mx svg { width: 18px; height: 18px; }
.bv-mbody { padding: 18px 24px 8px; overflow-y: auto; }
.bv-sect { font-size: 10px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--dim); margin: 4px 0 10px; }
.bv-sect:not(:first-child) { margin-top: 18px; }
.bv-mf { margin-bottom: 14px; }
.bv-mf label { font-size: 10px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--dim); display: block; margin-bottom: 6px; }
.bv-mf input, .bv-mf textarea, .bv-mf select {
  width: 100%; background: var(--bg); border: 1px solid var(--border-2);
  color: var(--text); font-family: inherit; font-size: 14px; font-weight: 700;
  padding: 11px 12px; border-radius: 10px; outline: none; letter-spacing: -.01em;
  box-sizing: border-box;
}
.bv-mf input:focus, .bv-mf textarea:focus, .bv-mf select:focus { border-color: var(--green); }
.bv-mf textarea { font-weight: 500; font-size: 13px; resize: none; height: 64px; }
.bv-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bv-row3 { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 10px; }
.bv-help { font-size: 12px; color: var(--dim); font-weight: 500;
  margin: -6px 0 14px; line-height: 1.5; }
.bv-help b { color: var(--mint); font-weight: 700; }

.bv-statgrid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 8px; }
.bv-stbtn {
  height: 46px; border-radius: 11px;
  border: 1px solid var(--border-2); background: var(--surface-2);
  color: var(--muted); font-family: inherit; font-size: 12.5px; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  gap: 7px; transition: .12s;
}
.bv-stbtn .bb {
  width: 20px; height: 20px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 900; flex-shrink: 0;
}
.bv-stbtn.o .bb { background: rgba(180,186,203,.16); color: var(--muted); }
.bv-stbtn.w .bb { background: rgba(16,185,129,.2); color: var(--mint); }
.bv-stbtn.l .bb { background: rgba(239,68,68,.2); color: #f87171; }
.bv-stbtn.p .bb { background: rgba(245,158,11,.2); color: var(--amber); }
.bv-stbtn.active { background: rgba(16,185,129,.1); color: var(--text); }
.bv-stbtn.active.o { border-color: var(--muted); }
.bv-stbtn.active.w { border-color: var(--green); }
.bv-stbtn.active.l { border-color: var(--red); }
.bv-stbtn.active.p { border-color: var(--amber); }

.bv-mfoot { display: flex; gap: 10px; padding: 14px 24px 20px;
  border-top: 1px solid var(--border); align-items: center; flex-wrap: wrap; }
.bv-mbtn { font-family: inherit; font-size: 13.5px; font-weight: 800;
  border-radius: 11px; padding: 13px 18px; cursor: pointer;
  transition: .12s; letter-spacing: -.01em; border: none;
  display: inline-flex; align-items: center; gap: 8px;
}
.bv-mbtn.delete {
  background: transparent; border: 1px solid rgba(239,68,68,.36);
  color: #fca5a5; margin-right: auto;
}
.bv-mbtn.delete:hover { background: rgba(239,68,68,.08); }
.bv-mbtn.delete svg { width: 15px; height: 15px; }
.bv-mbtn.ghost { background: transparent; border: 1px solid var(--border-2); color: var(--muted); }
.bv-mbtn.ghost:hover { color: var(--text); border-color: var(--muted); }
.bv-mbtn.save { background: var(--green); color: #04130c; }
.bv-mbtn.save:hover { background: var(--mint); }
.bv-mbtn.save svg { width: 15px; height: 15px; }

/* Mobiili: bottom-sheet */
@media (max-width: 768px) {
  .bv-modal-overlay { padding: 0; align-items: flex-end; }
  .bv-modal { max-width: 100%; max-height: 92vh;
    border-radius: 18px 18px 0 0; border-bottom: none; }
  .bv-mfoot { flex-direction: column; align-items: stretch; }
  .bv-mfoot .bv-mbtn { width: 100%; justify-content: center; margin: 0; }
}

/* Floating Action Button (mobiili) */
.bv-fab {
  position: fixed; right: 16px; bottom: 80px;
  width: 56px; height: 56px; border-radius: 28px;
  background: linear-gradient(135deg, var(--green), var(--accent));
  color: #04130c; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(16,185,129,.45), 0 0 0 1px rgba(16,185,129,.3);
  z-index: 100; transition: transform .12s;
}
.bv-fab:active { transform: scale(.94); }
.bv-fab svg { width: 26px; height: 26px; stroke-width: 2.6; }

@media (min-width: 769px) {
  .bv-fab { display: none; }
}

/* Lisää veto -nappi desktop-toolbarissa */
.omv-add-btn {
  display: inline-flex; align-items: center; gap: 7px; height: 38px;
  padding: 0 16px; border-radius: 10px;
  background: linear-gradient(135deg, var(--green), var(--accent));
  color: #04130c; border: none; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 800;
  box-shadow: 0 8px 22px rgba(16,185,129,.28);
  transition: .13s;
}
.omv-add-btn:hover { filter: brightness(1.08); }
.omv-add-btn svg { width: 15px; height: 15px; stroke-width: 2.8; }

@media (max-width: 768px) {
  .omv-add-btn { display: none; }    /* mobile: vain FAB */
}

/* ============================================================
   Lisää veto -kortti + Segment-tabit + Rivin toiminta-ikonit
   (mockup-lisaa-veto-tyopoyta.html + mockup-vedot-mobiili-v3.html)
   ============================================================ */
.bv-addcard-row {
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 14px 18px; margin: 14px 0 18px;
  background: linear-gradient(135deg, rgba(16,185,129,.13), rgba(132,204,22,.08));
  border: 1px solid rgba(16,185,129,.35); border-radius: 13px;
  cursor: pointer; transition: .15s; color: var(--text);
  font-family: inherit; text-align: left;
}
.bv-addcard-row:hover {
  border-color: var(--green);
  background: linear-gradient(135deg, rgba(16,185,129,.18), rgba(132,204,22,.11));
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(16,185,129,.18);
}
.bv-addcard-row:active { transform: translateY(0); }
.bv-addcard-row .plus {
  width: 42px; height: 42px; border-radius: 11px;
  background: linear-gradient(135deg, var(--green), #84cc16);
  color: #04130c; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(16,185,129,.32);
}
.bv-addcard-row .plus svg { width: 22px; height: 22px; stroke: #04130c; stroke-width: 2.8; }
.bv-addcard-row .ac-txt { flex: 1; min-width: 0; }
.bv-addcard-row .ac-t {
  display: block; font-size: 14.5px; font-weight: 800;
  color: var(--text); letter-spacing: -.01em;
}
.bv-addcard-row .ac-s {
  display: block; font-size: 12.5px; color: var(--muted);
  font-weight: 500; margin-top: 2px; line-height: 1.4;
}
.bv-addcard-row .ac-cta {
  display: flex; align-items: center; gap: 5px;
  color: var(--mint); font-size: 12.5px; font-weight: 800; flex-shrink: 0;
}
.bv-addcard-row .ac-cta svg { width: 14px; height: 14px; }

/* Mobiili: tiiviimpi yhden rivin ulkoasu */
@media (max-width: 768px) {
  .bv-addcard-row {
    padding: 12px 14px; gap: 11px;
    margin: 12px 0 14px;
  }
  .bv-addcard-row .plus { width: 38px; height: 38px; border-radius: 10px; }
  .bv-addcard-row .plus svg { width: 20px; height: 20px; }
  .bv-addcard-row .ac-t { font-size: 13.5px; }
  .bv-addcard-row .ac-s { font-size: 11.5px; }
  .bv-addcard-row .ac-cta-label { display: none; }
}

/* === Segment-tabit Avoimet/Ratkaistut === */
.bv-segtabs {
  display: flex; gap: 6px; padding: 4px; margin: 0 0 16px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 13px; width: max-content;
}
.bv-segtab {
  display: flex; align-items: center; gap: 9px;
  height: 36px; padding: 0 16px;
  background: transparent; border: none; border-radius: 9px;
  color: var(--dim); font-family: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer; transition: .15s; letter-spacing: -.01em;
}
.bv-segtab:hover:not(.active) { color: var(--muted); }
.bv-segtab.active { background: var(--surface-3); color: var(--text); }
.bv-segtab .pill {
  font-size: 11px; font-weight: 800; padding: 2px 8px;
  border-radius: 20px; background: var(--surface-3); color: var(--dim);
}
.bv-segtab.active .pill { background: rgba(16,185,129,.16); color: var(--mint); }

/* Mobiilissa täysleveä segment-control */
@media (max-width: 768px) {
  .bv-segtabs { width: 100%; }
  .bv-segtab { flex: 1; padding: 0 8px; }
}

/* === Rivin toiminta-ikonit (Muokkaa / Poista / Palauta) === */
.omv-rowtools {
  display: flex; gap: 6px; justify-content: flex-end;
}
.omv-iconbtn {
  width: 34px; height: 34px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--surface-2);
  color: var(--dim); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: .12s;
  flex-shrink: 0;
}
.omv-iconbtn:hover { color: var(--text); border-color: var(--green); }
.omv-iconbtn.danger:hover {
  color: #fca5a5; border-color: rgba(239,68,68,.45);
  background: rgba(239,68,68,.06);
}
.omv-iconbtn.undo:hover {
  color: var(--amber); border-color: rgba(245,158,11,.45);
  background: rgba(245,158,11,.06);
}
.omv-iconbtn svg { width: 16px; height: 16px; }

/* Mobiilissa rivin toiminnot näkyvät vain laajennetussa tilassa */
@media (max-width: 880px) {
  .omv-desktop-only .omv-rowtools { display: none; }
}

/* Piilota vanha FAB ja desktop-CTA jos sellaisia on jäljellä */
.bv-fab { display: none !important; }
.omv-add-btn { display: none !important; }

/* Min. Edge -dropdown korjattu mobiilissa — ei leikkaudu vasemmasta reunasta */
@media (max-width: 768px) {
  /* Ankkuroi vasemmasta reunasta (right:auto override) ja venytä koko viewportin levyiseksi */
  .db-dd-menu,
  .ev-dd-menu {
    left: 0 !important;
    right: auto !important;
    min-width: 0;
    width: max-content;
    max-width: calc(100vw - 32px);
  }
  /* Jos dropdown-trigger on lähellä oikeaa reunaa, käännä toiseen suuntaan */
  .db-dd.dd-flipright .db-dd-menu,
  .ev-dd.dd-flipright .ev-dd-menu {
    left: auto !important;
    right: 0 !important;
  }
}

/* Chart-mountin pehmeä fade — _dbBuildChart asettaa transition + opacity */
#dbChart, #hv-chart-svg-mount, .db-chart, .hv-chart-svg {
  transition: opacity .22s ease;
}
/* Segment-napit (Kelly/Flat) saavat pehmeän active-vaihdon */
.db-seg button, .hv-seg button {
  transition: background-color .15s ease, color .15s ease;
}

/* === Segment-tabit keskitettyinä + smooth animaatio === */
.bv-segtab {
  justify-content: center;   /* keskitä teksti */
  text-align: center;
}
.bv-segtab > * { pointer-events: none; }

/* Animaatio: vanhan listan fade-out + uuden fade-in */
.bv-list-fade {
  animation: bvListFade .22s ease;
}
@keyframes bvListFade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Segment-button hover/active sliding indicator */
.bv-segtab { transition: background-color .18s ease, color .18s ease; }

/* === Lisää/Muokkaa-modaalin overflow-fix === */
/* Sallitaan että inputit kutistuvat grid-rivissä ilman että puskee sivuttaisscrollia */
.bv-modal { box-sizing: border-box; }
.bv-mbody { overflow-x: hidden; }
.bv-mf { min-width: 0; }
.bv-mf input, .bv-mf select, .bv-mf textarea {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
/* Date/time inputtien natiivit min-widthit pakotetaan kuriin */
.bv-mf input[type="date"], .bv-mf input[type="time"] {
  min-width: 0;
  width: 100%;
}

/* Mobiilissa kaventaa row2 ja row3 grid-välejä */
@media (max-width: 480px) {
  .bv-row2 { gap: 8px !important; }
  .bv-row3 { grid-template-columns: 1fr 1fr 1fr !important; gap: 6px !important; }
  /* Pienempi padding kun tilaa vähän */
  .bv-mf input, .bv-mf select { padding: 10px 9px; font-size: 13.5px; }
  .bv-mhead { padding: 14px 16px 12px; }
  .bv-mbody { padding: 14px 16px 4px; }
  .bv-mfoot { padding: 12px 16px 16px; }
}

/* Extra-pienet näytöt: pinotaan stake-rivi */
@media (max-width: 360px) {
  .bv-row3 { grid-template-columns: 1fr 1fr !important; }
  .bv-row3 .bv-mf:first-child { grid-column: 1 / -1; }
}

/* === bv-tools: Muokkaa / Poista / Palauta -nappirivi laajennetun rivin alla === */
.bv-tools {
  display: flex; gap: 7px; margin-top: 8px;
  flex-wrap: wrap;
}
.bv-toolbtn {
  flex: 1; display: flex; align-items: center; justify-content: center;
  gap: 6px; height: 40px; padding: 0 10px;
  border-radius: 9px; border: 1px solid var(--border-2);
  background: transparent; color: var(--muted);
  font-family: inherit; font-size: 12px; font-weight: 700;
  cursor: pointer; transition: .12s; white-space: nowrap;
  min-width: 0;
}
.bv-toolbtn svg { width: 14px; height: 14px; flex-shrink: 0; }
.bv-toolbtn:hover, .bv-toolbtn:active { color: var(--text); border-color: var(--green); }
.bv-toolbtn.danger:hover, .bv-toolbtn.danger:active {
  color: #fca5a5; border-color: rgba(239,68,68,.5); background: rgba(239,68,68,.06);
}
.bv-toolbtn.undo:hover, .bv-toolbtn.undo:active {
  color: var(--amber); border-color: rgba(245,158,11,.5); background: rgba(245,158,11,.06);
}

/* Pienillä näytöillä Palauta avoimeksi -teksti voi olla pitkä → wrappaa */
@media (max-width: 380px) {
  .bv-toolbtn { font-size: 11.5px; padding: 0 8px; height: 38px; }
}

/* === Dashboard chart legend (P/L + CLV) — keskitetty chartin yläpuolelle === */
.db-chart-legend {
  display: flex; align-items: center; justify-content: center;
  gap: 18px; padding: 8px 14px 4px;
  font-size: 11px; font-weight: 700;
  color: var(--muted); letter-spacing: .02em;
}
.db-chart-legend .lg-item { display: inline-flex; align-items: center; gap: 6px; }
.db-chart-legend .lg-dot {
  width: 18px; height: 3px; border-radius: 2px; flex-shrink: 0;
}
.db-chart-legend .lg-dot.pnl { background: #22c55e; }
.db-chart-legend .lg-dot.clv {
  background: linear-gradient(90deg, #60a5fa 0 4px, transparent 4px 7px, #60a5fa 7px 11px, transparent 11px 14px, #60a5fa 14px 18px);
}

/* === Hero-ohjaimet: Min Edge dropdown + Kelly/Flat AINA samalla rivillä === */
.db-hero-ctrls {
  flex-wrap: nowrap !important;
  min-width: 0;
}
.db-hero-ctrls .db-dd { min-width: 0; flex-shrink: 1; }
.db-hero-ctrls .db-dd-trigger {
  max-width: 100%;
  overflow: hidden;
}
.db-hero-ctrls .db-dd-trigger > span:nth-child(2) {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0;
}
.db-hero-ctrls .db-seg { flex-shrink: 0; }

@media (max-width: 480px) {
  /* Erityisesti tiukoilla näytöillä — pakota dropdown kutistumaan jotta seg-napit mahtuvat */
  .db-hero-ctrls { gap: 6px; }
  .db-hero-ctrls .db-dd-trigger {
    padding: 0 7px 0 9px; height: 32px; font-size: 11.5px;
  }
  .db-hero-ctrls .db-dd-trigger .lb { font-size: 8.5px; }
  .db-hero-ctrls .db-seg button { font-size: 11.5px; padding: 6px 9px; }
}

/* === Slider-info-rivi ("Vedot N–M · X kpl") — etäisyyttä numeroista === */
.db-rng-info {
  padding: 10px 22px 14px !important;   /* oli 0 22px 12px → enemmän margin top */
  margin-top: 4px;
}
@media (max-width: 768px) {
  .db-rng-info { padding: 14px 18px 16px !important; }
}

/* V2: Desktop P&L-kalenterin pomppimisen esto — vakio min-height jotta box ei
   muuta korkeutta kun vaihdetaan viikko / kuukausi / vuosi näkymää */
@media (min-width: 769px) {
  .hv-cal { min-height: 540px; display: flex; flex-direction: column; }
  .hv-cal > .hv-cal-head { flex-shrink: 0; }
  .hv-months,
  .hv-cal > .hv-cal-week,
  .hv-cal > .hv-cal-month { flex: 1; }
}

/* Calendar head — V2: mobiilissa otsikko ylös, segmentit + navigaatio omille riveille keskitettynä */
@media (max-width: 768px) {
  .hv-cal-head {
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 11px 12px !important;
    justify-content: center !important;
  }
  .hv-cal-head > svg, .hv-cal-head > h3 {
    flex-shrink: 0;
    /* Otsikko + ikoni yhdellä rivillä, koko viewportin levyinen jotta sentteröintti toimii */
  }
  .hv-cal-head > svg { order: 0; }
  .hv-cal-head > h3 { order: 1; flex: 1; min-width: 0; font-size: 13px; }
  .hv-cal-head .spacer { display: none; }
  /* Segmentit (Viikko/Kuukausi/Vuosi) omalle riville keskitettynä */
  .hv-cal-head .hv-seg {
    order: 2;
    flex-basis: 100%;
    display: flex; justify-content: center;
    margin: 0;
  }
  .hv-cal-head .hv-seg button { font-size: 11px; padding: 6px 12px; }
  /* Nav-nuolet + jakson nimi omalle riville keskitettynä */
  .hv-cal-head .hv-yearnav {
    order: 3;
    flex-basis: 100%;
    display: flex; justify-content: center; align-items: center;
    gap: 4px;
  }
  .hv-cal-head .hv-yearnav b { font-size: 12.5px; padding: 0 8px; }
  .hv-cal-head .hv-navarrow { width: 30px; height: 30px; }
}
@media (max-width: 420px) {
  /* Erittäin kapea: piilota P&L-otsikko jotta seg + nav mahtuvat */
  .hv-cal-head > svg, .hv-cal-head > h3 { display: none; }
  .hv-cal-head .hv-seg { margin-left: 0; }
}

/* Swipe-navigaatio (Instagram-tyylinen) — sallii smoothin liun ja CSS-transitionin */
@media (max-width: 880px) {
  #main-content {
    will-change: transform, opacity;
    touch-action: pan-y;   /* sallii pystyscrollin mutta capturee vaakapyyhkäisyn */
  }
}
/* Interaktiiviset alueet eivät tarvitse swipea — pan-x kosketuksessa */
.dash-rng, .db-rng, .hv-rng,
input[type="range"],
.ev-sports, .me-sports, .bv-filters,
.omv-tw, .hv-cal-head .hv-seg {
  touch-action: pan-x !important;
}

/* === Dashboard v2: "Mitä seuraavaksi" -toimintapaneeli === */
.next {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 12px; margin: 0 0 20px 0;
}
.nxt {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 13px; padding: 14px 16px;
  cursor: pointer; transition: .13s ease;
  color: var(--text); font-family: inherit; text-align: left; width: 100%;
}
.nxt:hover { transform: translateY(-1px); border-color: var(--green); }
.nxt:active { transform: translateY(0); }
.nxt.urg {
  background: linear-gradient(135deg, rgba(16,185,129,.13), rgba(132,204,22,.07));
  border-color: rgba(16,185,129,.4);
}
.nxt.warn {
  background: linear-gradient(135deg, rgba(245,158,11,.13), rgba(245,158,11,.04));
  border-color: rgba(245,158,11,.36);
}
.nxt .ico {
  width: 44px; height: 44px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; background: var(--surface-2); color: var(--mint);
}
.nxt.urg .ico {
  background: linear-gradient(135deg, var(--green), #84cc16);
  color: #04130c; box-shadow: 0 6px 14px rgba(16,185,129,.3);
}
.nxt.warn .ico {
  background: rgba(245,158,11,.2); color: var(--amber);
}
.nxt .ico svg { width: 22px; height: 22px; }
.nxt .tx { flex: 1; min-width: 0; }
.nxt .t {
  display: block; font-size: 13.5px; font-weight: 800;
  letter-spacing: -.01em; color: var(--text);
}
.nxt .s {
  display: block; font-size: 12px; color: var(--muted);
  font-weight: 500; margin-top: 2px; line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nxt .cta {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12.5px; font-weight: 800; color: var(--mint);
  flex-shrink: 0;
}
.nxt.warn .cta { color: var(--amber); }
.nxt .cta svg { width: 14px; height: 14px; }

@media (max-width: 880px) {
  .next { grid-template-columns: 1fr; gap: 8px; margin-bottom: 14px; }
  .nxt { padding: 12px 13px; gap: 11px; }
  .nxt .ico { width: 38px; height: 38px; border-radius: 10px; }
  .nxt .ico svg { width: 18px; height: 18px; }
  .nxt .t { font-size: 13px; }
  .nxt .s { font-size: 11px; }
}

/* === Dashboard v2: Urheilulajit-rivi trendi-chip === */
.db-sright-top { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.db-strend {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10.5px; font-weight: 800; padding: 3px 7px; border-radius: 6px;
  background: rgba(255,255,255,.04); font-variant-numeric: tabular-nums;
}
.db-strend.up { color: var(--mint); background: rgba(16,185,129,.13); }
.db-strend.dn { color: #f87171; background: rgba(239,68,68,.12); }
.db-strend.fl { color: var(--dim); }
.db-strend svg { width: 10px; height: 10px; }

/* === Dashboard v2: Yhdistetty Vetomahdollisuudet-paneeli segment-tabit === */
.db-opptabs {
  display: flex; gap: 4px; margin-left: auto;
  background: var(--surface-2); padding: 3px; border-radius: 9px;
}
.db-opptabs button {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit; font-size: 11.5px; font-weight: 700;
  color: var(--dim); background: none; border: none;
  padding: 6px 11px; border-radius: 7px; cursor: pointer;
  transition: background .15s, color .15s;
}
.db-opptabs button .b {
  font-size: 9.5px; font-weight: 800; padding: 1px 6px; border-radius: 20px;
  background: var(--surface-3); color: var(--dim);
}
.db-opptabs button.on {
  background: var(--bg); color: var(--text);
}
.db-opptabs button.on .b {
  background: rgba(16,185,129,.16); color: var(--mint);
}
.db-opptabs button.on.live .b {
  background: rgba(239,68,68,.16); color: #f87171;
}

/* Smooth fade kun segmenttiä vaihdetaan */
.db-opp-fade { animation: dbOppFade .22s ease; }
@keyframes dbOppFade {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 880px) {
  /* Otsikko + tabit pinotaan mobiilissa */
  .db-phead { flex-wrap: wrap; gap: 8px 10px; }
  .db-opptabs {
    margin-left: 0; width: 100%; gap: 2px;
  }
  .db-opptabs button {
    flex: 1; padding: 6px 4px; font-size: 10.5px;
    justify-content: center;
  }
  .db-opptabs button .b { padding: 1px 5px; font-size: 9px; }
}

/* === Dashboard v2: KPI-kortit — keskitetty layout + trendichip === */
.db-card.db-card-v2 {
  position: relative; min-height: 116px; padding: 16px 14px;
  gap: 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}
.db-card.db-card-v2 .db-cico {
  margin: 0 auto 2px;
}
.db-card.db-card-v2 .db-card-body {
  width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
}
.db-card.db-card-v2 .v {
  font-size: 24px; font-weight: 900; letter-spacing: -.025em;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.db-card.db-card-v2 .v.pos { color: var(--mint); }
.db-card.db-card-v2 .v.neg { color: #f87171; }
.db-card.db-card-v2 .k {
  font-size: 11px; font-weight: 600; color: var(--dim);
  letter-spacing: -.01em;
  text-align: center;
}
/* Trendichip — pieni pilli arvon alle "↑ +2,4u vs. ed. 30 pv" */
.db-kpi-trend {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10.5px; font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  margin-top: 4px;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.db-kpi-trend.pos { background: rgba(16,185,129,.14); color: var(--mint); }
.db-kpi-trend.neg { background: rgba(239,68,68,.14); color: #fca5a5; }
.db-kpi-trend.dim { background: rgba(255,255,255,.04); color: var(--text-dim); }
.db-kpi-trend .vs {
  font-weight: 500;
  opacity: .75;
  margin-left: 2px;
}
/* Vanha sparkline piilotettu (V2 käyttää trendichippiä) */
.db-card.db-card-v2 .db-spk { display: none; }

@media (max-width: 880px) {
  .db-card.db-card-v2 { min-height: 104px; padding: 12px 10px; gap: 7px; }
  .db-card.db-card-v2 .v { font-size: 19px; }
  .db-card.db-card-v2 .k { font-size: 9.5px; line-height: 1.25; }
  .db-kpi-trend { font-size: 9.5px; padding: 2px 6px; }
  .db-kpi-trend .vs { display: none; }   /* mobiili: piilota "vs. ed. 30 pv" -teksti */
}

/* === Dashboard v2: EV-badge värikoodaus Vetomahdollisuudet-paneelissa === */
/* Tier-asteikko: lo (3-5%) → mid (5-10%) → hi (10-15%) → hot (≥15%) */
.db-edge.lo {
  background: rgba(132, 204, 22, .14);
  color: #bef264;          /* lime-200 — vaalea kalkki */
}
.db-edge.mid {
  background: rgba(16, 185, 129, .16);
  color: var(--mint);      /* nykyinen oletus */
}
.db-edge.hi {
  background: linear-gradient(135deg, rgba(16,185,129,.28), rgba(132,204,22,.22));
  color: #34d399;
  box-shadow: inset 0 0 0 1px rgba(52,211,153,.25);
}
.db-edge.hot {
  background: linear-gradient(135deg, #34d399, #84cc16);
  color: #06371f;          /* tumma vihreä teksti gradientin päällä */
  box-shadow: 0 0 14px -2px rgba(52,211,153,.45);
  font-weight: 900;
}

/* Negatiivinen edge (vain jos jotenkin pääsee läpi) → himmeä punainen, ei painava */
.db-edge:not(.lo):not(.mid):not(.hi):not(.hot) {
  background: rgba(180,186,203,.08);
  color: var(--dim);
}

/* === Dashboard v2: yksinkertaistettu tuottokäyrä === */
/* Aikaväli-segmentit (7p/30p/90p/1v/Kaikki) chartin yläpuolella */
.db-chart-rangebar {
  display: flex; justify-content: flex-end;
  padding: 4px 14px 8px;
}
.db-rangeseg {
  display: inline-flex; gap: 2px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 9px; padding: 3px;
}
.db-rangeseg button {
  font-family: inherit; font-size: 11.5px; font-weight: 700;
  color: var(--dim); background: none; border: none;
  padding: 6px 11px; border-radius: 6px; cursor: pointer;
  transition: background .15s, color .15s;
  font-variant-numeric: tabular-nums;
}
.db-rangeseg button:hover { color: var(--text); }
.db-rangeseg button.on {
  background: var(--bg); color: var(--text);
  box-shadow: 0 1px 0 rgba(255,255,255,.04);
}

/* Chart-kontaineri: pysyy mockup-tyylisenä korkeudella */
.db-chart {
  padding: 4px 12px 14px;
}
.db-chart svg {
  display: block; width: 100%; height: auto;
  max-height: 240px;       /* Desktop */
}
.db-chart-svg, .db-chart {
  transition: opacity .18s ease;
}

@media (max-width: 880px) {
  .db-chart-rangebar { padding: 4px 12px 6px; }
  .db-rangeseg button { padding: 5px 8px; font-size: 10.5px; }
  /* Loivempi mobiili-chart: viewBox 360x150 + max-height 130px → ei dramaattisia jyrkkyyksiä */
  .db-chart svg { max-height: 130px; }
  .db-chart { padding: 2px 10px 10px; }
}
@media (max-width: 380px) {
  .db-rangeseg button { padding: 5px 6px; font-size: 10px; }
}

/* Piilota vanha chart-legend ja range-info (ei käytössä V2:ssa) */
/* V4: .db-chart-legend on nyt päällä (sisältää Tuotto/CLV-togglet + u/€) — display:none poistettu */
.db-rng-wrap, .db-rng-info { display: none !important; }

/* === Dashboard V3 Clean: chart-rakenne (Y/X-akseli, brush, CLV-overlay) === */
/* 0-viiva piirretään aina (ei togglea). CLV-toggle on nyt .db-clv-pill (db-hero-v3:n alla). */
.db-chart-rangebar { gap: 10px; align-items: center; }

/* Vanhat .db-toggle-zero ja .db-toggle-clv säännöt POISTETTU V3:ssa — eivät enää käytössä */

.db-chartarea {
  display: flex; gap: 6px;
  padding: 0 8px;
  /* V5++: korkeus 250 → 320 (+28%) */
  height: 320px;
}
.db-yaxis {
  display: flex; flex-direction: column; justify-content: space-between;
  /* V5+: kapeampi y-axis label-sarake antaa enemmän tilaa chartille */
  padding: 10px 0; width: 42px;
  font-size: 9.5px; color: var(--dim); font-weight: 600;
  text-align: right; font-variant-numeric: tabular-nums; line-height: 1;
  white-space: nowrap; opacity: .75;
}
.db-yaxis span { white-space: nowrap; overflow: hidden; }
.db-charth {
  flex: 1; position: relative;
  /* V5 (mockup v3.5): chart osa hero-kortin pintaa, ei omaa taustaa/reunaa */
  background: transparent;
  border-radius: 0; border: none;
  overflow: visible;
  padding: 0;
}
.db-charth svg { display: block; width: 100%; height: 100%; }
.db-xaxis {
  display: flex; justify-content: space-between;
  padding: 5px 8px 0 50px;
  font-size: 9.5px; color: var(--dim); font-weight: 600;
  font-variant-numeric: tabular-nums; opacity: .85;
}
.db-brush {
  position: relative; height: 40px;
  margin: 10px 14px 0 60px;
  background: var(--bg, #0e1117);
  border: 1px solid var(--border, #232a3a);
  border-radius: 6px; overflow: hidden;
}
.db-brushsvg { width: 100%; height: 100%; opacity: .55; }
.db-brushsvg svg { width: 100%; height: 100%; display: block; }
.db-brushwin {
  position: absolute; top: 0; bottom: 0;
  background: rgba(16,185,129,.10);
  border-left: 2px solid var(--mint, #34d399);
  border-right: 2px solid var(--mint, #34d399);
  pointer-events: none;
}
.db-brushhandle {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 9px; height: 22px; background: var(--mint, #34d399);
  border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.4);
  /* Sallii touch-eventit kun parent on pointer-events:none */
  pointer-events: auto;
  cursor: ew-resize;
  /* Estä selain-zoom touch-eleestä */
  touch-action: none;
}
/* Kahvat sijaitsevat ikkunan reunalla — ei minus-offsetia jotta overflow:hidden ei leikkaa */
.db-brushhandle.l { left: 0; }
.db-brushhandle.r { right: 0; }
/* Näkymätön laajennettu tappausala koko 32x44 px (etenkin mobiili) */
.db-brushhandle::before {
  content: ""; position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 32px; height: 44px;
  /* Helppoa testata: background: rgba(255,0,0,.2); */
}
.db-legend {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-top: 10px; padding: 0 14px 12px 60px;
  font-size: 11px; font-weight: 700;
}
.db-legend .it {
  display: inline-flex; align-items: center; gap: 5px; color: var(--dim);
}
.db-legend .dot { width: 12px; height: 3px; border-radius: 2px; }
.db-legend .dot.dash {
  height: 0; border-top: 2px dashed currentColor; background: none !important; width: 12px;
}

/* Mobiili: pienemmät korkeudet ja paddingit per mockup */
@media (max-width: 880px) {
  .db-chartarea { height: 140px; padding: 0 10px; gap: 5px; }
  .db-yaxis { width: 36px; font-size: 9px; padding: 10px 0; }
  .db-xaxis { padding: 4px 10px 0 51px; font-size: 9px; }
  /* Mobiili: isompi brush ja kahvat (touchable) */
  .db-brush { height: 44px; margin: 8px 10px 0 51px; touch-action: none; }
  .db-brushhandle { width: 14px; height: 30px; border-radius: 5px; }
  /* Mobiili-kahvat: jätetään ne ikkunan SISÄPUOLELLE jotta overflow:hidden ei leikkaa */
  .db-brushhandle.l { left: 0; }
  .db-brushhandle.r { right: 0; }
  /* Iso touch-target mobiilissa: 48x60 */
  .db-brushhandle::before { width: 48px; height: 60px; }
  .db-legend { padding: 0 10px 10px 51px; gap: 10px; font-size: 10px; margin-top: 6px; }
}
@media (max-width: 380px) {
  .db-chartarea { height: 130px; padding: 0 8px; gap: 4px; }
  .db-yaxis { width: 32px; font-size: 8.5px; }
  .db-xaxis { padding: 4px 8px 0 44px; }
  .db-brush { margin: 6px 8px 0 44px; }
  .db-legend { padding: 0 8px 10px 44px; font-size: 9.5px; }
}

/* Brush-kahvojen kursori — selvä veto-affordanssi */
.db-brushhandle { cursor: ew-resize; touch-action: none; pointer-events: auto; }
.db-brushhandle:hover { background: #6ee7b7; }
.db-brushwin { pointer-events: none; }
.db-brush { user-select: none; }

/* €/u toggle (hero-osio) */
.db-eur-toggle {
  display: inline-flex; gap: 0;
  background: var(--surface-2, #161c2a);
  border: 1px solid var(--border, #232a3a);
  border-radius: 9px; padding: 3px;
  align-self: flex-start;
}
.db-eur-toggle button {
  font-family: inherit; font-size: 12.5px; font-weight: 700;
  color: var(--dim); background: none; border: none;
  padding: 5px 11px; border-radius: 6px; cursor: pointer;
  min-width: 32px;
  transition: background .15s, color .15s;
}
.db-eur-toggle button.on {
  background: var(--bg, #0e1117); color: var(--text, #e6e9f2);
  box-shadow: 0 1px 0 rgba(255,255,255,.04);
}
.db-eur-toggle button:hover:not(.on) { color: var(--text, #e6e9f2); }
.db-hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }

/* Desktop: chart + Urheilulajit-paneeli rinnakkain (1.6fr / 1fr) */
.db-row2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
/* V5 (mockup v3.5): vasen sarake sisältää nyt chart + insights + breakdown allekkain.
   Oikea sarake sisältää Personal Stats + drawdown + kalenteri + open bets. Tasapainottaa korkeudet. */
.db-col-l { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.db-col-l > .db-insights-wrap { margin-bottom: 0; }
.db-col-l > .db-breakdown-panel { margin: 0; }
@media (min-width: 1024px) {
  .db-row2 {
    /* V5++: vasen sarake 2.6fr → 3.0fr, oikea sarake kompaktimpi (300px max) */
    grid-template-columns: minmax(0, 3fr) minmax(260px, 310px);
    align-items: start;
  }
  .db-row2 > .db-col-l,
  .db-row2 > .db-personal-panel {
    margin: 0 !important;
    box-sizing: border-box;
  }
  .db-row2 > .db-col-l > .db-hero,
  .db-row2 > .db-col-l > .db-breakdown-panel {
    margin: 0 !important;
    border-radius: 14px;
    box-sizing: border-box;
  }
  .db-row2 > .db-personal-panel {
    border-radius: 14px;
  }
  .db-row2 > .db-sports-panel {
    display: flex; flex-direction: column; min-width: 0;
  }
  /* Yksi sarake + pystyscroll kun sports-paneeli on row2-grid-sarakkeessa */
  .db-row2 > .db-sports-panel .db-sports {
    grid-template-columns: 1fr !important;
    flex: 1 1 0;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(120,130,160,.35) transparent;
  }
  /* Tumma teemainen scrollbar (Webkit) */
  .db-row2 > .db-sports-panel .db-sports::-webkit-scrollbar {
    width: 8px;
    background: transparent;
  }
  .db-row2 > .db-sports-panel .db-sports::-webkit-scrollbar-track {
    background: rgba(0,0,0,.15);
    border-radius: 4px;
    margin: 4px 0;
  }
  .db-row2 > .db-sports-panel .db-sports::-webkit-scrollbar-thumb {
    background: rgba(120,130,160,.35);
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: padding-box;
  }
  .db-row2 > .db-sports-panel .db-sports::-webkit-scrollbar-thumb:hover {
    background: rgba(140,150,180,.55);
    background-clip: padding-box;
    border: 2px solid transparent;
  }
}

/* === Personal Stats -panel + mini-kuukausikalenteri (Bet Hero -inspired) === */
.db-personal-panel {
  background: var(--surface, #141925);
  border: 1px solid var(--border, #242b3d);
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 16px;
}
.db-personal-panel .db-phead {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 6px; border-bottom: 1px solid var(--border, #242b3d);
  margin-bottom: 2px;
}
.db-personal-panel .db-phead .pi svg { width: 16px; height: 16px; color: var(--mint, #34d399); }
.db-personal-panel .db-phead h2 { font-size: 13.5px; font-weight: 800; margin: 0; letter-spacing: -.01em; }

/* V5 (mockup v3.5): avatar-pohjainen Personal Stats -otsikko */
.db-phead-v5 {
  display: flex !important; align-items: center; gap: 10px;
  padding-bottom: 12px !important;
  margin-bottom: 4px !important;
}
.db-pavatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px; color: #fff;
  flex-shrink: 0;
}
.db-pwho { flex: 1; min-width: 0; }
.db-pwho .n {
  font-size: 13.5px; font-weight: 800;
  letter-spacing: -.01em;
  color: var(--text, #f1f3f9);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.db-pwho .s {
  font-size: 10.5px; font-weight: 700;
  color: var(--text-dim, #7a8094);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.db-pshare {
  background: transparent; border: none;
  color: var(--text-dim, #7a8094);
  cursor: pointer;
  padding: 6px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: color .12s, background .12s;
}
.db-pshare:hover {
  color: var(--mint, #34d399);
  background: rgba(255,255,255,.04);
}
.db-pshare svg { width: 14px; height: 14px; }

/* V5+ (mockup v3.5): 3-sarakkeinen KPI-grid keskitettyinä (ROI / Panostettu / Voitto-%) */
.db-pers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border, #242b3d);
  border: 1px solid var(--border, #242b3d);
  border-radius: 9px;
  overflow: hidden;
  margin-bottom: 12px;
}
.db-pers-kpi {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 8px;
  background: var(--surface, #141925);
  border: none;
  border-radius: 0;
  text-align: center;
}
.db-pers-lbl {
  font-size: 9.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-dim, #7a8094);
}
.db-pers-val {
  font-size: 15px; font-weight: 900; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text, #f1f3f9);
  line-height: 1.1;
}
.db-pers-val.pos { color: var(--mint, #34d399); }
.db-pers-val.neg { color: #f87171; }
/* V5+++ (mockup v3.5): pers-rows-kontti pinottuna ja jokainen rivi label–arvo flexillä */
.db-pers-rows {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.db-pers-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
  padding: 8px 4px;
  width: 100%;
  border-top: 1px solid rgba(255,255,255,.04);
  box-sizing: border-box;
}
.db-pers-rows .db-pers-row:first-child { border-top: none; }
.db-pers-row > span {
  color: var(--text-dim, #8b94a8);
  font-weight: 600;
  flex: 1; min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.db-pers-row > strong {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text, #f1f3f9);
  flex-shrink: 0;
  text-align: right;
  white-space: nowrap;
}
.db-pers-row > strong.pos { color: var(--mint, #34d399); }
.db-pers-row > strong.neg { color: #f87171; }

/* === Drawdown / Risk-mittari Personal Stats -paneelissa === */
.db-risk-block {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--border, #242b3d);
}
.db-risk-h {
  display: flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted, #b4bacb);
  margin-bottom: 8px;
}
.db-risk-h svg { width: 13px; height: 13px; color: var(--warning, #f59e0b); }
.db-risk-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px;
}
.db-risk-cell {
  padding: 9px 11px;
  background: rgba(245,158,11,.04);
  border: 1px solid rgba(245,158,11,.12);
  border-radius: 9px;
  text-align: center;
}
.db-risk-cell .l {
  font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-dim, #7a8094);
  margin-bottom: 2px;
}
.db-risk-cell .v {
  font-size: 15px; font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--warning, #f59e0b);
  letter-spacing: -.02em;
}
.db-risk-bar { margin-top: 8px; }
.db-risk-bar .lb {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--text-muted, #b4bacb); margin-bottom: 5px;
}
.db-risk-bar .lb strong {
  color: var(--text, #f1f3f9);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.db-risk-bar .track {
  height: 6px; background: rgba(255,255,255,.05);
  border-radius: 3px; overflow: hidden; position: relative;
}
.db-risk-bar .fill {
  height: 100%;
  background: linear-gradient(90deg, var(--mint, #34d399) 0%, var(--warning, #f59e0b) 60%, #f87171 100%);
  border-radius: 3px;
  transition: width .25s ease;
}
.db-risk-bar .marker {
  position: absolute; top: -2px;
  width: 2px; height: 10px;
  background: var(--text, #f1f3f9);
  border-radius: 1px;
}

/* === Avoimet vedot -kortti (Personal Stats -paneelin alle) === */
.db-openbets {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border, #242b3d);
}
.db-ob-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 0 10px;
}
.db-ob-title {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 800; letter-spacing: -.01em;
  color: var(--text, #f1f3f9);
}
.db-ob-title svg { width: 13px; height: 13px; color: var(--mint, #34d399); }
.db-ob-title .count {
  display: inline-flex; align-items: center;
  background: rgba(52,211,153,.18); color: var(--mint, #34d399);
  font-size: 10px; font-weight: 900;
  padding: 1.5px 6px; border-radius: 9px;
}
.db-ob-head a {
  font-size: 11px; font-weight: 700; color: var(--text-dim, #7a8094);
  text-decoration: none;
}
.db-ob-head a:hover { color: var(--mint, #34d399); }

.db-ob-summary {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--border, #242b3d);
  border: 1px solid var(--border, #242b3d);
  border-radius: 9px;
  overflow: hidden;
  margin-bottom: 8px;
}
.db-ob-summary .c {
  padding: 8px 10px;
  background: var(--surface, #141925);
  display: flex; flex-direction: column; align-items: center; gap: 1px;
}
.db-ob-summary .c .l {
  font-size: 9.5px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-dim, #7a8094);
}
.db-ob-summary .c .v {
  font-size: 14px; font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--text, #f1f3f9);
}
.db-ob-summary .c .v.pos { color: var(--mint, #34d399); }

.db-ob-list { display: flex; flex-direction: column; gap: 5px; }
.db-ob-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.04);
  border-radius: 8px;
  cursor: pointer;
  transition: .12s;
}
.db-ob-item:hover {
  border-color: rgba(52,211,153,.30);
  background: rgba(52,211,153,.04);
}
.db-ob-bk {
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 900; flex-shrink: 0;
}
.db-ob-tx { flex: 1; min-width: 0; }
.db-ob-tx .t {
  font-size: 11.5px; font-weight: 800; color: var(--text, #f1f3f9);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.db-ob-tx .s {
  font-size: 10px; font-weight: 600; color: var(--text-dim, #7a8094);
  margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.db-ob-r { text-align: right; flex-shrink: 0; }
.db-ob-r .stake {
  font-size: 10.5px; color: var(--text-dim, #7a8094); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.db-ob-r .pot {
  font-size: 11.5px; color: var(--mint, #34d399); font-weight: 900;
  font-variant-numeric: tabular-nums;
}
/* Empty state */
.db-openbets-empty .db-ob-emptyhint {
  padding: 14px 12px 6px;
  font-size: 11.5px;
  color: var(--text-dim, #7a8094);
  font-style: italic;
  text-align: center;
  line-height: 1.5;
}

/* === Smart Insights -karuselli (chartin/row2:n alapuolella) === */
.db-insights-wrap {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 14px;
}
.db-insights-h {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2px;
}
.db-insights-h .ttl {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-dim, #7a8094);
}
.db-insights-h .ttl svg { width: 13px; height: 13px; color: var(--mint, #34d399); }
.db-insights-h .ttl .count {
  display: inline-flex; align-items: center;
  background: rgba(52,211,153,.13); color: var(--mint, #34d399);
  font-size: 10px; font-weight: 900;
  padding: 1.5px 7px; border-radius: 8px;
  letter-spacing: .04em; text-transform: none;
}
.db-insights-h .nav { display: flex; gap: 5px; align-items: center; }
.db-insights-h .dots { display: inline-flex; gap: 4px; }
.db-insights-h .dots span {
  width: 14px; height: 3px; border-radius: 2px;
  background: rgba(255,255,255,.10);
  transition: .15s;
}
.db-insights-h .dots span.on {
  background: var(--mint, #34d399);
  width: 20px;
}
/* V5++++: nuolinapit Smart Insights -karusellille */
.db-insights-h .nav { display: inline-flex; align-items: center; gap: 6px; }
.db-ins-nav-btn {
  width: 24px; height: 24px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--text-muted, #b4bacb);
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: .12s;
  flex-shrink: 0;
}
.db-ins-nav-btn:hover {
  background: rgba(52,211,153,.10);
  border-color: rgba(52,211,153,.30);
  color: var(--mint, #34d399);
}
.db-ins-nav-btn svg { display: block; }
/* Varmista että insights scrollaa + drag-cursor */
.db-insights {
  overflow-x: auto !important;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.10) transparent;
  cursor: grab;
}
.db-insights:active { cursor: grabbing; }
.db-insights::-webkit-scrollbar { height: 6px; }
.db-insights::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 3px; }
.db-insights::-webkit-scrollbar-track { background: transparent; }

.db-insights {
  display: flex; gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin: 0 -2px;
  padding: 0 2px 2px;
}
.db-insights::-webkit-scrollbar { display: none; }

.db-insight {
  background: var(--surface, #141925);
  border: 1px solid var(--border, #242b3d);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex; gap: 11px; align-items: flex-start;
  cursor: pointer;
  transition: .15s;
  position: relative; overflow: hidden;
  flex: 0 0 calc((100% - 24px) / 3);
  min-width: 0;
  scroll-snap-align: start;
}
@media (max-width: 980px) {
  .db-insight { flex: 0 0 calc((100% - 12px) / 2); }
}
@media (max-width: 640px) {
  .db-insight { flex: 0 0 80%; max-width: 320px; }
}
.db-insight:hover {
  border-color: rgba(255,255,255,.18);
  transform: translateY(-1px);
}
.db-insight .ic {
  width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.db-insight .ic svg { width: 15px; height: 15px; }
.db-insight.pos .ic { background: rgba(52,211,153,.13); color: var(--mint, #34d399); }
.db-insight.warn .ic { background: rgba(245,158,11,.13); color: var(--warning, #f59e0b); }
.db-insight.info .ic { background: rgba(34,211,238,.13); color: #22d3ee; }
.db-insight .tx { min-width: 0; flex: 1; }
.db-insight .tx .t {
  font-size: 12.5px; font-weight: 800;
  color: var(--text, #f1f3f9);
  letter-spacing: -.01em;
  line-height: 1.25;
  margin-bottom: 3px;
}
.db-insight .tx .s {
  font-size: 11.5px; color: var(--text-muted, #b4bacb);
  font-weight: 600;
  line-height: 1.4;
}
.db-insight .tx .s b {
  font-weight: 800; font-variant-numeric: tabular-nums;
}
.db-insight.pos .tx .s b { color: var(--mint, #34d399); }
.db-insight.warn .tx .s b { color: var(--warning, #f59e0b); }
.db-insight.info .tx .s b { color: #22d3ee; }

/* Mini-kuukausikalenteri */
.db-cal-wrap {
  padding-top: 8px; border-top: 1px solid var(--border, #242b3d);
  display: flex; flex-direction: column; gap: 8px;
}
.db-cal-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12.5px;
}
.db-cal-month {
  font-weight: 800; color: var(--text, #f1f3f9);
  letter-spacing: -.01em;
}
.db-cal-profit {
  font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.db-cal-profit.pos { color: var(--mint, #34d399); }
.db-cal-profit.neg { color: #f87171; }
.db-cal-weekdays {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .04em;
  color: var(--text-dim, #8b94a8); text-align: center;
  text-transform: uppercase;
}
.db-cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px;
}
.db-cal-cell {
  aspect-ratio: 1.05;
  display: flex; flex-direction: column;
  align-items: stretch; justify-content: flex-end;
  padding: 3px 4px;
  gap: 1px;
  font-size: 11px; font-weight: 600; color: var(--text-dim, #8b94a8);
  border-radius: 5px;
  background: rgba(255,255,255,.015);
  position: relative;
  user-select: none;
  box-sizing: border-box;
}
.db-cal-cell.empty { background: transparent; }
.db-cal-cell .db-cal-day-n {
  position: absolute;
  top: 3px; left: 4px;
  font-size: 11px; line-height: 1;
  font-weight: 700;
  color: var(--text, #f1f3f9);  /* päivänumero aina valkoinen */
}
.db-cal-cell .db-cal-day-profit {
  font-size: 9.5px; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: center;
  margin-top: auto;  /* pohjaan */
}
.db-cal-cell.win {
  background: rgba(16,185,129,.18);
  color: var(--mint, #34d399);
}
.db-cal-cell.win .db-cal-day-n { font-weight: 800; }
.db-cal-cell.loss {
  background: rgba(248,113,113,.13);
  color: #f87171;
}
.db-cal-cell.loss .db-cal-day-n { font-weight: 800; }
.db-cal-cell.even {
  background: rgba(255,255,255,.05);
  color: var(--text, #f1f3f9);
}
.db-cal-cell.even .db-cal-day-n { font-weight: 800; }
.db-cal-cell.today {
  outline: 1.5px solid var(--mint, #34d399);
  outline-offset: -1.5px;
  color: var(--text, #f1f3f9);
}
/* Klikattava päivä: hover-korostus */
.db-cal-cell.clickable {
  cursor: pointer;
  transition: transform .08s, box-shadow .12s, filter .12s, background .12s;
}
.db-cal-cell.clickable:hover {
  filter: brightness(1.25);
  transform: translateY(-1px);
  z-index: 2;
}
.db-cal-cell.win.clickable:hover { box-shadow: 0 4px 10px rgba(16,185,129,.30); }
.db-cal-cell.loss.clickable:hover { box-shadow: 0 4px 10px rgba(248,113,113,.30); }
/* Päivä ilman vetoja — silti klikattava, mutta hillitymmin */
.db-cal-cell.nobets .db-cal-day-profit.muted {
  color: var(--text-dim, #8b94a8);
  opacity: .55;
  font-weight: 700;
}
.db-cal-cell.nobets.clickable:hover {
  background: rgba(255,255,255,.06);
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.db-cal-cell.nobets.clickable:hover .db-cal-day-profit.muted {
  opacity: .85;
}
/* Valittu päivä (filter-päällä) */
.db-cal-cell.selected {
  outline: 2px solid var(--mint, #34d399);
  outline-offset: -2px;
  box-shadow: 0 0 0 1px var(--mint, #34d399) inset;
}

/* === Filteripalkki (6 chippiä Dashboard-sivun yläosassa) === */
.db-filterbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 10px 12px;
  background: var(--surface, #141925);
  border: 1px solid var(--border, #242b3d);
  border-radius: 12px;
  position: relative;
}
.db-filterbar-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 800;
  color: var(--text-dim, #8b94a8);
  letter-spacing: .04em;
  text-transform: uppercase;
  padding-right: 8px;
  border-right: 1px solid var(--border, #242b3d);
  margin-right: 4px;
  flex-shrink: 0;
}
.db-filterbar-label svg { color: var(--text-dim, #8b94a8); }

.db-fchip-wrap {
  position: relative;
}
.db-fchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 9px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  color: var(--text, #f1f3f9);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -.005em;
  cursor: pointer;
  transition: background .12s, border-color .12s, transform .08s;
  white-space: nowrap;
}
.db-fchip:hover {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
}
.db-fchip:active { transform: translateY(0.5px); }
.db-fchip.open {
  background: rgba(52,211,153,.10);
  border-color: rgba(52,211,153,.32);
}
.db-fchip.active {
  background: rgba(52,211,153,.13);
  border-color: rgba(52,211,153,.42);
  color: var(--text, #f1f3f9);
}
.db-fchip.active .db-fchip-ic { color: var(--mint, #34d399); }
.db-fchip-ic { display: inline-flex; color: var(--text-dim, #8b94a8); }
.db-fchip-ic svg { width: 14px; height: 14px; display: block; }
.db-fchip-lbl { font-weight: 700; }
.db-fchip-val {
  font-weight: 800;
  color: var(--mint, #34d399);
  padding-left: 6px;
  border-left: 1px solid rgba(255,255,255,.10);
  margin-left: 2px;
  font-variant-numeric: tabular-nums;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.db-filterbar-clear {
  background: transparent;
  border: 1px solid rgba(255,255,255,.10);
  color: var(--text-dim, #8b94a8);
  border-radius: 7px;
  padding: 5px 10px;
  font-size: 11.5px; font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: -.005em;
  transition: color .12s, border-color .12s, background .12s;
}
.db-filterbar-clear:hover {
  color: #f87171;
  border-color: rgba(248,113,113,.30);
  background: rgba(248,113,113,.06);
}

/* V5 (mockup v3.5): globaali u/€-toggle filteripalkin oikealla reunalla */
.db-global-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  padding: 3px 4px 3px 9px;
  background: var(--surface-2, #1c2231);
  border: 1px solid var(--border, #242b3d);
  border-radius: 9px;
}
.db-global-toggle .gt-lbl {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-dim, #7a8094);
}
.db-global-toggle .gt-lbl svg {
  width: 11px; height: 11px;
  color: var(--mint, #34d399);
}
.db-global-toggle .gt-tog {
  display: inline-flex;
  background: rgba(0,0,0,.30);
  border-radius: 7px;
  padding: 2px;
  gap: 0;
  position: relative;
  overflow: hidden;
}
/* Animoitu liukuva tausta-indikaattori — luokkapohjainen, ei :has() */
.db-global-toggle .gt-tog::before {
  content: '';
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 2px;
  width: calc(50% - 2px);
  background: linear-gradient(135deg, rgba(52,211,153,.28), rgba(52,211,153,.10));
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px rgba(52,211,153,.42), 0 2px 6px rgba(52,211,153,.18);
  transition: transform .26s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
  z-index: 0;
  transform: translateX(0);
}
.db-global-toggle .gt-tog.on-eur::before {
  transform: translateX(100%);
}
.db-global-toggle .gt-tog button {
  border: none; background: transparent;
  color: var(--text-dim, #7a8094);
  font-family: inherit;
  font-size: 12px; font-weight: 800;
  padding: 4px 13px;
  border-radius: 5px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  position: relative;
  z-index: 1;
  transition: color .22s ease;
  min-width: 30px;
  line-height: 1.2;
}
.db-global-toggle .gt-tog button.on {
  color: var(--mint, #34d399);
}

/* V5: vihje chartin legendissä — viittaa globaaliin u/€-toggleen filteripalkissa */
.db-legend-hint {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-dim, #7a8094);
  font-style: italic;
  opacity: .7;
  margin-left: auto;
}

/* Mobile: globaali toggle siirtyy uudelle riville filteripalkin alle */
@media (max-width: 760px) {
  .db-global-toggle {
    margin-left: 0;
    margin-top: 4px;
    width: 100%;
    justify-content: space-between;
  }
  .db-legend-hint { font-size: 9.5px; }
}

/* === Popover (avautuu chipin alle) === */
.db-fpop {
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  z-index: 80;
  background: var(--surface, #141925);
  border: 1px solid var(--border-2, #323a52);
  border-radius: 10px;
  box-shadow: 0 14px 32px rgba(0,0,0,.42), 0 2px 8px rgba(0,0,0,.32);
  min-width: 200px;
  padding: 6px;
  animation: db-fpop-in .12s ease-out;
}
@keyframes db-fpop-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.db-fpop.scrollable {
  max-height: 290px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.db-fpop-empty {
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  z-index: 80;
  background: var(--surface, #141925);
  border: 1px solid var(--border-2, #323a52);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 12px;
  color: var(--text-dim, #8b94a8);
  box-shadow: 0 14px 32px rgba(0,0,0,.42);
}

.db-fpop-list { min-width: 180px; }
.db-fpop-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--text, #f1f3f9);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: background .1s, color .1s;
}
.db-fpop-opt:hover {
  background: rgba(255,255,255,.05);
}
.db-fpop-opt.on {
  background: rgba(52,211,153,.10);
  color: var(--mint, #34d399);
  font-weight: 800;
}
.db-fpop-opt svg { color: var(--mint, #34d399); flex-shrink: 0; }

/* Time-popover: 2 saraketta + Custom date-pickerit */
.db-fpop-time { min-width: 280px; }
.db-fpop-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}
.db-fpop-range {
  margin-top: 8px;
  padding: 10px 8px 6px;
  border-top: 1px dashed var(--border, #242b3d);
  display: flex; align-items: flex-end; gap: 8px;
  opacity: 0.5;
  transition: opacity .15s;
}
.db-fpop-range.on { opacity: 1; }
.db-fpop-rangefield {
  display: flex; flex-direction: column; gap: 3px; flex: 1;
  position: relative;
}
.db-fpop-rangefield label {
  font-size: 10px; font-weight: 800; letter-spacing: .05em;
  color: var(--text-dim, #8b94a8);
  text-transform: uppercase;
}
.db-fpop-rangefield input {
  background: rgba(0,0,0,.25);
  border: 1px solid var(--border-2, #323a52);
  border-radius: 6px;
  color: var(--text, #f1f3f9);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  padding: 6px 28px 6px 9px;
  width: 100%;
  outline: none;
  font-variant-numeric: tabular-nums;
}
.db-fpop-rangefield input:focus {
  border-color: rgba(52,211,153,.50);
  background: rgba(52,211,153,.05);
}
.db-fpop-rangefield input::-webkit-calendar-picker-indicator {
  filter: invert(.85);
  cursor: pointer;
}
.db-fpop-suffix {
  position: absolute;
  right: 8px;
  bottom: 7px;
  font-size: 11px;
  color: var(--text-dim, #8b94a8);
  font-weight: 700;
  pointer-events: none;
}

/* Range-popover (Kerroin / EV) */
.db-fpop-range-only { min-width: 260px; padding: 10px 12px; }
.db-fpop-title {
  font-size: 10px; font-weight: 800; letter-spacing: .06em;
  color: var(--text-dim, #8b94a8);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.db-fpop-range-only .db-fpop-range {
  margin-top: 0; padding-top: 0; border-top: none;
  align-items: flex-end;
  opacity: 1;
}
.db-fpop-sep {
  align-self: center;
  padding-bottom: 5px;
  color: var(--text-dim, #8b94a8);
  font-weight: 700;
}
.db-fpop-actions {
  display: flex; gap: 6px; margin-top: 10px;
}
.db-fpop-clear, .db-fpop-apply {
  flex: 1;
  padding: 7px 10px;
  border-radius: 7px;
  border: 1px solid var(--border-2, #323a52);
  font-family: inherit;
  font-size: 12px; font-weight: 700;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.db-fpop-clear {
  background: transparent;
  color: var(--text-dim, #8b94a8);
}
.db-fpop-clear:hover {
  background: rgba(255,255,255,.04);
  color: var(--text, #f1f3f9);
}
.db-fpop-apply {
  background: linear-gradient(135deg, rgba(52,211,153,.20), rgba(132,204,22,.10));
  border-color: rgba(52,211,153,.42);
  color: var(--mint, #34d399);
}
.db-fpop-apply:hover {
  background: linear-gradient(135deg, rgba(52,211,153,.30), rgba(132,204,22,.18));
}

@media (max-width: 760px) {
  .db-filterbar { padding: 8px 10px; gap: 6px; }
  .db-filterbar-label { font-size: 10.5px; padding-right: 6px; margin-right: 2px; }
  .db-fchip { padding: 5px 10px 5px 8px; font-size: 11.5px; }
  .db-fchip-val { max-width: 110px; font-size: 11px; }
  .db-fpop { min-width: 240px; max-width: calc(100vw - 32px); }
  .db-fpop-time { min-width: 260px; }
  .db-fpop-grid { grid-template-columns: 1fr 1fr; }
  .db-filterbar-clear { margin-left: 0; width: 100%; margin-top: 4px; }
}

/* === Dashboard-suodatin-banneri === */
.db-filter-banner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  background: linear-gradient(135deg, rgba(16,185,129,.10), rgba(132,204,22,.05));
  border: 1px solid rgba(16,185,129,.30);
  border-radius: 11px;
  padding: 11px 16px;
  margin-bottom: 14px;
  font-size: 13.5px;
}
.db-filter-label {
  font-weight: 700; color: var(--text, #f1f3f9);
  letter-spacing: -.005em;
}
.db-filter-clear {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--text, #f1f3f9);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px; font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background .12s, border-color .12s;
}
.db-filter-clear:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.20);
}

/* === V5 (mockup v3.5): Bookmaker-rivin värikoodattu logo-merkki === */
.db-bk-table .db-bk-name {
  display: inline-flex; align-items: center; gap: 9px;
}
.db-bk-table .db-bk-name .db-bk-logo {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 900;
  flex-shrink: 0;
  letter-spacing: 0;
}

/* === Breakdown taulukon klikattavat rivit + aktiivinen rivi === */
.db-bk-table .db-bk-name.clickable {
  cursor: pointer;
  transition: color .12s;
}
.db-bk-table .db-bk-name.clickable:hover {
  color: var(--mint, #34d399);
}
.db-bk-table tbody tr.is-active {
  background: rgba(16,185,129,.07) !important;
  outline: 1px solid rgba(16,185,129,.25);
  outline-offset: -1px;
}
.db-bk-table tbody tr.is-active .db-bk-name.clickable {
  color: var(--mint, #34d399);
}

/* Wide screens (≥1440): graafi saa hiukan enemmän tilaa, personal pysyy oikealla */
@media (min-width: 1440px) {
  .db-row2 {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }
}

/* === V5+ (mockup v3.5): Kalenteri-otsikko nuolinapeilla === */
.db-cal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 11px;
}
.db-cal-arr {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--text, #f1f3f9);
  width: 26px; height: 26px;
  border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; line-height: 1;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
  transition: background .12s, border-color .12s;
}
.db-cal-arr:hover {
  background: rgba(52,211,153,.10);
  border-color: rgba(52,211,153,.30);
  color: var(--mint, #34d399);
}
.db-cal-arr.dim { opacity: .35; pointer-events: none; }
.db-cal-title { flex: 1; min-width: 0; justify-content: center; }
.db-cal-today-link {
  display: block; width: 100%;
  margin-top: 10px;
  background: rgba(52,211,153,.06);
  border: 1px solid rgba(52,211,153,.22);
  color: var(--mint, #34d399);
  border-radius: 7px;
  padding: 6px 10px;
  font-size: 11.5px; font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.db-cal-today-link:hover { background: rgba(52,211,153,.14); }
.db-cal-title {
  display: flex; align-items: center; gap: 8px;
}
.db-cal-title svg {
  width: 14px; height: 14px;
  color: var(--mint, #34d399);
}
.db-cal-title .db-cal-month {
  font-size: 14px; font-weight: 800;
  letter-spacing: -.01em;
  color: var(--text, #f1f3f9);
}
.db-cal-profit-tag {
  display: inline-flex; align-items: center;
  background: rgba(52,211,153,.10);
  color: var(--mint, #34d399);
  font-size: 12px; font-weight: 800;
  padding: 4px 9px;
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
}
.db-cal-profit-tag.neg {
  background: rgba(248,113,113,.10);
  color: #f87171;
}

/* Foot row: ‹ Edellinen / Tänään / Seuraava › */
.db-cal-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px solid var(--border, #242b3d);
}
.db-cal-nav-btn {
  background: transparent;
  border: none;
  color: var(--text-dim, #7a8094);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: .12s;
}
.db-cal-nav-btn:hover {
  color: var(--mint, #34d399);
  background: rgba(52,211,153,.06);
}
.db-cal-nav-btn.today-btn { color: var(--mint, #34d399); }
.db-cal-nav-btn.dim { opacity: .45; pointer-events: none; }

/* Vanha tyyli backward-compat (jos jossain vielä käytössä) */
.db-cal-nav {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--text, #f1f3f9);
  border-radius: 7px;
  font-size: 16px; font-weight: 700; line-height: 1;
  cursor: pointer; font-family: inherit;
}
.db-cal-nav:hover { background: rgba(255,255,255,.08); }
.db-cal-nav.dim { opacity: .45; }

/* === Horisontaalinen breakdown -taulukko (Urheilulajit / Toimistot toggle) === */
.db-breakdown-panel {
  background: var(--surface, #141925);
  border: 1px solid var(--border, #242b3d);
  border-radius: 14px;
  padding: 0;
  margin-bottom: 14px;
  overflow: hidden;
}
.db-bk-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 14px 18px;
  border-bottom: 1px solid var(--border, #242b3d);
}
.db-bk-tabs {
  display: inline-flex; gap: 4px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 10px;
  padding: 3px;
}
.db-bk-tab {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700;
  color: var(--text-dim, #8b94a8);
  background: transparent;
  border: none;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: -.005em;
  transition: background .12s, color .12s;
}
.db-bk-tab:hover { color: var(--text, #f1f3f9); }
.db-bk-tab.on {
  background: var(--bg, #0a0e1a);
  color: var(--text, #f1f3f9);
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.db-bk-tab.on svg { color: var(--mint, #34d399); }
.db-bk-meta {
  font-size: 11.5px; color: var(--text-dim, #8b94a8); font-weight: 600;
}
.db-bk-actions {
  display: inline-flex; align-items: center; gap: 8px;
}
.db-bk-actbtn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700;
  color: var(--text, #f1f3f9);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: -.005em;
  transition: background .12s, border-color .12s;
}
.db-bk-actbtn:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.20);
}
.db-bk-actbtn svg { color: var(--mint, #34d399); flex-shrink: 0; }
.db-bk-balance {
  font-weight: 800 !important;
  color: var(--mint, #34d399) !important;
  cursor: pointer;
  transition: background .12s;
  position: relative;
}
.db-bk-balance:hover {
  background: rgba(16,185,129,.08);
}
.db-bk-balance::after {
  content: '✎';
  font-size: 9px;
  opacity: 0;
  margin-left: 4px;
  color: var(--text-dim);
  transition: opacity .12s;
}
.db-bk-balance:hover::after { opacity: 1; }

@media (max-width: 900px) {
  .db-bk-head {
    flex-direction: column; align-items: stretch; gap: 10px;
  }
  .db-bk-actions { flex-wrap: wrap; }
  .db-bk-meta { margin-left: auto; }
}
.db-bk-empty {
  padding: 30px 18px; text-align: center;
  color: var(--text-dim, #8b94a8); font-size: 13px;
}
.db-bk-tablewrap { overflow-x: auto; }
.db-bk-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 720px; }
.db-bk-table thead th {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-dim, #8b94a8);
  text-align: left;
  padding: 11px 14px;
  background: rgba(255,255,255,.018);
  white-space: nowrap;
}
.db-bk-table th.num, .db-bk-table td.num { text-align: right; }
.db-bk-table tbody td {
  padding: 12px 14px;
  border-top: 1px solid var(--border, #242b3d);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.db-bk-table tbody tr:hover { background: rgba(255,255,255,.018); }
.db-bk-table .db-bk-name {
  font-weight: 700; color: var(--text, #f1f3f9);
  text-transform: capitalize;
}
.db-bk-table td.pos { color: var(--mint, #34d399); font-weight: 700; }
.db-bk-table td.neg { color: #f87171; font-weight: 700; }
@media (max-width: 768px) {
  .db-bk-head { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 14px; }
  .db-bk-tabs { justify-content: stretch; }
  .db-bk-tab { flex: 1; justify-content: center; }
  .db-bk-meta { text-align: right; }
}

/* === OCR Vetokuitin tunnistus (Lisää veto -modaalin laajennus) === */
.bv-tabswitch {
  display: flex; gap: 5px;
  padding: 14px 24px 4px;
  border-bottom: 1px solid var(--border, #232a3a);
}
.bv-tabswitch button {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: inherit; font-size: 12.5px; font-weight: 700;
  color: var(--text-dim, #7a8094);
  background: transparent; border: none;
  padding: 9px 14px;
  border-radius: 9px 9px 0 0;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color .15s, background .15s, border-color .15s;
}
.bv-tabswitch button.on {
  color: var(--mint, #34d399);
  border-bottom-color: var(--mint, #34d399);
  background: rgba(16,185,129,.06);
}
.bv-tabswitch button:hover:not(.on) { color: var(--text, #e6e9f2); }
.bv-tabswitch button svg { width: 14px; height: 14px; }

.bv-ocr-pane { padding: 18px 24px 18px; }

.bv-dz {
  display: flex; flex-direction: column; align-items: center; gap: 11px;
  padding: 32px 22px;
  background: linear-gradient(135deg, rgba(16,185,129,.07), rgba(132,204,22,.04));
  border: 2px dashed rgba(16,185,129,.4);
  border-radius: 14px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.bv-dz:hover, .bv-dz:focus {
  border-color: var(--green, #10b981);
  background: linear-gradient(135deg, rgba(16,185,129,.11), rgba(132,204,22,.06));
  outline: none;
}
.bv-dz.drag {
  border-color: var(--mint, #34d399);
  background: linear-gradient(135deg, rgba(16,185,129,.18), rgba(132,204,22,.1));
  border-style: solid;
}
.bv-dz-ico {
  width: 54px; height: 54px; border-radius: 13px;
  background: linear-gradient(135deg, var(--green, #10b981), var(--accent, #84cc16));
  color: #04130c;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 30px rgba(16,185,129,.32);
}
.bv-dz-ico svg { width: 28px; height: 28px; }
.bv-dz-t { font-size: 14.5px; font-weight: 800; color: var(--text); letter-spacing: -.01em; }
.bv-dz-s {
  font-size: 12px; color: var(--text-muted, #b4bacb);
  font-weight: 500; line-height: 1.5;
  max-width: 380px;
}
.bv-dz-or {
  font-size: 11px; font-weight: 700;
  color: var(--text-dim);
  margin-top: 3px; letter-spacing: .05em; text-transform: uppercase;
}
.bv-dz-pickbtn {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 800;
  color: var(--mint, #34d399);
  background: rgba(16,185,129,.13);
  border: 1px solid rgba(16,185,129,.35);
  padding: 8px 14px; border-radius: 10px;
  cursor: pointer; font-family: inherit;
}
.bv-dz-pickbtn:hover { background: rgba(16,185,129,.2); }
.bv-dz-pickbtn svg { width: 14px; height: 14px; }
.bv-dz-paste {
  font-size: 11px; color: var(--text-dim);
  font-weight: 500;
  display: flex; align-items: center; gap: 5px;
}
.bv-dz-paste .kb {
  font-size: 9.5px; font-weight: 700;
  background: var(--bg-surface);
  border: 1px solid var(--border-2, #323a52);
  padding: 2px 5px; border-radius: 4px;
  color: var(--text-muted);
}
.bv-dz-supports {
  display: flex; gap: 10px; margin-top: 6px;
  font-size: 10.5px; color: var(--text-dim); font-weight: 600;
}
.bv-dz-supports span {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--bg-surface); border: 1px solid var(--border);
  padding: 3px 8px; border-radius: 14px;
}

/* Progress */
.bv-ocr-progress {
  display: flex; flex-direction: column; gap: 10px;
  padding: 24px 18px;
  background: var(--surface-2, #1c2231);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.bv-ocr-progress-inner {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 700; color: var(--text);
}
.bv-ocr-spin {
  width: 18px; height: 18px;
  border: 2.5px solid rgba(16,185,129,.3);
  border-top-color: var(--mint);
  border-radius: 50%;
  animation: ocrSpin .8s linear infinite;
}
@keyframes ocrSpin { to { transform: rotate(360deg); } }
.bv-ocr-bar {
  height: 5px; background: var(--bg); border-radius: 3px; overflow: hidden;
}
.bv-ocr-bar-fill {
  height: 100%; background: linear-gradient(90deg, var(--green), var(--mint));
  width: 0%; transition: width .25s ease;
}

/* Detected fields */
.bv-detected {
  background: linear-gradient(135deg, rgba(16,185,129,.06), transparent);
  border: 1px solid rgba(16,185,129,.28);
  border-radius: 12px;
  padding: 13px 14px;
}
.bv-detected-h {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 9px;
}
.bv-detected-ic {
  width: 24px; height: 24px; border-radius: 7px;
  background: rgba(16,185,129,.18);
  color: var(--mint);
  display: flex; align-items: center; justify-content: center;
}
.bv-detected-ic svg { width: 13px; height: 13px; }
.bv-detected-t { font-size: 12.5px; font-weight: 800; color: var(--text); }
.bv-detected-s { font-size: 10.5px; color: var(--text-dim); font-weight: 500; margin-left: auto; }
.bv-detected-fields {
  display: grid; grid-template-columns: 1fr 1fr; gap: 9px;
}
.bv-detf {
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: 9px; padding: 8px 10px;
}
.bv-detf-l {
  font-size: 9.5px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-dim);
}
.bv-detf-v {
  font-size: 13px; font-weight: 800; color: var(--text);
  margin-top: 2px; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bv-conf {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 9.5px; font-weight: 700; margin-top: 3px;
}
.bv-conf .d { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.bv-conf.hi { color: var(--mint, #34d399); }
.bv-conf.lo { color: var(--amber, #f59e0b); }

.bv-detected-actions {
  display: flex; gap: 10px; margin-top: 12px;
}
.bv-detected-retry, .bv-detected-fill {
  flex: 1;
  font-family: inherit; font-size: 12.5px; font-weight: 700;
  padding: 9px 12px; border-radius: 9px;
  cursor: pointer; transition: .15s;
}
.bv-detected-retry {
  background: transparent; color: var(--text-dim);
  border: 1px solid var(--border-2);
}
.bv-detected-retry:hover { color: var(--text); border-color: var(--mint); }
.bv-detected-fill {
  background: var(--green, #10b981); color: #04130c;
  border: none;
}
.bv-detected-fill:hover { background: var(--mint, #34d399); }

.bv-ocr-raw {
  margin-top: 12px; font-size: 11px;
  color: var(--text-dim);
}
.bv-ocr-raw summary { cursor: pointer; padding: 4px 0; }
.bv-ocr-raw pre {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px;
  max-height: 200px; overflow: auto;
  font-size: 11px; line-height: 1.5;
  color: var(--text-muted);
  white-space: pre-wrap; word-wrap: break-word;
}

@media (max-width: 600px) {
  .bv-ocr-pane { padding: 14px 16px; }
  .bv-dz { padding: 24px 16px; }
  .bv-dz-t { font-size: 13.5px; }
  .bv-dz-s { font-size: 11.5px; }
  .bv-detected-fields { grid-template-columns: 1fr; }
}

/* === Pikahaku CTRL+K (cmd palette) === */
.cmd-overlay {
  position: fixed; inset: 0;
  background: rgba(5,8,14,.78);
  backdrop-filter: blur(6px);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 80px;
  z-index: 10000;
  animation: cmdFadeIn .12s ease-out;
}
@keyframes cmdFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.cmd {
  width: 600px; max-width: calc(100vw - 32px);
  background: var(--bg-surface, #141925);
  border: 1px solid var(--border-2, #323a52);
  border-radius: 14px;
  box-shadow: 0 40px 100px rgba(0,0,0,.6);
  overflow: hidden;
  display: flex; flex-direction: column;
  max-height: calc(100vh - 120px);
}
.cmd-input {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border, #232a3a);
  flex-shrink: 0;
}
.cmd-input input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--text, #f1f3f9);
  font-family: inherit; font-size: 16px; font-weight: 600;
  letter-spacing: -.01em;
  min-width: 0;
}
.cmd-input input::placeholder { color: var(--text-dim, #7a8094); }
.cmd-esc {
  font-size: 10.5px; font-weight: 700;
  color: var(--text-dim, #7a8094);
  background: var(--surface-2, #1c2231);
  border: 1px solid var(--border, #232a3a);
  padding: 3px 8px; border-radius: 6px;
  flex-shrink: 0;
}
.cmd-body {
  padding: 8px 0 6px;
  overflow-y: auto;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: rgba(120,130,160,.35) transparent;
}
.cmd-body::-webkit-scrollbar { width: 6px; }
.cmd-body::-webkit-scrollbar-thumb { background: rgba(120,130,160,.35); border-radius: 4px; }
.cmd-section {
  font-size: 10px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-dim, #7a8094);
  padding: 10px 18px 6px;
}
.cmd-item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 18px;
  cursor: pointer; transition: background .1s;
}
.cmd-item.sel { background: rgba(16,185,129,.10); }
.cmd-item:hover { background: rgba(255,255,255,.025); }
.cmd-item .cmi-ico {
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--surface-2, #1c2231);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--mint, #34d399);
  flex-shrink: 0;
}
.cmd-item .cmi-ico svg { width: 16px; height: 16px; }
.cmd-item .cmi-ico.cmd-quick {
  background: linear-gradient(135deg, var(--green, #10b981), var(--accent, #84cc16));
  color: #04130c; border-color: transparent;
}
.cmd-item .cmi-tx { flex: 1; min-width: 0; }
.cmd-item .cmi-t {
  font-size: 13.5px; font-weight: 700;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cmd-item .cmi-t em {
  font-style: normal;
  background: rgba(16,185,129,.2); color: var(--mint, #34d399);
  padding: 0 2px; border-radius: 3px;
}
.cmd-item .cmi-s {
  font-size: 11.5px; color: var(--text-dim, #7a8094);
  font-weight: 500; margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cmd-item .cmi-meta {
  font-size: 11px; font-weight: 700;
  color: var(--text-muted, #b4bacb);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.cmd-item .cmi-meta.pos { color: var(--mint, #34d399); }
.cmd-item .cmi-meta.neg { color: #f87171; }
.cmd-item .cmi-kbd {
  font-size: 10px; font-weight: 700;
  color: var(--text-dim);
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 3px 7px; border-radius: 5px;
  flex-shrink: 0;
}
.cmd-empty {
  padding: 40px 20px; text-align: center;
  color: var(--text-dim);
  font-size: 13px;
}
.cmd-foot {
  display: flex; align-items: center; gap: 14px;
  padding: 9px 18px;
  border-top: 1px solid var(--border);
  font-size: 10.5px; color: var(--text-dim);
  font-weight: 600;
  background: var(--bg-surface);
  flex-shrink: 0;
}
.cmd-grp { display: inline-flex; align-items: center; gap: 5px; }
.cmd-kb {
  font-size: 9.5px; font-weight: 700;
  background: var(--surface-2); border: 1px solid var(--border);
  padding: 2px 5px; border-radius: 4px;
  color: var(--text-muted, #b4bacb);
}

@media (max-width: 600px) {
  .cmd-overlay { padding-top: 50px; padding-left: 12px; padding-right: 12px; }
  .cmd-input input { font-size: 15px; }
  .cmd-item .cmi-t { font-size: 13px; }
  .cmd-item .cmi-s { font-size: 11px; }
  .cmd-foot { flex-wrap: wrap; gap: 8px; }
}

/* === V2: Bankroll-sivun rakenne (mockup-bankroll.html) === */
.bk-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 22px 24px 60px;
}
.bk-ph {
  font-size: 24px; font-weight: 800;
  letter-spacing: -.03em;
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 4px;
  color: var(--text);
}
.bk-ph-ic {
  width: 30px; height: 30px; border-radius: 9px;
  background: linear-gradient(135deg, var(--green, #10b981), var(--accent, #84cc16));
  color: #04130c;
  display: flex; align-items: center; justify-content: center;
}
.bk-ph-ic svg { width: 17px; height: 17px; }
.bk-psub {
  font-size: 13px; color: var(--text-dim);
  font-weight: 500; margin-top: 4px; margin-bottom: 18px;
}

/* Lisäasetukset disclosure */
.bk-extras {
  background: var(--bg-surface, #141925);
  border: 1px solid var(--border, #232a3a);
  border-radius: 12px;
  padding: 0;
  margin-top: 14px;
}
.bk-extras > summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  font-size: 13px; font-weight: 700;
  color: var(--text);
  user-select: none;
}
.bk-extras > summary::-webkit-details-marker { display: none; }
.bk-extras-ic {
  width: 26px; height: 26px;
  background: var(--surface-2, #1c2231);
  border: 1px solid var(--border);
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dim);
  flex-shrink: 0;
}
.bk-extras-ic svg { width: 14px; height: 14px; }
.bk-extras-hint {
  font-size: 11.5px; color: var(--text-dim);
  font-weight: 500; margin-left: auto; margin-right: 10px;
  white-space: nowrap;
}
.bk-extras-chev {
  width: 14px; height: 14px; color: var(--text-dim);
  transition: transform .2s;
}
.bk-extras[open] .bk-extras-chev { transform: rotate(180deg); }
.bk-extras-body {
  padding: 14px 18px 18px;
  border-top: 1px solid var(--border);
}
@media (max-width: 600px) {
  .bk-extras-hint { display: none; }
  .bk-extras > summary { padding: 12px 14px; }
}

/* === V2: Bankroll-käyrä paneeli + Yksikkö-laskuri + Transactions === */
.bk-row2 {
  display: grid; grid-template-columns: 1fr; gap: 14px;
  margin-bottom: 14px;
}
@media (min-width: 900px) { .bk-row2 { grid-template-columns: 1.4fr 1fr; } }

.bk-chart-panel {
  background: var(--bg-surface, #141925);
  border: 1px solid var(--border, #232a3a);
  border-radius: 12px;
  padding: 16px 18px;
}
.bk-chart-head {
  display: flex; justify-content: space-between;
  align-items: baseline; margin-bottom: 12px;
}
.bk-chart-head h3 { font-size: 13.5px; font-weight: 800; color: var(--text); margin: 0; }
.bk-chart-seg {
  display: inline-flex; gap: 3px;
  background: var(--surface-2, #1c2231);
  padding: 3px; border-radius: 8px;
}
.bk-chart-seg button {
  font-family: inherit; font-size: 11px; font-weight: 700;
  color: var(--text-dim); background: none; border: none;
  padding: 5px 9px; border-radius: 6px; cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.bk-chart-seg button.on { background: var(--bg, #0a0e1a); color: var(--text); }

/* X-akselin päivämäärät */
.bk-xaxis {
  display: flex; justify-content: space-between;
  padding: 8px 4px 0;
  font-size: 10.5px; font-weight: 600;
  color: var(--text-dim, #7a8094);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 600px) {
  .bk-xaxis { font-size: 9.5px; padding: 6px 2px 0; }
}

.bk-unit-card {
  background: var(--bg-surface, #141925);
  border: 1px solid var(--border, #232a3a);
  border-radius: 12px;
  padding: 16px 18px;
}
.bk-unit-card h3 {
  font-size: 13.5px; font-weight: 800;
  margin: 0 0 14px;
  display: flex; align-items: center; gap: 8px;
  color: var(--text);
}
.bk-uic-ic {
  width: 22px; height: 22px; border-radius: 6px;
  background: rgba(16,185,129,.13); color: var(--mint, #34d399);
  display: flex; align-items: center; justify-content: center;
}
.bk-uic-ic svg { width: 13px; height: 13px; }
.bk-uc-current {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 14px;
}
.bk-uc-current .v {
  font-size: 32px; font-weight: 900;
  color: var(--mint, #34d399);
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.bk-uc-current .l {
  font-size: 13px; color: var(--text-dim); font-weight: 600;
}

/* Dynaamisen yksikön kaava-rivi */
.bk-uc-formula {
  display: flex; flex-direction: column; gap: 2px;
  font-size: 12px; color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 12px;
  padding: 8px 11px;
  background: rgba(16,185,129,.05);
  border: 1px solid rgba(16,185,129,.18);
  border-radius: 8px;
  font-variant-numeric: tabular-nums;
}
.bk-uc-formula .bk-uc-sub {
  font-size: 11px; color: var(--text-dim);
  font-weight: 500;
}

/* V2: Panostusstrategia-kortti (Bankroll-sivu) */
.bk-strategy-card {
  background: var(--bg-surface, #141925);
  border: 1px solid var(--border, #232a3a);
  border-radius: 12px;
  padding: 18px 22px;
  margin-bottom: 14px;
}
.bk-strategy-card h3 {
  font-size: 14px; font-weight: 800;
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 4px;
  color: var(--text);
}
.bk-str-sub {
  font-size: 12.5px; color: var(--text-dim);
  font-weight: 500;
  margin-bottom: 16px;
  line-height: 1.5;
}
.bk-str-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 768px) {
  .bk-str-grid { grid-template-columns: 1fr; gap: 14px; }
}
.bk-str-field { display: flex; flex-direction: column; gap: 6px; }
.bk-str-field.full { grid-column: 1 / -1; }
.bk-str-field label {
  font-size: 11px; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-dim);
}
.bk-str-field input[type="number"] {
  background: var(--bg, #0a0e1a);
  border: 1.5px solid var(--border-2, #323a52);
  border-radius: 9px;
  padding: 11px 14px;
  font-size: 15px; font-weight: 800;
  color: var(--text);
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  outline: none;
  transition: border-color .15s;
}
.bk-str-field input[type="number"]:focus { border-color: var(--mint, #34d399); }
.bk-str-field .hint {
  font-size: 11px; color: var(--text-dim);
  font-weight: 500;
  line-height: 1.5;
  margin-top: 2px;
}
.bk-str-seg {
  display: inline-flex; gap: 3px;
  background: var(--surface-2, #1c2231);
  padding: 4px;
  border-radius: 11px;
  width: max-content;
  flex-wrap: wrap;
}
.bk-str-seg button {
  font-family: inherit;
  font-size: 12.5px; font-weight: 700;
  color: var(--text-dim);
  background: transparent;
  border: none;
  padding: 8px 13px;
  border-radius: 8px;
  cursor: pointer;
  transition: .15s;
}
.bk-str-seg button:hover:not(.on) { color: var(--text); }
.bk-str-seg button.on {
  background: var(--bg, #0a0e1a);
  color: var(--mint, #34d399);
  box-shadow: 0 1px 0 rgba(255,255,255,.04);
}
.bk-str-toggle-field { gap: 8px; }
.bk-str-toggle-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: var(--bg, #0a0e1a);
  border: 1px solid var(--border);
  border-radius: 9px;
}

/* Toggle-rivi (dynaaminen yksikkökoko) */
.bk-uc-toggle-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: var(--bg, #0a0e1a);
  border: 1px solid var(--border);
  border-radius: 9px;
  margin-bottom: 12px;
}
.bk-uc-toggle-lbl {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.bk-uc-toggle-lbl strong {
  font-size: 12.5px; font-weight: 700;
  color: var(--text);
}
.bk-uc-toggle-lbl span {
  font-size: 11px; color: var(--text-dim);
  font-weight: 500; line-height: 1.4;
}
.bk-uc-fields { display: flex; flex-direction: column; gap: 9px; }
.bk-uc-field {
  display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: 10px;
  padding: 8px 12px;
  background: var(--bg, #0a0e1a);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12.5px;
}
.bk-uc-field .l { color: var(--text-dim); font-weight: 600; }
.bk-uc-field .v { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text); }
.bk-uc-field.suggest {
  border-color: rgba(245,158,11,.32);
  background: linear-gradient(135deg, rgba(245,158,11,.06), var(--bg));
}
.bk-uc-field.suggest .v { color: var(--amber, #f59e0b); }

.bk-uc-update {
  margin-top: 11px;
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; color: var(--amber, #f59e0b);
  font-weight: 600;
  padding: 9px 11px;
  background: rgba(245,158,11,.07);
  border: 1px solid rgba(245,158,11,.2);
  border-radius: 8px;
}
.bk-uc-update svg { width: 14px; height: 14px; flex-shrink: 0; }
.bk-uc-btn {
  margin-left: auto;
  font-size: 11.5px; font-weight: 800;
  color: #04130c;
  background: var(--amber, #f59e0b);
  border: none; border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}

.bk-tx-panel {
  background: var(--bg-surface, #141925);
  border: 1px solid var(--border, #232a3a);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 14px;
}
.bk-tx-panel h3 {
  font-size: 13.5px; font-weight: 800;
  margin: 0 0 12px;
  display: flex; justify-content: space-between; align-items: center;
  color: var(--text);
}
.bk-tx-add {
  font-size: 11.5px; font-weight: 800;
  color: #04130c;
  background: linear-gradient(135deg, var(--green, #10b981), var(--accent, #84cc16));
  border: none; border-radius: 7px;
  padding: 6px 11px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  font-family: inherit;
}
.bk-tx-add svg { width: 11px; height: 11px; stroke-width: 2.7; }
.bk-tx-row {
  display: grid;
  grid-template-columns: 32px 1fr auto auto;
  gap: 11px; align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
}
.bk-tx-row:last-child { border-bottom: none; }
.bk-tx-ic {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.bk-tx-ic.dep { background: rgba(16,185,129,.16); color: var(--mint, #34d399); }
.bk-tx-ic.wd { background: rgba(239,68,68,.16); color: #fca5a5; }
.bk-tx-ic svg { width: 15px; height: 15px; }
.bk-tx-nm { display: flex; flex-direction: column; gap: 1px; }
.bk-tx-nm .n { font-size: 13px; font-weight: 700; color: var(--text); }
.bk-tx-nm .d { font-size: 10.5px; color: var(--text-dim); font-weight: 500; }
.bk-tx-am {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.bk-tx-am.pos { color: var(--mint, #34d399); }
.bk-tx-am.neg { color: #f87171; }
.bk-tx-bal {
  font-size: 11.5px; color: var(--text-muted);
  font-variant-numeric: tabular-nums; font-weight: 600;
}

/* === V2: Bankroll-yhteenveto + riskirajat === */
.bk-kpis {
  display: grid;
  grid-template-columns: 1fr;
  gap: 11px;
  margin-bottom: 16px;
}
@media (min-width: 760px) {
  .bk-kpis { grid-template-columns: 2fr 1fr 1fr 1fr; }
}
.bk-kpi {
  background: var(--bg-surface, #141925);
  border: 1px solid var(--border, #232a3a);
  border-radius: 12px;
  padding: 14px 16px;
  position: relative;
}
.bk-kpi.hero {
  background: linear-gradient(135deg, rgba(16,185,129,.14), rgba(132,204,22,.06));
  border-color: rgba(16,185,129,.4);
}
.bk-kpi .l {
  font-size: 10.5px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-dim, #7a8094);
}
.bk-kpi .v {
  font-size: 26px; font-weight: 900;
  letter-spacing: -.025em; margin-top: 6px; line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.bk-kpi.hero .v { font-size: 32px; color: var(--mint, #34d399); }
.bk-kpi .v.pos { color: var(--mint, #34d399); }
.bk-kpi .v.neg { color: #f87171; }
.bk-kpi .s {
  font-size: 11px; color: var(--text-dim);
  font-weight: 500; margin-top: 5px;
}
.bk-kpi .s .ch { font-weight: 700; }
.bk-kpi .s .ch.pos { color: var(--mint, #34d399); }
.bk-kpi .s .ch.neg { color: #f87171; }
.bk-kpi .s .pos { color: var(--mint, #34d399); }
.bk-kpi .s .neg { color: #f87171; }
.bk-kpi .bk-spk {
  position: absolute; right: 14px; top: 14px;
  width: 120px; height: 34px;
}
@media (max-width: 600px) {
  .bk-kpi .bk-spk { width: 80px; height: 28px; }
  .bk-kpi.hero .v { font-size: 28px; }
}

.bk-limits {
  background: var(--bg-surface, #141925);
  border: 1px solid var(--border, #232a3a);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 16px;
}
.bk-limits h3 {
  font-size: 13.5px; font-weight: 800;
  margin: 0 0 12px;
  color: var(--text);
}
.bk-limit {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
}
.bk-limit:last-child { border-bottom: none; }
@media (max-width: 640px) {
  .bk-limit { grid-template-columns: 1fr auto; gap: 8px; }
  .bk-limit .bk-progress { grid-column: 1 / -1; order: 99; margin-top: 4px; }
}
.bk-limit .bk-l {
  font-weight: 700; color: var(--text);
}
.bk-limit .bk-l span {
  display: block; font-size: 10.5px;
  color: var(--text-dim); font-weight: 500; margin-top: 1px;
}
.bk-limit .bk-progress {
  position: relative; height: 8px;
  background: var(--surface-2, #1c2231);
  border-radius: 4px; overflow: hidden;
}
.bk-limit .bk-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, var(--mint, #34d399), var(--green-2, #22c55e));
  border-radius: 4px; transition: width .3s ease;
}
.bk-limit .bk-fill.warn {
  background: linear-gradient(90deg, var(--amber, #f59e0b), #f59e0b);
}
.bk-limit .bk-v {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
  color: var(--text);
}
.bk-limit .bk-v.warn { color: var(--amber, #f59e0b); }

/* === V2: Arbitraasit-sivu (mockup-arbitraasit-sivu.html) === */
.arb-page { max-width: 1480px; margin: 0 auto; padding: 0 18px 60px; }
.arb-phead { display: flex; justify-content: space-between; align-items: flex-end; margin: 18px 0 16px; gap: 14px; flex-wrap: wrap; }
.arb-phead h1 { font-size: 22px; font-weight: 800; letter-spacing: -.025em; display: flex; align-items: center; gap: 10px; margin: 0; color: var(--text); }
.arb-ph-ic { width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(135deg, var(--green, #10b981), var(--accent, #84cc16)); color: #04130c; display: flex; align-items: center; justify-content: center; }
.arb-ph-ic svg { width: 16px; height: 16px; }
.arb-sub { font-size: 12.5px; color: var(--text-dim); font-weight: 500; margin-top: 3px; }
.arb-actions { display: flex; align-items: center; gap: 9px; }
.arb-sound-btn { width: 34px; height: 34px; border-radius: 9px; border: 1px solid rgba(16,185,129,.32); background: rgba(16,185,129,.08); color: var(--mint, #34d399); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.arb-sound-btn.off { background: var(--surface-2, #1c2231); color: var(--text-dim); border-color: var(--border-2); }
.arb-sound-btn svg { width: 15px; height: 15px; }
.arb-refresh-info { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--mint, #34d399); font-weight: 700; background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.22); padding: 6px 11px; border-radius: 8px; }
.arb-refresh-info .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--mint, #34d399); animation: arbPulse 1.6s infinite; }
@keyframes arbPulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

/* Mockupin mukaan KPI:t aina 3 saraketta, myös mobiilissa */
.arb-kpis { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 11px; margin-bottom: 16px; }
@media (max-width: 600px) {
  .arb-kpis { gap: 7px; }
  .arb-kpi { padding: 9px 11px; text-align: center; }
  .arb-kpi .l { font-size: 9px; }
  .arb-kpi .v { font-size: 16px; }
  .arb-kpi .s { font-size: 9.5px; }
}
.arb-kpi { background: var(--bg-surface, #141925); border: 1px solid var(--border, #232a3a); border-radius: 11px; padding: 12px 14px; }
.arb-kpi .l { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); }
.arb-kpi .v { font-size: 22px; font-weight: 900; letter-spacing: -.025em; margin-top: 4px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--text); }
.arb-kpi .v.pos { color: var(--mint, #34d399); }
.arb-kpi .v.neg { color: #f87171; }
.arb-kpi .s { font-size: 10.5px; color: var(--text-dim); font-weight: 500; margin-top: 4px; }

.arb-alist { display: flex; flex-direction: column; gap: 10px; }

/* X-nappi kortin oikeassa yläkulmassa — hylkää arb näkyvistä */
.arb-card { position: relative; }
.arb-dismiss {
  position: absolute;
  top: 8px; right: 8px;
  width: 24px; height: 24px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: rgba(120, 130, 160, .12);
  color: var(--text-dim, #7a8094);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-family: inherit;
  z-index: 2;
  opacity: 0; transition: opacity .15s, background .15s, color .15s, border-color .15s;
}
.arb-card:hover .arb-dismiss { opacity: 1; }
.arb-dismiss:hover {
  background: rgba(239,68,68,.12);
  color: #f87171;
  border-color: rgba(239,68,68,.32);
}
.arb-dismiss svg { width: 13px; height: 13px; }
/* Mobiilissa X aina näkyvissä */
@media (max-width: 760px) {
  .arb-dismiss { opacity: .7; top: 9px; right: 9px; width: 26px; height: 26px; }
  .arb-dismiss:active { background: rgba(239,68,68,.18); color: #f87171; }
  /* Marginaali siirretty hieman jotta X mahtuu */
  .arb-card .arb-margin { right: 44px !important; }
}

/* "N arb hylätty" -ilmoituspalkki + palauta-linkki */
.arb-dismissed-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 8px 14px;
  background: rgba(120,130,160,.08);
  border: 1px dashed var(--border-2, #323a52);
  border-radius: 9px;
  margin-bottom: 10px;
  font-size: 12px; color: var(--text-dim, #7a8094);
  font-weight: 600;
}
.arb-dismissed-bar button {
  font-size: 12px; font-weight: 700;
  color: var(--mint, #34d399);
  background: rgba(16,185,129,.13);
  border: 1px solid rgba(16,185,129,.32);
  border-radius: 7px;
  padding: 5px 11px; cursor: pointer; font-family: inherit;
}
.arb-dismissed-bar button:hover { background: rgba(16,185,129,.22); }
.arb-card {
  display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center;
  padding: 14px 16px;
  background: var(--bg-surface, #141925);
  border: 1.5px solid var(--border, #232a3a);
  border-radius: 12px;
  transition: .12s; position: relative; overflow: hidden;
}
.arb-card:hover { border-color: rgba(16,185,129,.4); }
.arb-card.new::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3.5px; background: linear-gradient(180deg, var(--mint, #34d399), var(--accent, #84cc16)); }
.arb-l { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.arb-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.arb-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 5px; }
.arb-pill.new { background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; }
.arb-pill.fresh { background: rgba(16,185,129,.14); color: var(--mint, #34d399); }
.arb-pill.aging { background: rgba(245,158,11,.16); color: var(--amber, #f59e0b); }
.arb-pill .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: arbPulse 1.6s infinite; }
.arb-name { font-size: 14.5px; font-weight: 800; color: var(--text); letter-spacing: -.01em; }
.arb-meta-row { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text-dim); font-weight: 600; flex-wrap: wrap; }
.arb-meta-row .alks { color: var(--text); font-weight: 700; }
/* Leg-rivit DESKTOPILLA: vierekkäin inline-pilleinä (mockup-tarkka) */
.arb-legs-mini {
  display: flex; align-items: center;
  gap: 6px; margin-top: 4px; flex-wrap: wrap;
}
.arb-leg-mini {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px;
  background: var(--bg, #0a0e1a);
  border: 1px solid var(--border);
  padding: 5px 9px;
  border-radius: 7px;
  font-weight: 600;
  color: var(--text-muted);
}
.arb-leg-mini .nm {
  display: inline-flex; align-items: center; gap: 4px;
  min-width: 0; white-space: nowrap;
}
.arb-leg-mini .nm b { color: var(--text); font-weight: 700; }
.arb-leg-mini .o {
  flex-shrink: 0;
  color: var(--mint, #34d399);
  font-weight: 800; font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.arb-leg-mini .lg {
  width: 18px; height: 18px;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 900; color: #04130c;
  flex-shrink: 0; background: #facc15;
}
.arb-leg-mini .lg.bet365 { background: #027B5B; color: #fff; }
.arb-leg-mini .lg.coolbet { background: #facc15; color: #1a1a1a; }
.arb-leg-mini .lg.veikkaus { background: #2563eb; color: #fff; }
.arb-leg-mini .lg.unibet { background: #147B45; color: #fff; }
.arb-leg-mini .lg.pinnacle { background: #ef4444; color: #fff; }
.arb-leg-mini .lg.betsson { background: #a855f7; color: #fff; }
.arb-leg-mini .lg.betfair { background: #ffc107; color: #1a1a1a; }
.arb-leg-mini .lg.nordicbet { background: #1e40af; color: #fff; }
.arb-leg-mini .lg.leovegas { background: #ef4444; color: #fff; }
.arb-leg-mini .side { color: var(--text); font-weight: 700; }
.arb-leg-mini .o { color: var(--mint, #34d399); font-weight: 800; font-variant-numeric: tabular-nums; }
.arb-margin { text-align: center; }
.arb-margin .v { font-size: 24px; font-weight: 900; color: var(--mint, #34d399); line-height: 1; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.arb-margin .l { font-size: 9.5px; color: var(--text-dim); font-weight: 700; margin-top: 3px; letter-spacing: .06em; text-transform: uppercase; }
.arb-exec {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
  color: #04130c;
  background: var(--mint, #34d399);
  border: none; border-radius: 9px;
  padding: 11px 22px; cursor: pointer;
  font-family: inherit;
  letter-spacing: -.01em; white-space: nowrap;
  transition: background .12s;
}
/* "Avaa molemmat" -nappi vierekkäin Pelaa-napin kanssa */
.arb-actions-group {
  display: inline-flex; gap: 8px; align-items: center;
}
.arb-open-both {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 12.5px; font-weight: 700;
  color: var(--text, #f1f3f9);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 9px;
  padding: 10px 14px; cursor: pointer;
  font-family: inherit;
  letter-spacing: -.005em; white-space: nowrap;
  transition: background .12s, border-color .12s;
}
.arb-open-both:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
}
.arb-open-both svg { flex-shrink: 0; opacity: .85; }
@media (max-width: 768px) {
  .arb-actions-group { flex-direction: column; gap: 6px; width: 100%; }
  .arb-open-both, .arb-actions-group .arb-exec { width: 100%; }
  .arb-open-both { padding: 9px 12px; font-size: 12px; }
}
.arb-exec:hover { background: var(--green, #10b981); }
.arb-exec:active { transform: translateY(1px); }

.arb-empty {
  padding: 60px 30px; text-align: center;
  background: var(--bg-surface);
  border: 1px dashed var(--border-2);
  border-radius: 13px;
  color: var(--text-dim);
  font-size: 13px; line-height: 1.5;
}
.arb-empty h3 { color: var(--text); font-size: 15px; font-weight: 800; margin: 10px 0 6px; }
.arb-empty p { margin: 0 0 16px; }
.arb-refresh-btn { font-size: 12.5px; font-weight: 800; color: var(--mint, #34d399); background: rgba(16,185,129,.13); border: 1px solid rgba(16,185,129,.32); border-radius: 8px; padding: 8px 14px; cursor: pointer; font-family: inherit; }

/* Mobile arb card — mockupin "mob-arb" -rakenne tarkasti ohjeesta OHJE-ARBITRAASI-MOBIILIKORTTI.md */
@media (max-width: 760px) {
  /* === Kortti === Block-pinottu, .arb-margin absoluuttisesti oikeaan yläkulmaan */
  .arb-card {
    display: block !important;
    grid-template-columns: initial !important;
    grid-template-areas: none !important;
    gap: 0 !important;
    background: var(--bg-surface, #141925) !important;
    border: 1.5px solid var(--border, #232a3a) !important;
    border-radius: 11px !important;
    padding: 12px 13px !important;
    position: relative;
    overflow: hidden;
  }
  .arb-card .arb-l { min-width: 0; padding-right: 0; }
  /* Tilaa absoluuttiselle marginaalille — vain header-sisältöön (meta/nimi/meta-row), EI leg-listalle */
  .arb-card .arb-l > .arb-meta,
  .arb-card .arb-l > .arb-name,
  .arb-card .arb-l > .arb-meta-row { padding-right: 80px; }
  /* Marginaali absoluuttinen oikeassa yläkulmassa — ei vie grid-tilaa, joten legs koko leveys */
  .arb-card .arb-margin {
    position: absolute !important;
    top: 12px !important;
    right: 13px !important;
    text-align: right !important;
    z-index: 1;
  }
  /* Vihreä gradientti vasen reuna kun .new */
  .arb-card.new::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3.5px;
    background: linear-gradient(180deg, var(--mint, #34d399), var(--accent, #84cc16));
  }

  /* === Yläosa: arb-l (vasen, info) — grid-item, column-pinottu sisältö === */
  .arb-card .arb-l {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px;
    min-width: 0;
  }
  .arb-card .arb-l .arb-meta {
    /* Pillit yhdellä rivillä */
    display: flex !important;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    margin-bottom: 3px;
  }
  .arb-card .arb-name {
    font-size: 13px;
    font-weight: 800;
    color: var(--text);
    line-height: 1.25;
    margin-top: 0;
  }
  .arb-card .arb-meta-row {
    font-size: 10.5px;
    color: var(--text-dim);
    font-weight: 600;
  }
  .arb-card .arb-meta-row .alks { color: var(--text); font-weight: 700; }

  /* Pillit pienemmät mobiilissa */
  .arb-card .arb-pill {
    font-size: 8.5px;
    padding: 2px 6px;
    border-radius: 5px;
  }

  /* Marginaali oikealla — ei kutistu */
  .arb-card .arb-margin {
    text-align: right !important;
    flex-shrink: 0 !important;
  }
  .arb-card .arb-margin .v {
    font-size: 19px;
    font-weight: 900;
    color: var(--mint, #34d399);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
  }
  .arb-card .arb-margin .l {
    font-size: 9px;
    color: var(--text-dim);
    font-weight: 700;
    margin-top: 2px;
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  /* === Jalat-lista — ohjeen mukainen koko-leveyden rivirakenne === */
  .arb-card .arb-legs-mini {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    margin: 0 0 9px !important;
    width: 100% !important;
  }
  .arb-card .arb-leg-mini {
    display: grid !important;
    grid-template-columns: 18px 1fr auto !important;
    gap: 8px !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 6px 10px !important;
    background: var(--bg, #0a0e1a) !important;
    border: 1px solid var(--border) !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    color: var(--text-muted) !important;
    font-weight: 600 !important;
    margin: 0 !important;
  }
  .arb-card .arb-leg-mini .lg {
    width: 18px; height: 18px;
    border-radius: 5px;
    font-size: 10px;
  }
  .arb-card .arb-leg-mini .nm {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-muted);
  }
  .arb-card .arb-leg-mini .nm b {
    color: var(--text);
    font-weight: 700;
  }
  .arb-card .arb-leg-mini .o {
    color: var(--mint, #34d399);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  /* === Pelaa-nappi — sama väri kuin desktop (solid mint) === */
  .arb-card .arb-exec {
    display: flex !important;
    align-items: center; justify-content: center;
    gap: 6px;
    width: 100% !important;
    font-size: 13px;
    font-weight: 800;
    color: #04130c;
    background: var(--mint, #34d399);
    border: none;
    border-radius: 9px;
    padding: 11px !important;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: -.01em;
    transition: background .12s;
  }
  .arb-card .arb-exec:hover { background: var(--green, #10b981); }
}
/* "Pelaa arbitraasi" -teksti vain mobiilissa, desktopilla pelkkä "Pelaa" */
.arb-exec-mobword { display: none; }
@media (max-width: 760px) { .arb-exec-mobword { display: inline; } }

/* === V2: Arb-toteutus-modaali === */
.arb-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(5,8,14,.78);
  backdrop-filter: blur(6px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 32px 16px 16px;
  z-index: 9500; overflow-y: auto;
  animation: tierFadeIn .15s ease-out;
}
.arb-modal {
  width: 100%; max-width: 560px;
  background: var(--bg-surface, #141925);
  border: 1px solid var(--border-2, #323a52);
  border-radius: 14px;
  box-shadow: 0 40px 100px rgba(0,0,0,.6);
  overflow: hidden;
  display: flex; flex-direction: column;
  margin: 0 auto;
}
.arb-modal-head { display: flex; align-items: flex-start; gap: 14px; padding: 16px 22px 13px; border-bottom: 1px solid var(--border); }
.arb-modal-head .tag { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mint, #34d399); }
.arb-modal-head .t { font-size: 17px; font-weight: 800; letter-spacing: -.02em; margin-top: 3px; color: var(--text); }
.arb-modal-head .s { font-size: 12px; color: var(--text-dim); font-weight: 500; margin-top: 3px; }
.arb-modal-x { margin-left: auto; width: 30px; height: 30px; border-radius: 8px; border: none; background: transparent; color: var(--text-dim); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.arb-modal-x:hover { background: rgba(255,255,255,.05); color: var(--text); }
.arb-modal-x svg { width: 17px; height: 17px; }

.arb-modal-stake {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 22px;
  background: rgba(16,185,129,.05);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.arb-modal-stake .lbl { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); }
.arb-modal-stake .stake-field {
  display: flex; align-items: center;
  background: var(--bg, #0a0e1a);
  border: 1.5px solid rgba(16,185,129,.4);
  border-radius: 8px;
  padding: 0 11px; height: 38px; width: 140px;
}
.arb-modal-stake .stake-field:focus-within { border-color: var(--mint, #34d399); box-shadow: 0 0 0 2px rgba(16,185,129,.18); }
.arb-modal-stake .stake-field input { width: 100%; background: transparent; border: none; outline: none; color: var(--text); font-family: inherit; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.arb-modal-stake .stake-field .suf { font-size: 14px; font-weight: 700; color: var(--text-dim); margin-left: 4px; }
.arb-modal-stake .quick { display: flex; gap: 4px; }
.arb-modal-stake .quick button { font-family: inherit; font-size: 10.5px; font-weight: 800; color: var(--text-muted); background: var(--surface-2, #1c2231); border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px; cursor: pointer; }
.arb-modal-stake .quick button:hover { color: var(--mint, #34d399); border-color: var(--mint, #34d399); }
.arb-modal-stake .info { margin-left: auto; text-align: right; }
.arb-modal-stake .info .l { font-size: 10px; color: var(--text-dim); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.arb-modal-stake .info .v { font-size: 16px; color: var(--mint, #34d399); font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1; margin-top: 2px; }

.arb-modal-steps { padding: 13px 22px; overflow-y: auto; max-height: 50vh; }
.arb-step {
  display: grid; grid-template-columns: 30px 1fr auto;
  gap: 12px; align-items: center;
  padding: 11px 13px;
  background: var(--bg, #0a0e1a);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 8px;
  transition: .15s;
}
.arb-step:last-child { margin-bottom: 0; }
.arb-step.done { background: rgba(16,185,129,.04); border-color: rgba(16,185,129,.28); }
.arb-step .cb {
  width: 22px; height: 22px; border-radius: 6px;
  border: 2px solid var(--border-2);
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
}
.arb-step.done .cb { background: var(--mint, #34d399); border-color: var(--mint, #34d399); }
.arb-step.done .cb svg { color: #04130c; }
.arb-step .cb svg { width: 12px; height: 12px; color: transparent; }
.arb-step .info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.arb-step .info .h { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--text); }
.arb-step .info .h .num { color: var(--text-dim); font-weight: 800; }
.arb-step .info .h .bk { font-weight: 800; }
.arb-step .info .d { font-size: 11px; color: var(--text-muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.arb-step .info .d b { color: var(--text); font-weight: 800; font-size: 12.5px; margin-right: 4px; }
.arb-step.done .info .h, .arb-step.done .info .d { opacity: .6; }
.arb-step .opn {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 800;
  color: var(--mint, #34d399);
  background: rgba(16,185,129,.13);
  border: 1px solid rgba(16,185,129,.32);
  padding: 5px 9px; border-radius: 6px;
  text-decoration: none; flex-shrink: 0;
  cursor: pointer;
}
.arb-step .opn svg { width: 10px; height: 10px; }

.arb-modal-foot { padding: 12px 22px 16px; border-top: 1px solid var(--border); background: var(--bg-surface); }
.arb-modal-foot .save-note {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 11px;
  background: rgba(16,185,129,.06);
  border: 1px solid rgba(16,185,129,.22);
  border-radius: 8px;
  font-size: 11.5px; color: var(--text-muted); font-weight: 600;
  margin-bottom: 10px;
}
.arb-modal-foot .save-note .ic { width: 20px; height: 20px; border-radius: 5px; background: rgba(16,185,129,.18); color: var(--mint, #34d399); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.arb-modal-foot .save-note .ic svg { width: 12px; height: 12px; }
.arb-modal-foot .save-note b { color: var(--text); font-weight: 800; }
.arb-modal-foot .actions { display: flex; gap: 9px; }
.arb-mbtn { font-family: inherit; font-size: 12.5px; font-weight: 800; border-radius: 9px; padding: 11px 14px; cursor: pointer; }
.arb-mbtn.ghost { flex: 0 0 30%; background: transparent; border: 1px solid var(--border-2); color: var(--text-muted); }
.arb-mbtn.save { flex: 1; background: var(--green, #10b981); border: none; color: #04130c; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.arb-mbtn.save:hover { filter: brightness(1.08); }
.arb-mbtn.save svg { width: 13px; height: 13px; }

/* === V2: Kerroinliikkeet-sivu (mockup-kerroinliikkeet.html) === */
.mv-page { max-width: 1100px; margin: 0 auto; padding: 0 16px 60px; }
.mv-phead { display: flex; justify-content: space-between; align-items: flex-end; margin: 18px 0 16px; gap: 14px; flex-wrap: wrap; }
.mv-phead h1 { font-size: 22px; font-weight: 800; letter-spacing: -.025em; display: flex; align-items: center; gap: 10px; margin: 0; color: var(--text); }
.mv-ph-ic { width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(135deg, var(--green, #10b981), var(--accent, #84cc16)); color: #04130c; display: flex; align-items: center; justify-content: center; }
.mv-ph-ic svg { width: 16px; height: 16px; }
.mv-sub { font-size: 12.5px; color: var(--text-dim); font-weight: 500; margin-top: 3px; }
.mv-sub b { color: var(--text); font-weight: 700; }
.mv-refresh-info { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--mint, #34d399); font-weight: 700; background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.22); padding: 6px 11px; border-radius: 8px; }
.mv-refresh-info .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--mint, #34d399); animation: arbPulse 1.6s infinite; }

.mv-flt {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px;
  background: var(--bg-surface, #141925);
  border: 1px solid var(--border, #232a3a);
  border-radius: 11px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.mv-flt .lbl { font-size: 11px; color: var(--text-dim); font-weight: 700; }
.mv-fchip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 28px; padding: 0 11px;
  border-radius: 14px;
  background: var(--surface-2, #1c2231);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 11.5px; font-weight: 700;
  cursor: pointer; font-family: inherit;
}
.mv-fchip:hover { color: var(--text); border-color: var(--mint, #34d399); }
.mv-fchip.active { background: rgba(16,185,129,.13); border-color: rgba(16,185,129,.36); color: var(--mint, #34d399); }
.mv-flt .spacer { flex: 1; }

.mv-dir-tabs {
  display: flex; gap: 4px;
  background: var(--surface-2);
  padding: 3px; border-radius: 9px;
}
.mv-dir-tabs button {
  font-size: 11.5px; font-weight: 700;
  color: var(--text-dim);
  background: none; border: none;
  padding: 6px 11px; border-radius: 7px;
  cursor: pointer; font-family: inherit;
  display: flex; align-items: center; gap: 5px;
}
.mv-dir-tabs button.on { background: var(--bg, #0a0e1a); color: var(--text); }
.mv-dir-tabs button.on.dn-active { color: var(--mint, #34d399); }
.mv-dir-tabs button.on.up-active { color: #f87171; }
.mv-dir-tabs button svg { width: 12px; height: 12px; }
.mv-dir-tabs button span {
  font-size: 10px; color: var(--text-dim); font-weight: 600;
  margin-left: 3px;
  font-variant-numeric: tabular-nums;
}
.mv-dir-tabs button.on span { color: inherit; opacity: .8; }

.mv-list { display: flex; flex-direction: column; gap: 8px; }
.mv-lm {
  display: grid;
  grid-template-columns: 30px 1.6fr 1.3fr 220px 100px;
  gap: 14px; align-items: center;
  padding: 13px 16px;
  background: var(--bg-surface, #141925);
  border: 1px solid var(--border, #232a3a);
  border-radius: 11px;
  cursor: pointer; transition: .12s;
  position: relative;
}
.mv-lm:hover { border-color: rgba(16,185,129,.4); }
.mv-lm.up { border-left: 3px solid var(--mint, #34d399); }
.mv-lm.dn { border-left: 3px solid var(--red, #ef4444); }
.mv-lm.sharp { border-color: rgba(16,185,129,.45); background: linear-gradient(135deg, rgba(16,185,129,.04), var(--bg-surface)); }
.mv-sp {
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--mint, #34d399);
}
.mv-sp svg { width: 16px; height: 16px; }
.mv-match { font-size: 13.5px; font-weight: 700; color: var(--text); min-width: 0; }
.mv-match em { font-style: normal; color: var(--text-dim); font-weight: 500; font-size: 11.5px; margin: 0 4px; }
.mv-match .sub { display: block; font-size: 11px; color: var(--text-dim); font-weight: 500; margin-top: 2px; }
.mv-mkt { font-size: 12.5px; color: var(--text-muted); font-weight: 600; min-width: 0; }
.mv-mkt .sel { display: block; font-size: 13px; color: var(--text); font-weight: 700; margin-top: 1px; }
.mv-book-row { display: flex; align-items: center; gap: 5px; margin-top: 5px; font-size: 10.5px; color: var(--text-dim); font-weight: 600; }
.mv-book-row .lg { width: 14px; height: 14px; border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 900; color: #04130c; flex-shrink: 0; background: #facc15; }
.mv-book-row .lg.coolbet { background: #facc15; }
.mv-book-row .lg.veikkaus { background: #3b82f6; color: #fff; }
.mv-book-row .lg.unibet { background: #84cc16; }
.mv-book-row .lg.pinnacle { background: #ef4444; color: #fff; }
.mv-book-row .lg.betsson { background: #a855f7; color: #fff; }

.mv-move { display: flex; align-items: center; gap: 10px; font-variant-numeric: tabular-nums; justify-content: center; }
.mv-move .from { font-size: 14px; color: var(--text-dim); font-weight: 600; text-decoration: line-through; text-decoration-color: var(--border-2); }
.mv-move .arrow { color: var(--text-dim); }
.mv-move .arrow svg { width: 14px; height: 14px; }
.mv-move .to { font-size: 18px; color: var(--text); font-weight: 900; letter-spacing: -.02em; }
.mv-lm.up .mv-move .to { color: var(--mint, #34d399); }
.mv-lm.dn .mv-move .to { color: #f87171; }

.mv-change { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.mv-change .delta {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 14px; font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  padding: 3px 9px; border-radius: 7px;
}
.mv-lm.up .mv-change .delta { color: var(--mint, #34d399); background: rgba(16,185,129,.13); }
.mv-lm.dn .mv-change .delta { color: #f87171; background: rgba(239,68,68,.13); }
.mv-change .delta svg { width: 12px; height: 12px; }
.mv-change .since { font-size: 10px; color: var(--text-dim); font-weight: 600; }

.mv-sharp-pill {
  position: absolute; top: 8px; right: 8px;
  font-size: 9px; font-weight: 800;
  color: var(--mint, #34d399);
  background: rgba(16,185,129,.18);
  padding: 2px 6px; border-radius: 5px;
  letter-spacing: .06em; text-transform: uppercase;
}

.mv-empty {
  padding: 50px 30px; text-align: center;
  background: var(--bg-surface);
  border: 1px dashed var(--border-2);
  border-radius: 13px;
  color: var(--text-dim);
}
.mv-empty h3 { color: var(--text); font-size: 15px; font-weight: 800; margin-bottom: 6px; }
.mv-empty p { margin: 0 0 14px; font-size: 13px; }
.mv-refresh-btn { font-size: 12.5px; font-weight: 800; color: var(--mint, #34d399); background: rgba(16,185,129,.13); border: 1px solid rgba(16,185,129,.32); border-radius: 8px; padding: 8px 14px; cursor: pointer; font-family: inherit; }

.mv-info {
  margin: 0 0 14px;
  padding: 14px 40px 14px 18px;
  background: var(--bg-surface, #141925);
  border: 1px solid var(--border);
  border-radius: 11px;
  font-size: 12.5px; color: var(--text-muted);
  font-weight: 500; line-height: 1.6;
  position: relative;
}
.mv-info h3 { color: var(--text); font-size: 13px; font-weight: 800; margin-bottom: 7px; }
.mv-info p { margin: 0 0 6px; }
.mv-info b { color: var(--text); font-weight: 700; }
.mv-info-close {
  position: absolute; top: 10px; right: 10px;
  background: none; border: none; cursor: pointer;
  width: 24px; height: 24px;
  color: var(--text-dim);
  border-radius: 5px;
  display: inline-flex; align-items: center; justify-content: center;
}
.mv-info-close:hover { color: var(--text); background: rgba(255,255,255,0.05); }
.mv-info-close svg { width: 13px; height: 13px; }
.mv-info-collapsed {
  margin: 0 0 12px;
  padding: 10px 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 12.5px; color: var(--text-muted);
  line-height: 1.6;
}
.mv-info-collapsed summary {
  cursor: pointer; color: var(--text-muted); font-weight: 700;
  list-style: none;
}
.mv-info-collapsed summary::-webkit-details-marker { display: none; }
.mv-info-collapsed summary::before { content: '▸ '; color: var(--text-dim); }
.mv-info-collapsed[open] summary::before { content: '▾ '; }
.mv-info-collapsed[open] summary { margin-bottom: 6px; }
.mv-info-collapsed p { margin: 0 0 6px; }
.mv-info-collapsed b { color: var(--text); font-weight: 700; }

/* Mobile movement card */
@media (max-width: 768px) {
  .mv-lm {
    grid-template-columns: 26px 1fr auto;
    gap: 10px;
    padding: 11px 13px;
  }
  .mv-lm .mv-mkt { grid-column: 2; }
  .mv-lm .mv-move { grid-column: 2; justify-content: flex-start; padding-top: 4px; border-top: 1px solid var(--border); }
  .mv-lm .mv-change { grid-column: 3; grid-row: 1; }
  .mv-sp { width: 26px; height: 26px; }
  .mv-sp svg { width: 14px; height: 14px; }
  .mv-match { font-size: 12.5px; }
  .mv-move .to { font-size: 14.5px; }
  .mv-change .delta { font-size: 13px; }
}

/* === V2: Asetukset (mockup-asetukset.html) === */
/* Pakota body-scrollbar aina näkyviin → estää sivun leveysmuutokset
   välilehtien välillä (kun sisältö muuttuu lyhyestä pitkäksi ja back). */
html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

.set-page {
  width: 100%;
  margin: 0 auto;
  padding: 0;
}
/* Vakio leveys laatikolle — pysyy samana jokaisessa välilehdessä */
.set-desktop {
  width: 1080px;
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}
.set-page-h {
  display: none;
  font-size: 22px; font-weight: 800;
  letter-spacing: -.025em;
  align-items: center; gap: 10px;
  margin: 18px 16px 12px;
  color: var(--text);
}
.set-page-ic {
  width: 28px; height: 28px; border-radius: 8px;
  background: linear-gradient(135deg, var(--green, #10b981), var(--accent, #84cc16));
  color: #04130c;
  display: flex; align-items: center; justify-content: center;
}
.set-page-ic svg { width: 16px; height: 16px; }

/* Desktop layout: vasen nav + main — VAKIO korkeus, sisäinen scroll */
.set-desktop {
  display: grid;
  grid-template-columns: 220px 1fr;
  height: 720px;             /* kiinteä korkeus → laatikko ei pomppi välilehdittäin */
  background: var(--bg-surface, #141925);
  border: 1px solid var(--border, #232a3a);
  border-radius: 14px;
  overflow: hidden;
}
.set-nav {
  border-right: 1px solid var(--border, #232a3a);
  padding: 20px 0;
  background: var(--bg-surface);
  overflow-y: auto;          /* nav scrollaa jos kohteita paljon */
  min-height: 0;             /* sallii flex-childin kutistua */
}
.set-nav h2 {
  font-size: 11px; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-dim, #7a8094);
  padding: 0 20px 10px;
  margin: 0;
}
.set-nav h2 + button { margin-top: 0; }
.set-nav h2:not(:first-child) { padding-top: 14px; }
.set-nav button {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px 20px;
  background: transparent; border: none;
  color: var(--text-muted, #b4bacb);
  font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; text-align: left;
  border-left: 2px solid transparent;
  transition: background .12s, color .12s;
}
.set-nav button svg { width: 15px; height: 15px; flex-shrink: 0; }
.set-nav button:hover { color: var(--text); background: rgba(255,255,255,.025); }
.set-nav button.active {
  color: var(--mint, #34d399);
  background: var(--surface-2, #1c2231);
  border-left-color: var(--mint, #34d399);
  font-weight: 700;
}
.set-nav button.danger { color: #fca5a5; }
.set-nav button.danger:hover { background: rgba(239,68,68,.06); }
.set-nav .sep { height: 1px; background: var(--border); margin: 12px 20px; }
.set-nav .set-logout { margin-top: 0; }

.set-main {
  padding: 24px 30px;
  /* Korkeus periytyy .set-desktop:sta (720px). Sisältö scrollaa sisäisesti. */
  height: 100%;
  min-height: 0;
  overflow-y: auto;
}

.set-h {
  font-size: 20px; font-weight: 800;
  letter-spacing: -.02em;
  margin-bottom: 4px;
  color: var(--text);
}
.set-sub {
  font-size: 12.5px; color: var(--text-dim);
  font-weight: 500; margin-bottom: 20px;
  line-height: 1.5;
}

.set-section {
  background: var(--bg-surface, #141925);
  border: 1px solid var(--border, #232a3a);
  border-radius: 11px;
  padding: 18px 20px;
  margin-bottom: 14px;
}
.set-section h3 {
  font-size: 13.5px; font-weight: 800;
  letter-spacing: -.01em;
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 8px;
  color: var(--text);
}
.set-section h3 .ic {
  width: 22px; height: 22px; border-radius: 6px;
  background: rgba(16,185,129,.13);
  color: var(--mint, #34d399);
  display: flex; align-items: center; justify-content: center;
}
.set-section h3 .ic svg { width: 13px; height: 13px; }

.set-field {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  align-items: center; gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}
.set-field:last-child { border-bottom: none; padding-bottom: 0; }
.set-field:first-of-type { padding-top: 0; }
.set-field .lbl {
  display: flex; flex-direction: column; gap: 2px;
  font-size: 12.5px; font-weight: 700;
  color: var(--text);
}
.set-field .lbl .hint {
  font-size: 11px; color: var(--text-dim);
  font-weight: 500;
}
.set-field .val {
  font-size: 13px; color: var(--text-muted);
  font-weight: 500;
}

.set-edit-btn {
  font-size: 12px; font-weight: 700;
  color: var(--mint, #34d399);
  background: rgba(16,185,129,.13);
  border: 1px solid rgba(16,185,129,.32);
  border-radius: 7px;
  padding: 7px 12px; cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.set-edit-btn:hover { background: rgba(16,185,129,.22); }

/* Toggle */
.set-tog {
  position: relative;
  width: 42px; height: 24px;
  border-radius: 12px;
  background: var(--surface-3, #222a3d);
  border: none;
  cursor: pointer;
  transition: .15s;
  flex-shrink: 0;
  padding: 0;
  font-family: inherit;
}
.set-tog:hover { filter: brightness(1.1); }
/* Inline-input numero + suff (esim. "500 €" tai "1,0 %") */
.set-inline-input {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--bg, #0a0e1a);
  border: 1px solid var(--border, #242b3d);
  border-radius: 7px;
  padding: 4px 8px;
  flex-shrink: 0;
}
.set-inline-input:focus-within {
  border-color: var(--mint, #34d399);
}
.set-inline-input input {
  background: transparent; border: none;
  color: var(--text, #f1f3f9);
  font-family: inherit;
  font-size: 13.5px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  width: 70px;
  text-align: right;
  outline: none;
  padding: 2px 0;
  -moz-appearance: textfield;
}
.set-inline-input input::-webkit-outer-spin-button,
.set-inline-input input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.set-inline-input .suff {
  font-size: 11.5px; color: var(--dim, #8d94a8);
  font-weight: 700;
  letter-spacing: .02em;
}
/* Inline-segmented (esim. Flat / %-panos / Kelly) */
.set-inline-seg {
  display: inline-flex;
  background: var(--surface-2, #1c2231);
  border: 1px solid var(--border, #242b3d);
  border-radius: 7px;
  padding: 2px;
  flex-shrink: 0;
  gap: 0;
}
.set-inline-seg button {
  background: transparent; border: none;
  color: var(--dim, #8d94a8);
  font-family: inherit;
  font-size: 11.5px; font-weight: 800;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  letter-spacing: -.01em;
  transition: .12s;
}
.set-inline-seg button:hover { color: var(--text, #f1f3f9); }
.set-inline-seg button.on {
  background: var(--surface, #141925);
  color: var(--mint, #34d399);
  box-shadow: 0 1px 0 var(--border-2, #323a52);
}
/* Inline-select threshold-kentälle */
/* ============================================================================
   SPOTLIGHT TOUR — "mistä mitäkin löytyy"
   ============================================================================ */
body.tour-active { overflow: hidden; }
.tour-overlay {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  pointer-events: none;
  z-index: 9990;
}
.tour-spotlight {
  position: fixed;
  border: 2px solid #34d399;
  border-radius: 10px;
  box-shadow: 0 0 0 4px rgba(16,185,129,.25), 0 0 32px rgba(16,185,129,.45);
  pointer-events: none;
  z-index: 9991;
  animation: tourPulse 1.8s ease-in-out infinite;
}
@keyframes tourPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(16,185,129,.25), 0 0 32px rgba(16,185,129,.45); }
  50% { box-shadow: 0 0 0 6px rgba(16,185,129,.35), 0 0 44px rgba(16,185,129,.65); }
}
.tour-popover {
  position: fixed;
  width: 340px;
  background: #141925;
  border: 1px solid #323a52;
  border-radius: 13px;
  padding: 16px 18px;
  z-index: 9992;
  box-shadow: 0 24px 60px rgba(0,0,0,.6);
  animation: tourPopIn .22s cubic-bezier(.2,.7,.2,1);
}
@keyframes tourPopIn {
  from { opacity: 0; transform: scale(.94); }
  to { opacity: 1; transform: scale(1); }
}
.tour-popover::before {
  content: '';
  position: absolute;
  width: 0; height: 0;
}
.tour-popover-left::before {
  left: -10px; top: 30px;
  border: 10px solid transparent;
  border-right-color: #141925;
  border-left: none;
}
.tour-popover-top::before {
  top: -10px; left: 30px;
  border: 10px solid transparent;
  border-bottom-color: #141925;
  border-top: none;
}
/* Popover yläpuolella → nuoli alaspäin */
.tour-popover-bottom-arrow::before {
  bottom: -10px; left: 50%; transform: translateX(-50%);
  border: 10px solid transparent;
  border-top-color: #141925;
  border-bottom: none;
}
.tour-progress {
  height: 3px;
  background: rgba(255,255,255,.08);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 12px;
}
.tour-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #34d399, #10b981);
  transition: width .25s ease;
}
.tour-title {
  font-size: 15px; font-weight: 800;
  color: #f1f3f9;
  letter-spacing: -.01em;
  margin-bottom: 6px;
}
.tour-body {
  font-size: 13px; color: #b4bacb;
  line-height: 1.55;
  font-weight: 500;
}
.tour-foot {
  display: flex; align-items: center; gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.tour-step {
  font-size: 10.5px; color: #8d94a8;
  font-weight: 800; letter-spacing: .05em;
  font-variant-numeric: tabular-nums;
}
.tour-btn {
  background: #1c2231;
  border: 1px solid #323a52;
  color: #f1f3f9;
  font-family: inherit;
  font-size: 12px; font-weight: 800;
  padding: 7px 12px;
  border-radius: 7px;
  cursor: pointer;
}
.tour-btn.ghost {
  background: transparent;
  color: #b4bacb;
}
.tour-btn.primary {
  background: #34d399;
  color: #04130c;
  border-color: #34d399;
  margin-left: auto;
}
.tour-skip {
  background: transparent; border: none;
  color: #8d94a8;
  font-family: inherit;
  font-size: 11px; font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
}
.tour-skip:hover { color: #f1f3f9; }
@media (max-width: 600px) {
  .tour-popover { width: calc(100vw - 32px); max-width: 380px; }
}

/* ============================================================================
   EMPTY STATE — friendly viesti + CTA kun ei dataa
   ============================================================================ */
.empty-state {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 50px 20px;
  background: rgba(16,185,129,.03);
  border: 1px dashed rgba(16,185,129,.22);
  border-radius: 14px;
  margin: 12px 0;
}
.empty-state-ic {
  width: 56px; height: 56px;
  background: rgba(16,185,129,.10);
  border: 1px solid rgba(16,185,129,.28);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  color: var(--mint, #34d399);
  margin-bottom: 14px;
}
.empty-state-ic svg { width: 28px; height: 28px; }
.empty-state-title {
  font-size: 16px; font-weight: 800;
  color: var(--text, #f1f3f9);
  letter-spacing: -.01em;
  margin-bottom: 6px;
}
.empty-state-body {
  font-size: 13.5px; color: var(--muted, #b4bacb);
  font-weight: 500;
  line-height: 1.55;
  max-width: 420px;
  margin-bottom: 18px;
}
.empty-state-cta {
  background: var(--mint, #34d399);
  border: none;
  color: #04130c;
  font-family: inherit;
  font-size: 13px; font-weight: 800;
  padding: 10px 18px;
  border-radius: 8px;
  cursor: pointer;
  letter-spacing: -.01em;
}
.empty-state-cta:hover { filter: brightness(1.05); }

/* ============================================================================
   PRO LOCK — Tier-gated feature overlay
   ============================================================================ */
.pro-lock {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 40px 24px;
  background: linear-gradient(135deg, rgba(16,185,129,.06), transparent);
  border: 1px solid rgba(16,185,129,.28);
  border-radius: 14px;
  position: relative;
}
.pro-lock-ic {
  width: 52px; height: 52px;
  background: rgba(132,204,22,.13);
  border: 1px solid rgba(132,204,22,.38);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #84cc16;
  margin-bottom: 14px;
}
.pro-lock-ic svg { width: 24px; height: 24px; }
.pro-lock-tier {
  background: rgba(132,204,22,.13);
  border: 1px solid rgba(132,204,22,.38);
  color: #84cc16;
  font-size: 10.5px; font-weight: 800;
  padding: 3px 9px;
  border-radius: 5px;
  letter-spacing: .06em; text-transform: uppercase;
  margin-bottom: 10px;
}
.pro-lock-title {
  font-size: 17px; font-weight: 800;
  color: var(--text, #f1f3f9);
  letter-spacing: -.01em;
  margin-bottom: 6px;
}
.pro-lock-body {
  font-size: 13px; color: var(--muted, #b4bacb);
  line-height: 1.55;
  max-width: 380px;
  margin-bottom: 18px;
}
.pro-lock-cta {
  background: linear-gradient(135deg, #84cc16, #65a30d);
  border: none;
  color: #1a2a08;
  font-family: inherit;
  font-size: 13px; font-weight: 800;
  padding: 11px 22px;
  border-radius: 8px;
  cursor: pointer;
  letter-spacing: -.01em;
  box-shadow: 0 4px 12px rgba(132,204,22,.25);
}
.pro-lock-cta:hover { filter: brightness(1.05); }

/* Pieni Pro-badge nav-itemille / nappiin */
.pro-badge {
  display: inline-flex; align-items: center; gap: 3px;
  background: rgba(132,204,22,.13);
  border: 1px solid rgba(132,204,22,.38);
  color: #84cc16;
  font-size: 9px; font-weight: 800;
  padding: 1px 6px;
  border-radius: 4px;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-left: 5px;
}

/* ============================================================================
   REFERRAL — Suosittele kaverille -näkymä
   ============================================================================ */
.ref-hero {
  background: linear-gradient(135deg, rgba(16,185,129,.08), transparent);
  border: 1px solid rgba(16,185,129,.32);
  border-radius: 12px;
  padding: 16px 18px;
}
.ref-hero-lbl {
  font-size: 10px; font-weight: 800;
  color: var(--mint, #34d399);
  letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: 8px;
}
.ref-hero-code-row {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.ref-code {
  font-family: 'Inter', 'SF Mono', Menlo, monospace;
  font-size: 22px; font-weight: 900;
  letter-spacing: .04em;
  color: var(--text, #f1f3f9);
  background: var(--bg, #0a0e1a);
  border: 1px solid rgba(16,185,129,.4);
  padding: 6px 14px;
  border-radius: 8px;
  user-select: all;
}
.ref-copy-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-2, #1c2231);
  border: 1px solid var(--border-2, #323a52);
  color: var(--text, #f1f3f9);
  font-family: inherit;
  font-size: 12px; font-weight: 700;
  padding: 8px 12px;
  border-radius: 7px;
  cursor: pointer;
  transition: border-color .12s;
}
.ref-copy-btn svg { width: 13px; height: 13px; }
.ref-copy-btn:hover { border-color: var(--mint, #34d399); color: var(--mint, #34d399); }
.ref-copy-btn.primary {
  background: var(--mint, #34d399);
  border-color: var(--mint, #34d399);
  color: #04130c;
}
.ref-copy-btn.primary:hover { filter: brightness(1.05); color: #04130c; }
.ref-hero-link-row {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.ref-link {
  flex: 1; min-width: 200px;
  background: var(--bg, #0a0e1a);
  border: 1px solid var(--border, #242b3d);
  color: var(--muted, #b4bacb);
  font-family: inherit;
  font-size: 12px;
  padding: 8px 11px;
  border-radius: 7px;
  outline: none;
}
.ref-link:focus { border-color: var(--mint, #34d399); }

.ref-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1px;
  background: var(--border, #242b3d);
  border-radius: 11px;
  overflow: hidden;
  border: 1px solid var(--border, #242b3d);
}
.ref-stat {
  background: var(--surface, #141925);
  padding: 14px 12px;
  text-align: center;
}
.ref-stat-v {
  font-size: 22px; font-weight: 900;
  color: var(--text, #f1f3f9);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.ref-stat-v.pos { color: var(--mint, #34d399); }
.ref-stat-v.mint { color: var(--mint, #34d399); }
.ref-stat-l {
  font-size: 10px; font-weight: 800;
  color: var(--dim, #8d94a8);
  letter-spacing: .07em; text-transform: uppercase;
  margin-top: 5px;
}

.ref-signups {
  display: flex; flex-direction: column; gap: 1px;
  background: var(--border, #242b3d);
  border-radius: 9px;
  overflow: hidden;
  border: 1px solid var(--border, #242b3d);
}
.ref-signup-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface, #141925);
  padding: 10px 14px;
  font-size: 13px;
}
.ref-signup-email {
  flex: 1;
  color: var(--text, #f1f3f9);
  font-weight: 600;
  font-family: 'Inter', monospace;
}
.ref-signup-date {
  font-size: 11px;
  color: var(--dim, #8d94a8);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ref-signup-state {
  font-size: 10.5px; font-weight: 800;
  padding: 3px 8px;
  border-radius: 5px;
  letter-spacing: .04em; text-transform: uppercase;
}
.ref-signup-state.paid {
  background: rgba(16,185,129,.13);
  border: 1px solid rgba(16,185,129,.32);
  color: var(--mint, #34d399);
}
.ref-signup-state.trial {
  background: rgba(245,158,11,.10);
  border: 1px solid rgba(245,158,11,.28);
  color: #f59e0b;
}

.ref-share-row {
  display: flex; gap: 8px;
  flex-wrap: wrap;
}
.ref-share-btn {
  flex: 1; min-width: 110px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--surface-2, #1c2231);
  border: 1px solid var(--border-2, #323a52);
  color: var(--text, #f1f3f9);
  text-decoration: none;
  font-family: inherit;
  font-size: 12.5px; font-weight: 700;
  padding: 10px 12px;
  border-radius: 8px;
  transition: filter .12s;
}
.ref-share-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.ref-share-btn:hover { filter: brightness(1.1); }
.ref-share-btn.telegram { color: #229ED9; border-color: rgba(34,158,217,.32); }
.ref-share-btn.twitter { color: #f1f3f9; border-color: var(--border-2, #323a52); }
.ref-share-btn.whatsapp { color: #25D366; border-color: rgba(37,211,102,.32); }

@media (max-width: 600px) {
  .ref-stats { grid-template-columns: 1fr; }
  .ref-stat-v { font-size: 18px; }
  .ref-share-btn { min-width: calc(50% - 4px); }
}

/* Stale-data banner (näkyy EV-sivulla kun data on > 5 min vanhaa) */
.stale-banner {
  display: flex; align-items: center; gap: 10px;
  background: rgba(245,158,11,.08);
  border: 1px solid rgba(245,158,11,.32);
  color: #fbbf24;
  padding: 9px 14px;
  border-radius: 9px;
  font-size: 12.5px; font-weight: 700;
  margin-bottom: 12px;
}
.stale-banner svg { width: 16px; height: 16px; flex-shrink: 0; }
.stale-banner b { color: #fcd34d; font-weight: 800; }
.stale-banner button {
  margin-left: auto;
  background: var(--mint, #34d399);
  border: none; color: #04130c;
  font-family: inherit;
  font-size: 11.5px; font-weight: 800;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
}
.stale-banner button:hover { filter: brightness(1.1); }

/* CmdK -pikahaku chip topbarissa — diskoverable */
.ov-cmdk-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--bg, #0a0e1a);
  border: 1px solid var(--border, #242b3d);
  color: var(--muted, #b4bacb);
  font-family: inherit;
  font-size: 12px; font-weight: 600;
  padding: 7px 9px 7px 11px;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .12s, color .12s;
  letter-spacing: -.01em;
}
.ov-cmdk-chip:hover {
  border-color: rgba(16,185,129,.4);
  color: var(--text, #f1f3f9);
}
.ov-cmdk-chip svg { width: 14px; height: 14px; flex-shrink: 0; opacity: .85; }
.ov-cmdk-chip .ov-cmdk-lbl { font-weight: 700; }
.ov-cmdk-chip .ov-cmdk-kbd {
  display: inline-flex; gap: 3px;
  margin-left: 4px;
}
.ov-cmdk-chip .ov-cmdk-kbd kbd {
  background: var(--surface-2, #1c2231);
  border: 1px solid var(--border-2, #323a52);
  color: var(--muted, #b4bacb);
  font-family: inherit;
  font-size: 10px; font-weight: 800;
  padding: 1px 5px;
  border-radius: 4px;
  letter-spacing: 0;
  line-height: 1.3;
}
@media (max-width: 760px) {
  .ov-cmdk-chip .ov-cmdk-lbl,
  .ov-cmdk-chip .ov-cmdk-kbd { display: none; }
  .ov-cmdk-chip { padding: 8px; }
}

/* ===========================================================================
   THEMED DROPDOWN — täysin oma widget joka näyttää teemamukaiselta
   (natiivi <select> menu on selaimen kontrolloima eikä anna ulkoasua muuttaa)
   =========================================================================== */
.themed-dd {
  position: relative;
  display: inline-flex;
  margin: 0 4px;
}
.themed-dd-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg, #0a0e1a);
  border: 1px solid rgba(16,185,129,.42);
  color: var(--mint, #34d399);
  font-family: inherit;
  font-size: 13px; font-weight: 800;
  padding: 4px 8px 4px 11px;
  border-radius: 6px;
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s;
  letter-spacing: -.01em;
}
.themed-dd-trigger:hover {
  border-color: var(--mint, #34d399);
  background: rgba(16,185,129,.06);
}
.themed-dd-trigger svg {
  width: 11px; height: 11px;
  transition: transform .15s;
}
.themed-dd.open .themed-dd-trigger svg { transform: rotate(180deg); }
.themed-dd.open .themed-dd-trigger {
  border-color: var(--mint, #34d399);
  box-shadow: 0 0 0 3px rgba(16,185,129,.13);
}
.themed-dd-menu {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  min-width: 110px;
  background: var(--surface, #141925);
  border: 1px solid var(--border-2, #323a52);
  border-radius: 9px;
  padding: 4px;
  box-shadow: 0 14px 36px rgba(0,0,0,.5);
  z-index: 1000;
  display: none;
  flex-direction: column;
  gap: 1px;
  animation: themedDdIn .14s ease-out;
}
.themed-dd.open .themed-dd-menu { display: flex; }
@keyframes themedDdIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
.themed-dd-opt {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  background: transparent;
  border: none;
  color: var(--muted, #b4bacb);
  font-family: inherit;
  font-size: 13px; font-weight: 700;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  transition: background .1s, color .1s;
}
.themed-dd-opt:hover {
  background: rgba(16,185,129,.10);
  color: var(--text, #f1f3f9);
}
.themed-dd-opt.on {
  background: rgba(16,185,129,.16);
  color: var(--mint, #34d399);
  font-weight: 800;
}
.themed-dd-opt svg {
  width: 12px; height: 12px;
  color: var(--mint, #34d399);
  flex-shrink: 0;
}

.set-inline-sel {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: var(--bg, #0a0e1a);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334d399' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9.5l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 7px center;
  background-size: 11px;
  border: 1px solid rgba(16,185,129,.42);
  color: var(--mint, #34d399);
  font-family: inherit;
  font-size: 13px; font-weight: 800;
  padding: 4px 26px 4px 9px;
  border-radius: 6px;
  margin: 0 4px;
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s;
}
.set-inline-sel:hover { border-color: var(--mint, #34d399); }
.set-inline-sel:focus {
  outline: none;
  border-color: var(--mint, #34d399);
  box-shadow: 0 0 0 3px rgba(16,185,129,.15);
}
/* Option-elementti — toimii useimmissa selaimissa (Chromium, Firefox 1.0+) */
.set-inline-sel option {
  background: var(--surface, #141925);
  color: var(--text, #f1f3f9);
  font-weight: 700;
  padding: 8px;
}
.set-inline-sel option:checked,
.set-inline-sel option:hover {
  background: rgba(16,185,129,.16);
  color: var(--mint, #34d399);
}

/* Globaali select-tyyli — kaikki <select>:t saavat teema-ulkoasun */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: var(--bg, #0a0e1a);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d94a8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9.5l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 12px;
  border: 1px solid var(--border, #242b3d);
  color: var(--text, #f1f3f9);
  font-family: inherit;
  font-size: 13.5px; font-weight: 700;
  padding: 8px 30px 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s;
}
select:hover { border-color: var(--border-2, #323a52); }
select:focus {
  outline: none;
  border-color: var(--mint, #34d399);
  box-shadow: 0 0 0 3px rgba(16,185,129,.13);
}
select option {
  background: var(--surface, #141925);
  color: var(--text, #f1f3f9);
  font-weight: 600;
  padding: 8px 12px;
}
select option:checked {
  background: rgba(16,185,129,.18);
  color: var(--mint, #34d399);
  font-weight: 800;
}
select option:hover { background: var(--surface-2, #1c2231); }
select:disabled {
  opacity: .55;
  cursor: not-allowed;
  background-image: none;
}
.set-tog::after {
  content: ""; position: absolute;
  left: 3px; top: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: .15s;
}
.set-tog.on { background: rgba(132,204,22,.4); }
.set-tog.on::after {
  left: 21px;
  background: var(--accent, #84cc16);
}

.set-save-note {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--mint, #34d399);
  font-weight: 700;
  padding: 12px 16px;
  background: rgba(16,185,129,.07);
  border: 1px solid rgba(16,185,129,.22);
  border-radius: 10px;
  margin-top: 8px;
}
.set-save-note svg { width: 14px; height: 14px; }

/* Bookmaker chips */
.set-bookies {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px;
}
@media (max-width: 600px) { .set-bookies { grid-template-columns: 1fr; } }
.set-bookie {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 12px;
  background: var(--bg, #0a0e1a);
  border: 1px solid var(--border);
  border-radius: 9px;
  cursor: pointer; font-family: inherit;
  text-align: left;
  transition: border-color .15s;
}
.set-bookie:hover { border-color: var(--mint, #34d399); }
.set-bookie.on { border-color: rgba(16,185,129,.42); background: linear-gradient(135deg, rgba(16,185,129,.06), var(--bg)); }
.set-bookie .lg {
  width: 26px; height: 26px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 900;
  color: #04130c; flex-shrink: 0;
  background: #facc15;
}
/* Bookmaker brand-värit (oma brändi-paletti) */
.set-bookie .lg.lg-bet365 { background: #027B5B; color: #fff; }
.set-bookie .lg.lg-coolbet { background: #2596be; color: #fff; }
.set-bookie .lg.lg-veikkaus { background: #000399; color: #fff; }
.set-bookie .lg.lg-unibet { background: #147B45; color: #fff; }
.set-bookie .lg.lg-betfairexchange,
.set-bookie .lg.lg-betfairsportsbook,
.set-bookie .lg.lg-betfair { background: #F5B942; color: #1a1a1a; }
.set-bookie .lg.lg-pinnacle { background: #081828; color: #d66225; }
.set-bookie .lg.lg-betsson { background: #FF6600; color: #FFFFFF; }
.set-bookie .lg.lg-nordicbet { background: #0167B9; color: #FFFFFF; }
/* Coming-soon bookmaker brand-värit (käyttäjän määrittämät) */
.set-bookie .lg.lg-22bet { background: #00585F; color: #0050a0; }
.set-bookie .lg.lg-888sport { background: #E05802; color: #FFFFFF; }
.set-bookie .lg.lg-atgse { background: #01509e; color: #FFFFFF; }
.set-bookie .lg.lg-betathome { background: #002554; color: #7EC51E; }
.set-bookie .lg.lg-betiniadk { background: #03F697; color: #E1E9FF; }
.set-bookie .lg.lg-betsafe { background: #000000; color: #bd0100; }
.set-bookie .lg.lg-betvictor { background: #1D252D; color: #F4F5F5; }
.set-bookie .lg.lg-betway { background: #2D4782; color: #FFFFFF; }
.set-bookie .lg.lg-bwines,
.set-bookie .lg.lg-bwinfr,
.set-bookie .lg.lg-bwinit { background: #FFCB04; color: #F5F5F5; }
.set-bookie .lg.lg-campobetdk { background: #87B938; color: #FFFFFF; }
.set-bookie .lg.lg-expektdk { background: #FF7000; color: #FFFFFF; }
.set-bookie .lg.lg-fezbet { background: #2b2d35; color: #ffdc26; }
.set-bookie .lg.lg-leovegas { background: #EE4501; color: #FFFFFF; }
.set-bookie .lg.lg-lvbetpl { background: #110F11; color: #F8CB18; }
.set-bookie .lg.lg-mrgreen { background: #134b2c; color: #FFFFFF; }
.set-bookie .lg.lg-netbet { background: #1d1d1d; color: #c61a20; }
.set-bookie .lg.lg-novibet { background: #151c2c; color: #FFFFFF; }
.set-bookie .lg.lg-paf { background: #003833; color: #FFFFFF; }
.set-bookie .lg.lg-tonybet { background: #FF4200; color: #F0F3F8; }
.set-bookie .nm {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 1px;
  font-size: 12.5px; font-weight: 700; color: var(--text);
}
.set-bookie .st {
  font-size: 10.5px; color: var(--text-dim);
  font-weight: 600;
}
.set-bookie .st.on { color: var(--mint, #34d399); }
/* Coming soon -tila: harmaa, ei klikattavissa */
.set-bookie.coming {
  opacity: .55;
  cursor: not-allowed;
  filter: grayscale(.65);
}
.set-bookie.coming:hover { border-color: var(--border, #242b3d); }
.set-bookie.coming .st.coming {
  color: var(--dim, #8d94a8);
  font-style: italic;
}
.set-bookie.coming .lg {
  filter: grayscale(.4) brightness(.85);
}
/* Ryhmäotsikko (Saatavilla nyt / Tulossa pian) */
.set-bookies-grouph {
  font-size: 10.5px; font-weight: 800;
  color: var(--dim, #8d94a8);
  letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.set-bookies-grouph .ct {
  background: var(--surface-2, #1c2231);
  border: 1px solid var(--border, #242b3d);
  color: var(--muted, #b4bacb);
  font-size: 10px; font-weight: 800;
  padding: 1px 7px;
  border-radius: 9px;
  letter-spacing: -.01em;
}

/* Telegram instructions */
.set-tg-instructions {
  background: rgba(16,185,129,.05);
  border: 1px solid rgba(16,185,129,.2);
  border-radius: 10px;
  padding: 14px 18px;
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 14px;
}
.set-tg-instructions h4 {
  font-size: 12.5px; font-weight: 800;
  color: var(--text); margin-bottom: 8px;
}
.set-tg-instructions ol { margin: 0 0 0 18px; padding: 0; }
.set-tg-instructions ol li { margin-bottom: 4px; }
.set-tg-instructions code {
  background: var(--bg, #0a0e1a);
  padding: 1px 5px; border-radius: 4px;
  font-family: 'SF Mono', Consolas, monospace;
  font-size: 11.5px;
  color: var(--mint, #34d399);
}

.set-legal {
  display: flex; justify-content: center;
  gap: 24px; flex-wrap: wrap;
  padding: 10px 0;
}
.set-legal a {
  font-size: 12px; color: var(--text-muted);
  text-decoration: none;
}
.set-legal a:hover { color: var(--text); }

.set-danger-section { border-color: rgba(239,68,68,.22); }
.set-danger-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 700;
  color: #fca5a5;
  background: transparent;
  border: 1px solid rgba(239,68,68,.36);
  border-radius: 8px;
  padding: 9px 14px; cursor: pointer;
  font-family: inherit;
}
.set-danger-btn:hover { background: rgba(239,68,68,.08); }
.set-danger-btn svg { width: 13px; height: 13px; }

/* Mobile drill-down — optimoitu */
.set-mobile {
  padding: 0 14px 30px;
  max-width: 540px; margin: 0 auto;
}
.set-mobile .set-page-h { display: inline-flex; margin: 12px 0 16px; }
/* Mobiilissa main-content (drill-down view) saa selkeän kortin */
.set-mobile .set-main {
  padding: 0;
  height: auto;
  overflow: visible;
}
.set-mobile .set-section { padding: 14px 14px; }
.set-mobile .set-h { font-size: 18px; margin-bottom: 4px; }
.set-mobile .set-sub { font-size: 12px; margin-bottom: 14px; }
.set-mobile-back {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 700;
  color: var(--mint, #34d399);
  background: transparent;
  border: 1px solid var(--border-2, #323a52);
  border-radius: 8px;
  padding: 7px 12px;
  cursor: pointer; font-family: inherit;
  margin-bottom: 14px;
}
.set-mobile-back svg { width: 15px; height: 15px; }
.set-mobile-cat { margin-bottom: 18px; }
.set-mobile-cat h3 {
  font-size: 10.5px; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-dim);
  padding: 6px 4px 8px;
  margin: 0;
}
.set-mobile-row {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 14px;
  background: var(--bg-surface, #141925);
  border: 1px solid var(--border, #232a3a);
  border-radius: 10px;
  margin-bottom: 6px;
  cursor: pointer; font-family: inherit;
  text-align: left; width: 100%;
}
.set-mobile-row .ic {
  width: 32px; height: 32px; border-radius: 9px;
  background: rgba(16,185,129,.13);
  color: var(--mint, #34d399);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.set-mobile-row .ic svg { width: 16px; height: 16px; }
.set-mobile-row .info { flex: 1; min-width: 0; }
.set-mobile-row .info .n { font-size: 13px; font-weight: 700; color: var(--text); }
.set-mobile-row .info .s { font-size: 11px; color: var(--text-dim); font-weight: 500; margin-top: 1px; }
.set-mobile-row .chev { color: var(--text-dim); flex-shrink: 0; }
.set-mobile-row .chev svg { width: 14px; height: 14px; }
.set-mobile-row.danger .ic { background: rgba(239,68,68,.13); color: #fca5a5; }
.set-mobile-row.danger .info .n { color: #fca5a5; }

/* Mobiili main-content säädöt — kompakti vertikaali, ei päällekkäisyyksiä */
@media (max-width: 768px) {
  .set-main { padding: 14px 0 0; }
  .set-field {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
  }
  .set-field .lbl { font-size: 12.5px; }
  .set-field .lbl .hint { font-size: 11px; }
  /* Arvo omalle riville (kaksinkertainen leveys) */
  .set-field .val {
    grid-column: 1 / -1;
    order: 3;
    font-size: 12px;
    color: var(--text-dim);
    padding-top: 2px;
  }
  /* Toggle / Vaihda-nappi pysyy oikealla */
  .set-field .set-tog,
  .set-field .set-edit-btn { order: 2; }
}

/* === V2: Tilaus & lasku -sivun rakenne (mockup-tilaus-lasku.html) === */
.billing-page {
  max-width: 1100px; margin: 0 auto;
  padding: 22px 24px 60px;
}
.billing-ph { margin-bottom: 18px; }
.billing-ph h1 {
  font-size: 22px; font-weight: 800;
  letter-spacing: -.025em;
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 5px;
  color: var(--text);
}
.billing-ph-ic {
  width: 28px; height: 28px; border-radius: 8px;
  background: linear-gradient(135deg, var(--green, #10b981), var(--accent, #84cc16));
  color: #04130c;
  display: flex; align-items: center; justify-content: center;
}
.billing-ph-ic svg { width: 16px; height: 16px; }
.billing-sub {
  font-size: 12.5px; color: var(--text-dim);
  font-weight: 500;
}

.billing-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 14px;
}
@media (min-width: 900px) {
  .billing-cols { grid-template-columns: 1fr 1.3fr; }
}
.billing-col-left {
  display: flex; flex-direction: column; gap: 14px;
}
.billing-card {
  background: var(--bg-surface, #141925);
  border: 1px solid var(--border, #232a3a);
  border-radius: 12px;
  padding: 18px 20px;
}
.billing-card h3 {
  font-size: 13.5px; font-weight: 800;
  margin: 0 0 12px;
  display: flex; align-items: center; gap: 8px;
  color: var(--text);
}
.billing-card h3 .ic {
  width: 22px; height: 22px; border-radius: 6px;
  background: rgba(16,185,129,.13);
  color: var(--mint, #34d399);
  display: flex; align-items: center; justify-content: center;
}
.billing-card h3 .ic svg { width: 13px; height: 13px; }

.billing-payment {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 13px;
  background: var(--bg, #0a0e1a);
  border: 1px solid var(--border);
  border-radius: 9px;
}
.billing-payment .card-ic {
  width: 42px; height: 28px;
  border-radius: 5px;
  background: linear-gradient(135deg, #1a1f71, #0a1a8c);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 9.5px; font-weight: 900;
  letter-spacing: .05em; flex-shrink: 0;
}
.billing-payment .info { flex: 1; min-width: 0; }
.billing-payment .info .n {
  font-size: 13px; font-weight: 700; color: var(--text);
}
.billing-payment .info .s {
  font-size: 11px; color: var(--text-dim);
  font-weight: 500; margin-top: 1px;
}
.billing-payment .change {
  font-size: 11.5px; font-weight: 700;
  color: var(--mint, #34d399);
  background: transparent;
  border: 1px solid rgba(16,185,129,.32);
  border-radius: 7px;
  padding: 6px 11px;
  cursor: pointer; font-family: inherit;
}
.billing-payment .change:hover { background: rgba(16,185,129,.07); }

.billing-feat-list {
  list-style: none; display: flex; flex-direction: column;
  gap: 8px; padding: 0; margin: 0;
}
.billing-feat-list li {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 12.5px; color: var(--text-muted);
  font-weight: 500; line-height: 1.45;
}
.billing-feat-list li svg {
  width: 14px; height: 14px;
  color: var(--mint, #34d399);
  flex-shrink: 0; margin-top: 3px;
}
.billing-feat-list li b { color: var(--text); font-weight: 700; }

.billing-invoices-stub {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 24px 16px 12px;
  color: var(--text-muted);
}
.billing-invoices-stub .t {
  font-size: 13.5px; font-weight: 700;
  color: var(--text); margin-bottom: 6px;
}
.billing-invoices-stub .s {
  font-size: 12px; font-weight: 500;
  color: var(--text-dim); margin-bottom: 14px;
  line-height: 1.5; max-width: 320px;
}
.billing-portal-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 800;
  color: var(--mint, #34d399);
  background: rgba(16,185,129,.13);
  border: 1px solid rgba(16,185,129,.32);
  border-radius: 8px;
  padding: 9px 14px; cursor: pointer; font-family: inherit;
}
.billing-portal-btn:hover { background: rgba(16,185,129,.22); }
.billing-portal-btn svg { width: 13px; height: 13px; }

.billing-cancel-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  background: var(--bg-surface, #141925);
  border: 1px solid rgba(239,68,68,.22);
  border-radius: 11px;
  margin-top: 14px;
}
.billing-cancel-row .info { flex: 1; }
.billing-cancel-row .info .t {
  font-size: 13px; font-weight: 700; color: var(--text);
}
.billing-cancel-row .info .s {
  font-size: 11.5px; color: var(--text-dim);
  font-weight: 500; margin-top: 2px;
}
.billing-cancel-row .btn {
  font-size: 12px; font-weight: 700;
  color: #fca5a5;
  background: transparent;
  border: 1px solid rgba(239,68,68,.36);
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer; font-family: inherit;
}
.billing-cancel-row .btn:hover { background: rgba(239,68,68,.08); }

/* === V2: Tier-modaali (Vaihda taso) === */
.tier-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(5,8,14,.78);
  backdrop-filter: blur(6px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 32px 16px 16px;
  z-index: 9500;
  overflow-y: auto;
  animation: tierFadeIn .15s ease-out;
}
@keyframes tierFadeIn { from { opacity: 0; } to { opacity: 1; } }
.tier-modal {
  width: 100%; max-width: 1100px;
  background: var(--bg-surface, #141925);
  border: 1px solid var(--border-2, #323a52);
  border-radius: 16px;
  box-shadow: 0 40px 100px rgba(0,0,0,.6);
  overflow: hidden;
  display: flex; flex-direction: column;
  margin: 0 auto;
}
.tier-modal-head {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 20px 28px 16px;
  border-bottom: 1px solid var(--border);
}
.tier-modal-head .h { flex: 1; min-width: 0; }
.tier-modal-head .tag {
  font-size: 10px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--mint, #34d399);
}
.tier-modal-head .t {
  font-size: 22px; font-weight: 900;
  letter-spacing: -.025em; margin-top: 4px;
  color: var(--text);
}
.tier-modal-head .s {
  font-size: 13px; color: var(--text-muted);
  font-weight: 500; margin-top: 5px; line-height: 1.5;
}
.tier-modal-head .x {
  width: 36px; height: 36px; border-radius: 9px;
  border: none; background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.tier-modal-head .x:hover { background: rgba(255,255,255,.05); color: var(--text); }
.tier-modal-head .x svg { width: 18px; height: 18px; }
.tier-modal-body {
  padding: 16px 24px 22px;
  overflow-y: auto;
}
.tier-modal-body .pricing-billing-toggle { margin-bottom: 18px; }
.tier-modal-body .pricing-plans { margin-bottom: 18px; }
.tier-modal-body .pricing-foot {
  margin-top: 0; border-top: 1px solid var(--border);
  padding-top: 14px;
}
@media (max-width: 600px) {
  .tier-modal-head { padding: 16px 18px 12px; }
  .tier-modal-head .t { font-size: 18px; }
  .tier-modal-body { padding: 14px 14px 18px; }
}

/* === V2: Aktiivisen tilauksen hallintakortti (Tilaus & lasku) === */
.billing-active-card {
  background: linear-gradient(135deg, rgba(16,185,129,.14), rgba(132,204,22,.06));
  border: 1px solid rgba(16,185,129,.4);
  border-radius: 14px;
  padding: 22px 24px;
  margin-bottom: 22px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: center;
}
@media (min-width: 720px) {
  .billing-active-card { grid-template-columns: 1fr auto; gap: 20px; }
}
.billing-l { display: flex; flex-direction: column; gap: 5px; }
.billing-l .billing-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 800; color: #04130c;
  background: linear-gradient(135deg, var(--green, #10b981), var(--accent, #84cc16));
  padding: 3px 9px; border-radius: 20px;
  letter-spacing: .06em; text-transform: uppercase;
  width: max-content;
}
.billing-l h2 {
  font-size: 24px; font-weight: 900;
  letter-spacing: -.025em; margin-top: 4px; color: var(--text);
}
.billing-desc {
  font-size: 13px; color: var(--text-muted);
  font-weight: 500; margin-top: 3px;
}
.billing-next {
  font-size: 11.5px; color: var(--text-dim);
  font-weight: 600; margin-top: 9px;
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap;
}
.billing-next b { color: var(--text); font-weight: 700; }
.billing-next svg { width: 13px; height: 13px; color: var(--mint, #34d399); flex-shrink: 0; }

.billing-r {
  display: flex; flex-direction: column;
  align-items: flex-end; gap: 9px;
}
@media (max-width: 720px) {
  .billing-r { align-items: flex-start; }
}
.billing-price {
  font-size: 30px; font-weight: 900;
  letter-spacing: -.03em; line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.billing-period {
  font-size: 13px; color: var(--text-dim); font-weight: 600;
}
.billing-actions {
  display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap;
}
.billing-actions button {
  font-size: 12.5px; font-weight: 800;
  font-family: inherit;
  border-radius: 8px;
  padding: 8px 13px;
  cursor: pointer;
  letter-spacing: -.01em;
  transition: filter .15s, border-color .15s;
}
.billing-chg {
  color: var(--mint, #34d399);
  background: rgba(16,185,129,.13);
  border: 1px solid rgba(16,185,129,.35);
}
.billing-chg:hover { filter: brightness(1.15); }
.billing-mgmt {
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border-2, #323a52);
}
.billing-mgmt:hover { color: var(--text); border-color: var(--mint, #34d399); }

/* === V2: Hinnasto / Tasot-vertailu === */
.pricing-page {
  max-width: 1180px; margin: 0 auto;
  padding: 22px 22px 60px;
}
.pricing-head { text-align: center; margin-bottom: 22px; }
.pricing-head h1 {
  font-size: 26px; font-weight: 900;
  letter-spacing: -.03em; margin-bottom: 8px;
  color: var(--text);
}
.pricing-head p {
  font-size: 13.5px; color: var(--text-muted, #b4bacb);
  font-weight: 500; line-height: 1.55;
  max-width: 620px; margin: 0 auto;
}
.pricing-billing-toggle {
  display: flex; justify-content: center;
  margin-bottom: 22px;
}
.pricing-billing-toggle .bt {
  display: inline-flex; align-items: center; gap: 3px;
  background: var(--surface-2, #1c2231);
  border: 1px solid var(--border, #232a3a);
  padding: 4px; border-radius: 11px;
}
.pricing-billing-toggle .bt button {
  font-family: inherit; font-size: 12.5px; font-weight: 700;
  color: var(--text-dim, #7a8094);
  background: transparent; border: none;
  padding: 8px 16px; border-radius: 7px; cursor: pointer;
  display: flex; align-items: center; gap: 7px;
  letter-spacing: -.01em;
}
.pricing-billing-toggle .bt button.on {
  background: var(--bg, #0a0e1a); color: var(--text, #f1f3f9);
}
.pricing-billing-toggle .bt button .save {
  font-size: 10px; font-weight: 800; color: #04130c;
  background: linear-gradient(135deg, var(--green, #10b981), var(--accent, #84cc16));
  padding: 2px 7px; border-radius: 5px;
  letter-spacing: .04em; text-transform: uppercase;
}
.pricing-plans {
  display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 24px;
}
@media (min-width: 900px) {
  .pricing-plans { grid-template-columns: 1fr 1fr 1fr; }
}
.pricing-plan {
  background: var(--bg-surface, #141925);
  border: 1.5px solid var(--border, #232a3a);
  border-radius: 13px; padding: 24px 20px;
  position: relative; display: flex; flex-direction: column;
}
.pricing-plan.current {
  border-color: rgba(16,185,129,.42);
  background: linear-gradient(180deg, var(--bg-surface, #141925), rgba(16,185,129,.04));
  box-shadow: 0 0 0 1px rgba(16,185,129,.18);
}
.pricing-plan.featured {
  background: linear-gradient(180deg, rgba(251,191,36,.05), var(--bg-surface, #141925));
  border-color: rgba(251,191,36,.4);
  box-shadow: 0 0 0 1px rgba(251,191,36,.2), 0 12px 30px rgba(251,191,36,.08);
}
.pricing-pop {
  position: absolute; top: -11px; left: 50%;
  transform: translateX(-50%);
  font-size: 10px; font-weight: 800; color: #04130c;
  padding: 4px 11px; border-radius: 20px;
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  background: linear-gradient(135deg, var(--green, #10b981), var(--accent, #84cc16));
}
.pricing-pop.pop-popular { background: linear-gradient(135deg, var(--mint, #34d399), var(--green-2, #22c55e)); }
.pricing-pop.pop-featured { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.pricing-plan-h {
  display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 5px;
}
.pricing-plan-h .nm {
  font-size: 13px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--mint, #34d399);
}
.pricing-plan.featured .pricing-plan-h .nm { color: #fbbf24; }
.pricing-plan.basic .pricing-plan-h .nm { color: var(--text-dim); }
.pricing-plan-h .now-badge {
  font-size: 9.5px; font-weight: 800; color: var(--text-muted);
  background: var(--surface-2, #1c2231); padding: 3px 8px;
  border-radius: 5px; letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid var(--border);
}
.pricing-plan-h .now-badge.cur {
  color: var(--mint, #34d399);
  border-color: rgba(16,185,129,.32);
  background: rgba(16,185,129,.1);
}
.pricing-pr { display: flex; align-items: baseline; gap: 5px; margin: 6px 0 4px; }
.pricing-pr .v {
  font-size: 34px; font-weight: 900; letter-spacing: -.035em;
  line-height: 1; font-variant-numeric: tabular-nums; color: var(--text);
}
.pricing-pr .v.free { color: var(--text-dim); }
.pricing-pr .p { font-size: 13px; color: var(--text-dim); font-weight: 600; }
.pricing-yr-note {
  font-size: 11.5px; color: var(--mint, #34d399);
  font-weight: 700; margin-top: 3px; min-height: 16px;
}
.pricing-plan.basic .pricing-yr-note { color: transparent; }
.pricing-desc {
  font-size: 12.5px; color: var(--text-muted);
  font-weight: 500; margin: 9px 0 14px;
  line-height: 1.5; min-height: 42px;
}
.pricing-features {
  list-style: none; padding: 0; margin: 0 0 18px;
  display: flex; flex-direction: column; gap: 7px; flex: 1;
}
.pricing-features li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12.5px; color: var(--text-muted, #b4bacb);
  font-weight: 500; line-height: 1.4;
}
.pricing-features li svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; }
.pricing-features li svg.yes { color: var(--mint, #34d399); }
.pricing-features li svg.sharp { color: #fbbf24; }
.pricing-features li svg.no { color: var(--text-dim); opacity: .4; }
.pricing-features li.no { color: var(--text-dim); opacity: .55; }
.pricing-features li b { color: var(--text); font-weight: 700; }
.pricing-features li.head {
  font-size: 10px; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-dim); margin: 6px 0 -2px;
  padding-top: 5px; border-top: 1px dashed var(--border);
}
.pricing-features li.head:first-child {
  margin-top: 0; padding-top: 0; border-top: none;
}
.pricing-cta {
  font-size: 13.5px; font-weight: 800; font-family: inherit;
  border-radius: 10px; padding: 12px; cursor: pointer;
  letter-spacing: -.01em; width: 100%;
  transition: filter .15s, transform .1s;
}
.pricing-cta.current {
  background: rgba(16,185,129,.1); color: var(--mint, #34d399);
  border: 1px solid rgba(16,185,129,.32); cursor: default;
}
.pricing-cta.upgrade {
  background: linear-gradient(135deg, var(--green, #10b981), var(--accent, #84cc16));
  color: #04130c; border: none;
  box-shadow: 0 6px 16px rgba(16,185,129,.3);
}
.pricing-cta.upgrade-sharp {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #1f1500; border: none;
  box-shadow: 0 6px 16px rgba(251,191,36,.3);
}
.pricing-cta.downgrade {
  background: transparent; color: var(--text-muted);
  border: 1px solid var(--border-2, #323a52);
}
.pricing-cta.upgrade:hover, .pricing-cta.upgrade-sharp:hover { filter: brightness(1.08); }
.pricing-cta:not(:disabled):active { transform: translateY(1px); }
.pricing-foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; padding: 18px 0;
  border-top: 1px solid var(--border);
  font-size: 12.5px; color: var(--text-dim);
  font-weight: 500; flex-wrap: wrap;
}
.pricing-foot .stamp { display: flex; align-items: center; gap: 8px; }
.pricing-foot .stamp svg { width: 14px; height: 14px; color: var(--mint, #34d399); }
.pricing-foot .links a { color: var(--mint, #34d399); text-decoration: none; font-weight: 700; }

/* V2: Estä brushin touch-konfliktit swipe-navin kanssa */
.db-brush, .db-brushhandle, .db-brushwin,
.hv-brush, .hv-brushhandle, .hv-brushwin {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

/* === Notifikaatiopaneeli (kello + badge + paneeli) === */
.notif-bell-btn { position: relative; }
.notif-badge {
  position: absolute; top: -3px; right: -3px;
  min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 9px;
  background: var(--red, #ef4444); color: #fff;
  font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--bg, #0a0e1a);
  font-variant-numeric: tabular-nums;
}
.notif-bell-btn.has-unread svg { color: var(--mint, #34d399); }

/* Pulse-once: lyhyt huomionkiinnitys kun uusi notifikaatio tulee */
.notif-bell-btn.pulse-once {
  animation: bell-pulse-once 0.8s ease-out 3;
}
@keyframes bell-pulse-once {
  0%   { transform: scale(1) rotate(0); }
  10%  { transform: scale(1.15) rotate(-8deg); }
  30%  { transform: scale(1.05) rotate(8deg); }
  50%  { transform: scale(1.1) rotate(-4deg); }
  70%  { transform: scale(1) rotate(2deg); }
  100% { transform: scale(1) rotate(0); }
}

/* ─── Kiitos tilauksesta -banneri (slim, ei blokkaa) ─── */
.sub-thanks-banner {
  position: fixed;
  top: 12px; left: 50%;
  transform: translate(-50%, -120%);
  z-index: 9999;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px 12px 14px;
  background: linear-gradient(135deg, var(--bg-surface, #141925), var(--bg-surface-2, #1c2231));
  border: 1px solid rgba(16, 185, 129, 0.45);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(16, 185, 129, 0.15) inset;
  min-width: 320px; max-width: 540px;
  transition: transform 0.42s cubic-bezier(0.2, 0.8, 0.3, 1), opacity 0.32s;
  opacity: 0;
  font-family: inherit;
}
.sub-thanks-banner.show {
  transform: translate(-50%, 0);
  opacity: 1;
}
.sub-thanks-banner.hide {
  transform: translate(-50%, -120%);
  opacity: 0;
}
.sub-thanks-ic {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary, #10b981), var(--accent, #84cc16));
  color: var(--bg, #0a0e1a);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 18px rgba(16, 185, 129, 0.4);
}
.sub-thanks-ic svg { width: 18px; height: 18px; }
.sub-thanks-text { flex: 1; min-width: 0; }
.sub-thanks-title {
  font-size: 14px; font-weight: 800; color: var(--text, #f1f3f9);
  letter-spacing: -0.01em;
}
.sub-thanks-sub {
  font-size: 12px; color: var(--text-muted, #b4bacb);
  margin-top: 2px; font-weight: 500;
}
.sub-thanks-sub b { color: var(--mint, #34d399); font-weight: 800; }
.sub-thanks-close {
  background: none; border: none; cursor: pointer;
  padding: 6px; margin: -6px -2px -6px 4px;
  border-radius: 6px;
  color: var(--text-dim, #8d94a8);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sub-thanks-close:hover { color: var(--text, #f1f3f9); background: rgba(255,255,255,0.05); }
.sub-thanks-close svg { width: 14px; height: 14px; }

@media (max-width: 600px) {
  .sub-thanks-banner {
    min-width: auto;
    left: 12px; right: 12px;
    transform: translateY(-120%);
    max-width: none;
  }
  .sub-thanks-banner.show { transform: translateY(0); }
  .sub-thanks-banner.hide { transform: translateY(-120%); }
}

/* Variantit: warn (peruutus), info (downgrade) */
.sub-thanks-banner.kind-warn {
  border-color: rgba(245, 158, 11, 0.45);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(245, 158, 11, 0.15) inset;
}
.sub-thanks-banner.kind-warn .sub-thanks-ic {
  background: linear-gradient(135deg, var(--warning, #f59e0b), #fbbf24);
  box-shadow: 0 0 18px rgba(245, 158, 11, 0.4);
}
.sub-thanks-banner.kind-warn .sub-thanks-sub b { color: var(--warning, #f59e0b); }

.sub-thanks-banner.kind-info {
  border-color: rgba(96, 165, 250, 0.45);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(96, 165, 250, 0.15) inset;
}
.sub-thanks-banner.kind-info .sub-thanks-ic {
  background: linear-gradient(135deg, #60a5fa, #93c5fd);
  box-shadow: 0 0 18px rgba(96, 165, 250, 0.4);
}
.sub-thanks-banner.kind-info .sub-thanks-sub b { color: #60a5fa; }

.notif-panel {
  position: fixed; top: 60px; right: 14px;
  width: 380px; max-width: calc(100vw - 24px);
  background: var(--bg-surface, #141925);
  border: 1px solid var(--border-2, #323a52);
  border-radius: 13px;
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
  overflow: hidden; z-index: 9000;
  animation: notifFadeIn .15s ease-out;
}
@keyframes notifFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.notif-head {
  display: flex; align-items: center; gap: 9px;
  padding: 14px 16px 11px;
  border-bottom: 1px solid var(--border, #232a3a);
}
.notif-head h3 { font-size: 14px; font-weight: 800; letter-spacing: -.01em; margin: 0; }
.notif-cnt {
  font-size: 10.5px; font-weight: 800;
  color: var(--mint, #34d399);
  background: rgba(16,185,129,.13);
  padding: 2px 8px; border-radius: 20px;
  border: 1px solid rgba(16,185,129,.3);
}
.notif-clear {
  margin-left: auto;
  font-size: 11px; font-weight: 700;
  color: var(--text-dim, #7a8094);
  background: transparent; border: none;
  cursor: pointer; font-family: inherit;
  padding: 2px 4px; border-radius: 4px;
}
.notif-clear:hover { color: var(--text); background: rgba(255,255,255,.04); }
.notif-tabs {
  display: flex; border-bottom: 1px solid var(--border); padding: 0 16px;
}
.notif-tabs button {
  font-size: 11.5px; font-weight: 700;
  color: var(--text-dim, #7a8094);
  background: none; border: none;
  padding: 10px 4px; margin-right: 18px;
  cursor: pointer; font-family: inherit;
  border-bottom: 2px solid transparent;
}
.notif-tabs button.on { color: var(--mint, #34d399); border-bottom-color: var(--mint, #34d399); }
.notif-tabs button span {
  margin-left: 4px;
  font-size: 10px; font-weight: 800;
  color: var(--text-dim);
}
.notif-tabs button.on span { color: var(--mint); }
.notif-list { max-height: 380px; overflow-y: auto; }
.notif-list::-webkit-scrollbar { width: 6px; }
.notif-list::-webkit-scrollbar-thumb {
  background: rgba(120,130,160,.3); border-radius: 4px;
}

.nitem {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  position: relative; cursor: pointer;
  transition: background .1s;
}
.nitem:last-child { border-bottom: none; }
.nitem:hover { background: rgba(255,255,255,.02); }
.nitem.unread { background: rgba(16,185,129,.04); }
.nitem.unread::before {
  content: ""; position: absolute; left: 6px; top: 18px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--mint, #34d399);
}
.nitem .nico {
  width: 32px; height: 32px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.nitem .nico svg { width: 17px; height: 17px; }
.nitem .nico.warn { background: rgba(245,158,11,.18); color: var(--amber, #f59e0b); }
.nitem .nico.good { background: rgba(16,185,129,.18); color: var(--mint, #34d399); }
.nitem .nico.live { background: rgba(239,68,68,.18); color: #f87171; }
.nitem .nico.info {
  background: var(--surface-2, #1c2231); color: var(--text-muted, #b4bacb);
  border: 1px solid var(--border);
}
.nitem .ntx { flex: 1; min-width: 0; }
.nitem .ntx .nt {
  font-size: 12.5px; font-weight: 700;
  color: var(--text); line-height: 1.35;
}
.nitem .ntx .nt b { color: var(--mint, #34d399); font-weight: 800; }
.nitem .ntx .ns {
  font-size: 11px; color: var(--text-dim, #7a8094);
  font-weight: 500; margin-top: 2px; line-height: 1.4;
}
.nitem .ntx .nwhen {
  font-size: 10px; color: var(--text-dim);
  font-weight: 600; margin-top: 4px;
}
.nitem .ncta {
  font-size: 11px; font-weight: 800;
  color: var(--mint, #34d399);
  background: rgba(16,185,129,.1);
  border: 1px solid rgba(16,185,129,.3);
  padding: 4px 9px; border-radius: 7px;
  flex-shrink: 0; margin-top: 4px; cursor: pointer;
  font-family: inherit;
  transition: background .15s;
}
.nitem .ncta:hover { background: rgba(16,185,129,.2); }

.notif-empty {
  padding: 40px 20px; text-align: center;
  color: var(--text-dim);
  font-size: 12.5px; font-weight: 500;
}
.notif-foot {
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: 11px; font-weight: 700;
  color: var(--text-dim, #7a8094);
  background: var(--bg-surface);
  cursor: pointer;
  transition: color .15s;
}
.notif-foot:hover { color: var(--text); }

/* Mobiili: oikea bottom-sheet (drag-handle, scrim, slide-up) */
.notif-scrim {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
  z-index: 8990;
  opacity: 0;
  transition: opacity .2s;
}
.notif-scrim.show { opacity: 1; }
@media (max-width: 760px) {
  .notif-panel {
    left: 0 !important; right: 0 !important; width: auto !important;
    top: auto !important; bottom: 0 !important; margin: 0 !important;
    max-width: none;
    max-height: 82vh; height: 82vh;
    border-radius: 18px 18px 0 0;
    border-left: none; border-right: none; border-bottom: none;
    display: flex; flex-direction: column;
    animation: notifSheetUp .28s cubic-bezier(.2,.7,.2,1);
    padding-top: 14px;
    box-shadow: 0 -16px 40px rgba(0,0,0,.6);
  }
  /* Drag-handle visuaalisena pseudona */
  .notif-panel::before {
    content: '';
    position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
    width: 38px; height: 4px;
    background: var(--border-2, #323a52);
    border-radius: 4px;
    opacity: .9;
  }
  .notif-list { max-height: none; flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .notif-foot { flex-shrink: 0; }
}
@keyframes notifSheetUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* === Omat vedot V2: streak, toolrow (haku + CSV-vienti) === */
.omv-streak { display: flex; flex-direction: column; gap: 4px; }
.omv-streak .v.pos { color: var(--mint, #34d399); }
.omv-streak .v.neg { color: #f87171; }
.omv-streak-dots {
  display: flex; gap: 3px; margin-top: 6px;
}
.omv-streak-dots .d {
  flex: 1; height: 6px; border-radius: 3px;
  background: var(--surface-3, #222a3d);
  min-width: 6px;
}
.omv-streak-dots .d.w { background: var(--green, #10b981); }
.omv-streak-dots .d.l { background: var(--red, #ef4444); }
.omv-streak-dots .d.p { background: var(--amber, #f59e0b); }

.omv-toolrow {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px; flex-wrap: wrap;
}
/* Segtabit toolrow:ssa — poista vanha margin-bottom joka rikkoi linjauksen */
.omv-toolrow .bv-segtabs { flex-shrink: 0; margin: 0; }
/* Sama korkeus kaikille kolmelle (segtabit ovat luonnostaan 44 px: 36 nappi + 4+4 padding) */
.omv-toolrow .omv-search,
.omv-toolrow .omv-tbtn { height: 44px; }

.omv-search {
  flex: 1; min-width: 200px;
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-surface, #141925);
  border: 1px solid var(--border, #232a3a);
  border-radius: 10px;
  padding: 0 12px; height: 38px;
  transition: border-color .15s;
}
.omv-search:focus-within { border-color: var(--mint, #34d399); }
.omv-search svg { width: 15px; height: 15px; color: var(--text-dim, #7a8094); flex-shrink: 0; }
.omv-search input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--text, #f1f3f9); font-family: inherit; font-size: 13px; font-weight: 600;
  min-width: 0;
}
.omv-search input::placeholder { color: var(--text-dim, #7a8094); }
.omv-search-clear {
  background: none; border: none; cursor: pointer;
  color: var(--text-dim, #7a8094); font-size: 18px; line-height: 1;
  padding: 2px 6px; border-radius: 4px;
  transition: color .15s, background .15s;
}
.omv-search-clear:hover { color: var(--text); background: rgba(255,255,255,.05); }

.omv-tbtn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 13px;
  border-radius: 10px;
  border: 1px solid var(--border-2, #323a52);
  background: var(--surface-2, #1c2231);
  color: var(--text-muted, #b4bacb);
  font-family: inherit; font-size: 12.5px; font-weight: 700;
  cursor: pointer; flex-shrink: 0;
  transition: border-color .15s, color .15s;
}
.omv-tbtn:hover { color: var(--text); border-color: var(--mint, #34d399); }
.omv-tbtn svg { width: 14px; height: 14px; }

/* Mobiili: hakukenttä omalle riville, CSV-nappi vain ikoni */
@media (max-width: 768px) {
  .omv-toolrow { gap: 8px; }
  .omv-toolrow .bv-segtabs { flex: 1; }
  .omv-search { width: 100%; order: 99; min-width: 0; height: 36px; }
  .omv-tbtn { padding: 0 11px; }
  .omv-tbtn .lab { display: none; }
}

/* db-charth on samalla .db-chart — neutraloi vanha padding kun se on chartarea-sisällä */
.db-chartarea .db-chart { padding: 0 !important; }
.db-chartarea .db-chart svg {
  max-height: none !important;
  min-height: 0 !important;
  height: 100% !important;
  width: 100% !important;
}
/* Korvaa vanhat mobiili-säännöt jotka pakottivat svg:n min-height: 280px → särki V2-chartin */
@media (max-width: 768px) {
  .db-chartarea .db-chart svg { min-height: 0 !important; height: 100% !important; }
}

/* ============================================================
   V2: Arbitraasi-notifikaatio (mockup-arbitraasi-notifikaatio.html)
   ============================================================ */
.toast-stack {
  position: fixed;
  bottom: 20px; right: 20px;
  z-index: 9999;
  display: flex; flex-direction: column;
  gap: 10px;
  max-width: calc(100vw - 40px);
  pointer-events: none;
}
.toast-stack > * { pointer-events: auto; }

@media (max-width: 600px) {
  .toast-stack {
    top: 0; bottom: auto;
    right: 0; left: 0;
    max-width: 100%;
    gap: 0;
  }
}

.arb-notif {
  width: 440px; max-width: 100%;
  background: var(--bg-surface, #141925);
  border: 1.5px solid rgba(16,185,129,.4);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(16,185,129,.18);
  overflow: hidden;
  position: relative;
  animation: arbNotifIn .35s cubic-bezier(.22,.85,.4,1.04);
}
@keyframes arbNotifIn {
  from { transform: translateX(120%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
.arb-notif::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--mint, #34d399), var(--accent, #84cc16));
}
@media (max-width: 600px) {
  .arb-notif {
    width: 100%; max-width: 100%;
    border-radius: 0 0 14px 14px;
    border-top: none;
    animation: arbNotifInMobile .35s cubic-bezier(.22,.85,.4,1.04);
  }
  @keyframes arbNotifInMobile {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
  }
}

.arb-notif-head {
  display: flex; align-items: flex-start;
  gap: 12px;
  padding: 14px 16px 12px 18px;
}
.arb-notif-pillset { display: flex; flex-direction: column; gap: 6px; }
.arb-notif-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 6px;
  width: max-content;
}
.arb-notif-pill.cat {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff;
}
.arb-notif-pill.cat .ic { width: 11px; height: 11px; }
.arb-notif-pill.fresh {
  background: rgba(16,185,129,.14);
  color: var(--mint, #34d399);
}
.arb-notif-pill.fresh .dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  animation: anPulse 1.4s infinite;
}
@keyframes anPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .4; }
}

.arb-notif-margin { margin-left: auto; text-align: right; }
.arb-notif-margin .v {
  font-size: 26px; font-weight: 900;
  color: var(--mint, #34d399);
  line-height: 1;
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
}
.arb-notif-margin .l {
  font-size: 10px; color: var(--text-dim);
  font-weight: 700; margin-top: 3px;
}

.arb-notif-body { padding: 0 18px 12px; }
.arb-notif-match {
  font-size: 15.5px; font-weight: 800;
  color: var(--text);
  letter-spacing: -.01em;
}
.arb-notif-meta {
  font-size: 11.5px; color: var(--text-dim);
  font-weight: 600; margin-top: 3px;
  display: flex; flex-wrap: wrap; gap: 6px;
  align-items: center;
}
.arb-notif-meta .alks { color: var(--text); font-weight: 700; }

.arb-notif-legs {
  display: flex; flex-direction: column;
  gap: 4px;
  padding: 0 18px 12px;
}
.arb-notif-leg {
  display: grid;
  grid-template-columns: 24px 1fr auto auto;
  gap: 9px; align-items: center;
  padding: 7px 9px;
  background: var(--bg, #0a0e1a);
  border: 1px solid var(--border);
  border-radius: 7px;
}
.arb-notif-leg .lg {
  width: 22px; height: 22px;
  border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 900;
  color: #04130c;
  flex-shrink: 0;
  background: var(--surface-2, #1c2231);
}
.arb-notif-leg .lg.coolbet  { background: #facc15; }
.arb-notif-leg .lg.veikkaus { background: #3b82f6; color: #fff; }
.arb-notif-leg .lg.unibet   { background: #84cc16; }
.arb-notif-leg .lg.pinnacle { background: #ef4444; color: #fff; }
.arb-notif-leg .lg.betsson  { background: #a855f7; color: #fff; }
.arb-notif-leg .nm {
  font-size: 11.5px; font-weight: 700;
  color: var(--text);
  min-width: 0;
  display: flex; flex-direction: column;
  gap: 1px;
}
.arb-notif-leg .nm .side {
  font-size: 10px; color: var(--text-dim);
  font-weight: 600;
}
.arb-notif-leg .stk {
  font-size: 12px; font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.arb-notif-leg .stk span {
  display: block;
  font-size: 9.5px;
  color: var(--text-dim);
  font-weight: 600; margin-top: 1px;
  text-transform: uppercase; letter-spacing: .04em;
}
.arb-notif-leg .odds {
  font-size: 13px; font-weight: 900;
  color: var(--mint, #34d399);
  font-variant-numeric: tabular-nums;
  background: rgba(16,185,129,.13);
  padding: 3px 7px; border-radius: 6px;
}

.arb-notif-stake-input {
  display: flex; align-items: center;
  gap: 10px;
  padding: 11px 18px;
  background: rgba(16,185,129,.05);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.arb-notif-stake-input .lbl {
  font-size: 10.5px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-dim);
}
.arb-notif-stake-input .stake-field {
  position: relative;
  display: flex; align-items: center;
  background: var(--bg, #0a0e1a);
  border: 1.5px solid rgba(16,185,129,.35);
  border-radius: 8px;
  padding: 0 10px; height: 36px;
  width: 130px;
}
.arb-notif-stake-input .stake-field:focus-within { border-color: var(--mint, #34d399); }
.arb-notif-stake-input .stake-field input {
  width: 100%;
  background: transparent; border: none; outline: none;
  color: var(--text); font-family: inherit;
  font-size: 15px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.arb-notif-stake-input .stake-field .suf {
  font-size: 13px; font-weight: 700;
  color: var(--text-dim); margin-left: 4px;
}
.arb-notif-stake-input .profit-out {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 700;
}
.arb-notif-stake-input .profit-out b {
  display: block;
  font-size: 15px;
  color: var(--mint, #34d399);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  margin-top: 1px;
}

.arb-notif-actions {
  display: flex; gap: 8px;
  padding: 12px 18px 14px;
}
.arb-notif-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  font-family: inherit;
  font-size: 12.5px; font-weight: 800;
  border-radius: 9px;
  padding: 11px 12px;
  cursor: pointer;
  letter-spacing: -.01em;
  transition: .12s;
}
.arb-notif-btn.exec {
  flex: 2;
  background: linear-gradient(135deg, var(--green, #10b981), var(--accent, #84cc16));
  color: #04130c;
  border: none;
  box-shadow: 0 6px 14px rgba(16,185,129,.28);
}
.arb-notif-btn.exec:hover { filter: brightness(1.08); }
.arb-notif-btn.dismiss {
  flex: 1;
  background: transparent;
  border: 1px solid var(--border-2);
  color: var(--text-muted);
}
.arb-notif-btn.dismiss:hover {
  color: var(--text);
  border-color: var(--text-muted);
}

.arb-notif-foot {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 8px 18px 12px;
  font-size: 10.5px;
  color: var(--text-dim);
  font-weight: 600;
}
.arb-notif-foot .stamp { display: flex; align-items: center; gap: 5px; }
.arb-notif-foot .stamp svg { width: 11px; height: 11px; }
.arb-notif-foot .settings {
  color: var(--mint, #34d399);
  text-decoration: none;
  font-weight: 700;
  cursor: pointer;
}
.arb-notif-foot .settings:hover { text-decoration: underline; }

/* arb-modal mobile bottom-sheet */
.arb-modal-overlay.mobile {
  align-items: flex-end !important;
  padding: 0 !important;
  overflow: hidden;
}
.arb-modal-overlay.mobile .arb-modal {
  max-width: 100%;
  width: 100%;
  border-radius: 18px 18px 0 0;
  border-left: none; border-right: none; border-bottom: none;
  max-height: 95vh;
  animation: arbBsSlide .25s cubic-bezier(.22,.85,.4,1.04);
}
@keyframes arbBsSlide {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.arb-modal-grip {
  display: flex; justify-content: center;
  padding: 8px 0 0;
}
.arb-modal-grip::after {
  content: "";
  width: 36px; height: 4px;
  border-radius: 3px;
  background: var(--border-2);
}
@media (max-width: 600px) {
  .arb-modal-stake .quick { display: none; }
  .arb-modal-stake { padding: 9px 18px; gap: 8px; }
  .arb-modal-stake .stake-field { height: 34px; width: 110px; padding: 0 9px; }
  .arb-modal-stake .stake-field input { font-size: 14px; }
}

/* ============================================================
   V2: Mobiilin valikko-drawer (mockup-sidebar-v2.html)
   — sama ryhmittely kuin desktop-sidebar, brand-otsikko + profiili pohjalla
   ============================================================ */
.ds-menu.ds-menu-v2 {
  width: 320px;
  max-width: 85vw;
  display: flex;
  flex-direction: column;
  padding: 0;
  background: var(--bg-surface, var(--surface, #141925));
}

/* Brand-otsikko ylhäällä */
.ds-menu-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.ds-menu-logo {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--green, #10b981), var(--accent, #84cc16));
  color: #04130c;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 900;
  flex-shrink: 0;
}
.ds-menu-name {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -.02em;
  color: var(--text);
}
.ds-menu-name .dot {
  color: var(--mint, #34d399);
}
.ds-menu.ds-menu-v2 .ds-menu-close {
  margin-left: auto;
  width: 32px; height: 32px;
  border: none; background: transparent;
  color: var(--text-dim);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 18px;
  border-radius: 8px;
}
.ds-menu.ds-menu-v2 .ds-menu-close:hover {
  background: rgba(255,255,255,.05);
  color: var(--text);
}

/* Nav-alue */
.ds-menu-nav {
  flex: 1;
  padding: 10px 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Sektio-otsikko (Vedonlyönti / Seuranta / Työkalut / Tili) */
.ds-menu-h {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 13px 16px 6px;
}
.ds-menu-h:first-child { padding-top: 4px; }

/* Yksittäinen rivi */
.ds-menu.ds-menu-v2 .ds-menu-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 16px;
  color: var(--text-muted, var(--muted, #b4bacb));
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  border: none;
  border-left: 2.5px solid transparent;
  width: 100%;
  text-align: left;
  transition: .12s;
  text-decoration: none;
  font-family: inherit;
  min-height: 44px;
}
.ds-menu.ds-menu-v2 .ds-menu-item:hover {
  color: var(--text);
  background: rgba(255,255,255,.025);
}
.ds-menu.ds-menu-v2 .ds-menu-item.active {
  color: var(--mint, #34d399);
  background: linear-gradient(90deg, rgba(16,185,129,.10), transparent 80%);
  border-left-color: var(--mint, #34d399);
  font-weight: 700;
}
.ds-menu.ds-menu-v2 .ds-menu-item-icon {
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ds-menu.ds-menu-v2 .ds-menu-item-icon i[data-lucide],
.ds-menu.ds-menu-v2 .ds-menu-item-icon svg {
  width: 18px; height: 18px;
}
.ds-menu-item-lbl {
  flex: 1;
  letter-spacing: -.01em;
}

/* Badge-numerot (lukumäärät tarjolla olevista) */
.ds-menu-item-badge {
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 20px;
  background: var(--surface-3, #222a3d);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  min-width: 20px;
  text-align: center;
}
.ds-menu-item-badge:empty { display: none; }
.ds-menu-item-badge.green { background: rgba(16,185,129,.18); color: var(--mint, #34d399); }
.ds-menu-item-badge.amber { background: rgba(245,158,11,.18); color: var(--amber, #f59e0b); }
.ds-menu-item-badge.red { background: var(--red, #ef4444); color: #fff; }

/* Käyttäjäprofiili pohjalla */
.ds-menu-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-top: 1px solid var(--border);
  background: var(--surface-2, #1c2231);
  flex-shrink: 0;
}
.ds-menu-avatar {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--green, #10b981), var(--accent, #84cc16));
  color: #04130c;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 900;
  flex-shrink: 0;
}
.ds-menu-info { flex: 1; min-width: 0; }
.ds-menu-info .n {
  font-size: 12.5px; font-weight: 700;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ds-menu-info .p {
  font-size: 10.5px;
  color: var(--mint, #34d399);
  font-weight: 700;
  display: inline-flex; align-items: center; gap: 4px;
}
.ds-menu-info .p .pro {
  font-size: 9px; font-weight: 800;
  background: linear-gradient(135deg, var(--green, #10b981), var(--accent, #84cc16));
  color: #04130c;
  padding: 1px 5px;
  border-radius: 5px;
  letter-spacing: .04em;
}

/* Lakitiedot alimpana */
.ds-menu-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 16px 14px;
  font-size: 11px;
  border-top: 1px solid var(--border);
  background: var(--surface-2, #1c2231);
  flex-shrink: 0;
}
.ds-menu-legal a {
  color: var(--text-dim);
  text-decoration: none;
}
.ds-menu-legal a:hover { color: var(--text); }

/* ============================================================
   V2: Sidebar footer popover-menu (profiili-dropdown)
   Avautuu klikkaamalla sivupalkin pohjan profiilirivilta
   ============================================================ */
.ov-side-foot { position: relative; }
.ov-side-foot:hover { background: rgba(255,255,255,.03); }

.ov-side-foot-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 8px;
  right: 8px;
  background: var(--bg-surface, #141925);
  border: 1px solid var(--border-2, #323a52);
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0,0,0,.6);
  z-index: 200;
  padding: 8px 0;
  animation: ovSfmIn .14s ease-out;
}
@keyframes ovSfmIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ov-sfm-head {
  padding: 8px 14px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.ov-sfm-em {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ov-sfm-tier {
  display: inline-block;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 5px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.ov-sfm-tier.free  { color: var(--text-dim); border: 1px solid var(--border); }
.ov-sfm-tier.pro   { background: linear-gradient(135deg, var(--green, #10b981), var(--accent, #84cc16)); color: #04130c; }
.ov-sfm-tier.sharp { background: linear-gradient(135deg, var(--accent, #84cc16), var(--mint, #34d399)); color: #04130c; }

.ov-sfm-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 14px;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: .1s;
}
.ov-sfm-item:hover {
  background: rgba(16,185,129,.08);
  color: var(--mint, #34d399);
}
.ov-sfm-ic {
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dim);
  flex-shrink: 0;
}
.ov-sfm-ic svg { width: 15px; height: 15px; }
.ov-sfm-item:hover .ov-sfm-ic { color: var(--mint, #34d399); }
.ov-sfm-item.danger { color: #f87171; }
.ov-sfm-item.danger:hover { background: rgba(239,68,68,.08); color: #fca5a5; }
.ov-sfm-item.danger .ov-sfm-ic { color: #f87171; }

.ov-sfm-div {
  height: 1px;
  background: var(--border);
  margin: 6px 0;
}

/* ============================================================================
   MIDDLET — Vedonlyönti V3 (mockup-middlet.html)
   ============================================================================ */
.mid-page { padding: 0 16px 22px; }
@media (min-width: 901px) { .mid-page { padding: 0 24px 24px; } }

.mid-phead { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.mid-sound-btn {
  width: 34px; height: 34px;
  border-radius: 8px;
  background: var(--bg-surface, var(--surface, #141925));
  border: 1px solid var(--border);
  color: var(--mint, #34d399);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
}
.mid-sound-btn:hover { background: rgba(16,185,129,.08); }
.mid-sound-btn.off { color: var(--text-dim, var(--dim, #8d94a8)); }
.mid-sound-btn svg { width: 16px; height: 16px; }
.mid-refresh-info {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--text-dim, var(--dim, #8d94a8));
  font-size: 12px; font-weight: 600;
  flex: 1; min-width: 0;
}
.mid-refresh-info .pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--mint, #34d399);
  box-shadow: 0 0 8px rgba(52,211,153,.6);
  animation: pulse 1.6s ease-in-out infinite;
}
.mid-refresh-btn-inline {
  width: 32px; height: 32px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.mid-refresh-btn-inline:hover { color: var(--mint, #34d399); border-color: var(--mint, #34d399); }

/* Intro-strip */
.mid-intro {
  background: linear-gradient(135deg, rgba(132,204,22,.07), rgba(16,185,129,.04));
  border: 1px solid rgba(132,204,22,.22);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex; gap: 12px; align-items: flex-start;
  margin-bottom: 16px;
  font-size: 12.5px;
  color: var(--text-muted, var(--muted, #b4bacb));
  line-height: 1.55;
}
.mid-intro .ic {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: rgba(132,204,22,.14);
  color: var(--accent, #84cc16);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.mid-intro .ic svg { width: 16px; height: 16px; }
.mid-intro b { color: var(--text); font-weight: 800; }
.mid-intro .close {
  background: none; border: none;
  color: var(--text-dim, var(--dim, #8d94a8));
  cursor: pointer;
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.mid-intro .close svg { width: 12px; height: 12px; }

/* KPI-rivi */
.mid-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
@media (max-width: 768px) { .mid-kpis { grid-template-columns: 1fr 1fr 1fr; gap: 8px; } }
@media (max-width: 480px) { .mid-kpis { grid-template-columns: 1fr 1fr; } }
.mid-kpi {
  background: var(--bg-surface, var(--surface, #141925));
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 13px 14px;
}
.mid-kpi .l {
  font-size: 10px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-dim, var(--dim, #8d94a8));
}
.mid-kpi .v {
  font-size: 22px; font-weight: 900;
  letter-spacing: -.025em; margin-top: 5px;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.mid-kpi .v.pos { color: var(--mint, #34d399); }
.mid-kpi .v.neg { color: #f87171; }
.mid-kpi .s {
  font-size: 11px; color: var(--text-dim, var(--dim, #8d94a8));
  margin-top: 3px; font-weight: 600;
}

/* Middle-kortti */
.mid-card {
  background: var(--bg-surface, var(--surface, #141925));
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-bottom: 12px;
  overflow: hidden;
  position: relative;
}
.mid-card::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--accent, #84cc16), var(--mint, #34d399));
}

.mid-head {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px 6px;
}
.mid-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.mid-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: .04em;
}
.mid-pill.fresh {
  background: rgba(16,185,129,.13);
  color: var(--mint, #34d399);
  border: 1px solid rgba(16,185,129,.3);
}
.mid-pill.fresh .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--mint, #34d399);
}
.mid-pill.middle {
  background: rgba(132,204,22,.14);
  color: var(--accent, #84cc16);
  border: 1px solid rgba(132,204,22,.3);
}
.mid-pill.time {
  background: var(--bg, #0a0e1a);
  color: var(--text-dim, var(--dim, #8d94a8));
  border: 1px solid var(--border);
}
.mid-pill.time svg { width: 10px; height: 10px; }

.mid-headinfo { flex: 1; min-width: 0; }
.mid-title {
  font-size: 15px; font-weight: 800;
  letter-spacing: -.01em;
  color: var(--text);
  line-height: 1.25;
}
.mid-meta {
  font-size: 11.5px;
  color: var(--text-dim, var(--dim, #8d94a8));
  margin-top: 4px;
  font-weight: 600;
}
.mid-meta .sep { color: var(--border-2, var(--border-strong, #323a52)); margin: 0 5px; }

.mid-jackpot { text-align: right; flex-shrink: 0; }
.mid-jackpot .l {
  font-size: 10px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-dim, var(--dim, #8d94a8));
}
.mid-jackpot .v {
  font-size: 22px; font-weight: 900;
  color: var(--accent, #84cc16);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
  letter-spacing: -.02em;
}
.mid-jackpot .s {
  font-size: 10.5px;
  color: var(--text-dim, var(--dim, #8d94a8));
  margin-top: 3px; font-weight: 700;
}

/* ─── Mobile-optimointi (mid-card) ─── */
@media (max-width: 600px) {
  .mid-card .mid-head {
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px 6px;
  }
  .mid-card .mid-headinfo { width: 100%; order: 1; }
  .mid-card .mid-jackpot {
    width: 100%; order: 2;
    text-align: left;
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 10px 12px;
    background: linear-gradient(135deg, rgba(132,204,22,.12), rgba(16,185,129,.05));
    border: 1px solid rgba(132,204,22,.32);
    border-radius: 9px;
  }
  .mid-card .mid-jackpot .l {
    font-size: 9.5px;
    flex-shrink: 0;
    align-self: center;
  }
  .mid-card .mid-jackpot .v {
    font-size: 22px;
    margin-top: 0;
    flex-shrink: 0;
  }
  .mid-card .mid-jackpot .s {
    flex: 1;
    text-align: right;
    font-size: 10px;
    margin-top: 0;
    align-self: center;
    font-weight: 600;
    color: var(--text-dim, var(--dim));
  }
  .mid-card .mid-title {
    font-size: 16px;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }
  .mid-card .mid-meta {
    font-size: 11px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    line-height: 1.3;
  }
  .mid-card .mid-meta .sep { margin: 0 2px; }
  .mid-card .mid-pills { gap: 5px; }
  .mid-card .mid-pill { font-size: 9.5px; padding: 3px 7px; letter-spacing: .03em; }
  .mid-window-l .arrow { display: none; }
  .spectrum-side-labels {
    font-size: 9.5px;
    flex-direction: column;
    gap: 3px;
    margin-top: 6px;
  }
  .spectrum-side-labels .arrow { display: inline-block; }
  .mid-foot {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 10px 14px 14px;
  }
  .mid-foot .stake-info { text-align: center; font-size: 11.5px; }
  .mid-play-btn {
    width: 100%;
    justify-content: center;
    padding: 12px 16px;
    font-size: 14px;
  }
  .mid-window { margin: 6px 14px 12px; padding: 10px 12px; }
  .spectrum { height: 30px; }
  .spectrum .middle-label { font-size: 10px; }
  .spectrum-axis { font-size: 10px; padding-top: 5px; }
  .mid-legs { margin: 0 14px 10px; }
  .mid-legs .leg { padding: 8px 10px; gap: 9px; }
  .mid-legs .info { font-size: 12px; }
  .mid-legs .odds { font-size: 13px; }
  .mid-scn { margin: 0 14px 12px; }
  .mid-scn .scn-row { padding: 8px 12px; font-size: 11.5px; gap: 10px; }
  .mid-scn .scn-row .delta { font-size: 12px; }
}

/* Spectrum */
.mid-window {
  margin: 8px 16px 14px;
  padding: 12px 14px;
  background: var(--bg, #0a0e1a);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.mid-window-l {
  font-size: 10.5px; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-dim, var(--dim, #8d94a8));
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 6px;
}
.mid-window-l .arrow {
  margin-left: auto;
  font-size: 10px;
  color: var(--accent, #84cc16);
  font-weight: 700;
}
.spectrum {
  position: relative;
  height: 36px;
  background: rgba(255,255,255,.025);
  border-radius: 8px;
  border: 1px solid var(--border);
  overflow: hidden;
}
/* Sivualueet: kevyt punainen tausta — positioidaan dynaamisesti middle-bandin perusteella */
.spectrum::before,
.spectrum::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  background: linear-gradient(90deg, rgba(248,113,113,.18), rgba(248,113,113,.05));
  pointer-events: none;
}
.spectrum::before {
  left: 0;
  width: calc(var(--mid-left, 40%) - 1px);
  background: linear-gradient(90deg, rgba(248,113,113,.18), rgba(248,113,113,.05));
}
.spectrum::after {
  right: 0;
  left: calc(var(--mid-right, 60%) + 1px);
  background: linear-gradient(90deg, rgba(248,113,113,.05), rgba(248,113,113,.18));
}
.spectrum .middle-band {
  position: absolute; top: -1px; bottom: -1px;
  background: rgba(132,204,22,.28);
  border-left: 2px solid var(--accent, #84cc16);
  border-right: 2px solid var(--accent, #84cc16);
  box-shadow: 0 0 14px rgba(132,204,22,.35) inset;
  z-index: 1;
}
.spectrum .middle-label {
  position: absolute; top: 50%;
  color: #1a2906;
  font-size: 11px; font-weight: 900;
  letter-spacing: .05em; text-transform: uppercase;
  pointer-events: none;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(132,204,22,.5);
}
.spectrum-axis {
  display: flex; justify-content: space-between;
  padding: 6px 4px 0;
  font-size: 11px;
  color: var(--text-dim, var(--dim, #8d94a8));
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.spectrum-side-labels {
  display: flex; justify-content: space-between;
  margin-top: 8px;
  padding: 0 4px;
  font-size: 10.5px; font-weight: 700;
  color: var(--text-dim, var(--dim, #8d94a8));
  flex-wrap: wrap;
  gap: 4px;
}
.spectrum-side-labels .s1, .spectrum-side-labels .s2 { color: #f87171; }
.spectrum-side-labels .arrow { color: var(--accent, #84cc16); font-weight: 900; }

/* Jalat */
.mid-legs {
  margin: 0 16px 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.mid-legs .leg {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  background: var(--bg, #0a0e1a);
  border: 1px solid var(--border);
  border-radius: 9px;
}
.mid-legs .book {
  width: 26px; height: 26px;
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 900;
  color: #fff; flex-shrink: 0;
}
.mid-legs .book.bet365 { background: #027B5B; color: #fff; }
.mid-legs .book.veikkaus { background: #000399; color: #fff; }
.mid-legs .book.coolbet { background: #2596be; color: #fff; }
.mid-legs .book.unibet { background: #147B45; color: #fff; }
.mid-legs .book.pinnacle { background: #dc2626; }
.mid-legs .book.betsson { background: #7c3aed; }
.mid-legs .book.nordicbet { background: #0ea5e9; }
.mid-legs .book.betfair { background: #F5B942; color: #1a1a1a; }
.mid-legs .book.comeon { background: #f97316; }

.mid-legs .info { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--text-dim, var(--dim)); }
.mid-legs .info b { color: var(--text); font-weight: 800; }
.mid-legs .info .sub { color: var(--text-dim, var(--dim, #8d94a8)); font-size: 10.5px; font-weight: 600; margin-top: 1px; }
.mid-legs .odds {
  text-align: right;
  font-size: 14px; font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--text);
}
.mid-legs .odds .stake {
  display: block;
  font-size: 11px;
  color: var(--text-dim, var(--dim, #8d94a8));
  font-weight: 700;
  margin-top: 2px;
}

/* Skenaariot */
.mid-scn {
  margin: 0 16px 14px;
  background: var(--bg, #0a0e1a);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.mid-scn .scn-row {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 14px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
}
.mid-scn .scn-row:first-child { border-top: none; }
.mid-scn .scn-row .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.mid-scn .scn-row.win .dot { background: var(--accent, #84cc16); box-shadow: 0 0 6px rgba(132,204,22,.5); }
.mid-scn .scn-row.partial .dot { background: #f59e0b; }
.mid-scn .scn-row.lose .dot { background: #f87171; }
.mid-scn .scn-row .ttl {
  flex: 1;
  font-weight: 700;
  color: var(--text-muted, var(--muted, #b4bacb));
}
.mid-scn .scn-row .ttl b { color: var(--text); font-weight: 800; }
.mid-scn .scn-row .delta {
  text-align: right;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  white-space: nowrap;
}
.mid-scn .scn-row.win .delta { color: var(--accent, #84cc16); }
.mid-scn .scn-row.partial .delta { color: #f59e0b; }
.mid-scn .scn-row.lose .delta { color: #f87171; }
.mid-scn .scn-row .delta .sub {
  display: block;
  font-size: 10px;
  color: var(--text-dim, var(--dim, #8d94a8));
  font-weight: 700;
  margin-top: 1px;
}

/* Footer */
.mid-foot {
  padding: 12px 16px 16px;
  display: flex; gap: 10px;
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.12));
  align-items: center;
}
.mid-foot .stake-info {
  flex: 1;
  font-size: 12px;
  color: var(--text-dim, var(--dim, #8d94a8));
  font-weight: 600;
}
.mid-foot .stake-info b {
  color: var(--text); font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.mid-play-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--mint, #34d399);
  color: #04130c;
  border: none;
  padding: 11px 22px;
  border-radius: 10px;
  font-size: 13.5px; font-weight: 900;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: -.01em;
  flex-shrink: 0;
  transition: background .12s;
}
.mid-play-btn:hover { background: var(--green, #10b981); }

/* Modaalin jalka-kerroin -input (muokkaa lennossa) */
.middle-leg-odds {
  display: inline-block;
  width: 62px;
  background: var(--bg, #0a0e1a);
  border: 1px solid var(--border-2, #323a52);
  color: var(--text);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  padding: 3px 7px;
  border-radius: 5px;
  margin: 0 3px;
  text-align: center;
  outline: none;
  -moz-appearance: textfield;
}
.middle-leg-odds::-webkit-outer-spin-button,
.middle-leg-odds::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.middle-leg-odds:focus {
  border-color: var(--mint, #34d399);
  background: rgba(16,185,129,.05);
}

/* Dismissed-bar */
.mid-dismissed-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  background: var(--surface-2, #1c2231);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--text-dim, var(--dim, #8d94a8));
}
.mid-dismissed-bar button {
  margin-left: auto;
  background: none; border: none;
  color: var(--mint, #34d399); font-weight: 700;
  cursor: pointer; font-family: inherit;
}

/* Empty state */
.mid-empty {
  text-align: center;
  padding: 50px 20px;
  background: var(--bg-surface, var(--surface, #141925));
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-top: 16px;
}
.mid-empty .ic { margin-bottom: 10px; }
.mid-empty h3 { color: var(--text); font-size: 15px; font-weight: 800; margin: 10px 0 6px; }
.mid-empty p { margin: 0 0 16px; color: var(--text-dim, var(--dim, #8d94a8)); font-size: 13px; }
.mid-refresh-btn {
  background: rgba(16,185,129,.13);
  border: 1px solid rgba(16,185,129,.32);
  color: var(--mint, #34d399);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px; font-weight: 700;
  cursor: pointer; font-family: inherit;
}

/* ─── Modaali ─── */
.mid-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(5,8,14,.78);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.mid-modal-overlay.mobile { align-items: flex-end; padding: 0; }
.mid-modal {
  background: var(--bg-surface, var(--surface, #141925));
  border: 1px solid var(--border-2, var(--border-strong, #323a52));
  border-radius: 16px;
  width: 100%; max-width: 560px;
  max-height: 92vh;
  overflow-y: auto;
  display: flex; flex-direction: column;
  box-shadow: 0 40px 100px rgba(0,0,0,.6);
}
.mid-modal-overlay.mobile .mid-modal {
  border-radius: 20px 20px 0 0;
  max-height: 95vh;
  max-width: 100%;
  animation: midModalSlideUp .25s cubic-bezier(.22,.85,.4,1.04);
}
@keyframes midModalSlideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.mid-modal-grip {
  display: flex; justify-content: center;
  padding: 8px 0 0;
}
.mid-modal-grip::after {
  content: "";
  width: 36px; height: 4px;
  border-radius: 3px;
  background: var(--border-2, #323a52);
}
.mid-modal-head {
  display: flex; gap: 12px;
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--border);
  align-items: flex-start;
}
.mid-modal-head .tag {
  font-size: 10px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent, #84cc16);
}
.mid-modal-head .t {
  font-size: 17px; font-weight: 800;
  color: var(--text);
  margin-top: 4px;
  letter-spacing: -.02em;
}
.mid-modal-head .s {
  font-size: 11.5px;
  color: var(--text-dim, var(--dim, #8d94a8));
  margin-top: 4px;
  font-weight: 600;
}
.mid-modal-x {
  background: transparent;
  border: none;
  border-radius: 8px;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--text-dim);
  flex-shrink: 0;
}
.mid-modal-x:hover { background: rgba(255,255,255,.05); color: var(--text); }
.mid-modal-x svg { width: 16px; height: 16px; }

.mid-modal-stake {
  padding: 14px 20px;
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
  background: rgba(132,204,22,.04);
  border-bottom: 1px solid var(--border);
}
.mid-modal-stake .lbl {
  font-size: 10.5px; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-dim, var(--dim, #8d94a8));
}
.mid-modal-stake .stake-field {
  display: inline-flex; align-items: center;
  background: var(--bg, #0a0e1a);
  border: 1.5px solid rgba(132,204,22,.35);
  border-radius: 8px;
  padding: 0 12px;
  height: 40px;
}
.mid-modal-stake .stake-field:focus-within { border-color: var(--accent, #84cc16); }
.mid-modal-stake input {
  background: none; border: none; outline: none;
  color: var(--text);
  font-size: 16px; font-weight: 800;
  width: 80px;
  font-variant-numeric: tabular-nums;
  font-family: inherit;
}
.mid-modal-stake .suf { font-size: 13px; color: var(--text-dim); font-weight: 700; }
.mid-modal-stake .quick { display: flex; gap: 6px; }
.mid-modal-stake .quick button {
  background: var(--surface-2, #1c2231);
  border: 1px solid var(--border);
  color: var(--text-muted, var(--muted, #b4bacb));
  padding: 7px 11px;
  border-radius: 7px;
  font-size: 11.5px; font-weight: 800;
  cursor: pointer; font-family: inherit;
}
.mid-modal-stake .quick button:hover {
  color: var(--accent, #84cc16);
  border-color: var(--accent, #84cc16);
}
@media (max-width: 600px) {
  .mid-modal-stake .quick { width: 100%; }
  .mid-modal-stake .quick button { flex: 1; }
}

.mid-modal-outcomes {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 14px 20px;
}
.mid-modal-outcomes .o {
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
}
.mid-modal-outcomes .o.jackpot {
  background: linear-gradient(135deg, rgba(132,204,22,.12), rgba(16,185,129,.05));
  border-color: rgba(132,204,22,.32);
}
.mid-modal-outcomes .o.worst {
  background: rgba(248,113,113,.05);
  border-color: rgba(248,113,113,.22);
}
.mid-modal-outcomes .o .l {
  font-size: 10px; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-dim, var(--dim, #8d94a8));
}
.mid-modal-outcomes .o .v {
  font-size: 22px; font-weight: 900;
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
  letter-spacing: -.02em;
}
.mid-modal-outcomes .o.jackpot .v { color: var(--accent, #84cc16); }
.mid-modal-outcomes .o.worst .v { color: #f87171; }
.mid-modal-outcomes .o .s {
  font-size: 10.5px;
  color: var(--text-dim, var(--dim, #8d94a8));
  margin-top: 3px; font-weight: 700;
}

.mid-modal-steps {
  padding: 4px 20px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.mid-step {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: 12px;
  align-items: center;
  background: var(--bg, #0a0e1a);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  transition: .15s;
}
.mid-step.done {
  background: rgba(16,185,129,.05);
  border-color: rgba(16,185,129,.28);
}
.mid-step .cb {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: var(--surface-2, #1c2231);
  border: 2px solid var(--border-2, #323a52);
  color: transparent;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.mid-step.done .cb {
  background: var(--mint, #34d399);
  border-color: var(--mint, #34d399);
  color: #04130c;
}
.mid-step .cb svg { width: 12px; height: 12px; }
.mid-step .info { min-width: 0; }
.mid-step .info .h {
  font-size: 12px; font-weight: 700;
  color: var(--text);
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap;
}
.mid-step .info .h .num {
  color: var(--text-dim);
  font-weight: 800;
}
.mid-step .info .h .bk { color: var(--accent, #84cc16); font-weight: 800; }
.mid-step .info .d {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 3px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.mid-step .info .d b { color: var(--text); font-weight: 800; }
.mid-step.done .info .h,
.mid-step.done .info .d { opacity: .6; }
.mid-step .opn {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 800;
  color: var(--mint, #34d399);
  background: rgba(16,185,129,.13);
  border: 1px solid rgba(16,185,129,.32);
  padding: 5px 9px;
  border-radius: 6px;
  text-decoration: none;
  flex-shrink: 0;
  cursor: pointer;
  font-family: inherit;
}
.mid-step .opn[disabled] { opacity: .4; cursor: not-allowed; }
.mid-step .opn svg { width: 10px; height: 10px; }

.mid-modal-foot {
  padding: 12px 20px 16px;
  border-top: 1px solid var(--border);
  background: var(--bg-surface, var(--surface, #141925));
}
.mid-modal-foot .save-note {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 9px 11px;
  background: rgba(16,185,129,.06);
  border: 1px solid rgba(16,185,129,.22);
  border-radius: 8px;
  font-size: 11.5px;
  color: var(--text-muted, var(--muted, #b4bacb));
  font-weight: 600;
  margin-bottom: 10px;
  line-height: 1.5;
}
.mid-modal-foot .save-note .ic {
  width: 20px; height: 20px;
  border-radius: 5px;
  background: rgba(16,185,129,.18);
  color: var(--mint, #34d399);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.mid-modal-foot .save-note .ic svg { width: 12px; height: 12px; }
.mid-modal-foot .save-note b { color: var(--text); font-weight: 800; }
.mid-modal-foot .actions {
  display: flex;
  gap: 9px;
}
.mid-mbtn {
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  border-radius: 9px;
  padding: 11px 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.mid-mbtn.ghost {
  flex: 0 0 30%;
  background: transparent;
  border: 1px solid var(--border-2, #323a52);
  color: var(--text-muted, var(--muted, #b4bacb));
}
.mid-mbtn.ghost:hover { color: var(--text); border-color: var(--text-muted); }
.mid-mbtn.save {
  flex: 1;
  background: linear-gradient(135deg, var(--green, #10b981), var(--accent, #84cc16));
  border: none;
  color: #04130c;
}
.mid-mbtn.save svg { width: 13px; height: 13px; }
.mid-mbtn.save:hover { filter: brightness(1.08); }

/* Sidebar "UUSI"-pilli */
.ov-nav-item .ov-nav-new,
.ds-menu-item .ds-menu-item-new {
  display: inline-flex; align-items: center;
  background: rgba(132,204,22,.16);
  color: var(--accent, #84cc16);
  font-size: 9px; font-weight: 900;
  letter-spacing: .05em;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: auto;
  text-transform: uppercase;
}

/* ============================================================================
   LASKIMET — vedonlyönnin laskimet (mockup-laskimet.html)
   ============================================================================ */
.las-page {
  padding: 0 24px 28px;
  max-width: 1200px;
  margin: 0 auto;
}
@media (max-width: 760px) {
  .las-page { padding: 0 14px 22px; }
}

/* Desktop layout: 260px lista + flex aktiivinen */
.las-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.las-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  position: sticky;
  top: 70px;
  align-self: flex-start;
  max-height: calc(100vh - 90px);
  overflow-y: auto;
  scrollbar-width: thin;
}
.las-list::-webkit-scrollbar { width: 5px; }
.las-list::-webkit-scrollbar-thumb { background: var(--border-2, #323a52); border-radius: 3px; }
.las-list h3 {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-dim, var(--dim, #8d94a8));
  padding: 6px 12px;
  margin-top: 8px;
}
.las-list h3:first-child { margin-top: 0; }
.las-cb {
  display: grid;
  grid-template-columns: 30px 1fr;   /* kiinteä ikoni-sarake + nimi → kaikki nimet alkavat samasta kohdasta */
  align-items: center;
  column-gap: 11px;
  padding: 11px 12px;
  border-radius: 9px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted, var(--muted, #b4bacb));
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: .12s;
}
.las-cb:hover {
  background: var(--bg-surface, var(--surface, #141925));
  color: var(--text);
}
.las-cb.active {
  background: var(--bg-surface, var(--surface, #141925));
  border-color: rgba(16,185,129,.32);
  color: var(--text);
}
.las-cb .ic {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--surface-2, #1c2231);
  color: var(--mint, #34d399);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.las-cb.active .ic { background: rgba(16,185,129,.13); }
.las-cb .ic svg { width: 16px; height: 16px; }
.las-cb .nm { flex: 1; min-width: 0; }
.las-cb .nm .t {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.01em;
  display: block;
}
.las-cb .nm .s {
  font-size: 10.5px;
  color: var(--text-dim, var(--dim, #8d94a8));
  font-weight: 500;
  margin-top: 1px;
  line-height: 1.3;
  display: block;
}

/* Aktiivinen laskukortti */
.las-active-card.calc-card {
  background: var(--bg-surface, var(--surface, #141925));
  border: 1px solid var(--border);
  border-radius: 13px;
  padding: 20px 22px;
  /* Vakio min-height jotta vaihto laskimesta toiseen ei aiheuta sivun pomppimista */
  min-height: 620px;
}
.las-active-wrap {
  min-height: 620px;
  min-width: 0;       /* estä grid-itemiä venyttämästä sisältöä */
  width: 100%;
}
.las-active-card.calc-card {
  width: 100%;
  box-sizing: border-box;
}
.las-active-card .calc-body {
  min-width: 0;
}
.las-active-card .las-inputs,
.las-active-card .las-results {
  min-width: 0;
}
@media (max-width: 760px) {
  .las-active-card.calc-card { min-height: auto; }
  .las-active-wrap { min-height: auto; }
}
.las-active-card .calc-h {
  margin-bottom: 16px;
}
.las-active-card .calc-h h2 {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.02em;
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: var(--text);
}
.las-active-card .calc-h h2 .ic {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: rgba(16,185,129,.13);
  color: var(--mint, #34d399);
  display: flex; align-items: center; justify-content: center;
}
.las-active-card .calc-h h2 .ic svg { width: 15px; height: 15px; }
.las-active-card .calc-h .desc {
  font-size: 12.5px;
  color: var(--text-muted, var(--muted, #b4bacb));
  font-weight: 500;
  margin-top: 5px;
  line-height: 1.55;
}
.las-active-card .calc-h .desc b { color: var(--text); font-weight: 700; }

.las-active-card .calc-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}
.las-active-card .las-inputs {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.las-active-card .las-inp {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.las-active-card .las-inp label {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-dim, var(--dim, #8d94a8));
}
.las-active-card .las-inp .field {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--bg, #0a0e1a);
  border: 1.5px solid var(--border-2, #323a52);
  border-radius: 9px;
  padding: 0 12px;
  height: 42px;
}
.las-active-card .las-inp .field:focus-within {
  border-color: var(--mint, #34d399);
}
.las-active-card .las-inp input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  width: 100%;
  min-width: 0;
}
.las-active-card .las-inp .suf {
  font-size: 13px;
  color: var(--text-dim, var(--dim, #8d94a8));
  font-weight: 700;
  margin-left: 4px;
}
.las-active-card .las-inp .hint {
  font-size: 10.5px;
  color: var(--text-dim, var(--dim, #8d94a8));
  font-weight: 500;
  line-height: 1.4;
}

/* Tulospaneeli */
.las-active-card .las-results {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 14px 16px;
  background: var(--bg, #0a0e1a);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.las-active-card .las-results h4 {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-dim, var(--dim, #8d94a8));
  margin: 0 0 5px;
}
.las-active-card .res-hero {
  padding: 11px 13px;
  background: linear-gradient(135deg, rgba(16,185,129,.13), rgba(132,204,22,.05));
  border: 1px solid rgba(16,185,129,.32);
  border-radius: 9px;
  margin-bottom: 5px;
}
.las-active-card .res-hero .l {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-dim, var(--dim, #8d94a8));
}
.las-active-card .res-hero .v {
  font-size: 24px;
  font-weight: 900;
  color: var(--mint, #34d399);
  letter-spacing: -.025em;
  line-height: 1;
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.las-active-card .res-hero .v.neg {
  color: #f87171;
}
.las-active-card .res-hero .s {
  font-size: 11px;
  color: var(--text-muted, var(--muted, #b4bacb));
  font-weight: 600;
  margin-top: 5px;
}
.las-active-card .res-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
}
.las-active-card .res-row:last-child { border-bottom: none; }
.las-active-card .res-row .l {
  color: var(--text-muted, var(--muted, #b4bacb));
  font-weight: 600;
}
.las-active-card .res-row .v {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  color: var(--text);
}
.las-active-card .res-row .v.pos { color: var(--mint, #34d399); }
.las-active-card .res-row .v.neg { color: #f87171; }

.las-tip {
  margin-top: 14px;
  padding: 11px 13px;
  background: rgba(16,185,129,.05);
  border: 1px solid rgba(16,185,129,.2);
  border-radius: 9px;
  font-size: 11.5px;
  color: var(--text-muted, var(--muted, #b4bacb));
  font-weight: 500;
  line-height: 1.55;
  display: flex;
  gap: 9px;
  align-items: flex-start;
}
.las-tip .ic {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: rgba(16,185,129,.18);
  color: var(--mint, #34d399);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.las-tip .ic svg { width: 13px; height: 13px; }
.las-tip b { color: var(--text); font-weight: 700; }

/* Arb-laskurin "+ Lisää kolmas veto" -toggle */
.las-arb-toggle {
  background: rgba(16,185,129,.08);
  border: 1px dashed rgba(16,185,129,.32);
  color: var(--mint, #34d399);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  width: 100%;
  letter-spacing: -.01em;
  transition: .15s;
}
.las-arb-toggle:hover {
  background: rgba(16,185,129,.16);
  border-style: solid;
}

/* ─── Mobile drill-down ─── */
@media (max-width: 760px) {
  .las-layout {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .las-mob .las-mob-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .las-mob .las-cb {
    background: var(--bg-surface, var(--surface, #141925));
    border: 1px solid var(--border);
    padding: 13px 14px;
    border-radius: 10px;
  }
  .las-mob .las-cb::after {
    content: "›";
    margin-left: auto;
    color: var(--text-dim);
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
  }
  .las-mob-back {
    background: transparent;
    border: 1px solid var(--border-2, #323a52);
    color: var(--mint, #34d399);
    padding: 8px 12px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
  }
  .las-mob-back svg { width: 14px; height: 14px; }
  .las-active-card.calc-card {
    padding: 16px 16px;
  }
  .las-active-card .calc-h h2 { font-size: 16px; }
  .las-active-card .calc-body {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .las-active-card .las-inp .field { height: 40px; }
  .las-active-card .las-inp input { font-size: 14.5px; }
  .las-active-card .res-hero .v { font-size: 22px; }
}

/* ============================================================================
   STRATEGIAT V3 — clean redesign (mockup-strategiat.html)
   ============================================================================ */
.strat-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px 28px;
}
@media (max-width: 600px) { .strat-page { padding: 0 14px 22px; } }

.strat-intro {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--mint, #34d399);
  border-radius: 10px;
  padding: 12px 40px 12px 16px;
  margin-bottom: 14px;
  position: relative;
  font-size: 13px; line-height: 1.55;
  color: var(--text-muted);
}
.strat-intro p { margin: 0; }
.strat-intro-close {
  position: absolute; top: 8px; right: 8px;
  background: none; border: none; cursor: pointer;
  width: 24px; height: 24px;
  color: var(--text-dim);
  border-radius: 5px;
  display: inline-flex; align-items: center; justify-content: center;
}
.strat-intro-close:hover { color: var(--text); background: rgba(255,255,255,0.05); }
.strat-intro-close svg { width: 13px; height: 13px; }

.strat-hero {
  background: linear-gradient(135deg, rgba(16,185,129,.08), rgba(132,204,22,.04));
  border: 1px solid rgba(16,185,129,.22);
  border-radius: 14px;
  padding: 16px 18px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 14px 0 16px;
}
@media (max-width: 600px) {
  .strat-hero { grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px; }
}
.strat-hero .hero-metric .l {
  font-size: 10px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-dim, var(--dim, #8d94a8));
}
.strat-hero .hero-metric .v {
  font-size: 22px; font-weight: 900;
  color: var(--text);
  margin-top: 4px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.strat-hero .hero-metric .v.pos { color: var(--mint, #34d399); }
.strat-hero .hero-metric .v.neg { color: #f87171; }
.strat-hero .hero-metric .s {
  font-size: 11px;
  color: var(--text-dim, var(--dim, #8d94a8));
  margin-top: 3px; font-weight: 600;
}

.strat-toolbar {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-bottom: 14px;
}
.strat-new-group {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}
.strat-new-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--mint, #34d399);
  color: #04130c;
  border: none;
  padding: 10px 16px;
  border-radius: 9px;
  font-size: 13px; font-weight: 800;
  cursor: pointer; font-family: inherit;
  letter-spacing: -.01em;
}
.strat-new-btn:hover { filter: brightness(1.08); }
.strat-new-btn svg { width: 14px; height: 14px; }
/* +EV — vihreä mint */
.strat-new-btn.solid-ev {
  background: var(--mint, #34d399);
  color: #04130c;
}
/* ARB — lime accent */
.strat-new-btn.solid-arb,
.strat-new-btn.arb {
  background: var(--accent, #84cc16);
  color: #1a2906;
}
/* MIDDLE — sininen */
.strat-new-btn.solid-middle {
  background: #60a5fa;
  color: #0a1929;
}
@media (max-width: 600px) {
  .strat-new-group { width: 100%; }
  .strat-new-group .strat-new-btn { flex: 1; min-width: 0; padding: 9px 6px; font-size: 11.5px; justify-content: center; }
}
.strat-filter-chips {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-left: auto;
}
@media (max-width: 600px) { .strat-filter-chips { margin-left: 0; width: 100%; } }
.strat-fchip {
  background: var(--bg-surface, var(--surface, #141925));
  border: 1px solid var(--border);
  color: var(--text-muted, var(--muted, #b4bacb));
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12px; font-weight: 700;
  cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; gap: 5px;
}
.strat-fchip:hover { color: var(--text); }
.strat-fchip.on {
  background: rgba(16,185,129,.13);
  border-color: rgba(16,185,129,.32);
  color: var(--mint, #34d399);
}
.strat-fchip .n {
  color: var(--text-dim, var(--dim, #8d94a8));
  font-size: 11px;
  font-weight: 800;
}
.strat-fchip.on .n { color: var(--mint, #34d399); }

.strat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 12px;
}

.strat-card {
  background: var(--bg-surface, var(--surface, #141925));
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  position: relative;
}
.strat-card::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
}
.strat-card.type-ev::before { background: var(--mint, #34d399); }
.strat-card.type-arb::before { background: var(--accent, #84cc16); }
.strat-card.type-middle::before { background: #60a5fa; }
.strat-card.paused { opacity: .65; }
.strat-card.paused::before { background: var(--text-dim, var(--dim, #8d94a8)); }

.strat-card .sc-head {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px 8px;
}
.strat-card .sc-type {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 800;
  letter-spacing: .05em;
  padding: 3px 8px;
  border-radius: 5px;
  flex-shrink: 0;
}
.strat-card .sc-type.ev {
  background: rgba(16,185,129,.13);
  color: var(--mint, #34d399);
  border: 1px solid rgba(16,185,129,.32);
}
.strat-card .sc-type.arb {
  background: rgba(132,204,22,.14);
  color: var(--accent, #84cc16);
  border: 1px solid rgba(132,204,22,.32);
}
.strat-card .sc-type.middle {
  background: rgba(96,165,250,.13);
  color: #60a5fa;
  border: 1px solid rgba(96,165,250,.32);
}
.strat-card .sc-info { flex: 1; min-width: 0; }
.strat-card .sc-name {
  font-size: 14.5px; font-weight: 800;
  color: var(--text);
  letter-spacing: -.01em;
  margin-top: 2px;
  word-break: break-word;
}
.strat-card .sc-desc {
  font-size: 11.5px;
  color: var(--text-dim, var(--dim, #8d94a8));
  margin-top: 3px;
  font-weight: 600;
}

.strat-card .sc-tgl {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 800;
  color: var(--text-dim, var(--dim, #8d94a8));
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
}
.strat-card .sc-tgl .sw {
  width: 32px; height: 18px; border-radius: 999px;
  background: var(--surface-3, #222a3d);
  position: relative;
  transition: background .15s;
}
.strat-card .sc-tgl .sw::after {
  content: ''; position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--text-dim, var(--dim, #8d94a8));
  transition: left .15s, background .15s;
}
.strat-card .sc-tgl.on { color: var(--mint, #34d399); }
.strat-card .sc-tgl.on .sw { background: rgba(16,185,129,.32); }
.strat-card .sc-tgl.on .sw::after { left: 16px; background: var(--mint, #34d399); }

.strat-card .sc-filters {
  display: flex; flex-wrap: wrap; gap: 5px;
  padding: 4px 16px 10px;
}
.strat-card .sc-f {
  background: var(--bg, #0a0e1a);
  border: 1px solid var(--border);
  color: var(--text-muted, var(--muted, #b4bacb));
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px; font-weight: 700;
}
.strat-card .sc-f.highlight {
  background: rgba(132,204,22,.14);
  color: var(--accent, #84cc16);
  border-color: rgba(132,204,22,.32);
}

.strat-card .sc-perf {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 0 16px 12px;
}
@media (max-width: 600px) { .strat-card .sc-perf { grid-template-columns: 1fr 1fr; } }
.strat-card .perf-cell {
  background: var(--bg, #0a0e1a);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
}
.strat-card .perf-cell .l {
  font-size: 9.5px; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-dim, var(--dim, #8d94a8));
}
.strat-card .perf-cell .v {
  font-size: 15px; font-weight: 900;
  color: var(--text);
  margin-top: 3px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.strat-card .perf-cell .v.pos { color: var(--mint, #34d399); }
.strat-card .perf-cell .v.neg { color: #f87171; }

.strat-card .sc-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 16px 13px;
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.08));
}
.strat-card .sc-ch-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg, #0a0e1a);
  color: var(--text-dim, var(--dim, #8d94a8));
  font-size: 11px; font-weight: 700;
  cursor: pointer; font-family: inherit;
  white-space: nowrap;
}
.strat-card .sc-ch-pill svg { width: 11px; height: 11px; }
.strat-card .sc-ch-pill.on {
  background: rgba(96,165,250,.13);
  color: #60a5fa;
  border-color: rgba(96,165,250,.32);
}
.strat-card .sc-foot-spacer { flex: 1; }
.strat-card .sc-ic-btn {
  width: 30px; height: 30px;
  border-radius: 7px;
  background: var(--bg, #0a0e1a);
  border: 1px solid var(--border);
  color: var(--text-muted, var(--muted, #b4bacb));
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.strat-card .sc-ic-btn svg { width: 13px; height: 13px; }
.strat-card .sc-ic-btn:hover {
  color: var(--text);
  border-color: var(--border-2, #323a52);
}
.strat-card .sc-ic-btn.danger:hover {
  color: #f87171;
  border-color: rgba(239,68,68,.4);
  background: rgba(239,68,68,.06);
}

.strat-empty {
  background: var(--bg-surface, var(--surface, #141925));
  border: 1px dashed var(--border-2, #323a52);
  border-radius: 14px;
  padding: 50px 24px;
  text-align: center;
  margin-top: 12px;
}
.strat-empty .ic { margin-bottom: 12px; color: var(--text-dim); }
.strat-empty h3 {
  color: var(--text);
  font-size: 16px;
  font-weight: 800;
  margin: 0 0 8px;
}
.strat-empty p {
  color: var(--text-muted, var(--muted, #b4bacb));
  font-size: 13px;
  line-height: 1.55;
  max-width: 480px;
  margin: 0 auto 18px;
}
.strat-empty-actions {
  display: flex; gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================================
   Strategy create/edit modal (V3) — sama tyyli kuin Merkitse pelatuksi
   ============================================================================ */
.strat-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(5,8,14,.78);
  backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: center; justify-content: center;
  padding: 20px;
}
.strat-modal {
  width: 100%; max-width: 520px;
  max-height: 92vh;
  background: var(--bg-surface, var(--surface, #141925));
  border: 1px solid var(--border-2, #323a52);
  border-radius: 16px;
  box-shadow: 0 40px 100px rgba(0,0,0,.6);
  display: flex; flex-direction: column;
  overflow: hidden;
}

.strat-modal-head {
  display: flex; align-items: flex-start;
  gap: 12px;
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--border);
}
.strat-modal-tag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mint, #34d399);
}
.strat-modal-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
  margin-top: 3px;
  letter-spacing: -.02em;
}
.strat-modal-sub {
  font-size: 11.5px;
  color: var(--text-dim, var(--dim, #8d94a8));
  margin-top: 4px;
  font-weight: 500;
  line-height: 1.4;
}
.strat-modal-x {
  background: transparent;
  border: none;
  border-radius: 8px;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--text-dim);
  flex-shrink: 0;
}
.strat-modal-x:hover {
  background: rgba(255,255,255,.05);
  color: var(--text);
}
.strat-modal-x svg { width: 16px; height: 16px; }

/* Confirm-modaali (poisto, peruuta jne.) — sama tyyli kuin strat-modal */
.confirm-modal { max-width: 460px; }
.confirm-modal-body {
  padding: 22px 22px 18px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.confirm-icon {
  width: 44px; height: 44px;
  border-radius: 11px;
  background: rgba(132,204,22,.14);
  color: var(--accent, #84cc16);
  display: inline-flex;
  align-items: center; justify-content: center;
  flex-shrink: 0;
}
.confirm-icon svg { width: 22px; height: 22px; }
.confirm-icon.danger {
  background: rgba(239,68,68,.13);
  color: #f87171;
}
.confirm-text { flex: 1; min-width: 0; }
.confirm-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.01em;
  margin-bottom: 5px;
}
.confirm-body {
  font-size: 13px;
  color: var(--text-muted, var(--muted, #b4bacb));
  line-height: 1.55;
  font-weight: 500;
}
.confirm-body b { color: var(--text); font-weight: 800; }

.strat-modal-btn.danger {
  flex: 1;
  background: #ef4444;
  color: #fff;
  border: none;
}
.strat-modal-btn.danger:hover { background: #dc2626; }

/* Type-selektor tabit modaalin yläosassa (vain uusi-luonnissa) */
.sm-type-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 14px 20px 0;
}
.sm-type-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 8px;
  background: var(--bg, #0a0e1a);
  border: 1.5px solid var(--border);
  color: var(--text-dim);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: -.01em;
  border-radius: 9px;
  cursor: pointer;
  transition: .15s;
}
.sm-type-tab:hover { color: var(--text); border-color: var(--border-2, #323a52); }
.sm-type-tab svg { width: 14px; height: 14px; }
.sm-type-tab.on.ev {
  background: rgba(16,185,129,.13);
  border-color: rgba(16,185,129,.5);
  color: var(--mint, #34d399);
}
.sm-type-tab.on.arb {
  background: rgba(132,204,22,.14);
  border-color: rgba(132,204,22,.5);
  color: var(--accent, #84cc16);
}
.sm-type-tab.on.middle {
  background: rgba(96,165,250,.13);
  border-color: rgba(96,165,250,.5);
  color: #60a5fa;
}

/* (Middle-type CSS already inlined above with distinct blue color) */

.strat-modal-body {
  padding: 16px 20px 14px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sm-inp { display: flex; flex-direction: column; gap: 5px; }
.sm-inp label {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-dim, var(--dim, #8d94a8));
}
.sm-inp label .opt {
  font-weight: 500;
  text-transform: none;
  color: var(--text-dim);
  opacity: .7;
  letter-spacing: 0;
}
.sm-inp input,
.sm-inp select {
  width: 100%;
  background: var(--bg, #0a0e1a);
  border: 1.5px solid var(--border-2, #323a52);
  color: var(--text);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  padding: 10px 12px;
  border-radius: 9px;
  outline: none;
  font-variant-numeric: tabular-nums;
}
.sm-inp input:focus,
.sm-inp select:focus {
  border-color: var(--mint, #34d399);
}
.sm-inp input::placeholder {
  color: var(--text-dim);
  font-weight: 500;
  opacity: .7;
}
.sm-inp .hint {
  font-size: 11px;
  color: var(--text-dim, var(--dim, #8d94a8));
  font-weight: 500;
  line-height: 1.4;
}
.sm-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 480px) {
  .sm-row-2 { grid-template-columns: 1fr; }
}
.sm-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 11px 13px;
  background: var(--bg, #0a0e1a);
  border: 1px solid var(--border);
  border-radius: 9px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  font-weight: 700;
}
.sm-check input { margin-top: 2px; cursor: pointer; flex-shrink: 0; }
.sm-check .hint {
  display: block;
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 500;
  margin-top: 2px;
}

.strat-modal-foot {
  display: flex;
  gap: 9px;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--border);
  background: var(--bg-surface, var(--surface, #141925));
}
.strat-modal-btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  border-radius: 9px;
  padding: 11px 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  letter-spacing: -.01em;
}
.strat-modal-btn.ghost {
  flex: 0 0 32%;
  background: transparent;
  border: 1px solid var(--border-2, #323a52);
  color: var(--text-muted, var(--muted, #b4bacb));
}
.strat-modal-btn.ghost:hover {
  color: var(--text);
  border-color: var(--text-muted);
}
.strat-modal-btn.save {
  flex: 1;
  background: linear-gradient(135deg, var(--green, #10b981), var(--accent, #84cc16));
  border: none;
  color: #04130c;
}
.strat-modal-btn.save:hover { filter: brightness(1.08); }
.strat-modal-btn.save svg { width: 13px; height: 13px; }

/* Mobile: bottom-sheet */
@media (max-width: 600px) {
  .strat-modal-overlay { align-items: flex-end; padding: 0; }
  .strat-modal {
    border-radius: 20px 20px 0 0;
    max-height: 92vh;
    max-width: 100%;
    animation: stratModalSlideUp .25s cubic-bezier(.22,.85,.4,1.04);
  }
  @keyframes stratModalSlideUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
}

/* ============================================================================
   V4 — Zebra-efekti listoissa (Arb, Middle, Mv) + spectrum tick-viivat
   ============================================================================ */
/* Arb-cards joka toinen tummempi */
.arb-list .arb-card:nth-of-type(even),
.arb-card:nth-of-type(even) {
  background: rgba(255,255,255,.022) !important;
}
.arb-card:nth-of-type(odd) {
  background: var(--bg-surface, var(--surface, #141925)) !important;
}

/* Middle-cards joka toinen tummempi */
.mid-list .mid-card:nth-of-type(even),
.mid-card:nth-of-type(even) {
  background: rgba(255,255,255,.022) !important;
}
.mid-card:nth-of-type(odd) {
  background: var(--bg-surface, var(--surface, #141925)) !important;
}

/* Kerroinliikkeet (movements) — joka toinen tummempi */
.mv-list .mv-lm:nth-of-type(even),
.mv-page .mv-lm:nth-of-type(even),
.mv-lm:nth-of-type(even) {
  background: rgba(255,255,255,.022) !important;
}

/* Spectrum tick-viivat (ohuet pystysuorat erottimet) */
.spectrum .spectrum-tick-line {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: rgba(255,255,255,.08);
  pointer-events: none;
  z-index: 0;
}

/* V4 — Value Bets aikapilli omalla rivillään (kuten Middle-kortissa) */
.ev-pills {
  display: flex; gap: 5px; flex-wrap: wrap;
  margin-bottom: 4px;
}
.ev-time-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 7px;
  white-space: nowrap;
}
.ev-time-pill svg { width: 10px; height: 10px; }
.ev-time-pill.ev-time-urgent {
  background: rgba(239,68,68,.13);
  color: #f87171;
  border: 1px solid rgba(239,68,68,.32);
}
.ev-time-pill.ev-time-soon {
  background: rgba(245,158,11,.14);
  color: #f59e0b;
  border: 1px solid rgba(245,158,11,.32);
}
.ev-time-pill.ev-time-warn {
  background: rgba(250,204,21,.13);
  color: #facc15;
  border: 1px solid rgba(250,204,21,.32);
}
.ev-time-pill.ev-time-neutral {
  background: var(--bg, #0a0e1a);
  color: var(--text-dim, #8d94a8);
  border: 1px solid var(--border);
}

/* Vanhat ev-urgent / ev-soon -tyylit eivät enää käytössä — sisältö nyt ev-time-pillissä */
.ev-row .ev-match .ev-urgent,
.ev-row .ev-match .ev-soon { display: none !important; }

/* ============================================================================
   V4 — Value Bets preset-tabit (Tab-pikavalinnat)
   ============================================================================ */
.ev-preset-tabs {
  display: flex;
  gap: 0;
  background: var(--bg-surface, var(--surface, #141925));
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow-x: auto;
  scrollbar-width: thin;
  margin-bottom: 12px;
}
.ev-preset-tabs::-webkit-scrollbar { height: 4px; }
.ev-preset-tabs::-webkit-scrollbar-thumb { background: var(--border-2, #323a52); border-radius: 2px; }

.ev-preset-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 18px;
  background: transparent;
  border: none;
  border-bottom: 2.5px solid transparent;
  color: var(--text-muted, var(--muted, #b4bacb));
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: -.01em;
  transition: .15s;
  flex-shrink: 0;
}
.ev-preset-tab:hover { color: var(--text); }
.ev-preset-tab.on {
  color: var(--mint, #34d399);
  border-bottom-color: var(--mint, #34d399);
  background: rgba(16,185,129,.04);
}
.ev-preset-tab svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.ev-preset-tab .lbl { white-space: nowrap; }
.ev-preset-tab .cnt {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--text-dim, var(--dim, #8d94a8));
  background: var(--bg, #0a0e1a);
  padding: 2px 7px;
  border-radius: 4px;
  margin-left: 2px;
  font-variant-numeric: tabular-nums;
}
.ev-preset-tab.on .cnt {
  color: var(--mint, #34d399);
  background: rgba(16,185,129,.13);
}
.ev-preset-tab.custom {
  margin-left: auto;
  padding-right: 22px;
  border-left: 1px solid var(--border);
  color: var(--accent, #84cc16);
}
.ev-preset-tab.custom:hover { color: var(--accent, #84cc16); filter: brightness(1.2); }
.ev-preset-tab.custom.on {
  color: var(--accent, #84cc16);
  border-bottom-color: var(--accent, #84cc16);
  background: rgba(132,204,22,.06);
}

/* Toolbar-rivi (Sport chips + sort) */
.ev-toolbar-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.ev-toolbar-row .ev-sportbar {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}
.ev-toolbar-row .ev-toolbar-right {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

@media (max-width: 760px) {
  .ev-preset-tab { padding: 10px 12px; font-size: 11.5px; gap: 5px; }
  .ev-preset-tab .lbl { display: none; }
  .ev-preset-tab.on .lbl { display: inline; }
  .ev-preset-tab.custom { padding-right: 14px; }
  .ev-toolbar-row { gap: 8px; }
  .ev-toolbar-row .ev-toolbar-right { width: 100%; }
}