*{box-sizing:border-box}body{margin:0;background:#f4f8f7;color:#071744;font-family:Inter,Segoe UI,Arial,sans-serif;font-size:13px}.app-shell{min-height:100vh}.sidebar{position:fixed;left:0;top:0;bottom:0;width:243px;background:linear-gradient(180deg,#063c2f,#002c24);color:#eaf4f0;padding:12px 10px;z-index:20;overflow:auto}.brand{height:62px;display:flex;align-items:center;gap:9px;color:#fff;text-decoration:none;padding:2px 8px 10px;border-bottom:1px solid rgba(255,255,255,.1)}.brand img{width:58px;height:58px;object-fit:contain}.brand small{display:block;font-size:10px;color:#c8d9d4}.brand strong{font-size:16px;line-height:1.05}.menu-caption{font-size:11px;color:#92aaa4;margin:18px 9px 8px}.sidebar nav a{height:41px;display:flex;align-items:center;gap:12px;padding:0 13px;color:#d9e9e5;text-decoration:none;border-radius:6px;margin:2px 0;font-size:13px}.sidebar nav a i{width:18px;font-size:16px}.sidebar nav a b{margin-left:auto;font-size:20px;font-weight:400}.sidebar nav a.active{background:#0b8955;color:#fff;box-shadow:0 5px 15px rgba(0,0,0,.14)}.sidebar-motto{position:absolute;bottom:24px;left:24px;font-family:cursive;font-size:14px;line-height:1.35;color:#e0eee9}.content{margin-left:243px;padding-top:73px}.topbar{position:fixed;left:243px;right:0;top:0;height:73px;background:#fff;border-bottom:1px solid #e4ebea;display:flex;align-items:center;z-index:15;padding:0 17px;gap:20px}.hamb{border:0;background:transparent;font-size:25px;color:#08205a}.global-search{height:37px;width:365px;background:#f7f9fa;border:1px solid #e4eaed;border-radius:7px;display:flex;align-items:center;gap:9px;padding:0 11px;color:#6e7c90}.global-search input{border:0;outline:0;background:transparent;width:100%;font-size:11px}.top-date{margin-left:auto;display:flex;align-items:center;gap:9px;color:#263454;font-size:11px}.top-date i{font-size:20px;color:#07194d}.top-date b{font-weight:400}.notif{font-size:21px;color:#07194d;position:relative}.notif em{position:absolute;right:-7px;top:-8px;background:#e01d2f;color:#fff;font-size:9px;font-style:normal;border-radius:12px;padding:3px 6px}.userbox{display:flex;align-items:center;gap:9px;border-left:1px solid #e8ecef;padding-left:16px}.userbox b,.userbox small{display:block}.userbox small{font-size:10px;color:#60708b}.user-avatar{width:37px;height:37px;border-radius:50%;background:radial-gradient(circle at 50% 34%,#e9e1cf 0 24%,transparent 25%),linear-gradient(#174337 0 55%,#e5dac7 56%)}.dashboard{padding:10px 15px 10px}.hero{height:202px;border:1px solid #dfeae6;border-radius:9px;overflow:hidden;position:relative;background:#eef7f4;display:flex;align-items:center}.hero-copy{position:relative;z-index:2;display:flex;align-items:center;gap:24px;padding-left:31px;width:62%}.hero-copy img{width:100px;height:100px;object-fit:contain}.hero-copy h1{font-size:36px;line-height:1;margin:0 0 7px;color:#06392e}.hero-copy h2{font-size:18px;font-weight:400;margin:0 0 4px;color:#103c32}.hero-copy p{font-size:13px;margin:0 0 14px;color:#3e665a}.hero-copy i{font-family:cursive;font-size:15px;color:#1a4239}.hero-building{position:absolute;right:0;top:0;bottom:0;width:58%;background:linear-gradient(90deg,#eef7f4 0%,rgba(238,247,244,.15) 20%,rgba(238,247,244,0) 40%),url('../img/gedung.jpg') center 52%/cover no-repeat}.kpi-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin:10px 0}.kpi{min-height:114px;background:#fff;border:1px solid #e0e9e8;border-radius:9px;padding:10px;display:flex;gap:9px;align-items:flex-start}.kpi-icon{width:40px;height:40px;border-radius:7px;display:grid;place-items:center;color:#fff;font-size:20px;flex:none}.kpi.green .kpi-icon{background:#1aa66f}.kpi.gold .kpi-icon{background:#f5ad17}.kpi.blue .kpi-icon{background:#2488eb}.kpi.red .kpi-icon{background:#fa5555}.kpi.purple .kpi-icon{background:#a83fd1}.kpi.teal .kpi-icon{background:#12a67d}.kpi label{font-size:10px;display:block;margin:1px 0 4px}.kpi strong{font-size:21px;display:inline-block;line-height:1.15;color:#071544}.kpi small{font-weight:700;margin-left:5px}.kpi .up{color:#0aa36c}.kpi .down{color:#e33232}.kpi p{font-size:9px;color:#64718a;margin:5px 0 0}.grid{display:grid;gap:10px;margin-bottom:10px}.grid-3{grid-template-columns:1.6fr 1.05fr .95fr}.grid-2{grid-template-columns:1.25fr 1fr}.panel{background:#fff;border:1px solid #e0e8e7;border-radius:9px;overflow:hidden;min-width:0}.panel-head{height:51px;display:flex;align-items:center;justify-content:space-between;padding:0 13px}.panel-head h3{font-size:14px;margin:0;font-weight:700}.panel-head h3 i{color:#12a46f;margin-right:7px}.panel-head button{border:1px solid #e1e7ea;background:#fff;border-radius:6px;color:#50607a;padding:6px 10px;font-size:10px}.chart{height:190px;padding:0 9px 7px}.chart.small{height:142px}.mix{height:200px;display:flex;align-items:center;justify-content:center;gap:10px}.donut{width:175px;height:175px;position:relative}.donut>div{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#65738b;font-size:10px}.donut strong{font-size:16px;color:#071544}.donut small{font-size:8px}.legend{width:130px}.legend p{display:flex;gap:7px;align-items:center;margin:10px 0;font-size:11px}.legend p b{margin-left:auto}.dot{width:13px;height:13px;border-radius:4px}.d0{background:#2f80ed}.d1{background:#ff5b5b}.d2{background:#f5b82e}.d3{background:#20a76d}.bed-row{display:grid;grid-template-columns:94px 1fr 52px 38px;align-items:center;gap:7px;margin:11px 13px;font-size:10px}.bed-row>span{white-space:nowrap}.bed-row i{font-size:16px;margin-right:6px}.bar{height:9px;background:#e1e7eb;border-radius:6px;overflow:hidden}.bar b{display:block;height:100%;background:#25b98a;border-radius:6px}.bed-row small{text-align:right}.bed-row>strong{text-align:right;color:#079e68}.diag{height:35px;border-top:1px solid #edf0f1;display:grid;grid-template-columns:28px 1fr 28px;align-items:center;margin:0 12px;font-size:11px}.diag span{width:23px;height:23px;border-radius:50%;background:#eef1f3;display:grid;place-items:center;font-weight:700}.diag b{text-align:right}.danger-title{color:#081746}.danger-title i{color:#e62e2e!important}.alert-row{display:grid;grid-template-columns:21px 1fr 58px;align-items:center;gap:5px;border-top:1px solid #edf0f1;padding:7px 12px;font-size:10px}.alert-row small{text-align:right;color:#8793a7}.alert-row .danger{color:#e63a3a}.alert-row .warning{color:#f09c17}.quality{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:0 11px 11px}.quality>div{min-height:105px;border:1px solid #e7ebee;border-radius:6px;padding:9px;position:relative;font-size:10px}.quality strong{display:block;font-size:24px;margin-top:7px}.quality i{position:absolute;right:9px;top:59px;color:#10ad70;font-size:18px}.quality small{display:block;color:#738096;margin-top:4px}.module-page{padding:18px 22px 30px}.module-hero{background:linear-gradient(135deg,#087f5b,#0a604f);color:#fff;border-radius:13px;padding:20px;display:flex;align-items:center;justify-content:space-between}.module-hero span{font-size:10px;opacity:.75}.module-hero h2{margin:4px 0;font-size:27px}.module-hero p{margin:0;opacity:.82}.module-badge{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);border-radius:8px;padding:9px 12px;font-size:11px}.module-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}.module-kpi{background:#fff;border:1px solid #e0e8e7;border-radius:10px;padding:17px}.module-kpi small,.module-kpi span{display:block;color:#728096}.module-kpi strong{display:block;font-size:27px;color:#071544;margin:8px 0}.module-card{background:#fff;border:1px solid #e0e8e7;border-radius:10px;margin-top:14px;padding:20px}.placeholder-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.placeholder-grid div{border:1px dashed #b9c9c5;border-radius:8px;padding:22px;text-align:center;color:#5b7180}.flow{background:#eef7f3;border:1px solid #d8ebe3;border-radius:8px;padding:18px;text-align:center;font-weight:700;color:#075d47}.footer{min-height:48px;border-top:1px solid #e1e7e6;margin:0 15px;padding:0 10px;display:flex;align-items:center;justify-content:space-between;color:#65738b;font-size:10px}.footer b{color:#159c6c}.footer strong{font-family:cursive;color:#19493e;font-size:11px}@media(max-width:1200px){.kpi-grid{grid-template-columns:repeat(3,1fr)}.grid-3,.grid-2{grid-template-columns:1fr}.hero-copy{width:70%}.module-kpis{grid-template-columns:1fr 1fr}}@media(max-width:800px){.sidebar{transform:translateX(-100%);transition:.2s}.sidebar.show{transform:translateX(0)}.content{margin-left:0}.topbar{left:0}.global-search,.top-date,.userbox{display:none}.dashboard{padding:10px}.hero{height:220px}.hero-building{width:100%;opacity:.35}.hero-copy{width:100%;padding:18px}.hero-copy h1{font-size:28px}.kpi-grid{grid-template-columns:1fr 1fr}.module-kpis{grid-template-columns:1fr}.placeholder-grid{grid-template-columns:1fr 1fr}.footer{display:none}}@media(max-width:480px){.kpi-grid{grid-template-columns:1fr}.quality{grid-template-columns:1fr 1fr}.hero-copy img{width:70px;height:70px}.hero-copy h2{font-size:15px}}