:root{font-family:Inter,Segoe UI,Arial,sans-serif;color:#172027;background:#f4f6f8;font-size:14px;--nav:#071d2b;--green:#078a74;--green2:#16ad83;--blue:#168ee4;--border:#e0e6ea}*{box-sizing:border-box}body{margin:0}.app-shell{display:grid;grid-template-columns:224px minmax(0,1fr);min-height:100vh}.sidebar{position:-webkit-sticky;position:sticky;top:0;height:100vh;overflow:auto;background:linear-gradient(180deg,#071925,#082737);color:#d7e3e8;box-shadow:6px 0 22px #06141d1c;z-index:4}.logo{height:71px;display:flex;align-items:center;gap:11px;padding:0 22px;border-bottom:1px solid #ffffff12}.logo-mark{display:grid;place-items:center;width:42px;height:34px;border-radius:9px 2px 9px 2px;background:linear-gradient(135deg,#eaf4f4 0 47%,#0fa989 48%);color:#092230;font-size:27px;font-weight:1000;font-style:italic}.logo strong{display:block;font-size:19px;letter-spacing:1.5px;color:#fff}.logo small{font-size:9px;letter-spacing:3px;color:#a9bac2}.profile{display:flex;gap:10px;align-items:center;padding:15px 18px;border-bottom:1px solid #ffffff12}.avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#e8f2f0,#b4cbc6);border:2px solid #fff;color:#143129;font-weight:800}.profile b{display:block;font-size:12px;color:#fff}.profile small{display:inline-block;background:#087e66;padding:3px 8px;border-radius:10px;font-size:9px;margin-top:5px}.nav-section p{font-size:9px;color:#738d99;padding:12px 20px 4px;margin:0}.nav-section a{display:flex;align-items:center;gap:11px;color:#c5d2d8;text-decoration:none;padding:8px 20px;font-size:11px;border-left:3px solid transparent}.nav-section a span{width:15px;text-align:center;color:#bed1d9}.nav-section a.active,.nav-section a:hover{color:#fff;background:linear-gradient(90deg,#0c746c,#0b9587);border-left-color:#42d0b5}.collapse{position:-webkit-sticky;position:sticky;bottom:0;width:100%;height:42px;border:0;border-top:1px solid #ffffff18;background:#071e2c;color:#e7f2f3;font-size:21px}.workspace{min-width:0;display:flex;flex-direction:column}.topbar{height:64px;position:-webkit-sticky;position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:18px;padding:0 24px;background:#fff;border-bottom:1px solid var(--border);box-shadow:0 3px 14px #1832420b}.menu{border:0;background:none;font-size:22px;color:#193b4c}.tenant-name{font-weight:750;font-size:17px;white-space:nowrap}.tenant-name span{margin-left:8px;color:#07705e;border:1px solid #a5dfd2;background:#e8f8f4;border-radius:12px;padding:4px 9px;font-size:9px}.search{margin-left:auto;height:36px;max-width:430px;flex:1 1;display:flex;align-items:center;gap:8px;border:1px solid #e3e8ec;background:#f8fafb;border-radius:7px;padding:0 11px;color:#71818b}.search input{border:0;background:transparent;outline:0;min-width:0;flex:1 1;font-size:11px}.search kbd{font:9px inherit;color:#849099}.integration{display:flex;align-items:center;gap:7px;white-space:nowrap}.integration i{font-style:normal;background:#e6f6f1;color:#087660;border-radius:6px;padding:7px}.integration small{font-size:9px}.integration b{display:block;color:#077159;background:#e6f7f1;padding:2px 5px;border-radius:5px;margin-top:2px}.bell{position:relative;border:0;background:none;font-size:25px}.bell em{position:absolute;right:-3px;top:-2px;background:#e9343e;color:white;border-radius:9px;font:700 9px Arial;padding:3px 5px}.mini{width:34px;height:34px;font-size:10px}.page{padding:16px 18px 20px}.demo-notice{padding:9px 13px;margin-bottom:12px;border:1px solid #c7e2db;background:#eff9f6;color:#46615b;border-radius:8px;font-size:10px}.demo-notice span{font-weight:750;color:#08705d;margin-right:6px}.metrics{display:grid;grid-template-columns:repeat(5,minmax(150px,1fr));grid-gap:12px;gap:12px}.card,.metric{background:#fff;border:1px solid var(--border);border-radius:11px;box-shadow:0 3px 14px #17314208}.metric{min-height:86px;display:flex;align-items:center;padding:13px 15px;gap:12px}.metric-icon{width:45px;height:45px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;font-size:21px;color:#fff;font-weight:700}.metric-icon.green{background:linear-gradient(145deg,#087663,#08a280)}.metric-icon.amber{background:linear-gradient(145deg,#ffb31c,#ff8d00)}.metric-icon.blue{background:linear-gradient(145deg,#138de5,#216fdf)}.metric-icon.red{background:linear-gradient(145deg,#fa5864,#e62942)}.metric small{font-size:10px}.metric strong{display:block;font-size:18px;margin:3px 0}.metric p{font-size:9px;color:#76838b;margin:0}.metric p.positive{color:#09915f;font-weight:700}.chart-grid{display:grid;grid-template-columns:1.08fr 1fr;grid-gap:12px;gap:12px;margin-top:12px}.card{padding:15px}.card h2{font-size:13px;margin:0}.card h2 small{font-weight:400;color:#6d7980}.card-title{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.card-title p{font-size:9px;color:#617079;margin:10px 0 2px}.card-title button,.card-title>a{border:1px solid #e1e7ea;background:#fff;border-radius:5px;color:#32444d;font-size:9px;padding:7px 9px;text-decoration:none}.legend{display:inline-block;width:16px;height:3px;margin:0 4px 2px 10px}.green-dot{background:#1baa83}.blue-dot{background:#178ee1}.red-dot{background:#f13b49}.dash-dot{border-top:2px dashed #748393}.chart{display:block;width:100%;height:210px;overflow:visible}.gridline{stroke:#e8ecef;stroke-width:1;stroke-dasharray:3 3}.axis{font-size:8px;fill:#6e7a81;text-anchor:middle}.line{fill:none;stroke-width:3;stroke-linecap:round}.greenline{stroke:#18a97e}.blueline{stroke:#168de0}.redline{stroke:#f03645}.dashline{stroke:#718294;stroke-width:2;stroke-dasharray:6 5}.operations{display:grid;grid-template-columns:31% 1fr;grid-gap:12px;gap:12px;margin-top:12px}.orders h2,.os-form h2{margin-bottom:12px}.form-grid{display:grid;grid-template-columns:1fr 1fr;grid-gap:9px 10px;gap:9px 10px}.form-grid label{font-size:9px;font-weight:650}.form-grid label.full{grid-column:1/-1}.form-grid input,.form-grid select{width:100%;height:31px;margin-top:5px;border:1px solid #dfe5e9;border-radius:5px;background:#fff;color:#57656d;padding:0 8px;font-size:9px}.inline{display:flex;gap:8px}.inline button{margin-top:5px;white-space:nowrap;border:0;border-radius:5px;background:#297d83;color:#fff;font-size:9px;padding:0 12px}.form-actions{display:flex;justify-content:space-between;margin-top:11px}.form-actions button{border:0;border-radius:5px;padding:8px 13px;font-size:9px}.ghost{background:#f6f8f9;color:#57646b}.primary{background:linear-gradient(135deg,#07836e,#04a07f);color:#fff}.table-scroll{overflow:auto}table{width:100%;border-collapse:collapse;white-space:nowrap;font-size:9px}th{text-align:left;background:#f7f9fa;color:#4a5962;padding:9px 7px;border-bottom:1px solid #e3e8eb}td{padding:8px 7px;border-bottom:1px solid #edf0f2;color:#46545c}td b{color:#0b5c70}.olt,.status{display:inline-block;padding:4px 7px;border-radius:5px;background:#e4f7ef;color:#09825f}.s0{background:#e8f2ff;color:#2570bf}.s1{background:#e9f4ff;color:#2676c3}.s2,.s3{background:#fff5d9;color:#a16d00}.risk{display:inline-block;width:6px;height:6px;background:#088771;border-radius:50%;margin-right:5px}.risk.high{background:#d81d34}.person{display:inline-grid;place-items:center;width:19px;height:19px;margin-right:5px;border-radius:50%;background:#d8e8e4;color:#375952;font-weight:700}.action{width:24px;height:24px;border:1px solid #dce3e7;background:#fff;border-radius:4px;margin-right:4px;color:#147c79}.network-grid{display:grid;grid-template-columns:1.05fr 1fr;grid-gap:12px;gap:12px;margin-top:12px}.olt.warning{background:#fff1d1;color:#a46b00}.usage{display:inline-block;width:68px;height:4px;background:#e5eaed;margin-right:6px;vertical-align:middle}.usage,.usage i{border-radius:3px}.usage i{display:block;height:100%;background:#17ab84}.usage i.danger{background:#ee4051}.pppoe-content{display:grid;grid-template-columns:130px 80px 1fr;align-items:center;grid-gap:12px;gap:12px;padding-top:14px}.donut{width:112px;height:112px;border-radius:50%;background:conic-gradient(#21b684 0 84.2%,#218ee4 84.2% 100%);display:grid;place-items:center}.donut:before{content:"";position:absolute;width:72px;height:72px;border-radius:50%;background:#fff}.donut span{position:relative;text-align:center}.donut b,.donut small{display:block}.connection-totals b,.connection-totals strong{display:block;font-size:18px;color:#0a9b71}.connection-totals b{color:#e62d3f;margin-top:12px}.connection-totals small{font-size:9px;color:#63727a}.top-users>small{display:block;margin-bottom:9px}.top-users div{display:grid;grid-template-columns:90px 1fr 55px;align-items:center;grid-gap:7px;gap:7px;margin:8px 0;font-size:8px}.top-users i{height:4px;background:#19ad83;border-radius:4px}.top-users small{text-align:right}footer{margin-top:auto;height:47px;display:flex;justify-content:space-between;align-items:center;padding:0 24px;background:#fff;border-top:1px solid var(--border);color:#69777f;font-size:9px}@media(max-width:1250px){.metrics{grid-template-columns:repeat(3,1fr)}.integration{display:none}.operations{grid-template-columns:1fr}.os-form{display:none}}@media(max-width:980px){.app-shell{grid-template-columns:72px 1fr}.logo div,.nav-section a:not(.active),.nav-section p,.profile div{display:none}.logo{padding:0 15px}.profile{padding:15px}.nav-section a.active{font-size:0;justify-content:center;padding:13px}.nav-section a.active span{font-size:18px}.search kbd,.tenant-name span{display:none}.chart-grid,.network-grid{grid-template-columns:1fr}.sidebar{overflow:hidden}}@media(max-width:680px){.app-shell{display:block}.sidebar{display:none}.topbar{padding:0 12px}.tenant-name{font-size:13px}.search{display:none}.page{padding:10px}.metrics{grid-template-columns:1fr 1fr}.metric{min-height:74px}.chart{height:165px}.network-grid,.operations{display:block}.network-grid>.card{margin-top:10px}.pppoe-content{grid-template-columns:110px 75px}.top-users{display:none}footer{padding:0 12px}footer span:nth-child(2),footer span:nth-child(4){display:none}}@media(max-width:420px){.metrics{grid-template-columns:1fr}.chart-grid{display:block}.chart-grid>.card{margin-top:10px}.tenant-name{display:none}}.logout{border:0;background:#f1f6f5;color:#08745f;border-radius:7px;width:32px;height:32px;font-size:17px}.login-page{min-height:100vh;display:grid;grid-template-columns:minmax(420px,1.05fr) minmax(430px,.95fr);background:#fff}.login-visual{position:relative;overflow:hidden;display:flex;flex-direction:column;padding:42px 7vw;color:#dfeaed;background:radial-gradient(circle at 75% 50%,#0c594f 0,#092f36 30%,#071e2d 64%,#061824 100%)}.login-visual:after{content:"";position:absolute;inset:0;background-image:linear-gradient(#ffffff08 1px,transparent 0),linear-gradient(90deg,#ffffff08 1px,transparent 0);background-size:48px 48px;-webkit-mask-image:linear-gradient(90deg,#0004,#000);mask-image:linear-gradient(90deg,#0004,#000);pointer-events:none}.login-brand{display:flex;align-items:center;gap:12px;position:relative;z-index:1}.login-brand strong{display:block;color:#fff;font-size:22px;letter-spacing:2px}.login-brand small{display:block;font-size:9px;letter-spacing:4px;color:#9fb4bc}.visual-copy{position:relative;z-index:1;margin:auto 0;max-width:570px}.eyebrow{font-size:10px;letter-spacing:2.5px;color:#45d4b6;font-weight:750}.visual-copy h1{font-size:48px;line-height:1.08;letter-spacing:-1.6px;margin:18px 0}.visual-copy h1 em{font-style:normal;color:#40d0b2}.visual-copy p{font-size:15px;line-height:1.7;color:#a9bdc4;max-width:510px}.visual-copy ul{list-style:none;padding:0;margin:28px 0;display:grid;grid-gap:11px;gap:11px;color:#c3d2d6;font-size:12px}.login-visual footer{position:relative;z-index:1;color:#738f99;font-size:10px}.visual-orbit{position:absolute;right:-150px;bottom:-160px;width:480px;height:480px;border:1px solid #43d3b322;border-radius:50%}.visual-orbit:after,.visual-orbit:before{content:"";position:absolute;border:1px solid #43d3b326;border-radius:50%;inset:65px}.visual-orbit:after{inset:130px}.visual-orbit span{position:absolute;left:202px;top:205px;color:#41cdb0;font-weight:900;letter-spacing:2px}.visual-orbit i{position:absolute;width:8px;height:8px;background:#42d5b4;border-radius:50%;box-shadow:0 0 18px #42d5b4}.visual-orbit i:first-child{left:55px;top:95px}.visual-orbit i:nth-child(2){left:180px;top:0}.visual-orbit i:nth-child(3){left:112px;top:330px}.login-form-wrap{display:grid;place-items:center;padding:40px;background:linear-gradient(135deg,#fff,#f6faf9)}.login-form{width:min(420px,100%)}.mobile-brand{display:none}.welcome{font-size:10px;font-weight:800;letter-spacing:2px;color:#07836c}.login-form h2{font-size:31px;margin:12px 0 8px;letter-spacing:-.8px}.login-form>p{color:#718087;margin:0 0 28px;font-size:12px}.login-form label{display:block;font-size:11px;font-weight:700;margin:16px 0;color:#33464e}.login-form input{display:block;width:100%;height:46px;margin-top:7px;border:1px solid #d8e1e4;border-radius:8px;background:#fff;padding:0 13px;font:12px inherit;outline:0;transition:.2s}.login-form input:focus{border-color:#0b9b80;box-shadow:0 0 0 3px #0b9b8018}.login-error{padding:10px 12px;margin:14px 0;background:#fff0f1;border:1px solid #f4c4c8;color:#aa2532;border-radius:7px;font-size:11px}.login-submit{width:100%;height:47px;margin-top:7px;border:0;border-radius:8px;background:linear-gradient(135deg,#087b68,#08a380);color:#fff;font-weight:750;box-shadow:0 8px 20px #07866d2e}.login-submit span{float:right}.login-submit:disabled{opacity:.65}.login-form>a{display:block;text-align:center;color:#087764;text-decoration:none;font-size:11px;margin:17px}.security-note{border-top:1px solid #e3e9eb;padding-top:18px;color:#7a898f;font-size:9px;line-height:1.6}@media(max-width:850px){.login-page{grid-template-columns:1fr}.login-visual{display:none}.login-form-wrap{min-height:100vh;padding:25px}.mobile-brand{display:flex;align-items:center;gap:10px;margin-bottom:55px;color:#0a2b35;letter-spacing:1px}.mobile-brand .logo-mark{width:38px;height:31px;font-size:23px}.login-form h2{font-size:27px}}.recovery-success{text-align:center}.recovery-success>span{display:grid;place-items:center;width:58px;height:58px;margin:0 auto 18px;border-radius:50%;background:#e3f7ef;color:#087a61;font-size:28px}.recovery-success p{color:#687980;font-size:11px;line-height:1.6}.recovery-success a{display:inline-block;margin-top:18px;padding:11px 18px;border-radius:7px;background:#087b68;color:#fff;text-decoration:none;font-size:10px;font-weight:700}.full-recovery{grid-column:1/-1;min-height:100vh}.password-rules{display:grid;grid-template-columns:1fr 1fr;grid-gap:5px;gap:5px;padding:12px 12px 12px 28px;background:#f3f7f6;color:#586a70;border-radius:7px;font-size:9px}.password-rules li::marker{color:#08826b}@media(max-width:480px){.password-rules{grid-template-columns:1fr}}