/* ==========================================================================
   YUKARUC.TECH // INTERACTIVE NETWORK TOPOLOGY DESIGN SYSTEM
   Author: Onur Yukaruç (Network & Cybersecurity Engineer)
   Aesthetic: Blueprint Canvas, Central Core Node, Enterprise Switch Nodes
   ========================================================================== */

:root {
  /* Topology Canvas Palette */
  --bg-canvas: #060b13;
  --bg-node: #0d1522;
  --bg-node-hover: #121d2e;
  --bg-panel: #0b131e;
  --bg-panel-header: #101c2c;
  --bg-input: #070c14;

  /* Cyber & Active Accents */
  --cyber-blue: #00f0ff;
  --cyber-blue-glow: rgba(0, 240, 255, 0.35);
  --cyber-blue-dim: rgba(0, 240, 255, 0.12);
  --active-green: #00ff66;
  --active-green-glow: rgba(0, 255, 102, 0.35);
  --active-green-dim: rgba(0, 255, 102, 0.12);

  /* Status Colors */
  --status-critical: #ff3366;
  --status-warning: #ffb703;
  --status-online: #00ff66;

  /* Text & Foreground */
  --text-white: #ffffff;
  --text-body: #9cb1c9;
  --text-dim: #5c728a;
  --text-dark: #0a0f16;

  /* Borders & Radii */
  --border-subtle: rgba(0, 240, 255, 0.15);
  --border-active: rgba(0, 255, 102, 0.4);
  --border-cyan: rgba(0, 240, 255, 0.45);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-circle: 50%;

  /* Fonts */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Roboto Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

  /* Transitions */
  --transition-fast: 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   RESET & BLUEPRINT CANVAS BACKGROUND
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  min-height: 100vh;
  background-color: var(--bg-canvas);
  color: var(--text-body);
  font-family: var(--font-sans);
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Ambient Radial Glows */
.ambient-glow {
  position: fixed;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(100px);
  z-index: 1;
}

.glow-core {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(0, 255, 102, 0.1) 0%, transparent 70%);
}

.glow-cyan {
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 700px;
  height: 500px;
  background: radial-gradient(circle, rgba(0, 240, 255, 0.08) 0%, transparent 70%);
}

/* Typography Helpers */
.font-mono { font-family: var(--font-mono); }
.text-white { color: var(--text-white); }
.text-cyan { color: var(--cyber-blue); }
.text-green { color: var(--active-green); }
.text-dim { color: var(--text-dim); }
.font-bold { font-weight: 700; }
.text-center { text-align: center; }

/* ==========================================================================
   TOP HUD HEADER BAR
   ========================================================================== */
.topology-hud-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 52px;
  background: rgba(10, 15, 22, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  z-index: 100;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.hud-left, .hud-right, .hud-center {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.hud-status-node {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pulse-beacon {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--active-green);
  box-shadow: 0 0 10px var(--active-green);
  animation: pulseAnim 2s infinite ease-in-out;
}

@keyframes pulseAnim {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.hud-tag {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--active-green);
  letter-spacing: 0.05em;
}

.hud-sep {
  color: var(--border-subtle);
}

.hud-info-chip {
  font-size: 0.78rem;
}

.hud-instruction-badge {
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid var(--border-subtle);
  padding: 0.25rem 0.85rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  color: var(--text-body);
}

.hud-instruction-badge strong {
  color: var(--cyber-blue);
}

.hud-metric-box {
  font-size: 0.78rem;
  display: flex;
  gap: 0.35rem;
}

.hud-clock {
  font-size: 0.78rem;
  color: var(--text-white);
  background: rgba(255, 255, 255, 0.04);
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* ==========================================================================
   TOPOLOGY STAGE & SVG CONNECTION CANVAS
   ========================================================================== */
.topology-stage-container {
  position: relative;
  width: 100vw;
  min-height: 100vh;
  padding: 75px 2rem 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

#topology-canvas,
.topology-svg-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

#topology-canvas line,
.topo-line {
  stroke: #2c3e50; /* Default state: dark slate */
  stroke-width: 2px;
  stroke-linecap: round;
  transition: stroke 0.2s ease, stroke-width 0.2s ease, filter 0.2s ease;
}

/* Hover state: When user hovers ANY part of a specific panel card, the connection line MUST turn vibrant RED (#FF0000) */
#topology-canvas line.line-hover-red,
.topo-line.line-hover-red,
.topo-line.line-active-red,
#topologyStage:has(#nodeSwitch1:hover) #line-sw1,
#topologyStage:has(#nodeSwitch2:hover) #line-sw2,
#topologyStage:has(#nodeSwitch3:hover) #line-sw3,
#topologyStage:has(#nodeSwitch4:hover) #line-sw4,
#topologyStage:has(#nodeSwitch5:hover) #line-sw5,
#topologyStage:has(#nodeSwitch1:hover) #trunkLine1,
#topologyStage:has(#nodeSwitch2:hover) #trunkLine2,
#topologyStage:has(#nodeSwitch3:hover) #trunkLine3,
#topologyStage:has(#nodeSwitch4:hover) #trunkLine4,
#topologyStage:has(#nodeSwitch5:hover) #trunkLine5 {
  stroke: #FF0000 !important;
  stroke-width: 4px !important;
  filter: drop-shadow(0 0 12px #FF0000) drop-shadow(0 0 5px #FF0000) !important;
}

.topo-line.line-active-green {
  stroke: var(--active-green);
  stroke-width: 3.5;
  filter: drop-shadow(0 0 8px var(--active-green));
}

.topo-line.line-active-cyan {
  stroke: var(--cyber-blue);
  stroke-width: 3.5;
  filter: drop-shadow(0 0 8px var(--cyber-blue));
}

.topo-packet.packet-red,
#topologyStage:has(#nodeSwitch1:hover) #packet1,
#topologyStage:has(#nodeSwitch2:hover) #packet2,
#topologyStage:has(#nodeSwitch3:hover) #packet3,
#topologyStage:has(#nodeSwitch4:hover) #packet4 {
  fill: #FF0000 !important;
  filter: drop-shadow(0 0 10px #FF0000) !important;
}

.topo-packet {
  opacity: 0.9;
  filter: drop-shadow(0 0 6px #fff);
}

.packet-cyan { fill: var(--cyber-blue); }
.packet-green { fill: var(--active-green); }

/* ==========================================================================
   TOPOLOGY NODES WRAPPER & GRID
   ========================================================================== */
.topology-nodes-wrapper {
  position: relative;
  width: 100%;
  max-width: 1220px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: auto auto auto;
  align-items: center;
  justify-items: center;
  gap: 3.5rem 2rem;
  z-index: 10;
}

/* ==========================================================================
   CENTRAL CORE ROUTER / FIREWALL NODE WITH CROPPED LOGO.JPG
   ========================================================================== */
.central-core-node {
  grid-column: 2;
  grid-row: 1 / span 2;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 15;
}

/* Central Core Node (Static Solid Block, No Rotating Animations) */

/* Central Core Chassis Box */
.core-chassis-box {
  width: 185px;
  height: 215px;
  background: rgba(13, 21, 34, 0.94);
  border: 2px solid var(--border-cyan);
  border-radius: var(--radius-md);
  box-shadow: 
    0 12px 36px rgba(0, 0, 0, 0.8),
    0 0 24px var(--cyber-blue-glow);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 0.6rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: var(--transition-fast);
}

.core-chassis-box:hover {
  border-color: var(--active-green);
  box-shadow: 
    0 16px 44px rgba(0, 0, 0, 0.9),
    0 0 36px var(--active-green-glow);
}

.core-header-pill {
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--cyber-blue);
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid var(--border-subtle);
  padding: 0.15rem 0.5rem;
  border-radius: 2px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* STRICT LOGO CROPPING CONTAINER (Hides bottom text of logo.jpg) */
.logo-crop-viewport {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  background: #080d14;
  border: 2px solid rgba(0, 255, 102, 0.45);
  box-shadow: inset 0 0 16px rgba(0, 255, 102, 0.28), 0 0 20px rgba(0, 240, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.3rem 0;
}

/* 
   PERFECTLY CENTERED & SCALED "Y" EMBLEM
   - object-fit: cover fills the 110x110 circular container.
   - object-position: 50% 40.7% centers the (x=1408, y=625) Y emblem vertically & horizontally.
   - transform: scale(1.95) scales the Y shape so its edges touch the circle borders,
     while naturally pushing the bottom text (y=1080) completely outside the circular mask.
*/
.central-cropped-logo {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 40.7%;
  transform: scale(1.95);
  transform-origin: 50% 40.7%;
  pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(0, 255, 102, 0.75));
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
}

.core-chassis-box:hover .central-cropped-logo {
  transform: scale(2.08);
  filter: drop-shadow(0 0 14px rgba(0, 255, 102, 0.95));
}

.core-meta-strip {
  text-align: center;
  width: 100%;
}

.core-role {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text-white);
  letter-spacing: 0.03em;
}

.core-sub {
  font-size: 0.6rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}

.core-status-pill {
  font-size: 0.65rem;
  color: var(--active-green);
  background: rgba(0, 255, 102, 0.08);
  border: 1px solid rgba(0, 255, 102, 0.25);
  padding: 0.1rem 0.4rem;
  border-radius: 2px;
  margin-top: 0.2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.core-led {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--active-green);
  box-shadow: 0 0 6px var(--active-green);
}

/* ==========================================================================
   NETWORK SWITCH NODES (THE INTERACTIVE MENU APPLIANCES)
   ========================================================================== */
.topology-card,
.switch-node {
  width: 100%;
  max-width: 410px;
  cursor: pointer !important;
  outline: none;
  position: relative;
  z-index: 10 !important;
  pointer-events: auto !important;
  transition: transform var(--transition-fast);
  user-select: none;
}

.topology-card,
.topology-card *,
.switch-node,
.switch-node * {
  cursor: pointer;
}

.switch-node:focus-visible {
  outline: 2px solid var(--cyber-blue);
}

.switch-node:hover {
  transform: translateY(-4px);
}

.btn-card-open,
.click-prompt-hint {
  background: transparent;
  border: none;
  color: var(--cyber-blue);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer !important;
  pointer-events: auto !important;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  transition: transform var(--transition-fast), color var(--transition-fast);
}

.btn-card-open:hover,
.switch-node:hover .btn-card-open,
.click-prompt-hint:hover,
.switch-node:hover .click-prompt-hint {
  color: #ffffff;
  transform: translateX(4px);
  text-shadow: 0 0 8px var(--cyber-blue);
}

/* Switch Node Placement Grid Alignment */
.switch-tl { grid-column: 1; grid-row: 1; justify-self: end; }
.switch-tr { grid-column: 3; grid-row: 1; justify-self: start; }
.switch-bl { grid-column: 1; grid-row: 2; justify-self: end; }
.switch-br { grid-column: 3; grid-row: 2; justify-self: start; }
.switch-bc { grid-column: 2; grid-row: 3; justify-self: center; margin-top: 1rem; }

/* Switch Chassis Body (Rackmount Faceplate Aesthetic) */
.switch-chassis {
  background: var(--bg-node);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.switch-node:hover .switch-chassis {
  background: var(--bg-node-hover);
  border-color: #FF0000;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.8), 0 0 15px rgba(255, 0, 0, 0.4);
}

.switch-chassis.chassis-active {
  border-color: rgba(0, 255, 102, 0.35);
}

/* Simulated Rackmount Ears with Screws */
.switch-rack-ears {
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  background: #141f2e;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
}

.switch-rack-ears::before,
.switch-rack-ears::after {
  content: '';
  position: absolute;
  left: 1px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #25384d;
}

.switch-rack-ears::before { top: 8px; }
.switch-rack-ears::after { bottom: 8px; }

/* Switch Header Bar */
.switch-header-bar {
  background: #090e17;
  border-bottom: 1px solid rgba(0, 240, 255, 0.1);
  padding: 0.45rem 0.85rem 0.45rem 1.1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.74rem;
}

.switch-id-badge {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--cyber-blue);
  font-weight: 700;
}

.switch-icon-svg {
  display: flex;
  align-items: center;
}

.vlan-tag {
  font-size: 0.65rem;
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.04);
  padding: 0.1rem 0.45rem;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.vlan-tag-green {
  color: var(--active-green);
  background: var(--active-green-dim);
  border-color: rgba(0, 255, 102, 0.25);
}

/* Switch Faceplate with Ports & Content */
.switch-faceplate {
  padding: 0.85rem 1.1rem;
}

/* Ethernet Ports Row with Blinking LEDs */
.switch-ports-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.port-led-pair {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: #080d14;
  padding: 3px 5px;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.led {
  width: 6px;
  height: 3px;
  border-radius: 1px;
}

.led-active { background: var(--active-green); box-shadow: 0 0 4px var(--active-green); }
.led-off { background: #162433; }
.led-cyan { background: var(--cyber-blue); box-shadow: 0 0 5px var(--cyber-blue); }
.led-green { background: var(--active-green); box-shadow: 0 0 5px var(--active-green); }

.led-blink {
  background: var(--active-green);
  animation: ledFlicker 1.8s infinite steps(2);
}

.led-green-pulse {
  background: var(--active-green);
  animation: ledFlicker 0.9s infinite steps(2);
}

.led-cyan-pulse {
  background: var(--cyber-blue);
  animation: ledFlicker 1.2s infinite steps(2);
}

@keyframes ledFlicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}

.sfp-cage {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-dim);
  background: #080d14;
  border: 1px solid var(--border-subtle);
  padding: 0.15rem 0.45rem;
  border-radius: 2px;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.sfp-led {
  width: 4px;
  height: 4px;
  border-radius: 50%;
}

/* Switch Titles & Descriptions */
.switch-title {
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--text-white);
  margin-bottom: 0.3rem;
  transition: color var(--transition-fast);
}

.switch-node:hover .switch-title {
  color: var(--cyber-blue);
}

.switch-node:hover .chassis-active .switch-title {
  color: var(--active-green);
}

.switch-desc {
  font-size: 0.82rem;
  color: var(--text-body);
  line-height: 1.45;
  margin-bottom: 0.85rem;
}

/* Switch Status Footer */
.switch-status-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  padding-top: 0.45rem;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.click-prompt-hint {
  color: var(--cyber-blue);
  font-weight: 600;
  transition: transform var(--transition-fast);
}

.switch-node:hover .click-prompt-hint {
  transform: translateX(4px);
}

/* ==========================================================================
   BULLETPROOF MODAL OVERLAYS & TERMINAL SLIDE-OVER PANELS
   ========================================================================== */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(5, 9, 14, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.modal.hidden,
.hidden {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.terminal-slide-panel {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  transition: opacity 0.2s ease;
}

.terminal-slide-panel.open,
.terminal-slide-panel:not(.hidden) {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.panel-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(5, 9, 14, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.panel-window {
  position: relative;
  background: var(--bg-panel);
  border: 1px solid var(--border-cyan);
  border-top: 3px solid var(--cyber-blue);
  border-radius: var(--radius-md);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.85), 0 0 30px var(--cyber-blue-glow);
  width: 100%;
  max-width: 680px;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  z-index: 10;
  overflow: hidden;
  transform: translateY(24px) scale(0.98);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.panel-window-lg {
  max-width: 840px;
  border-top-color: var(--active-green);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.85), 0 0 30px var(--active-green-glow);
}

.terminal-slide-panel.open .panel-window {
  transform: translateY(0) scale(1);
}

.panel-header-bar {
  background: var(--bg-panel-header);
  border-bottom: 1px solid var(--border-subtle);
  padding: 0.85rem 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

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

.panel-prompt-icon {
  font-weight: 700;
  color: var(--cyber-blue);
}

.panel-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-white);
  letter-spacing: 0.04em;
}

.panel-close-btn {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
}

.panel-close-btn:hover {
  color: var(--text-white);
}

.panel-content-body {
  padding: 1.4rem;
  overflow-y: auto;
  font-size: 0.85rem;
  line-height: 1.6;
}

.panel-footer-bar {
  background: #080d14;
  border-top: 1px solid var(--border-subtle);
  padding: 0.75rem 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.76rem;
}

.btn-panel-action {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-white);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition-fast);
}

.btn-panel-action:hover {
  background: rgba(0, 240, 255, 0.15);
  border-color: var(--cyber-blue);
  color: var(--cyber-blue);
}

/* ==========================================================================
   PANEL 1: INTEL STREAM STYLES
   ========================================================================== */
.stream-status-banner {
  background: #080d14;
  border: 1px solid var(--border-subtle);
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius-sm);
  display: flex;
  justify-content: space-between;
  margin-bottom: 1.2rem;
  font-size: 0.74rem;
}

.intel-log-card {
  background: #0e1724;
  border: 1px solid rgba(0, 240, 255, 0.15);
  border-left: 3px solid var(--cyber-blue);
  border-radius: var(--radius-sm);
  padding: 1rem 1.15rem;
  margin-bottom: 1rem;
}

.log-card-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.4rem;
}

.log-badge {
  font-size: 0.65rem;
  padding: 0.15rem 0.45rem;
  border-radius: 2px;
  font-weight: 700;
}

.badge-threat { background: rgba(255, 51, 102, 0.18); color: var(--status-critical); border: 1px solid rgba(255, 51, 102, 0.35); }
.badge-compliance { background: rgba(0, 240, 255, 0.15); color: var(--cyber-blue); border: 1px solid rgba(0, 240, 255, 0.35); }
.badge-ztna { background: rgba(0, 255, 102, 0.15); color: var(--active-green); border: 1px solid rgba(0, 255, 102, 0.35); }

.log-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-white);
  margin-bottom: 0.4rem;
}

.log-body-text {
  color: var(--text-body);
  font-size: 0.82rem;
  line-height: 1.55;
  margin-bottom: 0.65rem;
}

.log-tags-row {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 0.65rem;
}

.tag-chip {
  font-size: 0.68rem;
  color: var(--cyber-blue);
  background: rgba(0, 240, 255, 0.06);
  padding: 0.1rem 0.4rem;
  border-radius: 2px;
}

.log-advisory-box {
  background: rgba(0, 0, 0, 0.35);
  border-left: 2px solid var(--active-green);
  padding: 0.5rem 0.75rem;
  font-size: 0.78rem;
  color: var(--text-white);
}

/* Card Click-Through Affordance & Action Buttons */
.intel-log-card.card-clickable,
.subnode-card.card-clickable {
  cursor: pointer;
  position: relative;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.22s ease,
              box-shadow 0.22s ease;
}

.intel-log-card.card-clickable:hover,
.intel-log-card.card-clickable:focus-visible {
  transform: translateY(-3px);
  border-color: var(--cyber-blue);
  box-shadow: 0 10px 30px rgba(0, 240, 255, 0.2), inset 0 0 14px rgba(0, 240, 255, 0.06);
}

.intel-log-card.card-clickable:focus-visible {
  outline: 2px solid var(--cyber-blue);
  outline-offset: 2px;
}

.subnode-card.card-clickable:hover,
.subnode-card.card-clickable:focus-visible {
  transform: translateY(-3px);
  border-color: var(--active-green);
  box-shadow: 0 10px 30px rgba(0, 255, 102, 0.22), inset 0 0 14px rgba(0, 255, 102, 0.06);
}

.subnode-card.card-clickable:focus-visible {
  outline: 2px solid var(--active-green);
  outline-offset: 2px;
}

.card-action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.9rem;
  padding-top: 0.75rem;
  border-top: 1px dashed rgba(0, 240, 255, 0.15);
}

.subnode-card .card-action-bar {
  border-top-color: rgba(0, 255, 102, 0.18);
}

.btn-card-readmore {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--cyber-blue);
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.32);
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius-sm);
  font-size: 0.76rem;
  font-weight: 700;
  text-decoration: none;
  transition: var(--transition-fast);
}

.btn-card-readmore .arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}

.intel-log-card:hover .btn-card-readmore {
  background: var(--cyber-blue);
  color: var(--text-dark);
  box-shadow: 0 0 14px var(--cyber-blue-glow);
}

.intel-log-card:hover .btn-card-readmore .arrow {
  transform: translateX(4px);
}

.btn-lab-action {
  color: var(--active-green);
  background: rgba(0, 255, 102, 0.08);
  border-color: rgba(0, 255, 102, 0.35);
}

.subnode-card:hover .btn-lab-action {
  background: var(--active-green);
  color: var(--text-dark);
  box-shadow: 0 0 14px var(--active-green-glow);
}

.subnode-card:hover .btn-lab-action .arrow {
  transform: translateX(4px);
}

.card-action-meta {
  font-size: 0.68rem;
  color: var(--text-dim);
}

/* ==========================================================================
   PANEL 2: SPLIT-PANE ADMIN CONSOLE LAYOUT (VERTICAL SIDE NAVIGATION)
   ========================================================================== */
.panel-window-split {
  max-width: 1040px;
  width: 95%;
  max-height: 88vh;
  border-top-color: var(--active-green);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.9), 0 0 36px var(--active-green-glow);
  display: flex;
  flex-direction: column;
}

.tools-split-console {
  display: flex;
  flex: 1;
  min-height: 520px;
  max-height: calc(88vh - 96px);
  overflow: hidden;
}

/* Left Pane: Vertical Sidebar */
.tools-console-sidebar {
  width: 255px;
  flex-shrink: 0;
  background: #070c14;
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-y: auto;
}

.sidebar-top-branding {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid rgba(0, 240, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.7rem;
}

.sidebar-console-tag {
  color: var(--text-dim);
  font-weight: 700;
  letter-spacing: 0.05em;
}

.sidebar-console-status {
  font-weight: 700;
  font-size: 0.68rem;
}

.tools-vertical-nav {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.85rem 0.65rem;
  flex: 1;
}

.tool-nav-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.75rem;
  background: transparent;
  border: 1px solid transparent;
  border-left: 3px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer !important;
  pointer-events: auto !important;
  text-align: left;
  font-family: var(--font-mono);
  color: var(--text-dim);
  width: 100%;
  transition: var(--transition-fast);
}

.tool-nav-btn * {
  pointer-events: none;
}

.tool-nav-btn:hover {
  background: rgba(0, 240, 255, 0.04);
  color: var(--text-white);
  border-color: rgba(0, 240, 255, 0.15);
}

.tool-nav-btn.active {
  background: rgba(0, 255, 102, 0.09);
  border-color: rgba(0, 255, 102, 0.35);
  border-left: 3px solid var(--active-green);
  color: var(--text-white);
  box-shadow: 0 0 20px rgba(0, 255, 102, 0.22), inset 0 0 12px rgba(0, 255, 102, 0.06);
}

.nav-btn-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-btn-text {
  flex: 1;
  min-width: 0;
}

.nav-btn-title {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-btn-desc {
  display: block;
  font-size: 0.65rem;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

.tool-nav-btn.active .nav-btn-title {
  color: var(--active-green);
}

.nav-badge {
  font-size: 0.6rem;
  padding: 0.1rem 0.35rem;
  border-radius: 2px;
  font-weight: 700;
  flex-shrink: 0;
}

.sidebar-bottom-info {
  padding: 0.75rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 0.68rem;
  display: flex;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.25);
}

/* Right Pane: Working Area */
.tools-console-main {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  background: var(--bg-panel);
}

/* Tab Badges */
.badge-active {
  background: rgba(0, 255, 102, 0.15);
  color: var(--active-green);
  border: 1px solid rgba(0, 255, 102, 0.3);
}

.badge-soon {
  background: rgba(0, 240, 255, 0.08);
  color: var(--cyber-blue);
  border: 1px solid rgba(0, 240, 255, 0.2);
}

/* Responsive Split Layout on Smaller Screens */
@media (max-width: 860px) {
  .tools-split-console {
    flex-direction: column;
    max-height: none;
    min-height: auto;
  }

  .tools-console-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border-subtle);
  }

  .tools-vertical-nav {
    flex-direction: row;
    overflow-x: auto;
    padding: 0.5rem;
    scrollbar-width: thin;
  }

  .tool-nav-btn {
    flex-direction: column;
    align-items: flex-start;
    padding: 0.45rem 0.65rem;
    min-width: 150px;
    border-left: 1px solid transparent;
    border-bottom: 2px solid transparent;
  }

  .tool-nav-btn.active {
    border-left-color: transparent;
    border-bottom-color: var(--active-green);
  }

  .sidebar-top-branding,
  .sidebar-bottom-info {
    display: none;
  }

  .tools-console-main {
    padding: 1rem;
  }
}

/* Tab Panes */
.tab-content-pane {
  display: none;
}

.tab-content-pane.active {
  display: block;
  animation: fadeInTab 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeInTab {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Staged Tool Preview Box */
.staged-tool-box {
  background: var(--bg-input);
  border: 1px dashed var(--border-cyan);
  border-radius: var(--radius-sm);
  padding: 1.5rem;
  margin-bottom: 1.25rem;
}

.staged-tool-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.staged-tool-badge {
  font-size: 0.7rem;
  color: var(--cyber-blue);
  background: rgba(0, 240, 255, 0.1);
  padding: 0.2rem 0.6rem;
  border-radius: 2px;
  border: 1px solid rgba(0, 240, 255, 0.3);
}

.staged-tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}

.staged-param-card {
  background: #0d1522;
  border: 1px solid var(--border-subtle);
  padding: 0.85rem;
  border-radius: var(--radius-sm);
}

.staged-param-title {
  font-size: 0.72rem;
  color: var(--text-dim);
  margin-bottom: 0.3rem;
}

.staged-param-val {
  font-size: 0.88rem;
  color: var(--text-white);
}

/* Modular Tools Catalog Grid (Scalable to 6+ tools) */
.tools-catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  margin-top: 0.5rem;
}

.tool-catalog-card {
  background: #0e1724;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 1.15rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.85rem;
  transition: var(--transition-fast);
}

.tool-catalog-card:hover {
  border-color: var(--cyber-blue);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 240, 255, 0.15);
}

.tool-catalog-card.card-active-tool {
  border-color: var(--active-green);
  background: rgba(0, 255, 102, 0.03);
}

.tool-catalog-card.card-active-tool:hover {
  box-shadow: 0 6px 20px rgba(0, 255, 102, 0.2);
}

.card-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-tool-num {
  font-size: 0.7rem;
  color: var(--text-dim);
}

.card-tool-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-white);
  margin: 0.25rem 0;
}

.card-tool-desc {
  font-size: 0.78rem;
  color: var(--text-body);
  line-height: 1.5;
}

.btn-launch-tab-tool {
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid var(--border-cyan);
  color: var(--cyber-blue);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  width: 100%;
  text-align: center;
  transition: var(--transition-fast);
}

.btn-launch-tab-tool:hover {
  background: var(--cyber-blue);
  color: var(--text-dark);
}

.card-active-tool .btn-launch-tab-tool {
  background: rgba(0, 255, 102, 0.15);
  border-color: var(--active-green);
  color: var(--active-green);
}

.card-active-tool .btn-launch-tab-tool:hover {
  background: var(--active-green);
  color: var(--text-dark);
}

/* ==========================================================================
   PANEL 2: SUBNET CALCULATOR TERMINAL
   ========================================================================== */
.terminal-command-intro {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-size: 0.84rem;
}

.subnet-console-box {
  background: var(--bg-input);
  border: 1px solid var(--border-active);
  border-radius: var(--radius-sm);
  padding: 1.15rem;
  margin-bottom: 1.25rem;
}

.console-input-row {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 1.2rem;
  margin-bottom: 1rem;
}

.input-item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.console-label {
  font-size: 0.75rem;
  color: var(--text-body);
  font-weight: 600;
}

.label-split {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cidr-pill {
  background: var(--active-green-dim);
  border: 1px solid rgba(0, 255, 102, 0.35);
  padding: 0.1rem 0.5rem;
  border-radius: 2px;
  font-size: 0.85rem;
}

.console-input-field-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.field-prefix {
  position: absolute;
  left: 10px;
  color: var(--active-green);
  font-weight: 700;
  pointer-events: none;
}

.console-input {
  width: 100%;
  background: #0a111a;
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: var(--radius-sm);
  color: var(--text-white);
  font-family: var(--font-mono);
  font-size: 0.95rem;
  padding: 0.55rem 2rem 0.55rem 1.8rem;
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

/* Glowing Cyan / Green Input Border on Focus */
.console-input:focus,
.console-select:focus,
.cidr-num-input:focus {
  border-color: var(--cyber-blue);
  box-shadow: 0 0 0 2px rgba(0, 240, 255, 0.25), 0 0 16px rgba(0, 240, 255, 0.5);
  background: #08111c;
  outline: none;
}

.console-input.invalid-ip {
  border-color: var(--status-critical) !important;
  box-shadow: 0 0 0 2px rgba(255, 51, 102, 0.25), 0 0 16px rgba(255, 51, 102, 0.45) !important;
  background: rgba(255, 51, 102, 0.05);
}

.btn-input-clear {
  position: absolute;
  right: 8px;
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 1.1rem;
  cursor: pointer;
}

.btn-input-clear:hover { color: var(--text-white); }

.field-feedback {
  font-size: 0.72rem;
  min-height: 16px;
}

/* CIDR Controls Group */
.cidr-inputs-group {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.45rem;
}

.cidr-inputs-group .console-select {
  flex: 1;
  margin-bottom: 0;
}

.cidr-number-wrap {
  position: relative;
  width: 78px;
  flex-shrink: 0;
}

.cidr-slash {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--active-green);
  font-weight: 700;
  pointer-events: none;
  font-size: 0.9rem;
}

.cidr-num-input {
  width: 100%;
  padding: 0.5rem 0.5rem 0.5rem 1.45rem;
  font-size: 0.88rem;
  background: #0a111a;
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: var(--radius-sm);
  color: var(--text-white);
  -moz-appearance: textfield;
  outline: none;
}

.cidr-num-input::-webkit-outer-spin-button,
.cidr-num-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.console-select {
  background: #0a111a;
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: var(--radius-sm);
  color: var(--text-white);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  padding: 0.5rem 0.65rem;
  outline: none;
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.console-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: #111b29;
  border-radius: 3px;
  outline: none;
}

.console-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--active-green);
  cursor: pointer;
  box-shadow: 0 0 10px var(--active-green);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.console-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 0 14px var(--active-green);
}

.presets-chip-bar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 0.72rem;
}

.btn-console-preset {
  background: #0e1724;
  border: 1px solid rgba(0, 240, 255, 0.2);
  color: var(--text-body);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  padding: 0.2rem 0.55rem;
  border-radius: 2px;
  cursor: pointer;
  transition: var(--transition-fast);
}

.btn-console-preset:hover {
  background: var(--active-green-dim);
  border-color: var(--active-green);
  color: var(--active-green);
  box-shadow: 0 0 8px rgba(0, 255, 102, 0.3);
}

/* ==========================================================================
   TERMINAL-STYLE READ-ONLY OUTPUT AREA (CYBER GREEN)
   ========================================================================== */
.subnet-terminal-box {
  background: #04080e;
  border: 1px solid rgba(0, 255, 102, 0.35);
  border-radius: var(--radius-sm);
  margin-bottom: 1.25rem;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.75), inset 0 0 24px rgba(0, 255, 102, 0.03);
  position: relative;
}

.terminal-box-header {
  background: #07101a;
  padding: 0.5rem 0.85rem;
  border-bottom: 1px solid rgba(0, 255, 102, 0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.terminal-dots {
  display: flex;
  gap: 6px;
  align-items: center;
}

.terminal-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}

.terminal-dot.dot-red { background: #ff5f56; box-shadow: 0 0 6px rgba(255, 95, 86, 0.6); }
.terminal-dot.dot-yellow { background: #ffbd2e; box-shadow: 0 0 6px rgba(255, 189, 46, 0.6); }
.terminal-dot.dot-green { background: #27c93f; box-shadow: 0 0 6px rgba(39, 201, 63, 0.6); }

.terminal-title {
  font-size: 0.72rem;
  color: var(--active-green);
  letter-spacing: 0.04em;
  font-weight: 600;
}

.btn-terminal-copy {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(0, 255, 102, 0.08);
  border: 1px solid rgba(0, 255, 102, 0.35);
  color: var(--active-green);
  padding: 0.25rem 0.65rem;
  border-radius: 2px;
  font-size: 0.72rem;
  cursor: pointer;
  transition: var(--transition-fast);
}

.btn-terminal-copy:hover {
  background: var(--active-green);
  color: #04080e;
  box-shadow: 0 0 12px var(--active-green-glow);
}

.terminal-screen {
  margin: 0;
  padding: 1.1rem 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.84rem;
  line-height: 1.55;
  color: #00ff66;
  text-shadow: 0 0 5px rgba(0, 255, 102, 0.45);
  background: transparent;
  white-space: pre-wrap;
  word-break: break-all;
  overflow-x: auto;
  max-height: 380px;
  overflow-y: auto;
  position: relative;
  user-select: text;
}

/* Scanline texture */
.terminal-screen::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.15),
    rgba(0, 0, 0, 0.15) 1px,
    transparent 1px,
    transparent 2px
  );
  pointer-events: none;
  opacity: 0.5;
}

.terminal-screen.terminal-error {
  color: #ff3366;
  text-shadow: 0 0 6px rgba(255, 51, 102, 0.5);
}

/* Terminal Action Buttons (Sorgula / Execute) */
.btn-terminal-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid var(--cyber-blue);
  color: var(--cyber-blue);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.52rem 1.15rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  height: 38px;
  white-space: nowrap;
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.2);
  transition: all var(--transition-fast);
}

.btn-terminal-action:hover {
  background: var(--cyber-blue);
  color: #04080e;
  box-shadow: 0 0 20px var(--cyber-blue-glow);
  transform: translateY(-1px);
}

.btn-terminal-action:active {
  transform: translateY(0);
}

.btn-terminal-action.loading {
  background: rgba(0, 255, 102, 0.15);
  border-color: var(--active-green);
  color: var(--active-green);
  cursor: wait;
  box-shadow: 0 0 16px var(--active-green-glow);
}

/* Console Results Grid */
.console-results-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.console-tile {
  background: #0a111a;
  border: 1px solid rgba(0, 240, 255, 0.15);
  border-left: 3px solid var(--cyber-blue);
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
}

.console-tile-full {
  grid-column: span 2;
  border-left-color: var(--active-green);
}

.tile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.25rem;
}

.tile-label {
  font-size: 0.68rem;
  color: var(--text-dim);
}

.btn-tile-copy {
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 2px;
  transition: color 0.15s ease;
}

.btn-tile-copy:hover { color: var(--active-green); }

.tile-val {
  font-size: 1.05rem;
  font-weight: 600;
}

.range-display {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: 1.05rem;
}

.console-binary-box {
  background: #080d14;
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.bin-row { display: flex; gap: 0.8rem; }
.bin-title { color: var(--text-dim); width: 90px; }

/* ==========================================================================
   PANEL 3: LAB DEPLOYMENTS SUB-NODES
   ========================================================================== */
.panel-intro-lead {
  color: var(--text-white);
  margin-bottom: 1.25rem;
  font-size: 0.88rem;
}

.subnodes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.subnode-card {
  background: #0c1522;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.subnode-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.6rem;
}

.subnode-icon { color: var(--cyber-blue); }

.badge-online { font-size: 0.65rem; color: var(--active-green); background: var(--active-green-dim); padding: 0.15rem 0.4rem; border-radius: 2px; }
.badge-configured { font-size: 0.65rem; color: var(--cyber-blue); background: var(--cyber-blue-dim); padding: 0.15rem 0.4rem; border-radius: 2px; }
.badge-monitoring { font-size: 0.65rem; color: var(--active-green); background: var(--active-green-dim); padding: 0.15rem 0.4rem; border-radius: 2px; }

.subnode-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-white);
  margin-bottom: 0.45rem;
}

.subnode-desc {
  font-size: 0.78rem;
  color: var(--text-body);
  line-height: 1.45;
  margin-bottom: 0.85rem;
}

.subnode-specs {
  background: rgba(0, 0, 0, 0.35);
  border-left: 2px solid var(--cyber-blue);
  padding: 0.5rem 0.65rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.7rem;
  color: #c0d5ec;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

/* ==========================================================================
   PANEL 4: FARKINDALIK (SECURITY AWARENESS DASHBOARD)
   ========================================================================== */
.awareness-section {
  margin-bottom: 1.5rem;
}

.awareness-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.65rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-white);
}

.section-title-line {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  letter-spacing: 0.5px;
}

.feed-count-badge {
  font-size: 0.65rem;
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-sm);
  background: var(--cyber-blue-dim);
  color: var(--cyber-blue);
  border: 1px solid var(--border-cyan);
}

.sim-badge-danger {
  font-size: 0.65rem;
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-sm);
  background: rgba(255, 51, 102, 0.15);
  color: var(--status-critical);
  border: 1px solid rgba(255, 51, 102, 0.35);
}

/* --- COMPONENT 1: GÜNÜN SİBER GÜVENLİK İPUCU (HIGHLIGHTED NEON CARD) --- */
.awareness-daily-tip-card {
  position: relative;
  background: linear-gradient(135deg, #0d1a29 0%, #08101a 100%);
  border: 1px solid var(--cyber-blue);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.4rem;
  box-shadow: 0 0 25px var(--cyber-blue-glow), inset 0 0 15px rgba(0, 240, 255, 0.08);
  transition: box-shadow var(--transition-smooth), transform var(--transition-fast);
  overflow: hidden;
}

.awareness-daily-tip-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--cyber-blue);
  box-shadow: 0 0 12px var(--cyber-blue);
}

.awareness-daily-tip-card:hover {
  box-shadow: 0 0 35px rgba(0, 240, 255, 0.5), inset 0 0 20px rgba(0, 240, 255, 0.15);
  transform: translateY(-2px);
}

.daily-tip-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.85rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.daily-tip-badge-wrap {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.daily-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--cyber-blue);
  box-shadow: 0 0 10px var(--cyber-blue);
  animation: cyanPulse 1.8s infinite;
}

@keyframes cyanPulse {
  0% { transform: scale(0.9); opacity: 0.7; box-shadow: 0 0 4px var(--cyber-blue); }
  50% { transform: scale(1.2); opacity: 1; box-shadow: 0 0 14px var(--cyber-blue); }
  100% { transform: scale(0.9); opacity: 0.7; box-shadow: 0 0 4px var(--cyber-blue); }
}

.daily-tip-badge {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--cyber-blue);
  text-shadow: 0 0 8px var(--cyber-blue-glow);
}

.daily-type-tag {
  font-size: 0.62rem;
  font-weight: 600;
  padding: 0.12rem 0.45rem;
  border-radius: 2px;
  background: var(--active-green-dim);
  color: var(--active-green);
  border: 1px solid var(--border-active);
}

.daily-tip-date {
  font-size: 0.72rem;
  letter-spacing: 0.5px;
}

.daily-tip-title {
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--text-white);
  line-height: 1.4;
  margin-bottom: 0.6rem;
}

.daily-tip-content {
  font-size: 0.84rem;
  color: #b3c9e2;
  line-height: 1.6;
  margin-bottom: 0.95rem;
}

.daily-tip-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(0, 240, 255, 0.15);
  font-size: 0.72rem;
}

/* --- COMPONENT 2: İÇERİK AKIŞI (HISTORICAL FEED SCROLLABLE LIST) --- */
.awareness-feed-container {
  max-height: 290px;
  overflow-y: auto;
  padding-right: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

/* Custom Sleek Cyber Scrollbar */
.scrollable-cyber-feed::-webkit-scrollbar {
  width: 6px;
}

.scrollable-cyber-feed::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-sm);
}

.scrollable-cyber-feed::-webkit-scrollbar-thumb {
  background: rgba(0, 240, 255, 0.35);
  border-radius: var(--radius-sm);
}

.scrollable-cyber-feed::-webkit-scrollbar-thumb:hover {
  background: var(--cyber-blue);
  box-shadow: 0 0 8px var(--cyber-blue);
}

.scrollable-cyber-feed {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 240, 255, 0.35) rgba(0, 0, 0, 0.3);
}

.awareness-feed-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.feed-item-card {
  background: rgba(13, 22, 34, 0.85);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--cyber-blue);
  border-radius: var(--radius-sm);
  padding: 0.8rem 1rem;
  transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.feed-item-card:hover {
  transform: translateX(3px);
  background: #111d2e;
  border-color: var(--border-cyan);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}

.feed-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.35rem;
  font-size: 0.68rem;
}

.feed-item-badge {
  font-size: 0.62rem;
  font-weight: 700;
  padding: 0.12rem 0.4rem;
  border-radius: 2px;
  background: var(--cyber-blue-dim);
  color: var(--cyber-blue);
  border: 1px solid rgba(0, 240, 255, 0.25);
}

.feed-item-date {
  font-size: 0.68rem;
}

.feed-item-title {
  font-size: 0.92rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
  color: var(--text-white);
  line-height: 1.35;
}

.feed-item-content {
  font-size: 0.78rem;
  color: var(--text-body);
  line-height: 1.5;
}

.feed-item-loading {
  padding: 1rem;
  text-align: center;
  font-size: 0.78rem;
}

.terminal-error-msg {
  background: rgba(255, 51, 102, 0.12);
  border: 1px dashed var(--status-critical);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1rem;
  color: var(--status-critical);
  font-size: 0.8rem;
  line-height: 1.5;
}

/* --- COMPONENT 3: OLTALAMA (PHISHING) SİMÜLASYONU --- */
.phishing-sim-card {
  background: #09111b;
  border: 1px solid rgba(255, 51, 102, 0.25);
  border-radius: var(--radius-md);
  padding: 1.15rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}

.phishing-email-client {
  background: #060a10;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 1rem;
}

.email-client-header {
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.74rem;
}

.email-meta-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.meta-label {
  min-width: 65px;
}

.spoof-warning-badge {
  font-size: 0.6rem;
  font-weight: 700;
  padding: 0.08rem 0.35rem;
  background: rgba(255, 51, 102, 0.2);
  color: var(--status-critical);
  border: 1px solid var(--status-critical);
  border-radius: 2px;
}

.text-red {
  color: #ff4d6d;
}

.email-client-body {
  padding: 1rem;
  font-size: 0.8rem;
  line-height: 1.55;
  color: #c9d7e6;
}

.email-client-body p {
  margin-bottom: 0.65rem;
}

.fake-phishing-cta-box {
  background: rgba(255, 51, 102, 0.06);
  border: 1px dashed rgba(255, 51, 102, 0.4);
  padding: 0.85rem;
  border-radius: var(--radius-sm);
  text-align: center;
  margin: 0.85rem 0;
}

.btn-fake-phishing-link {
  background: linear-gradient(180deg, #d90429 0%, #a8001f 100%);
  color: #fff;
  border: none;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.55rem 1.25rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  box-shadow: 0 0 15px rgba(217, 4, 41, 0.4);
  transition: transform var(--transition-fast), filter var(--transition-fast);
}

.btn-fake-phishing-link:hover {
  transform: translateY(-1px);
  filter: brightness(1.15);
}

.fake-url-preview {
  font-size: 0.68rem;
  margin-top: 0.45rem;
  word-break: break-all;
}

.email-client-sign {
  font-size: 0.7rem;
  margin-top: 0.65rem;
}

.phishing-sim-footer {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.btn-sim-inspect {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid var(--cyber-blue);
  color: var(--cyber-blue);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.55rem 1.15rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  box-shadow: 0 0 12px var(--cyber-blue-glow);
  transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.btn-sim-inspect:hover {
  background: var(--cyber-blue);
  color: var(--text-dark);
  box-shadow: 0 0 22px var(--cyber-blue);
  transform: translateY(-1px);
}

.sim-redflags-box {
  background: rgba(0, 240, 255, 0.05);
  border: 1px solid var(--border-cyan);
  border-left: 3px solid var(--cyber-blue);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  animation: fadeInDown 0.25s ease;
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.redflags-title {
  font-size: 0.75rem;
  margin-bottom: 0.45rem;
}

.redflags-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.74rem;
  color: #c9d7e6;
  padding-left: 0.2rem;
}

.redflags-list li {
  line-height: 1.45;
}

/* ==========================================================================
   TOAST NOTIFICATION
   ========================================================================== */
.topology-toast-container {
  position: fixed;
  bottom: 1.5rem;
  left: 1.5rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}

.topo-toast {
  background: #09121c;
  border: 1px solid var(--border-cyan);
  border-left: 3px solid var(--active-green);
  color: var(--text-white);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  padding: 0.65rem 1rem;
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8);
  pointer-events: auto;
  animation: toastIn 0.2s ease;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   RESPONSIVE DESIGN (GRACEFUL MOBILE TOPOLOGY BUS / SPINE)
   ========================================================================== */
@media (max-width: 1024px) {
  .topology-nodes-wrapper {
    gap: 2.5rem 1.5rem;
  }

  .subnodes-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .hide-mobile { display: none; }
  .hide-tablet { display: none; }

  .topology-stage-container {
    padding: 70px 1rem 2rem;
  }

  /* Transform into a Vertical Spine Topology on Mobile */
  .topology-nodes-wrapper {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 1.8rem;
  }

  .central-core-node {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0.5rem;
  }

  .switch-tl { grid-column: 1; grid-row: 2; justify-self: center; }
  .switch-tr { grid-column: 1; grid-row: 3; justify-self: center; }
  .switch-bl { grid-column: 1; grid-row: 4; justify-self: center; }
  .switch-br { grid-column: 1; grid-row: 5; justify-self: center; }
  .switch-bc { grid-column: 1; grid-row: 6; justify-self: center; }

  .switch-node {
    max-width: 100%;
  }

  .console-input-row {
    grid-template-columns: 1fr;
  }

  .console-results-grid {
    grid-template-columns: 1fr;
  }

  .console-tile-full {
    grid-column: span 1;
  }

  .terminal-slide-panel {
    padding: 0.75rem;
  }
}

/* --- LAB MODAL SIDEBAR TABS (.lab-nav-btn) --- */
.lab-nav-btn {
  background: #0a1018; /* Dark navy */
  border: none;
  border-left: 3px solid #1a2b3c;
  border-radius: 0;
  color: #a3b8cc;
  text-align: left;
  display: flex;
  align-items: flex-start;
  width: 100%;
  padding: 0.85rem 1rem;
  margin-bottom: 0.5rem;
  font-family: var(--font-mono);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  outline: none;
}

.lab-nav-btn .nav-btn-text {
  display: flex;
  flex-direction: column;
  margin-left: 0.75rem;
}

.lab-nav-btn .nav-btn-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #c9d7e6;
  margin-bottom: 0.25rem;
}

.lab-nav-btn .nav-btn-desc {
  font-size: 0.75rem;
  color: var(--text-dim);
}

.lab-nav-btn:hover {
  background: #121E2A;
  color: #00f0ff;
}

.lab-nav-btn:hover .nav-btn-title,
.lab-nav-btn:hover .nav-btn-icon,
.lab-nav-btn:hover .nav-btn-desc {
  color: #00f0ff;
}

.lab-nav-btn.active {
  border-left: 3px solid #00f0ff;
  background: linear-gradient(90deg, rgba(0,240,255,0.1) 0%, transparent 100%);
  color: #00f0ff;
}

.lab-nav-btn.active .nav-btn-title,
.lab-nav-btn.active .nav-btn-icon,
.lab-nav-btn.active .nav-btn-desc {
  color: #00f0ff;
}

/* --- MATRIX LOG STREAM BACKGROUND --- */
#matrix-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  opacity: 0.22;
}

/* SW-04 Split-View Archive */
#modal-sw4 .panel-content-body {
  display: flex;
  flex-direction: row;
  overflow: hidden;
}

.sw4-main-container {
  width: 100%;
  flex-shrink: 0;
  transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 10px;
}

.archive-side-panel {
  width: 0;
  flex-shrink: 0;
  transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), padding 0.4s ease;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
  background: var(--bg-panel);
  border-left: 0 solid var(--line-cyan);
}

.modal-split-view .sw4-main-container {
  width: 50%;
}

.modal-split-view .archive-side-panel {
  width: 50%;
  padding-left: 15px;
  border-left: 1px solid var(--line-cyan);
}

/* Custom cyber dark scrollbar for the panels */
.sw4-main-container::-webkit-scrollbar,
.archive-side-panel::-webkit-scrollbar {
  width: 6px;
}
.sw4-main-container::-webkit-scrollbar-track,
.archive-side-panel::-webkit-scrollbar-track {
  background: var(--bg-panel);
}
.sw4-main-container::-webkit-scrollbar-thumb,
.archive-side-panel::-webkit-scrollbar-thumb {
  background: var(--line-cyan);
  border-radius: 3px;
}
.sw4-main-container::-webkit-scrollbar-thumb:hover,
.archive-side-panel::-webkit-scrollbar-thumb:hover {
  background: var(--text-cyan);
}

.btn-archive-toggle {
  background: transparent;
  border: 1px solid var(--text-cyan);
  color: var(--text-cyan);
  padding: 4px 10px;
  cursor: pointer;
  margin-left: auto;
  font-family: monospace;
  font-size: 0.85rem;
  transition: all 0.2s ease;
}
.btn-archive-toggle:hover {
  background: rgba(0, 255, 255, 0.1);
  box-shadow: 0 0 8px var(--glow-cyan);
}

/* --- MOBILE RESPONSIVE FIXES --- */
@media (max-width: 768px) {
  /* Modals & Containers Padding */
  .modal,
  .terminal-slide-panel,
  .panel-content-body,
  .sw4-main-panel > div,
  .sw4-archive-panel > div {
    padding: 10px !important;
  }

  /* Tab Menus Mobile Horizontal Scrolling */
  .tools-vertical-nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    margin-bottom: 10px;
  }
  .tools-vertical-nav::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }
  
  .tool-nav-btn, .lab-nav-btn, .term-tab-btn {
    flex-shrink: 0 !important;
    width: auto !important;
    min-width: 140px;
    margin-right: 8px;
    margin-bottom: 0 !important; /* Override vertical margin */
  }

  /* Typography & Word Wrapping */
  p, pre, code, h3, h4, .feed-item-content, .daily-tip-content {
    word-wrap: break-word;
    overflow-wrap: break-word;
    font-size: 13px !important;
  }

  pre {
    overflow-x: auto;
    max-width: 100%;
  }

  h3 {
    font-size: 16px !important;
  }
  
  h4 {
    font-size: 14px !important;
  }

  /* Touch Targets (44x44px min) */
  button, 
  a, 
  .btn-archive-toggle, 
  .close-modal-btn, 
  .btn-panel-action {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* SW-04 Mobile Archive Overlay Pattern */
  #modal-sw4 .panel-content-body {
    position: relative;
    overflow: hidden;
  }

  .sw4-main-container {
    width: 100% !important;
  }

  .archive-side-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100%;
    background: var(--bg-panel);
    z-index: 100;
    transform: translateX(100%); /* Start off-screen right */
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    padding: 10px !important;
    border-left: none !important;
  }

  /* When modal is in split-view, slide the archive panel in */
  .modal-split-view .archive-side-panel {
    transform: translateX(0);
  }

  /* Hide/Show classes for mobile/desktop back buttons */
  .hide-desktop {
    display: inline-flex !important;
  }
  .hide-mobile {
    display: none !important;
  }
}

@media (min-width: 769px) {
  .hide-desktop {
    display: none !important;
  }
}

/* --- Core About Me Link --- */
.core-about-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease, text-shadow 0.3s ease;
  pointer-events: auto;
  position: relative;
  z-index: 10; /* Ensure it's clickable above chassis box */
}

.core-about-link:hover {
  color: #00ff66;
  text-decoration: none;
  text-shadow: 0 0 8px rgba(0, 255, 102, 0.6);
}

/* --- OPTICAL TRUNK DATA FLOW ANIMATION --- */
@keyframes packetFlow {
  from {
    stroke-dashoffset: 100;
  }
  to {
    stroke-dashoffset: 0;
  }
}

.optical-trunk-flow {
  stroke-dasharray: 8, 16;
  animation: packetFlow 4s linear infinite;
  filter: drop-shadow(0 0 5px #00f0ff);
  transition: filter 0.3s ease;
}

/* Vulnerability Management Node Styles */
.vuln-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 1rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.vuln-card.critical {
  border-color: #ff4444;
  box-shadow: 0 0 10px rgba(255, 68, 68, 0.2);
}

.vuln-card.high {
  border-color: #ffbb33;
  box-shadow: 0 0 10px rgba(255, 187, 51, 0.2);
}

.bash-cmd-block {
  background-color: #0a0f16;
  color: #00ff00;
  font-family: 'Roboto Mono', monospace;
  padding: 1rem;
  border-radius: 4px;
  border: 1px solid #1a2332;
  overflow-x: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
  margin-top: 1rem;
  font-size: 0.9rem;
}

/* ==========================================================================
   MODAL SCROLLING & OVERFLOW (BUG FIX)
   ========================================================================== */
.terminal-slide-panel .panel-window,
.terminal-slide-panel .tools-console-main,
.terminal-slide-panel .lab-content-pane,
#modal-sw5 .panel-window,
#modal-sw5 .panel-content-body {
  max-height: 75vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 240, 255, 0.6) #111;
}

/* Custom Cyberpunk Webkit Scrollbar for Modals */
.terminal-slide-panel .panel-window::-webkit-scrollbar,
.terminal-slide-panel .tools-console-main::-webkit-scrollbar,
.terminal-slide-panel .lab-content-pane::-webkit-scrollbar,
#modal-sw5 .panel-window::-webkit-scrollbar,
#modal-sw5 .panel-content-body::-webkit-scrollbar {
  width: 6px;
}

.terminal-slide-panel .panel-window::-webkit-scrollbar-track,
.terminal-slide-panel .tools-console-main::-webkit-scrollbar-track,
.terminal-slide-panel .lab-content-pane::-webkit-scrollbar-track,
#modal-sw5 .panel-window::-webkit-scrollbar-track,
#modal-sw5 .panel-content-body::-webkit-scrollbar-track {
  background: #111;
  border-radius: 4px;
}

.terminal-slide-panel .panel-window::-webkit-scrollbar-thumb,
.terminal-slide-panel .tools-console-main::-webkit-scrollbar-thumb,
.terminal-slide-panel .lab-content-pane::-webkit-scrollbar-thumb,
#modal-sw5 .panel-window::-webkit-scrollbar-thumb,
#modal-sw5 .panel-content-body::-webkit-scrollbar-thumb {
  background: rgba(0, 240, 255, 0.6);
  border-radius: 4px;
  box-shadow: 0 0 5px rgba(0, 240, 255, 0.3);
}

.terminal-slide-panel .panel-window::-webkit-scrollbar-thumb:hover,
.terminal-slide-panel .tools-console-main::-webkit-scrollbar-thumb:hover,
.terminal-slide-panel .lab-content-pane::-webkit-scrollbar-thumb:hover,
#modal-sw5 .panel-window::-webkit-scrollbar-thumb:hover,
#modal-sw5 .panel-content-body::-webkit-scrollbar-thumb:hover {
  background: #00ffff;
  box-shadow: 0 0 10px #00ffff;
}

/* Modal Footer Fix */
.modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(0, 255, 255, 0.3);
  padding-top: 15px;
  margin-top: 20px;
  font-family: monospace;
}

.close-btn {
  background: #111;
  border: 1px solid #0ff;
  color: #0ff;
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: monospace;
}

.close-btn:hover {
  background: #0ff;
  color: #000;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}


/* ==========================================================================
   GLOBAL FIX FOR FLOATING FOOTERS (Applied to all Modals)
   ========================================================================== */
.modal, .modal-box, .panel-window {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.modal-content, .panel-content-body, .panel-content {
  flex-grow: 1 !important;
  overflow-y: auto !important;
}

.modal-footer {
  margin-top: auto !important;
  width: 100% !important;
  padding-bottom: 10px;
}