@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&family=Oxanium:wght@600;700&display=swap&font-display=swap');

/* White-Hot (dark mode) — default */
body.white-hot {
  --void: #08080e;
  --surface: #0e0e18;
  --surface-hover: #161622;
  --text: #e2e6f2;
  --text-secondary: #6e7698;
  --text-faint: #303450;
  --thermal: #ff5a1a;
  --thermal-22: rgba(255,90,26,0.13);
  --thermal-33: rgba(255,90,26,0.2);
  --thermal-66: rgba(255,90,26,0.4);
  --white-hot: #fffefa;
  --warm: #a04010;
  --residual: rgba(255,90,26,0.09);
  --quick-win: #ffd630;
  --quick-win-66: rgba(255,214,48,0.4);
  --node-da: #fffefa;
  --node-user: #ff6e3a;
  --node-computer: #4ca6f0;
  --node-group: #9a7cf2;
  --node-safe: #1a1c28;
  --chain-cold: #2070cc;
  --chain-warm: #ff6e3a;
  --chain-hot: #ff5a1a;
  --chain-peak: #fffefa;
  --edge-cold: #22243a;
  --edge-access: #4ca6f0;
  --edge-acl: #e85040;
  --edge-cred: #50c060;
  --edge-deleg: #b060e0;
  --edge-dcsync: #ff2040;
  --edge-coerce: #ff8c00;
  --edge-trust: #30ccaa;
  --edge-member: #303450;
  --arrow-fill: #6e7698;
  --arrow-fill-hot: #ff5a1a;
  --scanline: rgba(255,90,26,0.006);
}

/* Black-Hot (light mode) */
body.black-hot {
  --void: #f0ede8;
  --surface: #e8e4de;
  --surface-hover: #ddd8d0;
  --text: #1a1a20;
  --text-secondary: #6a6560;
  --text-faint: #b0a898;
  --thermal: #8b2500;
  --thermal-22: rgba(139,37,0,0.13);
  --thermal-33: rgba(139,37,0,0.2);
  --thermal-66: rgba(139,37,0,0.4);
  --white-hot: #1a0800;
  --warm: #c06030;
  --residual: rgba(139,37,0,0.06);
  --quick-win: #886600;
  --quick-win-66: rgba(136,102,0,0.4);
  --node-da: #1a0800;
  --node-user: #8b3a10;
  --node-computer: #2a5588;
  --node-group: #5a4880;
  --node-safe: #c8c4be;
  --chain-cold: #5588bb;
  --chain-warm: #c06030;
  --chain-hot: #8b2500;
  --chain-peak: #1a0800;
  --edge-cold: #d0ccc4;
  --edge-access: #2a5588;
  --edge-acl: #994433;
  --edge-cred: #337744;
  --edge-deleg: #774499;
  --edge-dcsync: #cc3333;
  --edge-coerce: #aa5500;
  --edge-trust: #338866;
  --edge-member: #c8c4be;
  --arrow-fill: #6a6560;
  --arrow-fill-hot: #8b2500;
  --scanline: rgba(139,37,0,0.008);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--void);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-image: repeating-linear-gradient(
    0deg, transparent, transparent 3px,
    var(--scanline) 3px, var(--scanline) 4px
  );
}

/* Header */
header {
  height: 48px;
  background: var(--surface);
  border-bottom: 1px solid var(--thermal-22);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  flex-shrink: 0;
}

.logo {
  font-family: 'Oxanium', sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--thermal);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.header-left { display: flex; align-items: center; gap: 0.75rem; flex: 1; }
.header-center { display: flex; justify-content: center; }
.header-controls { display: flex; align-items: center; gap: 0.75rem; flex: 1; justify-content: flex-end; }

.edge-filter-toggle {
  display: inline-flex;
  border: 1px solid var(--thermal-22);
  border-radius: 2px;
  font: 600 0.55rem 'JetBrains Mono', monospace;
  letter-spacing: 0.05em;
}

.edge-filter-toggle button {
  padding: 0.25rem 0.45rem;
  background: transparent;
  color: var(--text-secondary);
  border: none;
  cursor: pointer;
  transition: all 0.15s;
}

.edge-filter-toggle button.active {
  background: var(--thermal);
  color: var(--void);
}

.edge-filter-toggle button:hover:not(.active) {
  color: var(--thermal);
}

.layout-toggle {
  display: inline-flex;
  border: 1px solid var(--thermal-22);
  border-radius: 2px;
  font: 600 0.55rem 'JetBrains Mono', monospace;
  letter-spacing: 0.05em;
}

.layout-toggle button {
  padding: 0.25rem 0.45rem;
  background: transparent;
  color: var(--text-secondary);
  border: none;
  cursor: pointer;
  transition: all 0.15s;
}

.layout-toggle button.active {
  background: var(--thermal);
  color: var(--void);
}

.layout-toggle button:hover:not(.active) {
  color: var(--thermal);
}

.polarity-toggle {
  display: inline-flex;
  border: 1px solid #555;
  border-radius: 2px;
  font: 600 0.6rem 'JetBrains Mono', monospace;
  letter-spacing: 0.05em;
  overflow: hidden;
}

.polarity-toggle button {
  padding: 0.3rem 0.7rem;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

/* White-Hot button: always its theme — dark bg, bright orange text */
.polarity-wh {
  background: #08080e;
  color: #ff5a1a;
  opacity: 0.35;
}
.polarity-wh.active {
  opacity: 1;
}

/* Black-Hot button: always its theme — light bg, dark red text */
.polarity-bh {
  background: #f0ede8;
  color: #8b2500;
  opacity: 0.35;
}
.polarity-bh.active {
  opacity: 1;
}

.upload-btn {
  font: 500 0.7rem 'Inter', sans-serif;
  padding: 0.3rem 0.75rem;
  background: transparent;
  color: #cc3333;
  border: 1px solid rgba(204,51,51,0.3);
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.upload-btn:hover {
  border-color: #cc3333;
  color: #ff4444;
}

.download-btn {
  font: 500 0.7rem 'Inter', sans-serif;
  padding: 0.3rem 0.75rem;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--text-faint);
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.download-btn:hover {
  border-color: var(--text-secondary);
  color: var(--text);
}

/* Split View */
.split-view {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.panel {
  flex: 1;
  position: relative;
  background: var(--surface);
  border: 1px solid var(--thermal-22);
  margin: 0.5rem;
  border-radius: 3px;
  overflow: hidden;
}

.panel-label {
  position: absolute;
  top: 0.5rem;
  left: 0.75rem;
  font: 600 0.7rem 'Inter', sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  z-index: 2;
  pointer-events: none;
}

#left-panel { border-color: var(--edge-cold); }
#left-panel .panel-label { color: var(--text-secondary); }

#right-panel {
  border-color: var(--thermal-33);
  box-shadow: 0 0 30px rgba(255,90,26,0.06);
}
#right-panel .panel-label { color: var(--thermal); }

.divider {
  width: 3px;
  background: var(--edge-cold);
  box-shadow: 2px 0 12px rgba(255,90,26,0.06);
  flex-shrink: 0;
}

.panel svg { width: 100%; height: 100%; display: block; contain: layout style; }

/* === NODES === */

/* Shaped nodes (path elements) */
.node-shape {
  stroke: var(--edge-cold);
  stroke-width: 1;
  cursor: pointer;
}

#left-svg .node-shape { stroke-width: 1; opacity: 0.85; }
#right-svg .node-shape { stroke-width: 1.5; }

.node-group.selected .node-shape { stroke-width: 2.5; stroke: var(--text); }

/* Node labels — always visible */
.node-label {
  font: 500 0.5rem 'JetBrains Mono', monospace;
  fill: var(--text-secondary);
  pointer-events: none;
  text-anchor: middle;
}

.node-label.visible { opacity: 0.8; }

#right-svg .node-label { fill: var(--text); opacity: 0.9; }

.node-group:hover .node-label,
.node-group.selected .node-label { opacity: 1; fill: var(--text); }

.qw-label { transition: opacity 0.15s; }
.node-group:hover .qw-label,
.node-group.selected .qw-label { opacity: 1; }

/* === EDGES === */

/* Edge paths — curved arcs */
.edge-path {
  fill: none;
  stroke-width: 1;
  opacity: 0.5;
}

/* Left panel — muted category colors */
#left-svg .edge-cat-access  { stroke: var(--edge-access); opacity: 0.3; }
#left-svg .edge-cat-acl     { stroke: var(--edge-acl); opacity: 0.25; }
#left-svg .edge-cat-cred    { stroke: var(--edge-cred); opacity: 0.25; }
#left-svg .edge-cat-deleg   { stroke: var(--edge-deleg); opacity: 0.25; }
#left-svg .edge-cat-dcsync  { stroke: var(--edge-dcsync); opacity: 0.3; }
#left-svg .edge-cat-coerce  { stroke: var(--edge-coerce); opacity: 0.25; }
#left-svg .edge-cat-trust   { stroke: var(--edge-trust); opacity: 0.3; }
#left-svg .edge-cat-member  { stroke: var(--edge-member); opacity: 0.15; stroke-dasharray: 3 3; }
#left-svg .edge-cat-other   { stroke: var(--edge-cold); opacity: 0.15; }

/* Right panel — brighter, exploitable edges pop */
#right-svg .edge-cat-access  { stroke: var(--edge-access); stroke-width: 1.5; opacity: 0.6; }
#right-svg .edge-cat-acl     { stroke: var(--edge-acl); stroke-width: 1.5; opacity: 0.6; }
#right-svg .edge-cat-cred    { stroke: var(--edge-cred); stroke-width: 1.5; opacity: 0.6; }
#right-svg .edge-cat-deleg   { stroke: var(--edge-deleg); stroke-width: 1.5; opacity: 0.6; }
#right-svg .edge-cat-dcsync  { stroke: var(--edge-dcsync); stroke-width: 2; opacity: 0.8; }
#right-svg .edge-cat-coerce  { stroke: var(--edge-coerce); stroke-width: 2; opacity: 0.7; }
#right-svg .edge-cat-trust   { stroke: var(--edge-trust); stroke-width: 1.5; opacity: 0.6; }
#right-svg .edge-cat-member  { stroke: var(--edge-member); opacity: 0.15; stroke-dasharray: 3 3; }
#right-svg .edge-cat-other   { stroke: var(--edge-cold); opacity: 0.2; }

/* Edge/node filtering */
.edge-hidden { display: none; }
.node-dimmed { opacity: 0.15; }
.node-dimmed .node-label { opacity: 0.3; }

#right-svg .edge-exploitable { stroke-width: 2; }

#right-svg .edge-chain {
  stroke-width: 3.5;
  opacity: 1;
  animation: heat-conduction 2s linear infinite;
  will-change: stroke-dashoffset;
}

/* Edge labels */
.edge-label {
  font: 400 0.35rem 'JetBrains Mono', monospace;
  fill: var(--text-faint);
  text-anchor: middle;
  pointer-events: none;
  opacity: 0;
}

/* Show edge labels on hover of connected node */
.edge-group:hover .edge-label { opacity: 0.7; }

/* Right panel: show edge labels for exploitable edges */
#right-svg .edge-label-enhanced { opacity: 0.4; font-size: 0.35rem; }

/* Arrow markers */
.arrow-head { fill: var(--arrow-fill); }
.arrow-head-hot { fill: var(--arrow-fill-hot); }

/* === ANIMATIONS === */
@keyframes thermal-pulse {
  0%, 100% { filter: drop-shadow(0 0 4px var(--thermal-22)); transform: scale(1); }
  50% { filter: drop-shadow(0 0 14px var(--thermal-66)); transform: scale(1.04); }
}

@keyframes heat-radiate {
  0% { stroke-dashoffset: 1; opacity: 0; }
  20% { opacity: 0.8; }
  100% { stroke-dashoffset: 0; opacity: 0.6; }
}

@keyframes heat-dissipate {
  0% { r: 0; opacity: 0; }
  70% { r: 3.5; opacity: 0.6; }
  100% { r: 3; opacity: 0.4; }
}

@keyframes heat-fade {
  0% { transform: translateY(0); opacity: 0.5; }
  100% { transform: translateY(15px); opacity: 0; }
}

@keyframes quick-win-flare {
  0%, 100% { filter: drop-shadow(0 0 3px var(--quick-win-66)); }
  50% { filter: drop-shadow(0 0 10px var(--quick-win)); }
}

@keyframes heat-conduction {
  0% { stroke-dashoffset: 20; }
  100% { stroke-dashoffset: 0; }
}

@keyframes pwned-ripple {
  0% { r: 0; opacity: 0.8; }
  100% { r: 40; opacity: 0; }
}

/* Heat trail paths */
.heat-trail {
  stroke-dasharray: 1;
  animation: heat-radiate 2.5s ease-out forwards;
  will-change: stroke-dashoffset, opacity;
}

.trail-2 { animation-delay: 0.4s; }
.trail-3 { animation-delay: 0.8s; }

.heat-point {
  animation: heat-dissipate 2s ease-out forwards,
             heat-fade 1.5s ease-in 3.5s forwards;
}

/* === LEGEND === */
.legend {
  position: absolute;
  bottom: 0.5rem;
  left: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  z-index: 5;
  pointer-events: none;
}

.legend-section {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.6rem;
  align-items: center;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font: 500 0.5rem 'JetBrains Mono', monospace;
  color: var(--text-faint);
}

.legend-shape {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
  overflow: visible;
}

.legend-line {
  width: 16px;
  height: 2px;
  border-radius: 1px;
}

/* === CHAIN SIDEBAR === */
#chain-sidebar {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 240px;
  max-height: calc(100% - 1rem);
  background: var(--surface);
  border: 1px solid var(--thermal-22);
  border-radius: 3px;
  overflow-y: auto;
  z-index: 10;
  font-size: 0.75rem;
  opacity: 0.92;
}

.sidebar-header {
  font: 600 0.85rem 'Oxanium', sans-serif;
  color: var(--thermal);
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--thermal-22);
}

.chain-item {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  border-bottom: 1px solid var(--thermal-22);
  transition: background 0.15s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.chain-item:hover { background: var(--surface-hover); }
.chain-item.active {
  background: var(--thermal-22);
  border-left: 2px solid var(--thermal);
  padding-left: calc(0.75rem - 2px);
}
.chain-item.active .chain-name { color: var(--white-hot); }

.chain-name {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  color: var(--text);
  flex: 1;
}

.severity-badge {
  font: 600 0.5rem 'JetBrains Mono', monospace;
  padding: 0.1rem 0.3rem;
  border-radius: 2px;
  text-transform: uppercase;
  white-space: nowrap;
}

.severity-critical { color: var(--white-hot); border: 1px solid var(--thermal-66); }
.severity-high { color: var(--quick-win); border: 1px solid var(--quick-win-66); }
.severity-medium { color: var(--text-secondary); border: 1px solid var(--text-faint); }

/* === EXECUTION CHAIN === */
.execution-chain {
  position: fixed;
  bottom: 32px;
  left: 0;
  right: 0;
  background: var(--surface);
  border-top: 2px solid var(--thermal-33);
  z-index: 15;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  will-change: transform;
  contain: layout style;
}

.execution-chain.visible { transform: translateY(0); }
.execution-chain .exec-header,
.execution-chain .exec-steps { transition: opacity 0.25s ease; }
.execution-chain.exec-fade-out .exec-header,
.execution-chain.exec-fade-out .exec-steps { opacity: 0; }

.exec-steps > * { animation: step-fade-in 0.3s ease both; }
@keyframes step-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.exec-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--thermal-22);
}

.exec-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.exec-label {
  font: 700 0.65rem 'Oxanium', sans-serif;
  color: var(--thermal);
  letter-spacing: 0.1em;
}

.exec-name {
  font: 500 0.6rem 'JetBrains Mono', monospace;
  color: var(--text-secondary);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.exec-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  margin-left: auto;
  line-height: 1;
  flex-shrink: 0;
}

.exec-close:hover { color: var(--thermal); }

.exec-steps {
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding: 0.6rem 1rem;
  overflow-x: auto;
  scroll-behavior: smooth;
}

/* Hide scrollbar but keep scroll */
.exec-steps::-webkit-scrollbar { height: 3px; }
.exec-steps::-webkit-scrollbar-track { background: var(--void); }
.exec-steps::-webkit-scrollbar-thumb { background: var(--thermal-33); border-radius: 2px; }

.chain-step {
  flex-shrink: 0;
  width: 240px;
  background: var(--void);
  border: 1px solid var(--thermal-22);
  border-radius: 3px;
  padding: 0.5rem 0.6rem;
}

.chain-step-info {
  opacity: 0.9;
  background: rgba(204,51,51,0.08);
  border-color: rgba(204,51,51,0.25);
  border-style: dashed;
  transform: scale(0.92);
}

.chain-step-info .step-number { background: #993333; }
.chain-step-info .step-action { color: #cc8888; }
.chain-step-info .step-arrow { color: #996666; }
.chain-step-info .step-desc { color: #aa7777; }
.chain-step-info .step-note { color: #885555; }
.chain-step-info .step-info-label { color: #cc5555; }

.step-info-label {
  font: 600 0.4rem 'JetBrains Mono', monospace;
  color: var(--text-faint);
  letter-spacing: 0.08em;
  margin-bottom: 0.2rem;
}

.step-header {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.3rem;
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--thermal);
  color: var(--void);
  font: 700 0.5rem 'JetBrains Mono', monospace;
  flex-shrink: 0;
}

.step-action {
  font: 600 0.6rem 'JetBrains Mono', monospace;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.step-arrow {
  font: 400 0.5rem 'JetBrains Mono', monospace;
  color: var(--text-secondary);
  margin-left: auto;
  white-space: nowrap;
}

.step-tool {
  font: 600 0.45rem 'JetBrains Mono', monospace;
  color: var(--thermal);
  background: var(--thermal-22);
  padding: 0.05rem 0.25rem;
  border-radius: 2px;
  flex-shrink: 0;
}

.step-desc {
  font: 400 0.55rem 'Inter', sans-serif;
  color: var(--text-secondary);
  line-height: 1.35;
  margin-bottom: 0.3rem;
}

.step-cmd {
  background: var(--surface);
  border: 1px solid var(--thermal-22);
  border-left: 2px solid var(--thermal);
  border-radius: 2px;
  padding: 0.3rem 0.4rem;
  margin-bottom: 0.2rem;
  overflow-x: auto;
}

.step-cmd code {
  font: 400 0.5rem 'JetBrains Mono', monospace;
  color: var(--text);
  white-space: pre;
  user-select: all;
}

.step-note {
  font: 400 0.45rem 'Inter', sans-serif;
  color: var(--text-faint);
  font-style: italic;
}

/* Arrow connector between cards */
.step-connector {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0 0.15rem;
  color: var(--thermal);
  font-size: 0.75rem;
  align-self: center;
}

/* === TOOLTIP === */
.bt-tooltip {
  position: fixed;
  background: var(--surface);
  border: 1px solid var(--thermal-33);
  border-left: 3px solid var(--thermal);
  border-radius: 3px;
  padding: 0.75rem;
  max-width: 400px;
  font: 400 0.7rem 'JetBrains Mono', monospace;
  color: var(--text);
  z-index: 20;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.bt-tooltip.visible { opacity: 1; pointer-events: auto; }
.bt-tooltip .tool-name { color: var(--thermal); font-weight: 600; margin-bottom: 0.2rem; }
.bt-tooltip .cmd-text { color: var(--text-secondary); word-break: break-all; }

/* === UPLOAD === */
#upload-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 100;
  align-items: center;
  justify-content: center;
}

#upload-overlay.visible { display: flex; }

#upload-zone {
  border: 2px dashed var(--text-faint);
  border-radius: 3px;
  padding: 3rem 4rem;
  text-align: center;
  transition: border-color 0.15s ease;
}

#upload-zone.dragover { border-color: var(--thermal); border-style: solid; }
#upload-zone p { color: var(--text-secondary); font-size: 0.85rem; margin-top: 0.5rem; }
#upload-zone input[type="file"] { display: none; }

/* === FOOTER === */
footer {
  height: 32px;
  background: var(--surface);
  border-top: 1px solid var(--thermal-22);
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  gap: 1.5rem;
  font: 500 0.65rem 'JetBrains Mono', monospace;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.stat-value { color: var(--thermal); }
.footer-note { margin-left: auto; color: var(--text-faint); font-size: 0.55rem; }

/* === RESPONSIVE === */
@media (max-width: 1024px) {
  .split-view { flex-direction: column; }
  .divider { width: 100%; height: 3px; }
  #left-panel { flex: 0.4; }
  #right-panel { flex: 0.6; }
}