:root{
      --bg:#0f1724;
      --card:#0b1220;
      --accent:#7c3aed;
      --muted:#94a3b8;
      --success:#10b981;
      --danger:#ef4444;
      --glass: rgba(255,255,255,0.03);
      font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      min-height:100vh;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      background:linear-gradient(160deg,#071027 0%, #07243a 60%);
      color:#e6eef8;
      padding:24px;
    }
    .card{
      width:100%;
      max-width:640px;
      background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
      border-radius:12px;
      padding:20px;
      box-shadow: 0 6px 30px rgba(2,6,23,0.6);
      border:1px solid rgba(255,255,255,0.04);
    }
    h1{margin:0 0 8px 0; font-size:20px}
    p.lead{margin:0 0 18px 0; color:var(--muted); font-size:13px}
    .output{
      display:flex;
      gap:8px;
      align-items:center;
      margin-bottom:12px;
    }
    .password-box{
      flex:1;
      background:var(--glass);
      border-radius:8px;
      padding:12px 14px;
      font-family: "Courier New", monospace;
      font-size:16px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      color:#eaf2ff;
      overflow:hidden; /* cache débordement visuel */
    }
    /* zone de texte du mot de passe : scroll horizontal si trop long */
    .password-text{
      user-select:all;
      overflow-x:auto;      /* scroll horizontal si nécessaire */
      overflow-y:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
      padding-right:8px;
      min-width:0; /* important pour flexbox */
      -webkit-overflow-scrolling: touch;
      outline: none;
    }
    .password-text[aria-hidden="true"]{
      pointer-events:none;
    }
    /* scrollbar personnalisée (optionnelle) */
    .password-text::-webkit-scrollbar { height:6px; }
    .password-text::-webkit-scrollbar-track { background: transparent; }
    .password-text::-webkit-scrollbar-thumb {
      background: rgba(124,58,237,0.28);
      border-radius: 3px;
      border: 1px solid rgba(255,255,255,0.02);
    }

    button, .btn{
      background:linear-gradient(180deg,var(--accent), #5b21b6);
      color:white;
      border:0;
      padding:8px 12px;
      border-radius:8px;
      cursor:pointer;
      font-weight:600;
      transition:transform .08s ease, box-shadow .08s;
      box-shadow: 0 6px 18px rgba(124,58,237,0.18);
    }
    button.secondary{
      background:transparent;
      border:1px solid rgba(255,255,255,0.06);
      color:var(--muted);
      box-shadow:none;
      font-weight:600;
    }
    button:active{transform:translateY(1px)}
    .controls{
      display:grid;
      grid-template-columns: 1fr 140px;
      gap:12px;
      align-items:center;
      margin-bottom:12px;
    }
    label.range-label{font-size:13px; color:var(--muted)}
    input[type=range]{
      width:100%;
      appearance:none;
      height:6px;
      background:linear-gradient(90deg,var(--accent), #4f46e5);
      border-radius:6px;
      outline:none;
    }
    .options{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      margin-bottom:12px;
    }
    .option{
      display:flex;
      gap:8px;
      align-items:center;
      background:rgba(255,255,255,0.02);
      padding:8px 10px;
      border-radius:8px;
      font-size:13px;
    }
    .strength{
      height:10px;
      background:rgba(255,255,255,0.04);
      border-radius:6px;
      overflow:hidden;
      margin-top:6px;
    }
    .strength > i{
      display:block;
      height:100%;
      width:0%;
      background:linear-gradient(90deg,var(--danger), var(--accent));
      transition:width .25s ease, background .25s;
    }
    .meta{
      display:flex;
      justify-content:space-between;
      align-items:center;
      color:var(--muted);
      font-size:13px;
      margin-top:10px;
    }
    .copy-note{font-size:12px; color:var(--muted)}
    footer{
      width:100%;
      max-width:640px;
      padding:12px 0;
      color: var(--muted);
      font-size:12px;
      text-align:center;
      margin-top:16px;
    }
    @media (max-width:700px){
      .controls{grid-template-columns:1fr 120px}
      .card{padding:16px}
    }
    @media (max-width:520px){
      .controls{grid-template-columns:1fr 100px}
      .password-box{padding:10px}
    }
.privacy-note {
  margin-top: 1.5em;
  font-size: 0.9em;
  color: #666;
  text-align: center;
  background: rgba(0, 0, 0, 0.05);
  padding: 0.5em;
  border-radius: 6px;
}