/* ── Tools page styles ── */
.tools-layout {
  display: flex;
  gap: 2.5rem;
  align-items: flex-start;
}
.tools-sidebar {
  width: 260px;
  flex-shrink: 0;
  position: sticky;
  top: 88px;
  border: 1px solid rgba(0,255,65,.18);
  border-radius: .5rem;
  overflow: hidden;
}
.sidebar-header {
  background: rgba(0,255,65,.08);
  padding: .75rem 1rem;
  border-bottom: 1px solid rgba(0,255,65,.15);
  font-family: var(--font-mono);
  font-size: .65rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(0,255,65,.55);
}
.sidebar-btn {
  display: flex; align-items: flex-start; gap: .75rem;
  width: 100%; padding: .9rem 1rem;
  border-bottom: 1px solid rgba(0,255,65,.08);
  text-align: left;
  transition: background .15s;
  border-left: 2px solid transparent;
}
.sidebar-btn:last-child { border-bottom: none; }
.sidebar-btn:hover { background: rgba(0,255,65,.04); }
.sidebar-btn.active {
  background: rgba(0,255,65,.08);
  border-left-color: var(--color-primary);
}
.sidebar-btn svg { margin-top: .15rem; flex-shrink: 0; color: rgba(168,230,163,.3); }
.sidebar-btn.active svg { color: var(--color-primary); }
.sidebar-btn-title {
  font-family: var(--font-mono);
  font-size: .65rem; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(168,230,163,.45);
  display: block; margin-bottom: .2rem;
}
.sidebar-btn.active .sidebar-btn-title { color: var(--color-primary); }
.sidebar-btn-desc {
  font-size: .65rem; color: rgba(168,230,163,.28); line-height: 1.4;
}
.tools-panel { flex: 1; min-width: 0; }
.tool-section { display: none; }
.tool-section.active { display: block; }
@media(max-width:900px){
  .tools-layout { flex-direction: column; }
  .tools-sidebar { width: 100%; position: static; }
}

/* ── Tool UI shared ── */
.tool-box {
  border: 1px solid rgba(0,255,65,.18);
  border-radius: .5rem;
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.tool-box-header {
  background: rgba(0,255,65,.07);
  padding: .65rem 1.25rem;
  border-bottom: 1px solid rgba(0,255,65,.12);
  font-family: var(--font-mono);
  font-size: .65rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(0,255,65,.55);
  display: flex; align-items: center; gap: .5rem;
}
.tool-box-body { padding: 1.5rem; }
.tool-box-body > * + * { margin-top: 1.1rem; }

.t-label {
  display: block;
  font-family: var(--font-mono);
  font-size: .6rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(168,230,163,.45);
  margin-bottom: .45rem;
}
.t-input, .t-textarea {
  width: 100%;
  background: rgba(0,0,0,.5);
  border: 1px solid rgba(0,255,65,.28);
  color: var(--color-primary);
  font-family: var(--font-mono);
  font-size: .8rem;
  padding: .65rem .9rem;
  border-radius: .25rem;
  outline: none;
  transition: border-color .2s;
}
.t-input:focus, .t-textarea:focus { border-color: var(--color-primary); }
.t-textarea { resize: vertical; }
.t-input-sec {
  border-color: rgba(255,102,0,.28);
  color: var(--color-secondary);
}
.t-input-sec:focus { border-color: var(--color-secondary); }
.t-error {
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--color-secondary);
  border: 1px solid rgba(255,102,0,.28);
  background: rgba(255,102,0,.06);
  padding: .6rem .9rem; border-radius: .25rem;
}
.t-output {
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(0,255,65,.12);
  border-radius: .25rem;
  padding: .75rem .9rem;
  font-family: var(--font-mono);
  font-size: .8rem;
  color: rgba(0,255,65,.75);
  word-break: break-all;
  line-height: 1.6;
}
.t-textarea-ro {
  width: 100%;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(0,255,65,.12);
  color: rgba(0,255,65,.75);
  font-family: var(--font-mono);
  font-size: .8rem;
  padding: .65rem .9rem;
  border-radius: .25rem;
  outline: none;
  resize: vertical;
}
.t-row { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
.t-btn {
  font-family: var(--font-mono);
  font-size: .65rem; letter-spacing: .14em; text-transform: uppercase;
  padding: .55rem 1.2rem;
  border-radius: .25rem;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  transition: background .15s, transform .1s;
}
.t-btn:hover { background: rgba(0,255,65,.1); }
.t-btn:active { transform: scale(.97); }
.t-btn-sec { border-color: var(--color-secondary); color: var(--color-secondary); }
.t-btn-sec:hover { background: rgba(255,102,0,.1); }
.t-btn-dim { border-color: rgba(168,230,163,.2); color: rgba(168,230,163,.35); }
.t-btn-dim:hover { background: rgba(168,230,163,.05); }
.t-btn-sm {
  display: flex; align-items: center; gap: .4rem;
  font-family: var(--font-mono);
  font-size: .6rem; letter-spacing: .12em; text-transform: uppercase;
  padding: .4rem .8rem; border-radius: .25rem;
  border: 1px solid rgba(0,255,65,.22); color: rgba(0,255,65,.55);
  transition: background .15s;
}
.t-btn-sm:hover { background: rgba(0,255,65,.1); }
.t-output-header {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem;
  margin-bottom: .6rem;
}
.t-output-label {
  font-family: var(--font-mono);
  font-size: .6rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(0,255,65,.35);
}
.t-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.t-hint {
  font-family: var(--font-mono);
  font-size: .65rem; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(168,230,163,.35);
  line-height: 1.6;
}
.t-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.t-chip {
  font-family: var(--font-mono);
  font-size: .65rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .4rem .9rem; border-radius: .25rem;
  border: 1px solid rgba(0,255,65,.18);
  color: rgba(168,230,163,.38);
  transition: background .15s, border-color .15s, color .15s;
}
.t-chip:hover { border-color: rgba(0,255,65,.35); color: rgba(168,230,163,.6); }
.t-chip.active { background: rgba(0,255,65,.12); border-color: var(--color-primary); color: var(--color-primary); }
/* stat results grid */
.stat-results { display: grid; grid-template-columns: repeat(4,1fr); gap: .75rem; }
@media(max-width:600px){ .stat-results { grid-template-columns: 1fr 1fr; } }
.stat-r { border: 1px solid rgba(0,255,65,.12); background: rgba(0,255,65,.04); padding: .75rem; border-radius: .25rem; }
.stat-r-label { font-family:var(--font-mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(168,230,163,.32); margin-bottom:.3rem; }
.stat-r-val { font-family:var(--font-mono); font-size:1.1rem; color:var(--color-primary); text-shadow:0 0 6px rgba(0,255,65,.35); }
/* diff results */
.diff-results { display: grid; grid-template-columns: repeat(4,1fr); gap: .75rem; }
@media(max-width:600px){ .diff-results { grid-template-columns: 1fr 1fr; } }
.diff-r { border: 1px solid rgba(0,255,65,.12); background: rgba(0,255,65,.04); padding: .75rem; border-radius: .25rem; text-align:center; }
.diff-r-val { font-family:var(--font-mono); font-size:1.8rem; color:var(--color-primary); text-shadow:0 0 10px rgba(0,255,65,.5); }
.diff-r-label { font-family:var(--font-mono); font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(168,230,163,.32); margin-top:.2rem; }
/* sort detected box */
.t-detect-box { border: 1px solid rgba(255,102,0,.22); background: rgba(255,102,0,.05); border-radius: .35rem; padding: 1rem; }
.t-detect-label { font-family:var(--font-mono); font-size:.65rem; letter-spacing:.14em; text-transform:uppercase; color:var(--color-secondary); margin-bottom:.75rem; }
/* QR */
.qr-out { display:flex; justify-content:center; background:rgba(0,0,0,.4); border:1px solid rgba(0,255,65,.1); border-radius:.35rem; padding:2rem; }
.qr-out img { max-width:280px; width:100%; border:1px solid rgba(0,255,65,.18); border-radius:.25rem; image-rendering:pixelated; }
/* float bits */
.float-bits-box { background:rgba(0,0,0,.28); border:1px solid rgba(0,255,65,.1); border-radius:.5rem; padding:1.25rem; }
.float-bits-inner { display:flex; flex-wrap:wrap; gap:1.5rem; }
.bit-group-label { font-family:var(--font-mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:.5rem; }
.bit-group-label.sign { color:var(--color-accent); }
.bit-group-label.exp { color:var(--color-secondary); }
.bit-group-label.mant { color:var(--color-primary); }
.bit-checkboxes { display:flex; flex-wrap:wrap; gap:.35rem; }
.bit-item { display:flex; flex-direction:column; align-items:center; gap:.2rem; cursor:pointer; }
.bit-idx { font-family:var(--font-mono); font-size:6px; color:rgba(168,230,163,.25); line-height:1; }
.bit-item input[type=checkbox] { width:13px; height:13px; cursor:pointer; }
/* live clock */
.clock-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media(max-width:600px){ .clock-grid { grid-template-columns:1fr; } }
.clock-box { background:rgba(0,0,0,.4); border:1px solid rgba(0,255,65,.12); border-radius:.35rem; padding:1.25rem; }
.clock-box.sec { border-color:rgba(255,102,0,.15); }
.clock-val { font-family:var(--font-mono); font-size:1.1rem; margin:1rem 0; word-break:break-all; }
.clock-val.green { color:var(--color-primary); text-shadow:0 0 10px rgba(0,255,65,.5); }
.clock-val.orange { color:var(--color-secondary); text-shadow:0 0 10px rgba(255,102,0,.5); }
/* range slider */
.range-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:.4rem; }
.range-val { font-family:var(--font-mono); font-size:.75rem; color:var(--color-primary); text-shadow:0 0 5px rgba(0,255,65,.4); }
.range-val.sec { color:var(--color-secondary); text-shadow:0 0 5px rgba(255,102,0,.4); }
input[type=range] { width:100%; accent-color:var(--color-primary); }
input[type=range].sec { accent-color:var(--color-secondary); }
.range-ticks { display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:.6rem; color:rgba(168,230,163,.28); margin-top:.2rem; }
/* xof output */
.xof-out { width:100%; background:rgba(0,0,0,.45); border:1px solid rgba(255,102,0,.12); color:rgba(255,102,0,.65); font-family:var(--font-mono); font-size:.72rem; padding:.75rem .9rem; border-radius:.25rem; outline:none; resize:vertical; text-shadow:0 0 4px rgba(255,102,0,.2); word-break:break-all; }
/* password display */
.pw-display { background:rgba(0,0,0,.45); border:1px solid rgba(255,102,0,.22); color:var(--color-secondary); font-family:var(--font-mono); font-size:.95rem; padding:.75rem 1.2rem; border-radius:.25rem; letter-spacing:.12em; text-shadow:0 0 8px rgba(255,115,0,.4); word-break:break-all; }
/* xof box */
.xof-box { border-color:rgba(255,102,0,.25); }
.xof-header { background:rgba(255,102,0,.08); border-bottom-color:rgba(255,102,0,.18); color:rgba(255,102,0,.55); }