/* ================================================
   SS.Mada — Styles globaux — Thème Or Vibrant
   ================================================ */
:root {
  --gold:    #E8BC50;
  --gold-l:  #F5CC6E;
  --gold-d:  #B8892A;
  --gold-xl: #FEF0B8;
  --gold-bg: #E8BC5018;
  --gold-bd: #E8BC5050;
  --on-gold: #0A0700;
  --grad-gold: linear-gradient(135deg, #B8892A 0%, #E8BC50 40%, #F5CC6E 65%, #E8BC50 100%);
  --bg:    #080706;
  --card:  #141210;
  --card2: #100E0C;
  --border:#242018;
  --text:  #F8F4EE;
  --muted: #A09484;
  --dim:   #6A5E52;
  --green: #2DD464;
  --blue:  #4D94FF;
  --red:   #FF3B40;
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
body {
  font-family:'Plus Jakarta Sans',sans-serif;
  background: var(--bg);
  background-image:
    radial-gradient(ellipse 90% 55% at 15% 0%,   #E8BC500A 0%, transparent 50%),
    radial-gradient(ellipse 70% 45% at 85% 100%,  #B8892A07 0%, transparent 50%);
  color:var(--text);
  min-height:100vh;
  -webkit-tap-highlight-color:transparent;
}
button,input,select,textarea {
  font-family:'Plus Jakarta Sans',sans-serif;
  -webkit-appearance:none; appearance:none;
}
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-thumb {
  background:linear-gradient(180deg,#3A3020,#D4A84340);
  border-radius:2px;
}
.sora { font-family:'Sora',sans-serif; }

/* ── Animations ── */
@keyframes goldShimmer {
  0%   { background-position:-400% center }
  100% { background-position: 400% center }
}
@keyframes fadeUp  { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
@keyframes sheetUp { from{transform:translateY(100%)}           to{transform:translateY(0)} }
@keyframes spin    { to{transform:rotate(360deg)} }
@keyframes slideR  { from{transform:translateX(100%)}           to{transform:translateX(0)} }
@keyframes msgIn   { from{opacity:0;transform:translateY(8px)}  to{opacity:1;transform:translateY(0)} }
@keyframes pulse   { 0%,100%{opacity:1} 50%{opacity:.4} }
@keyframes shake {
  0%,100%{transform:translateX(0)}
  15%{transform:translateX(-9px)} 30%{transform:translateX(9px)}
  45%{transform:translateX(-6px)} 60%{transform:translateX(6px)}
  75%{transform:translateX(-3px)} 90%{transform:translateX(3px)}
}

.ss-shine {
  background:linear-gradient(90deg,
    #6B4E1A 0%,#9A7428 12%,#D4A843 24%,#F0C96A 36%,
    #FDE8A0 48%,#F0C96A 60%,#D4A843 72%,#9A7428 84%,#6B4E1A 100%);
  background-size:400% 100%;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:goldShimmer 5s ease-in-out infinite;
  display:inline;
}

.au { animation:fadeUp  .22s ease forwards }
.su { animation:sheetUp .26s ease forwards }
.sr { animation:slideR  .24s ease forwards }

/* ── Toast ── */
#toast {
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  padding:11px 20px; border-radius:12px;
  background:linear-gradient(135deg,#1C1810,#221E14);
  border:1px solid #D4A84340;
  box-shadow:0 4px 20px #D4A84325,0 0 0 1px #D4A84318;
  font-family:'Sora',sans-serif; font-weight:600; font-size:13px;
  color:#F0C96A;
  z-index:9999; opacity:0; transition:opacity .2s;
  pointer-events:none; white-space:nowrap; max-width:90vw; text-align:center;
}
#toast.show { opacity:1; }

/* ── Loaders ── */
.loader {
  width:18px; height:18px; border:2px solid var(--border);
  border-top-color:var(--gold); border-radius:50%;
  animation:spin .7s linear infinite;
  display:inline-block; vertical-align:middle;
}
.big-loader {
  width:40px; height:40px;
  border:3px solid var(--border);
  border-top-color:var(--gold);
  border-right-color:var(--gold-d);
  border-radius:50%;
  animation:spin .8s linear infinite;
  margin:60px auto; display:block;
}

/* ── Skeleton shimmer ── */
@keyframes skeletonShimmer {
  0%   { background-position: -600px 0 }
  100% { background-position:  600px 0 }
}
.skel {
  background: linear-gradient(90deg,
    var(--card) 25%,
    #2A2418 50%,
    var(--card) 75%);
  background-size: 600px 100%;
  animation: skeletonShimmer 1.4s ease-in-out infinite;
  border-radius: 8px;
}
.skel-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}
.skel-thumb { height: 160px; }
.skel-line  { height: 12px; margin: 8px 12px; }
.skel-line-sm { height: 10px; margin: 6px 12px; width: 60%; }
.skel-price { height: 14px; margin: 8px 12px; width: 40%; }
@media(max-width:600px) { .skel-thumb { height: 130px; } }

/* ── NAV ── */
#nav {
  position:sticky; top:0; z-index:100;
  background:rgba(8,7,6,0.92);
  backdrop-filter:blur(24px) saturate(1.4);
  -webkit-backdrop-filter:blur(24px) saturate(1.4);
  box-shadow:0 1px 0 0 #E8BC5035,0 4px 28px 0 rgba(0,0,0,0.4);
  border-bottom:1px solid #E8BC5018;
  height:58px; display:flex; align-items:center;
  justify-content:space-between; padding:0 18px; gap:8px;
}

/* ── Quick bar mobile ── */
#mobile-quick-bar {
  display:none; padding:8px 12px;
  background:linear-gradient(90deg,#0E0C09,#131108);
  border-bottom:1px solid #D4A84325;
  box-shadow:0 2px 12px #D4A84310;
  position:sticky; top:56px; z-index:99;
  gap:8px; align-items:center;
}
@media(max-width:767px) { #mobile-quick-bar{display:flex;} }
.mqb-btn {
  flex:1; padding:9px 6px !important; font-size:12px !important;
  font-family:'Sora',sans-serif !important; font-weight:600 !important;
  text-align:center; white-space:nowrap; border-radius:9px !important;
}
#mqb-guest,#mqb-vendor,#mqb-user { display:flex; gap:8px; width:100%; }

#mobile-search-bar {
  display:none; padding:8px 16px;
  background:linear-gradient(90deg,#0E0C09,#131108);
  border-bottom:1px solid #D4A84325;
  position:sticky; top:108px; z-index:98;
}
@media(max-width:767px) { #mobile-search-bar{display:block;} }
#mobile-search-bar input {
  width:100%; padding:9px 14px;
  background:linear-gradient(135deg,#18150E,#131008);
  border:1px solid var(--border);
  border-radius:10px; font-size:14px; color:var(--text); outline:none;
  transition:border-color .2s,box-shadow .2s;
}
#mobile-search-bar input:focus {
  border-color:var(--gold-d);
  box-shadow:0 0 0 3px #D4A84315;
}
#mobile-search-bar input::placeholder { color:var(--dim); }

/* ── Overlay ── */
.overlay {
  position:fixed; inset:0;
  background:radial-gradient(ellipse at center,rgba(10,7,3,.92) 0%,rgba(0,0,0,.95) 100%);
  z-index:200;
}

/* ── Sheets ── */
.sheet {
  position:fixed; bottom:0; left:0; right:0; z-index:300;
  max-height:94vh; overflow-y:auto;
  background:linear-gradient(170deg,#1A1710 0%,#131008 40%,#0E0C08 100%);
  border-radius:20px 20px 0 0;
  border-top:1px solid #D4A84340;
  box-shadow:0 -4px 40px #D4A84318,0 -1px 0 0 #D4A84325;
  padding:24px 18px 36px;
}
@media(min-width:580px) {
  .sheet {
    left:50%; right:auto; transform:translateX(-50%);
    width:560px; bottom:24px; border-radius:20px;
    border:1px solid #D4A84335;
    box-shadow:0 20px 60px rgba(0,0,0,.8),0 0 40px #D4A84315,inset 0 1px 0 #D4A84325;
    max-height:90vh;
  }
}
.side-panel {
  position:fixed; top:0; right:0; bottom:0;
  width:min(440px,100vw);
  background:linear-gradient(180deg,#18150E 0%,#13110A 50%,#0E0C08 100%);
  border-left:1px solid #D4A84330;
  box-shadow:-4px 0 30px #D4A84312;
  z-index:300; display:flex; flex-direction:column;
}
#notif-dd {
  position:fixed; top:64px; right:16px;
  width:min(360px,94vw); max-height:80vh; overflow-y:auto;
  background:linear-gradient(160deg,#1A1710,#111008);
  border:1px solid #D4A84340;
  border-radius:16px; z-index:400;
  box-shadow:0 20px 60px rgba(0,0,0,.8),0 0 30px #D4A84318;
}

/* ── Product Cards ── */
.prod-card {
  background:linear-gradient(160deg,#17140D 0%,#12110E 50%,#0E0D0A 100%);
  border:1px solid #2A2418;
  border-radius:16px; overflow:hidden;
  display:flex; flex-direction:column;
  cursor:pointer;
  transition:border-color .25s,transform .2s,box-shadow .25s;
}
.prod-card:hover {
  border-color:#E8BC5055; transform:translateY(-5px);
  box-shadow:0 16px 40px rgba(0,0,0,.6),0 0 24px #E8BC5020,inset 0 1px 0 #E8BC5028;
}
.prod-thumb {
  height:160px;
  background:linear-gradient(135deg,#111008,#0E0C08);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; position:relative; flex-shrink:0;
}
.prod-thumb::after {
  content:''; position:absolute; inset:auto 0 0 0; height:50%;
  background:linear-gradient(to bottom,transparent,#12110A90);
  pointer-events:none;
}
.prod-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.prod-card:hover .prod-thumb img { transform:scale(1.05); }
@media(max-width:600px) { .prod-thumb{height:130px;} }

/* ── Gallery ── */
.gallery-main {
  position:relative;
  background:linear-gradient(135deg,#111008,#0A0907);
  border-radius:16px; overflow:hidden; margin-bottom:12px;
}
.gallery-main img { width:100%; display:block; max-height:340px; object-fit:cover; border-radius:16px; }
.gallery-thumbs { display:flex; gap:6px; overflow-x:auto; padding-bottom:2px; }
.gallery-thumbs::-webkit-scrollbar { display:none; }
.gthumb {
  width:64px; height:64px; flex-shrink:0; border-radius:10px;
  overflow:hidden; cursor:pointer; border:2px solid transparent;
  transition:border-color .15s,box-shadow .15s;
}
.gthumb.active { border-color:var(--gold); box-shadow:0 0 10px #D4A84340; }
.gthumb img { width:100%; height:100%; object-fit:cover; }
.g-nav-btn {
  position:absolute; top:50%; transform:translateY(-50%);
  background:linear-gradient(135deg,rgba(20,16,8,.8),rgba(0,0,0,.7));
  border:1px solid #D4A84330; backdrop-filter:blur(4px); border-radius:50%;
  width:36px; height:36px; color:#F0C96A; font-size:18px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  z-index:2; transition:all .15s;
}
.g-nav-btn:hover { background:linear-gradient(135deg,#D4A84325,rgba(0,0,0,.85)); box-shadow:0 0 12px #D4A84330; }

/* ── Upload Photos ── */
.photo-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; }
@media(max-width:480px) { .photo-grid{grid-template-columns:repeat(3,1fr);} }
.photo-cell { aspect-ratio:1; border-radius:10px; overflow:hidden; position:relative; background:var(--border); }
.photo-cell img { width:100%; height:100%; object-fit:cover; }
.photo-cell-del {
  position:absolute; top:3px; right:3px;
  background:rgba(0,0,0,.75); border:none; border-radius:50%;
  width:20px; height:20px; color:white; font-size:11px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.photo-cell-order {
  position:absolute; bottom:3px; left:3px;
  background:linear-gradient(135deg,#D4A84390,#9A742870);
  border-radius:4px; padding:1px 4px; font-size:9px;
  color:var(--on-gold); font-family:'Sora',sans-serif; font-weight:700;
}
.add-photo-cell {
  aspect-ratio:1; border-radius:10px;
  border:2px dashed #2A2418;
  background:linear-gradient(135deg,#15120A,#111008);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  cursor:pointer; gap:4px; font-size:10px; color:var(--dim);
  transition:all .2s; position:relative;
}
.add-photo-cell:hover {
  border-color:var(--gold-d); color:var(--gold);
  background:linear-gradient(135deg,#1C180E,#16130A);
  box-shadow:0 0 12px #D4A84318;
}
.add-photo-cell input { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; }

/* ── Grids ── */
.pgrid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
@media(min-width:640px) { .pgrid{grid-template-columns:repeat(3,1fr);gap:14px;} }
@media(min-width:900px) { .pgrid{grid-template-columns:repeat(4,1fr);gap:16px;} }
.plan-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media(min-width:600px) { .plan-grid{grid-template-columns:repeat(5,1fr);} }
.vendor-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }

/* ── Components ── */
.cats { display:flex; gap:7px; overflow-x:auto; padding-bottom:4px; -webkit-overflow-scrolling:touch; }
.cats::-webkit-scrollbar { display:none; }

.inp {
  width:100%; padding:12px 13px;
  background:linear-gradient(135deg,#18150E,#14120A);
  border:1px solid #2A2418;
  border-radius:10px; font-size:14px; color:var(--text);
  outline:none; transition:border-color .2s,box-shadow .2s,background .2s;
}
.inp:focus {
  border-color:var(--gold-d);
  box-shadow:0 0 0 3px #D4A84315,inset 0 1px 0 #D4A84310;
  background:linear-gradient(135deg,#1C180E,#18140A);
}
.inp::placeholder { color:var(--dim); }

/* ── Select dark mode (catégories, filtres) ── */
select.inp {
  color: var(--text);
  color-scheme: dark;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C9A227' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}
select.inp option {
  background: #14120A;
  color: var(--text);
  padding: 8px 12px;
}
select.inp option:hover,
select.inp option:checked {
  background: #C9A22722;
  color: var(--gold);
}

.stars   { color:var(--gold); font-size:11px; letter-spacing:-1px; }
.bdg {
  display:inline-block; padding:2px 8px; border-radius:20px;
  font-size:10px; font-weight:700; font-family:'Sora',sans-serif;
  letter-spacing:.4px; text-transform:uppercase;
}
.stat {
  background:linear-gradient(160deg,#1C1810 0%,#16140E 100%);
  border:1px solid #2E2618;
  border-radius:11px; padding:14px 12px;
  transition:border-color .2s,box-shadow .2s;
}
.stat:hover { border-color:#D4A84335; box-shadow:0 4px 16px #D4A84310; }
.vpcard {
  background:linear-gradient(160deg,#17140D,#0E0D0A);
  border:1px solid #2A2418;
  border-radius:12px; overflow:hidden; display:flex; flex-direction:column;
  transition:border-color .2s,box-shadow .2s;
}
.vpcard:hover { border-color:#D4A84340; box-shadow:0 4px 16px #D4A84312; }
.vpthumb {
  height:90px; background:linear-gradient(135deg,#111008,#0A0907);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.vpthumb img { width:100%; height:100%; object-fit:cover; }

/* ── Buttons ── */
.btn-gold {
  background:linear-gradient(135deg,#B8892A 0%,#E8BC50 45%,#F5CC6E 70%,#E8BC50 100%);
  background-size:200% 100%;
  border:none; border-radius:11px;
  padding:12px 20px; font-family:'Sora',sans-serif;
  font-weight:700; font-size:14px; color:#0A0700;
  cursor:pointer; letter-spacing:.01em;
  transition:background-position .4s,box-shadow .25s,transform .15s;
  box-shadow:0 2px 16px #E8BC5040,inset 0 1px 0 #F5CC6E60;
}
.btn-gold:hover {
  background-position:right center;
  box-shadow:0 6px 24px #E8BC5055,inset 0 1px 0 #FEF0B870;
  transform:translateY(-2px);
}
.btn-gold:active  { transform:translateY(0); box-shadow:0 1px 8px #B8892A50; }
.btn-gold:disabled { opacity:.45; cursor:not-allowed; transform:none; }

.btn-ghost {
  background:linear-gradient(135deg,#1C1910,#15120A);
  border:1px solid #3C3222; border-radius:11px;
  padding:11px 16px; font-family:'Sora',sans-serif;
  font-weight:600; font-size:13px; color:var(--muted); cursor:pointer;
  transition:border-color .25s,color .25s,box-shadow .25s,background .25s;
}
.btn-ghost:hover { border-color:#E8BC5045; color:#F5CC6E; background:linear-gradient(135deg,#221D12,#1A1610); box-shadow:0 0 16px #E8BC5018; }

.ptab {
  flex:1; padding:8px 4px; font-size:12px;
  font-weight:600; border:none; border-radius:9px;
  cursor:pointer; color:var(--muted); background:none;
  transition:background .15s,color .15s;
  white-space:nowrap; text-align:center;
}
.ptab:hover { background:linear-gradient(135deg,#1C1810,#16130A); color:#F0C96A; }

/* ── OTP ── */
#otp-inputs input:focus {
  border-color:var(--gold) !important;
  box-shadow:0 0 0 3px #D4A84320,inset 0 1px 0 #D4A84315 !important;
  background:linear-gradient(135deg,#1C180E,#18140A) !important;
}

/* ── Messenger ── */
.msg-panel-inner { display:flex; flex-direction:column; height:100%; }
.msg-list {
  flex:1; overflow-y:auto; padding:16px;
  display:flex; flex-direction:column; gap:8px;
  background:linear-gradient(180deg,#0E0C08,#0A0907);
}
.bubble {
  max-width:75%; padding:10px 14px; font-size:14px;
  line-height:1.5; animation:msgIn .15s ease forwards;
}
.bubble.me {
  align-self:flex-end;
  background:linear-gradient(135deg,#9A7428,#D4A843,#F0C96A);
  color:var(--on-gold); border-radius:18px 18px 4px 18px;
  box-shadow:0 2px 10px #9A742840;
}
.bubble.them {
  align-self:flex-start;
  background:linear-gradient(135deg,#1C1810,#16140E);
  color:var(--text); border-radius:18px 18px 18px 4px;
  border:1px solid #2E2618;
}
.bubble .meta { font-size:10px; opacity:.6; margin-top:4px; text-align:right; }
.bubble.them .meta { text-align:left; }
.conv-item {
  display:flex; align-items:center; gap:12px; padding:12px 16px;
  cursor:pointer; transition:background .15s; border-bottom:1px solid #1E1A10;
}
.conv-item:hover { background:linear-gradient(90deg,#1C180E,#16140A); }
.conv-avatar {
  width:42px; height:42px; border-radius:50%;
  background:linear-gradient(135deg,#9A7428,#D4A843,#F0C96A);
  display:flex; align-items:center; justify-content:center;
  font-family:'Sora',sans-serif; font-weight:700;
  font-size:15px; color:var(--on-gold); flex-shrink:0;
  box-shadow:0 2px 8px #D4A84330;
}

/* ── Payment ── */
.pay-logo {
  display:inline-flex; align-items:center; gap:6px; padding:5px 10px;
  border-radius:8px; font-family:'Sora',sans-serif; font-weight:700; font-size:11px;
}
.pay-mvola  { background:#FFD10018; border:1px solid #FFD10050; color:#FFD100; }
.pay-orange { background:#FF660018; border:1px solid #FF660040; color:#FF6600; }
.pay-airtel { background:#E4000018; border:1px solid #E4000040; color:#E40000; }

/* ══ RESPONSIVE ══ */
html,body { overflow-x:hidden; overflow-y:auto; max-width:100vw; }

@media(max-width:479px) {
  #nav .ss-shine { font-size:12px; }
  #nav > div:last-child button { padding:6px 8px !important; font-size:14px !important; }
  #nav #sell-btn  { display:none !important; }
  #nav #auth-btn  { display:none !important; }
}
@media(max-width:359px) { #nav #sell-btn-mob { display:block !important; } }

.sheet { max-width:100vw; box-sizing:border-box; }

@media(max-width:480px) {
  .side-panel { width:100vw !important; }
  #otp-inputs input { width:38px !important; height:48px !important; font-size:20px !important; }
}
@media(max-width:340px) {
  #otp-inputs input { width:32px !important; height:42px !important; font-size:18px !important; }
}

table { min-width:max-content; }
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; }

@media(max-width:340px) { .pgrid{grid-template-columns:1fr !important;} }
@media(max-width:599px) { .plan-grid{grid-template-columns:1fr 1fr !important;} }
@media(max-width:340px) { .plan-grid{grid-template-columns:1fr !important;} }

.tabs-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap; scrollbar-width:none; }
.tabs-scroll::-webkit-scrollbar { display:none; }

@media(max-width:400px) { .vendor-grid{grid-template-columns:repeat(2,1fr) !important;} }
@media(max-width:480px) { .stat{min-width:0;} }

.inp,.btn-gold,.btn-ghost { max-width:100%; box-sizing:border-box; }
#auth-btn { transition: color .2s, border-color .2s, background .15s; }
@media(max-width:340px) { .photo-grid{grid-template-columns:repeat(2,1fr) !important;} }

.sheet * { word-break:break-word; max-width:100%; }
.sheet img { max-width:100%; height:auto; }

@media(max-width:400px) { #notif-dd{right:8px !important;left:8px !important;width:auto !important;} }

/* ════════════════════════════════════════════════
   v6 — Email OTP Auth + Product Modal + Profile
════════════════════════════════════════════════ */

/* Cases OTP auth (6 boxes) */
#sheet-auth [id^="otp-"] {
  transition: border-color .15s, box-shadow .15s;
}
#sheet-auth [id^="otp-"]:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px var(--gold-bg);
}

/* Cases OTP vérification email dans profil */
[id^="evc-otp-"] {
  transition: border-color .15s, box-shadow .15s;
}
[id^="evc-otp-"]:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px var(--gold-bg);
}

/* Galerie produit — slides */
#sheet-product [id^="prod-slides-"] {
  will-change: transform;
}

/* Modal produit — scroll fluide iOS */
#sheet-product > div:nth-child(2) {
  -webkit-overflow-scrolling: touch;
}

/* Carte profil — hero shimmer */
#page-profile .sora[style*="font-weight:800;font-size:19px"] {
  background: linear-gradient(90deg, var(--text) 0%, var(--gold) 50%, var(--text) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: goldShimmer 4s linear infinite;
}

/* Badge email vérifié dans profil */
.email-verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #052E1666;
  border: 1px solid #22C55E33;
  border-radius: 8px;
  padding: 3px 9px;
  font-size: 11px;
  color: var(--green);
  font-family: 'Sora', sans-serif;
  font-weight: 600;
}

/* Responsive OTP boxes — petits écrans */
@media(max-width:400px) {
  #sheet-auth [id^="otp-"],
  [id^="evc-otp-"] {
    width: 38px !important;
    height: 48px !important;
    font-size: 20px !important;
  }
}
@media(max-width:340px) {
  #sheet-auth [id^="otp-"],
  [id^="evc-otp-"] {
    width: 32px !important;
    height: 42px !important;
    font-size: 17px !important;
    gap: 4px !important;
  }
}

/* Indicateur "En ligne" messagerie — pulse vert */
.conv-online {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  animation: pulse 2s ease infinite;
}

/* ════════════════════════════════════════════════
   v7 — Firebase Email Link auth + Profile nav
════════════════════════════════════════════════ */

/* Auth-btn avec avatar initiale */
#auth-btn {
  transition: color .2s, border-color .2s, background .15s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
#auth-btn span { display: inline-flex; align-items: center; gap: 5px; }

/* Select catégorie vendeur — dark on all platforms */
select.inp, select.inp:focus {
  color: var(--text) !important;
}

/* Loader plein écran (retour lien email) */
#page-home .sora[style*="font-weight:600;font-size:15px;color:var(--gold)"] {
  animation: pulse 1.5s ease infinite;
}

/* Bouton suppr vendeur — confirmation rouge */
button[onclick*="adminDeleteVendor"] {
  transition: background .15s, color .15s;
}
button[onclick*="adminDeleteVendor"]:hover {
  background: #7F1D1D22 !important;
}

/* ════════════════════════════════════════════════
   v8 — Vendor Tools: Flash, Promo, Boost, Stats
════════════════════════════════════════════════ */

/* Flash badge animé */
.flash-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--red);
  color: white;
  border-radius: 6px;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 700;
  font-family: 'Sora', sans-serif;
  animation: pulse 1.5s ease infinite;
}

/* Barre de progression stats */
.stat-bar {
  background: var(--border);
  border-radius: 4px;
  height: 6px;
  overflow: hidden;
}
.stat-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-d), var(--gold));
  border-radius: 4px;
  transition: width .6s ease;
}

/* Code promo — monospace */
.promo-code-badge {
  font-family: 'Courier New', monospace;
  font-weight: 700;
  letter-spacing: 1.5px;
  font-size: 15px;
  color: var(--gold);
  background: var(--gold-bg);
  border: 1px dashed var(--gold-bd);
  border-radius: 8px;
  padding: 6px 14px;
  user-select: all;
}

/* Boost radio option selected */
.boost-option-selected {
  border-color: #3B82F6 !important;
  background: #3B82F618 !important;
}

/* Vendor tab scroll wrapper */
.vtabs-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.vtabs-scroll::-webkit-scrollbar { display: none; }

/* Home flash section scroll */
#home-flash-section > div > div:last-child::-webkit-scrollbar { display: none; }
#home-flash-section > div > div:last-child { scrollbar-width: none; }

/* Flash card hover */
#home-flash-section [onclick] {
  will-change: transform;
}

/* Quick-edit stock inputs on mobile */
@media(max-width:480px) {
  #vtab-content [style*="grid-template-columns:1fr 1fr auto"] {
    grid-template-columns: 1fr 1fr !important;
  }
  #vtab-content [style*="grid-template-columns:1fr 1fr auto"] > div:last-child {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: row;
    gap: 8px;
  }
  #vtab-content [style*="grid-template-columns:1fr 1fr auto"] > div:last-child button {
    flex: 1;
  }
}