:root{--primary:#0168fa;--primary-hover:#015ada;--bg:#f4f5f8;--card-bg:#fff;--text:#1c273c;--text-muted:#8392a5;--border:#e2e8f0;--header-height:60px;--sidebar-width:240px;--success:#10b981;--error:#ef4444;--shadow:0 1px 3px #1c273c14}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;min-height:100vh;font-family:Inter,system-ui,-apple-system,sans-serif}.login-container{justify-content:center;align-items:center;height:100vh;padding:1rem;display:flex}.login-form{border:1px solid var(--border);background:#fff;border-radius:1rem;width:100%;max-width:420px;padding:3rem;box-shadow:0 10px 25px #1c273c0d}.action-bar{justify-content:space-between;align-items:center;gap:1rem;margin-bottom:2rem;display:flex}.search-box{border:1px solid var(--border);background:#0f172a80;border-radius:.75rem;flex:1;align-items:center;gap:.75rem;max-width:400px;padding:.5rem 1rem;display:flex}.search-box input{color:#fff;background:0 0;border:none;outline:none;width:100%}.btn-primary{background:var(--primary);color:#fff;cursor:pointer;border:none;border-radius:.5rem;justify-content:center;align-items:center;gap:.5rem;width:auto;padding:.625rem 1.25rem;font-weight:600;display:flex}.table-container{background:var(--card-bg);border:1px solid var(--border);border-radius:1rem;overflow:hidden}table{border-collapse:collapse;width:100%}th{text-align:left;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);background:#ffffff08;padding:1rem 1.5rem;font-size:.75rem}td{border-top:1px solid var(--border);padding:1rem 1.5rem}.ip-info{font-family:monospace;font-weight:600}.mac-info{color:var(--text-muted);font-family:monospace;font-size:.75rem}.badge{text-transform:capitalize;border-radius:9999px;padding:.25rem .75rem;font-size:.75rem;font-weight:600}.badge.active{color:#34d399;background:#10b9811a}.badge.suspended{color:#fbbf24;background:#f59e0b1a}.badge.debtor{color:#f87171;background:#ef44441a}.btn-icon{color:var(--text-muted);background:0 0;width:auto;padding:.5rem}.btn-icon:hover{color:var(--text);background:#ffffff0d}.login-form h2{text-align:center;color:#1c273c;margin-bottom:2rem;font-size:1.5rem;font-weight:800}.form-group{margin-bottom:1.5rem}.form-group label{color:var(--text-muted);margin-bottom:.5rem;font-size:.875rem;font-weight:500;display:block}.form-group input{border:1px solid var(--border);color:#1c273c;background:#fff;border-radius:.5rem;width:100%;padding:.75rem 1rem;transition:all .2s}.form-group input:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 3px #6366f133}button{background:var(--primary);color:#fff;cursor:pointer;border:none;border-radius:.5rem;width:100%;padding:.75rem;font-weight:600;transition:all .2s}button:hover{background:var(--primary-hover)}.btn-logout-alt{box-shadow:var(--shadow);align-items:center;gap:.5rem;display:flex;color:#1c273c!important;border:1px solid var(--border)!important;background:#fff!important;border-radius:.5rem!important;width:auto!important;padding:.4rem .8rem!important;font-size:.875rem!important;font-weight:600!important}.btn-logout-alt:hover{background:#f8f9fc!important;border-color:#cbd5e1!important}.error{color:var(--error);text-align:center;background:#ef44441a;border-radius:.5rem;margin-bottom:1rem;padding:.75rem;font-size:.875rem}.setup-btn{border:1px solid var(--border);color:var(--text-muted);background:#ffffff0d}.setup-btn:hover{color:var(--text);background:#ffffff1a}.dashboard-layout{min-height:100vh;display:flex}.navbar{height:var(--header-height);border-bottom:1px solid var(--border);z-index:1000;background:#fff;justify-content:space-between;align-items:center;padding:0 1.5rem;display:flex;position:fixed;top:0;left:0;right:0}.sidebar{width:var(--sidebar-width);border-right:1px solid var(--border);top:var(--header-height);z-index:999;background:#fff;flex-direction:column;padding:1.5rem 1rem;display:flex;position:fixed;bottom:0;left:0}.sidebar-header{display:none}.sidebar-nav{flex-direction:column;flex:1;gap:.25rem;display:flex}.nav-item{color:#4a5e8a;text-align:left;cursor:pointer;background:0 0;border:none;border-radius:.5rem;align-items:center;gap:.75rem;padding:.6rem .75rem;font-weight:500;transition:all .2s;display:flex}.nav-item:hover{color:var(--primary);background:#f5f8ff;transform:none}.nav-item.active{color:var(--primary);box-shadow:none;background:#f0f4ff}.nav-item svg{color:#8392a5}.nav-item.active svg{color:var(--primary)}.submenu{flex-direction:column;margin-top:.25rem;margin-bottom:.5rem;padding-left:2rem;display:flex}.sub-item{color:#6a7c92!important;padding:.45rem .75rem!important;font-size:.8125rem!important}.sub-item:hover{color:var(--primary)!important}.sub-item.active{color:var(--primary)!important;background:0 0!important;font-weight:600!important}.dot{background:#cbd5e1;border-radius:50%;width:4px;height:4px;margin-right:.75rem}.sub-item.active .dot{background:var(--primary);box-shadow:0 0 6px var(--primary)}.main-content{margin-left:var(--sidebar-width);margin-top:var(--header-height);flex:1;max-width:100%;padding:2rem}.card{background:var(--card-bg);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:.5rem;padding:1.5rem}.mikrotik-dashboard-container{flex-direction:column;gap:1.5rem;display:flex}.dashboard-header-right{justify-content:flex-end;margin-bottom:.5rem;display:flex}.live-indicator{color:var(--text-muted);align-items:center;gap:.5rem;font-size:.875rem;display:flex}.live-dot{background-color:var(--success);border-radius:50%;width:10px;height:10px;animation:2s infinite pulse}@keyframes pulse{0%{transform:scale(.95);box-shadow:0 0 #10b981b3}70%{transform:scale(1);box-shadow:0 0 0 6px #10b98100}to{transform:scale(.95);box-shadow:0 0 #10b98100}}.mt-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.5rem;display:grid}.mt-empty{text-align:center;color:var(--text-muted);padding:3rem 1rem}.mt-empty h3{color:var(--text);margin:1rem 0 .5rem}.mt-card{border:1px solid var(--border);background:#fff;border-radius:1rem;padding:1.5rem;transition:transform .2s,box-shadow .2s;position:relative;overflow:hidden;box-shadow:0 4px 6px -1px #0000000d,0 2px 4px -1px #00000008}.mt-card:hover{border-color:var(--primary);transform:translateY(-4px);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.mt-card:before{content:"";z-index:0;pointer-events:none;background:linear-gradient(135deg,#10b9811a 0%,#3b82f60d 100%);border-bottom-left-radius:100%;width:120px;height:120px;position:absolute;top:0;right:0}.mt-card-header{z-index:1;justify-content:space-between;align-items:flex-start;margin-bottom:1.5rem;display:flex;position:relative}.mt-card-header h3{color:var(--text);margin-bottom:.25rem;font-size:1.25rem;font-weight:700}.mt-host{color:var(--text-muted);align-items:center;gap:.35rem;font-family:monospace;font-size:.8rem;display:flex}.mt-badge{border-radius:9999px;align-items:center;gap:.35rem;padding:.25rem .75rem;font-size:.75rem;font-weight:600;display:flex}.mt-badge-online{color:#10b981;background:#10b9811a;border:1px solid #10b98133}.mt-badge-connecting{color:#64748b;background:#64748b1a;border:1px solid #64748b33}.mt-stats{z-index:1;flex-direction:column;gap:1.25rem;display:flex;position:relative}.mt-stat-row{flex-direction:column;gap:.5rem;display:flex}.mt-stat-label{color:var(--text-muted);justify-content:space-between;align-items:center;font-size:.875rem;display:flex}.mt-stat-label span{align-items:center;gap:.5rem;display:flex}.mt-stat-label strong{color:var(--text)}.mt-progress-bg{background:#e2e8f0;border-radius:999px;height:8px;overflow:hidden}.mt-progress-fill{border-radius:999px;height:100%;transition:width 1s ease-in-out,background-color .5s}.mt-stat-detail{color:var(--text-muted);text-align:right;font-family:monospace;font-size:.75rem}.mt-info-grid{border-top:1px solid var(--border);grid-template-columns:1fr 1fr;gap:1rem;margin-top:.5rem;padding-top:1.25rem;display:grid}.mt-info-item{flex-direction:column;gap:.25rem;display:flex}.mt-info-label{text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);align-items:center;gap:.25rem;font-size:.7rem;display:flex}.mt-info-value{color:var(--text);font-family:monospace;font-size:.875rem;font-weight:500}.mt-waiting{height:100px;color:var(--text-muted);justify-content:center;align-items:center;font-size:.875rem;font-style:italic;display:flex}.charts-container{flex-direction:column;gap:2rem;display:flex}.chart-card{padding:2rem!important}.chart-header{justify-content:space-between;align-items:flex-start;margin-bottom:2rem;display:flex}.chart-header h3{color:var(--text);margin-bottom:.25rem;font-size:1.25rem;font-weight:700}.chart-legend{gap:1.5rem;display:flex}.legend-item{color:var(--text-muted);align-items:center;gap:.5rem;font-size:.875rem;font-weight:500;display:flex}.legend-item .dot{border-radius:50%;width:10px;height:10px;margin-right:0}.legend-item .dot.download{background-color:var(--primary)}.legend-item .dot.upload{background-color:var(--success)}.stats-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;display:grid}.stat-mini-card h4{color:var(--text);margin:.5rem 0;font-size:1.875rem;font-weight:800}.trend{font-size:.8125rem;font-weight:600}.trend.positive{color:var(--success)}.trend.negative{color:var(--error)}.card-header-main{margin-bottom:2.5rem}.card-header-main h1{color:var(--text);margin-bottom:.5rem;font-size:2rem;font-weight:800}.status-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem;margin-bottom:3rem;display:grid}.status-card{align-items:center;gap:1.25rem;transition:transform .2s;display:flex;padding:1.5rem!important}.status-card:hover{transform:translateY(-4px)}.status-icon{border-radius:1rem;justify-content:center;align-items:center;width:54px;height:54px;display:flex}.tools-section h3{margin-bottom:1.5rem;font-size:1.125rem;font-weight:700}.tools-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;display:grid}.tool-btn{border:1px solid var(--border);color:var(--text);background:#fff;border-radius:.75rem;align-items:center;gap:.75rem;padding:1rem;font-weight:600;transition:all .2s;display:flex}.tool-btn:hover{background:var(--primary);color:#fff;border-color:var(--primary)}.log-list{flex-direction:column;gap:1rem;margin-top:1rem;display:flex}.log-item{border-bottom:1px solid var(--border);gap:1.5rem;padding:.75rem 0;font-size:.875rem;display:flex}.log-item:last-child{border-bottom:none}.log-time{color:var(--text-muted);min-width:70px;font-weight:600}.log-msg.warning{color:#f59e0b;font-weight:500}.config-nav{border-bottom:1px solid var(--border);gap:1.5rem;margin-bottom:2rem;display:flex}.config-tab-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;width:auto;padding:.75rem .25rem;font-size:.875rem;font-weight:600;position:relative}.config-tab-btn:hover{color:var(--text);background:0 0}.config-tab-btn.active{color:var(--primary)}.config-tab-btn.active:after{content:"";background:var(--primary);height:2px;position:absolute;bottom:-1px;left:0;right:0}@keyframes spin{to{transform:rotate(360deg)}}.spin{animation:1s linear infinite spin}.hamburger-btn{cursor:pointer;z-index:1100;display:none;color:var(--text)!important;background:0 0!important;border:none!important;width:auto!important;padding:.5rem!important}.sidebar-overlay{z-index:998;background:#00000080;display:none;position:fixed;inset:0}@media (width<=768px){:root{--sidebar-width:260px}.hamburger-btn{justify-content:center;align-items:center;display:flex!important}.sidebar{z-index:1050;box-shadow:none;transition:transform .3s cubic-bezier(.4,0,.2,1);transform:translate(-100%)}.sidebar.open{transform:translate(0);box-shadow:4px 0 25px #00000026}.sidebar-overlay.visible{display:block}.main-content{margin-left:0!important;padding:1rem!important}.navbar{gap:.5rem;padding:0 .75rem}.card{padding:1rem}.mt-grid,.stats-grid,.status-grid,.tools-grid{grid-template-columns:1fr!important}.mt-info-grid{grid-template-columns:1fr 1fr;gap:.75rem}.table-container{-webkit-overflow-scrolling:touch;overflow-x:auto}.action-bar{flex-direction:column;align-items:stretch}.search-box{max-width:100%}.chart-header{flex-direction:column;gap:1rem}.chart-legend{flex-wrap:wrap;gap:.75rem}.config-nav{-webkit-overflow-scrolling:touch;white-space:nowrap;gap:0;overflow-x:auto}.config-tab-btn{flex-shrink:0;padding:.75rem 1rem}.login-form{margin:0 1rem;padding:2rem 1.5rem}.card-header-main h1{font-size:1.5rem}.hide-mobile-sm{display:none!important}}@media (width<=480px){.main-content{padding:.75rem!important}.card{border-radius:.5rem;padding:.85rem}.mt-card{border-radius:.75rem;padding:1rem}.mt-card-header h3{font-size:1rem}.mt-info-grid{grid-template-columns:1fr}th,td{padding:.65rem .75rem;font-size:.8rem}.btn-primary{padding:.5rem .75rem;font-size:.8rem}.hide-mobile{display:none!important}.log-item{flex-direction:column;gap:.25rem}}