/* Free Hash Generator — brand layer (Bartel Media styleguide) */
: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); }

/* ── Algorithm tabs ─────────────────────────────────────────────── */
.algo-tab{
  cursor:pointer; font-family:"Space Mono",monospace; font-size:12px;
  text-transform:uppercase; letter-spacing:.08em;
  border:2px solid var(--ink); border-radius:999px; padding:8px 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;
}
.algo-tab:hover{ transform:translateY(-2px); box-shadow:0 6px 0 var(--ink); background:var(--yellow); }
.algo-tab:active{ transform:translateY(3px); box-shadow:0 0 0 var(--ink); }
.algo-tab.active{ background:var(--orange); color:var(--cream); border-color:var(--ink); }

/* ── Input textarea ─────────────────────────────────────────────── */
.hash-input{
  width:100%; border:2px solid rgba(81,35,20,.3); border-radius:16px;
  background:#fff; padding:16px 18px; font-size:15px; font-family:"DM Sans",system-ui,sans-serif;
  color:var(--ink); resize:vertical; min-height:120px; outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.hash-input:focus{
  border-color:var(--orange); box-shadow:0 0 0 3px rgba(255,135,49,.22);
}
.hash-input::placeholder{ color:rgba(81,35,20,.35); }

/* ── Output field ───────────────────────────────────────────────── */
.hash-output{
  font-family:"Space Mono",monospace; font-size:13px; line-height:1.6;
  word-break:break-all; letter-spacing:.02em;
}
.hash-empty{ color:rgba(81,35,20,.35); font-style:italic; }

/* ── Case toggle ────────────────────────────────────────────────── */
.case-btn{ cursor:pointer; transition:background .15s,color .15s; }

/* ── 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; }
#copyBtn.copied{ background:var(--green); color:var(--cream); }

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