@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root{--navy:#062b5c;--navy2:#0b3b78;--blue:#0b4ea2;--bright:#2563eb;--bg:#f4f8fd;--line:#e1eaf5;--muted:#64748b;--ink:#10284b;--green:#16a36a}
*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,sans-serif;background:var(--bg);color:var(--ink);font-size:13px}a{color:inherit;text-decoration:none}button,input{font:inherit}.shell{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:248px;background:linear-gradient(180deg,#082f64,#041f43);color:#fff;padding:16px 12px;overflow:auto;z-index:20;display:flex;flex-direction:column}.brand{display:flex;align-items:center;gap:10px;padding:0 8px 22px;border-bottom:1px solid #24466e}.brand-mark{width:48px;height:48px;border-radius:50%;background:#fff;color:#0b4ea2;display:grid;place-items:center;font-size:23px;font-weight:800;border:3px solid #2d75d6}.brand strong{display:block;font-size:15px;letter-spacing:.2px}.brand small{display:block;color:#b8d8ff;margin-top:5px;font-size:11px}.nav{padding-top:14px;flex:1}.nav-label{font-size:11px;color:#9db9dc;margin:18px 9px 8px;text-transform:uppercase;letter-spacing:.5px}.nav-link{display:flex;align-items:center;gap:11px;padding:10px 11px;border-radius:8px;margin:2px 0;color:#e4efff;font-size:12px;transition:.2s}.nav-link:hover,.nav-link.active{background:#1264c5;color:white}.nav-link .ico{width:18px;text-align:center;font-size:15px}.nav-link .arrow{margin-left:auto;color:#a9c8ef}.side-footer{border-top:1px solid #24466e;padding:14px 8px 2px;color:#b9d3f4;font-size:10px;line-height:1.8}.main{margin-left:248px;min-width:0}.topbar{height:62px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:20px;padding:0 24px;position:sticky;top:0;z-index:10}.search{height:38px;max-width:590px;flex:1;background:#eff6ff;border:1px solid #e2edfb;border-radius:9px;display:flex;align-items:center;padding:0 13px;gap:9px;color:#6b8ab3}.search input{border:0;background:transparent;outline:0;width:100%;color:var(--ink)}.top-actions{margin-left:auto;display:flex;align-items:center;gap:17px}.top-icon{font-size:18px;color:#184c8c;position:relative}.badge{position:absolute;top:-7px;right:-8px;border-radius:50%;background:#ef3340;color:white;font-size:9px;min-width:16px;height:16px;display:grid;place-items:center}.profile{display:flex;align-items:center;gap:9px}.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#dcecff;color:#0b4ea2;font-weight:800}.profile strong{display:block;font-size:11px}.profile small{display:block;color:var(--muted);font-size:10px;margin-top:3px}.content{padding:14px 16px 18px;max-width:1800px;margin:auto}.hero{min-height:145px;border-radius:10px;overflow:hidden;background:linear-gradient(105deg,#e4f1ff 0%,#c9e1ff 42%,#1760b7 72%,#052d66 100%);display:flex;align-items:center;position:relative;margin-bottom:12px;padding:22px 26px;color:#092e64}.hero:after{content:'🏫';position:absolute;right:19%;font-size:95px;opacity:.18;filter:grayscale(1)}.hero .hero-copy{position:relative;z-index:1;max-width:60%}.pill{display:inline-block;background:#1264c5;color:white;border-radius:20px;padding:5px 11px;font-size:10px;font-weight:700;margin-bottom:9px}.hero h1{font-size:24px;line-height:1.2;margin:0 0 7px;font-weight:800}.hero p{margin:0;color:#1b477d;font-size:12px}.hero-quote{position:absolute;right:22px;top:28px;color:#fff;text-align:right;font-style:italic;font-weight:600;max-width:190px;z-index:1;line-height:1.5}.hero-quote small{display:block;font-style:normal;font-weight:400;margin-top:7px}.stats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-bottom:12px}.stat,.panel,.app-group{background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 2px 8px rgba(19,67,122,.035)}.stat{padding:13px 12px;display:flex;align-items:center;gap:10px;min-width:0}.stat-icon{width:42px;height:42px;border-radius:50%;background:var(--tint,#e5f0ff);color:var(--accent,#1768ca);display:grid;place-items:center;font-size:19px;flex-shrink:0}.stat-label{font-size:10px;color:#5e7595;white-space:nowrap}.stat-value{font-size:20px;font-weight:800;margin:4px 0;color:#092e64}.trend{font-size:10px;color:#0c9b67}.small-muted{font-size:9px;color:#7890ad;margin-top:3px}.grid-main{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(270px,1.05fr) minmax(260px,1fr);gap:10px;margin-bottom:10px}.panel{padding:13px;min-width:0}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.panel-head h2{font-size:12px;margin:0;font-weight:800;color:#10386f}.panel-head a{font-size:10px;color:#1768c8;white-space:nowrap}.chart-legend{display:flex;gap:12px;color:#5b7596;font-size:9px;margin-bottom:6px}.dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:4px}.chart{width:100%;height:175px;display:block}.chart text{font-family:Inter,sans-serif;fill:#6882a3;font-size:9px}.service-list{display:flex;flex-direction:column;gap:0}.service{display:grid;grid-template-columns:1.4fr .7fr .7fr .6fr;gap:5px;padding:7px 0;border-bottom:1px solid #edf2f8;font-size:9px;align-items:center}.service.header{color:#6882a3;font-weight:700}.online{color:#149b69}.online:before{content:'●';margin-right:5px}.activity{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid #edf2f8}.activity-icon{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:#e6f5ff;color:#1172bd;font-size:15px;flex-shrink:0}.activity strong{display:block;font-size:10px;margin:1px 0 4px}.activity p{margin:0;font-size:9px;color:#7b91ad;line-height:1.4}.activity time{display:block;color:#7b91ad;font-size:9px;margin-top:3px}.split-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}.quick-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.quick-card{border:1px solid #e0eaf5;border-radius:8px;padding:10px;background:linear-gradient(135deg,#f9fcff,#f0f7ff);min-height:75px}.quick-card .qicon{width:29px;height:29px;border-radius:8px;background:#e0edff;color:#1264c5;display:grid;place-items:center;margin-bottom:8px;font-size:14px}.quick-card strong{font-size:10px;display:block}.quick-card small{display:block;font-size:9px;color:#7b91ad;margin-top:4px}.donut-row{display:flex;align-items:center;gap:16px}.donut{width:140px;height:140px;border-radius:50%;background:conic-gradient(#1264d7 0 78.4%,#0d9488 78.4% 88.2%,#f59e0b 88.2% 94.9%,#ef4444 94.9% 98.1%,#7c3aed 98.1% 100%);display:grid;place-items:center;flex-shrink:0}.donut:after{content:'1.642\\A Total Pengguna';white-space:pre;text-align:center;background:#fff;border-radius:50%;width:82px;height:82px;display:grid;place-content:center;font-weight:800;font-size:13px;line-height:1.6;color:#123d79}.role-legend{display:grid;gap:10px;flex:1}.role-legend div{display:flex;justify-content:space-between;gap:8px;font-size:10px}.role-legend span{color:#67809f}.lower-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);gap:10px;margin-bottom:10px}.app-launchers{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:7px}.app-launch{border:1px solid var(--line);border-radius:8px;text-align:center;padding:9px 4px;background:linear-gradient(180deg,#fff,#f8fbff);transition:.18s;min-width:0}.app-launch:hover{transform:translateY(-2px);box-shadow:0 5px 14px #0b4ea21a}.app-launch .app-icon{margin:0 auto 7px;width:29px;height:29px;border-radius:8px;background:var(--accent);color:white;display:grid;place-items:center;font-size:14px}.app-launch strong{font-size:9px;display:block;overflow-wrap:anywhere}.app-launch small{display:block;font-size:8px;color:#7b91ad;margin:5px 0}.app-launch span{font-size:9px;color:#1768c8}.right-stack{display:grid;gap:10px}.notice{display:flex;gap:9px;padding:9px 0;border-bottom:1px solid #edf2f8}.notice .nicon{width:30px;height:30px;border-radius:50%;background:#e7f1ff;display:grid;place-items:center;color:#135cb0;flex-shrink:0}.notice strong{font-size:10px;display:block}.notice p{margin:4px 0;color:#7289a7;font-size:9px;line-height:1.4}.calendar-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.calendar-top strong{font-size:14px}.calendar-top button{border:0;background:#edf5ff;border-radius:6px;color:#1555a0;padding:4px 8px;cursor:pointer}.calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;text-align:center}.calendar span{padding:6px 0;font-size:9px;color:#7187a4}.calendar .day{color:#173f77}.calendar .today{background:#1264d7;color:white;border-radius:50%}.event{display:flex;gap:9px;padding:8px 0;border-top:1px solid #edf2f8;font-size:10px}.event b{color:#1768c8;min-width:34px}.footer{display:flex;justify-content:space-between;gap:12px;color:#7690ae;font-size:9px;padding:8px 2px}.status{color:#119b67}.mobile-toggle{display:none}.login-wrap{min-height:100vh;display:grid;grid-template-columns:1.1fr .9fr;background:#f4f8fd}.login-visual{background:linear-gradient(135deg,#062b5c,#1264c5);color:white;padding:8vw;display:flex;flex-direction:column;justify-content:center}.login-visual h1{font-size:36px;line-height:1.2}.login-card-wrap{display:grid;place-items:center;padding:24px}.login-card{width:min(420px,100%);background:white;border:1px solid var(--line);border-radius:18px;padding:32px;box-shadow:0 20px 60px #0b4ea21a}.login-card h2{margin:0 0 8px;font-size:24px}.login-card p{color:var(--muted);margin-bottom:24px}.field{margin:14px 0}.field label{display:block;font-weight:600;margin-bottom:7px}.field input{width:100%;border:1px solid #d8e4f2;border-radius:8px;padding:12px;outline-color:#1264c5}.btn{border:0;border-radius:8px;padding:12px 16px;background:#1264c5;color:#fff;font-weight:700;cursor:pointer;width:100%}.error{background:#fff0f0;color:#b42318;padding:10px;border-radius:8px;margin-bottom:12px}.module-placeholder{min-height:250px;display:grid;place-items:center;text-align:center}.module-placeholder .big{font-size:40px}
@media(max-width:1350px){.stats{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-main{grid-template-columns:minmax(0,1.2fr) minmax(260px,1fr)}.grid-main .panel:last-child{grid-column:1/-1}.app-launchers{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:1000px){.sidebar{width:220px}.main{margin-left:220px}.grid-main{grid-template-columns:1fr}.grid-main .panel:last-child{grid-column:auto}.lower-grid{grid-template-columns:1fr}.hero-quote{display:none}.hero .hero-copy{max-width:85%}.app-launchers{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:720px){.sidebar{transform:translateX(-100%);transition:transform .2s;width:260px}.sidebar.open{transform:translateX(0);box-shadow:0 0 0 100vmax #001b3c66}.main{margin-left:0}.mobile-toggle{display:inline-grid;place-items:center;border:0;background:#eff6ff;border-radius:8px;width:36px;height:36px;color:#0b4ea2}.topbar{padding:0 12px;gap:10px}.top-actions{gap:10px}.profile .who{display:none}.content{padding:10px}.hero{padding:18px;min-height:150px}.hero h1{font-size:21px}.hero .hero-copy{max-width:100%}.stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.stat{padding:10px 8px;gap:8px}.stat-icon{width:34px;height:34px;font-size:15px}.stat-value{font-size:17px}.split-grid{grid-template-columns:1fr}.quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.app-launchers{grid-template-columns:repeat(3,minmax(0,1fr))}.search{max-width:none}.search input{font-size:11px}.topbar .top-icon:nth-child(2){display:none}.footer{flex-direction:column}.login-wrap{grid-template-columns:1fr}.login-visual{padding:28px;min-height:190px}.login-visual h1{font-size:26px}.service{font-size:8px}}