:root { --bg:#0f172a; --panel:#111827; --muted:#64748b; --text:#e5e7eb; --accent:#22c55e; --accent-2:#06b6d4; --danger:#ef4444; --warn:#f59e0b; --card:#0b1220; --border:#1f2937; }
:root.light { --bg:#f8fafc; --panel:#ffffff; --muted:#475569; --text:#0f172a; --accent:#16a34a; --accent-2:#0ea5e9; --danger:#dc2626; --warn:#d97706; --card:#ffffff; --border:#e2e8f0; }
*{box-sizing:border-box}body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; background:var(--bg); color:var(--text)}
.container{max-width:1040px;margin:0 auto;padding:24px;display:grid;gap:24px;grid-template-columns:1fr}
@media(min-width:1024px){.container{grid-template-columns:2fr 1fr}}
.card{background:linear-gradient(180deg,var(--panel),var(--card));border:1px solid var(--border);border-radius:16px;padding:20px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.tab-btn{padding:10px 14px;border-radius:999px;border:1px solid var(--border);background:transparent;color:var(--text);cursor:pointer}
.tab-btn.active{background:var(--accent-2);color:#fff;border-color:transparent}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.grid{display:grid;gap:12px}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.btn{padding:10px 14px;border:1px solid var(--border);background:#0b1220aa;color:var(--text);border-radius:10px;cursor:pointer}
.btn.primary{background:var(--accent-2);color:#fff;border-color:transparent}
.btn.danger{background:var(--danger);color:#fff;border-color:transparent}
.switch{display:flex;align-items:center;gap:10px;cursor:pointer}.switch input{width:18px;height:18px}
.slider{width:100%}.label{color:var(--muted);font-size:14px}.muted{color:var(--muted)}
.h1{font-weight:800;font-size:28px}.h2{font-weight:700;font-size:20px}.small{font-size:12px}
.password-list{display:grid;gap:10px}.password-item{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:12px;padding:10px}
.password{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:16px;letter-spacing:.5px;flex:1;overflow:auto}
.input-mono{flex:1;background:transparent;border:none;color:var(--text);outline:none;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:16px}
.icon-btn{border:none;background:transparent;cursor:pointer;color:var(--text);padding:6px 8px;border-radius:8px}
.icon-btn:hover{background:rgba(255,255,255,.06)}
.meter{height:10px;background:#1f2937;border-radius:999px;position:relative;overflow:hidden;border:1px solid var(--border)}
.meter>span{display:block;height:100%;width:0%;transition:width .25s ease}
.meter.weak>span{background:var(--danger)}.meter.fair>span{background:var(--warn)}.meter.strong>span{background:var(--accent)}
.pill{display:inline-block;padding:4px 8px;border-radius:999px;border:1px solid var(--border);color:var(--muted);font-size:12px}
.sidebar .section{margin-bottom:18px}
.history{max-height:280px;overflow:auto;border:1px solid var(--border);border-radius:12px}
.history-item{padding:10px 12px;border-bottom:1px solid var(--border);font-family:ui-monospace,Menlo,Consolas;display:flex;justify-content:space-between;align-items:center;gap:10px}
.history-item:last-child{border-bottom:none}
.toast{position:fixed;bottom:20px;right:20px;background:#10b981;color:#fff;padding:10px 14px;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.25);opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s}
.toast.show{opacity:1;transform:translateY(0)}
.divider{height:1px;background:var(--border);margin:10px 0 16px}
.warning{color:var(--danger);font-size:14px;display:none}
.footer{color:var(--muted);font-size:12px;text-align:center;margin-top:8px}

/* Header / Nav + Footer */
.site-bar{position:sticky;top:0;z-index:50;background:linear-gradient(180deg,var(--panel),var(--card));border-bottom:1px solid var(--border)}
.nav-wrap{max-width:1160px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:16px;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;font-weight:800}
.nav{display:flex;gap:10px;flex-wrap:wrap}
.nav a{padding:8px 12px;border:1px solid var(--border);border-radius:999px;color:var(--text)}
.nav a.active{background:var(--accent-2);color:#fff;border-color:transparent}
.site-footer{border-top:1px solid var(--border);padding:24px 20px;background:linear-gradient(0deg,var(--panel),var(--card))}
.site-footer .cols{max-width:1160px;margin:0 auto;display:grid;gap:16px;grid-template-columns:repeat(1,minmax(0,1fr))}
@media(min-width:768px){.site-footer .cols{grid-template-columns:2fr 1fr 1fr}}
.site-footer a{color:var(--text)}

/* Single-column pages (centered, narrower) */
.container.single{
  grid-template-columns: 1fr;   /* one column */
  max-width: 820px;             /* narrower than homepage */
  margin: 0 auto;               /* center it */
}

/* Optional: a slightly wider breakpoint if you prefer */
@media (min-width: 1280px){
  .container.single{ max-width: 880px; }
}