dashboard/css/styles.css

/* ============================================================
   CyberSOC Command Center — Dark SOC Theme
   ============================================================ */

: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;
}

/* ============================================================ Reset */
*, *::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 */
.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; }

/* Phase Indicator */
.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 */
.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); }

/* ============================================================ Grid */
.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 */
.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; }

/* ============================================================ Badges */
.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); }

/* Panel 2 graph summary subtitle */
.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;
}

/* Panel 2 legend */
.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 (Panel 1) */
.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);
}

/* ============================================================ Threat Graph (Panel 2) */
.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; }

/* D3 SVG styles */
.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 (Panel 3) */
.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 (Panel 4) */
.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 Panel (Panel 5) */
.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; }

/* ============================================================ Mission Status (Panel 6) */
.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 */
.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); }

/* Business Impact Gauge */
.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 */
.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;
}

/* Controls */
.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); }

/* ============================================================ Overlays */
.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 Overlay */
.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 */
.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); }

/* ============================================================ Notifications */
#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)} }

/* ============================================================ Utility */
.hidden { display:none !important; }

.empty-state { color:var(--text-muted); font-size:11px; text-align:center; padding:16px; font-style:italic; }

/* ============================================================ Animations */
@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)} }

/* ============================================================ Scrollbars */
::-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 */
.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 Toolkit */
.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; }