@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root { --bg:#eef0f3; --card:#fff; --line:#e5e5e5; --ink:#1a1a1a; --muted:#888; }
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter',system-ui,sans-serif; background:var(--bg); color:var(--ink); }

/* Topbar + metrics */
.topbar { display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px 22px; background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; }
.brand { font-weight:900; font-size:18px; }
.brand span { color:var(--muted); font-weight:600; font-size:13px; }
.metrics { display:flex; gap:10px; }
.metric { background:#f6f7f9; border:1px solid var(--line); border-radius:10px; padding:6px 14px; text-align:center; min-width:86px; }
.m-val { display:block; font-weight:900; font-size:18px; line-height:1.1; }
.m-lbl { font-size:10px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); }
.metric.budget .m-val { color:#b45309; }
.metric.quality .m-val { color:#047857; }
.metric.rep .m-val { color:#4f46e5; }

/* Layout */
main { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:18px; padding:18px 22px; align-items:start; }
.board-wrap { background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px; overflow:auto; }
.board-title { font-weight:900; font-size:15px; text-transform:uppercase; letter-spacing:.5px; color:#111;
  margin-bottom:12px; display:flex; align-items:center; gap:10px; }
.phase-badge { font-size:10px; font-weight:800; letter-spacing:1.5px; color:#2e7d32; background:#e8f5e9;
  padding:3px 10px; border-radius:20px; }

/* Gantt board */
.gantt { display:grid; grid-template-columns:200px repeat(10, minmax(48px,1fr));
  border:2px solid #d4d4d4; border-radius:10px; overflow:hidden; min-width:760px; }
.cell { border-right:1px solid #f0f0f0; border-bottom:1px solid #ececec; min-height:64px;
  display:flex; align-items:center; justify-content:center; font-size:13px; }
.cell.head { background:#f5f5f5; font-weight:800; color:#777; min-height:38px; }
.cell.corner { justify-content:flex-start; padding-left:14px; font-size:10px; text-transform:uppercase; letter-spacing:1px; color:#999; }
.cell.rowhead { justify-content:flex-start; gap:8px; padding:0 12px; font-weight:700; font-size:12px;
  border-left:4px solid var(--accent); color:#333; background:#fff; }
.cell.rowhead .ic { font-size:16px; }
.cell.slot { background:#fff; transition:background .12s; }
.cell.slot:hover { background:#fafbfc; }
.cell.slot::after { content:'+'; color:#dcdcdc; font-weight:700; }

/* Side: decks */
.side { background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 16px; position:sticky; top:74px; }
.side h3 { font-size:11px; text-transform:uppercase; letter-spacing:.8px; color:var(--muted); margin:12px 0 6px; }
.side h3:first-child { margin-top:0; }
.side ul { list-style:none; display:flex; flex-direction:column; gap:3px; }
.side li { display:flex; justify-content:space-between; gap:8px; font-size:13px; border-bottom:1px dashed #eee; padding:3px 0; }
.side li b { font-weight:600; }
.side li span { color:var(--muted); white-space:nowrap; }