:root {
  --ux-surface: #fff;
  --ux-soft: #f5faf7;
  --ux-line: #cfd8d3;
  --ux-focus: #0b65c2;
}

.demo-badge { position: fixed; right: 10px; bottom: 10px; z-index: 30; padding: 4px 9px; border-radius: 999px; background: #fff7d6; color: #69520a; border: 1px solid #dbc56e; font-size: .72rem; }
.ux-toolbar { display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin:12px 0; }
.ux-grid { display:grid; gap:14px; }
.ux-grid.two { grid-template-columns:minmax(0,1fr) minmax(300px,.55fr); }
.ux-panel { background:var(--ux-surface); border:1px solid var(--ux-line); border-radius:8px; padding:16px; }
.ux-kpis { display:grid; grid-template-columns:repeat(4,minmax(140px,1fr)); gap:10px; margin:14px 0; }
.ux-kpi { background:#fff; border:1px solid var(--ux-line); border-radius:6px; padding:12px; }
.ux-kpi strong { display:block; font-size:1.8rem; }
.ux-status-context { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; background:#fff; border:1px solid var(--ux-line); padding:14px; border-radius:8px; margin:12px 0; }
.ux-status-context small { display:block; color:var(--muted); }
.ux-queue { width:100%; border-collapse:collapse; }
.ux-queue th { text-align:left; color:var(--ect-dark); background:var(--ux-soft); }
.ux-queue th,.ux-queue td { padding:10px; border-bottom:1px solid var(--ux-line); vertical-align:top; }
.ux-reason { color:var(--danger); font-weight:600; }
.ux-empty { text-align:center; padding:42px 20px; background:#fff; border:1px dashed var(--ux-line); border-radius:8px; }
.ux-tabs { display:flex; gap:4px; overflow:auto; border-bottom:1px solid var(--ux-line); margin:16px 0; }
.ux-tabs a { padding:9px 12px; white-space:nowrap; }
.btn:focus-visible,.nav a:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible { outline:3px solid var(--ux-focus); outline-offset:2px; }
@media (max-width:900px) { .ux-grid.two,.ux-status-context { grid-template-columns:1fr; } .ux-kpis { grid-template-columns:repeat(2,1fr); } .top { align-items:flex-start; } .brand h1 { font-size:.95rem; } .who { display:none; } }
@media (max-width:560px) { html { font-size:16px; } .main { padding:14px 12px 42px; } .ux-kpis { grid-template-columns:1fr 1fr; } .nav { overflow:auto; flex-wrap:nowrap; } .btn { min-height:44px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; } }
.lead,.muted,.fine,.foot,footer,.or { color:#4b5563; }
.main a:not(.btn) { color:#075f49; }
.role-card,.role-card strong,.role-card span { color:#17352c; }
.login-intro,.login-intro li,.login-intro code,.role strong,.role span { color:#17352c; }