/* =========================================
   web-tools.css  –  Built-in Tools System
   lookforit.xyz
   ========================================= */

:root {
  --wt-bg: #ffffff;
  --wt-surface: #f8fafc;
  --wt-surface-soft: #f1f5f9;
  --wt-border: #dbe3ec;
  --wt-text: #1f2937;
  --wt-text-muted: #5b6778;
  --wt-accent: #e85d5d;
  --wt-accent-hover: #d84e4e;
  --wt-accent-soft: #fde8e8;
  --wt-success: #0f9f6e;
  --wt-danger: #c53030;
}

/* ---- Layout ---- */
.wt-container {
  background: #fff;
  border-radius: 10px;
  padding: 1.8em 2em;
  margin: 1.5em 0;
  box-shadow: 0 2px 12px rgba(0,0,0,.07);
  border: 1px solid #e5e7eb;
}

/* ---- Labels & Inputs ---- */
.wt-label {
  display: block;
  font-weight: 600;
  margin-bottom: .45em;
  color: #374151;
  font-size: .9em;
}
.wt-textarea {
  width: 100%;
  min-height: 160px;
  padding: .8em;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  font-family: 'Courier New', monospace;
  font-size: .88em;
  resize: vertical;
  box-sizing: border-box;
  background: #f9fafb;
  color: #111827;
  transition: border-color .2s;
}
.wt-textarea:focus {
  outline: none;
  border-color: #f56a6a;
  background: #fff;
}
.wt-input {
  width: 100%;
  padding: .62em .85em;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  font-size: 1em;
  box-sizing: border-box;
  background: #f9fafb;
  color: #111827;
  transition: border-color .2s;
}
.wt-input:focus {
  outline: none;
  border-color: #f56a6a;
  background: #fff;
}
.wt-select {
  padding: .62em .85em;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  font-size: .95em;
  background: #f9fafb;
  color: #111827;
  cursor: pointer;
}

/* ---- Buttons ---- */
.wt-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: .55em;
  margin: 1em 0;
}
.wt-btn {
  padding: .58em 1.35em;
  border: none;
  border-radius: 6px;
  background: #f56a6a;
  color: #fff;
  font-weight: 600;
  font-size: .88em;
  cursor: pointer;
  transition: background .18s, transform .12s;
}
.wt-btn:hover   { background: #e05555; transform: translateY(-1px); }
.wt-btn.blue    { background: #6366f1; }
.wt-btn.blue:hover { background: #4f46e5; }
.wt-btn.grey    { background: #6b7280; }
.wt-btn.grey:hover { background: #4b5563; }
.wt-btn.green   { background: #10b981; }
.wt-btn.green:hover { background: #059669; }

/* ---- Stats grid ---- */
.wt-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: .9em;
  margin: 1.2em 0;
}
.wt-stat-item {
  background: #f3f4f6;
  border-radius: 8px;
  padding: .9em .6em;
  text-align: center;
  border: 1px solid #e5e7eb;
}
.wt-stat-value {
  display: block;
  font-size: 1.75em;
  font-weight: 700;
  color: #f56a6a;
  line-height: 1.2;
}
.wt-stat-label {
  display: block;
  font-size: .72em;
  color: #6b7280;
  margin-top: .25em;
}

/* ---- Result / Status boxes ---- */
.wt-result {
  background: #f0fdf4;
  border: 1.5px solid #86efac;
  border-radius: 8px;
  padding: .9em 1.3em;
  font-size: 1.1em;
  font-weight: 600;
  color: #166534;
  margin: 1em 0;
  min-height: 2.2em;
}
.wt-error-box {
  background: #fef2f2;
  border: 1.5px solid #fca5a5;
  border-radius: 8px;
  padding: .7em 1.1em;
  color: #b91c1c;
  font-size: .88em;
  margin: .5em 0;
}
.wt-status {
  font-size: .85em;
  font-weight: 600;
  margin: .4em 0;
}
.wt-status.ok  { color: #059669; }
.wt-status.err { color: #dc2626; }

/* ---- Two-column flex row ---- */
.wt-row {
  display: flex;
  gap: 1em;
  align-items: flex-start;
  flex-wrap: wrap;
}
.wt-row > * { flex: 1; min-width: 200px; }

/* ---- Section headings inside tool ---- */
.wt-inner-title {
  font-size: 1em;
  font-weight: 700;
  color: #374151;
  margin: 1.4em 0 .5em;
  padding-bottom: .35em;
  border-bottom: 2px solid #f3f4f6;
}

/* ---- Diff compare ---- */
.diff-output {
  font-family: monospace;
  font-size: .84em;
  line-height: 1.65;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
}
.diff-same     { background: #f9fafb; padding: 2px 8px; border-left: 3px solid #e5e7eb; color: #374151; }
.diff-added    { background: #f0fdf4; padding: 2px 8px; border-left: 3px solid #86efac; color: #166534; }
.diff-removed  { background: #fef2f2; padding: 2px 8px; border-left: 3px solid #fca5a5; color: #b91c1c; }

/* ---- Calculator ---- */
.wt-calc-wrap { max-width: 340px; }
.wt-calc-display {
  width: 100%;
  box-sizing: border-box;
  padding: .75em 1em;
  font-size: 1.6em;
  text-align: right;
  border-radius: 8px;
  border: 1.5px solid #d1d5db;
  background: #1f2937;
  color: #f9fafb;
  font-family: monospace;
  margin-bottom: .5em;
}
.wt-calc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .45em;
}
.wt-calc-btn {
  padding: .85em;
  border: none;
  border-radius: 8px;
  font-size: 1.05em;
  font-weight: 600;
  cursor: pointer;
  background: #f3f4f6;
  color: #111827;
  transition: background .14s;
}
.wt-calc-btn:hover    { background: #e5e7eb; }
.wt-calc-btn.op       { background: #fee2e2; color: #991b1b; }
.wt-calc-btn.eq       { background: #f56a6a; color: #fff; }
.wt-calc-btn.eq:hover { background: #e05555; }
.wt-calc-btn.clr      { background: #fef3c7; color: #92400e; }
.wt-calc-btn.wide { grid-column: span 2; }

/* ---- Timer / Stopwatch ---- */
.wt-timer-display {
  font-size: 3.6em;
  font-weight: 700;
  font-family: monospace;
  color: #1f2937;
  text-align: center;
  padding: .45em .6em;
  background: #f9fafb;
  border-radius: 12px;
  border: 2px solid #e5e7eb;
  letter-spacing: .05em;
  margin: .8em 0;
}

/* ---- Todo list ---- */
.wt-todo-item {
  display: flex;
  align-items: center;
  gap: .75em;
  padding: .7em 1em;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  margin-bottom: .45em;
}
.wt-todo-item.done span { text-decoration: line-through; color: #9ca3af; }
.wt-todo-item span { flex: 1; color: #374151; }
.wt-todo-del {
  background: none;
  border: none;
  color: #ef4444;
  font-size: 1.1em;
  cursor: pointer;
  padding: 0 .3em;
  line-height: 1;
}
.wt-todo-count { font-size: .8em; color: #9ca3af; margin-left: .5em; }

/* ---- Color swatch ---- */
.wt-swatch {
  display: inline-block;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  border: 2px solid #d1d5db;
  vertical-align: middle;
  margin-right: .8em;
  background: #e5e7eb;
}
.wt-color-row { display: flex; align-items: center; gap: .6em; margin: .6em 0; flex-wrap: wrap; }
.wt-color-val { font-family: monospace; font-size: .9em; color: #374151; }

/* ---- Canvas image wrap ---- */
.wt-canvas-wrap {
  overflow-x: auto;
  margin: 1em 0;
  background: #f3f4f6;
  border-radius: 8px;
  padding: .5em;
}
.wt-canvas-wrap canvas {
  max-width: 100%;
  border-radius: 6px;
  border: 1.5px solid #d1d5db;
  cursor: crosshair;
  display: block;
}
.wt-preview-img {
  max-width: 100%;
  border-radius: 8px;
  border: 1.5px solid #d1d5db;
  margin-top: .8em;
  display: block;
}

/* ---- Breadcrumb nav ---- */
.wt-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: .3em;
  align-items: center;
  font-size: .82em;
  color: #9ca3af;
  margin-bottom: 1.2em;
  padding-bottom: .7em;
  border-bottom: 1px solid #f3f4f6;
}
.wt-breadcrumb a { color: #6b7280; text-decoration: none; }
.wt-breadcrumb a:hover { color: #f56a6a; }
.wt-breadcrumb .sep { color: #d1d5db; }

/* ---- Related tools ---- */
.wt-related { display: flex; flex-wrap: wrap; gap: .55em; margin: .8em 0 2em 0; }
.wt-related a {
  display: inline-block;
  padding: .38em .9em;
  background: #f3f4f6;
  border-radius: 999px;
  font-size: .82em;
  color: #374151;
  text-decoration: none;
  border: 1px solid #e5e7eb;
  transition: background .14s, border-color .14s, color .14s;
}
.wt-related a:hover { background: #fee2e2; border-color: #f56a6a; color: #f56a6a; }

/* ---- FAQ accordion ---- */
.wt-faq { margin: 1.8em 0; }
.wt-faq details {
  border-bottom: 1px solid #f3f4f6;
  padding: .8em 0;
}
.wt-faq details:last-child { border-bottom: none; }
.wt-faq summary {
  font-weight: 700;
  color: #1f2937;
  cursor: pointer;
  list-style: none;
  padding-right: 1.5em;
  position: relative;
}
.wt-faq summary::-webkit-details-marker { display: none; }
.wt-faq summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 0;
  color: #f56a6a;
  font-size: 1.2em;
  line-height: 1;
}
.wt-faq details[open] summary::after { content: '−'; }
.wt-faq-answer { color: #6b7280; font-size: .93em; line-height: 1.75; padding-top: .6em; }

/* ---- Features list ---- */
.wt-features ul { list-style: none; padding: 0; margin: 0; }
.wt-features ul li {
  padding: .38em 0 .38em 1.5em;
  position: relative;
  color: #374151;
  font-size: .93em;
}
.wt-features ul li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #10b981;
  font-weight: 700;
}

/* ---- Hub & Category cards ---- */
.wt-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1.4em;
  margin: 2em 0;
}
.wt-cat-card {
  background: #fff;
  border-radius: 12px;
  padding: 1.4em;
  border: 1.5px solid #e5e7eb;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  text-decoration: none;
  color: inherit;
  display: block;
  transition: box-shadow .18s, transform .14s, border-color .18s;
}
.wt-cat-card:hover {
  box-shadow: 0 5px 22px rgba(0,0,0,.11);
  transform: translateY(-2px);
  border-color: #f56a6a;
}
.wt-cat-icon { font-size: 2.4em; margin-bottom: .4em; display: block; }
.wt-cat-title { font-size: 1.15em; font-weight: 700; color: #1f2937; margin-bottom: .35em; }
.wt-cat-desc { font-size: .87em; color: #6b7280; margin-bottom: .8em; line-height: 1.55; }
.wt-cat-count { font-size: .78em; color: #9ca3af; }

.wt-tools-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1em;
  margin: 1.4em 0;
}
.wt-tool-card {
  background: #fff;
  border-radius: 10px;
  padding: 1.15em 1.3em;
  border: 1.5px solid #e5e7eb;
  box-shadow: 0 1px 6px rgba(0,0,0,.05);
  text-decoration: none;
  color: inherit;
  display: block;
  transition: box-shadow .18s, border-color .18s, transform .14s;
}
.wt-tool-card:hover {
  box-shadow: 0 3px 16px rgba(0,0,0,.09);
  border-color: #f56a6a;
  transform: translateY(-1px);
}
.wt-tool-card-icon { font-size: 1.75em; margin-bottom: .35em; }
.wt-tool-card-name  { font-weight: 700; color: #1f2937; margin-bottom: .25em; font-size: .97em; }
.wt-tool-card-desc  { font-size: .82em; color: #6b7280; line-height: 1.5; }

/* ---- Random picker result ---- */
.wt-pick-result {
  font-size: 2em;
  font-weight: 700;
  text-align: center;
  padding: .6em;
  border-radius: 10px;
  background: linear-gradient(135deg,#fff1f1,#ffeaea);
  border: 2px solid #f56a6a;
  color: #c0392b;
  margin: 1em 0;
  min-height: 2.2em;
}

/* ---- Notes ---- */
.wt-notes-meta { font-size: .78em; color: #9ca3af; margin-top: .4em; }

/* ---- Highlighted text (regex) ---- */
.wt-highlighted { font-family: monospace; font-size: .87em; line-height: 1.7; word-break: break-word; }
.wt-highlighted mark { background: #fef08a; color: #854d0e; border-radius: 3px; padding: 0 2px; }

/* ---- Sidebar: popular tools actions + categories ---- */
#sidebar ul.actions.fit.wt-sidebar-actions {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-left: 0;
  gap: 0.55em;
}

#sidebar ul.actions.fit.wt-sidebar-actions li {
  display: block;
  width: 100%;
  padding: 0;
  flex: 0 0 auto;
}

#sidebar ul.actions.fit.wt-sidebar-actions li > .button,
#sidebar ul.actions.fit.wt-sidebar-actions li > button,
#sidebar ul.actions.fit.wt-sidebar-actions li > input {
  width: 100%;
}

.wt-sidebar-categories {
  margin-top: 1em;
  padding-top: 0.8em;
  border-top: 1px solid #e5e7eb;
}

.wt-sidebar-categories h3 {
  margin: 0 0 0.5em 0;
  font-size: 0.92em;
  color: #374151;
}

.wt-sidebar-categories ul {
  margin: 0;
  padding-left: 1.15em;
}

.wt-sidebar-categories li {
  margin: 0.3em 0;
  font-size: 0.86em;
}

.wt-sidebar-categories a {
  color: #6b7280;
  border-bottom: 0;
}

.wt-sidebar-categories a:hover {
  color: #f56a6a;
}

/* ---- Global color normalization (all web-tools pages) ---- */
.wt-container,
.wt-cat-card,
.wt-tool-card {
  background: var(--wt-bg);
  border-color: var(--wt-border);
}

.wt-label,
.wt-inner-title,
.wt-cat-title,
.wt-tool-card-name,
.wt-faq summary,
.wt-todo-item span,
.wt-color-val,
.wt-features ul li {
  color: var(--wt-text);
}

.wt-cat-desc,
.wt-tool-card-desc,
.wt-faq-answer,
.wt-breadcrumb,
.wt-breadcrumb a,
.wt-cat-count,
.wt-notes-meta,
.wt-stat-label,
.wt-sidebar-categories a {
  color: var(--wt-text-muted);
}

.wt-textarea,
.wt-input,
.wt-select,
.wt-calc-display,
.wt-preview-img,
.wt-canvas-wrap canvas,
.wt-todo-item,
.wt-swatch,
.wt-timer-display,
.wt-stat-item,
.wt-related a,
.wt-breadcrumb,
.wt-faq details,
.wt-sidebar-categories {
  border-color: var(--wt-border);
}

.wt-textarea,
.wt-input,
.wt-select,
.wt-todo-item,
.wt-timer-display,
.wt-related a,
.wt-canvas-wrap,
.wt-stat-item,
.wt-calc-btn,
.wt-swatch {
  background: var(--wt-surface);
}

.wt-textarea:focus,
.wt-input:focus,
.wt-select:focus,
.wt-cat-card:hover,
.wt-tool-card:hover,
.wt-related a:hover,
.wt-breadcrumb a:hover,
.wt-faq summary::after,
.wt-sidebar-categories a:hover,
.wt-stat-value {
  color: var(--wt-accent);
}

.wt-textarea:focus,
.wt-input:focus,
.wt-cat-card:hover,
.wt-tool-card:hover,
.wt-related a:hover,
.wt-calc-btn.eq,
.wt-pick-result {
  border-color: var(--wt-accent);
}

.wt-btn,
.wt-calc-btn.eq {
  background: var(--wt-accent);
}

.wt-btn:hover,
.wt-calc-btn.eq:hover {
  background: var(--wt-accent-hover);
}

.wt-btn.green,
.wt-status.ok,
.wt-features ul li::before {
  color: var(--wt-success);
}

.wt-btn.green { background: var(--wt-success); }

.wt-btn.grey,
.wt-btn.blue {
  background: #5b6778;
}

.wt-btn.grey:hover,
.wt-btn.blue:hover {
  background: #4a5565;
}

.wt-todo-del,
.wt-status.err,
.wt-error-box {
  color: var(--wt-danger);
}

.wt-cat-icon,
.wt-tool-card-icon {
  color: var(--wt-accent);
}

.wt-cat-icon {
  background: var(--wt-accent-soft);
  border-radius: 10px;
  width: 2.3em;
  height: 2.3em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2em;
  font-weight: 700;
}

.wt-related a:hover {
  background: var(--wt-accent-soft);
}

/* ---- Responsive ---- */
@media screen and (max-width: 640px) {
  .wt-calc-wrap { max-width: 100%; }
  .wt-timer-display { font-size: 2.4em; }
  .wt-row { flex-direction: column; }
  .wt-row > * { min-width: 0; }
  .wt-cat-grid { grid-template-columns: 1fr; }
  .wt-tools-list { grid-template-columns: 1fr 1fr; }
  .wt-pick-result { font-size: 1.4em; }
}
@media screen and (max-width: 400px) {
  .wt-tools-list { grid-template-columns: 1fr; }
}