:root{
  --bg:#0b0d17; --glow1:#561b5e; --glow2:#62145f;
  --card:rgba(255,255,255,.05); --stroke:rgba(255,255,255,.1);
  --txt:#e6e9ef; --muted:#9aa4b2; --brand:#fc5cff;
  --control-h:40px; /* utilisé uniquement par la page account */
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--txt)}
.bg{
  background:radial-gradient(1200px 600px at 20% -10%,var(--glow1) 0%,transparent 60%),
             radial-gradient(1200px 600px at 100% 0,var(--glow2) 0%,transparent 60%),
             var(--bg);
  background-repeat:no-repeat,no-repeat,no-repeat;
  /* keep the glow anchored to viewport so it doesn't tile while scrolling */
  background-attachment:fixed,fixed,scroll;
}
.app-shell{display:flex;min-height:100vh}
.sidebar{width:260px;padding:16px;display:flex;flex-direction:column;gap:10px;border-right:1px solid var(--stroke);position:sticky;top:0;align-self:flex-start;height:100vh}
.brand{display:flex;align-items:center;justify-content:center;gap:10px;margin:6px -34px 10px}
.brand-link{text-decoration:none;display:flex;align-items:center;justify-content:center;width:100%}
.brand-logo{display:block;height:41px;object-fit:contain;filter:drop-shadow(0 2px 8px rgba(0,0,0,.35));transition:transform .18s ease}
.brand-link:hover .brand-logo{transform:scale(1.04)}
/* Top-left logo for auth pages */
.top-logo{position:fixed;left:24px;top:16px;z-index:50;display:flex;align-items:center}
.top-logo img{height:41px;display:block;filter:drop-shadow(0 2px 8px rgba(0,0,0,.35));transition:transform .18s ease}
.top-logo:hover img{transform:scale(1.04)}
.nav{display:flex;flex-direction:column;gap:6px;overflow:auto}
.nav-group-label{color:var(--muted);font-size:12px;font-weight:700;margin:10px 8px 2px;text-transform:uppercase;letter-spacing:.08em}
.nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:var(--txt);text-decoration:none;border:1px solid transparent;transition:all .18s ease}
.nav-item:hover{background:rgba(255,255,255,.05);border-color:var(--stroke)}
.nav-item.active{background:rgba(230,92,255,.18);border-color:rgba(231,92,255,.45);box-shadow:inset 0 0 0 1px rgba(222,92,255,.35)}
.nav-spacer{height:6px}
.upgrade-card{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid var(--stroke);text-decoration:none;color:var(--txt);transition:transform .15s ease, box-shadow .25s ease}
.upgrade-card:hover{transform:translateY(-1px);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.upgrade-card .bolt{filter:saturate(1.3)}
.upg-title{font-weight:800}
.upg-sub{color:#c7cbe0;font-size:12px}
.account-block{margin-top:auto;border-top:1px solid var(--stroke);padding-top:12px;display:flex;flex-direction:column;gap:8px}
.acct-link{display:flex;align-items:center;gap:10px;padding:10px;border-radius:12px;color:var(--txt);text-decoration:none;border:1px solid transparent}
.acct-link:hover{background:rgba(255,255,255,.04);border-color:var(--stroke)}
.acct-link.active{background:rgba(230,92,255,.18);border-color:rgba(231,92,255,.45)}
.avatar{
  width:30px;height:30px;border-radius:10px;background:rgba(255,255,255,.08);border:1px solid var(--stroke);
  display:inline-flex;align-items:center;justify-content:center;font-size:14px;
  /* AJOUT : empêche le rétrécissement, l’avatar reste carré 30×30 */
  flex: 0 0 30px;
}
.acct-name{font-weight:700}
.acct-email{color:#c7cbe0;font-size:12px}

/* AJOUT : ellipsis sans compresser l’avatar */
.acct-link .acct-meta{flex:1; min-width:0;}  /* prend le reste et autorise l’ellipsis */
.acct-email{
  display:block; max-width:100%;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* (optionnel) tronquer aussi le nom s’il déborde */
.acct-name{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

.logout{color:#c7cbe0;text-decoration:none;font-size:12px;margin-left:10px}
.content{flex:1;padding:24px}
.container{max-width:860px;margin:8vh auto;padding:24px}
.container.small{max-width:540px}
.page-center{min-height:100vh;display:grid;place-items:center;margin:0 auto}
.card{
  backdrop-filter:blur(8px);
  border-radius:20px; padding:32px;
}
h1{margin:0 0 10px;font-size:38px;line-height:1.12}
.lead{color:#c7cbe0;margin:0 0 18px}
.btn{
  display:inline-block; padding:12px 18px; border-radius:12px; border:none;
  background:linear-gradient(90deg,#7b6cff,#fc5cff); color:white; font-weight:700; text-decoration:none; cursor:pointer;
  font-family:inherit; font-size:14px; line-height:1.2
}
.btn:hover, .btn:focus{ text-decoration:none }
.btn.danger{background:linear-gradient(90deg,#4d4d4d,#4d4d4d)}
.btn.ghost{background:rgba(255,255,255,.08);border:1px solid var(--stroke)}
.note{color:var(--muted);font-size:14px;margin-top:14px}
.form label{display:block;font-weight:600;margin:12px 0 6px}
.form input{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--stroke);
  background:rgba(255,255,255,.04); color:#fff; outline:none
}
.icon{
  width:56px; height:56px; border-radius:50%;
  background:rgba(109,92,255,.15); border:1px solid rgba(109,92,255,.4);
  color:#9ea8ff; display:inline-flex; align-items:center; justify-content:center; margin-bottom:14px
}
/* Ensure full-viewport background and avoid bottom band */
.bg{min-height:100vh}

/* Account page small enhancements */
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:14px}
.kpi + .kpi{margin-top:24px}
.kpi label{display:block;color:#c7cbe0;font-size:12px;font-weight:700;margin-bottom:6px;text-transform:uppercase;letter-spacing:.06em}
.badge{display:inline-block;padding:6px 10px;border-radius:999px;border:1px solid var(--stroke);background:rgba(255,255,255,.04);font-weight:700}
.badge.plan{color:#d6d1ff;border-color:rgba(231,92,255,.45);background:rgba(109,92,255,.15)}
.badge.status{color:#c7e2c3;border-color:rgba(72,191,105,.35);background:rgba(72,191,105,.14)}
.card-footer{display:flex;justify-content:flex-end;margin-top:18px}

/* Copy row */
.copy-row{display:flex;gap:8px}
.copy-row input{
  flex:1; padding:12px 14px; border-radius:12px; border:1px solid var(--stroke);
  background:rgba(255,255,255,.04); color:#fff; outline:none;
  font-family:inherit; font-size:15px;            /* <-- fix police identifiants */
}
.kpi a{color:#fff;text-decoration:none}
.kpi a:hover{text-decoration:none}
/* Specific styling for DiCloak download link */
.kpi a.dicloak-link{color:#fc5cff}
/* equal specificity and later in source to override generic hover */
.kpi a.dicloak-link:hover{text-decoration:underline}
.kpi + .kpi{margin-top:24px}

/* Modal (styled pop-up) */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(2px);display:none;align-items:center;justify-content:center;z-index:1000;}
.modal{width:min(520px,92vw);background:rgba(12,14,22,.96);border:1px solid rgba(255,255,255,.12);border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.65);padding:20px;color:#e9ecf5}
.modal h3{margin:0 0 8px}
.modal p{margin:0 0 14px;color:#c7cbe0}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:10px}
.code-display{font-size:32px;letter-spacing:.12em;font-weight:800;padding:10px 14px;border-radius:12px;border:1px solid var(--stroke);background:rgba(255,255,255,.04);text-align:center}

/* Small inline chip */
.chip{display:inline-block;padding:6px 10px;border-radius:999px;border:1px solid var(--stroke);background:rgba(255,255,255,.06);font-size:12px;color:#cfd4e6}

/* ===========================
   Tools Access page — step text
   =========================== */
.tools-access .kpi > strong{font-size:20px;line-height:1.3}
.tools-access .kpi > strong + div{font-size:17px}

@media (max-width: 880px){
  .sidebar{position:static;height:auto;width:100%;border-right:none;border-bottom:1px solid var(--stroke)}
  .app-shell{flex-direction:column}
}
/* Onboarding video fit helpers */
.ob-video{border:1px solid var(--stroke);border-radius:16px;overflow:hidden;background:rgba(255,255,255,.04)}
.ob-video video{width:100%;height:auto;display:block}

/* Premium Value grid */
.pv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pv-card{border:1px solid var(--stroke);border-radius:16px;background:rgba(255,255,255,.03);overflow:hidden}
.pv-hero{position:relative;height:160px;background:rgba(255,255,255,.04)}
.pv-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9;filter:saturate(1.1)}
.pv-hero-tag{position:absolute;left:12px;top:10px;background:rgba(0,0,0,.55);border:1px solid var(--stroke);padding:6px 10px;border-radius:10px;font-weight:800;letter-spacing:.06em}
.pv-body{padding:14px}
.pv-title{font-weight:700;margin-bottom:10px}
.pv-meta{display:grid;grid-template-columns:repeat(3,auto);gap:16px;margin:8px 0 12px}
.pv-meta span{display:block;color:#c7cbe0;font-size:12px}
.pv-action{display:flex}

@media (max-width: 980px){.pv-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 640px){.pv-grid{grid-template-columns:1fr}}

/* ===========================
   Account page — scoped overrides
   =========================== */
.account-page .header-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin-bottom:8px;
}
.account-page .toolbar{display:flex; gap:10px; align-items:center; flex-wrap:wrap}

/* Controls height + centering only on /account */
.account-page .btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:var(--control-h); padding:0 18px; line-height:1;
}
.account-page .form input{
  height:var(--control-h); padding:0 14px; font-family:inherit; font-size:15px;
}

.account-page .input-row{display:flex;gap:10px;align-items:center}
.account-page .input-row .btn{white-space:nowrap}

.account-page .subrow{display:flex;align-items:center;gap:10px;margin-top:6px}
.account-page .current-plan .sub-label{font-size:16px;font-weight:800}
.account-page .badge.plan{color:#d6d1ff;border-color:rgba(231,92,255,.45);background:rgba(109,92,255,.15)}

/* Password spacing + toggle row */
.account-page .pw input + input{margin-top:10px}
.account-page .showpass-row{display:flex;align-items:center;gap:10px;margin-top:10px}
.account-page .showpass-label{color:#c7cbe0;font-size:13px; position:relative; top:3px}

/* Switch */
.account-page .switch{position:relative;display:inline-block;width:44px;height:24px}
.account-page .switch input{opacity:0;width:0;height:0}
.account-page .slider{
  position:absolute;cursor:pointer;inset:0;border-radius:999px;
  background:rgba(255,255,255,.14);transition:.18s ease all;
}
.account-page .slider:before{
  content:""; position:absolute; height:20px; width:20px; left:2px; top:2px;
  background:white; border-radius:50%; transition:.18s ease all; box-shadow:0 1px 4px rgba(0,0,0,.35);
}
.account-page .switch input:checked + .slider{background:linear-gradient(90deg,#7b6cff,#fc5cff); border-color:transparent;}
.account-page .switch input:checked + .slider:before{ transform:translateX(20px); }

/* Modal for account */
.account-page .modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(2px);display:none;align-items:center;justify-content:center;z-index:1000;}
.account-page .modal{width:min(520px,92vw);background:rgba(12,14,22,.96);border:1px solid rgba(255,255,255,.12);border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.65);padding:20px;color:#e9ecf5}
.account-page .modal h3{margin:0 0 8px}
.account-page .modal p{margin:0 0 14px;color:#c7cbe0}
.account-page .modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:10px}

@media (max-width: 880px){
  .account-page .toolbar{justify-content:flex-start}
  .account-page .input-row{flex-direction:column;align-items:stretch}
}

/* ===== Cancel flow (scopé à la page account) ===== */
.account-page .cancel-modal h3 { margin: 0 0 6px; }
.account-page .cancel-modal .muted { color:#c7cbe0; margin: 8px 0 12px; }
.account-page .cancel-modal .radio-list { display:grid; gap:8px; margin-top:6px; }
.account-page .cancel-modal .radio {
  display:flex; align-items:center; gap:10px;
  border:1px solid var(--stroke); background:rgba(255,255,255,.04);
  padding:10px 12px; border-radius:12px;
}
.account-page .cancel-modal .radio input { width:16px; height:16px; }
.account-page .cancel-modal .stack { display:flex; flex-direction:column; }
.account-page .cancel-modal .gap10 > * + * { margin-top:10px; }
.account-page .cancel-modal .btn-link-small {
  display:inline-block; background:transparent; border:none; padding:4px 0;
  color:#9aa4b2; font-size:12px; text-decoration:none; cursor:pointer; text-align:left;
}
.account-page .cancel-modal .ta {
  width:100%; min-height:110px; border-radius:12px; border:1px solid var(--stroke);
  background:rgba(255,255,255,.04); color:#fff; padding:10px 12px; resize:vertical; outline:none;
}
.account-page .cancel-modal .loss-list { margin: 8px 0 12px; padding-left: 18px; color:#c7cbe0; }