/* ========================================
   MATCHED BETTING LAB — Global Styles
   Light Mode: Warm, Friendly, Approachable
   ======================================== */

:root {
  --green-brand:   #16A34A;
  --green-dark:    #15803D;
  --green-muted:   #1B5E20;   /* kept for DuckBet simulator UI */
  --green-tint:    #DCFCE7;
  --green-tint-border: #86EFAC;

  --bg:            #F8FAF9;
  --bg-card:       #FFFFFF;
  --bg-card-hover: #F0F7F3;
  --bg-input:      #F2F6F4;

  --text-primary:  #111C17;
  --text-secondary:#4B6D5C;
  --text-muted:    #8FAF9F;

  --border:        #DDE8E2;
  --border-focus:  var(--green-brand);

  --shadow-sm:     0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow:        0 2px 8px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.04);
  --shadow-md:     0 4px 16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-lg:     0 10px 32px rgba(0,0,0,0.08), 0 4px 10px rgba(0,0,0,0.04);

  --accent-amber:  #F59E0B;
  --accent-red:    #EF4444;
  --blue-light:    #60A5FA;
  --blue-back:     #2563EB;
  --pink-lay:      #DB2777;
}

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

body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; }

a { color: var(--green-brand); text-decoration: none; }
a:hover { color: var(--green-dark); }

img { max-width: 100%; height: auto; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

.text-green { color: var(--green-brand); }
.text-muted  { color: var(--text-muted); }

/* ========================================
   NAVIGATION
   ======================================== */

nav#main-nav {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
  padding: 0 24px;
  height: 64px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.logo {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--green-brand);
  letter-spacing: -0.5px;
  white-space: nowrap;
}
.logo span { color: var(--text-primary); }
.logo:hover { color: var(--green-dark); }

.nav-links {
  display: flex;
  gap: 32px;
  align-items: center;
}
.nav-links a {
  color: var(--text-secondary);
  font-size: 0.95rem;
  font-weight: 500;
  transition: color 0.2s;
  position: relative;
}
.nav-links a:hover { color: var(--text-primary); }
.nav-links a.active {
  color: var(--green-brand);
}
.nav-links a.active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--green-brand);
  border-radius: 1px;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: all 0.3s;
}
.nav-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ========================================
   BUTTONS
   ======================================== */

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--green-brand);
  color: #FFFFFF;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 12px 24px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  font-family: inherit;
  box-shadow: 0 2px 8px rgba(22,163,74,0.25);
}
.btn-primary:hover { background: var(--green-dark); color: #FFFFFF; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(22,163,74,0.3); }
.btn-primary:active { transform: scale(0.98); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--green-brand);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 12px 24px;
  border-radius: 8px;
  border: 1.5px solid var(--green-brand);
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  font-family: inherit;
}
.btn-secondary:hover { background: var(--green-tint); color: var(--green-dark); }

.btn-danger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--accent-red);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--accent-red);
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}
.btn-danger:hover { background: rgba(239, 68, 68, 0.06); }

.btn-sm { padding: 8px 16px; font-size: 0.85rem; }
.btn-lg { padding: 14px 28px; font-size: 1rem; }

/* ========================================
   CARDS & INPUTS
   ======================================== */

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  box-shadow: var(--shadow);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.input-group { margin-bottom: 16px; }
.input-group label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.calc-input, input[type="text"], input[type="number"], input[type="email"], input[type="password"], select {
  width: 100%;
  padding: 12px 16px;
  background: var(--bg-input);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 1rem;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}
.calc-input:focus, input:focus, select:focus {
  border-color: var(--green-brand);
  box-shadow: 0 0 0 3px rgba(22,163,74,0.12);
}
.calc-input::placeholder, input::placeholder { color: var(--text-muted); }

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234B6D5C' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}

/* ── Bet Type Toggle (pill style — replaces radio buttons) ── */
.radio-group {
  display: flex;
  background: var(--bg-input);
  border-radius: 10px;
  padding: 4px;
  gap: 0;
  border: 1.5px solid var(--border);
}
.radio-label {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 7px;
  transition: all 0.2s;
}
.radio-label input[type="radio"] { display: none; }
.radio-custom { display: none; }  /* hidden — label text IS the UI */
.radio-label span.radio-text {
  display: block;
  text-align: center;
  padding: 8px 16px;
  border-radius: 7px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: all 0.2s;
  width: 100%;
}
.radio-label input[type="radio"]:checked ~ span.radio-text,
.radio-label:has(input[type="radio"]:checked) span.radio-text,
.radio-label input[type="radio"]:checked + .radio-custom + span,
.radio-label.checked span.radio-text {
  background: #FFFFFF;
  color: var(--green-brand);
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}

/* Fallback: handle checked state via JS adding class */
.radio-label.is-checked span.radio-text {
  background: #FFFFFF;
  color: var(--green-brand);
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}

/* ── Tooltip ── */
.tooltip-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.tooltip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--border);
  color: var(--text-secondary);
  font-size: 0.65rem;
  font-weight: 700;
  cursor: help;
  flex-shrink: 0;
  transition: background 0.15s;
}
.tooltip-icon:hover { background: var(--green-brand); color: #fff; }
.tooltip-tip {
  display: none;
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  background: var(--text-primary);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 400;
  padding: 8px 12px;
  border-radius: 8px;
  white-space: nowrap;
  max-width: 240px;
  white-space: normal;
  width: max-content;
  max-width: 220px;
  z-index: 50;
  pointer-events: none;
  box-shadow: var(--shadow-md);
  text-transform: none;
  letter-spacing: 0;
}
.tooltip-tip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--text-primary);
}
.tooltip-wrap:hover .tooltip-tip { display: block; }

/* ========================================
   TABLES
   ======================================== */

.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.table th {
  background: var(--bg-input);
  color: var(--text-muted);
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 12px 16px;
  text-align: left;
  letter-spacing: 0.5px;
}
.table th:first-child { border-radius: 8px 0 0 0; }
.table th:last-child  { border-radius: 0 8px 0 0; }
.table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}
.table tbody tr:hover { background: var(--bg-card-hover); }

/* ========================================
   HOMEPAGE
   ======================================== */

.home-page { padding-top: 64px; }

.hero {
  min-height: calc(100vh - 64px);
  display: flex;
  align-items: center;
  padding: 60px 0;
}
.hero-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.hero-text h1 {
  font-size: 3.2rem;
  line-height: 1.15;
  margin-bottom: 20px;
  letter-spacing: -1px;
}
.hero-subtitle {
  color: var(--text-secondary);
  font-size: 1.15rem;
  line-height: 1.7;
  margin-bottom: 32px;
}
.hero-subtitle strong { color: var(--text-primary); }
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.hero-email-form { margin-top: 0; }
.hero-email-row {
  display: flex; gap: 10px; max-width: 460px;
}
.hero-email-input {
  flex: 1; padding: 14px 18px; border-radius: 8px;
  border: 1.5px solid var(--border); background: var(--bg-card);
  font-size: 1rem; font-family: inherit; color: var(--text-primary);
  outline: none; transition: border-color 0.2s;
}
.hero-email-input:focus { border-color: var(--green-brand); }
.hero-email-input::placeholder { color: var(--text-muted); }
.hero-email-btn { white-space: nowrap; padding: 14px 24px; font-size: 0.95rem; }
.hero-email-note {
  font-size: 0.82rem; color: var(--text-muted); margin-top: 8px;
}
.hero-email-success {
  color: var(--green-brand); font-weight: 600; font-size: 1rem;
  padding: 12px 0;
}
.hero-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.hero-image img {
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  max-width: 500px;
  width: 100%;
}
.hero-image-caption {
  font-size: 0.85rem; color: var(--text-secondary); margin-top: 10px;
  text-align: center; font-style: italic;
}

/* Email Section */
.email-section { padding: 80px 0; }
.email-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 48px;
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  box-shadow: var(--shadow-md);
}
.email-card h2 { font-size: 1.8rem; margin-bottom: 12px; }
.email-subtitle { color: var(--text-secondary); margin-bottom: 24px; }
.email-input-group { display: flex; gap: 12px; }
.email-input-group input { flex: 1; }
.email-privacy { color: var(--text-muted); font-size: 0.8rem; margin-top: 12px; }
.success-icon { font-size: 3rem; margin-bottom: 16px; }
#email-success { animation: fadeIn 0.4s ease; }

/* Trust Badges */
.trust-section { padding: 40px 0 80px; }
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.trust-badge {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 32px 24px;
  text-align: center;
  transition: all 0.2s;
  box-shadow: var(--shadow-sm);
}
.trust-badge:hover { background: var(--bg-card-hover); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.trust-icon { font-size: 2rem; margin-bottom: 12px; }
.trust-badge h3 { font-size: 1.1rem; margin-bottom: 8px; }
.trust-badge p { color: var(--text-secondary); font-size: 0.9rem; }

/* Tools Preview */
.tools-section { padding: 80px 0; }
.section-title { font-size: 2rem; text-align: center; margin-bottom: 8px; }
.section-subtitle { text-align: center; color: var(--text-secondary); margin-bottom: 48px; font-size: 1.05rem; }
.tools-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tool-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 32px 24px;
  transition: all 0.25s;
  display: block;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}
.tool-card:hover { background: var(--bg-card-hover); transform: translateY(-4px); border-color: var(--green-brand); box-shadow: var(--shadow-md); }
.tool-icon { font-size: 2.5rem; margin-bottom: 16px; }
.tool-card h3 { color: var(--text-primary); margin-bottom: 10px; font-size: 1.15rem; }
.tool-card p { color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 16px; }
.tool-link { color: var(--green-brand); font-weight: 600; font-size: 0.9rem; }
.tool-card:hover .tool-link { text-decoration: underline; }

/* Testimonials */
.testimonials-section { padding: 80px 0; }
.testimonials-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.testimonial-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--green-brand);
  border-radius: 0 12px 12px 0;
  padding: 32px;
  box-shadow: var(--shadow-sm);
}
.testimonial-quote { color: var(--text-primary); font-style: italic; font-size: 1rem; line-height: 1.7; margin-bottom: 20px; }
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.testimonial-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--green-tint);
  border: 2px solid var(--green-tint-border);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.85rem; color: var(--green-brand);
  flex-shrink: 0;
}
.testimonial-author strong { display: block; font-size: 0.95rem; }
.testimonial-author span { color: var(--text-muted); font-size: 0.85rem; }

/* Final CTA */
.final-cta { text-align: center; padding: 80px 0 100px; }
.final-cta h2 { font-size: 2rem; margin-bottom: 12px; }
.final-cta p { color: var(--text-secondary); margin-bottom: 28px; font-size: 1.05rem; }

/* ========================================
   CALCULATOR PAGE
   ======================================== */

.calculator-page { padding-top: 100px; padding-bottom: 80px; }
.page-header { text-align: center; margin-bottom: 48px; }
.page-header h1 { font-size: 2.4rem; margin-bottom: 8px; }
.page-header p { color: var(--text-secondary); font-size: 1.05rem; }

.calc-layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: start; }
.calc-results { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 16px; }

.result-card h3 {
  font-size: 0.85rem; color: var(--text-muted); text-transform: uppercase;
  letter-spacing: 0.5px; margin-bottom: 16px; font-weight: 600;
}
.result-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.result-row:last-child { border-bottom: none; }
.result-label { color: var(--text-secondary); font-size: 0.9rem; }
.result-value { font-weight: 700; font-size: 1.1rem; font-family: 'Space Grotesk', monospace; color: var(--text-primary); }

.profit-positive { color: var(--green-brand); }
.profit-negative { color: var(--accent-red); }

.rating-display { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.rating-value { font-size: 2rem; font-weight: 700; font-family: 'Space Grotesk', sans-serif; color: var(--text-primary); }
.rating-badge, .badge {
  display: inline-block; padding: 4px 12px; border-radius: 20px;
  font-size: 0.75rem; font-weight: 700;
}
.badge-green { background: var(--green-tint); color: var(--green-dark); border: 1px solid var(--green-tint-border); }
.badge-amber { background: #FEF3C7; color: #92400E; border: 1px solid #FDE68A; }
.badge-red   { background: #FEE2E2; color: #991B1B; border: 1px solid #FECACA; }
.badge-amazing { background: linear-gradient(135deg, #16A34A, #22C55E); color: #fff; border: none; font-size: 0.85rem; padding: 6px 14px; }

.rating-hint { color: var(--text-secondary); font-size: 0.85rem; line-height: 1.5; }
.rating-amazing-msg {
  background: var(--green-tint);
  border: 1px solid var(--green-tint-border);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 0.85rem;
  color: var(--green-dark);
  line-height: 1.5;
  margin-top: 8px;
}
.calc-hint { color: var(--text-muted); font-size: 0.85rem; margin-top: 8px; }

/* ========================================
   SIMULATOR PAGE
   ======================================== */

.simulator-page { padding-top: 100px; padding-bottom: 80px; }

.sim-header { text-align: center; margin-bottom: 32px; max-width: 700px; margin-left: auto; margin-right: auto; }
.sim-title { font-size: 2.2rem; margin-bottom: 8px; }
.sim-subtitle { color: var(--text-secondary); font-size: 1.05rem; }

/* The sim browser keeps a dark chrome to look like a real browser */
.sim-browser {
  background: #1A1F1C;
  border: 1px solid #2A3530;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  height: 700px;
  max-width: 1200px;
  margin: 0 auto;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
}

.sim-body-row {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.sim-chrome {
  background: #252B28;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid #333D38;
}
.sim-dots, .sim-chrome-dots { display: flex; gap: 6px; flex-shrink: 0; }
.sim-dot { width: 12px; height: 12px; border-radius: 50%; }
.sim-dot.red, .sim-dot--red     { background: #FF5F57; }
.sim-dot.yellow, .sim-dot--yellow { background: #FFBD2E; }
.sim-dot.green, .sim-dot--green  { background: #28CA41; }
.sim-address-lock { margin-right: 4px; font-size: 0.75rem; color: #8A9E94; }
.sim-address-url  { color: #8A9E94; }

.sim-address-bar {
  flex: 1;
  background: #1A1F1C;
  border-radius: 20px;
  padding: 6px 16px;
  color: #8A9E94;
  font-size: 0.8rem;
  font-family: monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sim-tabs {
  display: flex;
  background: #252B28;
  border-bottom: 1px solid #333D38;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.sim-tab {
  padding: 10px 20px;
  color: #8A9E94;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  font-size: 0.85rem;
  font-weight: 500;
  transition: all 0.2s;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  font-family: inherit;
  position: relative;
}
.sim-tab:hover:not(.locked) { color: #E8F2EE; background: rgba(255,255,255,0.04); }
.sim-tab.active { color: #E8F2EE; border-bottom-color: var(--green-brand); }
.sim-tab.locked { opacity: 0.35; cursor: not-allowed; }
.sim-tab.locked::after { content: '🔒'; font-size: 0.65rem; margin-left: 4px; }

.sim-content {
  padding: 24px;
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  position: relative;
  animation: fadeIn 0.3s ease;
  background: #1A1F1C;
  color: #E8F2EE;
}

/* Coach Panel — now a flex child in sim-body-row, not absolute */
.sim-coach {
  width: 290px;
  flex-shrink: 0;
  padding: 16px;
  z-index: 10;
  animation: slideIn 0.3s ease;
  overflow-y: auto;
  background: #1A1F1C;
  border-left: 1px solid #2A3530;
}
.coach-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.coach-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--green-muted);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; flex-shrink: 0;
}
.coach-name  { font-weight: 600; font-size: 0.85rem; color: #E8F2EE; }
.coach-step  { color: #8A9E94; font-size: 0.75rem; }
.coach-message { color: #A8BDB4; font-size: 0.88rem; line-height: 1.5; margin-bottom: 10px; }
.coach-profit  { color: var(--green-brand); font-weight: 700; font-size: 1.1rem; font-family: 'Space Grotesk', sans-serif; }
.coach-dismiss {
  position: absolute; top: 8px; right: 8px;
  background: none; border: none; color: #8A9E94;
  cursor: pointer; font-size: 1rem; padding: 4px; line-height: 1;
}
.coach-dismiss:hover { color: #E8F2EE; }
.coach-reopen {
  position: fixed; bottom: 20px; right: 20px;
  background: var(--green-brand); color: #fff;
  border: none; border-radius: 50%;
  width: 48px; height: 48px; font-size: 1.3rem;
  cursor: pointer; box-shadow: 0 4px 16px rgba(22,163,74,0.3);
  z-index: 50; display: none;
}

/* DuckBet Styles — stays green (it's a fake bookmaker UI) */
.duckbet-header {
  background: var(--green-muted);
  color: white;
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 8px 8px 0 0;
  margin: -24px -24px 0;
}
.duckbet-logo    { font-weight: 700; font-size: 1.2rem; letter-spacing: 1px; }
.duckbet-balance { font-size: 0.9rem; color: #A5D6A7; font-weight: 600; }
.duckbet-nav {
  display: flex; gap: 20px; padding: 10px 20px;
  background: rgba(27, 94, 32, 0.4); margin: 0 -24px;
  font-size: 0.85rem; color: #A8BDB4;
}
.duckbet-nav span { cursor: pointer; }
.duckbet-nav span:hover { color: white; }
.duckbet-nav span.active { color: white; font-weight: 600; }

.duckbet-banner {
  background: linear-gradient(135deg, var(--green-muted) 0%, #2E7D32 100%);
  border-radius: 12px; padding: 32px; margin: 20px 0; text-align: center;
}
.duckbet-banner h2 { font-size: 2rem; color: var(--accent-amber); margin-bottom: 8px; }
.duckbet-banner p { color: rgba(255,255,255,0.8); margin-bottom: 16px; }

.duckbet-matches { margin-top: 20px; }
.match-header {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 8px; padding: 8px 0;
  color: #8A9E94; font-size: 0.75rem;
  text-transform: uppercase; letter-spacing: 0.5px;
  border-bottom: 1px solid #2A3530;
}
.duckbet-match {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 8px; padding: 12px 0;
  border-bottom: 1px solid #2A3530;
  align-items: center; font-size: 0.9rem;
  cursor: pointer; transition: background 0.15s;
  color: #E8F2EE;
}
.duckbet-match:hover { background: rgba(255,255,255,0.05); margin: 0 -12px; padding-left: 12px; padding-right: 12px; border-radius: 6px; }
.match-name   { font-weight: 500; }
.match-league { color: #8A9E94; font-size: 0.8rem; }
.match-odds {
  text-align: center; padding: 6px 8px;
  background: #252B28; border-radius: 4px;
  font-weight: 600; font-size: 0.85rem;
  color: #A5D6A7; border: 1px solid #2A3530;
}
.match-odds:hover { border-color: var(--green-brand); }
.match-odds.selected { background: var(--green-brand); color: #fff; border-color: var(--green-brand); }

/* Betslip modal — legacy rule, overlay is now .sim-modal-overlay */
.betslip-modal {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
  z-index: 200; animation: fadeIn 0.2s;
}
/* .sim-modal is the inner modal content, NOT an overlay */
.sim-modal {
  position: relative;
  z-index: 201;
}
.betslip, .sim-modal-content {
  background: #1A1F1C; border: 1px solid #2A3530;
  border-radius: 12px; padding: 24px;
  width: 380px; max-width: 90vw; color: #E8F2EE;
}
.betslip h3, .sim-modal-content h3 { margin-bottom: 16px; color: #E8F2EE; }
.betslip-match  { color: #A8BDB4; margin-bottom: 16px; font-size: 0.9rem; }
.betslip-odds   { color: var(--green-brand); font-weight: 700; font-size: 1.2rem; margin-bottom: 16px; }
.betslip-returns {
  display: flex; justify-content: space-between;
  padding: 12px 0; border-top: 1px solid #2A3530;
  margin-top: 12px; color: #A8BDB4; font-size: 0.9rem;
}
.betslip-returns strong { color: #E8F2EE; }

/* Signup form */
.signup-field {
  display: flex; justify-content: space-between;
  padding: 8px 0; border-bottom: 1px solid #2A3530; font-size: 0.9rem;
}
.signup-field span:first-child { color: #8A9E94; }
.signup-field span:last-child  { color: #E8F2EE; }

/* BetBuzz Exchange — stays dark blue */
.betbuzz-header {
  background: #0D1320; color: white;
  padding: 12px 20px;
  display: flex; justify-content: space-between; align-items: center;
  border-radius: 8px 8px 0 0; margin: -24px -24px 0;
}
.betbuzz-logo    { font-weight: 700; font-size: 1.2rem; color: var(--blue-light); }
.betbuzz-balance { font-size: 0.9rem; color: var(--blue-light); font-weight: 600; }
.betbuzz-match-header {
  display: grid; grid-template-columns: 2fr 1fr 1fr;
  gap: 8px; padding: 12px 0;
  color: #8A9E94; font-size: 0.75rem;
  text-transform: uppercase; border-bottom: 1px solid #2A3530;
}
.betbuzz-match-row {
  display: grid; grid-template-columns: 2fr 1fr 1fr;
  gap: 8px; padding: 12px 0;
  border-bottom: 1px solid #2A3530; align-items: center;
  color: #E8F2EE;
}
.betbuzz-back {
  background: rgba(37, 99, 235, 0.18); color: var(--blue-light);
  text-align: center; padding: 8px; border-radius: 4px;
  font-weight: 600; font-size: 0.85rem; cursor: pointer;
}
.betbuzz-lay {
  background: rgba(219, 39, 119, 0.15); color: #F472B6;
  text-align: center; padding: 8px; border-radius: 4px;
  font-weight: 600; font-size: 0.85rem; cursor: pointer;
}
.betbuzz-lay:hover  { background: rgba(219,39,119,0.28); }
.betbuzz-lay.selected { background: var(--pink-lay); color: white; }

/* Odds Scanner */
.scanner-filters {
  display: flex; gap: 16px; flex-wrap: wrap;
  margin-bottom: 20px; padding-bottom: 16px;
  border-bottom: 1px solid #2A3530; align-items: flex-end;
}
.scanner-filters .input-group { margin-bottom: 0; min-width: 160px; }
.scanner-filters select { min-width: 140px; }
.scanner-row { cursor: pointer; transition: background 0.15s; }
.scanner-row:hover { background: rgba(255,255,255,0.05); }
.scanner-row.highlight {
  border-left: 3px solid var(--green-brand);
  background: rgba(255,255,255,0.06) !important;
  animation: pulse 2s infinite;
}
.scanner-row.selected { background: rgba(22, 163, 74, 0.1); border-left: 3px solid var(--green-brand); }

/* Results page (Sports) */
.results-header {
  background: #252B28; padding: 16px 20px;
  border-radius: 8px 8px 0 0; margin: -24px -24px 20px;
  font-weight: 600; font-size: 1.1rem; color: #E8F2EE;
}
.result-match {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px; border-bottom: 1px solid #2A3530;
  border-radius: 8px; margin-bottom: 8px; background: #252B28;
  color: #E8F2EE;
}
.result-match.your-match { border: 1px solid var(--green-brand); background: rgba(22, 163, 74, 0.08); }
.your-match-badge {
  background: var(--green-brand); color: #fff;
  padding: 2px 8px; border-radius: 4px;
  font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.result-teams { flex: 1; }
.result-team  { display: flex; justify-content: space-between; padding: 4px 0; color: #E8F2EE; }
.result-score {
  font-family: 'Space Grotesk', monospace; font-weight: 700;
  font-size: 1.3rem; min-width: 60px; text-align: center; color: #E8F2EE;
}

/* Inbox */
.inbox-header {
  background: #252B28; padding: 12px 20px;
  border-radius: 8px 8px 0 0; margin: -24px -24px 0;
  font-weight: 600; display: flex; justify-content: space-between; align-items: center;
  color: #E8F2EE;
}
.inbox-list { margin-top: 16px; }
.inbox-email {
  display: flex; gap: 12px; padding: 14px 12px;
  border-bottom: 1px solid #2A3530; cursor: pointer;
  transition: background 0.15s; align-items: center;
}
.inbox-email:hover { background: rgba(255,255,255,0.05); }
.inbox-email.unread { font-weight: 600; }
.inbox-email.unread .inbox-sender { color: #E8F2EE; }
.inbox-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.inbox-dot.green { background: var(--green-brand); }
.inbox-dot.gray  { background: #8A9E94; }
.inbox-sender { color: #A8BDB4; font-size: 0.9rem; min-width: 120px; }
.inbox-subject { flex: 1; font-size: 0.9rem; color: #E8F2EE; }
.inbox-time    { color: #8A9E94; font-size: 0.8rem; white-space: nowrap; }
.inbox-detail  { padding: 20px; animation: fadeIn 0.2s; }
.inbox-detail h3 { margin-bottom: 16px; color: #E8F2EE; }
.inbox-detail-meta {
  color: #8A9E94; font-size: 0.85rem;
  margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid #2A3530;
}
.inbox-detail-body { color: #A8BDB4; line-height: 1.7; font-size: 0.95rem; }
.inbox-detail-body strong { color: #E8F2EE; }
.inbox-back { color: var(--green-brand); cursor: pointer; font-size: 0.85rem; margin-bottom: 12px; display: inline-block; }

/* Sim calculator (embedded inside dark simulator) */
.sim-calc-form { max-width: 500px; }
.sim-calc-results { margin-top: 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sim-calc-result {
  background: #252B28; border-radius: 8px; padding: 16px; text-align: center;
}
.sim-calc-result .label { color: #8A9E94; font-size: 0.75rem; text-transform: uppercase; margin-bottom: 4px; }
.sim-calc-result .value { font-size: 1.3rem; font-weight: 700; font-family: 'Space Grotesk', sans-serif; color: #E8F2EE; }

/* Sim welcome/intro */
.sim-welcome { max-width: 600px; margin: 0 auto; text-align: center; padding: 60px 20px; }
.sim-welcome h2 { font-size: 1.8rem; margin-bottom: 16px; color: #E8F2EE; }
.sim-welcome p { color: #A8BDB4; margin-bottom: 28px; }
.sim-checklist { text-align: left; max-width: 400px; margin: 0 auto 32px; }
.sim-checklist-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; color: #A8BDB4; font-size: 0.95rem; }
.sim-checklist-item .check { color: var(--green-brand); font-size: 1.2rem; }

/* Sim summary */
.sim-summary { max-width: 600px; margin: 0 auto; text-align: center; padding: 40px 20px; }
.sim-summary h2 { font-size: 2rem; margin-bottom: 24px; color: #E8F2EE; }
.summary-breakdown { background: #252B28; border-radius: 12px; padding: 24px; margin-bottom: 24px; }
.summary-row {
  display: flex; justify-content: space-between; padding: 10px 0;
  border-bottom: 1px solid #2A3530; font-size: 0.95rem; color: #A8BDB4;
}
.summary-row:last-child { border-bottom: none; }
.summary-row.total {
  font-weight: 700; font-size: 1.2rem; color: var(--green-brand);
  border-top: 2px solid var(--green-brand); margin-top: 8px; padding-top: 16px;
}

.deposit-section {
  background: #252B28; border-radius: 8px;
  padding: 20px; margin-top: 16px; text-align: center;
}

/* Step highlight / action area */
.sim-action-highlight {
  border: 2px dashed var(--green-brand);
  border-radius: 8px;
  padding: 16px;
  margin: 12px 0;
  animation: pulse 2s infinite;
}

.sim-step-cta {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #2A3530;
  text-align: center;
}

/* Free bet badge */
.free-bet-badge {
  display: inline-block;
  background: var(--accent-amber);
  color: #1A1F1C;
  padding: 4px 12px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.85rem;
}

/* ========================================
   ODDS COMPARISON PAGE
   ======================================== */

.odds-page { padding-top: 100px; padding-bottom: 80px; }

.odds-controls { margin-bottom: 24px; }
.controls-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; }
.radio-inline  { display: flex; gap: 16px; }
.controls-actions { display: flex; gap: 12px; }

.cache-banner {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 8px;
  background: var(--bg-card); border: 1px solid var(--border);
  margin-bottom: 16px; font-size: 0.85rem; color: var(--text-secondary);
  box-shadow: var(--shadow-sm);
}
.cache-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.cache-fresh { background: var(--green-brand); }
.cache-stale { background: var(--accent-amber); }

.odds-table-wrap { overflow-x: auto; }
.odds-back { color: var(--blue-back); font-weight: 600; }
.odds-lay  { color: var(--pink-lay); font-weight: 600; }
.profit-positive { color: #16a34a; font-weight: 700; }
.profit-negative { color: #dc2626; font-weight: 600; }
.rating-pill { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 0.8rem; font-weight: 700; }
.row-good td:first-child { border-left: 3px solid var(--green-brand); }
.btn-copy { background: none; border: none; cursor: pointer; font-size: 1rem; padding: 4px; opacity: 0.6; transition: opacity 0.2s; }
.btn-copy:hover { opacity: 1; }

.odds-loading, .odds-empty, .odds-error { text-align: center; padding: 60px 20px; color: var(--text-secondary); }
.odds-count { text-align: right; margin-top: 12px; font-size: 0.85rem; color: var(--text-muted); }
.odds-empty-icon, .odds-error-icon { font-size: 2rem; margin-bottom: 12px; }
.odds-loading-sub { color: var(--text-muted); font-size: 0.85rem; margin-top: 4px; }

/* ── Offer selector card ──────────────────────────────────── */
.offer-selector { padding: 24px; margin-bottom: 20px; }
.offer-selector-header { margin-bottom: 20px; }
.offer-selector-title { font-size: 1.2rem; margin-bottom: 4px; }
.offer-selector-sub { color: var(--text-secondary); font-size: 0.9rem; }
.offer-controls-row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.offer-commission-wrap { position: relative; display: flex; align-items: center; }
.offer-commission-input { padding-right: 28px !important; }
.offer-commission-suffix { position: absolute; right: 12px; color: var(--text-muted); font-size: 0.9rem; pointer-events: none; }
.offer-commission-hint {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--bg-input); border: 1px solid var(--border);
  color: var(--text-muted); font-size: 0.65rem; cursor: help;
  margin-left: 4px; font-weight: 700; vertical-align: middle;
}
.offer-filters-toggle-row { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.offer-filters-toggle {
  background: none; border: none; color: var(--text-secondary);
  font-size: 0.88rem; cursor: pointer; padding: 4px 0;
  display: flex; align-items: center; gap: 4px; font-family: inherit;
}
.offer-filters-toggle:hover { color: var(--text-primary); }
.offer-filters-note {
  background: var(--green-tint); color: var(--green-dark);
  padding: 2px 8px; border-radius: 20px; font-size: 0.72rem; font-weight: 600;
}
.offer-filters-panel { background: var(--bg-input); border-radius: 8px; padding: 16px; margin-bottom: 12px; margin-top: 8px; }
.offer-filters-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.offer-filter-hint { font-size: 0.75rem; color: var(--text-muted); margin-top: 3px; display: block; }
.offer-actions { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid var(--border); margin-top: 8px; }

/* Offer details bar */
.offer-details-bar {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px 20px; margin-bottom: 16px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  box-shadow: var(--shadow-sm);
}
.offer-details-badge {
  background: var(--green-tint); color: var(--green-dark);
  border: 1px solid var(--green-tint-border);
  padding: 3px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 700; white-space: nowrap;
}
.offer-details-name { font-weight: 600; font-size: 0.95rem; color: var(--text-primary); }
.offer-details-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.offer-detail-pill {
  background: var(--bg-input); border: 1px solid var(--border);
  padding: 3px 9px; border-radius: 6px; font-size: 0.78rem; color: var(--text-secondary);
}
.offer-detail-pill--odds { color: var(--green-dark); background: var(--green-tint); border-color: var(--green-tint-border); }
.offer-details-notes { width: 100%; font-size: 0.82rem; color: var(--text-muted); margin-top: 6px; font-style: italic; }

/* Results table enhancements */
.odds-results-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 20px; border-bottom: 1px solid var(--border); background: var(--bg-card);
}
.odds-results-count { font-size: 0.92rem; color: var(--text-primary); }
.odds-results-sorted { font-size: 0.8rem; color: var(--text-muted); }
.odds-best-badge {
  display: inline-block; background: var(--green-tint); color: var(--green-dark);
  padding: 1px 6px; border-radius: 4px; font-size: 0.65rem; font-weight: 700;
  margin-left: 6px; vertical-align: middle; border: 1px solid var(--green-tint-border);
}
.th-back { color: var(--blue-back) !important; }
.th-lay  { color: var(--pink-lay) !important; }
.th-sub  { font-weight: 400; font-size: 0.7rem; opacity: 0.75; display: block; }
.odds-smarkets-note { font-size: 0.82rem; margin-top: 10px; text-align: right; }
.odds-commission-link { color: var(--green-brand); text-decoration: underline; }
.odds-commission-link:hover { color: var(--green-dark); }

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

/* ========================================
   ADMIN PAGE
   ======================================== */

.admin-page { padding-top: 100px; padding-bottom: 80px; }

.admin-login-wrap { display: flex; align-items: center; justify-content: center; min-height: 50vh; }
.admin-login-card { max-width: 400px; width: 100%; text-align: center; }
.admin-login-card h2 { margin-bottom: 8px; }
.admin-login-card p  { margin-bottom: 20px; color: var(--text-secondary); }
.admin-error { color: var(--accent-red); margin-top: 12px; font-size: 0.9rem; }

.admin-grid       { display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; align-items: start; }
.admin-form       { padding: 16px 0; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.form-actions     { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.admin-table-wrap { overflow-x: auto; }

.status-badge {
  display: inline-block; padding: 3px 10px; border-radius: 12px;
  font-size: 0.75rem; font-weight: 600;
}
.status-active   { background: var(--green-tint); color: var(--green-dark); border: 1px solid var(--green-tint-border); }
.status-inactive { background: #FEE2E2; color: #991B1B; border: 1px solid #FECACA; }

.stat-big {
  font-size: 3rem; font-weight: 700;
  font-family: 'Space Grotesk', sans-serif; color: var(--green-brand);
}

.subscriber-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 0.85rem;
  gap: 8px;
}
.subscriber-email { font-weight: 600; }
.subscriber-source { font-size: 0.75rem; margin-left: 8px; }
.subscriber-meta { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

/* Admin stats grid */
.admin-stats-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 8px;
}
.admin-stat-box {
  text-align: center; padding: 12px 8px; background: var(--bg-input); border-radius: 10px;
}
.admin-stat-box .stat-big { font-size: 2rem; }
.admin-stat-box p { font-size: 0.75rem; margin-top: 2px; }

/* Source breakdown pills */
.admin-source-breakdown { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-source-pill {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 12px; background: var(--bg-input); border-radius: 16px;
  font-size: 0.8rem; border: 1px solid var(--border);
}
.admin-source-name { color: var(--text-secondary); text-transform: capitalize; }
.admin-source-count { font-weight: 700; color: var(--green-brand); }

/* ========================================
   ANIMATIONS
   ======================================== */

@keyframes fadeIn    { from { opacity: 0; }                          to { opacity: 1; } }
@keyframes slideIn   { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes pulse     { 0%, 100% { opacity: 1; }                      50% { opacity: 0.7; } }
@keyframes spin      { to { transform: rotate(360deg); } }
@keyframes slideUp   { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 900px) {
  .hero-content     { grid-template-columns: 1fr; gap: 40px; }
  .hero-text h1     { font-size: 2.4rem; }
  .hero-image       { order: -1; }
  .hero-image img   { max-width: 400px; }
  .trust-grid, .tools-grid { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .calc-layout      { grid-template-columns: 1fr; }
  .calc-results     { position: static; }
  .controls-row     { grid-template-columns: 1fr 1fr; }
  .admin-grid       { grid-template-columns: 1fr; }
  .offer-controls-row { grid-template-columns: 1fr 1fr; }
  .sim-browser      { height: auto; min-height: 500px; }
  .sim-body-row     { flex-direction: column; }
  .sim-content      { min-height: 400px; }
  .sim-coach        { width: 100%; border-left: none; border-top: 1px solid #2A3530; overflow-y: visible; max-height: none; }
  .sim-calc-results { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .nav-links {
    display: none; position: absolute; top: 64px; left: 0; right: 0;
    background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(20px);
    flex-direction: column; padding: 16px 24px; gap: 16px;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
  }
  .nav-links.open { display: flex; }
  .nav-toggle { display: flex; }

  .hero-text h1     { font-size: 2rem; }
  .hero-subtitle    { font-size: 1rem; }
  .hero-ctas        { flex-direction: column; }
  .hero-ctas .btn-primary, .hero-ctas .btn-secondary { width: 100%; justify-content: center; }
  .hero-email-row   { flex-direction: column; }
  .hero-email-btn   { width: 100%; justify-content: center; }

  .email-card          { padding: 28px 20px; }
  .email-input-group   { flex-direction: column; }

  .controls-row        { grid-template-columns: 1fr; }
  .controls-actions    { flex-direction: column; }
  .offer-controls-row  { grid-template-columns: 1fr; }
  .offer-filters-row   { grid-template-columns: 1fr; }

  .sim-tab             { padding: 8px 14px; font-size: 0.8rem; }
  .sim-content         { padding: 16px; }
  .sim-calc-results    { grid-template-columns: 1fr; }

  .duckbet-match       { grid-template-columns: 1fr repeat(3, auto); font-size: 0.8rem; }
  .betbuzz-match-row   { grid-template-columns: 1fr 1fr 1fr; }

  .section-title       { font-size: 1.6rem; }
  .page-header h1      { font-size: 1.8rem; }
}

@media (max-width: 400px) {
  nav#main-nav  { padding: 0 16px; }
  .container    { padding: 0 16px; }
  .hero-text h1 { font-size: 1.7rem; }
  .match-header { display: none; }
}

/* ========================================
   SIMULATOR v2 — Interactive overhaul
   ======================================== */

/* Confetti */
@keyframes confettiFall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(700px) rotate(720deg); opacity: 0; }
}

/* Tab: "Next Step" indicator */
.sim-tab--next {
  animation: tabPulse 1.2s ease-in-out infinite;
  border-bottom-color: var(--green-brand) !important;
  color: var(--green-brand) !important;
  background: rgba(22, 163, 74, 0.1) !important;
}
.sim-tab--blocked {
  opacity: 0.3 !important;
  cursor: not-allowed !important;
  pointer-events: none;
}
@keyframes tabPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); }
  50%       { box-shadow: 0 0 0 4px rgba(22,163,74,0.25); }
}
.sim-tab-next-badge {
  background: var(--green-brand);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  margin-left: 4px;
  vertical-align: middle;
  animation: tabPulse 1.2s ease-in-out infinite;
}
.sim-tab-icon { margin-right: 2px; }

/* Coach v2 — flex child, no longer absolute */
.sim-coach {
  width: 290px;
  flex-shrink: 0;
  z-index: 20;
  animation: slideIn 0.3s ease;
  overflow-y: auto;
  background: #1A1F1C;
  border-left: 1px solid #2A3530;
  padding: 16px;
}
.sim-coach-inner {
  background: rgba(20, 26, 23, 0.97);
  border: 1px solid #2A3530;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.sim-coach-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
}
.sim-coach-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--green-muted), #2E7D32);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(22,163,74,0.2);
}
.sim-coach-meta { flex: 1; }
.sim-coach-name { display: block; font-weight: 700; font-size: 0.9rem; color: #E8F2EE; }
.sim-coach-step { display: block; color: #8A9E94; font-size: 0.73rem; }
.sim-coach-close {
  background: none; border: none; color: #8A9E94;
  cursor: pointer; font-size: 1.1rem; padding: 2px 6px; line-height: 1;
}
.sim-coach-close:hover { color: #E8F2EE; }
.sim-coach-body p { color: #A8BDB4; font-size: 0.87rem; line-height: 1.55; margin-bottom: 10px; white-space: pre-line; }
.sim-coach-cta {
  display: flex; align-items: center; gap: 6px;
  background: rgba(22, 163, 74, 0.1);
  border: 1px solid rgba(22, 163, 74, 0.25);
  border-radius: 8px; padding: 8px 12px;
  color: #4ADE80; font-size: 0.83rem; font-weight: 600;
  animation: pulse 1.8s ease-in-out infinite;
}
.sim-coach-cta-arrow { font-size: 0.75rem; }
.sim-coach-footer {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid #2A3530;
  display: flex; align-items: center; justify-content: space-between;
}
.sim-coach-profit { font-weight: 700; font-size: 0.9rem; font-family: 'Space Grotesk', sans-serif; color: #4ADE80; }
.sim-back-btn {
  background: none; border: 1px solid #2A3530;
  color: #A8BDB4; border-radius: 6px;
  padding: 5px 12px; font-size: 0.78rem; cursor: pointer;
  transition: all 0.15s; font-weight: 600;
}
.sim-back-btn:hover {
  background: rgba(255,255,255,0.06); color: #E8F2EE;
  border-color: #8A9E94;
}
.sim-coach-reopen {
  display: flex; align-items: center; justify-content: center;
  background: var(--green-brand); color: #fff;
  border: none; border-radius: 50%;
  width: 44px; height: 44px; font-size: 1.2rem;
  cursor: pointer; box-shadow: 0 4px 16px rgba(22,163,74,0.3);
  z-index: 50;
  margin: 8px auto;
}

/* ============================================================
   SIMULATOR v2 — Missing component styles
   (All dark-themed: these render inside the fake browser UI)
   ============================================================ */

/* ── sim-coach-label (used alongside sim-coach-step) ─────── */
.sim-coach-label { display: block; color: #6AAB96; font-size: 0.72rem; }

/* ── Sim utility ─────────────────────────────────────────── */
.sim-text-muted { color: #8A9E94; font-size: 0.88rem; }

/* ── sim-btn variants ────────────────────────────────────── */
.sim-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 20px; border-radius: 8px; border: none;
  font-family: inherit; font-weight: 600; font-size: 0.92rem;
  cursor: pointer; transition: all 0.2s; text-decoration: none;
}
.sim-btn--primary {
  background: var(--green-brand); color: #fff;
  box-shadow: 0 2px 8px rgba(22,163,74,0.3);
}
.sim-btn--primary:hover { background: var(--green-dark); transform: translateY(-1px); }
.sim-btn--secondary {
  background: transparent; color: #A8BDB4;
  border: 1px solid #2A3530;
}
.sim-btn--secondary:hover { background: rgba(255,255,255,0.06); color: #E8F2EE; }
.sim-btn--exchange {
  background: #1565C0; color: #fff;
  box-shadow: 0 2px 8px rgba(21,101,192,0.35);
}
.sim-btn--exchange:hover { background: #1976D2; transform: translateY(-1px); }
.sim-btn--lg { padding: 14px 28px; font-size: 1rem; }
.sim-btn--full { width: 100%; }
.sim-btn--glow {
  box-shadow: 0 0 0 0 rgba(22,163,74,0.4);
  animation: simBtnGlow 2s ease-in-out infinite;
}
@keyframes simBtnGlow {
  0%, 100% { box-shadow: 0 2px 8px rgba(22,163,74,0.3), 0 0 0 0 rgba(22,163,74,0.2); }
  50%       { box-shadow: 0 4px 12px rgba(22,163,74,0.4), 0 0 0 8px rgba(22,163,74,0); }
}

/* ── sim-nav-hint ─────────────────────────────────────────── */
.sim-nav-hint {
  display: flex; align-items: flex-start; gap: 10px;
  background: rgba(22,163,74,0.08); border: 1px solid rgba(22,163,74,0.2);
  border-radius: 8px; padding: 12px 16px;
  color: #A8BDB4; font-size: 0.88rem; margin-top: 16px;
}
.sim-nav-hint strong { color: #E8F2EE; }
.sim-nav-hint-arrow {
  color: var(--green-brand); font-size: 0.8rem; flex-shrink: 0; margin-top: 2px;
}

/* ── sim-find-hint ────────────────────────────────────────── */
.sim-find-hint {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,213,79,0.08); border: 1px solid rgba(255,213,79,0.2);
  border-radius: 8px; padding: 10px 14px;
  color: #A8BDB4; font-size: 0.88rem; margin-bottom: 12px;
}
.sim-find-hint strong { color: #FFD54F; }

/* ── sim-confirmation ─────────────────────────────────────── */
.sim-confirmation { text-align: center; padding: 32px 20px; }
.sim-confirmation h3 { color: #E8F2EE; margin-bottom: 10px; }
.sim-confirmation p { color: #A8BDB4; margin-bottom: 10px; font-size: 0.92rem; }
.sim-confirmation-icon {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; margin: 0 auto 16px; font-weight: 700;
}
.sim-confirmation-icon--green { background: rgba(0,230,118,0.15); color: #00E676; }
.sim-confirmation-icon--blue  { background: rgba(79,195,247,0.15); color: #4FC3F7; }

/* ── sim-modal-overlay ────────────────────────────────────── */
.sim-modal-overlay {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.65);
  display: flex; align-items: center; justify-content: center;
  z-index: 200; animation: fadeIn 0.2s;
}
.sim-modal-body { padding: 0 4px; }
.sim-modal-field { margin-bottom: 12px; }
.sim-modal-field label { display: block; font-size: 0.78rem; color: #8A9E94; margin-bottom: 4px; font-weight: 500; }
.sim-modal-input-display {
  background: #1A1F1C; border: 1px solid #2A3530; border-radius: 6px;
  padding: 8px 12px; color: #E8F2EE; font-size: 0.88rem;
}

/* ── Welcome screen ───────────────────────────────────────── */
.sim-welcome-card {
  background: #1A1F1C; border: 1px solid #2A3530; border-radius: 16px;
  padding: 40px 32px; max-width: 580px; margin: 0 auto;
}
.sim-welcome-icon { font-size: 2.5rem; margin-bottom: 16px; }
.sim-welcome-heading { font-size: 1.7rem; color: #E8F2EE; margin-bottom: 12px; }
.sim-welcome-sub { color: #A8BDB4; margin-bottom: 28px; font-size: 0.95rem; line-height: 1.6; }
.sim-welcome-checklist { background: #252B28; border-radius: 12px; padding: 20px 24px; margin-bottom: 24px; text-align: left; }
.sim-welcome-checklist h3 { color: #E8F2EE; font-size: 0.9rem; font-weight: 600; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
.sim-welcome-checklist ul { list-style: none; }
.sim-welcome-checklist li { display: flex; align-items: center; gap: 10px; padding: 6px 0; color: #A8BDB4; font-size: 0.9rem; }
.sim-check { color: var(--green-brand); font-weight: 700; flex-shrink: 0; }
.sim-welcome-note {
  display: flex; align-items: flex-start; gap: 8px;
  background: rgba(255,213,79,0.07); border: 1px solid rgba(255,213,79,0.15);
  border-radius: 8px; padding: 10px 14px;
  color: #A8BDB4; font-size: 0.85rem; margin-bottom: 24px; text-align: left;
}

/* ── Summary (step 16) ────────────────────────────────────── */
.sim-summary-card {
  background: #1A1F1C; border: 1px solid #2A3530; border-radius: 16px;
  padding: 40px 32px; max-width: 600px; margin: 0 auto; text-align: center;
}
.sim-summary-trophy { font-size: 3rem; margin-bottom: 12px; }
.sim-summary-heading { font-size: 2rem; color: #E8F2EE; margin-bottom: 8px; }
.sim-summary-sub { color: #A8BDB4; margin-bottom: 28px; font-size: 0.95rem; }
.sim-summary-breakdown {
  background: #252B28; border-radius: 12px; padding: 20px 24px; margin-bottom: 24px; text-align: left;
}
.sim-summary-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; border-bottom: 1px solid #2A3530; font-size: 0.95rem; color: #A8BDB4;
}
.sim-summary-row:last-child { border-bottom: none; }
.sim-summary-row--total { font-weight: 700; font-size: 1.1rem; border-top: 2px solid #2A3530; padding-top: 14px; margin-top: 4px; color: #E8F2EE; }
.sim-summary-divider { height: 1px; background: #2A3530; margin: 4px 0; }
.sim-summary-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 28px; }
.sim-summary-stat { background: #252B28; border-radius: 10px; padding: 16px 10px; }
.sim-summary-stat-val { font-size: 1.5rem; font-weight: 700; color: #E8F2EE; font-family: 'Space Grotesk', sans-serif; }
.sim-summary-stat-label { font-size: 0.75rem; color: #8A9E94; margin-top: 4px; text-transform: uppercase; letter-spacing: 0.4px; }
.sim-summary-next { text-align: left; background: #252B28; border-radius: 12px; padding: 20px 24px; }
.sim-summary-next h3 { color: #E8F2EE; font-size: 1rem; margin-bottom: 8px; }
.sim-summary-next p { color: #A8BDB4; font-size: 0.9rem; line-height: 1.6; margin-bottom: 16px; }
.sim-summary-next strong { color: #E8F2EE; }
.sim-summary-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── Deposit success ──────────────────────────────────────── */
.sim-deposit-success { text-align: center; padding: 40px 24px; }
.sim-deposit-success-icon { font-size: 2.5rem; margin-bottom: 12px; }
.sim-deposit-success h3 { color: #E8F2EE; font-size: 1.4rem; margin-bottom: 10px; }
.sim-deposit-success p { color: #A8BDB4; margin-bottom: 20px; }
.sim-deposit-success-summary { background: #252B28; border-radius: 10px; padding: 16px 20px; margin-bottom: 20px; text-align: left; }
.sim-deposit-row { display: flex; justify-content: space-between; padding: 8px 0; color: #A8BDB4; font-size: 0.9rem; }
.sim-deposit-row:not(:last-child) { border-bottom: 1px solid #2A3530; }

/* ═══════════════════════════════════════════════════════════
   DUCKBET SITE CHROME (new design)
   ═══════════════════════════════════════════════════════════ */
.duckbet-site { display: flex; flex-direction: column; min-height: 100%; }
.duckbet-topbar {
  background: linear-gradient(135deg, #1B4A1E 0%, #0D2E0F 100%);
  padding: 10px 20px; display: flex; align-items: center; gap: 20px;
  margin: -24px -24px 0;
}
.duckbet-logo-wrap { display: flex; align-items: center; gap: 8px; }
.duckbet-logo-svg { flex-shrink: 0; }
.duckbet-logo-text { font-weight: 800; font-size: 1.1rem; color: #FFD600; letter-spacing: 1px; font-family: 'Space Grotesk', sans-serif; }
.duckbet-logo-bet { color: #fff; }
.duckbet-topnav { display: flex; gap: 20px; flex: 1; font-size: 0.82rem; color: rgba(255,255,255,0.65); }
.duckbet-topnav span { cursor: pointer; transition: color 0.15s; }
.duckbet-topnav span:hover { color: #fff; }
.duckbet-nav-active { color: #fff !important; font-weight: 600; }
.duckbet-topbar-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.duckbet-bal-pill {
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15);
  border-radius: 20px; padding: 4px 12px; display: flex; align-items: center; gap: 6px;
}
.duckbet-bal-label { font-size: 0.7rem; color: rgba(255,255,255,0.6); }
.duckbet-bal-amount { font-size: 0.88rem; font-weight: 700; color: #A5D6A7; font-family: 'Space Grotesk', sans-serif; }
.duckbet-account-btn {
  background: rgba(255,255,255,0.1); border: none; border-radius: 50%;
  width: 32px; height: 32px; color: #fff; cursor: pointer; font-size: 1rem;
}
.duckbet-sports-bar {
  background: rgba(27,74,30,0.5); padding: 0 20px;
  display: flex; gap: 4px; margin: 0 -24px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  overflow-x: auto;
}
.duckbet-sport-tab {
  padding: 8px 14px; font-size: 0.8rem; color: rgba(255,255,255,0.6);
  cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent;
  transition: all 0.15s;
}
.duckbet-sport-tab:hover { color: #fff; }
.duckbet-sport-active { color: #A5D6A7 !important; border-bottom-color: #A5D6A7 !important; font-weight: 600; }
.duckbet-body { padding: 20px 0; flex: 1; }

/* DuckBet hero promo */
.duckbet-promo-wrap {}
.duckbet-hero-banner {
  background: linear-gradient(135deg, #1B5E20 0%, #2E7D32 50%, #1B4A1E 100%);
  border-radius: 12px; padding: 28px 24px; margin-bottom: 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.duckbet-hero-content { flex: 1; }
.duckbet-hero-offer-pill {
  display: inline-block; background: #FFD600; color: #1A1F1C;
  padding: 3px 10px; border-radius: 20px; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.5px; margin-bottom: 10px;
}
.duckbet-hero-headline { font-size: 1.6rem; font-weight: 800; color: #FFD600; font-family: 'Space Grotesk', sans-serif; line-height: 1; }
.duckbet-hero-get { font-size: 1.6rem; font-weight: 800; color: #fff; font-family: 'Space Grotesk', sans-serif; line-height: 1.1; margin-bottom: 8px; }
.duckbet-hero-sub { color: rgba(255,255,255,0.75); font-size: 0.82rem; margin-bottom: 12px; }
.duckbet-hero-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.duckbet-hero-badge { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.85); padding: 3px 8px; border-radius: 4px; font-size: 0.72rem; }
.duckbet-hero-duck { font-size: 3rem; flex-shrink: 0; }
.duckbet-promo-cta-row { text-align: center; }
.duckbet-signup-cta {
  display: flex; flex-direction: column; align-items: center;
  background: #FFD600; color: #1A1F1C; border: none; border-radius: 10px;
  padding: 14px 32px; cursor: pointer; width: 100%; max-width: 360px; margin: 0 auto 12px;
  transition: all 0.2s;
}
.duckbet-signup-cta:hover { background: #FFC107; transform: translateY(-1px); }
.duckbet-cta-main { font-size: 1rem; font-weight: 800; font-family: 'Space Grotesk', sans-serif; }
.duckbet-cta-sub { font-size: 0.78rem; font-weight: 500; opacity: 0.75; }
.duckbet-promo-tc { color: #5C7A6A; font-size: 0.72rem; line-height: 1.4; max-width: 480px; margin: 0 auto; }

/* DuckBet deposit */
.duckbet-deposit-wrap {}
.duckbet-deposit-success-bar {
  background: rgba(0,230,118,0.1); border: 1px solid rgba(0,230,118,0.2);
  border-radius: 8px; padding: 10px 16px; margin-bottom: 16px;
  color: #4ADE80; font-size: 0.88rem;
}
.duckbet-deposit-offer-reminder {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,213,79,0.07); border: 1px solid rgba(255,213,79,0.15);
  border-radius: 8px; padding: 10px 16px; margin-bottom: 20px; font-size: 0.88rem; color: #A8BDB4;
}
.duckbet-offer-pill {
  background: var(--green-brand); color: #fff;
  padding: 2px 8px; border-radius: 20px; font-size: 0.72rem; font-weight: 700; white-space: nowrap;
}
.duckbet-deposit-card { background: #252B28; border-radius: 12px; padding: 20px 24px; max-width: 400px; }
.duckbet-deposit-card h3 { color: #E8F2EE; font-size: 1rem; margin-bottom: 16px; }
.duckbet-quick-amounts { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.duckbet-quick-amt {
  padding: 6px 14px; border-radius: 6px; border: 1px solid #2A3530;
  color: #A8BDB4; font-size: 0.88rem; cursor: pointer; transition: all 0.15s;
}
.duckbet-quick-amt:hover { border-color: var(--green-brand); color: #E8F2EE; }
.duckbet-quick-amt--active { background: var(--green-brand); border-color: var(--green-brand); color: #fff; font-weight: 600; }
.duckbet-deposit-amount { margin-bottom: 16px; }
.duckbet-deposit-amount label { display: block; font-size: 0.8rem; color: #8A9E94; margin-bottom: 6px; }
.duckbet-amount-big { font-size: 1.8rem; font-weight: 700; color: #E8F2EE; font-family: 'Space Grotesk', sans-serif; }
.duckbet-deposit-method { margin-bottom: 20px; }
.duckbet-deposit-method label { display: block; font-size: 0.8rem; color: #8A9E94; margin-bottom: 8px; }
.duckbet-card-display {
  display: flex; align-items: center; gap: 8px;
  background: #1A1F1C; border: 1px solid #2A3530; border-radius: 8px;
  padding: 10px 14px; color: #A8BDB4; font-size: 0.88rem;
}
.duckbet-card-icon { font-size: 1.2rem; }
.duckbet-card-check { margin-left: auto; color: #4ADE80; font-size: 0.82rem; }
.duckbet-deposit-cta {
  display: flex; flex-direction: column; align-items: center;
  background: linear-gradient(135deg, #16A34A, #15803D); color: #fff;
  border: none; border-radius: 10px; padding: 14px 24px;
  cursor: pointer; width: 100%; transition: all 0.2s;
}
.duckbet-deposit-cta:hover { background: linear-gradient(135deg, #15803D, #14532D); transform: translateY(-1px); }

/* DuckBet matches list */
.duckbet-matches-page {}
.duckbet-matches-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.duckbet-matches-header h3 { color: #E8F2EE; font-size: 1rem; font-weight: 600; }
.duckbet-match-count { color: #8A9E94; font-size: 0.82rem; }
.duckbet-matches-list { display: flex; flex-direction: column; gap: 2px; }
.duckbet-match-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; background: #252B28; border-radius: 8px;
  border: 1px solid #2A3530; cursor: pointer; transition: all 0.15s;
}
.duckbet-match-row:hover { border-color: #3A4D40; background: #2A3530; }
.duckbet-match-row--target { border-color: rgba(22,163,74,0.4); background: rgba(22,163,74,0.05); }
.duckbet-match-row--target:hover { border-color: var(--green-brand); background: rgba(22,163,74,0.1); }
.duckbet-match-info { flex: 1; min-width: 0; }
.duckbet-match-name { font-size: 0.9rem; color: #E8F2EE; font-weight: 500; }
.duckbet-match-meta { font-size: 0.75rem; color: #8A9E94; margin-top: 2px; }
.duckbet-match-odds-group { display: flex; gap: 6px; }
.duckbet-odd-btn {
  display: flex; flex-direction: column; align-items: center;
  background: #1A1F1C; border: 1px solid #2A3530; border-radius: 6px;
  padding: 6px 12px; cursor: pointer; transition: all 0.15s;
  min-width: 56px;
}
.duckbet-odd-btn:hover { border-color: var(--green-brand); background: rgba(22,163,74,0.08); }
.duckbet-odd-btn--highlight { border-color: var(--green-brand); background: rgba(22,163,74,0.1); }
.duckbet-odd-btn--selected { background: var(--green-brand); border-color: var(--green-brand); }
.duckbet-odd-label { font-size: 0.68rem; color: #8A9E94; white-space: nowrap; }
.duckbet-odd-val { font-size: 0.88rem; font-weight: 700; color: #A5D6A7; }
.duckbet-odd-btn--selected .duckbet-odd-label,
.duckbet-odd-btn--selected .duckbet-odd-val { color: #fff; }

/* DuckBet betslip page */
.duckbet-betslip-page { max-width: 480px; }
.duckbet-match-header-card { background: #252B28; border-radius: 10px; padding: 16px 20px; margin-bottom: 12px; }
.duckbet-match-league { font-size: 0.78rem; color: #8A9E94; margin-bottom: 6px; }
.duckbet-match-teams { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.duckbet-team-name { font-size: 1rem; color: #E8F2EE; }
.duckbet-match-v { color: #5C7A6A; font-size: 0.9rem; }
.duckbet-odds-row { display: flex; gap: 6px; }
.duckbet-betslip { background: #252B28; border-radius: 10px; padding: 16px 20px; }
.duckbet-betslip h4 { color: #E8F2EE; font-size: 0.92rem; margin-bottom: 12px; }
.duckbet-slip-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; border-bottom: 1px solid #2A3530; font-size: 0.88rem; color: #A8BDB4;
}
.duckbet-slip-row label { color: #8A9E94; font-size: 0.82rem; }
.duckbet-slip-row:last-of-type { border-bottom: none; }
.duckbet-stake-value { color: #E8F2EE; font-weight: 600; }
.duckbet-slip-returns span { color: var(--green-brand); font-weight: 700; }

/* DuckBet free bet */
.duckbet-freebet-banner {
  display: flex; align-items: center; gap: 10px;
  background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.2);
  border-radius: 8px; padding: 10px 16px; margin-bottom: 12px;
  color: #A8BDB4; font-size: 0.88rem;
}
.duckbet-freebet-badge {
  background: #F59E0B; color: #1A1F1C;
  padding: 2px 8px; border-radius: 4px; font-size: 0.72rem; font-weight: 700; white-space: nowrap;
}

/* DuckBet signup modal */
.duckbet-signup-modal { background: #1A1F1C; border: 1px solid #2A3530; border-radius: 14px; width: 420px; max-width: 92vw; max-height: 90vh; overflow-y: auto; }
.duckbet-modal-header { background: linear-gradient(135deg, #1B5E20, #2E7D32); padding: 16px 20px; border-radius: 14px 14px 0 0; }
.duckbet-modal-logo-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.duckbet-modal-logo-text { color: #FFD600; font-weight: 800; font-size: 1rem; letter-spacing: 1px; font-family: 'Space Grotesk', sans-serif; }
.duckbet-modal-offer-banner { display: flex; justify-content: space-between; align-items: center; color: rgba(255,255,255,0.8); font-size: 0.82rem; }
.duckbet-modal-offer-val { color: #FFD600; font-weight: 700; }
.sim-modal-body { padding: 20px; }
.duckbet-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.duckbet-input {
  background: #252B28; border: 1px solid #2A3530; border-radius: 6px;
  padding: 8px 12px; color: #E8F2EE; font-size: 0.85rem;
}
.duckbet-modal-tc { display: flex; gap: 8px; align-items: flex-start; font-size: 0.8rem; color: #8A9E94; margin-bottom: 16px; margin-top: 4px; }
.duckbet-modal-submit {
  display: flex; flex-direction: column; align-items: center;
  background: #FFD600; color: #1A1F1C; border: none; border-radius: 8px;
  padding: 12px 20px; cursor: pointer; width: 100%; font-weight: 700; transition: all 0.2s;
}
.duckbet-modal-submit:hover { background: #FFC107; }

/* ═══════════════════════════════════════════════════════════
   BETBUZZ SITE CHROME
   ═══════════════════════════════════════════════════════════ */
.betbuzz-site { display: flex; flex-direction: column; min-height: 100%; }
.betbuzz-topbar {
  background: linear-gradient(135deg, #0D1320 0%, #1A237E 100%);
  padding: 10px 20px; display: flex; align-items: center; gap: 20px;
  margin: -24px -24px 0;
}
.betbuzz-logo-wrap { display: flex; align-items: center; gap: 8px; }
.betbuzz-logo-svg { flex-shrink: 0; }
.betbuzz-logo-text { font-weight: 700; font-size: 1.1rem; color: #4FC3F7; font-family: 'Space Grotesk', sans-serif; }
.betbuzz-logo-exchange-tag {
  background: rgba(79,195,247,0.15); color: #4FC3F7;
  padding: 2px 6px; border-radius: 4px; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.5px;
}
.betbuzz-topnav { display: flex; gap: 20px; flex: 1; font-size: 0.82rem; color: rgba(255,255,255,0.5); }
.betbuzz-topnav span { cursor: pointer; }
.betbuzz-topnav span:hover { color: #fff; }
.betbuzz-nav-active { color: #fff !important; font-weight: 600; }
.betbuzz-topbar-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.betbuzz-bal-pill {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px; padding: 4px 12px; display: flex; align-items: center; gap: 6px;
}
.betbuzz-bal-label { font-size: 0.7rem; color: rgba(255,255,255,0.5); }
.betbuzz-bal-amount { font-size: 0.88rem; font-weight: 700; color: #4FC3F7; font-family: 'Space Grotesk', sans-serif; }
.betbuzz-markets-bar {
  background: rgba(13,19,32,0.6); padding: 0 20px;
  display: flex; gap: 4px; margin: 0 -24px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  overflow-x: auto; align-items: center;
}
.betbuzz-mkt-tag {
  padding: 8px 14px; font-size: 0.8rem; color: rgba(255,255,255,0.5);
  cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent;
  transition: all 0.15s;
}
.betbuzz-mkt-tag:hover { color: #fff; }
.betbuzz-mkt-active { color: #4FC3F7 !important; border-bottom-color: #4FC3F7 !important; font-weight: 600; }
.betbuzz-liquidity-total { margin-left: auto; font-size: 0.75rem; color: rgba(255,255,255,0.4); white-space: nowrap; }
.betbuzz-body { padding: 20px 0; flex: 1; }
.betbuzz-page {}

/* BetBuzz market nav */
.betbuzz-market-nav { display: flex; gap: 0; margin-bottom: 16px; overflow-x: auto; }
.betbuzz-mkt-nav-item {
  padding: 7px 16px; font-size: 0.82rem; color: #8A9E94;
  border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap;
}
.betbuzz-mkt-nav-active { color: #4FC3F7; border-bottom-color: #4FC3F7; font-weight: 600; }

/* BetBuzz lay explainer diagram */
.betbuzz-explainer { background: #252B28; border-radius: 10px; padding: 16px 20px; margin-bottom: 16px; }
.betbuzz-explainer h3 { color: #E8F2EE; font-size: 0.9rem; margin-bottom: 12px; font-weight: 600; }
.betbuzz-diagram { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.betbuzz-dia-col {
  flex: 1; background: #1A1F1C; border-radius: 8px; padding: 12px; text-align: center;
  border: 1px solid #2A3530;
}
.betbuzz-dia-back { border-color: rgba(37,99,235,0.3); }
.betbuzz-dia-lay { border-color: rgba(219,39,119,0.3); }
.betbuzz-dia-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #8A9E94; margin-bottom: 6px; }
.betbuzz-dia-back .betbuzz-dia-label { color: #60A5FA; }
.betbuzz-dia-lay .betbuzz-dia-label { color: #F472B6; }
.betbuzz-dia-icon { font-size: 1.3rem; margin-bottom: 4px; }
.betbuzz-dia-desc { font-size: 0.75rem; color: #8A9E94; margin-bottom: 6px; }
.betbuzz-dia-amount { font-size: 0.85rem; font-weight: 600; color: #E8F2EE; }
.betbuzz-dia-amount--lay { color: #F472B6; }
.betbuzz-dia-vs { font-size: 1.2rem; color: #5C7A6A; flex-shrink: 0; }
.betbuzz-explainer-note { color: #8A9E94; font-size: 0.82rem; text-align: center; }

/* BetBuzz market section + table */
.betbuzz-market-section {}
.betbuzz-market-section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px; flex-wrap: wrap; gap: 6px;
}
.betbuzz-market-section-header h4 { color: #E8F2EE; font-size: 0.92rem; }
.betbuzz-market-in-play {
  background: rgba(239,68,68,0.12); color: #F87171;
  padding: 3px 8px; border-radius: 4px; font-size: 0.72rem; font-weight: 600;
}
.betbuzz-market-table { background: #252B28; border-radius: 10px; overflow: hidden; margin-bottom: 12px; }
.betbuzz-market-header {
  display: grid; grid-template-columns: 1fr 80px 80px;
  padding: 8px 16px; font-size: 0.72rem; color: #8A9E94; text-transform: uppercase;
  border-bottom: 1px solid #1A1F1C;
}
.betbuzz-market-row {
  display: grid; grid-template-columns: 1fr 80px 80px;
  padding: 10px 16px; border-bottom: 1px solid #1A1F1C; align-items: center;
  color: #E8F2EE;
}
.betbuzz-market-row:last-child { border-bottom: none; }
.betbuzz-market-row--hl { background: rgba(79,195,247,0.05); }
.betbuzz-mr-sel { font-size: 0.88rem; font-weight: 500; }
.betbuzz-price-back {
  text-align: center; background: rgba(37,99,235,0.18); color: #60A5FA;
  border-radius: 4px; padding: 6px 4px; font-weight: 700; font-size: 0.88rem; line-height: 1.2;
}
.betbuzz-price-lay {
  text-align: center; background: rgba(219,39,119,0.1); color: #8A9E94;
  border-radius: 4px; padding: 6px 4px; font-size: 0.88rem; line-height: 1.2;
}
.betbuzz-price-lay--pink { color: #F472B6; font-weight: 700; }
.betbuzz-price-lay--clickable { cursor: pointer; transition: all 0.15s; border: 1px solid transparent; }
.betbuzz-price-lay--clickable:hover { background: rgba(219,39,119,0.25); border-color: var(--pink-lay); transform: scale(1.03); }
.betbuzz-liquidity { font-size: 0.65rem; color: #5C7A6A; font-weight: 400; }

/* BetBuzz lay slip */
.betbuzz-slip {
  background: #252B28; border: 1px solid rgba(79,195,247,0.2);
  border-radius: 10px; padding: 16px 20px; max-width: 320px;
}
.betbuzz-slip h4 { color: #4FC3F7; font-size: 0.9rem; margin-bottom: 12px; }
.betbuzz-slip-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; border-bottom: 1px solid #2A3530; font-size: 0.88rem; color: #A8BDB4;
}
.betbuzz-slip-row:last-of-type { border-bottom: none; margin-top: 4px; }
.betbuzz-slip-row label { color: #8A9E94; font-size: 0.82rem; }
.betbuzz-stake-display { color: #4FC3F7; font-weight: 700; }

/* BetBuzz outcome grid */
.betbuzz-outcome-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0; }
.betbuzz-outcome-item {
  background: #252B28; border: 1px solid #2A3530; border-radius: 8px; padding: 12px;
  text-align: center;
}
.betbuzz-outcome-label { font-size: 0.75rem; color: #8A9E94; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.3px; }
.betbuzz-outcome-value { font-size: 1.1rem; font-weight: 700; font-family: 'Space Grotesk', sans-serif; margin-bottom: 2px; }
.betbuzz-outcome-note { font-size: 0.72rem; color: #5C7A6A; }

/* ═══════════════════════════════════════════════════════════
   ODDS SCANNER v2
   ═══════════════════════════════════════════════════════════ */
.scanner-page-v2 {}
.scanner-page-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px; flex-wrap: wrap; gap: 8px;
}
.scanner-page-title { color: #E8F2EE; font-size: 1.1rem; margin-bottom: 2px; }
.scanner-page-sub { color: #8A9E94; font-size: 0.82rem; }
.scanner-live-pill {
  background: rgba(0,230,118,0.1); border: 1px solid rgba(0,230,118,0.2);
  color: #4ADE80; padding: 4px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 600;
  white-space: nowrap;
}
.scanner-tip-banner {
  display: flex; align-items: flex-start; gap: 8px;
  background: rgba(22,163,74,0.07); border: 1px solid rgba(22,163,74,0.15);
  border-radius: 8px; padding: 10px 14px;
  color: #A8BDB4; font-size: 0.82rem; margin-bottom: 14px;
}
.scanner-tip-banner strong { color: #E8F2EE; }
.scanner-tip-banner--amber {
  background: rgba(245,158,11,0.07); border-color: rgba(245,158,11,0.15);
}
.scanner-controls-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.scanner-controls-left { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; }
.scanner-controls-right { display: flex; align-items: center; gap: 8px; }
.scanner-filter-group {}
.scanner-label { display: block; font-size: 0.72rem; color: #8A9E94; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.3px; }
.scanner-radio-group { display: flex; background: #252B28; border-radius: 6px; overflow: hidden; border: 1px solid #2A3530; }
.scanner-radio {
  padding: 5px 12px; font-size: 0.8rem; color: #8A9E94; cursor: pointer; white-space: nowrap;
}
.scanner-radio--active { background: var(--green-brand); color: #fff; font-weight: 600; }
.scanner-select-display {
  display: flex; align-items: center; gap: 4px;
  background: #252B28; border: 1px solid #2A3530; border-radius: 6px;
  padding: 5px 10px; font-size: 0.8rem; color: #A8BDB4; cursor: default;
}
.scanner-select-styled { min-width: 120px; }
.scanner-select-arrow { color: #5C7A6A; font-size: 0.7rem; }
.scanner-last-updated { color: #5C7A6A; font-size: 0.75rem; white-space: nowrap; }
.scanner-table-wrap { overflow-x: auto; }
.scanner-table {
  width: 100%; border-collapse: collapse; font-size: 0.88rem;
}
.scanner-table thead th {
  padding: 8px 12px; text-align: left; color: #8A9E94; font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.3px;
  border-bottom: 1px solid #2A3530; font-weight: 600; white-space: nowrap;
}
.scanner-th-back { color: #60A5FA !important; }
.scanner-th-lay  { color: #F472B6 !important; }
.scanner-table tbody td { padding: 10px 12px; border-bottom: 1px solid rgba(42,53,48,0.6); vertical-align: middle; }
.scanner-row { cursor: default; }
.scanner-row--target td { background: rgba(22,163,74,0.04); }
.scanner-best-badge {
  display: inline-block; background: var(--green-brand); color: #fff;
  padding: 2px 7px; border-radius: 4px; font-size: 0.65rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.3px; margin-top: 2px;
}
.sim-text-muted { color: #8A9E94 !important; }

/* ═══════════════════════════════════════════════════════════
   CALCULATOR v2 (embedded in simulator)
   ═══════════════════════════════════════════════════════════ */
.calc-page-v2 {}
.calc-header h3 { color: #E8F2EE; font-size: 1rem; margin-bottom: 16px; }
.calc-v2-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; }
.calc-v2-title { color: #E8F2EE; font-size: 1rem; margin-bottom: 2px; }
.calc-v2-sub { color: #8A9E94; font-size: 0.8rem; }
.calc-v2-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.calc-v2-form { display: flex; flex-direction: column; gap: 10px; }
.calc-v2-section-label { font-size: 0.72rem; color: #8A9E94; text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600; }
.calc-v2-radio-group { display: flex; gap: 6px; }
.calc-v2-radio {
  display: flex; align-items: center; gap: 6px;
  background: #252B28; border: 1px solid #2A3530; border-radius: 6px;
  padding: 6px 12px; font-size: 0.82rem; color: #8A9E94; cursor: default;
}
.calc-v2-radio--active { background: rgba(22,163,74,0.1); border-color: var(--green-brand); color: var(--green-brand); }
.calc-v2-radio-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid currentColor;
}
.calc-v2-radio--active .calc-v2-radio-dot { background: var(--green-brand); border-color: var(--green-brand); }
.calc-v2-field { display: flex; flex-direction: column; gap: 4px; }
.calc-v2-label { font-size: 0.78rem; color: #8A9E94; }
.calc-v2-source { font-size: 0.72rem; color: #5C7A6A; }
.calc-v2-input {
  background: #252B28; border: 1px solid #2A3530; border-radius: 6px;
  padding: 8px 12px; color: #E8F2EE; font-size: 0.92rem; font-weight: 500;
}
.calc-v2-input--back { color: #60A5FA; border-color: rgba(37,99,235,0.3); }
.calc-v2-input--lay  { color: #F472B6; border-color: rgba(219,39,119,0.3); }
.calc-v2-commission-note { font-size: 0.72rem; color: #5C7A6A; line-height: 1.4; }
.calc-v2-results {}

/* Calc results v2 */
.calc-results-v2 { display: flex; flex-direction: column; gap: 10px; }
.calc-results-v2-header { font-size: 0.72rem; color: #8A9E94; text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600; }
.calc-result-v2-card { background: #252B28; border-radius: 8px; padding: 12px 16px; }
.calc-result-v2-subtitle { font-size: 0.75rem; color: #8A9E94; margin-bottom: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
.calc-result-v2-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; }
.calc-result-v2-label { font-size: 0.82rem; color: #A8BDB4; }
.calc-result-v2-val { font-size: 0.9rem; font-weight: 600; color: #E8F2EE; font-family: 'Space Grotesk', sans-serif; }
.calc-result-v2-highlight {
  background: rgba(22,163,74,0.08); border: 1px solid rgba(22,163,74,0.2);
  border-radius: 8px; padding: 14px 16px; text-align: center;
}
.calc-result-v2-highlight-label { font-size: 0.75rem; color: #8A9E94; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 4px; }
.calc-result-v2-highlight-val { font-size: 1.5rem; font-weight: 800; font-family: 'Space Grotesk', sans-serif; margin-bottom: 6px; }
.calc-result-v2-highlight-note { font-size: 0.8rem; color: #A8BDB4; line-height: 1.4; }

/* ═══════════════════════════════════════════════════════════
   FOOTBALL RESULTS — Flashscore style
   ═══════════════════════════════════════════════════════════ */
.results-page {}
.results-flashscore-header {
  display: flex; align-items: center; gap: 8px;
  background: #252B28; padding: 10px 16px;
  margin: -24px -24px 16px; border-bottom: 1px solid #2A3530;
}
.results-flash-logo { font-size: 1rem; }
.results-flash-title { font-weight: 700; color: #E8F2EE; font-size: 0.9rem; flex: 1; }
.results-flash-date { color: #8A9E94; font-size: 0.78rem; }
.results-competition-block { margin-bottom: 16px; }
.results-comp-header {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0; border-bottom: 1px solid #2A3530;
  margin-bottom: 4px; color: #8A9E94; font-size: 0.8rem; font-weight: 600;
}
.results-comp-name { font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
.results-fs-match {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid rgba(42,53,48,0.5);
}
.results-fs-match--featured { background: rgba(22,163,74,0.04); border-radius: 6px; padding: 10px 8px; }
.results-fs-time { text-align: center; min-width: 44px; flex-shrink: 0; }
.results-fs-ft-badge {
  display: block; font-size: 0.62rem; font-weight: 700; color: #4ADE80;
  background: rgba(74,222,128,0.1); border-radius: 2px; padding: 1px 3px;
  letter-spacing: 0.3px;
}
.results-fs-kick { font-size: 0.7rem; color: #5C7A6A; margin-top: 1px; display: block; }
.results-fs-teams { flex: 1; display: flex; align-items: center; gap: 8px; }
.results-fs-team { flex: 1; }
.results-fs-team-name { font-size: 0.88rem; color: #A8BDB4; }
.results-fs-team--winner .results-fs-team-name { color: #E8F2EE; font-weight: 700; }
.results-your-bet-tag {
  display: inline-block; background: rgba(22,163,74,0.15); color: #4ADE80;
  padding: 1px 6px; border-radius: 4px; font-size: 0.65rem; font-weight: 600; margin-top: 2px;
}
.results-fs-score {
  display: flex; align-items: center; gap: 4px; min-width: 52px; justify-content: center;
}
.results-fs-h, .results-fs-a {
  font-size: 1.05rem; font-weight: 700; color: #E8F2EE;
  font-family: 'Space Grotesk', sans-serif;
}
.results-fs-winner-score { color: #4ADE80; }
.results-fs-dash { color: #5C7A6A; font-size: 0.8rem; }

/* Results impact section */
.results-impact { background: #252B28; border-radius: 10px; padding: 16px 20px; margin-top: 16px; }
.results-impact h4 { color: #E8F2EE; font-size: 0.88rem; margin-bottom: 12px; font-weight: 600; }
.results-impact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.results-impact-item {
  background: #1A1F1C; border: 1px solid #2A3530; border-radius: 8px;
  padding: 10px 8px; text-align: center;
}
.results-impact-item--win  { border-color: rgba(0,230,118,0.2); }
.results-impact-item--loss { border-color: rgba(255,82,82,0.2); }
.results-impact-item--net  { border-color: rgba(255,213,79,0.2); }
.results-impact-item--neutral { border-color: rgba(138,158,148,0.2); }
.results-impact-label { font-size: 0.7rem; color: #8A9E94; text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 4px; }
.results-impact-value { font-size: 1rem; font-weight: 700; font-family: 'Space Grotesk', sans-serif; margin-bottom: 2px; }
.results-impact-note { font-size: 0.7rem; color: #5C7A6A; line-height: 1.3; }
.results-total-profit-banner {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;
  background: rgba(22,163,74,0.1); border: 1px solid rgba(22,163,74,0.25);
  border-radius: 8px; padding: 12px 16px; margin-bottom: 16px;
  color: #A8BDB4; font-size: 0.88rem;
}
.results-total-val { font-size: 1.2rem; font-weight: 800; color: #4ADE80; font-family: 'Space Grotesk', sans-serif; }

/* Old-style results (used in renderFillerResults) */
.results-match {
  padding: 8px 0; border-bottom: 1px solid rgba(42,53,48,0.5);
}
.results-teams-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.results-team { flex: 1; font-size: 0.88rem; color: #A8BDB4; }
.results-team--winner { color: #E8F2EE; font-weight: 700; }
.results-score { min-width: 52px; text-align: center; font-weight: 700; color: #E8F2EE; font-family: 'Space Grotesk', sans-serif; }

/* ═══════════════════════════════════════════════════════════
   INBOX — Gmail style
   ═══════════════════════════════════════════════════════════ */
.inbox-gmail-page {
  display: grid; grid-template-columns: 180px 1fr; gap: 0; min-height: 420px;
  background: #1A1F1C;
}
.inbox-gmail-sidebar { border-right: 1px solid #2A3530; padding: 8px 0; }
.inbox-gmail-compose {
  padding: 10px 16px; color: var(--green-brand); font-size: 0.85rem; font-weight: 600; cursor: pointer;
}
.inbox-gmail-folders { margin-top: 4px; }
.inbox-folder {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 16px; font-size: 0.82rem; color: #8A9E94; cursor: pointer;
}
.inbox-folder:hover { background: rgba(255,255,255,0.04); color: #E8F2EE; }
.inbox-folder--active { color: #E8F2EE; background: rgba(22,163,74,0.08); font-weight: 600; border-right: 3px solid var(--green-brand); }
.inbox-folder-count { margin-left: auto; background: var(--green-brand); color: #fff; font-size: 0.65rem; padding: 1px 5px; border-radius: 10px; font-weight: 700; }
.inbox-gmail-main { display: flex; flex-direction: column; overflow: hidden; }
.inbox-gmail-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; border-bottom: 1px solid #2A3530;
}
.inbox-gmail-search {
  display: flex; align-items: center; gap: 6px;
  background: #252B28; border-radius: 20px; padding: 5px 14px;
  color: #5C7A6A; font-size: 0.82rem; flex: 1; max-width: 300px;
}
.inbox-gmail-search-text { color: #5C7A6A; }
.inbox-gmail-count { font-size: 0.75rem; color: #5C7A6A; white-space: nowrap; }
.inbox-gmail-tabs {
  display: flex; border-bottom: 1px solid #2A3530;
}
.inbox-gmail-tab {
  padding: 8px 16px; font-size: 0.82rem; color: #8A9E94;
  cursor: pointer; border-bottom: 2px solid transparent;
}
.inbox-gmail-tab--active { color: #E8F2EE; border-bottom-color: var(--green-brand); font-weight: 600; }
.inbox-promo-badge {
  background: var(--green-brand); color: #fff; font-size: 0.65rem;
  padding: 1px 4px; border-radius: 8px; font-weight: 700;
}
.inbox-gmail-email {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; border-bottom: 1px solid rgba(42,53,48,0.5);
  cursor: pointer; transition: background 0.15s;
}
.inbox-gmail-email:hover { background: rgba(255,255,255,0.03); }
.inbox-gmail-email--unread { font-weight: 600; }
.inbox-email--featured { background: rgba(22,163,74,0.04); border-left: 2px solid var(--green-brand); }
.inbox-gmail-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 700;
}
.inbox-avatar--duck  { background: linear-gradient(135deg, #1B5E20, #2E7D32); }
.inbox-avatar--duck2 { background: #1B5E20; }
.inbox-avatar--betbuzz { background: #0D1320; color: #4FC3F7; }
.inbox-avatar--google  { background: #4285F4; color: #fff; font-size: 0.85rem; }
.inbox-gmail-content { flex: 1; min-width: 0; }
.inbox-gmail-from-line { display: flex; align-items: baseline; gap: 4px; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-gmail-sender { font-size: 0.85rem; color: #E8F2EE; font-weight: 600; white-space: nowrap; }
.inbox-gmail-subject-preview { font-size: 0.82rem; color: #A8BDB4; overflow: hidden; text-overflow: ellipsis; }
.inbox-gmail-preview { font-size: 0.78rem; color: #5C7A6A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-gmail-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.inbox-gmail-time { font-size: 0.72rem; color: #8A9E94; white-space: nowrap; }
.inbox-gmail-time--new { color: var(--green-brand); font-weight: 600; }
.inbox-gmail-unread-dot { font-size: 0.45rem; color: var(--green-brand); }
.inbox-gmail-hint { padding: 10px 12px; font-size: 0.82rem; color: #8A9E94; font-style: italic; }

/* Open email */
.inbox-email-open { padding: 16px; animation: fadeIn 0.2s; flex: 1; overflow-y: auto; }
.inbox-email-open-header { margin-bottom: 16px; border-bottom: 1px solid #2A3530; padding-bottom: 12px; }
.inbox-open-subject { font-size: 1rem; font-weight: 700; color: #E8F2EE; margin-bottom: 10px; }
.inbox-open-meta { display: flex; align-items: center; gap: 10px; }
.inbox-open-sender { font-size: 0.82rem; color: #A8BDB4; }
.inbox-open-body { color: #A8BDB4; font-size: 0.88rem; line-height: 1.7; }
.inbox-open-body strong { color: #E8F2EE; }
.inbox-open-offer-banner {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, rgba(27,94,32,0.4), rgba(46,125,50,0.3));
  border: 1px solid rgba(22,163,74,0.25); border-radius: 10px;
  padding: 14px 16px; margin-bottom: 16px;
}
.inbox-open-offer-icon { font-size: 1.5rem; flex-shrink: 0; }
.inbox-open-offer-title { font-weight: 700; color: #E8F2EE; font-size: 0.92rem; }
.inbox-open-offer-sub { font-size: 0.78rem; color: #8A9E94; }

/* ── Responsive: sim calc v2 ─────────────────────────────── */
@media (max-width: 860px) {
  .calc-v2-layout { grid-template-columns: 1fr; }
  .results-impact-grid { grid-template-columns: 1fr; }
  .inbox-gmail-page { grid-template-columns: 1fr; }
  .inbox-gmail-sidebar { display: none; }
  .betbuzz-diagram { flex-direction: column; }
  .sim-summary-stats { grid-template-columns: repeat(3,1fr); }
  .duckbet-match-odds-group { gap: 4px; }
  .duckbet-odd-btn { min-width: 48px; padding: 5px 8px; }
}

/* ========================================
   ODDS PAGE — Email Gate
   ======================================== */

.odds-gate-wrap {
  display: flex; justify-content: center; align-items: center;
  min-height: 60vh; padding: 40px 0;
}
.odds-gate-card {
  max-width: 520px; width: 100%; text-align: center; padding: 48px 36px;
}
.odds-gate-icon { font-size: 3rem; margin-bottom: 16px; }
.odds-gate-title {
  font-family: 'Space Grotesk', sans-serif; font-size: 1.8rem;
  font-weight: 700; margin-bottom: 12px; color: var(--text-primary);
}
.odds-gate-sub {
  color: var(--text-secondary); font-size: 1rem; line-height: 1.6;
  margin-bottom: 28px;
}
.odds-gate-form { margin-bottom: 24px; }
.odds-gate-input-row {
  display: flex; gap: 8px; max-width: 420px; margin: 0 auto;
}
.odds-gate-input {
  flex: 1; padding: 14px 16px; border: 2px solid var(--border);
  border-radius: 10px; font-size: 1rem; background: var(--bg-input);
  transition: border-color 0.2s;
}
.odds-gate-input:focus {
  outline: none; border-color: var(--green-brand);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.1);
}
.odds-gate-btn { white-space: nowrap; padding: 14px 24px; }
.odds-gate-error {
  color: var(--accent-red); font-size: 0.85rem; margin-top: 8px;
}
.odds-gate-note {
  color: var(--text-muted); font-size: 0.8rem; margin-top: 12px;
}
.odds-gate-features {
  display: flex; flex-direction: column; gap: 10px;
  align-items: center; margin-top: 8px;
}
.odds-gate-feature {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.9rem; color: var(--text-secondary);
}

@media (max-width: 600px) {
  .odds-gate-card { padding: 32px 20px; }
  .odds-gate-title { font-size: 1.4rem; }
  .odds-gate-input-row { flex-direction: column; }
  .odds-gate-btn { width: 100%; justify-content: center; }
}

/* ========================================
   SIMULATOR — Email Capture Prompts
   ======================================== */

/* Mid-journey overlay */
.sim-email-overlay {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(10, 15, 13, 0.85);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; animation: fadeIn 0.3s ease;
  backdrop-filter: blur(4px);
}
.sim-email-prompt {
  background: #111916; border: 1px solid #2A3530;
  border-radius: 16px; padding: 32px 28px; max-width: 440px; width: 90%;
  text-align: center; position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.sim-email-close {
  position: absolute; top: 12px; right: 16px;
  background: none; border: none; color: #5C7A6A;
  font-size: 1.5rem; cursor: pointer; line-height: 1;
  transition: color 0.2s;
}
.sim-email-close:hover { color: #F1F7F4; }
.sim-email-prompt-icon { font-size: 2.5rem; margin-bottom: 12px; }
.sim-email-prompt-title {
  font-family: 'Space Grotesk', sans-serif; font-size: 1.3rem;
  font-weight: 700; color: #F1F7F4; margin-bottom: 8px;
}
.sim-email-prompt-sub {
  color: #8FA89B; font-size: 0.9rem; line-height: 1.5; margin-bottom: 20px;
}
.sim-email-prompt-form { margin-bottom: 12px; }
.sim-email-prompt-row {
  display: flex; gap: 8px;
}
.sim-email-prompt-input {
  flex: 1; padding: 12px 14px; border: 2px solid #2A3530;
  border-radius: 8px; font-size: 0.95rem;
  background: #0A0F0D; color: #F1F7F4;
  transition: border-color 0.2s;
}
.sim-email-prompt-input:focus {
  outline: none; border-color: #00E676;
  box-shadow: 0 0 0 3px rgba(0, 230, 118, 0.1);
}
.sim-email-prompt-input::placeholder { color: #5C7A6A; }
.sim-email-prompt-error {
  color: #FF5252; font-size: 0.8rem; margin-top: 6px;
}
.sim-email-prompt-note {
  color: #5C7A6A; font-size: 0.75rem; margin-top: 8px;
}

/* End-of-journey email capture (inside step 16 celebration) */
.sim-summary-email {
  background: linear-gradient(135deg, #0D1F14, #111916);
  border: 1px solid #2A3530; border-radius: 16px;
  padding: 28px 24px; margin: 24px 0; text-align: center;
}
.sim-summary-email-icon { font-size: 2rem; margin-bottom: 8px; }
.sim-summary-email h3 {
  font-family: 'Space Grotesk', sans-serif; font-size: 1.2rem;
  color: #F1F7F4; margin-bottom: 6px;
}
.sim-summary-email p {
  color: #8FA89B; font-size: 0.9rem; margin-bottom: 16px; line-height: 1.5;
}
.sim-summary-email-form { max-width: 400px; margin: 0 auto; }
.sim-summary-email-row { display: flex; gap: 8px; }
.sim-summary-email-input {
  flex: 1; padding: 12px 14px; border: 2px solid #2A3530;
  border-radius: 8px; font-size: 0.95rem;
  background: #0A0F0D; color: #F1F7F4;
}
.sim-summary-email-input:focus {
  outline: none; border-color: #00E676;
  box-shadow: 0 0 0 3px rgba(0, 230, 118, 0.1);
}
.sim-summary-email-input::placeholder { color: #5C7A6A; }
.sim-summary-email-note {
  color: #5C7A6A; font-size: 0.75rem; margin-top: 10px;
}
.sim-email-success {
  font-size: 1rem; color: #00E676; font-weight: 600; padding: 16px 0;
}

@media (max-width: 600px) {
  .sim-email-prompt { padding: 24px 20px; }
  .sim-email-prompt-row { flex-direction: column; }
  .sim-summary-email-row { flex-direction: column; }
  .odds-gate-features { align-items: flex-start; }
  .admin-stats-grid { grid-template-columns: 1fr; }
}