:root{font-family:Inter,"Segoe UI",Arial,sans-serif;color-scheme:dark;--bg:#080f21;--sidebar:#0d1730;--panel:#131d34;--panel2:#17223a;--line:#273654;--txt:#f2f6ff;--muted:#9cadcc;--soft:#768bab;--blue:#3184ff;--purple:#794eff;--teal:#09ba86;--amber:#ffac1a;--red:#fb4962;--cyan:#14b9ec;--shadow:0 12px 30px #0004;--radius:15px}
*{box-sizing:border-box}html{min-width:320px}body{margin:0;background:var(--bg);color:var(--txt);font-size:14px}button,input,select,textarea{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}svg{display:block;flex-shrink:0}button:disabled{opacity:.48;cursor:not-allowed}[hidden]{display:none!important}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:#35496e;border-radius:12px}::-webkit-scrollbar-track{background:transparent}
.app-shell{display:flex;min-height:100vh}.sidebar{width:255px;flex:0 0 255px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;z-index:30;background:linear-gradient(171deg,#101c36,#0d162c 58%,#0b162b);border-right:1px solid #22304b;transition:width .2s,flex-basis .2s;padding:17px 13px 10px}.sidebar-brand{display:flex;align-items:center;gap:9px;margin:0 5px 24px;min-height:44px}.brand-copy{min-width:0}.brand-copy strong{font-size:15px;letter-spacing:-.5px;white-space:nowrap}.brand-copy em{font-style:normal;color:#3699ff}.brand-copy small{display:block;font-size:10px;color:#92a9d5;margin-top:3px}.collapse-sidebar{margin-left:auto;width:27px;height:27px;border:1px solid #31466f;border-radius:8px;color:#c3d3f9;background:#162544;font-size:24px;line-height:20px}.workspace{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid #2b4267;border-radius:11px;background:linear-gradient(135deg,#20325d,#101b38);margin-bottom:12px;min-height:60px}.workspace-icon{display:grid;place-items:center;width:35px;height:35px;border-radius:9px;background:#2a4b87;color:#cee0ff}.workspace strong,.workspace small{display:block}.workspace strong{font-size:13px}.workspace small{color:#a2b3d4;font-size:10px;margin-top:4px}.workspace-arrow{margin-left:auto;color:#aebde3;font-size:17px}.sidebar-nav{min-height:0;flex:1;overflow-y:auto;overflow-x:hidden}.nav-group{margin-bottom:3px}.nav-button{width:100%;display:flex;align-items:center;gap:12px;min-height:42px;background:transparent;color:#a8b9df;border:0;border-radius:9px;padding:0 13px;text-align:left;font-size:12.5px;transition:background .16s,color .16s}.nav-button:hover,.nav-child:hover{color:white;background:#1b2c50}.nav-button.active{background:linear-gradient(100deg,#247eff,#4235ff);box-shadow:0 6px 19px #1864ec44;color:#fff;font-weight:700}.nav-icon{width:17px;height:17px;display:inline-flex;align-items:center;justify-content:center}.nav-button .nav-label{flex:1;white-space:nowrap}.nav-chev{opacity:.75;transition:transform .2s}.nav-group.expanded .nav-chev{transform:rotate(180deg)}.nav-children{margin:1px 4px 6px 32px;border-left:1px solid #344664}.nav-child{display:block;width:100%;border:0;background:transparent;text-align:left;color:#849ac1;font-size:12px;padding:8px 11px;border-radius:7px}.nav-child.selected{color:#79afff;background:#192b50}.sidebar-promo{margin-top:14px;position:relative;overflow:hidden;flex-shrink:0;min-height:112px;padding:16px 13px;border:1px solid #2e4678;border-radius:13px;background:radial-gradient(circle at 30% 20%,#273ca1 0,#162d68 36%,#101b34 78%)}.sidebar-promo strong{display:block;font-size:15px}.sidebar-promo small{display:block;color:#a9c5f1;font-size:11px;line-height:1.35;margin-top:4px}.sidebar-promo #promo-icon{color:#38a5ff;float:left;margin-right:12px}.promo-glow{position:absolute;inset:auto -15px -80px;opacity:.6;height:125px;border-radius:50%;box-shadow:0 0 70px 38px #354fc5;pointer-events:none}.sidebar-footer{text-align:center;color:#6d83aa;font-size:10px;padding-top:12px}.sidebar-footer span{color:#3663d9}
.main-area{flex:1;min-width:0;display:flex;flex-direction:column;min-height:100vh}.topbar{height:68px;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:0 30px;border-bottom:1px solid #1c2c49;background:#090f21dd;position:sticky;top:0;z-index:20;backdrop-filter:blur(16px)}.topbar-left,.topbar-right{display:flex;align-items:center;gap:18px}.topbar-left{min-width:0;flex:1}.topbar-right{gap:15px}.global-search{display:flex;align-items:center;gap:10px;background:linear-gradient(#182744,#142139);border:1px solid #34466c;border-radius:10px;width:min(460px,100%);height:37px;padding:0 12px;box-shadow:inset 0 1px 4px #fff1;color:#b1c7ed}.global-search input{background:none;border:0;outline:0;color:var(--txt);width:100%;font-size:12px;min-width:0}.global-search input::placeholder{color:#a4b7d6}.global-search kbd{white-space:nowrap;font-family:inherit;background:#24385c;color:#a8bfe7;font-size:10px;border-radius:7px;padding:3px 6px}.icon-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;color:#abbde3;min-width:30px;height:30px;border-radius:8px}.icon-btn:hover{background:#203358;color:white}.icon-btn svg,.nav-icon svg{width:18px;height:18px}.icon-btn sup{position:absolute;top:-5px;right:-6px;min-width:15px;height:15px;border-radius:9px;display:grid;place-items:center;font-size:9px;color:white;background:#f34265;padding:0 3px}.icon-btn sup:empty{display:none}.ai-button{display:flex;align-items:center;gap:7px;height:35px;border-radius:10px;border:1px solid #7059fd;background:linear-gradient(110deg,#172c85,#4323b6);color:#fff;font-weight:700;font-size:11px;padding:0 13px;box-shadow:0 0 19px #6348ff38}.top-divider{height:30px;width:1px;background:#253655}.user-menu{display:flex;align-items:center;gap:10px;background:none;color:var(--txt);border:0}.user-avatar{display:grid;place-items:center;border-radius:50%;width:33px;height:33px;color:#fff;font-size:16px;font-weight:800;background:linear-gradient(135deg,#20d3a5,#536ef8)}.user-copy{text-align:left}.user-copy strong,.user-copy small{display:block}.user-copy strong{font-size:12px}.user-copy small{font-size:10px;color:#7f91b6;margin-top:4px}.live-pill{color:#74e3c3;font-size:10px;letter-spacing:1px;white-space:nowrap}.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#19d39a;box-shadow:0 0 9px #19d39a;margin-right:6px}.mobile-toggle{display:none}
.content{width:100%;max-width:1900px;margin:0 auto;padding:20px 28px 36px;flex:1}.hero{position:relative;display:flex;justify-content:space-between;align-items:center;gap:22px;overflow:hidden;min-height:95px;padding:4px 0 23px;margin-bottom:6px}.hero::before{content:"";position:absolute;z-index:-1;top:-70px;right:0;width:60%;height:200px;background:radial-gradient(ellipse at 52% 44%,#1445ba55,transparent 68%);pointer-events:none}.hero::after{content:"";position:absolute;z-index:-1;width:41%;height:2px;right:4%;top:41px;background:linear-gradient(90deg,transparent,#2579edbb,#9a3fff,transparent);transform:rotate(-8deg);box-shadow:0 0 32px #226cfc}.hero h1{font-size:clamp(23px,2vw,29px);line-height:1.22;margin:0 0 8px;font-weight:800;letter-spacing:-.7px}.hero h1 span{color:#4092ff}.hero p{margin:0;color:#a3b5d6;font-size:13px}.date-panel{display:flex;gap:12px;align-items:center;padding:11px 15px;border:1px solid #283c66;border-radius:11px;background:linear-gradient(125deg,#18294b99,#131d38dd);white-space:nowrap;font-size:11px}.date-panel svg{color:#aec8ff}.date-panel span{display:block;color:#b3c4e5}.date-panel strong{display:block;font-size:12px;margin-top:4px}.section{margin-top:21px}.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px}.section-head-left{display:flex;gap:12px;align-items:flex-start}.section-icon{display:grid;place-items:center;color:#4785ff;margin-top:2px}.section-head h2{margin:0 0 4px;font-size:16px;font-weight:750;letter-spacing:-.2px}.section-head p{color:#93a8cb;font-size:11px;margin:0}.cards{display:grid;gap:13px}.cards.four{grid-template-columns:repeat(4,minmax(0,1fr))}.cards.three{grid-template-columns:repeat(3,minmax(0,1fr))}.metric{min-height:105px;position:relative;display:flex;gap:12px;align-items:flex-start;padding:16px;overflow:hidden;border:1px solid #293b5a;border-radius:13px;background:linear-gradient(135deg,#18243e,#121a30);box-shadow:0 7px 21px #0003}.metric::before{position:absolute;content:"";top:0;bottom:0;left:0;width:3px;background:var(--accent)}.metric.purple{--accent:#8058ff;--glow:#8058ff}.metric.green{--accent:#12c995;--glow:#11ce99}.metric.red{--accent:#ff4a68;--glow:#ff4a68}.metric.blue{--accent:#14b7ef;--glow:#14b7ef}.metric.amber{--accent:#ffad1e;--glow:#ffad1e}.metric.cobalt{--accent:#3689ff;--glow:#3689ff}.metric::after{content:"";position:absolute;right:-58px;bottom:-76px;width:160px;height:160px;border-radius:50%;background:var(--glow);opacity:.09;filter:blur(17px);pointer-events:none}.metric-icon{width:46px;height:46px;display:grid;place-items:center;border-radius:11px;color:#fff;flex-shrink:0;background:linear-gradient(140deg,color-mix(in srgb,var(--accent) 95%,#fff 5%),color-mix(in srgb,var(--accent) 76%,#000 24%));box-shadow:0 6px 22px color-mix(in srgb,var(--glow) 25%,transparent)}.metric-icon svg{width:25px;height:25px}.metric-body{flex:1;min-width:0}.metric-label{font-size:10px;color:#a8bce1;letter-spacing:.3px;margin:1px 0 5px}.metric-value{font-weight:800;font-size:25px;line-height:1.16;white-space:nowrap;letter-spacing:-.6px}.metric-value.money{font-size:21px}.metric-sub{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px;align-items:center;font-size:10px;color:#9cb1d6}.chip{padding:3px 6px;border-radius:5px;font-size:10px;font-weight:700;background:#26456b;color:#8ec0ff;white-space:nowrap}.chip.green{background:#174c3f;color:#3de5ad}.chip.red{background:#512436;color:#ff7d8d}.chip.amber{background:#523d1d;color:#ffd06d}.chip.blue{background:#1b3c72;color:#5fa5ff}.chip.purple{background:#352758;color:#b997ff}.metric-spark{margin-left:auto;align-self:flex-end;color:var(--accent);max-width:60px;opacity:.75}.metric-spark svg{width:60px;height:33px}.ring{margin-left:auto;align-self:center;width:63px;height:63px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--accent) calc(var(--pct)*1%),#22314c 0);box-shadow:0 0 18px color-mix(in srgb,var(--accent) 18%,transparent);position:relative;flex-shrink:0}.ring::after{content:"";position:absolute;inset:7px;background:#142036;border-radius:50%}.ring span{z-index:1;position:relative;text-align:center;font-size:13px;font-weight:800}.ring small{display:block;font-size:9px;font-weight:500;color:#a3b5d5}.section-spaced{margin-top:25px}.btn{display:inline-flex;gap:8px;align-items:center;justify-content:center;padding:9px 13px;border-radius:9px;border:1px solid #364a70;background:#182742;color:#d2e1ff;font-weight:650;font-size:12px;white-space:nowrap;transition:filter .15s,transform .15s}.btn:hover{filter:brightness(1.18)}.btn:active{transform:translateY(1px)}.btn svg{height:16px;width:16px}.btn-primary{background:linear-gradient(112deg,#2584ff,#453aff);color:#fff;border:1px solid #4c75fd}.btn-green{border-color:#147d67;background:#075f4d;color:#ccffef}.btn-red{background:#492336;border-color:#913449;color:#ffb4c0}.btn-quiet{background:#121f38}.btn-full{width:100%}.toolbar{display:flex;gap:9px;flex-wrap:wrap;align-items:center}.select,.field,.textarea{background:#101c32;border:1px solid #314264;color:#e6efff;padding:10px 12px;border-radius:9px;outline:0;min-height:38px;max-width:100%}.select:focus,.field:focus,.textarea:focus{border-color:#4f8cff;box-shadow:0 0 0 3px #3576ef29}.field::placeholder,.textarea::placeholder{color:#7990b6}.search-field{min-width:230px}.info-banner{padding:11px 14px;border-radius:9px;color:#a2d5ff;background:#153352;border:1px solid #285984;font-size:12px;display:flex;align-items:flex-start;gap:9px;line-height:1.5;margin:13px 0}.info-banner.warning{color:#ffe1a4;background:#382c1c;border-color:#674c24}.panel{background:linear-gradient(140deg,#15223a,#101a2e);border:1px solid #2a3c5d;border-radius:13px;padding:16px;min-width:0;box-shadow:0 10px 25px #0002}.panel-title{display:flex;justify-content:space-between;align-items:center;font-weight:750;font-size:13px;margin:0 0 15px;gap:10px}.panel-title small{font-weight:500;color:#9eafd0;font-size:11px}.analytics-grid{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(280px,1fr);gap:13px;margin-top:11px}.bar-chart{display:flex;align-items:end;gap:8px;height:140px;padding:13px 3px 7px;border-bottom:1px solid #3a4965;background:repeating-linear-gradient(180deg,transparent,transparent 34px,#ffffff0e 35px)}.bar-unit{flex:1;min-width:0;display:flex;gap:4px;align-items:end;justify-content:center;height:100%;position:relative;padding-bottom:17px}.bar-unit>span{width:min(32px,34%);border-radius:3px 3px 0 0;min-height:0}.bar-blue{background:linear-gradient(180deg,#2489fc,#244da2)}.bar-amber{background:linear-gradient(180deg,#ffbf43,#f79a00)}.bar-unit label{position:absolute;bottom:-17px;left:0;right:0;text-align:center;color:#91a5c7;font-size:10px;white-space:nowrap}.legend{display:flex;gap:12px;align-items:center;font-size:10px;color:#a8bad9}.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px}.dot.blue{background:#288aff}.dot.amber{background:#ffbd37}.distribution{display:flex;gap:20px;align-items:center;justify-content:center;height:137px}.donut{position:relative;flex:0 0 105px;height:105px;border-radius:50%;background:conic-gradient(#2b88f7 0 var(--arc),#ffb72e var(--arc) 100%);display:grid;place-items:center}.donut::after{content:"";position:absolute;inset:16px;border-radius:50%;background:#14223b}.donut center{position:relative;z-index:1;text-align:center;font-size:19px;font-weight:800}.donut small{display:block;font-weight:400;font-size:10px;color:#a5b9df}.donut-legend{font-size:12px;line-height:2.4;color:#a3b9df;min-width:125px}.donut-legend b{float:right;margin-left:20px;color:#eef5ff}
.page-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px}.page-heading h1{font-size:24px;margin:0 0 7px}.page-heading p{margin:0;color:#9bb0d4;font-size:12px}.table-panel{overflow:auto;padding:0}.data-table{border-collapse:collapse;width:100%;min-width:640px;text-align:left}.data-table th{padding:14px 15px;background:#1a2a48;color:#a4b9df;text-transform:uppercase;font-size:10px;letter-spacing:.55px;border-bottom:1px solid #314562}.data-table td{padding:13px 15px;border-bottom:1px solid #263954;font-size:12px;color:#d6e4ff;vertical-align:middle}.data-table tr:hover td{background:#1b2c47}.data-table tr:last-child td{border-bottom:0}.data-table td strong{display:block;font-size:12px}.data-table td small{display:block;margin-top:4px;color:#8c9fbe}.row-actions{display:flex;align-items:center;gap:5px}.tiny-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid #364969;background:#162c4d;border-radius:7px;color:#8bb9ff}.tiny-btn:hover{color:#fff;background:#28568e}.tiny-btn.danger{color:#ff8b9d;border-color:#663248;background:#382339}.tiny-btn svg{width:15px;height:15px}.status{display:inline-block;border-radius:15px;font-weight:700;padding:5px 9px;font-size:10px;white-space:nowrap}.status.aktif,.status.lunas,.status.selesai{background:#153e35;color:#4ce0ab}.status.nonaktif,.status.belum_bayar,.status.tinggi{background:#4a2634;color:#ff8797}.status.isolir,.status.sebagian,.status.proses{background:#493c24;color:#ffc36d}.status.baru,.status.normal{background:#1b3a64;color:#8dbbff}.status.rendah{background:#293851;color:#adc0e2}.empty{padding:55px 20px;text-align:center;color:#8093b8}.empty svg{margin:0 auto 14px;color:#3d70b1;width:40px;height:40px}.empty strong{display:block;color:#e4edff;font-size:14px;margin-bottom:7px}.empty p{margin:0;font-size:12px}.pager{display:flex;justify-content:space-between;align-items:center;padding:13px 15px;color:#9eb3d5;font-size:12px;gap:10px}.pager-actions{display:flex;gap:6px}.feature-block{display:grid;grid-template-columns:1.15fr 1fr;gap:16px}.placeholder-card{padding:32px;border-radius:14px;border:1px solid #2c4266;background:radial-gradient(ellipse at 0 10%,#193e7566,transparent 58%),#121f37}.placeholder-card>svg{width:45px;height:45px;color:#4f97ff;margin-bottom:14px}.placeholder-card h2{font-size:20px;margin:0 0 11px}.placeholder-card p{color:#a2b6d7;line-height:1.8}.bullet-note{color:#a4bbdf;font-size:12px;line-height:2.1}.mini-summary{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}.mini-summary .stat-mini{background:#172541;border:1px solid #304364;border-radius:10px;padding:13px 18px;min-width:170px}.stat-mini strong{font-size:22px;display:block}.stat-mini small{display:block;color:#9db4d9;margin-top:5px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.form-item{min-width:0}.form-item.wide{grid-column:1/-1}.form-item label{display:block;color:#afc2e2;font-size:12px;font-weight:650;margin-bottom:7px}.form-item .field,.form-item .select,.form-item .textarea{width:100%}.textarea{resize:vertical;min-height:82px}.form-actions{display:flex;justify-content:flex-end;gap:10px;grid-column:1/-1;border-top:1px solid #2b3a53;padding-top:15px;margin-top:7px}.modal-backdrop{position:fixed;inset:0;z-index:90;background:#000b;display:grid;place-items:center;padding:15px;backdrop-filter:blur(5px)}.modal-dialog{width:min(610px,100%);max-height:90vh;display:flex;flex-direction:column;border-radius:15px;border:1px solid #426294;background:#101d34;box-shadow:0 25px 90px #000b}.modal-header{padding:16px 20px;border-bottom:1px solid #2c405e;display:flex;align-items:center;justify-content:space-between}.modal-header h3{font-size:17px;margin:0}.modal-body{padding:20px;overflow-y:auto}.toast-root{position:fixed;z-index:120;bottom:22px;right:23px;display:flex;flex-direction:column;gap:8px}.toast{max-width:360px;padding:12px 16px;border:1px solid #297858;border-radius:10px;background:#143c35;color:#e5fff8;box-shadow:0 10px 30px #0008;font-size:12px;line-height:1.4}.toast.error{background:#4a1f30;border-color:#9e4053;color:#ffe6ed}.main-footer{padding:12px 28px;color:#637ba4;text-align:center;font-size:10px}.login-screen{min-height:100vh;display:grid;place-items:center;position:relative;padding:20px;overflow:hidden;background:radial-gradient(ellipse at 50% 25%,#172b66 0,#090f21 57%)}.login-glow{position:absolute;top:0;left:20%;width:60%;height:2px;background:#315ffa;box-shadow:0 0 110px 42px #254acc6b}.login-card{position:relative;width:min(420px,100%);padding:33px;border:1px solid #384f83;border-radius:19px;background:linear-gradient(145deg,#1b294b,#0e1a30);box-shadow:0 25px 80px #000a}.login-mark{margin-bottom:8px}.login-card h1{font-size:27px;letter-spacing:-.8px;margin:0}.login-card h1 span{color:#358fff}.login-card p{color:#9cb2d4;margin:7px 0 27px}.login-card label{display:block;color:#b7c8e3;font-size:12px;font-weight:600;margin:18px 0 7px}.login-card input{display:block;width:100%;padding:12px 13px;background:#0d172a;border:1px solid #344a6f;border-radius:9px;outline:none;color:white}.login-card .btn{margin-top:22px;height:45px}.login-card small{display:block;color:#7389ad;margin-top:20px;text-align:center}.login-card .login-error{background:#552034;border:1px solid #97394b;color:#ffc6d0;margin:16px 0 0;padding:10px;border-radius:8px;font-size:12px}.mobile-shade{display:none}.hidden-svg{width:0;height:0;position:absolute}
body.light{color-scheme:light;--bg:#f0f4fc;--sidebar:#e4edfa;--panel:#fff;--panel2:#eaf0fc;--line:#d1dbec;--txt:#152c4c;--muted:#506781;--soft:#66758c}.light .main-area{background:#f0f4fc}.light .sidebar{background:#e6edf9;border-color:#cbd8ef}.light .topbar{background:#f9fbffec;border-color:#cbd7e9}.light .metric,.light .panel,.light .placeholder-card{background:linear-gradient(135deg,#fff,#f6f9ff);border-color:#d1dbee;box-shadow:0 5px 18px #23406612}.light .metric-label,.light .panel-title,.light .section-head p,.light .hero p{color:#596d8c}.light .metric-sub,.light .data-table td,.light .date-panel strong{color:#25486e}.light .workspace,.light .global-search{background:#fff;border-color:#ccd8ee}.light .global-search input{color:#193252}.light .nav-button{color:#4e668a}.light .nav-button.active{color:#fff}.light .nav-child{color:#526e97}.light .sidebar-footer,.light .main-footer{color:#60748e}.light .sidebar-brand strong{color:#132c52}.light .ring::after,.light .donut::after{background:#f8faff}.light .metric,.light .panel{color:#132846}.light .bar-chart{background:repeating-linear-gradient(180deg,transparent,transparent 34px,#142b4713 35px)}.light .data-table th{background:#e7eefb;color:#466080}.light .data-table td{border-color:#d9e2f2}.light .data-table tr:hover td{background:#edf4ff}.light .select,.light .field,.light .textarea{background:#fff;color:#162a44;border-color:#cad7ea}.light .modal-dialog{background:#fff;color:#173156}.light .modal-header{border-color:#d6e0ed}.light .form-item label{color:#385a82}.light .date-panel{background:#f6faff;border-color:#cbd8ef}.light .user-menu,.light .global-search input{color:#143253}.light .stat-mini{background:#fff;border-color:#d2dced}.light .stat-mini strong{color:#143253}.light .btn:not(.btn-primary){color:#274467;background:#eff4fe;border-color:#cbd9ee}
body.sidebar-small .sidebar{width:77px;flex-basis:77px;padding:17px 10px}.sidebar-small .brand-copy,.sidebar-small .collapse-sidebar,.sidebar-small .workspace>span:not(.workspace-icon),.sidebar-small .nav-label,.sidebar-small .nav-chev,.sidebar-small .nav-children,.sidebar-small .sidebar-promo,.sidebar-small .sidebar-footer{display:none}.sidebar-small .sidebar-brand{justify-content:center;margin:0 0 24px}.sidebar-small .workspace{justify-content:center;padding:8px}.sidebar-small .nav-button{justify-content:center;padding:0}
@media(max-width:1450px){.cards.four{grid-template-columns:repeat(2,minmax(0,1fr))}.topbar{padding:0 21px}.content{padding:19px 22px}.live-pill{display:none}}
@media(max-width:1020px){.sidebar{width:225px;flex-basis:225px}.topbar-right{gap:9px}.global-search{max-width:380px}.ai-button{font-size:10px}.cards.three{grid-template-columns:repeat(2,minmax(0,1fr))}.feature-block{grid-template-columns:1fr}.user-copy{display:none}}
@media(max-width:760px){.sidebar{position:fixed;left:0;top:0;transform:translateX(-110%);transition:transform .2s;width:255px;flex-basis:255px;height:100dvh}.app-shell.mobile-nav-open .sidebar{transform:translateX(0)}.app-shell.mobile-nav-open .mobile-shade{display:block;position:fixed;inset:0;background:#0009;z-index:25}.sidebar-small .sidebar{width:255px;flex-basis:255px}.sidebar-small .brand-copy,.sidebar-small .collapse-sidebar,.sidebar-small .workspace>span:not(.workspace-icon),.sidebar-small .nav-label,.sidebar-small .nav-chev,.sidebar-small .sidebar-promo,.sidebar-small .sidebar-footer{display:block}.sidebar-small .nav-button{justify-content:flex-start;padding:0 13px}.mobile-toggle{display:inline-flex}.topbar{height:59px;padding:0 14px}.topbar-right{gap:6px}.app-grid-btn,.warning-btn,.top-divider,.user-copy,.global-search kbd,.live-pill{display:none}.global-search{width:min(320px,42vw)}.ai-button{padding:0 8px;font-size:0}.ai-button svg{width:18px}.content{padding:18px 13px}.hero{align-items:flex-start}.date-panel{display:none}.cards.four,.cards.three{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.metric{padding:11px;gap:8px;min-height:105px}.metric-icon{width:34px;height:34px}.metric-icon svg{width:18px;height:18px}.metric-label{font-size:9px}.metric-value{font-size:22px}.metric-value.money{font-size:19px}.ring{width:45px;height:45px}.ring::after{inset:5px}.ring span{font-size:10px}.ring small{font-size:7px}.metric-spark{display:none}.analytics-grid{grid-template-columns:1fr}.page-heading{align-items:flex-start;flex-wrap:wrap}.page-heading h1{font-size:21px}.page-heading .toolbar{width:100%}.section-head h2{font-size:14px}.toolbar .search-field{min-width:0;width:100%}.form-grid{grid-template-columns:1fr}.modal-body{padding:14px}.distribution{justify-content:flex-start}}
@media(max-width:410px){.cards.four,.cards.three{grid-template-columns:1fr}.global-search{width:37vw}.topbar-right .notification-btn{display:none}.user-menu{padding:0}.metric{min-height:95px}.analytics-grid{margin-top:12px}}

/* MAPANET v1.1 enhancements */
.overdue-text{color:#ff8797!important;font-weight:800;letter-spacing:.3px}
.row-actions .btn{white-space:nowrap;padding:7px 10px;font-size:11px}
.sidebar-footer{letter-spacing:.2px}
.table-panel{overflow-x:auto}
@media(max-width:760px){.row-actions .btn{padding:7px}.stat-mini strong{font-size:17px}}

/* v1.3 MikroTik RouterOS - fit standard MAPANET Billing dark/light theme */
.router-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(275px,.8fr);gap:16px;margin-top:20px}
.router-layout .panel{min-width:0}.router-layout .panel-title{display:flex;gap:9px;align-items:center}
.router-lead{display:flex;gap:9px;align-items:center;color:var(--muted);font-size:12px;margin-bottom:22px;flex-wrap:wrap}
.router-steps{color:var(--muted);font-size:12px;line-height:1.8}.router-steps p{margin:0 0 13px}
.router-steps code{background:var(--panel2);color:var(--txt);border-radius:5px;padding:3px 5px}
.router-layout .info-banner{margin-top:15px}.router-layout .info-banner.wide{grid-column:1/-1;margin:0}
.router-metrics{margin:18px 0}.router-summary{display:flex;align-items:center;gap:11px;margin:15px 0;font-size:12px;color:var(--muted)}
.router-table-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 0 15px;flex-wrap:wrap}
.router-table-head .panel-title{margin:0}.router-toolbar{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.router-toolbar input{min-width:230px}.router-table-wrap{overflow-x:auto}.router-count{color:var(--muted);font-size:11px;margin:5px 0 12px}
@media(max-width:950px){.router-layout{grid-template-columns:1fr}}
@media(max-width:760px){.router-toolbar{width:100%}.router-toolbar input,.router-toolbar select{flex:1;min-width:160px}}