:root { --ink:#18221f; --muted:#62706b; --line:#dce4df; --surface:#fff; --page:#f5f7f6; --accent:#047857; --accent-soft:#d8f1e8; --warn:#b45309; --danger:#b42318; --radius:16px; font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; color:var(--ink); font-synthesis:none; }
* { box-sizing:border-box; }
body { margin:0; background:var(--page); }
button,input { font:inherit; }
button { cursor:pointer; }
.app-shell { width:min(1160px, calc(100% - 40px)); margin:0 auto; padding:28px 0 52px; }
.intro { min-height:250px; display:grid; grid-template-columns:1fr 1.35fr auto; gap:32px; align-items:start; padding:8px 0 44px; }
.brand { display:flex; align-items:center; gap:9px; color:var(--ink); text-decoration:none; font-size:17px; font-weight:700; letter-spacing:-.03em; }
.brand-mark { display:grid; place-items:center; width:28px; height:28px; border-radius:8px; color:#fff; background:var(--accent); font-family:ui-monospace,monospace; font-size:15px; }
.intro-copy { max-width:560px; }
.eyebrow { color:var(--accent); font-size:12px; font-weight:700; letter-spacing:.08em; margin:0 0 12px; }
h1,h2,p { margin-top:0; }
h1 { margin-bottom:17px; font-size:clamp(35px,5vw,62px); line-height:1.06; letter-spacing:-.065em; font-weight:760; }
h1 em { color:var(--accent); font-style:normal; }
.intro-copy > p:last-child { color:var(--muted); max-width:430px; line-height:1.75; font-size:15px; margin-bottom:0; }
.privacy-note { display:flex; align-items:center; gap:8px; white-space:nowrap; color:var(--muted); font-size:12px; margin-top:9px; }
.privacy-dot { width:8px; height:8px; border-radius:50%; background:var(--accent); }
.workspace { display:grid; grid-template-columns:1.3fr .7fr; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:0 18px 50px rgba(29,56,45,.07); }
.generator-panel,.settings-panel { padding:34px; }
.generator-panel { border-right:1px solid var(--line); }
.section-heading,.history-header,.strength-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.section-heading h2,.history-header h2 { margin:0; font-size:23px; letter-spacing:-.045em; }
.icon-button { display:grid; place-items:center; width:38px; height:38px; border:1px solid var(--line); border-radius:10px; background:transparent; color:var(--ink); font-size:22px; transition:.2s; }
.icon-button:hover { color:var(--accent); border-color:var(--accent); }.icon-button:active,.copy-button:active,.primary-button:active { transform:translateY(1px); }
.password-output { margin-top:31px; min-height:83px; display:flex; gap:16px; align-items:center; justify-content:space-between; padding:17px 18px 17px 20px; background:#f0f4f2; border-radius:12px; }
.password-output code { overflow-wrap:anywhere; font-family:"Cascadia Code",Consolas,monospace; font-size:clamp(16px,2.1vw,22px); font-weight:650; letter-spacing:-.04em; }
.copy-button,.primary-button { border:0; border-radius:10px; background:var(--accent); color:#fff; font-weight:700; white-space:nowrap; transition:.2s; }
.copy-button { padding:10px 14px; font-size:13px; }.copy-button:hover,.primary-button:hover { background:#056047; }
.copy-feedback { margin:8px 1px 0; min-height:18px; color:var(--accent); font-size:12px; }
.strength-block { margin-top:28px; padding-top:23px; border-top:1px solid var(--line); }.strength-header { align-items:center; font-size:14px; }.strength-header strong { color:var(--accent); }
.strength-meter { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:14px 0 10px; }.strength-meter i { height:7px; background:#e2e8e4; border-radius:999px; }.strength-meter i.active { background:var(--meter, var(--accent)); }
.strength-block p,.risk-block p { color:var(--muted); font-size:12px; line-height:1.55; margin-bottom:0; }
.risk-block { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:13px; margin-top:27px; padding:16px; border-radius:12px; background:#f7faf8; border:1px solid #e4ebe7; }.risk-icon { width:27px; height:27px; display:grid; place-items:center; border-radius:50%; background:var(--accent-soft); color:var(--accent); font-weight:900; }.risk-block strong { font-size:14px; }.risk-block.risk-danger .risk-icon { background:#fee4e2; color:var(--danger); }.risk-block.risk-warning .risk-icon { background:#fef0c7; color:var(--warn); }
.text-button { border:0; padding:4px 0; color:var(--accent); background:transparent; font-size:13px; font-weight:700; white-space:nowrap; }.text-button:hover { text-decoration:underline; }
.range-control { display:block; margin-top:32px; }.range-control>span { display:flex; justify-content:space-between; font-size:14px; font-weight:650; }.range-control output { color:var(--accent); font-family:ui-monospace,monospace; }.range-control input { width:100%; accent-color:var(--accent); margin:14px 0 0; }.range-ends { display:flex; justify-content:space-between; color:var(--muted); margin-top:1px; }.range-ends small { font-size:11px; }
.options { margin:27px 0 18px; padding:0; border:0; }.options legend { padding:0; margin-bottom:13px; font-size:14px; font-weight:650; }.options label { display:flex; align-items:center; justify-content:space-between; margin:12px 0; color:#36443e; font-size:14px; }.options input { appearance:none; width:18px; height:18px; margin:0 10px 0 0; border:1px solid #adb9b3; border-radius:5px; vertical-align:-4px; }.options input:checked { border-color:var(--accent); background:var(--accent) center/12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-width='2' d='m3 8 3 3 7-7'/%3E%3C/svg%3E"); }.options b { color:#8b9891; font-family:ui-monospace,monospace; font-size:11px; font-weight:500; }
.switch-row { display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px; padding-top:18px; border-top:1px solid var(--line); font-size:13px; font-weight:650; }.switch-row small { display:block; color:var(--muted); font-weight:400; font-size:11px; margin-top:4px; }.switch-row input { display:none; }.switch-row i { position:relative; width:38px; height:22px; border-radius:99px; background:#d4ddd8; transition:.2s; }.switch-row i:after { content:""; position:absolute; width:16px; height:16px; top:3px; left:3px; border-radius:50%; background:#fff; box-shadow:0 1px 3px #84918a; transition:.2s; }.switch-row input:checked + i { background:var(--accent); }.switch-row input:checked + i:after { transform:translateX(16px); }
.primary-button { width:100%; display:flex; align-items:center; justify-content:space-between; padding:14px 16px; margin-top:26px; font-size:14px; }.primary-button span { font-size:20px; font-weight:400; line-height:12px; }
.history-section { margin-top:32px; padding:28px 0 0; }.history-header { align-items:center; }.history-header .eyebrow { margin-bottom:8px; }.history-list { margin-top:16px; border-top:1px solid var(--line); }.history-item { display:grid; grid-template-columns:1.3fr .7fr auto; gap:20px; align-items:center; padding:16px 4px; border-bottom:1px solid var(--line); }.history-item code { font-family:"Cascadia Code",Consolas,monospace; font-size:14px; overflow:hidden; text-overflow:ellipsis; }.history-item time,.history-item span { color:var(--muted); font-size:12px; }.history-item button { border:0; background:transparent; color:var(--accent); font-weight:700; font-size:12px; }.empty-state { color:var(--muted); font-size:14px; padding:22px 4px; }
button:focus-visible,input:focus-visible { outline:3px solid rgba(4,120,87,.24); outline-offset:3px; }
@media (max-width:760px) { .app-shell { width:min(100% - 28px, 580px); padding-top:20px; }.intro { min-height:auto; grid-template-columns:1fr; gap:23px; padding-bottom:34px; }.privacy-note { margin:0; }.workspace { grid-template-columns:1fr; }.generator-panel { border-right:0; border-bottom:1px solid var(--line); }.generator-panel,.settings-panel { padding:25px 20px; }.history-item { grid-template-columns:1fr auto; gap:8px; }.history-item time { grid-column:1; }.history-item button { grid-column:2; grid-row:1 / span 2; }.risk-block { grid-template-columns:auto 1fr; }.risk-block .text-button { grid-column:2; justify-self:start; } }
@media (prefers-color-scheme:dark) { :root { --ink:#edf4ef; --muted:#afbbb4; --line:#2b3932; --surface:#17211d; --page:#111815; --accent:#42b991; --accent-soft:#173f32; --warn:#f4bb62; --danger:#fda29b; }.password-output { background:#202d27; }.strength-meter i { background:#33423b; }.risk-block { background:#1b2822; border-color:#2d3b34; }.options label { color:#d9e3dd; }.options b { color:#89978f; }.switch-row i { background:#4a5851; } }
@media (prefers-reduced-motion:reduce) { *,*:before,*:after { transition-duration:.01ms!important; } }