:root{
  --m:#7B1044; --m2:#5e0c34; --ml:#f5eaef; --ink:#222; --bg:#f4f5f7; --card:#fff; --line:#e6e6e6; --grey:#6b6b6b;
  --grn:#1e7d46; --grnb:#e2f3e6; --amb:#9C6500; --ambb:#fff4d6; --red:#C00000; --redb:#ffe1e1; --blu:#1F4E79; --blub:#e8eef7;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Segoe UI',Arial,Helvetica,sans-serif;background:var(--bg);color:var(--ink);line-height:1.5;}
a{color:var(--m);text-decoration:none;}
img{max-width:100%;}
/* top nav */
.nav{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 1px 6px rgba(0,0,0,.04);}
.nav .in{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:22px;padding:0 22px;height:60px;}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--m);font-size:18px;letter-spacing:.3px;}
.logo .mk{width:30px;height:30px;border-radius:7px;background:var(--m);color:#fff;display:grid;place-items:center;font-size:15px;}
.nav a.link{color:#444;font-size:14px;padding:6px 2px;border-bottom:2px solid transparent;}
.nav a.link:hover,.nav a.link.active{color:var(--m);border-bottom-color:var(--m);}
.nav .spacer{flex:1;}
.nav .srch input{border:1px solid var(--line);border-radius:20px;padding:7px 14px;font-size:13px;width:190px;}
.btn{background:var(--m);color:#fff;border:none;border-radius:6px;padding:8px 14px;font-size:13px;cursor:pointer;font-family:inherit;}
.btn:hover{background:var(--m2);} .btn.ghost{background:#eee;color:#444;}
/* hero */
.hero{background:linear-gradient(120deg,var(--m),#9a2057);color:#fff;}
.hero .in{max-width:1180px;margin:0 auto;padding:46px 22px;}
.hero h1{font-size:34px;font-weight:800;margin-bottom:8px;}
.hero p{opacity:.92;font-size:15px;max-width:640px;}
.hero .stats{display:flex;gap:30px;margin-top:26px;flex-wrap:wrap;}
.hero .stat .n{font-size:26px;font-weight:800;} .hero .stat .l{font-size:12px;opacity:.85;text-transform:uppercase;letter-spacing:.5px;}
/* layout */
.page{max-width:1180px;margin:0 auto;padding:26px 22px 60px;}
.crumb{font-size:12px;color:var(--grey);margin-bottom:14px;}
h2.h{font-size:22px;color:var(--m);margin:6px 0 16px;}
h3.sec{font-size:15px;color:var(--m);margin:26px 0 10px;border-bottom:2px solid var(--ml);padding-bottom:6px;}
/* project cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:18px;}
.pcard{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px;transition:.12s;display:block;}
.pcard:hover{box-shadow:0 8px 22px rgba(0,0,0,.09);transform:translateY(-3px);}
.pcard.soon{opacity:.6;border-style:dashed;pointer-events:none;}
.pcard h4{color:var(--m);font-size:18px;margin-bottom:3px;}
.pcard .loc{font-size:12px;color:var(--grey);margin-bottom:12px;}
.pill{font-size:10px;font-weight:700;padding:3px 9px;border-radius:11px;background:var(--grnb);color:var(--grn);}
.bar{height:8px;background:#eee;border-radius:5px;overflow:hidden;margin:12px 0 6px;}
.bar>i{display:block;height:100%;background:var(--grn);}
.mini{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--grey);}
.mini b{display:block;color:var(--m);font-size:15px;}
/* kpi */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:6px 0 8px;}
.kpi{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--m);border-radius:10px;padding:15px;}
.kpi .l{font-size:11px;color:var(--grey);text-transform:uppercase;letter-spacing:.4px;}
.kpi .v{font-size:22px;font-weight:800;color:var(--m);margin-top:5px;}
.kpi.g .v{color:var(--grn);} .kpi.a .v{color:var(--amb);}
/* tabs */
.tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin:18px 0 18px;}
.tabs button{background:none;border:none;padding:10px 14px;font-size:14px;font-family:inherit;color:#555;cursor:pointer;border-bottom:3px solid transparent;}
.tabs button:hover{color:var(--m);}
.tabs button.active{color:var(--m);font-weight:700;border-bottom-color:var(--m);}
.tab{display:none;} .tab.on{display:block;}
/* card + table */
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:18px;}
.card .ch{background:var(--m);color:#fff;padding:10px 15px;font-size:13px;font-weight:700;}
table{width:100%;border-collapse:collapse;font-size:13px;}
th{background:#faf6f8;color:var(--m);text-align:left;padding:9px 11px;font-size:11px;border-bottom:2px solid var(--ml);}
td{padding:8px 11px;border-bottom:1px solid var(--line);vertical-align:top;}
td.r,th.r{text-align:right;} td.c,th.c{text-align:center;}
tr:hover td{background:#fcf9fb;}
.tag{display:inline-block;font-size:10px;font-weight:700;padding:2px 9px;border-radius:11px;white-space:nowrap;}
.s-done{background:#E3F3E8;color:#1e7d46;} .s-prog{background:#FCE9D6;color:#C56A1A;}
.s-up{background:#ECEEF1;color:#5A6470;} .s-crit,.s-red,.s-late{background:#FBE0E0;color:#C00000;}
.s-exp{background:var(--ambb);color:var(--amb);} .s-sub{background:var(--blub);color:var(--blu);} .s-appr{background:var(--grnb);color:var(--grn);}
.note{font-size:11px;color:var(--grey);}
.ntinput{width:100%;border:1px solid var(--line);border-radius:5px;padding:5px 7px;font-family:inherit;font-size:12px;min-height:30px;resize:vertical;}
.info{background:var(--blub);border:1px solid #cfe0f0;color:#194a73;padding:11px 15px;border-radius:9px;font-size:13px;margin-bottom:16px;}
.toolbar{display:flex;gap:10px;align-items:center;margin-bottom:8px;flex-wrap:wrap;}
.toolbar input{border:1px solid var(--line);border-radius:20px;padding:8px 14px;font-size:13px;flex:1;max-width:340px;}
footer{background:#2b2b2b;color:#cfcfcf;font-size:12px;}
footer .in{max-width:1180px;margin:0 auto;padding:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;}
footer b{color:#fff;}
@media print{ .nav,.tabs,.toolbar,.btn,footer{display:none!important;} .tab{display:block!important;page-break-after:always;} .hero{background:var(--m)!important;-webkit-print-color-adjust:exact;print-color-adjust:exact;} }
@media(max-width:760px){ .kpis{grid-template-columns:repeat(2,1fr);} .nav .srch{display:none;} .hero h1{font-size:26px;} }