/* =====================================================================
   VARIABLES & RESET
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg-void:    #07070d;
  --bg-deep:    #0d0d18;
  --bg-card:    #13131f;
  --bg-card2:   #1a1a2a;
  --bg-input:   #0f0f1c;
  --border:     rgba(255,255,255,.07);
  --border-hi:  rgba(240,180,50,.35);

  --gold:       #f0b832;
  --gold-dim:   #a07820;
  --gold-glow:  rgba(240,184,50,.18);
  --teal:       #00d4aa;
  --teal-dim:   #007a63;
  --teal-glow:  rgba(0,212,170,.15);
  --red:        #ff4757;
  --red-dim:    #8a1f2b;
  --red-glow:   rgba(255,71,87,.15);
  --green:      #2ed573;
  --green-glow: rgba(46,213,115,.15);
  --purple:     #a78bfa;
  --purple-glow:rgba(167,139,250,.15);

  --text-hi:    #f0eee8;
  --text-mid:   #9090a8;
  --text-lo:    #50506a;

  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;

  --font-display: 'Bebas Neue', cursive;
  --font-ui:      'Syne', sans-serif;
  --font-mono:    'DM Mono', monospace;
}

html { scroll-behavior: smooth; }
body {
  background: var(--bg-void);
  color: var(--text-hi);
  font-family: var(--font-ui);
  font-size: 14px;
  min-height: 100vh;
  overflow-x: hidden;
}

body::before {
  content:'';
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: .025;
}

::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: var(--gold-dim); border-radius:3px; }

/* =====================================================================
   TOPBAR
   ===================================================================== */
.topbar {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 32px;
  height: 60px;
  background: rgba(7,7,13,.9);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}

/* .topbar-logo supprim� � retir� volontairement par l'utilisateur */

.topbar-user { display: flex; align-items: center; gap: 16px; }
.topbar.auth-guest .user-wallet,
.topbar.auth-guest .user-badge {
  border-color: var(--border);
  opacity: .75;
}
.topbar.auth-guest .user-avatar {
  background: var(--bg-card2);
  color: var(--text-mid);
}
.topbar.auth-guest .user-status { opacity: .35; }

.user-wallet {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-hi);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 13px;
}
.user-wallet .coin { color: var(--gold); font-size: 16px; }
.wallet-amount { color: var(--gold); font-weight: 500; }
.wallet-label { color: var(--text-mid); font-size: 11px; }

.user-badge {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .2s;
}
.user-badge:hover { border-color: var(--border-hi); }
.user-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--teal));
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--bg-void);
}
.user-name { font-size: 13px; font-weight: 600; }
.user-status { width:7px; height:7px; background:var(--green); border-radius:50%; box-shadow:0 0 6px var(--green); }

/* =====================================================================
   PAGE WRAP & TRANSITIONS DE VUE
   ===================================================================== */
.page-wrap {
  position: relative; z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 36px 24px 80px;
}

/* Les deux vues : liste et cr�ation */
#view-auth,
#view-list,
#view-create {
  transition: opacity .3s ease, transform .3s ease;
}

#view-auth {
  min-height: calc(100vh - 60px);
}

#view-list {
  display: none;
  opacity: 0;
  transform: translateY(12px);
}

#view-create {
  display: none;
  opacity: 0;
  transform: translateY(12px);
}

/* �tat actif */
#view-auth.view-active   { display: block; opacity: 1; transform: none; }
#view-auth.view-leaving  { opacity: 0; transform: translateY(-8px); pointer-events: none; }
#view-list.view-active   { display: block; opacity: 1; transform: none; }
#view-list.view-leaving  { opacity: 0; transform: translateY(-8px); pointer-events: none; }
#view-list.view-entering { opacity: 0; transform: translateY(12px); }

#view-create.view-active  { display: block; opacity: 1; transform: translateY(0); }
#view-create.view-entering { opacity: 0; transform: translateY(12px); }

/* =====================================================================
   VUE AUTH
   ===================================================================== */
.auth-wrap {
  min-height: calc(100vh - 132px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 0;
}

.auth-logo {
  font-family: var(--font-display);
  font-size: 36px;
  letter-spacing: 2px;
  margin-bottom: 8px;
  text-shadow: 0 0 24px var(--gold-glow);
}
.auth-logo span:first-child { color: var(--gold); }
.auth-logo span:last-child { color: var(--teal); }

.auth-tagline {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-lo);
  margin-bottom: 36px;
}

.auth-card {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 28px 24px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius-lg);
  box-shadow: 0 40px 80px rgba(0,0,0,.5);
}

.auth-toggle {
  display: flex;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 28px;
}
.auth-toggle-btn {
  flex: 1;
  text-align: center;
  padding: 8px 20px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-mid);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: background .2s, color .2s, box-shadow .2s;
}
.auth-toggle-btn:hover { color: var(--text-hi); }
.auth-toggle-btn.active {
  background: var(--gold);
  color: var(--bg-void);
  box-shadow: 0 0 12px var(--gold-glow);
}

.auth-form-shell {
  position: relative;
  min-height: 320px;
}

.auth-form {
  display: none;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease;
  gap: 16px;
}
.auth-form.active {
  display: flex;
  flex-direction: column;
  opacity: 1;
  transform: none;
}

.auth-pwd-wrap { position: relative; }
.auth-pwd-input { padding-right: 86px; }
.auth-eye {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: var(--text-lo);
  cursor: pointer;
  min-width: 70px;
  height: 28px;
  padding: 0 8px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .2px;
}
.auth-eye:hover { color: var(--text-mid); }

.auth-help {
  font-size: 11px;
  color: var(--text-lo);
  font-family: var(--font-mono);
}

.pwd-strength {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.pwd-seg {
  height: 3px;
  border-radius: 2px;
  background: var(--bg-card2);
  transition: background .3s ease;
}
.pwd-seg.on-red { background: var(--red); }
.pwd-seg.on-orange { background: rgba(255,150,50,.85); }
.pwd-seg.on-gold { background: var(--gold); }
.pwd-seg.on-green { background: var(--green); }

.auth-error {
  display: none;
  background: rgba(255,71,87,.1);
  border: 1px solid rgba(255,71,87,.25);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--red);
}
.auth-error.visible {
  display: block;
  animation: fadeSlideUp .25s ease both;
}

.auth-submit {
  margin-top: 8px;
  min-height: 42px;
}
.auth-submit[disabled] {
  opacity: .4;
  cursor: not-allowed;
  pointer-events: none;
}

.auth-alt {
  margin-top: 20px;
  text-align: center;
  font-size: 13px;
  color: var(--text-mid);
}
.auth-alt-link {
  border: none;
  background: transparent;
  color: var(--gold);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-ui);
}
.auth-alt-link:hover { text-decoration: underline; opacity: .85; }

.auth-footer {
  margin-top: 40px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--text-lo);
}

.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(0,0,0,.2);
  border-top-color: var(--bg-void);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* =====================================================================
   SECTION HEADERS
   ===================================================================== */
.section-header {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.section-title {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 2px;
  color: var(--text-hi);
}
.section-title em { color: var(--gold); font-style: normal; }
.section-meta { font-size: 12px; color: var(--text-lo); font-family: var(--font-mono); }

.header-deco {
  width: 40px; height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--teal));
  border-radius: 2px;
  margin-bottom: 10px;
}

/* =====================================================================
   GRID BETS
   ===================================================================== */
.bets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 20px;
  margin-bottom: 56px;
}

/* =====================================================================
   BET CARD
   ===================================================================== */
.bet-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .2s, box-shadow .2s, border-color .2s;
  display: flex; flex-direction: column;
  position: relative;
  animation: fadeSlideUp .35s ease both;
}
.bet-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
}
.bet-card.owned { border-color: rgba(240,184,50,.2); }
.bet-card.owned::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(240,184,50,.05) 0%, transparent 50%);
  pointer-events: none;
}

.bet-card:nth-child(1) { animation-delay: .05s; }
.bet-card:nth-child(2) { animation-delay: .1s; }
.bet-card:nth-child(3) { animation-delay: .15s; }
.bet-card:nth-child(4) { animation-delay: .2s; }

@keyframes fadeSlideUp {
  from { opacity:0; transform:translateY(18px); }
  to   { opacity:1; transform:translateY(0); }
}

.bet-card-top {
  padding: 20px 20px 14px;
  border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 8px;
}

.bet-meta-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.bet-badge {
  font-size: 10px; font-family: var(--font-mono); letter-spacing: 1px;
  padding: 3px 8px; border-radius: 4px; text-transform: uppercase;
}
.badge-open    { background: rgba(46,213,115,.15); color: var(--green); border: 1px solid rgba(46,213,115,.3); }
.badge-closed  { background: rgba(255,71,87,.15);  color: var(--red);   border: 1px solid rgba(255,71,87,.3); }
.badge-resolved{ background: rgba(144,144,168,.1); color: var(--text-mid); border: 1px solid var(--border); }
.badge-mine    { background: rgba(240,184,50,.12); color: var(--gold);  border: 1px solid rgba(240,184,50,.3); }

.bet-mode-tag {
  font-size: 10px; font-family: var(--font-mono); color: var(--text-lo);
  margin-left: auto;
}

.bet-title {
  font-family: var(--font-display);
  font-size: 22px; letter-spacing: 1px; line-height: 1.1;
  color: var(--text-hi);
}
.bet-desc { font-size: 12px; color: var(--text-mid); line-height: 1.5; }

.bet-author-row {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--text-lo);
}
.bet-author-row .dot-avatar {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--bg-card2); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; color: var(--text-mid);
}

/* =====================================================================
   CHOICES
   ===================================================================== */
.bet-choices {
  padding: 16px 20px;
  display: flex; flex-direction: column; gap: 10px;
  flex: 1;
}

.choice-row { display: flex; align-items: center; gap: 10px; }
.choice-bar-wrap {
  flex: 1; position: relative; height: 34px;
  background: var(--bg-card2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); overflow: hidden;
  cursor: pointer; transition: border-color .2s;
}
.choice-bar-wrap:hover { border-color: rgba(255,255,255,.15); }
.choice-bar-wrap.selected { border-color: var(--teal); }
.choice-bar-wrap.no-cursor { cursor: default; }

.choice-bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  transition: width .5s cubic-bezier(.4,0,.2,1);
  border-radius: var(--radius-sm);
}
.fill-teal  { background: linear-gradient(90deg, rgba(0,212,170,.25), rgba(0,212,170,.1)); }
.fill-gold  { background: linear-gradient(90deg, rgba(240,184,50,.25), rgba(240,184,50,.1)); }
.fill-red   { background: linear-gradient(90deg, rgba(255,71,87,.25), rgba(255,71,87,.1)); }
.fill-blue  { background: linear-gradient(90deg, rgba(100,150,255,.25), rgba(100,150,255,.1)); }
.fill-purple{ background: linear-gradient(90deg, rgba(167,139,250,.25), rgba(167,139,250,.1)); }

.choice-bar-wrap.selected .choice-bar-fill {
  animation: pulse-fill 2s ease-in-out infinite alternate;
}
@keyframes pulse-fill { from { opacity:.7; } to { opacity:1; } }

/* =====================================================================
   CHOIX R�SOLU � gagnant / perdant
   ===================================================================== */
.choice-bar-wrap.winner {
  border-color: var(--green);
  box-shadow: 0 0 0 1px var(--green), inset 0 0 20px rgba(46,213,115,.08);
}
.choice-bar-wrap.winner .choice-bar-fill {
  /* on remplace le gradient par un vert plein */
  background: linear-gradient(90deg, rgba(46,213,115,.45), rgba(46,213,115,.15)) !important;
  animation: winner-glow 1.8s ease-in-out infinite alternate;
}
@keyframes winner-glow {
  from { opacity:.8; }
  to   { opacity:1; box-shadow: inset 0 0 30px rgba(46,213,115,.2); }
}
.choice-bar-wrap.loser {
  opacity: .38;
  filter: saturate(0);
  cursor: default;
}
.winner-crown {
  font-size: 13px;
  margin-left: 4px;
  animation: crown-pop .4s cubic-bezier(.175,.885,.32,1.275) both;
}
@keyframes crown-pop {
  from { transform: scale(0) rotate(-20deg); opacity:0; }
  to   { transform: scale(1) rotate(0deg);  opacity:1; }
}
.winner-gain {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--green);
  margin-left: auto;
  white-space: nowrap;
}

.choice-label {
  position: relative; z-index: 1;
  padding: 0 12px; height: 100%;
  display: flex; align-items: center;
  font-size: 13px; font-weight: 600;
  color: var(--text-hi); gap: 6px;
}

.choice-odds {
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 500;
  min-width: 46px; text-align: right;
  color: var(--gold);
}
/* indicateur visuel selon le mode */
.choice-odds.mode-auto::after {
  content: '*'; font-size: 8px; color: var(--teal);
  vertical-align: super; margin-left: 2px;
}
.choice-odds.mode-hybrid::after {
  content: '*'; font-size: 8px; color: var(--purple);
  vertical-align: super; margin-left: 2px;
}
/* mode fixed : pas d'indicateur */

.bet-stats {
  display: flex; gap: 14px;
  padding: 0 20px 14px;
  font-family: var(--font-mono);
  font-size: 11px; color: var(--text-lo);
}

/* =====================================================================
   BET ACTIONS
   ===================================================================== */
.bet-actions {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 10px;
}

.participate-form { display: flex; gap: 8px; align-items: center; }
.participate-form .amount-input {
  flex: 1;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  color: var(--text-hi);
  font-family: var(--font-mono); font-size: 13px;
  outline: none; transition: border-color .2s;
}
.participate-form .amount-input:focus { border-color: var(--teal); }
.participate-form .amount-input::placeholder { color: var(--text-lo); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 16px; border-radius: var(--radius-sm); border: none;
  font-family: var(--font-ui); font-size: 13px; font-weight: 700;
  letter-spacing: .5px; cursor: pointer; transition: all .18s; white-space: nowrap;
}
.btn:active { transform: scale(.97); }

.btn-teal  { background: var(--teal);  color: var(--bg-void); }
.btn-teal:hover  { background: #00f0c0; box-shadow: 0 0 18px var(--teal-glow); }

.btn-gold  { background: var(--gold);  color: var(--bg-void); }
.btn-gold:hover  { background: #f5cc50; box-shadow: 0 0 18px var(--gold-glow); }

.btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--text-mid); }
.btn-ghost:hover { border-color: var(--border-hi); color: var(--text-hi); }

.btn-red   { background: transparent; border: 1px solid rgba(255,71,87,.3); color: var(--red); }
.btn-red:hover   { background: rgba(255,71,87,.1); }

.btn-sm  { padding: 6px 12px; font-size: 12px; }
.btn-xs  { padding: 4px 10px; font-size: 11px; }
.btn-full{ width: 100%; }

.owner-panel { display: flex; flex-direction: column; gap: 8px; }
.owner-panel-row { display: flex; gap: 8px; }
.owner-panel-row > * { flex: 1; }

.resolve-row { display: flex; gap: 8px; align-items: center; }
.resolve-select {
  flex: 1;
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 7px 10px;
  color: var(--text-hi); font-family: var(--font-mono); font-size: 12px;
  outline: none; cursor: pointer;
}
.resolve-select:focus { border-color: var(--gold); }

.payment-info {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--text-lo); font-family: var(--font-mono);
  flex-wrap: wrap;
}
.payment-info .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-dim); }

/* =====================================================================
   FAB
   ===================================================================== */
.fab {
  position: fixed; bottom: 32px; right: 32px; z-index: 200;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--gold); color: var(--bg-void);
  border: none; cursor: pointer;
  font-size: 26px; font-weight: 300;
  display: none; align-items: center; justify-content: center;
  box-shadow: 0 8px 28px rgba(240,184,50,.4);
  transition: transform .3s, box-shadow .2s, background .2s;
}
.fab:hover { box-shadow: 0 12px 36px rgba(240,184,50,.6); }
.fab.open {
  background: var(--bg-card2);
  border: 1px solid var(--border);
  color: var(--text-mid);
  transform: rotate(45deg);
  box-shadow: none;
}
.fab.open:hover { color: var(--red); border-color: rgba(255,71,87,.4); }

/* =====================================================================
   VUE CR�ATION (inline, pas de modal)
   ===================================================================== */
.create-view-header {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}
/* .create-view-back supprim� � annulation uniquement via le FAB � */

.create-view-title {
  font-family: var(--font-display);
  font-size: 26px; letter-spacing: 2px;
  color: var(--text-hi);
}
.create-view-title em { color: var(--gold); font-style: normal; }

/* Layout du formulaire de cr�ation : colonne unique, responsive, centr� */
.create-form {
  display: flex; flex-direction: column; gap: 24px;
  max-width: 680px;
  margin: 0 auto;
}

/* Blocs de section dans le form */
.form-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex; flex-direction: column; gap: 18px;
}
.form-section-title {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--text-lo);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-label {
  font-size: 11px; font-family: var(--font-mono); letter-spacing: 1px;
  color: var(--text-mid); text-transform: uppercase;
}
.form-input, .form-select, .form-textarea {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  color: var(--text-hi);
  font-family: var(--font-ui); font-size: 14px;
  outline: none; transition: border-color .2s;
  width: 100%;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-glow);
}
.form-input:focus-visible,
.form-select:focus-visible,
.form-textarea:focus-visible,
.btn:focus-visible,
.auth-toggle-btn:focus-visible,
.auth-alt-link:focus-visible,
.auth-eye:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.form-select { cursor: pointer; }
.form-textarea { resize: vertical; min-height: 72px; line-height: 1.5; }

/* ----------------------------------------------------------------
   Radio cards � empil�es verticalement, full width
   ---------------------------------------------------------------- */
.radio-group {
  display: flex; flex-direction: column; gap: 8px;
}
.radio-card {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all .2s;
  background: var(--bg-input);
  display: flex; align-items: flex-start; gap: 12px;
}
.radio-card input { display: none; }
.radio-card.checked {
  border-color: var(--gold);
  background: rgba(240,184,50,.07);
}
/* variante teal pour le mode paiement */
.radio-card.checked.teal-check {
  border-color: var(--teal);
  background: rgba(0,212,170,.06);
}
/* variante purple pour le mode hybride */
.radio-card.checked.purple-check {
  border-color: var(--purple);
  background: rgba(167,139,250,.07);
}

.radio-card-icon {
  font-size: 18px; flex-shrink: 0; margin-top: 2px;
}
.radio-card-body { display: flex; flex-direction: column; gap: 3px; }
.radio-card-title { font-weight: 700; font-size: 13px; color: var(--text-hi); }
.radio-card-desc  { font-size: 11px; color: var(--text-lo); line-height: 1.4; }

/* Choix builder */
.choices-builder { display: flex; flex-direction: column; gap: 8px; }
.choice-builder-row {
  display: flex; gap: 8px; align-items: center;
}
.choice-builder-row .form-input { flex: 1; }
.choice-builder-row .odds-input { width: 100px; flex-shrink: 0; }
.choice-remove {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: none; border: 1px solid rgba(255,71,87,.25);
  color: var(--red); cursor: pointer; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s;
}
.choice-remove:hover { background: rgba(255,71,87,.1); }

.add-choice-btn { align-self: flex-start; margin-top: 4px; }

/* footer du form */
.create-form-footer {
  display: flex; gap: 12px; align-items: center; justify-content: center;
  padding-top: 8px;
}

/* hint hybride */
.hybrid-hint {
  background: rgba(167,139,250,.08);
  border: 1px solid rgba(167,139,250,.2);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 11px; color: var(--purple); font-family: var(--font-mono);
  line-height: 1.5;
  display: none;
}
.hybrid-hint.visible { display: block; }

/* =====================================================================
   TOAST
   ===================================================================== */
.toast-container {
  position: fixed; top: 76px; right: 24px; z-index: 400;
  display: flex; flex-direction: column; gap: 8px;
}
.toast {
  padding: 12px 18px; border-radius: var(--radius-md);
  font-size: 13px; font-weight: 600; max-width: 280px;
  animation: toastIn .3s ease, toastOut .3s ease 2.7s forwards;
  display: flex; align-items: center; gap: 10px;
}
.toast-success { background: rgba(46,213,115,.15); border: 1px solid rgba(46,213,115,.35); color: var(--green); }
.toast-warn    { background: rgba(240,184,50,.15);  border: 1px solid rgba(240,184,50,.35); color: var(--gold); }
.toast-error   { background: rgba(255,71,87,.15);   border: 1px solid rgba(255,71,87,.35);  color: var(--red); }

@keyframes toastIn  { from { opacity:0; transform: translateX(20px); } to { opacity:1; transform: translateX(0); } }
@keyframes toastOut { from { opacity:1; transform: translateX(0); } to { opacity:0; transform: translateX(20px); } }

/* =====================================================================
   EMPTY STATE & DIVIDER
   ===================================================================== */
.empty-state {
  grid-column: 1/-1; text-align: center;
  padding: 60px 20px; color: var(--text-lo);
}
.empty-state .empty-icon { font-size: 48px; margin-bottom: 12px; opacity: .4; }
.empty-state p { font-size: 13px; }

.divider-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
  margin: 8px 0 40px; opacity: .4;
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 600px) {
  .topbar { padding: 0 16px; }
  .wallet-label { display: none; }
  .page-wrap { padding: 24px 14px 80px; }
  .auth-wrap { min-height: calc(100vh - 120px); }
  .auth-card { padding: 24px 16px 18px; }
  .bets-grid { grid-template-columns: 1fr; }
  .owner-panel-row { flex-direction: column; }
  .owner-panel-row > * { width: 100%; }
  .create-form { max-width: 100%; }
  .create-view-title { font-size: 24px; }
}