| |
| |
| |
|
|
| :root { |
| --bg-primary: #0a0e17; |
| --bg-secondary: #111827; |
| --bg-card: #1a1f2e; |
| --border: #2a3040; |
| --border-hover: #3d4a60; |
|
|
| --accent-blue: #3b82f6; |
| --accent-cyan: #06b6d4; |
| --accent-green: #10b981; |
| --accent-red: #ef4444; |
| --accent-amber: #f59e0b; |
| --accent-orange: #f97316; |
| --accent-purple: #8b5cf6; |
|
|
| --text-primary: #f1f5f9; |
| --text-secondary: #94a3b8; |
| --text-muted: #4b5563; |
|
|
| --glow-red: 0 0 20px rgba(239,68,68,0.45); |
| --glow-blue: 0 0 20px rgba(59,130,246,0.45); |
| --glow-green: 0 0 15px rgba(16,185,129,0.35); |
| --glow-amber: 0 0 15px rgba(245,158,11,0.35); |
| --glow-purple: 0 0 15px rgba(139,92,246,0.35); |
| --glow-cyan: 0 0 15px rgba(6,182,212,0.35); |
|
|
| --header-h: 60px; |
| --gap: 7px; |
| --r: 10px; |
| --r-sm: 5px; |
| } |
|
|
| |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } |
| html, body { height: 100%; overflow: hidden; font-family: 'Inter', sans-serif; |
| background: var(--bg-primary); color: var(--text-primary); font-size: 13px; line-height: 1.5; } |
|
|
| .mono { font-family: 'JetBrains Mono', monospace; } |
|
|
| |
| .header { |
| position: fixed; top: 0; left: 0; right: 0; |
| height: var(--header-h); z-index: 100; |
| background: var(--bg-primary); |
| border-bottom: 1px solid var(--border); |
| display: flex; align-items: center; justify-content: space-between; |
| padding: 0 16px; gap: 12px; |
| backdrop-filter: blur(4px); |
| } |
|
|
| .header-left { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } |
|
|
| .shield-icon { font-size: 22px; filter: drop-shadow(0 0 8px rgba(59,130,246,0.7)); } |
|
|
| .header-title { font-size: 15px; font-weight: 700; letter-spacing: 0.04em; white-space: nowrap; } |
|
|
| |
| .header-center { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; } |
|
|
| .phase-indicator { display: flex; align-items: center; } |
|
|
| .phase-dot { display: flex; flex-direction: column; align-items: center; gap: 3px; } |
|
|
| .phase-dot-circle { |
| width: 11px; height: 11px; border-radius: 50%; |
| background: var(--text-muted); border: 2px solid var(--border); |
| transition: all 0.4s ease; |
| } |
|
|
| .phase-dot.active .phase-dot-circle { background: var(--accent-blue); border-color: var(--accent-blue); box-shadow: var(--glow-blue); animation: phasePulse 1.6s ease infinite; } |
| .phase-dot.completed .phase-dot-circle { background: var(--accent-green); border-color: var(--accent-green); box-shadow: var(--glow-green); } |
|
|
| .phase-dot[data-phase="triage"].active .phase-dot-circle { background: var(--accent-amber); border-color: var(--accent-amber); box-shadow: var(--glow-amber); } |
| .phase-dot[data-phase="remediation"].active .phase-dot-circle { background: var(--accent-orange); border-color: var(--accent-orange); } |
| .phase-dot[data-phase="report"].active .phase-dot-circle { background: var(--accent-green); border-color: var(--accent-green); box-shadow: var(--glow-green); } |
|
|
| @keyframes phasePulse { 0%,100%{box-shadow:0 0 6px rgba(59,130,246,.4)} 50%{box-shadow:0 0 18px rgba(59,130,246,.9)} } |
|
|
| .phase-label { font-size: 8px; font-weight: 600; letter-spacing: .08em; color: var(--text-muted); transition: color .3s; white-space: nowrap; } |
| .phase-dot.active .phase-label { color: var(--accent-blue); } |
| .phase-dot.completed .phase-label { color: var(--accent-green); } |
| .phase-dot[data-phase="triage"].active .phase-label { color: var(--accent-amber); } |
| .phase-dot[data-phase="remediation"].active .phase-label { color: var(--accent-orange); } |
|
|
| .phase-connector { width: 36px; height: 1px; background: var(--border); margin: 0 4px 12px; transition: background .4s; } |
| .phase-connector.completed { background: var(--accent-green); } |
|
|
| .red-team-alert { |
| font-size: 10px; font-weight: 700; letter-spacing: .1em; |
| color: var(--accent-red); padding: 2px 8px; |
| border: 1px solid var(--accent-red); border-radius: 4px; |
| animation: blink 0.7s ease infinite; |
| } |
| @keyframes blink { 0%,100%{opacity:1} 50%{opacity:.25} } |
|
|
| |
| .header-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; } |
|
|
| .header-stat { display: flex; flex-direction: column; align-items: center; } |
| .header-stat-label { font-size: 8px; font-weight: 600; letter-spacing: .1em; color: var(--text-muted); } |
| .header-stat-value { font-size: 12px; font-weight: 700; } |
| .header-stat-value.mono { font-family: 'JetBrains Mono', monospace; font-size: 10px; } |
|
|
| .difficulty-badge { |
| padding: 3px 9px; border-radius: 4px; font-size: 9px; font-weight: 700; letter-spacing: .1em; |
| background: rgba(59,130,246,.15); color: var(--accent-blue); border: 1px solid rgba(59,130,246,.4); |
| } |
| .difficulty-badge.easy { background:rgba(16,185,129,.15); color:var(--accent-green); border-color:rgba(16,185,129,.4); } |
| .difficulty-badge.medium { background:rgba(245,158,11,.15); color:var(--accent-amber); border-color:rgba(245,158,11,.4); } |
| .difficulty-badge.hard { background:rgba(239,68,68,.15); color:var(--accent-red); border-color:rgba(239,68,68,.4); } |
|
|
| |
| .main-grid { |
| position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0; |
| display: grid; |
| grid-template-columns: 272px 1fr 256px; |
| grid-template-rows: 56% 44%; |
| gap: var(--gap); padding: var(--gap); |
| } |
|
|
| |
| .panel { |
| background: var(--bg-card); |
| border: 1px solid var(--border); |
| border-radius: var(--r); |
| box-shadow: 0 4px 24px rgba(0,0,0,.35); |
| display: flex; flex-direction: column; overflow: hidden; |
| transition: border-color .25s; |
| } |
| .panel:hover { border-color: var(--border-hover); } |
|
|
| .panel-header { |
| padding: 8px 12px; border-bottom: 1px solid var(--border); |
| display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; |
| min-height: 36px; |
| } |
| .panel-title { font-size: 11px; font-weight: 600; letter-spacing: .05em; } |
| .panel-body { flex: 1; overflow: hidden; position: relative; } |
|
|
| .panel-1 { grid-column:1; grid-row:1; } |
| .panel-2 { grid-column:2; grid-row:1; } |
| .panel-3 { grid-column:3; grid-row:1; } |
| .panel-4 { grid-column:1; grid-row:2; } |
| .panel-5 { grid-column:2; grid-row:2; } |
| .panel-6 { grid-column:3; grid-row:2; display:flex; flex-direction:column; } |
|
|
| |
| .badge { |
| display:inline-flex; align-items:center; justify-content:center; |
| min-width:18px; height:18px; padding:0 5px; border-radius:9px; |
| font-size:10px; font-weight:700; font-family:'JetBrains Mono',monospace; |
| background:rgba(239,68,68,.2); color:var(--accent-red); border:1px solid rgba(239,68,68,.4); |
| } |
|
|
| .reward-badge { font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:700; color:var(--accent-green); } |
| .reward-badge.negative { color:var(--accent-red); } |
|
|
| |
| .graph-summary { |
| width:100%; font-size:9px; font-family:'JetBrains Mono',monospace; |
| color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; |
| padding-top:1px; |
| } |
|
|
| |
| .graph-legend { display:flex; align-items:center; gap:8px; flex-wrap:wrap; } |
| .legend-item { display:flex; align-items:center; gap:3px; font-size:9px; color:var(--text-secondary); } |
| .legend-dot { width:7px; height:7px; border-radius:50%; } |
| .legend-dot.host { background:var(--accent-blue); } |
| .legend-dot.process { background:var(--accent-amber); border-radius:1px; transform:rotate(45deg); } |
| .legend-dot.ioc { background:var(--accent-red); } |
| .legend-dot.alert-node { background:var(--accent-orange); } |
| .legend-dot.vuln { background:var(--accent-green); border-radius:1px; } |
|
|
| |
| .alert-list { |
| height:100%; overflow-y:auto; padding:7px; |
| display:flex; flex-direction:column; gap:5px; |
| scrollbar-width:thin; scrollbar-color:var(--border) transparent; |
| } |
|
|
| .alert-card { |
| background:var(--bg-secondary); border:1px solid var(--border); |
| border-radius:var(--r-sm); padding:7px 9px; cursor:pointer; |
| transition:border-color .2s, box-shadow .2s; |
| animation:slideInRight .3s ease forwards; |
| } |
| .alert-card:hover { border-color:var(--accent-blue); } |
|
|
| .alert-card.pivot { border-color:var(--accent-red) !important; animation:pivotPulse 1s ease 4; } |
| @keyframes pivotPulse { 0%,100%{box-shadow:none} 50%{box-shadow:var(--glow-red)} } |
|
|
| .alert-card-header { display:flex; align-items:center; justify-content:space-between; gap:5px; margin-bottom:3px; } |
|
|
| .severity-badge { padding:1px 5px; border-radius:3px; font-size:8px; font-weight:700; letter-spacing:.07em; flex-shrink:0; } |
| .severity-low { background:rgba(16,185,129,.2); color:var(--accent-green); } |
| .severity-medium { background:rgba(245,158,11,.2); color:var(--accent-amber); } |
| .severity-high { background:rgba(249,115,22,.2); color:var(--accent-orange); } |
| .severity-critical { background:rgba(239,68,68,.2); color:var(--accent-red); border:1px solid rgba(239,68,68,.4); } |
|
|
| .alert-host { font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--accent-cyan); } |
| .alert-description { font-size:10px; color:var(--text-secondary); line-height:1.4; margin-bottom:3px; } |
| .alert-iocs { font-family:'JetBrains Mono',monospace; font-size:9px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } |
| .alert-footer { display:flex; align-items:center; gap:5px; margin-top:3px; } |
|
|
| .pivot-badge { |
| display:inline-flex; align-items:center; gap:2px; padding:1px 5px; |
| border-radius:3px; font-size:8px; font-weight:700; |
| background:rgba(239,68,68,.2); color:var(--accent-red); border:1px solid rgba(239,68,68,.5); |
| animation:blink .7s ease infinite; |
| } |
| .correlated-badge { |
| display:inline-flex; align-items:center; gap:2px; padding:1px 5px; |
| border-radius:3px; font-size:8px; font-weight:700; |
| background:rgba(139,92,246,.2); color:var(--accent-purple); border:1px solid rgba(139,92,246,.4); |
| } |
|
|
| |
| .graph-body { |
| padding:0; background:radial-gradient(ellipse at center, #0d1422 0%, var(--bg-card) 100%); |
| } |
| #threat-graph-svg { width:100%; height:100%; } |
|
|
| .graph-tooltip { |
| position:absolute; background:var(--bg-secondary); border:1px solid var(--border); |
| border-radius:var(--r-sm); padding:7px 9px; font-size:10px; |
| pointer-events:none; z-index:10; max-width:190px; |
| box-shadow:0 4px 16px rgba(0,0,0,.5); transition:opacity .15s; |
| } |
| .graph-tooltip.hidden { opacity:0; pointer-events:none; } |
| .graph-tooltip-title { font-weight:600; font-family:'JetBrains Mono',monospace; margin-bottom:4px; color:var(--accent-cyan); font-size:11px; } |
| .graph-tooltip-row { display:flex; justify-content:space-between; gap:8px; margin-bottom:1px; } |
| .graph-tooltip-key { color:var(--text-muted); } |
| .graph-tooltip-value { color:var(--text-primary); font-family:'JetBrains Mono',monospace; } |
|
|
| |
| .graph-link { fill:none; stroke-width:1.5; } |
| .graph-link.runs_on { stroke:rgba(59,130,246,.5); } |
| .graph-link.involves { stroke:rgba(148,163,184,.35); stroke-dasharray:4,4; } |
| .graph-link.communicates_with { stroke:rgba(245,158,11,.5); stroke-dasharray:6,3; } |
| .graph-link.exploits { stroke:rgba(239,68,68,.6); } |
| .graph-link.pivoted_from { stroke:var(--accent-red); stroke-width:3; filter:drop-shadow(0 0 4px rgba(239,68,68,.8)); } |
| .graph-link.part_of_chain { stroke:rgba(100,116,139,.4); stroke-dasharray:3,5; } |
|
|
| .node-label { font-family:'JetBrains Mono',monospace; font-size:9px; fill:rgba(148,163,184,.7); pointer-events:none; user-select:none; } |
|
|
| |
| .action-log { |
| height:100%; overflow-y:auto; padding:7px; |
| display:flex; flex-direction:column; gap:3px; |
| font-family:'JetBrains Mono',monospace; font-size:10.5px; |
| scrollbar-width:thin; scrollbar-color:var(--border) transparent; |
| } |
|
|
| .log-entry { |
| padding:5px 7px; border-radius:4px; |
| border-left:2.5px solid var(--border); |
| background:rgba(255,255,255,.02); |
| animation:slideInRight .25s ease forwards; |
| line-height:1.5; |
| } |
| .log-entry.investigation { border-left-color:var(--accent-cyan); } |
| .log-entry.remediation { border-left-color:var(--accent-amber); } |
| .log-entry.triage { border-left-color:var(--accent-purple); } |
| .log-entry.report { border-left-color:var(--accent-green); } |
|
|
| .log-step { color:var(--text-muted); font-size:9px; } |
| .log-action { color:var(--accent-cyan); font-weight:700; } |
| .log-entry.remediation .log-action { color:var(--accent-amber); } |
| .log-entry.triage .log-action { color:var(--accent-purple); } |
| .log-entry.report .log-action { color:var(--accent-green); } |
| .log-target { color:var(--text-primary); } |
| .log-result { font-size:9px; color:var(--text-secondary); margin-top:1px; } |
| .log-details { |
| font-size:9px; color:var(--text-muted); margin-top:3px; padding:3px 6px; |
| background:rgba(0,0,0,.2); border-radius:3px; border-left:2px solid var(--border); |
| line-height:1.6; |
| } |
| .log-reward { font-size:10px; font-weight:700; } |
| .log-reward.positive { color:var(--accent-green); } |
| .log-reward.negative { color:var(--accent-red); } |
|
|
| |
| .network-topology { |
| height:100%; overflow-y:auto; padding:7px; |
| display:flex; flex-direction:column; gap:5px; |
| scrollbar-width:thin; scrollbar-color:var(--border) transparent; |
| } |
|
|
| .subnet-section { |
| background:var(--bg-secondary); border:1px solid var(--border); |
| border-radius:var(--r-sm); padding:6px 8px; |
| transition:border-color .3s; position:relative; overflow:hidden; |
| } |
| .subnet-section.has-compromised { border-color:rgba(239,68,68,.4); } |
| .subnet-section.isolated { border-color:rgba(245,158,11,.6); background:rgba(245,158,11,.04); } |
|
|
| .subnet-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:5px; } |
| .subnet-name { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; } |
| .subnet-stats { font-size:9px; font-family:'JetBrains Mono',monospace; color:var(--text-muted); } |
| .subnet-stats .compromised { color:var(--accent-red); } |
| .subnet-stats .isolated { color:var(--accent-amber); } |
|
|
| .host-grid { display:flex; flex-wrap:wrap; gap:3px; } |
|
|
| .host-dot { |
| width:9px; height:9px; border-radius:2px; |
| cursor:pointer; transition:transform .15s; |
| } |
| .host-dot:hover { transform:scale(1.6); z-index:1; } |
| .host-dot.online { background:rgba(59,130,246,.5); } |
| .host-dot.compromised { background:var(--accent-red); animation:hostGlow 1.2s ease infinite; } |
| .host-dot.isolated { background:rgba(100,116,139,.5); border:1px solid var(--accent-amber); } |
| .host-dot.queried { background:var(--accent-cyan); } |
| .host-dot.healthy { background:rgba(16,185,129,.5); } |
|
|
| @keyframes hostGlow { 0%,100%{box-shadow:none} 50%{box-shadow:0 0 5px rgba(239,68,68,.9)} } |
|
|
| .isolated-overlay { |
| position:absolute; inset:0; display:flex; align-items:center; justify-content:center; |
| background:rgba(245,158,11,.06); border:1.5px solid rgba(245,158,11,.5); |
| border-radius:var(--r-sm); font-size:9px; font-weight:700; |
| color:var(--accent-amber); letter-spacing:.08em; pointer-events:none; |
| } |
|
|
| .topology-stats { display:flex; gap:6px; } |
| .topo-stat { font-size:9px; font-family:'JetBrains Mono',monospace; font-weight:600; padding:2px 5px; border-radius:3px; } |
| .topo-stat.compromised { background:rgba(239,68,68,.15); color:var(--accent-red); } |
| .topo-stat.isolated { background:rgba(245,158,11,.15); color:var(--accent-amber); } |
|
|
| |
| .scores-body { |
| display:flex; flex-direction:row; gap:10px; padding:8px; overflow:hidden; height:100%; align-items:stretch; |
| } |
| .radar-container { flex:0 0 52%; position:relative; min-width:0; } |
| .timeline-container { flex:1; position:relative; min-width:0; border-left:1px solid rgba(42,48,64,0.7); padding-left:10px; } |
|
|
| |
| .panel-6 .panel-body { |
| display:flex; flex-direction:column; overflow-y:auto; |
| scrollbar-width:thin; scrollbar-color:var(--border) transparent; |
| } |
|
|
| .containment-section, |
| .impact-section, |
| .threats-section, |
| .control-section { |
| padding:7px 11px; border-bottom:1px solid var(--border); flex-shrink:0; |
| } |
| .containment-section:last-child, |
| .impact-section:last-child, |
| .threats-section:last-child, |
| .control-section:last-child { border-bottom:none; } |
|
|
| .section-label { |
| font-size:9px; font-weight:600; letter-spacing:.08em; |
| color:var(--text-muted); text-transform:uppercase; margin-bottom:5px; |
| } |
|
|
| |
| .containment-bars { display:flex; flex-direction:column; gap:4px; } |
|
|
| .containment-bar-item { display:flex; flex-direction:column; gap:2px; } |
| .containment-bar-label { |
| display:flex; justify-content:space-between; |
| font-size:9px; color:var(--text-secondary); |
| } |
| .containment-bar-label .complete { color:var(--accent-green); } |
| .containment-bar-track { height:5px; background:var(--bg-secondary); border-radius:3px; overflow:hidden; border:1px solid var(--border); } |
| .containment-bar-fill { height:100%; background:var(--accent-cyan); border-radius:3px; transition:width .5s ease; width:0%; } |
| .containment-bar-fill.complete { background:var(--accent-green); box-shadow:var(--glow-green); } |
|
|
| |
| .impact-gauge { padding:2px 0; } |
|
|
| .impact-gauge-track { |
| position:relative; height:11px; border-radius:6px; overflow:hidden; |
| display:flex; margin-bottom:3px; |
| } |
| .impact-zone-green { flex:0 0 40%; background:linear-gradient(90deg,rgba(16,185,129,.4),rgba(16,185,129,.2)); } |
| .impact-zone-amber { flex:0 0 35%; background:linear-gradient(90deg,rgba(245,158,11,.25),rgba(245,158,11,.5)); } |
| .impact-zone-red { flex:0 0 25%; background:linear-gradient(90deg,rgba(239,68,68,.35),rgba(239,68,68,.7)); } |
|
|
| .impact-marker { |
| position:absolute; top:-2px; width:3px; height:15px; |
| background:white; border-radius:2px; box-shadow:0 0 8px rgba(255,255,255,.8); |
| transition:left .5s ease; left:0%; transform:translateX(-50%); |
| } |
|
|
| .impact-labels { display:flex; justify-content:space-between; font-size:8px; color:var(--text-muted); margin-bottom:3px; } |
| .impact-value-display { display:flex; align-items:center; justify-content:space-between; } |
| .impact-label { font-size:9px; color:var(--text-muted); } |
| .impact-value { font-size:18px; font-weight:700; font-family:'JetBrains Mono',monospace; color:var(--accent-green); transition:color .5s; } |
| .impact-value.high { color:var(--accent-amber); } |
| .impact-value.critical { color:var(--accent-red); } |
|
|
| |
| .active-threats-list { display:flex; flex-wrap:wrap; gap:3px; } |
|
|
| .threat-tag { |
| padding:2px 5px; border-radius:3px; font-size:9px; font-weight:600; |
| font-family:'JetBrains Mono',monospace; |
| background:rgba(239,68,68,.15); color:var(--accent-red); border:1px solid rgba(239,68,68,.3); |
| } |
| .threat-tag.contained { |
| background:rgba(16,185,129,.15); color:var(--accent-green); |
| border-color:rgba(16,185,129,.3); text-decoration:line-through; opacity:.6; |
| } |
|
|
| |
| .control-section { display:flex; flex-wrap:wrap; align-items:center; gap:5px; padding:8px 11px !important; } |
|
|
| .btn { |
| padding:5px 12px; border-radius:var(--r-sm); font-size:11px; font-weight:600; |
| cursor:pointer; border:1px solid transparent; transition:all .2s; |
| display:inline-flex; align-items:center; gap:3px; |
| } |
| .btn:disabled { opacity:.5; cursor:not-allowed; } |
| .btn-primary { background:var(--accent-blue); color:#fff; border-color:var(--accent-blue); } |
| .btn-primary:hover:not(:disabled) { background:#2563eb; box-shadow:var(--glow-blue); } |
| .btn-secondary { background:var(--bg-secondary); color:var(--text-primary); border-color:var(--border); } |
| .btn-secondary:hover { border-color:var(--accent-blue); color:var(--accent-blue); } |
|
|
| .task-selector { display:flex; align-items:center; gap:5px; font-size:11px; color:var(--text-secondary); margin-left:auto; } |
| .task-select { |
| background:var(--bg-secondary); color:var(--text-primary); |
| border:1px solid var(--border); border-radius:4px; padding:3px 6px; |
| font-size:11px; cursor:pointer; outline:none; |
| } |
| .task-select:focus { border-color:var(--accent-blue); } |
|
|
| |
| .overlay { |
| position:fixed; inset:0; z-index:200; |
| display:flex; align-items:center; justify-content:center; |
| background:rgba(10,14,23,.92); backdrop-filter:blur(10px); |
| } |
| .overlay.hidden { display:none; } |
|
|
| .overlay-content { |
| text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px; |
| } |
| .overlay-icon { font-size:44px; filter:drop-shadow(0 0 20px rgba(59,130,246,.7)); } |
| .overlay h2 { font-size:22px; font-weight:700; } |
|
|
| #connection-status { font-size:13px; color:var(--text-secondary); } |
|
|
| .connection-spinner { |
| width:30px; height:30px; border:2.5px solid var(--border); |
| border-top-color:var(--accent-blue); border-radius:50%; animation:spin 1s linear infinite; |
| } |
| @keyframes spin { to { transform:rotate(360deg); } } |
|
|
| |
| .final-score-content { |
| text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px; |
| max-width:480px; width:90%; padding:28px; |
| background:var(--bg-card); border:1px solid var(--accent-green); |
| border-radius:var(--r); box-shadow:var(--glow-green), 0 24px 60px rgba(0,0,0,.7); |
| animation:revealPop .5s cubic-bezier(.175,.885,.32,1.275) forwards; |
| } |
| @keyframes revealPop { from{opacity:0;transform:scale(.8)} to{opacity:1;transform:scale(1)} } |
|
|
| .mission-complete-banner { |
| font-size:12px; font-weight:700; letter-spacing:.2em; color:var(--accent-green); |
| border:1px solid var(--accent-green); padding:3px 14px; border-radius:3px; |
| animation:bannerGlow 1.5s ease infinite; |
| } |
| @keyframes bannerGlow { 0%,100%{box-shadow:none} 50%{box-shadow:var(--glow-green)} } |
|
|
| .final-score-label { font-size:10px; font-weight:600; letter-spacing:.15em; color:var(--text-muted); } |
| .final-score-number { |
| font-family:'JetBrains Mono',monospace; font-size:64px; font-weight:700; |
| color:var(--accent-green); line-height:1; |
| } |
|
|
| .final-grade-bars { width:100%; display:flex; flex-direction:column; gap:3px; } |
| .final-grade-bar-item { display:grid; grid-template-columns:140px 1fr 38px; align-items:center; gap:6px; } |
| .final-grade-bar-label { font-size:9px; color:var(--text-secondary); text-align:right; } |
| .final-grade-bar-track { height:5px; background:var(--bg-secondary); border-radius:3px; overflow:hidden; } |
| .final-grade-bar-fill { height:100%; background:var(--accent-cyan); border-radius:3px; transition:width 1s ease; } |
| .final-grade-bar-value { font-family:'JetBrains Mono',monospace; font-size:9px; color:var(--text-primary); } |
|
|
| .final-penalties-bonuses { width:100%; display:flex; flex-direction:column; gap:2px; max-height:80px; overflow-y:auto; } |
| .penalty-item { font-size:10px; color:var(--accent-red); font-family:'JetBrains Mono',monospace; } |
| .bonus-item { font-size:10px; color:var(--accent-green); font-family:'JetBrains Mono',monospace; } |
|
|
| |
| .screen-flash { position:fixed; inset:0; pointer-events:none; z-index:999; opacity:0; border-radius:0; } |
| .screen-flash.red-flash { background:rgba(239,68,68,.08); border:5px solid rgba(239,68,68,.6); } |
| .screen-flash.green-flash { background:rgba(16,185,129,.07); border:5px solid rgba(16,185,129,.5); } |
|
|
| |
| #notification-container { |
| position:fixed; top:calc(var(--header-h) + 10px); right:10px; z-index:150; |
| display:flex; flex-direction:column; gap:5px; pointer-events:none; |
| } |
| .notification-toast { |
| padding:7px 13px; border-radius:var(--r-sm); font-size:11px; font-weight:600; |
| color:#fff; animation:toastIn .3s ease forwards; pointer-events:none; |
| max-width:340px; |
| } |
| .notification-toast.red { background:rgba(239,68,68,.9); border:1px solid var(--accent-red); box-shadow:var(--glow-red); } |
| .notification-toast.green { background:rgba(16,185,129,.9); border:1px solid var(--accent-green); } |
| .notification-toast.blue { background:rgba(59,130,246,.9); border:1px solid var(--accent-blue); } |
| .notification-toast.amber { background:rgba(245,158,11,.9); border:1px solid var(--accent-amber); } |
| @keyframes toastIn { from{opacity:0;transform:translateX(100%)} to{opacity:1;transform:translateX(0)} } |
|
|
| |
| .hidden { display:none !important; } |
|
|
| .empty-state { color:var(--text-muted); font-size:11px; text-align:center; padding:16px; font-style:italic; } |
|
|
| |
| @keyframes slideInRight { from{opacity:0;transform:translateX(16px)} to{opacity:1;transform:translateX(0)} } |
| @keyframes fadeIn { from{opacity:0} to{opacity:1} } |
| @keyframes scaleBounce { 0%{transform:scale(1)} 50%{transform:scale(1.14)} 100%{transform:scale(1)} } |
|
|
| |
| ::-webkit-scrollbar { width:3px; height:3px; } |
| ::-webkit-scrollbar-track { background:transparent; } |
| ::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; } |
| ::-webkit-scrollbar-thumb:hover { background:var(--border-hover); } |
|
|
| |
| .turn-indicator { |
| font-size:10px; font-weight:700; letter-spacing:.08em; |
| padding:3px 10px; border-radius:4px; border:1px solid; |
| white-space:nowrap; |
| } |
| .turn-indicator.blue-turn { |
| color:var(--accent-blue); border-color:rgba(59,130,246,.5); |
| background:rgba(59,130,246,.1); |
| } |
| .turn-indicator.red-turn { |
| color:var(--accent-red); border-color:rgba(239,68,68,.5); |
| background:rgba(239,68,68,.1); animation:blink .7s ease infinite; |
| } |
|
|
| |
| .red-team-section { |
| padding:7px 11px; border-top:1px solid rgba(239,68,68,.2); |
| background:rgba(239,68,68,.03); flex-shrink:0; |
| } |
| .red-team-section.rt-disabled { opacity:.45; pointer-events:none; } |
|
|
| .rt-form { display:flex; flex-direction:column; gap:5px; } |
| .rt-select { width:100%; } |
|
|
| .rt-fields { display:flex; flex-direction:column; gap:4px; } |
|
|
| .rt-input { |
| width:100%; padding:4px 7px; border-radius:4px; |
| background:var(--bg-secondary); color:var(--text-primary); |
| border:1px solid var(--border); font-size:11px; outline:none; |
| font-family:'Inter', sans-serif; |
| } |
| .rt-input:focus { border-color:var(--accent-red); } |
| .rt-input::placeholder { color:var(--text-muted); } |
|
|
| .btn-red { |
| background:rgba(239,68,68,.15); color:var(--accent-red); |
| border:1px solid rgba(239,68,68,.5); width:100%; |
| } |
| .btn-red:hover:not(:disabled) { background:rgba(239,68,68,.28); box-shadow:var(--glow-red); } |
| .btn-red:disabled { opacity:.4; } |
|
|
