:root{font-family:Inter,"Segoe UI",Arial,sans-serif;--ink:#211248;--mute:#6d6388;--primary:#6127ca;--pink:#df2cba;--bg:#f5f2fd;--card:#fff;--border:#e9e3f4;--shadow:0 12px 32px rgba(61,33,125,.11);--soft:#efe9fd;--good:#0ea66b;--bad:#e74162;--warn:#ef920e;color-scheme:light}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 78% 12%,#f6d4fa,transparent 31%),linear-gradient(145deg,#f1edff 0%,#f9f7ff 60%,#faf2fd);color:var(--ink);font-size:14px;line-height:1.45}button,input,textarea,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.52;cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #f3a5f0;outline-offset:2px}input,select,textarea{width:100%;padding:12px 13px;border:1px solid #dfd8ed;border-radius:12px;background:#fff;color:#281857;min-height:42px}textarea{min-height:100px;resize:vertical}label{font-weight:700;display:block;margin:0 0 5px;color:#3d2b71;font-size:12px}form{display:grid;gap:12px}h1,h2,h3,p{margin:0}h1{font-size:24px;line-height:1.18}h2{font-size:19px}h3{font-size:15px}.muted{color:var(--mute)}.micro{font-size:11px}.small{font-size:12px}.strong{font-weight:800}.gradient{background:linear-gradient(106deg,#4d22d2 0%,#9221d4 49%,#e52ab7 100%);color:#fff}.grad-text{background:linear-gradient(90deg,#5d22c9,#dc28b2);color:transparent;background-clip:text}.card{background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:17px}.soft-card{background:var(--soft);border-radius:12px;padding:12px}.btn{border:0;border-radius:12px;padding:12px 16px;font-weight:750;background:#eee8f9;color:#5526b4;transition:filter .15s}.btn:hover{filter:brightness(.97)}.btn-primary{background:linear-gradient(100deg,#5328e3,#ed2bb3);color:#fff;box-shadow:0 4px 8px rgba(116,26,190,.18)}.btn-danger{background:#ffe5ea;color:#af1735}.btn-green{background:#dcfaed;color:#078456}.btn-outline{border:1px solid #d9caef;background:transparent}.btn-small{padding:8px 11px;font-size:11px;border-radius:9px}.btn-block{width:100%}.badge{padding:4px 9px;border-radius:20px;font-size:11px;font-weight:750;display:inline-flex;gap:4px;align-items:center;background:#ede5fa;color:#5f37a3}.badge.good{background:#dff9eb;color:#088957}.badge.warn{background:#fff0d8;color:#b86800}.badge.bad{background:#ffe4eb;color:#ce2452}.alert{border-radius:13px;padding:12px 15px;background:#fff1d9;color:#7e4800;font-size:12px;border:1px solid #ffd995}.alert.danger{background:#ffecf0;color:#a92040;border-color:#ffcad8}.alert.good{background:#e3fff2;color:#0b7952;border-color:#a5ebc9}.row{display:flex;gap:12px;align-items:center}.between{justify-content:space-between}.column{display:flex;flex-direction:column;gap:13px}.wrap{flex-wrap:wrap}.grow{flex:1;min-width:0}.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.mt{margin-top:14px}.mt2{margin-top:22px}.center{text-align:center}.avatar{width:49px;height:49px;border-radius:50%;background:linear-gradient(135deg,#ead8fc,#ffc9e8);display:grid;place-items:center;font-size:26px;flex:none}.iconbox{height:40px;width:40px;display:grid;place-items:center;border-radius:11px;background:#efe7ff;font-size:22px;color:#632cc1}.titleline{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}.section-heading{margin:20px 0 12px;display:flex;align-items:center;justify-content:space-between}.demo-ribbon{background:#fff0cf;color:#855107;padding:9px 16px;font-size:12px;text-align:center;font-weight:750;border-bottom:1px solid #eed5a0}.logo-mark{height:54px;width:54px;border-radius:12px;background:#fff;object-fit:contain;padding:2px}.spacer{height:10px}.status-dot{display:inline-block;width:9px;height:9px;background:#22a776;border-radius:50%;margin-right:6px}
/* Mobile application */
.phone-shell{width:min(100%,420px);min-height:100vh;margin:auto;background:var(--bg);box-shadow:0 0 30px rgba(51,23,105,.14);position:relative;padding-bottom:88px}.phone-head{background:linear-gradient(112deg,#5721c7,#8f1ed4,#e22cb8);color:#fff;padding:18px 18px 25px;border-radius:0 0 28px 28px;box-shadow:0 6px 20px #6837a72a;position:relative}.phone-head:before{content:'';position:absolute;left:-30px;right:0;bottom:0;height:20px;border-radius:50%;background:#ffffff10}.phone-content{padding:0 14px 28px;margin-top:-8px;position:relative}.phone-content>.card:first-child{margin-top:0}.phone-head .avatar{width:47px;height:47px}.phone-nav{position:fixed;z-index:5;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,420px);background:#fff;border-top:1px solid #ece6f7;display:grid;grid-template-columns:repeat(4,1fr);padding:10px 2px max(9px,env(safe-area-inset-bottom));box-shadow:0 -4px 14px #42256511}.phone-nav button{border:0;background:transparent;color:#51417a;display:grid;gap:0;justify-items:center;font-size:11px;font-weight:600}.phone-nav button strong{font-size:22px}.phone-nav button.active{color:#6226df}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.stat{color:white;border-radius:11px;padding:10px 4px;text-align:center;min-width:0}.stat strong{font-size:23px;display:block;line-height:1.25}.stat span{font-size:10px;font-weight:750}.s-green{background:linear-gradient(135deg,#20bc75,#058f51)}.s-orange{background:linear-gradient(135deg,#ffb340,#f06a15)}.s-blue{background:linear-gradient(135deg,#3b96fc,#3d59df)}.s-gray{background:linear-gradient(135deg,#8196bf,#596581)}.clock-number{text-align:center;color:#23134b;font-size:41px;letter-spacing:-1px;line-height:1.3;font-weight:900}.clock-date{text-align:center;color:#6e608a;font-size:12px}.big-absen{font-size:20px;padding:17px 8px;display:flex;align-items:center;justify-content:center;gap:10px}.big-absen .emoji{font-size:27px}.tabstrip{display:flex;gap:5px;border-bottom:1px solid var(--border);padding:0 2px 7px}.tabstrip button{flex:1;border:none;background:transparent;padding:8px 5px;border-radius:8px;color:#796b96;font-size:12px}.tabstrip button.active{background:#ede7ff;color:#6028d3;font-weight:750}.calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;text-align:center}.calendar span{font-size:11px;padding:5px 0;color:#6f6188}.day{border:0;background:transparent;border-radius:10px;aspect-ratio:1;display:grid;place-items:center;color:#211a48;font-size:12px;font-weight:650}.day.good{background:#dff9eb;color:#078e58}.day.warn{background:#ffebcf;color:#b66d02}.day.bad{background:#ffe0e7;color:#cf2251}.day.today{background:#662add;color:#fff}.pill-line{height:7px;background:#eee7fa;border-radius:7px;overflow:hidden}.pill-line>i{display:block;height:100%;background:linear-gradient(90deg,#6627e0,#ee2ab6)}.camera-box{height:280px;border-radius:15px;background:linear-gradient(135deg,#372660,#aa6cd5);display:grid;place-items:center;overflow:hidden;position:relative;color:#fff}.camera-box video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.camera-box .reticle{position:absolute;inset:20px 50px;border:3px solid #ffffffaa;border-radius:48%}.mapbox{height:205px;border:1px solid #d8d6e4;border-radius:14px;background:repeating-linear-gradient(25deg,#e2e7e3 0 26px,#fff 27px 35px,#c0d8ee 36px 41px,#fcf8ef 42px 59px);position:relative;overflow:hidden}.map-circle{position:absolute;width:128px;height:128px;border:2px dashed #ab31d5;border-radius:50%;background:#e89bff3d;top:36px;left:calc(50% - 64px)}.map-pin{position:absolute;font-size:27px;left:calc(50% - 14px);top:75px}.map-note{position:absolute;bottom:0;left:0;right:0;background:#fffc;padding:7px 9px;font-size:11px;text-align:center;font-weight:700}.login-wrap{min-height:100vh;display:grid;place-items:center;padding:30px 16px;background:radial-gradient(circle at 20% 20%,#f7adff,transparent 35%),linear-gradient(140deg,#5321bd,#b22cce 55%,#f0dbfc)}.login-card{width:min(100%,380px);background:#fff;padding:25px;border-radius:23px;box-shadow:0 20px 55px #3b18655e}.brand-title{font-size:23px;letter-spacing:-1px}.tagline{font-size:12px;color:#60517e}.login-art{padding:20px;background:linear-gradient(130deg,#5628d6,#e92db6);border-radius:17px;color:#fff;margin-bottom:15px}.login-art .logo-mark{width:64px;height:64px}
/* Desktop */
.admin-shell{display:grid;grid-template-columns:220px minmax(0,1fr);min-height:100vh}.sidebar{background:linear-gradient(168deg,#291253,#442277 60%,#371964);color:#fff;min-height:100vh;padding:20px 12px;position:sticky;top:0;height:100vh;overflow-y:auto}.sidebar-brand{display:flex;gap:10px;align-items:center;margin:4px 5px 27px;font-size:14px}.sidebar-brand small{font-size:10px;color:#dfcafd}.navlink{display:flex;align-items:center;gap:11px;width:100%;padding:12px 14px;border:0;background:transparent;color:#f4eafa;text-align:left;border-radius:12px;margin-bottom:4px;font-weight:600}.navlink.active{background:linear-gradient(100deg,#6a36ed,#df2bba);color:#fff}.navlink span{font-size:19px;width:24px;text-align:center}.admin-header{min-height:90px;display:flex;align-items:center;justify-content:space-between;padding:15px 24px;gap:12px;background:linear-gradient(105deg,#4b21b4,#8524c8 52%,#d62cad);color:#fff}.admin-main{min-width:0}.admin-body{padding:16px}.admin-grid-top{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.admin-kpi{padding:14px}.admin-kpi .value{font-size:30px;font-weight:850;letter-spacing:-1px}.admin-mid{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(260px,1fr) minmax(280px,1.12fr);gap:12px;margin-top:12px}.admin-lower{display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,1fr);gap:12px;margin-top:12px}.mini-panels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}.mini-panel{min-height:168px}.mini-h{margin:-17px -17px 12px;padding:10px 12px;border-radius:15px 15px 0 0;background:linear-gradient(100deg,#6622d9,#e52bc2);color:#fff;font-weight:800;font-size:12px}.chartbars{height:150px;display:flex;gap:14px;align-items:end;justify-content:space-around;padding:10px 5px 18px;border-bottom:1px solid #ded7ed;background:repeating-linear-gradient(to top,transparent 0 28px,#f2edf9 29px 30px)}.chartbars .barset{height:100%;display:flex;align-items:flex-end;gap:4px}.chartbars .bar{width:13px;background:#692ade;border-radius:3px 3px 0 0}.chartbars .bar.pink{background:#ed50bc}.datatable{width:100%;border-collapse:collapse;font-size:12px}.datatable th{background:#f1edf9;color:#422c76;text-align:left}.datatable th,.datatable td{padding:9px 8px;border-bottom:1px solid #ece7f5;white-space:nowrap}.table-scroll{overflow-x:auto}.form-inline{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.mobile-menu-btn{display:none}.desktop-only{display:block}.footer-note{font-size:11px;color:#796d90;margin-top:12px}.progress{height:8px;background:#eae2f8;border-radius:10px;overflow:hidden}.progress i{display:block;height:8px;background:linear-gradient(90deg,#6226d7,#ee27b8)}#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:#302154;color:#fff;z-index:50;max-width:95vw;padding:13px 20px;border-radius:14px;box-shadow:0 7px 24px #27104a55;display:none;font-size:13px}#toast.show{display:block}.mobile-menu-overlay{display:none}
/* responsive */
@media(max-width:1180px){.admin-grid-top{grid-template-columns:repeat(3,1fr)}.admin-mid{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-mid>.card:first-child{grid-column:1/-1}.mini-panels{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.admin-shell{display:block}.sidebar{position:fixed;z-index:20;left:0;top:0;bottom:0;transform:translateX(-105%);width:250px;transition:transform .22s}.admin-shell.menu-open .sidebar{transform:translateX(0)}.admin-shell.menu-open .mobile-menu-overlay{display:block;position:fixed;inset:0;background:#13082680;z-index:19}.mobile-menu-btn{display:inline-flex}.admin-header{min-height:75px;padding:12px 16px}.admin-header h1{font-size:18px}.admin-body{padding:12px}.admin-grid-top{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-mid,.admin-lower{grid-template-columns:1fr}.admin-mid>.card:first-child{grid-column:auto}.mini-panels{grid-template-columns:repeat(2,minmax(0,1fr))}.form-inline{grid-template-columns:1fr}.desktop-only{display:none}}
@media(max-width:470px){.mini-panels{grid-template-columns:1fr}.admin-grid-top{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-kpi .value{font-size:24px}.admin-body{padding:9px}.admin-header .hide-small{display:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
body.dark{--ink:#f4eafb;--mute:#bdafd8;--bg:#1d1530;--card:#291d42;--border:#51416d;--soft:#36294d;--shadow:0 5px 20px #08021533;background:#1b1230;color:#f3eafa}body.dark .phone-nav{background:#24183c}body.dark input,body.dark textarea,body.dark select{background:#291d42;color:#fff;border-color:#57466f}body.dark .datatable th{background:#38294d;color:#fff}body.dark .clock-number{color:#fff}