:root{color:#f8fafc;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;background-color:#0b1220;font-family:Inter,Arial,sans-serif}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0}button{font-family:inherit}.monitoring-page{color:#e2e8f0;padding:10px 0 40px}.monitoring-header,.monitoring-controls,.monitoring-actions{justify-content:space-between;align-items:center;gap:16px;display:flex}.monitoring-header{margin-bottom:26px}.monitoring-header h1{margin:0 0 8px;font-size:27px}.monitoring-header p,.monitoring-panel p{color:#94a3b8;margin:0;font-size:14px}.monitoring-mode{color:#93c5fd;background:#1d3553;border-radius:8px;padding:9px 13px;font-size:12px;font-weight:700}.monitoring-controls,.monitoring-panel,.monitoring-stat{background:#111c2e;border:1px solid #243449;border-radius:14px;padding:22px}.monitoring-controls{flex-wrap:wrap;margin-bottom:22px}.monitoring-state{align-items:center;gap:10px;font-weight:600;display:flex}.monitoring-dot{background:#94a3b8;border-radius:50%;width:10px;height:10px}.monitoring-dot.running{background:#22c55e;box-shadow:0 0 10px #22c55e70}.monitoring-actions{flex-wrap:wrap;justify-content:flex-end}.monitoring-actions button,.monitoring-actions select{cursor:pointer;color:#fff;border-radius:8px;padding:10px 15px;font-size:13px}.monitoring-actions select,.monitoring-secondary{background:#223149;border:1px solid #374963}.monitoring-primary{background:#2563eb;border:1px solid #2563eb}.monitoring-stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:22px;display:grid}.monitoring-stat{flex-direction:column;gap:12px;display:flex}.monitoring-stat span{color:#94a3b8;font-size:13px}.monitoring-stat strong{font-size:29px}.monitoring-stat small{color:#94a3b8;font-size:12px}.monitoring-green{color:#22c55e}.monitoring-red{color:#ef4444}.monitoring-alert{color:#fecaca;background:#451b25;border:1px solid #ef4444;border-radius:12px;margin-bottom:22px;padding:18px}.monitoring-alert p{margin:8px 0 0;font-size:13px}.monitoring-error{color:#fecaca;background:#451b25;border-radius:8px;margin-bottom:18px;padding:14px}.monitoring-panel{margin-bottom:22px}.monitoring-panel h2{margin:0 0 8px;font-size:19px}.monitoring-chart{width:100%;height:310px;margin-top:24px}.monitoring-empty{color:#94a3b8;text-align:center;justify-content:center;align-items:center;height:100%;display:flex}.monitoring-table-wrap{margin-top:20px;overflow-x:auto}.monitoring-table{border-collapse:collapse;text-align:left;width:100%;font-size:13px}.monitoring-table th,.monitoring-table td{white-space:nowrap;border-bottom:1px solid #243449;padding:14px}.monitoring-table th{color:#94a3b8;font-weight:600}.monitoring-class{border-radius:6px;padding:5px 10px;font-size:11px;font-weight:700}.monitoring-class.benign{color:#4ade80;background:#163b2b}.monitoring-class.ddos{color:#f87171;background:#4a2027}.monitoring-empty-row{text-align:center;color:#94a3b8}@media (width<=1100px){.monitoring-stats{grid-template-columns:repeat(2,1fr)}}@media (width<=650px){.monitoring-stats{grid-template-columns:1fr}.monitoring-header{flex-direction:column;align-items:flex-start}.monitoring-actions{justify-content:flex-start}}.demo-page{color:#e2e8f0;padding:10px 0 40px}.demo-header{margin-bottom:28px}.demo-header h1{margin-bottom:10px;font-size:28px}.demo-header p,.demo-description,.demo-disclaimer{color:#94a3b8;font-size:14px;line-height:1.7}.demo-panel,.demo-result{background:#111c2e;border:1px solid #243449;border-radius:15px;margin-bottom:24px;padding:26px}.demo-label{color:#94a3b8;letter-spacing:1px;margin-bottom:18px;font-size:12px;font-weight:700}.demo-options{flex-wrap:wrap;gap:14px;display:flex}.demo-options button{color:#e2e8f0;cursor:pointer;background:#1b2a40;border:1px solid #34445d;border-radius:10px;flex:1;min-width:160px;padding:18px;font-weight:600}.demo-options .benign{color:#4ade80;background:#153b2b;border-color:#22c55e}.demo-options .ddos{color:#f87171;background:#451b25;border-color:#ef4444}.demo-options button:disabled{opacity:.6;cursor:not-allowed}.demo-description{margin:20px 0}.demo-analyze{color:#fff;cursor:pointer;background:#2563eb;border:none;border-radius:9px;padding:14px 24px;font-weight:700}.demo-analyze:hover{background:#1d4ed8}.demo-analyze:disabled{opacity:.6;cursor:not-allowed}.demo-error{color:#fecaca;background:#451b25;border-radius:9px;margin-top:18px;padding:15px}.demo-result h2{margin:0 0 22px;font-size:21px}.demo-result-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;display:grid}.demo-result-card{background:#1b2a40;border:1px solid #34445d;border-radius:10px;flex-direction:column;gap:12px;padding:20px;display:flex}.demo-result-card span{color:#94a3b8;font-size:13px}.demo-result-card strong{font-size:25px}.demo-green{color:#4ade80}.demo-red{color:#f87171}.demo-message{border-radius:9px;margin-top:20px;padding:16px;font-weight:600}.demo-message.safe{color:#4ade80;background:#153b2b}.demo-message.threat{color:#f87171;background:#451b25}.demo-disclaimer{margin-top:20px;font-size:12px}@media (width<=650px){.demo-result-grid{grid-template-columns:1fr}.demo-options{flex-direction:column}}.alerts-page{color:#e2e8f0;padding:10px 0 40px}.alerts-header,.alerts-panel-header{justify-content:space-between;align-items:center;gap:16px;margin-bottom:25px;display:flex}.alerts-header h1{margin:0 0 8px;font-size:27px}.alerts-header p,.alerts-panel-header p{color:#94a3b8;margin:0;font-size:14px}.alerts-refresh,.alerts-panel-header select{color:#e2e8f0;cursor:pointer;background:#223149;border:1px solid #374963;border-radius:8px;padding:10px 16px}.alerts-stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:24px;display:grid}.alerts-stat,.alerts-panel{background:#111c2e;border:1px solid #243449;border-radius:14px;padding:22px}.alerts-stat{flex-direction:column;gap:12px;display:flex}.alerts-stat span,.alerts-stat small{color:#94a3b8;font-size:13px}.alerts-stat strong{font-size:30px}.alerts-red{color:#ef4444}.alerts-green{color:#22c55e}.alerts-orange{color:#f97316}.alerts-panel h2{margin:0 0 8px;font-size:19px}.alerts-table-wrap{overflow-x:auto}.alerts-table{border-collapse:collapse;text-align:left;width:100%;font-size:13px}.alerts-table th,.alerts-table td{vertical-align:middle;border-bottom:1px solid #243449;padding:15px 12px}.alerts-table th{color:#94a3b8;white-space:nowrap;font-weight:600}.alerts-description{color:#94a3b8;max-width:240px;margin-top:6px;font-size:11px;line-height:1.5;display:block}.alerts-severity,.alerts-status{border-radius:6px;padding:6px 10px;font-size:11px;font-weight:700;display:inline-block}.alerts-severity.critical{color:#f87171;background:#4b1d27}.alerts-severity.high{color:#fb923c;background:#4b2b1e}.alerts-severity.medium{color:#facc15;background:#45391b}.alerts-severity.low{color:#38bdf8;background:#183a44}.alerts-status.active{color:#f87171;background:#4b1d27}.alerts-status.resolved{color:#4ade80;background:#163b2b}.alerts-resolve{color:#fff;cursor:pointer;background:#1d4ed8;border:none;border-radius:7px;padding:8px 13px;font-size:12px;font-weight:600}.alerts-resolve:hover{background:#2563eb}.alerts-resolve:disabled{opacity:.5;cursor:not-allowed}.alerts-resolved-label{color:#64748b;font-size:12px}.alerts-error{color:#fecaca;background:#451b25;border-radius:8px;margin-bottom:18px;padding:14px}.alerts-empty{text-align:center;color:#94a3b8;padding:35px}@media (width<=1100px){.alerts-stats{grid-template-columns:repeat(2,1fr)}}@media (width<=650px){.alerts-stats{grid-template-columns:1fr}.alerts-header,.alerts-panel-header{flex-direction:column;align-items:flex-start}}.app-layout{background-color:#0b1220;min-height:100vh;display:flex}.sidebar{background-color:#111c2e;border-right:1px solid #233047;flex-direction:column;flex-shrink:0;width:250px;min-height:100vh;padding:28px 18px;display:flex}.sidebar-logo{align-items:center;gap:12px;margin-bottom:50px;display:flex}.sidebar-logo h2{color:#f8fafc;margin:0;font-size:21px}.logo-icon{color:#38bdf8;font-size:28px}.sidebar-label{color:#64748b;letter-spacing:1.5px;margin:0 0 18px 14px;font-size:11px;font-weight:700}.sidebar-nav{flex-direction:column;gap:8px;display:flex}.nav-item{color:#94a3b8;cursor:pointer;border-radius:10px;padding:14px 16px;font-size:14px;text-decoration:none;transition:all .2s}.nav-item:hover{color:#f8fafc;background-color:#1e293b}.nav-item.active{color:#38bdf8;background-color:#172f49;font-weight:600}.sidebar-footer{color:#94a3b8;align-items:center;gap:10px;margin-top:auto;padding:20px 12px 0;font-size:13px;display:flex}.status-dot{background-color:#22c55e;border-radius:50%;width:9px;height:9px}.main-content{flex:1;min-width:0;padding:40px}.main-content h1{color:#f8fafc;margin:0 0 12px;font-size:30px}.main-content p{color:#94a3b8;font-size:15px}@media (width<=700px){.sidebar{width:190px;padding:20px 10px}.main-content{padding:24px 16px}}.stats-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:32px;display:grid}.stat-card{background-color:#162235;border:1px solid #26354b;border-radius:14px;min-width:0;padding:24px;transition:transform .2s}.stat-card:hover{transform:translateY(-4px)}.stat-card p{color:#94a3b8;margin:0 0 20px;font-size:13px}.stat-card h2{color:#f8fafc;margin:0;font-size:30px}.stat-card.blue{border-top:3px solid #38bdf8}.stat-card.green{border-top:3px solid #22c55e}.stat-card.red{border-top:3px solid #f87171}.stat-card.purple{border-top:3px solid #c084fc}@media (width<=1100px){.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=600px){.stats-grid{grid-template-columns:1fr}}.chart-card{background-color:#162235;border:1px solid #26354b;border-radius:14px;margin-top:28px;padding:28px}.chart-card h2{color:#f8fafc;margin:0 0 8px;font-size:21px}.chart-card p{color:#94a3b8;margin:0 0 24px;font-size:14px}.chart-container{width:100%;min-width:0;height:340px}.history-card{background-color:#162235;border:1px solid #26354b;border-radius:14px;margin-top:28px;padding:28px}.history-card h2{color:#f8fafc;margin:0 0 8px;font-size:21px}.history-card p{color:#94a3b8;margin:0 0 24px;font-size:14px}.table-wrapper{width:100%;overflow-x:auto}.prediction-table{border-collapse:collapse;text-align:left;width:100%}.prediction-table th{color:#94a3b8;border-bottom:1px solid #26354b;padding:16px;font-size:12px;font-weight:600}.prediction-table td{color:#f8fafc;border-bottom:1px solid #26354b;padding:16px;font-size:14px}.prediction-table tbody tr:hover{background-color:#1e293b}.prediction-badge{border-radius:6px;padding:6px 12px;font-size:12px;font-weight:600;display:inline-block}.prediction-badge.ddos{color:#f87171;background-color:#45242c}.prediction-badge.benign{color:#4ade80;background-color:#183b30}.prediction-filters{flex-wrap:wrap;gap:10px;margin-bottom:24px;display:flex}.prediction-filters button{color:#94a3b8;cursor:pointer;background-color:#111c2e;border:1px solid #26354b;border-radius:8px;padding:10px 18px;font-size:13px;transition:all .2s}.prediction-filters button:hover{color:#f8fafc;border-color:#38bdf8}.prediction-filters button.selected{color:#38bdf8;background-color:#172f49;border-color:#38bdf8;font-weight:600}.json-input{color:#f8fafc;resize:vertical;background-color:#0b1220;border:1px solid #26354b;border-radius:10px;outline:none;width:100%;padding:16px;font-family:monospace;font-size:13px}.json-input:focus{border-color:#38bdf8}.analyze-button{color:#fff;cursor:pointer;background-color:#0284c7;border:none;border-radius:8px;margin-top:20px;padding:13px 24px;font-weight:600}.analyze-button:hover{background-color:#0369a1}.analyze-button:disabled{opacity:.6;cursor:not-allowed}.detection-error{overflow-wrap:anywhere;margin-top:20px;color:#f87171!important}.detection-result{background-color:#111c2e;border:1px solid #26354b;border-radius:10px;margin-top:24px;padding:20px}.detection-result h3{color:#38bdf8;margin-top:0}.detection-result.threat{border-color:#7f303b}.detection-result.safe{border-color:#276749}.result-header{align-items:center;gap:18px;margin:20px 0 28px;display:flex}.result-icon{border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;width:54px;height:54px;font-size:28px;display:flex}.threat .result-icon{color:#f87171;background:#45242c}.safe .result-icon{color:#4ade80;background:#183b30}.detection-result .result-label{color:#94a3b8;margin:0 0 6px;font-size:12px}.result-header h2{margin:0;font-size:25px}.threat .result-header h2{color:#f87171}.safe .result-header h2{color:#4ade80}.probability-header{color:#94a3b8;justify-content:space-between;gap:12px;margin-bottom:12px;font-size:14px;display:flex}.probability-header strong{color:#f8fafc;font-size:18px}.probability-track{background:#26354b;border-radius:20px;height:10px;overflow:hidden}.probability-fill{border-radius:20px;height:100%;transition:width .4s}.threat .probability-fill{background:#f87171}.safe .probability-fill{background:#4ade80}.detection-result .result-id{color:#94a3b8;margin:20px 0 0;font-size:13px}.upload-section{background-color:#111c2e;border:1px dashed #34445a;border-radius:10px;margin-bottom:24px;padding:20px}.upload-label{color:#f8fafc;margin-bottom:14px;font-size:14px;font-weight:600;display:block}.file-input{color:#94a3b8;width:100%;font-size:13px;display:block}.file-input::file-selector-button{color:#38bdf8;cursor:pointer;background:#172f49;border:1px solid #38bdf8;border-radius:7px;margin-right:14px;padding:10px 16px}.file-input::file-selector-button:hover{background:#1e4568}.upload-section .upload-description{color:#64748b;margin:14px 0 0;font-size:12px}.batch-results{margin-top:28px}.batch-results h3{color:#f8fafc;margin-bottom:20px;font-size:20px}.batch-stats-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;display:grid}.batch-stat-card{background-color:#111c2e;border:1px solid #26354b;border-radius:12px;min-width:0;padding:20px}.batch-stat-card p{color:#94a3b8;margin:0 0 16px;font-size:12px}.batch-stat-card h2{color:#f8fafc;margin:0;font-size:27px}.batch-stat-card.blue{border-top:3px solid #38bdf8}.batch-stat-card.green{border-top:3px solid #22c55e}.batch-stat-card.red{border-top:3px solid #f87171}.batch-stat-card.purple{border-top:3px solid #c084fc}@media (width<=1100px){.batch-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=600px){.batch-stats-grid{grid-template-columns:1fr}}.batch-table-section{margin-top:32px}.batch-table-section h3{color:#f8fafc;margin-bottom:18px;font-size:19px}.batch-table-section .table-wrapper{background-color:#111c2e;border:1px solid #26354b;border-radius:10px;overflow-x:auto}.batch-table-section .prediction-table th,.batch-table-section .prediction-table td{padding:15px 18px}.batch-pagination{color:#94a3b8;justify-content:space-between;align-items:center;gap:16px;margin-top:20px;font-size:13px;display:flex}.pagination-buttons{gap:10px;display:flex}.pagination-buttons button{color:#38bdf8;cursor:pointer;background-color:#172f49;border:1px solid #26354b;border-radius:8px;padding:10px 18px}.pagination-buttons button:hover:not(:disabled){background-color:#1e4568}.pagination-buttons button:disabled{opacity:.4;cursor:not-allowed}.view-details-button{color:#38bdf8;cursor:pointer;white-space:nowrap;background-color:#172f49;border:1px solid #345574;border-radius:8px;padding:9px 14px}.view-details-button:hover:not(:disabled){background-color:#1e4568}.view-details-button:disabled{opacity:.5;cursor:not-allowed}.batch-details{background-color:#111c2e;border:1px solid #26354b;border-radius:12px;margin-top:30px;padding:24px}.batch-details h3{color:#f8fafc;margin-top:0;font-size:20px}.distribution-chart{width:100%;min-width:0;height:350px}.batch-overview{margin-top:28px}.batch-overview h2{color:#f8fafc;margin:0 0 8px;font-size:21px}.batch-overview p{color:#94a3b8;font-size:14px}.batch-overview .stats-grid{margin-top:24px}.batch-chart-container,.batch-timeline-container{width:100%;min-width:0;height:350px}.analytics-page{width:100%;min-width:0}.analytics-header{margin-bottom:28px}.analytics-header h1{margin-bottom:12px}.analytics-charts-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:28px;display:grid}.analytics-charts-grid .history-card{min-width:0;margin-top:0}@media (width<=1200px){.analytics-charts-grid{grid-template-columns:1fr}}@media (width<=700px){.analytics-charts-grid{gap:16px}}.timeline-filters{flex-wrap:wrap;gap:10px;margin-bottom:24px;display:flex}.timeline-filters button{color:#94a3b8;cursor:pointer;background-color:#111c2e;border:1px solid #26354b;border-radius:8px;padding:10px 16px;font-size:13px;transition:all .2s}.timeline-filters button:hover{color:#f8fafc;border-color:#38bdf8}.timeline-filters button.selected{color:#38bdf8;background-color:#172f49;border-color:#38bdf8;font-weight:600}.custom-chart-tooltip{background-color:#111c2e;border:1px solid #34445a;border-radius:10px;min-width:190px;padding:16px;box-shadow:0 8px 24px #00000040}.custom-chart-tooltip h4{color:#f8fafc;margin:0 0 12px;font-size:14px}.custom-chart-tooltip p{color:#cbd5e1;margin:7px 0;font-size:13px}.custom-chart-tooltip .tooltip-benign{color:#4ade80}.custom-chart-tooltip .tooltip-ddos{color:#f87171}.custom-chart-tooltip hr{border:none;border-top:1px solid #26354b;margin:12px 0}.analytics-export{justify-content:flex-end;margin:16px 0;display:flex}.analytics-export button{color:#38bdf8;cursor:pointer;background:#172f49;border:1px solid #38bdf8;border-radius:8px;padding:10px 18px;font-size:13px;font-weight:600;transition:all .2s}.analytics-export button:hover:not(:disabled){background:#214563}.analytics-export button:disabled{opacity:.45;cursor:not-allowed}.chat-page{width:100%;min-width:0}.chat-page-header{justify-content:space-between;align-items:center;gap:20px;margin-bottom:24px;display:flex}.chat-page-header h1{color:#f8fafc;margin-bottom:8px}.chat-page-header p{color:#94a3b8}.chat-clear-button{color:#38bdf8;cursor:pointer;background:#172f49;border:1px solid #34445a;border-radius:8px;padding:12px 18px}.chat-clear-button:disabled{opacity:.5;cursor:not-allowed}.chat-container{background:#111c2e;border:1px solid #26354b;border-radius:16px;overflow:hidden}.chat-container-header{border-bottom:1px solid #26354b;align-items:center;gap:14px;padding:20px;display:flex}.chat-avatar,.chat-message-avatar{color:#38bdf8;background:#173b56;border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;font-weight:700;display:flex}.chat-avatar{width:46px;height:46px}.chat-message-avatar{width:32px;height:32px;font-size:12px}.chat-container-header h3{color:#f8fafc;margin:0 0 5px}.chat-container-header span{color:#94a3b8;font-size:13px}.chat-messages{flex-direction:column;gap:18px;height:450px;padding:24px;display:flex;overflow-y:auto}.chat-message{align-items:flex-start;gap:10px;display:flex}.chat-message.user{justify-content:flex-end}.chat-bubble{white-space:pre-wrap;overflow-wrap:anywhere;border-radius:12px;max-width:75%;padding:14px 18px;font-size:14px;line-height:1.7}.chat-message.assistant .chat-bubble{color:#e2e8f0;background:#162b42}.chat-message.user .chat-bubble{color:#f8fafc;background:#174166}.chat-typing{font-style:italic;color:#38bdf8!important}.chat-input-area{border-top:1px solid #26354b;gap:12px;padding:20px;display:flex}.chat-input-area input{color:#f8fafc;background:#0b1220;border:1px solid #34445a;border-radius:10px;outline:none;flex:1;min-width:0;padding:14px}.chat-input-area input:focus{border-color:#38bdf8}.chat-input-area button{color:#fff;cursor:pointer;background:#0284c7;border:none;border-radius:10px;padding:12px 24px}.chat-input-area button:disabled{opacity:.5;cursor:not-allowed}.chat-error{color:#f87171;padding:0 20px;font-size:13px}@media (width<=700px){.chat-page-header{flex-direction:column;align-items:flex-start}.chat-messages{height:400px;padding:14px}.chat-bubble{max-width:90%}}.explain-ai-btn{color:#38bdf8;cursor:pointer;white-space:nowrap;background:#173b56;border:1px solid #285374;border-radius:8px;padding:8px 12px;font-size:12px;font-weight:600;transition:all .2s}.explain-ai-btn:hover{background:#215779;border-color:#38bdf8}