:root { --sidebar: 250px; --header: 56px; --accent: #21458f; }
body { background: rgb(247, 249, 251); color: rgb(23, 34, 57); font-family: "Segoe UI", Arial, sans-serif; }
header { height: 56px; padding: 0px 20px 0px 266px; gap: 14px; background: white; border-bottom: 1px solid rgb(220, 227, 237); box-shadow: rgba(20, 37, 75, 0.04) 0px 1px 3px; }
.brand { position: absolute; left: 0px; top: 0px; width: 250px; height: 56px; background: #21458f; color: white; min-width: 0px; padding: 0px 13px; gap: 9px; font-size: 21px; letter-spacing: -0.4px; }
.brand::before { background: rgb(72, 118, 231); border: 1px solid rgb(102, 145, 251); border-radius: 8px; font-size: 23px; width: 32px; height: 32px; }
.brand b { color: #ffffff; }
.brand small { color: rgb(192, 204, 235); font-size: 8px; letter-spacing: 1.5px; margin-top: 3px; }
.demo { font-size: 10px; background: rgb(240, 243, 255); border-color: rgb(224, 230, 250); color: rgb(113, 129, 170); padding: 4px 8px; }
.actor { font-size: 10px; color: rgb(139, 150, 175); margin-left: auto; }
.actor select { font-size: 12px; min-height: 29px; max-width: 205px; border-radius: 6px; margin: 0px; color: rgb(51, 74, 121); }
#menubtn { background: none; border: 0px; color: rgb(83, 105, 152); height: 30px; min-width: 30px; }
.menu-search { padding: 0px; max-width: 370px; flex: 1 1 0%; }
.menu-search input { background: rgb(247, 249, 252); color: rgb(70, 89, 125); border: 1px solid rgb(229, 234, 242); border-radius: 10px; min-height: 36px; font-size: 14px; padding: 8px 13px; margin: 0px; box-shadow: rgba(20, 37, 75, 0.024) 0px 1px 2px; }
.menu-search input::placeholder { color: rgb(138, 153, 181); }
.aside-title { display: none; color: #ffffff; }
aside { top: 56px; width: 250px; background: #21458f; border: 0px; box-shadow: none; color: #ffffff; }
nav { padding: 8px 7px 18px; scrollbar-color: rgb(152, 164, 196) transparent; }
nav > button { margin-bottom: 5px; padding: 10px 12px; font-size: 14px; color: #ffffff; }
nav .nav-group > summary { color: #ffffff; font-weight: 600; font-size: 14px; line-height: 1.45; padding: 11px 10px; gap: 10px; }
.nav-icon { color: #ffffff; width: 18px; height: 18px; }
.nav-group > summary:hover { background: #1a3875; }
nav summary::after { color: #ffffff; }
nav button.active { background: #1a3875; color: #ffffff; box-shadow: none; border-radius: 7px; }
.nav-group[open] > .nav-module { border-left-color: rgb(83, 107, 168); margin-left: 18px; }
.nav-module > summary { color: #ffffff; padding: 9px 8px; font-size: 13px; }
.nav-module button { color: #ffffff; padding: 8px 8px 8px 19px; font-size: 13px; }
.nav-module button.active { background: #1e3f82; box-shadow: rgb(143, 168, 255) 3px 0px inset; color: #ffffff; }
.nav-module button:hover, nav > button:hover { background: #1a3875; color: #ffffff; }
.aside-foot { border-top: 1px solid #2b51a0; padding: 17px 14px; color: #ffffff; background: #1a3875; display: flex; gap: 11px; align-items: center; }
.profile-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #2d55a8; color: #ffffff; font-weight: 600; font-size: 12px; flex-shrink: 0; }
.aside-foot span { font-size: 11px; color: #ffffff; }
.aside-foot b { font-size: 13px; font-weight: 600; color: #ffffff; }
main { margin-top: 56px; margin-left: 250px; background: rgb(247, 249, 251); }
.crumb { padding: 18px 26px 0px; max-width: 1560px; margin: auto; font-size: 11px; }
.crumb b { font-size: 11px; color: rgb(131, 145, 170); }
.content { padding: 17px 26px 25px; max-width: 1560px; margin: auto; }
.notice { background: rgb(240, 244, 255); border: 1px solid rgb(220, 229, 250); border-radius: 10px; padding: 11px 14px; font-size: 12px; color: rgb(109, 127, 156); margin-bottom: 18px; }
.pagehead h1 { font-size: 25px; color: rgb(22, 33, 57); letter-spacing: -0.7px; font-weight: 650; }
.pagehead .muted { color: rgb(129, 144, 170); font-size: 13px; }
.pagehead { margin-bottom: 21px; }
.submodule-context b { color: rgb(117, 133, 165); }
.button { border-radius: 9px; padding: 8px 14px; min-height: 35px; font-size: 12px; color: rgb(74, 92, 123); border-color: rgb(220, 227, 237); box-shadow: rgba(22, 36, 74, 0.024) 0px 1px 2px; }
.button.primary { background: #21458f; border-color: #21458f; }
.button.teal { background: #21458f; border-color: #21458f; }
.link { color: rgb(56, 91, 196); }
.stats { gap: 14px; margin-bottom: 20px; }
.stat { border-radius: 15px; border: 1px solid rgb(200, 216, 251); background: rgb(241, 246, 255); padding: 17px 19px; box-shadow: rgba(20, 51, 102, 0.035) 0px 2px 3px; }
.stat::before { display: none; }
.stat:nth-child(2) { background: rgb(244, 242, 255); border-color: rgb(216, 208, 252); }
.stat:nth-child(3) { background: rgb(237, 249, 245); border-color: rgb(189, 233, 218); }
.stat:nth-child(4) { background: rgb(255, 248, 237); border-color: rgb(248, 219, 171); }
.stat small { font-size: 11px; color: rgb(115, 134, 163); font-weight: 600; letter-spacing: 0.3px; }
.stat strong { font-size: 27px; color: rgb(54, 77, 229); margin: 7px 0px 6px; font-weight: 650; }
.stat:nth-child(2) strong { color: rgb(112, 64, 223); }
.stat:nth-child(3) strong { color: rgb(5, 137, 110); }
.stat:nth-child(4) strong { color: rgb(192, 123, 23); }
.stat em { font-size: 11px; color: rgb(129, 147, 172); }
.panel { border-radius: 15px; border: 1px solid rgb(220, 228, 241); box-shadow: rgba(20, 51, 102, 0.035) 0px 2px 3px; margin-bottom: 20px; }
.panel-head { padding: 17px 19px; border-color: rgb(238, 241, 247); }
.panel-head h2 { font-size: 15px; color: rgb(32, 44, 69); }
.panel-head .muted { color: rgb(134, 150, 174); font-size: 11px; }
.dashboard-grid { gap: 18px; }
.channel-breakdown { padding: 19px; }
.channel-breakdown label { font-size: 12px; color: rgb(113, 130, 160); }
.channel-breakdown b { font-size: 12px; color: rgb(71, 88, 122); }
.meter span { background: rgb(113, 147, 218); }
.channel-breakdown > div:first-child .meter span { background: rgb(45, 68, 141); }
.bars span { background: rgb(127, 154, 224); }
.bars > div:nth-child(6) span { background: rgb(44, 67, 142); }
.filters { padding: 18px 19px; background: rgb(255, 255, 255); border-color: rgb(237, 241, 247); }
.filters label { font-size: 12px; color: rgb(115, 133, 162); }
.filters input, .filters select { border-color: rgb(223, 229, 240); border-radius: 8px; color: rgb(80, 98, 127); font-size: 13px; }
th { background: rgb(247, 249, 253); color: rgb(119, 136, 162); font-size: 12px; padding: 13px 18px; border-color: rgb(232, 237, 245); }
td { padding: 16px 18px; color: rgb(88, 107, 137); border-color: rgb(237, 241, 247); font-size: 13px; }
td b { color: rgb(52, 75, 115); }
.pill { border-radius: 6px; font-size: 11px; }
.tablefoot { color: rgb(140, 157, 181); }
.health b { color: rgb(69, 96, 153); }
.health > div, .workqueue button { color: rgb(117, 134, 163); }
.workqueue b { background: rgb(255, 240, 217); color: rgb(184, 122, 24); }
.chart { height: 260px; }
.head-actions { gap: 8px; }
footer { max-width: 1300px; margin: auto; border: 0px; color: rgb(154, 167, 188); padding: 16px 26px; }
.logout-button { background: rgb(247, 249, 253); border: 1px solid rgb(226, 231, 240); border-radius: 8px; min-height: 32px; padding: 6px 10px; color: rgb(108, 127, 163); font-size: 12px; white-space: nowrap; }
.logout-button:hover { background: rgb(237, 242, 252); }
.modalhead h2 { color: rgb(36, 57, 95); }
dialog { border-radius: 15px; }
.callout { background: rgb(245, 247, 253); border-color: rgb(224, 230, 242) rgb(224, 230, 242) rgb(224, 230, 242) rgb(143, 170, 224); color: rgb(118, 136, 166); }
.tabs button.on { color: rgb(43, 68, 142); border-color: rgb(43, 68, 142); }
.detailgrid b { color: rgb(75, 99, 141); }
.detailgrid label { color: rgb(139, 156, 181); }
body.login-mode { background: rgb(245, 247, 252); }
body.login-mode > header, body.login-mode > aside, body.login-mode > main, body.login-mode > #toast, body.login-mode > dialog { display: none !important; }
#login-screen { display: none; min-height: 100vh; }
body.login-mode #login-screen { display: grid; grid-template-columns: minmax(340px, 0.9fr) minmax(460px, 1.1fr); }
.login-brand-panel { background: #21458f; color: white; padding: 54px 12%; display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; }
.login-brand { display: flex; gap: 13px; align-items: center; font-size: 26px; font-weight: 600; letter-spacing: -0.6px; }
.login-brand em { color: #ffffff !important; font-style: normal; }
.login-brand span { color: #ffffff !important; white-space: nowrap !important; }
.login-brand-panel h2 { font-size: 35px; line-height: 1.3; font-weight: 600; color: rgb(255, 255, 255); letter-spacing: -0.7px; margin: 0px 0px 20px; }
.login-brand-panel p { font-size: 16px; line-height: 1.8; color: rgb(190, 205, 237); max-width: 380px; }
.login-brand-foot { font-size: 12px; color: rgb(143, 165, 215); }
.login-content { display: flex; align-items: center; justify-content: center; padding: 56px 45px; }
.login-card { width: 100%; max-width: 410px; }
.login-eyebrow { display: inline-block; font-size: 12px; color: rgb(102, 124, 172); background: rgb(234, 240, 252); border: 1px solid rgb(220, 230, 250); border-radius: 6px; padding: 5px 9px; margin-bottom: 21px; }
.login-card h1 { font-size: 29px; color: rgb(34, 54, 92); font-weight: 650; letter-spacing: -0.7px; margin: 0px 0px 9px; }
.login-card > p { color: rgb(137, 152, 177); font-size: 14px; margin-bottom: 30px; }
.login-card label { display: block; color: rgb(90, 111, 147); font-size: 13px; font-weight: 600; margin-bottom: 20px; }
.login-card input { background: rgb(255, 255, 255); border: 1px solid rgb(220, 228, 242); min-height: 47px; border-radius: 9px; font-size: 15px; color: rgb(53, 78, 120); padding: 12px 14px; margin-top: 8px; }
.password-wrap { position: relative; }
.password-wrap input { padding-right: 60px; }
.password-toggle { position: absolute; right: 10px; top: 10px; border: 0px; background: none; color: rgb(135, 154, 189); font-size: 12px; padding: 5px; }
.login-submit { width: 100%; border: 0px; border-radius: 9px; min-height: 46px; background: rgb(45, 68, 143); color: rgb(255, 255, 255); font-size: 15px; font-weight: 600; margin: 3px 0px 17px; box-shadow: rgba(41, 67, 138, 0.07) 0px 3px 6px; }
.login-submit:hover { background: rgb(36, 59, 130); }
.login-error { color: rgb(193, 84, 84); background: rgb(255, 240, 240); border: 1px solid rgb(240, 217, 217); border-radius: 7px; font-size: 13px; padding: 10px 12px; margin-bottom: 16px; }
.demo-credentials { border: 1px solid rgb(224, 231, 244); background: rgb(238, 243, 252); border-radius: 10px; padding: 16px; color: rgb(125, 143, 174); font-size: 12px; line-height: 1.7; margin-top: 10px; }
.demo-credentials b { color: rgb(86, 111, 152); font-weight: 600; }
.demo-credentials .demo-fill { border: 0px; background: none; color: rgb(49, 91, 194); padding: 0px; margin-top: 10px; font-size: 13px; font-weight: 600; }
.login-security-note { font-size: 11px; color: rgb(156, 170, 192); margin-top: 20px; line-height: 1.7; }
@media (max-width: 1150px) {
  .demo { display: none; }
  .menu-search { max-width: 300px; }
  .stats { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
  .content { padding: 18px 22px; }
  .crumb { padding: 18px 22px 0px; }
}
@media (max-width: 900px) {
  .actor { font-size: 0px; }
  .actor select { font-size: 12px; max-width: 165px; }
  .logout-button { font-size: 11px; }
  .menu-search { max-width: 220px; }
  .login-brand-panel { padding: 45px 10%; }
  .login-brand-panel h2 { font-size: 30px; }
}
@media (max-width: 760px) {
  header { padding: 0px 11px; height: 64px; gap: 8px; flex-wrap: nowrap; }
  .brand { position: static; background: none; color: #21458f; width: auto; height: auto; padding: 0px; font-size: 18px; gap: 7px; }
  .brand b { color: rgb(221, 133, 43); }
  .brand small { color: rgb(157, 170, 195); font-size: 7px; letter-spacing: 0.8px; }
  .brand::before { width: 28px; height: 28px; border: 0px; font-size: 20px; }
  .actor { margin-left: auto; }
  .actor select { max-width: 132px; font-size: 10px; padding: 3px 5px; min-height: 28px; }
  .logout-button { font-size: 10px; min-height: 28px; padding: 4px 6px; }
  .menu-search { display: none; }
  aside { top: 64px; width: 270px; }
  main { margin-top: 64px; margin-left: 0px; }
  .content { padding: 16px; }
  .crumb { padding: 16px 16px 0px; }
  .pagehead h1 { font-size: 23px; }
  .stat { border-radius: 12px; padding: 15px; }
  .stat strong { font-size: 24px; }
  .panel { border-radius: 12px; }
  .dashboard-grid { gap: 0px; }
  .notice { font-size: 11px; padding: 10px 12px; }
  .head-actions { max-width: 150px; }
  .logout-button { max-width: 55px; }
  .login-brand-panel { display: none; }
  body.login-mode #login-screen { display: flex; min-height: 100dvh; align-items: center; justify-content: center; }
  .login-content { padding: 45px 28px; width: 100%; }
  .login-card { max-width: 400px; }
  .login-card h1 { font-size: 28px; }
  .login-card > p { margin-bottom: 26px; }
  .login-card::before { content: "Quiklott - LMS"; display: block; color: rgb(43, 68, 142); font-size: 24px; font-weight: 700; margin-bottom: 28px; letter-spacing: -0.5px; }
}
.topup-preview { display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 10px; background: rgb(245, 248, 255); border: 1px solid rgb(223, 231, 247); border-radius: 10px; padding: 15px; margin: 20px 0px; }
.topup-preview label { font-size: 11px; display: block; color: rgb(130, 148, 178); margin-bottom: 5px; }
.topup-preview b { font-size: 15px; color: rgb(69, 100, 139); }
.topup-preview .preview-increase b { color: rgb(19, 132, 109); }
.confirmed-money { font-size: 13px; display: flex; align-items: center; gap: 10px; color: rgb(96, 123, 157); }
.confirmed-money input { margin: 0px; flex-shrink: 0; }
.decision-label { display: block; font-size: 13px; margin-top: 18px; color: rgb(118, 138, 168); }
@media (max-width: 760px) {
  .topup-preview { grid-template-columns: 1fr 1fr; }
  .topup-preview b { font-size: 14px; }
}