:root{
  --bg:#0a0710;--bg2:#0f0d1a;--bg3:#151224;--card:#12101f;--card2:#1a1730;
  --border:#2a2545;--border2:#3d3565;
  --v:#7c3aed;--v2:#9b5cf6;--v3:#c084fc;--neon:#a855f7;--neon2:#d946ef;
  --gold:#f59e0b;--green:#10b981;--red:#ef4444;
  --text:#e2d9f3;--text2:#a89bc4;--text3:#6b5f8a;
  --bh:calc(52px + env(safe-area-inset-bottom,0px));
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  scroll-behavior:smooth;
  background:#0a0710;
}
body{
  font-family:'DM Sans',sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
  -webkit-overflow-scrolling:touch;
}
body::before{content:'';position:fixed;inset:0;background: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.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");pointer-events:none;z-index:0;opacity:.4}
.orbs{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.orb{position:absolute;border-radius:50%;filter:blur(80px);animation:drift 20s ease-in-out infinite}
.o1{width:400px;height:400px;background:rgba(124,58,237,.12);top:-100px;left:-100px}
.o2{width:280px;height:280px;background:rgba(217,70,239,.08);top:50%;right:-50px;animation-delay:-7s}
.o3{width:220px;height:220px;background:rgba(168,85,247,.1);bottom:-50px;left:40%;animation-delay:-14s}
@keyframes drift{0%,100%{transform:translate(0,0)}33%{transform:translate(30px,-20px)}66%{transform:translate(-20px,30px)}}
::-webkit-scrollbar{width:4px}::-webkit-scrollbar-thumb{background:var(--v);border-radius:2px}
#app{position:relative;z-index:1}
.page{display:none;min-height:100vh}
.page.active{display:block}

/* NAV — colle sous la status bar iPhone avec la bonne couleur */
nav{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(10,7,16,.97);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  /* Hauteur fixe + safe area top pour l'encoche/Dynamic Island */
  height:calc(56px + env(safe-area-inset-top,0px));
  padding-top:env(safe-area-inset-top,0px);
  padding-left:max(20px, env(safe-area-inset-left,0px));
  padding-right:max(20px, env(safe-area-inset-right,0px));
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  padding-bottom:0;
}
.logo{font-family:'Syne',sans-serif;font-weight:800;font-size:20px;background:linear-gradient(135deg,var(--v3),var(--neon2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;cursor:pointer;letter-spacing:-0.5px;padding-bottom:10px}
.logo small{font-size:8px;display:block;letter-spacing:3px;-webkit-text-fill-color:var(--text3);color:var(--text3);margin-top:-3px;font-weight:400}
.nav-links{display:flex;gap:2px;padding-bottom:10px}
.nl{padding:6px 12px;border-radius:9px;font-size:13px;font-weight:500;color:var(--text2);cursor:pointer;transition:all .2s;border:1px solid transparent}
.nl:hover,.nl.active{color:var(--v3);background:rgba(124,58,237,.1);border-color:var(--border2)}
.nav-r{display:flex;align-items:center;gap:8px;padding-bottom:10px}
.blots-badge{background:linear-gradient(135deg,rgba(124,58,237,.2),rgba(217,70,239,.1));border:1px solid var(--border2);border-radius:20px;padding:5px 12px;font-size:12px;font-weight:700;color:var(--v3);display:flex;align-items:center;gap:5px}

/* BOTTOM NAV */
.bnav{
  display:none;
  position:fixed;bottom:0;left:0;right:0;z-index:200;
  background:rgba(10,7,16,.97);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border-top:1px solid var(--border);
  /* Barre home iPhone */
  padding-bottom:env(safe-area-inset-bottom,0px);
  padding-left:env(safe-area-inset-left,0px);
  padding-right:env(safe-area-inset-right,0px);
}
.bnav-inner{display:flex;justify-content:space-around;height:52px;align-items:stretch}
.bni{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;position:relative;transition:all .15s}
.bni.active .bni-ic,.bni.active .bni-lb{color:var(--v3)}
.bni.active::after{content:'';position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);width:16px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--v),var(--neon2))}
.bni-ic{font-size:18px;line-height:1}
.bni-lb{font-size:9px;font-weight:700;color:var(--text3);letter-spacing:.3px}
.bni:active .bni-ic{transform:scale(.85)}

/* BUTTONS */
.btn{padding:9px 18px;border-radius:11px;font-size:13px;font-weight:600;cursor:pointer;border:none;transition:all .2s;font-family:'DM Sans',sans-serif;display:inline-flex;align-items:center;gap:6px}
.btn-p{background:linear-gradient(135deg,var(--v),var(--neon));color:#fff;box-shadow:0 4px 16px rgba(124,58,237,.4)}
.btn-p:hover{transform:translateY(-1px);box-shadow:0 6px 22px rgba(124,58,237,.5)}
.btn-s{background:var(--card2);border:1px solid var(--border2);color:var(--text2)}
.btn-s:hover{border-color:var(--v);color:var(--v3)}
.btn-d{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.3);color:var(--red)}
.btn-sm{padding:5px 11px;font-size:11px;border-radius:8px}
.btn-lg{padding:13px 24px;font-size:15px;border-radius:13px}
.btn-full{width:100%;justify-content:center}
.btn:disabled{opacity:.35;cursor:not-allowed;transform:none!important}

/* INPUTS — font-size 16px minimum pour éviter le zoom iOS au focus */
.ig{display:flex;flex-direction:column;gap:5px}
.ig label{font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.8px}
input,select,textarea{
  background:var(--bg3);
  border:1px solid var(--border2);
  color:var(--text);
  border-radius:11px;
  padding:11px 14px;
  font-size:16px; /* 16px minimum — en dessous iOS zoom automatiquement */
  font-family:'DM Sans',sans-serif;
  transition:all .2s;
  outline:none;
  width:100%;
  -webkit-user-select:text;
  user-select:text;
  /* Supprime le style natif iOS */
  -webkit-appearance:none;
  appearance:none;
}
input:focus,select:focus,textarea:focus{border-color:var(--v);box-shadow:0 0 0 3px rgba(124,58,237,.15)}
select option{background:var(--bg3)}

/* CARDS */
.card{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:20px;transition:border-color .2s}
.card:hover{border-color:var(--border2)}

/* BADGES */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.7px}
.b-open{background:rgba(16,185,129,.12);color:var(--green);border:1px solid rgba(16,185,129,.3)}
.b-closed{background:rgba(245,158,11,.12);color:var(--gold);border:1px solid rgba(245,158,11,.3)}
.b-resolved{background:rgba(168,85,247,.12);color:var(--v3);border:1px solid rgba(168,85,247,.3)}
.dot{width:5px;height:5px;border-radius:50%;background:currentColor;animation:pd 2s ease-in-out infinite}
@keyframes pd{0%,100%{opacity:1}50%{opacity:.3}}

/* TOASTS */
#toasts{position:fixed;bottom:calc(var(--bh) + 10px);right:14px;z-index:9999;display:flex;flex-direction:column;gap:6px}
.toast{background:var(--card2);border:1px solid var(--border2);border-radius:13px;padding:11px 15px;font-size:13px;font-weight:500;display:flex;align-items:center;gap:8px;animation:tin .25s ease;max-width:290px;box-shadow:0 6px 24px rgba(0,0,0,.4)}
.toast.success{border-color:rgba(16,185,129,.4)}.toast.error{border-color:rgba(239,68,68,.4)}.toast.info{border-color:rgba(168,85,247,.4)}
@keyframes tin{from{transform:translateX(70px);opacity:0}to{transform:translateX(0);opacity:1}}

/* MODAL */
.overlay{display:none;position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.72);backdrop-filter:blur(4px);align-items:center;justify-content:center}
.overlay.open{display:flex}
.modal{background:var(--bg2);border:1px solid var(--border2);border-radius:20px;padding:26px;max-width:480px;width:92%;max-height:88vh;overflow-y:auto;animation:mi .22s ease;position:relative}
@keyframes mi{from{transform:scale(.95) translateY(8px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}
.mx{position:absolute;top:13px;right:13px;background:var(--card2);border:1px solid var(--border);color:var(--text2);width:28px;height:28px;border-radius:7px;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center}
.mtitle{font-family:'Syne',sans-serif;font-size:18px;font-weight:700;margin-bottom:16px}

/* AUTH */
.hero-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(124,58,237,.15) 0%,transparent 70%)}
.hero-wrap{text-align:center;max-width:400px;width:92%}
.hero-logo{font-family:'Syne',sans-serif;font-size:52px;font-weight:800;background:linear-gradient(135deg,#c084fc,#e879f9,#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-2px;filter:drop-shadow(0 0 28px rgba(168,85,247,.5))}
.hero-tag{font-size:10px;letter-spacing:4px;color:var(--text3);text-transform:uppercase;margin:5px 0 26px}
.auth-card{background:var(--card);border:1px solid var(--border2);border-radius:20px;padding:26px;box-shadow:0 0 50px rgba(124,58,237,.1)}
.auth-tabs{display:flex;background:var(--bg3);border-radius:11px;padding:3px;margin-bottom:22px}
.at{flex:1;text-align:center;padding:9px;border-radius:9px;font-size:13px;font-weight:600;cursor:pointer;color:var(--text3);transition:all .2s}
.at.active{background:var(--v);color:#fff;box-shadow:0 2px 10px rgba(124,58,237,.4)}
.fstack{display:flex;flex-direction:column;gap:13px}

/* CONTAINER */
.con{max-width:1060px;margin:0 auto;padding:28px 18px}

/* SECTION HEADER */
.sec-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:10px}
.sec-title{font-family:'Syne',sans-serif;font-size:18px;font-weight:800;color:var(--text)}
.sec-count{font-size:12px;color:var(--text3);background:var(--bg3);border-radius:20px;padding:3px 10px;border:1px solid var(--border)}

/* PARIS SECTIONS */
.bets-section{margin-bottom:32px}
.section-divider{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.section-divider .line{flex:1;height:1px;background:var(--border)}

/* BET CARD */
.bet-card{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:18px;cursor:pointer;transition:all .22s;position:relative;overflow:hidden}
.bet-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--v),transparent);opacity:0;transition:opacity .3s}
.bet-card:hover{border-color:var(--border2);transform:translateY(-2px);box-shadow:0 7px 26px rgba(0,0,0,.3)}
.bet-card:hover::before{opacity:1}
.bc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px}
.bc-title{font-family:'Syne',sans-serif;font-size:15px;font-weight:700;line-height:1.3}
.bc-desc{font-size:12px;color:var(--text3);line-height:1.5;margin-bottom:11px}
.bc-meta{display:flex;gap:10px;font-size:11px;color:var(--text3);flex-wrap:wrap;margin-bottom:11px}
.pill{background:var(--bg3);border:1px solid var(--border);border-radius:7px;padding:4px 9px;font-size:11px;display:inline-flex;align-items:center;gap:4px}
.pill .odds{color:var(--v3);font-weight:700}
.cat{padding:3px 9px;border-radius:20px;font-size:10px;font-weight:700;text-transform:uppercase;background:rgba(124,58,237,.1);color:var(--v3);border:1px solid rgba(124,58,237,.2)}
.my-bet-pill{background:rgba(124,58,237,.12);border:1px solid rgba(124,58,237,.3);color:var(--v3);border-radius:7px;padding:4px 9px;font-size:11px;font-weight:600}
.won-pill{background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.3);color:var(--green);border-radius:7px;padding:4px 9px;font-size:11px;font-weight:600}
.lost-pill{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.25);color:var(--red);border-radius:7px;padding:4px 9px;font-size:11px;font-weight:600}

/* GRID */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}

/* OPTION BTN */
.opt-btn{background:var(--bg3);border:2px solid var(--border);border-radius:13px;padding:13px 16px;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:space-between}
.opt-btn:hover{border-color:var(--border2);background:var(--card2)}
.opt-btn.sel{border-color:var(--v);background:rgba(124,58,237,.1);box-shadow:0 0 0 1px var(--v)}
.opt-btn.win{border-color:var(--green);background:rgba(16,185,129,.07)}
.opt-btn.lose{opacity:.4}
.opt-lbl{font-weight:600;font-size:14px}
.opt-odds{background:linear-gradient(135deg,var(--v),var(--neon));color:#fff;border-radius:7px;padding:3px 9px;font-size:12px;font-weight:700;flex-shrink:0}

/* AVATAR */
.avatar{width:64px;height:64px;border-radius:18px;background:linear-gradient(135deg,var(--v),var(--neon2));display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:800;color:#fff;flex-shrink:0;box-shadow:0 0 24px rgba(124,58,237,.4);font-family:'Syne',sans-serif;overflow:hidden;position:relative}
.avatar img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.avatar-sm{width:36px;height:36px;border-radius:11px;font-size:15px;overflow:hidden;position:relative}
.avatar-sm img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.av-click{cursor:pointer;transition:transform .2s}
.av-click:hover{transform:scale(1.05)}
.av-edit{position:absolute;bottom:-3px;right:-3px;background:var(--v);border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:10px;border:2px solid var(--bg)}

/* PROFILE */
.profile-hero{background:linear-gradient(135deg,rgba(124,58,237,.1),rgba(217,70,239,.05));border:1px solid var(--border2);border-radius:20px;padding:24px;display:flex;align-items:center;gap:20px;margin-bottom:18px}
.stat-card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:16px 18px}
.sv{font-family:'Syne',sans-serif;font-size:26px;font-weight:800;line-height:1}
.sl{font-size:10px;color:var(--text3);margin-top:3px;text-transform:uppercase;letter-spacing:.7px}

/* BONUS CARD */
.bonus-card{background:linear-gradient(135deg,rgba(124,58,237,.1),rgba(217,70,239,.07));border:1px solid var(--border2);border-radius:18px;padding:16px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}

/* LEADERBOARD */
.lb-row{display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:14px;border:1px solid var(--border);background:var(--card);margin-bottom:6px;transition:all .2s}
.lb-row:hover{border-color:var(--border2)}
.rank-b{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-family:'Syne',sans-serif;font-weight:800;font-size:13px;flex-shrink:0}
.r1{background:linear-gradient(135deg,#f59e0b,#fbbf24);color:#1a0a00}
.r2{background:linear-gradient(135deg,#94a3b8,#cbd5e1);color:#0f172a}
.r3{background:linear-gradient(135deg,#b45309,#d97706);color:#fff}
.rx{background:var(--bg3);color:var(--text3);border:1px solid var(--border)}
.me-glow{box-shadow:0 0 0 1px var(--v),0 0 16px rgba(124,58,237,.2)}

/* HISTORY */
.hist-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:13px 16px;margin-bottom:6px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.hist-type{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px}
.hist-desc{font-size:13px;font-weight:500}
.hist-date{font-size:10px;color:var(--text3);margin-top:2px}
.amt-pos{font-family:'Syne',sans-serif;font-weight:800;font-size:15px;color:var(--green);white-space:nowrap}
.amt-neg{font-family:'Syne',sans-serif;font-weight:800;font-size:15px;color:var(--red);white-space:nowrap}
.amt-zero{font-family:'Syne',sans-serif;font-weight:800;font-size:15px;color:var(--text3);white-space:nowrap}

/* ADMIN */
.adm-hdr{background:linear-gradient(135deg,rgba(217,70,239,.07),rgba(124,58,237,.07));border:1px solid var(--border2);border-radius:20px;padding:20px 24px;margin-bottom:24px;display:flex;align-items:center;justify-content:space-between}
.adm-tabs{display:flex;gap:3px;background:var(--bg3);padding:3px;border-radius:11px;margin-bottom:18px;overflow-x:auto}
.adm-tabs::-webkit-scrollbar{display:none}
.admt{padding:7px 14px;border-radius:9px;font-size:12px;font-weight:700;cursor:pointer;color:var(--text3);transition:all .2s;white-space:nowrap}
.admt.active{background:var(--v);color:#fff}

/* OPT ROW */
.opt-row{display:flex;gap:6px;align-items:center;margin-bottom:6px}
.opt-row input{flex:1}
.oi{width:75px;flex:none}
.rm{background:none;border:1px solid rgba(239,68,68,.3);color:var(--red);padding:7px 9px;border-radius:8px;cursor:pointer;font-size:13px}

/* EMPTY */
.empty{text-align:center;padding:44px 16px;color:var(--text3)}
.ei{font-size:42px;margin-bottom:10px}

/* LOADING */
.spin{width:20px;height:20px;border:2px solid var(--border2);border-top-color:var(--v);border-radius:50%;animation:sp .8s linear infinite;display:inline-block}
@keyframes sp{to{transform:rotate(360deg)}}
.loading{display:flex;align-items:center;justify-content:center;padding:50px;gap:10px;color:var(--text3)}

/* PHOTO PICKER */
.photo-zone{border:2px dashed var(--border2);border-radius:16px;padding:20px;text-align:center;cursor:pointer;transition:all .2s;margin-bottom:12px}
.photo-zone:hover{border-color:var(--v);background:rgba(124,58,237,.05)}
.photo-zone input{display:none}
.photo-preview{width:80px;height:80px;border-radius:18px;object-fit:cover;margin:0 auto 10px;display:block;border:2px solid var(--border2)}
.emoji-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:10px 0}
.ej{width:100%;aspect-ratio:1;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;border:2px solid transparent;transition:all .15s;background:var(--bg3)}
.ej:hover{transform:scale(1.06)}
.ej.sel{border-color:var(--v);box-shadow:0 0 0 2px rgba(124,58,237,.3)}
.color-row{display:flex;gap:7px;flex-wrap:wrap;margin:8px 0}
.cdot{width:28px;height:28px;border-radius:50%;cursor:pointer;border:3px solid transparent;transition:all .15s;flex-shrink:0}
.cdot:hover{transform:scale(1.12)}
.cdot.sel{border-color:#fff;box-shadow:0 0 0 2px var(--v)}

/* FILTER TABS */
.filter-tabs{display:flex;background:var(--bg3);border-radius:12px;padding:3px;margin-bottom:22px}
.ft{flex:1;text-align:center;padding:9px 6px;border-radius:9px;font-size:12px;font-weight:700;cursor:pointer;color:var(--text3);transition:all .2s}
.ft.active{background:var(--v);color:#fff;box-shadow:0 2px 10px rgba(124,58,237,.4)}

@keyframes fin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.fin{animation:fin .3s ease forwards}

/* RESPONSIVE */
@media(max-width:768px){
  .g2,.g3{grid-template-columns:1fr}
  .g4{grid-template-columns:1fr 1fr;gap:9px}

  /* Nav mobile : safe area déjà gérée dans nav{} desktop */
  nav{
    padding-left:max(14px, env(safe-area-inset-left,0px));
    padding-right:max(14px, env(safe-area-inset-right,0px));
  }
  .logo{padding-bottom:8px}
  .nav-r{padding-bottom:8px}
  .nav-links,.nav-r .btn{display:none}
  .bnav{display:block}

  /* Pages : espace suffisant sous le dernier élément pour ne pas être caché */
  #app .page{
    padding-bottom:0;
  }
  /* Toutes les pages : padding bas pour scroller au-dessus de la bottom nav */
  #pg-home, #pg-bets, #pg-detail, #pg-leaderboard, #pg-history, #pg-profile, #pg-admin {
    padding-bottom:calc(var(--bh) + 20px);
  }

  /* Container : même padding bas */
  .con{
    padding-top:16px;
    padding-bottom:calc(var(--bh) + 20px);
    padding-left:max(14px, env(safe-area-inset-left,0px));
    padding-right:max(14px, env(safe-area-inset-right,0px));
  }

  .card{padding:15px;border-radius:18px}
  .bet-card{padding:15px}
  .profile-hero{flex-direction:column;text-align:center;padding:20px 16px}
  .profile-hero>div:last-child{text-align:center}
  .adm-hdr{flex-direction:column;gap:10px;padding:16px}
  .adm-hdr .btn{width:100%;justify-content:center}
  .bonus-card{flex-direction:column;gap:10px}
  .bonus-card .btn{width:100%;justify-content:center}

  /* Modal drawer depuis le bas */
  .overlay{align-items:flex-end}
  .modal{
    width:100%;max-width:100%;
    border-radius:22px 22px 0 0;
    padding:18px max(16px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
    max-height:90vh;
    animation:dw .25s cubic-bezier(.32,.72,0,1);
    overscroll-behavior:contain;
  }
  .modal::before{content:'';display:block;width:32px;height:4px;background:var(--border2);border-radius:2px;margin:0 auto 16px}
  .mx{top:16px;right:16px}

  /* Toasts au dessus de la bottom nav */
  #toasts{
    right:max(12px, env(safe-area-inset-right));
    left:max(12px, env(safe-area-inset-left));
    bottom:calc(var(--bh) + 8px);
  }
  .toast{max-width:100%}
  .sv{font-size:22px}
  .sec-hdr{flex-wrap:wrap}
}
@keyframes dw{from{transform:translateY(100%)}to{transform:translateY(0)}}
@media(max-width:380px){.hero-logo{font-size:42px}.g4{grid-template-columns:1fr 1fr}}