:root { --bg: #06060c; --bg2: #0c0c18; --bg3: #12121f; --bg4: #1a1a2c; --bdr: #222236; --bdr2: #2a2a42; --cy: #00d4ff; --gn: #00ff88; --am: #ffaa00; --rd: #ff4455; --pr: #aa77ff; --bl: #4488ff; --pk: #ff66aa; --tx: #f0f0ff; --tx2: #8888aa; --tx3: #555570; --glass: rgba(12,12,24,.85); --radius: 12px; --radius-sm: 8px; --radius-xs: 5px; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Plus Jakarta Sans', sans-serif; background: var(--bg); color: var(--tx); min-height: 100vh; overflow-x: hidden; } .mono { font-family: 'JetBrains Mono', monospace; } @keyframes pulse { 0%,100%{opacity:1}50%{opacity:.4} } @keyframes shimmer { 0%{background-position:-200% 0}100%{background-position:200% 0} } @keyframes fadeIn { from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)} } @keyframes slideRight { from{transform:translateX(-100%);opacity:0}to{transform:translateX(0);opacity:1} } @keyframes glow { 0%,100%{box-shadow:0 0 15px rgba(0,212,255,.1)}50%{box-shadow:0 0 30px rgba(0,212,255,.2)} } .pulse { animation: pulse 2s ease-in-out infinite; } .fade-in { animation: fadeIn .4s ease forwards; } .card { background: var(--bg2); border: 1px solid var(--bdr); border-radius: var(--radius); overflow: hidden; transition: all .2s; } .card:hover { border-color: var(--bdr2); } .card-header { background: var(--bg3); padding: 14px 18px; border-bottom: 1px solid var(--bdr); display: flex; align-items: center; justify-content: space-between; } .card-header h3 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--tx2); } .card-body { padding: 16px 18px; } .card-glow-red { border-color: rgba(255,68,85,.3); box-shadow: 0 0 20px rgba(255,68,85,.08); } .card-glow-cyan { border-color: rgba(0,212,255,.3); box-shadow: 0 0 20px rgba(0,212,255,.08); } .card-glow-amber { border-color: rgba(255,170,0,.3); box-shadow: 0 0 20px rgba(255,170,0,.08); } .badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 20px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; } .badge-critical { background: rgba(255,68,85,.12); color: var(--rd); border: 1px solid rgba(255,68,85,.3); } .badge-high { background: rgba(255,170,0,.12); color: var(--am); border: 1px solid rgba(255,170,0,.3); } .badge-medium { background: rgba(0,212,255,.12); color: var(--cy); border: 1px solid rgba(0,212,255,.3); } .badge-low { background: rgba(0,255,136,.12); color: var(--gn); border: 1px solid rgba(0,255,136,.3); } .badge-purple { background: rgba(170,119,255,.12); color: var(--pr); border: 1px solid rgba(170,119,255,.3); } .btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--radius-xs); font-size: 12px; font-weight: 600; cursor: pointer; border: 1px solid; transition: all .15s; font-family: inherit; } .btn:active { transform: scale(.97); } .btn-primary { background: rgba(0,212,255,.12); color: var(--cy); border-color: rgba(0,212,255,.3); } .btn-primary:hover { background: rgba(0,212,255,.2); border-color: rgba(0,212,255,.5); } .btn-success { background: rgba(0,255,136,.12); color: var(--gn); border-color: rgba(0,255,136,.3); } .btn-success:hover { background: rgba(0,255,136,.2); border-color: rgba(0,255,136,.5); } .btn-danger { background: rgba(255,68,85,.12); color: var(--rd); border-color: rgba(255,68,85,.3); } .btn-danger:hover { background: rgba(255,68,85,.2); border-color: rgba(255,68,85,.5); } .btn-amber { background: rgba(255,170,0,.12); color: var(--am); border-color: rgba(255,170,0,.3); } .btn-amber:hover { background: rgba(255,170,0,.2); border-color: rgba(255,170,0,.5); } .btn-ghost { background: transparent; color: var(--tx2); border-color: var(--bdr); } .btn-ghost:hover { color: var(--tx); border-color: var(--bdr2); background: var(--bg3); } .btn-sm { padding: 5px 10px; font-size: 10px; } .btn-lg { padding: 10px 24px; font-size: 14px; } .progress { background: var(--bg3); border-radius: 6px; height: 8px; overflow: hidden; } .progress-fill { height: 100%; border-radius: 6px; transition: width .6s cubic-bezier(.4,0,.2,1); position: relative; overflow: hidden; } .progress-fill::after { content:''; position:absolute; top:0; left:0; right:0; bottom:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent); background-size:200% 100%; animation:shimmer 2s infinite; } .modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.7); backdrop-filter:blur(8px); z-index:1000; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .25s; } .modal-overlay.active { opacity:1; pointer-events:all; } .modal { background:var(--bg2); border:1px solid var(--bdr); border-radius:16px; width:90%; max-width:700px; max-height:85vh; overflow-y:auto; transform:scale(.95); transition:transform .25s; } .modal-overlay.active .modal { transform:scale(1); } .modal-header { padding:20px 24px; border-bottom:1px solid var(--bdr); display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; background:var(--bg3); z-index:1; border-radius:16px 16px 0 0; } .modal-header h2 { font-size:16px; font-weight:800; } .modal-close { width:32px; height:32px; border-radius:8px; background:var(--bg4); border:1px solid var(--bdr); color:var(--tx2); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:16px; } .modal-close:hover { background:rgba(255,68,85,.12); color:var(--rd); border-color:rgba(255,68,85,.3); } .modal-body { padding:24px; } .modal-footer { padding:16px 24px; border-top:1px solid var(--bdr); display:flex; gap:10px; justify-content:flex-end; position:sticky; bottom:0; background:var(--bg2); border-radius:0 0 16px 16px; } .toast-container { position:fixed; top:20px; right:20px; z-index:2000; display:flex; flex-direction:column; gap:10px; } .toast { padding:12px 20px; border-radius:var(--radius-sm); font-size:13px; font-weight:600; display:flex; align-items:center; gap:10px; animation:fadeIn .3s ease; backdrop-filter:blur(12px); } .toast-success { background:rgba(0,255,136,.15); border:1px solid rgba(0,255,136,.3); color:var(--gn); } .toast-info { background:rgba(0,212,255,.15); border:1px solid rgba(0,212,255,.3); color:var(--cy); } .toast-error { background:rgba(255,68,85,.15); border:1px solid rgba(255,68,85,.3); color:var(--rd); } .grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; } .grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; } .grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; } .grid-5 { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; } @media(max-width:1100px) { .grid-4,.grid-5 { grid-template-columns:1fr 1fr; } .grid-3 { grid-template-columns:1fr; } } @media(max-width:700px) { .grid-2,.grid-3,.grid-4,.grid-5 { grid-template-columns:1fr; } } .data-table { width:100%; border-collapse:collapse; font-size:12px; } .data-table th { text-align:left; padding:10px 14px; border-bottom:2px solid var(--bdr); color:var(--tx3); font-weight:600; font-size:10px; text-transform:uppercase; letter-spacing:.6px; cursor:pointer; user-select:none; transition:color .15s; white-space:nowrap; } .data-table th:hover { color:var(--cy); } .data-table td { padding:10px 14px; border-bottom:1px solid rgba(34,34,54,.6); } .data-table tr { transition:background .1s; } .data-table tbody tr:hover { background:rgba(0,212,255,.03); } .data-table tbody tr.clickable { cursor:pointer; } .data-table tbody tr.clickable:hover { background:rgba(0,212,255,.06); } .tab-bar { display:flex; gap:2px; overflow-x:auto; padding:0 20px; } .tab-btn { padding:10px 18px; font-size:12px; font-weight:600; border:none; background:transparent; color:var(--tx3); cursor:pointer; transition:all .2s; border-bottom:2px solid transparent; white-space:nowrap; display:flex; align-items:center; gap:6px; font-family:inherit; } .tab-btn:hover { color:var(--tx2); background:rgba(255,255,255,.02); } .tab-btn.active { color:var(--cy); border-bottom-color:var(--cy); background:linear-gradient(180deg,transparent,rgba(0,212,255,.04)); } .tab-count { padding:1px 7px; border-radius:10px; font-size:9px; font-weight:700; } .detail-row { display:flex; padding:10px 0; border-bottom:1px solid rgba(34,34,54,.5); } .detail-row:last-child { border-bottom:none; } .detail-label { width:140px; flex-shrink:0; font-size:11px; color:var(--tx3); text-transform:uppercase; letter-spacing:.5px; padding-top:2px; } .detail-value { flex:1; font-size:13px; } .action-row { display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid rgba(34,34,54,.5); transition:background .1s; cursor:pointer; } .action-row:hover { background:rgba(0,212,255,.03); } .action-row:last-child { border-bottom:none; } .chart-wrap { position:relative; height:200px; } .chart-wrap canvas { max-height:200px; } ::-webkit-scrollbar { width:6px; height:6px; } ::-webkit-scrollbar-track { background:var(--bg); } ::-webkit-scrollbar-thumb { background:var(--bdr); border-radius:3px; } ::-webkit-scrollbar-thumb:hover { background:var(--bdr2); } .dot { display:inline-block; width:8px; height:8px; border-radius:50%; flex-shrink:0; } .dot-green { background:var(--gn); } .dot-amber { background:var(--am); } .dot-red { background:var(--rd); } .dot-purple { background:var(--pr); } .dot-blue { background:var(--bl); } .dot-gray { background:var(--tx3); } .expand-arrow { color:var(--tx3); font-size:10px; transition:transform .2s; margin-left:auto; } .expanded .expand-arrow { transform:rotate(90deg); } .dep-line { display:flex; align-items:center; gap:8px; padding:4px 0; font-size:11px; color:var(--tx2); } .dep-line::before { content:''; width:16px; border-bottom:1px dashed var(--bdr); } .directive-input { width:100%; padding:10px 14px; background:var(--bg3); border:1px solid var(--bdr); border-radius:var(--radius-sm); color:var(--tx); font-size:13px; font-family:inherit; resize:vertical; min-height:60px; transition:border-color .2s; } .directive-input:focus { outline:none; border-color:var(--cy); } .directive-input::placeholder { color:var(--tx3); }