*{box-sizing:border-box}html{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#101d46;background:#f2f5fb}body{margin:0}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid #84b8ff;outline-offset:2px}.shell{max-width:1240px;margin:auto;display:grid;grid-template-columns:230px minmax(0,1fr);gap:20px;padding:20px}.side{background:#0d1c47;color:#f8fbff;padding:25px 15px;border-radius:25px;min-height:calc(100vh - 40px);position:sticky;top:20px;height:fit-content}.brand{font-size:30px;font-weight:900;letter-spacing:-1.5px}.brand-sub{font-size:12px;color:#aabbe1;margin:3px 0 30px}.nav{display:block;width:100%;text-align:left;background:transparent;color:#c3cfeb;border:0;border-radius:12px;padding:13px;margin:5px 0}.nav.active{background:#2773eb;color:white;font-weight:700}.side-foot{font-size:12px;color:#9dadd0;line-height:1.7;margin-top:35px}.workspace{min-width:0}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:17px}.toolbar .brand-sm{font-weight:850;font-size:15px}.online{color:#14895b;font-size:12px}.muted{color:#7583a3}.topactions{display:flex;gap:8px;align-items:center}.tag{border-radius:12px;padding:6px 10px;font-size:11px;background:#edf3ff;color:#335ba8;font-weight:700}.tag.demo{background:#fff3d8;color:#925500}.card{background:white;border:1px solid #e3eaf6;border-radius:20px;box-shadow:0 6px 22px rgba(24,50,98,.035)}.hero{padding:24px;margin-bottom:17px;background:linear-gradient(110deg,#ffffff,#f7faff)}.greet{font-size:27px;letter-spacing:-.7px;margin:5px 0}.sub{font-size:14px;color:#65769b;line-height:1.6}.selectors{display:flex;gap:10px;flex-wrap:wrap;margin-top:17px}.selector{background:#f1f5fc;border:1px solid #dce6f5;border-radius:11px;padding:10px 12px;color:#253763}.selector.selected{background:#165fe7;color:white;border-color:#165fe7}.section-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:23px 0 11px}.section-head h2{margin:0;font-size:18px}.section-head small{color:#7c8ba9}.kpi-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.metric{padding:17px;border:1px solid #e2eaf6;border-radius:18px;background:#fff;min-height:160px;text-align:left;display:flex;flex-direction:column;gap:8px;box-shadow:0 5px 16px #12255308;position:relative}.metric:hover{border-color:#83b6ff;transform:translateY(-1px)}.metric.top{grid-column:span 2;background:linear-gradient(110deg,#fff,#edf5ff)}.metric .label{font-weight:700;font-size:13px;line-height:1.4;min-height:36px}.metric .value{font-size:30px;letter-spacing:-1px;font-weight:850}.metric .foot{font-size:12px;color:#7b8ba6}.pill{border-radius:10px;padding:4px 7px;font-weight:750;font-size:11px}.p1{background:#e5f4ed;color:#167850}.p2{background:#fff3d8;color:#9e6308}.p3{background:#eef1f7;color:#68788f}.dash-row{display:grid;grid-template-columns:1.12fr .88fr;gap:14px}.section-panel{padding:17px}.section-panel h3{margin:0 0 10px;font-size:16px}.notice{padding:11px 0;border-bottom:1px solid #eaf0f8;display:flex;gap:10px;font-size:13px;line-height:1.5}.notice:last-child{border:0}.dot{width:9px;height:9px;border-radius:50%;background:#e57a34;flex-shrink:0;margin-top:5px}.dot.red{background:#e34a57}.dot.blue{background:#2975e4}.action{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid #eaf0f8;gap:10px;font-size:13px}.action:last-child{border:0}.action em{font-style:normal;color:#7286a7}.catalog{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.catalog-item{display:flex;align-items:center;justify-content:space-between;gap:10px;background:white;border:1px solid #e2eaf6;text-align:left;border-radius:13px;padding:13px;color:#162653}.catalog-item:hover{border-color:#80b2ff}.catalog-item small{color:#7080a3;font-size:10px;display:block;margin-top:3px}.filter{width:100%;padding:12px;border:1px solid #cbd9ee;border-radius:12px;margin:10px 0 13px}.empty{padding:30px;color:#65769b;text-align:center}.modal-back{position:fixed;inset:0;background:#0b1c42aa;display:flex;align-items:center;justify-content:center;padding:16px;z-index:10}.modal{background:white;border-radius:23px;padding:24px;width:min(560px,100%);max-height:88vh;overflow:auto;box-shadow:0 20px 70px #081a4380}.modal h2{margin:6px 0 12px;font-size:22px}.modal .close{float:right;border:0;background:#eef3fb;border-radius:11px;padding:7px 12px}.detail{border-top:1px solid #e7edf7;padding:13px 0;font-size:13px;line-height:1.6}.detail strong{display:block;margin-bottom:3px}.note{font-size:12px;background:#fff7e9;border:1px solid #ffebc3;border-radius:11px;padding:10px;color:#825b20}.bottom{display:none}.footer{padding:19px 2px;color:#8694ad;font-size:11px}.head-flex{display:flex;align-items:center;justify-content:space-between}.count{color:#8291a9;font-size:12px}@media(max-width:850px){.shell{display:block;padding:0}.side{display:none}.workspace{padding:15px 14px 90px;max-width:700px;margin:auto}.bottom{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;bottom:0;left:0;right:0;padding:9px 5px max(10px,env(safe-area-inset-bottom));background:#fff;border-top:1px solid #e3e9f3;z-index:5}.bottom button{border:0;background:none;color:#7785a2;font-size:10px;display:flex;flex-direction:column;gap:5px;align-items:center}.bottom button.active{color:#1265e9;font-weight:750}.bottom b{font-size:18px}.metric.top{grid-column:span 2}.dash-row{grid-template-columns:1fr}.greet{font-size:24px}.toolbar{margin:0 0 15px}.hero{padding:18px}.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.metric .value{font-size:24px}.metric{min-height:148px}.catalog{grid-template-columns:1fr}}@media(max-width:410px){.metric .value{font-size:23px}.selectors{gap:5px}.selector{padding:9px;font-size:12px}.metric{padding:13px}.metric .label{font-size:12px}.tag{font-size:10px}}
/* Step 3: alert center and guided KPI drilldown */
.alert-item{display:flex;align-items:flex-start;gap:12px;border:1px solid #e4eaf5;background:#fff;padding:14px;border-radius:13px;margin-bottom:10px;width:100%;text-align:left;color:#182a50}.alert-item:hover{border-color:#9abaf1}.alert-sign{min-width:25px;height:25px;display:grid;place-items:center;border-radius:50%;font-size:13px;font-weight:800;background:#fff0e3;color:#a4511b}.severity-critical .alert-sign{background:#ffe9eb;color:#bd2738}.severity-info .alert-sign{background:#e8f1ff;color:#235dc2}.alert-content{display:flex;flex-direction:column;gap:5px;flex:1}.alert-content strong{font-size:13px}.alert-content small{font-size:12px;color:#6e7b98;line-height:1.45}.alert-content .demo-small{font-size:10px;color:#a06a28}.view-alerts{width:100%;background:#edf3ff;color:#165cd4;border:0;border-radius:11px;padding:12px;font-weight:750}.drill-row{display:grid;grid-template-columns:140px 1fr 38px;align-items:center;gap:10px;margin:12px 0;font-size:12px}.drill-row b{text-align:right}.drill-track{height:9px;border-radius:9px;background:#edf2fa;overflow:hidden}.drill-track i{height:100%;display:block;border-radius:9px;background:#3f79d9}.spark{height:116px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:7px 0}.spark-col{display:flex;align-items:center;justify-content:end;flex-direction:column;gap:7px}.spark-col i{background:#7aa6ed;border-radius:7px 7px 0 0;width:min(42px,70%)}.spark-col small{font-size:10px;color:#7584a2}.modal .detail p{margin:5px 0 9px;line-height:1.5}.bottom{grid-template-columns:repeat(6,1fr)}@media(max-width:410px){.drill-row{grid-template-columns:95px 1fr 32px;gap:6px}}

/* Step 3.1: two compact dropdowns, no duplicate mode tabs */
.mode-picker{display:grid;grid-template-columns:minmax(150px,0.65fr) minmax(240px,1.35fr);gap:12px;margin-top:18px}.picker-item{display:flex;flex-direction:column;gap:7px;min-width:0}.picker-item>span{font-size:12px;font-weight:700;color:#53658d}.picker-item select{appearance:auto;width:100%;min-width:0;padding:12px 9px;border:1px solid #cbdaf1;border-radius:12px;color:#153b79;background:#f0f5ff;font-size:14px;font-weight:700;cursor:pointer}.picker-item select:focus-visible{outline:3px solid #84b8ff;outline-offset:2px}.bottom{grid-template-columns:repeat(3,1fr)}@media(max-width:530px){.mode-picker{grid-template-columns:1fr;gap:12px}.picker-item select{font-size:13px}}

/* v1.2 — Role and operating mode always share one row, including mobile. */
.mode-picker{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:10px;width:100%;align-items:end}
.picker-item{min-width:0;overflow:hidden}
.picker-item select{display:block;width:100%;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:530px){
  .mode-picker{grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:8px}
  .picker-item>span{font-size:11px}
  .picker-item select{font-size:12px;padding:10px 5px;border-radius:10px}
}
@media(max-width:350px){.picker-item>span{font-size:10px}.picker-item select{font-size:11px;padding:9px 3px}}

/* Bước 3 v1.3 — Alert center built on ONOS mockup language */
.alert-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:14px 0}.alert-summary>div{background:#f3f7ff;border:1px solid #e2eafa;border-radius:13px;padding:13px;text-align:center}.alert-summary strong{font-size:23px;display:block;color:#0e2253}.alert-summary small{font-size:11px;color:#617395}.alert-filters{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0 17px}.alert-filters button{background:#f1f5fc;border:1px solid #dfe8f6;border-radius:18px;padding:8px 11px;font-size:12px;color:#344c76}.alert-filters button.selected{background:#165fe7;color:white;border-color:#165fe7}.alert-item{transition:border-color .15s}.alert-critical{background:#ffebee;color:#bc2435}.alert-warning{background:#fff0de;color:#9b5d0a}.alert-actions{display:flex;gap:9px;flex-wrap:wrap;margin:12px 0 16px}.primary-action,.secondary-action{border:0;border-radius:12px;padding:12px 15px;font-weight:700}.primary-action{background:#165fe7;color:white}.secondary-action{background:#eaf2ff;color:#165bd0}.modal textarea{width:100%;border:1px solid #cbd9ee;border-radius:11px;padding:12px;font:inherit;resize:vertical}.modal .detail select{margin:9px 0}.modal .detail small{color:#7584a2} @media(max-width:450px){.alert-summary strong{font-size:19px}.alert-summary small{font-size:10px}.alert-summary>div{padding:9px 5px}}