:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #171717;
  background: #f4f5f7;
}
* { box-sizing: border-box; }
body { margin: 0; }
button, select { font: inherit; }
.app-shell { max-width: 1250px; margin: 0 auto; padding: 28px; }
.topbar { display:flex; justify-content:space-between; gap:24px; align-items:flex-start; margin-bottom:18px; }
.eyebrow { text-transform:uppercase; letter-spacing:.08em; font-size:.78rem; margin:0 0 4px; color:#666; }
h1 { margin:0; font-size:2.4rem; }
h2 { margin:0 0 10px; font-size:1.2rem; }
p { line-height:1.45; }
.subtitle { margin:.3rem 0 0; color:#555; }
.scoreboard { display:grid; grid-template-columns:repeat(3, minmax(90px,1fr)); gap:10px; min-width:330px; }
.scoreboard div, .metric { background:white; border:1px solid #ddd; border-radius:12px; padding:12px 14px; }
.scoreboard span, .metric span { display:block; color:#666; font-size:.78rem; }
.scoreboard strong, .metric strong { display:block; font-size:1.25rem; margin-top:3px; }
.callout { background:#fff7d6; border:1px solid #ead272; border-radius:12px; padding:14px 16px; margin-bottom:18px; display:grid; gap:4px; }
.grid.two { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.panel { background:white; border:1px solid #ddd; border-radius:14px; padding:18px; margin-bottom:18px; box-shadow:0 1px 2px rgba(0,0,0,.03); }
.panel-head { display:flex; justify-content:space-between; gap:18px; align-items:flex-start; margin-bottom:10px; }
.panel-head p { margin:0; color:#666; }
.cards { display:grid; gap:10px; }
.card { border:1px solid #ddd; border-radius:12px; padding:12px; display:grid; gap:8px; }
.card-head { display:flex; justify-content:space-between; gap:10px; align-items:center; }
.name { font-weight:700; }
.salary { font-weight:700; }
.skills { display:flex; flex-wrap:wrap; gap:6px; }
.skill { background:#f1f2f4; border-radius:999px; padding:3px 8px; font-size:.78rem; }
.muted { color:#666; font-size:.84rem; }
button { border-radius:9px; border:1px solid #bbb; padding:9px 12px; cursor:pointer; background:white; }
button:disabled { cursor:not-allowed; opacity:.45; }
.primary { background:#171717; color:white; border-color:#171717; font-weight:700; }
.secondary { background:white; }
.danger { color:#8d1818; border-color:#d7aaaa; }
.hired { color:#12651c; border-color:#a9d6ae; background:#f1fbf2; }
.task-list { display:grid; gap:10px; }
.task { border:1px solid #ddd; border-radius:12px; padding:12px; display:grid; grid-template-columns:2fr 1fr 1fr auto; gap:12px; align-items:center; }
.task-title strong { display:block; }
.task-title small { color:#666; }
.task select { width:100%; padding:8px; border-radius:8px; border:1px solid #bbb; }
.ai-toggle { display:flex; align-items:center; gap:7px; white-space:nowrap; }
.metrics { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.actions { display:flex; gap:10px; justify-content:flex-end; margin-bottom:18px; }
.hidden { display:none; }
.good { color:#12651c; }
.bad { color:#9a1e1e; }
.warning { color:#8b5a00; }
.results-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:12px 0 18px; }
@media (max-width: 850px) {
  .topbar, .grid.two { display:grid; grid-template-columns:1fr; }
  .scoreboard { min-width:0; }
  .task { grid-template-columns:1fr; }
  .results-grid { grid-template-columns:1fr 1fr; }
}

.task { grid-template-columns:48px minmax(0,1fr) minmax(220px,300px) auto; align-items:start; }
.task-rank { font-weight:800; font-size:1.05rem; color:#555; padding-top:4px; }
.task-main { display:grid; gap:10px; }
.qualified-list { display:flex; flex-wrap:wrap; gap:7px; }
.worker-option { display:grid; gap:2px; min-width:112px; text-align:left; border-color:#c8c8c8; }
.worker-option span { font-size:.75rem; color:#666; }
.worker-option.selected { border-color:#171717; background:#f0f0ee; box-shadow:inset 0 0 0 1px #171717; }
.task-controls { display:grid; gap:7px; }
.ai-cost { font-size:.8rem; color:#555; line-height:1.3; }
.no-qualified { color:#9a1e1e; font-weight:650; background:#fff3f3; border:1px solid #e8bcbc; border-radius:8px; padding:8px 10px; }
.market-signal { margin-bottom:10px; }
@media (max-width: 850px) { .task { grid-template-columns:1fr; } .task-rank { padding-top:0; } }

.staff-name-capacity { position:relative; overflow:hidden; min-width:170px; min-height:38px; border-radius:8px; background:#f1f2f4; }
.staff-capacity-fill { position:absolute; inset:0 auto 0 0; width:var(--used); background:#d9d9d9; pointer-events:none; }
.staff-name-content { position:relative; z-index:1; display:flex; flex-direction:column; padding:5px 8px; }
.staff-name-content small { font-size:.7rem; color:#666; font-weight:500; }
.worker-option { position:relative; overflow:hidden; padding:0; min-height:44px; background:#fafafa; }
.capacity-current, .capacity-projected { position:absolute; inset:0 auto 0 0; pointer-events:none; }
.capacity-projected { width:var(--projected); background:#ededed; }
.capacity-current { width:var(--current); background:#d0d0d0; z-index:1; }
.worker-option-content { position:relative; z-index:2; display:grid; gap:2px; padding:7px 9px; }
.worker-option.selected .capacity-projected { background:#dddddd; }
.worker-option.over-capacity { opacity:.45; }

.auto-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.performance-chart { width:100%; min-height:280px; }
.performance-chart svg { width:100%; height:auto; display:block; overflow:visible; }
.chart-grid { stroke:#e3e3e3; stroke-width:1; }
.chart-label { fill:#666; font:12px Inter,ui-sans-serif,system-ui,sans-serif; }
.chart-legend { display:flex; gap:18px; flex-wrap:wrap; justify-content:center; margin-top:4px; font-size:.82rem; color:#555; }
.chart-legend span { display:flex; align-items:center; gap:6px; }
.chart-legend i { width:18px; height:3px; display:inline-block; }