:root {
  --bg-page: #0F1419;
  --bg-section: #111827;
  --bg-card: #161B22;
  --bg-elevated: #1F2937;
  --border: #2A2F36;
  --text-primary: #E6EDF3;
  --text-muted: #9AA4AE;
  --heading: #F8FAFC;
  --accent: #D32F2F;
  --accent-hover: #B71C1C;
  --success: #2E7D32;
  --warning: #F9A825;
}

/* Apply only to tool pages */
body[data-tool-page="true"] {
  background:
    radial-gradient(circle at 20% 20%, rgba(211, 47, 47, 0.08), transparent 40%),
    linear-gradient(135deg, #111827 0%, #0F1419 55%, #0F1419 100%);
}

body[data-tool-page="true"] .hero,
body[data-tool-page="true"] .upload-section,
body[data-tool-page="true"] .output-box,
body[data-tool-page="true"] .result-box,
body[data-tool-page="true"] .section-card,
body[data-tool-page="true"] .feature-card,
body[data-tool-page="true"] .tip-box,
body[data-tool-page="true"] .faq-item,
body[data-tool-page="true"] .card,
body[data-tool-page="true"] .panel,
body[data-tool-page="true"] .tools-grid .tool-card,
body[data-tool-page="true"] .thumbnail-grid .thumb-card,
body[data-tool-page="true"] .content-section {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,0.4);
}

body[data-tool-page="true"] .hero h1,
body[data-tool-page="true"] .upload-section h2,
body[data-tool-page="true"] h2,
body[data-tool-page="true"] h3,
body[data-tool-page="true"] h4 {
  color: var(--heading) !important;
}

body[data-tool-page="true"] p,
body[data-tool-page="true"] li,
body[data-tool-page="true"] label,
body[data-tool-page="true"] span {
  color: var(--text-primary) !important;
}

body[data-tool-page="true"] .btn,
body[data-tool-page="true"] button {
  background: var(--accent) !important;
  color: #fff !important;
  border-radius: 10px;
  border: 1px solid transparent;
  box-shadow: 0 12px 26px rgba(211,47,47,0.3);
}

body[data-tool-page="true"] .btn:hover,
body[data-tool-page="true"] button:hover {
  background: var(--accent-hover) !important;
}

body[data-tool-page="true"] .btn-secondary,
body[data-tool-page="true"] .secondary,
body[data-tool-page="true"] .btn-outline {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
}

body[data-tool-page="true"] input,
body[data-tool-page="true"] textarea,
body[data-tool-page="true"] select {
  background: var(--bg-elevated) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px;
}

body[data-tool-page="true"] .progress,
body[data-tool-page="true"] .progress-bar,
body[data-tool-page="true"] .progress-indeterminate {
  background: var(--bg-elevated) !important;
  border-radius: 10px;
  border: 1px solid var(--border);
}

body[data-tool-page="true"] .progress-fill {
  background: linear-gradient(90deg, var(--accent) 0%, #f56969 100%) !important;
}

body[data-tool-page="true"] .alert-success,
body[data-tool-page="true"] .success {
  background: rgba(46,125,50,0.15) !important;
  border: 1px solid rgba(46,125,50,0.5) !important;
  color: #CDE9D1 !important;
}

body[data-tool-page="true"] .alert-warning,
body[data-tool-page="true"] .warning {
  background: rgba(249,168,37,0.12) !important;
  border: 1px solid rgba(249,168,37,0.5) !important;
  color: #F9E2A0 !important;
}

body[data-tool-page="true"] .alert-error,
body[data-tool-page="true"] .error {
  background: rgba(198,40,40,0.14) !important;
  border: 1px solid rgba(198,40,40,0.5) !important;
  color: #F8D7DA !important;
}

/* Upload dropzone */
body[data-tool-page="true"] #uploadBox,
body[data-tool-page="true"] .dropzone {
  background: var(--bg-card) !important;
  border: 1px dashed var(--border) !important;
  color: var(--text-muted) !important;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}

body[data-tool-page="true"] a { color: var(--accent); }
body[data-tool-page="true"] a:hover { color: var(--accent-hover); }