.password-shell { min-height: 100vh; }
.password-hero { display: grid; grid-template-columns: 1.35fr .65fr; gap: 4rem; align-items: end; padding: 7rem 3rem 3rem; }
.password-hero h1 { margin: .35rem 0 1rem; font-size: clamp(3.4rem, 8vw, 7.4rem); letter-spacing: -.075em; line-height: .88; }
.password-hero .intro { max-width: 46rem; }
.privacy-note { display: flex; gap: 1rem; align-items: flex-start; border: 1px solid var(--line); background: var(--panel); border-radius: 1.5rem; padding: 1.35rem; }
.privacy-note > span { color: var(--accent); font-size: 2rem; }
.privacy-note strong, .privacy-note span { display: block; }
.privacy-note div span { margin-top: .35rem; color: var(--muted); font-size: .92rem; line-height: 1.55; }
.generator-card { max-width: 72rem; margin: 0 auto 5rem; padding: 2.2rem; border: 1px solid var(--line); border-radius: 2rem; background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018)); box-shadow: 0 2rem 6rem rgba(0,0,0,.28); }
.password-output-wrap { display: grid; grid-template-columns: 1fr auto; gap: .8rem; }
#password-output { min-width: 0; overflow-wrap: anywhere; min-height: 5.6rem; display: flex; align-items: center; padding: 1.25rem 1.5rem; border-radius: 1.2rem; background: #080b09; border: 1px solid var(--line); color: #f7f8f2; font: 600 clamp(1.15rem, 3vw, 2rem)/1.35 ui-monospace, SFMono-Regular, Consolas, monospace; }
#copy-button, .generate-button { border: 0; border-radius: 1.1rem; font-weight: 800; cursor: pointer; }
#copy-button { min-width: 6rem; padding: 0 1.2rem; color: #11150d; background: var(--accent); }
#copy-button:disabled { opacity: .4; cursor: default; }
.strength-row { display: grid; grid-template-columns: 7rem 1fr 5rem; gap: 1rem; align-items: center; color: var(--muted); font-size: .85rem; margin: 1rem .25rem 2rem; }
.strength-track { height: .35rem; border-radius: 1rem; background: rgba(255,255,255,.08); overflow: hidden; }
.strength-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--accent); transition: width .25s ease, background .25s ease; }
.generator-controls { display: grid; gap: 1.5rem; }
.length-control > span { display: flex; justify-content: space-between; margin-bottom: .8rem; font-weight: 700; }
input[type="range"] { width: 100%; accent-color: var(--accent); }
fieldset { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; }
legend { font-weight: 700; margin-bottom: .8rem; }
fieldset label { display: grid; grid-template-columns: auto 1fr; gap: .15rem .7rem; align-items: center; border: 1px solid var(--line); border-radius: 1rem; padding: 1rem; cursor: pointer; }
fieldset code { grid-column: 2; color: var(--muted); }
input[type="checkbox"] { width: 1.15rem; height: 1.15rem; accent-color: var(--accent); }
.avoid-control { display: flex; gap: .8rem; align-items: flex-start; }
.avoid-control span, .avoid-control small { display: block; }
.avoid-control small { color: var(--muted); margin-top: .2rem; }
.generate-button { padding: 1.15rem; background: var(--accent); color: #10140d; font-size: 1rem; }
.generate-button:hover, #copy-button:hover { filter: brightness(1.08); }
@media (max-width: 760px) { .password-hero { grid-template-columns: 1fr; gap: 2rem; padding: 4rem 1rem 2rem; } .generator-card { padding: 1rem; border-radius: 1.3rem; } fieldset { grid-template-columns: 1fr 1fr; } .password-output-wrap { grid-template-columns: 1fr; } #copy-button { min-height: 3rem; } }