:root {
  --bg-primary: #0a0e27;
  --bg-secondary: #111638;
  --bg-card: #161b40;
  --accent: #00e676;
  --accent-dim: #00c853;
  --text: #e0e0e0;
  --text-muted: #8890b5;
  --border: #252a54;
  --danger: #ff5252;
  --warning: #ffd740;
  --success: #00e676;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Segoe UI',system-ui,sans-serif; background:var(--bg-primary); color:var(--text); min-height:100vh; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }

/* NAV */
nav { background:var(--bg-secondary); border-bottom:1px solid var(--border); padding:0 2rem; display:flex; align-items:center; justify-content:space-between; height:64px; position:sticky; top:0; z-index:100; }
.nav-brand { font-size:1.4rem; font-weight:700; color:#fff; display:flex; align-items:center; gap:.5rem; }
.nav-brand span { color:var(--accent); }
.nav-links { display:flex; gap:1.5rem; align-items:center; }
.nav-links a { color:var(--text-muted); font-size:.95rem; transition:color .2s; }
.nav-links a:hover, .nav-links a.active { color:var(--accent); text-decoration:none; }
#langToggle { background:var(--border); color:var(--text); border:none; padding:.4rem .8rem; border-radius:6px; cursor:pointer; font-size:.85rem; }

/* HERO */
.hero { text-align:center; padding:5rem 1rem 3rem; }
.hero h1 { font-size:3rem; color:#fff; margin-bottom:1rem; }
.hero h1 span { color:var(--accent); }
.hero p { font-size:1.2rem; color:var(--text-muted); max-width:600px; margin:0 auto 2rem; }
.hero-buttons { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.btn { display:inline-flex; align-items:center; gap:.5rem; padding:.75rem 1.8rem; border-radius:8px; font-size:1rem; font-weight:600; border:none; cursor:pointer; transition:all .2s; }
.btn-primary { background:var(--accent); color:#0a0e27; }
.btn-primary:hover { background:var(--accent-dim); text-decoration:none; }
.btn-outline { background:transparent; color:var(--accent); border:2px solid var(--accent); }
.btn-outline:hover { background:rgba(0,230,118,.1); text-decoration:none; }

/* FEATURES */
.features { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.5rem; max-width:1000px; margin:0 auto 4rem; padding:0 1rem; }
.feature-card { background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:2rem; text-align:center; transition:transform .2s,border-color .2s; }
.feature-card:hover { transform:translateY(-4px); border-color:var(--accent); }
.feature-icon { font-size:2.5rem; margin-bottom:1rem; }
.feature-card h3 { color:#fff; margin-bottom:.5rem; }
.feature-card p { color:var(--text-muted); font-size:.9rem; }

/* MAIN CONTAINER */
.container { max-width:800px; margin:0 auto; padding:2rem 1rem 4rem; }
.container h1 { color:#fff; font-size:2rem; margin-bottom:.5rem; text-align:center; }
.container .subtitle { color:var(--text-muted); text-align:center; margin-bottom:2rem; }

/* CARD */
.card { background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:2rem; margin-bottom:1.5rem; }
.card h2 { color:#fff; font-size:1.2rem; margin-bottom:1rem; }

/* FORM ELEMENTS */
label { display:block; color:var(--text-muted); font-size:.9rem; margin-bottom:.4rem; }
input[type=range] { width:100%; accent-color:var(--accent); }
input[type=text], input[type=password], input[type=number] { width:100%; padding:.7rem 1rem; background:var(--bg-primary); border:1px solid var(--border); border-radius:8px; color:#fff; font-size:1rem; outline:none; }
input:focus { border-color:var(--accent); }
.checkbox-group { display:flex; flex-wrap:wrap; gap:1rem; margin:1rem 0; }
.checkbox-group label { display:flex; align-items:center; gap:.4rem; cursor:pointer; color:var(--text); font-size:.95rem; }
input[type=checkbox] { accent-color:var(--accent); width:18px; height:18px; }

/* PASSWORD DISPLAY */
.password-display { background:var(--bg-primary); border:1px solid var(--border); border-radius:8px; padding:1rem; font-family:'Courier New',monospace; font-size:1.1rem; word-break:break-all; color:var(--accent); min-height:48px; display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin:1rem 0; }
.password-display .pw-text { flex:1; user-select:all; }
.copy-btn { background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:1.2rem; padding:.3rem; transition:color .2s; }
.copy-btn:hover { color:var(--accent); }

/* BATCH */
.batch-list { display:flex; flex-direction:column; gap:.5rem; margin-top:1rem; }
.batch-item { display:flex; align-items:center; gap:.5rem; background:var(--bg-primary); border:1px solid var(--border); border-radius:8px; padding:.6rem 1rem; font-family:monospace; font-size:.95rem; color:var(--accent); word-break:break-all; }
.batch-item span { flex:1; user-select:all; }

/* STRENGTH BAR */
.strength-bar-container { height:12px; background:var(--bg-primary); border-radius:6px; overflow:hidden; margin:1rem 0; }
.strength-bar { height:100%; border-radius:6px; transition:width .4s,background .4s; width:0; }
.strength-label { font-size:1.1rem; font-weight:700; text-align:center; margin:.5rem 0; }
.strength-details { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; margin-top:1rem; }
.detail-item { background:var(--bg-primary); border-radius:8px; padding:.8rem; }
.detail-item .label { font-size:.8rem; color:var(--text-muted); }
.detail-item .value { font-size:1rem; color:#fff; font-weight:600; margin-top:.2rem; }

/* FOOTER */
footer { text-align:center; padding:2rem 1rem; border-top:1px solid var(--border); color:var(--text-muted); font-size:.85rem; margin-top:2rem; }
footer .donate { margin:1rem 0; }
footer .donate code { background:var(--bg-card); padding:.3rem .6rem; border-radius:4px; font-size:.75rem; color:var(--accent); word-break:break-all; }

/* RESPONSIVE */
@media(max-width:600px) {
  .hero h1 { font-size:2rem; }
  nav { padding:0 1rem; }
  .nav-links { gap:.8rem; }
  .strength-details { grid-template-columns:1fr; }
}