body[data-theme="jpg-to-pdf"], body[data-theme="pdf-to-jpg"], body[data-theme="pdf-merge"], body[data-theme="pdf-split"],
.tool-group[aria-labelledby="group-pdf"] { --hue: 350; } /* PDF · rose */
/* One shared accent per category, on both navigation cards and tool pages. */
body[data-theme="cron"], body[data-theme="msg-viewer"], body[data-theme="qr-code"], body[data-theme="beautifier"], body[data-theme="text-statistics"],
.tool-group[aria-labelledby="group-code-text"] { --hue: 145; } /* Code & Text · green */
body[data-theme="color-analysis"], body[data-theme="color-palette"], body[data-theme="contrast-optimizer"], body[data-theme="contrast-matrix"],
.tool-group[aria-labelledby="group-colors"] { --hue: 187; } /* Colors & Contrast · teal */
body[data-theme="htpasswd"], body[data-theme="aes"],
.tool-group[aria-labelledby="group-security"] { --hue: 268; } /* Security · violet */
body[data-theme="exif-copy"], body[data-theme="exif-edit"], body[data-theme="exif-batch"],
.tool-group[aria-labelledby="group-photos"] { --hue: 24; } /* Photos & Metadata · terracotta */
body[data-theme="dreisatz"], body[data-theme="dreieck"], body[data-theme="dice"],
.tool-group[aria-labelledby="group-math"] { --hue: 213; } /* Mathematics · blue */

body, .tool-menu-item {
  --deep: hsl(var(--hue, 145), 32%, 24%);
  --green: hsl(var(--hue, 145), 34%, 31%);
  --mint: hsl(var(--hue, 145), 32%, 90%);
  --soft: hsl(var(--hue, 145), 24%, 95%);
  --paper: hsl(var(--hue, 145), 18%, 97%);
  --line: hsl(var(--hue, 145), 16%, 78%);
  --muted: hsl(var(--hue, 145), 10%, 34%);
  --ink: hsl(var(--hue, 145), 18%, 15%);
  --control-line: hsl(var(--hue, 145), 12%, 48%);
  --danger: #9d4039;
  --shadow: 0 14px 45px hsl(var(--hue, 145), 40%, 25%, .09);
}
body { background: var(--paper); }
body::before { background-image: radial-gradient(var(--line) .7px, transparent .7px); }
.tool-discovery { background: linear-gradient(120deg, var(--mint), var(--soft)); border-color: var(--line); }
.tool-count, .tool-menu-item small { color: var(--muted); }
.tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tool-menu-item { background: var(--soft); border-color: var(--line); border-top: 4px solid var(--green); color: var(--ink); }
.tool-menu-item:hover { background: var(--mint); border-color: var(--green); }
.tool-menu-item .menu-icon { background: var(--mint); color: var(--deep); }
.tool-menu-item .menu-arrow { color: var(--green); }
.tool-menu-item.active { background: var(--deep); border-color: var(--deep); color: #fff; }
.tool-menu-item.active small, .tool-menu-item.active .menu-arrow { color: var(--mint); }
.dot, .clear.accent, .copy { color: var(--green); }
.primary, .tab.active { background: var(--deep); color: #fff; }
.primary:hover { background: var(--green); }
.secondary, .tabs, .result-wrap, .security-note, .generator-result { background: var(--soft); }
.secondary:hover { background: var(--mint); color: var(--deep); }
.local-dot { background: var(--green); box-shadow: 0 0 0 4px var(--mint); }
:where(button, a, input, select, textarea):focus-visible { outline-color: var(--green); }
.exif-tool button, .exif-tool .download { background: var(--deep); color: #fff; }
.exif-tool button:hover:enabled, .exif-tool .download:hover { background: var(--green); }
.exif-tool .secondary { background: var(--soft); color: var(--deep); border-color: var(--line); }
.exif-tool .secondary:hover:enabled { background: var(--mint); color: var(--deep); }
.exif-tool .file-card { border-color: var(--line); }
.exif-tool .dropzone, .exif-tool .step, .exif-tool aside, .exif-tool .upload-icon { background: var(--soft); border-color: var(--line); color: var(--deep); }
.exif-tool .dropzone:hover, .exif-tool .dropzone.dragover { background: var(--mint); border-color: var(--green); }
.exif-tool .help, .exif-tool .action-area p, .exif-tool .status, .exif-tool #exif-copy-status, .exif-tool .card-heading p { color: var(--muted); }
.exif-tool .status.error, .exif-tool #exif-copy-status.error { color: #a24432; }
.exif-tool button:disabled { background: var(--line); color: var(--muted); }
.exif-tool :where(input, select, textarea) { accent-color: var(--deep); }
.exif-tool :focus-visible { outline-color: var(--green); }
@media (max-width: 900px) { .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .tool-grid { grid-template-columns: 1fr; } }

/* Quiet surfaces, readable supporting text and distinct control boundaries. */
.tool-discovery { background: linear-gradient(120deg, var(--mint), var(--paper)); }
.clear, .placeholder, .tok-comment, footer,
.field > small, .strength-row small, .algorithm-note, .cost-setting small,
.result-section-head > span, .variant-copy small, .matrix-axis,
.exif-tool .tag, .exif-tool .empty > span:last-child,
.exif-tool .file-info > span, .exif-tool .tag-row small {
  color: var(--muted);
}
textarea::placeholder, input::placeholder, .field input::placeholder {
  color: var(--muted);
  opacity: 1;
}
.local-badge, .password-field button { background: var(--soft); color: var(--deep); }
.select-wrap::after { color: var(--muted); }
.tok-number { color: #735080; }
.tok-string { color: #326748; }
.tok-bool { color: #326389; }
.tok-prop { color: #425f88; }
.tool-page .field > input { border: 1px solid var(--control-line); }
.password-field, .select-wrap,
.color-input-row input[type="text"], .color-input-row input[type="color"],
.matrix-colors-field textarea,
.exif-tool select, .exif-tool input[type="text"], .exif-tool input[type="number"],
.exif-tool textarea, .exif-tool .dropzone {
  border-color: var(--control-line);
}
.tool-page .secondary { border: 1px solid var(--control-line); color: var(--deep); }
.field > input:focus, .password-field:focus-within, .select-wrap:focus-within,
.color-input-row input[type="text"]:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--mint);
}
.tool-page :is(button, a, input, select, textarea):focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}
.tool-menu-item:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.exif-tool .transfer { background: var(--paper); color: var(--deep); border-color: var(--line); }
.exif-tool aside strong { color: var(--deep); }
.exif-tool textarea:disabled { background: var(--soft); color: var(--muted); }
.note-icon { background: var(--mint); color: var(--deep); }
.color-hero-swatch span, .color-swatch-button span { background: #fff; color: #24342b; }


.tool-groups { display: grid; gap: 22px; }
.tool-group { min-width: 0; }
.tool-group h3 { margin: 0 0 10px; color: hsl(var(--hue), 32%, 24%); font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.tool-group + .tool-group { border-top: 1px solid var(--line); padding-top: 18px; }

/* The same navigation lives on the homepage or inside the tool dialog. */
#openTools[hidden] { display: none; }
#toolsDialog { width: min(1000px, calc(100% - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 1px solid var(--line); border-radius: 20px; background: var(--paper); color: var(--ink); box-shadow: var(--shadow); overscroll-behavior: contain; }
#toolsDialog::backdrop { background: rgb(15 25 20 / .5); backdrop-filter: blur(4px); }
body:has(#toolsDialog[open]) { overflow: hidden; }
.tools-dialog-bar { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 24px; background: var(--paper); border-bottom: 1px solid var(--line); }
.tools-dialog-bar a { text-decoration: none; }
#toolsDialog .tool-discovery { margin: 0; border: 0; border-radius: 0; background: var(--paper); }
#toolsDialog .tool-menu-item { min-height: 104px; }
#toolsDialog .tool-groups { gap: 16px; }
#toolsDialog .tool-group + .tool-group { padding-top: 14px; }
@media (max-width: 650px) {
  .header-actions { gap: 10px; }
  .header-actions:has(#openTools:not([hidden])) .privacy { display: none; }
  .tools-dialog-bar { padding: 12px 16px; }
  #toolsDialog .tool-menu-item { min-height: 90px; }
}

.tool-symbol { display: block; flex-shrink: 0; }
.menu-icon .tool-symbol { width: 24px; height: 24px; }
#openTools { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex-shrink: 0; white-space: nowrap; }
#openTools .tool-symbol { width: 18px; height: 18px; }

.related-tools { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); }
.related-tools .eyebrow { margin-bottom: 8px; }
.related-tools h2 { margin: 0 0 18px; font: 600 24px/1.3 var(--display); color: var(--deep); }
.related-tools .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.related-tools .tool-menu-item { min-height: 120px; }
@media (max-width: 600px) { .related-tools .tool-grid { grid-template-columns: 1fr; } }