*{box-sizing:border-box}
:root{
  --sidebar1:#0756d9;--sidebar2:#00358e;--text:#0c204c;--muted:#65728b;--border:#e2e7ef;--bg:#f5f7fb;
  --blue:#1768ec;--blue2:#2f7bff;--green:#2eae59;--red:#ef5050;--orange:#ff9c21;--card:#fff;
}
body{margin:0;font:14px Inter,Arial,sans-serif;background:var(--bg);color:var(--text)}
.app{display:flex;min-height:100vh}
.sidebar{width:250px;background:linear-gradient(180deg,var(--sidebar1),var(--sidebar2));color:#fff;padding:18px 14px;position:fixed;inset:0 auto 0 0;overflow:auto}
.brand{padding:8px 8px 24px;text-align:center;font-size:16px;line-height:1.3}.brand img{width:180px;max-height:90px;object-fit:contain}
.nav-item{display:flex;gap:14px;align-items:center;color:#fff;text-decoration:none;padding:14px 16px;border-radius:13px;margin:5px 0;font-weight:600;transition:.25s ease}.nav-item.active,.nav-item:hover{background:linear-gradient(90deg,#2f7bff,#0864ef);box-shadow:0 8px 20px #001b5a55;transform:translateX(2px)}.nav-item span{font-size:19px}
.sidebar-bottom{margin-top:40px;border-top:1px solid #ffffff2c;padding:16px;display:flex;justify-content:space-between}.sidebar-bottom a{color:#fff}
.main{margin-left:250px;width:calc(100% - 250px);padding:18px 22px 32px}
.topbar{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:18px}.topbar h1{font-size:28px;margin:2px 0 4px}.topbar p{margin:0;color:var(--muted);font-size:16px}
.filters{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}.filters label{font-size:12px;font-weight:700}.filters select,.date-card,input,textarea,select{display:block;border:1px solid #dce3ef;background:#fff;border-radius:10px;padding:10px;color:#15305f;min-width:150px}.date-card{font-size:12px;line-height:1.5;min-width:150px}
.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:14px}.kpis.six{grid-template-columns:repeat(6,1fr)}.kpis.compact{grid-template-columns:repeat(5,1fr)}
.kpi{background:#fff;border:1px solid #e3e8f1;border-radius:14px;padding:16px;display:flex;gap:13px;align-items:center;box-shadow:0 7px 20px #14345b10}.kpi-icon{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:23px}.kpi.blue .kpi-icon{background:#1768ec}.kpi.green .kpi-icon{background:#2eae59}.kpi.red .kpi-icon{background:#ef5050}.kpi.orange .kpi-icon{background:#ff9c21}.kpi small{display:block;color:#6b7890}.kpi strong{display:block;font-size:27px;margin-top:5px}.kpi em{display:block;margin-top:4px;color:#7a859a;font-style:normal;font-size:12px}.kpi.blue strong{color:#1459d7}.kpi.green strong{color:#169b43}.kpi.red strong{color:#e53935}.kpi.orange strong{color:#ff8d00}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}.span-12{grid-column:span 12}.span-9{grid-column:span 9}.span-8{grid-column:span 8}.span-7{grid-column:span 7}.span-6{grid-column:span 6}.span-5{grid-column:span 5}.span-4{grid-column:span 4}.span-3{grid-column:span 3}.span-2{grid-column:span 2}
.card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:0 5px 18px #1839630d;overflow:hidden}.card h3{margin:0 0 14px;font-size:18px}
.chart{height:250px}.chart.large{height:390px}.side-stack{display:flex;flex-direction:column;gap:14px}.status strong{font-size:24px}.good{color:#199d45}.mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.mini-card{background:#fff;border:1px solid #e2e7ef;border-radius:12px;padding:14px}.mini-card small{color:#6d7890}.mini-card strong{display:block;font-size:19px;margin-top:7px}
.table-scroll{overflow:auto}table{width:100%;border-collapse:collapse;font-size:12px;background:#fff}th,td{padding:10px 9px;border-bottom:1px solid #e6eaf0;text-align:left;vertical-align:top}thead th{color:#5f6e8a;background:#fafbfd;position:sticky;top:0;z-index:1}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block}.dot.good,.pill.good{background:#39b95f}.dot.warning,.pill.warning{background:#ff9c21}.dot.critical,.pill.critical{background:#ef4343}.dot.blue,.pill.blue{background:#2676ee}.dot.gray,.pill.gray{background:#98a5bd}
.pill{display:inline-block;color:#fff;border-radius:20px;padding:4px 10px;font-size:11px;font-weight:700;text-transform:capitalize}.status-chip{display:inline-flex;align-items:center;gap:8px;padding:4px 9px;border-radius:999px;background:#f3f6fb;color:#345;white-space:nowrap;font-weight:700}.status-chip .dot{width:8px;height:8px}
.neg{color:#e83c3c}

.bars{display:flex;height:220px;gap:10px;align-items:flex-end;padding:10px 4px 25px;border-bottom:1px solid #dfe5ef}.bars-large{height:420px}.bar-group{flex:1;text-align:center;min-width:60px}.bar-values{height:175px;display:flex;align-items:flex-end;justify-content:center;gap:4px}.bars-large .bar-values{height:360px}.bar-values i,.bar-values em{width:30%;min-width:16px;background:linear-gradient(#4da0ff,#0759d8);position:relative;border-radius:6px 6px 0 0;transition:height 1s ease}.bar-values em{background:linear-gradient(#7ae654,#35ad35)}.bar-values b{position:absolute;top:-18px;font-size:10px;left:50%;transform:translateX(-50%);font-style:normal;color:#5b6983}.bar-group small{display:block;margin-top:8px;color:#536278;font-weight:600}.legend{margin-top:10px;color:#61708a}.blue-dot,.green-dot{display:inline-block;width:10px;height:10px;margin:0 5px 0 15px}.blue-dot{background:#1e6ee8}.green-dot{background:#53bf40}

.gantt-modern{position:relative}.gantt-top-scale{display:grid;grid-template-columns:repeat(12,1fr);gap:0;margin:0 0 10px 220px;color:#64718a;font-size:12px;font-weight:700}.gantt-top-scale span{text-align:center}.gantt-body{position:relative}.today-line{position:absolute;top:0;bottom:0;width:2px;background:#9ac0ff;z-index:3;opacity:.9}.today-line small{position:absolute;top:-20px;left:-28px;background:#eaf3ff;border:1px solid #c8ddff;color:#0d57ca;border-radius:8px;padding:2px 6px;font-size:10px}.gantt-line{display:grid;grid-template-columns:210px 1fr;gap:12px;align-items:center;margin:10px 0}.gantt-label strong{display:block;font-size:13px}.gantt-label small{color:#6b7890}.gantt-track{height:28px;border-radius:12px;background:linear-gradient(90deg,#fafbfd,#f4f7fb);position:relative;border:1px solid #e1e8f2;overflow:hidden}.gantt-track:before{content:'';position:absolute;inset:0;background-image:linear-gradient(to right,transparent calc(100%/12 - 1px), #e6edf7 calc(100%/12 - 1px), #e6edf7 calc(100%/12), transparent calc(100%/12));background-size:calc(100%/12) 100%;pointer-events:none}
.gantt-seg{position:absolute;top:7px;height:14px;border-radius:999px;box-shadow:0 3px 8px #14345b22;transition:all .8s ease}.gantt-seg.baseline{background:#5d9fff;opacity:.65}.gantt-seg.actual{background:#45bf5d;z-index:2}.gantt-seg.remaining{background:#9ac0ff;opacity:.95}.gantt-seg.delayed{background:#ff9c21;opacity:.95}.gantt-legend{margin-top:12px;color:#5f6e8a;font-size:12px;font-weight:700}.legend-box{display:inline-block;width:18px;height:10px;border-radius:99px;margin:0 7px 0 15px;vertical-align:middle}.legend-box.baseline{background:#5d9fff;opacity:.65}.legend-box.actual{background:#45bf5d}.legend-box.remaining{background:#9ac0ff}.legend-box.delayed{background:#ff9c21}

.gauge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.gauge-card{border:1px solid var(--border);border-radius:16px;padding:16px;background:linear-gradient(180deg,#ffffff,#fbfcff)}.gauge-card h4{margin:4px 0 0;font-size:14px}.gauge-header small{display:block;color:#5e6e8a;font-weight:700;letter-spacing:.4px}.gauge-meta{margin-top:12px;display:flex;justify-content:space-between}.gauge-meta small{display:block;color:#72809a}.gauge-meta strong{font-size:18px;color:#0f55ca}
.gauges,.radials,.status-rings,.status-summary{display:flex;justify-content:space-around;gap:12px;flex-wrap:wrap}.radial-item{text-align:center;min-width:100px}.radial-item h4{margin:0 0 10px}.radial-item small{display:block;margin-top:6px;color:#6f7e98}.radial{--p:70;width:110px;height:110px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#1269e8 calc(var(--p)*1%),#e4e9f1 0);position:relative;box-shadow:inset 0 0 0 1px #fff}.radial.small{width:92px;height:92px}.radial.green{background:conic-gradient(#35af5b calc(var(--p)*1%),#e4e9f1 0)}.radial.red{background:conic-gradient(#ef4c4c calc(var(--p)*1%),#e4e9f1 0)}.radial.warning{background:conic-gradient(#ff9c21 calc(var(--p)*1%),#e4e9f1 0)}.radial.gray{background:conic-gradient(#9aa6bf calc(var(--p)*1%),#e4e9f1 0)}.radial:before{content:"";position:absolute;inset:10px;border-radius:50%;background:#fff}.radial.small:before{inset:9px}.radial span{position:relative;font-size:21px;font-weight:800}.radial.small span{font-size:20px}
.status-bubble{text-align:center;min-width:120px}.status-bubble strong{display:block;margin-top:10px}.status-bubble small{display:block;color:#68778f;margin-top:4px}.progress-row{margin-top:16px;border-top:1px solid #ebeff6;padding-top:15px;display:grid;grid-template-columns:220px 1fr 90px;gap:14px;align-items:center}.progress-row small{display:block;color:#6f7c94}.progress-inline{height:12px;background:#ebeff6;border-radius:999px;overflow:hidden}.progress-inline span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#52d448,#1e8f43);transition:width 1s ease}

.facts{display:grid;gap:10px}.fact{display:flex;gap:10px;border:1px solid #e4e8ef;border-radius:12px;padding:11px;background:#fbfcff}.fact p{margin:4px 0;color:#66728a}.fact small{display:block;color:#7e8aa2}.alert-icon{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:bold;flex:0 0 31px}.alert-icon.critical{background:#ef4343}.alert-icon.warning{background:#ff9d23}.alert-icon.good{background:#35b75d}
.traffic>div{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px dotted #dce1e9}.traffic>div span{font-weight:600;color:#1d355f}.insights{padding-left:18px}.insights li{margin:12px 0}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.form-grid h3,.form-grid .full{grid-column:1/-1}.form-grid textarea{min-height:72px;width:100%}.form-grid input,.form-grid select{width:100%}
.primary,.outline,button{border:0;border-radius:10px;padding:11px 16px;background:#1269e8;color:#fff;font-weight:700}.outline{background:#fff;color:#175ec7;border:1px solid #7da7e8}.checklist{list-style:none;padding:0;line-height:2}
.report-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.report-card{background:#fff;border:1px solid #e2e7ef;border-radius:14px;padding:28px;text-decoration:none;color:#12305c;box-shadow:0 5px 18px #1839630d}.report-card b,.report-card span{display:block}.report-card b{font-size:18px}.report-card span{color:#68758c;margin-top:8px}
.alert{padding:12px;border-radius:9px;margin-bottom:12px}.alert.good{background:#e9f8ee;color:#19753a}
.login-body{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#064fc7,#002a77)}.login-card{width:380px;background:#fff;border-radius:18px;padding:32px;box-shadow:0 25px 70px #00184280}.login-card img{display:block;width:180px;margin:0 auto;background:#0b55ce;border-radius:12px;padding:10px}.login-card label{display:block;margin:13px 0}.login-card input{width:100%}.login-card button{width:100%;margin:10px 0}

.risk-layout{display:grid;grid-template-columns:1.2fr 2fr;gap:14px}.mini-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.mini-stats .mini-card{background:linear-gradient(180deg,#fff,#fbfcff)}.risk-timeline{display:grid;gap:10px}.risk-tile{border:1px solid #e4e8ef;border-radius:12px;padding:12px;background:#fbfcff}.risk-tile header{display:flex;justify-content:space-between;gap:10px;align-items:center}.risk-tile p{margin:8px 0;color:#66728a}.risk-meta{display:flex;gap:12px;flex-wrap:wrap;color:#72809a;font-size:12px}.risk-meta span{background:#f3f6fb;border-radius:999px;padding:4px 8px}.risk-note{color:#6f7c94;font-size:12px}

.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.subtle{color:#6a7892}.split-two{display:grid;grid-template-columns:1.1fr .9fr;gap:14px}.chipline{display:flex;gap:8px;flex-wrap:wrap}.chip{display:inline-flex;align-items:center;gap:6px;background:#f4f7fb;color:#234;border:1px solid #e2e7ef;border-radius:999px;padding:5px 9px;font-size:12px;font-weight:700}

@keyframes drawLine{from{stroke-dashoffset:1000}to{stroke-dashoffset:0}}
.chart path.line-anim{stroke-dasharray:1000;stroke-dashoffset:1000;animation:drawLine 1.6s ease forwards}
.chart circle{animation:pop .5s ease both;transform-origin:center}.chart circle:nth-of-type(odd){animation-delay:.2s}@keyframes pop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}

@media(max-width:1280px){.gauge-grid{grid-template-columns:1fr}.split-two,.risk-layout{grid-template-columns:1fr}.mini-stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:1100px){.sidebar{width:210px}.main{margin-left:210px;width:calc(100% - 210px)}.kpis,.kpis.six,.mini-stats{grid-template-columns:repeat(2,1fr)}.span-8,.span-7,.span-6,.span-5,.span-4,.span-3,.span-2,.span-9{grid-column:span 12}.topbar{flex-direction:column}.filters{flex-wrap:wrap}.gantt-top-scale{margin-left:0}.gantt-line{grid-template-columns:1fr}.progress-row{grid-template-columns:1fr}}
@media(max-width:700px){.sidebar{position:relative;width:100%;height:auto}.app{display:block}.main{margin:0;width:100%;padding:12px}.nav-item{display:inline-flex}.filters{display:grid;grid-template-columns:1fr 1fr}.form-grid{grid-template-columns:1fr}.report-grid{grid-template-columns:1fr}.kpis,.kpis.six,.mini-stats{grid-template-columns:1fr}.gantt-top-scale{display:none}}
@media print{.sidebar,.filters,.primary,.outline{display:none!important}.main{margin:0;width:100%;padding:0}.card{box-shadow:none;break-inside:avoid}}