@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Manrope:wght@500;600;700;800&display=swap');
:root{--navy:#0b1730;--navy2:#102344;--blue:#2c71e8;--blue2:#1f5ec7;--cyan:#4aa9ee;--ink:#18243a;--muted:#75839a;--line:#e5eaf2;--bg:#f4f6fa;--white:#fff;--green:#079b68;--greenbg:#e6f7f0;--red:#d84b59;--redbg:#fff0f1;--amber:#b7791f;--amberbg:#fff6e6;--shadow:0 15px 45px rgba(18,38,72,.08);font-family:'DM Sans',Arial,sans-serif;color:var(--ink)}*{box-sizing:border-box}body{margin:0;background:var(--bg);font-size:14px}button,input,select,textarea{font:inherit}button{cursor:pointer}.hidden{display:none!important}.app{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:258px;background:var(--navy);color:#d8e6fb;display:flex;flex-direction:column;padding:25px 17px 18px;z-index:20}.brand{display:flex;align-items:center;gap:12px}.brand img{width:43px;height:43px;filter:drop-shadow(0 7px 12px #0003)}.brand strong{display:block;font:800 15px Manrope,sans-serif;letter-spacing:.09em;color:#fff}.brand span{display:block;color:#8eb8ef;font-size:10px;letter-spacing:.17em;margin-top:3px}.nav-label{font-size:10px;letter-spacing:.19em;color:#7795be;margin:39px 12px 13px}.nav-list{display:grid;gap:6px}.nav-item{height:45px;border:0;background:transparent;color:#b9cbe3;border-radius:9px;text-align:left;padding:0 13px;display:flex;align-items:center;gap:13px;font-weight:600;font-size:14px;transition:.15s}.nav-item:hover{background:#ffffff12;color:#fff}.nav-item.active{background:#2457a6;color:#fff;box-shadow:inset 3px 0 #5cb5ff}.nav-icon{width:20px;text-align:center;font-size:18px;color:#9ebce5}.nav-item.active .nav-icon{color:#fff}.sidebar-bottom{margin-top:auto}.sidebar-user{display:flex;align-items:center;gap:10px;padding:17px 6px 8px;border-top:1px solid #ffffff16;margin-top:15px}.avatar{width:34px;height:34px;border-radius:11px;background:#2b6ed2;display:grid;place-items:center;color:#fff;font-weight:800}.user-meta{display:grid;gap:2px;flex:1}.user-meta strong{font-size:12px;color:#fff}.user-meta small{font-size:10px;color:#8ea7ca}.sidebar-version{font-size:9px;letter-spacing:.14em;color:#657e9f;padding:12px 6px}.main-area{margin-left:258px;min-height:100vh;display:flex;flex-direction:column}.topbar{height:88px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 34px;position:sticky;top:0;z-index:10}.top-title h1{font:800 23px Manrope,sans-serif;margin:3px 0 0}.eyebrow{font-size:10px;font-weight:700;letter-spacing:.16em;color:#8091ab}.top-actions{display:flex;align-items:center;gap:15px}.system-pill{font-size:10px;letter-spacing:.1em;font-weight:800;background:#f3f6fb;color:#62748f;padding:9px 13px;border-radius:7px}.pulse-dot{display:inline-block;width:7px;height:7px;background:#27ba7b;border-radius:50%;margin-right:7px;box-shadow:0 0 0 4px #27ba7b22}.date-chip{font-size:12px;color:#6e7e96}.page-content{padding:25px 30px;flex:1;max-width:1800px;width:100%;margin:0 auto}.app-footer{padding:15px 32px;color:#99a4b5;font-size:11px;border-top:1px solid var(--line);background:#fff}.app-footer span{padding:0 7px}.mobile-menu{display:none}.icon-btn{border:0;background:transparent;color:inherit;border-radius:8px;padding:7px 9px;font-size:17px}.icon-btn:hover{background:#eef3fa}.card{background:#fff;border:1px solid var(--line);border-radius:13px;box-shadow:0 2px 8px rgba(26,48,82,.025)}.card-head{padding:19px 21px 0;display:flex;align-items:center;justify-content:space-between;gap:14px}.card-head h2,.section-title{font:800 15px Manrope,sans-serif;margin:0}.card-head p{margin:5px 0 0;color:var(--muted);font-size:12px}.card-body{padding:18px 21px 21px}.grid{display:grid;gap:16px}.grid.kpis{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:18px}.metric{padding:19px 20px;position:relative;overflow:hidden}.metric-top{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:12px;font-weight:600}.metric-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:#eaf2ff;color:var(--blue);font-size:18px}.metric-value{font:800 27px Manrope,sans-serif;margin-top:13px;letter-spacing:-.04em}.metric-foot{margin-top:6px;color:#9aa5b4;font-size:11px}.metric::after{content:"";position:absolute;width:90px;height:90px;border-radius:50%;right:-32px;bottom:-48px;background:#eaf2ff;opacity:.65}.row-2{display:grid;grid-template-columns:1.35fr 1fr;gap:16px}.row-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}.toolbar-left,.toolbar-right{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.search{position:relative;min-width:235px}.search input{padding-left:36px}.search::before{content:'⌕';position:absolute;left:13px;top:7px;color:#94a1b4;font-size:20px}.input,select,textarea{width:100%;border:1px solid #dce3ed;border-radius:8px;padding:11px 12px;background:#fff;color:var(--ink);outline:none;transition:.15s}.input:focus,select:focus,textarea:focus{border-color:#71a5f3;box-shadow:0 0 0 3px #2c71e81b}.input.small,select.small{padding:9px 11px}.btn{border:1px solid transparent;border-radius:8px;padding:10px 14px;font-weight:700;font-size:12px;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}.btn.primary{background:var(--blue);color:white;box-shadow:0 4px 12px #2c71e82c}.btn.primary:hover{background:var(--blue2)}.btn.secondary{background:#f2f5f9;color:#53647c;border-color:#e5eaf1}.btn.outline{background:#fff;border-color:#dce4ef;color:#476080}.btn.danger{background:#fff4f4;border-color:#ffdada;color:#c23b4b}.btn.success{background:#eaf8f2;color:#087e58;border-color:#d2f0e2}.btn.small{padding:7px 10px;font-size:11px}.btn.full{width:100%;padding:13px}.table-wrap{overflow:auto}.data-table{width:100%;border-collapse:collapse;min-width:680px}.data-table th{text-align:left;background:#f7f9fc;color:#71829b;font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:13px 15px;border-bottom:1px solid var(--line);white-space:nowrap}.data-table td{padding:14px 15px;border-bottom:1px solid #edf0f5;font-size:12px;vertical-align:middle}.data-table tr:last-child td{border-bottom:0}.data-table tbody tr:hover{background:#fbfcfe}.primary-text{font-weight:700;color:#243653}.secondary-text{font-size:11px;color:#8794a7;margin-top:4px}.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border-radius:20px;font-size:10px;font-weight:800;white-space:nowrap}.badge.online,.badge.paid,.badge.available{color:#07865d;background:var(--greenbg)}.badge.offline,.badge.disabled{color:#c33e50;background:var(--redbg)}.badge.pending{color:#a56b12;background:var(--amberbg)}.badge.info{background:#edf4ff;color:#2862b7}.badge.neutral{background:#eff2f6;color:#67778e}.empty{padding:40px 15px;text-align:center;color:#8b99ab}.empty .empty-icon{font-size:28px;margin-bottom:10px;color:#a9b7c9}.empty strong{display:block;color:#394b65;margin-bottom:5px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.form-grid .span-2{grid-column:1/-1}.field{display:grid;gap:7px}.field label,.form-stack label{font-size:12px;font-weight:700;color:#4d5f79}.field small{font-size:10px;color:#93a0b1;font-weight:400}.form-actions{display:flex;justify-content:flex-end;gap:9px;padding-top:15px;border-top:1px solid var(--line);margin-top:18px}.modal-backdrop{position:fixed;inset:0;background:#0b17306b;z-index:60;display:grid;place-items:center;padding:20px}.modal{background:#fff;border-radius:15px;width:min(680px,100%);max-height:92vh;overflow:auto;box-shadow:0 25px 80px #07132840}.modal.wide{width:min(930px,100%)}.modal-head{padding:20px 23px;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;justify-content:space-between}.modal-head h2{margin:0;font:800 18px Manrope,sans-serif}.modal-head p{margin:5px 0 0;color:var(--muted);font-size:12px}.modal-body{padding:22px 23px}.modal-close{border:0;background:#f2f5f9;color:#6c7d95;border-radius:8px;width:33px;height:33px;font-size:20px}.modal-foot{padding:15px 23px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:9px}.toast-root{position:fixed;right:20px;bottom:20px;z-index:100;display:grid;gap:8px}.toast{min-width:250px;max-width:380px;background:#142640;color:white;border-radius:10px;padding:12px 15px;box-shadow:var(--shadow);font-size:12px;display:flex;gap:9px;align-items:flex-start}.toast.error{background:#9e3443}.toast.success{background:#0b805b}.chart-area{padding:16px 18px 13px}.chart-svg{width:100%;height:220px;display:block;overflow:visible}.chart-legend{display:flex;gap:15px;justify-content:flex-end;font-size:11px;color:#74839a}.legend-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}.router-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.router-card{padding:17px}.router-card-top{display:flex;justify-content:space-between;gap:10px}.router-name{font:800 15px Manrope,sans-serif}.router-meta{color:#8290a4;font-size:11px;margin-top:4px}.router-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0}.router-stats div{background:#f7f9fc;border-radius:8px;padding:9px}.router-stats small{display:block;color:#8a97a8;font-size:10px}.router-stats strong{display:block;margin-top:5px;font-size:14px}.voucher-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.voucher-card{border-radius:10px;overflow:hidden;border:1px solid #dce5f0;position:relative;min-height:148px;background:linear-gradient(130deg,#102344,#1d4f8f);color:#fff;padding:15px}.voucher-card.minimal{background:#fff;color:#1b2c44;border:1px dashed #8ea2bb}.voucher-card.classic{background:linear-gradient(135deg,#123c65,#087c82)}.voucher-card .vbrand{font:800 10px Manrope,sans-serif;letter-spacing:.14em;opacity:.85}.voucher-card .vcode{font:800 24px Manrope,sans-serif;letter-spacing:.12em;margin:17px 0 7px}.voucher-card .vmeta{display:flex;justify-content:space-between;gap:8px;font-size:10px;opacity:.86}.voucher-card .vprice{position:absolute;top:13px;right:13px;font-weight:800;font-size:12px}.voucher-card .vfoot{margin-top:13px;padding-top:8px;border-top:1px solid #ffffff35;font-size:9px;opacity:.75}.voucher-card.minimal .vfoot{border-color:#dbe3ec}.pill-tabs{display:flex;gap:5px;background:#f1f4f8;padding:4px;border-radius:9px}.pill-tabs button{border:0;background:transparent;border-radius:6px;padding:7px 10px;font-size:11px;color:#76869c;font-weight:700}.pill-tabs button.active{background:#fff;color:#285fac;box-shadow:0 1px 4px #10234412}.code-result{background:#f7f9fc;border:1px solid var(--line);border-radius:10px;padding:13px;margin-top:12px}.income-bar{height:9px;border-radius:10px;background:#edf1f6;overflow:hidden}.income-bar>span{height:100%;display:block;background:linear-gradient(90deg,#2e78e6,#62b5f3);border-radius:10px}.notice{padding:12px 16px;margin:0 30px;border-radius:9px;background:#fff8e9;color:#8a5b13;border:1px solid #ffebc7;font-size:12px}.warning-box{background:#fff8e9;border:1px solid #f4dfb7;padding:12px;border-radius:8px;color:#885c16;font-size:11px;line-height:1.6}.success-box{background:#ebf8f2;border:1px solid #d2eddf;padding:12px;border-radius:8px;color:#147b56;font-size:11px}.login-shell{min-height:100vh;background:radial-gradient(circle at 15% 20%,#1b3d6d,#0b1730 55%,#071123);display:grid;place-items:center;padding:24px}.login-card{width:min(445px,100%);background:white;border-radius:18px;padding:33px 34px;box-shadow:0 28px 80px #0005}.login-card .brand strong{color:#14243e}.login-card .brand span{color:#6482a9}.login-copy{margin:32px 0 24px}.login-copy h1{font:800 27px Manrope,sans-serif;margin:7px 0}.login-copy p:not(.eyebrow){color:#8090a5;line-height:1.6;font-size:13px}.form-stack{display:grid;gap:15px}.form-stack label{display:grid;gap:7px}.form-stack input{border:1px solid #dce3ed;border-radius:8px;padding:12px;outline:0}.form-stack input:focus{border-color:#71a5f3;box-shadow:0 0 0 3px #2c71e81b}.form-error{color:#c33e50;font-size:11px;min-height:14px}.login-foot{margin-top:24px;padding-top:15px;border-top:1px solid var(--line);font-size:10px;color:#9ba6b4;text-align:center}.print-only{display:none}
@media(max-width:1100px){.grid.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.row-2{grid-template-columns:1fr}.voucher-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.sidebar{transform:translateX(-100%);transition:.2s}.sidebar.open{transform:translateX(0)}.main-area{margin-left:0}.topbar{padding:0 17px;height:75px}.mobile-menu{display:block;margin-right:8px}.topbar{justify-content:flex-start}.top-title{flex:1}.top-title h1{font-size:19px}.top-actions .date-chip{display:none}.page-content{padding:17px 13px}.grid.kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.metric{padding:14px}.metric-value{font-size:22px}.row-3,.router-grid{grid-template-columns:1fr}.voucher-grid{grid-template-columns:1fr 1fr}.form-grid{grid-template-columns:1fr}.form-grid .span-2{grid-column:auto}.app-footer{padding:13px}.system-pill{display:none}}
@media(max-width:430px){.grid.kpis{grid-template-columns:1fr 1fr}.voucher-grid{grid-template-columns:1fr}.toolbar .search{min-width:100%;width:100%}.toolbar-left,.toolbar-right{width:100%}.toolbar-right .btn{flex:1}}
@media print{body{background:white}.sidebar,.topbar,.app-footer,.no-print,.toolbar,.card-head,.page-content>.toolbar{display:none!important}.main-area{margin:0}.page-content{padding:0}.print-only{display:block}.voucher-print-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8mm;padding:8mm}.voucher-card{break-inside:avoid;min-height:46mm;-webkit-print-color-adjust:exact;print-color-adjust:exact}.voucher-card .vcode{font-size:23px}.modal-backdrop{display:none!important}}

/* v1.2.0 settings and HR-NET-style reference voucher template */
.nav-chevron{margin-left:auto;color:#8fa1bb;font-size:14px}
.settings-subnav{display:none;padding:4px 0 8px 38px}
.settings-subnav.open{display:grid;gap:2px}
.settings-subnav button{border:0;background:transparent;color:#9fb0c7;text-align:left;padding:8px 10px;border-radius:7px;font-size:11px;font-weight:600}
.settings-subnav button:hover,.settings-subnav button.active{background:#172f50;color:#fff}
.settings-layout{display:grid;grid-template-columns:190px minmax(0,1fr);gap:16px;align-items:start}
.settings-panel-nav{background:#fff;border:1px solid var(--line);border-radius:12px;padding:7px;display:grid;gap:4px;position:sticky;top:90px}
.settings-panel-nav button{border:0;background:transparent;text-align:left;padding:10px 11px;border-radius:8px;color:#63748d;font-size:11px;font-weight:700}
.settings-panel-nav button.active{background:#edf4ff;color:#245fad}
.settings-panel-main{min-width:0}
.settings-title{font:800 19px Manrope,sans-serif;margin:3px 0 0;color:#1d2f4b}
.settings-list{padding-left:19px;color:#667891;font-size:12px;line-height:2}
.logo-preview{height:130px;border:1px dashed #ccd7e5;border-radius:10px;display:grid;place-items:center;background:#f9fbfd;color:#8795a9;margin-bottom:16px;padding:10px}
.logo-preview img{max-width:100%;max-height:105px;object-fit:contain}
.qris-preview{max-width:210px;max-height:210px;object-fit:contain;border:1px solid var(--line);border-radius:10px;padding:8px;background:#fff;margin:0 0 15px}
.license-badge{display:grid;gap:8px;padding:18px;border-radius:10px;background:#f4f7fb;border:1px solid var(--line);margin-bottom:16px}
.license-badge strong{font:800 16px Manrope,sans-serif;color:#28466f}
.license-badge span{font-size:11px;color:#a16a16;font-weight:800}
.voucher-card.reference{--voucher-accent:#008000;width:190px;min-height:112px;border:1px solid #444;border-radius:3px;background:#fff;color:#333;padding:5px;display:flex;flex-direction:column;gap:4px;font-family:Arial,sans-serif;box-shadow:none}
.voucher-card.reference .ref-top{height:29px;display:flex;align-items:center;justify-content:space-between;gap:6px;border-bottom:1px solid #ddd;padding:0 2px}
.voucher-card.reference .ref-logo-area{min-width:70px;max-width:95px;display:flex;align-items:center;height:28px;overflow:hidden}
.voucher-card.reference .ref-logo{max-width:94px;max-height:27px;object-fit:contain}
.voucher-card.reference .ref-brand-text{font-size:9px;font-weight:800;color:var(--voucher-accent);line-height:1.2}
.voucher-card.reference .ref-price{font-size:17px;font-weight:900;color:var(--voucher-accent);white-space:nowrap}
.voucher-card.reference .ref-content{display:grid;grid-template-columns:minmax(0,1fr) 70px;gap:4px;flex:1;min-height:68px;padding:1px 1px}
.voucher-card.reference .ref-left{min-width:0}
.voucher-card.reference .ref-label{font-size:8px;font-weight:800;color:#444;border-bottom:1px solid #bbb;padding:1px 0}
.voucher-card.reference .ref-code{font-size:15px;font-weight:900;color:var(--voucher-accent);line-height:1.15;overflow-wrap:anywhere;border-bottom:1px solid #bbb;padding:2px 0}
.voucher-card.reference .ref-code small{font-size:11px}
.voucher-card.reference .ref-details{font-size:8px;font-weight:700;line-height:1.35;color:#171717;margin-top:4px}
.voucher-card.reference .ref-qr{display:grid;place-items:center;min-width:0}
.voucher-card.reference .ref-qr img{width:66px;height:66px;object-fit:contain;border:1px solid var(--voucher-accent);border-radius:2px;padding:2px;background:#fff}
.voucher-card.reference .ref-qr span{font-size:8px;color:#8994a4}
.voucher-card.reference .ref-footer{background:var(--voucher-accent);color:#fff;padding:3px 4px;display:flex;justify-content:space-between;gap:3px;font-size:7px;line-height:1.2}
.voucher-card.reference .ref-footer span{white-space:nowrap}
.voucher-card.reference.preview{width:min(100%,260px);min-height:165px;padding:7px;box-shadow:0 8px 20px #1c36520c}
.voucher-card.reference.preview .ref-top{height:42px}
.voucher-card.reference.preview .ref-logo{max-width:125px;max-height:36px}
.voucher-card.reference.preview .ref-brand-text{font-size:11px}
.voucher-card.reference.preview .ref-price{font-size:22px}
.voucher-card.reference.preview .ref-content{grid-template-columns:minmax(0,1fr) 82px;min-height:95px}
.voucher-card.reference.preview .ref-label{font-size:10px}
.voucher-card.reference.preview .ref-code{font-size:20px}
.voucher-card.reference.preview .ref-details{font-size:9px}
.voucher-card.reference.preview .ref-qr{border:1px dashed #d7e0ea;border-radius:4px;color:#8b9bb0}
.voucher-card.reference.preview .qr-sample{width:65px;height:65px;display:grid;place-items:center;border:5px solid #1b2432;color:#1b2432;font-size:13px;font-weight:900;background:repeating-linear-gradient(45deg,#fff,#fff 3px,#202b39 3px,#202b39 5px)}
.voucher-card.reference.preview .ref-footer{font-size:8px;padding:4px 5px}
@media(max-width:900px){.settings-layout{grid-template-columns:1fr}.settings-panel-nav{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}.settings-panel-nav button{font-size:10px}}
@media print{.voucher-card.reference{width:190px;min-height:123px;box-shadow:none;break-inside:avoid;-webkit-print-color-adjust:exact;print-color-adjust:exact}.voucher-card.reference .ref-footer{-webkit-print-color-adjust:exact;print-color-adjust:exact}}


/* v1.2.0 HTML voucher editor and live preview */
.html-template-editor{width:100%;min-height:380px;resize:vertical;border:1px solid #cfd9e7;border-radius:9px;padding:13px;background:#101b2e;color:#d9e7ff;font:12px/1.55 Consolas,"Courier New",monospace;tab-size:2;white-space:pre;overflow:auto}
.html-template-editor:focus{outline:2px solid #7eadee;outline-offset:1px}
.voucher-html-preview{padding:12px;border:1px dashed #cbd6e4;border-radius:9px;background:#f7f9fc;overflow:auto;min-height:180px;display:flex;align-items:flex-start;justify-content:flex-start}
.voucher-html-preview .vhtml-card{width:280px!important;height:165px!important;min-height:165px!important;max-width:100%;}
.voucher-wrap-html{min-width:0}.voucher-html-screen{width:100%;min-height:120px;overflow:hidden;background:#fff;border:1px solid #dce5f0;border-radius:7px;padding:5px}
.voucher-html-screen .vhtml-card{width:100%;min-height:112px}
.voucher-html-screen>style{display:none}
#voucherTemplateForm input[type=checkbox]{width:auto;display:inline-block;margin-right:7px}
@media(max-width:760px){.html-template-editor{min-height:300px}.voucher-html-preview{overflow-x:auto}}

/* v1.4.2 voucher inventory lists codes only; card layouts appear only in print preview. */
.voucher-inventory-table{min-width:1120px}
.voucher-inventory-table th:first-child,.voucher-inventory-table td:first-child{width:38px;text-align:center;padding-left:10px;padding-right:8px}
.voucher-inventory-table td{white-space:nowrap}
.voucher-code-text{font:800 13px Manrope,sans-serif;letter-spacing:.04em;color:#087e58}
.voucher-table-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-top:1px solid var(--line)}
.voucher-row-actions{display:flex;gap:5px;align-items:center}
.voucher-row-actions .btn{padding:6px 8px;font-size:10px}
#voucherRows input[type=checkbox],#voucherSelectPage{width:15px;height:15px;accent-color:#16845f;cursor:pointer}
#voucherPrintForm .field small{font-size:10px;line-height:1.5;color:#8b98a9}


/* v1.4.6: compact voucher inventory rows and page-size selector. */
.voucher-inventory-table th{padding:9px 10px}
.voucher-inventory-table td{padding:6px 10px;font-size:11px;line-height:1.25}
.voucher-inventory-table .badge{padding:4px 7px;font-size:9px}
.voucher-inventory-table .voucher-code-text{font-size:12px}
.voucher-row-actions .btn{padding:4px 7px;font-size:10px}
.voucher-page-size-label{font-size:11px;color:var(--muted);font-weight:700;white-space:nowrap}
.voucher-table-footer{padding:8px 12px}

/* v1.4.7: raise local voucher generation batch maximum to 1,100. */


/* v1.4.8: bulk selection delete action. */
#deleteSelectedVouchers:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}


/* v1.4.9: refreshed, color-coded profile package form. */
.modal:has(.profile-form){width:min(790px,100%);}
.profile-form{display:grid;gap:13px;}
.profile-section{border:1px solid #e2eaf5;border-radius:13px;padding:14px;background:linear-gradient(135deg,#ffffff 0%,#f8faff 100%);box-shadow:0 3px 12px rgba(33,69,120,.035);}
.profile-section-router{background:linear-gradient(135deg,#f1f6ff 0%,#f8fbff 100%);border-color:#d8e5fb;}
.profile-section-heading{display:flex;align-items:center;gap:10px;margin:0 0 13px;}
.profile-section-heading>div{display:grid;gap:3px;}
.profile-section-heading strong{font:800 12px Manrope,sans-serif;color:#263b5b;letter-spacing:.01em;}
.profile-section-heading small{font-size:10px;color:#8190a6;line-height:1.4;}
.profile-step{width:29px;height:29px;border-radius:9px;display:grid;place-items:center;font:800 10px Manrope,sans-serif;flex:none;}
.profile-step.step-blue{background:#dceaff;color:#2764bc;}
.profile-step.step-indigo{background:#e8e8ff;color:#5852ba;}
.profile-step.step-green{background:#ddf5e9;color:#12835b;}
.profile-step.step-slate{background:#e8eef5;color:#526783;}
.profile-fields-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px 15px;}
.profile-form .field{min-width:0;gap:6px;}
.profile-form .field label{font-size:11px;color:#435875;font-weight:800;}
.profile-form .field small{font-size:9.5px;line-height:1.45;color:#8392a8;}
.profile-input{height:43px!important;border-radius:9px!important;padding:10px 12px!important;font-size:12px!important;font-weight:600!important;transition:border-color .16s,box-shadow .16s,background .16s!important;}
.profile-input.tone-blue{background:#f0f6ff;border-color:#d7e5fb;color:#244a7d;}
.profile-input.tone-indigo{background:#f3f2ff;border-color:#e0defc;color:#46418e;}
.profile-input.tone-cyan{background:#effaff;border-color:#d2edf8;color:#17617b;}
.profile-input.tone-violet{background:#f7f2ff;border-color:#e9dcff;color:#64449a;}
.profile-input.tone-amber{background:#fff8eb;border-color:#f4e4c4;color:#845718;}
.profile-input.tone-slate{background:#f3f6fa;border-color:#dce5ef;color:#42536b;}
.profile-input.tone-rose{background:#fff4f5;border-color:#f7dfe3;color:#8b4854;}
.profile-input:focus,.profile-input-wrap:focus-within .profile-input{background:#fff!important;border-color:#6fa2ef!important;box-shadow:0 0 0 3px rgba(44,113,232,.13)!important;}
.profile-input-wrap{height:43px;border:1px solid;border-radius:9px;display:flex;align-items:center;overflow:hidden;}
.profile-input-wrap.tone-green{background:#edfaf3;border-color:#cdeedc;}
.profile-input-wrap>span{padding-left:12px;font-size:11px;font-weight:800;color:#16835b;}
.profile-input-wrap .profile-input{border:0!important;background:transparent!important;box-shadow:none!important;min-width:0;}
.profile-input-wrap:focus-within{background:#fff;border-color:#6fa2ef;box-shadow:0 0 0 3px rgba(44,113,232,.13);}
.profile-input-wrap:focus-within .profile-input{background:transparent!important;}
@media(max-width:680px){.modal:has(.profile-form){width:min(100%,560px)}.profile-fields-grid{grid-template-columns:1fr;gap:12px}.profile-section{padding:12px}.profile-section-heading{margin-bottom:11px}}

/* v1.5.0 standalone local billing mode */
.local-storage-banner{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid #cfe9dc;border-radius:12px;background:linear-gradient(135deg,#effaf4 0%,#f6fbff 100%);color:#285b48;font-size:12px;line-height:1.5}
.profile-section-router{background:linear-gradient(135deg,#effaf4 0%,#f6fbff 100%);border-color:#cfe9dc}


/* v1.6.4: credential mode selector for voucher/member login */
.radius-overview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.radius-port-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.radius-port-grid>div{padding:13px;border:1px solid #dce8f5;border-radius:11px;background:linear-gradient(135deg,#eff6ff,#f7fbff);display:grid;gap:5px}
.radius-port-grid small{font-size:10px;color:#71839c;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.radius-port-grid strong{font-size:17px;color:#245b98}
.radius-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:14px}
.radius-stats span{padding:9px;border-radius:9px;background:#f5f7fb;color:#63748c;font-size:10px;display:flex;flex-direction:column;gap:4px}
.radius-stats b{font-size:16px;color:#223653}
.radius-secret-box{margin-top:14px;color:#24583e;overflow-wrap:anywhere}
.radius-secret-box>p{font-size:11px;line-height:1.55}
.radius-secret-box label{display:block;font-size:10px;font-weight:800;margin:11px 0 5px;color:#315b48}
.radius-secret-value{padding:10px 12px;border-radius:9px;background:#fff;border:1px solid #b8dec9;font-family:monospace;font-size:13px;color:#125b36;overflow-wrap:anywhere;user-select:all}
.radius-code{white-space:pre-wrap;word-break:break-word;background:#101d31;color:#dce9ff;padding:13px;border-radius:10px;font:11px/1.6 Consolas,monospace;max-height:240px;overflow:auto}
@media(max-width:850px){.radius-overview-grid{grid-template-columns:1fr}.radius-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* v1.6.7: expired voucher KPI accent */
.metric-red::after{background:#fff0f1}


/* v1.6.9 — HR-NET branding and five-card dashboard */
.sidebar-brand {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:5px;
  padding:2px 7px 16px;
  margin:0 0 7px;
  border-bottom:1px solid #ffffff20;
}
.sidebar-brand img {
  display:block;
  width:min(100%, 198px);
  height:auto;
  max-height:92px;
  object-fit:contain;
  object-position:left center;
  filter:none;
}
.sidebar-brand .brand-caption {
  display:block;
  margin:0;
  color:#eef5ff;
  font-size:11px;
  font-weight:800;
  letter-spacing:.22em;
}
.sidebar .nav-label { margin-top:22px; }
.login-brand {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
}
.login-brand img {
  display:block;
  width:min(100%, 245px);
  height:auto;
  max-height:112px;
  object-fit:contain;
  filter:none;
}
.login-brand .brand-caption {
  display:block;
  margin:0;
  color:#6482a9;
  font-size:11px;
  font-weight:800;
  letter-spacing:.2em;
}
.grid.kpis {
  grid-template-columns:repeat(5,minmax(0,1fr));
}
.metric-online .metric-value { margin-top:8px; }
.metric-online .metric-icon {
  background:#f0ebff;
  color:#7654c9;
  font-size:17px;
}
.metric-user-list {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px;
  margin-top:8px;
  min-height:21px;
  position:relative;
  z-index:1;
}
.online-user-chip,
.online-user-more {
  display:inline-flex;
  align-items:center;
  max-width:100%;
  padding:3px 6px;
  border-radius:6px;
  background:#f1edff;
  color:#6345ae;
  font-size:9px;
  line-height:1.2;
  font-weight:800;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.online-user-more { background:#edf3ff; color:#386bb7; }
.online-empty { color:#9aa5b4; font-size:10px; }
.dashboard-bottom { grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); }
@media(max-width:1350px) {
  .grid.kpis { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:760px) {
  .grid.kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dashboard-bottom { grid-template-columns:1fr; }
  .sidebar-brand img { width:min(100%,190px); }
}
@media(max-width:430px) {
  .grid.kpis { grid-template-columns:1fr; }
}


/* Dashboard KPI gradients inspired by the HR-NET reference */
.grid.kpis .metric {
  color:#fff;
  border:1px solid #ffffff2a;
  box-shadow:0 10px 24px rgba(12,39,90,.13);
}
.grid.kpis .metric-top { color:#f4f8ff; }
.grid.kpis .metric-value { color:#fff; }
.grid.kpis .metric-foot { color:#e2edff; }
.grid.kpis .metric-icon {
  background:#ffffff25!important;
  color:#fff!important;
}
.grid.kpis .metric::after { background:#ffffff; opacity:.07; }
.grid.kpis .metric-green { background:linear-gradient(135deg,#02a989 0%,#0784b8 100%); }
.grid.kpis .metric-purple { background:linear-gradient(135deg,#5745d9 0%,#9233dd 100%); }
.grid.kpis .metric-blue { background:linear-gradient(135deg,#087fdc 0%,#124db1 100%); }
.grid.kpis .metric-red { background:linear-gradient(135deg,#ed8b26 0%,#bd3eab 100%); }
.grid.kpis .metric-online { background:linear-gradient(135deg,#039ed8 0%,#1765c4 100%); }
.grid.kpis .online-user-chip,
.grid.kpis .online-user-more {
  background:#ffffff24;
  color:#fff;
  border:1px solid #ffffff27;
}
.grid.kpis .online-empty { color:#deecff; }
.dashboard-bottom .card { min-height:260px; }
@media(max-width:760px) {
  .sidebar-brand { padding-bottom:12px; }
  .login-brand img { max-width:210px; }
}

/* v1.6.9 — HR-NET dark blue / cyan / purple visual theme */
:root{
  --navy:#061947;
  --navy2:#0a2d70;
  --blue:#147de5;
  --blue2:#0864c8;
  --cyan:#19d4f2;
  --ink:#f3f7ff;
  --muted:#b5c9e9;
  --line:rgba(91,174,255,.34);
  --bg:#071a4d;
  --white:#fff;
  --green:#00d4a5;
  --greenbg:rgba(0,212,165,.16);
  --red:#ff647d;
  --redbg:rgba(255,75,112,.16);
  --amber:#ffd166;
  --amberbg:rgba(255,190,65,.16);
  --shadow:0 16px 42px rgba(0,5,36,.32);
  font-family:'DM Sans','Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--ink);
}
html{background:#061642;}
body{
  min-height:100vh;
  background:
    radial-gradient(ellipse at 12% 0%,rgba(0,196,255,.22),transparent 34%),
    radial-gradient(ellipse at 95% 4%,rgba(177,34,255,.30),transparent 35%),
    radial-gradient(ellipse at 56% 100%,rgba(12,94,218,.24),transparent 42%),
    linear-gradient(122deg,#061744 0%,#092b70 43%,#17136a 76%,#24105f 100%);
  background-attachment:fixed;
  color:#f3f7ff;
  font-size:14px;
  font-weight:500;
  letter-spacing:.005em;
}
body,button,input,select,textarea{font-family:'DM Sans','Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;}
button{font-weight:700;}
.app{background:transparent;}
.sidebar{
  background:
    radial-gradient(ellipse at 100% 0%,rgba(168,37,255,.34),transparent 34%),
    radial-gradient(ellipse at 0% 70%,rgba(0,171,255,.15),transparent 42%),
    linear-gradient(165deg,#061344 0%,#09266d 48%,#211064 100%);
  color:#f2f7ff;
  border-right:1px solid rgba(69,170,255,.42);
  box-shadow:12px 0 38px rgba(0,7,45,.2);
}
.sidebar::after{
  content:"";
  position:absolute;
  pointer-events:none;
  top:0;right:0;left:0;height:155px;
  background:linear-gradient(135deg,transparent 34%,rgba(0,185,255,.09) 62%,rgba(190,36,255,.18));
  border-bottom:1px solid rgba(91,185,255,.18);
  z-index:-1;
}
.sidebar-brand{border-bottom-color:rgba(133,196,255,.25);}
.sidebar .nav-label{color:#9fcaff;font-weight:800;}
.nav-item{color:#d3e4ff;font-weight:700;}
.nav-item:hover{background:rgba(27,151,255,.20);color:#fff;box-shadow:inset 0 0 0 1px rgba(69,192,255,.2);}
.nav-item.active{
  color:#fff;
  background:linear-gradient(105deg,#078fdc 0%,#3159e8 52%,#9c26ec 100%);
  box-shadow:0 7px 22px rgba(0,145,255,.28),inset 0 0 0 1px rgba(255,255,255,.26);
}
.nav-icon,.nav-item.active .nav-icon{color:#fff;}
.settings-subnav button{color:#c0d6f7;}
.settings-subnav button:hover,.settings-subnav button.active{background:rgba(35,145,255,.22);color:#fff;}
.sidebar-user{border-top-color:rgba(137,196,255,.25);}
.avatar{background:linear-gradient(135deg,#12a6f5,#7149ec);box-shadow:0 5px 16px #0004;}
.user-meta strong{color:#fff;}
.user-meta small,.sidebar-version{color:#a4bee5;}
.main-area{background:transparent;}
.topbar{
  background:linear-gradient(105deg,rgba(5,24,74,.90) 0%,rgba(11,65,145,.88) 52%,rgba(80,24,142,.90) 100%);
  color:#fff;
  border-bottom:1px solid rgba(72,174,255,.36);
  box-shadow:0 8px 26px rgba(0,5,37,.16);
  backdrop-filter:blur(16px);
}
.top-title h1{font-family:'Manrope','DM Sans',sans-serif;color:#fff;font-size:25px;font-weight:800;letter-spacing:-.025em;}
.eyebrow{color:#9edcff;font-weight:800;letter-spacing:.18em;}
.date-chip{color:#e2efff;font-weight:600;}
.system-pill{background:rgba(8,29,83,.62);border:1px solid rgba(109,192,255,.40);color:#f2f8ff;box-shadow:inset 0 1px 0 #ffffff12;}
.pulse-dot{background:#00e59b;box-shadow:0 0 0 4px rgba(0,229,155,.16),0 0 14px #00e59b;}
.page-content{max-width:1900px;padding:24px 30px 28px;}
.app-footer{background:rgba(4,19,60,.78);border-top:1px solid rgba(73,168,255,.35);color:#c3d8f7;font-weight:600;}
.mobile-menu{color:#fff;}
.icon-btn{color:#eaf4ff;}
.icon-btn:hover{background:rgba(80,173,255,.18);}
.card{
  color:#f2f7ff;
  background:linear-gradient(135deg,rgba(13,48,111,.94),rgba(20,33,105,.94) 58%,rgba(30,22,104,.96));
  border:1px solid rgba(48,174,255,.60);
  border-radius:15px;
  box-shadow:0 12px 30px rgba(0,8,49,.24),inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(12px);
}
.card-head h2,.section-title{font-family:'Manrope','DM Sans',sans-serif;color:#fff;font-weight:800;letter-spacing:-.01em;}
.card-head p{color:#c0d8fa;font-weight:500;}
.card-body{color:#e9f3ff;}
.toolbar .eyebrow{color:#a8dcff;}
.secondary-text{color:#bbd2f3;}
.grid.kpis{gap:16px;margin-bottom:19px;}
.grid.kpis .metric{
  border:1px solid rgba(94,202,255,.6);
  border-radius:16px;
  box-shadow:0 12px 28px rgba(0,8,48,.26),inset 0 1px 0 rgba(255,255,255,.17);
  min-height:140px;
}
.grid.kpis .metric-top{color:#f7fbff;font-weight:800;font-size:13px;}
.grid.kpis .metric-value{font-family:'Manrope','DM Sans',sans-serif;color:#fff;font-weight:800;font-size:30px;letter-spacing:-.035em;text-shadow:0 2px 10px rgba(0,0,0,.12);}
.grid.kpis .metric-foot{color:#e4f1ff;font-size:11px;font-weight:600;line-height:1.45;}
.grid.kpis .metric-icon{background:rgba(255,255,255,.2)!important;color:#fff!important;border:1px solid rgba(255,255,255,.18);width:40px;height:40px;border-radius:12px;}
.grid.kpis .metric::after{background:#fff;opacity:.065;}
.grid.kpis .metric-green{background:linear-gradient(128deg,#00b98f 0%,#0586ba 100%);}
.grid.kpis .metric-purple{background:linear-gradient(128deg,#5942dd 0%,#9929dd 100%);}
.grid.kpis .metric-blue{background:linear-gradient(128deg,#078edb 0%,#1748b6 100%);}
.grid.kpis .metric-red{background:linear-gradient(128deg,#f29a23 0%,#bd36a7 100%);}
.grid.kpis .metric-online{background:linear-gradient(128deg,#08b8db 0%,#1266cd 100%);}
.metric-user-list{gap:5px;}
.grid.kpis .online-user-chip,.grid.kpis .online-user-more{background:rgba(255,255,255,.2);color:#fff;border:1px solid rgba(255,255,255,.22);font-size:10px;}
.grid.kpis .online-empty{color:#e9f7ff;}
.dashboard-bottom{gap:18px;}
.dashboard-bottom .card{min-height:265px;background:linear-gradient(140deg,rgba(9,49,112,.96),rgba(29,25,105,.96));border-color:rgba(46,167,255,.65);}
.dashboard-bottom .card-head{padding:20px 22px 0;}
.dashboard-bottom .card-body{padding-top:16px;}
.sale-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 2px;border-bottom:1px solid rgba(156,203,255,.24);color:#f4f8ff;}
.sale-row:last-child{border-bottom:0;}
.sale-row strong{color:#fff;font-family:'Manrope','DM Sans',sans-serif;font-size:13px;font-weight:800;}
.sale-row small{display:block;color:#bdd7fa;font-size:11px;margin-top:3px;}
.sale-row b{color:#ffe05a;font-family:'Manrope','DM Sans',sans-serif;font-size:14px;font-weight:800;white-space:nowrap;}
.chart-area{color:#eaf4ff;}
.chart-svg text{fill:#c9defa!important;font-family:'DM Sans',sans-serif;}
.chart-svg line{stroke:rgba(194,220,255,.25);}
.chart-legend{color:#c5dcfa;}
.empty{color:#b9d1f2;}
.empty strong{color:#fff;}
.toolbar-right .btn.outline,.btn.outline{background:rgba(7,35,91,.54);border-color:rgba(90,186,255,.72);color:#eff8ff;box-shadow:inset 0 1px 0 rgba(255,255,255,.08);}
.btn.outline:hover{background:rgba(20,122,220,.28);border-color:#29c5ff;color:#fff;}
.btn.primary{background:linear-gradient(105deg,#078fe2 0%,#3157e8 58%,#9a28eb 100%);border-color:rgba(143,201,255,.48);color:#fff;box-shadow:0 7px 18px rgba(0,99,226,.3),inset 0 1px 0 rgba(255,255,255,.22);}
.btn.primary:hover{background:linear-gradient(105deg,#06a8ee,#5261f2 58%,#b12af2);}
.btn.secondary{background:rgba(16,49,103,.85);border-color:rgba(96,170,235,.4);color:#e4f2ff;}
.btn.success{background:rgba(0,191,136,.17);border-color:rgba(0,225,168,.45);color:#9cffdf;}
.btn.danger{background:rgba(255,68,104,.14);border-color:rgba(255,102,130,.48);color:#ffc4d0;}
.input,select,textarea,.form-stack input{
  background:rgba(5,24,67,.74);
  border:1px solid rgba(102,171,235,.48);
  color:#f3f8ff;
  border-radius:9px;
}
.input::placeholder,textarea::placeholder,.form-stack input::placeholder{color:#91afd5;}
.input:focus,select:focus,textarea:focus,.form-stack input:focus{background:rgba(7,31,82,.96);border-color:#32c8ff;box-shadow:0 0 0 3px rgba(25,190,255,.16);color:#fff;}
select option{background:#0c255c;color:#fff;}
.field label,.form-stack label{color:#dcecff;font-weight:800;}
.field small{color:#a8c5e8;}
.data-table{color:#edf5ff;}
.data-table th{background:rgba(6,27,76,.92);color:#a9ddff;border-bottom:1px solid rgba(89,179,255,.34);}
.data-table td{color:#e7f1ff;border-bottom:1px solid rgba(135,185,239,.18);}
.data-table tbody tr:hover{background:rgba(18,112,198,.18);}
.primary-text{color:#fff;}
.secondary-text{color:#b9d1f1;}
.badge.neutral{background:rgba(182,205,240,.15);color:#d7e8ff;}
.badge.info{background:rgba(41,149,255,.18);color:#b7e6ff;}
.badge.online,.badge.paid,.badge.available{background:rgba(0,207,145,.17);color:#9affd8;}
.badge.offline,.badge.disabled{background:rgba(255,74,111,.17);color:#ffc3d0;}
.badge.pending{background:rgba(255,190,65,.17);color:#ffe0a0;}
.settings-layout{color:#edf5ff;}
.settings-panel-nav{background:linear-gradient(145deg,rgba(10,48,106,.95),rgba(25,28,99,.95));border-color:rgba(76,169,255,.46);box-shadow:var(--shadow);}
.settings-panel-nav button{color:#c7dcf8;}
.settings-panel-nav button.active{background:linear-gradient(105deg,#078edc,#593bd7);color:#fff;}
.settings-title{color:#fff;}
.settings-list{color:#d2e5ff;}
.router-card{background:linear-gradient(140deg,rgba(10,49,111,.96),rgba(25,29,101,.96));}
.router-name{color:#fff;}
.router-meta,.router-stats small{color:#b8d0f1;}
.router-stats div{background:rgba(4,24,67,.55);border:1px solid rgba(111,178,239,.2);}
.router-stats strong{color:#fff;}
.modal-backdrop{background:rgba(0,7,34,.76);backdrop-filter:blur(5px);}
.modal{background:linear-gradient(145deg,#0d3476,#17165e);border:1px solid rgba(81,178,255,.55);color:#f2f7ff;box-shadow:0 28px 90px rgba(0,0,0,.55);}
.modal-head,.modal-foot{border-color:rgba(126,184,241,.24);}
.modal-head h2{color:#fff;}
.modal-head p{color:#bed4f4;}
.modal-close{background:rgba(255,255,255,.12);color:#eaf5ff;}
.notice{background:linear-gradient(100deg,#ffca53,#ff8a57 68%,#df67ae);border-color:rgba(255,228,151,.7);color:#39265a;font-weight:700;}
.warning-box{background:rgba(255,179,59,.13);border-color:rgba(255,190,75,.38);color:#ffe0a8;}
.success-box{background:rgba(0,205,148,.13);border-color:rgba(0,226,172,.36);color:#a8ffe0;}
.profile-section{background:linear-gradient(140deg,rgba(9,47,105,.9),rgba(24,32,104,.9));border-color:rgba(90,175,246,.4);}
.profile-section-heading strong{color:#f4f8ff;}
.profile-section-heading small{color:#b2cae9;}
.profile-input,.profile-input.tone-green,.profile-input.tone-blue,.profile-input.tone-cyan,.profile-input.tone-violet,.profile-input.tone-amber,.profile-input.tone-slate,.profile-input.tone-rose{
  background:rgba(5,24,67,.76)!important;border-color:rgba(102,171,235,.48)!important;color:#f3f8ff!important;
}
.profile-input-wrap,.profile-input-wrap.tone-green{background:rgba(5,24,67,.76);border-color:rgba(102,171,235,.48);}
.profile-input-wrap>span{color:#9edbff;}
.profile-input:focus,.profile-input-wrap:focus-within .profile-input{background:rgba(7,31,82,.96)!important;color:#fff!important;}
.local-storage-banner{background:rgba(0,205,148,.12);border-color:rgba(0,226,172,.36);color:#b4ffe5;}
.code-result,.pill-tabs{background:rgba(5,24,67,.62);border-color:rgba(91,171,241,.3);color:#eaf4ff;}
.pill-tabs button{color:#bdd4f3;}
.pill-tabs button.active{background:linear-gradient(100deg,#078edc,#6840dc);color:#fff;}
.router-stats,.income-bar{color:#fff;}
.income-bar{background:rgba(215,233,255,.15);}
.empty .empty-icon{color:#9ecfff;}
.login-shell{background:radial-gradient(ellipse at 10% 8%,rgba(0,190,255,.24),transparent 36%),radial-gradient(ellipse at 95% 8%,rgba(175,35,255,.25),transparent 36%),linear-gradient(130deg,#061744,#0a2e71 55%,#241064);}
.login-card{background:linear-gradient(145deg,#0e3475,#1b1c69);border:1px solid rgba(94,183,255,.48);color:#f4f8ff;box-shadow:0 28px 80px rgba(0,0,0,.46);}
.login-card .brand strong,.login-copy h1{color:#fff;}
.login-card .brand span,.login-copy p:not(.eyebrow){color:#b7d1f2;}
.login-foot{border-color:rgba(132,190,245,.23);color:#a9c6e8;}
.form-error{color:#ffb9c6;}
.form-stack input{background:rgba(5,24,67,.72);color:#fff;}
.toast{background:linear-gradient(110deg,#0d3474,#2b236f);border:1px solid rgba(75,181,255,.38);color:#fff;}
.toast.error{background:linear-gradient(110deg,#7e254d,#a52d50);}
.toast.success{background:linear-gradient(110deg,#087f78,#08785e);}
.app-footer{font-size:11px;letter-spacing:.02em;}
@media(max-width:1350px){.grid.kpis{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(max-width:760px){
  .sidebar{box-shadow:18px 0 45px rgba(0,0,0,.42);}
  .topbar{background:linear-gradient(105deg,rgba(5,24,74,.97),rgba(15,65,138,.96),rgba(80,24,142,.96));}
  .page-content{padding:17px 13px 22px;}
  .grid.kpis{grid-template-columns:repeat(2,minmax(0,1fr));}
  .dashboard-bottom{grid-template-columns:1fr;}
}
@media(max-width:430px){.grid.kpis{grid-template-columns:1fr;}.grid.kpis .metric{min-height:120px;}}


/* v1.7.0 — compact upward-scrolling activity log below latest sales */
.dashboard-left-stack{display:flex;flex-direction:column;gap:16px;min-width:0}
.dashboard-left-stack>.card{min-height:0}
.dashboard-left-stack>.card:first-child{min-height:265px}
.dashboard-left-stack .activity-card{min-height:150px;overflow:hidden}
.activity-card .card-head{display:flex;align-items:center;justify-content:space-between}
.activity-card .card-body{padding-top:10px;padding-bottom:14px}
.activity-live{display:inline-flex;align-items:center;gap:6px;color:#8df6c5;font-size:10px;font-weight:800;letter-spacing:.12em}
.activity-live i{width:7px;height:7px;border-radius:50%;background:#24e6a2;box-shadow:0 0 10px #24e6a2}
.activity-viewport{height:104px;overflow:hidden;position:relative;mask-image:linear-gradient(to bottom,transparent 0%,#000 12%,#000 88%,transparent 100%)}
.activity-track{display:flex;flex-direction:column;gap:0;animation:activityScrollUp 24s linear infinite}
.activity-viewport:hover .activity-track{animation-play-state:paused}
.activity-line{display:grid;grid-template-columns:68px 8px minmax(0,1fr);align-items:center;gap:10px;min-height:31px;border-bottom:1px solid rgba(156,203,255,.15);font-family:'DM Sans',sans-serif}
.activity-time{font-size:10px;color:#9fc5f5;font-variant-numeric:tabular-nums;white-space:nowrap}
.activity-dot{width:7px;height:7px;border-radius:50%;background:#35d9ff;box-shadow:0 0 8px currentColor}
.activity-dot.success{background:#24e6a2;color:#24e6a2}
.activity-dot.online{background:#35c4ff;color:#35c4ff}
.activity-message{font-size:11px;line-height:1.4;color:#e8f3ff;overflow-wrap:anywhere}
.activity-empty{height:84px;display:flex;align-items:center;justify-content:center;color:#a9c8ef;font-size:12px}
@keyframes activityScrollUp{0%{transform:translateY(0)}100%{transform:translateY(-48%)}}
@media(prefers-reduced-motion:reduce){.activity-track{animation:none}}
@media(max-width:760px){.dashboard-left-stack>.card:first-child{min-height:220px}.activity-card .card-head{padding-left:16px;padding-right:16px}}


/* v1.7.1 — privacy-safe online users grouped by registered RADIUS NAS */
.dashboard-right-stack{display:flex;flex-direction:column;gap:18px;min-width:0}
.dashboard-right-stack>.card{min-height:0}
.dashboard-right-stack>.card:first-child{min-height:265px}
.nas-online-panel{overflow:hidden}
.nas-online-panel .card-body{padding-top:15px}
.nas-online-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.nas-online-card{min-width:0;border:1px solid rgba(65,178,255,.42);border-radius:12px;padding:13px 14px;background:linear-gradient(135deg,rgba(7,80,145,.44),rgba(50,33,130,.42));box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.nas-online-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.nas-online-head strong{font:800 13px Manrope,'DM Sans',sans-serif;color:#f4f8ff;min-width:0;overflow-wrap:anywhere}
.nas-online-status{display:inline-flex;align-items:center;gap:5px;font-size:9px;font-weight:800;letter-spacing:.05em;white-space:nowrap;color:#bfd8f8}
.nas-online-status i{width:7px;height:7px;border-radius:50%;background:#8297b5}
.nas-online-status.is-online{color:#8af4c7}
.nas-online-status.is-online i{background:#23e6a0;box-shadow:0 0 9px #23e6a0}
.nas-online-count{display:flex;align-items:baseline;gap:8px;margin:9px 0 10px}
.nas-online-count b{font:800 27px Manrope,sans-serif;color:#fff;letter-spacing:-.04em}
.nas-online-count span{font-size:10px;color:#bdd8fb}
.nas-online-users{display:flex;gap:6px;flex-wrap:wrap;min-height:22px}
.nas-user-chip,.nas-user-more{display:inline-flex;align-items:center;gap:5px;border:1px solid rgba(159,210,255,.2);border-radius:20px;padding:4px 7px;color:#e6f4ff;background:rgba(255,255,255,.09);font-size:9px;font-weight:700}
.nas-user-chip i{width:5px;height:5px;border-radius:50%;background:#28e5a2}
.nas-user-more{color:#b9d8ff}
.nas-no-users,.nas-online-empty{font-size:10px;color:#a9c8ed}
.nas-online-empty{padding:16px 6px;text-align:center}
@media(max-width:760px){.nas-online-grid{grid-template-columns:1fr}.dashboard-right-stack>.card:first-child{min-height:0}}


/* v1.7.2 — dashboard column and row alignment */
.dashboard-bottom{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:stretch;
  gap:16px;
}
.dashboard-left-stack,
.dashboard-right-stack{
  display:grid;
  grid-template-rows:minmax(300px,auto) minmax(180px,auto);
  align-content:stretch;
  align-items:stretch;
  gap:16px;
  height:100%;
  min-width:0;
}
.dashboard-left-stack>.card,
.dashboard-right-stack>.card{
  box-sizing:border-box;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
}
.dashboard-left-stack>.card:first-child,
.dashboard-right-stack>.card:first-child{
  min-height:300px;
}
.dashboard-left-stack>.activity-card,
.dashboard-right-stack>.nas-online-panel{
  min-height:180px;
}
.dashboard-right-stack .chart-area{
  min-height:220px;
  box-sizing:border-box;
}
.nas-online-grid{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  align-items:stretch;
}
.nas-online-card{height:100%;box-sizing:border-box}
.dashboard-left-stack .activity-viewport{height:112px}

@media(max-width:760px){
  .dashboard-bottom{grid-template-columns:minmax(0,1fr);gap:14px}
  .dashboard-left-stack,
  .dashboard-right-stack{
    grid-template-rows:auto auto;
    height:auto;
    gap:14px;
  }
  .dashboard-left-stack>.card,
  .dashboard-right-stack>.card{height:auto}
  .dashboard-left-stack>.card:first-child,
  .dashboard-right-stack>.card:first-child{min-height:0}
  .dashboard-right-stack .chart-area{min-height:180px}
}


/* v1.7.3 — manual activity log scrolling, newest-first, max 20 entries */
.activity-card .activity-viewport{
  height:112px;
  max-height:112px;
  overflow-y:auto;
  overflow-x:hidden;
  position:relative;
  padding-right:8px;
  mask-image:none !important;
  scrollbar-width:thin;
  scrollbar-color:rgba(92,190,255,.65) rgba(255,255,255,.06);
  overscroll-behavior:contain;
  scroll-behavior:auto;
  cursor:default;
}
.activity-card .activity-viewport::-webkit-scrollbar{width:7px}
.activity-card .activity-viewport::-webkit-scrollbar-track{background:rgba(255,255,255,.05);border-radius:8px}
.activity-card .activity-viewport::-webkit-scrollbar-thumb{background:rgba(92,190,255,.58);border-radius:8px}
.activity-card .activity-viewport::-webkit-scrollbar-thumb:hover{background:rgba(92,190,255,.9)}
.activity-card .activity-viewport:focus-visible{outline:1px solid rgba(65,190,255,.65);outline-offset:2px}
.activity-card .activity-track{display:flex;flex-direction:column;gap:0;animation:none !important;transform:none !important}
.activity-card .activity-line{flex:0 0 auto;min-height:31px}
.activity-card .activity-empty{min-height:100px;height:auto}

/* RADIUS client state: registered is not the same as connected */
.radius-last-seen{display:block;margin-top:4px;font-size:10px;line-height:1.35;color:var(--muted,#9fb3d9)}

/* v1.7.6 activity expiry event marker */
.activity-dot.expired{background:#ff6b7a;color:#ff6b7a;box-shadow:0 0 8px rgba(255,107,122,.75)}


/* v1.7.7 — preserve centered BILLING HOTSPOT brand caption */
.sidebar-brand {
  align-items: center !important;
}
.sidebar-brand img {
  margin-left: auto !important;
  margin-right: auto !important;
  object-position: center center !important;
}
.sidebar-brand .brand-caption {
  display: block;
  width: 100%;
  text-align: center !important;
}

/* v1.7.7 — keep the activity status dot clear of the timestamp */
.activity-card .activity-line {
  display: grid;
  grid-template-columns: minmax(124px, 136px) 8px minmax(0, 1fr);
  column-gap: 9px;
  align-items: center;
}
.activity-card .activity-time {
  display: block;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}
.activity-card .activity-dot {
  position: static;
  display: block;
  flex: none;
  margin: 0;
  justify-self: center;
}
.activity-card .activity-message {
  min-width: 0;
  overflow-wrap: anywhere;
}
@media (max-width: 560px) {
  .activity-card .activity-line {
    grid-template-columns: minmax(108px, 116px) 7px minmax(0, 1fr);
    column-gap: 7px;
  }
  .activity-card .activity-time { font-size: 9px; }
}


/* v1.7.8 — compact voucher lookup details */
.voucher-check-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px;row-gap:0;margin-top:8px;border-top:1px solid rgba(110,160,220,.25)}
.voucher-check-row{display:grid;grid-template-columns:minmax(92px,108px) minmax(0,1fr);align-items:center;column-gap:7px;padding:6px 2px;border-bottom:1px solid rgba(110,160,220,.18);font-size:11px;min-width:0}
.voucher-check-row span{color:#9bb9df;min-width:0}
.voucher-check-row strong{color:#eff7ff;text-align:left;overflow-wrap:anywhere;min-width:0}
.voucher-check-note{margin-top:6px;line-height:1.35}
@media(max-width:620px){.voucher-check-details{grid-template-columns:1fr;column-gap:0}.voucher-check-row{grid-template-columns:100px minmax(0,1fr);padding:6px 2px}}


/* v1.7.8 UI refinement — compact NAS/VPN monitor and scrollable recent sales */
.dashboard-left-stack > .card.sales-card:first-child{
  min-height:0 !important;
  height:190px;
  max-height:190px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.sales-card .card-head{flex:0 0 auto;padding:13px 18px 0}
.sales-card .card-body{flex:1 1 auto;min-height:0;padding:7px 18px 12px;overflow:hidden}
.sales-viewport{
  height:100%;
  max-height:100%;
  overflow-y:auto;
  overflow-x:hidden;
  padding-right:7px;
  scrollbar-width:thin;
  scrollbar-color:rgba(92,190,255,.65) rgba(255,255,255,.06);
  overscroll-behavior:contain;
  scroll-behavior:auto;
}
.sales-viewport::-webkit-scrollbar{width:7px}
.sales-viewport::-webkit-scrollbar-track{background:rgba(255,255,255,.05);border-radius:8px}
.sales-viewport::-webkit-scrollbar-thumb{background:rgba(92,190,255,.58);border-radius:8px}
.sales-viewport::-webkit-scrollbar-thumb:hover{background:rgba(92,190,255,.9)}
.sales-viewport:focus-visible{outline:1px solid rgba(65,190,255,.65);outline-offset:2px}
.sales-viewport .sale-row{min-height:43px;padding:7px 3px}
.sales-viewport .sale-row strong{font-size:12px}
.sales-viewport .sale-row small{font-size:10px;margin-top:2px}
.sales-viewport .sale-row b{font-size:13px}
.sales-empty{min-height:100%;display:flex;align-items:center;justify-content:center;text-align:center;color:#b9d1f1;font-size:11px;line-height:1.5;padding:8px}

.nas-online-panel{min-height:150px !important}
.nas-online-panel .card-head{padding:13px 18px 0}
.nas-online-panel .card-body{padding:10px 18px 12px}
.nas-monitor-list{display:flex;flex-direction:column;gap:8px}
.nas-monitor-card{
  display:grid;
  grid-template-columns:minmax(120px,1fr) auto;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border:1px solid rgba(65,178,255,.4);
  border-radius:10px;
  background:linear-gradient(135deg,rgba(7,80,145,.34),rgba(50,33,130,.32));
}
.nas-monitor-name{font:800 12px Manrope,'DM Sans',sans-serif;color:#f4f8ff;min-width:0;overflow-wrap:anywhere}
.nas-monitor-states{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.nas-monitor-state{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.nas-monitor-label{font-size:10px;color:#b9d1f1;font-weight:700}
.nas-monitor-value{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:800;color:#ffe0a0}
.nas-monitor-value i{width:7px;height:7px;border-radius:50%;background:#f0bb59;box-shadow:0 0 7px rgba(240,187,89,.45)}
.nas-monitor-value.is-online{color:#8af4c7}
.nas-monitor-value.is-online i{background:#23e6a0;box-shadow:0 0 8px #23e6a0}
.nas-monitor-value.is-pending{color:#ffe0a0}
.nas-monitor-note{margin-top:7px;color:#9fbde4;font-size:9px;line-height:1.35}
.nas-monitor-empty{min-height:70px;display:flex;align-items:center;justify-content:center;text-align:center;color:#a9c8ed;font-size:11px}
@media(max-width:760px){
  .dashboard-left-stack > .card.sales-card:first-child{height:190px;max-height:190px}
  .nas-monitor-card{grid-template-columns:1fr;gap:8px}
  .nas-monitor-states{gap:12px}
}


/* v1.7.8 — service information and live VPS capacity panels, placed below dashboard columns */
.dashboard-extra-panels{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-top:16px;min-width:0}
.service-info-panel,.vps-capacity-panel{min-width:0;overflow:hidden;background:linear-gradient(140deg,rgba(9,49,112,.96),rgba(29,25,105,.96));border-color:rgba(46,167,255,.65)}
.service-info-panel .card-head,.vps-capacity-panel .card-head{padding:16px 20px 0}
.service-info-panel .card-body,.vps-capacity-panel .card-body{padding:12px 20px 18px}
.service-info-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 22px}
.service-info-row{display:grid;grid-template-columns:minmax(115px,.8fr) minmax(0,1.2fr);gap:12px;align-items:center;min-width:0;padding:11px 2px;border-bottom:1px solid rgba(150,190,240,.17)}
.service-info-label{display:flex;align-items:center;gap:8px;min-width:0;color:#bcd4f4;font-size:10px;font-weight:800;letter-spacing:.035em}
.service-info-icon{display:inline-grid;place-items:center;width:23px;height:23px;flex:0 0 23px;border-radius:7px;background:rgba(55,173,255,.14);color:#86d5ff;font-size:13px}
.service-info-content{min-width:0}
.service-info-value{font-size:12px;font-weight:850;color:#f3f8ff;overflow-wrap:anywhere}
.service-info-value.good{color:#71edb9}.service-info-value.bad{color:#ff8994}.service-info-value.neutral{color:#ffe0a0}.service-info-value.info{color:#c5e4ff}
.service-info-content small{display:block;margin-top:3px;color:#9fbce2;font-size:9px;line-height:1.35}
.service-info-progress,.vps-capacity-track{height:5px;margin-top:7px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}
.service-info-progress span,.vps-capacity-track span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#19d49b,#29a9f4);transition:width .25s ease}
.vps-capacity-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.vps-capacity-item{min-width:0;padding:14px;border:1px solid rgba(82,176,255,.3);border-radius:11px;background:linear-gradient(135deg,rgba(5,91,151,.27),rgba(61,43,145,.25))}
.vps-capacity-label{display:flex;align-items:center;gap:7px;color:#bcd4f4;font-size:10px;font-weight:800;letter-spacing:.04em}
.vps-capacity-label span{color:#75d4ff;font-size:15px}
.vps-capacity-value{display:block;margin-top:9px;color:#f5f9ff;font-size:19px;line-height:1.25;font-weight:850;overflow-wrap:anywhere}
.vps-capacity-item small{display:block;min-height:26px;margin-top:5px;color:#a9c5e9;font-size:9px;line-height:1.4}
.vps-capacity-track span.is-high{background:linear-gradient(90deg,#f6bd4b,#ff6475)}
.vps-capacity-foot{margin-top:10px;color:#8eadd8;font-size:9px;line-height:1.4}
@media(max-width:1100px){.service-info-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.vps-capacity-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.service-info-grid,.vps-capacity-grid{grid-template-columns:1fr}.service-info-row{grid-template-columns:minmax(112px,.75fr) minmax(0,1.25fr)}.service-info-panel .card-head,.vps-capacity-panel .card-head{padding-left:15px;padding-right:15px}.service-info-panel .card-body,.vps-capacity-panel .card-body{padding-left:15px;padding-right:15px}}

/* v1.7.8 — dashboard column spacing and row alignment refinement */
.dashboard-bottom{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:22px;
  row-gap:20px;
  align-items:start;
}
.dashboard-left-stack,
.dashboard-right-stack{
  grid-template-rows:190px minmax(180px,auto);
  row-gap:20px;
  height:auto;
  align-content:start;
}
.dashboard-left-stack>.card:first-child,
.dashboard-right-stack>.card:first-child{
  box-sizing:border-box;
  min-height:190px;
  height:190px;
  max-height:190px;
}
.dashboard-left-stack>.card.sales-card:first-child{
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.dashboard-right-stack>.card:first-child{
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.dashboard-right-stack>.card:first-child .chart-area{
  flex:1 1 auto;
  min-height:0;
  height:auto;
  padding:7px 18px 8px;
  overflow:hidden;
}
.dashboard-right-stack>.card:first-child .chart-area .chart-svg{
  display:block;
  width:100%;
  height:108px;
  max-height:108px;
}
.dashboard-left-stack .activity-card,
.dashboard-right-stack .nas-online-panel{
  min-height:180px;
}
@media(max-width:760px){
  .dashboard-bottom{grid-template-columns:minmax(0,1fr);column-gap:0;row-gap:16px}
  .dashboard-left-stack,
  .dashboard-right-stack{
    grid-template-rows:auto auto;
    row-gap:16px;
    height:auto;
  }
  .dashboard-left-stack>.card:first-child{
    min-height:190px;
    height:190px;
    max-height:190px;
  }
  .dashboard-right-stack>.card:first-child{
    min-height:190px;
    height:auto;
    max-height:none;
  }
  .dashboard-right-stack>.card:first-child .chart-area{
    min-height:145px;
    height:145px;
    flex:0 0 145px;
  }
  .dashboard-right-stack>.card:first-child .chart-area .chart-svg{
    height:130px;
    max-height:130px;
  }
}


/* v1.7.8 — fixed dashboard row alignment + scrollable NAS list (4 rows visible) */
.dashboard-bottom{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:22px;
  row-gap:20px;
  align-items:stretch;
}
.dashboard-left-stack,
.dashboard-right-stack{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:190px 220px;
  row-gap:20px;
  height:430px;
  min-height:430px;
  align-content:start;
  align-items:stretch;
  min-width:0;
}
.dashboard-left-stack>.card,
.dashboard-right-stack>.card{
  box-sizing:border-box;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  max-height:none;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.dashboard-left-stack>.card.sales-card:first-child,
.dashboard-right-stack>.card:first-child{
  height:190px;
  min-height:190px;
  max-height:190px;
}
.dashboard-left-stack>.activity-card,
.dashboard-right-stack>.nas-online-panel{
  height:220px;
  min-height:220px;
  max-height:220px;
}
.dashboard-left-stack>.activity-card .card-head,
.dashboard-right-stack>.nas-online-panel .card-head{
  flex:0 0 auto;
  min-height:52px;
}
.dashboard-left-stack>.activity-card .card-body,
.dashboard-right-stack>.nas-online-panel .card-body{
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
}
.dashboard-left-stack .activity-viewport{
  height:100%;
  max-height:100%;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(92,190,255,.65) rgba(255,255,255,.06);
}
.dashboard-left-stack .activity-viewport::-webkit-scrollbar,
.nas-monitor-list::-webkit-scrollbar{width:7px}
.dashboard-left-stack .activity-viewport::-webkit-scrollbar-track,
.nas-monitor-list::-webkit-scrollbar-track{background:rgba(255,255,255,.05);border-radius:8px}
.dashboard-left-stack .activity-viewport::-webkit-scrollbar-thumb,
.nas-monitor-list::-webkit-scrollbar-thumb{background:rgba(92,190,255,.58);border-radius:8px}
.dashboard-right-stack>.nas-online-panel .card-body{
  display:flex;
  flex-direction:column;
  padding:8px 18px 10px;
}
.nas-online-panel .nas-monitor-list{
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
  gap:5px;
  min-height:0;
  max-height:100%;
  overflow-y:auto;
  overflow-x:hidden;
  padding-right:6px;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(92,190,255,.65) rgba(255,255,255,.06);
}
.nas-online-panel .nas-monitor-card{
  display:grid;
  grid-template-columns:minmax(120px,1fr) auto;
  flex:0 0 30px;
  min-height:30px;
  box-sizing:border-box;
  align-items:center;
  gap:8px;
  padding:4px 10px;
}
.nas-online-panel .nas-monitor-name{font-size:10px;line-height:1.2}
.nas-online-panel .nas-monitor-states{gap:12px;flex-wrap:nowrap}
.nas-online-panel .nas-monitor-state{gap:4px}
.nas-online-panel .nas-monitor-label,
.nas-online-panel .nas-monitor-value{font-size:9px}
.nas-online-panel .nas-monitor-note{display:none}
.nas-online-panel .nas-monitor-empty{min-height:0;flex:1 1 auto}
.dashboard-right-stack>.card:first-child .chart-area{
  flex:1 1 auto;
  min-height:0;
  height:auto;
  overflow:hidden;
}
.dashboard-right-stack>.card:first-child .chart-area .income-daily-svg{
  display:block;
  width:100%;
  max-width:none;
  margin:0;
  height:108px;
  max-height:108px;
}
@media(max-width:760px){
  .dashboard-bottom{grid-template-columns:minmax(0,1fr);column-gap:0;row-gap:16px}
  .dashboard-left-stack,
  .dashboard-right-stack{
    grid-template-rows:190px 220px;
    row-gap:16px;
    height:426px;
    min-height:426px;
  }
  .dashboard-left-stack>.card.sales-card:first-child,
  .dashboard-right-stack>.card:first-child{height:190px;min-height:190px;max-height:190px}
  .dashboard-left-stack>.activity-card,
  .dashboard-right-stack>.nas-online-panel{height:220px;min-height:220px;max-height:220px}
  .nas-online-panel .nas-monitor-card{grid-template-columns:minmax(0,1fr);flex-basis:auto;min-height:42px;gap:5px}
  .nas-online-panel .nas-monitor-states{flex-wrap:wrap;gap:9px}
  .nas-online-panel .nas-monitor-list{max-height:100%}
}
@media(max-width:430px){
  .nas-online-panel .nas-monitor-card{padding:6px 8px}
}