:root {
  --color-page:#f1f5f9;
  --color-surface:#fff;
  --color-surface-muted:#f8fafc;
  --color-surface-raised:#fff;
  --color-border:#e2e8f0;
  --color-border-strong:#cbd5e1;
  --color-text:#0f172a;
  --color-heading:#0f172a;
  --color-muted:#64748b;
  --color-subtle:#475569;
  --color-brand:#0e7490;
  --color-brand-strong:#155e75;
  --color-brand-soft:#e0f2fe;
  --color-brand-tint:#ecfeff;
  --color-brand-text:#0e7490;
  --color-danger:#dc2626;
  --color-row-hover:#f8fafc;
  --color-header:rgba(255,255,255,.9);
  --color-sidebar:#020617;
  --shadow-card:0 10px 24px rgba(15,23,42,.04);
  --shadow-raised:0 14px 34px rgba(15,23,42,.14);
}
html[data-theme="dark"] {
  --color-page:#0f172a;
  --color-surface:#111827;
  --color-surface-muted:#1e293b;
  --color-surface-raised:#172033;
  --color-border:#334155;
  --color-border-strong:#475569;
  --color-text:#e5edf7;
  --color-heading:#f8fafc;
  --color-muted:#a8b3c3;
  --color-subtle:#cbd5e1;
  --color-brand:#22d3ee;
  --color-brand-strong:#06b6d4;
  --color-brand-soft:#164e63;
  --color-brand-tint:#0e2936;
  --color-brand-text:#67e8f9;
  --color-danger:#f87171;
  --color-row-hover:#1e293b;
  --color-header:rgba(17,24,39,.92);
  --color-sidebar:#020617;
  --shadow-card:0 12px 30px rgba(0,0,0,.26);
  --shadow-raised:0 18px 42px rgba(0,0,0,.34);
}
html { color-scheme:light; }
html[data-theme="dark"] { color-scheme:dark; }
body { background:var(--color-page)!important; color:var(--color-text)!important; }
.table-wrap { overflow-x: auto; max-width:100%; }
.table-wrap table { min-width:42rem; }
.page-intro { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.page-intro h2 { margin:0; font-size:1.35rem; font-weight:750; color:var(--color-heading); }
.page-intro p { margin:.35rem 0 0; max-width:46rem; color:var(--color-muted); font-size:.95rem; }
.eyebrow { margin:0!important; color:var(--color-brand-text)!important; font-size:.75rem!important; font-weight:750; letter-spacing:.04em; text-transform:uppercase; }
.page-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.5rem; }
.toolbar { display:flex; flex-direction:column; gap:.75rem; margin-bottom:1rem; }
.toolbar-filters { display:flex; flex:1 1 auto; flex-direction:column; gap:.5rem; }
.toolbar-actions { display:flex; flex-wrap:wrap; gap:.5rem; }
.summary-grid { display:grid; gap:1rem; margin-bottom:1rem; grid-template-columns:repeat(auto-fit, minmax(11rem, 1fr)); }
.summary-card { border:1px solid var(--color-border); border-radius:.75rem; background:var(--color-surface); color:var(--color-text); padding:1rem; box-shadow:var(--shadow-card); }
.summary-card p:first-child { margin:0; color:var(--color-muted); font-size:.84rem; font-weight:650; }
.summary-card p:last-child { margin:.35rem 0 0; color:var(--color-heading); font-size:1.35rem; font-weight:780; }
.form-label { display:block; font-size:.875rem; font-weight:650; color:var(--color-subtle); margin-bottom:.35rem; }
.field-hint { margin-top:.3rem; color:var(--color-muted); font-size:.78rem; }
.form-input, .form-select, .form-textarea {
  width:100%; border:1px solid var(--color-border-strong); border-radius:.5rem; background:var(--color-surface-raised); color:var(--color-text); padding:.62rem .75rem; font-size:.95rem; transition:border-color .15s, box-shadow .15s;
}
.form-input:focus, .form-select:focus, .form-textarea:focus { outline:0; border-color:var(--color-brand); box-shadow:0 0 0 3px rgba(8,145,178,.18); }
.form-input::placeholder, .form-textarea::placeholder { color:var(--color-muted); }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.45rem; border-radius:.5rem; padding:.62rem .95rem; font-weight:650; font-size:.9rem; transition:background .15s, color .15s, border-color .15s, transform .15s; white-space:nowrap; }
.btn-primary { background:var(--color-brand); color:#fff; }
.btn-primary:hover { background:var(--color-brand-strong); }
.btn-light { background:var(--color-surface-muted); color:var(--color-subtle); border:1px solid var(--color-border-strong); }
.btn-light:hover { background:var(--color-row-hover); }
.btn-danger { background:var(--color-danger); color:#fff; }
.btn[disabled], .is-loading { opacity:.7; cursor:wait; }
.btn .loading-spinner, .is-loading .loading-spinner { display:inline-flex; }
.card { border:1px solid var(--color-border); border-radius:.75rem; background:var(--color-surface); color:var(--color-text); box-shadow:var(--shadow-card); }
.section-title { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.85rem; }
.section-title h3, .section-title h2 { margin:0; font-weight:700; color:var(--color-heading); }
.icon-btn { display:inline-flex; height:2.5rem; width:2.5rem; align-items:center; justify-content:center; border-radius:.5rem; border:1px solid var(--color-border-strong); background:var(--color-surface); color:var(--color-subtle); }
.icon-btn:hover { background:var(--color-surface-muted); color:var(--color-heading); }
.nav-link { display:flex; flex-direction:row; align-items:center; gap:.65rem; border-radius:.5rem; padding:.62rem .75rem; color:#cbd5e1; font-size:.9rem; font-weight:600; }
.nav-link:hover { background:rgba(255,255,255,.08); color:#fff; }
.nav-link-active { background:#0e7490; color:#fff; box-shadow:0 8px 20px rgba(14,116,144,.24); }
.nav-link-top { display:flex!important; min-width:0; flex:1 1 auto; flex-direction:row!important; align-items:center; gap:.65rem; }
.nav-link-top svg, .nav-link-top i { flex:0 0 auto; }
.nav-link-top span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sidebar-badges { display:flex; min-height:0; flex:0 0 auto; flex-wrap:nowrap; justify-content:flex-end; gap:.25rem; margin-left:auto; padding-left:0; }
.sidebar-badges:empty { display:none; }
.sidebar-badges-loading { opacity:.65; }
.sidebar-badges-error { opacity:.85; }
.sidebar-badge-wrap { display:inline-flex; min-height:1.15rem; min-width:1.15rem; flex:0 0 auto; align-items:center; justify-content:center; gap:.2rem; border-radius:999px; background:rgba(255,255,255,.12); padding:.12rem .28rem; cursor:pointer; }
.sidebar-badge-wrap:hover { background:rgba(255,255,255,.22); }
.sidebar-badge-dot { display:inline-block; height:.46rem; width:.46rem; flex:0 0 auto; border-radius:999px; }
.sidebar-badge-count { color:#fff; font-size:.62rem; font-weight:800; line-height:1; }
.sidebar-badge-active { background:#22c55e; }
.sidebar-badge-pending { background:#facc15; }
.sidebar-badge-progress { background:#38bdf8; }
.sidebar-badge-approval { background:#fb923c; }
.sidebar-badge-parts { background:#a855f7; }
.sidebar-badge-critical { background:#ef4444; }
.sidebar-badge-ready { background:#f59e0b; }
.sidebar-badge-completed { background:#10b981; }
.sidebar-badge-released { background:#64748b; }
.nav-caption { margin:.75rem .75rem 0; border-radius:.5rem; background:rgba(8,145,178,.12); padding:.75rem; color:#cbd5e1; font-size:.78rem; line-height:1.35; }
.status-badge { display:inline-flex; align-items:center; border-radius:999px; padding:.25rem .6rem; font-size:.75rem; font-weight:700; white-space:nowrap; }
.workflow-steps { display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:1rem; }
.workflow-step { display:inline-flex; align-items:center; border:1px solid var(--color-border-strong); border-radius:999px; background:var(--color-surface); color:var(--color-subtle); padding:.4rem .7rem; font-size:.78rem; font-weight:700; }
.workflow-step-active { border-color:var(--color-brand); background:var(--color-brand-soft); color:var(--color-brand-text); }
.quick-card { display:flex; align-items:flex-start; gap:.75rem; border:1px solid var(--color-border); border-radius:.75rem; background:var(--color-surface); color:var(--color-text); padding:1rem; transition:border-color .15s, box-shadow .15s; }
.quick-card:hover { border-color:#67e8f9; box-shadow:0 10px 24px rgba(14,116,144,.08); }
.quick-card-icon { display:flex; height:2.25rem; width:2.25rem; flex:0 0 auto; align-items:center; justify-content:center; border-radius:.5rem; background:var(--color-brand-soft); color:var(--color-brand-text); }
.settings-nav { position:sticky; top:5.5rem; display:grid; gap:.35rem; }
.settings-nav a { border-radius:.45rem; padding:.5rem .65rem; color:var(--color-subtle); font-size:.86rem; font-weight:650; }
.settings-nav a:hover { background:var(--color-row-hover); color:var(--color-brand-text); }
.settings-index { display:grid; gap:.5rem; grid-template-columns:repeat(auto-fit, minmax(12rem, 1fr)); }
.settings-index a { display:flex; align-items:center; justify-content:space-between; gap:.75rem; border:1px solid var(--color-border); border-radius:.5rem; background:var(--color-surface); padding:.65rem .75rem; color:var(--color-subtle); font-size:.9rem; font-weight:700; }
.settings-index a:hover { border-color:#67e8f9; background:var(--color-brand-tint); color:var(--color-brand-text); }
.settings-index small { display:inline-flex; min-width:1.5rem; justify-content:center; border-radius:999px; background:var(--color-brand-soft); padding:.15rem .45rem; color:var(--color-brand-text); font-size:.72rem; font-weight:800; }
table th { font-weight:700; }
table th, table td { vertical-align:middle; padding:.75rem; }
table th:first-child, table td:first-child { padding-left:1rem; }
table th:last-child, table td:last-child { padding-right:1rem; }
thead { color:var(--color-muted); }
.table-wrap thead th { position:sticky; top:0; z-index:1; background:var(--color-surface-muted); }
tbody tr:hover { background:var(--color-row-hover); }
.num, .money-cell { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.actions-cell { white-space:nowrap; }
.stat-card { position:relative; overflow:hidden; }
.stat-card:after { content:""; position:absolute; right:-2rem; top:-2rem; width:7rem; height:7rem; border-radius:999px; background:rgba(8,145,178,.08); }
.ajax-message { margin-top:.5rem; color:var(--color-muted); font-size:.82rem; }
.ajax-status { min-height:1.25rem; color:var(--color-muted); font-size:.82rem; }
.ajax-status-error { color:var(--color-danger); }
.loading-row td { color:var(--color-muted); }
.loading-dot {
  display:inline-block; height:.75rem; width:.75rem; margin-right:.4rem;
  border:2px solid rgba(8,145,178,.2); border-top-color:var(--color-brand);
  border-radius:999px; vertical-align:-.1rem; animation:reconnect-spin .8s linear infinite;
}
.reconnect-banner {
  position:fixed; left:50%; top:1rem; z-index:60; display:flex; align-items:center; gap:.75rem;
  max-width:calc(100vw - 2rem); transform:translateX(-50%); border:1px solid #f59e0b;
  border-radius:.75rem; background:#fffbeb; color:#92400e; padding:.85rem 1rem;
  box-shadow:0 18px 42px rgba(15,23,42,.18); font-size:.92rem; font-weight:650;
}
.reconnect-banner[hidden] { display:none; }
.reconnect-spinner {
  height:1rem; width:1rem; flex:0 0 auto; border:2px solid rgba(146,64,14,.25);
  border-top-color:#92400e; border-radius:999px; animation:reconnect-spin .8s linear infinite;
}
.connection-toast {
  position:fixed; right:1rem; bottom:1rem; z-index:60; border:1px solid #bbf7d0;
  border-radius:.75rem; background:#f0fdf4; color:#166534; padding:.75rem 1rem;
  box-shadow:0 14px 34px rgba(15,23,42,.14); font-size:.9rem; font-weight:650;
}
.connection-toast[hidden] { display:none; }
.offline-disabled { opacity:.55!important; cursor:not-allowed!important; }
@keyframes reconnect-spin { to { transform:rotate(360deg); } }

html[data-theme="dark"] .bg-white,
html[data-theme="dark"] [class*="bg-white/"] { background-color:var(--color-surface)!important; }
html[data-theme="dark"] .bg-slate-50,
html[data-theme="dark"] [class*="bg-slate-50"] { background-color:var(--color-surface-muted)!important; }
html[data-theme="dark"] .bg-slate-100,
html[data-theme="dark"] [class*="bg-slate-100"] { background-color:var(--color-page)!important; }
html[data-theme="dark"] .bg-slate-200,
html[data-theme="dark"] [class*="bg-slate-200"] { background-color:var(--color-border)!important; }
html[data-theme="dark"] [class*="hover:bg-slate-50"]:hover,
html[data-theme="dark"] [class*="hover:bg-cyan-50"]:hover,
html[data-theme="dark"] [class*="hover:bg-red-50"]:hover { background-color:var(--color-row-hover)!important; }
html[data-theme="dark"] .text-slate-900,
html[data-theme="dark"] .text-slate-800,
html[data-theme="dark"] .text-slate-700 { color:var(--color-heading)!important; }
html[data-theme="dark"] .text-slate-600,
html[data-theme="dark"] .text-slate-500,
html[data-theme="dark"] .text-slate-400 { color:var(--color-muted)!important; }
html[data-theme="dark"] .text-cyan-700,
html[data-theme="dark"] .text-cyan-800,
html[data-theme="dark"] .text-cyan-900 { color:var(--color-brand-text)!important; }
html[data-theme="dark"] .text-red-600,
html[data-theme="dark"] .text-red-700 { color:#fca5a5!important; }
html[data-theme="dark"] .text-amber-700,
html[data-theme="dark"] .text-orange-700 { color:#fcd34d!important; }
html[data-theme="dark"] .text-emerald-700 { color:#86efac!important; }
html[data-theme="dark"] .border,
html[data-theme="dark"] .border-b,
html[data-theme="dark"] .border-t,
html[data-theme="dark"] .border-r,
html[data-theme="dark"] .border-l,
html[data-theme="dark"] .border-slate-200,
html[data-theme="dark"] .border-slate-300 { border-color:var(--color-border)!important; }
html[data-theme="dark"] .divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color:var(--color-border)!important; }
html[data-theme="dark"] input[readonly],
html[data-theme="dark"] .form-input[readonly] { background-color:var(--color-surface-muted)!important; color:var(--color-muted)!important; }
html[data-theme="dark"] .btn-primary { color:#06202a!important; }
html[data-theme="dark"] table,
html[data-theme="dark"] th,
html[data-theme="dark"] td { border-color:var(--color-border)!important; }
html[data-theme="dark"] .status-badge.bg-emerald-100 { background:#064e3b!important; color:#bbf7d0!important; }
html[data-theme="dark"] .status-badge.bg-blue-100,
html[data-theme="dark"] .status-badge.bg-cyan-100,
html[data-theme="dark"] .status-badge.bg-indigo-100 { background:#164e63!important; color:#cffafe!important; }
html[data-theme="dark"] .status-badge.bg-amber-100,
html[data-theme="dark"] .status-badge.bg-orange-100 { background:#78350f!important; color:#fde68a!important; }
html[data-theme="dark"] .status-badge.bg-red-100 { background:#7f1d1d!important; color:#fecaca!important; }
html[data-theme="dark"] .status-badge.bg-slate-100,
html[data-theme="dark"] .status-badge.bg-slate-200 { background:#334155!important; color:#e2e8f0!important; }
html[data-theme="dark"] .reconnect-banner { background:#451a03; border-color:#f59e0b; color:#fde68a; }
html[data-theme="dark"] .reconnect-spinner { border-color:rgba(253,230,138,.25); border-top-color:#fde68a; }
html[data-theme="dark"] .connection-toast { background:#052e16; border-color:#16a34a; color:#bbf7d0; }
@media (min-width: 640px) {
  .toolbar { flex-direction:row; align-items:center; justify-content:space-between; }
  .toolbar-filters { flex-direction:row; align-items:center; }
}
@media (max-width: 640px) {
  .page-intro { align-items:stretch; flex-direction:column; }
  .page-actions, .toolbar-actions { justify-content:stretch; }
  .page-actions .btn, .toolbar-actions .btn { width:100%; }
  .toolbar-filters > * { max-width:none!important; }
}
@media print {
  aside, header, .no-print, .page-intro, .workflow-steps { display:none!important; }
  main { padding:0!important; }
  body { background:white!important; color:#0f172a!important; }
  .card { border:0!important; box-shadow:none!important; background:white!important; color:#0f172a!important; }
  .table-wrap { overflow:visible!important; }
  a { color:#0f172a!important; text-decoration:none!important; }
}