:root{
    --bg:#0a0a0f; --panel:#121218; --hair:rgba(255,255,255,0.07); --hair-2:rgba(255,255,255,0.10);
    --ink:#f4f2fb; --ink-2:#c9c3dd; --ink-3:#9a94b0; --ink-4:#787292;
    --vio:#8c66ff; --vio-tint:rgba(140,102,255,0.12); --ok:#3ddc97;
    /* legacy aliases kept on-palette (violet+bleu) */
    --pop:#8c66ff; --amber:#9a94b0; --amber-soft:rgba(255,255,255,0.05); --mint:#3ddc97; --mint-soft:rgba(61,220,151,0.12);
    --blue:#5fa8ff; --blue-tint:rgba(95,168,255,0.12);
  }
  html,body{height:100%}
  body{background:var(--bg);color:var(--ink);font-family:var(--vs-font)}
  .stage{position:relative;min-height:100vh;overflow:hidden;background:radial-gradient(1000px 620px at 84% -20%,rgba(122,82,255,0.14),transparent 60%),radial-gradient(760px 520px at -6% 108%,rgba(90,46,229,0.10),transparent 55%),var(--bg)}
  .stars{position:absolute;inset:0;pointer-events:none;opacity:.5;background-repeat:no-repeat;background-image:radial-gradient(1.4px 1.4px at 13% 16%,rgba(255,255,255,.7),transparent),radial-gradient(1.3px 1.3px at 81% 11%,rgba(255,255,255,.5),transparent),radial-gradient(1px 1px at 65% 34%,rgba(255,255,255,.5),transparent),radial-gradient(1px 1px at 27% 60%,rgba(196,179,255,.5),transparent),radial-gradient(1.4px 1.4px at 91% 66%,rgba(196,179,255,.55),transparent),radial-gradient(1px 1px at 9% 80%,rgba(255,255,255,.4),transparent),radial-gradient(1px 1px at 45% 86%,rgba(255,255,255,.35),transparent)}
  .wrap,.nav{position:relative;z-index:2}
  .mono{font-family:var(--vs-font-mono)}
  a{color:var(--vio)} a:hover{color:var(--vio)}

  /* ---------- top bar (v5) ---------- */
  .nav{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:20px;padding:14px 30px;background:rgba(10,10,15,0.72);backdrop-filter:blur(14px);border-bottom:1px solid var(--hair)}
  .brand{display:flex;align-items:center;gap:11px;flex-shrink:0}
  .brand .m{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#9a74ff,#6a3eef);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 6px 18px rgba(122,82,255,.4)}
  .brand .m svg{width:18px;height:18px;transform:rotate(45deg)}
  .brand b{font-size:16px;font-weight:800;letter-spacing:-0.02em}
  .menu{display:flex;align-items:center;gap:4px;margin-left:10px}
  .menu a{height:34px;padding:0 14px;display:inline-flex;align-items:center;border-radius:9px;font-size:13.5px;font-weight:500;color:var(--ink-3);transition:color .15s,background .15s}
  .menu a:hover{color:var(--ink-2)}
  .menu a.on{color:var(--ink);background:rgba(255,255,255,0.05);font-weight:600}
  .nav__sp{flex:1}
  .iconbtn{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:var(--ink-3);transition:color .15s,background .15s}
  .iconbtn:hover{color:var(--ink);background:rgba(255,255,255,0.05)}
  .iconbtn svg{width:18px;height:18px}
  .launch{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border-radius:10px;font-size:13.5px;font-weight:600;color:#fff;background:linear-gradient(135deg,#9a74ff,#6a3eef);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 6px 20px rgba(122,82,255,.38)}
  .launch svg{width:15px;height:15px}
  .launch:hover{filter:brightness(1.07)}
  .who{display:flex;align-items:center;gap:9px;height:38px;padding:0 6px;border-radius:10px;cursor:pointer;transition:background .15s}
  .who:hover{background:rgba(255,255,255,0.05)}
  .who .av{width:28px;height:28px;border-radius:8px;background:radial-gradient(circle at 30% 30%,#5fa8ff,#2a5cb8 60%,#0a2050)}
  .who .n{font-size:13px;font-weight:600;color:var(--ink-2)}
  @media(max-width:1080px){.menu{display:none}.who .n{display:none}}

  .wrap{max-width:1680px;margin:0 auto;padding:34px 40px 72px}

  /* ---------- header (v5) ---------- */
  .head{margin-bottom:26px}
  .head h1{margin:0;font-size:40px;font-weight:800;letter-spacing:-0.04em;line-height:.98}
  .head .sub{margin:9px 0 0;font-size:14px;color:var(--ink-3)}
  .head .sub b{color:var(--ink-2);font-weight:600}

  .panel{background:var(--panel);border:1px solid var(--hair);border-radius:16px}
  .card{background:var(--panel);border:1px solid var(--hair);border-radius:16px;padding:22px 24px}

  /* hairline cell strip (v5 grammar) */
  .cells{display:grid;grid-template-columns:1fr;gap:1px;background:var(--hair);border:1px solid var(--hair);border-radius:16px;overflow:hidden}
  @media(max-width:900px){.cells{grid-template-columns:1fr}}
  .cell{background:var(--panel);padding:22px 24px;display:flex;flex-direction:column;gap:14px}
  .cells--solo .cell{flex-direction:row;align-items:center;gap:16px;padding:18px 22px}
  .cells--solo .cell__top{order:-1;flex:0 0 auto}
  .cells--solo .cell__k{display:none}
  .cells--solo .cell__v{font-size:20px;letter-spacing:-0.02em}
  .cells--solo .cell__b{flex:1;min-height:0}
  .cell__top{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .cell__k{font-family:var(--vs-font-mono);font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4)}
  .cell__ic{width:34px;height:34px;border-radius:10px;flex-shrink:0;display:grid;place-items:center;background:var(--vio-tint);color:var(--vio)}
  .cell__ic svg{width:17px;height:17px}
  .cell__v{font-size:30px;font-weight:800;letter-spacing:-0.03em;line-height:1}
  .cell__v small{font-size:14px;font-weight:600;color:var(--ink-3);margin-left:5px;letter-spacing:0}
  .cell__b{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--ink-3);min-height:38px}
  .cell__b .sp{flex:1}
  .cell__lnk{font-size:12.5px;font-weight:600;color:var(--vio);background:none;border:0;padding:0;cursor:pointer;display:inline-flex;align-items:center;gap:5px}
  .cell__lnk svg{width:13px;height:13px}
  .cell__lnk:hover{color:#a98cff}
  #gbar.run .cell__ic{background:linear-gradient(135deg,#9a74ff,#6a3eef);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 4px 14px rgba(122,82,255,.3)}
  #gbar.pause .cell__ic{background:rgba(255,255,255,0.06);color:var(--ink-3)}
  #gbar .offlbl{display:none}
  #gbar.pause .onlbl{display:none}
  #gbar.pause .offlbl{display:inline}
  .gbtn{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:10px;font-size:12.5px;font-weight:600;transition:filter .12s,background .12s;white-space:nowrap;cursor:pointer}

  /* ---------- compact toolbar ---------- */
  .topbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:22px}
  .topbar .sp{flex:1}
  .acctsel{position:relative}
  .acctsel__btn{display:flex;align-items:center;gap:10px;height:44px;padding:0 13px;border-radius:12px;background:var(--panel);border:1px solid var(--hair);cursor:pointer;transition:border-color .12s,background .12s}
  .acctsel__btn:hover{border-color:var(--hair-2)}
  .acctsel__btn .av{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;font-size:10.5px;font-weight:700;color:#fff;flex-shrink:0}
  .acctsel__btn .nm{font-family:var(--vs-font-mono);font-size:12.5px;font-weight:600;color:var(--ink)}
  .acctsel__btn .st{width:7px;height:7px;border-radius:50%;background:var(--ok)}
  .acctsel__btn .st.off{background:var(--ink-4)}
  .acctsel__btn .ch{width:14px;height:14px;color:var(--ink-4);margin-left:2px;transition:transform .15s}
  .acctsel.open .acctsel__btn .ch{transform:rotate(180deg)}
  .acctsel__k{font-family:var(--vs-font-mono);font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);margin-right:2px}
  .acctsel__menu{display:none;position:absolute;top:50px;left:0;min-width:252px;z-index:40;padding:6px;border-radius:14px;background:#16161f;border:1px solid var(--hair-2);box-shadow:0 22px 50px rgba(0,0,0,.55)}
  .acctsel.open .acctsel__menu{display:block}
  .acctsel__it{display:flex;align-items:center;gap:10px;width:100%;height:40px;padding:0 10px;border-radius:9px;background:none;border:0;cursor:pointer;text-align:left;transition:background .12s}
  .acctsel__it:hover{background:rgba(255,255,255,0.05)}
  .acctsel__it.on{background:var(--vio-tint)}
  .acctsel__it .av{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;font-size:10px;font-weight:700;color:#fff;flex-shrink:0}
  .acctsel__it .nm{flex:1;font-family:var(--vs-font-mono);font-size:12.5px;font-weight:600;color:var(--ink-2)}
  .acctsel__it.on .nm{color:var(--ink)}
  .acctsel__it .st{width:7px;height:7px;border-radius:50%;background:var(--ok)}
  .acctsel__it .st.off{background:var(--ink-4)}
  .gstate{display:flex;align-items:center;gap:11px;height:44px;padding:0 8px 0 14px;border-radius:12px;background:var(--panel);border:1px solid var(--hair)}
  .gstate .k{font-family:var(--vs-font-mono);font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4)}
  .gstate .v{font-size:13px;font-weight:600;color:var(--ink)}

  /* section head (v5) */
  .sec{display:flex;align-items:center;gap:12px;margin:30px 0 14px}
  .sec h2{margin:0;font-size:16px;font-weight:700;letter-spacing:-0.02em}
  .sec .count{font-family:var(--vs-font-mono);font-size:11px;font-weight:600;color:var(--ink-3);background:rgba(255,255,255,0.04);border:1px solid var(--hair);border-radius:999px;padding:3px 10px}
  .sec .sp{flex:1}

  /* toggle switch — violet */
  .sw{width:46px;height:27px;border-radius:999px;background:rgba(255,255,255,0.07);border:1px solid var(--hair-2);position:relative;cursor:pointer;transition:background .18s,border-color .18s;flex-shrink:0}
  .sw::after{content:'';position:absolute;top:2px;left:2px;width:21px;height:21px;border-radius:50%;background:var(--ink-3);transition:transform .18s var(--vs-ease),background .18s}
  .sw.on{background:var(--vio-tint);border-color:color-mix(in oklab,var(--vio) 45%,transparent)}
  .sw.on::after{transform:translateX(19px);background:var(--vio)}

  /* ---------- global switch bar ---------- */
  .gbar{display:flex;align-items:center;gap:15px}
  .gbar__ic{width:44px;height:44px;border-radius:12px;flex-shrink:0;display:grid;place-items:center;color:#fff}
  .gbar__ic svg{width:22px;height:22px}
  .gbar.run .gbar__ic{background:linear-gradient(135deg,#9a74ff,#6a3eef);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 4px 14px rgba(122,82,255,.3)}
  .gbar.pause .gbar__ic{background:rgba(255,255,255,0.06);color:var(--ink-3)}
  .gbar__b{flex:1;min-width:0}
  .gbar__b .t{font-size:15px;font-weight:700;letter-spacing:-0.01em}
  .gbar__b .d{font-size:12.5px;color:var(--ink-3);margin-top:3px}
  .gbar__b .d b{color:var(--ink-2)}
  .gbtn{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 17px;border-radius:11px;font-size:13px;font-weight:600;transition:filter .12s,background .12s;white-space:nowrap}
  .gbtn svg{width:15px;height:15px}
  .gbtn.stop{color:var(--ink-2);background:rgba(255,255,255,0.04);border:1px solid var(--hair-2)}
  .gbtn.stop:hover{color:var(--ink);background:rgba(255,255,255,0.07)}
  .gbtn.start{color:#fff;background:linear-gradient(135deg,#9a74ff,#6a3eef);box-shadow:inset 0 1px 0 rgba(255,255,255,.24)}
  .gbtn.start:hover{filter:brightness(1.07)}

  /* ---------- accounts bar ---------- */
  .acctbar{display:flex;align-items:center;gap:15px}
  .acctbar__ic{width:44px;height:44px;border-radius:12px;flex-shrink:0;display:grid;place-items:center;color:var(--blue);background:var(--blue-tint)}
  .acctbar__ic svg{width:22px;height:22px}
  .acctbar__b{flex:1;min-width:0}
  .acctbar__b .t{font-size:15px;font-weight:700;letter-spacing:-0.01em}
  .acctbar__b .d{font-size:12.5px;color:var(--ink-3);margin-top:3px}
  .acctbar__b .d b{color:var(--ink-2)}
  .acctchips{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:16px}
  .achip{display:inline-flex;align-items:center;gap:9px;height:38px;padding:0 14px 0 6px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid var(--hair);cursor:pointer;transition:border-color .12s,background .12s}
  .achip:hover{border-color:var(--hair-2)}
  .achip.on{border-color:color-mix(in oklab,var(--vio) 40%,transparent);background:var(--vio-tint)}
  .achip .av{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;font-size:10.5px;font-weight:700;color:#fff}
  .achip .nm{font-size:12.5px;font-weight:600;color:var(--ink-2);font-family:var(--vs-font-mono)}
  .achip.on .nm{color:var(--ink)}
  .achip .st{width:7px;height:7px;border-radius:50%;background:var(--ok)}
  .achip .st.off{background:var(--ink-4)}

  /* ---------- config layout ---------- */
  /* 3 colonnes : navigation · réglages · aperçu téléphone.
     L'aperçu est masqué sous 1400px (il n'a plus la place). */
  .clayout{display:grid;grid-template-columns:236px minmax(0,1fr) 380px;gap:24px;align-items:start;margin-top:0}
  /* Panneaux SANS aperçu téléphone (hashtags, republication, sauvegardes, mémoire, modèles) :
     un mockup de conversation Vinted n'a pas de sens hors messagerie → 2 colonnes. */
  .clayout.no-phone{grid-template-columns:236px minmax(0,1fr)}
  .clayout.no-phone .phone-col{display:none}
  @media(max-width:1400px){.clayout{grid-template-columns:236px minmax(0,1fr)}.phone-col{display:none}}
  @media(max-width:1180px){.clayout{grid-template-columns:200px minmax(0,1fr)}.phone-col{display:none}}
  @media(max-width:800px){.clayout{grid-template-columns:1fr}.side{flex-direction:row;overflow-x:auto}}

  /* sidebar */
  .side{position:sticky;top:82px;display:flex;flex-direction:column;gap:2px;padding:10px;border-radius:16px;border:1px solid var(--hair);background:var(--panel)}
  .side__lbl{font-family:var(--vs-font-mono);font-size:9px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);padding:8px 12px 10px}
  .snav{display:flex;align-items:center;gap:11px;height:42px;padding:0 12px;border-radius:10px;font-size:13px;font-weight:500;color:var(--ink-2);transition:background .12s,color .12s;white-space:nowrap;text-align:left}
  .snav:hover{background:rgba(255,255,255,0.04);color:var(--ink)}
  .snav.on{background:rgba(255,255,255,0.05);color:var(--ink);font-weight:600}
  .snav .si{width:17px;height:17px;flex-shrink:0;color:var(--ink-4)}
  .snav.on .si{color:var(--vio)}
  .snav .si svg{width:100%;height:100%}
  .snav .doton{margin-left:auto;width:6px;height:6px;border-radius:50%;background:var(--ok);flex-shrink:0}

  /* panel */
  .panel.panel{min-width:0;padding:28px 32px}
  .phd{display:flex;align-items:flex-start;gap:14px;margin-bottom:24px}
  .phd__ic{width:42px;height:42px;border-radius:11px;flex-shrink:0;display:grid;place-items:center;color:var(--vio);background:var(--vio-tint)}
  .phd__ic svg{width:21px;height:21px}
  .phd__b{flex:1;min-width:0}
  .phd__b h2{margin:0;font-size:20px;font-weight:800;letter-spacing:-0.02em}
  .phd__b p{margin:4px 0 0;font-size:13px;color:var(--ink-3)}

  .block{margin-bottom:26px}
  .block__t{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:700;margin-bottom:5px}
  .block__t svg{width:15px;height:15px;color:var(--vio)}
  .block__d{font-size:12.5px;color:var(--ink-3);margin-bottom:14px;line-height:1.5}

  /* big segmented */
  .bigseg{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  @media(max-width:560px){.bigseg{grid-template-columns:1fr}}
  .bigseg button{display:flex;align-items:center;justify-content:center;gap:9px;height:52px;border-radius:12px;font-size:13.5px;font-weight:600;color:var(--ink-2);background:rgba(255,255,255,0.03);border:1px solid var(--hair);transition:all .14s}
  .bigseg button svg{width:16px;height:16px;color:var(--ink-4)}
  .bigseg button:hover{border-color:var(--hair-2);color:var(--ink)}
  .bigseg button.on{color:var(--ink);background:var(--vio-tint);border-color:color-mix(in oklab,var(--vio) 40%,transparent)}
  .bigseg button.on svg{color:var(--vio)}

  /* ton chips */
  .tonrow{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
  .tonrow .lbl{font-size:13px;color:var(--ink-3);margin-right:2px}
  .ton{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-radius:9px;font-size:12.5px;font-weight:600;color:var(--ink-2);background:rgba(255,255,255,0.03);border:1px solid var(--hair);transition:all .12s}
  .ton:hover{border-color:var(--hair-2);color:var(--ink)}
  .ton.on{color:var(--ink);background:var(--vio-tint);border-color:color-mix(in oklab,var(--vio) 40%,transparent)}
  .ton svg{width:14px;height:14px}

  /* message editor */
  .ed{border-radius:12px;border:1px solid var(--hair-2);background:rgba(255,255,255,0.02);overflow:hidden}
  .ed__bar{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--hair);flex-wrap:wrap}
  .ed__n{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;font-family:var(--vs-font-mono);font-size:12px;font-weight:700;color:var(--vio);background:var(--vio-tint)}
  .ins{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:9px;font-size:12px;font-weight:600;color:var(--ink-2);background:rgba(255,255,255,0.03);border:1px solid var(--hair);transition:background .12s,color .12s}
  .ins:hover{background:rgba(255,255,255,0.06);color:var(--ink)}
  .ins svg{width:13px;height:13px;color:var(--ink-4)}
  .ed__bar .sp{flex:1}
  .ed__count{font-family:var(--vs-font-mono);font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4)}
  .ed textarea{width:100%;min-height:148px;resize:vertical;background:none;border:0;outline:0;padding:16px;color:var(--ink);font-size:14px;line-height:1.6;font-family:inherit}
  .ed textarea::placeholder{color:var(--ink-4)}

  .savebar{display:flex;align-items:center;gap:12px;margin-top:22px}
  .btn-save{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 20px;border-radius:11px;font-size:13px;font-weight:600;color:#fff;background:linear-gradient(135deg,#9a74ff,#6a3eef);box-shadow:inset 0 1px 0 rgba(255,255,255,.24);transition:filter .12s}
  .btn-save:hover{filter:brightness(1.07)}
  .btn-save svg{width:15px;height:15px}
  .btn-reset{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px;border-radius:11px;font-size:13px;font-weight:600;color:var(--ink-2);background:rgba(255,255,255,0.04);border:1px solid var(--hair-2);transition:background .12s}
  .btn-reset:hover{background:rgba(255,255,255,0.07);color:var(--ink)}
  .btn-reset svg{width:15px;height:15px}
  .savebar .sp{flex:1}
  .savebar .hint{font-size:12px;color:var(--ink-4)}

  /* generic rows */
  .orow{display:flex;align-items:center;gap:14px;padding:16px 0;border-top:1px solid var(--hair)}
  .orow:first-child{border-top:0}
  .orow__b{flex:1;min-width:0}
  .orow__b .t{font-size:13.5px;font-weight:600}
  .orow__b .d{font-size:12.5px;color:var(--ink-3);margin-top:2px;line-height:1.45}
  .field{display:flex;align-items:center;gap:8px;height:42px;padding:0 14px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid var(--hair-2)}
  .field input{width:100%;background:none;border:0;outline:0;color:var(--ink);font-size:13.5px;font-family:inherit}
  .field.mini{width:104px;flex-shrink:0}
  .field.mini input{text-align:right;font-family:var(--vs-font-mono);font-weight:700}
  .field .unit{font-family:var(--vs-font-mono);font-size:12px;font-weight:700;color:var(--ink-4)}

  /* mail list */
  .mlist{display:flex;flex-direction:column;gap:10px}
  .mrow{display:flex;align-items:center;gap:13px;padding:14px;border-radius:12px;border:1px solid var(--hair);background:rgba(255,255,255,0.015)}
  .mrow__ic{width:38px;height:38px;border-radius:10px;flex-shrink:0;display:grid;place-items:center}
  .mrow__ic.g{background:#fff}
  .mrow__ic.g svg{width:19px;height:19px}
  .mrow__ic.v{background:var(--blue-tint);color:var(--blue);box-shadow:inset 0 0 0 1px rgba(95,168,255,0.3)}
  .mrow__ic.v svg{width:18px;height:18px}
  .mrow__b{flex:1;min-width:0}
  .mrow__b .t{font-size:13px;font-weight:600}
  .mrow__b .d{font-size:12px;color:var(--ink-3);margin-top:1px}
  .mrow .badge{flex-shrink:0}
  .mrow__x{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:var(--ink-3);transition:background .12s,color .12s;flex-shrink:0}
  .mrow__x:hover{background:var(--vs-err-soft);color:var(--vs-err)}
  .mrow__x svg{width:15px;height:15px}
  .addmail{display:flex;align-items:center;justify-content:center;gap:9px;height:48px;border-radius:12px;border:1px dashed var(--hair-2);font-size:13px;font-weight:600;color:var(--ink-2);transition:background .12s,color .12s}
  .addmail:hover{background:rgba(255,255,255,0.03);color:var(--ink)}
  .addmail svg{width:16px;height:16px}
  .badge{display:inline-flex;align-items:center;gap:5px;height:25px;padding:0 11px;border-radius:999px;font-family:var(--vs-font-mono);font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
  .badge.ok{color:var(--ok);background:var(--mint-soft);border:1px solid rgba(61,220,151,0.26)}
  .badge .d{width:5px;height:5px;border-radius:50%;background:currentColor}

  /* sauvegardes */
  .bkrow{display:flex;align-items:center;gap:13px;padding:14px;border-radius:12px;border:1px solid var(--hair)}
  .bkrow+.bkrow{margin-top:10px}
  .bkrow__ic{width:36px;height:36px;border-radius:10px;flex-shrink:0;display:grid;place-items:center;color:var(--vio);background:var(--vio-tint)}
  .bkrow__ic svg{width:16px;height:16px}
  .bkrow__b{flex:1;min-width:0}
  .bkrow__b .t{font-size:13px;font-weight:600}
  .bkrow__b .d{font-family:var(--vs-font-mono);font-size:11.5px;color:var(--ink-4);margin-top:2px}
  .ghost-sm{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 13px;border-radius:10px;font-size:12.5px;font-weight:600;color:var(--ink-2);background:rgba(255,255,255,0.03);border:1px solid var(--hair-2);transition:background .12s}
  .ghost-sm:hover{background:rgba(255,255,255,0.06);color:var(--ink)}
  .ghost-sm svg{width:14px;height:14px}

  /* ---------- phone preview (mockup d'origine, re-scopé sous .phone-col) ---------- */
  /* Variables reprises telles quelles de l'ancienne page (scope .negx). */
  .phone-col{
    --vio-soft:#9a74ff;--vio-2:#5a2ee5;
    --green:#5fd0a3;--teal:#34d6b4;--text-dim:#7a7498;
    position:sticky;top:82px;display:flex;flex-direction:column;align-items:center;gap:12px;
  }
  .phone-col .phone{width:340px;background:#050507;border-radius:46px;padding:11px;box-shadow:0 40px 90px rgba(0,0,0,.6),inset 0 0 0 1.5px #26222e,0 0 0 1px rgba(196,179,255,.08);}
  .phone-col .screen{position:relative;background:#0a0a0d;border-radius:36px;overflow:hidden;display:flex;flex-direction:column;height:600px;}
  .phone-col .statusbar{display:flex;align-items:center;justify-content:space-between;padding:14px 26px 6px;font-size:14px;font-weight:700;color:#fff;flex-shrink:0;}
  .phone-col .statusbar .sb-right{display:flex;align-items:center;gap:7px;}
  .phone-col .vhead{display:flex;align-items:center;gap:14px;padding:8px 18px 14px;border-bottom:1px solid rgba(255,255,255,.07);flex-shrink:0;}
  .phone-col .vhead .vh-name{flex:1;font-size:16px;font-weight:800;color:#fff;letter-spacing:-.01em;}
  .phone-col .vhead .vh-ic{color:#b9b4c9;display:inline-flex;}
  .phone-col .vitem{display:flex;align-items:center;gap:13px;padding:13px 18px;flex-shrink:0;}
  .phone-col .vitem .vthumb{width:48px;height:48px;border-radius:10px;background:#26222e;display:inline-flex;align-items:center;justify-content:center;color:#6b6580;flex-shrink:0;}
  .phone-col .vitem .vname{font-size:14px;font-weight:600;color:#e9e7f0;line-height:1.3;}
  .phone-col .vitem .vprice{font-size:17px;font-weight:900;color:#fff;margin-top:2px;}
  .phone-col .vbtns{display:flex;gap:11px;padding:4px 18px 14px;flex-shrink:0;}
  .phone-col .vbtn{flex:1;height:46px;border-radius:9px;font-size:14.5px;font-weight:800;cursor:pointer;border:0;display:inline-flex;align-items:center;justify-content:center;letter-spacing:-.01em;}
  .phone-col .vbtn.ghost{background:#1a1820;border:1px solid #2e2a38;color:#fff;}
  .phone-col .vbtn.buy{background:linear-gradient(180deg,var(--vio-soft),var(--vio-2));color:#fff;}
  .phone-col .vfeed{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:5px;padding:12px 16px 8px;background:#0a0a0d;}
  .phone-col .vfeed::-webkit-scrollbar{width:6px;}
  .phone-col .vfeed::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:99px;}
  .phone-col .voffer{max-width:84%;border-radius:14px;padding:12px 15px;font-size:13.5px;line-height:1.5;color:#e9e7f0;white-space:pre-wrap;word-break:break-word;}
  .phone-col .voffer.buyer{align-self:flex-start;background:#1a1820;}
  .phone-col .voffer.bot{align-self:flex-end;background:#0c1f1c;border:1.5px solid #1f8e78;box-shadow:0 0 0 1px rgba(52,214,180,.12);}
  .phone-col .voffer.accept{align-self:flex-end;background:#0c1f1c;border:1.5px solid var(--green);box-shadow:0 0 0 1px rgba(95,208,163,.14);}
  .phone-col .voffer .vo-tag{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:800;color:var(--teal);margin-bottom:6px;}
  .phone-col .voffer .vo-tag svg{width:14px;height:14px;flex-shrink:0;}
  .phone-col .voffer.accept .vo-tag{color:var(--green);}
  .phone-col .voffer .vo-top{display:flex;align-items:baseline;gap:9px;}
  .phone-col .voffer .vo-amt{font-size:19px;font-weight:900;color:#fff;letter-spacing:-.01em;}
  .phone-col .voffer .vo-strike{font-size:13px;color:#6b6580;text-decoration:line-through;font-weight:600;}
  .phone-col .vo-time{font-size:11.5px;color:#7c7790;margin:1px 2px 6px;}
  .phone-col .vo-time.r{align-self:flex-end;}
  .phone-col .vo-time.l{align-self:flex-start;}
  .phone-col .vsold{align-self:stretch;background:#15131c;border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:14px 16px;margin-top:6px;}
  .phone-col .vsold .vs-t{font-size:13.5px;font-weight:800;color:#fff;margin-bottom:6px;}
  .phone-col .vsold .vs-d{font-size:12.5px;color:#9b96ab;line-height:1.5;}
  .phone-col .vinput{display:flex;align-items:center;gap:12px;padding:12px 16px 16px;border-top:1px solid rgba(255,255,255,.07);flex-shrink:0;}
  .phone-col .vinput .vi-ic{color:#b9b4c9;display:inline-flex;flex-shrink:0;}
  .phone-col .vinput .vi-box{flex:1;height:40px;border-radius:999px;background:#1a1820;border:1px solid #2e2a38;display:flex;align-items:center;padding:0 16px;font-size:13.5px;color:#6b6580;}
  .phone-col .preview-cap{text-align:center;font-size:12px;color:var(--text-dim);font-weight:500;}
  .phone-col .preview-cap b{color:var(--vio-soft);}

  /* ---------- toast ---------- */
  .toast-wrap{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:200;align-items:center;pointer-events:none}
  .toast{display:flex;align-items:center;gap:9px;background:#1c1c26;border:1px solid var(--hair-2);border-radius:999px;padding:10px 16px 10px 12px;box-shadow:0 16px 40px rgba(0,0,0,.5);font-size:13px;font-weight:500;color:var(--ink);animation:tin .3s var(--vs-ease-out)}
  .toast .ti{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--vio-tint);color:var(--vio);flex-shrink:0}
  .toast .ti svg{width:12px;height:12px}
  @keyframes tin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}