*{box-sizing:border-box;margin:0;padding:0}:root{--primary:#6366f1;--primary-dark:#4f46e5;--primary-light:#818cf8;--primary-glow:#6366f140;--bg:#0a0e1a;--bg-card:#11182dcc;--bg-card-solid:#111829;--bg-card-hover:#192238e6;--bg-input:#1e2945cc;--bg-elevated:#161e34f2;--text:#eef2ff;--text-secondary:#c7d2fe;--text-muted:#7c8db5;--text-dim:#4a5578;--success:#10b981;--success-light:#34d399;--danger:#ef4444;--danger-light:#f87171;--warning:#f59e0b;--warning-light:#fbbf24;--info:#3b82f6;--gradient-primary:linear-gradient(135deg,#6366f1,#8b5cf6);--gradient-success:linear-gradient(135deg,#10b981,#059669);--gradient-danger:linear-gradient(135deg,#ef4444,#dc2626);--gradient-warning:linear-gradient(135deg,#f59e0b,#d97706);--gradient-info:linear-gradient(135deg,#3b82f6,#2563eb);--gradient-dark:linear-gradient(135deg,#1e293b,#0f172a);--gradient-card:linear-gradient(145deg,#1e294580,#0f172a80);--gradient-glass:linear-gradient(145deg,#ffffff0d,#ffffff03);--border:#6366f11f;--border-light:#ffffff0f;--radius:14px;--radius-sm:8px;--radius-lg:20px;--shadow-sm:0 2px 8px #00000026;--shadow-md:0 4px 16px #00000040;--shadow-lg:0 8px 32px #00000059;--shadow-glow:0 0 20px #6366f126;--glass-blur:blur(20px);--sidebar-width:272px;--sidebar-collapsed:72px;--transition-fast:0.15s cubic-bezier(0.4,0,0.2,1);--transition-normal:0.25s cubic-bezier(0.4,0,0.2,1);--transition-slow:0.4s cubic-bezier(0.4,0,0.2,1)}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#0a0e1a;background:var(--bg);color:#eef2ff;color:var(--text);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;min-height:100vh}body:before{background:radial-gradient(ellipse at 20% 50%,#6366f10f 0,#0000 60%),radial-gradient(ellipse at 80% 20%,#8b5cf60a 0,#0000 50%),radial-gradient(ellipse at 50% 80%,#3b82f608 0,#0000 50%);content:"";height:100%;left:0;pointer-events:none;position:fixed;top:0;width:100%;z-index:0}#root{position:relative;z-index:1}.app-layout{display:flex;min-height:100vh}.main-content{animation:fadeInPage .4s ease;flex:1 1;margin-left:272px;margin-left:var(--sidebar-width);min-height:100vh;padding:32px 40px}@keyframes fadeInPage{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.sidebar{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);background:#161e34f2;background:var(--bg-elevated);border-right:1px solid #6366f11f;border-right:1px solid var(--border);display:flex;flex-direction:column;height:100vh;left:0;overflow-x:hidden;overflow-y:auto;padding:20px 14px;position:fixed;top:0;width:272px;width:var(--sidebar-width);z-index:100}.sidebar-brand{border-bottom:1px solid #6366f11f;border-bottom:1px solid var(--border);color:#eef2ff;color:var(--text);font-weight:700;gap:12px;letter-spacing:-.3px;margin-bottom:20px;padding:4px 8px 20px}.sidebar-brand,.sidebar-brand .brand-icon{align-items:center;display:flex;font-size:18px}.sidebar-brand .brand-icon{background:linear-gradient(135deg,#6366f1,#8b5cf6);background:var(--gradient-primary);border-radius:10px;box-shadow:0 4px 12px #6366f14d;color:#fff;flex-shrink:0;height:38px;justify-content:center;width:38px}.sidebar nav{display:flex;flex:1 1;flex-direction:column;gap:2px}.sidebar a{align-items:center;border-radius:10px;color:#7c8db5;color:var(--text-muted);display:flex;font-size:13.5px;font-weight:500;gap:12px;overflow:hidden;padding:11px 14px;position:relative;text-decoration:none;transition:all .15s cubic-bezier(.4,0,.2,1);transition:all var(--transition-fast)}.sidebar a:hover{background:#6366f114;color:#c7d2fe;color:var(--text-secondary)}.sidebar a.active{background:#6366f11f;color:#fff;font-weight:600}.sidebar a.active:before{background:linear-gradient(135deg,#6366f1,#8b5cf6);background:var(--gradient-primary);border-radius:0 4px 4px 0;content:"";height:20px;left:0;position:absolute;top:50%;transform:translateY(-50%);width:3px}.sidebar a .icon{flex-shrink:0;font-size:18px;opacity:.85;text-align:center;width:22px}.sidebar a.active .icon{opacity:1}.sidebar-footer{border-top:1px solid #6366f11f;border-top:1px solid var(--border);margin-top:auto;padding-top:16px}.sidebar-user-info{background:#6366f10f;border:1px solid #6366f114;border-radius:10px;margin-bottom:10px;padding:12px}.sidebar-user-name{color:#eef2ff;color:var(--text);font-size:13px;font-weight:600;margin-bottom:6px;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap}.sidebar-footer button,.sidebar-user-role{display:flex;justify-content:center}.sidebar-footer button{align-items:center;background:#ef44440f;border:1px solid #ef444426;border-radius:10px;color:#7c8db5;color:var(--text-muted);cursor:pointer;font-size:13px;font-weight:500;gap:8px;padding:10px;transition:all .15s cubic-bezier(.4,0,.2,1);transition:all var(--transition-fast);width:100%}.sidebar-footer button:hover{background:#ef444426;border-color:#ef44444d;color:#f87171;color:var(--danger-light)}.role-badge{border-radius:20px;font-size:10px;font-weight:700;letter-spacing:.8px;padding:3px 10px;text-transform:uppercase}.role-admin{background:#6366f126;border:1px solid #6366f133;color:#a5b4fc}.role-reseller{background:#f59e0b26;border:1px solid #f59e0b33;color:#fcd34d}.role-client{background:#10b98126;border:1px solid #10b98133;color:#6ee7b7}.page-header{animation:fadeInPage .3s ease;margin-bottom:28px}.page-header h1{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#eef2ff,#c7d2fe);background:linear-gradient(135deg,var(--text) 0,var(--text-secondary) 100%);-webkit-background-clip:text;background-clip:text;font-size:26px;font-weight:700;letter-spacing:-.5px;margin-bottom:6px}.page-header p{color:#7c8db5;color:var(--text-muted);font-size:14px;font-weight:400}.stats-grid{grid-gap:16px;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-bottom:28px}.stat-card{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);background:#11182dcc;background:var(--bg-card);border:1px solid #6366f11f;border:1px solid var(--border);border-radius:14px;border-radius:var(--radius);overflow:hidden;padding:20px 22px;position:relative;transition:all .25s cubic-bezier(.4,0,.2,1);transition:all var(--transition-normal)}.stat-card:before{background:linear-gradient(135deg,#6366f1,#8b5cf6);background:var(--gradient-primary);content:"";height:2px;left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .25s cubic-bezier(.4,0,.2,1);transition:opacity var(--transition-normal)}.stat-card:hover{border-color:#6366f133;box-shadow:0 4px 16px #00000040;box-shadow:var(--shadow-md);transform:translateY(-2px)}.stat-card:hover:before{opacity:1}.stat-card .stat-icon{align-items:center;border-radius:12px;display:flex;font-size:20px;height:42px;justify-content:center;margin-bottom:14px;width:42px}.stat-card .stat-icon.primary{background:#6366f11f;color:#818cf8;color:var(--primary-light)}.stat-card .stat-icon.success{background:#10b9811f;color:#34d399;color:var(--success-light)}.stat-card .stat-icon.warning{background:#f59e0b1f;color:#fbbf24;color:var(--warning-light)}.stat-card .stat-icon.danger{background:#ef44441f;color:#f87171;color:var(--danger-light)}.stat-card .stat-icon.info{background:#3b82f61f;color:#60a5fa}.stat-card .stat-label{color:#7c8db5;color:var(--text-muted);font-size:12px;font-weight:600;letter-spacing:.8px;margin-bottom:6px;text-transform:uppercase}.stat-card .stat-value{font-size:28px;font-weight:800;letter-spacing:-1px;line-height:1.1}.stat-card .stat-value.primary{color:#818cf8;color:var(--primary-light)}.stat-card .stat-value.success{color:#34d399;color:var(--success-light)}.stat-card .stat-value.warning{color:#fbbf24;color:var(--warning-light)}.stat-card .stat-value.danger{color:#f87171;color:var(--danger-light)}.stat-card .stat-value.info{color:#60a5fa}.stat-card .stat-sub{color:#4a5578;color:var(--text-dim);font-size:12px;font-weight:500;margin-top:4px}.stat-card-gradient{border:none;border-radius:14px;border-radius:var(--radius);color:#fff;overflow:hidden;padding:22px 24px;position:relative;transition:all .25s cubic-bezier(.4,0,.2,1);transition:all var(--transition-normal)}.stat-card-gradient:after{background:#ffffff14;border-radius:50%;content:"";height:120px;position:absolute;right:-30%;top:-50%;width:120px}.stat-card-gradient:hover{box-shadow:0 8px 32px #00000059;box-shadow:var(--shadow-lg);transform:translateY(-2px)}.stat-card-gradient .stat-label{color:#ffffffbf}.stat-card-gradient .stat-value{color:#fff}.stat-card-gradient.gradient-primary{background:linear-gradient(135deg,#6366f1,#8b5cf6);background:var(--gradient-primary)}.stat-card-gradient.gradient-success{background:linear-gradient(135deg,#10b981,#059669);background:var(--gradient-success)}.stat-card-gradient.gradient-warning{background:linear-gradient(135deg,#f59e0b,#d97706);background:var(--gradient-warning)}.stat-card-gradient.gradient-danger{background:linear-gradient(135deg,#ef4444,#dc2626);background:var(--gradient-danger)}.stat-card-gradient.gradient-info{background:linear-gradient(135deg,#3b82f6,#2563eb);background:var(--gradient-info)}.metrics-section{margin-bottom:28px}.metrics-section h3{align-items:center;color:#7c8db5;color:var(--text-muted);display:flex;font-size:15px;font-weight:600;gap:8px;letter-spacing:.8px;margin-bottom:16px;text-transform:uppercase}.metrics-grid{grid-gap:16px;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.metric-card{align-items:center;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);background:#11182dcc;background:var(--bg-card);border:1px solid #6366f11f;border:1px solid var(--border);border-radius:14px;border-radius:var(--radius);display:flex;flex-direction:column;padding:24px;text-align:center;transition:all .25s cubic-bezier(.4,0,.2,1);transition:all var(--transition-normal)}.metric-card:hover{border-color:#6366f133;box-shadow:0 4px 16px #00000040;box-shadow:var(--shadow-md);transform:translateY(-2px)}.circular-gauge{height:110px;margin-bottom:14px;position:relative;width:110px}.circular-gauge svg{height:110px;transform:rotate(-90deg);width:110px}.circular-gauge .gauge-bg{fill:none;stroke:#ffffff0f;stroke-width:8}.circular-gauge .gauge-fill{fill:none;stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset .8s cubic-bezier(.4,0,.2,1),stroke .3s ease}.circular-gauge .gauge-value{font-size:22px;font-weight:800;left:50%;letter-spacing:-.5px;position:absolute;top:50%;transform:translate(-50%,-50%)}.circular-gauge .gauge-value span{font-size:12px;font-weight:500;opacity:.6}.metric-card .metric-label{color:#c7d2fe;color:var(--text-secondary);font-size:13px;font-weight:600;margin-bottom:2px}.metric-card .metric-detail{color:#4a5578;color:var(--text-dim);font-size:11px}.network-grid{grid-gap:16px;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}.network-card{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);background:#11182dcc;background:var(--bg-card);border:1px solid #6366f11f;border:1px solid var(--border);border-radius:14px;border-radius:var(--radius);padding:20px;transition:all .25s cubic-bezier(.4,0,.2,1);transition:all var(--transition-normal)}.network-card:hover{border-color:#6366f133;box-shadow:0 4px 16px #00000040;box-shadow:var(--shadow-md);transform:translateY(-2px)}.network-card-header{align-items:center;display:flex;gap:14px;margin-bottom:16px}.network-icon{align-items:center;border-radius:12px;display:flex;flex-shrink:0;height:44px;justify-content:center;width:44px}.network-icon.upload{background:linear-gradient(135deg,#6366f126,#8b5cf626);box-shadow:0 0 20px #6366f11a;color:#a78bfa}.network-icon.download{background:linear-gradient(135deg,#10b98126,#34d39926);box-shadow:0 0 20px #10b9811a;color:#34d399}.network-icon.packets{background:linear-gradient(135deg,#f59e0b26,#fbbf2426);box-shadow:0 0 20px #f59e0b1a;color:#fbbf24}.network-info{display:flex;flex-direction:column;gap:2px}.network-label{color:#4a5578;color:var(--text-dim);font-size:12px;font-weight:500;letter-spacing:.5px;text-transform:uppercase}.network-speed{font-family:JetBrains Mono,Fira Code,monospace;font-size:22px;font-weight:800;letter-spacing:-.5px}.network-speed.upload{color:#a78bfa}.network-speed.download{color:#34d399}.network-speed.packets{color:#fbbf24;font-size:14px;font-weight:600}.network-bar-container{background:#ffffff0d;border-radius:3px;height:6px;margin-bottom:12px;overflow:hidden;width:100%}.network-bar{border-radius:3px;height:100%;min-width:2px;transition:width .8s cubic-bezier(.4,0,.2,1)}.network-bar.upload{background:linear-gradient(90deg,#6366f1,#a78bfa);box-shadow:0 0 8px #6366f166}.network-bar.download{background:linear-gradient(90deg,#10b981,#34d399);box-shadow:0 0 8px #10b98166}.network-total{color:#4a5578;color:var(--text-dim);font-size:12px}.network-total strong{color:#c7d2fe;color:var(--text-secondary);font-family:JetBrains Mono,Fira Code,monospace;font-size:12px}.packets-grid{grid-gap:12px;display:grid;gap:12px;grid-template-columns:1fr 1fr}.packet-item{align-items:center;background:#ffffff08;border:1px solid #ffffff0a;border-radius:8px;display:flex;gap:8px;padding:10px 12px}.packet-item .pkt-up{color:#a78bfa}.packet-item .pkt-down{color:#34d399}.packet-value{color:var(--text-primary);font-family:JetBrains Mono,Fira Code,monospace;font-size:14px;font-weight:700}.packet-label{color:#4a5578;color:var(--text-dim);font-size:11px;margin-left:auto}.progress-bar-bg{background:#ffffff0f;border-radius:3px;height:6px;overflow:hidden;width:100%}.progress-bar-fill{border-radius:3px;height:100%;transition:width .8s cubic-bezier(.4,0,.2,1),background .3s ease}.server-info{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);background:#11182dcc;background:var(--bg-card);border:1px solid #6366f11f;border:1px solid var(--border);border-radius:14px;border-radius:var(--radius);margin-bottom:28px;padding:24px}.server-info h3{align-items:center;color:#7c8db5;color:var(--text-muted);display:flex;font-size:14px;font-weight:600;gap:8px;letter-spacing:.8px;margin-bottom:18px;text-transform:uppercase}.server-info-grid{grid-gap:14px;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.server-info-item{display:flex;flex-direction:column;gap:5px}.server-info-item label{color:#4a5578;color:var(--text-dim);font-size:11px;font-weight:600;letter-spacing:.8px;text-transform:uppercase}.server-info-item .value{align-items:center;background:#0f172a99;border:1px solid #ffffff0f;border:1px solid var(--border-light);border-radius:8px;border-radius:var(--radius-sm);display:flex;font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:13px;font-weight:600;gap:8px;justify-content:space-between;padding:10px 14px;transition:border-color .15s cubic-bezier(.4,0,.2,1);transition:border-color var(--transition-fast)}.server-info-item .value:hover{border-color:#6366f133}.copy-btn{background:none;border:none;border-radius:4px;color:#4a5578;color:var(--text-dim);cursor:pointer;flex-shrink:0;font-size:14px;padding:4px 6px;transition:all .15s cubic-bezier(.4,0,.2,1);transition:all var(--transition-fast)}.copy-btn:hover{background:#6366f11a;color:#818cf8;color:var(--primary-light)}.card{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);background:#11182dcc;background:var(--bg-card);border:1px solid #6366f11f;border:1px solid var(--border);border-radius:14px;border-radius:var(--radius);overflow:hidden;transition:border-color .25s cubic-bezier(.4,0,.2,1);transition:border-color var(--transition-normal)}.card:hover{border-color:#6366f126}.card-header{border-bottom:1px solid #6366f11f;border-bottom:1px solid var(--border);justify-content:space-between;padding:18px 22px}.card-header,.card-header h3{align-items:center;display:flex}.card-header h3{color:#c7d2fe;color:var(--text-secondary);font-size:15px;font-weight:600;gap:8px}table{border-collapse:collapse;width:100%}thead th{background:#0f172a4d;border-bottom:1px solid #6366f11f;border-bottom:1px solid var(--border);color:#4a5578;color:var(--text-dim);font-size:11px;font-weight:700;letter-spacing:.8px;padding:13px 22px;text-align:left;text-transform:uppercase}tbody td{border-bottom:1px solid #ffffff0f;border-bottom:1px solid var(--border-light);color:#c7d2fe;color:var(--text-secondary);font-size:13.5px;padding:14px 22px}tbody tr{transition:background .15s cubic-bezier(.4,0,.2,1);transition:background var(--transition-fast)}tbody tr:hover{background:#6366f10a}tbody tr:last-child td{border-bottom:none}.badge{align-items:center;border-radius:20px;display:inline-flex;font-size:11px;font-weight:700;gap:5px;letter-spacing:.3px;padding:4px 12px}.badge-success{background:#10b9811f;border:1px solid #10b98126;color:#34d399;color:var(--success-light)}.badge-danger{background:#ef44441f;border:1px solid #ef444426;color:#f87171;color:var(--danger-light)}.badge-warning{background:#f59e0b1f;border:1px solid #f59e0b26;color:#fbbf24;color:var(--warning-light)}.badge-info{background:#3b82f61f;border:1px solid #3b82f626;color:#60a5fa}.badge-dot{border-radius:50%;display:inline-block;height:6px;width:6px}.badge-dot.green{background:#10b981;background:var(--success);box-shadow:0 0 6px #10b981;box-shadow:0 0 6px var(--success)}.badge-dot.red{background:#ef4444;background:var(--danger)}.badge-dot.yellow{background:#f59e0b;background:var(--warning)}.btn{align-items:center;border:none;border-radius:8px;border-radius:var(--radius-sm);cursor:pointer;display:inline-flex;font-size:13px;font-weight:600;gap:7px;letter-spacing:.2px;overflow:hidden;padding:9px 18px;position:relative;transition:all .15s cubic-bezier(.4,0,.2,1);transition:all var(--transition-fast)}.btn:after{background:#fff0;content:"";inset:0;position:absolute;transition:background .15s cubic-bezier(.4,0,.2,1);transition:background var(--transition-fast)}.btn:hover:after{background:#ffffff14}.btn:active{transform:scale(.97)}.btn-primary{background:linear-gradient(135deg,#6366f1,#8b5cf6);background:var(--gradient-primary);box-shadow:0 2px 8px #6366f140;color:#fff}.btn-primary:hover{box-shadow:0 4px 16px #6366f159}.btn-danger{background:linear-gradient(135deg,#ef4444,#dc2626);background:var(--gradient-danger);box-shadow:0 2px 8px #ef444433;color:#fff}.btn-success{background:linear-gradient(135deg,#10b981,#059669);background:var(--gradient-success);box-shadow:0 2px 8px #10b98133;color:#fff}.btn-ghost{background:#ffffff0a;border:1px solid #6366f11f;border:1px solid var(--border);color:#7c8db5;color:var(--text-muted)}.btn-ghost:hover{background:#6366f10f;border-color:#6366f14d;color:#eef2ff;color:var(--text)}.btn-sm{border-radius:6px;font-size:12px;padding:6px 12px}.btn-icon{align-items:center;background:#ffffff08;border:1px solid #6366f11f;border:1px solid var(--border);border-radius:8px;border-radius:var(--radius-sm);color:#7c8db5;color:var(--text-muted);cursor:pointer;display:inline-flex;font-size:15px;height:34px;justify-content:center;padding:0;transition:all .15s cubic-bezier(.4,0,.2,1);transition:all var(--transition-fast);width:34px}.btn-icon:hover{background:#6366f114;border-color:#6366f14d;color:#818cf8;color:var(--primary-light)}.btn-icon.danger:hover{background:#ef444414;border-color:#ef44444d;color:#f87171;color:var(--danger-light)}.btn-icon.success:hover{background:#10b98114;border-color:#10b9814d;color:#34d399;color:var(--success-light)}.btn-group{display:flex;gap:6px}.btn[disabled]{cursor:not-allowed;opacity:.5;pointer-events:none}input,select,textarea{background:#1e2945cc;background:var(--bg-input);border:1px solid #6366f11f;border:1px solid var(--border);border-radius:8px;border-radius:var(--radius-sm);color:#eef2ff;color:var(--text);font-family:inherit;font-size:13.5px;outline:none;padding:10px 14px;transition:all .15s cubic-bezier(.4,0,.2,1);transition:all var(--transition-fast);width:100%}input:focus,select:focus,textarea:focus{border-color:#6366f1;border-color:var(--primary);box-shadow:0 0 0 3px #6366f140;box-shadow:0 0 0 3px var(--primary-glow)}input::placeholder{color:#4a5578;color:var(--text-dim)}.form-group{margin-bottom:18px}.form-group label{color:#7c8db5;color:var(--text-muted);display:block;font-size:12px;font-weight:600;letter-spacing:.5px;margin-bottom:6px;text-transform:uppercase}.form-row{grid-gap:16px;display:grid;gap:16px;grid-template-columns:1fr 1fr}.modal-overlay{align-items:center;animation:fadeIn .2s ease;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#000000bf;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:200}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal{animation:slideUp .25s cubic-bezier(.4,0,.2,1);background:#111829;background:var(--bg-card-solid);border:1px solid #6366f11f;border:1px solid var(--border);border-radius:20px;border-radius:var(--radius-lg);box-shadow:0 8px 32px #00000059;box-shadow:var(--shadow-lg);max-height:90vh;max-width:500px;overflow-y:auto;padding:28px;width:100%}@keyframes slideUp{0%{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}.modal h2{color:#eef2ff;color:var(--text);font-size:18px;font-weight:700;letter-spacing:-.3px;margin-bottom:24px}.modal-actions{border-top:1px solid #6366f11f;border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end;margin-top:24px;padding-top:18px}.login-page{align-items:center;background:#0a0e1a;background:var(--bg);display:flex;justify-content:center;min-height:100vh;overflow:hidden;position:relative}.login-page:before{background:radial-gradient(circle,#6366f11f 0,#0000 70%);height:600px;left:-200px;top:-200px;width:600px}.login-page:after,.login-page:before{content:"";pointer-events:none;position:absolute}.login-page:after{background:radial-gradient(circle,#8b5cf614 0,#0000 70%);bottom:-200px;height:500px;right:-200px;width:500px}.login-card{animation:slideUp .4s ease;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);background:#11182dcc;background:var(--bg-card);border:1px solid #6366f11f;border:1px solid var(--border);border-radius:20px;border-radius:var(--radius-lg);box-shadow:0 8px 32px #00000059;box-shadow:var(--shadow-lg);max-width:420px;padding:44px 40px;position:relative;width:100%}.login-card h1{font-size:22px;font-weight:700;letter-spacing:-.5px;margin-bottom:6px;text-align:center}.login-card p{color:#7c8db5;color:var(--text-muted);font-size:14px;margin-bottom:32px;text-align:center}.login-card .btn{font-size:14px;font-weight:700;justify-content:center;margin-top:8px;padding:12px;width:100%}.login-brand-icon{align-items:center;background:linear-gradient(135deg,#6366f1,#8b5cf6);background:var(--gradient-primary);border-radius:18px;box-shadow:0 6px 20px #6366f159;color:#fff;display:flex;font-size:28px;height:60px;justify-content:center;margin:0 auto 24px;width:60px}.qr-container{text-align:center}.qr-container img{border:2px solid #6366f11f;border:2px solid var(--border);border-radius:12px;margin:16px auto;max-width:260px}.config-text{background:#0a0e1acc;border:1px solid #6366f11f;border:1px solid var(--border);border-radius:8px;border-radius:var(--radius-sm);color:#c7d2fe;color:var(--text-secondary);font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:12px;margin-top:16px;padding:18px;position:relative;text-align:left;white-space:pre-line}.search-bar{align-items:center;display:flex;gap:12px;margin-bottom:20px}.search-bar input{background:#0f172a99;border:1px solid #6366f11f;border:1px solid var(--border);max-width:320px;padding-left:14px}.empty-state{color:#4a5578;color:var(--text-dim);padding:56px 24px;text-align:center}.empty-state .icon{font-size:48px;margin-bottom:16px;opacity:.3}.empty-state p{color:#7c8db5;color:var(--text-muted);font-size:14px}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}@keyframes glow-pulse{0%,to{box-shadow:0 0 4px #10b98166}50%{box-shadow:0 0 10px #10b981b3}}.online-indicator{align-items:center;display:inline-flex;gap:6px}.online-dot{animation:glow-pulse 2s ease-in-out infinite;background:#10b981;background:var(--success)}.offline-dot,.online-dot{border-radius:50%;height:8px;width:8px}.offline-dot{background:#4a5578;background:var(--text-dim)}.section-title{align-items:center;border-bottom:1px solid #6366f11f;border-bottom:1px solid var(--border);color:#7c8db5;color:var(--text-muted);display:flex;font-size:14px;font-weight:600;gap:8px;letter-spacing:.8px;margin-bottom:16px;padding-bottom:10px;text-transform:uppercase}.portal-grid{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-bottom:28px}.portal-card{align-items:center;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);background:#11182dcc;background:var(--bg-card);border:1px solid #6366f11f;border:1px solid var(--border);border-radius:14px;border-radius:var(--radius);display:flex;gap:18px;padding:24px;transition:all .25s cubic-bezier(.4,0,.2,1);transition:all var(--transition-normal)}.portal-card:hover{border-color:#6366f133;transform:translateY(-1px)}.portal-card .portal-icon{align-items:center;border-radius:14px;display:flex;flex-shrink:0;font-size:22px;height:50px;justify-content:center;width:50px}.portal-card .portal-info h4{color:#7c8db5;color:var(--text-muted);font-size:13px;font-weight:600;letter-spacing:.5px;margin-bottom:4px;text-transform:uppercase}.portal-card .portal-info .portal-value{font-size:18px;font-weight:700}.alert-banner{align-items:center;animation:fadeIn .3s ease;border-radius:14px;border-radius:var(--radius);display:flex;font-size:14px;font-weight:500;gap:12px;margin-bottom:20px;padding:14px 20px}.alert-banner.warning{background:#f59e0b1a;border:1px solid #f59e0b33;color:#fbbf24;color:var(--warning-light)}.alert-banner.danger{background:#ef44441a;border:1px solid #ef444433;color:#f87171;color:var(--danger-light)}.profile-grid{grid-gap:24px;display:grid;gap:24px;grid-template-columns:1fr 1fr}.profile-card{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);background:#11182dcc;background:var(--bg-card);border:1px solid #6366f11f;border:1px solid var(--border);border-radius:14px;border-radius:var(--radius);padding:28px}.profile-card h3{align-items:center;border-bottom:1px solid #6366f11f;border-bottom:1px solid var(--border);display:flex;font-size:16px;font-weight:700;gap:10px;margin-bottom:24px;padding-bottom:14px}.settings-layout{grid-gap:24px;display:grid;gap:24px;grid-template-columns:1fr 1fr}.settings-preview{align-items:center;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);background:#11182dcc;background:var(--bg-card);border:1px solid #6366f11f;border:1px solid var(--border);border-radius:14px;border-radius:var(--radius);display:flex;flex-direction:column;justify-content:center;padding:28px;text-align:center}::-webkit-scrollbar{height:6px;width:6px}::-webkit-scrollbar-track{background:#0000}::-webkit-scrollbar-thumb{background:#6366f133;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#6366f159}[data-tooltip]{position:relative}[data-tooltip]:hover:after{animation:fadeIn .15s ease;background:#111829;background:var(--bg-card-solid);border:1px solid #6366f11f;border:1px solid var(--border);border-radius:6px;bottom:calc(100% + 8px);box-shadow:0 4px 16px #00000040;box-shadow:var(--shadow-md);color:#eef2ff;color:var(--text);content:attr(data-tooltip);font-size:12px;font-weight:500;left:50%;padding:6px 12px;position:absolute;transform:translateX(-50%);white-space:nowrap;z-index:300}.skeleton{animation:shimmer 1.5s infinite;background:linear-gradient(90deg,#ffffff0a 25%,#ffffff14 50%,#ffffff0a 75%);background-size:200% 100%;border-radius:8px;border-radius:var(--radius-sm)}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-text{height:14px;margin-bottom:8px}.skeleton-card{border-radius:14px;border-radius:var(--radius);height:100px}@media (max-width:1024px){.metrics-grid,.stats-grid{grid-template-columns:repeat(2,1fr)}.profile-grid,.settings-layout{grid-template-columns:1fr}}@media (max-width:768px){.sidebar{padding:16px 8px;width:72px;width:var(--sidebar-collapsed)}.sidebar a span,.sidebar-brand span,.sidebar-footer .sidebar-user-info{display:none}.sidebar a{justify-content:center;padding:12px}.sidebar a .icon{margin:0}.sidebar a.active:before,.sidebar-footer button span{display:none}.main-content{margin-left:72px;margin-left:var(--sidebar-collapsed);padding:20px 16px}.stats-grid{gap:10px;grid-template-columns:1fr 1fr}.form-row,.portal-grid{grid-template-columns:1fr}}@media (max-width:480px){.stats-grid{grid-template-columns:1fr}}.protocol-selector{grid-gap:10px;display:grid;gap:10px;grid-template-columns:1fr 1fr}.protocol-btn{align-items:center;background:#1e2945cc;background:var(--bg-input);border:2px solid #6366f11f;border:2px solid var(--border);border-radius:14px;border-radius:var(--radius);color:#7c8db5;color:var(--text-muted);cursor:pointer;display:flex;flex-direction:column;gap:6px;padding:16px 12px;text-align:center;transition:all .15s cubic-bezier(.4,0,.2,1);transition:all var(--transition-fast)}.protocol-btn span{font-size:13px;font-weight:700}.protocol-btn small{color:#4a5578;color:var(--text-dim);font-size:10px;line-height:1.3}.protocol-btn:hover{background:#6366f10d;border-color:#6366f14d}.protocol-btn.active{background:#6366f11a;border-color:#6366f1;border-color:var(--primary);box-shadow:0 0 0 3px #6366f140;box-shadow:0 0 0 3px var(--primary-glow);color:#eef2ff;color:var(--text)}.protocol-btn.active.wg{background:#3b82f61a;border-color:#3b82f6;border-color:var(--info);box-shadow:0 0 0 3px #3b82f626}.tab-bar{background:#0f172a66;border:1px solid #ffffff0f;border:1px solid var(--border-light);border-radius:8px;border-radius:var(--radius-sm);display:flex;gap:4px;margin-bottom:20px;padding:4px}.tab{align-items:center;background:none;border:none;border-radius:6px;color:#7c8db5;color:var(--text-muted);cursor:pointer;display:flex;flex:1 1;font-size:12px;font-weight:600;gap:6px;justify-content:center;padding:8px 14px;transition:all .15s cubic-bezier(.4,0,.2,1);transition:all var(--transition-fast)}.tab:hover{background:#6366f10f;color:#c7d2fe;color:var(--text-secondary)}.tab.active{background:#6366f11f;box-shadow:0 1px 3px #0003;color:#818cf8;color:var(--primary-light)}.tab-content{min-height:200px}.badge-default{background:#64748b1f;border:1px solid #64748b26;color:#94a3b8}.modal-lg{max-width:640px}
/*# sourceMappingURL=main.6c8e58c5.css.map*/