:root { --accent:#3a4a7a; --accent-soft:rgba(58,74,122,.1); }
body[data-site="hashtools"] .brand-mark { background:var(--accent); color:#fff; font-size:.7rem; }
.mode-tabs{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1rem}
.mode-tab{border:1px solid var(--line,#d5cfbc);background:#fff;border-radius:999px;padding:.55rem 1rem;cursor:pointer;font:inherit}
.mode-tab.is-active{background:var(--accent);color:#fff;border-color:transparent}
.panel[hidden]{display:none!important}
#resultBox{white-space:pre-wrap;word-break:break-all;background:#fff;border:1px solid var(--line,#d5cfbc);border-radius:12px;padding:.9rem;min-height:4rem;font-family:ui-monospace,monospace;font-size:.9rem}
.algo-row{display:flex;flex-wrap:wrap;gap:.6rem 1rem;margin:.75rem 0}
.hint{color:var(--dim,#625f57);font-size:.9rem}
.warn{color:#a0691c;font-size:.86rem}

/* polish: mobile form comfort */
@media (max-width:700px){
  .studio-card label,.field,label{display:block;margin:.55rem 0}
  input[type=text],input[type=number],input[type=date],input[type=time],input[type=search],input[type=password],textarea,select{width:100%;max-width:100%;box-sizing:border-box}
  .mode-tabs,.pw-modes,.conv-tabs,.category-tabs{gap:.35rem;flex-wrap:wrap}
  .mode-tab{padding:.5rem .85rem;font-size:.9rem}
  .maker-actions,.toolbar-row,.result-actions{display:flex;flex-wrap:wrap;gap:.5rem}
  .preset-row,.ratio-chips,.quick-row{display:flex;flex-wrap:wrap;gap:.4rem}
  canvas,#waveCanvas,#spectrumCanvas{max-width:100%;height:auto}
  pre#out,pre#resultBox,pre#pdfInfoOut{font-size:.82rem}
}