@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');
:root{--ink:#1c2925;--muted:#71807a;--line:#e4e9e6;--bg:#f4f7f5;--green:#205f50;--green2:#347c69;--soft:#edf5f1;--red:#b84747;--orange:#d98735;--yellow:#dfb934;--purple:#715aa6;--shadow:0 1px 2px #15382a0a}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:"DM Sans",sans-serif;font-size:14px}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #70b29e66;outline-offset:2px}.app{display:flex;min-height:100vh}
aside{width:240px;background:#fbfdfc;border-right:1px solid var(--line);position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column;z-index:30}.sideHead{height:76px;padding:0 19px;display:flex;align-items:center;border-bottom:1px solid var(--line)}.sideHead>button{display:none}.logo{display:flex;align-items:center;gap:10px}.logoMark{width:38px;height:38px;border-radius:11px;background:var(--green);color:white;display:grid;place-items:center}.logo b{font:800 17px Manrope;letter-spacing:.4px}.logo span{display:block;font-size:8px;letter-spacing:1.15px;color:#708079;margin-top:1px}.period{padding:14px 15px 8px}.period>span{font-size:9px;font-weight:700;color:#91a09a;letter-spacing:1.2px}.period button{height:38px;width:100%;border:1px solid var(--line);background:white;border-radius:8px;display:flex;align-items:center;gap:8px;padding:0 10px;color:#52635c}.period button b{flex:1;text-align:left;color:var(--ink)}
nav{padding:0 10px;overflow-y:auto;flex:1}nav section{margin-top:12px}nav label{display:block;padding:0 10px 6px;font-size:9px;font-weight:700;color:#9aa6a2;letter-spacing:1.1px}nav button{border:0;background:transparent;width:100%;height:35px;padding:0 10px;border-radius:7px;display:flex;align-items:center;gap:10px;color:#60716a;font-size:12.5px;text-align:left;margin:1px 0}nav button span{flex:1}nav button:hover{background:#f0f5f2}nav button.active{background:#e6f0eb;color:var(--green);font-weight:700}nav button em{font-style:normal;font-size:9px;font-weight:700;color:white;background:#bf4d4d;border-radius:10px;min-width:18px;padding:2px 5px;text-align:center}.support{margin:8px 12px;padding:10px;border:1px solid var(--line);background:#f6f9f7;border-radius:9px;display:flex;align-items:center;gap:9px;color:#71817b}.support div{flex:1}.support b,.support span{display:block;font-size:11px}.support span{font-size:9px;color:#98a39f;margin-top:1px}.user{padding:12px 14px;border-top:1px solid var(--line);display:flex;align-items:center;gap:9px}.avatar{height:34px;width:34px;border-radius:50%;background:#d7e7e0;color:var(--green);display:grid;place-items:center;font-size:11px;font-weight:800}.user div:nth-child(2){flex:1;min-width:0}.user b,.user span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user b{font-size:11px}.user span{font-size:9px;color:#8a9792;margin-top:2px}
main{margin-left:240px;width:calc(100% - 240px);min-width:0}header{height:64px;background:#fbfdfc;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 30px;gap:12px;position:sticky;top:0;z-index:20}.search{width:min(420px,42vw);height:37px;background:#f3f6f4;border:1px solid #e6ebe8;border-radius:8px;display:flex;align-items:center;padding:0 11px;gap:8px;color:#7c8984}.search input{border:0;background:transparent;outline:0;flex:1;min-width:0;font-size:12px}.search kbd{font:10px "DM Sans";border:1px solid #d9e0dc;background:white;border-radius:4px;padding:2px 5px}.iconBtn{width:36px;height:36px;border:0;background:transparent;border-radius:8px;color:#64736e;display:grid;place-items:center}.iconBtn:hover{background:#f0f4f2}.bell{position:relative}.bell i{position:absolute;width:7px;height:7px;background:#c64d4d;border:2px solid white;border-radius:50%;right:8px;top:7px}.profile{border-left:1px solid var(--line);padding-left:14px;margin-left:2px;display:flex;align-items:center;gap:8px}.profile div:nth-child(2){min-width:88px}.profile b,.profile span{display:block}.profile b{font-size:11px}.profile span{font-size:9px;color:#88958f;margin-top:2px}.menu,.mobileLogo{display:none}
.content{padding:25px 30px 38px;max-width:1600px;margin:auto}.welcome{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:19px}.crumb{display:flex;align-items:center;gap:4px;color:#8b9893;font-size:10px;margin-bottom:8px}.welcome h1{font:700 23px Manrope;margin:0 0 4px}.welcome p{margin:0;color:#71817b;font-size:12px}.actions{display:flex;gap:8px}.actions button,.panelHead button,.riskHead>div:last-child button{height:35px;padding:0 13px;border:1px solid #dbe2de;background:white;border-radius:7px;color:#53635d;display:flex;align-items:center;gap:7px;font-size:11px;font-weight:600}.primary{background:var(--green)!important;color:white!important;border-color:var(--green)!important}.attention{border:1px solid #f0d8b6;background:#fffaf1;border-radius:9px;padding:10px 13px;display:flex;align-items:center;gap:10px;margin-bottom:17px}.attentionIcon{width:34px;height:34px;border-radius:8px;background:#f8ead3;color:#c47727;display:grid;place-items:center}.attention div:nth-child(2){flex:1}.attention b,.attention span{display:block}.attention b{font-size:12px}.attention span{font-size:10px;color:#8a7760;margin-top:2px}.attention button{border:0;background:transparent;color:#9c642c;font-size:10px;font-weight:700;display:flex;align-items:center;gap:4px}
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:14px}.statCard{background:white;border:1px solid var(--line);border-radius:10px;padding:14px 14px 12px;position:relative;box-shadow:var(--shadow)}.statIcon{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;margin-bottom:14px}.statIcon.blue{color:#397698;background:#e8f2f7}.statIcon.red{color:#b84a4a;background:#faebeb}.statIcon.orange{color:#c2752c;background:#fbefe2}.statIcon.purple{color:#6d58a0;background:#f0ecf7}.statIcon.green{color:#2d7663;background:#e7f3ed}.statTop{position:absolute;top:15px;left:60px;right:12px;display:flex;align-items:center;justify-content:space-between;color:#7b8984;font-size:10px}.statCard strong{font:700 25px Manrope;display:block}.statCard small{font-size:9px;color:#8a9892}.grid{display:grid;gap:14px;margin-bottom:14px}.grid.two{grid-template-columns:1.02fr .98fr}.grid.lower{grid-template-columns:1.12fr .88fr}.panel{background:white;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);min-width:0}.panelHead{display:flex;align-items:flex-start;justify-content:space-between;padding:16px 17px 12px}.panelHead h2{font:700 14px Manrope;margin:0 0 3px}.panelHead p{margin:0;color:#899690;font-size:9.5px}.panelHead button{height:auto;padding:3px;border:0;color:var(--green);font-size:9.5px}.panelHead select{border:1px solid var(--line);border-radius:6px;background:white;padding:6px 8px;color:#65736e;font-size:10px}
.heatWrap{position:relative;margin:3px 35px 31px 51px}.heat{height:190px;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(5,1fr);gap:4px}.heatCell{border-radius:4px;display:grid;place-items:center;color:#34433e}.heatCell span{display:grid;place-items:center;background:#ffffffd9;border-radius:50%;width:24px;height:24px;font-size:9px;font-weight:800;box-shadow:0 2px 5px #203b3033}.heatCell span.big{width:30px;height:30px}.yLabel,.xLabel{position:absolute;font-size:7px;letter-spacing:1px;font-weight:700;color:#89958f}.yLabel{writing-mode:vertical-rl;transform:rotate(180deg);left:-40px;top:50%;translate:0 -50%}.xLabel{left:50%;bottom:-23px;translate:-50% 0}.heatNums{position:absolute;display:flex;color:#73817c;font-size:8px}.heatNums.y{flex-direction:column;justify-content:space-around;top:0;bottom:0;left:-16px}.heatNums.x{left:0;right:0;bottom:-14px;justify-content:space-around}.legend{border-top:1px solid var(--line);padding:10px 18px;display:flex;justify-content:center;gap:17px;font-size:8px;color:#72817b}.legend span{display:flex;align-items:center;gap:4px}.legend b{color:#33423d}.l,.dot{width:7px;height:7px;border-radius:2px;display:inline-block}.l.low,.dot.low{background:#71bfa4}.l.medium,.dot.medium{background:#f0ce5d}.l.high,.dot.high{background:#e99b45}.l.critical,.dot.critical{background:#c94b4b}
.trendMetric{display:flex;align-items:center;gap:9px;padding:5px 18px 0}.trendMetric strong{font:700 25px Manrope}.trendMetric span{display:flex;align-items:center;color:#2f8069;background:#e7f4ee;padding:3px 6px;border-radius:8px;font-size:9px;font-weight:700}.trendMetric small{color:#8b9892;font-size:9px}.trendBox{padding:4px 18px 0}.trendBox svg{width:100%;height:148px;overflow:visible}.months{display:grid;grid-template-columns:repeat(12,1fr);font-size:7px;color:#8a9792;text-align:center;margin-top:-5px}.trendLegend{border-top:1px solid var(--line);padding:11px 18px;display:flex;align-items:center;justify-content:space-between;font-size:8px;color:#788681}.trendLegend span{display:flex;align-items:center;gap:5px}.trendLegend i{width:13px;height:3px;background:var(--green2);border-radius:3px}.trendLegend b{color:#5a6a64}
.opdPanel,.taskPanel{padding-bottom:7px}.opdRow{display:flex;align-items:center;padding:8px 17px;border-top:1px solid #f0f3f1;gap:9px}.rank{width:12px;color:#9ba6a2;font-size:9px}.opdAvatar{width:29px;height:29px;border-radius:7px;background:#e8f1ed;color:var(--green);display:grid;place-items:center;font-size:8px;font-weight:800}.opdName{width:125px}.opdName b,.opdName span{display:block}.opdName b{font-size:10px}.opdName span{font-size:8px;color:#91a09a}.bar{height:5px;background:#eef2f0;border-radius:4px;flex:1;overflow:hidden}.bar i{height:100%;display:block;background:#6ca691;border-radius:4px}.counts{display:flex;gap:8px;width:52px;justify-content:flex-end}.counts span{display:flex;align-items:center;gap:3px;font-size:8px;font-weight:700}.dot{width:5px;height:5px;border-radius:50%}.taskRow{display:flex;padding:9px 16px;border-top:1px solid #f0f3f1;gap:9px;align-items:flex-start}.taskCheck{width:29px;height:29px;border-radius:7px;background:#edf3f0;color:#537b6d;display:grid;place-items:center}.taskCheck.late{background:#f9eaea;color:#b94848}.taskCheck.soon{background:#fcf0df;color:#c77b2f}.taskInfo{flex:1;min-width:0}.taskInfo b,.taskInfo span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.taskInfo b{font-size:9.5px}.taskInfo span{font-size:8px;color:#8c9994;margin-top:1px}.progress{height:3px;background:#edf1ef;border-radius:4px;margin-top:6px}.progress i{display:block;height:100%;background:#4c927d;border-radius:4px}.due{text-align:right}.due b,.due span{display:block}.due b{font-size:9px}.due span{font-size:7.5px;color:#8b9892;margin-top:3px}.due.late span{color:#b94848}.due.soon span{color:#b5712e}
.risksPanel{overflow:hidden}.riskHead{align-items:center}.riskHead>div:last-child{display:flex;gap:7px}.riskHead>div:last-child button{height:31px;font-size:9px}.tableWrap{overflow:auto}table{width:100%;border-collapse:collapse;min-width:950px}th{text-align:left;background:#f7f9f8;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:9px 13px;font-size:7.5px;color:#87948f;letter-spacing:.5px}td{padding:11px 13px;border-bottom:1px solid #edf1ef;vertical-align:middle}td>b,td>small,td>.code{display:block}td>b{font-size:9.5px;margin:2px 0}td>small{font-size:7.5px;color:#8b9892}.code{color:#497e6e;font-size:7.5px;font-weight:700}.level{display:inline-flex;align-items:center;padding:4px 7px;border-radius:10px;font-size:7.5px;font-weight:700;white-space:nowrap}.level i{width:5px;height:5px;border-radius:50%;background:currentColor;margin-right:3px}.level.critical{color:#a93e3e;background:#faeaea}.level.high{color:#b56820;background:#fbefdf}.level.medium{color:#9c7b16;background:#fbf5d9}.level.low{color:#2f7a63;background:#e7f4ee}.mit{display:flex;align-items:center;gap:6px}.mit>span{width:52px;height:4px;background:#e9eeeb;border-radius:4px}.mit>span i{height:100%;display:block;background:#4f927f;border-radius:4px}.mit b{font-size:8px}.status{display:inline-block;color:#5c7068;background:#edf2ef;border:1px solid #e0e7e3;border-radius:10px;padding:4px 7px;font-size:7.5px;white-space:nowrap}.dots{border:0;background:transparent;color:#88958f}.tableFoot{padding:11px 14px;display:flex;justify-content:space-between;align-items:center;color:#84928c;font-size:8px}.tableFoot>div{display:flex;align-items:center;gap:3px}.tableFoot button{width:25px;height:25px;border:1px solid var(--line);background:white;border-radius:5px;color:#65746e;font-size:8px;display:grid;place-items:center}.tableFoot button.page{background:var(--green);color:white;border-color:var(--green)}
footer{border-top:1px solid var(--line);background:#fafcfb;padding:14px 30px;color:#8a9792;font-size:8px;display:flex;justify-content:space-between}footer span{display:flex;align-items:center;gap:5px}.toast{position:fixed;right:24px;bottom:24px;background:#173e34;color:white;padding:11px 15px;border-radius:8px;box-shadow:0 12px 30px #102b2366;z-index:100;display:flex;align-items:center;gap:8px;font-size:11px;animation:up .25s ease}@keyframes up{from{transform:translateY(10px);opacity:0}}
.backdrop{display:none}
@media(max-width:1100px){.stats{grid-template-columns:repeat(3,1fr)}.grid.lower{grid-template-columns:1fr}.grid.two{grid-template-columns:1fr}.profile div:nth-child(2){display:none}.content{padding:22px}.heat{height:230px}}
@media(max-width:760px){aside{transform:translateX(-100%);transition:.25s;box-shadow:10px 0 30px #17382d22}aside.open{transform:none}.sideHead>button{display:grid;margin-left:auto;border:0;background:transparent}.backdrop{display:block;position:fixed;inset:0;background:#132b2566;z-index:25}main{margin:0;width:100%}header{padding:0 14px;height:58px}.menu{display:grid;border:0;background:transparent}.mobileLogo{display:block}.mobileLogo .logoMark{width:31px;height:31px}.mobileLogo .logoMark svg{width:19px}.mobileLogo .logo>div:last-child,.profile,.iconBtn:first-of-type{display:none}.search{margin-left:auto;width:38px;background:transparent;border:0;padding:0}.search input,.search kbd{display:none}.content{padding:18px 14px}.welcome{align-items:flex-start;gap:15px}.welcome h1{font-size:19px}.welcome p{font-size:10px}.actions button:first-child{display:none}.actions button{font-size:0;padding:0;width:36px;justify-content:center}.attention{align-items:flex-start}.attention button{display:none}.stats{display:flex;overflow:auto;margin-right:-14px;padding-right:14px}.statCard{min-width:150px}.grid.two,.grid.lower{grid-template-columns:1fr}.heatWrap{margin-left:45px}.heat{height:175px}.legend{flex-wrap:wrap}.opdName{width:108px}.bar{display:none}.riskHead{align-items:flex-start}.riskHead>div:last-child button:first-child{display:none}.panelHead{padding:14px}.panelHead>button{white-space:nowrap}.tableFoot>span{display:none}footer{padding:14px;display:block;text-align:center}footer span{justify-content:center;margin:4px}.trendBox svg{height:120px}}
@media(max-width:420px){.attention span{line-height:1.35}.stats{gap:8px}.opdRow{padding:8px 12px}.counts{margin-left:auto}.taskRow{padding:9px 12px}.panelHead p{max-width:210px}.legend{gap:9px}.heatWrap{margin-right:17px}.welcome .actions{display:none}}