:root{--navy:#142a3d;--blue:#215a85;--green:#2f6b57;--gold:#d6aa52;--bg:#f4f6f8;--card:#fff;--text:#24313a;--muted:#6f7c85;--line:#dfe5e9;--red:#a94442;--orange:#b06b00}
*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text)}a{color:var(--blue);text-decoration:none}.topbar{background:linear-gradient(110deg,var(--navy),#1d435f);color:#fff;padding:16px 24px;display:flex;justify-content:space-between;align-items:center;gap:20px;box-shadow:0 2px 9px #0002}.brand{color:#fff;font-weight:800;font-size:24px}.tag{margin-left:10px;color:#dce7ef;font-size:13px}.topbar nav{display:flex;gap:16px;flex-wrap:wrap}.topbar nav a{color:#fff;font-weight:700;font-size:14px}.wrap{max-width:1400px;margin:26px auto;padding:0 18px 50px}.hero{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:20px}.hero h1{margin:0;font-size:30px}.muted{color:var(--muted)}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:0 2px 7px #00000008}.metric{font-size:34px;font-weight:800;margin-top:8px}.metric-label{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}.actions{display:flex;gap:10px;flex-wrap:wrap}.btn{display:inline-block;border:0;border-radius:9px;padding:11px 15px;font-weight:700;cursor:pointer;background:var(--blue);color:#fff}.btn.secondary{background:#e7edf1;color:#23323c}.btn.green{background:var(--green)}.btn.gold{background:#a67820}.btn.danger{background:#963f3f}.table-wrap{overflow:auto;background:#fff;border:1px solid var(--line);border-radius:14px}.table{width:100%;border-collapse:collapse;min-width:1050px}.table th,.table td{padding:12px 11px;border-bottom:1px solid #edf0f2;text-align:left;font-size:14px;vertical-align:top}.table th{background:#eef3f6;position:sticky;top:0;z-index:1}.pill{display:inline-block;padding:5px 9px;border-radius:999px;background:#e8eef2;font-weight:700;font-size:12px}.pill.high{background:#e1f2e6;color:#205a37}.pill.medium{background:#fff0cd;color:#765300}.pill.overdue{background:#f9dddd;color:#7d2626}.filters,.form-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}.field label{display:block;font-size:12px;font-weight:800;color:#4e5960;margin-bottom:5px}.field input,.field select,.field textarea{width:100%;padding:10px 11px;border:1px solid #cbd5dc;border-radius:8px;background:#fff;font:inherit}.field textarea{min-height:100px}.span-2{grid-column:span 2}.span-4{grid-column:span 4}.alert{padding:12px 15px;border-radius:9px;margin-bottom:16px}.alert.ok{background:#dff1e4;color:#214c2e}.alert.error{background:#f5dddd;color:#762626}.login{max-width:430px;margin:60px auto}.section-title{display:flex;justify-content:space-between;align-items:center;margin:26px 0 12px}.empty{padding:28px;text-align:center;color:var(--muted)}footer{text-align:center;padding:20px;color:#7d8991;font-size:13px}@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}.filters,.form-grid{grid-template-columns:1fr 1fr}.topbar{align-items:flex-start;flex-direction:column}.span-4{grid-column:span 2}}@media(max-width:600px){.grid{grid-template-columns:1fr 1fr}.filters,.form-grid{grid-template-columns:1fr}.span-2,.span-4{grid-column:span 1}.hero{align-items:flex-start;flex-direction:column}.wrap{margin-top:18px;padding:0 12px 40px}.card{padding:14px}.metric{font-size:28px}.topbar nav{gap:11px}.tag{display:none}}
.info-strip{background:#eef5f1;border:1px solid #cfe0d7;border-radius:10px;padding:13px 15px;color:#33463d}.check{display:flex;align-items:end}.check label{font-size:14px;margin:0;padding:10px 0}.check input{width:auto;margin-right:7px}.timeline{display:grid;gap:10px}.timeline-item{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px}.timeline-head{display:flex;justify-content:space-between;gap:12px;margin-bottom:7px}.timeline-head span{color:var(--muted);font-size:13px}.table.compact{min-width:850px}code{background:#eef2f4;padding:2px 5px;border-radius:4px}
@media(max-width:600px){.timeline-head{flex-direction:column;gap:3px}.table{min-width:900px}}