:root{
  --bg:#0b0b10; --card:#15151d; --text:#e7e7ea; --muted:#a7a7b0;
  --accent:#6ee7ff; --accent-2:#a78bfa; --ring:#2a2a36; --ok:#34d399;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text); background:radial-gradient(1000px 600px at 10% -10%, #111 0%, #0a0a0f 40%, #08080c 100%);
}
.container{max-width:760px; margin:auto; padding:24px}
.header h1{margin:0 0 6px; font-size:32px}
.header p{margin:0; color:var(--muted)}
.card{
  margin-top:16px; background:linear-gradient(180deg, #16161f, #14141b);
  border:1px solid var(--ring); border-radius:16px; padding:20px; box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.row{display:flex; align-items:center; gap:12px; margin-bottom:10px}
#length{flex:1}
#lengthOut{min-width:3ch; text-align:right; color:var(--accent)}
.grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:16px 0 6px;
}
.check{display:flex; align-items:center; gap:10px; padding:10px; border:1px solid var(--ring); border-radius:12px; background:#12121a}
.actions{display:flex; gap:10px; margin:14px 0}
button{
  appearance:none; border:1px solid var(--ring); background:linear-gradient(180deg,#1d1d27,#14141b);
  color:var(--text); padding:10px 14px; border-radius:12px; cursor:pointer; font-weight:600;
}
button:hover{border-color:#3a3a4a}
button#generate{border-color:transparent; background:linear-gradient(90deg,var(--accent),var(--accent-2)); color:#0a0a0f}
button.ghost{background:#12121a}
.output{display:grid; gap:6px}
#password{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--ring); background:#101018; color:var(--text); font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
#strength{color:var(--muted)}
.footer{margin-top:12px; color:var(--muted); font-size:14px}
@media (max-width:520px){ .grid{grid-template-columns:1fr} }