:root { --ink:#101828; --mute:#667085; --line:#E4E7EC; --bg:#F7F8FA; }
* { box-sizing: border-box; }
body { margin:0; font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif; background:var(--bg); color:var(--ink); }
a { color:inherit; }
.wrap { max-width:1360px; margin:0 auto; padding:24px 20px 40px; display:flex; flex-direction:column; gap:20px; }
.top { display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; }
.brand { font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--mute); }
h1 { font-size:30px; font-weight:700; line-height:1.1; margin:4px 0 0; }
h2 { font-size:17px; font-weight:600; margin:0; }
nav { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
nav a, nav button { font:600 13px Inter,system-ui,sans-serif; padding:9px 14px; border-radius:999px; border:1px solid var(--line);
  background:#FFF; color:#475467; text-decoration:none; cursor:pointer; }
nav form { margin:0; }
.meta { font-size:13px; color:var(--mute); }
.badge { font-size:12px; font-weight:600; color:#92400E; background:#FEF0C7; border:1px solid #FEDF89; border-radius:999px; padding:4px 10px; }
.card { background:#FFF; border:1px solid var(--line); border-radius:12px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px; }
.tile { display:flex; flex-direction:column; gap:8px; padding:22px 20px; text-decoration:none; background:#FFF;
  border:1px solid var(--line); border-radius:14px; border-top:6px solid #98A2B3; min-height:150px; }
.tile .num { font-size:56px; font-weight:700; line-height:1; }
.tile .word { font-size:20px; font-weight:600; }
.tile .sub { font-size:12px; color:var(--mute); }
.tile.red { border-top-color:#B42318; } .tile.red .num { color:#B42318; }
.tile.amber { border-top-color:#B54708; } .tile.amber .num { color:#B54708; }
.tile.green { border-top-color:#15713F; } .tile.green .num { color:#15713F; }
.tile.grey .num { color:#475467; }
.tile:hover { box-shadow:0 2px 10px rgba(16,24,40,.12); }
.cols { display:flex; flex-wrap:wrap; gap:14px; }
.col { flex:1 1 300px; min-width:0; display:flex; flex-direction:column; gap:10px; }
.colhd { display:flex; align-items:baseline; justify-content:space-between; border-bottom:2px solid var(--line); padding-bottom:8px; }
.colhd b { font-size:14px; } .colhd span { font-size:13px; color:var(--mute); }
.task { border:1px solid var(--line); border-left:4px solid #98A2B3; border-radius:10px; padding:12px; display:flex; flex-direction:column; gap:7px; background:#FFF; }
.task.red { border-left-color:#B42318; } .task.amber { border-left-color:#B54708; } .task.green { border-left-color:#15713F; }
.task .nm { font-size:15px; font-weight:600; text-decoration:none; }
.task .mt { font-size:12px; color:var(--mute); }
.chips { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.chip { font-size:11px; font-weight:600; border-radius:999px; padding:3px 9px; border:1px solid; }
.chip.green { color:#15713F; background:#ECFDF3; border-color:#ABEFC6; }
.chip.amber { color:#B54708; background:#FFFAEB; border-color:#FEDF89; }
.chip.red { color:#B42318; background:#FEF3F2; border-color:#FECDCA; }
.chip.grey { color:#475467; background:#F2F4F7; border-color:var(--line); }
.blk { font-size:11px; font-weight:600; color:#B42318; background:#FEE4E2; border-radius:999px; padding:3px 8px; }
.line { font-size:13px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
table { border-collapse:collapse; width:100%; }
th { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--mute); }
td { padding:9px 10px; border-bottom:1px solid #F2F4F7; font-size:13px; vertical-align:top; }
.panel { padding:18px; display:flex; flex-direction:column; gap:12px; }
.note { font-size:12px; color:var(--mute); line-height:1.5; }
.pills { display:flex; flex-wrap:wrap; gap:8px; }
.pill { font:600 13px Inter,system-ui,sans-serif; padding:10px 16px; border-radius:999px; border:1px solid var(--line); background:#FFF; color:#475467; text-decoration:none; }
.pill.on { background:var(--ink); border-color:var(--ink); color:#FFF; }
form.box { max-width:420px; margin:60px auto; padding:28px; display:flex; flex-direction:column; gap:14px; }
label { font-size:13px; font-weight:600; display:flex; flex-direction:column; gap:6px; }
input[type=text], input[type=password], input[type=search] { font:inherit; padding:12px; border:1px solid #D0D5DD; border-radius:10px; }
button.primary { font:600 15px Inter,system-ui,sans-serif; padding:12px 16px; border-radius:10px; border:0; background:var(--ink); color:#FFF; cursor:pointer; }
.err { color:#B42318; background:#FEF3F2; border:1px solid #FECDCA; border-radius:10px; padding:10px 12px; font-size:13px; }
.stats { display:flex; flex-wrap:wrap; gap:12px; }
.stat { flex:1 1 150px; border:1px solid var(--line); border-radius:10px; padding:12px; background:#FFF; }
.stat .n { font-size:26px; font-weight:700; } .stat .l { font-size:12px; color:var(--mute); }
.empty { font-size:13px; color:var(--mute); padding:8px 0; }

/* Solid colour tiles, as the agreed mock-up: the whole tile carries the colour, with its word. */
.tile { border:1px solid; border-top-width:1px; border-radius:14px; align-items:center; justify-content:center; text-align:center; min-height:150px; }
.tile.green { background:#ECFDF3; border-color:#ABEFC6; } .tile.green .word { color:#15713F; }
.tile.amber { background:#FFFAEB; border-color:#FEDF89; } .tile.amber .word { color:#B54708; }
.tile.red { background:#FEF3F2; border-color:#FECDCA; } .tile.red .word { color:#B42318; }
.tile.grey { background:#F2F4F7; border-color:#D0D5DD; } .tile.grey .word { color:#475467; }
.tile .sub { display:none; }