/* ======================================================
   TOOLS PAGE
====================================================== */

/* ── login gate ───────────────────────────────────── */

.tools-login-gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  gap: 12px;
}

.tools-login-icon {
  font-size: 40px;
  color: #5865f2;
  margin-bottom: 4px;
}

.tools-login-title {
  font-size: 18px;
  font-weight: 800;
  color: rgba(233,238,248,.90);
}

.tools-login-sub {
  font-size: 13px;
  font-weight: 500;
  color: rgba(233,238,248,.45);
  max-width: 320px;
  line-height: 1.6;
}

.tools-login-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 10px 22px;
  border-radius: 10px;
  background: #5865f2;
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}

.tools-login-btn:hover {
  background: #4752c4;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(88,101,242,.35);
  color: #fff;
  text-decoration: none;
}

.tools-login-unconfigured {
  font-size: 12px;
  font-weight: 600;
  color: rgba(239,68,68,.70);
  margin-top: 8px;
}

/* ── user bar ─────────────────────────────────────── */

.tools-user-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  margin-bottom: 14px;
  border-radius: 10px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
}

.tools-user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
}

.tools-user-name {
  font-size: 13px;
  font-weight: 700;
  color: rgba(233,238,248,.85);
}

.tools-user-tag {
  font-size: 12px;
  font-weight: 500;
  color: rgba(233,238,248,.35);
}

.tools-user-logout {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(233,238,248,.35);
  cursor: pointer;
  text-decoration: none;
  transition: color .12s ease;
}

.tools-user-logout:hover {
  color: rgba(239,68,68,.80);
  text-decoration: none;
}

/* ── subtab nav ───────────────────────────────────── */

.tools-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
}

.tools-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(233,238,248,.45);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: color .12s ease, background .12s ease, border-color .12s ease;
}

.tools-tab:hover {
  color: rgba(233,238,248,.75);
  background: rgba(255,255,255,.04);
}

.tools-tab--active {
  color: rgba(233,238,248,.90);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
}

/* ── content area ─────────────────────────────────── */

.tools-content--hidden {
  display: none;
}

/* ── tool grid ────────────────────────────────────── */

.tools-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 600px) {
  .tools-grid { grid-template-columns: 1fr; }
}

/* ── tool card ────────────────────────────────────── */

.tool-card {
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  background: rgba(255,255,255,.02);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tool-card-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.tool-card-icon {
  font-size: 18px;
  color: rgba(34,197,94,.70);
  margin-top: 2px;
  flex-shrink: 0;
}

.tool-card-title {
  font-size: 14px;
  font-weight: 800;
  color: rgba(233,238,248,.88);
}

.tool-card-sub {
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(233,238,248,.35);
  margin-top: 2px;
}

/* ── inputs ───────────────────────────────────────── */

.tool-input-row {
  display: flex;
  gap: 8px;
}

.tool-input {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.20);
  color: rgba(233,238,248,.85);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  outline: none;
  transition: border-color .12s ease;
}

.tool-input::placeholder {
  color: rgba(233,238,248,.25);
}

.tool-input:focus {
  border-color: rgba(34,197,94,.35);
}

.tool-btn {
  padding: 8px 16px;
  border-radius: 8px;
  background: rgba(34,197,94,.12);
  border: 1px solid rgba(34,197,94,.25);
  color: rgba(160,255,190,.90);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s ease, transform .12s ease;
  font-family: inherit;
}

.tool-btn:hover {
  background: rgba(34,197,94,.20);
  transform: translateY(-1px);
}

.tool-btn:disabled {
  opacity: .45;
  cursor: default;
  transform: none;
}

.tool-btn--submit {
  margin-left: auto;
}

/* ── result areas ─────────────────────────────────── */

.tool-result {
  border-radius: 8px;
  overflow: hidden;
}

/* user lookup result card */
.tool-user-card {
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  overflow: hidden;
}

.tool-user-banner {
  height: 64px;
  background-size: cover;
  background-position: center;
}

.tool-user-banner--color {
  height: 64px;
}

.tool-user-body {
  padding: 10px 14px 14px;
  position: relative;
}

.tool-user-avatar-wrap {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 8px;
}

.tool-user-avatar-img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 3px solid rgba(0,0,0,.45);
  flex-shrink: 0;
}

.tool-user-names {
  padding-bottom: 4px;
}

.tool-user-global {
  font-size: 14px;
  font-weight: 800;
  color: rgba(233,238,248,.90);
  line-height: 1.2;
}

.tool-user-username {
  font-size: 12px;
  font-weight: 500;
  color: rgba(233,238,248,.40);
}

.tool-user-bot-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  background: #5865f2;
  color: #fff;
  margin-left: 4px;
  vertical-align: middle;
}

.tool-user-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
  margin-top: 8px;
}

.tool-user-meta-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.tool-user-meta-key {
  font-size: 10px;
  font-weight: 700;
  color: rgba(233,238,248,.30);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.tool-user-meta-val {
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(233,238,248,.78);
}

.tool-user-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 10px;
}

.tool-user-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(233,238,248,.65);
  text-transform: capitalize;
}

.tool-user-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.tool-user-action-link {
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(233,238,248,.40);
  text-decoration: none;
  transition: color .12s ease;
}

.tool-user-action-link:hover {
  color: rgba(34,197,94,.85);
  text-decoration: none;
}

/* snowflake result */
.tool-sf-wrap {
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 8px;
  overflow: hidden;
}

.tool-sf-date {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  background: rgba(0,170,37,.08);
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.tool-sf-date-main {
  font-size: 15px;
  font-weight: 700;
  color: #00aa25;
  letter-spacing: .01em;
}

.tool-sf-date-sub {
  font-size: 10px;
  font-weight: 600;
  color: rgba(0,170,37,.6);
  text-transform: uppercase;
  letter-spacing: .07em;
}

.tool-sf-date-utc {
  font-size: 11px;
  font-weight: 500;
  color: rgba(233,238,248,.35);
  margin-top: 2px;
}

.tool-sf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
  padding: 12px 14px;
  background: rgba(0,0,0,.12);
}

.tool-sf-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.tool-sf-key {
  font-size: 10px;
  font-weight: 700;
  color: rgba(233,238,248,.30);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.tool-sf-range {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  opacity: .7;
}

.tool-sf-val {
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(233,238,248,.78);
  word-break: break-all;
}

.tool-sf-code {
  font-family: 'Courier New', monospace;
  font-size: 11.5px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 4px;
  padding: 1px 5px;
  color: rgba(233,238,248,.85);
}

/* error / success states */
.tool-msg {
  font-size: 12.5px;
  font-weight: 600;
  padding: 10px 14px;
  border-radius: 8px;
}

.tool-msg--error {
  color: rgba(255,160,160,.85);
  background: rgba(239,68,68,.08);
  border: 1px solid rgba(239,68,68,.18);
}

.tool-msg--success {
  color: rgba(160,255,190,.85);
  background: rgba(34,197,94,.08);
  border: 1px solid rgba(34,197,94,.18);
}

/* ── report form ──────────────────────────────────── */

.report-type-row {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.report-type-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 700;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(233,238,248,.45);
  cursor: pointer;
  transition: all .12s ease;
  font-family: inherit;
}

.report-type-btn:hover {
  background: rgba(255,255,255,.07);
  color: rgba(233,238,248,.75);
}

.report-type-btn--active[data-type="bug"] {
  background: rgba(239,68,68,.10);
  border-color: rgba(239,68,68,.30);
  color: rgba(255,160,160,.90);
}

.report-type-btn--active[data-type="support"] {
  background: rgba(59,130,246,.10);
  border-color: rgba(59,130,246,.30);
  color: rgba(150,200,255,.90);
}

.report-type-btn--active[data-type="suggestion"] {
  background: rgba(34,197,94,.10);
  border-color: rgba(34,197,94,.30);
  color: rgba(160,255,190,.90);
}

.report-form {
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  background: rgba(255,255,255,.02);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.report-label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(233,238,248,.35);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: -4px;
}

.report-input,
.report-textarea {
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.20);
  color: rgba(233,238,248,.85);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  outline: none;
  resize: vertical;
  transition: border-color .12s ease;
}

.report-input::placeholder,
.report-textarea::placeholder {
  color: rgba(233,238,248,.22);
}

.report-input:focus,
.report-textarea:focus {
  border-color: rgba(34,197,94,.30);
}

.report-textarea {
  min-height: 100px;
}

.report-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2px;
}

.report-chars {
  font-size: 11px;
  font-weight: 600;
  color: rgba(233,238,248,.25);
}

/* ── full-width card ──────────────────────────────────── */

.tool-card--wide {
  grid-column: 1 / -1;
}

/* ── select input ─────────────────────────────────────── */

.tool-select {
  cursor: pointer;
}

/* ── copy result ──────────────────────────────────────── */

.tool-copy-result {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 8px;
  background: rgba(0,0,0,.15);
}

.tool-copy-code {
  flex: 1;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  color: rgba(233,238,248,.85);
  word-break: break-all;
  min-width: 0;
}

.tool-btn--copy {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  font-size: 11.5px;
}

/* ── timestamp picker ─────────────────────────────────── */

.tool-ts-picker {
  color-scheme: dark;
  accent-color: #22c55e;
}

/* ── timestamp generator ──────────────────────────────── */

.tool-ts-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.tool-ts-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}

.tool-ts-row:last-child { border-bottom: none; }

.tool-ts-label {
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(233,238,248,.35);
  width: 106px;
  flex-shrink: 0;
}

.tool-ts-code {
  flex: 1;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  color: rgba(233,238,248,.80);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 5px;
  padding: 3px 7px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tool-ts-copy {
  background: none;
  border: none;
  color: rgba(233,238,248,.28);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 5px;
  font-size: 12px;
  flex-shrink: 0;
  transition: color .12s ease, background .12s ease;
  font-family: inherit;
}

.tool-ts-copy:hover {
  color: rgba(34,197,94,.80);
  background: rgba(34,197,94,.08);
}

/* ── embed color picker ───────────────────────────────── */

.tool-color-picker {
  width: 44px;
  height: 38px;
  padding: 2px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.20);
  cursor: pointer;
  flex-shrink: 0;
}

.tool-color-result {
  display: flex;
  gap: 12px;
  align-items: stretch;
}

.tool-color-preview {
  width: 52px;
  border-radius: 8px;
  flex-shrink: 0;
  min-height: 52px;
}

.tool-color-values {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
}

.tool-color-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tool-color-key {
  font-size: 10px;
  font-weight: 700;
  color: rgba(233,238,248,.30);
  text-transform: uppercase;
  letter-spacing: .05em;
  width: 52px;
  flex-shrink: 0;
}

/* ── invite decoder ───────────────────────────────────── */

.tool-invite-card {
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0,0,0,.12);
}

.tool-invite-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.tool-invite-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
}

.tool-invite-icon-ph {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(88,101,242,.12);
  border: 1px solid rgba(88,101,242,.22);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(88,101,242,.75);
  font-size: 18px;
  flex-shrink: 0;
}

.tool-invite-name {
  font-size: 14px;
  font-weight: 800;
  color: rgba(233,238,248,.90);
}

.tool-invite-id {
  font-size: 11px;
  font-weight: 500;
  color: rgba(233,238,248,.28);
  margin-top: 2px;
}

.tool-invite-desc {
  font-size: 12px;
  line-height: 1.5;
  color: rgba(233,238,248,.42);
  padding: 8px 14px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}

.tool-invite-stats {
  display: flex;
  gap: 14px;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}

.tool-invite-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(233,238,248,.55);
}

.tool-invite-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dot-online { background: #22c55e; }
.dot-idle   { background: #f59e0b; }

.tool-invite-meta {
  padding: 8px 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.tool-invite-meta-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tool-invite-meta-key {
  font-size: 10px;
  font-weight: 700;
  color: rgba(233,238,248,.28);
  text-transform: uppercase;
  letter-spacing: .05em;
  width: 80px;
  flex-shrink: 0;
}

.tool-invite-meta-val {
  font-size: 12px;
  font-weight: 600;
  color: rgba(233,238,248,.70);
}

/* ── permission calculator ────────────────────────────── */

.tool-perm-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px 6px;
  margin-top: 4px;
}

@media (max-width: 860px) { .tool-perm-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .tool-perm-grid { grid-template-columns: repeat(2, 1fr); } }

.tool-perm-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 7px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(233,238,248,.48);
  transition: background .10s ease, color .10s ease;
  user-select: none;
}

.tool-perm-item:hover {
  background: rgba(255,255,255,.04);
  color: rgba(233,238,248,.75);
}

.tool-perm-cb {
  accent-color: #22c55e;
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  cursor: pointer;
}

/* ── custom select ────────────────────────────────────── */

.tool-custom-select {
  position: relative;
  width: 100%;
  user-select: none;
}

.tool-custom-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.20);
  color: rgba(233,238,248,.85);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .12s ease;
}

.tool-custom-select-trigger:hover,
.tool-custom-select--open .tool-custom-select-trigger {
  border-color: rgba(34,197,94,.35);
}

.tool-custom-select-arrow {
  font-size: 10px;
  color: rgba(233,238,248,.30);
  flex-shrink: 0;
  transition: transform .15s ease;
}

.tool-custom-select--open .tool-custom-select-arrow {
  transform: rotate(180deg);
}

.tool-custom-select-options {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 200;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 8px;
  background: #111416;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(0,0,0,.55);
}

.tool-custom-select--open .tool-custom-select-options {
  display: block;
}

.tool-custom-select-option {
  padding: 8px 12px;
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(233,238,248,.55);
  cursor: pointer;
  transition: background .10s ease, color .10s ease;
}

.tool-custom-select-option:hover {
  background: rgba(255,255,255,.05);
  color: rgba(233,238,248,.88);
}

.tool-custom-select-option--active {
  background: rgba(34,197,94,.07);
  color: rgba(160,255,190,.88);
}

/* ── dark color-scheme for native browser pickers ─────── */

.tool-input,
.tool-color-picker,
.tool-select {
  color-scheme: dark;
}

/* ── bot invite creator ───────────────────────────────── */

.tool-invitec-section-label {
  font-size: 10.5px;
  font-weight: 700;
  color: rgba(233,238,248,.30);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-top: 2px;
}

.tool-invitec-result {
  flex-wrap: wrap;
  gap: 8px;
}

.tool-invitec-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* ── info message ─────────────────────────────────── */

.tool-msg--info {
  color: rgba(147,197,253,.85);
  background: rgba(59,130,246,.08);
  border: 1px solid rgba(59,130,246,.18);
}

/* ── Networking Tools ─────────────────────────────── */

.tool-net-table {
  margin-top: 10px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  overflow: hidden;
}
.tool-net-row {
  display: flex;
  gap: 10px;
  padding: 7px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  align-items: baseline;
}
.tool-net-row:last-child { border-bottom: none; }
.tool-net-key {
  flex-shrink: 0;
  width: 90px;
  font-size: 10.5px;
  font-weight: 700;
  color: rgba(233,238,248,0.30);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.tool-net-val {
  font-size: 12.5px;
  color: rgba(233,238,248,0.82);
  word-break: break-all;
}

/* DNS record type buttons */
.tool-dns-types {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 8px;
}
.tool-dns-type {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  font-family: monospace;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 5px;
  background: rgba(255,255,255,0.04);
  color: rgba(233,238,248,0.45);
  cursor: pointer;
  transition: all 0.12s;
}
.tool-dns-type:hover { background: rgba(255,255,255,0.07); color: rgba(233,238,248,0.75); }
.tool-dns-type--active {
  background: rgba(34,197,94,0.12);
  border-color: rgba(34,197,94,0.32);
  color: #22c55e;
}

.tool-net-dns-result { margin-top: 10px; }
.tool-net-dns-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 4px;
}
.tool-net-dns-type {
  font-size: 11px; font-weight: 800; font-family: monospace;
  background: rgba(34,197,94,0.12); color: #22c55e;
  padding: 2px 7px; border-radius: 4px; flex-shrink: 0;
}
.tool-net-dns-domain {
  font-size: 13px; font-weight: 600; color: rgba(233,238,248,0.75);
}
.tool-net-dns-ttl {
  font-size: 11px; color: rgba(233,238,248,0.25); margin-left: auto;
}
.tool-net-dns-record {
  padding: 5px 0;
  font-size: 12.5px;
  font-family: monospace;
  color: rgba(233,238,248,0.80);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  word-break: break-all;
}
.tool-net-dns-record:last-child { border-bottom: none; }

/* HTTP status line */
.tool-net-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0 6px;
  flex-wrap: wrap;
}
.tool-net-status-code {
  font-size: 13px; font-weight: 800; font-family: monospace;
  padding: 2px 9px; border-radius: 5px; flex-shrink: 0;
}
.tool-net-status-code--ok       { background: rgba(34,197,94,0.12);  color: #22c55e; }
.tool-net-status-code--redirect { background: rgba(245,158,11,0.12); color: #f59e0b; }
.tool-net-status-code--err      { background: rgba(239,68,68,0.12);  color: #ef4444; }
.tool-net-status-reason {
  font-size: 13px; font-weight: 600; color: rgba(233,238,248,0.65);
}
.tool-net-status-url {
  font-size: 11px; color: rgba(233,238,248,0.25);
  word-break: break-all; margin-left: auto;
}

/* Port scanner */
.tool-ps-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
}
.tool-ps-preset {
  padding: 5px 13px;
  font-size: 12px; font-weight: 700;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 6px;
  background: rgba(255,255,255,0.04);
  color: rgba(233,238,248,0.50);
  cursor: pointer;
  transition: all 0.12s;
}
.tool-ps-preset:hover { background: rgba(255,255,255,0.07); color: rgba(233,238,248,0.80); }
.tool-ps-preset--active {
  background: rgba(34,197,94,0.10);
  border-color: rgba(34,197,94,0.28);
  color: #22c55e;
}

.tool-ps-summary {
  padding: 8px 0 4px;
  font-size: 13px;
  color: rgba(233,238,248,0.55);
}
.tool-ps-open-count { color: #22c55e; font-weight: 700; }
.tool-ps-ip { color: rgba(233,238,248,0.30); font-size: 11px; }

.tool-ps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 6px;
  margin-top: 8px;
}
.tool-ps-port {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: rgba(34,197,94,0.06);
  border: 1px solid rgba(34,197,94,0.16);
  border-radius: 7px;
}
.tool-ps-port-num {
  font-family: monospace;
  font-size: 13px;
  font-weight: 700;
  color: #22c55e;
}
.tool-ps-port-svc {
  font-size: 11px;
  color: rgba(233,238,248,0.38);
}

/* ── Webhook Tester ───────────────────────────────── */

.tool-wh-modes {
  display: flex;
  gap: 6px;
  margin: 8px 0;
}
.tool-wh-mode {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 12px; font-weight: 700;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 7px;
  background: rgba(255,255,255,0.04);
  color: rgba(233,238,248,0.50);
  cursor: pointer;
  transition: all 0.12s;
}
.tool-wh-mode:hover { background: rgba(255,255,255,0.07); color: rgba(233,238,248,0.80); }
.tool-wh-mode--active {
  background: rgba(88,101,242,0.14);
  border-color: rgba(88,101,242,0.35);
  color: #7289da;
}
.tool-textarea {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 8px;
  color: rgba(233,238,248,0.85);
  font-size: 13px;
  padding: 10px 12px;
  resize: vertical;
  font-family: inherit;
  box-sizing: border-box;
  outline: none;
  color-scheme: dark;
}
.tool-textarea:focus { border-color: rgba(34,197,94,0.35); }

/* ── Encoding & Hashing ───────────────────────────── */

.tool-enc-modes {
  display: flex;
  gap: 5px;
  margin-bottom: 8px;
}
.tool-enc-mode {
  padding: 5px 14px;
  font-size: 12px; font-weight: 700;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 6px;
  background: rgba(255,255,255,0.04);
  color: rgba(233,238,248,0.45);
  cursor: pointer;
  transition: all 0.12s;
}
.tool-enc-mode:hover { background: rgba(255,255,255,0.07); color: rgba(233,238,248,0.80); }
.tool-enc-mode--active {
  background: rgba(34,197,94,0.10);
  border-color: rgba(34,197,94,0.28);
  color: #22c55e;
}
.tool-enc-mode--sm {
  padding: 4px 9px;
  font-size: 11px;
}
.tool-hash-val {
  font-family: monospace;
  font-size: 12px;
  word-break: break-all;
}
.tool-hash-val:hover { color: #22c55e; }

/* ── Dev Utils ────────────────────────────────────── */

.tool-pre {
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 12px;
  font-family: monospace;
  color: rgba(233,238,248,0.80);
  overflow-x: auto;
  white-space: pre;
  margin-top: 10px;
  max-height: 320px;
  overflow-y: auto;
}
.tool-uuid-btns {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.tool-uuid-row { font-family: monospace; }

.tool-jwt-section { margin-top: 10px; }
.tool-jwt-label {
  font-size: 10.5px;
  font-weight: 700;
  color: rgba(233,238,248,0.30);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

.tool-regex-info {
  font-size: 12px;
  font-weight: 700;
  color: #22c55e;
  padding: 6px 0 2px;
}
.tool-regex-flags {
  display: flex;
  gap: 3px;
}
.tool-regex-flag {
  width: 26px; height: 26px;
  font-size: 12px; font-weight: 800;
  font-family: monospace;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 5px;
  background: rgba(255,255,255,0.04);
  color: rgba(233,238,248,0.40);
  cursor: pointer;
  transition: all 0.12s;
}
.tool-regex-flag:hover { background: rgba(255,255,255,0.07); }
.tool-regex-flag--active {
  background: rgba(34,197,94,0.12);
  border-color: rgba(34,197,94,0.30);
  color: #22c55e;
}
.tool-regex-delim {
  font-family: monospace;
  font-size: 18px;
  color: rgba(233,238,248,0.25);
  align-self: center;
  padding: 0 2px;
}

/* ── Web Tools ────────────────────────────────────── */

.tool-redirect-chain { margin-top: 10px; }
.tool-redirect-hop {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.tool-redirect-hop:last-child { border-bottom: none; }
.tool-redirect-num {
  width: 20px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(233,238,248,0.25);
  text-align: right;
  flex-shrink: 0;
}
.tool-redirect-url {
  font-size: 12px;
  color: rgba(233,238,248,0.65);
  word-break: break-all;
  min-width: 0;
}

.tool-robots-pre {
  max-height: 400px;
  font-size: 11.5px;
}

/* - UID Generator settings -------------------------------- */

.tool-uid-settings {
  display: flex;
  gap: 12px;
  margin-bottom: 8px;
}
.tool-uid-setting {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tool-uid-label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(233,238,248,0.35);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.tool-uid-num {
  width: 80px;
  text-align: center;
}

/* - DNS all results spacing ------------------------------- */

.tool-net-dns-section {
  margin-bottom: 12px;
}
.tool-net-dns-section:last-child {
  margin-bottom: 0;
}

/* - DNS type "All" button accent -------------------------- */

.tool-dns-type--all {
  background: rgba(88,101,242,0.15);
  color: rgba(88,101,242,0.85);
  border-color: rgba(88,101,242,0.3);
}
.tool-dns-type--all.tool-dns-type--active {
  background: rgba(88,101,242,0.35);
  color: #fff;
  border-color: #5865f2;
}