/*
  喵星人工具箱工具 UI 基线
  方向：克制、轻边界、高可读、操作区优先。
*/
:root {
  --tool-bg: #f7f8fb;
  --tool-surface: #ffffff;
  --tool-surface-soft: #f4f6f9;
  --tool-surface-muted: #eef2f6;
  --tool-border: #d9e0e8;
  --tool-border-soft: #e8edf3;
  --tool-text: #172033;
  --tool-text-muted: #5f6c7b;
  --tool-text-subtle: #7a8796;
  --tool-accent: #0f766e;
  --tool-accent-strong: #115e59;
  --tool-accent-soft: #e3f5f2;
  --tool-danger: #be123c;
  --tool-warning: #a16207;
  --tool-success: #047857;
  --tool-radius: 0.5rem;
  --tool-radius-sm: 0.375rem;
  --tool-shadow: 0 1px 2px rgba(20, 29, 45, 0.05);
  --tool-ring: 0 0 0 3px rgba(15, 118, 110, 0.16);
  --tool-icon-arrow-up-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 11 11 5'/%3E%3Cpath d='M6 5h5v5'/%3E%3C/svg%3E");
  --tool-icon-spark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 1.5 9.4 5 13 6.4 9.4 7.8 8 11.5 6.6 7.8 3 6.4 6.6 5 8 1.5Z'/%3E%3Cpath d='M12.2 10.2 12.8 11.6 14.2 12.2 12.8 12.8 12.2 14.2 11.6 12.8 10.2 12.2 11.6 11.6 12.2 10.2Z'/%3E%3C/svg%3E");
  --tool-icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='5' width='7' height='8' rx='1.4'/%3E%3Cpath d='M3 10.5V3.8C3 3 3.6 2.4 4.4 2.4h5.1'/%3E%3C/svg%3E");
  --tool-icon-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.8 4.4h10.4'/%3E%3Cpath d='M6.4 2.5h3.2'/%3E%3Cpath d='M4.2 4.4 4.8 13c.1.7.6 1.1 1.3 1.1h3.8c.7 0 1.2-.4 1.3-1.1l.6-8.6'/%3E%3Cpath d='M6.9 7.1v4.1M9.1 7.1v4.1'/%3E%3C/svg%3E");
  --tool-icon-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2.5v6.2'/%3E%3Cpath d='m5.5 6.4 2.5 2.5 2.5-2.5'/%3E%3Cpath d='M3.2 10.8v1.7c0 .8.6 1.4 1.4 1.4h6.8c.8 0 1.4-.6 1.4-1.4v-1.7'/%3E%3C/svg%3E");
  --tool-icon-upload: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 13.5V7.3'/%3E%3Cpath d='M5.5 9.6 8 7.1l2.5 2.5'/%3E%3Cpath d='M3.2 5.2V3.5c0-.8.6-1.4 1.4-1.4h6.8c.8 0 1.4.6 1.4 1.4v1.7'/%3E%3C/svg%3E");
  --tool-icon-code: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.7 5-3 3 3 3'/%3E%3Cpath d='m10.3 5 3 3-3 3'/%3E%3Cpath d='m8.9 3.6-1.8 8.8'/%3E%3C/svg%3E");
  --tool-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.3 8.4 3 3 6.4-6.8'/%3E%3C/svg%3E");
  --tool-icon-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'%3E%3Cpath d='M5 3.7c0-.9 1-1.4 1.7-.9l5.7 4.1c.6.4.6 1.4 0 1.8l-5.7 4.1c-.7.5-1.7 0-1.7-.9V3.7Z'/%3E%3C/svg%3E");
  --tool-icon-refresh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 8a5 5 0 1 1-1.5-3.5'/%3E%3Cpath d='M13 3.5v3h-3'/%3E%3C/svg%3E");
  --tool-icon-sample: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 2.8h6.8L12.5 5v8.2H3.5V2.8Z'/%3E%3Cpath d='M10 2.8V5h2.5'/%3E%3Cpath d='M5.6 8h4.8M5.6 10.4h4.8'/%3E%3C/svg%3E");
  --tool-icon-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='5.7'/%3E%3Cpath d='M8 4.8v3.5l2.2 1.3'/%3E%3C/svg%3E");
  --tool-icon-swap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5.2h9.5'/%3E%3Cpath d='m10.2 2.9 2.3 2.3-2.3 2.3'/%3E%3Cpath d='M13 10.8H3.5'/%3E%3Cpath d='m5.8 8.5-2.3 2.3 2.3 2.3'/%3E%3C/svg%3E");
  --tool-icon-more: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'%3E%3Ccircle cx='4' cy='8' r='1.2'/%3E%3Ccircle cx='8' cy='8' r='1.2'/%3E%3Ccircle cx='12' cy='8' r='1.2'/%3E%3C/svg%3E");
  --tool-icon-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.8 10.5A5.8 5.8 0 0 1 5.5 3.2 5.8 5.8 0 1 0 12.8 10.5Z'/%3E%3C/svg%3E");
  --tool-icon-minify: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.2 5.2h9.6M5.2 8h5.6M6.8 10.8h2.4'/%3E%3C/svg%3E");
  --tool-icon-sort: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3v10'/%3E%3Cpath d='M2.8 5.2 5 3l2.2 2.2'/%3E%3Cpath d='M11 13V3'/%3E%3Cpath d='M8.8 10.8 11 13l2.2-2.2'/%3E%3C/svg%3E");
}

.dark {
  --tool-bg: #0b1120;
  --tool-surface: #111827;
  --tool-surface-soft: #172033;
  --tool-surface-muted: #1f2937;
  --tool-border: #2b3748;
  --tool-border-soft: #223044;
  --tool-text: #eef2f7;
  --tool-text-muted: #b8c2cf;
  --tool-text-subtle: #8c9aac;
  --tool-accent: #5eead4;
  --tool-accent-strong: #99f6e4;
  --tool-accent-soft: rgba(20, 184, 166, 0.12);
  --tool-shadow: 0 1px 2px rgba(0, 0, 0, 0.24);
  --tool-ring: 0 0 0 3px rgba(94, 234, 212, 0.18);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--tool-bg);
  color: var(--tool-text);
  line-height: 1.6;
  transition: background 0.3s ease, color 0.3s ease;
}

.dark body {
  background: var(--tool-bg);
  color: var(--tool-text);
}

h1, h2, h3 {
  font-weight: 700;
  margin-bottom: 0.5rem;
}

a {
  color: var(--tool-accent-strong);
  transition: color 0.3s ease;
}

a:hover {
  color: var(--tool-accent);
  text-decoration: underline;
}

.card,
.tool-card {
  background-color: var(--tool-surface);
  color: var(--tool-text);
  border: 1px solid var(--tool-border-soft);
  border-radius: var(--tool-radius-sm);
  box-shadow: none;
  transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
  padding: 0.85rem;
  text-align: left;
}

.tool-card {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.tool-card-media {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: var(--tool-radius-sm);
  background: var(--tool-surface-soft);
}

.tool-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tool-card-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.55rem;
  align-items: center;
}

.tool-card .tool-title-lg,
.tool-card .tool-copy {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
}

.tool-card .tool-title-lg {
  -webkit-line-clamp: 2;
}

.tool-card .tool-copy {
  -webkit-line-clamp: 2;
}

.tool-card:hover {
  transform: translateY(-1px);
  border-color: var(--tool-accent);
  background: var(--tool-surface-soft);
  text-decoration: none;
}

.dark .card,
.dark .tool-card {
  background-color: var(--tool-surface);
  color: var(--tool-text);
  border-color: var(--tool-border-soft);
}

.tool-btn,
.button,
.tool-button-primary,
.tool-button-secondary,
.tool-button-ghost {
  --tool-btn-bg: var(--tool-surface);
  --tool-btn-border: var(--tool-border);
  --tool-btn-color: var(--tool-text);
  --tool-btn-hover-bg: var(--tool-surface-soft);
  --tool-btn-hover-border: var(--tool-accent);
  --tool-btn-hover-color: var(--tool-text);
  --tool-btn-icon: var(--tool-icon-arrow-up-right);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
  appearance: none;
  position: relative;
  border: 1px solid var(--tool-btn-border);
  border-radius: var(--tool-radius-sm);
  background: var(--tool-btn-bg);
  padding: 0.66rem 0.88rem;
  min-height: 2.55rem;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--tool-btn-color);
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(20, 29, 45, 0.05);
  transition: transform 0.16s ease, background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.tool-btn::before,
.button::before,
.tool-button-primary::before,
.tool-button-secondary::before,
.tool-button-ghost::before {
  content: "";
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  background-color: currentColor;
  opacity: 0.94;
  -webkit-mask-image: var(--tool-btn-icon);
  mask-image: var(--tool-btn-icon);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.tool-btn:hover,
.button:hover,
.tool-button-primary:hover,
.tool-button-secondary:hover,
.tool-button-ghost:hover {
  transform: translateY(-1px);
  border-color: var(--tool-btn-hover-border);
  background: var(--tool-btn-hover-bg);
  color: var(--tool-btn-hover-color);
  box-shadow: 0 2px 4px rgba(20, 29, 45, 0.08);
  text-decoration: none;
}

.tool-btn:active,
.button:active,
.tool-button-primary:active,
.tool-button-secondary:active,
.tool-button-ghost:active {
  transform: translateY(0);
  box-shadow: none;
}

.tool-btn:disabled,
.button:disabled,
.tool-button-primary:disabled,
.tool-button-secondary:disabled,
.tool-button-ghost:disabled {
  cursor: not-allowed;
  transform: none;
  border-color: #cbd5e1;
  background: #cbd5e1;
  color: #64748b;
  box-shadow: none;
}

.tool-button-primary,
.button,
.tool-btn-primary {
  --tool-btn-bg: var(--tool-accent-strong);
  --tool-btn-border: var(--tool-accent-strong);
  --tool-btn-color: #ffffff;
  --tool-btn-hover-bg: var(--tool-accent);
  --tool-btn-hover-border: var(--tool-accent);
  --tool-btn-hover-color: #ffffff;
  --tool-btn-icon: var(--tool-icon-spark);
}

.tool-button-secondary,
.tool-btn-secondary {
  --tool-btn-bg: var(--tool-surface-soft);
  --tool-btn-border: var(--tool-border);
  --tool-btn-color: var(--tool-text);
  --tool-btn-hover-bg: var(--tool-surface-muted);
  --tool-btn-hover-border: var(--tool-accent);
  --tool-btn-hover-color: var(--tool-text);
  --tool-btn-icon: var(--tool-icon-check);
}

.tool-button-ghost,
.tool-btn-ghost {
  --tool-btn-bg: transparent;
  --tool-btn-border: var(--tool-border-soft);
  --tool-btn-color: var(--tool-text-muted);
  --tool-btn-hover-bg: var(--tool-surface-soft);
  --tool-btn-hover-border: var(--tool-border);
  --tool-btn-hover-color: var(--tool-text);
  --tool-btn-icon: var(--tool-icon-more);
  box-shadow: none;
}

.tool-btn-icon {
  width: 2.5rem;
  padding-inline: 0;
}

.tool-btn-icon > span:not(.sr-only) {
  display: none;
}

.tool-btn-icon::before {
  margin: 0;
}

.dark .tool-btn,
.dark .button,
.dark .tool-button-primary,
.dark .tool-button-secondary,
.dark .tool-button-ghost {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.28);
}

.dark .tool-button-primary,
.dark .button,
.dark .tool-btn-primary {
  --tool-btn-bg: var(--tool-accent);
  --tool-btn-border: var(--tool-accent);
  --tool-btn-color: #082f49;
  --tool-btn-hover-bg: var(--tool-accent-strong);
  --tool-btn-hover-border: var(--tool-accent-strong);
  --tool-btn-hover-color: #082f49;
}

.dark .tool-button-secondary,
.dark .tool-btn-secondary {
  --tool-btn-bg: var(--tool-surface-soft);
  --tool-btn-border: var(--tool-border);
  --tool-btn-color: var(--tool-text);
  --tool-btn-hover-bg: var(--tool-surface-muted);
  --tool-btn-hover-border: var(--tool-accent);
  --tool-btn-hover-color: var(--tool-text);
}

.dark .tool-button-ghost,
.dark .tool-btn-ghost {
  --tool-btn-bg: rgba(255, 255, 255, 0.02);
  --tool-btn-border: var(--tool-border-soft);
  --tool-btn-color: var(--tool-text-muted);
  --tool-btn-hover-bg: var(--tool-surface-soft);
  --tool-btn-hover-border: var(--tool-border);
  --tool-btn-hover-color: var(--tool-text);
}

.dark .tool-btn:hover,
.dark .button:hover,
.dark .tool-button-primary:hover,
.dark .tool-button-secondary:hover,
.dark .tool-button-ghost:hover {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.32);
}

.dark .tool-btn:disabled,
.dark .button:disabled,
.dark .tool-button-primary:disabled,
.dark .tool-button-secondary:disabled,
.dark .tool-button-ghost:disabled {
  border-color: #334155;
  background: #334155;
  color: #94a3b8;
}

[data-icon="copy"],
#copyBtn,
#md-copy-btn,
#qr-copy-btn,
#copy-input-btn,
#copy-output-btn,
#copySourceBtn,
#copyHeaderBtn,
#copyPayloadBtn,
#hashCopyAllBtn,
#hashCopyInputBtn,
#jwtCopyTokenBtn,
#copy-all-btn,
#slugGeneratorCopy,
.hash-copy-btn,
.uuid-copy-btn,
.copy-result-btn,
.copy-match-btn,
.qr-copy-item {
  --tool-btn-icon: var(--tool-icon-copy);
}

[data-icon="clear"],
[data-icon="trash"],
#clearBtn,
#md-clear-btn,
#qr-clear-btn,
#hashClearBtn,
#jwtClearBtn,
#clear-input-btn,
#clear-output-btn,
#clear-btn,
#wordCounterClear,
#slugGeneratorClear {
  --tool-btn-icon: var(--tool-icon-trash);
}

[data-icon="download"],
#qrDownloadBtn,
#download-btn,
a.tool-button-secondary[href*="download"],
a.tool-button-secondary[href*="token"],
#image-compress-submit {
  --tool-btn-icon: var(--tool-icon-download);
}

[data-icon="upload"],
#image-compress-trigger,
#converter-file-trigger {
  --tool-btn-icon: var(--tool-icon-upload);
}

[data-icon="sample"],
#loadSampleBtn,
#jwtLoadSampleBtn,
#md-sample-btn,
#resetBtn {
  --tool-btn-icon: var(--tool-icon-sample);
}

[data-icon="clock"],
#use-now,
#use-today,
#set-now-start,
#set-now-end {
  --tool-btn-icon: var(--tool-icon-clock);
}

[data-icon="swap"],
#swap-dates {
  --tool-btn-icon: var(--tool-icon-swap);
}

[data-icon="code"],
#encodeBtn,
#decodeBtn,
#encode-btn,
#decode-btn,
#jwtDecodeBtn {
  --tool-btn-icon: var(--tool-icon-code);
}

[data-icon="check"],
#validateBtn {
  --tool-btn-icon: var(--tool-icon-check);
}

[data-icon="minify"],
#minifyBtn {
  --tool-btn-icon: var(--tool-icon-minify);
}

[data-icon="sort"],
#sortBtn {
  --tool-btn-icon: var(--tool-icon-sort);
}

[data-icon="spark"] {
  --tool-btn-icon: var(--tool-icon-spark);
}

[data-icon="run"],
#runBtn {
  --tool-btn-icon: var(--tool-icon-play);
}

[data-icon="refresh"],
#themeToggle {
  --tool-btn-icon: var(--tool-icon-moon);
}

#converter-submit {
  --tool-btn-icon: var(--tool-icon-download);
}

#formatBtn,
#dedupeBtn,
#generateBtn,
#generate-btn,
#hashGenerateBtn,
#qrGenerateBtn,
#convertBtn {
  --tool-btn-icon: var(--tool-icon-spark);
}

.button:focus-visible,
.tool-btn:focus-visible,
.tool-button-primary:focus-visible,
.tool-button-secondary:focus-visible,
.tool-button-ghost:focus-visible {
  outline: 0;
  outline-offset: 2px;
  box-shadow: var(--tool-ring);
}

input,
select {
  background-color: var(--tool-surface);
  border: 1px solid var(--tool-border);
  padding: 0.5rem 0.75rem;
  border-radius: var(--tool-radius-sm);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
  width: 100%;
}

input:focus, select:focus {
  border-color: var(--tool-accent);
  box-shadow: var(--tool-ring);
  outline: none;
}

.dark input,
.dark select {
  background-color: var(--tool-surface);
  border-color: var(--tool-border);
  color: var(--tool-text);
}

footer {
  margin-top: 2rem;
  font-size: 0.875rem;
  color: var(--tool-text-subtle);
  text-align: center;
}

.dark footer {
  color: var(--tool-text-subtle);
}

.site-shell {
  margin: 0 auto;
  max-width: 72rem;
  padding: 1rem;
}

@media (min-width: 640px) {
  .site-shell {
    padding: 1.5rem;
  }
}

.site-header {
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--tool-border-soft);
  padding-bottom: 1rem;
}

.site-header-title {
  margin-top: 0.35rem;
  font-size: clamp(1.35rem, 2vw, 1.95rem);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--tool-text);
}

.site-header-copy {
  margin-top: 0.35rem;
  max-width: 48rem;
  font-size: 0.875rem;
  color: var(--tool-text-muted);
}

.site-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--tool-text-muted);
  font-size: 0.875rem;
  font-weight: 600;
}

.site-back-link:hover {
  color: var(--tool-accent-strong);
  text-decoration: none;
}

.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.6rem;
}

.home-ai-search {
  border: 1px solid var(--tool-border-soft);
  border-radius: var(--tool-radius);
  background: var(--tool-surface);
  padding: 0.75rem;
}

.home-ai-search-label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.55rem;
  color: var(--tool-accent-strong);
  font-size: 0.78rem;
  font-weight: 750;
}

.home-ai-search-spark {
  width: 1rem;
  height: 1rem;
  background: currentColor;
  -webkit-mask: var(--tool-icon-spark) center / contain no-repeat;
  mask: var(--tool-icon-spark) center / contain no-repeat;
}

.home-ai-search-box {
  display: flex;
  align-items: center;
  border: 1px solid var(--tool-border);
  border-radius: var(--tool-radius-sm);
  background: var(--tool-surface-soft);
  min-height: 3rem;
  padding: 0 0.8rem;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.home-ai-search-box:focus-within {
  border-color: var(--tool-accent);
  background: var(--tool-surface);
  box-shadow: var(--tool-ring);
}

.home-ai-search-input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--tool-text);
  font-size: 0.98rem;
  font-weight: 650;
  outline: none;
}

.home-ai-search-input::placeholder {
  color: var(--tool-text-subtle);
  font-weight: 600;
}

.home-ai-search-hints {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.65rem;
}

.home-ai-search-hints button {
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--tool-surface-soft);
  padding: 0.28rem 0.55rem;
  color: var(--tool-text-muted);
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.2;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.home-ai-search-hints button:hover,
.home-ai-search-hints button:focus-visible {
  border-color: var(--tool-accent);
  background: var(--tool-accent-soft);
  color: var(--tool-accent-strong);
  outline: none;
}

.dark .home-ai-search {
  border-color: var(--tool-border-soft);
  background: var(--tool-surface);
}

.tool-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--tool-radius-sm);
  background: var(--tool-accent-soft);
  font-size: 1rem;
}

.empty-state {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  border: 1px dashed var(--tool-border);
  border-radius: var(--tool-radius);
  color: var(--tool-text-muted);
  background: var(--tool-surface);
}

.dark .empty-state {
  border-color: var(--tool-border);
  color: var(--tool-text-muted);
  background: var(--tool-surface);
}

.tool-ai-panel {
  border: 1px solid var(--tool-border-soft);
  border-radius: var(--tool-radius);
  background: var(--tool-surface);
  padding: 1rem;
  box-shadow: none;
}

.tool-ai-panel[hidden] {
  display: none;
}

.tool-ai-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.tool-ai-panel-header > div {
  min-width: 0;
}

.tool-ai-summary {
  margin-top: 0.25rem;
  color: var(--tool-text-muted);
  overflow-wrap: anywhere;
}

.tool-ai-source {
  flex: 0 0 auto;
  border-radius: var(--tool-radius-sm);
  background: var(--tool-accent-soft);
  padding: 0.25rem 0.45rem;
  font-size: 0.75rem;
  font-weight: 650;
  color: var(--tool-accent-strong);
  white-space: nowrap;
}

.tool-ai-results {
  display: grid;
  gap: 1rem;
}

.tool-ai-results[hidden],
.tool-ai-steps[hidden] {
  display: none;
}

.tool-section-kicker {
  margin-bottom: 0.45rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--tool-text-subtle);
}

.tool-ai-list {
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--tool-border-soft);
  border-radius: var(--tool-radius-sm);
  background: var(--tool-surface);
}

.tool-ai-tool {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  border-bottom: 1px solid var(--tool-border-soft);
  padding: 0.78rem 0.85rem;
  color: var(--tool-text);
}

.tool-ai-tool:last-child {
  border-bottom: 0;
}

.tool-ai-tool:hover {
  background: var(--tool-surface-soft);
  text-decoration: none;
}

.tool-ai-thumb {
  flex: 0 0 4.5rem;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: var(--tool-radius-sm);
  background: var(--tool-surface-soft);
}

.tool-ai-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tool-ai-tool-copy {
  display: grid;
  gap: 0.2rem;
  flex: 1 1 auto;
  min-width: 0;
}

.tool-ai-tool-copy strong {
  color: var(--tool-text);
  font-weight: 650;
}

.tool-ai-tool-copy span {
  color: var(--tool-text-muted);
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}

.tool-ai-open {
  flex: 0 0 auto;
  color: var(--tool-accent-strong);
  font-size: 0.8125rem;
  font-weight: 650;
}

.tool-ai-steps {
  margin: 0;
  padding-left: 1.15rem;
  color: var(--tool-text-muted);
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}

.tool-ai-steps li + li {
  margin-top: 0.35rem;
}

@media (max-width: 640px) {
  .tool-ai-panel {
    padding: 0.85rem;
  }

  .tool-ai-panel-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.65rem;
  }

  .tool-ai-tool {
    align-items: center;
    flex-direction: row;
    gap: 0.45rem;
    padding: 0.75rem;
  }

  .tool-ai-thumb {
    flex-basis: 3.75rem;
  }

  .tool-ai-source {
    white-space: normal;
  }
}

.dark .tool-ai-panel,
.dark .tool-ai-list {
  border-color: var(--tool-border-soft);
  background: var(--tool-surface);
}

.dark .tool-ai-tool {
  border-color: var(--tool-border-soft);
  color: var(--tool-text);
}

.dark .tool-ai-tool:hover {
  background: var(--tool-surface-soft);
}

.dark .tool-ai-source {
  background: var(--tool-accent-soft);
  color: var(--tool-accent-strong);
}

.tool-panel {
  border: 1px solid var(--tool-border-soft);
  border-radius: var(--tool-radius);
  background: var(--tool-surface);
  padding: 1.25rem;
  box-shadow: none;
}

.tool-intro {
  border-bottom: 1px solid var(--tool-border-soft);
  padding-bottom: 1rem;
}

.tool-page-visual {
  margin-bottom: 1.5rem;
}

.tool-visual-header {
  display: grid;
  gap: 1rem;
  align-items: start;
  border-bottom: 1px solid var(--tool-border-soft);
  padding-bottom: 1rem;
}

.tool-visual-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
}

.tool-visual-guide {
  display: grid;
  gap: 0.85rem;
  margin-top: 1rem;
}

.tool-compact-steps,
.tool-compact-list {
  margin: 0.45rem 0 0;
  padding-left: 1.15rem;
  color: var(--tool-text-muted);
  font-size: 0.875rem;
  line-height: 1.65;
}

.tool-compact-steps li + li,
.tool-compact-list li + li {
  margin-top: 0.25rem;
}

.dark .tool-compact-steps,
.dark .tool-compact-list {
  color: var(--tool-text-muted);
}

.tool-visual-media {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid var(--tool-border-soft);
  border-radius: var(--tool-radius);
  background: var(--tool-surface-soft);
  aspect-ratio: 16 / 9;
}

.tool-visual-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dark .tool-visual-header {
  border-color: var(--tool-border-soft);
}

.dark .tool-visual-media {
  border-color: var(--tool-border-soft);
  background: var(--tool-surface-soft);
}

@media (min-width: 1024px) {
  .tool-visual-header {
    grid-template-columns: minmax(0, 0.85fr) minmax(18rem, 1.15fr);
  }
}

.tool-workbench-header {
  border-bottom: 1px solid var(--tool-border-soft);
  padding-bottom: 0.85rem;
}

.tool-workbench-header .tool-badge {
  padding: 0;
  background: transparent;
  font-size: 0.72rem;
  color: var(--tool-text-subtle);
}

.tool-workbench-header .tool-hero-title {
  margin-top: 0.35rem;
  font-size: 1.35rem;
  line-height: 1.25;
}

.tool-workbench-header .tool-hero-copy {
  margin-top: 0.35rem;
  max-width: 38rem;
}

.dark .tool-workbench-header .tool-badge {
  background: transparent;
  color: var(--tool-text-subtle);
}

.tool-section {
  border: 1px solid var(--tool-border-soft);
  border-radius: var(--tool-radius);
  background: var(--tool-surface);
  padding: 1rem;
}

.tool-dual-pane {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 1024px) {
  .tool-dual-pane {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .tool-dual-pane-wide-right {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  }

  .tool-dual-pane-wide-left {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  }
}

@media (min-width: 640px) {
  .tool-section {
    padding: 1.25rem;
  }
}

.tool-note {
  border-left: 3px solid var(--tool-border);
  padding: 0.25rem 0 0.25rem 1rem;
  color: var(--tool-text-muted);
}

.dark .tool-panel {
  border-color: var(--tool-border-soft);
  background: var(--tool-surface);
}

.tool-panel-compact {
  border: 1px solid var(--tool-border-soft);
  border-radius: var(--tool-radius);
  background: var(--tool-surface);
  padding: 1rem;
  box-shadow: none;
}

@media (min-width: 640px) {
  .tool-panel-compact {
    padding: 1.5rem;
  }
}

.dark .tool-panel-compact {
  border-color: var(--tool-border-soft);
  background: var(--tool-surface);
}

.tool-title-lg {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--tool-text);
}

.tool-title-xl {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--tool-text);
}

.dark .tool-title-lg,
.dark .tool-title-xl {
  color: #ffffff;
  color: var(--tool-text);
}

.tool-copy {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: var(--tool-text-muted);
}

.dark .tool-copy {
  color: var(--tool-text-muted);
}

.tool-hero-eyebrow {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--tool-accent-strong);
}

.tool-hero-title {
  margin-top: 0.5rem;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--tool-text);
}

.tool-hero-copy {
  margin-top: 0.5rem;
  max-width: 42rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--tool-text-muted);
}

.dark .tool-hero-eyebrow {
  color: var(--tool-accent);
}

.dark .tool-hero-title {
  color: var(--tool-text);
}

.dark .tool-hero-copy {
  color: var(--tool-text-muted);
}

.tool-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--tool-text);
}

.dark .tool-label {
  color: var(--tool-text);
}

.tool-field-hint {
  margin-top: 0.5rem;
  display: block;
  font-size: 0.75rem;
  color: var(--tool-text-subtle);
}

.dark .tool-field-hint {
  color: var(--tool-text-subtle);
}

.tool-control {
  width: 100%;
  border: 1px solid var(--tool-border);
  border-radius: var(--tool-radius-sm);
  background: var(--tool-surface);
  color: var(--tool-text);
  padding: 0.68rem 0.8rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.tool-control:focus {
  border-color: var(--tool-accent);
  box-shadow: var(--tool-ring);
  background: var(--tool-surface);
}

.dark .tool-control {
  border-color: var(--tool-border);
  background: var(--tool-surface);
  color: var(--tool-text);
}

.dark .tool-control:focus {
  border-color: var(--tool-accent);
  box-shadow: var(--tool-ring);
  background: var(--tool-surface);
}

.tool-control-sm {
  padding: 0.75rem 0.75rem;
}

.tool-control-short {
  max-width: 12rem;
}

.tool-control-date {
  max-width: 17rem;
}

.tool-control-lg {
  padding: 1rem;
}

.tool-control-filled {
  background: var(--tool-surface-soft);
}

.dark .tool-control-filled {
  background: var(--tool-surface-soft);
}

.tool-control-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.875rem;
  line-height: 1.6;
}

.tool-textarea {
  width: 100%;
  border: 1px solid var(--tool-border);
  border-radius: var(--tool-radius-sm);
  background: var(--tool-surface-soft);
  color: var(--tool-text);
  padding: 1rem;
  resize: vertical;
  box-shadow: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.875rem;
  line-height: 1.6;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.tool-textarea::placeholder {
  color: #94a3b8;
}

.tool-textarea:focus {
  border-color: var(--tool-accent);
  box-shadow: var(--tool-ring);
  background: var(--tool-surface);
}

.dark .tool-textarea {
  border-color: var(--tool-border);
  background: var(--tool-surface-soft);
  color: var(--tool-text);
  box-shadow: none;
}

.dark .tool-textarea::placeholder {
  color: #64748b;
}

.dark .tool-textarea:focus {
  border-color: var(--tool-accent);
  box-shadow: var(--tool-ring);
  background: var(--tool-surface);
}

.tool-output-display {
  width: 100%;
  resize: none;
  border: 0;
  background: transparent !important;
  color: var(--tool-text) !important;
  padding: 0;
  outline: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 1.125rem;
  line-height: 1.7;
  letter-spacing: 0;
  -webkit-text-fill-color: currentColor;
  opacity: 1;
}

.dark .tool-output-display {
  color: var(--tool-text) !important;
}

.tool-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: var(--tool-accent-soft);
  padding: 0.2rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--tool-accent-strong);
}

.dark .tool-badge {
  background: var(--tool-accent-soft);
  color: var(--tool-accent-strong);
}

.tool-color-input {
  height: 2.75rem;
  width: 2.75rem;
  min-width: 2.75rem;
  cursor: pointer;
  border-radius: var(--tool-radius-sm);
  border: 1px solid var(--tool-border);
  background: var(--tool-surface);
  padding: 0.2rem;
}

.dark .tool-color-input {
  border-color: var(--tool-border);
  background: var(--tool-surface);
}

.tool-color-input-lg {
  height: 6rem;
  width: 6rem;
  min-width: 6rem;
}

.tool-color-field {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.tool-color-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--tool-text-muted);
}

.tool-preview-glyph {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  height: 6rem;
  width: 6rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--tool-radius);
  border: 1px solid var(--tool-border-soft);
  background: var(--tool-surface);
  font-size: 2.25rem;
  box-shadow: none;
}

.dark .tool-preview-glyph {
  border-color: var(--tool-border-soft);
  background: var(--tool-surface);
}

.tool-display-board {
  border-radius: var(--tool-radius);
  border: 1px solid var(--tool-border-soft);
  background: var(--tool-surface-soft);
  padding: 1.5rem;
  text-align: center;
  color: var(--tool-text);
  box-shadow: none;
}

.dark .tool-display-board {
  border-color: var(--tool-border-soft);
  background: var(--tool-surface-soft);
  color: var(--tool-text);
  box-shadow: none;
}

.tool-keypad-button {
  border: 1px solid var(--tool-border);
  border-radius: var(--tool-radius-sm);
  background: var(--tool-surface-soft);
  color: var(--tool-text);
  padding: 0.625rem;
  min-height: 2.55rem;
  font-size: 0.875rem;
  font-weight: 700;
  box-shadow: inset 0 -1px 0 rgba(20, 29, 45, 0.06);
  transition: transform 0.16s ease, background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.tool-keypad-button:hover {
  transform: translateY(-1px);
  border-color: var(--tool-accent);
  background: var(--tool-surface-muted);
  box-shadow: 0 2px 4px rgba(20, 29, 45, 0.08);
}

.dark .tool-keypad-button {
  border-color: var(--tool-border);
  background: var(--tool-surface-soft);
  color: var(--tool-text);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.28);
}

.dark .tool-keypad-button:hover {
  border-color: var(--tool-accent);
  background: var(--tool-surface-muted);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.32);
}

.calculator-programmer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.calculator-programmer-cell {
  min-width: 0;
  border: 1px solid var(--tool-border-soft);
  border-radius: var(--tool-radius-sm);
  background: var(--tool-surface);
  padding: 0.8rem;
}

.calculator-programmer-label {
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--tool-text-subtle);
}

.calculator-programmer-value,
.calculator-programmer-value-static {
  display: block;
  width: 100%;
  min-height: 2.35rem;
  margin-top: 0.5rem;
  border: 0;
  border-radius: calc(var(--tool-radius-sm) - 2px);
  background: var(--tool-surface-soft);
  padding: 0.55rem 0.65rem;
  overflow-wrap: anywhere;
  text-align: left;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1.35;
  color: var(--tool-text);
}

.calculator-programmer-value {
  cursor: pointer;
}

.calculator-programmer-value:hover,
.calculator-programmer-value:focus-visible {
  outline: 2px solid transparent;
  background: var(--tool-surface);
  box-shadow: inset 0 0 0 1px var(--tool-border-strong);
}

.dark .calculator-programmer-cell {
  border-color: var(--tool-border-soft);
  background: var(--tool-surface);
}

.dark .calculator-programmer-value,
.dark .calculator-programmer-value-static {
  background: var(--tool-surface-soft);
  color: var(--tool-text);
}

@media (max-width: 1023px) {
  .calculator-programmer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .calculator-programmer-cell-wide {
    grid-column: span 2;
  }
}

@media (max-width: 520px) {
  .calculator-programmer-grid {
    grid-template-columns: 1fr;
  }

  .calculator-programmer-cell-wide {
    grid-column: auto;
  }
}

.tool-file-input-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.tool-file-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.tool-file-picker-name {
  display: inline-flex;
  min-height: 2rem;
  min-width: 0;
  align-items: center;
  border-radius: 999px;
  background: var(--tool-surface-soft);
  padding: 0.28rem 0.65rem;
  font-size: 0.875rem;
  color: var(--tool-text-muted);
  word-break: break-word;
}

.dark .tool-file-picker-name {
  color: var(--tool-text-muted);
}

.tool-upload-dropzone {
  display: block;
  cursor: pointer;
  border: 1px dashed var(--tool-border);
  border-radius: var(--tool-radius-sm);
  background: var(--tool-surface-soft);
  padding: 1.25rem;
  text-align: center;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.tool-upload-dropzone:hover {
  border-color: var(--tool-accent);
  background: var(--tool-surface);
}

.dark .tool-upload-dropzone {
  border-color: var(--tool-border);
  background: var(--tool-surface-soft);
}

.dark .tool-upload-dropzone:hover {
  border-color: var(--tool-accent);
  background: var(--tool-surface);
}

.tool-status-text {
  font-size: 0.875rem;
  color: var(--tool-text-muted);
}

.dark .tool-status-text {
  color: var(--tool-text-muted);
}

.tool-inline-status {
  border-radius: var(--tool-radius-sm);
  border: 1px solid var(--tool-border);
  background: var(--tool-surface-soft);
  padding: 0.85rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--tool-text);
}

.tool-inline-status-idle {
  border-color: var(--tool-border);
  background: var(--tool-surface-soft);
  color: var(--tool-text-muted);
}

.tool-inline-status-pending {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
}

.tool-inline-status-success {
  border-color: #a7f3d0;
  background: #ecfdf5;
  color: #047857;
}

.tool-inline-status-error {
  border-color: #fecaca;
  background: #fef2f2;
  color: #b91c1c;
}

.dark .tool-inline-status {
  border-color: var(--tool-border);
  background: var(--tool-surface-soft);
  color: var(--tool-text);
}

.dark .tool-inline-status-idle {
  border-color: var(--tool-border);
  background: var(--tool-surface-soft);
  color: var(--tool-text-muted);
}

.dark .tool-inline-status-pending {
  border-color: rgba(56, 189, 248, 0.35);
  background: rgba(8, 47, 73, 0.62);
  color: #bae6fd;
}

.dark .tool-inline-status-success {
  border-color: rgba(52, 211, 153, 0.35);
  background: rgba(6, 78, 59, 0.62);
  color: #a7f3d0;
}

.dark .tool-inline-status-error {
  border-color: rgba(248, 113, 113, 0.35);
  background: rgba(127, 29, 29, 0.62);
  color: #fecaca;
}

.tool-copy-list {
  margin-top: 1rem;
  color: var(--tool-text-muted);
  font-size: 0.875rem;
  line-height: 1.6;
}

.dark .tool-copy-list {
  color: var(--tool-text-muted);
}

.tool-status-pill {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  white-space: nowrap;
  border-radius: 999px;
  background: var(--tool-surface-soft);
  padding: 0.2rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--tool-text-muted);
}

.dark .tool-status-pill {
  background: var(--tool-surface-soft);
  color: var(--tool-text-muted);
}

.tool-stat-card {
  border-radius: var(--tool-radius-sm);
  border: 1px solid var(--tool-border-soft);
  background: var(--tool-surface-soft);
  padding: 0.85rem;
  text-align: left;
}

.tool-stat-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  min-width: min(100%, 28rem);
}

@media (max-width: 639px) {
  .tool-stat-strip {
    grid-template-columns: 1fr;
  }
}

.dark .tool-stat-card {
  border-color: var(--tool-border-soft);
  background: var(--tool-surface-soft);
}

.tool-meta-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
  min-width: min(100%, 32rem);
  overflow: hidden;
  border: 1px solid var(--tool-border-soft);
  border-radius: var(--tool-radius-sm);
  background: var(--tool-surface);
}

.tool-meta-item {
  min-width: 8rem;
  flex: 1 1 0;
  border-right: 1px solid var(--tool-border-soft);
  padding: 0.72rem 0.85rem;
}

.tool-meta-item:last-child {
  border-right: 0;
}

.tool-meta-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--tool-text-subtle);
}

.tool-meta-value {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.875rem;
  font-weight: 650;
  line-height: 1.35;
  color: var(--tool-text);
}

.tool-meta-value-lg {
  display: block;
  margin-top: 0.25rem;
  font-size: 1.375rem;
  font-weight: 750;
  line-height: 1.1;
  color: var(--tool-text);
}

@media (max-width: 639px) {
  .tool-meta-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .tool-meta-item {
    min-width: 0;
    border-right: 1px solid var(--tool-border-soft);
    border-bottom: 1px solid var(--tool-border-soft);
  }

  .tool-meta-item:nth-child(2n) {
    border-right: 0;
  }

  .tool-meta-item:last-child {
    border-bottom: 0;
  }
}

.dark .tool-meta-strip {
  border-color: var(--tool-border-soft);
  background: var(--tool-surface);
}

.dark .tool-meta-item {
  border-color: var(--tool-border-soft);
}

.dark .tool-meta-value,
.dark .tool-meta-value-lg {
  color: var(--tool-text);
}

.tool-stat-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--tool-text-subtle);
}

.dark .tool-stat-label {
  color: var(--tool-text-subtle);
}

.tool-stat-value {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--tool-text);
}

.tool-stat-value-lg {
  margin-top: 0.25rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--tool-text);
}

.dark .tool-stat-value,
.dark .tool-stat-value-lg {
  color: var(--tool-text);
}

.tool-kpi-card {
  border: 1px solid var(--tool-border-soft);
  border-radius: var(--tool-radius-sm);
  background: var(--tool-surface);
  padding: 1rem;
  box-shadow: none;
}

.dark .tool-kpi-card {
  border-color: var(--tool-border-soft);
  background: var(--tool-surface);
}

.tool-kpi-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--tool-text-subtle);
}

.tool-kpi-number {
  margin-top: 0.5rem;
  font-size: 1.875rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--tool-text);
}

.dark .tool-kpi-label {
  color: var(--tool-text-subtle);
}

.dark .tool-kpi-number {
  color: var(--tool-text);
}

.tool-inset-panel {
  border: 1px solid var(--tool-border-soft);
  border-radius: var(--tool-radius-sm);
  background: var(--tool-surface-soft);
  padding: 1rem;
}

.dark .tool-inset-panel {
  border-color: var(--tool-border-soft);
  background: var(--tool-surface-soft);
}

.tool-result-list {
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--tool-border-soft);
  border-radius: var(--tool-radius-sm);
  background: var(--tool-surface);
}

.tool-result-list:empty {
  display: none;
}

.tool-result-item {
  padding: 0.85rem 0.9rem;
  border-bottom: 1px solid var(--tool-border-soft);
}

.tool-result-item:last-child {
  border-bottom: 0;
}

.tool-result-item-value {
  margin-top: 0.5rem;
  border-radius: calc(var(--tool-radius-sm) - 2px);
  background: var(--tool-surface-soft);
  padding: 0.75rem;
  color: var(--tool-text);
}

.dark .tool-result-list {
  border-color: var(--tool-border-soft);
  background: var(--tool-surface);
}

.dark .tool-result-item {
  border-color: var(--tool-border-soft);
}

.dark .tool-result-item-value {
  background: var(--tool-surface-soft);
  color: var(--tool-text);
}

.tool-help-panel {
  border-radius: var(--tool-radius-sm);
  padding: 1rem;
  font-size: 0.875rem;
}

.tool-note-title {
  font-weight: 600;
  color: var(--tool-text);
}

.dark .tool-note-title {
  color: var(--tool-text);
}

.tool-alert-warning {
  border: 1px solid #fde68a;
  border-radius: var(--tool-radius-sm);
  background: #fffbeb;
  padding: 1rem;
  font-size: 0.875rem;
  color: #92400e;
}

.dark .tool-alert-warning {
  border-color: rgba(180, 83, 9, 0.7);
  background: rgba(69, 26, 3, 0.4);
  color: #fef3c7;
}

.tool-alert-success {
  border: 1px solid #a7f3d0;
  border-radius: var(--tool-radius-sm);
  background: #ecfdf5;
  padding: 1.25rem;
}

.dark .tool-alert-success {
  border-color: rgba(4, 120, 87, 0.7);
  background: rgba(2, 44, 34, 0.3);
}

.tool-alert-error {
  border-radius: var(--tool-radius-sm);
  background: #fff1f2;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: #be123c;
}

.dark .tool-alert-error {
  background: rgba(76, 5, 25, 0.4);
  color: #fecdd3;
}

.tool-toast {
  position: fixed;
  right: 1rem;
  top: 1rem;
  z-index: 60;
  display: grid;
  gap: 0.35rem;
  max-width: min(26rem, calc(100vw - 2rem));
  border-radius: var(--tool-radius);
  border: 1px solid #cbd5e1;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.18);
  padding: 0.9rem 1rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.tool-toast strong {
  font-size: 0.9rem;
  font-weight: 700;
}

.tool-toast span {
  font-size: 0.84rem;
  line-height: 1.5;
}

.tool-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.tool-toast-success {
  border-color: #a7f3d0;
  background: rgba(236, 253, 245, 0.98);
  color: #065f46;
}

.tool-toast-error {
  border-color: #fecaca;
  background: rgba(254, 242, 242, 0.98);
  color: #991b1b;
}

.dark .tool-toast {
  border-color: #334155;
  background: rgba(15, 23, 42, 0.96);
  color: #e2e8f0;
  box-shadow: 0 16px 36px rgba(2, 6, 23, 0.5);
}

.dark .tool-toast-success {
  border-color: rgba(52, 211, 153, 0.35);
  background: rgba(6, 78, 59, 0.92);
  color: #d1fae5;
}

.dark .tool-toast-error {
  border-color: rgba(248, 113, 113, 0.35);
  background: rgba(127, 29, 29, 0.92);
  color: #fee2e2;
}

.tool-toggle-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid transparent;
  border-radius: var(--tool-radius-sm);
  background: var(--tool-surface-soft);
  padding: 0.62rem 0.72rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--tool-text);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.tool-toggle-row:hover {
  border-color: var(--tool-border);
  background: var(--tool-surface);
}

.dark .tool-toggle-row {
  background: var(--tool-surface-soft);
  color: var(--tool-text);
}

.dark .tool-toggle-row:hover {
  border-color: var(--tool-border);
  background: var(--tool-surface);
}

.tool-checkbox {
  height: 1rem;
  width: 1rem;
  border-radius: 0.25rem;
  border-color: #cbd5e1;
  color: #0284c7;
}

.tool-checkbox:focus {
  --tw-ring-color: #0ea5e9;
}

.tool-range {
  width: 100%;
  accent-color: var(--tool-accent);
  cursor: pointer;
}

.tool-range:focus-visible {
  outline: none;
  filter: drop-shadow(0 0 0.45rem rgba(14, 165, 233, 0.22));
}

.tool-muted-panel {
  border: 1px dashed var(--tool-border);
  border-radius: var(--tool-radius-sm);
  background: var(--tool-surface-soft);
  color: var(--tool-text-muted);
  box-shadow: none;
}

.dark .tool-muted-panel {
  border-color: var(--tool-border);
  background: var(--tool-surface-soft);
  color: var(--tool-text-muted);
  box-shadow: none;
}

.tool-preview-panel {
  border: 1px dashed var(--tool-border);
  border-radius: var(--tool-radius-sm);
  background: var(--tool-surface-soft);
}

.dark .tool-preview-panel {
  border-color: var(--tool-border);
  background: var(--tool-surface-soft);
}

.tool-soft-panel {
  border-radius: var(--tool-radius-sm);
  background: var(--tool-surface-soft);
  color: var(--tool-text-muted);
  border: 1px solid var(--tool-border-soft);
}

.dark .tool-soft-panel {
  background: var(--tool-surface-soft);
  color: var(--tool-text-muted);
  border-color: var(--tool-border-soft);
}

.tool-inline-message {
  border-left: 2px solid var(--tool-border);
  padding: 0.15rem 0 0.15rem 0.7rem;
  font-size: 0.875rem;
  line-height: 1.6;
}

.tool-inline-message-neutral {
  border-color: var(--tool-border);
  color: var(--tool-text-muted);
}

.tool-inline-message-success {
  border-color: var(--tool-accent);
  color: var(--tool-accent-strong);
}

.tool-inline-message-error {
  border-color: #f43f5e;
  color: #be123c;
}

.dark .tool-inline-message-neutral {
  border-color: var(--tool-border);
  color: var(--tool-text-muted);
}

.dark .tool-inline-message-success {
  border-color: var(--tool-accent);
  color: var(--tool-accent);
}

.dark .tool-inline-message-error {
  border-color: #fb7185;
  color: #fda4af;
}

.tool-ai-assist {
  max-width: 72rem;
  margin: 0 auto 1.5rem;
  border: 1px solid var(--tool-border-soft);
  border-radius: var(--tool-radius);
  background: var(--tool-surface);
  padding: 1rem;
}

.tool-ai-assist-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.tool-ai-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.85rem;
}

.tool-ai-action-chip {
  border: 1px solid var(--tool-border);
  border-radius: 999px;
  background: var(--tool-surface-soft);
  padding: 0.35rem 0.65rem;
  color: var(--tool-text-muted);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.2;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.tool-ai-action-chip:hover,
.tool-ai-action-chip:focus-visible,
.tool-ai-action-chip.is-active {
  border-color: var(--tool-accent);
  background: var(--tool-accent-soft);
  color: var(--tool-accent-strong);
  outline: none;
}

.tool-ai-compose {
  margin-top: 0.9rem;
}

.tool-ai-notice {
  margin-top: 0.55rem;
  border-left: 2px solid var(--tool-border);
  padding-left: 0.7rem;
  color: var(--tool-text-muted);
  font-size: 0.82rem;
  line-height: 1.6;
}

.tool-ai-notice.is-sensitive {
  border-color: #f59e0b;
  color: var(--tool-warning);
}

.tool-ai-output {
  margin-top: 0.9rem;
}

.tool-ai-output-card {
  border: 1px solid var(--tool-border-soft);
  border-radius: var(--tool-radius-sm);
  background: var(--tool-surface-soft);
  padding: 0.85rem;
}

.tool-ai-output-title {
  color: var(--tool-text);
  font-size: 0.95rem;
  font-weight: 750;
  line-height: 1.65;
}

.tool-feedback-panel {
  max-width: 72rem;
  margin: 1.5rem auto 0;
  border: 1px solid var(--tool-border-soft);
  border-radius: var(--tool-radius-sm);
  background: var(--tool-surface);
  padding: 1rem;
}

.tool-feedback-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.tool-feedback-form {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}

.tool-feedback-form[hidden] {
  display: none;
}

.dark .tool-feedback-panel {
  border-color: var(--tool-border-soft);
  background: var(--tool-surface);
}

@media (max-width: 640px) {
  .tool-feedback-header {
    flex-direction: column;
  }
}

.tool-ai-code-block {
  margin-top: 0.75rem;
  max-height: 18rem;
  overflow: auto;
  border: 1px solid var(--tool-border-soft);
  border-radius: var(--tool-radius-sm);
  background: var(--tool-surface);
  padding: 0.75rem;
  color: var(--tool-text);
  font-size: 0.82rem;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.ai-content-workbench {
  display: grid;
  gap: 1rem;
}

.ai-content-result {
  border: 1px solid var(--tool-border-soft);
  border-radius: var(--tool-radius);
  background: var(--tool-surface);
  padding: 1rem;
}

.ai-content-result-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.ai-content-output {
  margin-top: 1rem;
  max-height: 32rem;
  overflow: auto;
  border: 1px solid var(--tool-border-soft);
  border-radius: var(--tool-radius-sm);
  background: var(--tool-surface-soft);
  padding: 1rem;
  color: var(--tool-text);
  font-size: 0.92rem;
  line-height: 1.75;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.ai-content-list {
  margin-top: 1rem;
}

.ai-content-list h3 {
  color: var(--tool-text);
  font-size: 0.88rem;
  font-weight: 800;
}

.ai-content-list ul {
  margin-top: 0.5rem;
  display: grid;
  gap: 0.45rem;
  color: var(--tool-text-muted);
  font-size: 0.9rem;
  line-height: 1.65;
}

.ai-content-list li {
  border-left: 2px solid var(--tool-border);
  padding-left: 0.65rem;
}

.tool-color-swatch {
  min-height: 2.6rem;
  border: 1px solid var(--tool-border);
  border-radius: var(--tool-radius-sm);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
}

.tool-color-swatch:focus-visible {
  outline: none;
  box-shadow: var(--tool-ring);
}

@media (max-width: 640px) {
  .tool-ai-assist-header {
    flex-direction: column;
  }

  .tool-ai-action-chip {
    flex: 1 1 auto;
  }
}