:root {
  --blue: #146bff;
  --blue-dark: #0758e7;
  --ink: #0b1628;
  --muted: #596984;
  --line: #e1e9f4;
  --page: #f8fbff;
  --card: #ffffff;
  --shadow: 0 14px 35px rgba(32, 70, 130, .075);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; color: var(--ink); font-family: "Inter", Arial, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; background: radial-gradient(circle at 70% 13%, #eff6ff 0, rgba(239,246,255,0) 28%), linear-gradient(180deg, #fff 0%, #f7faff 100%); }
button, input { font: inherit; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid rgba(20, 107, 255, .3); outline-offset: 3px; }
a { color: inherit; text-decoration: none; }
svg { display: block; width: 24px; height: 24px; }
.icon-sprite, .sr-only { position: absolute; overflow: hidden; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.site-shell { width: min(1300px, calc(100% - 64px)); margin: 0 auto; }

.password-header { position: relative; z-index: 20; height: 70px; border-bottom: 1px solid #e9eef5; background: rgba(255,255,255,.92); box-shadow: 0 2px 12px rgba(26, 56, 102, .025); }
.header-inner { display: flex; align-items: center; height: 100%; }
.brand { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; font-size: 20px; font-weight: 800; letter-spacing: -.8px; }
.brand > span:last-child span { color: var(--blue); }
.brand-mark { display: grid; width: 29px; height: 29px; place-items: center; color: #fff; border-radius: 50%; background: linear-gradient(135deg, #247bff, #0951d6); box-shadow: 0 6px 14px rgba(18,104,246,.24); }
.brand-mark svg { width: 18px; height: 18px; }
.tool-nav { display: flex; align-items: center; gap: clamp(24px, 2.6vw, 39px); margin: 0 auto; }
.tool-nav a { display: inline-flex; align-items: center; gap: 3px; color: #0c1423; font-size: 13px; font-weight: 600; white-space: nowrap; transition: color .18s ease; }
.tool-nav a:hover { color: var(--blue); }
.tool-nav svg { width: 14px; height: 14px; }
.header-tools { display: flex; align-items: center; gap: 18px; }
.header-search { position: relative; display: flex; align-items: center; width: 358px; height: 39px; color: #71809a; border: 1px solid #d9e2ee; border-radius: 8px; background: #fff; }
.header-search:focus-within { border-color: #8db7ff; box-shadow: 0 0 0 3px rgba(20,107,255,.08); }
.header-search input { width: 100%; height: 100%; padding: 0 39px 0 14px; color: var(--ink); font-size: 12px; border: 0; border-radius: inherit; outline: 0; background: transparent; }
.header-search input::placeholder { color: #78869d; }
.header-search svg { position: absolute; right: 13px; width: 18px; height: 18px; pointer-events: none; }
.login-button { min-width: 84px; height: 39px; padding: 0 17px; color: #fff; font-size: 13px; font-weight: 700; border: 1px solid #2878ef; border-radius: 8px; background: linear-gradient(135deg, #1d75ff, #0b5ce6); box-shadow: 0 7px 14px rgba(18,93,230,.16); transition: transform .18s ease, filter .18s ease; }
.login-button:hover { filter: brightness(1.06); transform: translateY(-1px); }
.mobile-menu { display: none; width: 38px; height: 38px; padding: 0; place-items: center; color: #1a2a41; border: 1px solid #dce5f1; border-radius: 8px; background: #fff; }
.mobile-menu svg { width: 20px; height: 20px; }

.breadcrumb { display: flex; align-items: center; gap: 12px; min-height: 65px; color: #60708a; font-size: 11px; }
.breadcrumb a { display: inline-flex; align-items: center; gap: 8px; transition: color .18s; }
.breadcrumb a:hover { color: var(--blue); }
.breadcrumb > svg { width: 14px; height: 14px; color: #8390a3; }
.breadcrumb a > svg { width: 15px; height: 15px; }
.breadcrumb span[aria-current="page"] { color: #16233a; font-weight: 600; }

.password-hero { display: grid; grid-template-columns: minmax(310px, .8fr) minmax(560px, 1.2fr); gap: clamp(40px, 6vw, 94px); align-items: center; padding: 50px 30px 39px 34px; }
.tool-badge { display: inline-flex; gap: 6px; margin: 0 0 16px; padding: 6px 11px; color: #0864f7; font-size: 10px; font-weight: 800; letter-spacing: .03em; border-radius: 30px; background: #edf4ff; }
.tool-badge span { opacity: .72; }
h1 { max-width: 500px; margin: 0; font-size: clamp(40px, 4.1vw, 57px); line-height: 1.03; letter-spacing: -2.8px; }
h1 strong { color: var(--blue); }
.lead { max-width: 475px; margin: 19px 0 25px; color: #566782; font-size: 15px; line-height: 1.6; }
.hero-points { display: grid; gap: 12px; padding: 0; margin: 0; list-style: none; color: #34445d; font-size: 12px; font-weight: 600; }
.hero-points li { display: flex; align-items: center; gap: 10px; }
.hero-points span { display: grid; width: 27px; height: 27px; flex: 0 0 auto; place-items: center; color: var(--blue); border-radius: 9px; background: #edf4ff; }
.hero-points svg { width: 16px; height: 16px; }

.password-card { position: relative; min-width: 0; padding: 22px 24px 18px; border: 1px solid #e2eaf5; border-radius: 15px; background: rgba(255,255,255,.96); box-shadow: 0 18px 45px rgba(31, 72, 137, .09), 0 2px 7px rgba(31,72,137,.025); }
.password-card::before { position: absolute; top: -1px; right: 45px; left: 45px; height: 3px; content: ""; border-radius: 0 0 8px 8px; background: linear-gradient(90deg, transparent, #71a8ff 20%, var(--blue) 50%, #71a8ff 80%, transparent); opacity: .85; }
.card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.card-heading > div { display: flex; gap: 11px; }
.heading-icon { display: grid; width: 37px; height: 37px; flex: 0 0 auto; place-items: center; color: #156dff; border-radius: 11px; background: #edf4ff; }
.heading-icon svg { width: 22px; height: 22px; }
.card-heading h2 { margin: 1px 0 4px; font-size: 15px; letter-spacing: -.35px; }
.card-heading p { margin: 0; color: #6a7890; font-size: 11px; line-height: 1.35; }
.icon-action { display: grid; width: 37px; height: 37px; flex: 0 0 auto; padding: 0; place-items: center; color: var(--blue); border: 1px solid #d9e6f8; border-radius: 9px; background: #f8fbff; transition: color .18s, background .18s, transform .18s; }
.icon-action:hover { color: #fff; background: var(--blue); transform: rotate(25deg); }
.icon-action svg { width: 19px; height: 19px; }

.password-display { margin-top: 20px; }
.password-display > label, .control-label > label, .options-group legend { display: block; color: #16233a; font-size: 12px; font-weight: 700; }
.password-field { display: flex; align-items: center; height: 58px; margin-top: 9px; overflow: hidden; border: 1px solid #ccdcf3; border-radius: 10px; background: linear-gradient(180deg, #fff, #fbfdff); box-shadow: inset 0 1px 2px rgba(21,57,111,.025), 0 5px 13px rgba(27,76,150,.04); transition: border .18s, box-shadow .18s; }
.password-field:focus-within { border-color: #78a7ff; box-shadow: 0 0 0 3px rgba(20,107,255,.09); }
.password-field input { width: 100%; min-width: 0; height: 100%; padding: 0 8px 0 17px; color: #10203a; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: clamp(16px, 2.2vw, 21px); font-weight: 700; letter-spacing: .8px; border: 0; outline: 0; background: transparent; }
.field-action { display: grid; width: 42px; height: 40px; flex: 0 0 auto; padding: 0; place-items: center; color: #5d6d84; border: 0; background: transparent; transition: color .18s, background .18s; }
.field-action:hover { color: var(--blue); background: #edf4ff; }
.copy-action { margin-right: 7px; border-radius: 8px; }
.field-action svg { width: 20px; height: 20px; }
.password-feedback { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; color: #758299; font-size: 10px; }
.strength-wrap { display: flex; align-items: center; gap: 8px; }
.strength-bars { display: flex; gap: 3px; }
.strength-bars i { display: block; width: 24px; height: 4px; border-radius: 10px; background: #e3eaf4; transition: background .2s ease; }
.strength-bars[data-level="1"] i:nth-child(1) { background: #ef5350; }
.strength-bars[data-level="2"] i:nth-child(-n+2) { background: #ff9d36; }
.strength-bars[data-level="3"] i:nth-child(-n+3) { background: #1676ff; }
.strength-bars[data-level="4"] i { background: #22b978; }
.strength-wrap b { color: #4c5e78; font-size: 10px; }

.settings-divider { height: 1px; margin: 18px 0; background: #e8eef7; }
.control-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.number-field { display: flex; align-items: center; height: 31px; overflow: hidden; color: #6d7b91; font-size: 10px; border: 1px solid #d9e3f0; border-radius: 7px; background: #fbfdff; }
.number-field input { width: 36px; height: 100%; padding: 0 2px 0 8px; color: #184d9f; font-size: 12px; font-weight: 700; border: 0; outline: 0; background: transparent; -moz-appearance: textfield; }
.number-field input::-webkit-outer-spin-button, .number-field input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.number-field span { padding-right: 8px; }
.range-input { width: 100%; height: 18px; padding: 0; margin: 12px 0 0; accent-color: var(--blue); cursor: pointer; }
.range-scale { display: flex; justify-content: space-between; color: #8996aa; font-size: 9px; }
.options-group { padding: 0; margin: 21px 0 0; border: 0; }
.options-group legend { padding: 0; margin-bottom: 11px; }
.options-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.option-control { display: flex; align-items: center; min-width: 0; min-height: 51px; gap: 9px; padding: 9px 10px; cursor: pointer; border: 1px solid #e2eaf4; border-radius: 9px; background: #fcfdff; transition: border .18s, background .18s, box-shadow .18s; }
.option-control:hover { border-color: #bdd3f6; background: #f8fbff; }
.option-control input, .similar-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.option-checkbox { display: grid; width: 17px; height: 17px; flex: 0 0 auto; place-items: center; color: #fff; border: 1.5px solid #b8c7da; border-radius: 5px; transition: background .18s, border .18s; }
.option-checkbox svg { width: 12px; height: 12px; opacity: 0; transform: scale(.6); transition: opacity .16s, transform .16s; }
.option-control input:checked + .option-checkbox { border-color: var(--blue); background: var(--blue); box-shadow: 0 3px 7px rgba(20,107,255,.18); }
.option-control input:checked + .option-checkbox svg { opacity: 1; transform: scale(1); }
.option-control b, .option-control small { display: block; white-space: nowrap; }
.option-control b { overflow: hidden; color: #31415a; font-size: 10.5px; text-overflow: ellipsis; }
.option-control small { margin-top: 3px; color: #8090a8; font-size: 9px; }
.similar-option { display: flex; align-items: center; gap: 9px; margin-top: 13px; color: #40516a; font-size: 11px; font-weight: 600; cursor: pointer; }
.similar-option small { color: #8592a5; font-size: 9px; font-weight: 500; }
.switch-ui { position: relative; width: 31px; height: 18px; flex: 0 0 auto; border-radius: 20px; background: #cbd6e4; transition: background .18s; }
.switch-ui::after { position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; content: ""; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.22); transition: transform .18s; }
.similar-option input:checked + .switch-ui { background: var(--blue); }
.similar-option input:checked + .switch-ui::after { transform: translateX(13px); }
.similar-option input:focus-visible + .switch-ui { outline: 3px solid rgba(20,107,255,.3); outline-offset: 2px; }
.generate-button { display: flex; align-items: center; justify-content: center; width: 100%; height: 44px; gap: 8px; margin-top: 20px; color: #fff; font-size: 12px; font-weight: 700; border: 0; border-radius: 8px; background: linear-gradient(135deg, #237aff, #0758e7); box-shadow: 0 9px 18px rgba(8,89,226,.2); transition: transform .18s, filter .18s; }
.generate-button:hover { filter: brightness(1.06); transform: translateY(-1px); }
.generate-button svg { width: 18px; height: 18px; }
.privacy-note { display: flex; align-items: flex-start; gap: 7px; margin: 12px 0 0; color: #748198; font-size: 9.5px; line-height: 1.4; }
.privacy-note svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--blue); }
.privacy-note b { color: #516078; }

.benefit-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 17px; padding: 17px 0; border-top: 1px solid #e7eef7; border-bottom: 1px solid #e7eef7; }
.benefit-strip article { display: flex; align-items: center; min-width: 0; gap: 11px; padding: 0 15px; border-right: 1px solid #e7eef7; }
.benefit-strip article:last-child { border-right: 0; }
.benefit-strip > article > span { display: grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; border-radius: 50%; }
.benefit-strip svg { width: 19px; height: 19px; }
.benefit-blue { color: #176dfb; background: #edf4ff; }.benefit-purple { color: #8547ef; background: #f5efff; }.benefit-green { color: #18ae74; background: #eafaf2; }.benefit-orange { color: #e98a1d; background: #fff5e8; }
.benefit-strip p { margin: 0; color: #6d7c92; font-size: 10px; line-height: 1.42; }.benefit-strip b { display: block; margin-bottom: 2px; color: #1b2a41; font-size: 11px; }

.ad-wrap { margin: 25px auto; }.ad-slot { display: grid; min-height: 70px; place-items: center; color: #98a6b9; font-size: 9px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; border: 1px dashed #e0e9f4; border-radius: 10px; background: rgba(255,255,255,.45); }
.information-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 16px; margin-top: 16px; }
.how-card, .tips-card { padding: 21px 22px; border: 1px solid #e1eaf5; border-radius: 13px; background: rgba(255,255,255,.88); box-shadow: 0 8px 22px rgba(36,76,138,.035); }
.information-grid h2 { margin: 0 0 19px; font-size: 15px; letter-spacing: -.35px; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.steps div { position: relative; min-width: 0; padding-top: 42px; }.steps div:not(:last-child)::after { position: absolute; top: 17px; right: -13px; width: 18px; border-top: 1px dashed #b8d2fa; content: ""; }
.steps span { position: absolute; top: 0; left: 0; display: grid; width: 32px; height: 32px; place-items: center; color: var(--blue); font-size: 15px; font-weight: 800; border-radius: 50%; background: #edf4ff; }
.steps b { display: block; margin-bottom: 5px; font-size: 10px; }.steps p { margin: 0; color: #66758d; font-size: 9.5px; line-height: 1.45; }
.tips-card ul { display: grid; gap: 12px; padding: 0; margin: 0; list-style: none; }.tips-card li { display: flex; align-items: flex-start; gap: 8px; color: #506078; font-size: 11px; line-height: 1.42; }.tips-card li span { display: grid; width: 18px; height: 18px; flex: 0 0 auto; place-items: center; color: #1984fa; border-radius: 50%; background: #edf5ff; }.tips-card li svg { width: 12px; height: 12px; }
.explore-bar { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin: 18px auto 25px; padding: 18px 24px; border-radius: 12px; background: linear-gradient(100deg, #eff6ff, #f8fbff 57%, #eef5ff); }.explore-bar > div { display: flex; align-items: center; gap: 13px; }.explore-mark { display: grid; width: 33px; height: 33px; place-items: center; color: #fff; border-radius: 50%; background: linear-gradient(135deg, #277dff, #0b5be4); }.explore-mark svg { width: 19px; height: 19px; }.explore-bar p { margin: 0; font-size: 12px; }.explore-bar p b { display: block; }.explore-bar p b span { color: var(--blue); }.explore-bar p small { display: block; margin-top: 4px; color: #6e7d94; font-size: 10px; }.explore-bar > a { display: inline-flex; align-items: center; gap: 8px; min-height: 39px; padding: 0 16px; color: #fff; font-size: 11px; font-weight: 700; white-space: nowrap; border-radius: 8px; background: linear-gradient(135deg, #1d75ff, #0a5ae4); box-shadow: 0 7px 14px rgba(18,93,230,.13); }.explore-bar > a svg { width: 16px; height: 16px; }

.login-dialog { position: relative; width: min(390px, calc(100% - 40px)); padding: 34px; color: var(--ink); border: 0; border-radius: 16px; box-shadow: 0 30px 80px rgba(0,16,43,.3); }.login-dialog::backdrop { background: rgba(2,11,25,.62); backdrop-filter: blur(3px); }.login-dialog > button:first-child { position: absolute; top: 13px; right: 13px; display: grid; width: 35px; height: 35px; padding: 0; place-items: center; color: #5c6a80; border: 0; border-radius: 50%; background: #f2f6fb; }.login-dialog > button:first-child svg { width: 18px; height: 18px; }.dialog-icon { display: grid; width: 45px; height: 45px; margin-bottom: 18px; place-items: center; color: #fff; border-radius: 13px; background: linear-gradient(145deg, #2582ff, #0753de); }.dialog-icon svg { width: 28px; height: 28px; }.login-dialog h2 { margin: 0; font-size: 22px; letter-spacing: -.8px; }.login-dialog p { margin: 10px 0 24px; color: var(--muted); font-size: 14px; line-height: 1.5; }.login-dialog > button:last-child { width: 100%; height: 44px; color: #fff; font-size: 13px; font-weight: 700; border: 0; border-radius: 8px; background: var(--blue); }
.toast { position: fixed; z-index: 60; bottom: 24px; left: 50%; max-width: calc(100% - 32px); padding: 12px 17px; color: #fff; font-size: 12px; border-radius: 9px; background: #12213a; box-shadow: 0 10px 30px rgba(0,0,0,.18); opacity: 0; pointer-events: none; transform: translate(-50%, 16px); transition: opacity .24s, transform .24s; }.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1180px) {
  .site-shell { width: min(1100px, calc(100% - 48px)); }
  .header-search { width: 250px; }.tool-nav { gap: 20px; }
  .password-hero { grid-template-columns: minmax(270px,.77fr) minmax(500px,1.23fr); gap: 38px; padding-right: 8px; padding-left: 16px; }
}

@media (max-width: 980px) {
  .password-header { height: 62px; }.header-inner { position: relative; }.tool-nav { position: absolute; top: 62px; right: 0; left: 0; display: grid; gap: 0; max-height: 0; margin: 0; overflow: hidden; visibility: hidden; background: #fff; border-top: 1px solid #e9eef5; box-shadow: 0 14px 28px rgba(20,48,88,.12); transition: max-height .25s ease, visibility .25s ease; }.password-header.nav-open .tool-nav { max-height: 330px; visibility: visible; }.tool-nav a { padding: 14px 20px; border-bottom: 1px solid #eef2f7; }.tool-nav a:last-child { border-bottom: 0; }.header-tools { margin-left: auto; }.header-search { display: none; }.mobile-menu { display: grid; }
  .password-hero { grid-template-columns: 1fr; gap: 28px; max-width: 720px; padding: 42px 0 26px; }.hero-copy { text-align: center; }.tool-badge { margin-bottom: 12px; }.lead { margin-right: auto; margin-left: auto; }.hero-points { grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: left; }.hero-points li { align-items: flex-start; font-size: 10px; }.password-card { width: 100%; }
  .benefit-strip { grid-template-columns: repeat(2, 1fr); }.benefit-strip article:nth-child(2) { border-right: 0; }.benefit-strip article:nth-child(-n+2) { padding-bottom: 15px; border-bottom: 1px solid #e7eef7; }.benefit-strip article:nth-child(n+3) { padding-top: 15px; }
  .information-grid { grid-template-columns: 1fr; }.steps { max-width: 620px; }
}

@media (max-width: 640px) {
  .site-shell { width: calc(100% - 32px); }.login-button { display: none; }.breadcrumb { min-height: 53px; gap: 8px; font-size: 10px; overflow: hidden; white-space: nowrap; }.breadcrumb > svg { width: 12px; height: 12px; }.breadcrumb a > svg { width: 14px; height: 14px; }
  .password-hero { padding-top: 28px; }.tool-badge { font-size: 9px; }h1 { font-size: clamp(36px, 11vw, 46px); letter-spacing: -2px; }.lead { margin-top: 14px; font-size: 13px; }.hero-points { grid-template-columns: 1fr; width: max-content; max-width: 100%; margin: 0 auto; }.hero-points li { align-items: center; font-size: 11px; }
  .password-card { padding: 18px 15px 15px; border-radius: 12px; }.password-card::before { right: 25px; left: 25px; }.card-heading p { max-width: 220px; }.password-field { height: 54px; }.password-field input { padding-left: 12px; font-size: 15px; letter-spacing: .35px; }.field-action { width: 36px; }.copy-action { margin-right: 3px; }.strength-bars i { width: 19px; }.options-grid { gap: 7px; }.option-control { min-height: 50px; padding: 8px; gap: 7px; }.option-control b { font-size: 9.5px; }.option-control small { font-size: 8px; }.similar-option { align-items: flex-start; line-height: 1.35; }.similar-option small { display: block; margin-top: 3px; }
  .benefit-strip { gap: 0; margin-top: 8px; padding: 9px 0; }.benefit-strip article { gap: 8px; padding-right: 8px; padding-left: 8px; }.benefit-strip article:first-child, .benefit-strip article:nth-child(3) { padding-left: 0; }.benefit-strip > article > span { width: 30px; height: 30px; }.benefit-strip svg { width: 16px; height: 16px; }.benefit-strip p { font-size: 8.5px; }.benefit-strip b { font-size: 9.5px; }
  .ad-wrap { margin: 18px auto; }.ad-slot { min-height: 55px; }.how-card, .tips-card { padding: 18px 15px; }.information-grid h2 { margin-bottom: 16px; font-size: 14px; }.steps { grid-template-columns: repeat(2, 1fr); gap: 18px 14px; }.steps div:not(:last-child)::after { display: none; }.steps p { font-size: 9px; }.tips-card ul { gap: 10px; }.tips-card li { font-size: 10px; }.explore-bar { align-items: flex-start; flex-direction: column; gap: 15px; padding: 16px; }.explore-bar > a { width: 100%; justify-content: center; }
}

@media (max-width: 390px) {
  .site-shell { width: calc(100% - 24px); }.brand { font-size: 19px; }.password-card { padding-right: 12px; padding-left: 12px; }.card-heading h2 { font-size: 14px; }.card-heading p { max-width: 190px; }.password-field input { font-size: 13px; }.options-grid { grid-template-columns: 1fr; }.option-control { min-height: 43px; }.option-control small { display: inline; margin: 0 0 0 5px; }.option-control b { display: inline; }.benefit-strip { grid-template-columns: 1fr; }.benefit-strip article, .benefit-strip article:nth-child(2) { padding: 10px 0; border-right: 0; border-bottom: 1px solid #e7eef7; }.benefit-strip article:nth-child(-n+2) { padding-bottom: 10px; }.benefit-strip article:nth-child(n+3) { padding-top: 10px; }.benefit-strip article:last-child { border-bottom: 0; }
}