.tool-hero { background:linear-gradient(135deg,#334155 0%,#1e293b 100%); padding:5rem 1.5rem 3rem; margin-top:68px; text-align:center; position:relative; overflow:hidden; }
.tool-hero::before { content:''; position:absolute; width:400px; height:400px; border-radius:50%; background:rgba(255,255,255,.04); top:-150px; right:-100px; }
.tool-hero::after { content:''; position:absolute; width:300px; height:300px; border-radius:50%; background:rgba(255,255,255,.03); bottom:-100px; left:-50px; }
.tool-hero-content { position:relative; z-index:1; }
.tool-hero-icon { width:72px; height:72px; border-radius:20px; background:rgba(255,255,255,.1); backdrop-filter:blur(10px); display:flex; align-items:center; justify-content:center; font-size:2rem; margin:0 auto 1.25rem; border:1px solid rgba(255,255,255,.15); }
.tool-hero h1 { font-size:clamp(1.75rem,4vw,2.75rem); font-weight:800; color:white; letter-spacing:-1px; margin-bottom:.75rem; }
.tool-hero p { font-size:1rem; color:rgba(255,255,255,.7); max-width:480px; margin:0 auto; }
.tool-main { max-width:720px; margin:0 auto; padding:2.5rem 1.5rem 5rem; }

.pw-stack { display:flex; flex-direction:column; gap:1.25rem; }

.pw-display-card { background:white; border-radius:var(--radius-lg); border:1px solid var(--border); box-shadow:var(--shadow-md); overflow:hidden; }
.pw-display-header { padding:1rem 1.5rem; border-bottom:1px solid var(--border-light); display:flex; align-items:center; justify-content:space-between; }
.pw-display-title { font-size:.875rem; font-weight:700; color:var(--text); }
.pw-actions { display:flex; gap:.5rem; }
.btn-pw-action { padding:.4rem .875rem; border:1.5px solid var(--border); border-radius:100px; font-size:.75rem; font-weight:700; font-family:'Inter',sans-serif; color:var(--text-muted); background:transparent; cursor:pointer; transition:var(--transition); }
.btn-pw-action:hover { border-color:var(--primary); color:var(--primary); }
.btn-pw-copy { background:linear-gradient(135deg,#334155,#1e293b); color:white; border-color:transparent; }
.btn-pw-copy:hover { transform:translateY(-1px); color:white; border-color:transparent; }

.pw-text { padding:1.5rem; font-family:'JetBrains Mono','Courier New',monospace; font-size:1.1rem; font-weight:700; color:var(--text); letter-spacing:.5px; word-break:break-all; min-height:60px; line-height:1.6; background:var(--bg); margin:0; border:none; }

.strength-bar-wrap { padding:.875rem 1.5rem; border-top:1px solid var(--border-light); }
.strength-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:.5rem; }
.strength-label { font-size:.75rem; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.4px; }
.strength-tag { font-size:.75rem; font-weight:700; border-radius:100px; padding:2px 10px; }
.strength-tag.weak { background:rgba(239,68,68,.1); color:#dc2626; }
.strength-tag.fair { background:rgba(245,158,11,.1); color:#d97706; }
.strength-tag.good { background:rgba(59,130,246,.1); color:#2563eb; }
.strength-tag.strong { background:rgba(16,185,129,.1); color:#059669; }
.strength-track { height:6px; background:var(--border); border-radius:100px; overflow:hidden; }
.strength-fill { height:100%; border-radius:100px; transition:all .4s ease; }
.strength-fill.weak { width:25%; background:#ef4444; }
.strength-fill.fair { width:50%; background:#f59e0b; }
.strength-fill.good { width:75%; background:#3b82f6; }
.strength-fill.strong { width:100%; background:#10b981; }

.options-card { background:white; border-radius:var(--radius-lg); border:1px solid var(--border); box-shadow:var(--shadow); overflow:hidden; }
.options-header { padding:1.1rem 1.5rem; border-bottom:1px solid var(--border-light); display:flex; align-items:center; gap:.75rem; }
.options-icon { width:34px; height:34px; border-radius:9px; background:rgba(51,65,85,.1); display:flex; align-items:center; justify-content:center; font-size:1rem; }
.options-title { font-size:.9rem; font-weight:700; color:var(--text); }
.options-body { padding:1.25rem 1.5rem; display:flex; flex-direction:column; gap:1rem; }

.length-group { display:flex; flex-direction:column; gap:.5rem; }
.length-row { display:flex; justify-content:space-between; align-items:center; }
.length-label { font-size:.78rem; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.4px; }
.length-value { font-size:.9rem; font-weight:800; color:var(--text); background:var(--bg); padding:2px 10px; border-radius:6px; }
.field-range { width:100%; -webkit-appearance:none; appearance:none; height:4px; background:var(--border); border-radius:100px; outline:none; cursor:pointer; }
.field-range::-webkit-slider-thumb { -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:#334155; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.2); }

.checkboxes-grid { display:grid; grid-template-columns:1fr 1fr; gap:.625rem; }
.check-item { display:flex; align-items:center; gap:.625rem; padding:.625rem .875rem; border:1.5px solid var(--border); border-radius:var(--radius-sm); cursor:pointer; transition:var(--transition); }
.check-item:hover { border-color:#334155; }
.check-item input { width:16px; height:16px; cursor:pointer; accent-color:#334155; }
.check-item-label { font-size:.82rem; font-weight:600; color:var(--text); }
.check-item-sub { font-size:.7rem; color:var(--text-muted); display:block; }

.btn-generate { width:100%; padding:.875rem; background:linear-gradient(135deg,#334155,#1e293b); color:white; border:none; border-radius:var(--radius); font-size:.95rem; font-weight:700; font-family:'Inter',sans-serif; cursor:pointer; transition:var(--transition); box-shadow:0 4px 12px rgba(0,0,0,.2); }
.btn-generate:hover { transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.25); }

.history-card { background:white; border-radius:var(--radius-lg); border:1px solid var(--border); box-shadow:var(--shadow); overflow:hidden; }
.history-header { padding:1.1rem 1.5rem; border-bottom:1px solid var(--border-light); display:flex; align-items:center; justify-content:space-between; }
.history-title-wrap { display:flex; align-items:center; gap:.75rem; }
.history-icon { width:34px; height:34px; border-radius:9px; background:rgba(51,65,85,.1); display:flex; align-items:center; justify-content:center; font-size:1rem; }
.history-title { font-size:.9rem; font-weight:700; color:var(--text); }
.btn-clear-history { font-size:.75rem; font-weight:600; color:var(--text-muted); background:none; border:none; cursor:pointer; font-family:'Inter',sans-serif; transition:var(--transition); }
.btn-clear-history:hover { color:var(--danger); }
.history-list { max-height:220px; overflow-y:auto; }
.history-item { display:flex; align-items:center; justify-content:space-between; padding:.625rem 1.5rem; border-bottom:1px solid var(--border-light); transition:var(--transition); }
.history-item:last-child { border-bottom:none; }
.history-item:hover { background:var(--bg); }
.history-pw { font-family:'JetBrains Mono','Courier New',monospace; font-size:.82rem; color:var(--text); letter-spacing:.3px; }
.history-copy-btn { font-size:.7rem; font-weight:700; color:var(--text-muted); background:var(--bg); border:1px solid var(--border); border-radius:6px; padding:2px 8px; cursor:pointer; font-family:'Inter',sans-serif; transition:var(--transition); }
.history-copy-btn:hover { border-color:var(--primary); color:var(--primary); }
.history-empty { padding:1.5rem; text-align:center; color:var(--text-light); font-size:.82rem; }