:root {
  --dn-accent: #ffc400;
  --dn-accent-hover: #ffd43b;
  --dn-accent-pressed: #e8ac00;
  --dn-accent-soft: rgba(255, 196, 0, .13);
  --dn-danger: #ef5d67;
  --dn-success: #31b86b;
  --dn-warning: #e8a317;
  --dn-radius: 5px;
  --dn-font: Inter, "Segoe UI", Arial, sans-serif;
  font-family: var(--dn-font);
  color-scheme: dark;
}

:root[data-theme="dark"] {
  --dn-bg: #08090b;
  --dn-appbar: #07080a;
  --dn-panel: #101114;
  --dn-panel-raised: #15171b;
  --dn-control: #17191e;
  --dn-control-hover: #202229;
  --dn-canvas: #0b0c0f;
  --dn-sheet: #111318;
  --dn-part: #171a1f;
  --dn-part-line: #f0bd18;
  --dn-border: #292c32;
  --dn-border-strong: #3b3f47;
  --dn-text: #f3f3f4;
  --dn-text-strong: #ffffff;
  --dn-muted: #969aa2;
  --dn-disabled: #62666d;
  --dn-shadow: rgba(0, 0, 0, .42);
  --dn-overlay: rgba(8, 9, 11, .96);
  color-scheme: dark;
}

:root[data-theme="light"] {
  --dn-bg: #eff0f2;
  --dn-appbar: #0b0c0e;
  --dn-panel: #ffffff;
  --dn-panel-raised: #f7f7f8;
  --dn-control: #ffffff;
  --dn-control-hover: #f0f1f3;
  --dn-canvas: #ffffff;
  --dn-sheet: #ffffff;
  --dn-part: #fbfbfc;
  --dn-part-line: #d8a000;
  --dn-border: #d9dce1;
  --dn-border-strong: #b8bcc3;
  --dn-text: #1e2024;
  --dn-text-strong: #090a0c;
  --dn-muted: #686d75;
  --dn-disabled: #a6a9af;
  --dn-shadow: rgba(20, 22, 26, .16);
  --dn-overlay: rgba(255, 255, 255, .97);
  color-scheme: light;
}

html, body {
  background: var(--dn-bg) !important;
  color: var(--dn-text) !important;
  font-family: var(--dn-font) !important;
  letter-spacing: 0;
}

body, main, aside, section, footer, header, div, table, tr, td, th {
  scrollbar-color: var(--dn-border-strong) transparent;
}

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--dn-border-strong); border: 3px solid transparent; border-radius: 6px; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background-color: var(--dn-muted); }

main { background: var(--dn-bg) !important; }
aside, section, footer, header,
.title, .toolbar, .panel, .content, .topbar, .presetbar, .map-tools,
.summary-window, .settings-panel, .status, .version, .version-log,
.sheet-pages, .view-tool-group, .sim-panel, .vector-inspector, .job-progress {
  border-color: var(--dn-border) !important;
  color: var(--dn-text) !important;
}

aside, section, footer,
.title, .toolbar, .panel, .content, .topbar, .presetbar, .map-tools,
.summary-window, .settings-panel, .status, .version, .version-log {
  background: var(--dn-panel) !important;
}

header, .panel h2, .footer-head, .modal-head, .summary-head,
.sheet-pages-head, .view-tool-group-label {
  border-color: var(--dn-border) !important;
  background: var(--dn-panel) !important;
  color: var(--dn-text-strong) !important;
}

h1, h2, h3, h4, strong, b { color: var(--dn-text-strong); }
.group, .tool-row, label, legend, .machine-box span, .row-grid > span,
.options, .checks label, .diameter-mark, .tabs, .presetbar {
  color: var(--dn-text) !important;
}
.hf-grid > label, .form label, .lead-ramp-panel label, .pocket-panel label,
.map-search span { color: var(--dn-muted) !important; }
/* These stay on their own fixed dark background regardless of app theme, so
   pin their text to a fixed light color instead of following --dn-text. */
.pattern-details summary, .lead-ramp-details summary, .pocket-details summary,
.layer-choice, .layer-choice span {
  color: #d7e1ea !important;
}
.diagram text { fill: var(--dn-muted) !important; }
.diagram line, .diagram rect, .diagram polyline { stroke: var(--dn-muted) !important; }
.origin::after { background: var(--dn-text) !important; }
.version-log summary, .view-title, .pill, .vector-inspector strong,
.export-choice strong, .sim-readout strong {
  color: var(--dn-text-strong) !important;
}
.pill { background: var(--dn-panel-raised) !important; }
.muted, .hint, .meta, .step, .status, .version, #status,
.setting-note, .map-search-status, .summary-count, small, td, pre,
.row, .unit, .part-search-status, .sim-readout, .job-progress-text,
.sheet-page small, .sheet-material small, .version-body {
  color: var(--dn-muted) !important;
}

button, label.button, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea,
.tab, .export-tab, .sheet-page, .sheet-material, .export-choice,
.corner-option, .direction-option, .z-zero-option, .part-search,
.slider-control, .origin, .checks label, .relation-chip, .pattern-chip {
  border-color: var(--dn-border) !important;
  background: var(--dn-control) !important;
  color: var(--dn-text) !important;
  border-radius: var(--dn-radius) !important;
  box-shadow: none !important;
}

button:hover:not(:disabled), label.button:hover, .tab:hover,
.export-tab:hover, .sheet-page:hover, .sheet-material:hover {
  border-color: var(--dn-border-strong) !important;
  background: var(--dn-control-hover) !important;
}

button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--dn-accent) !important;
  outline-offset: 1px;
}

button.primary, label.primary, label.button.primary,
button.blue, button.orange, .tab.active, .export-tab.active,
.layer-tab.active, .sheet-material.active, .sheet-page.active,
.view-tools button.active, .tool-row.active, .preset.active,
.corner-option:has(input:checked), .direction-option:has(input:checked),
.z-zero-option:has(input:checked), .origin.active {
  border-color: var(--dn-accent-pressed) !important;
  background: var(--dn-accent) !important;
  color: #141414 !important;
  -webkit-text-fill-color: #141414 !important;
}
button.primary *, label.primary *, label.button.primary *,
button.blue *, button.orange *, .tab.active *, .export-tab.active *,
.layer-tab.active *, .sheet-material.active *, .sheet-page.active * {
  color: #141414 !important;
  -webkit-text-fill-color: #141414 !important;
}

button.primary:hover:not(:disabled), label.primary:hover,
button.blue:hover:not(:disabled), button.orange:hover:not(:disabled) {
  border-color: var(--dn-accent) !important;
  background: var(--dn-accent-hover) !important;
  color: #111 !important;
}

button.danger, button.red, .danger { color: var(--dn-danger) !important; }
button:disabled, input:disabled, select:disabled, textarea:disabled {
  color: var(--dn-disabled) !important;
  opacity: .52;
}

input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--dn-accent) !important; }
input::placeholder, textarea::placeholder { color: var(--dn-disabled); }
option { background: var(--dn-panel); color: var(--dn-text); }

table { color: var(--dn-text); }
th {
  background: var(--dn-panel-raised) !important;
  color: var(--dn-text-strong) !important;
  border-color: var(--dn-border) !important;
}
thead th { box-shadow: 0 2px 0 var(--dn-accent) !important; }
td { border-color: var(--dn-border) !important; }
tbody tr { background: var(--dn-panel) !important; }
tbody tr:nth-child(even) { background: var(--dn-panel-raised) !important; }
tr.folder td, .section-row td {
  background: var(--dn-canvas) !important;
  color: var(--dn-text-strong) !important;
  border-top-color: var(--dn-accent) !important;
}
.skip-row, .skip-row td { background: color-mix(in srgb, var(--dn-canvas) 84%, black) !important; }

.splitter { background: var(--dn-bg) !important; }
.splitter::after { background: var(--dn-border) !important; }
.splitter:hover::after, .splitter.dragging::after { background: var(--dn-accent) !important; }
.col-resize-handle:hover, .col-resize-handle.active { background: var(--dn-accent) !important; }
.tool-row.active { outline-color: var(--dn-accent) !important; }
.origin.active { outline-color: var(--dn-accent) !important; }
.lead-ramp-panel, .pocket-panel, .pattern-panel, .summary-window { border-color: var(--dn-accent) !important; }
.new-layer td { background: var(--dn-accent-soft) !important; }

svg { background: var(--dn-canvas) !important; }
.three-preview { background: var(--dn-canvas) !important; }
.sheet-pages, .view-tool-group, .sim-panel, .vector-inspector, .job-progress {
  background: var(--dn-overlay) !important;
  box-shadow: 0 14px 34px var(--dn-shadow) !important;
}
.sheet-thumb, .sheet-thumb-svg {
  background: var(--dn-sheet) !important;
  border-color: var(--dn-border-strong) !important;
}
.sheet-thumb-part {
  fill: color-mix(in srgb, var(--dn-accent) 36%, transparent) !important;
  stroke: var(--dn-part-line) !important;
}
.badge {
  background: var(--dn-overlay) !important;
  border-color: var(--dn-border) !important;
  color: var(--dn-text-strong) !important;
}
.stat .badge::before { color: var(--dn-accent); }
.version-dot { background: var(--dn-accent) !important; box-shadow: 0 0 12px color-mix(in srgb, var(--dn-accent) 72%, transparent) !important; }
.job-progress { border-color: var(--dn-accent) !important; }
.job-progress-track { background: var(--dn-canvas) !important; border-color: var(--dn-border) !important; }
.job-progress-bar, .progress-bar { background: var(--dn-accent) !important; }

dialog {
  background: var(--dn-panel) !important;
  color: var(--dn-text) !important;
  border: 1px solid var(--dn-border-strong) !important;
  box-shadow: 0 24px 70px var(--dn-shadow) !important;
}
dialog::backdrop, .summary-modal { background: rgba(0, 0, 0, .64) !important; }

#gcode .gcode-line.active {
  color: var(--dn-text-strong) !important;
  background: var(--dn-accent-soft) !important;
  border-left-color: var(--dn-accent) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dn-accent) 20%, transparent) !important;
}

.dnest-appbar {
  height: 48px;
  display: grid;
  grid-template-columns: 220px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 0 10px 0 14px;
  border-bottom: 1px solid #25272c;
  background: var(--dn-appbar);
  color: #fff;
  position: relative;
  z-index: 100;
}
.dnest-brand { min-width: 0; display: grid; line-height: 1; }
.dnest-brand strong { font-size: 25px; font-weight: 900; color: #fff; }
.dnest-brand strong span { color: var(--dn-accent); font-style: italic; }
.dnest-brand small { margin-top: 3px; color: #a9abb0 !important; font-size: 8px; font-weight: 700; text-transform: uppercase; }
.dnest-appbar-center { justify-self: center; color: #92969d; font-size: 10px; font-weight: 900; letter-spacing: .08em; }
body.dnest-has-appbar > main { height: calc(100vh - 48px) !important; }

.dnest-theme-toggle {
  width: auto !important;
  min-width: 92px;
  min-height: 34px !important;
  padding: 0 10px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 0 0 auto;
  border: 1px solid var(--dn-border-strong) !important;
  border-radius: 5px !important;
  background: var(--dn-control) !important;
  color: var(--dn-text) !important;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}
.dnest-appbar .dnest-theme-toggle {
  border-color: #33363c !important;
  background: #15171a !important;
  color: #fff !important;
}
.dnest-theme-toggle-icon { color: var(--dn-accent); font-size: 16px; }
.dnest-theme-host { display: flex !important; align-items: center !important; gap: 8px !important; }

:root[data-theme="light"] .view-title,
:root[data-theme="light"] .badge { background: rgba(255, 255, 255, .94) !important; }
:root[data-theme="light"] .skip-row,
:root[data-theme="light"] .skip-row td { background: #e8e9eb !important; color: #666 !important; }
:root[data-theme="light"] .dnest-appbar { color-scheme: dark; }

@media (max-width: 720px) {
  .dnest-appbar { grid-template-columns: minmax(130px, 1fr) auto; }
  .dnest-appbar-center { display: none; }
  .dnest-theme-toggle { min-width: 38px; width: 38px !important; padding: 0 !important; }
  .dnest-theme-toggle-label { display: none; }
}

@media print {
  .dnest-appbar, .dnest-theme-toggle { display: none !important; }
  body.dnest-has-appbar > main { height: auto !important; }
}