/* System-theme layer for the browser-tool pages. */
html { color-scheme: light dark; }
.brand-mark { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 10px; object-fit: contain; }

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f4f7ff;
    --blue: #5b86ff;
    --cyan: #35e0ea;
    --lime: #ddfb72;
    --paper: #071226;
    --white: #0e1d37;
    --muted: #aebbd0;
    --line: #253957;
    --shadow: 0 18px 42px rgba(0, 0, 0, .25);
  }

  body { background: var(--paper); color: var(--ink); }
  .topbar { background: rgba(14, 29, 55, .94); border-bottom: 1px solid var(--line); box-shadow: 0 8px 30px rgba(0, 0, 0, .18); }
  .topbar nav a, .topbar .wordmark, .hero h1, h1, h2, h3, strong { color: var(--ink); }
  .topbar nav a:hover, .topbar nav a:focus-visible { color: var(--cyan); }
  .hero-copy > p, .lede, .tool-intro > p, .tool-meta, .hint, .field-help, .page-intro p { color: var(--muted); }

  .ghost, .button-secondary, button.secondary, .back-link, .tag, .chip {
    color: var(--ink); background: #142746; border-color: var(--line);
  }
  .ghost:hover, .button-secondary:hover, button.secondary:hover, .back-link:hover { background: #1a3156; border-color: var(--blue); }
  .button-primary, button.primary, .cta, .download-button, .copy-button { color: #fff; background: var(--blue); border-color: var(--blue); }
  .button-primary:hover, button.primary:hover, .cta:hover, .download-button:hover, .copy-button:hover { background: #7398ff; border-color: #7398ff; }
  button, .button, .cta, input, select, textarea { font-family: inherit; }
  .launch-tool { color: #fff; background: var(--blue); }
  .launch-tool:hover { color: #fff; background: #7398ff; }

  .tool-card, .category-card, .feature-card, .tool-panel, .tool-workspace, .tool-intro,
  .upload-card, .settings-card, .result-card, .status-card, .notice, .info-card,
  .page-card, .faq-card, .related-card, .empty-state, .modal-content, dialog {
    background: var(--white); color: var(--ink); border-color: var(--line); box-shadow: var(--shadow);
  }
  .tool-card p, .category-card p, .feature-card p, .result-card p, .notice p,
  .info-card p, .page-card p, .faq-card p, .related-card p { color: var(--muted); }
  .tool-card:hover, .category-card:hover { border-color: var(--blue); box-shadow: 0 18px 42px rgba(0, 0, 0, .3); }

  .tool-sidebar, .step-sidebar, .dark-panel, .hero-visual, .conversion-panel {
    background: #142746; color: var(--ink); border-color: var(--line);
  }
  .tool-sidebar a, .step-sidebar a { color: var(--muted); }
  .tool-sidebar a:hover, .tool-sidebar a.active, .step-sidebar a:hover, .step-sidebar a.active { color: var(--ink); background: #1d3761; }

  .upload-zone, .drop-zone, .preview-area, .result-area, .file-list, .output,
  .code-output, .number-output, .signature-pad, .canvas-wrap {
    background: #071226; color: var(--ink); border-color: var(--line);
  }
  .upload-zone:hover, .drop-zone:hover, .upload-zone.dragover, .drop-zone.dragover { border-color: var(--cyan); background: #0d2342; }
  input, select, textarea, .field input, .field select, .field textarea {
    color: var(--ink); background: #071226; border-color: var(--line);
  }
  input::placeholder, textarea::placeholder { color: #8391a8; }
  input:focus, select:focus, textarea:focus { outline-color: var(--blue); border-color: var(--blue); }

  table, th, td { border-color: var(--line); }
  th { background: #142746; color: var(--ink); }
  td { color: var(--muted); }
  .toast, .modal, .dialog, .popover { color: var(--ink); }
  .modal-backdrop, dialog::backdrop { background: rgba(0, 0, 0, .62); }
  footer, .site-footer { color: var(--muted); border-color: var(--line); }
  footer a, .site-footer a { color: var(--ink); }
  footer a:hover, .site-footer a:hover { color: var(--cyan); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}