:root{font-family:Inter,Arial,sans-serif;color:#394356;background:#f7f8fb;font-size:14px;--primary:#6b65f2}*{box-sizing:border-box}body{margin:0}button,input,textarea,select{font:inherit}button,a{cursor:pointer}button{border:1px solid #e6e7ed;background:white;padding:10px 16px;border-radius:7px;color:inherit}a{color:var(--primary);text-decoration:none}button:hover{background:#f0efff}.primary{background:var(--primary);border-color:var(--primary);color:white}.primary:hover{background:#5650d6}aside{width:242px;background:white;border-right:1px solid #eee;position:fixed;inset:0 auto 0 0;padding:25px 16px;display:flex;flex-direction:column;gap:30px}.brand{font-size:21px;font-weight:800;color:#439ff1;font-style:italic}.brand span{color:#de4fa8}nav{display:flex;flex-direction:column;gap:7px}nav button{text-align:left;border:0;padding:14px;color:#768099}nav button.active{background:#eeedff;color:var(--primary)}aside small{margin-top:auto;color:#9097a5;line-height:1.8}header{position:fixed;left:242px;top:0;right:0;height:66px;background:#fff;display:flex;align-items:center;padding:0 30px;gap:18px;border-bottom:1px solid #eee;z-index:2}.right{margin-left:auto;display:flex;align-items:center;gap:20px}main{margin:96px 30px 40px 272px;max-width:1550px}#menu{border:0}h1,h2,h3,p{margin-top:0}h1{font-size:26px}h2{font-size:20px}.hero{background:linear-gradient(115deg,#6660ee,#8b87fc);color:white;padding:32px 36px;border-radius:7px;box-shadow:0 3px 7px #0002;margin-bottom:28px}.hero p{opacity:.9;margin:14px 0 0}.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.card{border:1px solid #e9e9ef;background:#fff;border-radius:8px;padding:25px}.metric{display:flex;gap:20px;align-items:center;min-height:113px}.icon{font-size:26px;background:#efedff;border-radius:8px;padding:11px;color:var(--primary)}.metric small{color:#8c94a3}.metric strong{display:block;font-size:20px;margin-top:10px;color:#625ce0}.toolbar{display:flex;gap:15px;align-items:center;margin-bottom:22px}.toolbar .primary{margin-left:auto}.tablewrap{overflow-x:auto}table{width:100%;border-collapse:collapse;text-align:left}th{font-weight:600;color:#8d95a2;background:#fcfcfe}td,th{padding:17px 14px;border-bottom:1px solid #eee;white-space:nowrap}td button{padding:7px 12px;margin-right:8px}.pill{padding:5px 10px;background:#eeedff;color:#6660d8;border-radius:5px;font-size:12px}.empty{text-align:center;padding:65px 20px;color:#9299a6}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.product p{line-height:1.7;color:#8992a3;white-space:pre-wrap}.product .price{font-size:23px;font-weight:700;color:var(--primary);margin:25px 0}.product .primary{width:100%}.split{display:grid;grid-template-columns:2fr 1fr;gap:22px;margin-top:24px}.chart{height:170px;margin-top:20px;background:repeating-linear-gradient(0deg,transparent,transparent 40px,#f0f0f6 41px);border-bottom:2px solid #a3a0fa;display:flex;align-items:center;justify-content:center;color:#a2a8b3}dialog{border:0;border-radius:12px;padding:28px;width:min(530px,94vw);box-shadow:0 15px 80px #0003}dialog::backdrop{background:#26304666}label{display:block;margin:16px 0 7px;color:#697285}input,textarea,select{display:block;width:100%;border:1px solid #dfe2ec;border-radius:7px;padding:12px;background:#fff;color:#303b51}textarea{min-height:100px}.actions{display:flex;justify-content:flex-end;gap:10px;margin-top:25px}#error{color:#c23851;margin-top:15px}#notice:not(:empty){background:#eef0ff;border:1px solid #d9dcff;padding:15px;border-radius:7px;margin-bottom:20px;line-height:1.7}.qris{max-width:310px;width:100%;display:block;margin:20px auto}pre{white-space:pre-wrap;word-break:break-word;background:#f4f4fa;padding:20px;border-radius:8px}.muted{color:#9299a6;line-height:1.8}@media(max-width:1100px){.grid{grid-template-columns:repeat(2,1fr)}.cards{grid-template-columns:repeat(2,1fr)}}@media(max-width:760px){aside{transform:translateX(-100%);z-index:5;box-shadow:0 0 40px #0002}body.menu aside{transform:translateX(0)}header{left:0;padding:0 15px}.right{gap:8px}.right a{display:none}main{margin:90px 15px 30px}.grid{gap:12px}.metric{padding:16px;gap:12px}.metric strong{font-size:18px}.hero{padding:28px 22px}.cards,.split{grid-template-columns:1fr}.toolbar{flex-wrap:wrap}.card{padding:18px}}