:root {
  --font-scale: 1;
  --surface-soft: #f8f9f6;
  --field: #fff;
  --note: #eef6f2;
  --danger-note: #fff0ed;
}

body { background: var(--paper); color: var(--ink); }
body, button, input, select, textarea { font-size: calc(16px * var(--font-scale)); }
label, td { font-size: calc(13px * var(--font-scale)); }
.muted, .metric span, .device-pill, .button.small, .sidebar-footer span, .logo-row span { font-size: calc(12px * var(--font-scale)); }
th, .eyebrow, .status, .badge { font-size: calc(11px * var(--font-scale)); }
.workspace header h2 { font-size: calc(28px * var(--font-scale)); }
.section-head h3 { font-size: calc(22px * var(--font-scale)); }
.modal-head h3 { font-size: calc(27px * var(--font-scale)); }
.metric strong { font-size: calc(34px * var(--font-scale)); }
.settings-card h3, .settings-preferences h3 { font-size: calc(20px * var(--font-scale)); }

input, select, textarea, .button.secondary, .tabs button { background: var(--field); color: var(--ink); }
.workspace > header, .table-wrap { background: var(--surface); }
th { background: var(--surface-soft); }
.rate-category { background: var(--surface-soft) !important; }
.friendly-note { background: var(--note) !important; }
.danger-note { background: var(--danger-note) !important; }

.settings-preferences { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); gap:20px; }
.settings-preferences .card { min-width:0; display:flex; flex-direction:column; overflow-wrap:anywhere; }
.settings-preferences .card h3 { margin:0; }
.settings-preferences .card > .muted { min-height:38px; margin:10px 0 2px; line-height:1.5; }
.settings-preferences .card label { margin-top:18px; }
.settings-preferences .font-preview { margin-top:18px; }
#preferencesForm { min-width:0; max-width:100%; }
#preferencesForm + #brandingForm,
#brandingForm + .danger-zone { margin-top:24px; }
.account-password-card { margin-top:24px; }
.account-password-card .section-head { margin-top:0; }
.account-password-card + #brandingForm,
.account-password-card + .danger-zone { margin-top:24px; }
.show-password-toggle { display:flex; align-items:center; gap:9px; margin-top:14px; cursor:pointer; width:max-content; max-width:100%; }
.show-password-toggle input { width:18px !important; height:18px; min-height:0; margin:0; flex:0 0 auto; }
#brandingForm { min-width:0; }
#brandingForm .section-head { margin-top:0; }
.danger-zone { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.danger-zone > div { min-width:0; }
.danger-zone .button { flex:0 0 auto; }
.font-preview { margin-top:18px; padding:18px; border:1px dashed var(--line); border-radius:12px; font-size:calc(18px * var(--font-scale)); background:var(--surface-soft); }
.theme-options { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:20px; }
.theme-choice { margin:0; }
.theme-choice input {
  position:absolute;
  width:1px !important;
  height:1px !important;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  opacity:0;
}
.theme-swatch { display:grid; place-items:center; min-height:90px; border:2px solid var(--line); border-radius:14px; cursor:pointer; }
.theme-swatch.light { background:#f7f8f5; color:#18201d; }
.theme-swatch.dark { background:#202724; color:#eef3ef; }
.theme-choice input:checked + .theme-swatch { border-color:#d86f3d; box-shadow:0 0 0 3px rgba(216,111,61,.18); }

.stage-banner { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:22px; padding:18px 20px; border-radius:14px; background:var(--green2); }
.stage-banner strong, .stage-banner small { display:block; }
.stage-banner strong { font-family:Georgia,serif; font-size:calc(22px * var(--font-scale)); }
.stage-participants { display:grid; gap:12px; }
.stage-participant { display:grid; grid-template-columns:minmax(180px,1fr) minmax(220px,1fr) auto; align-items:end; gap:16px; padding:16px; border:1px solid var(--line); border-radius:14px; background:var(--surface-soft); }
.stage-participant strong, .stage-participant small { display:block; }
.stage-participant label { margin:0; }
.stage-participant > p { grid-column:1/-1; margin:0; }
.production-summary { grid-template-columns:repeat(3,minmax(0,1fr)); margin-bottom:18px; }
.workflow-route { margin:20px 0; padding:18px; border:1px solid var(--line); border-radius:14px; background:var(--surface-soft); }
.workflow-all-stages { display:grid; gap:18px; }
.workflow-stage { padding:18px; border:1px solid var(--line); border-radius:16px; background:var(--surface); }
.workflow-stage.current { border-color:var(--green); box-shadow:0 0 0 2px color-mix(in srgb,var(--green) 18%,transparent); }
.workflow-stage-head { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:14px; }
.workflow-stage-head h3 { margin:2px 0 0; font-family:Georgia,serif; font-size:calc(22px * var(--font-scale)); }
.workflow-role-list { display:grid; gap:12px; }
.workflow-role { display:grid; grid-template-columns:minmax(150px,.8fr) minmax(180px,1fr) minmax(200px,1.1fr) 120px 120px; gap:12px; align-items:end; padding:15px; border:1px solid var(--line); border-radius:13px; background:var(--surface-soft); }
.workflow-role-title strong,.workflow-role-title small { display:block; }
.workflow-role-title small { margin-top:6px; color:var(--muted); }
.workflow-role label { margin:0; }
.workflow-role .full { grid-column:1/-1; }
.workflow-role textarea { min-height:72px; }
.workflow-person { display:flex; min-height:44px; align-items:center; padding:0 12px; border:1px solid var(--line); border-radius:10px; background:var(--field); }
.status.in_progress { background:#e5eef8; color:#315f8a; }
.status.awaiting_review, .status.awaiting_erp { background:#f6e9df; color:#95522e; }
.status.needs_clarification { background:#fff1d7; color:#8b5a0c; }
:root[data-theme="dark"] .stage-banner { background:#263f34; }

:root[data-theme="dark"] {
  --ink:#edf3ef;
  --muted:#a9b6b0;
  --paper:#121714;
  --surface:#1b221f;
  --surface-soft:#242d29;
  --field:#202824;
  --line:#35413b;
  --green:#397d62;
  --green2:#263f34;
  --shadow:0 18px 60px rgba(0,0,0,.35);
  --note:#21372e;
  --danger-note:#402824;
}
:root[data-theme="dark"] .brand-panel { background:linear-gradient(145deg,#10271f,#204a39); }
:root[data-theme="dark"] .sidebar { background:#101f1a; }
:root[data-theme="dark"] .button.primary { background:#397d62; }
:root[data-theme="dark"] .button.primary:hover { background:#448e70; }
:root[data-theme="dark"] .button.danger { background:#4a2929; color:#ffb8b8; }
:root[data-theme="dark"] .icon-button { background:#2b342f; color:var(--ink); }
:root[data-theme="dark"] .status { background:#303a35; color:#d5ddd8; }
:root[data-theme="dark"] .status.pending,
:root[data-theme="dark"] .status.new,
:root[data-theme="dark"] .status.drawings_ready,
:root[data-theme="dark"] .status.needs_clarification { background:#493d23; color:#ffd98b; }
:root[data-theme="dark"] .status.in_progress { background:#26394a; color:#b7d9f6; }
:root[data-theme="dark"] .status.awaiting_review,
:root[data-theme="dark"] .status.awaiting_erp { background:#4a3528; color:#f5c4a1; }
:root[data-theme="dark"] .status.approved,
:root[data-theme="dark"] .status.completed,
:root[data-theme="dark"] .status.active { background:#244233; color:#a8e0bd; }
:root[data-theme="dark"] .status.rejected,
:root[data-theme="dark"] .status.revoked,
:root[data-theme="dark"] .status.disabled { background:#4a2929; color:#ffb8b8; }
:root[data-theme="dark"] dialog { background:var(--surface); color:var(--ink); }
:root[data-theme="dark"] dialog::backdrop { background:rgba(0,0,0,.7); }

@media(max-width:1200px) { .workflow-role { grid-template-columns:repeat(2,minmax(0,1fr)); } .workflow-role-title,.workflow-role .full { grid-column:1/-1; } }
@media(max-width:1000px) { .settings-preferences { grid-template-columns:1fr; } .stage-participant,.workflow-role { grid-template-columns:1fr; align-items:stretch; } .workflow-role-title,.workflow-role .full { grid-column:auto; } }
@media(max-width:700px) { .danger-zone { align-items:stretch; flex-direction:column; } .danger-zone .button { width:100%; } }