/* UI visual refinement v0.2.0 over the accepted v0.1.0 prototype.
 * Preserve layout, spacing, typography and interaction. No external assets.
 * Purple: interaction; blue/green/amber/red/grey: engineering states.
 */
:root {
  --ui-canvas: #f6f7fb;
  --ui-surface: #ffffff;
  --ui-sidebar: #fcfcff;
  --ui-soft: #f0f2f7;
  --ui-line: #dce0eb;
  --ui-control: #818ba0;
  --ui-ink: #252938;
  --ui-muted: #5d6475;
  --ui-accent: #6246c7;
  --ui-accent-hover: #5136b2;
  --ui-accent-pressed: #442b99;
  --ui-accent-soft: #efebfc;
  --ui-accent-tint: #e6dff9;
  --ui-blue: #285ca5;
  --ui-blue-soft: #ecf3ff;
  --ui-green: #256544;
  --ui-green-soft: #eaf5ee;
  --ui-amber: #82520b;
  --ui-amber-soft: #fff4df;
  --ui-red: #a43b37;
  --ui-red-soft: #fff0ef;
  --ui-grey: #525c70;
  --ui-grey-soft: #edf0f6;
  --ui-toast: #2d3446;
  --ui-radius: 6px;
}

body { background: var(--ui-canvas); color: var(--ui-ink); }
aside, #sandbox { background: var(--ui-sidebar); border-color: var(--ui-line); }
#sandbox small, aside small, .nav-tools summary,
.sub, .muted, small, dt, .breadcrumb, .breadcrumb a,
.pagination, .list-scope, .file-summary, .file-summary > span:first-child,
.scan-status, .list-count-hint, .media-identity > span,
.file-name > span, .resource-freshness, .demo-strip {
  color: var(--ui-muted);
}
aside a { color: var(--ui-ink); border-radius: var(--ui-radius); }
aside a:hover { background: var(--ui-soft); }
aside a.active { color: var(--ui-accent); background: var(--ui-accent-soft); border-left-color: var(--ui-accent); }
aside a.active:hover { background: var(--ui-accent-tint); }
aside .nav-group, .nav-site, .nav-tools, .tabs, .detail-section, .batch-picker { border-color: var(--ui-line); }

a { color: var(--ui-accent); }
a:hover { text-decoration-thickness: 2px; }
.file-name > a, .file-name > strong, .category-context, .file-name + small strong { color: var(--ui-ink); }
.file-name > a:hover { text-decoration: underline; }
button, .button {
  color: var(--ui-ink); background: var(--ui-surface);
  border-color: var(--ui-control); border-radius: var(--ui-radius);
  text-align: center; vertical-align: middle;
}
button:hover, .button:hover { background: var(--ui-soft); }
button:active, .button:active { background: var(--ui-grey-soft); }
button.primary, .button.primary { color: var(--ui-surface); background: var(--ui-accent); border-color: var(--ui-accent); }
button.primary:hover, .button.primary:hover { background: var(--ui-accent-hover); border-color: var(--ui-accent-hover); }
button.primary:active, .button.primary:active { background: var(--ui-accent-pressed); border-color: var(--ui-accent-pressed); }
button.danger, .button.danger { color: var(--ui-red); border-color: var(--ui-red); }
button.danger:hover, .button.danger:hover { background: var(--ui-red-soft); }
button.danger:active, .button.danger:active { color: var(--ui-surface); background: var(--ui-red); }
.category-nav .selected, .segmented button.selected, .transfer-switch button.active {
  color: var(--ui-accent); background: var(--ui-accent-soft); border-color: var(--ui-accent);
}
.category-nav .selected:hover, .segmented button.selected:hover, .transfer-switch button.active:hover { background: var(--ui-accent-tint); }
.category-nav .selected:active, .segmented button.selected:active, .transfer-switch button.active:active { color: var(--ui-surface); background: var(--ui-accent); }
.tabs a, .tabs button { color: var(--ui-muted); background: transparent; border-radius: 0; }
.tabs .active { color: var(--ui-accent); border-bottom-color: var(--ui-accent); }
.tabs a:hover, .tabs button:hover, .tabs a:active, .tabs button:active { color: var(--ui-accent); background: var(--ui-accent-soft); }
button:disabled, button:disabled:hover, button:disabled:active,
.category-nav button.selected:disabled, .segmented button.selected:disabled,
.transfer-switch button.active:disabled, .tabs button:disabled,
.button[aria-disabled="true"] {
  color: var(--ui-muted); background: var(--ui-grey-soft); border-color: var(--ui-line);
  opacity: 1; cursor: not-allowed;
}
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--ui-accent); outline-offset: 3px;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--ui-accent); }
input:not([type="checkbox"]):not([type="range"]), select, textarea {
  color: var(--ui-ink); background: var(--ui-surface); border-color: var(--ui-control); border-radius: 4px;
}
input::placeholder, textarea::placeholder { color: var(--ui-muted); opacity: 1; }
input[readonly] { background: var(--ui-soft) !important; }

.panel, .table-wrap, .resource-card, .status-grid, .stat, dialog {
  background: var(--ui-surface); border-color: var(--ui-line); border-radius: var(--ui-radius);
}
.status-grid section, th, td { border-color: var(--ui-line); }
th { color: var(--ui-muted); background: var(--ui-soft); }
tbody tr:hover { background: var(--ui-canvas); }
.scan-status, .batch-locator, .simulation { background: var(--ui-sidebar); border-color: var(--ui-line); }
.bulk { background: var(--ui-accent-soft); color: var(--ui-ink); }
.bulk form, pre { background: var(--ui-soft); }
.bulk summary { color: var(--ui-accent); }
.format, code, .media-identity code { color: var(--ui-grey); background: var(--ui-grey-soft); border-color: var(--ui-line); }
.save-bar { color: var(--ui-muted); background: var(--ui-canvas); border-color: var(--ui-line); }
.empty, .cover-pending { color: var(--ui-muted); background: var(--ui-soft); }
.mark-swatches button { background: var(--ui-soft); }
.mark-swatches button:hover { background: var(--ui-accent-soft); }

.pill { color: var(--ui-grey); background: var(--ui-grey-soft); }
.pill.work { color: var(--ui-blue); background: var(--ui-blue-soft); }
.pill.ok { color: var(--ui-green); background: var(--ui-green-soft); }
.pill.bad { color: var(--ui-red); background: var(--ui-red-soft); }
.notice { color: var(--ui-amber); background: var(--ui-amber-soft); border-color: var(--ui-amber); }
.notice.error { color: var(--ui-red); background: var(--ui-red-soft); border-color: var(--ui-red); }
.notice.good { color: var(--ui-green); background: var(--ui-green-soft); border-color: var(--ui-green); }
.error-text { color: var(--ui-red); }
.step { color: var(--ui-grey); background: var(--ui-grey-soft); border-color: var(--ui-line); }
.step.current { color: var(--ui-blue); background: var(--ui-blue-soft); border-color: var(--ui-blue); }
.step.done { color: var(--ui-green); background: var(--ui-green-soft); border-color: var(--ui-green); }
.resource-card strong, .resource-grid strong { font-variant-numeric: tabular-nums; }
.resource-meter { background: var(--ui-grey-soft); }
.resource-meter i { background: var(--ui-blue); transition: none; }
#toast { color: var(--ui-surface); background: var(--ui-toast); }
@media (prefers-reduced-motion: reduce) {
  .resource-meter i { transition: none; }
}