*{box-sizing:border-box}body{margin:0;font-family:Inter,Arial,sans-serif;background:#f4f7fb;color:#172033}.sidebar{position:fixed;left:0;top:0;bottom:0;width:248px;background:linear-gradient(180deg,#062345,#031a34);color:#fff;padding:22px 14px;display:flex;flex-direction:column}.logo{font-size:28px;color:#2990ff;display:flex;gap:12px;align-items:center;padding:0 8px 24px}.logo span{font-size:24px;font-weight:700;line-height:1}.logo small{font-size:12px;color:white;letter-spacing:1px}.sidebar nav{display:flex;flex-direction:column;gap:8px}.sidebar nav a{color:#dbe7f4;text-decoration:none;padding:13px 14px;border-radius:8px}.sidebar nav a:hover,.sidebar nav a.active{background:linear-gradient(90deg,#1887ff,#2b97ff);color:white}.system-box{margin-top:auto;border:1px solid rgba(255,255,255,.15);border-radius:10px;padding:14px;font-size:13px}.system-box p{display:flex;justify-content:space-between}.green{color:#26d16d}.red{color:#ff5360}main{margin-left:248px;min-height:100vh}header{height:72px;background:#fff;border-bottom:1px solid #e6ebf2;display:flex;align-items:center;padding:0 28px;gap:18px}header h2{margin:0}.hamb{border:0;background:none;font-size:24px}.top-actions{margin-left:auto;font-size:14px;color:#536173}.top-actions a{color:#087cff;text-decoration:none}.content{padding:18px}.cards{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.card{background:#fff;border:1px solid #e1e7f0;border-radius:12px;box-shadow:0 3px 10px rgba(20,45,80,.05)}.kpi{padding:20px;display:flex;gap:14px;align-items:center}.kpi strong{display:block;font-size:28px;margin:5px 0}.kpi small,.kpi span{color:#5b6675}.icon{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:24px}.blue{background:#1683ff}.greenbg{background:#1ebc62}.purple{background:#7745ef}.redbg{background:#ff4050}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}.panel{padding:16px}.panel h3{margin:0 0 16px;font-size:16px}.panel h3 a{float:right;color:#087cff;font-size:13px;text-decoration:none}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:13px}th,td{padding:12px;border-bottom:1px solid #edf1f6;text-align:left;white-space:nowrap}th{background:#f8fafc}.badge{padding:5px 10px;border-radius:6px}.badge.ok{background:#e6f8ee;color:#15914a}.badge.bad{background:#ffe8ea;color:#c62b39}.login-page{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#031a34,#0b5fb8)}.login-card{width:min(410px,92vw);background:white;padding:34px;border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.25)}.login-card h1{margin:8px 0}.login-card p{color:#687485}.brand-mark{font-size:42px;color:#1683ff}.login-card label,.form-grid label{display:block;margin:14px 0 6px;font-size:13px}.login-card input,.form-grid input,.search input{width:100%;padding:12px;border:1px solid #d8e0ea;border-radius:8px}.btn{border:0;border-radius:8px;padding:10px 16px;cursor:pointer}.btn.primary{background:#1683ff;color:white}.btn.danger{background:#ff4050;color:white}.login-card .btn{width:100%;margin-top:18px}.alert{padding:10px;border-radius:8px;background:#ffe8ea;color:#b82836;margin:10px 0}.alert.ok{background:#e7f8ee;color:#167d43}.search{display:flex;gap:10px;margin-bottom:16px}.form-grid{display:grid;gap:8px}canvas{width:100%}.form-grid input[type=checkbox]{width:auto}
@media(max-width:1200px){.cards{grid-template-columns:repeat(2,1fr)}.grid2{grid-template-columns:1fr}}@media(max-width:760px){.sidebar{position:static;width:100%;height:auto}.system-box{display:none}main{margin-left:0}.cards{grid-template-columns:1fr}.content{padding:10px}header{padding:0 14px}.top-actions{font-size:12px}.grid2{grid-template-columns:1fr}}
.single-cards{grid-template-columns:repeat(5,1fr)}.status-text{font-size:22px!important}.router-summary{margin-top:14px}.info-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}.info-grid>div{background:#f8fafc;border:1px solid #e7edf5;border-radius:9px;padding:14px}.info-grid small{display:block;color:#667085;margin-bottom:6px}.info-grid b{display:block;overflow-wrap:anywhere}.settings-card{max-width:760px}.button-row{display:flex;gap:10px;margin-top:10px}.btn.secondary{background:#e8eef7;color:#24415f}.form-grid select{width:100%;padding:12px;border:1px solid #d8e0ea;border-radius:8px;background:#fff}.inline-form{display:flex;gap:6px}.inline-form input{min-width:130px;padding:8px;border:1px solid #d8e0ea;border-radius:7px}@media(max-width:1200px){.single-cards{grid-template-columns:repeat(2,1fr)}.info-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:760px){.single-cards,.info-grid{grid-template-columns:1fr}.button-row{flex-direction:column}}