:root{--primary-color:#ff6b6b;--success-color:#51cf66;--warning-color:#fcc419;--danger-color:#ff6b6b;--info-color:#339af0;--dark-bg:#1a1a1a;--light-bg:#f5f5f5;--card-bg:#fff;--border-color:#e0e0e0;--text-dark:#2d3748;--text-light:#718096;--font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif}*{box-sizing:border-box;margin:0;padding:0}body,html{background-color:#1a1a1a;background-color:var(--dark-bg);color:#2d3748;color:var(--text-dark);font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-family:var(--font-family);height:100%}.app{background-color:#f5f5f5;background-color:var(--light-bg);display:flex;flex-direction:column;height:100vh}.header{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 4px 12px #00000026;color:#fff;display:flex;justify-content:space-between;padding:20px 30px}.header h1{font-size:28px;font-weight:600}.status-indicator{align-items:center;display:flex;font-size:14px;gap:8px}.status-dot{animation:pulse 2s infinite;background-color:#51cf66;border-radius:50%;height:12px;width:12px}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.tabs{background-color:#fff;background-color:var(--card-bg);border-bottom:2px solid #e0e0e0;border-bottom:2px solid var(--border-color);display:flex;gap:10px;overflow-x:auto;padding:0 30px}.tab{background:none;border:none;border-bottom:3px solid #0000;color:#718096;color:var(--text-light);cursor:pointer;font-size:15px;font-weight:500;padding:16px 20px;transition:all .3s ease}.tab:hover{color:#2d3748;color:var(--text-dark)}.tab.active,.tab:hover{border-bottom-color:#ff6b6b;border-bottom-color:var(--primary-color)}.tab.active{color:#ff6b6b;color:var(--primary-color)}.content{flex:1 1;overflow-y:auto;padding:30px}.loading{align-items:center;color:#718096;color:var(--text-light);display:flex;font-size:18px;height:100vh;justify-content:center}.dashboard{grid-gap:30px;display:grid;gap:30px}.stats-grid{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.stat-card{background-color:#fff;background-color:var(--card-bg);border-left:4px solid #ff6b6b;border-left:4px solid var(--primary-color);border-radius:12px;box-shadow:0 2px 8px #00000014;padding:25px;transition:transform .3s ease,box-shadow .3s ease}.stat-card:hover{box-shadow:0 8px 16px #0000001f;transform:translateY(-4px)}.stat-card.success{border-left-color:#51cf66;border-left-color:var(--success-color)}.stat-card.warning{border-left-color:#fcc419;border-left-color:var(--warning-color)}.stat-card.danger{border-left-color:#ff6b6b;border-left-color:var(--danger-color)}.stat-card h3{color:#718096;color:var(--text-light);font-size:14px;font-weight:500;letter-spacing:.5px;margin-bottom:12px;text-transform:uppercase}.stat-value{color:#2d3748;color:var(--text-dark);font-size:32px;font-weight:700;margin-bottom:8px}.stat-subtext{color:#718096;color:var(--text-light);font-size:13px}.charts-section{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.chart-container{background-color:#fff;background-color:var(--card-bg);border-radius:12px;box-shadow:0 2px 8px #00000014;padding:25px}.chart-container h3{color:#2d3748;color:var(--text-dark);font-size:16px;font-weight:600;margin-bottom:20px}.protocol-stats{display:flex;flex-direction:column;gap:15px}.protocol-bar{align-items:center;display:flex;gap:12px}.protocol-bar>span:first-child{font-size:13px;font-weight:500;width:50px}.protocol-bar .bar{background-color:#f0f0f0;border-radius:6px;flex:1 1;height:24px;overflow:hidden}.protocol-bar .fill{border-radius:6px;height:100%;transition:width .3s ease}.protocol-bar .fill.tcp{background-color:#667eea}.protocol-bar .fill.udp{background-color:#f093fb}.protocol-bar .fill.icmp{background-color:#4facfe}.protocol-bar>span:last-child{color:#718096;color:var(--text-light);font-size:13px;text-align:right;width:70px}.port-list{display:flex;flex-direction:column;gap:10px;list-style:none}.port-list li{align-items:center;background-color:#f9f9f9;border-radius:8px;display:flex;font-size:13px;gap:12px;padding:10px}.port-list .port{color:#339af0;color:var(--info-color);font-family:Courier New,monospace;font-weight:600;width:60px}.port-list .bar-small{background-color:#e0e0e0;border-radius:4px;flex:1 1;height:8px;overflow:hidden}.port-list .bar-small .fill{background-color:#fcc419;background-color:var(--warning-color);height:100%;width:60%}.port-list .count{color:#718096;color:var(--text-light);text-align:right;width:50px}.rules-section{grid-gap:30px;display:grid;gap:30px;grid-template-columns:1fr 2fr}.add-rule-form{background-color:#fff;background-color:var(--card-bg);border-radius:12px;box-shadow:0 2px 8px #00000014;height:fit-content;padding:25px}.add-rule-form h3{font-size:16px;font-weight:600;margin-bottom:20px}.add-rule-form form{display:flex;flex-direction:column;gap:12px}.add-rule-form input,.add-rule-form select{border:1px solid #e0e0e0;border:1px solid var(--border-color);border-radius:8px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-family:var(--font-family);font-size:14px;padding:12px;transition:border-color .3s ease}.add-rule-form input:focus,.add-rule-form select:focus{border-color:#ff6b6b;border-color:var(--primary-color);box-shadow:0 0 0 3px #ff6b6b1a;outline:none}.add-rule-form button{background-color:#ff6b6b;background-color:var(--primary-color);border:none;border-radius:8px;color:#fff;cursor:pointer;font-weight:600;margin-top:8px;padding:12px;transition:background-color .3s ease}.add-rule-form button:hover{background-color:#ff5252}.rules-list{background-color:#fff;background-color:var(--card-bg);border-radius:12px;box-shadow:0 2px 8px #00000014;padding:25px}.rules-list h3{font-size:16px;font-weight:600;margin-bottom:20px}.rules-list table{border-collapse:collapse;width:100%}.rules-list thead{background-color:#f9f9f9}.rules-list th{border-bottom:2px solid #e0e0e0;border-bottom:2px solid var(--border-color);color:#718096;color:var(--text-light);font-size:13px;font-weight:600;letter-spacing:.5px;padding:12px;text-align:left;text-transform:uppercase}.rules-list td{border-bottom:1px solid #e0e0e0;border-bottom:1px solid var(--border-color);padding:14px 12px}.rules-list tbody tr:hover{background-color:#f9f9f9}.badge{border-radius:20px;display:inline-block;font-size:12px;font-weight:600;letter-spacing:.5px;padding:6px 12px;text-transform:uppercase}.badge.action-drop{background-color:#ffe0e0;color:#ff6b6b;color:var(--danger-color)}.badge.action-allow{background-color:#e0ffe0;color:#51cf66;color:var(--success-color)}.badge.action-reject{background-color:#ffe8e0;color:#ff8c42}.badge.action-log{background-color:#e0e8ff;color:#339af0;color:var(--info-color)}.btn-danger{background-color:#ff6b6b;background-color:var(--danger-color);border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:12px;font-weight:600;padding:8px 12px;transition:background-color .3s ease}.btn-danger:hover{background-color:#ff5252}.alerts-section{background-color:#fff;background-color:var(--card-bg);border-radius:12px;box-shadow:0 2px 8px #00000014;padding:25px}.alerts-section h3{font-size:16px;font-weight:600;margin-bottom:20px}.no-alerts{color:#718096;color:var(--text-light);padding:40px;text-align:center}.alerts-list{display:flex;flex-direction:column;gap:15px;list-style:none}.alerts-list li{background-color:#f9f9f9;border-left:4px solid;border-radius:8px;padding:16px}.alerts-list li.alert-High{background-color:#ffe0e0;border-left-color:#ff6b6b;border-left-color:var(--danger-color)}.alerts-list li.alert-Critical{background-color:#ffc0c0;border-left-color:#8b0000}.alerts-list li.alert-Medium{background-color:#fff3cd;border-left-color:#fcc419;border-left-color:var(--warning-color)}.alerts-list li.alert-Low{background-color:#cfe2ff;border-left-color:#339af0;border-left-color:var(--info-color)}.alert-header{align-items:center;display:flex;gap:12px;margin-bottom:10px}.severity-badge{background-color:#ff6b6b;background-color:var(--danger-color);border-radius:12px;color:#fff;display:inline-block;font-size:11px;font-weight:700;letter-spacing:.5px;padding:4px 10px;text-transform:uppercase}.alert-header .type{color:#2d3748;color:var(--text-dark);font-weight:600}.alert-header .timestamp{color:#718096;color:var(--text-light);font-size:12px;margin-left:auto}.alerts-list .message{color:#2d3748;color:var(--text-dark);font-weight:500;margin-bottom:8px}.alerts-list .source{color:#718096;color:var(--text-light);font-family:Courier New,monospace;font-size:12px;margin-bottom:12px}.btn-resolve{background-color:#51cf66;background-color:var(--success-color);border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:12px;font-weight:600;padding:8px 16px;transition:background-color .3s ease}.btn-resolve:hover{background-color:#40c057}.footer{background-color:#fff;background-color:var(--card-bg);border-top:1px solid #e0e0e0;border-top:1px solid var(--border-color);color:#718096;color:var(--text-light);font-size:13px;padding:20px 30px;text-align:center}@media (max-width:1200px){.charts-section,.rules-section{grid-template-columns:1fr}}@media (max-width:768px){.header{flex-direction:column;gap:15px;text-align:center}.header h1{font-size:22px}.stats-grid{grid-template-columns:1fr}.content{padding:15px}.tabs{padding:0 15px}.tab{font-size:13px;padding:12px 15px}}::-webkit-scrollbar{height:8px;width:8px}::-webkit-scrollbar-track{background:#f5f5f5;background:var(--light-bg)}::-webkit-scrollbar-thumb{background:#e0e0e0;background:var(--border-color);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#bbb}
/*# sourceMappingURL=main.a42b3863.css.map*/