/* ============================================================
   DEVKIT — style.css  (bodhin.solutions)
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:      #0d0f14;
  --bg2:     #131620;
  --bg3:     #1a1e2e;
  --bg4:     #222740;
  --border:  rgba(255,255,255,.07);
  --text:    #dde1f0;
  --muted:   #6b7080;
  --accent:  #7c6dff;
  --green:   #00d4aa;
  --red:     #ff6b6b;
  --yellow:  #f5c542;
  --radius:  10px;
  --font:    'Inter',system-ui,sans-serif;
  --mono:    'JetBrains Mono','Courier New',monospace;
  --hdr:     48px;
  --sidebar: 72px;
}

html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased;height:100vh;overflow:hidden;display:flex;flex-direction:column}
a{color:inherit;text-decoration:none}

/* ── Header ──────────────────────────────────────── */
.header{
  height:var(--hdr);flex-shrink:0;
  background:var(--bg2);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;
}
.header__inner{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;padding:0 20px;
}
.logo{
  display:flex;align-items:center;gap:8px;
  font-weight:700;font-size:1.1rem;letter-spacing:-.02em;
  color:var(--accent);
}
.header__sub{font-size:.75rem;color:var(--muted)}

/* ── App layout ──────────────────────────────────── */
.app{display:flex;flex:1;overflow:hidden}

/* ── Sidebar ─────────────────────────────────────── */
.sidebar{
  width:var(--sidebar);flex-shrink:0;
  background:var(--bg2);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  overflow-y:auto;padding:8px 0;
}
.tool-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;padding:10px 4px;
  background:none;border:none;cursor:pointer;
  color:var(--muted);font-family:var(--font);font-size:.6rem;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;
  border-left:2px solid transparent;
  transition:color .15s,background .15s,border-color .15s;
  width:100%;
}
.tool-btn svg{width:18px;height:18px;flex-shrink:0}
.tool-btn:hover{color:var(--text);background:rgba(255,255,255,.04)}
.tool-btn.active{color:var(--accent);border-left-color:var(--accent);background:rgba(124,109,255,.08)}

/* ── Panel wrap ──────────────────────────────────── */
.panel-wrap{flex:1;overflow:hidden;position:relative}

/* ── Panel ───────────────────────────────────────── */
.panel{
  display:none;flex-direction:column;
  height:100%;overflow:hidden;
  padding:20px;gap:12px;
}
.panel.active{display:flex}

.panel__head{
  display:flex;align-items:center;
  justify-content:space-between;flex-wrap:wrap;gap:10px;flex-shrink:0;
}
.panel__head h2{font-size:1rem;font-weight:600;letter-spacing:-.01em}

/* ── Toolbar / buttons ───────────────────────────── */
.toolbar{display:flex;flex-wrap:wrap;gap:6px}

.tbtn{
  padding:5px 12px;font-size:.78rem;font-weight:600;
  background:var(--bg4);border:1px solid var(--border);
  border-radius:6px;color:var(--text);cursor:pointer;
  font-family:var(--font);transition:background .15s,border-color .15s;
}
.tbtn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.tbtn--big{padding:10px 24px;font-size:.9rem;margin-top:12px;width:100%}

.icon-btn{
  background:none;border:1px solid var(--border);border-radius:6px;
  padding:5px 8px;color:var(--muted);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:.9rem;transition:color .15s,border-color .15s;
}
.icon-btn svg{width:14px;height:14px}
.icon-btn:hover{color:var(--accent);border-color:var(--accent)}

/* ── Split layout ────────────────────────────────── */
.split{display:flex;gap:12px;flex:1;overflow:hidden}
.split--col{flex-direction:column}
.split__pane{display:flex;flex-direction:column;flex:1;overflow:hidden;gap:6px}
.split__label{font-size:.7rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;flex-shrink:0}

/* ── Code areas ──────────────────────────────────── */
.code-area{
  flex:1;width:100%;min-height:0;
  background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);
  padding:12px;color:var(--text);font-family:var(--mono);font-size:.8rem;line-height:1.65;
  resize:none;outline:none;
  transition:border-color .2s;
  overflow:auto;
}
.code-area:focus{border-color:var(--accent)}
.code-area--out{white-space:pre;user-select:text;cursor:text}

/* ── Status bar ──────────────────────────────────── */
.status-bar{
  flex-shrink:0;font-size:.72rem;color:var(--muted);
  padding:4px 2px;min-height:1.4em;
}
.status-bar.ok{color:var(--green)}
.status-bar.err{color:var(--red)}

/* ── JSON ────────────────────────────────────────── */
.json-key{color:#82aaff}
.json-str{color:var(--green)}
.json-num{color:var(--yellow)}
.json-bool{color:#f78c6c}
.json-null{color:var(--red)}

/* ── Hash ────────────────────────────────────────── */
.hash-results{display:flex;flex-direction:column;gap:8px;overflow-y:auto}
.hash-row{
  background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);
  padding:10px 14px;display:flex;flex-direction:column;gap:4px;
}
.hash-algo{font-size:.7rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.hash-val{font-family:var(--mono);font-size:.78rem;word-break:break-all;cursor:pointer;transition:color .15s}
.hash-val:hover{color:var(--accent)}

/* ── Password ─────────────────────────────────────── */
.pw-body{display:flex;flex-direction:column;gap:16px;overflow-y:auto;padding-right:4px}
.pw-display{
  background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px 20px;display:flex;align-items:center;gap:12px;
}
.pw-text{font-family:var(--mono);font-size:.9rem;flex:1;word-break:break-all}
.pw-strength{display:flex;align-items:center;gap:12px}
.strength-bar{flex:1;height:6px;background:var(--bg4);border-radius:3px;overflow:hidden}
#strengthFill{height:100%;width:0;border-radius:3px;transition:width .3s,background .3s}
.pw-opts{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:16px}
.opt-row{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.opt-row input[type=range]{flex:1;accent-color:var(--accent)}
.opt-checks{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.opt-checks label{display:flex;align-items:center;gap:8px;font-size:.85rem;cursor:pointer;color:var(--text)}
.opt-checks input[type=checkbox]{accent-color:var(--accent);width:15px;height:15px}
.pw-bulk{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;gap:8px}
.pw-bulk label{font-size:.85rem;color:var(--muted)}
.pw-bulk input[type=number]{background:var(--bg4);border:1px solid var(--border);border-radius:6px;padding:4px 8px;color:var(--text);font-family:var(--font);font-size:.85rem;width:70px;outline:none}

/* ── Color ────────────────────────────────────────── */
.color-body{display:flex;flex-direction:column;gap:16px;overflow-y:auto;padding-right:4px}
.color-picker-row{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
#colorPicker{
  width:100px;height:100px;border:none;border-radius:12px;cursor:pointer;
  background:none;padding:0;flex-shrink:0;
}
.color-formats{display:flex;flex-direction:column;gap:8px;flex:1}
.color-fmt{display:flex;align-items:center;gap:8px}
.color-fmt label{width:52px;font-size:.75rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.color-fmt input{
  flex:1;background:var(--bg3);border:1px solid var(--border);border-radius:6px;
  padding:7px 10px;color:var(--text);font-family:var(--mono);font-size:.8rem;outline:none;
  transition:border-color .2s;
}
.color-fmt input:focus{border-color:var(--accent)}
.color-contrast{
  background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);
  padding:10px 14px;font-size:.8rem;
}
.palette-section{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;gap:12px}
.palette-section h3{font-size:.85rem;font-weight:600;color:var(--muted)}
.palette-out{display:flex;flex-wrap:wrap;gap:10px}
.swatch{
  display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;
}
.swatch__color{width:56px;height:56px;border-radius:10px;border:1px solid rgba(255,255,255,.1);transition:transform .15s}
.swatch__color:hover{transform:scale(1.08)}
.swatch__label{font-size:.68rem;font-family:var(--mono);color:var(--muted)}
.palette-section select{
  background:var(--bg4);border:1px solid var(--border);border-radius:6px;
  padding:6px 10px;color:var(--text);font-family:var(--font);font-size:.82rem;outline:none;cursor:pointer;
}

/* ── URL parser ───────────────────────────────────── */
.url-parser{display:flex;flex-direction:column;gap:8px;flex-shrink:0}
.url-parse-row{display:flex;gap:8px}
.url-input{
  flex:1;background:var(--bg3);border:1px solid var(--border);border-radius:6px;
  padding:8px 12px;color:var(--text);font-family:var(--mono);font-size:.82rem;outline:none;
}
.url-parsed{
  background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);
  padding:12px;font-family:var(--mono);font-size:.78rem;display:grid;
  grid-template-columns:auto 1fr;gap:4px 16px;line-height:1.6;
}
.url-parsed .pk{color:var(--muted)}
.url-parsed .pv{color:var(--text);word-break:break-all}

/* ── Diff ─────────────────────────────────────────── */
.diff-out{
  flex-shrink:0;background:var(--bg3);border:1px solid var(--border);
  border-radius:var(--radius);padding:12px;
  font-family:var(--mono);font-size:.78rem;line-height:1.7;
  max-height:300px;overflow-y:auto;
}
.diff-add{background:rgba(0,212,170,.12);color:var(--green)}
.diff-rem{background:rgba(255,107,107,.12);color:var(--red)}
.diff-eq {color:var(--muted)}

/* ── Regex ────────────────────────────────────────── */
.regex-bar{
  display:flex;align-items:center;gap:6px;
  background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);
  padding:8px 14px;flex-shrink:0;
}
.regex-slash{font-family:var(--mono);font-size:1.1rem;color:var(--muted)}
.regex-pat{flex:1;background:none;border:none;outline:none;font-family:var(--mono);font-size:.9rem;color:var(--text)}
.regex-flags{width:52px;background:none;border:none;outline:none;font-family:var(--mono);font-size:.9rem;color:var(--accent)}
.regex-badge{font-size:.75rem;padding:2px 8px;border-radius:4px}
.regex-badge.valid{background:rgba(0,212,170,.15);color:var(--green)}
.regex-badge.invalid{background:rgba(255,107,107,.15);color:var(--red)}
.regex-matches{
  flex-shrink:0;font-size:.8rem;
  background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);
  padding:12px;max-height:200px;overflow-y:auto;
  display:flex;flex-direction:column;gap:4px;
}
.match-item{
  font-family:var(--mono);font-size:.77rem;
  background:var(--bg4);border-radius:4px;padding:4px 10px;
}
.match-full{color:var(--accent)}
.match-idx{color:var(--muted);font-size:.7rem}
mark.rx-hl{background:rgba(124,109,255,.3);color:var(--text);border-radius:2px;padding:0 1px}

/* ── JWT ──────────────────────────────────────────── */
.jwt-out{display:flex;flex-direction:column;gap:8px;overflow-y:auto}
.jwt-section{
  background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:12px;
}
.jwt-section-title{
  font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  margin-bottom:8px;
}
.jwt-section-title.header-t{color:#82aaff}
.jwt-section-title.payload-t{color:var(--green)}
.jwt-section-title.sig-t{color:var(--red)}
.jwt-section pre{font-family:var(--mono);font-size:.78rem;white-space:pre-wrap;word-break:break-all}

/* ── Responsive ───────────────────────────────────── */
@media(max-width:700px){
  :root{--sidebar:54px}
  .tool-btn{font-size:0;padding:12px 0}
  .panel{padding:12px}
  .split{flex-direction:column}
  .opt-checks{grid-template-columns:1fr}
}
/* ── Timestamp ── */
.ts-body{display:flex;flex-direction:column;gap:12px;overflow-y:auto}
.ts-now{
  background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);
  padding:14px 18px;font-family:var(--mono);font-size:.85rem;line-height:1.8;
}
.ts-now strong{color:var(--accent)}
.ts-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ts-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:14px;display:flex;flex-direction:column;gap:10px}
.ts-card label{font-size:.7rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.ts-row{display:flex;gap:8px;align-items:center}
.ts-row input{flex:1;background:var(--bg4);border:1px solid var(--border);border-radius:6px;padding:8px 10px;color:var(--text);font-family:var(--mono);font-size:.82rem;outline:none}
.ts-row input[type=datetime-local]{color-scheme:dark}
.ts-result{font-family:var(--mono);font-size:.82rem;line-height:1.75;color:var(--text);word-break:break-all}

/* ── UUID ── */
.uuid-body{display:flex;flex-direction:column;gap:12px;overflow-y:auto}

/* ── Number Base ── */
.nb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.nb-extra{margin-top:10px}
.nb-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.nb-card label{font-size:.7rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.nb-card input{background:var(--bg4);border:1px solid var(--border);border-radius:6px;padding:8px 10px;color:var(--text);font-family:var(--mono);font-size:.88rem;outline:none;width:100%;transition:border-color .2s}
.nb-card input:focus{border-color:var(--accent)}
.nb-bits{font-family:var(--mono);font-size:.78rem;color:var(--text-muted);line-height:1.9;word-break:break-all}
.nb-bits span{color:var(--accent)}

/* ── Units ── */
.unit-body{display:flex;flex-direction:column;gap:14px;overflow-y:auto}
.unit-input-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:14px}
.unit-input-row input{width:140px;background:var(--bg4);border:1px solid var(--border);border-radius:6px;padding:9px 12px;color:var(--text);font-family:var(--mono);font-size:1rem;outline:none}
.unit-input-row select{background:var(--bg4);border:1px solid var(--border);border-radius:6px;padding:9px 12px;color:var(--text);font-family:var(--font);font-size:.88rem;outline:none;cursor:pointer}
.unit-result{font-family:var(--mono);font-size:1.6rem;font-weight:700;color:var(--accent);padding:8px 2px}
.unit-table{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.unit-row{background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:10px 14px;display:flex;justify-content:space-between;align-items:center}
.unit-row-label{font-size:.78rem;color:var(--muted)}
.unit-row-val{font-family:var(--mono);font-size:.82rem;color:var(--text)}

/* ── Markdown ── */
.md-preview{
  flex:1;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px 20px;overflow-y:auto;line-height:1.75;
  color:var(--text);font-size:.9rem;
}
.md-preview h1,.md-preview h2,.md-preview h3,.md-preview h4{margin:1em 0 .4em;line-height:1.25}
.md-preview h1{font-size:1.5rem;border-bottom:1px solid var(--border);padding-bottom:.3em}
.md-preview h2{font-size:1.25rem;border-bottom:1px solid var(--border);padding-bottom:.2em}
.md-preview p{margin:.5em 0}
.md-preview ul,.md-preview ol{padding-left:1.5em;margin:.5em 0}
.md-preview li{margin:.2em 0}
.md-preview code{font-family:var(--mono);font-size:.82em;background:var(--bg4);padding:1px 5px;border-radius:3px}
.md-preview pre{background:var(--bg4);border:1px solid var(--border);border-radius:8px;padding:12px 16px;overflow-x:auto;margin:.8em 0}
.md-preview pre code{background:none;padding:0}
.md-preview blockquote{border-left:3px solid var(--accent);padding-left:14px;margin-left:0;color:var(--muted)}
.md-preview a{color:var(--accent);text-decoration:underline}
.md-preview table{border-collapse:collapse;width:100%;margin:.8em 0}
.md-preview th,.md-preview td{border:1px solid var(--border);padding:6px 12px;text-align:left}
.md-preview th{background:var(--bg4)}
.md-preview hr{border:none;border-top:1px solid var(--border);margin:1em 0}
.md-preview img{max-width:100%}

/* ── QR ── */
.qr-body{display:flex;gap:24px;flex-wrap:wrap;overflow-y:auto}
.qr-inputs{display:flex;flex-direction:column;gap:10px;flex:1;min-width:240px}
.qr-opts{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px}
.qr-opts input[type=range]{flex:1;min-width:80px;accent-color:var(--accent)}
.qr-opts select{background:var(--bg4);border:1px solid var(--border);border-radius:6px;padding:5px 8px;color:var(--text);font-family:var(--font);font-size:.82rem;outline:none}
.qr-canvas-wrap{display:flex;flex-direction:column;align-items:center;gap:10px;flex-shrink:0}
#qrCanvas{background:#fff;border-radius:var(--radius);padding:12px;min-width:128px;min-height:128px;display:flex;align-items:center;justify-content:center}
#qrCanvas canvas,#qrCanvas img{display:block}

@media(max-width:700px){
  .ts-grid{grid-template-columns:1fr}
  .nb-grid{grid-template-columns:1fr 1fr}
  .qr-body{flex-direction:column}
}