:root{--bg: #0f1117;--surface: #1a1d27;--surface-raised: #22263a;--border: #2e3349;--text: #e8eaf0;--text-muted: #8b90a7;--text-dim: #565c7a;--accent: #4f7ef8;--accent-hover: #6690ff;--s1: #ef4444;--s2: #f97316;--s3: #eab308;--s4: #22c55e;--s5: #06b6d4;--fb-bad: #ef4444;--fb-warn: #fb923c;--fb-ok: #22c55e;--fb-great: #06b6d4;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;--mono: "SF Mono", "Fira Code", "Cascadia Code", "Consolas", monospace;--ease: .2s ease}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}[hidden]{display:none!important}body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:15px;line-height:1.5;min-height:100vh;display:flex;justify-content:center;padding:3rem 1rem 5rem}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}#app{width:100%;max-width:520px}.app-header{text-align:center;margin-bottom:1.75rem}.app-logo-link{display:inline-flex;align-items:center;gap:.625rem;text-decoration:none;color:inherit;margin-bottom:.25rem}.app-logo-link:hover{text-decoration:none}.app-logo{width:36px;height:36px;flex-shrink:0}.app-header h1{font-size:2rem;font-weight:700;letter-spacing:-.03em;color:var(--text)}.app-header p{color:var(--text-muted);font-size:.875rem}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:2rem;display:flex;flex-direction:column;gap:1.5rem}.input-wrap{position:relative}#pwd-input{width:100%;background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text);font-family:var(--mono);font-size:1rem;padding:.8125rem 5.5rem .8125rem 1rem;outline:none;transition:border-color var(--ease),box-shadow var(--ease);-webkit-text-security:disc}#pwd-input[type=text]{-webkit-text-security:none}#pwd-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #4f7ef82e}#pwd-input::placeholder{color:var(--text-dim);font-family:var(--font)}.input-actions{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);display:flex;gap:2px}.icon-btn{background:none;border:none;border-radius:var(--radius-sm);color:var(--text-muted);cursor:pointer;padding:.375rem;display:flex;align-items:center;justify-content:center;transition:color var(--ease),background var(--ease);line-height:0}.icon-btn:hover{color:var(--text);background:#ffffff0f}.icon-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.icon-btn svg{width:18px;height:18px}.btn--copied{color:var(--fb-ok)!important}.strength-bar{display:flex;align-items:center;gap:.875rem}.strength-segments{display:flex;flex:1;gap:5px}.segment{height:5px;flex:1;border-radius:3px;background:var(--border);transition:background var(--ease)}.strength-bar[data-level="1"] .segment:nth-child(-n+1){background:var(--s1)}.strength-bar[data-level="2"] .segment:nth-child(-n+2){background:var(--s2)}.strength-bar[data-level="3"] .segment:nth-child(-n+3){background:var(--s3)}.strength-bar[data-level="4"] .segment:nth-child(-n+4){background:var(--s4)}.strength-bar[data-level="5"] .segment:nth-child(-n+5){background:var(--s5)}.strength-label{font-size:.8125rem;font-weight:600;min-width:6.5rem;text-align:right;color:var(--text-dim);transition:color var(--ease);white-space:nowrap}.strength-label[data-level="1"]{color:var(--s1)}.strength-label[data-level="2"]{color:var(--s2)}.strength-label[data-level="3"]{color:var(--s3)}.strength-label[data-level="4"]{color:var(--s4)}.strength-label[data-level="5"]{color:var(--s5)}.feedback-list{list-style:none;display:flex;flex-direction:column;gap:.5rem;min-height:0}.feedback-list:empty{display:none}.feedback-item{display:flex;align-items:flex-start;gap:.5rem;font-size:.875rem;line-height:1.4}.fi-icon{flex-shrink:0;margin-top:1px;line-height:0}.fi-icon svg{width:15px;height:15px}.fi-text{color:var(--text-muted)}.feedback-item--bad .fi-icon{color:var(--fb-bad)}.feedback-item--warn .fi-icon{color:var(--fb-warn)}.feedback-item--ok .fi-icon{color:var(--fb-ok)}.feedback-item--great .fi-icon{color:var(--fb-great)}.feedback-item--bad .fi-text{color:#fca5a5}.feedback-item--warn .fi-text{color:#fdba74}.feedback-item--ok .fi-text{color:#86efac}.feedback-item--great .fi-text{color:#67e8f9}.divider{display:flex;align-items:center;gap:.75rem;color:var(--text-dim);font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em}.divider:before,.divider:after{content:"";flex:1;height:1px;background:var(--border)}.generator-section{display:flex;flex-direction:column;gap:1rem}.gen-length-row{display:flex;align-items:center;gap:1rem}.gen-length-row label{font-size:.875rem;color:var(--text-muted);font-weight:500;white-space:nowrap;min-width:7.5rem}#gen-length-display{color:var(--text);font-weight:600}.gen-slider{flex:1;-webkit-appearance:none;appearance:none;height:4px;background:var(--border);border-radius:999px;outline:none;cursor:pointer}.gen-slider::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid var(--surface);transition:transform var(--ease),background var(--ease)}.gen-slider::-webkit-slider-thumb:hover{transform:scale(1.15);background:var(--accent-hover)}.gen-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid var(--surface)}.gen-chip-rows{display:flex;flex-direction:column;gap:.5rem}.gen-chips{display:flex;gap:.5rem;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}.gen-chips::-webkit-scrollbar{display:none}.gen-chips--modes{flex-wrap:nowrap}.chip{background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text-muted);cursor:pointer;font-family:var(--font);font-size:.8125rem;font-weight:500;padding:.375rem .9375rem;transition:background var(--ease),border-color var(--ease),color var(--ease),opacity var(--ease);user-select:none}.chip:hover{border-color:var(--text-dim);color:var(--text)}.chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.chip--active{background:#4f7ef826;border-color:var(--accent);color:var(--text)}.chip--dimmed{opacity:.35;pointer-events:none}@keyframes chip-shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}.chip--shake{animation:chip-shake .3s ease}#btn-generate{align-items:center;background:var(--accent);border:none;border-radius:var(--radius-md);color:#fff;cursor:pointer;display:flex;font-family:var(--font);font-size:.9375rem;font-weight:600;gap:.5rem;justify-content:center;padding:.8125rem 1.25rem;transition:background var(--ease),transform var(--ease);width:100%}#btn-generate:hover{background:var(--accent-hover)}#btn-generate:active{transform:scale(.98)}#btn-generate:focus-visible{outline:2px solid var(--accent-hover);outline-offset:3px}#btn-generate svg{width:17px;height:17px;flex-shrink:0}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.btn--spinning svg{animation:spin .5s ease}.pattern-map{display:flex;flex-direction:column;gap:.5rem;margin-top:.75rem;padding:.75rem 1rem;background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--radius-md)}.pmap-label{font-size:.6875rem;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:.1em}.pmap-dots{display:flex;flex-wrap:wrap;gap:2px}.pchar{width:10px;height:10px;border-radius:2px;background:var(--border);transition:background var(--ease)}.pchar--keyboard{background:var(--fb-warn)}.pchar--sequential{background:#fb923c8c}.pchar--repeated{background:var(--fb-bad)}.pchar--date{background:var(--s3)}.pmap-legend{display:flex;flex-wrap:wrap;gap:.75rem}.pmap-legend-item{display:flex;align-items:center;gap:.3125rem;font-size:.75rem;color:var(--text-dim)}.pmap-legend-dot{width:10px;height:10px;border-radius:2px;flex-shrink:0}.pmap-legend--keyboard .pmap-legend-dot{background:var(--fb-warn)}.pmap-legend--sequential .pmap-legend-dot{background:#fb923c8c}.pmap-legend--repeated .pmap-legend-dot{background:var(--fb-bad)}.pmap-legend--date .pmap-legend-dot{background:var(--s3)}.crack-times{display:flex;flex-direction:column;gap:.3125rem;padding:.875rem 1rem;background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--radius-md);margin-top:.625rem}.crack-header{font-size:.6875rem;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.25rem}.crack-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.5rem 0}.crack-row+.crack-row{border-top:1px solid var(--border)}.crack-info{display:flex;flex-direction:column;gap:.125rem;min-width:0}.crack-name{font-size:.875rem;font-weight:500;color:var(--text-muted);line-height:1.2}.crack-desc{font-size:.75rem;color:var(--text-dim);line-height:1.3}.crack-value{font-weight:700;font-family:var(--mono);font-size:.875rem;white-space:nowrap;text-align:right;flex-shrink:0}.crack-value--danger{color:var(--fb-bad)}.crack-value--warn{color:var(--fb-warn)}.crack-value--fair{color:var(--s3)}.crack-value--safe{color:var(--fb-ok)}.hibp-opt-in{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.25rem;margin-top:.75rem}.hibp-toggle-wrap{display:flex;gap:.625rem;align-items:flex-start;cursor:pointer}.hibp-checkbox{appearance:none;-webkit-appearance:none;flex-shrink:0;margin-top:2px;width:17px;height:17px;background:var(--surface-raised);border:2px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;position:relative;transition:border-color var(--ease),background var(--ease)}.hibp-checkbox:hover{border-color:var(--text-dim)}.hibp-checkbox:checked{background:var(--accent);border-color:var(--accent)}.hibp-checkbox:checked:after{content:"";display:block;position:absolute;left:4px;top:1px;width:5px;height:9px;border:2px solid #fff;border-top:none;border-left:none;transform:rotate(45deg)}.hibp-checkbox:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.hibp-toggle-content{display:flex;flex-direction:column;gap:.1875rem}.hibp-toggle-title{font-size:.875rem;font-weight:500;color:var(--text-muted);user-select:none;line-height:1.3}.hibp-toggle-desc{font-size:.75rem;color:var(--text-dim);line-height:1.45}.hibp-status{display:flex;align-items:center;gap:.5rem;font-size:.875rem;padding:.625rem .875rem;border-radius:var(--radius-md);border:1px solid transparent;margin-top:1rem}.hibp-status svg{width:16px;height:16px;flex-shrink:0}.hibp--checking{background:#4f7ef814;border-color:#4f7ef833;color:var(--text-muted)}.hibp--clean{background:#22c55e14;border-color:#22c55e33;color:var(--fb-ok)}.hibp--breach{background:#ef444414;border-color:#ef444433;color:var(--fb-bad)}.hibp-text{color:inherit}@keyframes hibp-spin{to{transform:rotate(360deg)}}.hibp-spinner{width:14px;height:14px;border:2px solid rgba(79,126,248,.25);border-top-color:var(--accent);border-radius:50%;animation:hibp-spin .75s linear infinite;flex-shrink:0}.explainer{margin-top:2rem}.explainer-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}.explainer-title{font-size:.9375rem;font-weight:600;color:var(--text-muted)}.mode-toggle-wrap{display:flex;gap:2px;background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--radius-md);padding:3px;flex-shrink:0}.mode-btn{background:none;border:none;border-radius:calc(var(--radius-md) - 3px);color:var(--text-dim);cursor:pointer;font-family:var(--font);font-size:.75rem;font-weight:500;padding:.25rem .625rem;transition:background var(--ease),color var(--ease),box-shadow var(--ease);white-space:nowrap}.mode-btn--active{background:var(--surface);color:var(--text);box-shadow:0 1px 3px #00000059}.mode-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.explainer-blocks{display:flex;flex-direction:column;gap:.75rem}.explainer-block{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.25rem}.explainer-block h3{display:flex;align-items:center;gap:.5rem;font-size:.9375rem;font-weight:600;color:var(--text);margin-bottom:.625rem}.explainer-block h3 svg{width:16px;height:16px;flex-shrink:0;color:var(--accent)}.for-plain,.for-tech{font-size:.875rem;color:var(--text-muted);line-height:1.65}.for-tech code{font-family:var(--mono);font-size:.8125rem;background:var(--surface-raised);padding:.125rem .3125rem;border-radius:var(--radius-sm);color:var(--accent)}body[data-mode=plain] .for-tech,body[data-mode=tech] .for-plain{display:none}.advert{width:100%;max-width:520px;margin:0 auto;min-height:90px;background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;position:relative}.advert:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--surface) 0%,transparent 30%),linear-gradient(to bottom,var(--surface) 0%,transparent 25%),linear-gradient(to right,var(--surface) 0%,transparent 25%),linear-gradient(to left,var(--surface) 0%,transparent 25%);pointer-events:none}.advert--top{margin-bottom:1rem}.advert--btm{margin-top:1rem}.advert--empty{display:none}.app-footer{text-align:center;margin-top:1.75rem;color:var(--text-dim);font-size:.8125rem;line-height:1.8}@media(max-width:560px){body{padding:1.5rem .75rem 4rem}.card{padding:1.5rem;gap:1.25rem}.app-logo{width:28px;height:28px}.app-header h1{font-size:1.625rem}.strength-label{min-width:5.5rem;font-size:.75rem}}