/* Free Password Generator — brand layer (Bartel Media styleguide) */
.mode-btn{
  cursor:pointer; font-family:"Space Mono",monospace; font-size:11px;
  text-transform:uppercase; letter-spacing:.1em;
  border:2px solid var(--ink); border-radius:999px; padding:6px 16px;
  background:#fff; color:var(--ink); box-shadow:0 4px 0 var(--ink);
  transition:transform .12s, box-shadow .12s, background .15s, color .15s;
  white-space:nowrap;
}
.mode-btn:hover{ transform:translateY(-2px); box-shadow:0 6px 0 var(--ink); background:var(--yellow); }
.mode-btn:active{ transform:translateY(3px); box-shadow:0 0 0 var(--ink); }
.mode-btn.active{ background:var(--orange); color:var(--cream); box-shadow:0 4px 0 var(--ink); }

:root{
  --orange:#FF8731; --green:#186B76; --red:#D91600; --brown:#512314;
  --yellow:#FFAA01; --cream:#FAF5EC; --ink:#1a0d07;
}

html{ scroll-behavior:smooth; }
body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
::selection{ background:var(--orange); color:var(--cream); }

/* ── Section typography ─────────────────────────────────────────────── */
.kick{
  display:inline-flex; align-items:center; gap:10px;
  font-family:"Space Mono",monospace; font-size:11px; text-transform:uppercase;
  letter-spacing:.15em; color:rgba(81,35,20,.55);
}
.sec-title{
  font-family:"Fredoka One",cursive; font-weight:400; letter-spacing:-0.01em;
  line-height:.95; color:var(--brown); margin-top:14px;
  font-size:clamp(30px,5vw,52px);
}
.prose-p{ margin-top:18px; font-size:17px; line-height:1.65; color:rgba(26,13,7,.78); }
.code-inline{
  font-family:"Space Mono",monospace; font-size:.92em;
  background:rgba(81,35,20,.08); border-radius:6px; padding:1px 6px; color:var(--brown);
}
.code-block{
  margin-top:18px; font-family:"Space Mono",monospace; font-size:14px;
  background:var(--ink); color:var(--cream); border-radius:14px; padding:18px 20px;
  overflow-x:auto; box-shadow:0 5px 0 rgba(26,13,7,.25);
}

/* ── Ads ────────────────────────────────────────────────────────── */
.ad-wrap{
  max-width:1100px; margin-left:auto; margin-right:auto;
  padding-left:20px; padding-right:20px;
}
.ad-placeholder{
  display:flex; align-items:center; justify-content:center;
  min-height:100px; border:1.5px dashed rgba(81,35,20,.25); border-radius:14px;
  background:rgba(81,35,20,.03);
}

/* ── Misc ───────────────────────────────────────────────────────── */
details summary::-webkit-details-marker{ display:none; }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* ── Copy button ────────────────────────────────────────────────── */
.copy-btn{
  cursor:pointer; font-family:"Space Mono",monospace; font-size:11px;
  text-transform:uppercase; letter-spacing:.1em;
  border:2px solid var(--ink); border-radius:999px; padding:5px 14px;
  background:#fff; color:var(--ink); box-shadow:0 3px 0 var(--ink);
  transition:transform .12s, box-shadow .12s, background .15s, color .15s;
}
.copy-btn:hover:not(:disabled){ transform:translateY(-1px); box-shadow:0 5px 0 var(--ink); }
.copy-btn:active:not(:disabled){ transform:translateY(2px); box-shadow:0 0 0 var(--ink); }
.copy-btn:disabled{ opacity:.35; cursor:not-allowed; }
.copy-btn.copied{ background:var(--green); color:var(--cream); }

/* ── Strength meter ─────────────────────────────────────────────── */
.strength-bar{
  height:8px; border-radius:999px; background:rgba(81,35,20,.12);
  overflow:hidden; transition:all .3s;
}
.strength-fill{
  height:100%; border-radius:999px;
  transition:width .4s cubic-bezier(.4,0,.2,1), background .3s;
}

/* ── Length slider ──────────────────────────────────────────────── */
.pw-slider{
  -webkit-appearance:none; appearance:none;
  width:100%; height:6px; border-radius:999px;
  background:rgba(81,35,20,.15); outline:none; cursor:pointer;
}
.pw-slider::-webkit-slider-thumb{
  -webkit-appearance:none; width:22px; height:22px; border-radius:50%;
  background:var(--orange); border:2px solid var(--ink);
  box-shadow:0 3px 0 var(--ink); cursor:pointer;
}

/* ── Checkbox labels ────────────────────────────────────────────── */
.pw-check{
  display:flex; align-items:center; gap:10px; cursor:pointer;
  font-size:14px; font-family:"DM Sans",system-ui,sans-serif;
  color:var(--ink); user-select:none; padding:8px 0;
}
.pw-check input[type="checkbox"]{
  width:18px; height:18px; accent-color:var(--orange);
  cursor:pointer; flex-shrink:0;
}

/* ── Password output ────────────────────────────────────────────── */
.pw-result{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  border:2px solid rgba(81,35,20,.2); border-radius:14px;
  background:#fff; padding:12px 16px;
  font-family:"Space Mono",monospace; font-size:14px; line-height:1.4;
  color:var(--ink); word-break:break-all;
  transition:border-color .15s;
}
.pw-result:hover{ border-color:rgba(81,35,20,.4); }