/* Secure Pass Generator — shared design system */

@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/inter-var-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0100-017F,U+0218-021B,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url(/fonts/jetbrainsmono-var-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Noto Menu';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/notosans-menu.woff2) format('woff2');unicode-range:U+2000-206F,U+3000-303F,U+3040-30FF,U+3200-4DBF,U+4E00-9FFF,U+F900-FAFF,U+FE30-FE4F,U+FF00-FFEF}

:root {
  --p:#7c3aed; --p2:#6d28d9; --p3:#c4b5fd; --pk:#ec4899;
  --gr:#10b981; --or:#f97316; --ye:#fbbf24; --re:#ef4444;
  --bg:#09090f; --bg2:#111119; --bg3:#1a1a28; --bg4:#22223a;
  --gl:rgba(255,255,255,0.04); --gl2:rgba(255,255,255,0.07);
  --bd:rgba(255,255,255,0.07); --bd2:rgba(255,255,255,0.12);
  --tx:#f0f0ff; --tx2:#8888bb; --tx3:#7d7da8;
  --r:16px; --rs:10px;
  --tr:0.2s cubic-bezier(0.4,0,0.2,1);
  --sh:0 4px 24px rgba(0,0,0,0.5);
  --shb:0 16px 64px rgba(0,0,0,0.7);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic','Microsoft YaHei','Noto Sans CJK SC','Noto Sans CJK JP',sans-serif;
  background:var(--bg); color:var(--tx);
  min-height:100vh; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 70% 55% at 12% 8%, rgba(124,58,237,0.14) 0%, transparent 60%),
    radial-gradient(ellipse 55% 45% at 88% 88%, rgba(236,72,153,0.09) 0%, transparent 60%),
    radial-gradient(ellipse 45% 35% at 50% 45%, rgba(16,185,129,0.05) 0%, transparent 65%);
}
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--bd2); border-radius:5px; }
::-webkit-scrollbar-thumb:hover { background:var(--tx3); }
a { color:var(--p3); }

header {
  position:sticky; top:0; z-index:300;
  background:rgba(9,9,15,0.85);
  backdrop-filter:blur(28px) saturate(1.6);
  -webkit-backdrop-filter:blur(28px) saturate(1.6);
  border-bottom:1px solid var(--bd);
}
.hdr {
  max-width:880px; margin:0 auto; padding:10px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.logo { display:flex; align-items:center; gap:10px; text-decoration:none; }
.logo-ico {
  width:38px; height:38px; border-radius:10px; flex-shrink:0;
  background:linear-gradient(135deg, var(--p), #a855f7);
  display:flex; align-items:center; justify-content:center;
  font-size:19px; box-shadow:0 4px 14px rgba(124,58,237,0.4);
}
.logo-txt {
  font-size:15.5px; font-weight:800; line-height:1.1;
  background:linear-gradient(120deg, #ddd6fe, var(--pk));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.logo-txt .tld { -webkit-text-fill-color:var(--tx3); color:var(--tx3); font-size:10.5px; font-weight:700; letter-spacing:0; margin-left:1px; vertical-align:2px; }
.logo-sub { font-size:10px; color:var(--tx3); font-weight:500; letter-spacing:0.4px; margin-top:2px; }

.lang-wrap { position:relative; }
.lang-btn {
  display:flex; align-items:center; gap:5px; padding:7px 11px;
  background:var(--gl); border:1px solid var(--bd); border-radius:9px;
  cursor:pointer; color:var(--tx); font-family:'Inter',sans-serif;
  font-size:12.5px; font-weight:700; transition:all var(--tr);
  user-select:none; -webkit-tap-highlight-color:transparent;
}
.lang-btn:hover { background:var(--gl2); border-color:var(--p); }
.lang-btn[aria-expanded="true"] { border-color:var(--p); background:var(--gl2); }
.lang-btn[aria-expanded="true"] .lchev { transform:rotate(180deg); }
.lf { font-size:17px; line-height:1; }
.lchev { font-size:9px; color:var(--tx3); transition:transform var(--tr); }
.lang-menu {
  position:absolute; top:calc(100% + 6px); right:0;
  background:var(--bg3); border:1px solid var(--bd2);
  border-radius:13px; overflow:hidden; box-shadow:var(--shb);
  min-width:152px; display:none; z-index:999;
}
.lang-menu.open { display:block; animation:popIn .18s ease; }
@keyframes popIn { from { opacity:0; transform:translateY(-7px) scale(0.96);} to { opacity:1; transform:translateY(0) scale(1);} }
.lang-opt {
  display:flex; align-items:center; gap:9px;
  padding:9px 13px; cursor:pointer; font-size:13px; font-weight:500;
  color:var(--tx2); transition:background var(--tr); text-decoration:none;
  font-family:'Inter','Noto Menu',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
.lang-opt:hover { background:var(--gl2); color:var(--tx); }
.lang-opt.sel { background:rgba(124,58,237,0.15); color:var(--p3); }
.lang-opt .lf { font-size:15px; }

/* tool sub-nav: always a single-row horizontal scroller. edge fades are toggled by JS. */
.subnav { position:relative; border-bottom:1px solid var(--bd); background:rgba(9,9,15,0.6); }
.subnav::before, .subnav::after {
  content:''; position:absolute; top:0; bottom:1px; width:34px; pointer-events:none; z-index:2;
  opacity:0; transition:opacity .18s;
}
.subnav::before { left:0;  background:linear-gradient(to left,  rgba(9,9,15,0), var(--bg)); }
.subnav::after  { right:0; background:linear-gradient(to right, rgba(9,9,15,0), var(--bg)); }
.subnav.ovf:not(.at-start)::before { opacity:1; }
.subnav.ovf:not(.at-end)::after  { opacity:1; }
.subnav-in {
  max-width:880px; margin:0 auto; padding:8px 16px;
  display:flex; gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; scroll-snap-type:x proximity; overscroll-behavior-x:contain;
}
.subnav-in::-webkit-scrollbar { display:none; }
.subnav a {
  flex:0 0 auto; display:flex; align-items:center; gap:6px;
  padding:8px 13px; border-radius:9px; text-decoration:none; scroll-snap-align:start;
  font-size:12.5px; font-weight:700; color:var(--tx2);
  border:1px solid var(--bd); background:var(--gl); white-space:nowrap;
  transition:color var(--tr), border-color var(--tr), background var(--tr);
}
.subnav a:hover { color:var(--tx); border-color:var(--p); }
.subnav a.on { color:#fff; background:linear-gradient(135deg,var(--p),var(--p2)); border-color:transparent; }
.subnav a .em { font-size:14px; }

/* From tablet width up there's room to show every page at once: wrap to as many rows as
   needed instead of hiding options behind a horizontal scroll. Phones keep the single
   swipeable row above (it signals "there's more here" without eating vertical space, and a
   hamburger would hide that signal entirely). */
@media (min-width:700px) {
  .subnav-in { flex-wrap:wrap; overflow-x:visible; scroll-snap-type:none; justify-content:center; }
  .subnav::before, .subnav::after { display:none; }
}

main { max-width:880px; margin:0 auto; padding:20px 16px 80px; position:relative; z-index:1; }

.crumbs { font-size:11.5px; color:var(--tx3); margin:2px 0 6px; }
.crumbs a { color:var(--tx3); text-decoration:none; }
.crumbs a:hover { color:var(--tx2); text-decoration:underline; }

.hero { text-align:center; padding:26px 0 20px; }
h1 {
  font-size:clamp(20px, 5.2vw, 42px); font-weight:900; line-height:1.14; overflow-wrap:break-word;
  background:linear-gradient(130deg, #fff 0%, var(--p3) 40%, var(--pk) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  margin-bottom:10px;
}
.hero-p { color:var(--tx2); font-size:clamp(13px, 2.3vw, 15px); max-width:560px; margin:0 auto; line-height:1.7; }

.tabs { display:flex; gap:4px; padding:4px; margin-bottom:18px; background:var(--gl); border:1px solid var(--bd); border-radius:14px; }
.tab {
  flex:1; padding:11px 16px; background:none; border:none;
  border-radius:10px; color:var(--tx2); cursor:pointer;
  font-family:'Inter',sans-serif; font-size:13.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center; gap:7px;
  transition:all var(--tr); -webkit-tap-highlight-color:transparent;
}
.tab:hover { color:var(--tx); background:rgba(255,255,255,0.04); }
.tab.on { background:linear-gradient(135deg, var(--p), var(--p2)); color:#fff; box-shadow:0 4px 16px rgba(124,58,237,0.4); }
.tab-ic { font-size:18px; }
.panel { display:none; }
.panel.on { display:block; animation:slUp .26s ease; }
@keyframes slUp { from { opacity:0; transform:translateY(12px);} to { opacity:1; transform:translateY(0);} }

.card { background:var(--gl); border:1px solid var(--bd); border-radius:var(--r); padding:20px; margin-bottom:14px; }
.card-hd { font-size:14.5px; font-weight:800; color:var(--tx); margin-bottom:16px; display:flex; align-items:center; gap:8px; }
h2.card-hd { line-height:1.3; }

.pw-box {
  background:rgba(0,0,0,0.4); border:2px solid var(--bd);
  border-radius:13px; padding:18px 16px;
  min-height:74px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:border-color var(--tr); margin-bottom:13px;
  position:relative; overflow:hidden;
}
.pw-box::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg, rgba(124,58,237,0.05), transparent); opacity:0; transition:opacity var(--tr); }
.pw-box:hover { border-color:var(--p); }
.pw-box:hover::after { opacity:1; }
#pwText {
  font-family:'JetBrains Mono','Courier New',monospace;
  font-size:clamp(13px, 3.8vw, 22px); font-weight:700;
  word-break:break-all; letter-spacing:1.2px; line-height:1.6;
  text-align:center; user-select:all; position:relative; z-index:1;
}
.pw-empty { color:var(--tx3); font-style:italic; font-family:'Inter',sans-serif; font-weight:400; font-size:14px; letter-spacing:0; }
.pw-actions { display:flex; gap:8px; flex-wrap:wrap; }

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:11px 18px; border:none; border-radius:10px;
  cursor:pointer; font-family:'Inter',sans-serif; font-size:13.5px; font-weight:700;
  transition:all var(--tr); white-space:nowrap;
  -webkit-tap-highlight-color:transparent; position:relative; overflow:hidden;
  text-decoration:none;
}
.btn-p { background:linear-gradient(135deg, var(--p), var(--p2)); color:#fff; flex:1; box-shadow:0 4px 16px rgba(124,58,237,0.32); }
.btn-p:hover { transform:translateY(-2px); box-shadow:0 7px 22px rgba(124,58,237,0.5); }
.btn-p:active { transform:translateY(0); }
.btn-s { background:var(--gl); color:var(--tx); border:1px solid var(--bd); }
.btn-s:hover { background:var(--gl2); border-color:var(--p); color:var(--p3); }
.btn-w { width:100%; margin-top:11px; }

.str-wrap { margin-top:16px; }
.str-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.str-lbl { font-size:11.5px; font-weight:700; color:var(--tx2); text-transform:uppercase; letter-spacing:0.6px; }
.str-badge { font-size:12px; font-weight:800; padding:3px 11px; border-radius:20px; transition:all .35s; }
.str-bars { display:flex; gap:4px; height:5px; }
.str-bar { flex:1; border-radius:5px; background:rgba(255,255,255,0.07); transition:background .4s; }

.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:14px; }
.stats.stats-3 { grid-template-columns:repeat(3,1fr); }
.pin-note { margin-top:20px; font-size:11.5px; line-height:1.6; color:var(--tx3); text-align:center; }
.content .pin-common { display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 14px; padding-left:0; }
.content .pin-common code { font-size:12.5px; padding:4px 8px; }
.check-link { margin:0 0 14px; }
.check-link a { display:block; text-align:center; padding:11px 14px; border:1px dashed var(--bd2);
  border-radius:12px; font-size:12.5px; font-weight:700; color:var(--p3); text-decoration:none; transition:all var(--tr); }
.check-link a:hover { border-color:var(--p); background:var(--gl); }
.content.gloss dl { margin:0 0 6px; }
.content.gloss dt { font-weight:700; color:var(--tx); font-size:14px; margin:16px 0 3px; scroll-margin-top:110px; }
.content.gloss dt:target { color:var(--p3); }
.content.gloss dd { margin:0; color:var(--tx2); font-size:13.5px; line-height:1.7; }
.content .seealso { margin:20px 0 0; padding-top:14px; border-top:1px solid var(--bd); font-size:12.5px; line-height:1.9; color:var(--tx3); }
.content .seealso strong { color:var(--tx2); font-weight:700; }
.content .seealso a { color:var(--p3); text-decoration:none; }
.content .seealso a:hover { text-decoration:underline; }
.stat { background:rgba(0,0,0,0.3); border:1px solid var(--bd); border-radius:11px; padding:12px 8px; text-align:center; }
.sv { font-family:'JetBrains Mono','Courier New',monospace; font-size:clamp(11px,3.1vw,15px); font-weight:700; color:var(--p3); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sl { font-size:10px; color:var(--tx3); margin-top:3px; display:block; text-transform:uppercase; letter-spacing:0.4px; }

.sl-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.sl-lbl { font-size:14px; font-weight:600; color:var(--tx2); }
.sl-val { font-family:'JetBrains Mono',monospace; font-size:24px; font-weight:800; color:var(--p3); }
.sl-ends { display:flex; justify-content:space-between; margin-top:5px; }
.sl-end { font-size:10.5px; color:var(--tx3); font-weight:600; }

input[type=range] { width:100%; height:5px; -webkit-appearance:none; appearance:none; border-radius:5px; outline:none; cursor:pointer; background:rgba(255,255,255,0.08); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:linear-gradient(135deg, var(--p), var(--pk)); box-shadow:0 2px 10px rgba(124,58,237,0.5); cursor:pointer; transition:transform var(--tr); border:none; }
input[type=range]::-moz-range-thumb { width:20px; height:20px; border-radius:50%; background:linear-gradient(135deg, var(--p), var(--pk)); box-shadow:0 2px 10px rgba(124,58,237,0.5); cursor:pointer; border:none; }
input[type=range]::-webkit-slider-thumb:hover { transform:scale(1.18); }

.opts { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.opt { display:flex; align-items:center; gap:10px; background:rgba(0,0,0,0.25); border:1px solid var(--bd); border-radius:11px; padding:11px 13px; cursor:pointer; transition:all var(--tr); user-select:none; -webkit-tap-highlight-color:transparent; }
.opt:hover { border-color:var(--p); background:rgba(124,58,237,0.06); }
.opt.on { border-color:var(--p); background:rgba(124,58,237,0.1); }
.tgl { width:36px; height:20px; border-radius:20px; background:var(--bg4); position:relative; flex-shrink:0; transition:background .3s; border:1px solid var(--bd2); }
.tgl::after { content:''; position:absolute; top:3px; left:3px; width:12px; height:12px; border-radius:50%; background:var(--tx3); transition:all .25s; }
.opt.on .tgl { background:var(--p); border-color:var(--p); }
.opt.on .tgl::after { left:calc(100% - 15px); background:#fff; }
.opt-ic { font-size:17px; }
.opt-lbl { font-size:12.5px; font-weight:600; color:var(--tx2); flex:1; }
.opt.on .opt-lbl { color:var(--tx); }

.adv-toggle { display:flex; align-items:center; gap:7px; color:var(--tx3); font-size:12.5px; font-weight:700; cursor:pointer; padding:4px 0; user-select:none; -webkit-tap-highlight-color:transparent; letter-spacing:0.3px; }
.adv-toggle:hover { color:var(--tx2); }
.adv-chev { font-size:10px; transition:transform var(--tr); }
.adv-toggle.open .adv-chev { transform:rotate(90deg); }
.adv-inner { display:none; padding-top:14px; }
.adv-inner.open { display:block; animation:slUp .2s ease; }

.form-lbl { font-size:12px; font-weight:700; color:var(--tx3); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:7px; }
.form-inp { width:100%; background:rgba(0,0,0,0.35); border:1px solid var(--bd); border-radius:9px; padding:10px 13px; color:var(--tx); font-family:'JetBrains Mono',monospace; font-size:13px; outline:none; transition:border-color var(--tr); }
.form-inp:focus { border-color:var(--p); }
.form-inp::placeholder { color:var(--tx3); font-family:'Inter',sans-serif; }
.adv-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:13px; }

.bulk-list { background:rgba(0,0,0,0.35); border:1px solid var(--bd); border-radius:11px; padding:12px; font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--tx2); max-height:240px; overflow-y:auto; line-height:2.1; word-break:break-all; display:none; }
.bulk-list.show { display:block; }
.bulk-item { padding:3px 0; border-bottom:1px solid var(--bd); }
.bulk-item:last-child { border:none; }

.chk-inp-wrap { position:relative; margin-bottom:16px; }
.chk-inp { width:100%; background:rgba(0,0,0,0.4); border:2px solid var(--bd); border-radius:13px; padding:16px 52px 16px 18px; color:var(--tx); font-family:'JetBrains Mono',monospace; font-size:clamp(14px, 3.5vw, 18px); outline:none; transition:border-color var(--tr); font-weight:600; }
.chk-inp:focus { border-color:var(--p); }
.chk-inp::placeholder { font-family:'Inter',sans-serif; color:var(--tx3); font-weight:400; font-size:14px; }
.eye-btn { position:absolute; right:14px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; color:var(--tx3); font-size:20px; padding:4px; transition:color var(--tr); -webkit-tap-highlight-color:transparent; }
.eye-btn:hover { color:var(--tx); }

.chk-metrics { display:grid; gap:10px; }
.metric { background:rgba(0,0,0,0.3); border:1px solid var(--bd); border-radius:12px; padding:14px; display:flex; align-items:center; gap:13px; }
.metric-ic { font-size:24px; flex-shrink:0; }
.metric-info { flex:1; }
.metric-lbl { font-size:11px; color:var(--tx3); font-weight:700; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:3px; }
.metric-val { font-size:16px; font-weight:800; color:var(--tx); }
.metric-sub { font-size:11px; color:var(--tx3); margin-top:2px; }

.warn-list { margin-top:14px; display:flex; flex-direction:column; gap:7px; }
.warn { display:flex; align-items:center; gap:9px; padding:10px 13px; border-radius:10px; font-size:12.5px; font-weight:600; border:1px solid transparent; }
.warn-ok  { background:rgba(16,185,129,0.08); border-color:rgba(16,185,129,0.2); color:#6ee7b7; }
.warn-bad { background:rgba(239,68,68,0.08);  border-color:rgba(239,68,68,0.2);  color:#fca5a5; }
.warn-mid { background:rgba(251,191,36,0.08); border-color:rgba(251,191,36,0.2); color:#fde68a; }

.toast { position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(80px); background:var(--gr); color:#fff; font-weight:700; font-size:13.5px; padding:11px 22px; border-radius:30px; z-index:9999; box-shadow:0 6px 24px rgba(16,185,129,0.4); transition:transform .35s cubic-bezier(0.34,1.56,0.64,1), opacity .35s; opacity:0; white-space:nowrap; pointer-events:none; }
.toast.show { transform:translateX(-50%) translateY(0); opacity:1; }

/* long-form content */
.content { margin-top:32px; padding-top:28px; border-top:1px solid var(--bd); }
.content h2 { font-size:19px; font-weight:800; line-height:1.3; margin:28px 0 10px; color:var(--tx); background:none; -webkit-text-fill-color:currentColor; -webkit-background-clip:border-box; background-clip:border-box; scroll-margin-top:110px; }
.content h2:first-of-type { margin-top:0; }
.content h3 { font-size:15px; font-weight:700; margin:18px 0 8px; color:var(--tx); }
.content p { color:var(--tx2); font-size:13.5px; line-height:1.75; margin-bottom:11px; }
.content ul,.content ol { margin:0 0 14px; padding-left:20px; color:var(--tx2); font-size:13.5px; line-height:1.7; }
.content li { margin-bottom:6px; }
.content strong { color:var(--tx); font-weight:700; }
.content em { color:var(--tx); font-style:normal; background:var(--gl); padding:0 4px; border-radius:4px; }
.content code { font-family:'JetBrains Mono',monospace; font-size:12px; background:var(--gl); padding:1px 5px; border-radius:4px; color:var(--p3); }
.content a[target=_blank] { color:var(--p3); text-decoration:underline; text-underline-offset:2px; }

.toc { margin:0 0 22px; padding:14px 16px; border:1px solid var(--bd); border-radius:12px; background:var(--gl); }
.toc strong { display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--tx3); margin-bottom:8px; }
.toc ul { margin:0; padding-left:18px; font-size:13px; line-height:1.9; }
.toc a { color:var(--p3); text-decoration:none; }
.toc a:hover { text-decoration:underline; }

.faq-section { border-top:1px solid var(--bd); padding-top:32px; margin-bottom:32px; }
.faq-section h2 { font-size:13px; font-weight:700; color:var(--tx3); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:6px; background:none; -webkit-text-fill-color:currentColor; }
.faq-section .q { font-size:14.5px; font-weight:700; color:var(--tx); margin:16px 0 5px; letter-spacing:0; text-transform:none; }
.faq-section p { font-size:13px; color:var(--tx2); line-height:1.75; margin-bottom:6px; }

/* related tools grid */
.related { border-top:1px solid var(--bd); padding-top:26px; margin-bottom:30px; }
.related > strong { display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--tx3); margin-bottom:12px; }
.rel-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px; }
.rel-card { display:flex; align-items:center; gap:11px; padding:13px 14px; border:1px solid var(--bd); border-radius:12px; background:var(--gl); text-decoration:none; transition:all var(--tr); }
.rel-card:hover { border-color:var(--p); background:var(--gl2); }
.rel-card .em { font-size:20px; flex-shrink:0; }
.rel-card b { display:block; font-size:13px; font-weight:700; color:var(--tx); }
.rel-card span { display:block; font-size:11px; color:var(--tx3); margin-top:1px; }

/* best-password-managers comparison page */
.content .disclosure { font-size:12px; color:var(--tx3); background:var(--gl); border:1px solid var(--bd);
  border-radius:var(--rs); padding:12px 14px; margin:0 0 22px; line-height:1.6; }
.recs-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; margin:0 0 28px; }
.rec-card { display:flex; flex-direction:column; background:var(--gl); border:1px solid var(--bd); border-radius:var(--r); padding:18px; }
.rec-card.rec-primary { border-color:var(--p); box-shadow:0 0 0 1px var(--p) inset; }
.rec-card h2 { font-size:16px; margin:0 0 4px; }
.rec-card .rec-tag { font-size:12px; color:var(--tx3); margin-bottom:10px; }
.rec-card ul { margin:0 0 12px; padding-left:18px; flex:1; }
.rec-card li { font-size:12.5px; }
.rec-card .rec-price { font-size:12px; color:var(--tx2); font-weight:600; margin-bottom:12px; }
.rec-card .rec-note { font-size:11.5px; color:var(--tx3); background:var(--gl2); border-radius:8px; padding:8px 10px; margin-bottom:12px; line-height:1.6; }
.rec-badge { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--p3);
  background:rgba(124,58,237,0.15); padding:2px 7px; border-radius:20px; vertical-align:middle; }
.rec-cta { text-align:center; text-decoration:none; margin-top:auto; }

/* head-to-head comparison pages */
.cmp-table-wrap { overflow-x:auto; margin:8px 0 18px; border:1px solid var(--bd); border-radius:var(--r); }
.cmp-table { width:100%; border-collapse:collapse; font-size:13px; white-space:nowrap; }
.cmp-table th, .cmp-table td { padding:10px 14px; text-align:left; border-bottom:1px solid var(--bd); }
.cmp-table thead th { color:var(--tx); font-weight:700; background:var(--gl); position:sticky; top:0; }
.cmp-table tbody th { color:var(--tx3); font-weight:600; white-space:nowrap; }
.cmp-table tbody td { color:var(--tx2); }
.cmp-table tbody tr:last-child th, .cmp-table tbody tr:last-child td { border-bottom:none; }
.cmp-ctas { display:flex; gap:10px; margin-bottom:18px; }
.cmp-ctas .btn { flex:1; text-align:center; text-decoration:none; }

/* TOTP code + countdown */
.totp-code-wrap { text-align:center; padding:6px 0 2px; }
.totp-code { font-family:'JetBrains Mono',monospace; font-size:40px; font-weight:700; letter-spacing:6px; color:var(--tx); margin-bottom:16px; }
.totp-bar-track { height:6px; border-radius:3px; background:var(--gl); overflow:hidden; }
.totp-bar { height:100%; width:100%; background:linear-gradient(90deg,var(--p),var(--p2)); transition:width 1s linear; }

/* hash generator */
.hash-textarea { width:100%; resize:vertical; min-height:88px; font-family:'JetBrains Mono',monospace; font-size:13px; line-height:1.5; padding-right:18px !important; font-weight:400; }
.hash-row { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--bd); }
.hash-row:last-child { border-bottom:none; }
.hash-algo { flex:0 0 78px; font-size:12px; font-weight:700; color:var(--tx3); }
.hash-val { flex:1; min-width:0; font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--p3);
  background:var(--gl); border-radius:8px; padding:8px 10px; overflow-x:auto; white-space:nowrap;
  cursor:pointer; transition:background var(--tr); }
.hash-val:hover { background:var(--gl2); }
@media(max-width:560px) {
  .hash-algo { flex-basis:58px; font-size:11px; }
  .hash-val { font-size:11px; }
}

footer { text-align:center; padding:0 16px 32px; color:var(--tx3); font-size:11.5px; position:relative; z-index:1; }
footer a { color:var(--tx2); }
footer .fnav { display:flex; flex-wrap:wrap; justify-content:center; gap:7px 14px; margin-bottom:16px; }
footer .fnav a { color:var(--tx3); text-decoration:none; font-weight:600; font-size:12px; }
footer .fnav a:hover { color:var(--p3); }

@media(max-width:560px) {
  .stats, .stats.stats-3 { grid-template-columns:repeat(2,1fr); }
  .opts  { grid-template-columns:1fr; }
  .adv-grid { grid-template-columns:1fr; }
  .pw-actions { flex-direction:column; }
  .btn-p { flex:unset; }
  .card { padding:16px; }
  main { padding:16px 12px 64px; }
  .rel-grid { grid-template-columns:1fr; }
  .recs-grid { grid-template-columns:1fr; }
  .cmp-ctas { flex-direction:column; }
  .metric { padding:12px; gap:11px; }
  .metric-ic { font-size:20px; }
}
@media(max-width:430px) {
  .tab { padding:9px 6px; font-size:11.5px; gap:3px; }
  .tab-ic { font-size:14px; }
  .hero { padding:20px 0 16px; }
  .stat { padding:11px 6px; }
}
@media(max-width:380px) {
  .hdr { gap:8px; padding:10px 12px; }
  .logo-txt { font-size:13px; }
  .logo-ico { width:34px; height:34px; font-size:17px; }
  .subnav a { padding:8px 10px; font-size:12px; }
  .tabs .tab-ic { display:none; }
  .tab { font-size:12px; padding:10px 6px; }
}

/* CJK pages set <html data-cjk="sc|jp"> */
html[data-cjk] .str-lbl,html[data-cjk] .sl,html[data-cjk] .sl-lbl,html[data-cjk] .form-lbl,
html[data-cjk] .metric-lbl,html[data-cjk] .logo-sub,html[data-cjk] .str-badge,
html[data-cjk] .toc strong,html[data-cjk] .related > strong { letter-spacing:normal; }
html[data-cjk] h1 { line-height:1.28; }
html[data-cjk="sc"] body,html[data-cjk="sc"] button,html[data-cjk="sc"] input,html[data-cjk="sc"] select,html[data-cjk="sc"] textarea { font-family:'Noto Sans SC','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif; }
html[data-cjk="jp"] body,html[data-cjk="jp"] button,html[data-cjk="jp"] input,html[data-cjk="jp"] select,html[data-cjk="jp"] textarea { font-family:'Noto Sans JP','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI','Hiragino Sans','Yu Gothic','Meiryo',sans-serif; }
html[data-cjk="sc"] #pwText,html[data-cjk="sc"] .chk-inp,html[data-cjk="sc"] .form-inp,html[data-cjk="sc"] .bulk-list { font-family:'JetBrains Mono','Noto Sans SC',monospace; }
html[data-cjk="jp"] #pwText,html[data-cjk="jp"] .chk-inp,html[data-cjk="jp"] .form-inp,html[data-cjk="jp"] .bulk-list { font-family:'JetBrains Mono','Noto Sans JP',monospace; }
html[data-cjk="sc"] .chk-inp::placeholder,html[data-cjk="sc"] .form-inp::placeholder { font-family:'Noto Sans SC',sans-serif; }
html[data-cjk="jp"] .chk-inp::placeholder,html[data-cjk="jp"] .form-inp::placeholder { font-family:'Noto Sans JP',sans-serif; }