:root{--bg:#0b121a;--side:#101b26;--panel:#14212d;--raised:#1b2b39;--line:#263541;--text:#ecf1f4;--muted:#93a5b3;--accent:#64dfba;--blue:#6baaf7;--red:#f58e96;--yellow:#e9b76e}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px Inter,ui-sans-serif,system-ui,-apple-system,sans-serif}button,input,select,textarea{font:inherit}button,select{cursor:pointer}button{color:inherit}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}button{border:1px solid var(--line);background:var(--raised);padding:10px 14px;border-radius:8px}button:hover{filter:brightness(1.15)}button.primary{background:var(--accent);border-color:var(--accent);color:#0d2822;font-weight:700}button.ghost{background:transparent}input,select,textarea{background:var(--bg);border:1px solid var(--line);border-radius:8px;color:var(--text);padding:11px 12px;min-width:0}input::placeholder{color:var(--muted)}aside{position:fixed;inset:0 auto 0 0;width:236px;background:var(--side);border-right:1px solid var(--line);padding:28px 16px;display:flex;flex-direction:column;z-index:20}.brand{display:flex;align-items:center;gap:11px;padding:0 13px 27px}.mark{width:36px;height:38px;background:var(--accent);color:#133d34;border-radius:11px;display:grid;place-items:center;font-size:27px;font-weight:800}.brand b{font-size:24px;letter-spacing:-1px}.brand small{display:block;font-size:10px;letter-spacing:1.7px;color:var(--muted);margin-top:3px}.nav-label{font-size:10px;letter-spacing:1.8px;color:#6c8193;margin:24px 15px 9px}.nav{display:flex;align-items:center;width:100%;gap:12px;background:none;border:none;border-radius:7px;padding:12px 14px;color:#9aafbf;text-align:left;margin:3px 0}.nav.active{color:var(--accent);background:#1d3738}.nav.active:after{content:'';height:6px;width:6px;background:var(--accent);border-radius:50%;margin-left:auto}.ico{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;flex-shrink:0}.ico svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.side-bottom{margin-top:auto}.tech{border-top:1px solid var(--line);padding:20px 10px 0;display:flex;gap:10px;align-items:center}.avatar{width:33px;height:33px;display:grid;place-items:center;border-radius:50%;background:#24413e;color:var(--accent);font-size:11px;font-weight:700}.tech small{color:var(--muted);display:block;margin-top:3px;font-size:11px}.shell{margin-left:236px}header{height:77px;padding:0 34px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px;background:var(--bg)}.crumb{color:var(--muted);font-size:12px;display:flex;gap:12px;align-items:center}.crumb strong{color:var(--text);font-weight:500}.head-right{display:flex;align-items:center;gap:15px}header select{background:var(--panel);font-size:12px;min-width:180px}.demo{font-size:10px;letter-spacing:1px;border:1px solid #66502d;background:#332b1e;color:var(--yellow);padding:6px 8px;border-radius:5px}main{max-width:1700px;margin:auto;padding:31px 34px}.title-row{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:25px}h1{font-size:27px;letter-spacing:-.8px;margin:0 0 7px;font-weight:650}p{color:var(--muted);line-height:1.6;margin:0}h2{font-size:15px;font-weight:600;margin:0}h3{font-size:14px;margin:0}.eyebrow{font-size:10px;letter-spacing:1.6px;color:var(--accent);margin-bottom:9px}.actions{display:flex;gap:9px;align-items:center}.small{font-size:11px;color:var(--muted)}.summary{display:grid;grid-template-columns:repeat(4,1fr);gap:17px;margin-bottom:23px}.stat{background:var(--panel);border:1px solid var(--line);padding:20px 22px;border-radius:11px;position:relative}.stat .label{color:var(--muted);font-size:12px;display:flex;justify-content:space-between;align-items:center}.stat .number{font-size:31px;letter-spacing:-1px;font-weight:650;margin:14px 0 7px}.stat small{font-size:11px;color:var(--muted)}.good{color:var(--accent)}.bad{color:var(--red)}.warn{color:var(--yellow)}.blue{color:var(--blue)}.panel{border:1px solid var(--line);border-radius:11px;background:var(--panel);overflow:hidden;margin-bottom:21px}.panel-head{padding:19px 22px;display:flex;align-items:center;justify-content:space-between;gap:12px}.panel-head p{font-size:11px;margin-top:5px}.content{padding:0 22px 21px}.grid2{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(290px,1fr);gap:21px}.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;background:#203c36;color:var(--accent);font-size:10px;border-radius:5px;white-space:nowrap}.pill:before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor}.pill.off{background:#3e2b31;color:var(--red)}.pill.wait{background:#3e3527;color:var(--yellow)}.legend{display:flex;gap:16px;font-size:11px;color:var(--muted)}.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:6px}.chart{width:100%;height:217px;display:block}.chart text{fill:var(--muted);font-size:9px}.traffic-values{display:flex;gap:35px;padding:0 22px;margin-bottom:8px}.traffic-values strong{font-size:22px;font-weight:550}.traffic-values small{font-size:11px;color:var(--muted);margin-left:6px}.traffic-values label{display:block;font-size:10px;color:var(--muted);margin-bottom:5px}.event{display:flex;gap:12px;padding:15px 0;border-bottom:1px solid var(--line)}.event:last-child{border:0}.event-icon{width:32px;height:32px;display:grid;place-items:center;background:#3c2c30;border-radius:8px;color:var(--red);flex-shrink:0}.event-icon.green{background:#203d36;color:var(--accent)}.event p{font-size:11px;margin-top:5px}.event time{font-size:10px;color:var(--muted)}.event-body{flex:1}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;text-align:left;white-space:nowrap}th{font-size:10px;letter-spacing:.7px;text-transform:uppercase;color:var(--muted);font-weight:500;background:#182735;padding:13px 22px}td{padding:16px 22px;border-bottom:1px solid var(--line);font-size:12px}tr:last-child td{border:0}td strong{font-weight:550;display:block;font-size:12px}td small{color:var(--muted);display:block;font-size:10px;margin-top:5px}td button{font-size:11px;padding:6px 9px}.meter{height:4px;width:80px;background:#2a3a49;border-radius:5px;margin-top:6px}.meter span{height:100%;display:block;background:var(--accent);border-radius:5px}.toolbar{display:flex;gap:10px;align-items:center;padding:0 0 20px;flex-wrap:wrap}.toolbar input{min-width:230px;flex:1}.router-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.router-card{padding:21px;background:var(--panel);border:1px solid var(--line);border-radius:11px}.router-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}.router-id{display:flex;align-items:center;gap:12px}.router-id>.ico{width:38px;height:38px;border-radius:9px;background:#203a40;color:var(--accent)}.router-card small{color:var(--muted);font-size:11px}.row{display:flex;justify-content:space-between;align-items:center;margin:15px 0;font-size:12px}.wide-meter{width:100%;height:5px;background:var(--raised);border-radius:3px}.wide-meter i{height:100%;display:block;border-radius:3px;background:var(--accent)}.router-foot{border-top:1px solid var(--line);display:flex;justify-content:space-between;padding-top:16px;margin-top:21px;font-size:11px}.router-card button{width:100%;margin-top:19px}.notice{padding:12px 16px;background:#192b32;border:1px solid #2d4650;border-radius:8px;color:#afc9d1;font-size:12px;line-height:1.7;margin-bottom:22px}.empty{padding:50px;text-align:center;color:var(--muted)}.empty h2{color:var(--text);margin:15px 0 8px}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.settings-card{padding:24px;border:1px solid var(--line);border-radius:11px;background:var(--panel)}.settings-card p{font-size:12px;margin:13px 0 20px}.plan-step{display:flex;gap:14px;padding:18px 0;border-bottom:1px solid var(--line)}.plan-step b{display:grid;place-items:center;border-radius:50%;background:#234139;color:var(--accent);width:28px;height:28px;flex-shrink:0}.plan-step p{font-size:12px;margin:5px 0}.footer{display:flex;justify-content:space-between;color:#6f8493;font-size:10px;margin-top:25px;padding:18px 0;border-top:1px solid var(--line)}dialog{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:14px;width:570px;max-width:94vw;padding:26px;max-height:90vh}dialog::backdrop{background:#02080dba;backdrop-filter:blur(4px)}.modal-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:23px}.modal-title h2{font-size:20px}.fields{display:grid;grid-template-columns:1fr 1fr;gap:17px}label.field{display:flex;flex-direction:column;gap:7px;font-size:12px;color:var(--muted)}.full{grid-column:1/-1}.modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:25px}.toast{position:fixed;bottom:25px;right:25px;border:1px solid #3e6c5e;background:#1c3a31;color:#c6f6e8;padding:15px 21px;border-radius:9px;z-index:99;box-shadow:0 8px 30px #0005}.mobile-toggle{display:none}.inline-name{display:flex;gap:10px;align-items:center}.login-preview{max-width:400px;margin:45px auto;padding:30px;background:var(--panel);border:1px solid var(--line);border-radius:12px}/* Signal & Energy — dark blue structure, fiber green accents, bright workspace. */
.light{--bg:#f3f7fc;--side:#0c203c;--panel:#ffffff;--raised:#edf3fa;--line:#d9e3ef;--text:#102b50;--muted:#526981;--accent:#087b45;--blue:#2264b4;--red:#bf344d;--yellow:#896015;--fiber:#38ed87}
.light aside{color:#ecf3ff;border-right-color:#193558;background:#0c203c}
.light .brand b{color:#f2f7ff}.light .brand b span{color:var(--fiber)!important}
.light .brand small{color:#a2b7ce}.light .mark{background:var(--fiber);color:#0c203c;box-shadow:0 0 19px #38ed8720}
.light .nav-label{color:#8da6c1}.light .nav{color:#b4c6db}
.light .nav:hover{background:#142e4e;color:#f3f8ff}
.light .nav.active{background:#163e41;color:#64f3a4;box-shadow:inset 3px 0 0 var(--fiber)}
.light .nav.active:after{background:var(--fiber);box-shadow:0 0 8px #38ed8755}
.light .tech{border-top-color:#29415e}.light .tech strong{color:#f1f6fe}
.light .tech small{color:#a5bad0}.light .tech>.good{color:var(--fiber)}
.light .tech .avatar{background:#18443f;color:#64f3a4}
.light header{background:#fff;border-top:3px solid var(--fiber);box-shadow:0 2px 9px #102b5005}
.light header select{background:#f3f7fc;border-color:#cddbed;color:#102b50}
.light h1{color:#0c274b}.light .eyebrow{color:#087b45;font-weight:700}
.light .stat{box-shadow:0 3px 14px #0e2d5306;border-top:3px solid #afebcb}
.light .stat .number{font-weight:700}.light .stat .label{color:#526981}
.light .panel,.light .router-card,.light .settings-card{box-shadow:0 3px 15px #0e2d5305}
.light .panel-head{border-bottom:1px solid #edf2f8}
.light .router-card{border-top:3px solid #b7e9ce}
.light .router-id>.ico{background:#e6f8ee;color:#087b45}
.light button.primary{background:var(--fiber);border-color:#27d875;color:#092b27;box-shadow:0 3px 10px #1dcd6e18}
.light button.primary:hover{background:#26df78;filter:none}
.light button.ghost:hover{background:#edf4fa;filter:none}
.light button:focus-visible,.light a:focus-visible{outline-color:#087b45}
.light th{background:#edf3fb;color:#4c6380}
.light td{border-bottom-color:#e4ebf4}.light tbody tr:hover{background:#f7fbff}
.light .meter,.light .wide-meter{background:#e8eff7}
.light .notice{background:#eaf7f0;color:#215b41;border-color:#c1e7d1;border-left:3px solid #24c96c}
.light .pill{background:#e4f7ec;color:#086b3c}
.light .pill.off{background:#fff0f2;color:#b92f48}
.light .pill.wait{background:#fff5df;color:#80590e}
.light .demo{background:#fff5df;color:#80590e;border-color:#e8d39c;letter-spacing:.65px}
.light .avatar{background:#e3f5ec;color:#087b45}
.light .event-icon{background:#fcebf0;color:#bf344d}.light .event-icon.green{background:#e4f7ed;color:#087b45}
.light .plan-step b{background:#e3f7ec;color:#087b45}
.light .footer{color:#526981}.light .chart{background:transparent}
@media(min-width:1550px){main{padding:35px 42px}.stat{padding:24px}.chart{height:245px}}@media(max-width:1100px){aside{width:200px}.shell{margin-left:200px}main{padding:25px 22px}header{padding:0 22px}.grid2{grid-template-columns:1fr}.router-grid{grid-template-columns:repeat(2,1fr)}.summary{gap:10px}.stat{padding:16px}.stat .number{font-size:26px}}@media(max-width:760px){aside{transform:translateX(-100%);width:236px;box-shadow:10px 0 50px #0008}aside.open{transform:none}.shell{margin:0}header{height:68px;padding:0 16px}.mobile-toggle{display:inline-flex}.crumb{display:none}.head-right{gap:8px}header select{min-width:0;width:145px}.demo{font-size:8px}.summary{grid-template-columns:1fr 1fr}.grid2,.settings-grid,.router-grid{grid-template-columns:1fr}main{padding:24px 16px}.title-row{align-items:flex-start;flex-wrap:wrap}h1{font-size:25px}.actions .small{display:none}.panel-head{padding:17px}.content{padding:0 17px 15px}.legend{font-size:9px;gap:8px}.fields{grid-template-columns:1fr}.full{grid-column:auto}.footer{gap:15px}.toolbar input{width:100%}.traffic-values strong{font-size:21px}.head-right button{padding:8px}}

.auth-screen{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;background:#f3f7fc;color:#102b50}.auth-story{background:#0c203c;color:#eef5ff;padding:10vw 7vw;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}.auth-story:before{content:'';position:absolute;width:500px;height:500px;border:1px solid #38ed8730;border-radius:50%;left:-190px;bottom:-300px;box-shadow:0 0 0 50px #38ed8708,0 0 0 100px #38ed8706}.auth-story .mark{background:#38ed87;color:#0c203c;width:48px;height:48px;margin-bottom:30px}.auth-story h1{font-size:45px;color:white;line-height:1.13;letter-spacing:-1.7px}.auth-story p{color:#afc4db;max-width:390px;margin:20px 0}.auth-form{padding:60px;display:flex;align-items:center;justify-content:center}.login-card{width:100%;max-width:370px}.login-card h1{font-size:28px}.login-card form{display:grid;gap:18px;margin-top:30px}.login-card input{background:white;color:#102b50;border-color:#cddbed}.login-card button.primary{background:#38ed87;color:#0a2925;border-color:#25d571}.auth-error{padding:12px;background:#fff0f2;border:1px solid #efb6c0;border-radius:8px;color:#a52740;line-height:1.5;font-size:12px}.auth-error:empty{display:none}.check-row{display:flex;gap:8px;align-items:center;margin:7px 0;color:var(--text);font-size:12px}.check-row input{width:16px;height:16px}.local-banner{border-left:3px solid #38ed87}.session-name{font-size:12px;line-height:1.6}.permissions{font-size:12px;line-height:1.7}.role-chip{font-size:11px;border-radius:6px;background:#e6f6ee;color:#087b45;padding:5px 8px}.user-name{word-break:break-word}.loading{padding:45px;text-align:center}.field-hint{font-size:11px;color:var(--muted);line-height:1.5}.auth-form .field{color:#526981}.local-account-actions{display:flex;gap:7px;flex-wrap:wrap}.no-wrap{white-space:nowrap}@media(max-width:760px){.auth-screen{grid-template-columns:1fr}.auth-story{padding:30px}.auth-story h1{font-size:29px}.auth-story .mark{margin-bottom:18px}.auth-story p{margin:14px 0}.auth-form{padding:35px 24px}.auth-story .small{display:none}}
.ops-pagination{display:flex;justify-content:space-between;align-items:center;gap:15px;font-size:12px;color:var(--muted);margin:18px 0}.ops-view-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 20px}.ops-wrap{white-space:normal;max-width:260px;min-width:140px;line-height:1.6}.ops-isolation-frame{display:block;width:100%;height:590px;background:white;border:0}.ops-calendar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));min-width:700px}.ops-weekday{text-align:center;padding:12px;background:var(--raised);font-size:12px;color:var(--muted)}.ops-day{min-height:120px;padding:10px;border-top:1px solid var(--line);border-right:1px solid var(--line)}.ops-day-empty{background:var(--bg)}.ops-day>strong{font-size:12px;color:var(--muted)}.ops-calendar-event{display:block;width:100%;text-align:left;white-space:normal;margin-top:7px;padding:9px;background:var(--raised);border-left:3px solid var(--accent);font-size:10px}.ops-calendar-event small{display:block;font-size:9px;margin-top:5px;color:var(--muted)}.panel:has(.ops-calendar){overflow:auto}.ops-branch{margin:12px 0 12px 15px;border-left:2px solid var(--line);padding-left:14px}.ops-branch summary{display:flex;align-items:center;gap:10px;cursor:pointer;flex-wrap:wrap;padding:8px 0}.ops-branch summary button{padding:5px 10px;font-size:11px}.ops-branch summary small{color:var(--muted);font-size:10px}.ops-map{display:block;width:100%;min-height:320px}button:disabled{opacity:.45;cursor:not-allowed}@media(max-width:760px){.ops-pagination{align-items:flex-start;flex-direction:column}.ops-isolation-frame{height:650px}.ops-branch{margin-left:5px;padding-left:9px}}

aside{overflow:hidden}aside nav{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin}.side-bottom{flex-shrink:0}.brand{flex-shrink:0}

#opsError{padding:12px;background:#fff0f2;border:1px solid #efb6c0;border-radius:8px;color:#a52740;font-size:12px;line-height:1.5}#opsError:empty{display:none}

.finance-filters{display:grid;grid-template-columns:repeat(4,minmax(140px,1fr));gap:16px;padding:20px;margin:20px 0}.finance-filters .field{min-width:0}.finance-filters .actions{align-items:end}.finance-number{font-size:24px!important;overflow-wrap:anywhere}.finance-pagination{display:flex;align-items:center;justify-content:space-between;padding:18px;gap:15px;color:var(--muted)}#finance-root table{min-width:1050px}#finance-root td small{display:block;max-width:270px;overflow-wrap:anywhere;margin-top:5px}#finance-root td .actions{flex-wrap:wrap;min-width:150px}#finance-root .panel-head .field{width:110px}#finance-root .summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}#finance-root .danger,#finance-error{color:#d34b5b}#finance-form .full{grid-column:1/-1}#finance-form .table-wrap{max-height:300px;overflow:auto}#finance-form{max-height:85vh;overflow:auto}#finance-root select,#finance-root input{max-width:100%}@media(max-width:1100px){.finance-filters{grid-template-columns:repeat(2,minmax(0,1fr))}#finance-root .summary{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.finance-filters{grid-template-columns:1fr}.finance-pagination{align-items:start;flex-direction:column}#finance-root .summary{grid-template-columns:1fr}}

.stock-help{padding:18px 22px;margin:16px 0}.stock-help summary{cursor:pointer;font-weight:600;color:var(--text)}.stock-help ol{padding-left:20px;color:var(--muted);line-height:1.9;margin-bottom:0}.stock-guide{padding:24px;margin:18px 0}.stock-guide p{line-height:1.8;color:var(--muted)}.stock-tabs{display:flex;flex-wrap:wrap;gap:9px}.stock-filters{display:grid;grid-template-columns:repeat(4,minmax(130px,1fr));gap:16px;padding:20px;margin:18px 0}.stock-filters .actions{align-items:end}.stock-number{font-size:24px!important;overflow-wrap:anywhere}.stock-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.stock-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px;color:var(--muted)}#stock-root table{min-width:950px}#stock-root td small{display:block;max-width:250px;overflow-wrap:anywhere;margin-top:4px}#stock-root td .actions{display:flex;flex-wrap:wrap;min-width:140px}#stock-root .panel-head .field{width:100px}#stock-root .danger,#stock-error{color:#d34b5b}#stock-form{max-height:85vh;overflow:auto}#stock-form .full{grid-column:1/-1}#stock-form .table-wrap{max-height:400px;overflow:auto}#stock-root input,#stock-root select{max-width:100%}.stock-nav{margin:6px 0}.stock-nav>summary{list-style:none;display:flex;align-items:center;gap:12px;padding:13px 16px;font-size:13px;font-weight:600;cursor:pointer;border-radius:8px;color:var(--muted)}.stock-nav>summary::-webkit-details-marker{display:none}.stock-nav>summary:after{content:'⌄';margin-left:auto}.stock-nav[open]>summary{color:var(--accent);background:var(--raised)}.stock-nav .nav{padding-left:36px;font-size:12px}.stock-nav .nav:before{content:'·';margin-right:5px}@media(max-width:1050px){.stock-filters,.stock-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.stock-filters,.stock-summary{grid-template-columns:1fr}.stock-pagination{flex-direction:column;align-items:start}}

/* KulaNet appearance only — purple / magenta / cyan, dark and light. */
:root{
 --bg:#0b0816;--side:#130d24;--panel:#151025;--raised:#211735;--line:#38264e;
 --text:#f4edff;--muted:#b6a8cc;--accent:#e8a0ff;--blue:#68d7ff;--fiber:#dc70ff;
 --red:#ff9aaf;--yellow:#f4cc85;--success:#69ddc5;
 --kn-card:linear-gradient(125deg,#21112f 0%,#151025 55%,#141026 100%);
 --kn-shadow:0 10px 28px #03010c45,0 0 0 1px #e191ff05 inset;
 --kn-primary:linear-gradient(105deg,#8b31c7 0%,#bc27be 65%,#bc2daf 100%);
 --kn-soft:#291c3d;--kn-cyan-soft:#132b3c;--kn-input:#110c20;--kn-table:#20162f;
 --kn-sidebar:linear-gradient(170deg,#2a1034 0%,#150d25 46%,#100b1e 100%);
 --kn-success-bg:#15352f;--kn-danger-bg:#3e2034;--kn-warning-bg:#392c23;
 color-scheme:dark;
}
body.light{
 --bg:#f1f0fb;--side:#f6f4ff;--panel:#fff;--raised:#f0ebfa;--line:#ddd6ef;
 --text:#2d2b63;--muted:#68658b;--accent:#8242ba;--blue:#087ba8;--fiber:#b535ce;
 --red:#b83257;--yellow:#876015;--success:#087c6b;
 --kn-card:linear-gradient(125deg,#fff 0%,#fff 70%,#fcfaff 100%);
 --kn-shadow:0 6px 15px #35326b16,0 2px 5px #35326b0d;
 --kn-primary:linear-gradient(105deg,#7839bb 0%,#a238bd 65%,#b92ca6 100%);
 --kn-soft:#eee5fb;--kn-cyan-soft:#e5f6fc;--kn-input:#faf9ff;--kn-table:#f0edf9;
 --kn-sidebar:linear-gradient(175deg,#fbf9ff 0%,#efebfb 100%);
 --kn-success-bg:#e2f5ef;--kn-danger-bg:#fce9f0;--kn-warning-bg:#fff4dc;
 color-scheme:light;
}
body{
 background:radial-gradient(ellipse at 7% 0%,#d826e51c 0%,transparent 42%),radial-gradient(ellipse at 95% 100%,#259ece0a 0%,transparent 40%),var(--bg);
 background-attachment:fixed;
}
body.light{background:radial-gradient(ellipse at 0% 0%,#e3d4fa99 0%,transparent 45%),radial-gradient(ellipse at 100% 100%,#d9efff70 0%,transparent 45%),var(--bg)}
body aside,body.light aside{background:var(--kn-sidebar);color:var(--text);border-right:1px solid var(--line);box-shadow:8px 0 30px #06011419}
body.light aside{box-shadow:4px 0 20px #3e286b0a}
body .brand b,body.light .brand b{color:var(--text)}
body .brand b span,body.light .brand b span{color:var(--fiber)!important}
body .brand small,body.light .brand small,body .nav-label,body.light .nav-label{color:var(--muted)}
body .mark,body.light .mark,body .auth-story .mark{background:linear-gradient(140deg,#ed50dc 0%,#ac46eb 50%,#54c5f0 100%);color:#fff;box-shadow:0 3px 15px #ad42e33d}
body .nav,body.light .nav{color:var(--muted);border-radius:9px;box-shadow:none;transition:background .15s,color .15s,box-shadow .15s}
body .nav:hover,body.light .nav:hover{background:var(--kn-soft);color:var(--text);filter:none}
body .nav.active,body.light .nav.active{background:linear-gradient(100deg,#ac2ac0,#622e91);color:#fff;box-shadow:0 3px 15px #b829c530,inset 2px 0 0 #f2adff}
body.light .nav.active{background:linear-gradient(100deg,#fff 0%,#e8f7ff 100%);color:#156a9f;box-shadow:0 3px 9px #3b376b24,inset 3px 0 0 #61c6ee}
body .nav.active:after,body.light .nav.active:after{background:#f7c8ff;box-shadow:0 0 9px #ee72ff8c}
body.light .nav.active:after{background:#37aad2;box-shadow:none}
body .tech,body.light .tech{border-top-color:var(--line)}
body .tech strong,body.light .tech strong{color:var(--text)}
body .tech small,body.light .tech small{color:var(--muted)}
body .avatar,body.light .avatar,body .tech .avatar,body.light .tech .avatar{background:var(--kn-soft);color:var(--accent);border:1px solid var(--line)}
body .tech>.good,body.light .tech>.good{color:var(--success)}
body header,body.light header{background:var(--panel);border-top:0;border-bottom:1px solid var(--line);box-shadow:0 3px 15px #0a032112}
body header select,body.light header select{background:var(--kn-input);border-color:var(--line);color:var(--text)}
body h1,body.light h1{color:var(--text)}
body .eyebrow,body.light .eyebrow{color:var(--accent);font-weight:650}
body .panel,body .router-card,body .settings-card,body .stat,body .login-preview,
body.light .panel,body.light .router-card,body.light .settings-card,body.light .stat,body.light .login-preview{
 background:var(--kn-card);border:1px solid var(--line);border-radius:15px;box-shadow:var(--kn-shadow);
}
body .stat,body.light .stat{border-top:2px solid #a75bcd}
body .stat:nth-child(2),body.light .stat:nth-child(2){border-top-color:#5cbfdf}
body .stat:nth-child(3),body.light .stat:nth-child(3){border-top-color:#cb61d3}
body .stat:nth-child(4),body.light .stat:nth-child(4){border-top-color:#8a7bd9}
body .summary>.stat:first-child{background:linear-gradient(120deg,#66236c66,var(--panel) 85%)}
body.light .summary>.stat:first-child{background:linear-gradient(120deg,#f8ecff,var(--panel) 85%)}
body .stat .label,body.light .stat .label{color:var(--muted)}
body .stat .number,body.light .stat .number{font-weight:650}
body .panel-head,body.light .panel-head{border-bottom:1px solid var(--line)}
body .panel .panel{box-shadow:none}
body .router-id>.ico,body.light .router-id>.ico,body .plan-step b,body.light .plan-step b{background:var(--kn-soft);color:var(--accent)}
body button{background:var(--raised);border-color:var(--line);color:var(--text);box-shadow:0 2px 5px #03000d0a;transition:background .15s,border-color .15s,box-shadow .15s}
body button:hover,body.light button:hover{filter:none;border-color:var(--accent);box-shadow:0 3px 10px #a544cd19}
body button.primary,body.light button.primary,body .login-card button.primary{background:var(--kn-primary);border-color:#bd5ade;color:#fff;box-shadow:0 4px 12px #a62fc72b;font-weight:650}
body button.primary:hover,body.light button.primary:hover{background:linear-gradient(105deg,#9446cb,#bb34ae);color:#fff;filter:none;box-shadow:0 5px 17px #b62fcb40}
body button.ghost{background:transparent}
body button.ghost:hover,body.light button.ghost:hover{background:var(--kn-soft);filter:none}
body button:focus-visible,body.light button:focus-visible,body a:focus-visible,body.light a:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
body input,body select,body textarea,body .login-card input{background:var(--kn-input);color:var(--text);border-color:var(--line);accent-color:var(--accent)}
body input:focus,body select:focus,body textarea:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
body input::placeholder,body textarea::placeholder{color:var(--muted);opacity:.85}
body input:disabled{opacity:.6}
body th,body.light th{background:var(--kn-table);color:var(--muted)}
body td,body.light td{border-bottom-color:var(--line)}
body tbody tr:hover,body.light tbody tr:hover{background:var(--kn-soft)}
body .meter,body .wide-meter,body.light .meter,body.light .wide-meter{background:var(--raised)}
body .meter span,body .wide-meter i{background:linear-gradient(90deg,#a54ee8,#ed60d9)}
body .notice,body.light .notice{background:var(--kn-soft);border:1px solid var(--line);border-left:3px solid var(--fiber);color:var(--muted)}
body .pill,body.light .pill{background:var(--kn-success-bg);color:var(--success)}
body .pill.off,body.light .pill.off{background:var(--kn-danger-bg);color:var(--red)}
body .pill.wait,body.light .pill.wait{background:var(--kn-warning-bg);color:var(--yellow)}
body .good{color:var(--success)}
body .bad,body .auth-error,body #opsError,body #finance-error,body #stock-error,body #finance-root .danger,body #stock-root .danger{color:var(--red)}
body .demo,body.light .demo{background:var(--kn-soft);border-color:var(--line);color:var(--accent)}
body .event-icon,body.light .event-icon{background:var(--kn-danger-bg);color:var(--red)}
body .event-icon.green,body.light .event-icon.green{background:var(--kn-success-bg);color:var(--success)}
body .footer,body.light .footer{color:var(--muted)}
body dialog{background:var(--panel);border-color:var(--line);box-shadow:0 25px 90px #05010c66,0 0 0 1px #bf70df17}
body dialog::backdrop{background:#080212b8}
body .toast{background:var(--kn-soft);color:var(--text);border-color:var(--accent);box-shadow:var(--kn-shadow)}
body .role-chip{background:var(--kn-soft);color:var(--accent)}
body .auth-screen{background:var(--bg);color:var(--text)}
body .auth-story{background:radial-gradient(ellipse at 10% 5%,#e42bcc3d 0%,transparent 60%),linear-gradient(145deg,#2c103e,#110a21 75%);color:#f7edff}
body .auth-story:before{border-color:#d560f540;box-shadow:0 0 0 50px #cf43ec09,0 0 0 100px #5bcfff07}
body .auth-story h1,body.light .auth-story h1{color:#fff}
body .auth-story p{color:#d1bfdf}
body .auth-story .eyebrow[style]{color:#f2adff!important}
body .auth-story .small[style]{color:#c7aed7!important}
body .auth-form .field{color:var(--muted)}
body .auth-error,body #opsError{background:var(--kn-danger-bg);border-color:var(--red)}
body .auth-form .login-card{background:var(--kn-card);border:1px solid var(--line);border-radius:20px;padding:30px;max-width:440px;box-shadow:var(--kn-shadow)}
body .auth-form a[download]{background:var(--kn-primary)!important;border:1px solid #bd5ade;color:white!important;box-shadow:0 4px 12px #a62fc72b}
body .auth-form a[href="/"]{color:var(--blue)!important}
body .settings-card a[download]{background:var(--kn-primary)!important;color:#fff!important}
body .ops-calendar-event{border-left-color:var(--fiber)}
body .stock-nav[open]>summary{color:var(--accent);background:var(--kn-soft)}
body ::selection{background:#b84adf55;color:var(--text)}
body aside nav{scrollbar-color:var(--line) transparent}
@media(prefers-reduced-motion:reduce){body button,body .nav{transition:none}}
@media(max-width:760px){body .auth-form .login-card{padding:24px}}

/* Sidebar hierarchy uses the existing theme tokens in both light and dark modes. */
.nav-group{margin:5px 0;border:1px solid transparent;border-radius:9px}
.nav-group>summary{list-style:none;display:flex;align-items:center;gap:7px;padding:12px 8px;cursor:pointer;color:var(--muted);font-size:11.5px;font-weight:600;border-radius:8px;min-height:44px}
.nav-group>summary::-webkit-details-marker{display:none}
.nav-group>summary::marker{content:''}
.nav-group>summary:hover{background:var(--raised);color:var(--text)}
.nav-group>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.nav-group[open]>summary,.nav-group.has-current>summary{color:var(--accent);background:var(--raised)}
.nav-group.has-current{border-color:var(--line)}
.nav-chevron{margin-left:auto;font-size:16px;line-height:1;transition:transform .15s}
.nav-group[open]>.nav-chevron,.nav-group[open]>summary .nav-chevron{transform:rotate(180deg)}
.nav-text{min-width:0;line-height:1.4}
.nav-children{margin:5px 0 7px 14px;padding-left:7px;border-left:1px solid var(--line)}
.nav-group .nav{font-size:11.5px;gap:7px;padding:10px 7px;min-height:40px}
.nav-group .nav .ico svg{width:15px;height:15px}
.nav-group .nav.active:after{flex-shrink:0}
aside>nav{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;flex:1}
.side-bottom{flex-shrink:0}
@media(prefers-reduced-motion:reduce){.nav-chevron{transition:none}}
#billing-root td small{display:block;color:var(--muted);font-size:11px;margin-top:5px;max-width:240px;overflow-wrap:anywhere}
#billing-root table{min-width:900px}#billing-root td .actions{min-width:160px}
#billing-root .panel .content{padding:18px 22px}#billing-root details .row{align-items:center;gap:12px}
#billing-root details .row small{display:block;line-height:1.7;color:var(--muted);font-size:11px}
#billing-form{max-height:80vh;overflow:auto}#billing-form .full{grid-column:1/-1}
#billing-root .notice,#billing-form .notice{line-height:1.8}

/* Live MikroTik monitoring uses the existing light/dark palette. */
#network-root .network-controls{display:flex;gap:20px;align-items:end;flex-wrap:wrap;margin:22px 0}
#network-root .network-controls .field{min-width:200px;flex:1;max-width:460px}
#network-root .network-detail-title{margin-top:28px}
#network-root .network-chart{padding-bottom:18px;margin:20px 0}
#network-root .network-chart .panel-head{gap:16px;flex-wrap:wrap}
#network-root .network-chart .panel-head h2{margin-bottom:6px}
#network-root .traffic-ranges{display:flex;gap:6px;flex-wrap:wrap}
#network-root .traffic-ranges button{font-size:12px;padding:7px 12px}
#network-root .traffic-ranges button[aria-pressed="true"]{border-color:#bc62ef;background:#bc62ef20}
#network-root .traffic-plot{position:relative;margin:16px 20px 0;height:300px}
#network-root .network-chart svg{display:block;width:100%;height:100%;overflow:visible}
#network-root .network-chart svg text{fill:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
#network-root .traffic-grid{stroke:currentColor;opacity:.10;stroke-dasharray:3 5}
#network-root .traffic-inspect{position:absolute;left:7.636%;right:4%;top:11.39%;bottom:15.19%;cursor:crosshair;touch-action:pan-y}
#network-root .traffic-inspect:focus-visible{outline:2px solid #bc62ef;outline-offset:4px}
#network-root .traffic-tooltip{margin:4px 24px 16px;min-height:22px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
#network-root .traffic-stats{overflow-x:auto;margin:0 20px 16px;border:1px solid var(--line);border-radius:10px}
#network-root .traffic-stats table{width:100%;min-width:560px;font-variant-numeric:tabular-nums}
#network-root .traffic-stats th,#network-root .traffic-stats td{text-align:right;white-space:nowrap}
#network-root .traffic-stats th:first-child,#network-root .traffic-stats td:first-child{text-align:left}
#network-root .traffic-key{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px}
#network-root .traffic-key.rx{background:#14b8c9}#network-root .traffic-key.tx{background:#bc62ef}
@media(max-width:680px){#network-root .traffic-plot{height:240px;margin-left:2px;margin-right:8px}#network-root .network-chart svg text{font-size:15px}#network-root .traffic-tooltip{line-height:1.7}}
#network-root .network-chart>p{padding:0 24px}
#network-root .table-wrap{margin-bottom:22px}
#network-root .summary{margin-top:20px}
#network-root .summary .number{overflow-wrap:anywhere}
#network-root .notice{margin:16px 0}
@media(max-width:680px){#network-root .network-controls{display:block}#network-root .network-controls .field{margin:12px 0;max-width:none}}

/* Reviewed PPPoE import */
.import-customer h2{font-size:18px;margin-bottom:6px}
.import-customer p{margin-bottom:18px}
.import-customer .fields{gap:16px}
[data-mapping] select{max-width:360px;width:100%}
[data-commit] .field input:disabled{opacity:.75}

.invoice-tools { border-top: 1px solid var(--line); }
.invoice-tools > .field { max-width: 320px; margin-bottom: 14px; }
.invoice-bulk { flex-wrap: wrap; align-items: center; gap: 10px; }
.invoice-bulk [role="status"] { min-width: 135px; font-weight: 600; }
.invoice-tools .small { margin-top: 12px; }
#billing-form .fields > .table-wrap { grid-column: 1 / -1; }
[data-invoice-select], #billing-select-all { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }