/* ══ AutoCreate — styles ══════════════════════════════════════ */
:root{
  --bg:#0e1116; --bg2:#151a22; --card:#1a212c; --card2:#212a37;
  --line:#2a3442; --text:#e7edf5; --muted:#8b98a9; --muted2:#657084;
  --primary:#5b8cff; --primary-d:#4776e6; --ok:#2fbf71; --warn:#f5a524; --danger:#ef4d5a;
  --used:#4b5563; --radius:12px; --shadow:0 6px 24px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--text);
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
b{font-weight:700}
code{background:#0c1017;padding:1px 6px;border-radius:6px;color:#a9c0ff;font-size:12px}
.muted{color:var(--muted)}
.small{font-size:12px}
.hidden{display:none!important}
.link{color:var(--primary);cursor:pointer;text-decoration:underline}

/* ── Topbar ── */
.topbar{
  display:flex;align-items:center;gap:20px;
  padding:12px 20px;background:var(--bg2);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20;
}
.brand{display:flex;align-items:center;gap:12px}
.logo{
  width:40px;height:40px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--primary),#9b6bff);color:#fff;font-weight:800;letter-spacing:.5px;
}
.brand-title{font-weight:800;font-size:16px}
.brand-sub{font-size:11px;color:var(--muted)}
.market-switch{display:flex;align-items:center;gap:6px;margin-left:8px}
.market-label{font-size:12px;color:var(--muted);margin-right:4px}
.mk-btn{
  background:var(--card);border:1px solid var(--line);color:var(--muted);
  padding:8px 14px;border-radius:9px;cursor:pointer;font-weight:600;font-size:13px;transition:.15s;
}
.mk-btn:hover{color:var(--text)}
.mk-btn.active{background:var(--primary);border-color:var(--primary);color:#fff}
.conn{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--muted2)}
.dot.ok{background:var(--ok);box-shadow:0 0 0 3px rgba(47,191,113,.18)}
.dot.err{background:var(--danger);box-shadow:0 0 0 3px rgba(239,77,90,.18)}

/* ── Admin gate ── */
.admin-btn{background:var(--card);border:1px solid var(--line);color:var(--muted);padding:8px 12px;border-radius:9px;cursor:pointer;font-weight:600;font-size:12px;transition:.15s;white-space:nowrap}
.admin-btn:hover{color:var(--text)}
.admin-btn.on{background:rgba(47,191,113,.15);border-color:var(--ok);color:var(--ok)}
body:not(.is-admin) [data-admin]{display:none !important}

/* ── Layout ── */
.layout{display:flex;min-height:calc(100vh - 65px)}
.sidebar{
  width:210px;flex:0 0 210px;background:var(--bg2);border-right:1px solid var(--line);
  padding:14px 10px;display:flex;flex-direction:column;gap:4px;position:sticky;top:65px;height:calc(100vh - 65px);
}
.nav-item{
  display:flex;align-items:center;gap:10px;background:transparent;border:0;color:var(--muted);
  padding:11px 12px;border-radius:10px;cursor:pointer;font-size:14px;font-weight:600;text-align:left;transition:.15s;
}
.nav-item span{flex:1}
.nav-item b{background:var(--card2);color:var(--muted);font-size:11px;padding:1px 8px;border-radius:20px;font-weight:700}
.nav-item:hover{background:var(--card);color:var(--text)}
.nav-item.active{background:var(--card2);color:var(--text)}
.nav-item.active b{background:var(--primary);color:#fff}
.main{flex:1;padding:24px 32px;max-width:1600px;overflow-x:hidden}

/* ── View head ── */
.view-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
h1{font-size:22px;margin:0 0 4px}
.view-head p{margin:0}

/* ── Cards ── */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-bottom:18px}
.card-head{font-weight:700;margin-bottom:6px;font-size:15px}

/* ── Buttons ── */
.btn{
  background:var(--card2);border:1px solid var(--line);color:var(--text);
  padding:9px 14px;border-radius:9px;cursor:pointer;font-weight:600;font-size:13px;transition:.15s;white-space:nowrap;
}
.btn:hover{border-color:var(--muted2)}
.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn.primary:hover{background:var(--primary-d)}
.btn.big{padding:12px 18px;font-size:14px}
.btn.mini{padding:5px 9px;font-size:12px;border-radius:7px}
.btn.danger:hover{border-color:var(--danger);color:var(--danger)}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ── Inputs ── */
.paste{
  width:100%;min-height:120px;resize:vertical;background:var(--bg);border:1px solid var(--line);
  border-radius:10px;color:var(--text);padding:12px;font:13px/1.5 ui-monospace,Menlo,Consolas,monospace;margin:8px 0;
}
.paste.sm{min-height:70px}
.search,.select,.num{
  background:var(--bg);border:1px solid var(--line);border-radius:9px;color:var(--text);padding:9px 12px;font-size:13px;
}
.search.full,.full{width:100%}
.num{width:70px}
.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:6px}
.fld{display:block;margin-bottom:12px;font-size:13px;font-weight:600}
.fld .muted{font-weight:400}
.chk{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);font-weight:600}

/* ── List (mails / numbers) ── */
.list-toolbar{display:flex;gap:10px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.list-toolbar .search{flex:1;min-width:180px}
.count{font-size:12px;color:var(--muted);white-space:nowrap}
.list{display:flex;flex-direction:column;gap:6px;max-height:520px;overflow-y:auto}
.item{
  display:flex;align-items:center;gap:12px;background:var(--bg);border:1px solid var(--line);
  border-radius:9px;padding:9px 12px;
}
.item.used{opacity:.55}
.item .val{flex:1;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item .sub{color:var(--muted);font-size:11px}
.badge{font-size:11px;padding:2px 9px;border-radius:20px;font-weight:700}
.badge.available{background:rgba(47,191,113,.15);color:var(--ok)}
.badge.used{background:rgba(75,85,99,.35);color:#aab4c2}
.item-actions{display:flex;gap:6px}
.empty{text-align:center;color:var(--muted);padding:30px;font-size:13px}

/* ── Dropzone ── */
.dropzone{
  border:2px dashed var(--line);border-radius:14px;padding:34px;text-align:center;background:var(--card);
  transition:.15s;cursor:pointer;margin-bottom:18px;
}
.dropzone.drag{border-color:var(--primary);background:rgba(91,140,255,.08)}
.dz-icon{font-size:30px;margin-bottom:8px}

/* ── Photo grid ── */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.photo{
  background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;position:relative;
}
.photo.used{opacity:.5}
.photo img{width:100%;height:150px;object-fit:cover;display:block;background:var(--bg);cursor:grab}
.photo .pmeta{padding:8px 10px}
.photo .pname{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px}
.photo .pacts{display:flex;gap:5px;flex-wrap:wrap}
.photo .tag{position:absolute;top:8px;left:8px;background:rgba(0,0,0,.6);color:#fff;font-size:10px;padding:2px 7px;border-radius:20px;text-transform:uppercase;font-weight:700}
.up-progress{grid-column:1/-1;color:var(--muted);font-size:13px}

/* ── Gen ── */
/* ── Choix marché (Génération) ── */
.market-pick{display:flex;align-items:center;gap:18px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 20px;margin-bottom:18px}
.market-pick-label{font-weight:700;font-size:15px}
.market-pick-btns{display:flex;gap:12px;flex-wrap:wrap}
.mkbig{background:var(--bg);border:2px solid var(--line);color:var(--muted);padding:14px 30px;border-radius:12px;cursor:pointer;font-size:18px;font-weight:800;display:flex;align-items:center;gap:8px;transition:.15s}
.mkbig:hover{border-color:var(--muted2);color:var(--text)}
.mkbig.active{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 4px 14px rgba(91,140,255,.35)}
.gen-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.gen-grid .card{margin-bottom:0}
.ai-note{margin:10px 0;padding:8px 10px;background:var(--bg);border:1px solid var(--line);border-radius:9px}
.gen-results{display:flex;flex-direction:column;gap:10px;margin-top:12px;max-height:520px;overflow-y:auto}
.gen-item{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:12px}
.gen-user{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;margin-bottom:6px}
.gen-user .u{color:var(--primary);font-family:ui-monospace,monospace}
.gen-bio{color:var(--text);font-size:13px;white-space:pre-wrap}
.gen-item .gacts{display:flex;gap:6px;margin-top:8px}
@media (max-width:820px){.gen-grid{grid-template-columns:1fr}.sidebar{width:64px;flex-basis:64px}.nav-item span,.brand-sub{display:none}}

/* ── OTP launcher ── */
.otp-launch{border-color:#2a6bd6;background:linear-gradient(180deg,rgba(43,107,214,.10),transparent)}
.otp-bots{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}
.btn-tg{
  display:flex;align-items:center;gap:12px;text-decoration:none;
  background:#229ED9;border:1px solid #229ED9;color:#fff;padding:12px 16px;border-radius:11px;
  font-weight:700;font-size:14px;transition:.15s;
}
.btn-tg:hover{background:#1b86ba}
.btn-tg .tg-ic{font-size:20px}
.btn-tg small{display:block;font-weight:500;opacity:.85;font-size:11px}
.btn-tg.alt{background:transparent;color:var(--text);border-color:var(--line)}
.btn-tg.alt:hover{border-color:#229ED9;color:#fff;background:#229ED9}

/* ── OTP louer (in-site) ── */
.otp-rent{border-color:#7a5bd6;background:linear-gradient(180deg,rgba(122,91,214,.10),transparent)}
.otp-conn{font-size:11px;font-weight:600;margin-left:8px}
.otp-conn.ok{color:var(--ok)}
.otp-conn.err{color:var(--danger)}
#otp-balance-box{margin:8px 0}
#otp-rent-panel{margin-top:12px}
.rental{background:var(--bg);border:1px solid var(--line);border-radius:11px;padding:14px}
.rental-top{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.rental-phone{font-size:17px;font-weight:700;font-family:ui-monospace,Menlo,Consolas,monospace;display:flex;align-items:center;gap:8px}
.rental-code{min-width:160px;text-align:right}
.rental-code .spin{color:var(--warn);font-size:13px}
.code-big{font-size:26px;font-weight:800;letter-spacing:3px;color:var(--ok);font-family:ui-monospace,Menlo,Consolas,monospace}
.rental-acts{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}

/* ── Intro 3 moyens ── */
.intro-card{border-color:#2a6bd6;background:linear-gradient(180deg,rgba(43,107,214,.10),transparent)}
.intro-list{margin:8px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.intro-list li{font-size:13.5px;line-height:1.5}

/* ── Création de compte : méthodes (masonry 2 colonnes) ── */
.methods{column-gap:20px}
@media (min-width:1000px){.methods{column-count:2}}
.methods>.card{break-inside:avoid;-webkit-column-break-inside:avoid}
.method-head{font-weight:800;font-size:15px;display:flex;align-items:center;gap:10px;margin-bottom:6px}
.method-num{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--primary);color:#fff;font-size:13px;font-weight:800;flex:0 0 auto}
.method .submeta{margin-top:16px;font-weight:700;font-size:13px;color:var(--muted)}
.method #otp-active-list{margin-top:6px}
.tg-alt{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}
.tg-alt>summary{cursor:pointer;font-weight:600;font-size:13px;color:var(--muted)}
.tg-alt>summary:hover{color:var(--text)}
.sub-import{margin-top:8px}
.sub-import>summary{color:var(--muted);font-size:13px}

/* ── VAs ── */
.va-form{display:flex;gap:10px;flex-wrap:wrap}
.va-form .search{flex:1;min-width:220px}
.va-models{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:6px}
.va-models .chk{background:var(--bg);border:1px solid var(--line);padding:6px 10px;border-radius:8px}
.stock{margin-top:12px}
.stock-row{display:flex;justify-content:space-between;align-items:center;background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:11px 14px;margin-bottom:8px;font-size:14px}
.stock-row b{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:15px}
.stock-row b.low{color:var(--danger)}
.stock-row b.okk{color:var(--ok)}
#va-me-result{margin-top:10px}

/* ── Résultat obtention (mail / compte) ── */
.grab-result{margin-top:12px}
.grab-card{background:var(--bg);border:1px solid var(--ok);border-radius:11px;padding:14px}
.grab-label{font-size:12px;color:var(--muted);font-weight:700;margin-bottom:6px}
.grab-value{font-size:20px;font-weight:800;font-family:ui-monospace,Menlo,Consolas,monospace;color:var(--ok);word-break:break-all;margin-bottom:8px}
.grab-sub{font-size:13px;color:var(--muted);margin-bottom:8px}
.grab-line{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--line);font-size:14px}
.grab-line:last-of-type{border-bottom:0}
.grab-k{color:var(--muted);font-size:12px;font-weight:600}
.grab-v{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:700;word-break:break-all;text-align:right}
.grab-card .btn{margin-top:10px}
.grab-empty{color:var(--muted);font-size:13px;padding:8px 0}

/* ── Rapport quotidien ── */
.report-form{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 0 12px}
.fld-inline{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:8px 12px;font-size:13px}
.fld-inline .num{width:80px}
.report-pre{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:14px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;white-space:pre-wrap;margin:12px 0 10px;color:var(--text)}
@media (max-width:600px){.report-form{grid-template-columns:1fr}}

/* ── Tableau de bord contenu ── */
.inv-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.inv-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}
.inv-market{background:var(--bg);border:1px solid var(--line);border-radius:11px;padding:12px}
.inv-mk{font-weight:800;font-size:14px;margin-bottom:8px}
.inv-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.inv-row:last-child{border-bottom:0}
.inv-row b{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:16px}
.inv-low{color:var(--danger)}
.inv-ok{color:var(--ok)}
@media (max-width:600px){.inv-grid{grid-template-columns:1fr}}

/* ── Toast ── */
.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);
  background:#0b0e13;border:1px solid var(--line);color:var(--text);padding:11px 18px;border-radius:10px;
  box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:.2s;z-index:50;font-weight:600;font-size:13px;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.ok{border-color:var(--ok)}
.toast.err{border-color:var(--danger)}

/* Note de génération (statut IA) */
.gen-note{margin:8px 0 0;font-size:13px;font-weight:600;line-height:1.4;min-height:0}
.gen-note:empty{display:none}
.gen-note.ok{color:var(--ok)}
.gen-note.warn{color:var(--danger)}

/* Générateur côté VA : champ nombre plus gros */
.gen-count-lbl{font-size:16px;font-weight:700;gap:10px}
.gen-count-big{width:110px;font-size:22px;font-weight:800;text-align:center;padding:10px 8px}
.gen-help{font-size:13px;line-height:1.5;margin:10px 0 0;padding:10px 12px;border:1px dashed var(--border,#334);border-radius:10px}
/* En mode VA (non-admin), le générateur prend toute la largeur */
body:not(.is-admin) .gen-grid{grid-template-columns:1fr}

/* Badges de stock (création de compte) */
.stock-badge{margin-left:auto;font-size:12.5px;font-weight:800;padding:3px 10px;border-radius:999px;
  background:rgba(52,199,89,.12);color:var(--ok,#34c759);border:1px solid rgba(52,199,89,.35)}
.stock-badge.empty{background:rgba(255,69,58,.12);color:var(--danger,#ff453a);border-color:rgba(255,69,58,.35)}
.method-head{display:flex;align-items:center;gap:8px}
.intro-tip{margin-top:6px;padding-top:8px;border-top:1px dashed var(--border,#334)}