:root[data-theme="light"] {
  color-scheme: light;
  --page: #f4f4eb;
  --surface: #ffffff;
  --surface-alt: #eff6e0;
  --ink: #01161e;
  --muted: #47636b;
  --soft: #607982;
  --edge: #c5d2c5;
  --accent: #124559;
  --accent-ink: #eff6e0;
  --warm: #b27342;
  --shadow: 0 14px 34px rgba(1,22,30,.06);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #01161e;
  --surface: #142d37;
  --surface-alt: #1b3944;
  --ink: #eff6e0;
  --muted: #c5d5d1;
  --soft: #a8c0c0;
  --edge: #3e5b64;
  --accent: #aec3b0;
  --accent-ink: #01161e;
  --warm: #e7a46a;
  --shadow: 0 16px 34px rgba(0,0,0,.14);
}

:root {
  --bg-primary: var(--page);
  --bg-secondary: var(--surface);
  --bg-tertiary: var(--surface-alt);
  --text-primary: var(--ink);
  --text-secondary: var(--muted);
  --text-muted: var(--soft);
  --border-color: var(--edge);
  --card-bg: var(--surface);
  --input-bg: var(--surface);
  --hover-bg: var(--surface-alt);
  --primary-color: var(--accent);
  --pixel-orange: var(--accent);
  --pixel-blue: var(--accent);
  --pixel-cyan: #598392;
  --pixel-green: var(--accent);
  --pixel-yellow: var(--warm);
  --pixel-red: #bd6b65;
  --car-orange: var(--warm);
  --car-blue: var(--accent);
  --car-red: #bd6b65;
  --border-radius: 13px;
  --border-radius-sm: 8px;
  --font-family-pixel: Arial, Helvetica, sans-serif;
  --font-family-sans: Arial, Helvetica, sans-serif;
}

html { scroll-behavior: smooth; }
body.tool-page {
  background: var(--page);
  background-image: none;
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  image-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-width: 320px;
}
body.tool-page .container { max-width: 1220px; }
body.tool-page :focus-visible { outline: 2px solid var(--warm); outline-offset: 3px; }
body.tool-page ::selection { background: #aec3b0; color: #01161e; }

.tool-header {
  position: relative;
  z-index: 30;
  background: var(--surface);
  border-bottom: 1px solid var(--edge);
  color: var(--ink);
}
.tool-header-inner {
  min-height: 78px;
  display: flex;
  align-items: center;
  gap: 18px;
}
.tool-wordmark {
  color: var(--ink);
  font-size: 21px;
  font-weight: 900;
  letter-spacing: -.075em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.tool-wordmark span { font-weight: 900; }
.tool-wordmark i { color: var(--warm); font-style: normal; }
.tool-wordmark:hover { color: var(--ink); }
.tool-header-separator { height: 24px; width: 1px; background: var(--edge); }
.tool-current { color: var(--muted); font-size: 13px; font-weight: 700; }
.tool-nav { margin-left: auto; display: flex; align-items: center; gap: 13px; }
.tool-nav a {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.tool-nav a:hover { color: var(--accent); }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid var(--edge);
  border-radius: 8px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
.theme-toggle:hover { background: var(--surface-alt); border-color: var(--accent); }
.theme-icon { font-size: 17px; line-height: 1; }

.tool-main { padding-top: 30px !important; padding-bottom: 85px !important; }
.tool-main > .tool-intro {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  margin-bottom: 30px !important;
}
.tool-intro .card-body { padding: 10px 0 8px !important; text-align: left !important; }
.tool-kicker { color: var(--accent) !important; font-size: 11px !important; font-weight: 800; letter-spacing: .18em; margin-bottom: 14px !important; text-transform: uppercase; }
.tool-intro h1 {
  color: var(--ink) !important;
  font-size: clamp(32px,4.4vw,54px) !important;
  line-height: 1.05;
  letter-spacing: -.065em;
  font-weight: 800;
  margin-bottom: 13px !important;
}
.tool-intro p { color: var(--muted) !important; font-size: 15px !important; line-height: 1.6; }
.tool-intro p + p { color: var(--soft) !important; font-size: 13px !important; }

body.tool-page .card:not(.tool-intro),
body.tool-page .dev-panel {
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: 14px;
  box-shadow: var(--shadow);
  color: var(--ink);
}
body.tool-page .card-body { color: var(--ink); padding: 26px; }
body.tool-page .card-header { background: var(--surface-alt) !important; border-color: var(--edge) !important; color: var(--ink); }
body.tool-page h1, body.tool-page h2, body.tool-page h3,
body.tool-page h4, body.tool-page h5, body.tool-page h6 {
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 800;
  letter-spacing: -.035em;
}
body.tool-page .card h2, body.tool-page .card h3 { color: var(--accent) !important; }
body.tool-page p, body.tool-page .form-check-label { color: var(--muted); }
body.tool-page strong, body.tool-page b { color: var(--ink); }
body.tool-page .form-label, body.tool-page label { color: var(--ink); font-weight: 700; }
body.tool-page .form-text, body.tool-page .text-muted, body.tool-page .small { color: var(--soft) !important; }

body.tool-page .form-control,
body.tool-page .form-select,
body.tool-page textarea,
body.tool-page .input-group-text {
  background-color: var(--surface);
  border: 1px solid var(--edge);
  border-radius: 8px;
  color: var(--ink);
  font: inherit;
  min-height: 42px;
  box-shadow: none;
}
body.tool-page .form-control::placeholder { color: var(--soft); opacity: 1; }
body.tool-page .form-control:focus,
body.tool-page .form-select:focus,
body.tool-page textarea:focus {
  background-color: var(--surface);
  color: var(--ink);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(89,131,146,.2);
}
body.tool-page .form-select option { background: var(--surface); color: var(--ink); }
body.tool-page .input-group-text { background: var(--surface-alt) !important; color: var(--muted) !important; border-color: var(--edge) !important; }
body.tool-page .form-check-input { background-color: var(--surface); border-color: var(--edge); }
body.tool-page .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
body.tool-page .form-range::-webkit-slider-thumb { background: var(--accent); }
body.tool-page .form-range::-moz-range-thumb { background: var(--accent); }

body.tool-page .btn {
  border-radius: 8px;
  border-width: 1px;
  box-shadow: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  padding: 10px 16px;
  text-shadow: none;
  transition: background .2s,border-color .2s,color .2s,transform .2s;
}
body.tool-page .btn-primary, body.tool-page .btn-success,
body.tool-page .btn-info, body.tool-page .btn-warning {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
body.tool-page .btn-primary:hover, body.tool-page .btn-success:hover,
body.tool-page .btn-info:hover, body.tool-page .btn-warning:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--page);
  transform: translateY(-1px);
}
body.tool-page .btn-outline-secondary, body.tool-page .btn-outline-primary,
body.tool-page .btn-outline-info {
  background: transparent;
  border-color: var(--edge);
  color: var(--ink);
}
body.tool-page .btn-outline-secondary:hover, body.tool-page .btn-outline-primary:hover,
body.tool-page .btn-outline-info:hover { background: var(--surface-alt); border-color: var(--accent); color: var(--ink); }

body.tool-page .table { --bs-table-bg: transparent; --bs-table-color: var(--ink); --bs-table-border-color: var(--edge); color: var(--ink); }
body.tool-page .table > :not(caption) > * > * { background-color: transparent; color: var(--ink); border-color: var(--edge); }
body.tool-page .table-striped > tbody > tr:nth-of-type(odd) > * { background: var(--surface-alt); }
body.tool-page .alert, body.tool-page .list-group-item, body.tool-page .accordion-item { background: var(--surface-alt); color: var(--ink); border-color: var(--edge); }
body.tool-page .nav-tabs { border-color: var(--edge); }
body.tool-page .nav-tabs .nav-link { color: var(--muted); }
body.tool-page .nav-tabs .nav-link.active { background: var(--surface); color: var(--accent); border-color: var(--edge) var(--edge) var(--surface); }
body.tool-page .badge, body.tool-page .service-badge { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
body.tool-page .cost-display { color: var(--accent); text-shadow: none; }
body.tool-page .result-card { border-left-color: var(--accent); }
body.tool-page .text-success, body.tool-page .text-info { color: var(--accent) !important; }
body.tool-page .text-warning { color: var(--warm) !important; }
body.tool-page canvas { border-color: var(--edge); background: var(--surface-alt); }

/* Developer tools have their own nested panels and tab navigation. */
body.tool-page .stat-item {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  min-width: 155px;
  margin: 0 10px 9px 0;
  padding: 15px 18px;
  background: var(--surface-alt);
  border: 1px solid var(--edge);
  border-radius: 9px;
  vertical-align: top;
}
body.tool-page .stat-number { color: var(--accent); font-size: 23px; font-weight: 800; line-height: 1.1; }
body.tool-page .stat-label { color: var(--muted); font-size: 12px; }
body.tool-page .dev-stats .card-body { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
body.tool-page .dev-stats h3 { grid-column: 1 / -1; margin-bottom: 6px !important; }
body.tool-page .dev-stats .stat-item { display: flex; width: auto; min-width: 0; margin: 0; }
body.tool-page .dev-tabs { gap: 7px; }
body.tool-page .dev-tabs .nav-link {
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  padding: 10px 14px;
}
body.tool-page .dev-tabs .nav-link:hover { color: var(--accent); border-color: var(--accent); }
body.tool-page .dev-tabs .nav-link.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
body.tool-page .dev-panel { padding: 26px; }
body.tool-page .dev-panel .panel-title { margin-bottom: 22px; }
body.tool-page .tool-card {
  height: 100%;
  padding: 20px;
  background: var(--surface-alt);
  border: 1px solid var(--edge);
  border-radius: 10px;
}
body.tool-page .tool-card h5 { color: var(--ink); margin-bottom: 17px; }

@media (max-width: 700px) {
  .tool-header-inner { min-height: 70px; gap: 10px; flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; }
  .tool-wordmark { font-size: 19px; }
  .tool-current { font-size: 11px; }
  .tool-nav { width: 100%; justify-content: space-between; margin-left: 0; padding-top: 7px; }
  .tool-main { padding-top: 20px !important; }
  body.tool-page .card-body { padding: 18px; }
  .tool-intro .card-body { padding: 4px 0 8px !important; }
  body.tool-page .dev-panel { padding: 17px; }
  body.tool-page .tool-card { padding: 16px; }
  body.tool-page .dev-stats .card-body { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  body.tool-page .dev-stats .stat-item { padding: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body.tool-page .btn { transition: none; }
}