:root {
  color-scheme: dark;
  --bg-color: #030712;
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --accent: #38bdf8;
  --accent-glow: rgba(56, 189, 248, 0.4);
  --danger: #fb7185;
  --ok: #34d399;
  --border-color: rgba(255, 255, 255, 0.1);
  
  --glass-bg: rgba(15, 23, 42, 0.4);
  --glass-inner: rgba(255, 255, 255, 0.03);
  --glass-border: rgba(255, 255, 255, 0.08);
  
  font-family: 'Pretendard', system-ui, -apple-system, sans-serif;
}

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

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg-color);
  color: var(--text-main);
  line-height: 1.6;
  overflow-x: hidden;
}

/* Background Effects */
.bg-fx {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  overflow: hidden;
  background: radial-gradient(circle at 50% 0%, #080f25 0%, #030712 100%);
}

.bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.5;
  animation: floatOrb 20s infinite ease-in-out alternate;
}

.bg-orb-1 {
  width: 600px;
  height: 600px;
  background: #38bdf8;
  top: -200px;
  left: -200px;
}

.bg-orb-2 {
  width: 500px;
  height: 500px;
  background: #818cf8;
  bottom: -100px;
  right: -100px;
  animation-delay: -5s;
}

.bg-orb-3 {
  width: 400px;
  height: 400px;
  background: #f472b6;
  top: 40%;
  left: 60%;
  animation-delay: -10s;
  opacity: 0.3;
}

@keyframes floatOrb {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(50px, 100px) scale(1.2); }
}

/* Layout */
.app-shell {
  max-width: 1440px;
  margin: 0 auto;
  padding: 24px;
}

/* iframe 임베드 시 중앙 정렬을 해제해 부모 프레임 좌측 기준에 맞춤 */
html.is-embedded .app-shell {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 12px;
}

.layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 32px;
  margin-top: 24px;
}

html.is-embedded .layout {
  margin-top: 12px;
  gap: 24px;
}

@media (max-width: 1024px) {
  .layout {
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: static;
  }
}

/* Glassmorphism */
.glass-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
}

.glass-panel-inner {
  background: var(--glass-inner);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
}

/* Topbar */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  position: sticky;
  top: 24px;
  z-index: 50;
}

html.is-embedded .topbar {
  top: 12px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 16px;
}

.brand-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(135deg, #38bdf8, #818cf8);
  color: #fff;
  box-shadow: 0 0 20px var(--accent-glow);
}

.brand-title {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.brand-subtitle {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.brand-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

.glass-input {
  background: rgba(2, 6, 23, 0.35);
  border-color: rgba(148, 163, 184, 0.25);
}

.searchbox {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(0,0,0,0.2);
  border: 1px solid var(--border-color);
  width: 300px;
  transition: all 0.2s ease;
}

.searchbox:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-glow);
}

.searchbox input {
  background: transparent;
  border: none;
  color: white;
  width: 100%;
  font-size: 0.95rem;
  outline: none;
}

.searchbox .search-icon {
  color: var(--text-muted);
  width: 18px;
}

.searchbox .btn {
  min-height: 30px;
  width: 30px;
  padding: 0;
  border-radius: 999px;
}

@media (max-width: 900px) {
  .topbar {
    flex-wrap: wrap;
    gap: 12px;
    top: 12px;
  }

  .topbar-actions {
    width: 100%;
  }

  .searchbox {
    width: 100%;
  }
}

/* Sidebar */
.sidebar {
  position: sticky;
  top: 110px;
  height: max-content;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.sidebar-title {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 12px;
}

.tabs {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sidebar-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tab {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 12px 16px;
  border-radius: 12px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
}

.tab i,
.tab svg {
  width: 18px;
  height: 18px;
}

.tab:hover {
  background: var(--glass-inner);
  color: var(--text-main);
}

.tab.is-active {
  background: rgba(56, 189, 248, 0.1);
  border-color: rgba(56, 189, 248, 0.3);
  color: var(--accent);
  font-weight: 600;
}

/* Mini Cards */
.mini-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mini-card {
  padding: 12px;
}
.mini-k {
  font-size: 0.8rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.mini-v {
  font-size: 0.9rem;
  font-weight: 500;
  margin-top: 4px;
}

/* Main Content */
.main {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.page {
  display: block;
}

.page[hidden] {
  display: none !important;
}

.section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.gsap-fade-in,
.gsap-stagger-up {
  will-change: transform, opacity;
}

.section-head {
  margin-bottom: 24px;
}

.h1 {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.03em;
  margin-bottom: 16px;
}

.h2 {
  font-size: 1.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}

.text-gradient {
  background: linear-gradient(135deg, #38bdf8, #818cf8, #f472b6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.lead {
  font-size: 1.15rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 32px;
}

.muted {
  color: var(--text-muted);
}
.text-accent { color: var(--accent); }
.text-ok { color: var(--ok); }
.text-sm { font-size: 0.875rem; }

/* Hero */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  padding: 40px;
}

.hero-left,
.hero-right {
  min-width: 0;
}

@media (max-width: 1200px) {
  .hero {
    grid-template-columns: 1fr;
  }
}

.badge-accent {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 20px;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 32px;
}

.glass-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--glass-inner);
  border: 1px solid var(--border-color);
  font-size: 0.9rem;
  font-weight: 500;
}

.glass-chip i,
.glass-chip svg { width: 14px; height: 14px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.counter {
  display: inline-block;
  min-width: 1.8ch;
}

/* Callouts */
.callouts {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.callout {
  display: flex;
  gap: 16px;
  padding: 20px;
}

.callout-content {
  min-width: 0;
}

.callout-icon {
  background: rgba(56, 189, 248, 0.15);
  color: var(--accent);
  padding: 12px;
  border-radius: 14px;
  height: fit-content;
}

.callout-title {
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 4px;
}

.callout-body {
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* Stat Grid */
.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 640px) {
  .stat-grid {
    grid-template-columns: 1fr;
  }
}

.stat-card {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stat-icon {
  color: var(--accent);
  margin-bottom: 8px;
}

.stat-k {
  font-size: 0.9rem;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
}

.stat-v {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
}

.stat-h {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: auto;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  min-height: 42px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid transparent;
  white-space: nowrap;
}

.btn i,
.btn svg,
.btn .ui-icon { width: 16px; height: 16px; flex: none; }

.btn-primary {
  background: linear-gradient(135deg, #38bdf8, #818cf8);
  color: white;
  box-shadow: 0 4px 14px var(--accent-glow);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--accent-glow);
}

.btn-ghost {
  background: transparent;
  color: var(--text-muted);
}
.btn-ghost:hover {
  background: var(--glass-inner);
  color: var(--text-main);
}
.btn-circle {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
}
.btn-sm {
  min-height: 34px;
  padding: 6px 12px;
  font-size: 0.82rem;
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* Grid */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }

@media (max-width: 900px) {
  .grid-2, .grid-3, .split { grid-template-columns: 1fr; }
}

/* Common Card Styles */
.card {
  padding: 24px;
  display: flex;
  flex-direction: column;
}
.card-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Teams */
.team-card {
  cursor: pointer;
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border-color);
  border-radius: 16px;
}
.team-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255,255,255,0.2);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* Layered Showcase - CytoScape */
.layer-showcase {
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-radius: 24px;
}

.layer-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  justify-content: stretch;
}

.btn-layer {
  background: var(--glass-inner);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  width: 100%;
  justify-content: center;
  white-space: nowrap;
}
.btn-layer.is-active {
  background: rgba(56, 189, 248, 0.15);
  border-color: var(--accent);
  color: var(--accent);
}

.cy-toolbar .btn {
  min-height: 34px;
}

.cy-toolbar .btn-circle {
  width: 34px;
  height: 34px;
}

#cy {
  outline: none;
}

.layer-visual-area {
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(2, 6, 23, 0.36);
}

.cy-overlay {
  background: rgba(15, 23, 42, 0.7);
  padding: 8px 16px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  backdrop-filter: blur(8px);
}

.cy-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--glass-inner);
  border: 1px solid var(--border-color);
  flex-wrap: wrap;
}

.cy-toolbar-left,
.cy-toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.cy-edit-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.cy-file-input {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.cy-file-btn {
  cursor: pointer;
}

.cy-zoom-range {
  width: 220px;
  accent-color: #38bdf8;
}

.cy-editor-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}

@media (max-width: 900px) {
  .cy-editor-panels { grid-template-columns: 1fr; }
  .cy-zoom-range { width: 160px; }
}

.cy-panel {
  padding: 18px;
  border-radius: 16px;
}

.cy-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.cy-panel-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 1.05rem;
}

.cy-panel-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cy-outline {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 360px;
  overflow: auto;
  padding-right: 6px;
}

.cy-outline-item {
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: rgba(15, 23, 42, 0.35);
  color: var(--text-main);
  cursor: pointer;
  transition: all 0.15s ease;
}

.cy-outline-item:hover {
  background: rgba(15, 23, 42, 0.55);
  border-color: rgba(255,255,255,0.12);
}

.cy-outline-item.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.18);
}

.cy-outline-item .cy-outline-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.cy-outline-item .cy-outline-name {
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cy-outline-item .cy-outline-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
  flex: none;
}

.cy-outline-indent-0 { margin-left: 0; }
.cy-outline-indent-1 { margin-left: 14px; }
.cy-outline-indent-2 { margin-left: 28px; }
.cy-outline-indent-3 { margin-left: 42px; }
.cy-outline-indent-4 { margin-left: 56px; }

.cy-props {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cy-props .field {
  margin-bottom: 0;
}

.cy-props-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.cy-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  background: rgba(15, 23, 42, 0.35);
}

/* Web GNS Simulator */
.gns-sim {
  padding: 18px;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
}

.gns-sim-topbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.gns-sim-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.gns-sim-controls-right .label {
  margin-right: 2px;
}

.gns-sim-controls-right .modern-select {
  min-width: 150px;
}

.gns-speed-range {
  width: 130px;
  accent-color: #38bdf8;
}

.gns-sim-body {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 300px;
  gap: 12px;
  height: clamp(420px, 56vh, 560px);
}

.gns-device-list,
.gns-inspector {
  background: var(--glass-inner);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 12px;
  overflow: auto;
  min-height: 0;
}

.gns-device-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gns-device-item {
  width: 100%;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(15, 23, 42, 0.6);
  border-radius: 12px;
  padding: 10px;
  color: var(--text-main);
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all .18s ease;
}

.gns-device-item:hover {
  border-color: rgba(56, 189, 248, 0.55);
}

.gns-device-item.is-active {
  border-color: rgba(56, 189, 248, 0.95);
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.4) inset;
  background: rgba(3, 28, 52, 0.72);
}

.gns-device-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.gns-device-name {
  font-size: 0.9rem;
  font-weight: 700;
}

.gns-device-role {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.gns-device-meta {
  font-size: 0.74rem;
  color: #93c5fd;
}

.gns-workspace-wrap {
  min-width: 0;
  min-height: 0;
}

.gns-workspace {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: #0b1020;
}

.gns-workspace.map-off {
  background:
    radial-gradient(circle at 12% 18%, rgba(14, 165, 233, .16), transparent 46%),
    radial-gradient(circle at 84% 80%, rgba(99, 102, 241, .12), transparent 44%),
    linear-gradient(180deg, #0a1025, #060b1a);
}

.gns-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #d1d5db;
  user-select: none;
  pointer-events: none;
  opacity: .72;
  transition: opacity .2s ease;
}

.gns-map.is-hidden {
  opacity: 0;
}

.gns-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.gns-link {
  stroke-width: 2.1;
  stroke-linecap: round;
  opacity: .2;
  cursor: pointer;
  transition: opacity .15s ease, stroke .15s ease;
}

.gns-link.is-active {
  opacity: .68;
  filter: drop-shadow(0 0 3px currentColor);
}

.gns-link.is-muted {
  opacity: .06;
}

.gns-link.is-down {
  stroke: #ef4444 !important;
  opacity: .55;
  stroke-dasharray: 8 6;
}

.gns-node {
  cursor: pointer;
}

.gns-node-halo {
  fill: rgba(56, 189, 248, 0.04);
  opacity: 0;
  transition: opacity .15s ease;
}

.gns-node-ring {
  fill: rgba(2, 6, 23, 0.72);
  stroke-width: 1.8;
}

.gns-node-dot {
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.35));
}

.gns-node-label {
  fill: rgba(226, 232, 240, 0.95);
  font-size: 11px;
  font-weight: 700;
  text-shadow: 0 0 4px rgba(15, 23, 42, 0.9);
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events: none;
}

.gns-node:hover .gns-node-label,
.gns-node.is-selected .gns-node-label {
  opacity: 1;
}

.gns-node.is-selected .gns-node-halo {
  opacity: 1;
}

.gns-packet {
  filter: drop-shadow(0 0 6px currentColor);
}

.gns-hud {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.gns-hud-item {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.74rem;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(2, 6, 23, 0.7);
  color: #cbd5e1;
}

.gns-inspector-title {
  font-size: 1rem;
  font-weight: 800;
}

.gns-if-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}

.gns-if-table th,
.gns-if-table td {
  border-bottom: 1px solid rgba(148, 163, 184, 0.22);
  padding: 7px 6px;
  text-align: left;
}

.gns-if-table th {
  color: #93c5fd;
  font-weight: 700;
  font-size: 0.76rem;
}

.gns-console {
  margin-top: 12px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(2, 6, 23, 0.7);
}

.gns-console .code-head {
  border-radius: 0;
}

.gns-console-out {
  margin: 0;
  height: 140px;
  overflow: auto;
  border-radius: 0;
  font-size: 0.82rem;
  background: rgba(2, 6, 23, 0.85);
}

.gns-console-input-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  padding: 10px 12px 12px;
  border-top: 1px solid rgba(148, 163, 184, 0.22);
  align-items: center;
}

.gns-console-prompt {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  color: #93c5fd;
  font-weight: 700;
  font-size: 0.85rem;
}

.gns-console-input {
  min-height: 36px;
  margin-bottom: 0;
}

@media (max-width: 1320px) {
  .gns-sim-body {
    grid-template-columns: 220px minmax(0, 1fr);
    grid-template-areas:
      "list map"
      "inspector map";
    min-height: 0;
  }

  .gns-device-list {
    grid-area: list;
  }

  .gns-workspace-wrap {
    grid-area: map;
  }

  .gns-inspector {
    grid-area: inspector;
  }
}

@media (max-width: 980px) {
  .gns-sim-body {
    height: auto;
    grid-template-columns: 1fr;
    grid-template-areas:
      "map"
      "list"
      "inspector";
  }

  .gns-workspace {
    min-height: 460px;
  }

  .gns-device-list {
    max-height: 260px;
  }

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

.text-danger { color: #f87171; }
.text-blue { color: #60a5fa; }
.text-purple { color: #c084fc; }

/* Pills & Badges */
.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  border: 1px solid var(--border-color);
}
.pill i,
.pill svg { width: 14px; height: 14px; }

.purple { background: rgba(168, 85, 247, 0.2); color: #c084fc; border: 1px solid rgba(168, 85, 247, 0.4); }
.blue { background: rgba(59, 130, 246, 0.2); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.4); }
.red { background: rgba(239, 68, 68, 0.2); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.4); }
.gray { background: rgba(100, 116, 139, 0.2); color: #94a3b8; border: 1px solid rgba(100, 116, 139, 0.4); }
.good { background: rgba(16, 185, 129, 0.2); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.4); }

.pill-purple { border-color: #c084fc; color: #c084fc; }
.pill-blue { border-color: #60a5fa; color: #60a5fa; }
.pill-red { border-color: #f87171; color: #f87171; }
.pill-gray { border-color: #94a3b8; color: #94a3b8; }

/* Stepper */
.stepper {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 10px;
}
.step {
  flex: 1;
  min-width: 200px;
  background: var(--glass-inner);
  border: 1px solid var(--border-color);
  padding: 20px;
  border-radius: 16px;
  position: relative;
}
.step-num {
  font-family: ui-monospace, monospace;
  font-size: 2rem;
  font-weight: 800;
  color: var(--accent);
  opacity: 0.5;
  margin-bottom: 8px;
}
.step-title {
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 8px;
}
.step-desc {
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* Architecture */
.arch-canvas {
  padding: 32px;
  border-right: 1px solid var(--border-color);
}
.arch-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.arch-node {
  padding: 16px;
  background: var(--glass-inner);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  padding-right: 80px;
}
.arch-node:hover {
  border-color: rgba(255,255,255,0.3);
  transform: translateX(10px);
}
.arch-node.is-active {
  background: rgba(56, 189, 248, 0.1);
  border-color: var(--accent);
}
.node-title { font-weight: 700; font-size: 1.1rem; margin-bottom: 4px; }
.node-sub { font-size: 0.85rem; color: var(--text-muted); }
.arch-node .badge { position: absolute; right: 16px; top: 20px; }

.panel {
  padding: 32px;
}
.panel-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-muted);
  gap: 12px;
}
.panel-empty i,
.panel-empty svg { width: 48px; height: 48px; opacity: 0.5; }
.panel-title { font-size: 1.5rem; font-weight: 800; margin-bottom: 8px; }

/* Timeline */
.timeline {
  padding: 32px;
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 600px;
  overflow-y: auto;
}
.tl-card {
  background: var(--glass-inner);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s;
}
.tl-card:hover { transform: scale(1.02); }
.tl-card.is-active { border-color: var(--accent); background: rgba(56, 189, 248, 0.05); }
.tl-top { display: flex; justify-content: space-between; margin-bottom: 8px; }
.tl-phase { font-size: 0.8rem; font-weight: 700; color: var(--accent); text-transform: uppercase; }
.tl-title { font-weight: 700; font-size: 1.05rem; margin-bottom: 4px; }
.tl-summary { font-size: 0.85rem; color: var(--text-muted); }

.attack-toolbar {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.filters {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.toggle-row {
  display: flex;
  align-items: center;
}

/* Forms & Inputs */
.modern-select, .modern-input {
  width: 100%;
  background: var(--glass-inner);
  border: 1px solid var(--border-color);
  color: white;
  padding: 12px 16px;
  border-radius: 12px;
  font-family: inherit;
  font-size: 0.95rem;
  outline: none;
  transition: all 0.2s;
  appearance: none;
}
.modern-select:focus, .modern-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-glow);
}
.modern-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 40px;
}
.modern-select option { background: #0f172a; color: white; }

.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.label { font-size: 0.85rem; font-weight: 600; color: var(--text-muted); display: flex; align-items: center; gap: 6px;}
.label i,
.label svg { width: 14px; height: 14px; }

/* Custom Toggle */
.toggle-modern {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
.toggle-modern input { display: none; }
.toggle-track {
  width: 44px;
  height: 24px;
  background: rgba(255,255,255,0.1);
  border-radius: 999px;
  position: relative;
  transition: all 0.3s;
}
.toggle-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.toggle-modern input:checked + .toggle-track { background: var(--accent); }
.toggle-modern input:checked + .toggle-track::after { transform: translateX(20px); }

/* Playbook / Code */
.playbook,
.router-box,
.kpi-calc,
.one-liner-card {
  overflow: hidden;
}

.playbook-output {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.playbook-controls { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
@media (max-width: 1024px) { .playbook-controls { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .playbook-controls { grid-template-columns: 1fr; } }

.code-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border-color);
  background: rgba(0,0,0,0.3);
  border-radius: 12px 12px 0 0;
}
.code-title { font-family: ui-monospace, monospace; font-size: 0.9rem; color: var(--accent); display: flex; align-items: center; gap: 8px; }
.code-title i,
.code-title svg { width: 16px; height: 16px; }
.code {
  margin: 0;
  padding: 20px;
  background: rgba(0,0,0,0.5);
  border-radius: 0 0 12px 12px;
  font-family: ui-monospace, monospace;
  font-size: 0.9rem;
  color: #e2e8f0;
  overflow-x: auto;
  line-height: 1.5;
}

/* Pipeline */
.pipeline { display: flex; flex-direction: column; gap: 12px; }
.pipe {
  background: var(--glass-inner);
  border: 1px solid var(--border-color);
  padding: 16px;
  border-radius: 12px;
  position: relative;
}
.pipe-title { font-weight: 700; margin-bottom: 4px; }
.pipe-desc { font-size: 0.85rem; color: var(--text-muted); }
.pipe-tag { position: absolute; right: 16px; top: 16px; font-size: 0.75rem; background: var(--accent); color: #000; padding: 2px 8px; border-radius: 999px; font-weight: 700; }

/* SOAR Playbook Library */
.playbook-library {
  overflow: hidden;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.playbook-library-top {
  display: flex;
  gap: 16px;
  align-items: flex-end;
}
.playbook-search-field {
  flex: 1;
  margin-bottom: 0;
}
.playbook-toolbar-actions {
  display: flex;
  gap: 10px;
}
.playbook-layout {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 16px;
  min-height: 560px;
}
.playbook-list-pane {
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--glass-inner);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.playbook-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: auto;
  padding-right: 4px;
}
.pb-item {
  width: 100%;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.55);
  color: var(--text-main);
  padding: 12px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.pb-item:hover {
  transform: translateY(-1px);
  border-color: rgba(59, 130, 246, 0.5);
}
.pb-item.is-active {
  border-color: rgba(56, 189, 248, 0.85);
  background: rgba(8, 47, 73, 0.45);
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.35) inset;
}
.pb-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.pb-item-file {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--text-main);
}
.pb-item-desc {
  font-size: 0.83rem;
  color: var(--text-muted);
  line-height: 1.45;
}
.pb-item-meta {
  font-size: 0.75rem;
  color: #93c5fd;
}
.playbook-detail-pane {
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--glass-inner);
  padding: 16px;
  overflow: auto;
}
.pb-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.pb-detail-title {
  font-size: 1.15rem;
  font-weight: 800;
}
.pb-detail-file {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.pb-detail-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.pb-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
.pb-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.pb-chip {
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid var(--border-color);
  color: #bfdbfe;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.74rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.pb-task-list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--text-main);
  font-size: 0.9rem;
}
.pb-code {
  max-height: 420px;
}

@media (max-width: 1200px) {
  .playbook-layout {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .playbook-list {
    max-height: 320px;
  }
}

@media (max-width: 760px) {
  .playbook-library-top {
    flex-direction: column;
    align-items: stretch;
  }
  .pb-summary-grid {
    grid-template-columns: 1fr;
  }
  .pb-detail-head {
    flex-direction: column;
  }
  .pb-detail-actions {
    justify-content: flex-start;
  }
}

/* Lists & Utilities */
.list { padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.list li { color: var(--text-main); font-size: 0.95rem; }
hr { border: none; border-top: 1px solid var(--border-color); margin: 24px 0; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.mt-12 { margin-top: 48px; }
.mb-6 { margin-bottom: 24px; }
mark.search-hit { background: rgba(251, 191, 36, 0.4); color: white; border-radius: 4px; padding: 0 4px; }

/* Router Visual */
.router-controls { display: grid; grid-template-columns: 1fr 1fr auto; gap: 16px; align-items: flex-end; padding: 24px; border-bottom: 1px solid var(--border-color); }
.router-visual { padding: 32px; display: flex; flex-direction: column; gap: 24px; align-items: center; text-align: center; }
.route { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; font-family: ui-monospace, monospace; }
.route-step { background: var(--glass-inner); border: 1px solid var(--accent); color: var(--accent); padding: 8px 16px; border-radius: 8px; font-weight: 600; }
.route-arrow { color: var(--text-muted); font-weight: bold; }
.route-explain { padding: 16px; max-width: 600px; color: var(--text-muted); }

.kpi-form {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  align-items: end;
}

.kpi-result {
  min-height: 180px;
  padding: 20px;
}

.chart-box {
  min-height: 280px;
}

.pipeline-graphic {
  border-radius: 16px;
  overflow-x: auto;
  overflow-y: hidden;
}

@media (max-width: 1100px) {
  .router-controls {
    grid-template-columns: 1fr 1fr;
  }

  .router-controls .btn {
    width: 100%;
  }

  .kpi-form {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 700px) {
  .router-controls {
    grid-template-columns: 1fr;
  }

  .kpi-form {
    grid-template-columns: 1fr;
  }

  .attack-toolbar {
    padding: 14px 16px;
  }
}

/* Gallery */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.g-item { background: var(--glass-inner); border: 1px solid var(--border-color); border-radius: 16px; overflow: hidden; cursor: pointer; transition: all 0.3s; }
.g-item:hover { transform: translateY(-5px); border-color: var(--accent); }
.g-thumb { height: 180px; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.g-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.g-item:hover .g-thumb img { transform: scale(1.05); }
.g-meta { padding: 16px; }
.g-title { font-weight: 700; margin-bottom: 4px; }
.g-desc { font-size: 0.85rem; color: var(--text-muted); }

/* Quote */
.quote { font-size: 1.15rem; line-height: 1.8; font-style: italic; color: var(--text-main); padding-left: 20px; border-left: 4px solid var(--accent); }

.note {
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(52, 211, 153, 0.45);
  background: rgba(16, 185, 129, 0.1);
  color: #d1fae5;
}

.footer {
  margin-top: 36px;
}

.footer-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.one-liner-card {
  padding: 28px;
}

.report-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.report-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.report-copy {
  flex: 1;
  min-width: 260px;
}

.report-hint {
  margin: 14px 0 0;
}

.report-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.report-viewer-panel[hidden] {
  display: none !important;
}

.report-viewer-shell {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  background: rgba(2, 6, 23, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.report-viewer-frame {
  width: 100%;
  height: clamp(540px, 78vh, 1100px);
  height: clamp(540px, 78dvh, 1100px);
  border: 0;
  background: #0b1120;
}

.report-viewer-panel.is-fullscreen {
  background: #020617;
}

.report-viewer-panel.is-fullscreen .report-viewer-shell {
  height: 100vh;
  height: 100dvh;
  border-radius: 0;
  border: 0;
}

.report-viewer-panel.is-fullscreen .report-viewer-frame {
  height: 100vh;
  height: 100dvh;
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.3); }

/* Modal */
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.modal.is-open { opacity: 1; pointer-events: auto; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(8px); }
.modal-card { position: relative; width: 90%; max-width: 700px; max-height: 85vh; overflow-y: auto; z-index: 101; display: flex; flex-direction: column; }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid var(--border-color); }
.modal-title { font-size: 1.25rem; font-weight: 700; }
.modal-body { padding: 24px; }
.modal-body img { max-width: 100%; border-radius: 12px; margin-top: 16px; }

/* Filter row */
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-chip { display: inline-flex; cursor: pointer; }
.filter-chip input { display: none; }
.filter-chip span { padding: 6px 14px; border-radius: 999px; font-size: 0.85rem; font-weight: 600; background: var(--glass-inner); border: 1px solid var(--border-color); color: var(--text-muted); transition: all 0.2s; }
.filter-chip input:checked + span { background: rgba(56, 189, 248, 0.15); border-color: var(--accent); color: var(--accent); }

/* Proposal Slider */
.proposal-container {
  position: relative;
  width: 100%;
  height: 75vh;
  min-height: 600px;
  max-height: 900px;
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.proposal-slider {
  position: relative;
  flex: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 40px 60px;
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
  transform: translateX(50px);
  display: flex;
  flex-direction: column;
}

.slide-1, .slide-2, .slide-3, .slide-4, .slide-5, .slide-6, .slide-7, .slide-8, .slide-9,
.slide-10, .slide-11, .slide-12, .slide-13, .slide-14, .slide-15, .slide-16, .slide-17, .slide-18, .slide-19, .slide-20 {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.18), rgba(2, 6, 23, 0.05));
}

.slide-1 {
  background:
    radial-gradient(circle at 16% 12%, rgba(56, 189, 248, 0.16), transparent 42%),
    radial-gradient(circle at 84% 20%, rgba(192, 132, 252, 0.16), transparent 45%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.2), rgba(2, 6, 23, 0.08));
}

.slide-10, .slide-11, .slide-12, .slide-13, .slide-14 {
  background:
    radial-gradient(circle at 85% 12%, rgba(251, 113, 133, 0.15), transparent 40%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.2), rgba(2, 6, 23, 0.08));
}

.slide-15, .slide-16, .slide-17, .slide-18 {
  background:
    radial-gradient(circle at 15% 15%, rgba(56, 189, 248, 0.12), transparent 35%),
    radial-gradient(circle at 82% 22%, rgba(52, 211, 153, 0.12), transparent 38%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.2), rgba(2, 6, 23, 0.08));
}

@media (max-width: 768px) {
  .slide { padding: 24px 20px; }
  .proposal-controls { padding: 12px 16px; }
}

.slide.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.slide.is-prev {
  transform: translateX(-50px);
}

.slide-header {
  margin-bottom: 30px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 16px;
}

.slide-content {
  flex: 1;
}

.proposal-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: rgba(0, 0, 0, 0.2);
  border-top: 1px solid var(--border-color);
}

.slide-indicator {
  min-width: 80px;
  text-align: center;
}

@media (max-width: 1200px) {
  .proposal-container {
    min-height: 660px;
    height: 78vh;
  }

  .slide {
    padding: 30px 28px;
  }

  .slide-content .w-1\/3,
  .slide-content .w-1\/4 {
    width: 100%;
  }

  .slide-content .flex {
    flex-wrap: wrap;
  }

  .pipeline-graphic {
    align-items: stretch;
  }

  .atk-line {
    display: none;
  }

}

.slide-progress-bar {
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,0.1);
}

.slide-progress-fill {
  height: 100%;
  background: var(--accent);
  width: 10%;
  transition: width 0.3s ease;
}

/* Helpers for Proposal */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.gap-4 { gap: 16px; }
.gap-2 { gap: 8px; }
.gap-6 { gap: 24px; }
.gap-8 { gap: 32px; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.w-1\/3 { width: 33.333%; }
.w-1\/4 { width: 25%; }
.w-8 { width: 32px; }
.h-8 { height: 32px; }
.w-10 { width: 40px; }
.h-10 { height: 40px; }
.w-12 { width: 48px; }
.h-12 { height: 48px; }
.w-16 { width: 64px; }
.h-16 { height: 64px; }
.h-1 { height: 4px; }
.h-2 { height: 8px; }
.h-4 { height: 16px; }
.w-\[calc\(100\%-4rem\)\] { width: calc(100% - 4rem); }
.p-4 { padding: 16px; }
.p-6 { padding: 24px; }
.p-2 { padding: 8px; }
.p-3 { padding: 12px; }
.p-8 { padding: 32px; }
.px-2 { padding-left: 8px; padding-right: 8px; }
.px-8 { padding-left: 32px; padding-right: 32px; }
.py-1 { padding-top: 4px; padding-bottom: 4px; }
.pl-4 { padding-left: 16px; }
.pl-8 { padding-left: 32px; }
.pl-12 { padding-left: 48px; }
.pl-16 { padding-left: 64px; }
.pl-20 { padding-left: 80px; }
.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }
.mb-8 { margin-bottom: 32px; }
.mt-2 { margin-top: 8px; }
.mt-8 { margin-top: 32px; }
.mt-16 { margin-top: 64px; }
.ml-4 { margin-left: 16px; }
.mx-auto { margin-left: auto; margin-right: auto; }
.text-center { text-align: center; }
.font-bold { font-weight: 700; }
.font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-xs { font-size: 0.75rem; }
.rounded-2xl { border-radius: 1rem; }
.rounded-full { border-radius: 9999px; }
.rounded { border-radius: 0.25rem; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }
.bg-gray-800 { background-color: rgba(30, 41, 59, 0.8); }
.bg-gray-600 { background-color: rgba(71, 85, 105, 0.9); }
.bg-gray-700 { background-color: rgba(51, 65, 85, 0.9); }
.bg-gray-900 { background-color: rgba(15, 23, 42, 0.92); }
.bg-black { background-color: rgba(2, 6, 23, 0.95); }

.bg-danger { background-color: #fb7185; }
.bg-ok { background-color: #34d399; }
.bg-purple { background-color: #c084fc; }
.bg-blue { background-color: #60a5fa; }
.bg-gray { background-color: #94a3b8; }
.bg-accent { background-color: #38bdf8; }

.bg-purple-dark { background-color: rgba(168, 85, 247, 0.2); }
.bg-danger-dark { background-color: rgba(239, 68, 68, 0.2); }
.bg-ok-dark { background-color: rgba(16, 185, 129, 0.2); }
.bg-blue-dark { background-color: rgba(59, 130, 246, 0.2); }
.bg-accent-dark { background-color: rgba(56, 189, 248, 0.1); }

.border-purple { border-color: #c084fc; border-width: 1px; border-style: solid; }
.border-danger { border-color: #fb7185; border-width: 1px; border-style: solid; }
.border-ok { border-color: #34d399; border-width: 1px; border-style: solid; }
.border-blue { border-color: #60a5fa; border-width: 1px; border-style: solid; }
.border-accent { border-color: #38bdf8; border-width: 1px; border-style: solid; }
.border { border-width: 1px; border-style: solid; border-color: var(--border-color); }
.border-2 { border-width: 2px; border-style: solid; }
.border-gray-600 { border-color: rgba(71, 85, 105, 0.9); }

.border-l-4 { border-left-width: 4px; }
.border-t-2 { border-top-width: 2px; border-top-style: solid; }
.border-t-4 { border-top-width: 4px; border-top-style: solid; }

.relative { position: relative; }
.absolute { position: absolute; }
.top-0 { top: 0; }
.left-0 { left: 0; }
.top-1\/2 { top: 50%; }
.left-1\/2 { left: 50%; }
.-top-4 { top: -16px; }
.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.-z-10 { z-index: -10; }
.transform { transform: translate(var(--tw-translate-x, 0), var(--tw-translate-y, 0)); }
.-translate-x-1\/2 { --tw-translate-x: -50%; }
.-translate-y-1\/2 { --tw-translate-y: -50%; }

.overflow-x-auto { overflow-x: auto; }
.overflow-hidden { overflow: hidden; }

.items-stretch { align-items: stretch; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.order-1 { order: 1; }
.order-2 { order: 2; }

.text-white { color: #fff; }
.text-black { color: #020617; }
.text-gray-300 { color: #cbd5e1; }
.text-muted { color: var(--text-muted); }
.underline { text-decoration: underline; }
.line-through { text-decoration: line-through; }

.shadow-\[0_0_15px_\#fb7185\] { box-shadow: 0 0 15px #fb7185; }
.shadow-\[0_0_10px_var\(--accent\)\] { box-shadow: 0 0 10px var(--accent); }
.shadow-\[0_0_10px_var\(--ok\)\] { box-shadow: 0 0 10px var(--ok); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (min-width: 1024px) {
  .lg\:order-1 { order: 1; }
  .lg\:order-2 { order: 2; }
}

/* Custom graphics */
.flex-center-col { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.vision-circle { width: 120px; height: 120px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(168, 85, 247, 0.1); border: 2px solid #c084fc; }
.pulse-purple {
  animation: pulsePurple 2.2s ease-in-out infinite;
}
@keyframes pulsePurple {
  0%, 100% { box-shadow: 0 0 0 0 rgba(192, 132, 252, 0.35); }
  50% { box-shadow: 0 0 0 14px rgba(192, 132, 252, 0); }
}
.layer-stack { display: flex; flex-direction: column; gap: 12px; transform: perspective(1000px) rotateX(20deg); padding: 20px; }
.l-item { padding: 24px; border-radius: 16px; font-weight: 700; display: flex; align-items: center; gap: 16px; font-size: 1.2rem; transition: transform 0.3s; }
.l-item:hover { transform: translateY(-5px); }
.p-node { padding: 16px 24px; border-radius: 12px; font-weight: bold; color: var(--text-main); display: flex; align-items: center; gap: 8px; }
.p-node.text-purple { color: #c084fc; }
.p-node.text-blue { color: #60a5fa; }
.p-node.text-accent { color: #38bdf8; }
.p-node.text-ok { color: #34d399; }
.p-node.text-danger { color: #f87171; }
.p-pulse { animation: pulseHub 2s infinite; }
@keyframes pulseHub { 0% { box-shadow: 0 0 0 0 rgba(56,189,248,0.5); } 70% { box-shadow: 0 0 0 15px rgba(56,189,248,0); } 100% { box-shadow: 0 0 0 0 rgba(56,189,248,0); } }

.atk-step { width: 22%; position: relative; }
.atk-num-circle { width: 32px; height: 32px; background: #fb7185; color: #000; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.1rem; }
.atk-line {
  border-radius: 999px;
  opacity: 0.9;
  pointer-events: none;
}

.flow-step-badge {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(148, 163, 184, 0.45);
  background: rgba(15, 23, 42, 0.8);
  box-shadow: 0 0 0 4px rgba(2, 6, 23, 0.35);
}

.flow-step-badge.step-host { border-color: rgba(148, 163, 184, 0.55); }
.flow-step-badge.step-sensor { border-color: rgba(192, 132, 252, 0.7); background: rgba(88, 28, 135, 0.35); }
.flow-step-badge.step-c2 { border-color: rgba(56, 189, 248, 0.75); background: rgba(8, 47, 73, 0.42); }
.flow-step-badge.step-logstash { border-color: rgba(125, 211, 252, 0.72); background: rgba(7, 89, 133, 0.38); }
.flow-step-badge.step-target { border-color: rgba(96, 165, 250, 0.72); background: rgba(30, 58, 138, 0.36); }

.flow-step-order {
  font-size: 0.72rem;
  color: #cbd5e1;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.roadmap-track {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr) 48px minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}

.roadmap-card {
  position: relative;
}

.roadmap-connector {
  display: flex;
  align-items: center;
  justify-content: center;
}

.roadmap-connector .ui-icon {
  width: 28px;
  height: 28px;
  opacity: 0.9;
}

@media (max-width: 1200px) {
  .roadmap-track {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .roadmap-connector {
    min-height: 22px;
  }

  .roadmap-connector .ui-icon {
    transform: rotate(90deg);
  }
}

.bar { display: flex; align-items: flex-end; justify-content: center; border-radius: 4px 4px 0 0; position: relative; }
.bar-label { position: absolute; bottom: -24px; font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; }

/* End-to-End Flow Map */
.e2e-flow-container {
  width: 100%;
  border-radius: 20px;
  overflow: auto;
}
.e2e-flow-map {
  position: relative;
  width: 1080px;
  min-width: 1080px;
  height: 560px;
  margin: 0 auto;
}
.f-node {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 10;
  width: 136px;
}
.flaticon {
  width: 68px;
  height: 68px;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5));
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.f-node:hover .flaticon { transform: scale(1.15) translateY(-5px); filter: drop-shadow(0 10px 15px rgba(56, 189, 248, 0.4)); }
.f-label {
  font-weight: 700;
  font-size: 0.8rem;
  line-height: 1.3;
  text-align: center;
  background: rgba(15,23,42,0.8);
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  backdrop-filter: blur(4px);
  max-width: 132px;
  word-break: keep-all;
}

/* Node Positioning */
.f-endpoint { top: 70px; left: 40px; }
.f-sensor { top: 250px; left: 40px; }
.f-agent { top: 250px; left: 280px; }
.f-zbx { top: 430px; left: 280px; }
.f-c2 { top: 250px; left: 520px; }
.f-soc-node { top: 90px; left: 800px; }
.f-ems-node { top: 330px; left: 800px; }
.f-team { top: 250px; left: 940px; }

/* Connecting Lines */
.f-path {
  position: absolute;
  background: rgba(255,255,255,0.1);
  z-index: 4;
  opacity: 0.9;
}
.path-host-sensor { top: 150px; left: 108px; width: 3px; height: 138px; border-left: 3px dashed rgba(192,132,252,0.32); background: transparent; }
.path-sensor-agent { top: 284px; left: 176px; width: 170px; height: 3px; border-top: 3px dashed rgba(192,132,252,0.32); background: transparent; }
.path-agent-c2 { top: 284px; left: 416px; width: 240px; height: 3px; border-top: 3px dashed rgba(192,132,252,0.32); background: transparent; }
.path-c2-soc-up { top: 170px; left: 588px; width: 3px; height: 114px; border-left: 3px dashed rgba(192,132,252,0.32); background: transparent; }
.path-c2-soc-right { top: 170px; left: 588px; width: 280px; height: 3px; border-top: 3px dashed rgba(192,132,252,0.32); background: transparent; }

.path-host-zbx-down { top: 150px; left: 108px; width: 3px; height: 296px; border-left: 3px dashed rgba(96,165,250,0.32); background: transparent; }
.path-host-zbx-right { top: 446px; left: 108px; width: 240px; height: 3px; border-top: 3px dashed rgba(96,165,250,0.32); background: transparent; }
.path-zbx-c2 { top: 464px; left: 416px; width: 240px; height: 3px; border-top: 3px dashed rgba(96,165,250,0.32); background: transparent; }
.path-c2-ems-down { top: 284px; left: 588px; width: 3px; height: 180px; border-left: 3px dashed rgba(96,165,250,0.32); background: transparent; }
.path-c2-ems-right { top: 464px; left: 588px; width: 280px; height: 3px; border-top: 3px dashed rgba(96,165,250,0.32); background: transparent; }

.path-soc-team { top: 124px; left: 868px; width: 180px; height: 3px; }
.path-ems-team { top: 364px; left: 868px; width: 180px; height: 3px; }

/* Animated Packets */
.pkt {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  top: -4px;
}
.pkt-red { background: #ef4444; box-shadow: 0 0 15px #ef4444; }
.pkt-purple { background: #c084fc; box-shadow: 0 0 15px #c084fc; }
.pkt-blue { background: #60a5fa; box-shadow: 0 0 15px #60a5fa; }
.pkt-ok { background: #10b981; box-shadow: 0 0 15px #10b981; }

@keyframes moveRight { 0% { left: 0; opacity: 0;} 10% {opacity:1;} 90%{opacity:1;} 100% { left: 100%; opacity: 0;} }
@keyframes moveDown { 0% { top: 0; opacity: 0;} 10% {opacity:1;} 90%{opacity:1;} 100% { top: 100%; opacity: 0;} }
@keyframes moveLeft { 0% { left: 100%; opacity: 0;} 10% {opacity:1;} 90%{opacity:1;} 100% { left: 0; opacity: 0;} }
@keyframes moveUp { 0% { top: 100%; opacity: 0;} 10% {opacity:1;} 90%{opacity:1;} 100% { top: 0; opacity: 0;} }

.path-host-sensor .pkt { animation: moveDown 1.6s infinite linear; left: -5px; }
.path-sensor-agent .pkt { animation: moveRight 1.8s infinite linear; }
.path-agent-c2 .pkt { animation: moveRight 2s infinite linear; animation-delay: 0.35s; }
.path-c2-soc-up .pkt { animation: moveUp 1.5s infinite linear; left: -5px; animation-delay: 0.8s; }
.path-c2-soc-right .pkt { animation: moveRight 1.8s infinite linear; animation-delay: 1.1s; }

.path-host-zbx-down .pkt { animation: moveDown 2.1s infinite linear; left: -5px; animation-delay: 0.4s; }
.path-host-zbx-right .pkt { animation: moveRight 1.8s infinite linear; animation-delay: 0.9s; }
.path-zbx-c2 .pkt { animation: moveRight 1.7s infinite linear; animation-delay: 1.3s; }
.path-c2-ems-down .pkt { animation: moveDown 1.7s infinite linear; left: -5px; animation-delay: 1.7s; }
.path-c2-ems-right .pkt { animation: moveRight 1.8s infinite linear; animation-delay: 2.1s; }

.path-soc-team .pkt { animation: moveRight 1.6s infinite linear; animation-delay: 2.5s; }
.path-ems-team .pkt { animation: moveRight 1.6s infinite linear; animation-delay: 2.9s; }

@media (max-width: 1200px) {
  .e2e-flow-map {
    margin: 0;
  }
}

/* SVG-based Final Flow Diagram */
.e2e-flow-container {
  overflow: auto;
}

.e2e-flow-diagram {
  min-width: 1320px;
}

.e2e-svg {
  display: block;
  width: 1320px;
  height: auto;
  margin: 0 auto;
  text-rendering: geometricPrecision;
}

.e2e-link {
  fill: none;
  stroke-width: 3.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.98;
  vector-effect: non-scaling-stroke;
}

.link-sec {
  stroke: rgba(192, 132, 252, 0.95);
  filter: drop-shadow(0 0 6px rgba(192, 132, 252, 0.45));
}

.link-ops {
  stroke: rgba(96, 165, 250, 0.95);
  filter: drop-shadow(0 0 6px rgba(96, 165, 250, 0.45));
}

.link-core {
  stroke: rgba(56, 189, 248, 0.95);
  filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.4));
}

.flow-ports circle {
  stroke: rgba(2, 6, 23, 0.82);
  stroke-width: 2.2;
}

.port-sec {
  fill: #c084fc;
}

.port-ops {
  fill: #60a5fa;
}

.port-core {
  fill: #38bdf8;
}

.flow-caption {
  font-family: 'Pretendard', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-anchor: middle;
}

.cap-sec {
  fill: #c084fc;
}

.cap-ops {
  fill: #60a5fa;
}

.e2e-card rect {
  fill: rgba(15, 23, 42, 0.78);
  stroke: rgba(148, 163, 184, 0.36);
  stroke-width: 2.2;
  filter: drop-shadow(0 8px 18px rgba(2, 6, 23, 0.5));
}

.card-soc rect {
  stroke: rgba(192, 132, 252, 0.9);
  fill: rgba(76, 29, 149, 0.24);
}

.card-ems rect {
  stroke: rgba(96, 165, 250, 0.9);
  fill: rgba(30, 64, 175, 0.24);
}

.card-c2 rect {
  stroke: rgba(56, 189, 248, 0.95);
  fill: rgba(8, 47, 73, 0.34);
}

.card-logstash rect {
  stroke: rgba(56, 189, 248, 0.88);
  fill: rgba(14, 116, 144, 0.24);
}

.card-agent-sec rect,
.card-sensor rect {
  stroke: rgba(192, 132, 252, 0.68);
}

.card-agent-ops rect,
.card-metric rect {
  stroke: rgba(96, 165, 250, 0.68);
}

.card-hosts rect {
  stroke: rgba(148, 163, 184, 0.5);
  fill: rgba(15, 23, 42, 0.6);
}

.e2e-card text {
  paint-order: stroke;
  stroke: rgba(2, 6, 23, 0.4);
  stroke-width: 0.8px;
  stroke-linejoin: round;
}

.e2e-card .title {
  fill: #f8fafc;
  font-family: 'Pretendard', system-ui, -apple-system, sans-serif;
  font-size: 20px;
  font-weight: 740;
  letter-spacing: -0.01em;
}

.e2e-card .title-tight {
  font-size: 18px;
  font-weight: 720;
}

.e2e-card .sub {
  fill: #cbd5e1;
  font-family: 'Pretendard', system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 620;
}

.host-chip rect {
  fill: rgba(30, 41, 59, 0.82);
  stroke: rgba(148, 163, 184, 0.5);
  stroke-width: 1.6;
  filter: drop-shadow(0 4px 8px rgba(2, 6, 23, 0.42));
}

.host-chip text {
  fill: #e2e8f0;
  font-family: 'Pretendard', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: middle;
}

/* Colorful UI Icons */
img.ui-icon,
svg.ui-icon {
  display: inline-block;
  vertical-align: middle;
  width: 1.2em;
  height: 1.2em;
  flex: none;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

img.ui-icon.w-8,
svg.ui-icon.w-8 { width: 32px; height: 32px; }
img.ui-icon.w-10,
svg.ui-icon.w-10 { width: 40px; height: 40px; }
img.ui-icon.w-12,
svg.ui-icon.w-12 { width: 48px; height: 48px; }
img.ui-icon.w-16,
svg.ui-icon.w-16 { width: 64px; height: 64px; }

/* ===========================
   Responsive Enhancements
=========================== */

img,
video,
canvas {
  max-width: 100%;
  height: auto;
}

.h1 { font-size: clamp(2.05rem, 3.4vw, 3rem); }
.h2 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
.lead { font-size: clamp(1rem, 1.3vw, 1.15rem); }

.app-shell { padding: clamp(12px, 2.4vw, 24px); }
.hero {
  padding: clamp(20px, 3vw, 40px);
  gap: clamp(18px, 3vw, 40px);
}
.section-head { margin-bottom: clamp(16px, 2.6vw, 24px); }

/* Prevent annoying horizontal scroll due to long content */
.main,
.section,
.card,
.glass-panel,
.glass-panel-inner,
.hero-left,
.hero-right {
  min-width: 0;
}

@media (max-width: 1320px) {
  .layout { gap: 24px; }
  .sidebar { padding: 20px; gap: 26px; }
}

@media (max-width: 900px) {
  .app-shell { padding: 14px; }
  .topbar { padding: 14px 16px; }
  .hero { padding: 24px 20px; }
  .main { gap: 32px; }
  .layout { gap: 20px; margin-top: 16px; }
  html.is-embedded .layout { gap: 20px; }

  /* Split views stack on small screens: swap divider direction */
  .arch-canvas,
  .timeline {
    border-right: none;
    border-bottom: 1px solid var(--border-color);
  }

  .timeline {
    max-height: none;
    overflow-y: visible;
  }
}

@media (max-width: 640px) {
  .topbar { padding: 12px 14px; }
  .brand { gap: 12px; }
  .brand-mark { width: 38px; height: 38px; border-radius: 12px; }
  .brand-title { font-size: 1.05rem; }
  .brand-subtitle { font-size: 0.78rem; }

  .tab { min-height: 40px; padding: 10px 12px; font-size: 0.95rem; }
  .card { padding: 18px; }
  .stat-card { padding: 18px; }

  .btn { min-height: 40px; padding: 9px 16px; }
  .btn-circle { width: 38px; height: 38px; }

  .searchbox { padding: 7px 12px; }
  .searchbox input { font-size: 0.92rem; }

  .proposal-container { min-height: 520px; height: 72vh; }
}

@media (max-width: 480px) {
  .app-shell { padding: 10px; }
  .lead { margin-bottom: 22px; }
  .chip-row { margin-bottom: 22px; }

  .proposal-container { min-height: 480px; height: 70vh; }
  .slide { padding: 20px 16px; }

  .gns-workspace { min-height: 380px; }
  .gns-console-out { height: 120px; }
  .gns-hud { right: 10px; bottom: 10px; }
}

/* Team Embed Tabs */
.team-embed {
  padding: 20px;
  border-radius: 24px;
}

.team-embed-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.team-embed-url {
  flex: 1;
  min-width: 280px;
  margin-bottom: 0;
}

.team-embed-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.team-embed-body {
  margin-top: 16px;
  height: clamp(420px, 72vh, 760px);
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(2, 6, 23, 0.4);
}

.team-embed-placeholder {
  height: 100%;
  padding: 28px;
  text-align: center;
}

.team-embed-frame {
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(2, 6, 23, 0.85);
}

/* Direct Tab Sites (Server/Network) */
.page.page-direct {
  padding: 0;
}

.tab-site-frame {
  width: 100%;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 24px;
  background: rgba(2, 6, 23, 0.85);
  height: clamp(520px, 78vh, 1100px);
  height: clamp(520px, 78dvh, 1100px);
}

html.is-embedded .tab-site-frame {
  height: calc(100vh - 170px);
  height: calc(100dvh - 170px);
}

@media (max-width: 640px) {
  .team-embed { padding: 16px; }
  .team-embed-body { height: clamp(360px, 66vh, 640px); }
  .tab-site-frame {
    border-radius: 18px;
    height: calc(100vh - 190px);
    height: calc(100dvh - 190px);
  }

  .report-actions {
    width: 100%;
  }

  .report-actions .btn {
    flex: 1 1 160px;
    justify-content: center;
  }

  .report-viewer-frame {
    height: calc(100vh - 260px);
    height: calc(100dvh - 260px);
    min-height: 420px;
  }
}

/* Mobile Nav Drawer (enabled when JS sets html.has-nav-drawer) */
.nav-toggle { display: none; }

.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.66);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 200;
}

@media (max-width: 1024px) {
  html.has-nav-drawer .nav-toggle { display: inline-flex; }
  html.has-nav-drawer body.nav-open { overflow: hidden; }

  html.has-nav-drawer .sidebar {
    position: fixed;
    left: 12px;
    top: 12px;
    bottom: 12px;
    width: min(360px, calc(100vw - 24px));
    padding: 18px;
    gap: 24px;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    overflow: auto;
    transform: translateX(calc(-100% - 24px));
    opacity: 0;
    pointer-events: none;
    transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.24s ease;
    z-index: 260;
  }

  html.has-nav-drawer body.nav-open .sidebar {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }

  html.has-nav-drawer body.nav-open .nav-backdrop {
    opacity: 1;
    pointer-events: auto;
  }
}

/* Theme Toggle (Topbar) */
.theme-toggle-btn {
  background: var(--glass-inner);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  min-height: 40px;
  padding: 9px 14px;
}

.theme-toggle-btn:hover {
  background: var(--glass-bg);
}

.theme-toggle-indicator {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.12);
}

.theme-toggle-label {
  font-size: 0.9rem;
  letter-spacing: -0.01em;
}

/* Light Theme (enabled via <html data-theme="light">) */
html[data-theme="light"] {
  color-scheme: light;

  --bg-color: #f8fafc;
  --text-main: #0f172a;
  --text-muted: #475569;
  --accent-glow: rgba(56, 189, 248, 0.22);
  --border-color: rgba(15, 23, 42, 0.14);

  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-inner: rgba(2, 6, 23, 0.04);
  --glass-border: rgba(15, 23, 42, 0.14);
}

html[data-theme="light"] .bg-fx {
  background: radial-gradient(circle at 50% 0%, #ffffff 0%, #f1f5f9 70%, #e2e8f0 100%);
}

html[data-theme="light"] .bg-orb {
  opacity: 0.22;
}

html[data-theme="light"] .glass-panel {
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.18);
}

html[data-theme="light"] .searchbox {
  background: rgba(255, 255, 255, 0.55);
}

html[data-theme="light"] .searchbox input {
  color: var(--text-main);
}

html[data-theme="light"] .glass-input {
  background: rgba(255, 255, 255, 0.6);
  border-color: rgba(15, 23, 42, 0.14);
}

html[data-theme="light"] .team-card:hover {
  border-color: rgba(15, 23, 42, 0.18);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
}

html[data-theme="light"] .layer-visual-area {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(15, 23, 42, 0.12);
}

html[data-theme="light"] .cy-overlay {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(15, 23, 42, 0.14);
}

html[data-theme="light"] .modern-select,
html[data-theme="light"] .modern-input {
  color: var(--text-main);
}

html[data-theme="light"] .modern-select option {
  background: #ffffff;
  color: #0f172a;
}

html[data-theme="light"] mark.search-hit {
  color: #0f172a;
}

html[data-theme="light"] .team-embed-body {
  border-color: rgba(15, 23, 42, 0.14);
  background: rgba(255, 255, 255, 0.66);
}

html[data-theme="light"] .team-embed-frame {
  background: rgba(255, 255, 255, 0.92);
}

html[data-theme="light"] .report-viewer-shell {
  background: rgba(241, 245, 249, 0.95);
  border-color: rgba(148, 163, 184, 0.35);
}

html[data-theme="light"] .report-viewer-frame {
  background: #e2e8f0;
}

html[data-theme="light"] .code-head {
  background: rgba(255, 255, 255, 0.7);
}

html[data-theme="light"] .code {
  background: rgba(255, 255, 255, 0.78);
  color: #0f172a;
}

html[data-theme="light"] .pb-item {
  background: rgba(255, 255, 255, 0.74);
}

html[data-theme="light"] .pb-item.is-active {
  background: rgba(56, 189, 248, 0.12);
}

html[data-theme="light"] .pb-item-meta,
html[data-theme="light"] .gns-console-prompt,
html[data-theme="light"] .gns-if-table th {
  color: #2563eb;
}

html[data-theme="light"] .pb-chip {
  background: rgba(37, 99, 235, 0.1);
  border-color: rgba(37, 99, 235, 0.22);
  color: #1d4ed8;
}

html[data-theme="light"] .g-thumb {
  background: rgba(15, 23, 42, 0.06);
}

html[data-theme="light"] .proposal-controls {
  background: rgba(255, 255, 255, 0.7);
}

html[data-theme="light"] .slide-progress-bar {
  background: rgba(15, 23, 42, 0.14);
}

html[data-theme="light"] .slide {
  background:
    radial-gradient(circle at 16% 12%, rgba(56, 189, 248, 0.12), transparent 42%),
    radial-gradient(circle at 84% 20%, rgba(192, 132, 252, 0.1), transparent 45%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(248, 250, 252, 0.72));
}

html[data-theme="light"] .bg-gray-800,
html[data-theme="light"] .bg-gray-700,
html[data-theme="light"] .bg-gray-600,
html[data-theme="light"] .bg-gray-900,
html[data-theme="light"] .bg-black {
  background-color: rgba(255, 255, 255, 0.7);
}

html[data-theme="light"] .border-gray-600 {
  border-color: rgba(148, 163, 184, 0.6);
}

html[data-theme="light"] .text-gray-300 {
  color: rgba(51, 65, 85, 0.92);
}

html[data-theme="light"] .note {
  color: rgba(6, 95, 70, 0.92);
}

html[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.18);
}

html[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(15, 23, 42, 0.28);
}

html[data-theme="light"] .toggle-track {
  background: rgba(15, 23, 42, 0.14);
}

html[data-theme="light"] .toggle-track::after {
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.12);
}

html[data-theme="light"] .gns-device-item {
  border-color: rgba(15, 23, 42, 0.14);
  background: rgba(255, 255, 255, 0.76);
}

html[data-theme="light"] .gns-device-item.is-active {
  background: rgba(56, 189, 248, 0.12);
}

html[data-theme="light"] .gns-workspace {
  border-color: rgba(15, 23, 42, 0.14);
  background: rgba(255, 255, 255, 0.78);
}

html[data-theme="light"] .gns-workspace.map-off {
  background:
    radial-gradient(circle at 12% 18%, rgba(14, 165, 233, 0.14), transparent 46%),
    radial-gradient(circle at 84% 80%, rgba(99, 102, 241, 0.1), transparent 44%),
    linear-gradient(180deg, rgba(248, 250, 252, 0.9), rgba(241, 245, 249, 0.82));
}

html[data-theme="light"] .gns-node-ring {
  fill: rgba(255, 255, 255, 0.92);
}

html[data-theme="light"] .gns-node-label {
  fill: rgba(15, 23, 42, 0.9);
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.9);
}

html[data-theme="light"] .gns-hud-item {
  border-color: rgba(15, 23, 42, 0.14);
  background: rgba(255, 255, 255, 0.78);
  color: rgba(15, 23, 42, 0.86);
}

html[data-theme="light"] .gns-console {
  background: rgba(255, 255, 255, 0.74);
}

html[data-theme="light"] .e2e-card rect {
  fill: rgba(255, 255, 255, 0.82);
  stroke: rgba(15, 23, 42, 0.14);
  filter: drop-shadow(0 8px 18px rgba(15, 23, 42, 0.12));
}

html[data-theme="light"] .card-soc rect {
  stroke: rgba(192, 132, 252, 0.55);
  fill: rgba(192, 132, 252, 0.12);
}

html[data-theme="light"] .card-ems rect {
  stroke: rgba(96, 165, 250, 0.55);
  fill: rgba(96, 165, 250, 0.12);
}

html[data-theme="light"] .card-c2 rect,
html[data-theme="light"] .card-logstash rect {
  stroke: rgba(56, 189, 248, 0.58);
  fill: rgba(56, 189, 248, 0.12);
}

html[data-theme="light"] .card-agent-sec rect,
html[data-theme="light"] .card-sensor rect {
  stroke: rgba(192, 132, 252, 0.55);
  fill: rgba(192, 132, 252, 0.1);
}

html[data-theme="light"] .card-agent-ops rect,
html[data-theme="light"] .card-metric rect {
  stroke: rgba(96, 165, 250, 0.55);
  fill: rgba(96, 165, 250, 0.1);
}

html[data-theme="light"] .card-hosts rect {
  stroke: rgba(15, 23, 42, 0.22);
  fill: rgba(255, 255, 255, 0.9);
}

html[data-theme="light"] .e2e-card text {
  stroke: transparent;
}

html[data-theme="light"] .e2e-card .title {
  fill: #0f172a;
}

html[data-theme="light"] .e2e-card .sub {
  fill: rgba(51, 65, 85, 0.92);
}

html[data-theme="light"] .host-chip rect {
  fill: rgba(255, 255, 255, 0.86);
  stroke: rgba(15, 23, 42, 0.14);
  filter: drop-shadow(0 4px 10px rgba(15, 23, 42, 0.12));
}

html[data-theme="light"] .host-chip text {
  fill: rgba(15, 23, 42, 0.92);
}

html[data-theme="light"] .flow-ports circle {
  stroke: rgba(15, 23, 42, 0.42);
}

html[data-theme="light"] .gray {
  background: rgba(15, 23, 42, 0.06);
  border-color: rgba(15, 23, 42, 0.14);
  color: rgba(15, 23, 42, 0.72);
}

html[data-theme="light"] .pill-gray {
  border-color: rgba(15, 23, 42, 0.2);
  color: rgba(15, 23, 42, 0.72);
}