/* ─── Reset & base ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --amber:    #d97706;
  --amber-d:  #b45309;
  --amber-l:  #fde68a;
  --amber-bg: rgba(217,119,6,.07);
  --violet:   #7c3aed;
  --violet-l: #ddd6fe;
  --cream:    #fffbf5;
  --white:    #ffffff;
  --border:   #f0e8d8;
  --text-h:   #1c1007;
  --text-b:   #4b5563;
  --text-s:   #9ca3af;
  --sidebar-w: 260px;
  --header-h:  52px;
}

html, body {
  height: 100%;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--white);
  color: var(--text-h);
}

/* ─── Header ─── */
.t-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  display: flex;
  align-items: center;
  padding: 0 20px;
  border-bottom: 1px solid var(--border);
  background: var(--white);
  z-index: 100;
  gap: 16px;
}

.t-back {
  font-size: 13px;
  color: var(--text-s);
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s;
}
.t-back:hover { color: var(--amber); }

.t-header-center {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.t-heading {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-h);
}

.t-tagline {
  font-size: 11px;
  color: var(--text-s);
}

.lang-sw {
  display: flex;
  gap: 4px;
}
.lang-sw a {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 5px;
  cursor: pointer;
  color: var(--text-s);
  border: 1px solid transparent;
  transition: all .15s;
  text-decoration: none;
}
.lang-sw a:hover { color: var(--amber); }
.lang-sw a.active {
  color: var(--amber-d);
  border-color: var(--amber-l);
  background: var(--amber-bg);
}

/* ─── Layout ─── */
.t-layout {
  display: flex;
  height: 100vh;
  padding-top: var(--header-h);
}

/* ─── Sidebar ─── */
.t-sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  background: var(--cream);
  overflow-y: auto;
  padding: 14px 10px;
}

.t-cat {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-s);
  margin: 14px 0 6px 4px;
}
.t-cat:first-child { margin-top: 0; }

/* ─── Sidebar Tile (style C: horizontal, icon + name + desc) ─── */
.t-tile {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  margin-bottom: 5px;
  background: var(--white);
  transition: box-shadow .15s, border-color .15s;
  position: relative;
}
.t-tile:hover { box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.t-tile.active {
  border-color: var(--amber);
  box-shadow: 0 0 0 2px rgba(217,119,6,.12);
}
.t-tile.soon {
  opacity: .5;
  cursor: default;
  pointer-events: none;
}

.t-tile-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-family: monospace;
  font-weight: 700;
}

.t-tile-body {
  padding: 0 9px;
  min-width: 0;
}
.t-tile-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-h);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.t-tile-desc {
  font-size: 9px;
  color: var(--text-s);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.t-soon-badge {
  position: absolute;
  top: 3px;
  right: 4px;
  font-size: 8px;
  font-weight: 700;
  background: var(--border);
  color: var(--text-s);
  padding: 1px 5px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Tool icon gradient backgrounds */
.ic-jwt      { background: linear-gradient(135deg, #fef3c7, #fde68a); }
.ic-json     { background: linear-gradient(135deg, #ede9fe, #ddd6fe); }
.ic-cron     { background: linear-gradient(135deg, #fef3c7, #fed7aa); }
.ic-ts       { background: linear-gradient(135deg, #dbeafe, #bfdbfe); }
.ic-uuid     { background: linear-gradient(135deg, #d1fae5, #a7f3d0); }
.ic-base64   { background: linear-gradient(135deg, #fef9c3, #fef08a); }
.ic-hash     { background: linear-gradient(135deg, #fee2e2, #fecaca); }
.ic-regex    { background: linear-gradient(135deg, #fce7f3, #fbcfe8); }
.ic-url      { background: linear-gradient(135deg, #e0f2fe, #bae6fd); }
.ic-http     { background: linear-gradient(135deg, #f0fdf4, #bbf7d0); }
.ic-ipcidr   { background: linear-gradient(135deg, #f1f5f9, #e2e8f0); }
.ic-grpc     { background: linear-gradient(135deg, #ede9fe, #c4b5fd); }
.ic-passgen  { background: linear-gradient(135deg, #fce7f3, #f9a8d4); }
.ic-qr       { background: linear-gradient(135deg, #e0e7ff, #c7d2fe); }
.ic-timezone { background: linear-gradient(135deg, #dbeafe, #93c5fd); }
.ic-cost     { background: linear-gradient(135deg, #d1fae5, #6ee7b7); }
.ic-lorem    { background: linear-gradient(135deg, #fef3c7, #fde68a); }
.ic-bcrypt   { background: linear-gradient(135deg, #fce7f3, #f9a8d4); }
.ic-diff     { background: linear-gradient(135deg, #dbeafe, #bfdbfe); }
.ic-baseconv { background: linear-gradient(135deg, #d1fae5, #6ee7b7); }
.ic-strutils { background: linear-gradient(135deg, #ede9fe, #c4b5fd); }
.ic-csvjson  { background: linear-gradient(135deg, #f0fdf4, #bbf7d0); }
.ic-wordcount{ background: linear-gradient(135deg, #fef3c7, #fed7aa); }

/* ─── Main area ─── */
.t-main {
  flex: 1;
  overflow-y: auto;
  padding: 28px 32px;
  min-width: 0;
}

/* ─── Tool Panel ─── */
.tool-panel { display: none; }
.tool-panel.active { display: flex; flex-direction: column; height: 100%; gap: 16px; }

.tool-panel-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.tool-panel-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-family: monospace;
  font-weight: 700;
  flex-shrink: 0;
}
.tool-panel-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--amber-d);
}

.tool-body {
  flex: 1;
  display: flex;
  gap: 20px;
  min-height: 0;
}

.tool-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.tool-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-s);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.tool-input {
  flex: 1;
  padding: 10px 13px;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  border: 1.5px solid var(--border);
  border-radius: 9px;
  background: var(--white);
  color: var(--text-b);
  resize: none;
  outline: none;
  transition: border-color .15s;
  min-height: 140px;
}
.tool-input:focus { border-color: var(--amber-l); }

.tool-output {
  flex: 1;
  padding: 10px 13px;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  border: 1.5px solid var(--border);
  border-radius: 9px;
  background: var(--cream);
  color: var(--text-b);
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
  min-height: 140px;
}
.tool-output.has-result { border-color: var(--amber-l); }
.tool-output .ok  { color: #059669; }
.tool-output .err { color: #dc2626; }
.tool-output .key { color: var(--amber-d); }

.tool-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tool-btn {
  padding: 8px 20px;
  background: var(--amber);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
}
.tool-btn:hover { background: var(--amber-d); }

.tool-btn-ghost {
  padding: 8px 16px;
  background: transparent;
  color: var(--text-s);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.tool-btn-ghost:hover { border-color: var(--amber-l); color: var(--amber); }

/* Number input for UUID count */
.tool-count {
  width: 70px;
  padding: 8px 10px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  text-align: center;
  outline: none;
}

/* Coming soon panel */
.coming-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--text-s);
  text-align: center;
}
.coming-panel .coming-icon {
  font-size: 40px;
  opacity: .3;
}
.coming-panel .coming-text {
  font-size: 14px;
  max-width: 300px;
  line-height: 1.6;
}

/* ─── Single-line text input ─── */
.tool-input-line {
  padding: 8px 12px;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--white);
  color: var(--text-b);
  outline: none;
  width: 100%;
  transition: border-color .15s;
}
.tool-input-line:focus { border-color: var(--amber-l); }

/* ─── Search input ─── */
.tool-search {
  padding: 9px 14px;
  font-size: 13px;
  border: 1.5px solid var(--border);
  border-radius: 9px;
  background: var(--white);
  color: var(--text-b);
  outline: none;
  width: 100%;
  transition: border-color .15s;
}
.tool-search:focus { border-color: var(--amber-l); }

/* ─── Select dropdown ─── */
.tool-select {
  width: 100%;
  padding: 8px 12px;
  font-size: 13px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--white);
  color: var(--text-b);
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239ca3af' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}
.tool-select:focus { border-color: var(--amber-l); }

/* ─── HTTP Codes ─── */
.http-list { overflow-y: auto; flex: 1; }

.http-group-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-s);
  margin: 12px 0 6px;
  padding: 0 4px;
}
.http-group-title:first-child { margin-top: 0; }

.http-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 6px;
  border-radius: 6px;
  transition: background .12s;
}
.http-item:hover { background: var(--cream); }

.http-code {
  font-size: 12px;
  font-weight: 700;
  font-family: monospace;
  padding: 2px 7px;
  border-radius: 5px;
  flex-shrink: 0;
  min-width: 42px;
  text-align: center;
}
.c1xx { background: #dbeafe; color: #1d4ed8; }
.c2xx { background: #dcfce7; color: #15803d; }
.c3xx { background: #fef9c3; color: #a16207; }
.c4xx { background: #fee2e2; color: #b91c1c; }
.c5xx { background: #fce7f3; color: #9d174d; }

.http-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-h);
  line-height: 1.3;
}
.http-desc {
  font-size: 11px;
  color: var(--text-s);
  margin-top: 2px;
  line-height: 1.4;
}

/* ─── gRPC table ─── */
.grpc-overflow { overflow-x: auto; width: 100%; }

.grpc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.grpc-table thead th {
  text-align: left;
  padding: 8px 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-s);
  border-bottom: 1.5px solid var(--border);
}
.grpc-table thead th:first-child { width: 130px; }
.grpc-table tbody td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text-b);
  vertical-align: top;
  line-height: 1.5;
}
.grpc-table tbody td:first-child {
  font-weight: 600;
  color: var(--text-h);
  white-space: nowrap;
}
.grpc-table tbody tr:last-child td { border-bottom: none; }
.grpc-table tbody tr:hover td { background: var(--cream); }

/* ─── Password Generator ─── */
.passgen-options { display: flex; flex-direction: column; gap: 8px; }

.passgen-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-b);
  cursor: pointer;
}
.passgen-option input[type="checkbox"] {
  accent-color: var(--amber);
  width: 14px;
  height: 14px;
  cursor: pointer;
}

/* ─── QR output ─── */
.tool-output-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.tool-output-qr canvas {
  border-radius: 6px;
  border: 1px solid var(--border);
}

/* ─── Regex reference ─── */
.regex-ref { margin-bottom: 10px; }

.regex-ref-toggle {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 6px 10px;
  background: var(--cream);
  border: 1.5px solid var(--border);
  border-radius: 7px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-s);
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, color .15s;
  gap: 6px;
}
.regex-ref-toggle:hover { border-color: var(--amber-l); color: var(--text-b); }
.regex-ref-arrow { margin-left: auto; font-size: 10px; }

.regex-ref-body {
  margin-top: 5px;
  border: 1.5px solid var(--border);
  border-radius: 7px;
  overflow: hidden;
}

.regex-ref-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 5px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  line-height: 1.6;
}
.regex-ref-row:last-child { border-bottom: none; }
.regex-ref-row:nth-child(odd) { background: var(--cream); }

.regex-ref-row b {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-s);
  min-width: 58px;
  flex-shrink: 0;
}
.regex-ref-row span { color: var(--text-b); flex: 1; }
.regex-ref-row code {
  font-family: 'Courier New', monospace;
  font-size: 11px;
  background: var(--amber-bg);
  color: var(--amber-d);
  padding: 0 3px;
  border-radius: 3px;
}

/* ─── Flag chips ─── */
.regex-flags { display: flex; gap: 5px; flex-wrap: wrap; }

.flag-chip {
  padding: 4px 11px;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  font-weight: 700;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  background: var(--white);
  color: var(--text-s);
  cursor: pointer;
  transition: all .15s;
}
.flag-chip:hover { border-color: var(--amber-l); color: var(--amber); }
.flag-chip.active {
  border-color: var(--amber);
  background: var(--amber-bg);
  color: var(--amber-d);
}

/* ─── bcrypt ─── */
.bcrypt-section {
  padding: 12px;
  border: 1.5px solid var(--border);
  border-radius: 9px;
  background: var(--cream);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bcrypt-cost-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
}

/* ─── Diff ─── */
.diff-add { color: #059669; display: block; }
.diff-del { color: #dc2626; display: block; }
.diff-eq  { color: var(--text-s); display: block; }

/* ─── Base Converter ─── */
.baseconv-hint {
  font-size: 11px;
  color: var(--text-s);
  margin-bottom: 10px;
}

.baseconv-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.baseconv-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.baseconv-label {
  font-size: 11px;
  font-weight: 700;
  font-family: 'Courier New', monospace;
  color: var(--amber-d);
  width: 36px;
  flex-shrink: 0;
}

.baseconv-error {
  font-size: 12px;
  color: #dc2626;
  font-family: monospace;
  min-height: 18px;
  margin-top: 4px;
}

/* ─── String Utils ─── */
.strutils-ops {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.strutils-op {
  padding: 6px 12px;
  font-size: 11px;
}

/* ─── Mobile ─── */
@media (max-width: 768px) {
  html, body { overflow: auto; height: auto; }

  .t-layout { flex-direction: column; height: auto; overflow: visible; padding-top: var(--header-h); }

  .t-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border);
    overflow-y: visible;
    padding: 10px 12px;
  }

  .t-main { display: none; }

  /* Mobile: tiles full-width, tool area expands below active tile */
  .t-tile { margin-bottom: 6px; }
  .t-tile-name { font-size: 12px; }
  .t-tile-desc { font-size: 10px; }

  .mobile-tool-area {
    border: 1.5px solid var(--amber-l);
    border-radius: 10px;
    margin-bottom: 6px;
    padding: 16px;
    background: var(--white);
    display: none;
  }
  .mobile-tool-area.open { display: block; }

  .tool-panel.active { height: auto; }

  .tool-body { flex-direction: column; }

  .tool-input, .tool-output { min-height: 100px; flex: none; height: 120px; }

  .t-tagline { display: none; }
}