/* =================================================================
   Password Generator — Anavem
   Complete stylesheet with dark mode support
   ================================================================= */

/* ── Reset & Variables ────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg0:#f8fafc;--bg1:#ffffff;--bg2:#f1f5f9;--bg3:#e2e8f0;
  --tx0:#0f172a;--tx1:#475569;--tx2:#94a3b8;
  --cyan:#06b6d4;--cyan-l:#0891b2;--cyan-d:#0e7490;
  --purple:#8b5cf6;--purple-l:#7c3aed;
  --brd:#e2e8f0;--brd2:#cbd5e1;
  --crit:#ef4444;--err:#f97316;--warn:#eab308;--info:#06b6d4;--verb:#94a3b8;
  --sans:'Inter',ui-sans-serif,system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --hdr-bg:rgba(255,255,255,.95);
  --shadow:0 1px 3px rgba(0,0,0,.06);
  --radius:6px;
  /* Strength colors */
  --s-weak:#ef4444;
  --s-fair:#f97316;
  --s-good:#eab308;
  --s-strong:#22c55e;
  --s-vstrong:#06b6d4;
}

/* ── Dark Mode ────────────────────────────────────────────────── */
body.dark{
  --bg0:#0f172a;--bg1:#1e293b;--bg2:#1e293b;--bg3:#334155;
  --tx0:#f1f5f9;--tx1:#cbd5e1;--tx2:#64748b;
  --brd:#334155;--brd2:#475569;
  --hdr-bg:rgba(15,23,42,.95);
  --shadow:0 1px 3px rgba(0,0,0,.3);
}
body.dark .lang-btn.on{background:var(--cyan);color:#0f172a}
body.dark .btn-p{background:var(--cyan);color:#0f172a}
body.dark .pb.on{background:var(--cyan);color:#0f172a}
body.dark .tab-btn.on{background:var(--cyan);color:#0f172a;border-color:var(--cyan)}
body.dark .pw-display{background:var(--bg0);border-color:var(--brd2)}
body.dark .pw-display:hover{border-color:var(--cyan);background:rgba(6,182,212,.06)}
body.dark .opt-card{background:var(--bg0)}
body.dark input[type=range]::-webkit-slider-thumb{background:var(--cyan)}
body.dark input[type=range]::-moz-range-thumb{background:var(--cyan)}
body.dark .checker-input{background:var(--bg0);color:var(--tx0);border-color:var(--brd2)}
body.dark .tip-card{background:var(--bg0)}
body.dark .privacy-note{background:rgba(6,182,212,.08);border-color:rgba(6,182,212,.2)}

/* ── Base ─────────────────────────────────────────────────────── */
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--bg0);color:var(--tx0);line-height:1.6;min-height:100vh;display:flex;flex-direction:column;transition:background .3s,color .3s}
a{color:var(--cyan);text-decoration:none;transition:color .2s}
a:hover{color:var(--cyan-l)}

/* ── Header ───────────────────────────────────────────────────── */
.hdr{position:sticky;top:0;z-index:50;background:var(--hdr-bg);backdrop-filter:blur(16px);border-bottom:1px solid var(--brd);transition:background .3s}
.hdr-top{border-bottom:1px solid var(--brd);background:var(--bg2)}
.hdr-top-in{max-width:1400px;margin:0 auto;padding:0 1.5rem;height:28px;display:flex;align-items:center;justify-content:space-between}
.hdr-top-l{display:flex;align-items:center;gap:.5rem;font-size:.6rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--tx2)}
.hdr-top-l .dot{width:5px;height:5px;border-radius:50%;background:var(--cyan);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.hdr-top-r{display:flex;align-items:center;gap:1rem}
.hdr-top-r a{font-size:.6rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--tx2);transition:color .2s}.hdr-top-r a:hover{color:var(--tx0)}
.hdr-in{max-width:1400px;margin:0 auto;padding:0 1.5rem;height:56px;display:flex;align-items:center;justify-content:space-between}
.hdr-l{display:flex;align-items:center;gap:.75rem}
.logo{font-size:1.35rem;font-weight:900;letter-spacing:-.04em;text-decoration:none}
.logo-g{background:linear-gradient(135deg,var(--cyan),var(--purple));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.logo-t{color:var(--tx0);-webkit-text-fill-color:var(--tx0)}
.logo:hover .logo-t{color:var(--cyan);-webkit-text-fill-color:var(--cyan)}
.badge{font-size:.55rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--bg1);background:var(--cyan);padding:2px 8px}
.hdr-nav{display:flex;align-items:center;gap:.25rem}
.hdr-nav a{font-size:.8rem;font-weight:600;color:var(--tx1);padding:.4rem .75rem;transition:all .2s;text-decoration:none;display:flex;align-items:center;gap:.35rem}
.hdr-nav a:hover{color:var(--cyan);background:rgba(6,182,212,.06)}
.hdr-nav a svg{width:14px;height:14px}
.hdr-r{display:flex;align-items:center;gap:.5rem}

/* ── Theme Toggle ─────────────────────────────────────────────── */
.btn-theme{background:0;border:1px solid var(--brd);padding:5px;cursor:pointer;color:var(--tx2);display:flex;align-items:center;transition:all .2s}
.btn-theme:hover{border-color:var(--cyan);color:var(--cyan)}
.btn-theme svg{width:16px;height:16px}

/* ── Language Toggle ──────────────────────────────────────────── */
.lang-toggle{display:flex;border:1px solid var(--brd);overflow:hidden}
.lang-btn{font-family:var(--sans);font-size:.65rem;font-weight:800;padding:3px 8px;background:transparent;color:var(--tx2);border:none;cursor:pointer;transition:all .2s;text-transform:uppercase;letter-spacing:.05em}
.lang-btn.on{background:var(--tx0);color:var(--bg0)}
.lang-btn:hover:not(.on){color:var(--tx0)}

/* ── Back Link ────────────────────────────────────────────────── */
.bk{display:flex;align-items:center;gap:.35rem;font-size:.75rem;font-weight:700;color:var(--tx1);transition:color .2s;text-decoration:none}.bk:hover{color:var(--cyan)}
.bk svg{width:16px;height:16px}

/* ── Nav Toggle (hamburger) ───────────────────────────────────── */
.nav-toggle{display:none;background:0;border:1px solid var(--brd);padding:6px;cursor:pointer;color:var(--tx1);align-items:center;justify-content:center;transition:border-color .2s,color .2s}
.nav-toggle:hover{border-color:var(--cyan);color:var(--cyan)}
.nav-toggle svg{display:block}

/* ── Buttons ──────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--sans);font-size:.85rem;font-weight:600;padding:.5rem 1rem;border:1px solid var(--brd);background:0;color:var(--tx0);cursor:pointer;transition:all .2s}
.btn:hover{border-color:var(--cyan);color:var(--cyan)}
.btn-p{background:var(--cyan);border-color:var(--cyan);color:#fff}.btn-p:hover{background:var(--cyan-l);border-color:var(--cyan-l)}
.btn svg{width:16px;height:16px}
.btn-sm{font-size:.75rem;padding:.35rem .75rem}
.btn-icon{padding:.4rem;gap:0;background:0}

/* ── Main Container ───────────────────────────────────────────── */
.mc{max-width:1100px;margin:0 auto;padding:1.5rem;width:100%;flex:1}

/* ── Page Header ──────────────────────────────────────────────── */
.pg-hdr{text-align:center;padding:2.5rem 1rem 2rem}
.pg-hdr h1{font-size:2rem;font-weight:900;text-transform:uppercase;letter-spacing:-.02em;margin-bottom:.5rem;line-height:1.1}
.pg-hdr .sub{color:var(--tx1);font-size:.95rem;max-width:560px;margin:0 auto 1.5rem}

/* ── Privacy Note ─────────────────────────────────────────────── */
.privacy-note{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.6rem 1rem;background:rgba(6,182,212,.06);border:1px solid rgba(6,182,212,.15);max-width:600px;margin:0 auto;font-size:.78rem;color:var(--cyan-d);font-weight:600}
.privacy-note svg{width:14px;height:14px;flex-shrink:0;color:var(--cyan)}
body.dark .privacy-note{color:var(--cyan)}

/* ── Tabs ─────────────────────────────────────────────────────── */
.tabs{display:flex;gap:2px;margin:1.5rem 0 1rem;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px}
.tab-btn{font-family:var(--sans);font-size:.8rem;font-weight:700;padding:.5rem 1.25rem;border:1px solid var(--brd);background:var(--bg2);color:var(--tx1);cursor:pointer;white-space:nowrap;transition:all .2s;text-transform:uppercase;letter-spacing:.04em}
.tab-btn:hover{border-color:var(--cyan);color:var(--cyan)}
.tab-btn.on{background:var(--tx0);color:var(--bg0);border-color:var(--tx0)}
.tab-pane{display:none}.tab-pane.on{display:block}

/* ── Tool Layout ──────────────────────────────────────────────── */
.tool-layout{display:grid;grid-template-columns:1fr 340px;gap:1.5rem;align-items:start}

/* ── Options Card ─────────────────────────────────────────────── */
.opt-card{background:var(--bg1);border:1px solid var(--brd);padding:1.5rem;margin-bottom:1rem;transition:background .3s}
.opt-title{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--tx2);margin-bottom:1rem}

/* ── Slider ───────────────────────────────────────────────────── */
.slider-row{display:flex;align-items:center;gap:1rem;margin-bottom:1.25rem}
.slider-label{font-size:.85rem;font-weight:600;color:var(--tx1);min-width:80px}
.slider-wrap{flex:1;display:flex;align-items:center;gap:.75rem}
input[type=range]{flex:1;-webkit-appearance:none;appearance:none;height:4px;background:var(--bg3);border-radius:2px;outline:none;cursor:pointer;transition:background .2s}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--cyan);cursor:pointer;border:2px solid var(--bg1);transition:transform .1s}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--cyan);cursor:pointer;border:2px solid var(--bg1)}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}
.slider-val{font-family:var(--mono);font-size:.9rem;font-weight:700;color:var(--cyan);min-width:28px;text-align:right}

/* ── Checkboxes ───────────────────────────────────────────────── */
.checks-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem .75rem;margin-bottom:1.25rem}
.check-item{display:flex;align-items:center;gap:.5rem;cursor:pointer;user-select:none}
.check-item input[type=checkbox]{-webkit-appearance:none;appearance:none;width:16px;height:16px;border:1.5px solid var(--brd2);background:var(--bg1);cursor:pointer;transition:all .15s;flex-shrink:0;position:relative}
.check-item input[type=checkbox]:checked{background:var(--cyan);border-color:var(--cyan)}
.check-item input[type=checkbox]:checked::after{content:'';position:absolute;left:3px;top:1px;width:8px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
.check-item input[type=checkbox]:focus{outline:none;border-color:var(--cyan)}
.check-item .check-label{font-size:.82rem;color:var(--tx1);font-weight:500}
.check-item .check-mono{font-family:var(--mono);font-size:.7rem;color:var(--tx2)}

/* ── Generate Buttons ─────────────────────────────────────────── */
.gen-row{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.25rem}
.gen-btn{flex:1;justify-content:center;padding:.6rem;font-size:.8rem}

/* ── Password Output ──────────────────────────────────────────── */
.pw-output{margin-bottom:1rem}
.pw-item{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}
.pw-display{flex:1;font-family:var(--mono);font-size:1.1rem;font-weight:500;padding:.75rem 1rem;background:var(--bg2);border:1px solid var(--brd);color:var(--tx0);word-break:break-all;cursor:pointer;transition:all .2s;line-height:1.5;min-height:52px;display:flex;align-items:center}
.pw-display:hover{border-color:var(--cyan);background:rgba(6,182,212,.04)}
.pw-display.copied{border-color:#22c55e;background:rgba(34,197,94,.06)}
.pw-display.selected{border-color:var(--cyan)}
.pw-copy-btn{flex-shrink:0;padding:.65rem;gap:0;border:1px solid var(--brd);background:0;color:var(--tx2);cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}
.pw-copy-btn:hover{border-color:var(--cyan);color:var(--cyan)}
.pw-copy-btn.copied{border-color:#22c55e;color:#22c55e}
.pw-copy-btn svg{width:16px;height:16px;flex-shrink:0}

/* ── Eye / Show Toggle ────────────────────────────────────────── */
.pw-eye-btn{flex-shrink:0;padding:.65rem;gap:0;border:1px solid var(--brd);background:0;color:var(--tx2);cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}
.pw-eye-btn:hover{border-color:var(--cyan);color:var(--cyan)}
.pw-eye-btn.on{border-color:var(--cyan);color:var(--cyan)}
.pw-eye-btn svg{width:16px;height:16px}

/* ── Strength Meter ───────────────────────────────────────────── */
.strength-wrap{border:1px solid var(--brd);background:var(--bg1);padding:1rem 1.25rem;margin-bottom:1rem}
.strength-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.6rem}
.strength-label{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--tx2)}
.strength-name{font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.strength-name.weak{color:var(--s-weak)}
.strength-name.fair{color:var(--s-fair)}
.strength-name.good{color:var(--s-good)}
.strength-name.strong{color:var(--s-strong)}
.strength-name.vstrong{color:var(--s-vstrong)}
.strength-bar-bg{height:6px;background:var(--bg3);border-radius:3px;overflow:hidden;margin-bottom:.75rem}
.strength-bar{height:100%;border-radius:3px;transition:width .4s ease,background .4s ease;width:0%}
.strength-bar.weak{background:var(--s-weak)}
.strength-bar.fair{background:var(--s-fair)}
.strength-bar.good{background:var(--s-good)}
.strength-bar.strong{background:var(--s-strong)}
.strength-bar.vstrong{background:var(--s-vstrong)}
.strength-meta{display:flex;gap:1.5rem;flex-wrap:wrap}
.strength-stat{font-size:.75rem;color:var(--tx2)}
.strength-stat strong{color:var(--tx0);font-family:var(--mono);font-weight:700}
.strength-tip{font-size:.78rem;color:var(--tx1);margin-top:.5rem;font-style:italic}

/* ── Crack Time ───────────────────────────────────────────────── */
.crack-time{font-size:.78rem;color:var(--tx1);margin-top:.5rem}
.crack-time strong{color:var(--tx0);font-weight:700}

/* ── Sidebar Info Card ────────────────────────────────────────── */
.info-card{background:var(--bg1);border:1px solid var(--brd);padding:1.25rem;margin-bottom:1rem}
.info-card-title{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--tx2);margin-bottom:.75rem}
.info-list{list-style:none;display:flex;flex-direction:column;gap:.5rem}
.info-list li{display:flex;align-items:flex-start;gap:.5rem;font-size:.8rem;color:var(--tx1);line-height:1.5}
.info-list li .bullet{width:5px;height:5px;border-radius:50%;background:var(--cyan);flex-shrink:0;margin-top:.45rem}
.info-stat-row{display:flex;align-items:center;justify-content:space-between;padding:.35rem 0;border-bottom:1px solid var(--brd);font-size:.8rem}
.info-stat-row:last-child{border-bottom:none}
.info-stat-row .label{color:var(--tx2);font-weight:500}
.info-stat-row .value{font-family:var(--mono);color:var(--tx0);font-weight:700}

/* ── Passphrase Tab ───────────────────────────────────────────── */
.pp-opts{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.25rem}
.pp-opt{display:flex;flex-direction:column;gap:.35rem}
.pp-opt label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--tx2)}
.pp-select{font-family:var(--sans);font-size:.82rem;padding:.45rem .6rem;border:1px solid var(--brd);background:var(--bg1);color:var(--tx0);cursor:pointer;transition:border-color .2s;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2394a3b8'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .4rem center;background-size:16px;padding-right:1.75rem}
.pp-select:focus{outline:none;border-color:var(--cyan)}
body.dark .pp-select{background-color:var(--bg0)}

/* ── PIN Tab ──────────────────────────────────────────────────── */
.pin-lengths{display:flex;gap:.5rem;margin-bottom:1.25rem;flex-wrap:wrap}
.pin-len-btn{font-family:var(--sans);font-size:.8rem;font-weight:700;padding:.4rem 1rem;border:1px solid var(--brd);background:0;color:var(--tx1);cursor:pointer;transition:all .2s}
.pin-len-btn:hover{border-color:var(--cyan);color:var(--cyan)}
.pin-len-btn.on{background:var(--tx0);color:var(--bg0);border-color:var(--tx0)}
body.dark .pin-len-btn.on{background:var(--cyan);color:#0f172a;border-color:var(--cyan)}

/* ── Checker Tab ──────────────────────────────────────────────── */
.checker-wrap{max-width:100%}
.checker-input-row{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem}
.checker-input{flex:1;font-family:var(--mono);font-size:.95rem;padding:.65rem 1rem;border:1px solid var(--brd);background:var(--bg1);color:var(--tx0);transition:border-color .2s}
.checker-input:focus{outline:none;border-color:var(--cyan)}
.checker-result{background:var(--bg1);border:1px solid var(--brd);padding:1.25rem;margin-top:1rem}
.checker-result.hidden{display:none}
.checker-issues{margin-top:.75rem;display:flex;flex-direction:column;gap:.35rem}
.checker-issue{display:flex;align-items:center;gap:.5rem;font-size:.8rem;padding:.35rem .5rem}
.checker-issue.ok{color:#22c55e}
.checker-issue.fail{color:var(--s-fair)}
.checker-issue.warn{color:var(--s-good)}
.checker-issue svg{width:14px;height:14px;flex-shrink:0}
.checker-privacy{display:flex;align-items:center;gap:.4rem;font-size:.72rem;color:var(--tx2);margin-top:.75rem;padding-top:.75rem;border-top:1px solid var(--brd)}
.checker-privacy svg{width:12px;height:12px;flex-shrink:0;color:var(--cyan)}

/* ── Tips Section ─────────────────────────────────────────────── */
.tips-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;margin-top:1.5rem}
.tip-card{background:var(--bg1);border:1px solid var(--brd);padding:1.25rem;transition:border-color .2s}
.tip-card:hover{border-color:var(--brd2)}
.tip-card-icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:.75rem}
.tip-card-icon.cyan{background:rgba(6,182,212,.1)}
.tip-card-icon.purple{background:rgba(139,92,246,.1)}
.tip-card-icon.green{background:rgba(34,197,94,.1)}
.tip-card-icon.orange{background:rgba(249,115,22,.1)}
.tip-card-icon svg{width:16px;height:16px}
.tip-card-icon.cyan svg{color:var(--cyan)}
.tip-card-icon.purple svg{color:var(--purple)}
.tip-card-icon.green svg{color:#22c55e}
.tip-card-icon.orange svg{color:#f97316}
.tip-card h3{font-size:.85rem;font-weight:700;color:var(--tx0);margin-bottom:.4rem}
.tip-card p{font-size:.8rem;color:var(--tx1);line-height:1.6}

/* ── Ad Units ─────────────────────────────────────────────────── */
.ad-unit{margin:1.5rem 0;min-height:90px;overflow:hidden}

/* ── Install Banner (PWA) ─────────────────────────────────────── */
.install-banner{display:none;align-items:center;justify-content:center;gap:.75rem;padding:.6rem 1rem;background:linear-gradient(135deg,var(--cyan),var(--purple));color:#fff;font-size:.8rem;font-weight:600}
.install-banner.v{display:flex}
.install-banner button{background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.3);color:#fff;font-size:.75rem;font-weight:700;padding:4px 12px;cursor:pointer}
.install-banner .dismiss{background:0;border:0;color:rgba(255,255,255,.6);cursor:pointer;font-size:1rem}

/* ── Footer ───────────────────────────────────────────────────── */
.ft{border-top:1px solid var(--brd);margin-top:auto;transition:border-color .3s}
.ft-in{max-width:1400px;margin:0 auto;padding:1.5rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.ft-c{font-size:.8rem;color:var(--tx2)}
.ft-l{display:flex;gap:1.5rem;list-style:none}
.ft-l a{font-size:.8rem;color:var(--tx2);transition:color .2s}.ft-l a:hover{color:var(--cyan)}

/* ── Animations ───────────────────────────────────────────────── */
@keyframes mIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.fade-in{animation:mIn .25s ease-out}

/* ── Responsive: Tablet ───────────────────────────────────────── */
@media(max-width:1024px){
  .hdr-top{display:none}
  .hdr-nav{display:none}
  .hdr{position:sticky;top:0}
  .nav-toggle{display:inline-flex}
  .hdr-in{height:48px;position:relative}
  .hdr-nav.open{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:var(--hdr-bg);backdrop-filter:blur(16px);border-bottom:2px solid var(--cyan);padding:.5rem 0;z-index:200;animation:mIn .15s ease-out}
  .hdr-nav.open a{padding:.65rem 1.25rem;font-size:.85rem;border-bottom:1px solid var(--brd)}
  .hdr-nav.open a:last-child{border-bottom:none}
  .tool-layout{grid-template-columns:1fr}
  .pg-hdr h1{font-size:1.5rem}
  .pg-hdr{padding:1.5rem 1rem 1rem}
  .bk span{display:none}
  .ft-in{flex-direction:column;text-align:center;padding:1rem}
  .ft-l{gap:1rem}
  .checks-grid{grid-template-columns:1fr 1fr}
  .pp-opts{grid-template-columns:1fr}
}

/* ── Responsive: Phone ────────────────────────────────────────── */
@media(max-width:480px){
  .hdr-in{padding:0 .75rem;height:48px}
  .mc{padding:.75rem}
  .logo{font-size:1.1rem}
  .badge{font-size:.6rem;padding:1px 6px}
  .pg-hdr h1{font-size:1.25rem}
  .tabs{gap:2px}
  .tab-btn{font-size:.7rem;padding:.4rem .9rem}
  .checks-grid{grid-template-columns:1fr}
  .gen-row{flex-direction:column}
  .gen-btn{width:100%}
  .pw-display{font-size:.9rem}
  .tips-grid{grid-template-columns:1fr}
  .strength-meta{gap:1rem}
  .pin-lengths{justify-content:center}
}