:root{--bg:#0a0e16;--bg-grad:radial-gradient(1100px 600px at 50% -15%, #16203a 0%, #0a0e16 60%);--surface:#121826;--surface-2:#1a2233;--surface-3:#232c40;--border:#283143;--border-soft:#1f2839;--text:#e7ebf3;--text-dim:#9aa4b8;--text-mute:#61708d;--accent:#38bdf8;--accent-2:#0ea5e9;--ok:#22c55e;--warn:#f59e0b;--danger:#ef4444;--mono:"SF Mono", ui-monospace, "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;--sans:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--radius:16px;--radius-sm:10px;--shadow:0 18px 50px -20px #000000b3;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:var(--sans);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}button,input{font-family:inherit;font-size:inherit;color:inherit}h1,h2,p{margin:0}.app{background:var(--bg-grad);flex-direction:column;align-items:center;gap:28px;min-height:100%;padding:48px 20px 32px;display:flex}.hero{text-align:center;max-width:560px}.hero h1{letter-spacing:-.02em;font-size:30px;font-weight:800}.hero p{color:var(--text-dim);margin-top:10px;font-size:15px}.layout{grid-template-columns:1.15fr .85fr;align-items:start;gap:20px;width:100%;max-width:940px;display:grid}.card{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius);box-shadow:var(--shadow);flex-direction:column;gap:18px;padding:22px;display:flex}.card__title{font-size:16px;font-weight:700}.field{flex-direction:column;gap:8px;display:flex}.field__label{text-transform:uppercase;letter-spacing:.06em;color:var(--text-mute);font-size:12px;font-weight:700}.pw-input{background:var(--surface-2);border:1.5px solid var(--border);border-radius:var(--radius-sm);align-items:center;transition:border-color .15s,box-shadow .15s;display:flex}.pw-input:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent)}.pw-input input{letter-spacing:.02em;background:0 0;border:none;outline:none;flex:1;padding:12px 14px;font-size:16px}.pw-input__toggle{cursor:pointer;opacity:.8;background:0 0;border:none;padding:0 12px;font-size:17px}.pw-input__toggle:hover{opacity:1}.meter{flex-direction:column;gap:8px;display:flex}.meter__bars{gap:6px;display:flex}.meter__seg{background:var(--surface-3);border-radius:999px;flex:1;height:7px;transition:background .35s}.meter__row{justify-content:space-between;align-items:baseline;display:flex}.meter__label{color:var(--text-dim);font-size:15px;font-weight:800}.meter__meta{color:var(--text-mute);font-variant-numeric:tabular-nums;font-size:12px}.meter__crack{color:var(--text-dim);font-size:13px}.meter__crack strong{color:var(--text)}.reqs{grid-template-columns:1fr 1fr;gap:8px 16px;margin:0;padding:0;list-style:none;display:grid}.req{color:var(--text-mute);align-items:center;gap:8px;font-size:13.5px;transition:color .15s;display:flex}.req__icon{background:var(--surface-3);width:18px;height:18px;color:var(--text-mute);border-radius:50%;flex-shrink:0;place-items:center;font-size:11px;transition:background .15s,color .15s;display:grid}.req.is-pass{color:var(--text)}.req.is-pass .req__icon{background:var(--ok);color:#04210f;font-weight:800}.feedback{background:var(--surface-2);border:1px solid var(--border-soft);border-radius:var(--radius-sm);flex-direction:column;gap:6px;padding:12px 14px;display:flex}.feedback__warn{color:#fca5a5;font-size:13px}.feedback__tip{color:var(--text-dim);font-size:13px}.confirm{margin-top:-6px;font-size:13px;font-weight:600}.confirm--match{color:var(--ok)}.confirm--mismatch{color:#fca5a5}.btn{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-2);cursor:pointer;padding:11px 16px;font-weight:700;transition:background .15s,transform 50ms,opacity .15s}.btn:active{transform:translateY(1px)}.btn--primary{background:var(--accent);border-color:var(--accent);color:#042233}.btn--primary:hover{background:var(--accent-2)}.btn--primary:disabled{opacity:.45;cursor:not-allowed}.icon-btn{border:1px solid var(--border);background:var(--surface-3);color:var(--text);border-radius:var(--radius-sm);cursor:pointer;place-items:center;width:38px;height:38px;font-size:17px;transition:background .15s,border-color .15s;display:grid}.icon-btn:hover{border-color:var(--accent);color:var(--accent)}.gen__output{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);align-items:center;gap:10px;padding:12px 12px 12px 16px;display:flex}.gen__pw{font-family:var(--mono);letter-spacing:.04em;word-break:break-all;color:var(--accent);flex:1;font-size:17px}.gen__actions{gap:8px;display:flex}.gen__length{color:var(--text-dim);align-items:center;gap:12px;font-size:13px;font-weight:600;display:flex}.gen__len-val{font-variant-numeric:tabular-nums;color:var(--text);text-align:right;min-width:26px;margin-left:auto;font-weight:800}input[type=range]{appearance:none;background:var(--surface-3);border-radius:999px;outline:none;flex:1;height:6px}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--accent);cursor:pointer;border:3px solid var(--surface);width:18px;height:18px;box-shadow:0 0 0 1px var(--accent);border-radius:50%}input[type=range]::-moz-range-thumb{background:var(--accent);cursor:pointer;border:3px solid var(--surface);border-radius:50%;width:16px;height:16px}.gen__toggles{flex-wrap:wrap;gap:8px;display:flex}.toggle{border:1px solid var(--border);color:var(--text-dim);cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:999px;align-items:center;gap:6px;padding:7px 12px;font-size:13px;font-weight:600;transition:background .15s,border-color .15s,color .15s;display:inline-flex}.toggle input{display:none}.toggle.is-on{background:color-mix(in srgb, var(--accent) 18%, transparent);border-color:var(--accent);color:var(--accent)}.gen__use{margin-top:2px}.foot{color:var(--text-mute);text-align:center;font-size:12.5px}@media (width<=760px){.layout,.reqs{grid-template-columns:1fr}.app{padding:28px 16px}}