/* ── PASSWORD GENERATOR TOKENS ──────────────────── */
#passwordView {
  --pw-bg:        #f0f4f8;
  --pw-surface:   #ffffff;
  --pw-surface2:  #f7f9fc;
  --pw-border:    #dde3ee;
  --pw-border2:   #e8ecf4;
  --pw-text:      #0f1923;
  --pw-muted:     #52657e;
  --pw-faint:     #9aaabb;
  --pw-azure:     #0078d4;
  --pw-azure-l:   #e8f4fd;
  --pw-success:   #107c10;
  --pw-warn:      #d83b01;
  --pw-amber:     #b45309;
  --pw-grid:      rgba(0,0,0,0.035);
  --pw-shadow:    0 1px 3px rgba(0,0,0,.07), 0 4px 14px rgba(0,0,0,.05);
  --pw-glow:      rgba(0,120,212,0.10);
}
body.dark #passwordView {
  --pw-bg:        #0b0f1a;
  --pw-surface:   #111827;
  --pw-surface2:  #1a2235;
  --pw-border:    #1e2d42;
  --pw-border2:   #243044;
  --pw-text:      #e8edf8;
  --pw-muted:     #7a8aa8;
  --pw-faint:     #3a4a64;
  --pw-azure:     #3aa0f3;
  --pw-azure-l:   #0d2137;
  --pw-success:   #4ec94e;
  --pw-warn:      #f97316;
  --pw-amber:     #f59e0b;
  --pw-grid:      rgba(255,255,255,0.028);
  --pw-shadow:    0 1px 3px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.2);
  --pw-glow:      rgba(58,160,243,0.12);
}
#passwordView {
  min-height: 100vh;
  background: var(--pw-bg);
  font-family: 'IBM Plex Sans', sans-serif;
  color: var(--pw-text);
  display: flex;
  flex-direction: column;
  position: relative;
}
#passwordView::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(var(--pw-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--pw-grid) 1px, transparent 1px);
  background-size: 48px 48px;
}
/* ── Header bar ── */
.pw-header {
  display:flex; align-items:center; gap:14px;
  padding:0 32px; height:58px;
  background: var(--pw-surface);
  border-bottom:2px solid var(--pw-azure);
  box-shadow: 0 2px 8px var(--pw-glow);
  position:sticky; top:0; z-index:100;
  flex-shrink:0;
}
.pw-back-btn {
  display:flex; align-items:center; gap:6px;
  background:none; border:1.5px solid var(--pw-border);
  border-radius:7px; padding:5px 11px; cursor:pointer;
  color:var(--pw-muted); font-size:11px;
  font-family:'IBM Plex Mono',monospace; font-weight:600;
  transition:all .15s; flex-shrink:0;
}
.pw-back-btn:hover { border-color:var(--pw-azure); color:var(--pw-azure); }
.pw-header-logo {
  width:28px; height:28px; background:var(--pw-azure);
  border-radius:6px; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; box-shadow: 0 0 14px var(--pw-glow);
}
.pw-header-logo svg { width:17px; height:17px; fill:#fff; }
.pw-header h1 { font-size:15px; font-weight:600; letter-spacing:-.01em; flex:1; }
.pw-header-badge {
  font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:600;
  color:var(--pw-azure); border:1px solid var(--pw-azure);
  background:var(--pw-azure-l); padding:2px 9px; border-radius:20px; opacity:.7;
}
/* ── Body ── */
.pw-body {
  position:relative; z-index:1;
  padding:24px 28px;
  display:grid;
  grid-template-columns: 1fr 380px;
  gap:20px;
  max-width:1200px; margin:0 auto; width:100%;
  flex:1;
}
@media(max-width:900px){
  .pw-body { grid-template-columns:1fr; }
}
/* ── Cards ── */
.pw-card {
  background:var(--pw-surface);
  border:1px solid var(--pw-border);
  border-radius:14px;
  padding:24px;
  box-shadow:var(--pw-shadow);
}
.pw-card-title {
  font-family:'Syne',sans-serif;
  font-size:16px; font-weight:700; letter-spacing:-.02em;
  color:var(--pw-text); margin-bottom:20px;
}
/* ── Slider ── */
.pw-length-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.pw-length-label { font-size:13px; font-weight:500; color:var(--pw-muted); }
.pw-length-val {
  background:var(--pw-azure); color:#fff;
  font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:600;
  width:38px; height:28px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
}
.pw-length-unit { font-size:11px; color:var(--pw-faint); margin-left:4px; }
.pw-slider-wrap { position:relative; margin-bottom:14px; }
.pw-slider {
  -webkit-appearance:none; appearance:none;
  width:100%; height:4px; border-radius:2px;
  background: linear-gradient(to right, var(--pw-azure) 0%, var(--pw-azure) var(--slider-pct,50%), var(--pw-border) var(--slider-pct,50%));
  outline:none; cursor:pointer;
}
.pw-slider::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; border-radius:50%;
  background:#fff; border:2.5px solid var(--pw-azure);
  box-shadow:0 1px 6px rgba(0,120,212,.3); cursor:pointer;
  transition:transform .15s;
}
.pw-slider::-webkit-slider-thumb:hover { transform:scale(1.15); }
.pw-slider::-moz-range-thumb {
  width:18px; height:18px; border-radius:50%;
  background:#fff; border:2.5px solid var(--pw-azure);
  box-shadow:0 1px 6px rgba(0,120,212,.3); cursor:pointer;
}
/* Quick length buttons */
.pw-length-presets { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px; }
.pw-preset {
  font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600;
  padding:4px 10px; border-radius:6px;
  border:1.5px solid var(--pw-border);
  background:var(--pw-surface2); color:var(--pw-muted);
  cursor:pointer; transition:all .15s;
}
.pw-preset:hover, .pw-preset.active {
  border-color:var(--pw-azure); color:var(--pw-azure); background:var(--pw-azure-l);
}
/* Strength bar */
.pw-strength-wrap { margin-bottom:4px; }
.pw-strength-bar-bg {
  height:6px; border-radius:3px;
  background:var(--pw-border2); overflow:hidden; margin-bottom:6px;
}
.pw-strength-bar {
  height:100%; border-radius:3px;
  background: var(--pw-str-color, #ccc);
  transition: width .4s ease, background .4s ease;
}
.pw-strength-row {
  display:flex; align-items:center; justify-content:space-between;
}
.pw-strength-badge {
  font-size:10px; font-weight:700; padding:2px 8px; border-radius:5px;
  background: var(--pw-str-color, #ccc); color:#fff; letter-spacing:.04em;
}
.pw-strength-desc { font-size:11px; color:var(--pw-muted); }
/* Divider */
.pw-divider { height:1px; background:var(--pw-border2); margin:20px 0; }
/* Section label */
.pw-section-label {
  font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--pw-muted); margin-bottom:14px;
}
/* Toggle rows */
.pw-toggle-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 0; border-bottom:1px solid var(--pw-border2);
}
.pw-toggle-row:last-child { border-bottom:none; }
.pw-toggle-label { font-size:13px; color:var(--pw-text); }
.pw-toggle-label span { font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--pw-faint); }
/* iOS-style toggle */
.pw-toggle {
  position:relative; width:40px; height:22px; cursor:pointer; flex-shrink:0;
}
.pw-toggle input { opacity:0; width:0; height:0; position:absolute; }
.pw-toggle-track {
  position:absolute; inset:0; border-radius:11px;
  background:var(--pw-border); transition:background .2s;
}
.pw-toggle input:checked ~ .pw-toggle-track { background:var(--pw-azure); }
.pw-toggle-thumb {
  position:absolute; top:3px; left:3px;
  width:16px; height:16px; border-radius:50%;
  background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.2);
  transition:transform .2s;
}
.pw-toggle input:checked ~ .pw-toggle-thumb { transform:translateX(18px); }
/* Count input */
.pw-count-wrap { display:flex; align-items:center; gap:10px; margin-top:6px; }
.pw-count-input {
  font-family:'IBM Plex Mono',monospace; font-size:14px;
  border:1.5px solid var(--pw-border); border-radius:8px;
  background:var(--pw-surface2); color:var(--pw-text);
  padding:8px 12px; width:80px; outline:none; text-align:center;
  transition:border-color .2s;
}
.pw-count-input:focus { border-color:var(--pw-azure); }
.pw-count-desc { font-size:11px; color:var(--pw-faint); }
/* Generate button */
.pw-generate-btn {
  width:100%; padding:13px; margin-top:20px;
  background: linear-gradient(135deg, var(--pw-azure) 0%, #005fb3 100%);
  color:#fff; border:none; border-radius:10px;
  font-family:'IBM Plex Sans',sans-serif; font-size:14px; font-weight:600;
  cursor:pointer; transition:all .2s; letter-spacing:.01em;
  display:flex; align-items:center; justify-content:center; gap:8px;
  box-shadow:0 4px 16px rgba(0,120,212,.3);
}
.pw-generate-btn:hover { filter:brightness(1.1); transform:translateY(-1px); }
.pw-generate-btn:active { transform:translateY(0); }
/* ── Right column ── */
.pw-right { display:flex; flex-direction:column; gap:20px; }
/* Security analysis */
.pw-sec-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px;
}
.pw-sec-item { }
.pw-sec-item-label {
  font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.09em;
  color:var(--pw-faint); margin-bottom:4px;
}
.pw-sec-item-val {
  font-family:'IBM Plex Mono',monospace; font-size:18px; font-weight:600;
  color:var(--pw-text); display:flex; align-items:center; gap:5px;
}
.pw-sec-item-val svg { flex-shrink:0; }
.pw-sec-combinations { margin-bottom:14px; }
.pw-sec-combinations .pw-sec-item-val { font-size:15px; }
.pw-crack-badge {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--pw-azure); color:#fff;
  font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600;
  padding:5px 12px; border-radius:8px; margin-bottom:4px;
}
.pw-crack-note { font-size:10px; color:var(--pw-faint); }
.pw-divider-light { height:1px; background:var(--pw-border2); margin:14px 0; }
.pw-rec-label {
  font-size:11px; font-weight:700; color:var(--pw-muted);
  letter-spacing:.08em; text-transform:uppercase; margin-bottom:10px;
}
.pw-rec-item {
  display:flex; align-items:center; gap:7px; margin-bottom:7px;
  font-size:12px;
}
.pw-rec-item svg { flex-shrink:0; }
/* Generated passwords */
.pw-gen-header {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;
}
.pw-gen-actions { display:flex; gap:6px; }
.pw-action-btn {
  width:32px; height:32px; border-radius:8px;
  border:1.5px solid var(--pw-border); background:var(--pw-surface2);
  color:var(--pw-muted); cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all .15s;
}
.pw-action-btn:hover { border-color:var(--pw-azure); color:var(--pw-azure); }
.pw-passwords-list { display:flex; flex-direction:column; gap:8px; max-height:380px; overflow-y:auto; }
.pw-passwords-list::-webkit-scrollbar { width:4px; }
.pw-passwords-list::-webkit-scrollbar-thumb { background:var(--pw-border); border-radius:2px; }
.pw-pw-item {
  background:var(--pw-surface2); border:1px solid var(--pw-border2);
  border-radius:10px; padding:12px 14px;
  display:flex; align-items:center; gap:10px;
  transition:border-color .15s;
}
.pw-pw-item:hover { border-color:var(--pw-azure); }
.pw-pw-content { flex:1; min-width:0; }
.pw-pw-meta { font-size:10px; color:var(--pw-faint); margin-bottom:4px; }
.pw-pw-value {
  font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:500;
  color:var(--pw-text); word-break:break-all; line-height:1.4;
}
.pw-copy-btn {
  width:30px; height:30px; border-radius:7px; flex-shrink:0;
  border:1.5px solid var(--pw-border); background:var(--pw-surface);
  color:var(--pw-muted); cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all .15s;
}
.pw-copy-btn:hover { border-color:var(--pw-azure); color:var(--pw-azure); }
.pw-copy-btn.copied { border-color:var(--pw-success); color:var(--pw-success); }
.pw-empty-state {
  text-align:center; padding:32px 20px; color:var(--pw-faint);
  font-size:12px; line-height:1.6;
}
.pw-empty-state svg { margin-bottom:10px; display:block; margin-left:auto; margin-right:auto; }