*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;font-family:Arial,Helvetica,sans-serif;background:#f5f6f7;color:#0a1d37}
.app{width:1365px;height:768px;background:#fff;display:grid;grid-template-columns:224px 1fr;overflow:hidden}
.side{background:#071a33;color:#fff;padding:24px 18px;display:flex;flex-direction:column}
.brand{display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(255,255,255,.12);padding-bottom:20px}
.brand img{width:34px;height:34px;object-fit:contain}
.brand strong{font-size:13px;letter-spacing:.08em}.brand small{display:block;color:#c6a15a;font-size:8px;letter-spacing:.2em;margin-top:3px}
.office{margin-top:16px;padding:11px;border:1px solid rgba(255,255,255,.1);border-radius:9px;background:rgba(255,255,255,.035)}
.office small{display:block;color:#7994b5;font-size:7px;letter-spacing:.12em}.office b{display:block;font-size:9px;margin-top:4px}
.nav{padding-top:13px;display:grid;gap:5px}.nav b{font-size:8px;color:#7591b5;letter-spacing:.16em;margin:13px 9px 3px}
.nav span{font-size:10px;padding:10px 11px;border-radius:8px;color:#cbd7e6}
.nav span.on{background:#173251;color:#fff;border-left:2px solid #c6a15a}
.user{margin-top:auto;border-top:1px solid rgba(255,255,255,.12);padding-top:14px;font-size:9px;color:#9fb0c3}
.main{padding:26px 30px;background:#fbfaf8;overflow:hidden}
.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.top small{font-size:8px;letter-spacing:.12em;color:#9a783f}.top h1{font-size:25px;margin:5px 0 0}
.top button{background:#071a33;color:#fff;border:0;border-radius:8px;padding:10px 15px;font-weight:700;font-size:9px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}.kpi{background:#fff;border:1px solid #dfe3e7;border-radius:12px;padding:15px}
.kpi small{color:#8491a0;font-size:8px}.kpi strong{display:block;font-size:22px;margin:7px 0}.kpi span{font-size:8px;color:#43816a}
.grid{display:grid;grid-template-columns:1.35fr .85fr;gap:14px}.grid.equal{grid-template-columns:1fr 1fr}
.card{background:#fff;border:1px solid #dfe3e7;border-radius:12px;padding:16px}.cardhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px}
.cardhead strong{font-size:12px}.cardhead span{font-size:8px;color:#8d98a5}
.table{width:100%;border-collapse:collapse}.table th,.table td{text-align:left;padding:10px 8px;border-bottom:1px solid #edf0f2;font-size:8px}
.table th{color:#8a95a1;font-weight:700}.tag{display:inline-block;border-radius:999px;padding:5px 7px;background:#e9f5ef;color:#3d7a62;font-size:7px;font-weight:800}
.tag.warn{background:#fff2d8;color:#8b672e}.tag.off{background:#f0f1f3;color:#7d8793}
.list{display:grid;gap:9px}.item{border:1px solid #edf0f2;border-radius:9px;padding:10px;display:grid;gap:3px}.item b{font-size:9px}.item span,.item small{font-size:7px;color:#85919f}
.timeline{display:grid;gap:11px}.event{display:grid;grid-template-columns:34px 1fr auto;gap:9px;align-items:start}.event i{width:30px;height:30px;border-radius:9px;background:#f4ead8;color:#9a702d;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:8px}
.event b{font-size:9px}.event p{font-size:7px;color:#7c8997;margin:4px 0}.event small{font-size:7px;color:#8d98a5}
.kanban{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.col{background:#f5f6f7;border-radius:10px;padding:10px}.col>strong{font-size:8px;display:flex;justify-content:space-between;margin-bottom:8px}
.task{background:#fff;border:1px solid #e1e5e8;border-radius:8px;padding:9px;margin-bottom:7px}.task b{font-size:8px}.task p{font-size:7px;color:#81909e}
.source{display:grid;grid-template-columns:1fr auto;gap:8px;padding:10px 0;border-bottom:1px solid #edf0f2}.source b{font-size:9px}.source small{font-size:7px;color:#7f8d9a;display:block;margin-top:3px}
.health{font-size:7px;background:#e8f5ee;color:#3d7a62;padding:5px 7px;border-radius:999px}.health.warn{background:#fff2d8;color:#8b672e}.health.off{background:#f0f1f3;color:#7d8793}
.progress{height:7px;border-radius:999px;background:#edf0f2;overflow:hidden;margin-top:8px}.progress span{display:block;height:100%;background:#c6a15a}
.statbox{border:1px solid #e2e6e9;border-radius:10px;padding:12px}.statbox small{font-size:7px;color:#85919f}.statbox b{display:block;font-size:15px;margin-top:5px}
.note{margin-top:12px;background:#f7f1e6;border:1px solid #eadcc0;border-radius:10px;padding:11px;font-size:8px;color:#72582d}