/* τensorprox MVP Dashboard + Auth Styles */
:root {
  /* Core Colors - Dark Mode (Default) */
  --bg: #000000;
  --panel: #0a0a0a;
  --card: #0a0a0a;
  --shugo-panel: #121212;
  --card-hover: rgba(255, 255, 255, 0.04);

  --text: #e6edf3;
  --text-secondary: #c9d1d9;
  --muted: #9aa3ad;
  --border: rgba(255, 255, 255, 0.06);
  --border-hover: rgba(255, 255, 255, 0.12);
  --border-light: rgba(255, 255, 255, 0.03);

  --header-bg: rgba(8, 10, 14, 0.75);
  --surface: rgba(8, 10, 14, 0.75);
  --surface-elevated: rgba(8, 10, 14, 0.75);

  --input-bg: rgba(0, 0, 0, 0.3);
  --autofill-bg: #121212;
  --input-border: rgba(255, 255, 255, 0.1);
  --input-focus-bg: rgba(59, 130, 246, 0.05);
  --placeholder: rgba(230, 237, 243, 0.5);
  --inner-bg: rgba(0, 0, 0, 0.2);

  --accent: #3b82f6;
  --accent-hover: #2563eb;
  --accent-glow: rgba(59, 130, 246, 0.4);
  --accent-glow-strong: rgba(59, 130, 246, 0.6);
  --green: #22c55e;
  --success: #22c55e;
  --green-glow: rgba(34, 197, 94, 0.3);
  --yellow: #fbbf24;
  --yellow-glow: rgba(251, 191, 36, 0.3);
  --red: #ef4444;
  --red-glow: rgba(239, 68, 68, 0.3);

  /* Shadow System - Professional & Subtle */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.2), 0 0 1px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.25), 0 0 2px rgba(0, 0, 0, 0.2);
  --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 4px rgba(0, 0, 0, 0.25);
  --shadow-glow: 0 0 12px var(--accent-glow);
  --shadow-glow-strong: 0 0 20px var(--accent-glow-strong);

  /* Neon Chart Colors */
  --neon-blue: #3a8bfd;
  --neon-green: #00ff9d;
  --neon-yellow: #ffeb3b;
  --neon-cyan: #00e5ff;
  --neon-red: #e74c3c;

  /* Chart Colors */
  --chart-blue-primary: #3a8bfd;
  --chart-blue-secondary: #60a5fa;
  --chart-blue-tertiary: #2563eb;

  /* Fonts */
  --font-body: 'Inter', sans-serif;
  --font-heading: 'Michroma', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Responsive Typography Scale - Enhanced */
  --fs-xs: 11px;
  --fs-sm: 13px;
  --fs-base: 14px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 24px;
  --fs-xxl: 32px;

  /* Spacing System - Enhanced */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* Border Radius - Enhanced */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;

  /* Transitions - Enhanced */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Mobile Typography Adjustments */
@media (max-width: 768px) {
  :root {
    --fs-xs: 10px;
    --fs-sm: 12px;
    --fs-base: 13px;
    --fs-md: 15px;
    --fs-lg: 17px;
    --fs-xl: 20px;
    --fs-xxl: 24px;
  }
}

/* Large Screen Typography Adjustments (Command Center) */
@media (min-width: 1600px) {
  :root {
    --fs-xs: 13px;
    --fs-sm: 15px;
    --fs-base: 16px;
    --fs-md: 18px;
    --fs-lg: 22px;
    --fs-xl: 32px;
    --fs-xxl: 48px;
  }
}

[data-theme="light"] {
  /* Core Backgrounds - Clean & Professional */
  --bg: #f1f5f9;
  --panel: #ffffff;
  --card: #ffffff;
  --shugo-panel: #f8fafc;
  --card-hover: rgba(37, 99, 235, 0.04);

  /* Text Colors - Enhanced Contrast for Readability */
  --text: #1e293b;
  --text-secondary: #334155;
  --muted: #64748b;
  --border: #e2e8f0;
  --border-hover: #cbd5e1;
  --border-light: rgba(0, 0, 0, 0.06);

  /* Surfaces - Subtle depth hierarchy */
  --header-bg: rgba(255, 255, 255, 0.92);
  --surface: rgba(255, 255, 255, 0.85);
  --surface-elevated: rgba(255, 255, 255, 0.98);

  /* Form Inputs - Clear & Accessible */
  --input-bg: #ffffff;
  --autofill-bg: #f8fafc;
  --input-border: #d1d5db;
  --input-focus-bg: rgba(37, 99, 235, 0.04);
  --placeholder: #9ca3af;
  --inner-bg: rgba(0, 0, 0, 0.025);

  /* Accent Colors - Slightly deeper for better contrast */
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-glow: rgba(37, 99, 235, 0.15);
  --accent-glow-strong: rgba(37, 99, 235, 0.25);

  /* Status Colors - Optimized for light backgrounds */
  --green: #16a34a;
  --success: #16a34a;
  --green-glow: rgba(22, 163, 74, 0.15);
  --yellow: #ca8a04;
  --yellow-glow: rgba(202, 138, 4, 0.15);
  --red: #dc2626;
  --red-glow: rgba(220, 38, 38, 0.15);

  /* Shadow System - Refined for Light Mode */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.02);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.10), 0 4px 8px rgba(0, 0, 0, 0.06);

  /* Scrollbar colors for light mode */
  --scrollbar-track: rgba(0, 0, 0, 0.03);
  --scrollbar-thumb: rgba(0, 0, 0, 0.15);
  --scrollbar-thumb-hover: rgba(0, 0, 0, 0.25);
}

* {
  box-sizing: border-box;
  font-family: var(--font-body);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  letter-spacing: 0.5px;
}

html,
body {
  margin: 0;
  background-color: transparent;
  /* Let canvas show through */
  color: var(--text);
  /* Safe area for iPhone notch */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  overflow-x: hidden;
  /* Prevent horizontal scroll causing shadows */
}

/* Custom scrollbar styling - Enhanced */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  border: 1px solid var(--border);
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: all var(--transition-fast);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
  background-clip: padding-box;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.12) rgba(255, 255, 255, 0.02);
}

/* Light Mode Scrollbars - Global */
[data-theme="light"] ::-webkit-scrollbar-track {
  background: var(--scrollbar-track, rgba(0, 0, 0, 0.03));
  border-color: var(--border);
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb, rgba(0, 0, 0, 0.15));
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover, rgba(0, 0, 0, 0.25));
}

[data-theme="light"] * {
  scrollbar-color: rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.03);
}

/* Global form input dark theme - fixes white backgrounds */
input,
textarea,
select {
  background-color: var(--input-bg) !important;
  color: var(--text) !important;
  border: 1px solid var(--input-border) !important;
  font-family: var(--font-mono) !important;
}

input:hover,
textarea:hover,
select:hover {
  background-color: var(--input-focus-bg) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px var(--accent-glow) !important;
}

input:focus,
textarea:focus,
select:focus {
  background-color: var(--input-focus-bg) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-glow), var(--shadow-sm) !important;
  outline: none !important;
}



/* ====== DASHBOARD STYLES ====== */
.app {
  display: flex;
  min-height: 100vh;
  position: relative;
  z-index: 1;
  /* Ensure content is above canvas */
}

.sidebar {
  width: 260px;
  background: var(--header-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow-lg);
  padding: 28px 18px;
  border-right: 1.5px solid var(--border);
  position: relative;
  z-index: 1001;
  transition: width 0.3s ease, padding 0.3s ease, border 0.3s ease;
  display: flex;
  flex-direction: column;
}

/* Desktop: wider sidebar */
@media (min-width: 901px) {
  .sidebar {
    width: 300px;
    padding: 28px 22px;
  }
}

.sidebar.collapsed {
  width: 0;
  padding: 0;
  overflow: hidden;
  border-right: none;
}

.sidebar-expand {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 1002;
  background: transparent;
  border: none;
  cursor: pointer;
  display: none;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  padding: 8px;
  border-radius: 8px;
  transition: background 0.2s;
  color: var(--text);
}

.sidebar-expand:hover {
  background: rgba(255, 255, 255, 0.05);
}

.sidebar-expand-icon {
  width: 20px;
  height: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.sidebar-expand-icon span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--text);
  border-radius: 2px;
  transition: all 0.2s ease;
  opacity: 1;
}

.sidebar-expand:hover .sidebar-expand-icon span {
  opacity: 1;
}

.sidebar-expand-arrow {
  display: inline-block;
  color: var(--text);
  font-size: 18px;
  margin-left: 4px;
  opacity: 0.7;
}

.sidebar-expand:hover .sidebar-expand-arrow {
  opacity: 1;
}

@media(max-width:480px) {
  .sidebar-expand-arrow {
    font-size: 16px;
    margin-left: 2px;
  }
}

.sidebar-expand.visible {
  display: flex;
}

/* Desktop: Align sidebar-expand with header content */
@media (min-width: 901px) {
  .sidebar-expand {
    top: 44px;
  }
}

/* Balance and Top-Up Row (Mobile/Tablet) */
.balance-topup-row {
  display: none;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
  background: var(--header-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}

/* Light mode mobile: match desktop's subtle header grey for balance container */
@media (max-width: 900px) {
  [data-theme="light"] .balance-topup-row {
    background: var(--header-bg);
    border-color: rgba(0, 0, 0, 0.04);
  }
}

.balance-topup-row .balance-display-header {
  flex: 0 0 auto;
  padding: 8px 16px;
  background: transparent;
  border-radius: 8px;
  border: 1px solid var(--border);
  box-shadow: none;
  margin: 0;
  transition: all 0.2s ease;
}

.balance-topup-row .balance-display-header:hover {
  border-color: var(--border-hover);
  background: rgba(255, 255, 255, 0.04);
  transform: translateY(-1px);
}

[data-theme="light"] .balance-topup-row .balance-display-header {
  background: transparent;
  border-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .balance-topup-row .balance-display-header:hover {
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.02);
}

/* Mobile Top Up button - squared with rounded corners */
.balance-topup-row .btn.primary {
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-weight: 600;
  font-size: 13px;
  background: var(--accent) !important;
  border: none !important;
  box-shadow: 0 2px 12px rgba(59, 130, 246, 0.35);
  transition: all 0.2s ease !important;
}

.balance-topup-row .btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.5);
}

/* Menu button on tablet and mobile - now integrated into header */
@media(max-width:900px) {

  /* Hide the separate sidebar-expand - menu is now in header */
  .sidebar-expand {
    display: none !important;
  }

  .sidebar-expand-arrow {
    display: none !important;
  }

  /* Fixed full-width header on mobile/tablet */
  .topbar.global-header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding: 12px 16px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    box-sizing: border-box;
  }

  /* Show menu toggle in header on the left */
  .topbar.global-header .header-menu-toggle,
  .header-menu-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0;
    min-width: 36px;
    min-height: 36px;
  }

  /* Welcome text in the middle - use available space */
  .topbar.global-header h1 {
    flex: 1 1 auto;
    min-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Hide balance and top-up from header on mobile/tablet - they show in separate row below */
  .topbar.global-header .balance-display-header,
  .topbar.global-header #topUpBtnHeader {
    display: none !important;
  }

  /* Top actions on the right: theme toggle + profile icon in a row */
  .topbar.global-header .top-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 4px !important;
    margin-left: auto;
    flex-shrink: 0;
  }

  .topbar.global-header .user-dropdown {
    position: relative;
    top: auto;
    right: auto;
  }

  /* Show balance-topup-row on mobile/tablet */
  .balance-topup-row {
    display: flex;
    margin-top: 12px;
  }

  /* Add top padding to main content for fixed header - just enough for header */
  .main {
    padding-top: 60px !important;
  }
}

@media(max-width:768px) {
  .topbar.global-header {
    padding: 10px 14px !important;
  }

  .main {
    padding-top: 56px !important;
  }
}

@media(max-width:600px) {
  .topbar.global-header {
    padding: 10px 12px !important;
    gap: 10px !important;
  }

  .main {
    padding-top: 54px !important;
  }
}

@media(max-width:480px) {

  /* Smaller header on very small screens */
  .topbar.global-header {
    padding: 8px 10px !important;
    gap: 8px !important;
  }

  .topbar.global-header h1 {
    font-size: 14px;
  }

  .header-menu-icon {
    width: 18px;
    height: 12px;
  }

  .main {
    padding-top: 50px !important;
  }

  .sidebar {
    padding-top: 20px;
  }
}

@media(max-width:360px) {
  .topbar.global-header {
    padding: 8px !important;
    gap: 6px !important;
  }

  .topbar.global-header h1 {
    font-size: 12px;
  }

  .header-menu-icon {
    width: 16px;
    height: 11px;
  }

  .main {
    padding-top: 48px !important;
  }

  .sidebar {
    padding-top: 18px;
  }
}

.sidebar-close {
  display: flex !important;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all 0.2s ease;
  z-index: 10;
  opacity: 1;
  font-weight: 400;
}

.sidebar-close:hover {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.3);
  color: var(--accent);
  transform: translateX(-1px);
}

.sidebar-close:active {
  transform: translateX(-4px);
}

.sidebar-close:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(58, 139, 253, 0.5);
}

/* Responsive sidebar close button */
@media (max-width: 480px) {
  .sidebar-close {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    font-size: 16px;
  }

  .logo-header {
    gap: 8px;
  }

  .logo-text {
    font-size: 13px !important;
    letter-spacing: 0.15em !important;
  }
}

@media (min-width: 481px) and (max-width: 900px) {
  .sidebar-close {
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
    font-size: 16px;
  }

  .logo-header {
    gap: 12px;
  }
}

.logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 32px;
  gap: 4px;
  width: 100%;
}

.logo-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 16px;
}

.logo-subtitle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 2px;
}

.logo-text {
  font-family: 'Michroma', sans-serif;
  font-size: 17px;
  color: var(--accent);
  margin-left: 0;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  text-shadow: 0 0 10px var(--accent-glow);
  white-space: nowrap;
}

[data-theme="light"] .logo-text {
  text-shadow: none;
}

[data-theme="light"] .logo img {
  filter: brightness(0);
  opacity: 0.9;
}

[data-theme="light"] .logo img.shugo-logo {
  filter: none;
  opacity: 1;
}

.sidebar nav a {
  display: block;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  color: var(--muted);
  margin: 4px 0;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-base);
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font-mono);
  position: relative;
  overflow: hidden;
}

.sidebar nav a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent);
  transform: scaleY(0);
  transition: transform var(--transition-base);
}

.sidebar nav a:hover {
  background: var(--input-focus-bg);
  color: var(--text);
  transform: translateX(4px);
}

.sidebar nav a.active {
  background: var(--input-focus-bg);
  color: var(--accent);
  border: 1px solid var(--accent-glow);
  box-shadow: var(--shadow-sm), inset 0 0 20px var(--accent-glow);
}

.sidebar nav a.active::before {
  transform: scaleY(1);
}

.sidebar nav a.logout {
  margin-top: 20px;
  color: #f7a9a9;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 14px;
}

/* Sidebar logout link - distinct danger styling */
.sidebar nav a.logout-link {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  color: #f87171;
}

.sidebar nav a.logout-link svg {
  stroke: #f87171;
  flex-shrink: 0;
}

.sidebar nav a.logout-link:hover {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  transform: translateX(4px);
}

.sidebar nav a.logout-link:hover svg {
  stroke: #ef4444;
}

.sidebar nav a.logout-link::before {
  display: none;
}

[data-theme="light"] .sidebar nav a.logout-link {
  color: #dc2626;
}

[data-theme="light"] .sidebar nav a.logout-link svg {
  stroke: #dc2626;
}

[data-theme="light"] .sidebar nav a.logout-link:hover {
  background: rgba(220, 38, 38, 0.1);
  color: #b91c1c;
}

[data-theme="light"] .sidebar nav a.logout-link:hover svg {
  stroke: #b91c1c;
}

/* Sidebar Support Badge - Fixed to viewport */
.sidebar-support-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: rgba(59, 130, 246, 0.05);
  border: 1px solid rgba(59, 130, 246, 0.15);
  border-radius: 8px;
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--muted);
  transition: all 0.3s ease;
  flex-wrap: wrap;
  position: fixed;
  bottom: 20px;
  left: 18px;
  width: calc(260px - 36px);
  z-index: 1003;
}

@media (min-width: 901px) {
  .sidebar-support-badge {
    left: 22px;
    width: calc(300px - 44px);
  }
}

/* Hide when sidebar is collapsed on desktop */
.app:has(.sidebar.collapsed) .sidebar-support-badge,
.app.sidebar-collapsed .sidebar-support-badge {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-100%);
}

/* Mobile: hide by default, show only when sidebar is active */
@media (max-width: 900px) {
  .sidebar-support-badge {
    position: fixed;
    left: 18px;
    bottom: 20px;
    width: calc(260px - 36px);
    z-index: 1011;
    /* Above sidebar (1010) on mobile */
    opacity: 0;
    pointer-events: none;
    transform: translateX(-260px);
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

  /* Show when sidebar is active - multiple selector fallbacks for browser compatibility */
  .app:has(.sidebar.active) .sidebar-support-badge,
  .app.sidebar-open .sidebar-support-badge,
  body.sidebar-open .sidebar-support-badge,
  .sidebar.active~.sidebar-support-badge {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
  }
}

/* Mobile landscape: adjust for narrower sidebar */
@media (max-width: 900px) and (orientation: landscape) {
  .sidebar-support-badge {
    width: calc(200px - 36px);
    left: 14px;
    bottom: 14px;
    padding: 8px 12px;
    font-size: 10px;
    transform: translateX(-200px);
  }

  .app:has(.sidebar.active) .sidebar-support-badge,
  .app.sidebar-open .sidebar-support-badge,
  body.sidebar-open .sidebar-support-badge,
  .sidebar.active~.sidebar-support-badge {
    transform: translateX(0);
  }
}

/* Very small screens - ensure badge fits */
@media (max-width: 400px) {
  .sidebar-support-badge {
    left: 12px;
    bottom: 16px;
    width: calc(100vw - 48px);
    max-width: 220px;
    padding: 8px 10px;
    font-size: 10px;
  }
}

.sidebar-support-badge:hover {
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.25);
}

.sidebar-support-badge svg {
  color: var(--accent);
  opacity: 0.8;
  flex-shrink: 0;
}

.sidebar-support-badge span {
  color: var(--muted);
}

.sidebar-support-badge a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  transition: opacity 0.2s ease;
}

.sidebar-support-badge a:hover {
  opacity: 0.8;
  text-decoration: underline;
}

[data-theme="light"] .sidebar-support-badge {
  background: rgba(59, 130, 246, 0.04);
  border-color: rgba(59, 130, 246, 0.12);
}

[data-theme="light"] .sidebar-support-badge:hover {
  background: rgba(59, 130, 246, 0.06);
  border-color: rgba(59, 130, 246, 0.2);
}

/* Match Log Out text style to Settings, Top Up, and other modal titles - use same font as modal-header h2 */
#logoutModal .modal-header {
  font-family: 'Michroma', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--text);
  letter-spacing: 0.5px;
  margin: 0;
  display: block;
  line-height: 1.2;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}

/* Logout modal content text */
#logoutModal .modal-panel p {
  font-size: 13px;
}

/* Large screens - match larger modal header h2 size */
@media (min-width: 1600px) {
  #logoutModal .modal-header {
    font-size: 32px;
    margin-bottom: 8px;
  }

  #logoutModal .modal-panel p {
    font-size: 16px;
  }
}

/* Match Remove Instance modal title style to other modal titles */
#removeInstanceModal .modal-header {
  font-family: 'Michroma', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--text);
  letter-spacing: 0.5px;
  margin: 0;
  display: block;
  line-height: 1.2;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}

/* Large screens - match larger modal header h2 size */
@media (min-width: 1600px) {
  #removeInstanceModal .modal-header {
    font-size: 32px;
    margin-bottom: 8px;
  }
}

/* Match Cancel Deployment modal title style to other modal titles */
#cancelDeployModal .modal-header {
  font-family: 'Michroma', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--text);
  letter-spacing: 0.5px;
  margin: 0;
  display: block;
  line-height: 1.2;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}

/* Large screens - match larger modal header h2 size */
@media (min-width: 1600px) {
  #cancelDeployModal .modal-header {
    font-size: 32px;
    margin-bottom: 8px;
  }
}

/* Error Modal title style */
#errorModal .modal-header {
  font-family: 'Michroma', sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--text);
  letter-spacing: 0.5px;
  margin: 0;
  display: block;
  line-height: 1.2;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}

#errorModal .btn {
  font-size: 15px;
  padding: 12px 28px;
}

@media (min-width: 1600px) {
  #errorModal .modal-header {
    font-size: 28px;
    margin-bottom: 8px;
  }

  #errorModal .btn {
    font-size: 16px;
    padding: 14px 32px;
  }
}

/* Light Mode Sidebar Navigation */
/* Light Mode Sidebar - Enhanced */
[data-theme="light"] .sidebar {
  background: var(--panel);
  border-right-color: var(--border);
  box-shadow: var(--shadow-md);
}

[data-theme="light"] .sidebar nav a {
  color: #475569;
}

[data-theme="light"] .sidebar nav a:hover {
  background: rgba(37, 99, 235, 0.06);
  color: #1e293b;
  transform: translateX(4px);
}

[data-theme="light"] .sidebar nav a.active {
  background: rgba(37, 99, 235, 0.08);
  color: #2563eb;
  border: 1px solid rgba(37, 99, 235, 0.2);
}

/* Modern Top Up button in header - squared with rounded corners */
#topUpBtnHeader {
  white-space: nowrap;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-weight: 600;
  font-size: 13px;
  background: var(--accent) !important;
  border: none !important;
  box-shadow: 0 2px 12px rgba(59, 130, 246, 0.35);
  transition: all 0.2s ease !important;
}

#topUpBtnHeader:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.5);
}

[data-theme="light"] .sidebar nav a.logout {
  color: #ef4444;
}

[data-theme="light"] .sidebar nav a.logout:hover {
  background: rgba(239, 68, 68, 0.08);
  color: #dc2626;
}

/* Auth Brand Header */
.auth-brand-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  position: relative;
}

/* Horizontal accent line below brand header */
.auth-brand-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 240px;
  margin: 0 auto;
  height: 1px;
  /* Sleek Gradient Style (Matching Mobile Splitter) */
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(59, 130, 246, 0.8) 50%,
      transparent 100%);
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.4);
  border-radius: 2px;
  opacity: 1;
}

.brand-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.brand-logo {
  height: 38px;
  width: auto;
}

.brand-text {
  font-family: 'Michroma', sans-serif;
  font-size: 23px;
  letter-spacing: 3px;
  color: var(--accent);
  text-transform: uppercase;
}

/* Adjust Bittensor badge for header - keep centered for cinematic layout */
@media (min-width: 1024px) {
  .auth-brand-header {
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    margin-bottom: 16px;
  }

  .auth-brand-header::after {
    display: none;
  }

  .brand-logo {
    height: 40px;
  }

  .brand-main {
    align-items: center;
  }

  .bittensor-powered {
    margin-left: 0;
  }
}

@media (max-width: 1023px) {
  .auth-brand-header {
    gap: clamp(10px, 2.5vw, 14px);
    margin-bottom: clamp(36px, 10vw, 56px);
    padding-bottom: clamp(24px, 6vw, 36px);
  }

  .brand-main {
    align-items: center;
    gap: clamp(8px, 2vw, 14px);
  }

  .brand-logo {
    height: clamp(36px, 9vw, 48px);
  }

  .brand-text {
    font-size: clamp(18px, 4.8vw, 24px);
    letter-spacing: clamp(2px, 0.6vw, 3.5px);
  }

  .powered-text {
    font-size: clamp(10px, 2.6vw, 12px);
    letter-spacing: clamp(1px, 0.3vw, 1.8px);
  }

  .bittensor-name {
    font-size: clamp(11px, 2.8vw, 14px);
  }

  .subnet-tag {
    font-size: clamp(10px, 2.6vw, 12px);
    padding: clamp(3px, 0.8vw, 5px) clamp(6px, 1.5vw, 10px);
  }
}

/* Powered by Bittensor Styles */
.bittensor-powered {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 0;
  background: transparent;
  transition: all 0.3s ease;
}

@media (max-width: 1023px) {
  .bittensor-powered {
    margin-left: auto;
    margin-right: auto;
    gap: clamp(5px, 1.2vw, 8px);
  }
}

.powered-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.bittensor-name {
  font-family: 'Michroma', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: var(--text);
  letter-spacing: 1px;
  opacity: 0.85;
}

.brand-separator {
  color: var(--muted);
  opacity: 0.4;
  font-size: 8px;
  margin: 0;
}

@media (max-width: 1023px) {
  .brand-separator {
    font-size: clamp(6px, 1.5vw, 9px);
    margin: 0 1px;
  }
}

.subnet-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  background: rgba(59, 130, 246, 0.15);
  padding: 4px 8px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  line-height: 1;
  margin-left: 4px;
}

/* Light Mode Powered By */
[data-theme="light"] .bittensor-icon {
  fill: #1e293b;
  opacity: 0.7;
}

[data-theme="light"] .bittensor-name {
  color: #1e293b;
  opacity: 0.9;
}

[data-theme="light"] .subnet-tag {
  color: #2563eb;
  background: rgba(37, 99, 235, 0.12);
}

[data-theme="light"] .brand-separator {
  color: #94a3b8;
}

[data-theme="light"] .auth-brand-header {
  background: transparent;
  padding: 0;
  border-radius: 0;
}

@media (max-width: 1023px) {
  [data-theme="light"] .auth-brand-header {
    margin-bottom: clamp(28px, 7vw, 40px);
  }

  [data-theme="light"] .auth-brand-header::after {
    display: none;
  }
}

/* Dark mode card styles for auth screens */
[data-theme="dark"] .auth-brand-header {
  background: transparent;
  padding: 0;
  border-radius: 0;
}

@media (max-width: 1023px) {
  [data-theme="dark"] .auth-brand-header {
    margin-bottom: clamp(28px, 7vw, 40px);
  }

  [data-theme="dark"] .auth-brand-header::after {
    display: none;
  }
}

.main {
  flex: 1;
  padding: 28px;
  transition: margin-left 0.3s ease;
  min-width: 0;
  /* Prevents flex overflow */
  overflow-x: hidden;
}

/* Light Mode Main Content Area - transparent to show canvas animation */
[data-theme="light"] .main {
  background: transparent;
}

.app:has(.sidebar.collapsed) .main,
.app.sidebar-collapsed .main {
  margin-left: 48px;
}

/* Remove margin on mobile - menu button floats on top */
@media(max-width:900px) {

  .app:has(.sidebar.collapsed) .main,
  .app.sidebar-collapsed .main {
    margin-left: 0;
  }
}

.view {
  display: none;
}

.view.active {
  display: block;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.topbar.global-header {
  position: sticky;
  top: 0;
  z-index: 9999999;
  background: var(--header-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 16px 24px;
  margin-bottom: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* Light Mode Header - Clean & Professional */
[data-theme="light"] .topbar.global-header {
  background: rgba(255, 255, 255, 0.95);
  border-color: var(--border);
  box-shadow: var(--shadow-md);
}

[data-theme="light"] .topbar h1 {
  color: #1e293b;
}

/* Header menu toggle - hidden on desktop, shown on mobile */
.header-menu-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 6px;
  transition: background 0.2s ease;
  flex-shrink: 0;
  min-width: 36px;
  min-height: 36px;
  align-items: center;
  justify-content: center;
}

.header-menu-toggle:hover {
  background: rgba(255, 255, 255, 0.08);
}

.header-menu-icon {
  width: 20px;
  height: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}

.header-menu-icon span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--text, #e6edf3);
  border-radius: 1px;
  transition: all 0.2s ease;
}

/* Show menu toggle on mobile/tablet - MUST be after base rule */
@media (max-width: 900px) {

  .header-menu-toggle,
  #headerMenuToggle,
  .topbar.global-header>.header-menu-toggle {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: auto !important;
    background: transparent !important;
  }

  .header-menu-icon span {
    background: var(--text, #e6edf3) !important;
  }
}

@media(max-width:768px) {
  .topbar.global-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding: 10px 14px;
    background: var(--header-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--border);
    z-index: 1001;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin: 0;
    box-sizing: border-box;
  }

  /* Show menu toggle in header on mobile - on the left */
  .topbar.global-header .header-menu-toggle,
  .header-menu-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0;
    min-width: 36px;
    min-height: 36px;
  }

  /* Welcome text takes remaining space */
  .topbar.global-header h1 {
    flex: 1 1 auto;
    min-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Top actions stay in a row on the right */
  .topbar.global-header .top-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 4px !important;
    margin-left: auto;
    flex-shrink: 0;
  }

  /* Hide the separate sidebar-expand on mobile since it's now in the header */
  .sidebar-expand {
    display: none !important;
  }
}

.topbar h1 {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  background: linear-gradient(135deg, var(--text) 0%, var(--muted) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.3px;
}

/* Light mode: use solid color instead of gradient for welcome text */
[data-theme="light"] .topbar h1 {
  background: none;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: unset;
  background-clip: unset;
  color: var(--text);
}

.section-header-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.section-header-actions .section-title {
  margin-bottom: 0;
}

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

/* Theme toggle in header - soft border */
.top-actions #themeToggle {
  padding: 10px !important;
  height: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  transition: all 0.2s ease;
}

.top-actions #themeToggle:hover {
  border-color: var(--border-hover);
  background: rgba(255, 255, 255, 0.04);
  transform: translateY(-1px);
}

[data-theme="light"] .top-actions #themeToggle {
  background: transparent;
  border-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .top-actions #themeToggle:hover {
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.02);
}

.balance-display-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 8px;
  padding: 8px 16px;
  background: transparent;
  border-radius: 8px;
  border: 1px solid var(--border);
  box-shadow: none;
  transition: all 0.2s ease;
}

.balance-display-header:hover {
  border-color: var(--border-hover);
  background: rgba(255, 255, 255, 0.04);
  transform: translateY(-1px);
}

[data-theme="light"] .balance-display-header {
  background: transparent;
  border-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .balance-display-header:hover {
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.02);
}

.balance-label-header {
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
  font-family: var(--font-mono);
  letter-spacing: 0.3px;
}

.balance-value-header {
  font-size: 17px;
  color: var(--accent);
  font-weight: 700;
  font-family: var(--font-mono);
}


.user-email-text {
  font-family: var(--font-mono);
}

.view-header-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
  padding: 16px 0;
}

.view-header-actions .btn.primary {
  transition: all 0.2s ease;
}

.view-header-actions .btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.5);
}

/* Styled select in header actions */
.view-header-actions .styled-select {
  min-width: 220px;
  max-width: 300px;
}

.view-header-actions .styled-select-trigger {
  background: var(--header-bg);
  border: 1px solid var(--border);
}

.view-header-actions .styled-select-dropdown {
  min-width: 220px;
}

/* Deployment Badge - Inline date/uptime display */
.deployment-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--header-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--text-secondary);
  transition: all var(--transition);
  margin-left: auto;
}

.deployment-badge:hover {
  border-color: var(--border-hover);
  background: var(--bg-hover);
}

.deployment-badge svg {
  color: var(--accent);
  flex-shrink: 0;
}

.deployment-date {
  color: var(--text-primary);
  font-weight: 500;
}

.deployment-separator {
  color: var(--text-muted);
  opacity: 0.5;
}

.deployment-uptime {
  color: var(--text-secondary);
  font-size: 12px;
}

/* Integrated Threat Status within Deployment Badge */
.deployment-badge .threat-separator {
  margin-left: 4px;
}

/* Threat Status Pill - Subtle inline highlight */
.deployment-badge .threat-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.25);
  border-radius: 12px;
  margin-left: 2px;
  transition: all 0.3s ease;
}

/* Threat level backgrounds */
.deployment-badge .threat-status-pill.warning {
  background: rgba(96, 165, 250, 0.12);
  border-color: rgba(96, 165, 250, 0.25);
}

.deployment-badge .threat-status-pill.elevated {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.35);
}

.deployment-badge .threat-status-pill.critical {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.35);
}

.deployment-badge .threat-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  animation: pulse-dot 2s infinite;
  flex-shrink: 0;
}

.deployment-badge .threat-status-dot.secure {
  background: #22c55e;
}

.deployment-badge .threat-status-dot.warning {
  background: #60a5fa;
}

.deployment-badge .threat-status-dot.elevated {
  background: #3b82f6;
  animation: pulse-dot 1.5s infinite;
}

.deployment-badge .threat-status-dot.critical {
  background: #ef4444;
  animation: pulse-dot-fast 1s infinite;
}

.deployment-badge .threat-status-text {
  color: #22c55e;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.deployment-badge .threat-status-pill.warning .threat-status-text {
  color: #60a5fa;
}

.deployment-badge .threat-status-pill.elevated .threat-status-text {
  color: #3b82f6;
}

.deployment-badge .threat-status-pill.critical .threat-status-text {
  color: #ef4444;
}

/* Mobile: Stack view header actions */
@media (max-width: 600px) {
  .view-header-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .view-header-actions .user {
    font-size: 12px;
    text-align: center;
    padding: 8px 0;
  }

  .view-header-actions .select,
  .view-header-actions .styled-select {
    width: 100%;
    min-width: unset;
    max-width: unset;
  }

  .view-header-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .deployment-badge {
    width: 100%;
    justify-content: center;
    margin-left: 0;
    padding: 8px 10px;
    font-size: 11px;
    gap: 5px;
  }

  .deployment-badge .deployment-date {
    font-size: 11px;
  }

  .deployment-badge .deployment-uptime {
    font-size: 10px;
  }

  .deployment-badge .threat-separator {
    margin-left: 2px;
  }

  .deployment-badge .threat-status-pill {
    padding: 2px 8px 2px 6px;
    gap: 4px;
    margin-left: 0;
  }

  .deployment-badge .threat-status-dot {
    width: 6px;
    height: 6px;
  }

  .deployment-badge .threat-status-text {
    font-size: 9px;
  }
}

/* Beta Credit Banner */
.beta-credit-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, var(--accent) 0%, #2d5aa0 100%);
  padding: 16px 24px;
  margin-bottom: 24px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-hover);
  box-shadow: var(--shadow-lg);
  position: relative;
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.beta-credit-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  gap: 20px;
}

.beta-credit-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.beta-credit-icon {
  font-size: 24px;
}

.beta-credit-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.beta-credit-text strong {
  font-size: 16px;
  color: white;
  font-weight: 600;
  font-family: var(--font-mono);
  letter-spacing: 0.5px;
}

.beta-credit-text span {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--font-mono);
}

.beta-credit-close {
  background: transparent;
  border: none;
  color: white;
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  opacity: 0.8;
  transition: opacity 0.2s;
  line-height: 1;
}

.beta-credit-close:hover {
  opacity: 1;
}

#claimBetaCreditBtn {
  white-space: nowrap;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Beta Credit Banner - Responsive */
@media (max-width: 900px) {
  .beta-credit-banner {
    padding: 12px 16px;
    padding-left: 60px;
    /* Space for menu icon */
    flex-direction: column;
    gap: 12px;
  }

  .beta-credit-success {
    padding: 12px 16px;
    padding-left: 60px;
    /* Space for menu icon */
    flex-direction: column;
    gap: 12px;
  }
}

@media (max-width: 768px) {
  .beta-credit-banner {
    padding: 12px 16px;
    padding-left: 56px;
    /* Space for menu icon */
    flex-direction: column;
    gap: 12px;
  }

  .beta-credit-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .beta-credit-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .beta-credit-icon {
    font-size: 20px;
  }

  .beta-credit-text strong {
    font-size: 14px;
  }

  .beta-credit-text span {
    font-size: 12px;
  }

  #claimBetaCreditBtn {
    width: 100%;
    padding: 10px 16px;
    font-size: 13px;
  }

  .beta-credit-close {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 16px;
  }

  .beta-credit-success {
    padding: 12px 16px;
    padding-left: 56px;
    /* Space for menu icon */
    flex-direction: column;
    gap: 12px;
  }

  .beta-credit-success-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .beta-credit-success-icon {
    font-size: 20px;
  }

  .beta-credit-success-text strong {
    font-size: 14px;
  }

  .beta-credit-success-text span {
    font-size: 12px;
  }

  .beta-credit-success-close {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .beta-credit-banner {
    padding-left: 16px;
  }

  .beta-credit-success {
    padding-left: 16px;
  }
}

@media (max-width: 360px) {
  .beta-credit-banner {
    padding-left: 12px;
  }

  .beta-credit-success {
    padding-left: 12px;
  }
}

/* Beta Credit Success Notification */
.beta-credit-success {
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #1e8e4a 0%, #155d2f 100%);
  padding: 16px 24px;
  margin-bottom: 24px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: 0 6px 18px rgba(30, 142, 74, 0.2);
  animation: slideDown 0.3s ease-out;
}

.beta-credit-success-content {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
}

.beta-credit-success-icon {
  font-size: 28px;
}

.beta-credit-success-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.beta-credit-success-text strong {
  font-size: 16px;
  color: white;
  font-weight: 600;
}

.beta-credit-success-text span {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.4;
}

.beta-credit-success-close {
  background: transparent;
  border: none;
  color: white;
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  opacity: 0.9;
  transition: opacity 0.2s;
  line-height: 1;
}

.beta-credit-success-close:hover {
  opacity: 1;
}

/* Credit Info Card */
.credit-info-card {
  display: flex;
  gap: 16px;
  background: var(--header-bg);
  border: 1px solid var(--border-hover);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-lg);
  transition: all var(--transition-base);
}

.credit-info-card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-lg);
}

.credit-info-icon {
  font-size: 24px;
  flex-shrink: 0;
  color: var(--accent);
  background: rgba(59, 130, 246, 0.1);
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.credit-info-content {
  flex: 1;
}

.credit-info-content strong {
  display: block;
  font-size: var(--fs-md);
  color: var(--text);
  margin-bottom: 12px;
  font-weight: 600;
  font-family: var(--font-mono);
}

.credit-info-content p {
  margin: 8px 0;
  color: var(--muted);
  font-size: var(--fs-base);
  line-height: 1.6;
  font-family: var(--font-mono);
}

.credit-info-content ul {
  margin: 8px 0 12px 0;
  padding-left: 20px;
  color: var(--muted);
  font-size: var(--fs-base);
  line-height: 1.8;
  font-family: var(--font-mono);
  list-style-position: outside;
}

.credit-info-content ul li {
  margin: 4px 0;
}

.user {
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  box-shadow: none;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
}

.user:hover {
  border-color: var(--border-hover);
  background: rgba(255, 255, 255, 0.04);
  transform: translateY(-1px);
}

[data-theme="light"] .user {
  background: transparent;
  border-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .user:hover {
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.02);
}

.user .profile-icon {
  display: block;
  width: 20px;
  height: 20px;
  color: var(--accent);
  opacity: 0.8;
}

.dropdown-arrow {
  font-size: 8px;
  opacity: 0.5;
  transition: transform 0.2s ease;
}

.user-dropdown.active .dropdown-arrow {
  transform: rotate(180deg);
  opacity: 0.7;
}

.user-dropdown {
  position: relative;
  z-index: 999999;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--panel);
  border: 1px solid var(--border-hover);
  border-radius: 12px;
  padding: 6px;
  min-width: 160px;
  box-shadow: var(--shadow-xl);
  display: none;
  z-index: 999999 !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transform: translateY(-4px);
  opacity: 0;
  transition: all 0.2s ease;
}

.user-dropdown.active .dropdown-menu {
  display: block;
  transform: translateY(0);
  opacity: 1;
}

[data-theme="light"] .dropdown-menu {
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.dropdown-menu.active {
  display: block;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  color: var(--muted);
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.15s ease;
  font-weight: 500;
  font-size: 13px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  margin-bottom: 2px;
  font-family: var(--font-mono);
}

.dropdown-item:hover {
  background: rgba(59, 130, 246, 0.1);
  color: var(--accent);
  transform: translateX(2px);
}

.dropdown-item:last-child {
  margin-bottom: 0;
}

.dropdown-item-support {
  display: flex;
  align-items: center;
}

.dropdown-item-support svg {
  flex-shrink: 0;
}

.dropdown-divider {
  height: 1px;
  margin: 6px 12px;
  background: var(--border);
}

[data-theme="light"] .dropdown-divider {
  background: rgba(0, 0, 0, 0.08);
}

/* Logout item styling - distinct danger/exit action */
.dropdown-item.logout-item {
  color: #f87171;
  margin-top: 4px;
}

.dropdown-item.logout-item svg {
  stroke: #f87171;
}

.dropdown-item.logout-item:hover {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  transform: translateX(2px);
}

.dropdown-item.logout-item:hover svg {
  stroke: #ef4444;
}

[data-theme="light"] .dropdown-item.logout-item {
  color: #dc2626;
}

[data-theme="light"] .dropdown-item.logout-item svg {
  stroke: #dc2626;
}

[data-theme="light"] .dropdown-item.logout-item:hover {
  background: rgba(220, 38, 38, 0.1);
  color: #b91c1c;
}

[data-theme="light"] .dropdown-item.logout-item:hover svg {
  stroke: #b91c1c;
}

.btn {
  border: 1px solid var(--border);
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--text);
  cursor: pointer;
  font-weight: 500;
  transition: all var(--transition-fast);
  font-family: var(--font-mono);
}

.btn:hover {
  border-color: var(--border-hover);
  background: var(--card-hover);
}

.btn.primary {
  background: var(--accent);
  color: #ffffff !important;
}

.btn.primary:hover {
  background: #2977e8;
}

.btn.danger {
  background: var(--red);
  color: #ffffff !important;
}

.btn.danger:hover {
  background: #c0392b;
}

.btn.ghost {
  background: transparent;
  border: 1px solid var(--border);
  box-shadow: none;
}

.btn.ghost:hover {
  border-color: var(--border-hover);
  background: var(--input-focus-bg);
  box-shadow: var(--shadow-sm);
}

/* Light Mode Buttons - Refined */
[data-theme="light"] .btn {
  background: var(--panel);
  border-color: var(--border);
  color: var(--text);
}

[data-theme="light"] .btn:hover {
  background: #f8fafc;
  border-color: var(--border-hover);
}

[data-theme="light"] .btn.primary {
  background: var(--accent);
  color: #ffffff !important;
  border-color: transparent;
}

[data-theme="light"] .btn.primary:hover {
  background: var(--accent-hover);
}

[data-theme="light"] .btn.danger {
  background: #dc2626 !important;
  color: #ffffff !important;
  border-color: #dc2626 !important;
}

[data-theme="light"] .btn.danger:hover {
  background: #b91c1c !important;
  border-color: #b91c1c !important;
}

[data-theme="light"] .btn.ghost {
  background: transparent;
  border-color: var(--border);
}

[data-theme="light"] .btn.ghost:hover {
  background: rgba(37, 99, 235, 0.04);
  border-color: rgba(37, 99, 235, 0.3);
}

.select {
  appearance: none;
  background: var(--header-bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 12px 36px 12px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-mono);
  cursor: pointer;
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"%3E%3Cpath fill="none" stroke="%233b82f6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" d="M1 1l4 4 4-4"/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-position: right 14px center;
  transition: all 0.2s ease;
  min-width: 180px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.select:hover {
  border-color: rgba(59, 130, 246, 0.3);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.select option {
  color: var(--text);
  background: var(--panel);
  padding: 12px;
}

/* ============================================
   CUSTOM STYLED DROPDOWN (replaces native select)
   ============================================ */
.styled-select {
  position: relative;
  width: 100%;
  font-family: var(--font-mono);
}

.styled-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: var(--header-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  font-size: 13px;
  font-family: var(--font-mono);
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 42px;
}

.styled-select-trigger:hover {
  border-color: rgba(59, 130, 246, 0.3);
  background: rgba(255, 255, 255, 0.02);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.styled-select.open .styled-select-trigger {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
  background: rgba(59, 130, 246, 0.05);
}

.styled-select-value {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
}

.styled-select-value.placeholder {
  color: var(--muted);
  font-family: var(--font-mono);
}

.styled-select-arrow {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--muted);
  flex-shrink: 0;
}

.styled-select-arrow svg {
  width: 12px;
  height: 12px;
}

.styled-select.open .styled-select-arrow {
  transform: rotate(180deg);
  color: var(--accent);
}

.styled-select-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.98);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  max-height: 280px;
  overflow-y: auto;
  overflow-x: hidden;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.styled-select.open .styled-select-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* Custom scrollbar for dropdown */
.styled-select-dropdown::-webkit-scrollbar {
  width: 6px;
}

.styled-select-dropdown::-webkit-scrollbar-track {
  background: transparent;
  margin: 4px 0;
}

.styled-select-dropdown::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.styled-select-dropdown::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

.styled-select-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  color: var(--text);
  font-size: 13px;
  font-family: var(--font-mono);
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
}

.styled-select-option:first-child {
  border-radius: calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px) 0 0;
}

.styled-select-option:last-child {
  border-radius: 0 0 calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px);
}

.styled-select-option:only-child {
  border-radius: calc(var(--radius-md) - 1px);
}

.styled-select-option:hover {
  background: rgba(59, 130, 246, 0.1);
  color: var(--accent);
}

.styled-select-option.selected {
  background: rgba(59, 130, 246, 0.12);
  color: var(--accent);
}

.styled-select-option.selected::after {
  content: '';
  position: absolute;
  right: 14px;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

.styled-select-option:hover.selected {
  background: rgba(59, 130, 246, 0.18);
}

.styled-select-option.disabled {
  color: var(--muted);
  opacity: 0.5;
  cursor: not-allowed;
}

.styled-select-option.disabled:hover {
  background: transparent;
}

/* Empty state */
.styled-select-empty {
  padding: 20px 14px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  font-family: var(--font-mono);
  font-style: italic;
}

/* Search input in dropdown */
.styled-select-search {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  position: sticky;
  top: 0;
  background: var(--panel);
  z-index: 1;
}

.styled-select-search input {
  width: 100%;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 13px;
  font-family: var(--font-mono);
  outline: none;
  transition: all 0.2s ease;
}

.styled-select-search input:focus {
  border-color: var(--accent);
  background: rgba(59, 130, 246, 0.05);
}

.styled-select-search input::placeholder {
  color: var(--muted);
}

/* Light theme */
[data-theme="light"] .styled-select-trigger {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .styled-select-trigger:hover {
  border-color: rgba(59, 130, 246, 0.4);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .styled-select.open .styled-select-trigger {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

[data-theme="light"] .styled-select-dropdown {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .styled-select-option:hover {
  background: rgba(59, 130, 246, 0.08);
}

[data-theme="light"] .styled-select-option.selected {
  background: rgba(59, 130, 246, 0.1);
}

[data-theme="light"] .styled-select-dropdown::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .styled-select-dropdown::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .styled-select-search {
  background: rgba(255, 255, 255, 0.98);
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .styled-select-search input {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .styled-select-search input:focus {
  background: rgba(59, 130, 246, 0.03);
}

.select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15), 0 2px 8px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .select {
  background: var(--header-bg);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .select:hover {
  border-color: rgba(59, 130, 246, 0.4);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .select:focus {
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1), 0 2px 8px rgba(0, 0, 0, 0.08);
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
  overflow: visible;
}

/* Large Desktop: All 6 cards in one row */
@media (min-width: 1400px) {
  .summary-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
  }

  .summary-grid .card.small {
    min-width: 0;
    padding: 16px 14px;
  }

  /* Billing grid: 4 cards taking full width */
  .summary-grid.billing-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Medium Desktop: All 6 cards in one row with compact padding */
@media (min-width: 1200px) and (max-width: 1399px) {
  .summary-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
  }

  .summary-grid .card.small {
    min-width: 0;
    padding: 14px 10px;
  }

  .summary-grid .card.small .value {
    font-size: 22px;
  }

  .summary-grid .card.small .label {
    font-size: 11px;
  }

  /* Billing grid stays 4 columns */
  .summary-grid.billing-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Small Desktop: Clean 3+3 split for summary, 4+4 for metrics */
@media (min-width: 1025px) and (max-width: 1199px) {
  .summary-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }

  .summary-grid .card.small {
    min-width: 0;
    padding: 14px 12px;
  }

  /* Billing grid stays 4 columns */
  .summary-grid.billing-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Tablet: Clean 3+3 split for summary, 4+4 for metrics */
@media (min-width: 769px) and (max-width: 1024px) {
  .summary-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  /* Billing grid: 2x2 on tablet */
  .summary-grid.billing-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.card {
  background: var(--header-bg);
  padding: 20px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  min-width: 180px;
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base);
  position: relative;
  z-index: 1;
}

.card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-lg);
  z-index: 99999;
}

/* Light Mode Cards - Clean & Professional */
[data-theme="light"] .card {
  background: var(--panel);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}

[data-theme="light"] .card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-md);
}

[data-theme="light"] .card .label {
  color: #64748b;
}

[data-theme="light"] .card .value {
  color: #1e293b;
}

[data-theme="light"] .card .hint {
  color: #94a3b8;
}

.card.small .label {
  color: var(--muted);
  font-size: 13px;
  font-family: var(--font-mono);
}

.card.small .hint {
  color: rgba(230, 237, 243, 0.7);
  font-size: 12px;
  margin-top: 6px;
}

[data-theme="light"] .card.small .hint {
  color: #6b7280;
}


/* Custom Tooltip Styles */
[data-tooltip] {
  position: relative;
  cursor: pointer;
}

[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  padding: 10px 14px;
  z-index: 99999 !important;
  background: rgba(10, 12, 16, 0.95);
  backdrop-filter: blur(12px);
  color: rgba(230, 237, 243, 0.9);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;
  white-space: normal;
  text-align: center;
  width: max-content;
  max-width: 200px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-hover);
  border-top: 2px solid var(--accent);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

[data-tooltip]::after {
  content: '';
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  z-index: 99999 !important;
  width: 24px;
  height: 4px;
  background: var(--accent);
  border-radius: 2px;
  box-shadow: 0 0 8px var(--accent-glow);
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-tooltip]:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

[data-tooltip]:hover::before {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Light mode tooltip */
[data-theme="light"] [data-tooltip]::before {
  background: rgba(255, 255, 255, 0.98);
  color: #374151;
  border-color: var(--border);
  border-top-color: var(--accent);
  box-shadow: var(--shadow-lg);
}

/* Mobile tooltip adjustments */
@media (max-width: 768px) {
  [data-tooltip]::before {
    max-width: 160px;
    font-size: 10px;
    padding: 8px 12px;
  }

  [data-tooltip]::after {
    width: 20px;
    height: 3px;
  }
}

/* Rich Tooltip for complex multi-line content (cost breakdowns, etc.) */
/* Global Rich Tooltip - appended to body to escape overflow clipping */
#global-rich-tooltip {
  position: fixed;
  z-index: 999999;
  min-width: 200px;
  max-width: 280px;
  padding: 10px 14px;
  background: rgba(10, 12, 16, 0.95);
  backdrop-filter: blur(12px);
  color: rgba(230, 237, 243, 0.9);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-hover);
  border-top: 2px solid var(--accent);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.05);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
  pointer-events: none;
  text-align: left;
  transform: translateY(-4px);
}

#global-rich-tooltip.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Connector bar - matching data-tooltip style */
#global-rich-tooltip::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 3px;
  background: var(--accent);
  border-radius: 2px;
  box-shadow: 0 0 8px var(--accent-glow);
}

#global-rich-tooltip .tooltip-header {
  font-size: 9px;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

#global-rich-tooltip .tooltip-divider {
  border-top: 1px solid var(--border);
  margin: 6px 0;
}

#global-rich-tooltip .tooltip-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 3px;
}

#global-rich-tooltip .tooltip-row:last-child {
  margin-bottom: 0;
}

#global-rich-tooltip .tooltip-label {
  color: rgba(148, 163, 184, 0.85);
  font-weight: 400;
}

#global-rich-tooltip .tooltip-value {
  color: rgba(230, 237, 243, 0.9);
  font-weight: 500;
}

#global-rich-tooltip .tooltip-total {
  color: var(--success);
  font-weight: 600;
}

/* Light mode global rich tooltip */
[data-theme="light"] #global-rich-tooltip {
  background: rgba(255, 255, 255, 0.98);
  color: #374151;
  border-color: var(--border);
  border-top-color: var(--accent);
  box-shadow: var(--shadow-lg);
}

[data-theme="light"] #global-rich-tooltip .tooltip-label {
  color: #6b7280;
}

[data-theme="light"] #global-rich-tooltip .tooltip-value {
  color: #374151;
}

/* Trigger element styling */
.cost-tooltip-trigger {
  cursor: help;
  border-bottom: 1px dotted rgba(148, 163, 184, 0.4);
}

.card .value {
  font-size: 24px;
  margin-top: 8px;
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.card.med {
  min-width: 160px;
}


.panel {
  background: var(--header-bg);
  padding: 20px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base);
  position: relative;
  overflow-x: auto;
}

.panel:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-lg);
}

/* Light Mode Panel - Enhanced depth and borders */
[data-theme="light"] .panel {
  background: var(--panel);
  border-color: var(--border);
  box-shadow: var(--shadow-md);
}

[data-theme="light"] .panel:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-lg);
}

.panel-header {
  font-family: var(--font-mono);
  font-weight: 400;
  margin-bottom: 12px;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  padding-left: 30px;
  /* Space for Y-axis */
  align-items: center;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-size: 14px;
  gap: 10px;
}

.panel-header svg {
  width: 20px;
  height: 20px;
  color: var(--accent);
  opacity: 0.8;
}

.chart-container-with-y {
  display: flex;
  flex: 1;
  min-height: 0;
  position: relative;
}

.chart-y-axis {
  position: relative;
  width: 60px;
  min-width: 60px;
  height: 100%;
  color: var(--muted);
  font-size: 10px;
  margin-right: 8px;
}

.chart-y-axis span {
  position: absolute;
  width: 100%;
  text-align: right;
  line-height: 1;
}

/* For 5 labels evenly distributed from top (max) to bottom (0) */
.chart-y-axis span:nth-child(1) {
  top: 0%;
  transform: translateY(0);
}

.chart-y-axis span:nth-child(2) {
  top: 25%;
  transform: translateY(-50%);
}

.chart-y-axis span:nth-child(3) {
  top: 50%;
  transform: translateY(-50%);
}

.chart-y-axis span:nth-child(4) {
  top: 75%;
  transform: translateY(-50%);
}

.chart-y-axis span:nth-child(5) {
  top: 100%;
  transform: translateY(-100%);
}

.chart-content {
  flex: 1;
  position: relative;
}

.chart-grid-line {
  stroke: var(--border);
  stroke-dasharray: 4;
  opacity: 0.3;
}

.panel-header span {
  font-family: var(--font-mono);
}

.refresh-btn {
  padding: 8px !important;
  min-width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  position: relative;
}

.refresh-icon {
  font-size: 18px;
  line-height: 1;
  display: inline-block;
  transition: transform 0.2s ease;
}

.refresh-btn.refreshing .refresh-icon,
.refresh-icon.refreshing {
  animation: refreshSpin 0.6s linear infinite;
  will-change: transform;
}

@keyframes refreshSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.instances-table {
  width: 100%;
  border-collapse: collapse;
}

.instances-table th {
  color: var(--muted);
  text-align: left;
  padding: 14px 18px;
  font-weight: 600;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 2px solid var(--border);
  font-family: var(--font-mono);
  white-space: nowrap;
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 10;
}

.instances-table td {
  padding: 16px 18px;
  border-top: 1px solid var(--border);
  vertical-align: middle;
  font-size: 13px;
  color: var(--text);
  font-family: var(--font-mono);
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.instances-table td.name {
  font-weight: 400;
  font-family: var(--font-mono);
}

.instances-table tr {
  transition: all var(--transition-fast);
}

.instances-table tr:hover {
  background: var(--input-focus-bg);
  transform: scale(1.001);
}

.instances-table tr:hover td {
  color: var(--text);
}

/* Light Mode Table - Enhanced readability */
[data-theme="light"] .instances-table th {
  background: #f8fafc;
  color: #475569;
  border-bottom-color: var(--border);
}

[data-theme="light"] .instances-table td {
  border-top-color: var(--border);
  color: var(--text);
}

[data-theme="light"] .instances-table tr:hover {
  background: rgba(37, 99, 235, 0.04);
}

[data-theme="light"] .instances-table tr:nth-child(even) {
  background: rgba(0, 0, 0, 0.01);
}

[data-theme="light"] .instances-table tr:nth-child(even):hover {
  background: rgba(37, 99, 235, 0.04);
}

/* Light Mode - Mobile card borders */
[data-theme="light"] .instances-table td.actions {
  border-top-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .instances-table td.name {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

.instances-table tr.deploying-row {
  cursor: pointer;
  background: rgba(234, 179, 8, 0.03);
}

.instances-table tr.deploying-row:hover {
  background: rgba(234, 179, 8, 0.08);
}

.instances-table tr.deploying-row.failed-row {
  background: rgba(239, 68, 68, 0.03);
  opacity: 0.7;
}

.instances-table tr.deploying-row.failed-row:hover {
  background: rgba(239, 68, 68, 0.08);
}

/* Removing row animation */
.instances-table tr.removing-row {
  background: rgba(239, 68, 68, 0.08);
  position: relative;
  opacity: 0.6;
  transition: opacity 0.4s ease, transform 0.4s ease, background 0.3s ease;
}

.instances-table tr.removing-row td {
  position: relative;
  transition: padding 0.3s ease;
}

.instances-table tr.removing-row td * {
  pointer-events: none;
}

.instances-table tr.removing-row::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(239, 68, 68, 0.1) 50%,
      transparent 100%);
  animation: removing-shimmer 1.5s infinite;
  pointer-events: none;
}

@keyframes removing-shimmer {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

/* Removing icon - SVG loader that matches action button icon style */
.removing-icon {
  animation: removing-spin 0.8s linear infinite;
  vertical-align: middle;
  margin-right: 4px;
}

@keyframes removing-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Removing button state */
.btn.ghost.removing-btn {
  color: var(--red) !important;
  opacity: 1 !important;
  cursor: wait !important;
  pointer-events: none;
}

.btn.ghost.removing-btn .removing-icon {
  stroke: var(--red);
}

.instances-table tr.removing-row {
  background: rgba(239, 68, 68, 0.06) !important;
}

.instances-table tr.removing-row .btn.ghost:not(.removing-btn) {
  opacity: 0.3;
}

/* Ports Display - base styles */
.ports-display {
  display: inline;
  vertical-align: middle;
}

@keyframes pulse-bg {

  0%,
  100% {
    background: rgba(234, 179, 8, 0.03);
  }

  50% {
    background: rgba(234, 179, 8, 0.06);
  }
}

.reference-col {
  font-size: 13px;
  color: var(--muted);
}

/* Pagination Controls */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px;
  border-top: 1px solid var(--border);
}

.pagination-btn {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text);
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}

.pagination-btn:hover:not(:disabled) {
  background: var(--card-hover);
  border-color: var(--border);
}

.pagination-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.pagination-info {
  color: var(--muted);
  font-size: 13px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(58, 139, 253, 0.15);
  color: var(--accent);
  white-space: nowrap;
  line-height: 1;
  border: 1px solid rgba(58, 139, 253, 0.2);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-fast);
}

.badge:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-md);
}

.status-dot {
  width: 6px;
  height: 6px;
  background-color: currentColor;
  border-radius: 50%;
  display: inline-block;
}

.badge.green {
  color: var(--green);
  border-color: rgba(34, 197, 94, 0.3);
  box-shadow: 0 0 12px var(--green-glow), inset 0 0 8px rgba(34, 197, 94, 0.1);
  background: rgba(34, 197, 94, 0.12);
}

[data-theme="light"] .badge.green {
  color: #15803d;
  background: rgba(22, 163, 74, 0.15);
  border-color: rgba(22, 163, 74, 0.3);
  box-shadow: none;
}

.badge.yellow {
  color: #FFD700;
  border-color: rgba(255, 215, 0, 0.4);
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.25), inset 0 0 8px rgba(255, 215, 0, 0.1);
  background: rgba(255, 215, 0, 0.15);
}

.badge.red {
  color: var(--red);
  border-color: rgba(239, 68, 68, 0.3);
  box-shadow: 0 0 12px var(--red-glow), inset 0 0 8px rgba(239, 68, 68, 0.1);
  background: rgba(239, 68, 68, 0.12);
}

.badge.orange {
  color: #f97316;
  border-color: rgba(249, 115, 22, 0.4);
  box-shadow: 0 0 12px rgba(249, 115, 22, 0.25), inset 0 0 8px rgba(249, 115, 22, 0.1);
  background: rgba(249, 115, 22, 0.15);
}

/* Security event badges - dark blue/grey/white palette */
.badge.neon-blue {
  color: #3a8bfd;
  border-color: rgba(58, 139, 253, 0.4);
  box-shadow: 0 0 12px rgba(58, 139, 253, 0.3), inset 0 0 8px rgba(58, 139, 253, 0.1);
  background: rgba(58, 139, 253, 0.15);
}

.badge.slate {
  color: #94a3b8;
  border-color: rgba(148, 163, 184, 0.4);
  box-shadow: 0 0 10px rgba(148, 163, 184, 0.2), inset 0 0 6px rgba(148, 163, 184, 0.1);
  background: rgba(148, 163, 184, 0.12);
}

.badge.sky {
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.4);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.3), inset 0 0 8px rgba(56, 189, 248, 0.1);
  background: rgba(56, 189, 248, 0.15);
}

/* Light Mode Badge Overrides */
[data-theme="light"] .badge {
  background: rgba(37, 99, 235, 0.1);
  color: #1d4ed8;
  border-color: rgba(37, 99, 235, 0.2);
  box-shadow: none;
}

[data-theme="light"] .badge.green {
  background: rgba(46, 204, 113, 0.1);
  color: #2ecc71;
  border-color: rgba(46, 204, 113, 0.2);
  box-shadow: none;
}



[data-theme="light"] .spinner-small {
  border-color: rgba(255, 215, 0, 0.3);
  border-top-color: #b49500;
}

[data-theme="light"] .badge.yellow {
  background: rgba(255, 215, 0, 0.15);
  color: #b49500;
  border-color: rgba(255, 215, 0, 0.4);
  box-shadow: none;
}

[data-theme="light"] .badge.red {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
  border-color: rgba(239, 68, 68, 0.2);
  box-shadow: none;
}

[data-theme="light"] .badge.orange {
  background: rgba(249, 115, 22, 0.12);
  color: #ea580c;
  border-color: rgba(249, 115, 22, 0.3);
  box-shadow: none;
}

[data-theme="light"] .badge.neon-blue {
  background: rgba(58, 139, 253, 0.12);
  color: #2563eb;
  border-color: rgba(58, 139, 253, 0.3);
  box-shadow: none;
}

[data-theme="light"] .badge.slate {
  background: rgba(100, 116, 139, 0.12);
  color: #475569;
  border-color: rgba(100, 116, 139, 0.3);
  box-shadow: none;
}

[data-theme="light"] .badge.sky {
  background: rgba(56, 189, 248, 0.12);
  color: #0284c7;
  border-color: rgba(56, 189, 248, 0.3);
  box-shadow: none;
}

.badge.blue {
  background: rgba(58, 139, 253, 0.1);
  color: var(--neon-blue);
  border-color: rgba(58, 139, 253, 0.2);
  box-shadow: 0 0 8px rgba(58, 139, 253, 0.15);
}

[data-theme="light"] .badge.blue {
  background: rgba(37, 99, 235, 0.1);
  color: #2563eb;
  border-color: rgba(37, 99, 235, 0.2);
  box-shadow: none;
}

/* Muted badge for deleted/removed instances */
.badge.muted {
  color: var(--muted);
  border-color: rgba(128, 128, 128, 0.3);
  box-shadow: none;
  background: rgba(128, 128, 128, 0.12);
  opacity: 0.8;
}

[data-theme="light"] .badge.muted {
  color: #6b7280;
  background: rgba(107, 114, 128, 0.1);
  border-color: rgba(107, 114, 128, 0.2);
  box-shadow: none;
}

/* Deleted instance row styling */
.instance-row.instance-deleted {
  opacity: 0.6;
  background: rgba(128, 128, 128, 0.05);
}

.instance-row.instance-deleted:hover {
  background: rgba(128, 128, 128, 0.08);
}

.instance-row.instance-deleted td {
  color: var(--muted);
}

.instance-row.instance-deleted .name {
  text-decoration: line-through;
  text-decoration-color: rgba(128, 128, 128, 0.4);
}

[data-theme="light"] .instance-row.instance-deleted {
  background: rgba(107, 114, 128, 0.05);
}

[data-theme="light"] .instance-row.instance-deleted:hover {
  background: rgba(107, 114, 128, 0.08);
}

/* Instances filter row - inside panel, tight above table */
.instances-filter-row {
  display: flex;
  align-items: center;
  padding: 0 0 6px 4px;
}

/* Show deleted instances toggle - Clean, integrated design */
.show-deleted-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  user-select: none;
  padding: 8px 14px 8px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.show-deleted-toggle:hover {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.06);
}

/* Hide the actual checkbox completely */
.show-deleted-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Toggle track/slider - sized to match table text */
.show-deleted-toggle .toggle-slider {
  position: relative;
  width: 34px;
  height: 17px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9px;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

/* Toggle knob */
.show-deleted-toggle .toggle-slider::before {
  content: '';
  position: absolute;
  width: 11px;
  height: 11px;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover state */
.show-deleted-toggle:hover .toggle-slider {
  border-color: rgba(255, 255, 255, 0.18);
}

.show-deleted-toggle:hover .toggle-slider::before {
  background: rgba(255, 255, 255, 0.5);
}

/* Checked state - track */
.show-deleted-toggle input:checked+.toggle-slider {
  background: rgba(59, 130, 246, 0.18);
  border-color: rgba(59, 130, 246, 0.35);
}

/* Checked state - knob */
.show-deleted-toggle input:checked+.toggle-slider::before {
  left: 19px;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
}

/* Label styling - matches table text size */
.show-deleted-toggle .toggle-label-text {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.2s ease;
  white-space: nowrap;
}

/* Checked label state */
.show-deleted-toggle input:checked~.toggle-label-text {
  color: var(--text);
}

/* Hover label state */
.show-deleted-toggle:hover .toggle-label-text {
  color: rgba(255, 255, 255, 0.6);
}

/* Light theme */
[data-theme="light"] .show-deleted-toggle:hover {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .show-deleted-toggle .toggle-slider {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .show-deleted-toggle .toggle-slider::before {
  background: rgba(0, 0, 0, 0.25);
}

[data-theme="light"] .show-deleted-toggle:hover .toggle-slider {
  border-color: rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .show-deleted-toggle:hover .toggle-slider::before {
  background: rgba(0, 0, 0, 0.35);
}

[data-theme="light"] .show-deleted-toggle input:checked+.toggle-slider {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.3);
}

[data-theme="light"] .show-deleted-toggle input:checked+.toggle-slider::before {
  background: #3b82f6;
  box-shadow: 0 0 5px rgba(59, 130, 246, 0.25);
}

[data-theme="light"] .show-deleted-toggle .toggle-label-text {
  color: rgba(0, 0, 0, 0.4);
}

[data-theme="light"] .show-deleted-toggle:hover .toggle-label-text {
  color: rgba(0, 0, 0, 0.55);
}

[data-theme="light"] .show-deleted-toggle input:checked~.toggle-label-text {
  color: var(--text);
}

/* Mobile responsive */
@media (max-width: 768px) {
  .instances-filter-row {
    justify-content: flex-start;
    padding: 0 0 10px 0;
  }
}

.actions {
  white-space: nowrap;
}

.actions-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
}

.actions-buttons .btn {
  min-width: 110px;
  justify-content: center;
  flex: 1;
  padding: 10px 16px;
}

.actions-buttons .btn svg,
.instances-table .actions-buttons .btn svg,
td.actions .actions-buttons .btn svg {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-right: 4px !important;
}

.activity-section {
  margin-top: 18px;
}

.activity-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 500px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

.activity-list::-webkit-scrollbar {
  width: 6px;
}

.activity-list::-webkit-scrollbar-track {
  background: transparent;
}

.activity-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}

.activity-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* Light mode activity list scrollbar */
[data-theme="light"] .activity-list {
  scrollbar-color: rgba(0, 0, 0, 0.12) transparent;
}

[data-theme="light"] .activity-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .activity-list::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.2);
}

.activity-empty-state {
  text-align: center;
  padding: 20px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 13px;
}

/* Match instances table td font size on large screens */
@media (min-width: 1600px) {
  .activity-empty-state {
    font-size: 14px;
  }
}

.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  background: var(--inner-bg);
  transition: background 0.2s;
}

.activity-item:hover {
  background: var(--input-focus-bg);
}

/* Light Mode Activity Items */
[data-theme="light"] .activity-item {
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid transparent;
}

[data-theme="light"] .activity-item:hover {
  background: rgba(37, 99, 235, 0.04);
  border-color: rgba(37, 99, 235, 0.1);
}

.activity-icon {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  color: var(--accent);
  font-size: 13px;
  flex-shrink: 0;
  color: var(--muted);
}

/* Error icon - static styling for clean, non-distracting UX */
.activity-icon-error {
  /* No animation - the red color and glow styling already distinguish errors effectively */
}

/* Activity trash icon - slightly larger only on very large screens */
.activity-trash-icon {
  width: 11px;
  height: 11px;
}

@media (min-width: 1600px) {
  .activity-trash-icon {
    width: 12px;
    height: 12px;
  }
}

/* Reduce activity icon size for screens < 1600px */
@media (max-width: 1599px) {
  .activity-icon {
    width: 22px;
    height: 22px;
    font-size: 11px;
  }
}

@media (max-width: 768px) {
  .activity-icon {
    width: 20px;
    height: 20px;
    font-size: 10px;
  }
}

.activity-content {
  flex: 1;
  min-width: 0;
  font-family: 'JetBrains Mono', monospace;
}

.activity-title {
  font-size: 10px;
  color: var(--text);
  margin-bottom: 3px;
  font-family: 'JetBrains Mono', monospace;
}

.activity-time {
  font-size: 9px;
  color: var(--muted);
  font-family: var(--font-mono);
}

.btn.ghost.danger {
  border-color: rgba(231, 76, 60, 0.25);
  color: #f29b9b;
}

.btn.ghost.danger:hover {
  border-color: rgba(231, 76, 60, 0.45);
  background: rgba(231, 76, 60, 0.08);
  color: #ffb6b6;
}

.icon-trash {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.small-panels .cards-row {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}

.settings-body {
  display: flex;
  justify-content: center;
  padding-bottom: 32px;
}

.settings-panel {
  width: 100%;
  max-width: 760px;
}

.settings-topbar {
  justify-content: center;
}

.settings-header {
  width: 100%;
  max-width: 760px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.settings-header h1 {
  margin: 0;
  font-size: var(--fs-xl);
}

.settings-panel h2 {
  margin: 0 0 18px 0;
  font-size: var(--fs-lg);
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 12px;
}

.settings-form {
  display: flex;
  flex-direction: column;
}

.settings-field {
  display: block;
  margin-bottom: 16px;
}

.settings-field span {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 6px;
}

.settings-field input,
.settings-row input {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: inherit;
}

.settings-field input:focus,
.settings-row input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(58, 139, 253, 0.1);
}

.hud-item.blocked .hud-icon-wrapper {
  color: var(--neon-blue);
  box-shadow: 0 0 10px rgba(58, 139, 253, 0.2);
}

/* Light Mode Anomalies Card Overrides */
[data-theme="light"] .hud-item {
  background: rgba(229, 231, 235, 0.5);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: none;
  transition: all 0.2s ease;
}

[data-theme="light"] .hud-item:hover {
  background: rgba(243, 244, 246, 0.8);
  border-color: rgba(37, 99, 235, 0.3);
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.06);
}

[data-theme="light"] .hud-icon-wrapper {
  background: rgba(243, 244, 246, 0.8);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: none;
  transition: all 0.2s ease;
}

[data-theme="light"] .hud-item:hover .hud-icon-wrapper {
  border-color: rgba(37, 99, 235, 0.4);
  box-shadow: 0 0 8px rgba(37, 99, 235, 0.12);
  background: rgba(255, 255, 255, 0.9);
}

/* Light Mode: Acknowledged Badge - Subtle Gray */
[data-theme="light"] .hud-item.acknowledged .hud-icon-wrapper {
  color: #6b7280;
  background: rgba(107, 114, 128, 0.1);
  border-color: rgba(107, 114, 128, 0.2);
  box-shadow: none;
}

[data-theme="light"] .hud-item.acknowledged:hover .hud-icon-wrapper {
  background: rgba(107, 114, 128, 0.15);
  border-color: rgba(107, 114, 128, 0.3);
  box-shadow: 0 0 6px rgba(107, 114, 128, 0.1);
}

/* Light Mode: Detected Badge - Medium Gray */
[data-theme="light"] .hud-item.detected .hud-icon-wrapper {
  color: #4b5563;
  background: rgba(75, 85, 99, 0.12);
  border-color: rgba(75, 85, 99, 0.25);
  box-shadow: 0 0 6px rgba(75, 85, 99, 0.08);
}

[data-theme="light"] .hud-item.detected:hover .hud-icon-wrapper {
  background: rgba(75, 85, 99, 0.18);
  border-color: rgba(75, 85, 99, 0.35);
  box-shadow: 0 0 8px rgba(75, 85, 99, 0.12);
}

/* Light Mode: Mitigated/Blocked Badge - Enhanced Blue */
[data-theme="light"] .hud-item.blocked .hud-icon-wrapper {
  color: #2563eb;
  background: rgba(37, 99, 235, 0.15);
  border-color: rgba(37, 99, 235, 0.3);
  box-shadow: 0 0 8px rgba(37, 99, 235, 0.12);
}

[data-theme="light"] .hud-item.blocked:hover .hud-icon-wrapper {
  background: rgba(37, 99, 235, 0.2);
  border-color: rgba(37, 99, 235, 0.5);
  box-shadow: 0 0 10px rgba(37, 99, 235, 0.18);
}

[data-theme="light"] .hud-label {
  color: var(--muted);
}

[data-theme="light"] .hud-value {
  color: var(--text);
  text-shadow: none;
}

.settings-subsection {
  margin-top: 18px;
}

.settings-subsection h3 {
  margin: 0 0 10px 0;
}

.settings-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.settings-row input {
  flex: 1;
}

.settings-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

.settings-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(230, 237, 243, 0.75);
}

.settings-toggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

.settings-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 24px;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  margin-bottom: 20px;
  width: 100%;
  box-sizing: border-box;
  overflow: visible;
}

section.metrics-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
  overflow: visible;
}

/* Metrics Section Header - Lifetime Overview */
.metrics-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding: 0 4px;
}

.metrics-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 400;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.metrics-section-title span {
  font-family: var(--font-mono);
}

.metrics-section-title svg {
  width: 20px;
  height: 20px;
  color: var(--accent);
  opacity: 0.8;
}

.metrics-section-subtitle {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px;
  color: var(--text-secondary);
  opacity: 0.7;
}

span.metrics-section-subtitle {
  font-family: 'JetBrains Mono', monospace !important;
}

@media (max-width: 768px) {
  .metrics-section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .metrics-section-title {
    font-size: 12px;
  }

  .metrics-section-subtitle {
    font-size: 10px;
  }
}

/* ===== METRICS GRID RESPONSIVE BREAKPOINTS ===== */

/* Desktop (≥1024px): All 6 cards in one row, full width */
@media (min-width: 1024px) {

  .metrics-grid,
  section.metrics-grid {
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 16px;
    width: 100% !important;
  }

  .metrics-grid .metric-card {
    padding: 15px 11px;
    min-width: 0;
  }
}

/* Small Desktop (900px-1023px): All 6 cards in one row, compact */
@media (min-width: 900px) and (max-width: 1023px) {

  .metrics-grid,
  section.metrics-grid {
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 10px;
    width: 100% !important;
  }

  .metrics-grid .metric-card {
    padding: 12px 8px;
  }

  .metrics-grid .metric-card .value {
    font-size: 18px;
  }

  .metrics-grid .metric-card .label {
    font-size: 10px;
  }
}

/* Tablet (768px-899px): Clean 3+3 split */
@media (min-width: 768px) and (max-width: 899px) {

  .metrics-grid,
  section.metrics-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px;
    width: 100% !important;
  }

  .metrics-grid .metric-card {
    padding: 14px 10px;
  }

  .metrics-grid .metric-card .value {
    font-size: 20px;
  }
}

/* Large Mobile (576px-767px): Clean 3 columns */
@media (min-width: 576px) and (max-width: 767px) {

  .metrics-grid,
  section.metrics-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px;
    width: 100% !important;
  }

  .metrics-grid .metric-card {
    padding: 12px 8px;
  }

  .metrics-grid .metric-card .value {
    font-size: 18px;
  }

  .metrics-grid .metric-card .label {
    font-size: 10px;
  }
}

/* Small Mobile (<576px): 2 columns */
@media (max-width: 575px) {

  .metrics-grid,
  section.metrics-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px;
    width: 100% !important;
  }

  .metrics-grid .metric-card {
    padding: 12px 10px;
  }

  .metrics-grid .metric-card .value {
    font-size: 18px;
  }

  .metrics-grid .metric-card .label {
    font-size: 10px;
  }
}

/* Deploy Modal - Responsive width for desktop */
@media (min-width: 1024px) and (max-width: 1199px) {
  #deployModal .modal-panel {
    max-width: 480px !important;
    width: 100% !important;
  }
}

.metric-card {
  background: var(--header-bg);
  padding: 20px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  width: 100%;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base);
  position: relative;
  z-index: 1;
}

.metric-card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-lg);
}

/* Light Mode Metric Cards */
[data-theme="light"] .metric-card {
  background: var(--panel);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}

[data-theme="light"] .metric-card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-md);
}

[data-theme="light"] .metric-card .label {
  color: #64748b;
}

[data-theme="light"] .metric-card .value {
  color: #1e293b;
}

[data-theme="light"] .metric-card .hint {
  color: #94a3b8;
  z-index: 99999;
}

.metric-card .label {
  color: var(--muted);
  font-size: 13px;
  font-family: var(--font-mono);
}

.metric-card .value {
  font-size: 24px;
  font-weight: 600;
  font-family: var(--font-mono);
}

.metric-card .hint {
  color: rgba(230, 237, 243, 0.7);
  font-size: 13px;
}

[data-theme="light"] .metric-card .hint {
  color: #6b7280;
}

.instance-detail-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: stretch;
}

.detail-column {
  flex: 1 1 340px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.detail-card {
  background: var(--header-bg);
  border-radius: var(--radius-lg);
  padding: 16px;
  border: 1px solid var(--border-hover);
  box-shadow: var(--shadow-lg);
}

/* Light Mode Detail Cards */
[data-theme="light"] .detail-card {
  background: var(--panel);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}

[data-theme="light"] .detail-card h3 {
  color: #475569;
}

[data-theme="light"] .detail-label {
  color: #64748b;
}

[data-theme="light"] .detail-value {
  color: #1e293b;
}

.detail-card h3 {
  font-family: var(--font-mono);
  margin: 0 0 14px 0;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 400;
}

.detail-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}

.detail-rows span {
  color: var(--muted);
  font-size: 12px;
}

.detail-rows strong {
  font-size: 16px;
  font-family: var(--font-mono);
}

.chart-placeholder {
  border-radius: var(--radius-lg);
  background: var(--inner-bg);
  padding: 14px;
  border: 1px solid var(--border-hover);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}

.chart-title {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--muted);
}

.chart-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}

.chart-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.chart-controls .time-range-toggle {
  display: flex;
  gap: 4px;
}

.chart-controls .range-btn {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--input-border);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 4px;
}

.chart-controls .range-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
}

.chart-controls .range-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

[data-theme="light"] .chart-controls .range-btn {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
  color: var(--text-secondary);
}

[data-theme="light"] .chart-controls .range-btn:hover {
  background: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .chart-controls .range-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

.chart-title-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chart-time-range-selector {
  display: flex;
  gap: 2px;
  background: var(--inner-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px;
  width: fit-content;
  flex-shrink: 0;
}

.time-range-btn {
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  letter-spacing: 0.3px;
  white-space: nowrap;
  min-width: auto;
}

.time-range-btn:hover {
  color: var(--text);
  background: var(--header-bg);
}

.time-range-btn.active {
  color: var(--text);
  background: var(--accent);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

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

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.legend-color {
  width: 12px;
  height: 3px;
  border-radius: 2px;
  flex-shrink: 0;
}

.legend-color.legend-in {
  background: #3a8bfd;
  box-shadow: 0 0 6px rgba(58, 139, 253, 0.5);
}

.legend-color.legend-out {
  background: #cbd5e1;
  box-shadow: 0 0 6px rgba(203, 213, 225, 0.5);
}

.legend-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.3px;
}

.legend-sublabel {
  font-weight: 400;
  color: var(--muted);
  font-size: 10px;
}

/* Volume chart legend - larger size */
.volume-chart-card .legend-item {
  gap: 8px;
}

.volume-chart-card .legend-color {
  width: 16px;
  height: 4px;
  border-radius: 2px;
}

.volume-chart-card .legend-label {
  font-size: 13px;
  font-weight: 600;
}

.volume-chart-card .legend-sublabel {
  font-size: 12px;
}

/* Volume chart specific axis styling - High specificity to override general chart-axis */
.chart-axis.volume-axis {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0 12px 0;
  margin-top: 20px;
  border-top: 2px solid var(--border);
  min-height: 50px;
  height: 50px;
  width: 100%;
  max-width: 100%;
  background: rgba(0, 0, 0, 0.1);
  visibility: visible !important;
  opacity: 1 !important;
  box-sizing: border-box;
  position: relative;
  z-index: 100;
}

[data-theme="light"] .chart-axis.volume-axis {
  background: rgba(0, 0, 0, 0.02);
}

.chart-axis.volume-axis span {
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px;
  padding: 4px 1px;
  opacity: 1 !important;
  visibility: visible !important;
  white-space: nowrap;
  display: block !important;
  line-height: 1.4;
  text-align: center;
  flex: 1 1 0;
  min-width: 0;
}

/* Dark theme - ensure high contrast */
[data-theme="dark"] .chart-axis.volume-axis span,
.chart-axis.volume-axis span {
  color: #ffffff !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 1), 0 0 8px rgba(0, 0, 0, 0.5);
}

[data-theme="light"] .chart-axis.volume-axis span {
  color: #000000 !important;
  opacity: 1 !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
  font-weight: 700 !important;
}

/* Volume chart tooltip styles - compact and responsive */
.volume-chart-card svg .tooltip-bg {
  fill: rgba(15, 23, 42, 0.95);
  stroke: var(--border);
  stroke-width: 0.5;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
}

.volume-chart-card svg .tooltip-value,
.volume-chart-card svg .tooltip-time {
  font-family: var(--font-mono);
  fill: var(--text);
  font-weight: 600;
  letter-spacing: 0;
}

.volume-chart-card svg .tooltip-time {
  fill: var(--muted);
  font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* VOLUME CHART - CLEAN CONTAINED LAYOUT                                       */
/* ═══════════════════════════════════════════════════════════════════════════ */

.volume-chart-card {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.volume-chart-card .chart-placeholder {
  display: flex;
  flex-direction: column;
  padding: 16px;
  box-sizing: border-box;
  width: 100%;
  flex: 1;
}

.volume-chart-card .chart-placeholder.large {
  min-height: 280px;
}

.volume-chart-card .chart-header-row {
  flex-shrink: 0;
  margin-bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Chart area wrapper - contains Y-axis + chart content */
.volume-chart-card .chart-container-with-y {
  position: relative;
  flex: 1;
  min-height: 180px;
  box-sizing: border-box;
  padding-left: 58px;
  /* Space for Y-axis */
}

/* Y-axis - absolutely positioned on the left, full height */
.volume-chart-card .chart-y-axis {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 50px !important;
  padding-right: 8px !important;
  box-sizing: border-box !important;
}

.volume-chart-card .chart-y-axis span {
  position: absolute !important;
  right: 8px !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--text-secondary) !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  transform: translateY(-50%) !important;
}

/* Top label (max value) */
.volume-chart-card .chart-y-axis span:first-child {
  top: 0 !important;
  transform: translateY(0) !important;
}

/* Middle label (50%) */
.volume-chart-card .chart-y-axis span:nth-child(2) {
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* Bottom label (0) - align with baseline */
.volume-chart-card .chart-y-axis span:last-child {
  top: 100% !important;
  transform: translateY(-100%) !important;
}

/* Chart content - fills remaining space, clips overflow */
.volume-chart-card .chart-content {
  position: absolute !important;
  top: 0 !important;
  left: 58px !important;
  right: 0 !important;
  bottom: 0 !important;
  overflow: hidden !important;
  /* Critical: clips bars */
  box-sizing: border-box !important;
}

/* SVG fills the chart content area */
.volume-chart-card .chart-content svg {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* X-axis - aligned with chart content (not Y-axis) */
.volume-chart-card .chart-axis.volume-axis {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  margin-top: 8px;
  padding-left: 58px;
  /* Y-axis width (50px) + gap (8px) */
  box-sizing: border-box;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
}

.volume-chart-card .chart-axis.volume-axis span {
  flex-shrink: 0;
}

/* Ensure SVG elements are visible */
.volume-chart-card .chart-content svg path.data-path,
.volume-chart-card .chart-content svg rect.data-bar {
  opacity: 1;
  visibility: visible;
}

.chart-placeholder svg {
  width: 100%;
  height: 120px;
}

.chart-svg {
  overflow: visible;
}

.chart-y-label {
  font-size: 0.25em;
  fill: var(--muted);
  font-weight: 400;
  text-anchor: start;
}

.chart-metric-label {
  font-size: 10px;
  fill: var(--muted);
  font-weight: 600;
  text-anchor: middle;
  font-family: var(--font-mono);
}

.alert-status-bar {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.alert-status-label {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
}

.alert-status-label strong {
  color: var(--text);
  font-weight: 600;
}

.alert-progress {
  width: 100%;
  height: 6px;
  background: var(--input-bg);
  border-radius: 3px;
  overflow: hidden;
}

.alert-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--green), #2ecc71);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.alert-count {
  color: var(--text);
}

.alert-count.has-alerts {
  color: var(--yellow);
}

.anomalies-distribution {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.pie-chart-container {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
}

[data-theme="light"] .credit-info-card {
  background: var(--panel);
}

/* Light Mode: remove borders on key containers so only glow/shadow defines edges */
[data-theme="light"] .card,
[data-theme="light"] .panel,
[data-theme="light"] .metric-card,
[data-theme="light"] .detail-card,
[data-theme="light"] .hud-panel,
[data-theme="light"] .topbar.global-header,
[data-theme="light"] .beta-credit-banner,
[data-theme="light"] .beta-credit-success,
[data-theme="light"] .balance-topup-row,
[data-theme="light"] .instance-detail-section,
[data-theme="light"] .order-summary,
[data-theme="light"] .crypto-details,
[data-theme="light"] .payment-method-card,
[data-theme="light"] .chart-placeholder,
[data-theme="light"] .hud-item,
[data-theme="light"] .billing-period-toggle {
  border-color: transparent !important;
  border-width: 0 !important;
}

/* Dark Mode: use a soft light grey border on containers for a sober look */
[data-theme="dark"] .card,
[data-theme="dark"] .panel,
[data-theme="dark"] .metric-card,
[data-theme="dark"] .detail-card,
[data-theme="dark"] .hud-panel,
[data-theme="dark"] .topbar.global-header,
[data-theme="dark"] .beta-credit-banner,
[data-theme="dark"] .beta-credit-success,
[data-theme="dark"] .balance-topup-row,
[data-theme="dark"] .instance-detail-section,
[data-theme="dark"] .order-summary,
[data-theme="dark"] .crypto-details,
[data-theme="dark"] .payment-method-card,
[data-theme="dark"] .chart-placeholder,
[data-theme="dark"] .hud-item,
[data-theme="dark"] .credit-info-card,
[data-theme="dark"] .balance-display-header,
[data-theme="dark"] .billing-period-toggle {
  border-color: var(--border) !important;
  border-width: 1px !important;
}

/* Remove border override for credit info card in light mode - use default border */
[data-theme="light"] .credit-info-card {
  border-color: var(--border);
}

/* Softer borders for header elements in light mode */
[data-theme="light"] .balance-display-header {
  border-color: rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .balance-display-header:hover {
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .user {
  border-color: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .user:hover {
  border-color: rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.02);
}

[data-theme="light"] .top-actions #themeToggle {
  border-color: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .top-actions #themeToggle:hover {
  border-color: rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.02);
}

.pie-chart {
  width: 160px;
  height: 160px;
  flex-shrink: 0;
}

.pie-legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  flex-shrink: 0;
}

.legend-label {
  flex: 1;
  color: var(--muted);
}

.legend-value {
  color: var(--text);
  font-weight: 600;
  font-family: var(--font-mono);
}

.chart-placeholder polyline {
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.35));
}

.chart-axis {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.3px;
  font-family: var(--font-mono);
  padding-top: 8px;
  margin-top: 4px;
}

/* Bandwidth chart X-axis specific styling */
#bandwidthChartXAxis {
  display: flex !important;
  justify-content: space-between;
  padding: 8px 0 0 70px;
  /* Account for Y-axis label + Y-axis width */
  margin-top: 8px;
  font-size: 11px;
  color: var(--text);
  opacity: 0.8;
}

#bandwidthChartXAxis span {
  font-family: var(--font-mono);
  font-weight: 500;
}

.control-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.control-meta {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.deployment-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: var(--card-hover);
  border-radius: 8px;
  border: 1px solid var(--border);
}

.deployment-label {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}

.deployment-info strong {
  font-size: 18px;
  color: var(--text);
  font-weight: 600;
  font-family: var(--font-mono);
}

/* Modal */
.modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 60;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  overflow-y: auto;
  animation: fadeIn var(--transition-base);
}

.modal.active {
  display: flex;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

/* Copyable reference in transaction history */
.ref-copyable {
  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
  font-size: 11px;
  padding: 2px 6px;
  background: rgba(var(--accent-rgb), 0.1);
  border-radius: 3px;
  transition: background 0.2s ease;
}

.ref-copyable:hover {
  background: rgba(var(--accent-rgb), 0.2);
  text-decoration: underline;
}

.modal-panel {
  background: var(--surface-elevated);
  width: 100%;
  max-width: 500px;
  border-radius: 8px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xl), var(--shadow-glow);
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 28px;
  animation: modalSlideIn var(--transition-base);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  font-family: var(--font-mono);
}

/* Ensure all text in modals uses JetBrains Mono */
.modal-panel *,
.modal-content *,
.deploy-progress-panel * {
  font-family: var(--font-mono);
}

/* Exceptions for icons and decorative elements */
.modal-panel svg,
.modal-content svg,
.deploy-progress-panel svg {
  font-family: inherit;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(20px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}



.modal-header {
  font-weight: 700;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
}

.modal-header h2 {
  margin: 0;
  flex: 1;
  font-family: var(--font-mono);
}

.modal-header .btn {
  margin-left: auto;
  padding: 4px 8px;
  min-width: auto;
  font-size: 18px;
  line-height: 1;
}

.modal-content,
.modal-panel {
  background: var(--surface-elevated);
  padding: 20px;
  border-radius: var(--radius-lg);
  width: 420px;
  max-width: calc(100vw - 32px);
  position: relative;
  border: 1px solid var(--border-hover);
  box-shadow: var(--shadow-xl);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all var(--transition-base);
  font-family: var(--font-mono);
  overflow-x: hidden;
  overflow-y: auto;
}

.modal-content:hover,
.modal-panel:hover {
  border-color: rgba(59, 130, 246, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 20px rgba(59, 130, 246, 0.1);
}

.modal-content:hover::before,
.modal-panel:hover::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), #2563eb, var(--accent));
  background-size: 200% 100%;
  animation: shimmer 3s ease-in-out infinite;
  z-index: 1;
}

[data-theme="light"] .modal-panel,
[data-theme="light"] .modal-content {
  background: #ffffff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04), 0 0 2px rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .modal-panel:hover,
[data-theme="light"] .modal-content:hover,
[data-theme="light"] .deploy-progress-panel:hover {
  border-color: rgba(37, 99, 235, 0.5);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06), 0 0 8px rgba(37, 99, 235, 0.08);
}

[data-theme="light"] .modal-content:hover::before,
[data-theme="light"] .modal-panel:hover::before {
  background: linear-gradient(90deg, var(--accent), #2563eb, var(--accent));
}

[data-theme="light"] .deploy-progress-panel {
  background: #ffffff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04), 0 0 2px rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .modal-content input,
[data-theme="light"] .modal-panel input,
[data-theme="light"] .modal-content select,
[data-theme="light"] .modal-panel select,
[data-theme="light"] .payment-method-card {
  background-color: rgba(243, 244, 246, 0.7) !important;
  color: #111827 !important;
  border-color: #d1d5db !important;
  border-radius: var(--radius-lg);
}

[data-theme="light"] .modal-content input::placeholder,
[data-theme="light"] .modal-panel input::placeholder {
  color: #6b7280;
}

.modal-content p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  font-family: var(--font-mono);
}

.modal-form label {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family: var(--font-mono);
}

.modal-form input,
.modal-form textarea,
.modal-form select {
  width: 100%;
  padding: 12px 32px 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--text);
  font-size: 12px;
  transition: all 0.2s;
  font-family: var(--font-mono);
}

.modal-form input::placeholder,
.modal-form textarea::placeholder,
.modal-form select::placeholder {
  color: var(--placeholder);
}

.modal-form input:hover,
.modal-form textarea:hover,
.modal-form select:hover {
  background: var(--input-focus-bg);
  border-color: var(--accent);
}

.modal-form input:focus,
.modal-form textarea:focus,
.modal-form select:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--input-focus-bg);
  box-shadow: 0 0 0 3px rgba(58, 139, 253, 0.1);
}

/* Premium Textarea Styling */
.modal-body textarea,
.modal-panel textarea {
  width: 100%;
  min-height: 140px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--text);
  font-size: 13px;
  font-family: var(--font-mono);
  line-height: 1.6;
  transition: all 0.25s ease;
  box-sizing: border-box;
  resize: vertical;
}

.modal-body textarea::placeholder,
.modal-panel textarea::placeholder {
  color: var(--placeholder);
  opacity: 0.7;
}

.modal-body textarea:hover,
.modal-panel textarea:hover {
  background: var(--input-focus-bg);
  border-color: rgba(59, 130, 246, 0.4);
  box-shadow: 0 0 0 2px var(--accent-glow);
}

.modal-body textarea:focus,
.modal-panel textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--input-focus-bg);
  box-shadow: 0 0 0 3px var(--accent-glow), 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Custom scrollbar for textarea */
.modal-body textarea::-webkit-scrollbar,
.modal-panel textarea::-webkit-scrollbar {
  width: 8px;
}

.modal-body textarea::-webkit-scrollbar-track,
.modal-panel textarea::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 4px;
}

.modal-body textarea::-webkit-scrollbar-thumb,
.modal-panel textarea::-webkit-scrollbar-thumb {
  background: rgba(59, 130, 246, 0.3);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.modal-body textarea::-webkit-scrollbar-thumb:hover,
.modal-panel textarea::-webkit-scrollbar-thumb:hover {
  background: rgba(59, 130, 246, 0.5);
}

/* Light mode textarea */
[data-theme="light"] .modal-body textarea,
[data-theme="light"] .modal-panel textarea {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .modal-body textarea:hover,
[data-theme="light"] .modal-panel textarea:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(59, 130, 246, 0.3);
}

[data-theme="light"] .modal-body textarea:focus,
[data-theme="light"] .modal-panel textarea:focus {
  background: #fff;
  border-color: var(--accent);
}

[data-theme="light"] .modal-body textarea::-webkit-scrollbar-track,
[data-theme="light"] .modal-panel textarea::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.02);
}

[data-theme="light"] .modal-body textarea::-webkit-scrollbar-thumb,
[data-theme="light"] .modal-panel textarea::-webkit-scrollbar-thumb {
  background: rgba(59, 130, 246, 0.25);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  font-family: var(--font-mono);
}

.modal-actions .btn {
  padding: 8px 16px;
  font-size: 14px;
  line-height: 1;
  height: 36px;
  min-width: 80px;
  box-sizing: border-box;
}

/* Settings Modal Styles */
.setting-section {
  margin-bottom: 24px;
}

.setting-section h3 {
  font-size: 14px;
  margin-bottom: 12px;
  color: var(--text);
  font-family: var(--font-mono);
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: var(--input-bg);
  border-radius: 8px;
  border: 1px solid var(--border);
  font-family: var(--font-mono);
}

.setting-title {
  font-weight: 500;
  font-size: 14px;
  color: var(--text);
  font-family: var(--font-mono);
}

.setting-desc {
  font-size: 12px;
  color: var(--muted);
  font-family: var(--font-mono);
}

.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 24px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

.switch input:checked+.slider {
  background-color: var(--accent);
}

.switch input:checked+.slider:before {
  transform: translateX(16px);
}

.api-key-input {
  font-family: monospace;
  letter-spacing: 1px;
}

/* Deployment Progress Side Panel */
#deployProgressModal,
#instanceDetailsModal {
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

#deployProgressModal .deploy-progress-panel,
#instanceDetailsModal .deploy-progress-panel {
  max-width: 90vw;
  max-height: 90vh;
  animation: fadeInScale 0.3s ease;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

@keyframes fadeInScale {
  from {
    transform: scale(0.95);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Instance Details Content */
.instance-details-content {
  text-align: left;
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.instance-detail-section {
  background: var(--card-hover);
  padding: 20px;
  border-radius: 0 !important;
  border: 1px solid var(--border-hover);
  box-shadow: var(--shadow-lg);
}

.detail-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  margin: 0 0 16px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.detail-item:last-child {
  border-bottom: none;
}

.detail-label {
  color: var(--muted);
  font-size: 13px;
}

.detail-value {
  color: #e6edf3;
  font-size: 14px;
  font-weight: 500;
}

.ports-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.detail-description {
  color: rgba(230, 237, 243, 0.8);
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
  padding: 12px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
}

.deploy-progress-panel {
  background: var(--surface-elevated);
  width: 100%;
  max-width: 500px;
  border-radius: 8px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xl), var(--shadow-glow);
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
  padding: 28px;
  animation: modalSlideIn var(--transition-base);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  font-family: var(--font-mono);
}

.deploy-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
}

.deploy-modal-close:hover {
  background: rgba(0, 0, 0, 0.6);
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--text);
}

[data-theme="light"] .deploy-modal-close {
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.15);
}

[data-theme="light"] .deploy-modal-close:hover {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.3);
  color: var(--accent);
}

.deploy-progress-panel:hover {
  border-color: rgba(59, 130, 246, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 20px rgba(59, 130, 246, 0.1);
}




.deploy-icon-container {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.deploy-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Circular progress ring - SVG-based for accuracy */
.deploy-progress-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  transform: rotate(-90deg);
  will-change: transform;
  backface-visibility: hidden;
}

.deploy-progress-ring svg {
  width: 100%;
  height: 100%;
}

.deploy-progress-ring-bg {
  fill: none;
  stroke: var(--border);
  stroke-width: 3;
}

.deploy-progress-ring-fill {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 283;
  /* 2 * π * 45 (radius) */
  stroke-dashoffset: 283;
  transition: stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.deploy-svg-stroke {
  stroke: var(--accent);
  stroke-width: 1.5;
}

.deploy-svg-fill {
  fill: var(--accent);
  opacity: 0.8;
}

[data-theme="light"] .deploy-svg-stroke {
  stroke: var(--accent);
}

[data-theme="light"] .deploy-svg-fill {
  fill: var(--accent);
  opacity: 0.9;
}



.deploy-icon-glow {
  display: none;
}

@keyframes deploy-pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.7;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes bounce {

  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
  }

  50% {
    transform: translate(-50%, -50%) scale(1.1);
  }
}

.deploy-subtitle {
  margin: 0 0 24px 0;
  font-size: 14px;
  color: var(--muted);
  font-family: var(--font-mono);
}

.deploy-stages {
  text-align: left;
  margin: 24px 0 0 0;
}

.deploy-stage {
  display: flex;
  gap: 16px;
  opacity: 0.4;
  transition: all 0.3s ease;
}

.deploy-stage.active {
  opacity: 1;
}

.deploy-stage.completed {
  opacity: 0.7;
}

.deploy-stage.completed .stage-dot {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 12px rgba(58, 139, 253, 0.4);
}

.deploy-stage.completed .stage-dot::after {
  content: '✓';
  color: #fff;
  font-size: 10px;
  font-weight: bold;
}

.deploy-stage.active .stage-dot {
  background: var(--accent);
  border-color: var(--accent);
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(58, 139, 253, 0.4);
  }

  50% {
    box-shadow: 0 0 0 8px rgba(58, 139, 253, 0);
  }
}

.stage-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20px;
}

.stage-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.stage-line {
  width: 2px;
  height: 32px;
  background: var(--border);
  margin: 4px 0;
}

.deploy-stage.completed .stage-line {
  background: linear-gradient(to bottom, var(--accent), rgba(58, 139, 253, 0.2));
}

.stage-content {
  padding-bottom: 20px;
}

.stage-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 2px;
  font-family: var(--font-mono);
}

.stage-desc {
  display: block;
  font-size: 12px;
  color: var(--muted);
  font-family: var(--font-mono);
}

.deploy-progress-bar {
  height: 4px;
  background: var(--input-bg);
  border-radius: 2px;
  overflow: hidden;
  margin: 20px 0 16px;
}

.deploy-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #60a5fa);
  border-radius: 2px;
  width: 0%;
  transition: width 0.5s ease;
}

.deploy-status {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  font-family: var(--font-mono);
}

.deploy-complete .deploy-icon-ring {
  animation: none;
  border-top-color: var(--accent);
  border-right-color: var(--accent);
  border-bottom-color: var(--accent);
  border-left-color: var(--accent);
}

.deploy-complete .deploy-icon {
  animation: none;
}

.deploy-complete .stage-dot {
  background: var(--accent);
  border-color: var(--accent);
}

.deploy-complete #stage-complete .stage-dot {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 12px rgba(58, 139, 253, 0.5);
}

.deploy-complete #stage-complete .stage-dot::after {
  content: '✓';
  color: #fff;
  font-size: 11px;
  font-weight: bold;
}

.deploy-complete #stage-complete .stage-label {
  color: #e6edf3;
}

.deploy-error .deploy-progress-ring-fill {
  stroke: var(--red);
  stroke-dashoffset: 0;
}

.deploy-error .deploy-icon {
  animation: none;
}

.deploy-stage.error .stage-dot {
  background: #ef4444;
  border-color: #ef4444;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.5);
}

.deploy-stage.error .stage-dot::after {
  content: '✕';
  color: #fff;
  font-size: 10px;
  font-weight: bold;
}

.deploy-stage.error .stage-label {
  color: #ef4444;
}

.deploy-status.error {
  color: #ef4444;
}

.deploy-error .deploy-progress-fill {
  background: linear-gradient(90deg, #ef4444, #f87171);
}

/* Drawer */
.drawer {
  position: fixed;
  right: 0;
  top: 0;
  height: 100%;
  width: 380px;
  background: var(--panel);
  /* box-shadow: -20px 0 40px rgba(0, 0, 0, 0.6); Removed to prevent leak when closed */
  transform: translateX(100%);
  transition: transform .28s;
  z-index: 70;
  padding: 18px;
  border-left: 1px solid rgba(255, 255, 255, 0.03);
}

.drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}

.detail-grid>div {
  background: rgba(255, 255, 255, 0.01);
  padding: 12px;
  border-radius: 8px;
}

.detail-grid b {
  color: var(--muted);
  font-size: 12px;
  display: block;
  margin-bottom: 4px;
}

.drawer-actions {
  margin-top: 16px;
  display: flex;
  gap: 8px;
}

/* ====== AUTH PAGES STYLES ====== */
/* Professional, Clean & Fully Responsive Authentication Design */

#auth-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

/* Auth page theme toggle - smaller on mobile */
@media (max-width: 767px) {
  .auth-bg #themeToggle {
    top: 12px !important;
    right: 12px !important;
    padding: 6px !important;
  }

  .auth-bg #themeToggle svg {
    width: 18px;
    height: 18px;
  }
}

/* ===== BASE AUTH LAYOUT ===== */
.auth-bg {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  position: relative;
  z-index: 1;
  overflow: hidden;
  background: #0a0a0a;
}

[data-theme="dark"] .auth-bg {
  background: #0a0a0a;
}

.auth-container {
  width: 100%;
  max-width: 480px;
  padding: 24px;
  margin: 0 auto;
  margin: 0 auto;
}

/* Mobile Header Spacing Fix */
@media (max-width: 1023px) {
  .auth-content {
    justify-content: flex-start;
    padding-top: 0;
    margin-top: clamp(16px, 4vw, 28px);
    /* Force spread from top (tuned) */
    position: relative;
    /* For pseudo-element positioning */
  }

  /* Support badge - clean spacing, no splitter here anymore */
  .support-badge {
    position: relative;
    margin-bottom: 0;
  }

  .support-badge::after {
    display: none;
  }

  /* First splitter - hidden on mobile for cleaner look */
  .auth-brand-header {
    padding-bottom: 0;
  }

  .auth-brand-header::after {
    display: none;
  }
}

/* ===== CINEMATIC SLIDESHOW LAYOUT ===== */
.auth-container,
.auth-container.split-layout {
  max-width: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
}

.auth-form-wrapper {
  width: 100%;
  max-width: 560px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 24px 60px;
  box-sizing: border-box;
  /* Mobile: visible by default */
  opacity: 1;
  transform: none;
}

/* ===== DESKTOP SLIDESHOW LAYOUT (≥1024px) ===== */
@media (min-width: 1024px) {

  .auth-container,
  .auth-container.split-layout {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0;
    position: relative;
  }

  /* ===== PHASE 1: CENTERED BRANDING (before slideshow) ===== */

  /* Branding takes full width, centered */
  .auth-container .auth-content,
  .auth-container.split-layout .auth-content {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 60px;
    text-align: center;
    transition: all 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .auth-container .auth-content h1,
  .auth-container .auth-content h2 {
    text-align: center;
    transition: text-align 0.3s ease;
  }

  .auth-container .auth-features {
    justify-content: center;
    transition: justify-content 0.3s ease;
  }

  .auth-container .support-badge {
    align-self: center;
    transition: align-self 0.3s ease;
    /* margin-top handled by features margin-bottom for consistent spacing */
  }

  .auth-container .auth-brand-header {
    align-items: center;
    transition: align-items 0.3s ease;
  }

  .auth-container .brand-main {
    align-items: center;
    transition: align-items 0.3s ease;
  }

  .auth-container .bittensor-powered {
    margin-left: auto;
    margin-right: auto;
  }

  /* Auth card hidden off-screen right */
  .auth-container .auth-form-wrapper,
  .auth-container.split-layout .auth-form-wrapper {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 50%;
    max-width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 80px 40px 60px;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* No divider before slideshow */
  .auth-container::after,
  .auth-container.split-layout::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1px;
    height: 0%;
    background: linear-gradient(to bottom,
        transparent 0%,
        rgba(59, 130, 246, 0.3) 20%,
        rgba(59, 130, 246, 0.6) 50%,
        rgba(59, 130, 246, 0.3) 80%,
        transparent 100%);
    box-shadow:
      0 0 12px rgba(59, 130, 246, 0.4),
      0 0 24px rgba(59, 130, 246, 0.2);
    pointer-events: none;
    z-index: 10;
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
  }

  /* ===== PHASE 2: SLIDESHOW ACTIVE - Full screen auth card ===== */

  /* Branding fades out and slides away */
  .auth-container.slideshow-active .auth-content {
    flex: 0 0 0%;
    width: 0%;
    max-width: 0%;
    min-height: 100vh;
    padding: 0;
    opacity: 0;
    transform: translateX(-100px);
    overflow: hidden;
    pointer-events: none;
  }

  /* Auth card takes full screen */
  .auth-container.slideshow-active {
    align-items: flex-start !important;
  }

  .auth-container.slideshow-active .auth-form-wrapper {
    position: relative;
    flex: 1;
    width: 100%;
    max-width: 100%;
    opacity: 1;
    transform: translateX(0);
    padding: 20px;
    padding-top: 60px !important;
    margin-top: 0 !important;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
  }

  /* Show compact branding when slideshow active */
  .auth-container.slideshow-active .auth-slide-brand {
    opacity: 1;
    transform: translateY(0);
  }

  /* No divider needed for full screen auth */
  .auth-container.slideshow-active::after {
    height: 0%;
    opacity: 0;
  }
}

/* ===== COMPACT BRANDING FOR AUTH SLIDE VIEW ===== */
/* Hidden - logo now inside auth card */
.auth-slide-brand {
  display: none !important;
}

/* Mobile/Tablet slide brand styles */
@media (max-width: 1023px) {
  .auth-slide-brand {
    margin-bottom: 24px;
  }

  .auth-slide-logo {
    height: 40px;
    width: auto;
  }

  .auth-slide-name {
    font-family: 'Michroma', sans-serif;
    font-size: 21px;
    letter-spacing: 3px;
    color: var(--accent);
    text-transform: uppercase;
  }

  .auth-slide-powered {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
  }

  .auth-slide-powered>span:first-child {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 500;
    color: var(--muted);
    letter-spacing: 1.5px;
    text-transform: uppercase;
  }

  .auth-slide-bittensor {
    font-family: 'Michroma', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: var(--text);
    letter-spacing: 1px;
    opacity: 0.85;
  }

  .auth-slide-sn {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    color: var(--accent);
    background: rgba(59, 130, 246, 0.15);
    padding: 4px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    margin-left: 4px;
  }
}

/* Small mobile slide brand adjustments - matches landing page */
@media (max-width: 374px) {
  .auth-slide-logo {
    height: 40px;
  }

  .auth-slide-name {
    font-size: 21px;
    letter-spacing: 3px;
  }

  .auth-slide-powered>span:first-child {
    font-size: 10px;
  }

  .auth-slide-bittensor {
    font-size: 12px;
  }

  .auth-slide-sn {
    font-size: 11px;
    padding: 4px 8px;
  }
}

@media (min-width: 1024px) {
  .auth-slide-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-top: 0 !important;
    padding-top: 8px;
    margin-bottom: 48px;
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
  }

  .auth-slide-logo {
    height: 48px;
    width: auto;
  }

  .auth-slide-name {
    font-family: 'Michroma', sans-serif;
    font-size: 23px;
    letter-spacing: 3px;
    color: var(--accent);
    text-transform: uppercase;
  }

  .auth-slide-powered {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
  }

  .auth-slide-powered>span:first-child {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 500;
    color: var(--muted);
    letter-spacing: 1.5px;
    text-transform: uppercase;
  }

  .auth-slide-bittensor {
    font-family: 'Michroma', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: var(--text);
    letter-spacing: 1px;
    opacity: 0.85;
  }

  .auth-slide-sn {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    color: var(--accent);
    background: rgba(59, 130, 246, 0.15);
    padding: 4px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    margin-left: 4px;
  }
}

@media (min-width: 1440px) {
  .auth-slide-brand {
    margin-bottom: 56px;
  }

  .auth-slide-logo {
    height: 48px;
  }

  .auth-slide-name {
    font-size: 23px;
    letter-spacing: 3px;
  }

  .auth-slide-powered>span:first-child {
    font-size: 10px;
    letter-spacing: 1.5px;
  }

  .auth-slide-bittensor {
    font-size: 12px;
    letter-spacing: 1px;
  }

  .auth-slide-sn {
    font-size: 11px;
    padding: 4px 8px;
  }
}

/* ===== TOP SECTION: BRANDING & SLOGAN ===== */
.auth-content {
  flex: 0 0 auto;
  color: var(--text);
  text-align: center;
  padding: 60px 24px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  max-width: 800px;
  /* Mobile: not full height, allows card below */
  min-height: auto;
}

.auth-content h1 {
  font-family: 'Michroma', sans-serif;
  font-size: clamp(28px, 6vw, 42px);
  font-weight: 400;
  line-height: 1.1;
  margin-bottom: 16px;
  letter-spacing: 0.02em;
}

.auth-content h1 .text-accent {
  color: var(--accent);
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
}

.auth-content h2 {
  font-family: 'Michroma', sans-serif;
  font-size: clamp(18px, 4vw, 26px);
  font-weight: 500;
  color: var(--accent);
  margin-bottom: 32px;
  letter-spacing: 0.03em;
}

.auth-features {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
  margin-bottom: 16px;
}

.auth-features li {
  font-family: 'Michroma', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 1px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
}

.auth-features li::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--accent);
}

/* ===== RIGHT SIDE: AUTH CARD ===== */
.auth-card {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  /* subtle glass */
  background: rgba(8, 10, 14, 0.5);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 8px;
  /* Removed border effects to avoid "square" look, rely on brackets */
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  transform: translateY(20px);
  opacity: 0;
  animation: authCardEntry 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transition: all 0.4s ease;
}

/* Gradient Border Effect REMOVED to fix "square" issue */
/* .auth-card::before was here */

/* Accent Reflection Top Right */
.auth-card::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle at top right, rgba(59, 130, 246, 0.08), transparent 70%);
  pointer-events: none;
  border-radius: 0 24px 0 200px;
}

/* Corner decorations - Neon Pulse */
.auth-card-corner-tl {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 12px;
  height: 12px;
  border-top: 2px solid var(--accent);
  border-left: 2px solid var(--accent);
  border-radius: 2px 0 0 0;
  opacity: 0.8;
  transition: all 0.5s ease;
  z-index: 2;
}

.auth-card-corner-br {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 12px;
  height: 12px;
  border-bottom: 2px solid var(--accent);
  border-right: 2px solid var(--accent);
  border-radius: 0 0 2px 0;
  opacity: 0.8;
  transition: all 0.5s ease;
  z-index: 2;
}

.auth-card:hover .auth-card-corner-tl,
.auth-card:hover .auth-card-corner-br {
  width: 24px;
  height: 24px;
  opacity: 1;
  /* Use drop-shadow instead of box-shadow to avoid filling the transparent box */
  filter: drop-shadow(0 0 6px var(--accent-glow));
}

.auth-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(59, 130, 246, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

@keyframes authCardEntry {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ===== AUTH HEADER (Logo, Title, Subtitle) ===== */
.auth-header {
  text-align: center;
  margin-bottom: 40px;
  position: relative;
  z-index: 2;
}

.auth-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  animation: fadeSlideUp 0.6s 0.2s backwards;
}

.auth-logo .logo-mark {
  height: 64px;
  width: auto;
  display: block;
  filter: drop-shadow(0 0 32px rgba(59, 130, 246, 0.3));
  transition: filter 0.4s ease;
}

.auth-card:hover .auth-logo .logo-mark {
  filter: drop-shadow(0 0 48px rgba(59, 130, 246, 0.5));
}

.auth-title {
  font-family: 'Michroma', sans-serif;
  font-size: 32px;
  font-weight: 400;
  color: var(--text);
  margin: 0 0 12px 0;
  letter-spacing: 0.5px;
  animation: fadeSlideUp 0.6s 0.3s backwards;
}

.auth-sub {
  color: var(--muted);
  font-size: 15px;
  margin: 0;
  line-height: 1.6;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.3px;
  animation: fadeSlideUp 0.6s 0.4s backwards;
}

/* ===== AUTH FORM ===== */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  z-index: 2;
  animation: fadeSlideUp 0.6s 0.5s backwards;
  width: 100%;
  box-sizing: border-box;
  overflow: visible;
}

/* Auth Form Messages (Error/Success) */
.auth-message {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  line-height: 1.5;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 12px;
  letter-spacing: 0.2px;
}

.auth-message.error {
  color: #e74c3c;
  background: rgba(231, 76, 60, 0.1);
  border: 1px solid rgba(231, 76, 60, 0.2);
}

.auth-message.success {
  color: #2ecc71;
  background: rgba(46, 204, 113, 0.1);
  border: 1px solid rgba(46, 204, 113, 0.2);
}

/* Desktop adjustments */
@media (min-width: 1024px) {
  .auth-message {
    font-size: 13px;
    padding: 12px 16px;
  }
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .auth-message {
    font-size: 11px;
    padding: 8px 12px;
    margin-bottom: 10px;
  }
}

/* Small mobile */
@media (max-width: 374px) {
  .auth-message {
    font-size: 10px;
    padding: 8px 10px;
  }
}

.field {
  display: block;
  margin: 0;
  position: relative;
}

.field input {
  width: 100%;
  padding: 16px 20px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.2);
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 15px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.field input::placeholder {
  color: rgba(255, 255, 255, 0.3);
  transition: color 0.3s ease;
}

.field input:hover {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(0, 0, 0, 0.3);
}

.field input:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(59, 130, 246, 0.08);
  box-shadow:
    0 0 0 1px var(--accent),
    0 0 20px rgba(59, 130, 246, 0.1),
    inset 0 2px 4px rgba(0, 0, 0, 0.2);
  transform: scale(1.01);
}

.field input:focus::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

/* ===== AUTH ACTIONS ROW ===== */
.auth-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 12px;
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
}

.auth-row .link-muted {
  margin-right: auto;
}

.auth-row .auth-cta {
  flex-shrink: 0;
  white-space: nowrap;
}

.link-muted {
  color: var(--muted);
  font-size: 12px;
  text-decoration: none;
  transition: all 0.2s ease;
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap;
  position: relative;
}

@media (min-width: 768px) {
  .link-muted {
    font-size: 13px;
  }
}

.link-muted:hover {
  color: var(--text);
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
}

.auth-cta {
  padding: 14px 20px;
  font-size: 12px;
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-radius: var(--radius-lg);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: var(--accent);
  color: white;
  border: none;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box;
}

/* Full-width button for signup/reset forms */
.auth-cta-full {
  width: 100%;
  display: block;
  text-align: center;
}

/* Scale up button on larger screens */
@media (min-width: 768px) {
  .auth-cta {
    padding: 14px 24px;
    font-size: 13px;
    letter-spacing: 1px;
  }
}

@media (min-width: 1200px) {
  .auth-cta {
    padding: 16px 28px;
    font-size: 14px;
  }
}

.auth-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.auth-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(59, 130, 246, 0.4);
  background: var(--accent-hover);
}

.auth-cta:hover::before {
  left: 100%;
}

.auth-cta:active {
  transform: translateY(0);
}

@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== AUTH FOOTER ===== */
.auth-foot {
  margin-top: 28px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
}

.auth-foot a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  transition: opacity 0.2s ease;
}

.auth-foot a:hover {
  opacity: 0.8;
  text-decoration: underline;
}

/* Support Badge - Auth Pages */
.support-badge {
  display: inline-flex;
  align-items: center;
  gap: clamp(6px, 1.5vw, 10px);
  margin-top: clamp(24px, 6vw, 40px);
  padding: clamp(8px, 2vw, 12px) clamp(12px, 3vw, 18px);
  background: rgba(59, 130, 246, 0.06);
  border: 1px solid rgba(59, 130, 246, 0.18);
  border-radius: 8px;
  font-size: clamp(11px, 2.8vw, 13px);
  font-family: var(--font-mono);
  color: var(--muted);
  transition: all 0.2s ease;
}

/* Support Badge after fixed Get Started button - More spacing */
.hero-carousel-wrapper .support-badge {
  margin-top: clamp(48px, 8vw, 80px);
}

/* Desktop: enhance centered layout spacing */
@media (min-width: 1024px) {

  /* Logo area - more breathing room */
  .auth-content .auth-brand-header {
    margin-bottom: 32px;
  }

  /* Support badge - centered with spacing */
  .support-badge {
    margin-top: 24px;
  }

  /* Support badge after fixed Get Started button - More spacing on desktop */
  .hero-carousel-wrapper .support-badge {
    margin-top: 80px;
  }
}

.support-badge:hover {
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.25);
}

.support-badge svg {
  color: var(--accent);
  opacity: 0.8;
  flex-shrink: 0;
  width: clamp(12px, 3vw, 16px);
  height: clamp(12px, 3vw, 16px);
}

.support-badge span {
  color: var(--muted);
}

.support-badge a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  transition: opacity 0.2s ease;
}

.support-badge a:hover {
  opacity: 0.8;
  text-decoration: underline;
}

[data-theme="light"] .support-badge {
  background: rgba(59, 130, 246, 0.04);
  border-color: rgba(59, 130, 246, 0.12);
}

[data-theme="light"] .support-badge:hover {
  background: rgba(59, 130, 246, 0.06);
  border-color: rgba(59, 130, 246, 0.2);
}

/* Copyright notice */
.auth-copyright {
  margin-top: clamp(24px, 6vw, 40px);
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(10px, 2.6vw, 12px);
  color: var(--muted);
  opacity: 0.5;
  letter-spacing: 0.5px;
}

/* Footer splitter - above copyright (all screen sizes) */
.auth-copyright::before {
  content: '';
  display: block;
  width: 180px;
  height: 1px;
  margin: 0 auto 20px auto;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(59, 130, 246, 0.4) 50%,
      transparent 100%);
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.2);
}

@media (min-width: 1024px) {
  .auth-copyright {
    margin-top: 48px;
  }

  .auth-copyright::before {
    width: 200px;
    margin-bottom: 24px;
  }
}

@media (min-width: 1440px) {
  .auth-copyright {
    margin-top: 56px;
    font-size: 12px;
  }

  .auth-copyright::before {
    width: 240px;
    margin-bottom: 28px;
  }
}

/* Copyright in auth slide view (hidden by default, shown when slideshow active) */
.auth-slide-copyright {
  display: none;
}

/* Mobile/Tablet: show slide copyright in slideshow panel */
@media (max-width: 1023px) {
  .auth-slide-copyright {
    display: block;
    margin-top: 32px;
    text-align: center;
    opacity: 0.5;
  }
}

@media (min-width: 1024px) {
  .auth-slide-copyright {
    display: block;
    margin-top: 32px;
    opacity: 0;
    transition: opacity 0.5s ease 0.3s;
  }

  .auth-container.slideshow-active .auth-slide-copyright {
    opacity: 0.5;
  }
}

/* ===== TABLET LAYOUT (≥768px) - Slideshow from right ===== */
@media (min-width: 768px) and (max-width: 1023px) {
  .auth-container {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
  }

  /* Phase 1: Branding centered, auth card hidden */
  .auth-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 40px;
    max-width: 100%;
    text-align: center;
    transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* Hide left panel copyright on tablet */
  .auth-content .auth-copyright {
    display: none;
  }

  .auth-content h1 {
    font-size: 42px;
    line-height: 1.15;
    margin-bottom: 14px;
  }

  .auth-content h2 {
    font-size: 20px;
    margin-bottom: 24px;
  }

  .auth-features {
    gap: 16px 28px;
  }

  .auth-features li {
    font-size: 11px;
    letter-spacing: 1.2px;
  }

  /* Auth card hidden off-screen right */
  .auth-container .auth-form-wrapper {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 100px 40px 40px;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    background: transparent;
    z-index: 100;
    overflow-y: auto;
  }

  .auth-slide-copyright {
    display: block;
    margin-top: 32px;
    text-align: center;
    opacity: 0.5;
  }

  .auth-card {
    max-width: 480px;
    padding: 44px 40px;
  }

  /* Phase 2: Slideshow active - auth card slides in */
  .auth-container.slideshow-active .auth-content {
    opacity: 0;
    transform: translateX(-80px);
    pointer-events: none;
  }

  .auth-container.slideshow-active .auth-form-wrapper {
    opacity: 1;
    transform: translateX(0);
  }

  /* Show compact branding on tablet slideshow */
  .auth-container.slideshow-active .auth-slide-brand {
    display: flex;
    opacity: 1;
    transform: translateY(0);
    margin-bottom: 56px;
  }
}

/* ===== LARGE DESKTOP (≥1024px) - Split Layout Sizing ===== */
@media (min-width: 1024px) {
  .auth-content h1 {
    font-size: 44px;
    line-height: 1.15;
    margin-bottom: 18px;
  }

  .auth-content h2 {
    font-size: 22px;
    margin-bottom: 24px;
  }

  .auth-features {
    gap: 16px 28px;
  }

  .auth-features li {
    font-size: 11px;
    letter-spacing: 1.5px;
  }

  .auth-card {
    max-width: 480px;
    padding: 48px 44px;
  }

  .auth-title {
    font-size: 34px;
  }

  .auth-sub {
    font-size: 14px;
  }
}

/* ===== LARGE SCREENS (≥1280px) - Spacious Layout ===== */
@media (min-width: 1280px) {
  .auth-content h1 {
    font-size: 52px;
    margin-bottom: 20px;
  }

  .auth-content h2 {
    font-size: 26px;
    margin-bottom: 28px;
  }

  .auth-features li {
    font-size: 13px;
    letter-spacing: 1.8px;
  }

  .auth-card {
    max-width: 520px;
    padding: 52px 48px;
  }

  .auth-title {
    font-size: 36px;
    margin-bottom: 12px;
  }

  .auth-sub {
    font-size: 15px;
  }

  .field input {
    padding: 16px 20px;
    font-size: 15px;
  }

  .auth-cta {
    padding: 16px 28px;
    font-size: 14px;
  }
}

/* ===== XL SCREENS (≥1440px) - Wide Layout ===== */
@media (min-width: 1440px) {
  .auth-content h1 {
    font-size: 58px;
    margin-bottom: 24px;
  }

  .auth-content h2 {
    font-size: 28px;
    margin-bottom: 32px;
  }

  .auth-features {
    gap: 20px 40px;
  }

  .auth-features li {
    font-size: 14px;
    letter-spacing: 2px;
  }

  .support-badge {
    margin-top: 64px;
    padding: 12px 20px;
    font-size: 13px;
  }

  .auth-card {
    max-width: 540px;
    padding: 56px 52px;
  }

  .auth-title {
    font-size: 40px;
    margin-bottom: 14px;
  }

  .auth-sub {
    font-size: 16px;
  }

  .field input {
    padding: 18px 22px;
    font-size: 16px;
    border-radius: 12px;
  }

  .auth-cta {
    padding: 18px 32px;
    font-size: 15px;
  }

  .auth-foot {
    margin-top: 28px;
    font-size: 14px;
  }

  /* Scale brackets for large screens */
  .auth-card-corner-tl,
  .auth-card-corner-br {
    width: 14px;
    height: 14px;
    border-width: 2px;
  }

  .auth-card:hover .auth-card-corner-tl,
  .auth-card:hover .auth-card-corner-br {
    width: 24px;
    height: 24px;
  }
}

/* ===== ULTRA WIDE (≥1920px) - Full Width Layout ===== */
@media (min-width: 1920px) {
  .auth-content h1 {
    font-size: 64px;
    margin-bottom: 28px;
  }

  .auth-content h2 {
    font-size: 32px;
    margin-bottom: 36px;
  }

  .auth-features {
    gap: 24px 48px;
  }

  .auth-features li {
    font-size: 15px;
    letter-spacing: 2.2px;
  }

  .support-badge {
    margin-top: 72px;
    padding: 14px 24px;
    font-size: 14px;
  }

  .auth-card {
    max-width: 580px;
    padding: 64px 60px;
  }

  .auth-card .auth-header,
  .auth-card .auth-form,
  .auth-card .auth-foot {
    max-width: 440px;
  }

  .auth-header {
    margin-bottom: 36px;
  }

  .auth-title {
    font-size: 44px;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
  }

  .auth-sub {
    font-size: 17px;
    line-height: 1.6;
  }

  .auth-form {
    gap: 22px;
  }

  .field input {
    padding: 20px 26px;
    font-size: 18px;
    border-radius: 14px;
  }

  .auth-row {
    margin-top: 14px;
  }

  .link-muted {
    font-size: 15px;
  }

  .auth-cta {
    padding: 20px 36px;
    font-size: 16px;
    border-radius: 14px;
  }

  .auth-foot {
    font-size: 15px;
    margin-top: 32px;
  }
}

/* ===== SUPER WIDE (≥2200px) - Maximum Width ===== */
@media (min-width: 2200px) {
  .auth-content {
    padding: 40px 120px 28px;
    max-width: 1700px;
  }

  .auth-content h1 {
    font-size: 76px;
    margin-bottom: 32px;
  }

  .auth-content h2 {
    font-size: 36px;
    margin-bottom: 40px;
  }

  .auth-features {
    gap: 32px 64px;
  }

  .auth-features li {
    font-size: 16px;
    letter-spacing: 2.5px;
  }

  .support-badge {
    margin-top: 80px;
    padding: 16px 28px;
    font-size: 15px;
  }

  .auth-form-wrapper {
    max-width: 700px;
    padding: 0 100px 140px;
  }

  .auth-card {
    max-width: 700px;
    padding: 72px 68px;
  }

  .auth-title {
    font-size: 48px;
  }

  .auth-sub {
    font-size: 18px;
  }

  .field input {
    padding: 24px 30px;
    font-size: 20px;
  }

  .auth-cta {
    padding: 22px 40px;
    font-size: 17px;
  }
}

/* Tablet landscape handled by min-width: 768px above */

/* ===== MOBILE (< 768px) ===== */
@media (max-width: 767px) {
  .auth-container.split-layout {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
  }

  /* Phase 1: Branding centered, auth card hidden */
  .auth-content {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    padding: clamp(16px, 4vw, 24px) 24px env(safe-area-inset-bottom, 16px);
    text-align: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 100vh;
    transition: all 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* Copyright flows after content with proper spacing */
  .auth-content .auth-copyright {
    display: block;
    margin-top: clamp(40px, 10vw, 60px);
    padding-bottom: env(safe-area-inset-bottom, 16px);
  }

  /* Push main content down for visual balance */
  .auth-content .auth-brand-header {
    margin-top: clamp(40px, 12vh, 80px);
  }

  /* Auth card hidden off-screen right */
  .auth-container.split-layout .auth-form-wrapper {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 80px 24px 24px;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    background: transparent;
    z-index: 100;
    overflow-y: auto;
  }

  /* Phase 2: Slideshow active - auth card slides in */
  .auth-container.slideshow-active .auth-content {
    opacity: 0;
    transform: translateX(-50px);
    pointer-events: none;
  }

  .auth-container.slideshow-active .auth-form-wrapper {
    opacity: 1;
    transform: translateX(0);
  }

  /* Show compact branding on mobile slideshow */
  .auth-container.slideshow-active .auth-slide-brand {
    display: flex;
    opacity: 1;
    transform: translateY(0);
    margin-bottom: 48px;
  }

  /* Center the auth card */
  .auth-container.slideshow-active .auth-card {
    max-width: 400px;
    width: 100%;
  }

  .auth-content h1 {
    font-size: clamp(30px, 8.5vw, 40px);
    margin-bottom: clamp(16px, 4vw, 22px);
    line-height: 1.18;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
  }

  .auth-content h2 {
    font-size: clamp(18px, 5vw, 24px);
    margin-bottom: clamp(32px, 8vw, 44px);
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
    font-weight: 500;
  }

  .auth-features {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    gap: clamp(12px, 3vw, 16px) clamp(20px, 5vw, 28px);
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: clamp(32px, 8vw, 44px);
  }

  /* Force Neural Guard to its own centered row */
  .auth-features li:last-child {
    grid-column: 1 / -1;
    justify-self: center;
  }

  .auth-features li {
    font-size: clamp(9px, 2.4vw, 10px);
    letter-spacing: clamp(0.6px, 0.15vw, 1px);
    white-space: nowrap;
    gap: clamp(5px, 1.2vw, 8px);
    opacity: 0.65;
    font-weight: 400;
  }

  .auth-features li::before {
    width: clamp(5px, 1.2vw, 6px);
    height: clamp(5px, 1.2vw, 6px);
    flex-shrink: 0;
    opacity: 0.8;
  }

  .auth-card {
    padding: 40px 32px;
    /* Removed structural overrides to preserve floating card look */
    width: 100%;
    max-width: calc(100vw - 48px);
    box-sizing: border-box;
    overflow: visible;
  }

  /* Move corner brackets inward on mobile for breathing room */
  .auth-card-corner-tl {
    top: 12px;
    left: 12px;
    width: 10px;
    height: 10px;
  }

  .auth-card-corner-br {
    bottom: 12px;
    right: 12px;
    width: 10px;
    height: 10px;
  }

  .auth-card:hover .auth-card-corner-tl,
  .auth-card:hover .auth-card-corner-br {
    width: 18px;
    height: 18px;
  }

  .auth-card .auth-header,
  .auth-card .auth-form,
  .auth-card .auth-foot {
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    box-sizing: border-box;
  }

  /* Ensure form elements don't overflow */
  .auth-form {
    width: 100%;
    overflow: visible;
  }

  .auth-form>* {
    max-width: 100%;
    box-sizing: border-box;
  }

  .auth-logo .logo-mark {
    height: 48px;
  }

  .auth-title {
    font-size: 26px;
    letter-spacing: 0.5px;
  }

  .auth-sub {
    font-size: 13px;
  }

  .field input {
    padding: 14px 16px;
    font-size: 16px;
    /* Prevents iOS zoom */
    border-radius: 12px;
  }

  .auth-row {
    flex-direction: column;
    gap: 12px;
  }

  .auth-cta {
    width: 100%;
    padding: 16px 24px;
    font-size: 13px;
    border-radius: 12px;
  }

  .link-muted {
    font-size: 13px;
  }

  .auth-foot {
    margin-top: 24px;
    font-size: 13px;
  }
}

/* ===== SMALL MOBILE (< 375px) ===== */
@media (max-width: 374px) {
  .auth-content {
    padding: 12px 16px env(safe-area-inset-bottom, 12px);
  }

  .auth-brand-header {
    gap: 10px;
    margin-bottom: 28px;
    padding-bottom: 18px;
    margin-top: clamp(32px, 10vh, 60px);
  }

  .auth-content h1 {
    font-size: clamp(26px, 7.5vw, 30px);
    margin-bottom: 14px;
    max-width: 300px;
    line-height: 1.2;
  }

  .auth-content h2 {
    font-size: clamp(16px, 4.5vw, 19px);
    margin-bottom: 28px;
    font-weight: 500;
  }

  .auth-features {
    gap: 12px 18px;
    max-width: 280px;
    margin-bottom: 28px;
  }

  .auth-features li {
    font-size: clamp(8px, 2.2vw, 9px);
    letter-spacing: 0.5px;
    opacity: 0.6;
  }

  .auth-features li::before {
    width: 5px;
    height: 5px;
    opacity: 0.75;
  }

  .brand-text {
    font-size: clamp(16px, 4.5vw, 20px);
    letter-spacing: 2px;
  }

  .brand-logo {
    height: clamp(32px, 9vw, 40px);
  }

  .powered-text {
    font-size: clamp(9px, 2.4vw, 11px);
    letter-spacing: 1.2px;
  }

  .bittensor-name {
    font-size: clamp(10px, 2.6vw, 12px);
  }

  .subnet-tag {
    font-size: clamp(9px, 2.4vw, 11px);
    padding: 3px 7px;
  }

  .auth-card {
    padding: 36px 24px;
    max-width: calc(100vw - 32px);
  }

  /* Even smaller corner brackets for tiny screens */
  .auth-card-corner-tl {
    top: 10px;
    left: 10px;
    width: 8px;
    height: 8px;
  }

  .auth-card-corner-br {
    bottom: 10px;
    right: 10px;
    width: 8px;
    height: 8px;
  }

  .auth-card:hover .auth-card-corner-tl,
  .auth-card:hover .auth-card-corner-br {
    width: 14px;
    height: 14px;
  }

  .auth-container.split-layout .auth-form-wrapper {
    padding: 70px 16px 16px;
  }

  .auth-logo .logo-mark {
    height: 44px;
  }

  .auth-title {
    font-size: 22px;
  }

  .auth-sub {
    font-size: 12px;
  }

  .field input {
    padding: 12px 14px;
  }

  .auth-cta {
    padding: 14px 20px;
    font-size: 12px;
  }

  .link-muted,
  .auth-foot {
    font-size: 11px;
  }
}

/* ===== LIGHT MODE OVERRIDES ===== */
[data-theme="light"] .auth-bg {
  background: #ffffff;
}

[data-theme="light"] .auth-content h1 {
  color: #0f172a;
}

[data-theme="light"] .auth-content h2 {
  color: var(--accent);
}

/* Light mode mobile - clean transparent look matching desktop */
@media (max-width: 1023px) {

  [data-theme="light"] .auth-content h1,
  [data-theme="light"] .auth-content h2 {
    background: transparent;
    padding: 0;
    border-radius: 0;
    text-shadow: 0 2px 24px rgba(255, 255, 255, 0.8);
  }

  [data-theme="light"] .auth-features {
    background: transparent;
    padding: 0;
    border-radius: 0;
  }

  [data-theme="light"] .auth-features li {
    text-shadow: 0 1px 16px rgba(255, 255, 255, 0.6);
  }
}

[data-theme="light"] .auth-features li {
  color: #475569;
  background: transparent;
}

/* Desktop: Auth content styles - Clean, cinematic look */
@media (min-width: 1024px) {

  /* Light mode - transparent backgrounds for cinematic effect */
  [data-theme="light"] .auth-content {
    background: transparent;
  }

  [data-theme="light"] .auth-brand-header,
  [data-theme="light"] .auth-content h1,
  [data-theme="light"] .auth-content h2,
  [data-theme="light"] .auth-features {
    background: transparent;
    padding: 0;
    border-radius: 0;
  }

  [data-theme="light"] .auth-content h1 {
    margin-bottom: 16px;
  }

  [data-theme="light"] .auth-content h2 {
    margin-bottom: 32px;
  }

  /* Dark mode - transparent backgrounds for cinematic effect */
  [data-theme="dark"] .auth-content {
    background: transparent;
  }

  [data-theme="dark"] .auth-brand-header,
  [data-theme="dark"] .auth-content h1,
  [data-theme="dark"] .auth-content h2,
  [data-theme="dark"] .auth-features {
    background: transparent;
    padding: 0;
    border-radius: 0;
  }

  [data-theme="dark"] .auth-content h1 {
    margin-bottom: 16px;
  }

  [data-theme="dark"] .auth-content h2 {
    margin-bottom: 32px;
  }
}

/* Dark mode mobile - clean transparent look matching desktop */
@media (max-width: 1023px) {

  [data-theme="dark"] .auth-content h1,
  [data-theme="dark"] .auth-content h2 {
    background: transparent;
    padding: 0;
    border-radius: 0;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5);
  }

  [data-theme="dark"] .auth-features {
    background: transparent;
    padding: 0;
    border-radius: 0;
  }

  [data-theme="dark"] .auth-features li {
    text-shadow: 0 1px 16px rgba(0, 0, 0, 0.4);
  }
}

[data-theme="light"] .auth-card {
  background: #f0f0f0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: rgba(59, 130, 246, 0.12);
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.04),
    0 0 0 1px rgba(0, 0, 0, 0.02);
}

[data-theme="light"] .auth-card:hover {
  border-color: rgba(59, 130, 246, 0.25);
  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.06),
    0 0 30px rgba(59, 130, 246, 0.04);
}

/* Light mode corner brackets - blue accent */
[data-theme="light"] .auth-card::before,
[data-theme="light"] .auth-card::after {
  border-color: #3b82f6;
  opacity: 0.7;
}

[data-theme="light"] .auth-card:hover::before,
[data-theme="light"] .auth-card:hover::after {
  opacity: 1;
}

@media (min-width: 1024px) {
  [data-theme="light"] .auth-card {
    background: #f0f0f0;
    border: none;
    border-left: 1px solid rgba(59, 130, 246, 0.12);
  }

  [data-theme="light"] .auth-card:hover {
    border-left-color: rgba(59, 130, 246, 0.25);
    box-shadow: none;
  }
}

[data-theme="light"] .auth-title {
  color: #0f172a;
}

[data-theme="light"] .auth-sub {
  color: #64748b;
}

[data-theme="light"] .field input {
  background: #fafafa;
  border-color: rgba(0, 0, 0, 0.1);
  color: #0f172a;
}

[data-theme="light"] .field input::placeholder {
  color: #9ca3af;
}

[data-theme="light"] .field input:hover {
  background: #ffffff;
  border-color: rgba(59, 130, 246, 0.3);
}

[data-theme="light"] .field input:focus {
  background: #ffffff;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

[data-theme="light"] .link-muted {
  color: #64748b;
}

[data-theme="light"] .link-muted:hover {
  color: var(--accent);
}

[data-theme="light"] .auth-foot {
  color: #64748b;
}



/* ====== RESPONSIVE ====== */

/* Mobile Menu Toggle */
.mobile-menu-toggle {
  display: none;
  background: transparent;
  border: none;
  color: #e6edf3;
  font-size: 24px;
  cursor: pointer;
  padding: 8px;
  margin-right: 16px;
}

.mobile-menu-toggle:focus {
  outline: none;
}

/* Tablet and below (900px) */
@media(max-width:900px) {
  .sidebar {
    position: fixed;
    left: -260px;
    top: 0;
    height: 100vh;
    z-index: 1010;
    transition: left 0.3s ease;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
    padding-top: 28px;
  }

  .sidebar.active {
    left: 0;
  }

  .mobile-menu-toggle {
    display: none;
  }


  .main {
    padding: 16px;
    width: 100%;
  }

  .topbar {
    flex-wrap: wrap;
    gap: 12px;
  }

  .topbar h1 {
    font-size: 18px;
  }

  .top-actions {
    flex-wrap: nowrap;
    gap: 8px;
    width: auto;
  }

  .instance-detail-grid {
    flex-direction: column;
  }

  .detail-column {
    flex: 1 1 100%;
  }

  .instances-table {
    font-size: 13px;
  }

  .instances-table th,
  .instances-table td {
    padding: 8px 6px;
  }

  .panel-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .panel-header button {
    width: 100%;
  }

  /* Enhanced logo sizing for mobile sidebar */
  .logo {
    margin-bottom: 28px;
    gap: 6px;
  }

  .logo-text {
    font-size: clamp(17px, 4.5vw, 20px);
    letter-spacing: 0.22em;
  }

  .logo-subtitle {
    gap: 10px;
    padding-left: 0;
  }

  .powered-by {
    font-size: clamp(11px, 3vw, 13px);
  }

  .shugo-logo {
    height: clamp(28px, 7vw, 34px);
  }
}

/* Mobile (768px and below) */
@media(max-width:768px) {

  /* Reduce badge sizes for mobile */
  .badge,
  .instances-table .badge,
  .transactions-container .badge,
  #transactionsTable .badge,
  .anomalies-table .badge {
    font-size: 10px !important;
    padding: 3px 8px !important;
    gap: 3px !important;
  }

  .badge .status-dot,
  .instances-table .badge .status-dot {
    width: 4px !important;
    height: 4px !important;
  }

  .summary-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .card.small {
    min-width: auto;
  }

  /* Global header mobile layout - using fixed position with flex */
  .topbar.global-header h1 {
    font-size: 16px;
    flex: 1 1 auto;
    margin: 0;
    min-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .topbar.global-header .top-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    flex-shrink: 0;
  }

  .balance-display-header {
    margin-right: 0;
  }

  .user-dropdown {
    margin-left: auto;
  }

  /* Override for global header - keep row layout */
  .topbar.global-header {
    flex-direction: row !important;
    align-items: center !important;
  }

  .topbar.global-header h1 {
    margin-bottom: 0;
  }

  .topbar.global-header .top-actions {
    width: auto !important;
    flex-direction: row !important;
  }

  .user-dropdown {
    width: auto;
  }

  .user {
    width: auto;
    justify-content: space-between;
  }

  .instances-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  .instances-table thead,
  .instances-table tbody,
  .instances-table tr {
    display: block;
  }

  .instances-table thead {
    display: none;
  }

  .instances-table tr {
    border: 1px solid var(--input-border);
    border-radius: 8px;
    margin-bottom: 12px;
    padding: 12px;
    background: var(--header-bg);
  }

  .instances-table td {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border: none;
    text-align: right;
  }

  /* Empty state row - center the message inside the card */
  .instances-table td[colspan] {
    display: block;
    text-align: center;
    padding: 24px 16px;
    color: var(--muted);
    font-size: 13px;
    white-space: normal;
    word-wrap: break-word;
  }

  .instances-table td[colspan]:before {
    content: none;
  }

  .instances-table td:before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--muted);
    text-align: left;
    flex-shrink: 0;
    margin-right: 12px;
  }

  .instances-table td.name {
    font-weight: 400;
    font-family: var(--font-mono);
    font-size: 16px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .instances-table td.name:before {
    content: '';
  }

  /* Mobile Actions: Stack label above buttons */
  .instances-table td.actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-top: 8px;
    padding-top: 10px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }

  .instances-table td.actions:before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--muted);
    text-align: left;
    margin-bottom: 2px;
  }

  .instances-table td.actions .actions-buttons {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
  }

  .instances-table td.actions button {
    flex: 1 1 0;
    min-width: 0;
    padding: 7px 10px;
    font-size: 11px;
    white-space: nowrap;
  }

  .instances-table td.actions button svg {
    width: 13px !important;
    height: 13px !important;
    margin-right: 4px !important;
    flex-shrink: 0;
  }

  .instance-detail-grid {
    gap: 16px;
  }

  .detail-card {
    padding: 16px;
  }

  .deployment-info {
    flex-direction: column;
    gap: 12px;
  }

  .deployment-info[style*="flex: 1"] {
    flex: 1 1 100% !important;
  }

  .chart-placeholder {
    margin-top: 16px;
  }

  .chart-placeholder svg {
    height: 60px;
  }

  .activity-list {
    gap: 12px;
  }

  .activity-item {
    padding: 12px;
  }
}

/* Small Mobile (600px and below) */
@media(max-width:600px) {

  /* Further reduce badge sizes for small mobile */
  .badge,
  .instances-table .badge,
  .transactions-container .badge,
  #transactionsTable .badge,
  .anomalies-table .badge {
    font-size: 9px !important;
    padding: 3px 7px !important;
    gap: 3px !important;
  }

  .badge .status-dot,
  .instances-table .badge .status-dot {
    width: 4px !important;
    height: 4px !important;
  }

  .summary-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .card {
    min-width: 100%;
  }

  .small-panels .cards-row {
    flex-direction: column;
  }

  .card.med {
    min-width: 100%;
  }

  .drawer {
    width: 100%;
  }

  .modal-panel {
    width: 90%;
    max-width: 420px;
    margin: 20px auto;
    max-height: 90vh;
    overflow-y: auto;
  }

  /* Global Header - Tablet - using integrated menu button */
  .topbar.global-header {
    padding: 10px 14px !important;
    gap: 10px;
    flex-direction: row !important;
    align-items: center !important;
  }

  .topbar.global-header h1 {
    font-size: 16px;
    flex: 1;
    margin-bottom: 0;
  }

  .topbar.global-header .top-actions {
    flex-wrap: nowrap;
    gap: 4px;
    width: auto !important;
    flex-direction: row !important;
  }

  .user-dropdown {
    margin-left: 0;
  }

  .user-dropdown .user {
    font-size: 12px;
  }

  .user-dropdown {
    width: auto;
  }

  .user {
    width: auto;
    justify-content: space-between;
  }

  .instances-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  .instances-table thead,
  .instances-table tbody,
  .instances-table tr {
    display: block;
  }

  .instances-table thead {
    display: none;
  }

  .instances-table tr {
    border: 1px solid var(--input-border);
    border-radius: 8px;
    margin-bottom: 12px;
    padding: 12px;
    background: var(--header-bg);
  }

  .instances-table td {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border: none;
    text-align: right;
  }

  /* Empty state row - center the message inside the card */
  .instances-table td[colspan] {
    display: block;
    text-align: center;
    padding: 24px 16px;
    color: var(--muted);
    font-size: 13px;
    white-space: normal;
    word-wrap: break-word;
  }

  .instances-table td[colspan]:before {
    content: none;
  }

  .instances-table td:before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--muted);
    text-align: left;
    flex-shrink: 0;
    margin-right: 12px;
  }

  .instances-table td.name {
    font-weight: 400;
    font-family: var(--font-mono);
    font-size: 15px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .instances-table td.name:before {
    content: '';
  }

  /* Small Mobile Actions: Compact stacked layout */
  .instances-table td.actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-top: 8px;
    padding-top: 10px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }

  .instances-table td.actions:before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--muted);
    text-align: left;
    margin-bottom: 2px;
  }

  .instances-table td.actions .actions-buttons {
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
  }

  .instances-table td.actions button {
    flex: 1 1 0;
    min-width: 0;
    padding: 6px 8px;
    font-size: 10px;
    white-space: nowrap;
  }

  .instances-table td.actions button svg {
    width: 12px !important;
    height: 12px !important;
    margin-right: 3px !important;
    flex-shrink: 0;
  }

  .instance-detail-grid {
    gap: 16px;
  }

  .detail-card {
    padding: 16px;
  }

  .deployment-info {
    flex-direction: column;
    gap: 12px;
  }

  .deployment-info[style*="flex: 1"] {
    flex: 1 1 100% !important;
  }

  .chart-placeholder {
    margin-top: 16px;
  }

  .chart-placeholder svg {
    height: 60px;
  }

  .chart-title {
    font-size: 12px;
  }

  .chart-axis {
    font-size: 10px;
  }

  .anomalies-distribution {
    margin-top: 16px;
  }

  .pie-chart-container {
    flex-direction: column;
    gap: 16px;
  }

  .pie-legend {
    width: 100%;
  }

  .modal-form label {
    font-size: 13px;
  }

  .modal-form input,
  .modal-form textarea,
  .modal-form select {
    font-size: 14px;
    padding: 10px;
  }

  .modal-actions {
    flex-direction: row;
    gap: 8px;
  }

  .modal-actions .btn {
    flex: 1;
    min-width: auto;
  }
}

/* Extra Small Mobile (480px and below) */
@media(max-width:480px) {
  .main {
    padding: 10px;
    padding-top: 60px !important;
  }

  /* Simplified header styles for fixed header with menu */
  .topbar.global-header #themeToggle {
    padding: 8px !important;
    border: 1px solid var(--border) !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 8px !important;
  }

  .topbar.global-header #themeToggle:hover {
    border-color: var(--border-hover) !important;
    background: rgba(255, 255, 255, 0.04) !important;
  }

  [data-theme="light"] .topbar.global-header #themeToggle {
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  [data-theme="light"] .topbar.global-header #themeToggle:hover {
    border-color: rgba(0, 0, 0, 0.1) !important;
    background: rgba(0, 0, 0, 0.02) !important;
  }

  .balance-label-header {
    font-size: 12px;
  }

  .balance-value-header {
    font-size: 16px;
  }

  .user-dropdown {
    flex: 0 0 auto;
  }

  .user-dropdown .dropdown-item {
    font-size: 13px;
    padding: 12px 20px;
  }

  .user-dropdown .user {
    font-size: 11px;
    padding: 6px 8px;
  }

  .dropdown-arrow {
    font-size: 7px;
  }

  .topbar {
    margin-bottom: 12px;
  }

  /* Modal responsive - Full screen on mobile */
  .modal {
    padding: 0;
    align-items: flex-end;
  }

  .modal-content,
  .modal-panel {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0;
    padding: 16px;
    border-radius: 8px 8px 0 0;
    max-height: 92vh;
    overflow-y: auto;
  }

  .modal-content .modal-header {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
  }

  .modal-content .modal-header h2 {
    font-size: 16px;
  }

  .modal-content .field {
    margin-bottom: 14px;
  }

  .modal-content .field label {
    font-size: 13px;
    margin-bottom: 6px;
    display: block;
  }

  .modal-content .field input,
  .modal-content .field select {
    padding: 12px;
    font-size: 16px;
    /* Prevents iOS zoom */
    border-radius: 8px;
  }

  .modal-content .field small {
    font-size: 11px;
    margin-top: 4px;
  }

  /* Payment method options stack on small screens */
  .payment-methods-container {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .payment-method-option {
    min-width: 100% !important;
    padding: 12px !important;
  }

  /* Modal actions */
  .modal-actions,
  #modalActionsForm {
    flex-direction: row !important;
    gap: 8px !important;
    margin-top: 16px;
  }

  .modal-actions .btn,
  #modalActionsForm .btn {
    flex: 1 !important;
    min-width: auto !important;
    padding: 12px !important;
    font-size: 13px !important;
  }

  .summary-grid {
    gap: 8px;
  }

  .card.small {
    padding: 12px;
  }

  .card.small .value {
    font-size: 20px;
  }

  .card.small .label {
    font-size: 11px;
  }

  .panel {
    padding: 16px;
  }

  .panel-header {
    font-size: 14px;
    margin-bottom: 12px;
  }

  .instances-table td {
    font-size: 11px;
    padding: 6px 0;
  }

  .instances-table td.name {
    font-size: 14px;
  }

  .badge {
    font-size: 9px;
    padding: 3px 7px;
    gap: 3px;
  }

  .badge .status-dot {
    width: 4px;
    height: 4px;
  }

  .btn {
    font-size: 11px;
    padding: 6px 10px;
  }

  .metric-card {
    padding: 12px;
  }

  .metric-card .value {
    font-size: 20px;
  }

  .metric-card .label {
    font-size: 11px;
  }

  .detail-card h3 {
    font-size: 14px;
    margin-bottom: 12px;
  }

  .detail-rows {
    gap: 8px;
  }

  .chart-placeholder {
    margin-top: 12px;
  }

  .chart-placeholder svg {
    height: 50px;
  }

  .auth-container {
    padding: 20px 16px;
  }

  .auth-header {
    margin-bottom: 20px;
  }

  .auth-title {
    font-size: 20px;
  }

  .auth-sub {
    font-size: 13px;
  }
}

/* Very Small Mobile (360px and below - iPhone SE, small Android) */
@media(max-width:360px) {
  .main {
    padding: 8px;
    padding-top: 55px !important;
  }

  .topbar.global-header h1 {
    font-size: 12px;
  }

  .balance-label-header {
    font-size: 11px;
  }

  .balance-value-header {
    font-size: 15px;
  }

  .user-dropdown .user {
    font-size: 10px;
    padding: 5px 6px;
  }

  .dropdown-arrow {
    display: none;
  }

  .modal-content,
  .modal-panel {
    padding: 12px;
  }

  .modal-content .modal-header h2 {
    font-size: 15px;
  }

  .modal-content .field input,
  .modal-content .field select {
    padding: 10px;
  }

  .payment-method-option {
    padding: 10px !important;
  }

  .payment-method-option strong {
    font-size: 12px !important;
  }

  .payment-method-option small {
    font-size: 9px !important;
  }

  .card.small {
    padding: 10px;
  }

  .card.small .value {
    font-size: 18px;
  }

  .summary-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Landscape Mobile */
@media(max-width:900px) and (orientation: landscape) {
  .sidebar {
    width: 200px;
  }

  .main {
    padding: 16px;
  }

  .summary-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Landscape logo adjustments - slightly more compact but still readable */
  .logo {
    margin-bottom: 20px;
    gap: 4px;
  }

  .logo-text {
    font-size: clamp(14px, 3.5vw, 17px);
    letter-spacing: 0.2em;
  }

  .logo-subtitle {
    gap: 8px;
  }

  .powered-by {
    font-size: clamp(10px, 2.5vw, 12px);
  }

  .shugo-logo {
    height: clamp(22px, 5vw, 28px);
  }
}

/* Print Styles */
@media print {

  .sidebar,
  .top-actions,
  .btn,
  .actions {
    display: none;
  }

  .main {
    padding: 0;
  }

  .panel {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

/* Billing Styles */

/* Enhanced Modal Styles */
.modal-panel {
  background: var(--header-bg);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: -28px -28px 24px -28px;
  padding: 20px 28px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-elevated);
  position: sticky;
  top: -28px;
  z-index: 10;
  border-radius: 8px 8px 0 0;
}

.modal-header h2 {
  font-family: 'Michroma', sans-serif;
  font-size: 18px;
  color: var(--text);
  margin: 0;
  letter-spacing: 0.5px;
}

/* Deploy progress title uses Michroma to match other modal titles */
#deployProgressTitle {
  font-family: 'Michroma', sans-serif;
  font-size: 18px;
  letter-spacing: 0.5px;
}

/* Large screens - slightly larger deploy progress title */
@media (min-width: 1600px) {
  #deployProgressTitle {
    font-size: 26px;
  }
}

.close-modal {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 20px;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  line-height: 1;
  transition: all 0.2s;
  flex-shrink: 0;
}

.close-modal:hover {
  background: rgba(0, 0, 0, 0.6);
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--text);
}

[data-theme="light"] .close-modal {
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.15);
}

[data-theme="light"] .close-modal:hover {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.3);
  color: var(--accent);
}

.modal-form .field {
  margin-bottom: 20px;
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

/* Card icons inside input field */
.card-icons-wrapper {
  position: absolute;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  pointer-events: none;
}

.card-icon {
  width: 24px;
  height: 17px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* Stripe Secure Badge */
.stripe-secure-badge {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  margin-top: 20px;
  padding: 12px 16px;
  background: rgba(99, 91, 255, 0.08);
  border: 1px solid rgba(99, 91, 255, 0.2);
  border-radius: 8px;
  font-size: 12px;
  color: var(--muted);
}

.stripe-lock-icon {
  width: 12px;
  height: 12px;
  color: #635BFF;
  flex-shrink: 0;
  align-self: center;
  position: relative;
  top: 1px;
}

.stripe-secure-badge .powered-text {
  color: var(--muted);
}

.stripe-secure-badge .stripe-text {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #635BFF;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.stripe-secure-badge .secure-text {
  color: #635BFF;
  font-weight: 600;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Light theme adjustments for Stripe badge */
[data-theme="light"] .stripe-secure-badge {
  background: rgba(99, 91, 255, 0.05);
  border-color: rgba(99, 91, 255, 0.15);
}

#deployModal .modal-form input[type="text"],
#editPortsModal .modal-form input[type="text"],
.modal-form input[type="text"],
.modal-form input[type="number"],
.modal-form select {
  width: 100%;
  background: var(--input-bg) !important;
  border: 1px solid var(--input-border);
  border-radius: 8px;
  padding: 12px 32px 12px 12px !important;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  transition: all 0.2s ease;
}

.modal-form input[type="text"]:focus,
.modal-form input[type="number"]:focus,
.modal-form select:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--input-focus-bg);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.field-hint {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
}

.static-value {
  padding: 12px;
  background: var(--card-hover);
  border-radius: 8px;
  color: var(--text);
  font-family: monospace;
  border: 1px solid var(--border);
}



/* Billing Period Toggle */
.billing-period-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--header-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-hover);
  border-radius: var(--radius-lg);
  margin-bottom: 16px;
  box-shadow: var(--shadow-lg);
}

.period-indicator,
.period-indicator span,
.period-indicator #periodLabel {
  font-family: 'JetBrains Mono', var(--font-mono), monospace !important;
  font-size: 13px;
  color: var(--text);
  font-weight: 600;
  letter-spacing: 0.3px;
}

.period-indicator #periodLabel {
  color: var(--accent);
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--border);
  border-radius: 24px;
  transition: 0.3s;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: var(--text);
  border-radius: 50%;
  transition: 0.3s;
}

.toggle-switch input:checked+.toggle-slider {
  background: var(--accent);
}

.toggle-switch input:checked+.toggle-slider:before {
  transform: translateX(20px);
}

.toggle-label {
  font-family: var(--font-mono);
  font-size: 12px;
  transition: color 0.3s, font-weight 0.3s;
}

.toggle-label.active {
  color: var(--text);
  font-weight: 600;
}

.toggle-label.inactive {
  color: var(--muted);
  font-weight: 400;
}

[data-theme="light"] .toggle-slider {
  background: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .toggle-slider:before {
  background: var(--panel);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.billing-content {
  margin-top: 24px;
}

.transactions-container {
  overflow-x: auto;
}

.transactions-container table {
  width: 100%;
  border-collapse: collapse;
}

/* Consistent typography for all transaction table cells */
.transactions-container .instances-table td {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
  vertical-align: middle;
  font-weight: 400;
}

.transactions-container table td.positive {
  color: #2ecc71;
  font-weight: 600;
}

.transactions-container table td.negative {
  color: #e74c3c;
  font-weight: 600;
}

/* ========================================
   Transaction History Table - Clean Design
   ======================================== */

/* Type badges - subtle, should NOT compete with Amount/Status */
.tx-type-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.02em;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  opacity: 0.8;
}

.tx-type-badge.topup {
  /* Same muted style - not important info */
}

.tx-type-badge.credit {
  font-style: italic;
  opacity: 0.7;
}

[data-theme="light"] .tx-type-badge {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.06);
}

/* Amount - only color differs */
.tx-amount {
  font-weight: 600;
}

.tx-amount-positive {
  color: #22c55e !important;
}

.tx-amount-negative {
  color: #ef4444 !important;
}

[data-theme="light"] .tx-amount-positive {
  color: #16a34a !important;
}

[data-theme="light"] .tx-amount-negative {
  color: #dc2626 !important;
}

/* Status badges - minimal, semantic colors */
.tx-status {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.tx-status-completed {
  background: rgba(34, 197, 94, 0.12);
  color: #22c55e;
}

.tx-status-pending {
  background: rgba(234, 179, 8, 0.12);
  color: #eab308;
}

.tx-status-cancelled {
  background: rgba(107, 114, 128, 0.15);
  color: #9ca3af;
}

.tx-status-failed {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}

.tx-status-default {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
}

[data-theme="light"] .tx-status-completed {
  background: rgba(34, 197, 94, 0.1);
  color: #16a34a;
}

[data-theme="light"] .tx-status-pending {
  background: rgba(234, 179, 8, 0.1);
  color: #ca8a04;
}

[data-theme="light"] .tx-status-cancelled {
  background: rgba(107, 114, 128, 0.1);
  color: #6b7280;
}

[data-theme="light"] .tx-status-failed {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}

/* Action column muted text */
.tx-action-muted {
  font-size: 11px;
  color: var(--text-secondary);
  opacity: 0.5;
}

/* Legacy type-badge support (keep for other uses) */
.type-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.3px;
}

.type-badge.topup,
.type-badge.credit {
  background: rgba(59, 130, 246, 0.12);
  color: var(--accent);
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.type-badge.positive {
  background: rgba(46, 204, 113, 0.15);
  border-color: rgba(46, 204, 113, 0.3);
  color: #2ecc71;
}

.type-badge.negative {
  background: rgba(231, 76, 60, 0.15);
  border-color: rgba(231, 76, 60, 0.3);
  color: #e74c3c;
}

[data-theme="light"] .type-badge.topup,
[data-theme="light"] .type-badge.credit {
  background: rgba(59, 130, 246, 0.08);
}

[data-theme="light"] .type-badge.positive {
  background: rgba(46, 204, 113, 0.12);
  border-color: rgba(46, 204, 113, 0.25);
}

[data-theme="light"] .type-badge.negative {
  background: rgba(231, 76, 60, 0.12);
  border-color: rgba(231, 76, 60, 0.25);
}

/* Invoice number badge in transactions table */
.invoice-number-cell {
  font-family: var(--font-mono);
}

.invoice-number-badge {
  display: inline-block;
  padding: 4px 8px;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 4px;
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--accent);
  letter-spacing: 0.5px;
}

[data-theme="light"] .invoice-number-badge {
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.15);
}

/* Actions cell with icon buttons */
.actions-cell {
  text-align: center;
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: var(--panel);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 6px;
  color: var(--accent);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2) inset;
}

.btn-icon:hover {
  background: rgba(59, 130, 246, 0.15);
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.25), 0 0 0 1px rgba(59, 130, 246, 0.1) inset;
}

.btn-icon:active {
  transform: translateY(0);
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.2) inset;
}

[data-theme="light"] .btn-icon {
  background: #f8fafc;
  border-color: rgba(59, 130, 246, 0.25);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .btn-icon:hover {
  background: rgba(59, 130, 246, 0.08);
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
}

/* ============================================
   INVOICE MODAL STYLES
   ============================================ */
.invoice-modal-panel {
  max-width: 700px;
  width: 100%;
}

.invoice-modal-body {
  padding: 0;
  max-height: 70vh;
  overflow-y: auto;
}

.invoice-container {
  padding: 32px;
  background: var(--panel);
  font-family: var(--font-mono);
}

/* Invoice Header */
.invoice-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 2px solid var(--accent);
}

.invoice-brand {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.invoice-logo {
  font-size: 24px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 3px;
  font-family: var(--font-heading);
}

.invoice-company-details {
  display: flex;
  flex-direction: column;
  font-size: 11px;
  color: var(--muted);
  gap: 2px;
}

.invoice-title-section {
  text-align: right;
}

.invoice-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 4px;
}

.invoice-number {
  font-size: 13px;
  color: var(--muted);
  margin-top: 8px;
  font-family: var(--font-mono);
}

/* Invoice Meta */
.invoice-meta {
  display: flex;
  gap: 40px;
  margin-bottom: 28px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}

.invoice-meta-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.invoice-meta-label {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.invoice-meta-value {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

/* Bill To Section */
.invoice-bill-to {
  margin-bottom: 28px;
}

.invoice-bill-to-label {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  display: block;
  margin-bottom: 8px;
}

.invoice-bill-to-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--text);
}

/* Line Items */
.invoice-items {
  margin-bottom: 24px;
}

.invoice-items-header {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.invoice-items-body {
  border-bottom: 1px solid var(--border);
}

.invoice-item {
  display: flex;
  justify-content: space-between;
  padding: 16px 0;
  font-size: 13px;
  color: var(--text);
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.invoice-item:last-child {
  border-bottom: none;
}

[data-theme="light"] .invoice-item {
  border-bottom-color: rgba(0, 0, 0, 0.03);
}

/* Totals */
.invoice-totals {
  margin-left: auto;
  width: 240px;
  margin-bottom: 32px;
}

.invoice-total-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 13px;
  color: var(--muted);
}

.invoice-total-row span:last-child {
  color: var(--text);
  font-weight: 500;
}

.invoice-grand-total {
  border-top: 2px solid var(--text);
  margin-top: 8px;
  padding-top: 12px;
  font-weight: 700;
  font-size: 16px;
  color: var(--text) !important;
}

.invoice-grand-total span {
  color: var(--text) !important;
}

/* Footer */
.invoice-footer {
  text-align: center;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
}

.invoice-footer p {
  margin-bottom: 8px;
}

.invoice-footer-note {
  font-size: 10px;
  opacity: 0.7;
}

/* Invoice Actions */
.invoice-actions {
  gap: 12px;
}

.invoice-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Light theme adjustments */
[data-theme="light"] .invoice-container {
  background: #fafafa;
}

[data-theme="light"] .invoice-header {
  border-bottom-color: var(--accent);
}

[data-theme="light"] .invoice-grand-total {
  border-top-color: #1a1a1a;
}

/* Mobile responsive invoice */
@media (max-width: 600px) {
  .invoice-modal-panel {
    max-width: 100%;
    margin: 0;
    border-radius: 0;
    max-height: 100vh;
  }

  .invoice-container {
    padding: 20px;
  }

  .invoice-header {
    flex-direction: column;
    gap: 20px;
  }

  .invoice-title-section {
    text-align: left;
  }

  .invoice-meta {
    flex-wrap: wrap;
    gap: 20px;
  }

  .invoice-totals {
    width: 100%;
  }

  .invoice-actions {
    flex-direction: column;
  }

  .invoice-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================
   IP VERIFICATION MODAL STYLES
   ============================================ */

/* Hidden states for IP verification elements */
#ipVerifyLoading.hidden,
#ipVerifyInstant.hidden,
#ipVerifySuccess.hidden,
#verificationStatus.hidden,
#callbackStatus.hidden {
  display: none !important;
}

.ip-verification-panel {
  max-width: 640px;
  width: 100%;
}

.ip-verification-panel .modal-header {
  border-bottom: 1px solid var(--border);
  padding-bottom: 16px;
}

.ip-verify-intro {
  margin-bottom: 24px;
  padding: 16px;
  background: rgba(59, 130, 246, 0.08);
  border-radius: 8px;
  border: 1px solid rgba(59, 130, 246, 0.15);
}

.ip-verify-intro p {
  margin: 0 0 8px 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}

.ip-verify-intro p:last-child {
  margin-bottom: 0;
}

.ip-verify-intro .verify-note {
  font-size: 12px;
  color: var(--muted);
}

/* Verification Steps */
.ip-verify-step {
  margin-bottom: 24px;
  padding: 20px;
  background: var(--panel);
  border-radius: 10px;
  border: 1px solid var(--border);
}

.step-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--accent);
  color: white;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 600;
}

.step-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.step-desc {
  margin: 0 0 16px 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

/* Verification Methods */
.verification-methods {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.verify-method {
  padding: 16px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  border: 1px solid var(--border);
}

[data-theme="light"] .verify-method {
  background: rgba(0, 0, 0, 0.02);
}

.method-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
}

.method-header svg {
  color: var(--accent);
}

.method-badge {
  margin-left: auto;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 4px;
  background: var(--border);
  color: var(--muted);
}

.method-badge.recommended {
  background: rgba(34, 197, 94, 0.15);
  color: var(--success);
}

.method-badge.instant {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(147, 51, 234, 0.2));
  color: var(--accent);
  font-weight: 600;
}

.method-content p {
  margin: 0 0 10px 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
}

.method-note {
  font-size: 11px !important;
  opacity: 0.8;
  margin-top: 8px !important;
}

/* Code Blocks */
.code-block {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  border: 1px solid var(--border);
  margin-bottom: 10px;
}

[data-theme="light"] .code-block {
  background: rgba(0, 0, 0, 0.04);
}

.code-block code {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
  word-break: break-all;
}

.dns-record {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.dns-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  min-width: 45px;
}

.copy-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.copy-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

.copy-btn.copied {
  background: var(--success);
  border-color: var(--success);
  color: white;
}

/* Verification Status */
.verification-status {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.4;
}

.verification-status.error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

.verification-status.success {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: var(--success);
}

/* Loading State */
.ip-verify-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
  text-align: center;
}

.ip-verify-loading p {
  margin: 16px 0 0 0;
  font-size: 14px;
  color: var(--muted);
}

.spinner-lg {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(59, 130, 246, 0.2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Instant Method Highlight */
.instant-method {
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
  background: rgba(59, 130, 246, 0.05) !important;
}

.instant-method .method-header {
  border-bottom-color: rgba(59, 130, 246, 0.2);
}

/* Callback Command - make it stand out */
.callback-command {
  background: rgba(0, 0, 0, 0.4) !important;
  padding: 12px 14px !important;
}

[data-theme="light"] .callback-command {
  background: rgba(0, 0, 0, 0.06) !important;
}

.callback-command code {
  font-size: 11px;
  line-height: 1.4;
}

/* Callback Status */
.callback-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding: 10px 14px;
  background: rgba(59, 130, 246, 0.08);
  border-radius: 6px;
  border: 1px solid rgba(59, 130, 246, 0.15);
}

.expiry-badge {
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--accent);
  padding: 4px 8px;
  background: rgba(59, 130, 246, 0.1);
  border-radius: 4px;
}

.status-text {
  font-size: 12px;
  color: var(--muted);
}

.status-text::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
  margin-right: 8px;
  animation: pulse-dot 1.5s ease-in-out infinite;
}

@keyframes pulse-dot {

  0%,
  100% {
    opacity: 0.4;
    transform: scale(0.8);
  }

  50% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Button Small */
.btn-sm {
  padding: 6px 12px !important;
  font-size: 12px !important;
  margin-top: 8px;
}

/* Success State */
.ip-verify-success {
  position: relative;
  text-align: center;
  padding: 20px 32px 20px;
  background: linear-gradient(145deg, rgba(34, 197, 94, 0.12) 0%, rgba(20, 30, 25, 0.95) 100%);
  border-radius: 8px;
  border: 1px solid rgba(34, 197, 94, 0.25);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 40px rgba(34, 197, 94, 0.1);
  backdrop-filter: blur(12px);
  margin: 0;
}

.ip-verify-success .success-close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: none;
  font-size: 16px;
  color: var(--muted);
  cursor: pointer;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.ip-verify-success .success-close:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.1);
}

.ip-verify-success .success-icon {
  margin: 0 0 6px 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}

.ip-verify-success .success-icon::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  background: radial-gradient(circle, rgba(34, 197, 94, 0.25) 0%, transparent 70%);
  border-radius: 50%;
  animation: successPulse 2s ease-in-out infinite;
}

.ip-verify-success .success-icon svg {
  width: 32px;
  height: 32px;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.4));
}

@keyframes successPulse {

  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.6;
  }

  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 0.3;
  }
}

.ip-verify-success h3 {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--success);
  letter-spacing: 0.3px;
}

.ip-verify-success p {
  margin: 0 0 12px 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

.ip-verify-success p strong {
  color: var(--text);
  font-weight: 500;
}

.ip-verify-success .btn {
  padding: 10px 24px;
  font-size: 12px;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  transition: all 0.2s;
  margin-bottom: 0;
}

.ip-verify-success .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
}

/* Hide modal panel background when showing success */
.ip-verification-panel:has(.ip-verify-success:not(.hidden)) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.ip-verification-panel:has(.ip-verify-success:not(.hidden)):hover {
  border: none !important;
  box-shadow: none !important;
}

.ip-verification-panel:has(.ip-verify-success:not(.hidden)):hover::before {
  display: none !important;
}

.ip-verification-panel:has(.ip-verify-success:not(.hidden)) .modal-body {
  padding: 0 !important;
  margin: 0 !important;
}

.ip-verification-panel:has(.ip-verify-success:not(.hidden)) {
  margin: 0 !important;
}

/* Spinner for buttons */
.spinner-sm {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Responsive */
@media (max-width: 600px) {
  .ip-verification-panel {
    max-width: 100%;
    margin: 16px;
  }

  .ip-verify-step {
    padding: 14px;
  }

  .callback-status {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
  }

  .ip-verify-intro {
    padding: 12px;
    margin-bottom: 16px;
  }

  .ip-verify-intro p {
    font-size: 12px;
  }

  .code-block {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .copy-btn {
    width: 100%;
    height: 32px;
  }

  .method-header {
    flex-wrap: wrap;
  }

  .method-badge {
    margin-left: 0;
    margin-top: 8px;
    width: fit-content;
  }
}

/* Mobile: Distinct background for transaction table rows */
@media (max-width: 768px) {
  .transactions-container .instances-table tr {
    background: rgba(8, 10, 14, 0.5);
    border: 1px solid var(--border);
  }

  [data-theme="light"] .transactions-container .instances-table tr {
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.08);
  }
}

#paymentElement {
  margin: 20px 0;
  padding: 20px;
  background: var(--card-bg);
  border-radius: 8px;
  border: 1px solid var(--border);
}

.field {
  margin-bottom: 20px;
}

.field label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: var(--text);
}

.field input {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card-bg);
  color: var(--text);
  font-size: 14px;
}

.field input:focus {
  outline: none;
  border-color: var(--primary);
}

.field small {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}

/* Sidebar Footer */


.powered-by {
  font-size: clamp(11px, 2.8vw, 12px);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  font-family: 'Inter', sans-serif !important;
}

.shugo-logo {
  height: clamp(26px, 6vw, 30px);
  width: auto;
}

/* Top Up Modal Styles */
.payment-method-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 8px;
}

.payment-method-icons-row {
  display: flex;
  align-items: center;
}

.payment-method-icons-row svg,
.payment-method-icons-row img {
  margin-right: -8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.payment-method-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 16px;
  background: rgba(8, 10, 14, 0.75) !important;
  border: 1px solid var(--border-hover);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-lg);
}

.payment-method-card:hover {
  background: var(--card-hover) !important;
  border-color: var(--accent);
}

.payment-method-card.selected {
  background: rgba(59, 130, 246, 0.1);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.payment-method-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.payment-method-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.payment-method-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  letter-spacing: 0.5px;
}

.payment-method-desc {
  font-size: 11px;
  color: var(--muted);
}

/* Mobile: Smaller payment method titles */
@media (max-width: 768px) {
  .payment-method-title {
    font-size: 12px;
  }
}

.amount-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.amount-currency-symbol {
  position: absolute;
  left: 16px;
  color: var(--muted);
  font-size: 16px;
  pointer-events: none;
}

.amount-input {
  padding-left: 32px !important;
  font-size: 18px !important;
  font-weight: 600;
  letter-spacing: 0.5px;
  -moz-appearance: textfield;
  /* Firefox - hide spinners */
}

/* Hide number input spinners (Chrome, Safari, Edge) */
.amount-input::-webkit-outer-spin-button,
.amount-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.amount-input::placeholder {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: normal;
}

.topbar h1 {
  font-size: var(--fs-xl);
  font-weight: 600;
  margin: 0;
  letter-spacing: 1px;
}

.btn.ghost.small {
  padding: 6px 12px;
  font-size: 12px;
  height: auto;
}

.btn.ghost.danger-text {
  color: #ef4444;
}

.btn.ghost.danger-text:hover {
  background: rgba(239, 68, 68, 0.1);
}

.order-summary {
  background: rgba(8, 10, 14, 0.75);
  border: 1px solid var(--border-hover);
  border-radius: 0 !important;
  padding: 16px;
  margin-top: 20px;
  box-shadow: var(--shadow-lg);
}

.summary-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--muted);
}

.summary-row.total {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  margin-bottom: 0;
  font-weight: 600;
  font-size: 16px;
  color: #fff;
}

.crypto-details {
  background: rgba(8, 10, 14, 0.75);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  border: 1px solid var(--border-hover);
  box-shadow: var(--shadow-lg);
}

.crypto-amount-display {
  font-size: 24px;
  font-weight: 700;
  color: var(--accent);
  margin: 12px 0;
  font-family: 'Michroma', sans-serif;
}

.crypto-address-box {
  background: rgba(255, 255, 255, 0.03);
  padding: 12px;
  border-radius: 8px;
  font-family: monospace;
  font-size: 12px;
  word-break: break-all;
  margin: 12px 0;
  border: 1px solid var(--border);
  color: #e6edf3;
}

[data-theme="light"] .crypto-address-box {
  background: #f9fafb;
  color: var(--text);
  border-color: var(--border);
}

/* Monitoring Dashboard Styles */
.monitoring-section {
  margin-top: 32px;
}

.section-title {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 16px;
  padding-left: 4px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-title svg {
  width: 20px;
  height: 20px;
  color: var(--accent);
  opacity: 0.8;
  flex-shrink: 0;
}

.section-title-with-subtitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  width: 100%;
  margin-bottom: 16px;
  gap: 16px;
}

.section-title-with-subtitle .section-title {
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  line-height: 1.2;
}

.section-subtitle {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--text-secondary);
  opacity: 0.7;
  text-align: right;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.2;
}

@media (max-width: 768px) {
  .section-title-with-subtitle {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .section-subtitle {
    text-align: left;
    margin-left: 0;
    font-size: 12px;
    padding-left: 4px;
  }
}

.monitoring-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 16px;
}

.charts-grid {
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-bottom: 40px;
}

.chart-placeholder.large {
  height: auto;
  min-height: 200px;
}

/* Bandwidth chart (Network Traffic) - fully responsive */
.chart-panel .chart-placeholder.large {
  padding: 16px;
  padding-bottom: 16px;
  height: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.chart-panel .chart-placeholder.large .chart-header-row {
  flex-shrink: 0;
  margin-bottom: 12px;
}

.chart-panel .chart-placeholder.large .chart-container-with-y {
  flex: 1;
  min-height: 180px;
  max-height: 400px;
  height: auto;
  display: flex;
  gap: 8px;
}

.chart-panel .chart-placeholder.large .chart-y-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  width: 70px;
  min-width: 70px;
  flex-shrink: 0;
}

.chart-panel .chart-placeholder.large .chart-content {
  flex: 1;
  min-height: 0;
  height: 100%;
  position: relative;
}

.chart-panel .chart-placeholder.large .chart-content svg {
  width: 100%;
  height: 100%;
  display: block;
}

.chart-panel .chart-placeholder.large .chart-axis {
  flex-shrink: 0;
  margin-top: 8px;
  padding-top: 8px;
}

.chart-placeholder.large svg {
  height: 100%;
}

.pie-chart-container.centered {
  justify-content: center;
  align-items: center;
  padding: 20px 0;
  flex-direction: column;
  gap: 16px;
}

.pie-chart-container.centered.stacked {
  flex-direction: column;
  gap: 12px;
}

.pie-chart-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

.pie-chart-title {
  font-family: 'JetBrains Mono', 'SF Mono', 'Monaco', 'Consolas', monospace;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text);
  text-align: center;
  opacity: 0.85;
}

[data-theme="light"] .pie-chart-title {
  color: var(--text);
  opacity: 0.9;
}

.hud-hint {
  font-family: 'JetBrains Mono', 'SF Mono', 'Monaco', 'Consolas', monospace;
  font-size: 10px;
  font-weight: 500;
  color: var(--muted);
  text-transform: lowercase;
  letter-spacing: 1px;
  margin-top: 3px;
  opacity: 0.7;
}

[data-theme="light"] .hud-hint {
  color: var(--text-secondary);
  opacity: 0.8;
}

.anomalies-table,
.events-table {
  width: 100%;
  border-collapse: collapse;
}

/* Make events table scrollable on medium screens */
@media (min-width: 769px) and (max-width: 1024px) {
  .events-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .events-table th,
  .events-table td {
    white-space: nowrap;
    padding: 10px 12px;
    font-size: 12px;
  }
}

.anomalies-table th,
.events-table th {
  text-align: left;
  padding: 12px 16px;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
}

.anomalies-table td,
.events-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--text);
  font-family: var(--font-mono);
}

.anomalies-table tr:last-child td,
.events-table tr:last-child td {
  border-bottom: none;
}

@media (max-width: 768px) {

  .anomalies-table thead,
  .events-table thead {
    display: none;
  }

  .anomalies-table tr,
  .events-table tr {
    display: block;
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 12px;
    padding: 12px;
    background: rgba(8, 10, 14, 0.5);
  }

  [data-theme="light"] .anomalies-table tr,
  [data-theme="light"] .events-table tr {
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.08);
  }

  .anomalies-table td,
  .events-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border: none;
    text-align: right;
    font-size: 12px;
  }

  .anomalies-table td:before,
  .events-table td:before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--muted);
    text-align: left;
    margin-right: 12px;
    flex-shrink: 0;
    font-size: 11px;
    text-transform: uppercase;
  }

  .anomalies-table td[data-label="Feedback"],
  .events-table td[data-label="Feedback"] {
    justify-content: space-between;
    width: 100%;
  }

  .events-table td[data-label="Type"] .badge {
    font-size: 10px;
    padding: 4px 8px;
  }

  .events-table .feedback-actions {
    gap: 6px;
  }

  .events-table .btn-feedback {
    width: 28px;
    height: 28px;
  }

  .events-table .btn-feedback svg {
    width: 14px;
    height: 14px;
  }
}

.feedback-actions {
  display: flex;
  gap: 8px;
}

.btn-feedback {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--accent);
  opacity: 1;
}

.btn-feedback svg {
  fill: currentColor;
  width: 16px;
  height: 16px;
}

.btn-feedback:hover {
  opacity: 1;
  background: var(--card-hover);
}

.btn-feedback.up.active {
  background: rgba(34, 197, 94, 0.2);
  border-color: #22c55e;
  color: var(--accent);
  opacity: 1;
}

.btn-feedback.down.active {
  background: rgba(239, 68, 68, 0.2);
  border-color: #ef4444;
  color: var(--accent);
  opacity: 1;
}

/* Remove animations from tables as requested */
.instances-table tr,
.anomalies-table tr,
.activity-item {
  animation: none !important;
}

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

  .chart-placeholder.large {
    height: 180px;
  }

  /* Dashboard Header Fixes */
  .global-header .balance-display-header,
  .global-header #topUpBtnHeader {
    display: none;
  }

  .user-dropdown .user {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Instances Section Fixes */
  .section-header-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .section-header-actions .btn {
    width: 100%;
  }

  /* Auth styles moved to dedicated auth section */
}

/* Small Mobile Fixes (iPhone 12 etc) */
@media (max-width: 480px) {

  /* Hide email text completely, show only profile icon */
  .modal-actions .btn {
    font-size: 16px;
    padding: 0 24px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    min-width: 120px;
    border-radius: 10px;
  }

  .user-dropdown .user {
    font-size: 0;
    width: auto;
    height: auto;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: transparent;
    box-shadow: none;
    color: #3b82f6 !important;
  }

  .user-dropdown .user:hover {
    border-color: var(--border-hover);
    background: rgba(255, 255, 255, 0.04);
  }

  [data-theme="light"] .user-dropdown .user {
    width: auto;
    height: auto;
    border: 1px solid rgba(0, 0, 0, 0.06);
    background: transparent;
    box-shadow: none;
  }

  [data-theme="light"] .user-dropdown .user:hover {
    border-color: rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.02);
  }

  .user-dropdown .user .user-email-text {
    display: none;
  }

  .user-dropdown .user .profile-icon {
    display: block;
    width: 20px;
    height: 20px;
  }

  .user-dropdown .dropdown-arrow {
    display: none;
  }
}

/* Hide menu icon when sidebar is active */
.sidebar.active~.sidebar-expand,
body.sidebar-open .sidebar-expand,
body.sidebar-open #mobileMenuToggle {
  display: none !important;
  opacity: 0;
  pointer-events: none;
}

/* Empty State Alignment */
.instances-table td[colspan="10"],
.instances-table td[colspan="12"] {
  text-align: center;
  padding: 40px 20px !important;
  display: table-cell;
  /* Ensure it behaves as a cell */
}

@media (max-width: 768px) {

  /* Ensure empty state centers on mobile using flexbox */
  .instances-table td[colspan="10"],
  .instances-table td[colspan="12"] {
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    padding: 40px 20px !important;
    border-bottom: none;
    min-height: 120px;
  }

  .instances-table td[colspan="10"]:before,
  .instances-table td[colspan="12"]:before {
    content: none !important;
    display: none !important;
  }

  .instances-table tr:has(td[colspan="10"]),
  .instances-table tr:has(td[colspan="12"]) {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
  }
}

/* Autofill Override */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px var(--autofill-bg) inset !important;
  -webkit-text-fill-color: var(--text) !important;
  transition: background-color 5000s ease-in-out 0s;
  caret-color: var(--text);
}

/* Force Autofill Colors (High Specificity) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill,
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus,
.field input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--autofill-bg) inset !important;
  -webkit-text-fill-color: var(--text) !important;
  color: var(--text) !important;
  caret-color: var(--text) !important;
  transition: background-color 5000s ease-in-out 0s;
  background-color: var(--autofill-bg) !important;
}

/* Light mode autofill override */
[data-theme="light"] input:-webkit-autofill,
[data-theme="light"] input:-webkit-autofill:hover,
[data-theme="light"] input:-webkit-autofill:focus,
[data-theme="light"] input:-webkit-autofill:active,
[data-theme="light"] textarea:-webkit-autofill,
[data-theme="light"] select:-webkit-autofill,
[data-theme="light"] .field input:-webkit-autofill,
[data-theme="light"] .field input:-webkit-autofill:hover,
[data-theme="light"] .field input:-webkit-autofill:focus,
[data-theme="light"] .field input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #f8fafc inset !important;
  -webkit-text-fill-color: #111827 !important;
  color: #111827 !important;
  caret-color: #111827 !important;
  background-color: #f8fafc !important;
}

/* Feedback Modal Font Refinement */


/* Light Mode Chart Background Refinement */
[data-theme="light"] .chart-placeholder {
  background: rgba(0, 0, 0, 0.015);
}

/* Custom Crypto Dropdown */
.custom-select-wrapper {
  position: relative;
  user-select: none;
  width: 100%;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
  text-decoration: none;
  font-family: var(--font-mono);
}

.custom-select-trigger:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.2);
}

.custom-select-wrapper.open .custom-select-trigger {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(58, 139, 253, 0.14);
}

.custom-select-trigger .arrow {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--muted);
  transition: transform 0.2s;
}

.custom-select-wrapper.open .arrow {
  transform: rotate(180deg);
}

.custom-options {
  position: absolute;
  display: block;
  top: 100%;
  left: 0;
  right: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-10px);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  margin-top: 4px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.custom-select-wrapper.open .custom-options {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transform: translateY(0);
}

.custom-option {
  position: relative;
  display: block;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}

.custom-option:hover {
  background: var(--accent);
  color: #ffffff;
}

.custom-option.selected {
  background: rgba(58, 139, 253, 0.1);
  color: var(--accent);
}

.custom-option.selected:hover {
  background: var(--accent);
  color: #ffffff;
}

/* Small Spinner for Status Badges */
.spinner-small {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 1s ease-in-out infinite;
  margin-right: 6px;
  vertical-align: middle;
}

/* Activity Loading State */
.activity-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  gap: 12px;
}

.activity-loading .spinner-activity {
  width: 24px;
  height: 24px;
  border: 2px solid var(--border);
  border-radius: 50%;
  border-top-color: var(--accent);
  animation: spin 0.8s linear infinite;
}

.activity-loading .loading-text {
  font-size: 13px;
  color: var(--muted);
  font-family: var(--font-mono);
  letter-spacing: 0.5px;
}

.activity-loading .loading-dots::after {
  content: '';
  animation: loadingDots 1.5s infinite;
}

@keyframes loadingDots {

  0%,
  20% {
    content: '';
  }

  40% {
    content: '.';
  }

  60% {
    content: '..';
  }

  80%,
  100% {
    content: '...';
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* --- Anomalies HUD Design --- */
.hud-flow-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
  position: relative;
  padding-bottom: 20px;
  /* Increased from 20px for mobile spacing */
}

.hud-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border);
  border-radius: 0 !important;
  padding: 12px 16px;
  min-width: 180px;
  position: relative;
  z-index: 2;
}

.hud-item:hover {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.1);
}

/* Connecting Line */
/* Connecting Line Removed */
/* .hud-flow-container::before { ... } */

.hud-icon-wrapper {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--input-border);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  /* Above the line */
  position: relative;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.hud-item:hover .hud-icon-wrapper {
  border-color: currentColor;
  box-shadow: 0 0 15px currentColor;
}

.hud-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hud-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
  opacity: 0.6;
}

.hud-value {
  font-size: 18px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  /* Tech feel */
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

/* Specific Colors */
.hud-item.detected {
  color: var(--text);
}

.hud-item.detected .hud-icon-wrapper {
  color: var(--text);
}

.hud-item.acknowledged {
  color: var(--text);
}

.hud-item.acknowledged .hud-icon-wrapper {
  color: var(--text);
}

.hud-item.blocked {
  color: var(--chart-blue-primary);
}

.hud-item.blocked .hud-icon-wrapper {
  color: var(--chart-blue-primary);
}

/* Ultra Large Screen Optimization (1600px+) */
@media (min-width: 1600px) {
  :root {
    --font-size-base: 16px;
  }

  /* Keep base font-size at 16px to prevent zoomed appearance */
  html {
    font-size: 16px !important;
  }

  /* Layout & Spacing */
  .main {
    padding: 60px;
    max-width: 100%;
  }

  /* Constrain content width on very large screens to prevent zoomed appearance */
  .app {
    max-width: 1920px;
    margin: 0 auto;
  }

  .sidebar {
    width: 340px;
    padding: 40px 30px;
  }

  .logo-header {
    gap: 24px;
  }

  .logo-text {
    font-size: 18px;
    letter-spacing: 0.22em;
  }

  .sidebar-close {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    font-size: 20px;
  }

  .sidebar-support-badge {
    width: calc(340px - 60px);
  }

  .topbar.global-header {
    padding: 24px 32px;
    margin-bottom: 32px;
  }

  .summary-grid,
  .metrics-grid,
  .monitoring-grid,
  .settings-grid {
    gap: 40px;
  }

  /* Cards & Panels */
  .card,
  .panel,
  .metric-card {
    padding: 20px;
  }

  .card .value {
    font-size: 24px;
    margin-top: 16px;
  }

  .metric-card .value {
    font-size: 24px;
  }

  .metric-card .label,
  .card.small .label {
    font-size: 14px;
  }

  /* Typography - Reduced to prevent zoomed appearance */
  h1 {
    font-size: 26px;
  }

  h2 {
    font-size: 20px;
  }

  h3,
  .section-title {
    font-size: 15px;
    margin-bottom: 24px;
  }

  .logo-text {
    font-size: 18px;
    letter-spacing: 0.28em;
  }

  .powered-by {
    font-size: 13px;
  }

  .shugo-logo {
    height: 32px;
  }

  .sidebar nav a {
    font-size: 16px;
    padding: 18px;
    margin: 8px 0;
  }

  .sidebar nav a.logout {
    font-size: 16px;
  }

  /* Tables */
  .instances-table th {
    font-size: 13px;
    padding: 20px 28px;
  }

  .instances-table td {
    font-size: 14px;
    padding: 20px 28px;
  }

  /* Forms & Buttons */
  .btn {
    padding: 14px 28px;
    font-size: 14px;
    border-radius: 12px;
  }

  .select,
  input {
    padding: 14px 20px;
    font-size: 14px;
    height: 56px;
  }

  /* Charts */
  .chart-placeholder.large {
    height: 400px;
  }

  .chart-placeholder {
    padding: 32px;
  }

  /* Activity List */
  .activity-item {
    padding: 24px;
    gap: 20px;
  }

  .activity-title {
    font-size: 14px;
  }

  .activity-time {
    font-size: 13px;
  }

  /* Anomalies HUD */
  .hud-item {
    padding: 16px 24px;
  }

  .hud-value {
    font-size: 22px;
  }

  .hud-label {
    font-size: 12px;
  }

  .pie-chart {
    width: 240px;
    height: 240px;
  }

  /* Credit Info Card */
  .credit-info-content strong {
    font-size: 17px;
    margin-bottom: 16px;
  }

  .credit-info-content p,
  .credit-info-content ul {
    font-size: 14px;
    line-height: 1.8;
  }

  .credit-info-icon {
    width: 64px;
    height: 64px;
    font-size: 28px;
  }

  /* Global Header */
  #welcomeHeader {
    font-size: 22px;
  }

  .balance-value-header {
    font-size: 16px;
  }

  .balance-label-header {
    font-size: 13px;
  }

  .user-email-text {
    font-size: 14px;
  }

  .user {
    padding: 10px 16px;
  }

  #themeToggle svg {
    width: 20px;
    height: 20px;
  }

  .user .profile-icon {
    width: 24px;
    height: 24px;
  }

  /* Anomalies Table */
  .anomalies-table th {
    font-size: 12px;
    padding: 20px 28px;
  }

  .anomalies-table td {
    font-size: 14px;
    padding: 20px 28px;
  }

  .reference-col {
    font-size: 14px;
  }

  /* Status Badges for large screens */
  .badge,
  .instances-table .badge,
  .transactions-container .badge,
  #transactionsTable .badge,
  .anomalies-table .badge {
    font-size: 13px !important;
    padding: 6px 14px !important;
    gap: 6px !important;
    line-height: 1.2 !important;
  }

  .badge .status-dot,
  .instances-table .badge .status-dot {
    width: 7px !important;
    height: 7px !important;
  }

  /* Transaction History Table */
  .transactions-container .instances-table th,
  #transactionsTable th {
    font-size: 12px;
    padding: 20px 28px;
  }

  .transactions-container .instances-table td,
  #transactionsTable td {
    font-size: 14px;
    padding: 20px 28px;
  }

  /* Auth styles moved to dedicated auth section */

  /* Auth Brand Header - Large Screen */
  .brand-logo {
    height: 48px;
  }

  .brand-text {
    font-size: 24px;
    letter-spacing: 4px;
  }

  .bittensor-powered {
    gap: 6px;
  }

  .powered-text {
    font-size: 11px;
    letter-spacing: 2px;
  }

  .bittensor-name {
    font-size: 13px;
    letter-spacing: 1.5px;
  }

  .subnet-tag {
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 5px;
  }

  .brand-separator {
    font-size: 10px;
    margin: 0;
  }

  .auth-footer-links {
    gap: 40px;
  }

  .auth-footer-links a {
    font-size: 14px;
  }

  /* Modals */
  .modal-panel {
    padding: 48px;
    max-width: 720px;
    width: 100%;
  }

  .modal-header h2 {
    font-size: 26px;
    margin-bottom: 8px;
  }

  /* Modal content text for large screens */
  .modal-panel p,
  .modal-content p {
    font-size: 15px;
  }

  /* Deploy modal content for large screens */
  .deploy-subtitle {
    font-size: 15px;
  }

  .stage-label {
    font-size: 15px;
  }

  .stage-description {
    font-size: 13px;
  }

  .deploy-status {
    font-size: 14px;
  }

  .modal-form label {
    font-size: 14px;
    margin-bottom: 16px;
    display: block;
  }

  .modal-form input,
  .modal-form select,
  .modal-form textarea,
  .modal-form .input-wrapper input {
    height: 48px;
    font-size: 16px !important;
    padding: 0 20px;
    border-radius: 12px;
  }

  .modal-form textarea {
    min-height: 48px;
    height: auto;
    padding: 12px 20px;
  }

  #topUpAmount {
    font-size: 20px !important;
    height: 56px;
    padding-left: 50px;
    -moz-appearance: textfield;
    /* Firefox */
  }

  #topUpAmount::-webkit-outer-spin-button,
  #topUpAmount::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .field-hint {
    font-size: 14px;
    margin-top: 12px;
  }

  .currency-symbol {
    font-size: 24px;
    top: 50%;
    transform: translateY(-50%);
    left: 20px;
  }

  .modal-form .input-wrapper input {
    padding-left: 50px;
  }

  .field-hint {
    font-size: 16px;
    margin-top: 12px;
  }

  .currency-symbol {
    font-size: 18px;
    left: 28px;
  }

  .modal-form .input-wrapper input {
    padding-left: 50px;
  }

  .modal-actions {
    margin-top: 32px;
    gap: 20px;
  }

  .modal-actions .btn {
    font-size: 15px;
    padding: 16px 32px;
    white-space: nowrap;
    min-width: 140px;
    border-radius: 12px;
    height: auto;
    line-height: normal;
  }

  .payment-method-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 12px;
  }

  .payment-method-card {
    padding: 24px;
    border-radius: 16px;
  }

  .payment-method-title {
    font-size: 15px;
    font-weight: 600;
    font-family: var(--font-mono);
    letter-spacing: 0.5px;
  }

  #cryptoCurrencyField label {
    font-size: 10px;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .modal-form select,
  #cryptoCurrency {
    font-size: 9px;
    font-family: var(--font-mono);
    padding: 8px 12px;
    height: auto;
    letter-spacing: 0.5px;
  }

  .payment-method-desc {
    font-size: 13px;
    margin-top: 4px;
  }

  .auth-features {
    gap: 36px;
  }

  /* Auth styles moved to dedicated auth section */

  /* Header Refinements */
  #topUpBtnHeader {
    padding: 10px 24px;
    font-size: 15px;
    border-radius: 8px !important;
  }

  .dropdown-arrow {
    font-size: 13px;
  }

  .dropdown-item {
    font-size: 14px;
    padding: 16px 24px;
  }

  .balance-label-header {
    font-size: 13px;
  }

  /* Settings Modal Refinements */
  .setting-section h3 {
    font-size: 15px;
  }

  .setting-title {
    font-size: 15px;
  }

  .setting-desc {
    font-size: 14px;
  }

  .api-key-input {
    font-size: 15px !important;
  }

  .switch input {
    display: none;
  }

  .modal-form input::placeholder {
    font-size: 14px;
  }

  /* Monitoring Page Refinements */
  .metric-card .label {
    font-size: 14px;
  }

  .metric-card .hint {
    font-size: 13px;
  }

  .chart-title {
    font-size: 13px;
  }

  .chart-axis span,
  .chart-y-axis span {
    font-size: 12px;
  }

  .pie-legend .legend-item {
    font-size: 13px !important;
  }

  .pie-legend .legend-color {
    width: 14px;
    height: 14px;
  }

  .btn-feedback {
    width: 36px;
    height: 36px;
  }

  .btn-feedback svg {
    width: 20px !important;
    height: 20px !important;
  }

  /* Port Scanner - match deploy button font size */
  .port-scanner-controls .port-scan-btn,
  .port-scan-btn {
    font-size: 14px !important;
    padding: 12px 28px !important;
    min-height: 44px !important;
  }

  .port-scanner-controls .port-scan-btn .btn-icon,
  .port-scan-btn .btn-icon {
    width: 20px !important;
    height: 20px !important;
  }

  /* Port Scanner Controls - Dynamic width based on content */
  /* Port Scanner Controls - Dropdown on top, button below */
  .port-scanner-controls {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .port-scanner-controls .port-scan-btn {
    width: 100% !important;
  }

  /* Deploy Modal - Responsive width for very large desktop */
  #deployModal .modal-panel {
    max-width: 500px !important;
    width: 100% !important;
  }

  /* Deploy Modal form fields - reduced height */
  #deployModal .modal-form input[type="text"],
  #deployModal .modal-form input[type="number"],
  #deployModal .modal-form select {
    height: 48px !important;
    padding: 0 20px !important;
    font-size: 16px !important;
  }

  .section-title {
    font-size: 15px;
  }

  /* View Header Actions Refinements */
  .view-header-actions .user {
    font-size: 14px;
  }

  .view-header-actions .btn,
  .view-header-actions .select {
    font-size: 14px;
    padding: 12px 24px;
    height: auto;
  }

  .panel-header {
    font-size: 15px;
  }

  .activity-loading .spinner-activity {
    width: 28px;
    height: 28px;
  }

  .activity-loading .loading-text {
    font-size: 13px;
  }
}

/* ====== MONITORING PAGE DESIGN SYSTEM ====== */

/* 1. Base Layout (Desktop Default) */
.analytics-section {
  margin-bottom: 32px;
}

.monitoring-grid-layout {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Top Row: HUD + Bandwidth */
.analytics-row-top {
  display: grid;
  grid-template-columns: 400px 1fr;
  /* Standard desktop balance */
  gap: 24px;
  min-height: 300px;
}

/* Bottom Row: Volume + Latency */
.analytics-row-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* Chart Containers - Default Desktop */
.chart-container-with-y {
  display: flex;
  min-height: 180px;
  height: auto;
  gap: 12px;
  flex: 1;
}

.chart-placeholder {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

.chart-content {
  flex: 1;
  position: relative;
  border-left: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  min-height: 0;
}

.chart-content svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
}

/* HUD Panel Styling - Base */
.hud-panel {
  display: flex;
  flex-direction: column;
  background: var(--header-bg);
  border: 1px solid var(--border-hover);
  box-shadow: var(--shadow-lg);
  padding: 24px;
}

.anomalies-charts-wrapper,
.events-charts-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 24px;
  padding: 10px 0;
  justify-content: space-around;
}

.hud-flow-container {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px;
}

.hud-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px 12px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 0 !important;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  transition: all 0.3s ease;
  min-width: 0;
  /* Allow shrinking */
}

[data-theme="light"] .hud-item {
  background: #f3f4f6;
}

.hud-item:hover {
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* HUD Status Colors */
/* 1. Acknowledged (Left) - Low Intensity */
.hud-item.acknowledged .hud-icon-wrapper {
  color: #9ca3af;
  background: rgba(156, 163, 175, 0.05);
  box-shadow: none;
}

[data-theme="light"] .hud-item.acknowledged .hud-icon-wrapper {
  color: #6b7280;
  background: rgba(148, 163, 184, 0.16);
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: none;
}

.hud-item.acknowledged:hover {
  border-color: rgba(156, 163, 175, 0.3);
}

/* 2. Detected (Middle) - Medium Intensity */
.hud-item.detected .hud-icon-wrapper {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

[data-theme="light"] .hud-item.detected .hud-icon-wrapper {
  color: #111827;
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: none;
}

.hud-item.detected:hover {
  border-color: rgba(255, 255, 255, 0.3);
}

/* 3. Mitigated (Right) - High Intensity */
.hud-item.blocked .hud-icon-wrapper {
  color: #2563eb;
  background: rgba(37, 99, 235, 0.2);
  box-shadow: 0 0 20px rgba(37, 99, 235, 0.5);
}

[data-theme="light"] .hud-item.blocked .hud-icon-wrapper {
  color: #2563eb;
  background: rgba(37, 99, 235, 0.10);
  border: 1px solid rgba(37, 99, 235, 0.30);
  box-shadow: none;
}

.hud-item.blocked:hover {
  border-color: rgba(37, 99, 235, 0.6);
}

.hud-icon-wrapper {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.hud-icon-wrapper svg {
  width: 20px;
  height: 20px;
}

.hud-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hud-label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  margin-bottom: 4px;
  font-weight: 600;
}

.hud-value {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
}

.divider-vertical {
  height: 1px;
  width: 100%;
  background: var(--border);
  opacity: 0.5;
}

/* Distribution Pie Chart */
.distribution-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.pie-chart-container.centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
}

.pie-chart-container.centered.stacked .pie-legend-grid {
  justify-content: center;
}

.pie-chart {
  width: 100px;
  height: 100px;
  filter: drop-shadow(0 0 12px rgba(58, 139, 253, 0.25));
}

.pie-legend-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--muted);
  font-family: var(--font-mono);
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  box-shadow: 0 0 5px currentColor;
}

/* Legend item with tooltip */
.legend-item.has-tooltip {
  position: relative;
  cursor: help;
  transition: background 0.2s ease;
  padding: 6px 10px;
  margin: -6px -10px;
  border-radius: 6px;
}

.legend-item.has-tooltip:hover {
  background: rgba(255, 255, 255, 0.05);
}

.legend-label {
  font-weight: 500;
}

.legend-count {
  color: var(--muted);
  margin-left: 4px;
}

.legend-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 11px;
  color: var(--text);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  z-index: 100;
}

.legend-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--border);
}

.legend-tooltip::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--panel);
  z-index: 1;
}

.legend-item.has-tooltip:hover .legend-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-4px);
}

[data-theme="light"] .legend-item.has-tooltip:hover {
  background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .legend-tooltip {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Event Types Info Section */
.event-types-info {
  margin-top: 24px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.event-types-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
}

.bulb-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.4));
  animation: bulbPulse 3s ease-in-out infinite;
}

@keyframes bulbPulse {

  0%,
  100% {
    filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.3));
  }

  50% {
    filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.6));
  }
}

.event-types-header span {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text);
}

.event-types-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.event-type-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.event-type-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.event-type-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}

.event-type-dot.bogon {
  background: #3a8bfd;
  box-shadow: 0 0 8px rgba(58, 139, 253, 0.5);
}

.event-type-dot.blacklist {
  background: #94a3b8;
  box-shadow: 0 0 8px rgba(148, 163, 184, 0.4);
}

.event-type-name {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.3px;
}

.event-type-desc {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted);
  padding-left: 20px;
}

[data-theme="light"] .event-types-info {
  background: rgba(59, 130, 246, 0.03);
  border-color: rgba(59, 130, 246, 0.1);
}

[data-theme="light"] .event-types-header {
  border-bottom-color: rgba(59, 130, 246, 0.1);
}

[data-theme="light"] .event-type-dot.bogon {
  background: #2563eb;
  box-shadow: none;
}

[data-theme="light"] .event-type-dot.blacklist {
  background: #64748b;
  box-shadow: none;
}

/* Chart Panel & Visuals */
.chart-panel {
  background: linear-gradient(180deg, rgba(8, 10, 14, 0.8) 0%, rgba(8, 10, 14, 0.7) 100%);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
  padding: 24px;
}

.chart-panel::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(58, 139, 253, 0.5), transparent);
  animation: scanline 4s linear infinite;
  opacity: 0.3;
  pointer-events: none;
}

[data-theme="light"] .chart-panel {
  background: var(--header-bg);
}

[data-theme="light"] .chart-panel::after {
  display: none;
}

@keyframes scanline {
  0% {
    top: 0;
    opacity: 0;
  }

  10% {
    opacity: 0.5;
  }

  90% {
    opacity: 0.5;
  }

  100% {
    top: 100%;
    opacity: 0;
  }
}

.chart-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.live-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--neon-green);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 4px 8px;
  background: rgba(46, 204, 113, 0.1);
  border-radius: 4px;
  border: 1px solid rgba(46, 204, 113, 0.2);
}

[data-theme="light"] .live-indicator {
  color: #2ecc71;
  background: rgba(46, 204, 113, 0.1);
  border-color: rgba(46, 204, 113, 0.2);
}

.blink {
  animation: blinker 1.5s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

.chart-y-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: right;
  font-size: 11px;
  color: var(--muted);
  font-family: var(--font-mono);
  padding-bottom: 20px;
  width: 55px;
}

.chart-y-axis-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 10px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--accent);
  font-weight: 600;
  padding: 8px 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chart-grid-line {
  stroke: var(--border);
  stroke-width: 0.5;
  stroke-dasharray: 3 3;
  opacity: 0.15;
}

/* Chart hover elements */
.chart-hover-line {
  stroke: rgba(96, 165, 250, 0.6);
  stroke-width: 1;
  stroke-dasharray: 4 2;
  pointer-events: none;
}

.chart-hover-dot {
  fill: #60a5fa;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 2;
  pointer-events: none;
  filter: drop-shadow(0 0 4px rgba(96, 165, 250, 0.6));
}

/* Chart tooltip */
.chart-tooltip {
  position: absolute;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(96, 165, 250, 0.4);
  border-radius: 6px;
  padding: 8px 12px;
  pointer-events: none;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 20px rgba(96, 165, 250, 0.15);
  transform: translateX(-50%);
  min-width: 90px;
  text-align: center;
  backdrop-filter: blur(8px);
}

.chart-tooltip .tooltip-value {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: #60a5fa;
  white-space: nowrap;
}

.chart-tooltip .tooltip-time {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 4px;
  white-space: nowrap;
}

/* Light theme tooltip */
[data-theme="light"] .chart-tooltip {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(96, 165, 250, 0.3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 20px rgba(96, 165, 250, 0.1);
}

[data-theme="light"] .chart-tooltip .tooltip-value {
  color: #2563eb;
}

[data-theme="light"] .chart-tooltip .tooltip-time {
  color: rgba(0, 0, 0, 0.6);
}

/* Make chart-content position relative for tooltip positioning */
.chart-content {
  position: relative;
}

/* Clean cybersecurity-styled chart lines */
.data-path {
  /* Subtle glow handled inline for more control */
  transition: opacity 0.2s ease;
}

.data-path.area-fill {
  opacity: 0.15;
}

[data-theme="light"] .data-path {
  filter: none;
}

/* Data bars styling */
.data-bar {
  transition: opacity 0.15s ease, filter 0.15s ease;
}

/* Anomalies Table */
.anomalies-table th {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  padding: 16px;
  border-bottom: 1px solid var(--border);
}

.anomalies-table td {
  padding: 16px;
  font-family: var(--font-mono);
  font-size: 13px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.02);
}

.anomalies-table tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}


/* ====== RESPONSIVE BREAKPOINTS & TYPOGRAPHY ====== */

/* 1. Small / Medium screens (≤ 1600px): slightly more compact instance badges & actions */
@media (max-width: 1600px) {

  /* Only touch badges inside the instances table */
  .instances-table .badge,
  .transactions-container .badge,
  #transactionsTable .badge,
  .anomalies-table .badge {
    font-size: 11px;
    padding: 4px 9px;
    gap: 4px;
  }

  .instances-table .badge .status-dot {
    width: 5px;
    height: 5px;
  }

  /* Slightly smaller actions buttons in instances table */
  .instances-table td.actions .actions-buttons .btn {
    padding: 9px 14px;
    font-size: 12px;
    min-width: 100px;
  }

  .instances-table td.actions .actions-buttons .btn svg {
    width: 15px;
    height: 15px;
    margin-right: 4px !important;
  }
}

/* Medium screens (≤ 1200px) */
@media (max-width: 1200px) {
  .instances-table td.actions .actions-buttons .btn {
    padding: 8px 12px;
    font-size: 12px;
    min-width: 90px;
  }

  .instances-table td.actions .actions-buttons .btn svg {
    width: 14px;
    height: 14px;
    margin-right: 3px !important;
  }
}

/* Smaller screens (≤ 900px) */
@media (max-width: 900px) {

  /* Reduce badge sizes for tablet/smaller screens */
  .badge,
  .instances-table .badge,
  .transactions-container .badge,
  #transactionsTable .badge,
  .anomalies-table .badge {
    font-size: 11px !important;
    padding: 4px 9px !important;
    gap: 4px !important;
  }

  .badge .status-dot,
  .instances-table .badge .status-dot {
    width: 5px !important;
    height: 5px !important;
  }

  .instances-table td.actions .actions-buttons .btn {
    padding: 8px 10px;
    font-size: 11px;
    min-width: 80px;
  }

  .instances-table td.actions .actions-buttons .btn svg {
    width: 13px;
    height: 13px;
    margin-right: 2px !important;
  }
}

/* High-DPI laptops (3K Zenbook, etc.) - effective viewport 1024-1599px */
@media (min-width: 1024px) and (max-width: 1599px) {

  #deployProgressModal .deploy-progress-panel,
  #instanceDetailsModal .deploy-progress-panel {
    width: 500px;
    max-width: 500px;
  }

  /* Deploy Modal - Responsive width for medium desktop */
  #deployModal .modal-panel {
    max-width: 490px !important;
    width: 100% !important;
  }
}

/* 2. Large Screens (> 1600px) - "Command Center" View */
@media (min-width: 1600px) {
  .analytics-row-top {
    grid-template-columns: 550px 1fr;
    min-height: 220px;
  }

  /* Reset chart-panel to default (no flexbox) for large screens */
  .chart-panel {
    display: block;
  }

  /* Bandwidth chart - large screens */
  .chart-panel .chart-placeholder.large {
    padding: 24px;
    min-height: 350px;
  }

  .chart-panel .chart-placeholder.large .chart-container-with-y {
    min-height: 280px;
    max-height: 500px;
  }

  .chart-panel .chart-axis {
    margin-top: 12px;
    padding-top: 8px;
    font-size: 12px;
    visibility: visible !important;
    opacity: 1 !important;
    display: flex !important;
  }

  .hud-panel {
    padding: 16px;
  }

  .anomalies-charts-wrapper {
    gap: 16px;
    padding: 5px 0;
  }

  .hud-flow-container {
    gap: 8px;
    /* Tighter gap for tablet */
  }

  .pie-chart {
    width: 80px;
    height: 80px;
  }

  .pie-chart-container.centered {
    gap: 16px;
  }

  .analytics-row-bottom .chart-container-with-y {
    height: 300px;
  }

  /* Typography Scaling for Large Screens */
  .hud-value {
    font-size: 22px !important;
    /* Middle ground for very large screens */
  }

  /* Specific adjustment for Threat Intelligence metrics */
  #valDetected,
  #valBlocked {
    font-size: 22px !important;
  }

  .hud-label {
    font-size: 12px !important;
  }

  .chart-title {
    font-size: 13px !important;
    /* Middle ground for very large screens */
  }

  /* Threat Intelligence panel title - match Network Traffic */
  .hud-panel h3 {
    font-size: 13px !important;
  }

  /* Port Scanner - match deploy button font size */
  .port-scan-btn {
    font-size: 14px !important;
    padding: 14px 28px !important;
    min-height: 48px;
  }

  .port-scan-btn .btn-icon {
    width: 20px !important;
    height: 20px !important;
  }

  .scan-mode-select {
    font-size: 14px !important;
    padding: 14px 20px !important;
    min-height: 48px;
  }

  .legend-item {
    font-size: 14px;
    /* Readable legend */
  }

  #transactionsTable td {
    font-size: 14px !important;
  }

  #transactionsTable th {
    font-size: 12px !important;
    padding: 20px 28px !important;
  }

  .transactions-container .instances-table th {
    font-size: 12px !important;
    padding: 20px 28px !important;
  }

  .transactions-container .instances-table td {
    font-size: 14px !important;
    padding: 20px 28px !important;
  }

  .anomalies-table th {
    font-size: 12px !important;
    padding: 20px 28px !important;
  }

  .anomalies-table td {
    font-size: 14px !important;
    padding: 20px 28px !important;
  }

  /* Status Badges for large screens */
  .badge,
  .instances-table .badge,
  .transactions-container .badge,
  #transactionsTable .badge,
  .anomalies-table .badge {
    font-size: 13px !important;
    padding: 6px 14px !important;
    gap: 6px !important;
    line-height: 1.2 !important;
  }

  .badge .status-dot,
  .instances-table .badge .status-dot {
    width: 7px !important;
    height: 7px !important;
  }

  .chart-y-axis,
  .chart-axis span {
    font-size: 12px;
  }

  /* Larger icons in instances table for large screens */
  .instances-table td.actions .actions-buttons .btn svg {
    width: 18px;
    height: 18px;
    margin-right: 6px !important;
  }

  .instances-table td.actions .actions-buttons .btn {
    padding: 12px 20px;
    font-size: 14px;
    min-width: 120px;
  }

  /* Larger deployment progress modal for large screens */
  #deployProgressModal .deploy-progress-panel,
  #instanceDetailsModal .deploy-progress-panel {
    width: 520px;
    padding: 40px;
  }
}

/* 3. Medium Screens (14" laptops, 1366px - 1600px) */
@media (min-width: 1366px) and (max-width: 1600px) {
  .chart-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .chart-placeholder.large {
    flex: 1;
    min-height: 450px;
    padding-bottom: 35px !important;
  }

  .chart-placeholder.large .chart-container-with-y {
    height: 100% !important;
    min-height: 420px;
    flex: 1;
  }

  .chart-panel .chart-axis {
    margin-top: 10px;
    padding-top: 6px;
    font-size: 11px;
    visibility: visible !important;
    opacity: 1 !important;
    display: flex !important;
  }
}

/* 3. Laptop / Small Desktop (1200px - 1400px) */
@media (max-width: 1400px) {
  .analytics-row-top {
    grid-template-columns: 420px 1fr;
    /* Wider HUD for this range */
    min-height: 320px;
    /* Ensure enough height */
  }

  /* Compact Typography for this range too */
  .hud-label {
    font-size: 9px;
    letter-spacing: 0;
    white-space: nowrap;
  }

  .hud-item {
    padding: 12px 8px;
  }

  /* Force chart to fill height for medium screens */
  .chart-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .chart-placeholder.large {
    flex: 1;
    min-height: 0;
  }

  .chart-placeholder.large .chart-container-with-y {
    height: 100% !important;
    min-height: 280px;
    flex: 1;
  }
}

/* 4. Tablet / Portrait Desktop (< 1200px) */
@media (max-width: 1200px) {
  .analytics-row-top {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 24px;
  }

  .hud-panel {
    /* Vertical layout for HUD on tablet to keep title on top */
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 16px;
  }

  .anomalies-charts-wrapper {
    flex-direction: row;
    align-items: center;
    width: 100%;
    justify-content: space-evenly;
    /* Even spacing */
    gap: 24px;
  }

  .hud-stats-group {
    flex: 1;
  }

  .hud-item {
    padding: 12px 8px;
    /* Compact padding for tablet */
  }

  .hud-label {
    font-size: 9px;
    /* Aggressively reduced */
    letter-spacing: 0;
    /* Remove spacing to prevent overflow */
    white-space: nowrap;
    /* Prevent wrapping */
  }

  .distribution-group {
    flex: 1;
  }

  .divider-vertical {
    width: 1px;
    height: 80px;
  }

  .chart-placeholder.large {
    flex: 1;
    min-height: 0;
  }

  .chart-placeholder.large .chart-container-with-y {
    height: 100% !important;
    min-height: 250px;
    flex: 1;
  }

  /* Volume Chart Tablet Styles */
  .volume-chart-card {
    min-height: 450px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .volume-chart-card .chart-placeholder {
    padding: 20px !important;
    padding-bottom: 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .volume-chart-card .chart-header-row {
    flex-wrap: wrap !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .volume-chart-card .chart-title {
    font-size: 13px !important;
  }

  .volume-chart-card .chart-time-range-selector {
    padding: 2px !important;
  }

  .volume-chart-card .time-range-btn {
    padding: 4px 9px !important;
    font-size: 10px !important;
  }

  .volume-chart-card .chart-legend {
    gap: 14px !important;
    width: 100% !important;
  }

  .volume-chart-card .legend-item {
    gap: 7px !important;
  }

  .volume-chart-card .legend-color {
    width: 14px !important;
    height: 3px !important;
  }

  .volume-chart-card .legend-label {
    font-size: 12px !important;
  }

  .volume-chart-card .legend-sublabel {
    font-size: 11px !important;
  }

  /* Volume chart tablet - adjusted for absolute positioning */
  .volume-chart-card .chart-container-with-y {
    min-height: 180px !important;
    padding-left: 50px !important;
  }

  .volume-chart-card .chart-y-axis {
    width: 42px !important;
  }

  .volume-chart-card .chart-y-axis span {
    font-size: 10px !important;
    right: 6px !important;
  }

  .volume-chart-card .chart-content {
    left: 50px !important;
  }

  .volume-chart-card .chart-axis.volume-axis {
    padding-left: 50px !important;
    font-size: 10px !important;
  }
}

/* Medium screens (600px - 900px) */
@media (max-width: 900px) and (min-width: 600px) {
  .volume-chart-card .chart-container-with-y {
    min-height: 160px !important;
    padding-left: 53px !important;
  }

  .volume-chart-card .chart-y-axis {
    width: 45px !important;
  }

  .volume-chart-card .chart-content {
    left: 53px !important;
  }

  .volume-chart-card .chart-axis.volume-axis {
    padding-left: 53px !important;
  }
}

/* 5. Mobile (< 900px) */
@media (max-width: 900px) {
  .analytics-row-bottom {
    grid-template-columns: 1fr;
  }

  .hud-panel {
    flex-direction: column;
    align-items: stretch;
  }

  .anomalies-charts-wrapper {
    flex-direction: column;
    gap: 24px;
  }

  .divider-vertical {
    width: 100%;
    height: 1px;
  }

  .pie-chart-container.centered {
    justify-content: center;
  }

  .chart-container-with-y {
    height: 200px;
  }

  /* Typography Scaling for Small Screens */
  .hud-value {
    font-size: 20px;
    /* Smaller numbers to fit */
  }

  .hud-label {
    font-size: 10px;
  }

  .hud-item {
    padding: 12px;
    /* Compact padding */
  }

  .pie-chart {
    width: 100px;
    /* Slightly larger relative to screen for visibility */
    height: 100px;
  }

  .anomalies-table th,
  .anomalies-table td {
    padding: 12px;
    /* Compact table */
    font-size: 12px;
  }

  /* Reduce font size for credit info content on mobile */
  .credit-info-content strong {
    font-size: 13px;
    margin-bottom: 8px;
  }

  .credit-info-content p,
  .credit-info-content ul {
    font-size: 11px;
    line-height: 1.6;
  }

  .credit-info-content ul {
    margin-left: 0;
    padding-left: 16px;
  }

  .credit-info-card {
    padding: 14px;
    gap: 12px;
  }

  .credit-info-icon {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }

  /* Volume Chart Responsive Styles - Mobile */
  .volume-chart-card.panel,
  .volume-chart-card {
    min-height: 400px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    padding: 12px !important;
    box-sizing: border-box !important;
  }

  .volume-chart-card.panel h3,
  .volume-chart-card h3 {
    font-size: 11px !important;
    margin-bottom: 12px !important;
  }

  .volume-chart-card .chart-placeholder {
    padding: 20px !important;
    padding-bottom: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .volume-chart-card .chart-header-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
    width: 100% !important;
  }

  .volume-chart-card .chart-title-container {
    width: 100% !important;
  }

  .volume-chart-card .chart-title {
    font-size: 11px !important;
    margin-bottom: 6px !important;
    line-height: 1.3 !important;
  }

  .volume-chart-card .chart-time-range-selector {
    padding: 2px !important;
    gap: 1px !important;
    width: fit-content !important;
  }

  .volume-chart-card .time-range-btn {
    padding: 3px 8px !important;
    font-size: 9px !important;
    min-width: 35px !important;
  }

  .volume-chart-card .chart-legend {
    width: 100% !important;
    gap: 10px !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    margin-top: 4px !important;
  }

  .volume-chart-card .legend-item {
    gap: 6px !important;
    flex-shrink: 0 !important;
  }

  .volume-chart-card .legend-color {
    width: 12px !important;
    height: 3px !important;
    flex-shrink: 0 !important;
  }

  .volume-chart-card .legend-label {
    font-size: 11px !important;
    white-space: nowrap !important;
  }

  .volume-chart-card .legend-sublabel {
    font-size: 10px !important;
  }

  /* Volume chart mobile - absolute positioning maintained */
  .volume-chart-card .chart-container-with-y {
    min-height: 180px !important;
    padding-left: 55px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .volume-chart-card .chart-y-axis {
    width: 47px !important;
  }

  .volume-chart-card .chart-y-axis span {
    font-size: 11px !important;
    right: 6px !important;
  }

  .volume-chart-card .chart-content {
    left: 55px !important;
  }

  .volume-chart-card .chart-axis.volume-axis {
    padding-left: 55px !important;
    font-size: 9px !important;
    margin-top: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .volume-chart-card .chart-axis.volume-axis span {
    font-size: 8px !important;
  }

  /* Tooltip responsive - font sizes now set dynamically in JS */
}

/* Extra small screens (< 480px) */
@media (max-width: 480px) {

  .volume-chart-card.panel,
  .volume-chart-card {
    padding: 10px !important;
    min-height: 350px !important;
  }

  .volume-chart-card .chart-placeholder {
    padding: 20px !important;
    padding-bottom: 20px !important;
  }

  .volume-chart-card .chart-title {
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

  /* Volume chart extra small - absolute positioning maintained */
  .volume-chart-card .chart-container-with-y {
    min-height: 150px !important;
    padding-left: 50px !important;
  }

  .volume-chart-card .chart-y-axis {
    width: 42px !important;
  }

  .volume-chart-card .chart-y-axis span {
    font-size: 10px !important;
    right: 4px !important;
  }

  .volume-chart-card .chart-content {
    left: 50px !important;
  }

  .volume-chart-card .chart-axis.volume-axis {
    padding-left: 50px !important;
    font-size: 8px !important;
  }

  .volume-chart-card .chart-axis.volume-axis span {
    font-size: 8px !important;
  }

  .volume-chart-card .time-range-btn {
    padding: 2px 6px !important;
    font-size: 8px !important;
    min-width: 30px !important;
  }

  .volume-chart-card .legend-item {
    gap: 5px !important;
  }

  .volume-chart-card .legend-color {
    width: 10px !important;
    height: 2px !important;
  }

  .volume-chart-card .legend-label {
    font-size: 10px !important;
  }

  .volume-chart-card .legend-sublabel {
    font-size: 9px !important;
  }
}

/* ===== PORT SCANNER COMPONENT ===== */
.port-scanner-section {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(37, 99, 235, 0.05) 100%);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  position: relative;
  overflow: visible;
  /* Allow dropdown to overflow */
}

.port-scanner-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), #2563eb, var(--accent));
  background-size: 200% 100%;
  animation: shimmer 3s ease-in-out infinite;
  border-radius: 12px 12px 0 0;
  /* Match parent border radius */
}

@keyframes shimmer {

  0%,
  100% {
    background-position: -200% 0;
  }

  50% {
    background-position: 200% 0;
  }
}

.port-scanner-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.port-scanner-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
}

.port-scanner-icon {
  width: 16px;
  height: 16px;
  color: var(--accent);
}

.port-scanner-optional {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.05);
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 500;
}

.port-scanner-desc {
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 12px 0;
  line-height: 1.5;
}

.port-scanner-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}

/* Protocol row with select and button - side by side */
.port-scan-protocol-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

/* Protocol selector wrapper - 50% width on desktop */
.scan-protocol-wrapper {
  position: relative;
  flex: 1;
  height: 44px;
}

/* Premium protocol selector */
.scan-protocol-select {
  width: 100%;
  height: 100%;
  padding: 0 40px 0 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--text);
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.25);
  border-radius: 8px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  transition: all 0.2s ease;
}

/* Dropdown arrow icon - WHITE */
.scan-protocol-arrow {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text);
  opacity: 0.7;
  pointer-events: none;
  transition: all 0.2s ease;
}

.scan-protocol-wrapper:hover .scan-protocol-arrow {
  opacity: 1;
}

.scan-protocol-select:focus+.scan-protocol-arrow {
  opacity: 1;
}

.scan-protocol-select:hover {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.4);
}

.scan-protocol-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
  background: rgba(59, 130, 246, 0.15);
}

.scan-protocol-select option {
  background: var(--card);
  color: var(--text);
  padding: 10px;
}

/* Light theme adjustments */
[data-theme="light"] .scan-protocol-select {
  background: rgba(59, 130, 246, 0.06);
  border-color: rgba(59, 130, 246, 0.2);
}

[data-theme="light"] .scan-protocol-select:hover {
  background: rgba(59, 130, 246, 0.1);
}

[data-theme="light"] .scan-protocol-arrow {
  color: var(--text);
  opacity: 0.6;
}

/* ==============================================
   CUSTOM PROTOCOL DROPDOWN - Futuristic Design
   ============================================== */
.protocol-dropdown {
  position: relative;
  flex: 1;
  z-index: 10;
}

.protocol-dropdown.open {
  z-index: 9999;
}

.protocol-dropdown-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  height: 44px;
  padding: 0 14px;
  background: var(--header-bg, rgba(15, 23, 42, 0.8));
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.protocol-dropdown-trigger:hover {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(59, 130, 246, 0.4);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.protocol-dropdown.open .protocol-dropdown-trigger {
  background: rgba(59, 130, 246, 0.08);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.protocol-dropdown-value {
  flex: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.protocol-dropdown-arrow {
  width: 14px;
  height: 14px;
  color: var(--muted);
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.protocol-dropdown-trigger:hover .protocol-dropdown-arrow {
  color: var(--text);
}

.protocol-dropdown.open .protocol-dropdown-arrow {
  transform: rotate(180deg);
  color: var(--accent);
}

/* Dropdown Menu */
.protocol-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--panel, rgba(15, 23, 42, 0.98));
  border: 1px solid var(--input-border);
  border-radius: 10px;
  padding: 4px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.98);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 9999;
}

.protocol-dropdown.open .protocol-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* Menu Options */
.protocol-dropdown-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
}

.protocol-dropdown-option:hover {
  background: rgba(255, 255, 255, 0.05);
}

.protocol-dropdown-option.selected {
  background: rgba(59, 130, 246, 0.1);
}

/* Protocol Icon */
.protocol-icon {
  width: 16px;
  height: 16px;
  color: var(--accent);
  opacity: 0.7;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.protocol-dropdown-option:hover .protocol-icon,
.protocol-dropdown-option.selected .protocol-icon {
  opacity: 1;
}

/* Option Content */
.protocol-option-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.protocol-option-label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.3px;
}

.protocol-option-hint {
  font-size: 10px;
  color: var(--muted);
  font-family: var(--font-mono);
  letter-spacing: 0.2px;
}

.protocol-dropdown-option:hover .protocol-option-label,
.protocol-dropdown-option.selected .protocol-option-label {
  color: var(--accent);
}

/* Checkmark */
.protocol-check {
  width: 14px;
  height: 14px;
  color: var(--accent);
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.protocol-dropdown-option.selected .protocol-check {
  opacity: 1;
  transform: scale(1);
}

/* ============================================
   View Footer / Copyright
   ============================================ */
.view-footer {
  margin-top: 48px;
  padding: 24px 0;
  text-align: center;
  border-top: 1px solid var(--border);
}

.view-footer-copyright {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  opacity: 0.6;
  margin: 0;
  letter-spacing: 0.3px;
}

@media (max-width: 768px) {
  .view-footer {
    margin-top: 32px;
    padding: 20px 0;
  }

  .view-footer-copyright {
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  .view-footer {
    margin-top: 24px;
    padding: 16px 0;
  }

  .view-footer-copyright {
    font-size: 10px;
  }
}

/* Light Theme */
[data-theme="light"] .protocol-dropdown-trigger {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .protocol-dropdown-trigger:hover {
  background: rgba(255, 255, 255, 1);
  border-color: rgba(59, 130, 246, 0.4);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .protocol-dropdown.open .protocol-dropdown-trigger {
  background: rgba(59, 130, 246, 0.05);
  border-color: var(--accent);
}

[data-theme="light"] .protocol-dropdown-menu {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(0, 0, 0, 0.02) inset;
}

[data-theme="light"] .protocol-dropdown-option:hover {
  background: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .protocol-dropdown-option.selected {
  background: rgba(59, 130, 246, 0.08);
}

/* Mobile Responsive */
@media (max-width: 767px) {
  .protocol-dropdown {
    flex: none;
    width: 100%;
  }

  .protocol-dropdown-trigger {
    height: 48px;
    padding: 0 14px;
    font-size: 13px;
  }

  .protocol-dropdown-menu {
    padding: 5px;
  }

  .protocol-dropdown-option {
    padding: 10px 12px;
  }

  .protocol-option-label {
    font-size: 13px;
  }

  .protocol-option-hint {
    font-size: 11px;
  }

  .protocol-icon {
    width: 18px;
    height: 18px;
  }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
  .protocol-dropdown-trigger {
    height: 44px;
  }
}

/* Large Desktop */
@media (min-width: 1400px) {
  .protocol-dropdown-trigger {
    height: 46px;
    font-size: 13px;
    padding: 0 16px;
  }

  .protocol-dropdown-option {
    padding: 10px 14px;
  }
}

/* ===== RESPONSIVE: Large Desktop (1400px+) ===== */
@media (min-width: 1400px) {
  .port-scan-protocol-row {
    gap: 12px;
  }

  .scan-protocol-wrapper {
    height: 48px;
  }

  .scan-protocol-select {
    font-size: 13px;
    padding-left: 16px;
  }

  .port-scan-btn {
    font-size: 14px !important;
    padding: 14px 28px !important;
    height: 48px;
  }
}

/* ===== RESPONSIVE: Tablet (768px - 1024px) ===== */
@media (min-width: 768px) and (max-width: 1024px) {
  .port-scan-protocol-row {
    gap: 10px;
  }
}

/* ===== RESPONSIVE: Mobile (< 768px) ===== */
@media (max-width: 767px) {
  .port-scan-protocol-row {
    flex-direction: column;
    gap: 10px;
  }

  .scan-protocol-wrapper {
    flex: none;
    width: 100%;
    height: 48px;
  }

  .scan-protocol-select {
    font-size: 13px;
  }

  .port-scan-btn {
    width: 100%;
    height: 48px;
    flex: none;
  }

}

.port-scan-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--accent), #5b8def) !important;
  color: white !important;
  font-weight: 600;
  padding: 12px 24px !important;
  border-radius: 8px !important;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
  flex: 1;
  justify-content: center;
  min-height: 44px;
  font-size: 13px;
  white-space: nowrap;
}

.port-scan-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
  background: linear-gradient(135deg, #4a9eff, var(--accent)) !important;
}

.port-scan-btn:active {
  transform: translateY(0);
}

.port-scan-btn.scanning {
  background: linear-gradient(135deg, var(--accent), #5b8def) !important;
  pointer-events: none;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.port-scan-btn .btn-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: white !important;
}

/* Force white icon for both themes */
[data-theme="light"] .port-scan-btn .btn-icon,
[data-theme="dark"] .port-scan-btn .btn-icon {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: white !important;
}

.port-scan-btn.scanning .btn-icon {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.scan-mode-select {
  padding: 12px 32px 12px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--input-bg);
  color: var(--text);
  font-size: 13px;
  font-family: var(--font-mono);
  cursor: pointer;
  min-width: 180px;
  min-height: 44px;
}

.scan-mode-select:hover {
  border-color: var(--accent);
  background: var(--input-focus-bg);
}

.scan-mode-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* Port Scan Progress */
.port-scan-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 12px;
  background: rgba(59, 130, 246, 0.1);
  border-radius: 8px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
}

.port-scan-progress #cancelScanBtn {
  margin-left: auto;
  padding: 6px 12px;
  font-size: 12px;
  min-height: auto;
}

.port-scan-spinner {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  flex-shrink: 0;
  border: 2px solid rgba(59, 130, 246, 0.2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Port Scan Results */
.port-scan-results {
  margin-top: 12px;
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: 8px;
  padding: 12px;
}

.port-scan-results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.port-scan-found {
  font-weight: 600;
  color: var(--green);
  font-size: 13px;
}

.port-scan-time {
  font-size: 11px;
  color: var(--muted);
}

.port-scan-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
  max-height: 120px;
  overflow-y: auto;
}

.port-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--input-border);
  border-radius: 16px;
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s ease;
}

.port-chip:hover {
  background: rgba(59, 130, 246, 0.15);
  border-color: var(--accent);
}

.port-chip.selected {
  background: rgba(59, 130, 246, 0.2);
  border-color: var(--accent);
  color: var(--accent);
}

.port-chip .port-service {
  font-size: 10px;
  color: var(--muted);
  margin-left: 2px;
}

.port-chip .port-protocol {
  font-size: 9px;
  font-weight: 600;
  padding: 1px 4px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.port-chip .port-protocol.tcp {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.port-chip .port-protocol.udp {
  background: rgba(168, 85, 247, 0.2);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.3);
}

.port-chip .port-protocol.both {
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

[data-theme="light"] .port-chip .port-protocol.tcp {
  background: rgba(59, 130, 246, 0.15);
  color: #2563eb;
}

[data-theme="light"] .port-chip .port-protocol.udp {
  background: rgba(168, 85, 247, 0.15);
  color: #9333ea;
}

[data-theme="light"] .port-chip .port-protocol.both {
  background: rgba(34, 197, 94, 0.15);
  color: #16a34a;
}

.port-scan-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.btn-sm {
  padding: 6px 12px !important;
  font-size: 11px !important;
}

/* Port Scan Error */
.port-scan-error {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  margin-top: 12px;
  padding: 14px 16px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 10px;
  color: var(--red);
  font-size: 13px;
}

.port-scan-error .error-content {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* Verification Warning Variant (yellow/amber) */
.port-scan-error.verification-warning {
  background: rgba(251, 191, 36, 0.1) !important;
  border: 1px solid rgba(251, 191, 36, 0.25) !important;
  border-left: 3px solid #fbbf24 !important;
  color: #fbbf24 !important;
}

.port-scan-error.verification-warning .error-icon {
  display: none !important;
}

.port-scan-error.verification-warning .warning-icon {
  display: flex !important;
  stroke: #fbbf24 !important;
}

/* Rate Limit Warning Variant (orange) */
.port-scan-error.rate-limit-warning {
  background: rgba(249, 115, 22, 0.1) !important;
  border: 1px solid rgba(249, 115, 22, 0.25) !important;
  border-left: 3px solid #f97316 !important;
  color: #fb923c !important;
}

.port-scan-error.rate-limit-warning .error-icon {
  display: none !important;
}

.port-scan-error.rate-limit-warning .hourglass-icon {
  display: flex !important;
  stroke: #fb923c !important;
}

/* Timer/clock icon - hidden by default */
.port-scan-error .hourglass-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: none;
}

.port-scan-error .error-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.port-scan-error .warning-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: none;
}

.port-scan-error #portScanErrorMsg {
  flex: 1;
  line-height: 1.5;
}

.port-scan-error #verifyIPBtn {
  align-self: center;
  background: linear-gradient(135deg, #d4a007 0%, #b8860b 100%) !important;
  color: white !important;
  border: none !important;
  gap: 6px;
  padding: 10px 24px !important;
  font-size: 12px !important;
  box-shadow: 0 2px 8px rgba(212, 160, 7, 0.25);
}

.port-scan-error #verifyIPBtn:hover {
  background: linear-gradient(135deg, #eab308 0%, #d4a007 100%) !important;
  box-shadow: 0 4px 12px rgba(212, 160, 7, 0.35);
}

/* Port Scanner Divider */
.port-scanner-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.port-scanner-divider::before,
.port-scanner-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}

/* Hidden state */
.port-scan-progress.hidden,
.port-scan-results.hidden,
.port-scan-error.hidden {
  display: none;
}

/* Light theme adjustments */
[data-theme="light"] .port-scanner-section {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.06) 0%, rgba(37, 99, 235, 0.04) 100%);
  border-color: rgba(59, 130, 246, 0.15);
}

[data-theme="light"] .port-chip {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .port-chip:hover {
  background: rgba(59, 130, 246, 0.1);
}

[data-theme="light"] .port-scan-results {
  background: rgba(34, 197, 94, 0.06);
  border-color: rgba(34, 197, 94, 0.15);
}

[data-theme="light"] .port-scan-error {
  background: rgba(239, 68, 68, 0.06);
  border-color: rgba(239, 68, 68, 0.15);
}

[data-theme="light"] .port-scan-error.verification-warning {
  background: rgba(245, 158, 11, 0.12) !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
  color: #d97706 !important;
}

[data-theme="light"] .port-scan-error.verification-warning .warning-icon {
  stroke: #d97706 !important;
}

[data-theme="light"] .port-scan-error.rate-limit-warning {
  background: rgba(249, 115, 22, 0.12) !important;
  border-color: rgba(249, 115, 22, 0.3) !important;
  color: #c2410c !important;
}

[data-theme="light"] .port-scan-error.rate-limit-warning .hourglass-icon {
  stroke: #c2410c !important;
}

/* Responsive adjustments for port scanner */
@media (max-width: 600px) {
  .port-scanner-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* High-DPI / Retina displays - ensure minimum touch targets */
@media (min-resolution: 2dppx),
(-webkit-min-device-pixel-ratio: 2) {
  .port-scan-btn {
    min-height: 44px;
  }

  .scan-protocol-select {
    min-height: 44px;
  }
}

/* ========== PORTS DISPLAY FIX - MUST BE LAST ========== */
/* Mobile: Ports wrap horizontally within their container */
@media (max-width: 900px) {
  .instances-table td[data-label="Open Ports"] {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
  }

  .instances-table td[data-label="Open Ports"] .ports-display,
  .instances-table td[data-label="Open Ports"]>span {
    flex: 1 1 auto !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    text-align: right !important;
    line-height: 1.6 !important;
    max-width: 65% !important;
  }
}

/* ========================================================================== */
/* ==================== CINEMATIC AUTH ANIMATIONS =========================== */
/* ========================================================================== */

/* --- Base Animation States --- */
.cinema-hidden {
  opacity: 0;
  visibility: hidden;
}

.cinema-ready {
  opacity: 1;
  visibility: visible;
}

/* --- Cinematic Keyframes --- */

/* Dramatic fade in from darkness */
@keyframes cinemaFadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* Rise from the void - elegant vertical reveal */
@keyframes cinemaRiseUp {
  0% {
    opacity: 0;
    transform: translateY(60px);
    filter: blur(8px);
  }

  60% {
    filter: blur(2px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* Ethereal descent - coming from above */
@keyframes cinemaDescend {
  0% {
    opacity: 0;
    transform: translateY(-40px) scale(0.95);
    filter: blur(4px);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* Horizontal slide in from left */
@keyframes cinemaSlideLeft {
  0% {
    opacity: 0;
    transform: translateX(-80px);
    filter: blur(6px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
  }
}

/* Horizontal slide in from right */
@keyframes cinemaSlideRight {
  0% {
    opacity: 0;
    transform: translateX(80px);
    filter: blur(6px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
  }
}

/* Scale reveal - dramatic zoom emergence */
@keyframes cinemaScaleReveal {
  0% {
    opacity: 0;
    transform: scale(0.8);
    filter: blur(10px);
  }

  50% {
    filter: blur(3px);
  }

  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

/* Glitch reveal - cyberpunk style */
@keyframes cinemaGlitchReveal {
  0% {
    opacity: 0;
    transform: translateX(-5px);
    filter: blur(4px);
  }

  10% {
    opacity: 0.3;
    transform: translateX(3px);
  }

  20% {
    opacity: 0.6;
    transform: translateX(-2px);
  }

  30% {
    opacity: 0.5;
    transform: translateX(1px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
  }
}

/* Character by character text reveal shimmer */
@keyframes cinemaTextGlow {
  0% {
    opacity: 0;
    text-shadow: 0 0 0 transparent;
  }

  50% {
    opacity: 0.8;
    text-shadow: 0 0 20px var(--accent), 0 0 40px var(--accent-glow);
  }

  100% {
    opacity: 1;
    text-shadow: none;
  }
}

/* Line drawing reveal for borders/decorations */
@keyframes cinemaLineReveal {
  0% {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
  }

  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

/* Vertical line draw */
@keyframes cinemaLineRevealVertical {
  0% {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
  }

  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

/* Breathing pulse after reveal */
@keyframes cinemaPulseGlow {

  0%,
  100% {
    box-shadow: 0 0 0 0 transparent;
  }

  50% {
    box-shadow: 0 0 30px var(--accent-glow);
  }
}

/* Floating idle animation */
@keyframes cinemaFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

/* Subtle rotation wobble */
@keyframes cinemaWobble {

  0%,
  100% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(-1deg);
  }

  75% {
    transform: rotate(1deg);
  }
}

/* Typewriter cursor blink */
@keyframes cinemaCursorBlink {

  0%,
  50% {
    border-color: var(--accent);
  }

  51%,
  100% {
    border-color: transparent;
  }
}

/* Scan line effect */
@keyframes cinemaScanLine {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    transform: translateY(100vh);
    opacity: 0;
  }
}

/* Stagger reveal for lists */
@keyframes cinemaStaggerIn {
  0% {
    opacity: 0;
    transform: translateY(20px) translateX(-10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0) translateX(0);
  }
}

/* Card 3D flip reveal */
@keyframes cinemaCardFlip {
  0% {
    opacity: 0;
    transform: perspective(1000px) rotateX(-15deg) translateY(50px);
  }

  60% {
    transform: perspective(1000px) rotateX(3deg) translateY(-5px);
  }

  100% {
    opacity: 1;
    transform: perspective(1000px) rotateX(0deg) translateY(0);
  }
}

/* Input field focus glow expansion */
@keyframes cinemaInputReveal {
  0% {
    opacity: 0;
    transform: scaleX(0.8);
    transform-origin: left center;
  }

  100% {
    opacity: 1;
    transform: scaleX(1);
  }
}

/* Button charge-up effect */
@keyframes cinemaButtonCharge {
  0% {
    opacity: 0;
    transform: scale(0.9);
    box-shadow: inset 0 0 0 2px var(--accent);
  }

  50% {
    box-shadow: inset 0 0 20px var(--accent-glow), 0 0 30px var(--accent-glow);
  }

  100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: none;
  }
}

/* --- Animation Classes --- */

.cinema-fade {
  animation: cinemaFadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.cinema-rise {
  animation: cinemaRiseUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.cinema-descend {
  animation: cinemaDescend 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.cinema-slide-left {
  animation: cinemaSlideLeft 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.cinema-slide-right {
  animation: cinemaSlideRight 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.cinema-scale {
  animation: cinemaScaleReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.cinema-glitch {
  animation: cinemaGlitchReveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.cinema-text-glow {
  animation: cinemaTextGlow 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.cinema-line {
  animation: cinemaLineReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.cinema-line-vertical {
  animation: cinemaLineRevealVertical 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.cinema-stagger {
  animation: cinemaStaggerIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.cinema-card-flip {
  animation: cinemaCardFlip 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.cinema-input {
  animation: cinemaInputReveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.cinema-button-charge {
  animation: cinemaButtonCharge 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* --- Animation Delay Utilities --- */
.cinema-delay-0 {
  animation-delay: 0ms;
}

.cinema-delay-100 {
  animation-delay: 100ms;
}

.cinema-delay-200 {
  animation-delay: 200ms;
}

.cinema-delay-300 {
  animation-delay: 300ms;
}

.cinema-delay-400 {
  animation-delay: 400ms;
}

.cinema-delay-500 {
  animation-delay: 500ms;
}

.cinema-delay-600 {
  animation-delay: 600ms;
}

.cinema-delay-700 {
  animation-delay: 700ms;
}

.cinema-delay-800 {
  animation-delay: 800ms;
}

.cinema-delay-900 {
  animation-delay: 900ms;
}

.cinema-delay-1000 {
  animation-delay: 1000ms;
}

.cinema-delay-1100 {
  animation-delay: 1100ms;
}

.cinema-delay-1200 {
  animation-delay: 1200ms;
}

.cinema-delay-1300 {
  animation-delay: 1300ms;
}

.cinema-delay-1400 {
  animation-delay: 1400ms;
}

.cinema-delay-1500 {
  animation-delay: 1500ms;
}

.cinema-delay-1600 {
  animation-delay: 1600ms;
}

.cinema-delay-1800 {
  animation-delay: 1800ms;
}

.cinema-delay-2000 {
  animation-delay: 2000ms;
}

/* --- Duration Modifiers --- */
.cinema-fast {
  animation-duration: 0.4s !important;
}

.cinema-slow {
  animation-duration: 1.4s !important;
}

.cinema-slower {
  animation-duration: 2s !important;
}

/* --- Post-Animation Effects --- */
.cinema-hover-float:hover {
  animation: cinemaFloat 3s ease-in-out infinite;
}

.cinema-hover-glow:hover {
  animation: cinemaPulseGlow 2s ease-in-out infinite;
}

/* --- Cinematic Scanline Overlay --- */
.cinema-scanline-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg,
      transparent 0%,
      var(--accent) 20%,
      var(--accent) 80%,
      transparent 100%);
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  animation: cinemaScanLine 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  box-shadow: 0 0 20px var(--accent-glow), 0 0 40px var(--accent-glow);
}

/* --- Auth Page Specific Enhancements --- */

/* Initial state - everything hidden */
.auth-bg.cinema-loading .auth-content,
.auth-bg.cinema-loading .auth-form-wrapper,
.auth-bg.cinema-loading #themeToggle {
  opacity: 0;
}

/* Brand header dramatic entrance */
.auth-bg .auth-brand-header.cinema-animate {
  animation: cinemaDescend 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Main headline with text glow */
.auth-bg .auth-content h1.cinema-animate {
  animation: cinemaRiseUp 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Accent text special treatment */
.auth-bg .auth-content h1 .text-accent.cinema-animate {
  display: inline-block;
  animation: cinemaGlitchReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Subheadline */
.auth-bg .auth-content h2.cinema-animate {
  animation: cinemaSlideLeft 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Feature list - parent reveals instantly when animated */
.auth-bg .auth-features.cinema-animate {
  opacity: 1 !important;
}

/* Feature list items staggered */
.auth-bg .auth-features.cinema-animate li {
  opacity: 0;
  animation: cinemaStaggerIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.auth-bg .auth-features.cinema-animate li:nth-child(1) {
  animation-delay: 0ms;
}

.auth-bg .auth-features.cinema-animate li:nth-child(2) {
  animation-delay: 100ms;
}

.auth-bg .auth-features.cinema-animate li:nth-child(3) {
  animation-delay: 200ms;
}

/* Carousel navigation dots - animate in progressively */
.auth-bg .hero-carousel-dots.cinema-animate {
  animation: cinemaFadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  /* Ensure final state is visible after animation */
  animation-fill-mode: forwards;
}

/* Support badge */
.auth-bg .support-badge.cinema-animate {
  animation: cinemaFadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.auth-bg .auth-copyright.cinema-animate {
  animation: cinemaFadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Hero CTA Container and Buttons */
.auth-bg .hero-cta-container.cinema-animate {
  opacity: 1 !important;
}

.auth-bg .hero-cta-primary.cinema-animate {
  animation: cinemaButtonCharge 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.auth-bg .hero-cta-secondary.cinema-animate {
  animation: cinemaFadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Auth Tabs */
.auth-bg .auth-tabs.cinema-animate {
  animation: cinemaFadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.auth-bg .auth-tab.cinema-animate {
  animation: cinemaFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Google signin and auth divider */
.auth-bg .google-signin-container.cinema-animate {
  animation: cinemaFadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.auth-bg .auth-divider.cinema-animate {
  animation: cinemaFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Captcha containers */
.auth-bg #login-captcha-container.cinema-animate,
.auth-bg #signup-captcha-container.cinema-animate {
  animation: cinemaFadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Auth card cinematic entrance */
.auth-bg .auth-card.cinema-animate {
  animation: cinemaCardFlip 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Card corner decorations */
.auth-bg .auth-card .auth-card-corner-tl.cinema-animate {
  animation: cinemaLineRevealVertical 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.auth-bg .auth-card .auth-card-corner-br.cinema-animate {
  animation: cinemaLineRevealVertical 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Auth title and subtitle */
.auth-bg .auth-title.cinema-animate {
  animation: cinemaTextGlow 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.auth-bg .auth-sub.cinema-animate {
  animation: cinemaFadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Form inputs staggered reveal */
.auth-bg .auth-form .field.cinema-animate {
  opacity: 0;
  animation: cinemaInputReveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Captcha container */
.auth-bg #captcha-container.cinema-animate {
  animation: cinemaFadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Auth row (forgot password + button) */
.auth-bg .auth-row.cinema-animate {
  animation: cinemaRiseUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* CTA Button charge-up */
.auth-bg .auth-cta.cinema-animate {
  animation: cinemaButtonCharge 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Footer link */
.auth-bg .auth-foot.cinema-animate {
  animation: cinemaFadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Theme toggle button */
.auth-bg #themeToggle.cinema-animate {
  animation: cinemaDescend 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* --- Responsive Adjustments for Animations --- */
@media (max-width: 768px) {

  /* Faster animations on mobile */
  .cinema-rise,
  .cinema-descend,
  .cinema-slide-left,
  .cinema-slide-right {
    animation-duration: 0.7s;
  }

  .cinema-card-flip {
    animation-duration: 0.9s;
  }

  /* Reduced motion distances on mobile */
  @keyframes cinemaRiseUp {
    0% {
      opacity: 0;
      transform: translateY(40px);
      filter: blur(4px);
    }

    100% {
      opacity: 1;
      transform: translateY(0);
      filter: blur(0);
    }
  }

  @keyframes cinemaSlideLeft {
    0% {
      opacity: 0;
      transform: translateX(-40px);
      filter: blur(3px);
    }

    100% {
      opacity: 1;
      transform: translateX(0);
      filter: blur(0);
    }
  }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {

  .cinema-fade,
  .cinema-rise,
  .cinema-descend,
  .cinema-slide-left,
  .cinema-slide-right,
  .cinema-scale,
  .cinema-glitch,
  .cinema-text-glow,
  .cinema-line,
  .cinema-line-vertical,
  .cinema-stagger,
  .cinema-card-flip,
  .cinema-input,
  .cinema-button-charge,
  .auth-bg .auth-brand-header.cinema-animate,
  .auth-bg .auth-content h1.cinema-animate,
  .auth-bg .auth-content h2.cinema-animate,
  .auth-bg .auth-features.cinema-animate li,
  .auth-bg .hero-carousel-dots.cinema-animate,
  .auth-bg .support-badge.cinema-animate,
  .auth-bg .hero-cta-container.cinema-animate,
  .auth-bg .hero-cta-primary.cinema-animate,
  .auth-bg .hero-cta-secondary.cinema-animate,
  .auth-bg .auth-tabs.cinema-animate,
  .auth-bg .auth-tab.cinema-animate,
  .auth-bg .auth-card.cinema-animate,
  .auth-bg .auth-title.cinema-animate,
  .auth-bg .auth-sub.cinema-animate,
  .auth-bg .auth-form .field.cinema-animate,
  .auth-bg .google-signin-container.cinema-animate,
  .auth-bg .auth-divider.cinema-animate,
  .auth-bg .auth-row.cinema-animate,
  .auth-bg .auth-cta.cinema-animate,
  .auth-bg .auth-foot.cinema-animate,
  .auth-bg #themeToggle.cinema-animate,
  .cinema-scanline-overlay {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    visibility: visible !important;
  }
}

/* ===== SLIDESHOW NAVIGATION CONTROLS ===== */

/* Slide indicator - minimal design, closer to center */
.slide-indicator {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%) translateX(20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 20px 16px;
  background: transparent;
  border: none;
  border-left: 1px solid rgba(59, 130, 246, 0.4);
  border-radius: 0;
  color: var(--accent);
  cursor: pointer;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.slide-indicator:hover {
  background: rgba(59, 130, 246, 0.08);
  border-left-color: var(--accent);
}

.slide-indicator.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

.slide-indicator-text {
  font-family: 'Michroma', sans-serif;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text);
  transition: all 0.3s ease;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

.slide-indicator:hover .slide-indicator-text {
  color: var(--accent);
  text-shadow: 0 0 30px rgba(59, 130, 246, 0.8);
}

.slide-indicator-arrow {
  width: 18px;
  height: 18px;
  color: var(--accent);
  filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.6));
  transition: transform 0.3s ease;
  animation: arrowPulse 2s ease-in-out infinite;
}

.slide-indicator:hover .slide-indicator-arrow {
  transform: translateX(4px);
  animation: none;
}

@keyframes arrowPulse {

  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(4px);
  }
}

/* Back button - left edge, moves with scroll - Balanced & elegant */
.slide-back-btn {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%) translateX(-20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: transparent;
  border: none;
  border-right: 1px solid rgba(59, 130, 246, 0.45);
  border-radius: 0;
  color: var(--accent);
  cursor: pointer;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.3s ease,
    border-color 0.3s ease;
  /* Top position will be set by JS for scroll tracking */
}

.slide-back-btn:hover {
  background: rgba(59, 130, 246, 0.08);
  border-right-color: var(--accent);
}

.slide-back-btn.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

.slide-back-btn-text {
  font-family: 'Michroma', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text);
  transition: all 0.3s ease;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.35);
}

.slide-back-btn:hover .slide-back-btn-text {
  color: var(--accent);
  text-shadow: 0 0 36px rgba(59, 130, 246, 0.9);
}

.slide-back-btn-arrow {
  width: 18px;
  height: 18px;
  color: var(--accent);
  filter: drop-shadow(0 0 6px rgba(59, 130, 246, 0.5));
  transition: transform 0.3s ease;
  animation: arrowPulseBack 2.5s ease-in-out infinite;
}

.slide-back-btn:hover .slide-back-btn-arrow {
  transform: translateX(-3px);
  animation: none;
}

@keyframes arrowPulseBack {

  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(-3px);
  }
}

/* Mobile/Tablet slide controls - Right side sticky */
@media (max-width: 1023px) {
  .slide-indicator {
    position: fixed;
    right: 0;
    left: auto;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%) translateX(10px);
    flex-direction: column;
    padding: 15px 11px;
    background: rgba(8, 10, 14, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: none;
    border-left: 1px solid rgba(59, 130, 246, 0.5);
    border-radius: 0;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.3), 0 0 20px rgba(59, 130, 246, 0.15);
    gap: 10px;
  }

  .slide-indicator.visible {
    transform: translateY(-50%) translateX(0);
  }

  .slide-indicator-text {
    font-size: 11px;
    letter-spacing: 2px;
    writing-mode: vertical-rl;
  }

  .slide-indicator-arrow {
    width: 16px;
    height: 16px;
    animation: arrowPulse 2s ease-in-out infinite;
  }

  .slide-back-btn {
    position: fixed;
    left: 0;
    right: auto;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%) translateX(-10px);
    flex-direction: column;
    padding: 18px 14px;
    background: rgba(8, 10, 14, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: none;
    border-right: 1px solid rgba(59, 130, 246, 0.45);
    border-radius: 0;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.25), 0 0 16px rgba(59, 130, 246, 0.12);
    gap: 11px;
    transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0.5s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
      background 0.3s ease,
      border-color 0.3s ease;
    /* Top position set by JS for scroll tracking */
  }

  .slide-back-btn.visible {
    transform: translateY(-50%) translateX(0);
  }

  .slide-back-btn-arrow {
    width: 18px;
    height: 18px;
    animation: arrowPulseBack 2.5s ease-in-out infinite;
  }

  .slide-back-btn-text {
    font-family: 'Michroma', sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 2.1px;
    text-transform: uppercase;
    color: var(--text);
    writing-mode: vertical-rl;
    transform: rotate(180deg);
  }
}

/* Small mobile adjustments */
@media (max-width: 374px) {

  .slide-indicator,
  .slide-back-btn {
    padding: 14px 11px;
    gap: 8px;
  }

  .slide-indicator-text,
  .slide-back-btn-text {
    font-size: 9px;
    letter-spacing: 1.8px;
  }

  .slide-back-btn-arrow {
    width: 15px;
    height: 15px;
  }
}

/* Light theme desktop slide controls - matches back button */
[data-theme="light"] .slide-indicator {
  background: transparent;
}

[data-theme="light"] .slide-indicator:hover {
  background: rgba(59, 130, 246, 0.08);
}

/* Light theme mobile slide controls */
@media (max-width: 1023px) {
  [data-theme="light"] .slide-indicator {
    background: rgba(245, 245, 245, 0.5);
    border-left-color: rgba(59, 130, 246, 0.4);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.1), 0 0 20px rgba(59, 130, 246, 0.1);
  }

  [data-theme="light"] .slide-back-btn {
    background: rgba(245, 245, 245, 0.5);
    border-right: 1px solid rgba(59, 130, 246, 0.4);
    border-left: none;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.1), 0 0 20px rgba(59, 130, 246, 0.1);
  }

  [data-theme="light"] .slide-indicator-text,
  [data-theme="light"] .slide-back-btn-text {
    color: var(--text);
  }
}

/* ========== RESPONSIVE SCALING FOR EDGE BUTTONS ========== */

/* Medium Desktop (1280px - 1439px) */
@media (min-width: 1280px) and (max-width: 1439px) {
  .slide-back-btn {
    gap: 10px;
    padding: 15px 16px;
  }

  .slide-back-btn-text {
    font-size: 11px;
    letter-spacing: 3.2px;
  }

  .slide-back-btn-arrow {
    width: 18px;
    height: 18px;
  }
}

/* Large Desktop (1440px - 1919px) */
@media (min-width: 1440px) and (max-width: 1919px) {
  .slide-indicator {
    padding: 18px 16px;
  }

  .slide-indicator-text {
    font-size: 11px;
    letter-spacing: 3.5px;
  }

  .slide-back-btn {
    gap: 11px;
    padding: 16px 17px;
  }

  .slide-back-btn-text {
    font-size: 12px;
    letter-spacing: 3.5px;
  }

  .slide-back-btn-arrow {
    width: 19px;
    height: 19px;
  }
}

/* Ultra-wide / 4K (1920px+) */
@media (min-width: 1920px) {
  .slide-indicator {
    padding: 20px 18px;
  }

  .slide-indicator-text {
    font-size: 12px;
    letter-spacing: 4px;
  }

  .slide-indicator-arrow {
    width: 20px;
    height: 20px;
  }

  .slide-back-btn {
    gap: 12px;
    padding: 18px 18px;
  }

  .slide-back-btn-text {
    font-size: 13px;
    letter-spacing: 3.8px;
  }

  .slide-back-btn-arrow {
    width: 20px;
    height: 20px;
  }
}

/* ===== BANDWIDTH CHART - RESPONSIVE SCALING ===== */

/* Ensure bandwidth chart adapts to container */
.chart-panel .chart-placeholder.large {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 250px;
}

/* Medium screens */
@media (min-width: 1024px) and (max-width: 1439px) {
  .chart-panel .chart-placeholder.large {
    min-height: 220px;
  }

  .chart-panel .chart-placeholder.large .chart-container-with-y {
    min-height: 160px;
    max-height: 300px;
  }
}

/* Large screens (1440px+) */
@media (min-width: 1440px) {
  .chart-panel .chart-placeholder.large {
    min-height: 280px;
  }

  .chart-panel .chart-placeholder.large .chart-container-with-y {
    min-height: 200px;
    max-height: 400px;
  }
}

/* Extra large screens (1920px+) */
@media (min-width: 1920px) {
  .chart-panel .chart-placeholder.large {
    min-height: 320px;
    padding: 24px;
  }

  .chart-panel .chart-placeholder.large .chart-container-with-y {
    min-height: 240px;
    max-height: 500px;
  }

  .chart-panel .chart-placeholder.large .chart-y-axis {
    width: 80px;
    min-width: 80px;
    font-size: 12px;
  }

  .chart-panel .chart-placeholder.large .chart-axis {
    font-size: 12px;
    padding-top: 12px;
  }
}

/* 4K and ultra-wide screens (2560px+) */
@media (min-width: 2560px) {
  .chart-panel .chart-placeholder.large {
    min-height: 400px;
    padding: 32px;
  }

  .chart-panel .chart-placeholder.large .chart-container-with-y {
    min-height: 320px;
    max-height: 600px;
  }

  .chart-panel .chart-placeholder.large .chart-y-axis {
    width: 90px;
    min-width: 90px;
    font-size: 13px;
  }

  .chart-panel .chart-placeholder.large .chart-axis {
    font-size: 13px;
  }
}

/* ===== VOLUME & LATENCY CHARTS - RESPONSIVE ===== */

/* Volume chart responsive */
.volume-chart-card .chart-placeholder {
  display: flex;
  flex-direction: column;
  min-height: 280px;
}

/* Volume chart container height - works with absolute positioning */
.volume-chart-card .chart-container-with-y {
  min-height: 220px;
}

/* ===== LATENCY CHART - FULLY RESPONSIVE ===== */
/* Use high specificity to override generic .chart-panel rules */
.chart-placeholder.large.latency-chart-card,
.chart-panel .chart-placeholder.large.latency-chart-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 200px !important;
  padding: 16px !important;
  box-sizing: border-box !important;
}

.latency-chart-card .chart-header-row,
.chart-panel .latency-chart-card .chart-header-row {
  flex-shrink: 0 !important;
  margin-bottom: 12px !important;
}

.latency-chart-card .chart-title {
  margin-bottom: 0 !important;
}

.latency-chart-card .chart-container-with-y,
.chart-panel .latency-chart-card .chart-container-with-y {
  flex: 1 1 auto !important;
  display: flex !important;
  gap: 8px !important;
  min-height: 120px !important;
  max-height: none !important;
  height: auto !important;
  position: relative !important;
}

.latency-chart-card .chart-y-axis,
.chart-panel .latency-chart-card .chart-y-axis {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  width: 50px !important;
  min-width: 50px !important;
  flex-shrink: 0 !important;
  padding-right: 4px !important;
  box-sizing: border-box !important;
  height: auto !important;
}

.latency-chart-card .chart-y-axis span,
.chart-panel .latency-chart-card .chart-y-axis span {
  position: static !important;
  transform: none !important;
  font-size: 11px !important;
  line-height: 1 !important;
  text-align: right !important;
  color: var(--text-secondary) !important;
}

.latency-chart-card .chart-content,
.chart-panel .latency-chart-card .chart-content {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  position: relative !important;
  height: 100% !important;
}

.latency-chart-card .chart-content svg,
.chart-panel .latency-chart-card .chart-content svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

.latency-chart-card .chart-axis,
.chart-panel .latency-chart-card .chart-axis {
  flex-shrink: 0 !important;
  margin-top: 8px !important;
  padding-top: 8px !important;
  display: flex !important;
  justify-content: space-between !important;
}

/* Large screens - Volume & Latency */
@media (min-width: 1600px) {
  .volume-chart-card .chart-placeholder {
    min-height: 350px;
  }

  .volume-chart-card .chart-container-with-y {
    min-height: 280px;
  }

  .chart-placeholder.large.latency-chart-card,
  .chart-panel .chart-placeholder.large.latency-chart-card {
    min-height: 250px !important;
    padding: 18px !important;
  }

  .latency-chart-card .chart-container-with-y,
  .chart-panel .latency-chart-card .chart-container-with-y {
    min-height: 160px !important;
  }

  .latency-chart-card .chart-y-axis,
  .chart-panel .latency-chart-card .chart-y-axis {
    width: 55px !important;
    min-width: 55px !important;
  }
}

/* Extra large screens - Volume & Latency */
@media (min-width: 1920px) {
  .volume-chart-card .chart-placeholder {
    min-height: 400px;
  }

  .volume-chart-card .chart-container-with-y {
    min-height: 320px;
  }

  .chart-placeholder.large.latency-chart-card,
  .chart-panel .chart-placeholder.large.latency-chart-card {
    min-height: 300px !important;
    padding: 22px !important;
  }

  .latency-chart-card .chart-container-with-y,
  .chart-panel .latency-chart-card .chart-container-with-y {
    min-height: 200px !important;
  }

  .latency-chart-card .chart-y-axis,
  .chart-panel .latency-chart-card .chart-y-axis {
    width: 60px !important;
    min-width: 60px !important;
  }

  .latency-chart-card .chart-y-axis span {
    font-size: 12px !important;
  }

  .latency-chart-card .chart-axis {
    font-size: 12px !important;
  }
}

/* 4K screens - Volume & Latency */
@media (min-width: 2560px) {
  .volume-chart-card .chart-placeholder {
    min-height: 500px;
  }

  .volume-chart-card .chart-container-with-y {
    min-height: 400px;
  }

  .chart-placeholder.large.latency-chart-card,
  .chart-panel .chart-placeholder.large.latency-chart-card {
    min-height: 380px !important;
    padding: 28px !important;
  }

  .latency-chart-card .chart-container-with-y,
  .chart-panel .latency-chart-card .chart-container-with-y {
    min-height: 280px !important;
  }

  .latency-chart-card .chart-y-axis,
  .chart-panel .latency-chart-card .chart-y-axis {
    width: 70px !important;
    min-width: 70px !important;
  }

  .latency-chart-card .chart-y-axis span {
    font-size: 13px !important;
  }

  .latency-chart-card .chart-axis {
    font-size: 13px !important;
    margin-top: 12px !important;
  }
}

/* ===== LATENCY CHART - ALL SCREEN SIZES ===== */

/* Default/Base (1200px - 1599px) */
@media (min-width: 1200px) and (max-width: 1599px) {

  .chart-placeholder.large.latency-chart-card,
  .chart-panel .chart-placeholder.large.latency-chart-card {
    min-height: 220px !important;
    padding: 16px !important;
  }

  .latency-chart-card .chart-container-with-y,
  .chart-panel .latency-chart-card .chart-container-with-y {
    min-height: 140px !important;
  }

  .latency-chart-card .chart-y-axis,
  .chart-panel .latency-chart-card .chart-y-axis {
    width: 50px !important;
    min-width: 50px !important;
  }

  .latency-chart-card .chart-y-axis span {
    font-size: 11px !important;
  }

  .latency-chart-card .chart-axis {
    font-size: 11px !important;
    margin-top: 8px !important;
    padding-top: 6px !important;
  }
}

/* Tablet/Small desktop (1024px - 1199px) */
@media (min-width: 1024px) and (max-width: 1199px) {

  .chart-placeholder.large.latency-chart-card,
  .chart-panel .chart-placeholder.large.latency-chart-card {
    min-height: 200px !important;
    padding: 14px !important;
  }

  .latency-chart-card .chart-container-with-y,
  .chart-panel .latency-chart-card .chart-container-with-y {
    min-height: 130px !important;
  }

  .latency-chart-card .chart-y-axis,
  .chart-panel .latency-chart-card .chart-y-axis {
    width: 48px !important;
    min-width: 48px !important;
  }

  .latency-chart-card .chart-y-axis span {
    font-size: 10px !important;
  }

  .latency-chart-card .chart-axis {
    font-size: 10px !important;
    margin-top: 6px !important;
    padding-top: 4px !important;
  }
}

/* Tablet portrait (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {

  .chart-placeholder.large.latency-chart-card,
  .chart-panel .chart-placeholder.large.latency-chart-card {
    min-height: 180px !important;
    padding: 12px !important;
  }

  .latency-chart-card .chart-container-with-y,
  .chart-panel .latency-chart-card .chart-container-with-y {
    min-height: 120px !important;
  }

  .latency-chart-card .chart-y-axis,
  .chart-panel .latency-chart-card .chart-y-axis {
    width: 45px !important;
    min-width: 45px !important;
  }

  .latency-chart-card .chart-y-axis span {
    font-size: 10px !important;
  }

  .latency-chart-card .chart-axis {
    font-size: 10px !important;
    margin-top: 6px !important;
    padding-top: 4px !important;
  }

  .latency-chart-card .chart-header-row {
    margin-bottom: 10px !important;
  }
}

/* Mobile screens (< 768px) */
@media (max-width: 767px) {

  .chart-placeholder.large.latency-chart-card,
  .chart-panel .chart-placeholder.large.latency-chart-card {
    min-height: 160px !important;
    padding: 10px !important;
  }

  .latency-chart-card .chart-container-with-y,
  .chart-panel .latency-chart-card .chart-container-with-y {
    min-height: 100px !important;
    gap: 4px !important;
  }

  .latency-chart-card .chart-y-axis,
  .chart-panel .latency-chart-card .chart-y-axis {
    width: 40px !important;
    min-width: 40px !important;
  }

  .latency-chart-card .chart-y-axis span {
    font-size: 9px !important;
  }

  .latency-chart-card .chart-axis {
    font-size: 9px !important;
    margin-top: 4px !important;
    padding-top: 2px !important;
  }

  .latency-chart-card .chart-header-row {
    margin-bottom: 8px !important;
  }

  .latency-chart-card .chart-title {
    font-size: 11px !important;
  }
}

/* ============================================
   Egress Routing Modal Styles
   ============================================ */

/* ============================================
   Egress Teaser (During Deployment)
   ============================================ */
.egress-teaser {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding: 12px 16px;
  background: rgba(59, 130, 246, 0.06);
  border: 1px solid rgba(59, 130, 246, 0.12);
  border-radius: var(--radius);
  animation: fadeInTeaser 0.5s ease-out 1s both;
}

@keyframes fadeInTeaser {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.egress-teaser-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(59, 130, 246, 0.15);
  border-radius: 8px;
  color: var(--accent);
  flex-shrink: 0;
}

.egress-teaser-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.egress-teaser-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent);
}

.egress-teaser-text {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.3;
}

/* Hide teaser when deployment completes */
.deploy-complete .egress-teaser {
  display: none;
}

/* ============================================
   DNS Setup Guide (Post-Deployment)
   ============================================ */
.dns-setup-guide {
  margin-top: 20px;
  animation: slideUpFade 0.4s ease-out;
}

.dns-setup-card {
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(234, 179, 8, 0.25);
  border-radius: var(--radius);
  padding: 16px;
  position: relative;
  overflow: hidden;
}

.dns-setup-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #eab308, #f59e0b);
}

.dns-setup-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}

.dns-setup-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: rgba(234, 179, 8, 0.15);
  border: 1px solid rgba(234, 179, 8, 0.3);
  border-radius: 8px;
  color: #eab308;
  flex-shrink: 0;
}

.dns-setup-icon svg {
  width: 18px;
  height: 18px;
}

.dns-setup-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.dns-setup-badge {
  display: inline-flex;
  align-items: center;
  background: rgba(234, 179, 8, 0.15);
  color: #eab308;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  width: fit-content;
}

.dns-setup-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.dns-setup-alert {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 5px;
  padding: 8px 10px;
  margin-bottom: 12px;
  color: #f87171;
  font-size: 12px;
}

.dns-setup-alert strong {
  color: #ef4444;
}

.dns-setup-ip-section {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 14px;
}

.dns-ip-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.dns-ip-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.dns-ip-name {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.dns-ip-hint {
  font-size: 10px;
  color: var(--accent);
}

.dns-ip-value-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dns-ip-value {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 14px;
  font-weight: 600;
  color: #22c55e;
  background: rgba(34, 197, 94, 0.1);
  padding: 6px 10px;
  border-radius: 5px;
  border: 1px solid rgba(34, 197, 94, 0.2);
  word-break: break-all;
}

.dns-copy-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.dns-copy-btn:hover {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.3);
  color: var(--accent);
}

.dns-copy-btn.copied {
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.3);
  color: #22c55e;
}

.dns-setup-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}

.dns-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.dns-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 50%;
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}

.dns-step-content {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-top: 1px;
}

.dns-step-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

.dns-step-desc {
  font-size: 11px;
  color: var(--muted);
}

.dns-setup-example {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 10px;
}

.dns-example-label {
  font-size: 9px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  display: block;
  margin-bottom: 6px;
}

.dns-example-record {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 12px;
  flex-wrap: wrap;
}

.dns-record-type {
  background: rgba(59, 130, 246, 0.2);
  color: var(--accent);
  padding: 3px 6px;
  border-radius: 3px;
  font-weight: 600;
  font-size: 11px;
}

.dns-record-host {
  color: var(--muted);
}

.dns-record-arrow {
  color: var(--muted);
}

.dns-record-value {
  color: #22c55e;
  font-weight: 500;
  word-break: break-all;
}

.dns-setup-warning {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--muted);
  padding: 8px 10px;
  background: rgba(234, 179, 8, 0.08);
  border-radius: 5px;
  border: 1px solid rgba(234, 179, 8, 0.15);
  flex-wrap: wrap;
}

.dns-setup-warning svg {
  color: #eab308;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
}

.dns-setup-warning strong {
  color: #f87171;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
}

/* Light theme for DNS setup */
[data-theme="light"] .dns-setup-card {
  background: #fffbeb;
  border-color: #fbbf24;
}

[data-theme="light"] .dns-setup-alert {
  background: #fef2f2;
  border-color: #fecaca;
}

[data-theme="light"] .dns-setup-ip-section {
  background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .dns-ip-value {
  background: #f0fdf4;
  border-color: #86efac;
}

[data-theme="light"] .dns-setup-example {
  background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .dns-copy-btn {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
}

/* DNS Setup Guide - Mobile Responsive */
@media (max-width: 480px) {
  .dns-setup-card {
    padding: 14px;
  }

  .dns-setup-header {
    gap: 10px;
    margin-bottom: 12px;
  }

  .dns-setup-icon {
    width: 32px;
    height: 32px;
  }

  .dns-setup-icon svg {
    width: 18px;
    height: 18px;
  }

  .dns-setup-title {
    font-size: 14px;
  }

  .dns-setup-badge {
    font-size: 9px;
    padding: 2px 6px;
  }

  .dns-setup-alert {
    padding: 8px 10px;
    font-size: 12px;
    gap: 6px;
  }

  .dns-setup-ip-section {
    padding: 10px;
  }

  .dns-ip-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .dns-ip-label {
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }

  .dns-ip-name {
    font-size: 10px;
  }

  .dns-ip-hint {
    font-size: 10px;
  }

  .dns-ip-value-wrap {
    width: 100%;
    justify-content: space-between;
  }

  .dns-ip-value {
    font-size: 13px;
    padding: 6px 8px;
    flex: 1;
  }

  .dns-setup-steps {
    gap: 10px;
    margin-bottom: 12px;
  }

  .dns-step {
    gap: 10px;
  }

  .dns-step-num {
    width: 20px;
    height: 20px;
    font-size: 10px;
  }

  .dns-step-title {
    font-size: 12px;
  }

  .dns-step-desc {
    font-size: 11px;
  }

  .dns-setup-example {
    padding: 10px;
    margin-bottom: 10px;
  }

  .dns-example-label {
    font-size: 10px;
    margin-bottom: 6px;
  }

  .dns-example-record {
    font-size: 12px;
    gap: 6px;
    flex-wrap: wrap;
  }

  .dns-record-type {
    padding: 3px 6px;
  }

  .dns-setup-warning {
    padding: 8px 10px;
    font-size: 11px;
  }

  .dns-setup-warning strong {
    font-size: 10px;
  }
}

/* ============================================
   Network Configuration (Instance Details)
   ============================================ */
.network-config-section {
  background: var(--card-hover);
  border: 1px solid var(--border-hover);
  border-radius: 0 !important;
  padding: 16px;
  margin-bottom: 0;
  box-shadow: var(--shadow-lg);
}

.network-config-section .detail-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
}

.network-config-section .detail-section-title svg {
  opacity: 0.8;
}

.network-ip-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

.network-ip-card {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.network-ip-card.tensorprox-ip {
  border-color: rgba(34, 197, 94, 0.2);
}

.network-ip-card.origin-ip {
  border-color: rgba(234, 179, 8, 0.2);
}

.network-ip-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.network-ip-badge {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 6px;
  border-radius: 3px;
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.network-ip-badge.private {
  background: rgba(234, 179, 8, 0.15);
  color: #eab308;
}

.network-ip-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.network-ip-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.network-ip-value {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
  padding: 5px 8px;
  border-radius: 4px;
}

.tensorprox-ip .network-ip-value {
  color: #22c55e;
}

.origin-ip .network-ip-value {
  color: #fbbf24;
}

.network-copy-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s ease;
}

.network-copy-btn:hover {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.3);
  color: var(--accent);
}

.network-copy-btn.copied {
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.3);
  color: #22c55e;
}

.network-ip-hint {
  font-size: 11px;
  color: var(--accent);
  margin-top: 8px;
  display: block;
}

.network-ip-hint.warning {
  color: #eab308;
}

.dns-setup-mini {
  margin-top: 16px;
  padding: 12px;
  background: rgba(234, 179, 8, 0.08);
  border: 1px solid rgba(234, 179, 8, 0.15);
  border-radius: 8px;
}

.dns-mini-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #eab308;
  margin-bottom: 6px;
}

.dns-mini-text {
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 10px 0;
  line-height: 1.4;
}

.dns-mini-example {
  background: rgba(0, 0, 0, 0.2);
  padding: 8px 10px;
  border-radius: 4px;
}

.dns-mini-record {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text);
}

.dns-mini-record strong {
  color: var(--accent);
}

/* Light theme */
[data-theme="light"] .network-config-section {
  background: var(--card-hover);
  border-color: var(--border-hover);
}

[data-theme="light"] .network-ip-card {
  background: rgba(255, 255, 255, 0.8);
}

[data-theme="light"] .network-ip-value {
  background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .dns-setup-mini {
  background: #fffbeb;
  border-color: #fde68a;
}

[data-theme="light"] .dns-mini-example {
  background: rgba(0, 0, 0, 0.03);
}

/* ============================================
   DNS Setup Action Toast (Post-Deployment)
   ============================================ */
.dns-action-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--surface-elevated);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(234, 179, 8, 0.3);
  border-radius: 10px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--border);
  z-index: 9999;
  max-width: 480px;
  opacity: 0;
  pointer-events: none;
  /* CRITICAL: Don't block clicks when invisible */
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
  font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
}

.dns-action-toast.visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
  /* Re-enable clicks when visible */
}

.dns-action-toast-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(234, 179, 8, 0.12);
  border: 1px solid rgba(234, 179, 8, 0.25);
  border-radius: 8px;
  color: #eab308;
  flex-shrink: 0;
}

.dns-action-toast-icon svg {
  width: 18px;
  height: 18px;
}

.dns-action-toast-content {
  flex: 1;
  min-width: 0;
}

.dns-action-toast-title {
  font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  color: #eab308;
  margin: 0 0 3px 0;
  letter-spacing: 0.3px;
}

.dns-action-toast-text {
  font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
  font-size: 11px;
  color: var(--muted);
  margin: 0;
  line-height: 1.4;
}

.dns-action-toast-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: linear-gradient(135deg, #eab308, #d69e00);
  color: #000;
  font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  letter-spacing: 0.3px;
}

.dns-action-toast-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(234, 179, 8, 0.35);
  background: linear-gradient(135deg, #f59e0b, #eab308);
}

.dns-action-toast-btn svg {
  width: 12px;
  height: 12px;
}

.dns-action-toast-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  border-radius: 4px;
  font-size: 14px;
  font-family: 'JetBrains Mono', monospace;
  line-height: 1;
  transition: all 0.2s ease;
}

.dns-action-toast-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.6);
}

/* Light theme */
[data-theme="light"] .dns-action-toast {
  background: var(--surface-elevated);
  border-color: #fbbf24;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px var(--border);
}

[data-theme="light"] .dns-action-toast-title {
  color: #b45309;
}

[data-theme="light"] .dns-action-toast-close {
  color: rgba(0, 0, 0, 0.3);
}

[data-theme="light"] .dns-action-toast-close:hover {
  background: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.6);
}

/* Instance row highlight after deployment */
.instance-row.newly-deployed {
  animation: instanceHighlight 3s ease-out;
  position: relative;
}

.instance-row.newly-deployed::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(234, 179, 8, 0.15), transparent);
  pointer-events: none;
  animation: highlightFade 3s ease-out forwards;
}

@keyframes instanceHighlight {

  0%,
  20% {
    background-color: rgba(234, 179, 8, 0.1);
  }

  100% {
    background-color: transparent;
  }
}

@keyframes highlightFade {

  0%,
  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/* Mobile responsive */
@media (max-width: 600px) {
  .dns-action-toast {
    left: 12px;
    right: 12px;
    bottom: 12px;
    transform: translateX(0) translateY(100px);
    max-width: none;
    flex-direction: column;
    text-align: center;
    padding: 12px 14px;
    gap: 10px;
  }

  .dns-action-toast.visible {
    transform: translateX(0) translateY(0);
  }

  .dns-action-toast-icon {
    width: 32px;
    height: 32px;
  }

  .dns-action-toast-icon svg {
    width: 16px;
    height: 16px;
  }

  .dns-action-toast-title {
    font-size: 11px;
  }

  .dns-action-toast-text {
    font-size: 10px;
  }

  .dns-action-toast-btn {
    width: 100%;
    justify-content: center;
    padding: 10px 14px;
    font-size: 11px;
  }
}

/* ============================================
   Post-Deployment Egress CTA
   ============================================ */
.deploy-egress-cta {
  margin-top: 20px;
  animation: slideUpFade 0.4s ease-out;
}

@keyframes slideUpFade {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.egress-cta-card {
  background: rgba(30, 41, 59, 0.5);
  border: 1px solid rgba(59, 130, 246, 0.15);
  border-radius: var(--radius);
  padding: 20px;
  position: relative;
  overflow: hidden;
}

/* Subtle accent on left edge */
.egress-cta-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent);
  opacity: 0.6;
}

.egress-cta-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.egress-cta-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 10px;
  color: var(--accent);
  flex-shrink: 0;
}

.egress-cta-badge {
  display: inline-flex;
  align-items: center;
  background: rgba(34, 197, 94, 0.12);
  color: var(--success);
  font-size: 10px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.egress-cta-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 6px 0;
  letter-spacing: -0.01em;
}

.egress-cta-desc {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 16px 0;
  line-height: 1.5;
}

.egress-cta-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 16px;
}

.benefit-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text);
}

.benefit-item svg {
  color: var(--success);
  flex-shrink: 0;
}

.egress-cta-actions {
  display: flex;
  gap: 10px;
}

.egress-cta-btn-primary {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.15s ease;
}

.egress-cta-btn-primary:hover {
  background: #2563eb;
  transform: translateY(-1px);
}

.egress-cta-btn-primary svg {
  transition: transform 0.15s ease;
}

.egress-cta-btn-primary:hover svg {
  transform: translateX(2px);
}

.egress-cta-btn-skip {
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.15s ease;
}

.egress-cta-btn-skip:hover {
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.03);
}

/* Light theme adjustments */
[data-theme="light"] .egress-cta-card {
  background: #fff;
  border-color: #e2e8f0;
}

[data-theme="light"] .egress-cta-icon-wrap {
  background: rgba(59, 130, 246, 0.08);
}

[data-theme="light"] .egress-teaser {
  background: rgba(59, 130, 246, 0.04);
  border-color: rgba(59, 130, 246, 0.1);
}

[data-theme="light"] .egress-cta-btn-skip:hover {
  background: rgba(0, 0, 0, 0.03);
  border-color: #cbd5e1;
}

/* ============================================
   Egress CTA Responsive
   ============================================ */
@media (max-width: 480px) {
  .egress-cta-card {
    padding: 16px;
  }

  .egress-cta-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .egress-cta-icon-wrap {
    width: 40px;
    height: 40px;
  }

  .egress-cta-icon-wrap svg {
    width: 22px;
    height: 22px;
  }

  .egress-cta-title {
    font-size: 14px;
  }

  .egress-cta-desc {
    font-size: 12px;
  }

  .egress-cta-benefits {
    flex-direction: column;
    gap: 6px;
  }

  .benefit-item {
    font-size: 11px;
  }

  .egress-cta-actions {
    flex-direction: column;
  }

  .egress-cta-btn-primary,
  .egress-cta-btn-skip {
    width: 100%;
    justify-content: center;
  }

  .egress-teaser {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 12px;
  }
}

/* Notification dot for Configure Egress CTA */
.egress-cta-btn {
  position: relative;
}

.egress-notification-dot {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 12px;
  height: 12px;
  background: var(--accent);
  border-radius: 50%;
  border: 2px solid var(--bg);
  animation: egress-pulse 2s ease-in-out infinite;
  box-shadow: 0 0 8px var(--accent);
}

.egress-notification-dot.hidden {
  display: none;
}

@keyframes egress-pulse {

  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 8px var(--accent);
  }

  50% {
    transform: scale(1.2);
    box-shadow: 0 0 16px var(--accent), 0 0 24px rgba(59, 130, 246, 0.4);
  }
}

/* Light theme adjustments */
[data-theme="light"] .egress-notification-dot {
  border-color: var(--card);
}

.egress-modal-panel {
  max-width: 580px;
  width: 95%;
}

.egress-modal-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.egress-icon {
  width: 28px;
  height: 28px;
  color: var(--accent);
}

.egress-icon.success {
  color: var(--green);
}

.egress-intro {
  margin-bottom: 24px;
  padding: 16px;
  background: rgba(59, 130, 246, 0.08);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--accent);
}

.egress-intro p {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

/* Step Indicator */
.egress-steps-indicator {
  display: flex;
  justify-content: space-between;
  margin-bottom: 28px;
  padding: 0 8px;
}

.egress-steps-indicator .egress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  flex: 1;
}

.egress-steps-indicator .egress-step::after {
  content: '';
  position: absolute;
  top: 13px;
  left: calc(50% + 18px);
  width: calc(100% - 36px);
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  z-index: 0;
}

.egress-steps-indicator .egress-step:last-child::after {
  display: none;
}

.egress-steps-indicator .egress-step span {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
  font-weight: 500;
  z-index: 1;
  transition: all var(--transition-base);
}

.egress-steps-indicator .egress-step.active span {
  border-color: var(--accent);
  background: var(--accent);
  color: white;
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.4);
}

.egress-steps-indicator .egress-step.completed span {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
}

.egress-steps-indicator .egress-step.active::after,
.egress-steps-indicator .egress-step.completed::after {
  background: rgba(59, 130, 246, 0.4);
}

.egress-steps-indicator .egress-step small {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}

.egress-steps-indicator .egress-step.active small {
  color: var(--accent);
}

.egress-steps-indicator .egress-step.completed small {
  color: rgba(255, 255, 255, 0.5);
}

/* Step Content */
.egress-step-content {
  min-height: 200px;
}

.egress-step-content h3 {
  margin: 0 0 14px 0;
  font-size: var(--fs-sm);
  color: var(--text);
  font-weight: 500;
}

.egress-subtitle-text {
  margin: -8px 0 16px 0;
  color: var(--muted);
  font-size: var(--fs-sm);
}

/* Radio and Checkbox Groups */
.egress-radio-group,
.egress-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.egress-radio,
.egress-checkbox {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.egress-radio:hover,
.egress-checkbox:hover {
  border-color: rgba(59, 130, 246, 0.4);
  background: rgba(59, 130, 246, 0.06);
}

.egress-radio input,
.egress-checkbox input {
  appearance: none;
  width: 14px;
  height: 14px;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  border-radius: 3px;
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
  background: transparent;
}

.egress-radio input:checked,
.egress-checkbox input:checked {
  border-color: #3b82f6;
  background-color: #3b82f6 !important;
}

.radio-label,
.checkbox-label {
  font-size: var(--fs-xs);
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}

/* Hint text */
.egress-hint {
  margin-top: 12px;
  font-size: var(--fs-xs);
  color: var(--muted);
  font-style: italic;
}

/* Subsection */
.egress-subsection {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.egress-subsection h4 {
  margin: 0 0 12px 0;
  font-size: var(--fs-sm);
  color: var(--muted);
  font-weight: 500;
}

/* Form fields in egress modal */
.egress-form .field {
  margin-bottom: 16px;
}

.egress-form .field label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--fs-sm);
  color: var(--muted);
}

.egress-form .field input[type="text"] {
  width: 100%;
  padding: 12px 14px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--fs-sm);
  font-family: var(--font-mono);
}

.egress-form .field input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--input-focus-bg);
}

.egress-form .field-hint {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-xs);
  color: var(--muted);
}

/* Actions */
.egress-actions {
  margin-top: 24px;
  gap: 12px;
}

.egress-actions .btn {
  white-space: nowrap;
  min-width: auto;
  padding: 10px 20px;
}

.egress-actions .btn.primary {
  min-width: 180px;
}

/* Install Modal */
.egress-install-panel {
  max-width: 640px;
  width: 95%;
}

.egress-install-content {
  padding: 8px 0;
}

.egress-install-intro {
  margin: 0 0 16px 0;
  color: var(--muted);
  font-size: var(--fs-sm);
}

.egress-command-box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #0d1117;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 20px;
}

.egress-command-box code {
  flex: 1;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--green);
  word-break: break-all;
  line-height: 1.5;
}

.egress-copy-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: var(--panel);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 6px;
  color: var(--accent);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2) inset;
}

.egress-copy-btn:hover {
  background: rgba(59, 130, 246, 0.15);
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.25), 0 0 0 1px rgba(59, 130, 246, 0.1) inset;
}

.egress-copy-btn:active {
  transform: translateY(0);
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.2) inset;
}

.egress-copy-btn.copied {
  background: rgba(34, 197, 94, 0.15);
  border-color: var(--success);
  color: var(--success);
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.25), 0 0 0 1px rgba(34, 197, 94, 0.1) inset;
}

.egress-install-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  background: rgba(34, 197, 94, 0.08);
  border-radius: var(--radius-md);
  margin-bottom: 24px;
}

.egress-install-note svg {
  flex-shrink: 0;
  color: var(--green);
  margin-top: 1px;
}

.egress-install-note span {
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: 1.5;
}

/* Config Summary */
.egress-config-summary {
  margin-bottom: 24px;
  padding: 16px;
  background: var(--panel);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}

.egress-config-summary h4 {
  margin: 0 0 14px 0;
  font-size: var(--fs-sm);
  color: var(--text);
  font-weight: 600;
}

.egress-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.egress-summary-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.egress-summary-item .label {
  font-size: var(--fs-xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.egress-summary-item .value {
  font-size: var(--fs-sm);
  color: var(--text);
  font-family: var(--font-mono);
}

/* Management Info */
.egress-management-info {
  padding: 16px;
  background: rgba(59, 130, 246, 0.05);
  border-radius: var(--radius-md);
}

.egress-management-info h4 {
  margin: 0 0 12px 0;
  font-size: var(--fs-sm);
  color: var(--text);
  font-weight: 600;
}

.egress-mgmt-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.egress-mgmt-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.egress-mgmt-label {
  font-size: var(--fs-xs);
  color: var(--muted);
  min-width: 100px;
}

.egress-mgmt-item code {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--accent);
  background: rgba(59, 130, 246, 0.1);
  padding: 3px 8px;
  border-radius: 4px;
}

/* Instance row egress badge */
.egress-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.egress-badge svg {
  width: 12px;
  height: 12px;
}

.egress-badge.inactive {
  background: rgba(156, 163, 175, 0.1);
  border-color: rgba(156, 163, 175, 0.3);
  color: var(--muted);
}

/* Instance details egress section */
.instance-detail-section.egress-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.egress-section .detail-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.egress-section .detail-section-title svg {
  color: var(--accent);
}

.egress-status-display {
  margin-bottom: 12px;
}

.egress-status-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}

.egress-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.egress-status-badge.active {
  background: rgba(34, 197, 94, 0.1);
  color: var(--green);
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.egress-status-badge.inactive {
  background: rgba(156, 163, 175, 0.1);
  color: var(--muted);
  border: 1px solid rgba(156, 163, 175, 0.2);
}

.egress-info-text {
  margin: 12px 0 0 0;
  font-size: var(--fs-xs);
  color: var(--muted);
  line-height: 1.5;
}

/* Responsive */
@media (max-width: 640px) {

  .egress-modal-panel,
  .egress-install-panel {
    max-width: 100%;
    margin: 16px;
    max-height: 90vh;
    overflow-y: auto;
  }

  .egress-steps-indicator {
    padding: 0;
  }

  .egress-steps-indicator .egress-step small {
    display: none;
  }

  .egress-summary-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   Product Feedback Widget
   ============================================ */
.feedback-widget {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 10000;
  font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
}

/* Floating Trigger Button */
.feedback-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  background: linear-gradient(135deg, var(--accent), #2563eb);
  color: white;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  box-shadow:
    0 4px 20px rgba(59, 130, 246, 0.4),
    0 2px 8px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.feedback-trigger:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 6px 28px rgba(59, 130, 246, 0.5),
    0 4px 12px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.feedback-trigger.active {
  background: linear-gradient(135deg, #1e40af, #1d4ed8);
  transform: translateY(0) scale(1);
}

.feedback-trigger svg {
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.feedback-trigger:hover svg {
  transform: rotate(-10deg);
}

.feedback-trigger-text {
  letter-spacing: 0.3px;
}

/* Feedback Panel */
.feedback-panel {
  position: absolute;
  bottom: 60px;
  right: 0;
  width: 380px;
  max-height: calc(100vh - 80px);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(0.95);
  transform-origin: bottom right;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.05),
    0 0 60px rgba(59, 130, 246, 0.1);
  display: flex;
  flex-direction: column;
}

.feedback-panel.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* Panel Header */
.feedback-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), transparent);
  border-bottom: 1px solid var(--border);
}

.feedback-header-content {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
}

.feedback-header-content svg {
  color: var(--accent);
}

.feedback-header-content h3 {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  letter-spacing: 0.3px;
}

.feedback-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s ease;
}

.feedback-close:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.2);
  color: var(--red);
}

/* Panel Body */
.feedback-panel-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-height: min(450px, calc(100vh - 220px));
  overflow-y: auto;
}

.feedback-panel-body::-webkit-scrollbar {
  width: 4px;
}

.feedback-panel-body::-webkit-scrollbar-track {
  background: transparent;
}

.feedback-panel-body::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 2px;
}

/* Feedback Sections */
.feedback-section {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.feedback-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.3px;
  font-family: 'JetBrains Mono', var(--font-mono), monospace;
  margin-bottom: 14px;
}

/* Add margin-top only for labels after the first section */
.feedback-section+.feedback-section .feedback-label {
  margin-top: 14px;
}

.feedback-label .optional {
  font-weight: 400;
  color: var(--muted);
  font-size: 11px;
}

/* Rating Buttons */
.feedback-rating {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.rating-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 6px;
  background: var(--inner-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s ease;
}

.rating-btn span {
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family: 'JetBrains Mono', var(--font-mono), monospace;
}

.rating-btn:hover {
  background: rgba(59, 130, 246, 0.05);
  border-color: rgba(59, 130, 246, 0.3);
  color: var(--text);
}

.rating-btn.active {
  background: rgba(59, 130, 246, 0.15);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.2);
}

.rating-btn.active svg {
  transform: scale(1.1);
}

/* Category Buttons */
.feedback-categories {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.category-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--inner-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  font-family: 'JetBrains Mono', var(--font-mono), monospace;
  cursor: pointer;
  transition: all 0.2s ease;
}

.category-btn:hover {
  background: rgba(59, 130, 246, 0.05);
  border-color: rgba(59, 130, 246, 0.3);
  color: var(--text);
}

.category-btn.active {
  background: rgba(59, 130, 246, 0.15);
  border-color: var(--accent);
  color: var(--accent);
}

.category-btn svg {
  flex-shrink: 0;
}

/* Textarea */
.feedback-textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--inner-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  line-height: 1.5;
  resize: vertical;
  min-height: 80px;
  transition: all 0.2s ease;
}

.feedback-textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--input-focus-bg);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.feedback-textarea::placeholder {
  color: var(--placeholder);
}

/* Input */
.feedback-input {
  width: 100%;
  padding: 10px 14px;
  background: var(--inner-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  transition: all 0.2s ease;
}

.feedback-input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--input-focus-bg);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.feedback-input::placeholder {
  color: var(--placeholder);
}

/* Panel Footer */
.feedback-panel-footer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .feedback-panel-footer {
  background: rgba(59, 130, 246, 0.08);
  border-top-color: rgba(59, 130, 246, 0.15);
}

.feedback-privacy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 10px;
  color: var(--muted);
}

.feedback-privacy svg {
  color: var(--green);
}

/* Submit Button */
.feedback-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  background: linear-gradient(135deg, var(--accent), #2563eb);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.feedback-submit:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.feedback-submit:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* Success State */
.feedback-success {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  gap: 16px;
}

.success-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background: rgba(34, 197, 94, 0.1);
  border-radius: 50%;
  color: var(--green);
  animation: successPulse 0.6s ease-out;
}

@keyframes successPulse {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.feedback-success h4 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.feedback-success p {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .feedback-widget {
    bottom: 16px;
    right: 16px;
    z-index: 50 !important;
  }

  .feedback-trigger {
    padding: 10px 14px;
    font-size: 12px;
  }

  .feedback-trigger-text {
    display: none;
  }

  .feedback-trigger svg {
    width: 20px;
    height: 20px;
  }

  .feedback-panel {
    width: calc(100vw - 32px);
    max-width: 360px;
    max-height: calc(100vh - 70px);
    right: 0;
    bottom: 52px;
  }

  .feedback-panel-body {
    max-height: min(350px, calc(100vh - 200px));
  }

  .feedback-rating {
    flex-wrap: wrap;
    gap: 6px;
  }

  .rating-btn {
    min-width: calc(50% - 3px);
    flex: unset;
  }

  .feedback-categories {
    grid-template-columns: 1fr;
  }
}

/* Very small screens (like Nest Hub) */
@media (max-height: 600px) {
  .feedback-panel {
    max-height: calc(100vh - 60px);
    bottom: 50px;
  }

  .feedback-panel-body {
    max-height: calc(100vh - 220px);
    padding: 16px;
    gap: 16px;
  }

  .feedback-panel-header {
    padding: 12px 16px;
  }

  .feedback-panel-footer {
    padding: 12px 16px;
  }

  .feedback-textarea {
    min-height: 60px;
  }

  .rating-btn {
    padding: 8px 4px;
  }

  .rating-btn svg {
    width: 24px;
    height: 24px;
  }

  .rating-btn span {
    font-size: 9px;
  }
}

/* Widget is always visible - auth check done via JS/page context */

/* =====================================================
   THREAT STATUS ANIMATIONS
   (Threat status is now integrated into .deployment-badge)
   ===================================================== */

@keyframes pulse-dot {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

@keyframes pulse-dot-fast {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.7;
    transform: scale(1.2);
  }
}

/* =====================================================
   ATTACK ANALYSIS & DETECTION INTELLIGENCE PANELS
   ===================================================== */

/* Detection Panel - Full Width Layout */
.detection-panel-wrapper {
  margin-top: 16px;
}

.detection-panel-wrapper .panel.detail-card {
  max-width: 100%;
}

/* Remove rounded borders from subsections inside Detection Intelligence */
.detection-panel-wrapper .baseline-quality-row,
.detection-panel-wrapper .confidence-section,
.detection-panel-wrapper .attack-distribution-section,
.detection-panel-wrapper .baseline-section,
.detection-panel-wrapper .baseline-metrics-grid,
.detection-panel-wrapper .baseline-metric,
.detection-panel-wrapper .baseline-grid {
  border-radius: 0 !important;
}

/* Detection Info - rounded to match event-types-info style */
.detection-panel-wrapper .detection-info {
  border-radius: 10px;
}

.detection-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  font-family: var(--font-mono);
}

@media (max-width: 900px) {
  .detection-content {
    grid-template-columns: 1fr;
  }
}

/* ============================================= */
/* DETECTION INTELLIGENCE V2 - Optimized Layout */
/* ============================================= */

.detection-content-v2 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: var(--font-mono);
}

/* Primary Row: 3 equal columns */
.detection-primary-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

/* Detection Cards */
.detection-card {
  padding: 16px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  border: 1px solid var(--border);
}

.detection-card-title {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 14px;
}

/* Alert Status in Detection Card */
.detection-card .alert-status-grid {
  display: flex;
  gap: 12px;
}

.detection-card .alert-status-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 8px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 0;
  border: 1px solid var(--border);
}

.detection-card .alert-status-count {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}

.detection-card .alert-status-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-top: 6px;
}

.detection-card .alert-status-item.review .alert-status-count {
  color: var(--accent);
}

/* Alert Distribution Compact */
.alert-dist-compact {
  display: flex;
  align-items: center;
  gap: 16px;
}

.alert-dist-compact .attack-donut-container.small {
  width: 70px;
  height: 70px;
  flex-shrink: 0;
}

.alert-dist-compact .donut-total {
  font-size: 18px;
}

.alert-dist-compact .donut-label {
  font-size: 9px;
}

.alert-dist-compact .attack-legend {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.alert-dist-compact .legend-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
}

/* Confidence Display */
.confidence-display {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.confidence-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.confidence-value {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
}

.confidence-status {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.confidence-bar-track {
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
  overflow: hidden;
}

.confidence-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #60a5fa);
  border-radius: 3px;
  transition: width 0.6s ease;
}

.confidence-hint {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}

/* Secondary Row: Compact Baseline + Info */
.detection-secondary-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* NORMAL TRAFFIC SECTION - Enhanced Card Layout                               */
/* ═══════════════════════════════════════════════════════════════════════════ */

.normal-traffic-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.normal-traffic-header {
  font-family: 'JetBrains Mono', var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.normal-traffic-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  flex: 1;
}

.traffic-metric-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 0;
  transition: all 0.2s ease;
}

.traffic-metric-card:hover {
  border-color: rgba(59, 130, 246, 0.3);
  background: rgba(59, 130, 246, 0.04);
}

.traffic-metric-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  flex-shrink: 0;
  background: rgba(59, 130, 246, 0.1);
  color: var(--accent);
}

.traffic-metric-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.traffic-metric-value {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

.traffic-metric-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.traffic-metric-hint {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  opacity: 0.7;
}

/* Light theme adjustments */
[data-theme="light"] .traffic-metric-card {
  background: rgba(0, 0, 0, 0.02);
  border-color: var(--border);
}

[data-theme="light"] .traffic-metric-card:hover {
  border-color: rgba(59, 130, 246, 0.3);
  background: rgba(59, 130, 246, 0.04);
}

[data-theme="light"] .traffic-metric-icon {
  background: rgba(59, 130, 246, 0.08);
}

/* Responsive: Stack on smaller screens */
@media (max-width: 1200px) {
  .normal-traffic-grid {
    gap: 8px;
  }

  .traffic-metric-card {
    padding: 12px;
  }

  .traffic-metric-value {
    font-size: 16px;
  }
}

@media (max-width: 600px) {
  .normal-traffic-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .traffic-metric-card {
    padding: 12px;
  }

  .traffic-metric-icon {
    width: 32px;
    height: 32px;
  }

  .traffic-metric-value {
    font-size: 15px;
  }
}

/* Legacy support - keep old classes for backwards compatibility */
.baseline-compact {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  border: 1px solid var(--border);
}

.baseline-compact-title {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.baseline-metrics-inline {
  display: flex;
  flex: 1;
  gap: 24px;
  justify-content: space-around;
}

.baseline-metric-inline {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.baseline-metric-inline .metric-value {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.baseline-metric-inline .metric-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* How Detection Works - Compact */
.detection-info-compact {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(59, 130, 246, 0.04);
  border-radius: var(--radius-md);
  border: 1px solid rgba(59, 130, 246, 0.1);
}

.detection-info-compact .info-icon {
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 1px;
}

.detection-info-compact .info-text {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  line-height: 1.5;
}

/* Responsive: Medium screens (laptops like Zenbook 14 3K) */
@media (max-width: 1400px) {
  .baseline-compact {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .baseline-metrics-inline {
    display: grid;
    grid-template-columns: repeat(4, auto);
    gap: 16px 24px;
    width: 100%;
  }
}

@media (max-width: 1100px) {
  .baseline-metrics-inline {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 24px;
  }
}

/* Responsive: Stack on mobile */
@media (max-width: 900px) {
  .detection-primary-row {
    grid-template-columns: 1fr;
  }

  .baseline-compact {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .baseline-metrics-inline {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .detection-info-compact {
    flex-direction: column;
    gap: 8px;
  }
}

@media (max-width: 600px) {
  .detection-card .alert-status-grid {
    flex-direction: column;
    gap: 8px;
  }

  .alert-dist-compact {
    flex-direction: column;
    text-align: center;
  }

  .baseline-metrics-inline {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
}

/* Attack Distribution in Detection Intelligence */
.attack-distribution-section {
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
}

.attack-dist-row.compact {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.attack-donut-container.small {
  width: 80px;
  height: 80px;
}

.attack-donut-container.small .donut-total {
  font-size: 18px;
}

.attack-donut-container.small .donut-label {
  font-size: 9px;
}

/* QoS Indicator in Bandwidth Chart */
.qos-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  border: 1px solid var(--border);
  font-size: 11px;
}

.qos-label {
  color: var(--muted);
}

.qos-value {
  color: var(--text);
  font-weight: 500;
  font-family: var(--font-mono);
}

.qos-dropped {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-left: 8px;
  margin-left: 4px;
  border-left: 1px solid var(--border);
  color: var(--accent);
  font-family: var(--font-mono);
}

.qos-dropped svg {
  color: var(--accent);
}

/* QoS Threshold Line on Chart */
.qos-threshold-line {
  stroke: var(--accent);
  stroke-width: 1;
  stroke-dasharray: 4 3;
  opacity: 0.7;
}

.qos-threshold-label {
  position: absolute;
  right: 8px;
  padding: 2px 6px;
  background: rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 4px;
  font-size: 9px;
  font-family: var(--font-mono);
  color: var(--accent);
  pointer-events: none;
}

/* Attack Analysis Panel */
.attack-analysis-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.attack-dist-row {
  display: flex;
  align-items: center;
  gap: 20px;
}

.attack-donut-container {
  position: relative;
  width: 100px;
  height: 100px;
  flex-shrink: 0;
}

.attack-donut-container .donut-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.donut-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.donut-total {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  font-family: var(--font-mono);
  line-height: 1;
}

.donut-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.attack-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-mono);
}

.legend-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.2px;
}

.legend-empty svg {
  color: var(--accent);
}

.attack-legend-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2px;
}

.legend-color-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* TensorProx Blue Palette - different opacities/shades */
.legend-color-dot.syn-flood {
  background: #3b82f6;
}

.legend-color-dot.pps-spike {
  background: #60a5fa;
}

.legend-color-dot.cps-spike {
  background: #93c5fd;
}

.legend-color-dot.state-exhaustion {
  background: #2563eb;
}

.legend-color-dot.bandwidth-spike {
  background: #1d4ed8;
}

.legend-color-dot.volumetric {
  background: #dbeafe;
}

.legend-color-dot.unknown {
  background: var(--muted);
}

.legend-name {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text);
}

.legend-count {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  margin-left: 4px;
}

/* Defense Grid */
.defense-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.defense-item {
  padding: 12px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}

.defense-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.defense-header svg {
  color: var(--accent);
  flex-shrink: 0;
}

.defense-header span:first-of-type {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  flex: 1;
}

.defense-badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  font-weight: 500;
}

.defense-badge.active {
  background: rgba(59, 130, 246, 0.15);
  color: var(--accent);
}

.defense-badge.qos {
  background: rgba(59, 130, 246, 0.1);
  color: var(--accent);
}

.defense-stats {
  display: flex;
  gap: 20px;
}

.defense-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.defense-stat .stat-label {
  font-size: 10px;
  color: var(--muted);
}

.defense-stat .stat-value {
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--text);
}

.challenge-value {
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--accent);
}

.escalation-levels {
  display: flex;
  gap: 6px;
}

.esc-level {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-mono);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  color: var(--muted);
}

.esc-level[data-active="true"],
.esc-level.active {
  background: rgba(59, 130, 246, 0.15);
  border-color: var(--accent);
  color: var(--accent);
}

/* Higher levels = more intense blue glow */
.esc-level[data-level="2"].active,
.esc-level[data-level="3"].active {
  background: rgba(59, 130, 246, 0.25);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.3);
}

.esc-level[data-level="4"].active {
  background: rgba(59, 130, 246, 0.35);
  border-color: var(--accent);
  color: var(--text);
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.5);
}

/* Detection Intelligence Panel - compact grid layout */
.detection-panel-wrapper .detection-content {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 12px;
  align-items: stretch;
}

/* Row 1: Baseline metrics + Baseline confidence side by side */
.detection-panel-wrapper .baseline-section {
  grid-column: 1;
  grid-row: 1;
}

.detection-panel-wrapper .baseline-quality-row {
  grid-column: 2;
  grid-row: 1;
  margin-top: 32px;
  /* Align with baseline metrics grid, offset for header */
  height: auto;
}

/* Row 2: Alert Status + Attack Distribution */
.detection-panel-wrapper .confidence-section {
  grid-column: 1;
  grid-row: 2;
}

.detection-panel-wrapper .attack-distribution-section {
  grid-column: 2;
  grid-row: 2;
}

/* Row 3: How Detection Works spans full width */
.detection-panel-wrapper .detection-info {
  grid-column: 1 / -1;
  grid-row: 3;
}

/* How Detection Works shares row with Attack Distribution */
.detection-panel-wrapper .detection-info {
  /* No full-width span - stays in grid flow */
}

@media (max-width: 900px) {
  .detection-panel-wrapper .detection-content {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .detection-panel-wrapper .baseline-section,
  .detection-panel-wrapper .baseline-quality-row,
  .detection-panel-wrapper .confidence-section,
  .detection-panel-wrapper .attack-distribution-section,
  .detection-panel-wrapper .detection-info {
    grid-column: 1;
    grid-row: auto;
  }

  .detection-panel-wrapper .baseline-quality-row {
    margin-top: 0;
    /* Remove desktop offset on mobile */
  }
}

.baseline-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--font-mono);
}

.baseline-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-mono);
}

.baseline-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.3px;
}

.baseline-subtitle {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.2px;
}

.baseline-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.baseline-metric {
  padding: 12px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  text-align: center;
  font-family: var(--font-mono);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.baseline-metric:hover {
  border-color: rgba(59, 130, 246, 0.3);
  background: rgba(59, 130, 246, 0.03);
}

.baseline-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.baseline-icon.packets {
  background: rgba(59, 130, 246, 0.12);
  color: #3b82f6;
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.2);
}

.baseline-icon.peak {
  background: rgba(96, 165, 250, 0.12);
  color: #60a5fa;
  box-shadow: 0 0 12px rgba(96, 165, 250, 0.2);
}

.baseline-icon.connections {
  background: rgba(147, 197, 253, 0.12);
  color: #93c5fd;
  box-shadow: 0 0 12px rgba(147, 197, 253, 0.15);
}

.baseline-icon.ratio {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.25);
}

.baseline-icon svg {
  width: 16px;
  height: 16px;
}

.baseline-value {
  display: block;
  font-size: 18px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--text);
  line-height: 1.2;
}

.baseline-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Light theme adjustments for baseline icons */
[data-theme="light"] .baseline-icon.packets {
  background: rgba(59, 130, 246, 0.1);
  box-shadow: none;
}

[data-theme="light"] .baseline-icon.peak {
  background: rgba(96, 165, 250, 0.1);
  box-shadow: none;
}

[data-theme="light"] .baseline-icon.connections {
  background: rgba(147, 197, 253, 0.1);
  box-shadow: none;
}

[data-theme="light"] .baseline-icon.ratio {
  background: rgba(59, 130, 246, 0.12);
  box-shadow: none;
}

.baseline-quality-row {
  padding: 16px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  box-sizing: border-box;
  font-family: var(--font-mono);
  display: flex;
  flex-direction: column;
}

.quality-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.quality-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.quality-value {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  line-height: 1;
}

.quality-status {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

/* Horizontal bar styles */
.quality-bar-track {
  height: 8px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  overflow: hidden;
}

.quality-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #60a5fa);
  border-radius: 4px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.quality-explanation {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.4;
  margin: 0;
  font-family: var(--font-mono);
}

/* Alert Status Section - Simple & Actionable */
.confidence-section {
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
}

.conf-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.alert-status-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.alert-status-item {
  padding: 12px;
  border-radius: 0;
  text-align: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
}

.alert-status-item {
  transition: all 0.2s ease;
  cursor: default;
}

.alert-status-item.verified {
  border-color: rgba(59, 130, 246, 0.2);
}

.alert-status-item.verified:hover {
  background: rgba(59, 130, 246, 0.06);
  border-color: rgba(59, 130, 246, 0.4);
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.1);
}

.alert-status-item.review {
  border-color: var(--border);
}

.alert-status-item.review:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border-hover);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.03);
}

/* Light Mode Alert Status Hover */
[data-theme="light"] .alert-status-item.verified:hover {
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(37, 99, 235, 0.4);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1);
}

[data-theme="light"] .alert-status-item.review:hover {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.alert-status-count {
  display: block;
  font-size: 22px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--text);
  line-height: 1.2;
}

.alert-status-item.review .alert-status-count {
  color: var(--muted);
}

.alert-status-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
}

/* Detection Info Explanation - matches event-types-info style */
.detection-info {
  margin-top: 8px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--font-mono);
  height: fit-content;
}

.detection-info-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
}

.detection-info-header span {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text);
}

/* Uses same .bulb-icon styles from event-types-info */

.detection-info-text {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}

/* Detection Intelligence - Light Theme */
[data-theme="light"] .detection-card {
  background: rgba(0, 0, 0, 0.03);
  border-color: var(--border);
}

[data-theme="light"] .detection-card .alert-status-item {
  background: rgba(0, 0, 0, 0.04);
  border-color: var(--border);
}

[data-theme="light"] .baseline-compact {
  background: rgba(0, 0, 0, 0.04);
  border-color: var(--border);
}

[data-theme="light"] .confidence-section,
[data-theme="light"] .attack-distribution-section,
[data-theme="light"] .baseline-quality-row {
  background: rgba(0, 0, 0, 0.04);
  border-color: var(--border);
}

[data-theme="light"] .detection-info {
  background: rgba(59, 130, 246, 0.03);
  border-color: rgba(59, 130, 246, 0.1);
}

[data-theme="light"] .detection-info-header {
  border-bottom-color: rgba(59, 130, 246, 0.1);
}

[data-theme="light"] .confidence-bar-track {
  background: rgba(0, 0, 0, 0.06);
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* RESTRUCTURED MONITORING LAYOUT - Security & Detection + Performance         */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* Section Spacing */
.security-detection-section,
.performance-section {
  margin-bottom: 32px;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* SECURITY & DETECTION SECTION                                                */
/* ─────────────────────────────────────────────────────────────────────────── */

.security-detection-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 16px;
}

/* Security Events Panel */
.security-events-panel {
  display: flex;
  flex-direction: column;
}

.security-events-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
}

.security-events-panel .hud-flow-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 0;
  padding-bottom: 0;
}

.security-events-panel .hud-item {
  margin-bottom: 0;
}

.security-events-panel .pie-chart-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.security-events-panel .pie-chart-wrapper {
  width: 120px;
  height: 120px;
}

/* Detection Intelligence Panel */
.detection-intelligence-panel {
  display: flex;
  flex-direction: column;
}

.detection-intelligence-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.detection-metrics-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.baseline-confidence-card {
  padding: 12px 16px;
}

.baseline-confidence-card .confidence-display {
  gap: 8px;
}

.baseline-confidence-card .confidence-header {
  margin-bottom: 4px;
}

.baseline-confidence-card .confidence-value {
  font-size: 18px;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* COLLAPSIBLE INFO BOX                                                        */
/* ─────────────────────────────────────────────────────────────────────────── */

.security-info-box {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.info-box-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text);
  transition: background 0.2s ease;
}

.info-box-toggle:hover {
  background: rgba(255, 255, 255, 0.02);
}

.info-box-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.info-box-header span {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text);
}

.chevron-icon {
  color: var(--muted);
  transition: transform 0.3s ease;
}

.security-info-box.expanded .chevron-icon {
  transform: rotate(180deg);
}

.info-box-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  padding: 0 16px;
}

.security-info-box.expanded .info-box-content {
  max-height: 500px;
  padding: 0 16px 16px 16px;
}

.info-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.info-column h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  margin: 0 0 12px 0;
}

.info-column .event-type-item {
  margin-bottom: 12px;
}

.info-column .event-type-item:last-child {
  margin-bottom: 0;
}

.info-column .event-type-desc {
  font-size: 11px;
  line-height: 1.5;
}

.info-column .info-text {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 10px 0;
}

.info-column .info-text:last-child {
  margin-bottom: 0;
}

.info-column .info-text.highlight {
  color: var(--accent);
  font-weight: 500;
}

/* Light theme for info box */
[data-theme="light"] .security-info-box {
  background: rgba(59, 130, 246, 0.03);
  border-color: rgba(59, 130, 246, 0.1);
}

[data-theme="light"] .info-box-toggle:hover {
  background: rgba(59, 130, 246, 0.05);
}

[data-theme="light"] .info-columns {
  border-top-color: rgba(59, 130, 246, 0.1);
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* INLINE PANEL INFO BOXES (Same style as main security-info-box)              */
/* ─────────────────────────────────────────────────────────────────────────── */

.panel-info-box {
  margin-top: 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.panel-info-box .info-box-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text);
  transition: background 0.2s ease;
}

.panel-info-box .info-box-toggle:hover {
  background: rgba(255, 255, 255, 0.02);
}

.panel-info-box .info-box-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  padding: 0 16px;
}

.panel-info-box.expanded .info-box-content {
  max-height: 500px;
  padding: 12px 16px 16px 16px;
  border-top: 1px solid var(--border);
}

.panel-info-box.expanded .chevron-icon {
  transform: rotate(180deg);
}

/* Light theme */
[data-theme="light"] .panel-info-box {
  background: rgba(59, 130, 246, 0.03);
  border-color: rgba(59, 130, 246, 0.1);
}

[data-theme="light"] .panel-info-box .info-box-toggle:hover {
  background: rgba(59, 130, 246, 0.05);
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* PERFORMANCE ANALYTICS SECTION                                               */
/* ─────────────────────────────────────────────────────────────────────────── */

.performance-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.network-traffic-panel {
  width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* NETWORK TRAFFIC CHART - CONSISTENT STYLING                                  */
/* ═══════════════════════════════════════════════════════════════════════════ */

.network-traffic-panel .chart-placeholder.large {
  display: flex !important;
  flex-direction: column !important;
  min-height: 220px !important;
  padding: 16px !important;
  box-sizing: border-box !important;
}

.network-traffic-panel .chart-placeholder.large .chart-header-row {
  flex-shrink: 0 !important;
  margin-bottom: 12px !important;
}

.network-traffic-panel .chart-placeholder.large .chart-container-with-y {
  flex: 1 1 auto !important;
  display: block !important;
  min-height: 140px !important;
  position: relative !important;
  padding-left: 57px !important;
  box-sizing: border-box !important;
}

.network-traffic-panel .chart-placeholder.large .chart-y-axis {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 57px !important;
  height: 100% !important;
  display: block !important;
  padding-right: 8px !important;
  box-sizing: border-box !important;
  z-index: 1 !important;
}

.network-traffic-panel .chart-placeholder.large .chart-y-axis span {
  position: absolute !important;
  right: 12px !important;
  font-size: 11px !important;
  line-height: 1 !important;
  text-align: right !important;
  color: var(--text-secondary) !important;
  white-space: nowrap !important;
  transform: translateY(-50%) !important;
}

/* Top label (max value) at 0% */
.network-traffic-panel .chart-placeholder.large .chart-y-axis span:first-child {
  top: 0 !important;
}

/* Middle label at 50% */
.network-traffic-panel .chart-placeholder.large .chart-y-axis span:nth-child(2) {
  top: 50% !important;
}

/* Bottom label (0) at 100% */
.network-traffic-panel .chart-placeholder.large .chart-y-axis span:last-child {
  top: 100% !important;
}

.network-traffic-panel .chart-placeholder.large .chart-content {
  position: absolute !important;
  left: 57px !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  border: none !important;
  border-left: 1px solid var(--border) !important;
  overflow: hidden !important;
}

.network-traffic-panel .chart-placeholder.large .chart-content svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  overflow: hidden !important;
}

/* Ensure grid lines are visible */
.network-traffic-panel .chart-placeholder.large .chart-content svg .chart-grid-line {
  stroke: var(--border);
  stroke-width: 1;
  opacity: 0.3;
}

/* QoS threshold line styling */
.network-traffic-panel .chart-placeholder.large .chart-content svg .qos-threshold-line {
  stroke: #3b82f6 !important;
  stroke-width: 2 !important;
  stroke-dasharray: 6 4 !important;
  opacity: 1 !important;
}

.network-traffic-panel .chart-placeholder.large .chart-axis {
  flex-shrink: 0 !important;
  margin-top: 4px !important;
  padding-left: 57px !important;
  display: flex !important;
  justify-content: space-between !important;
  font-size: 11px !important;
}

.secondary-charts-row {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* SECONDARY CHARTS - SIDE-BY-SIDE ON LARGE SCREENS                            */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* Large screens (≥1400px): Two-column layout for better data density */
@media (min-width: 1400px) {
  .secondary-charts-row {
    flex-direction: row;
    gap: 20px;
  }

  .secondary-charts-row>.panel {
    flex: 1;
    min-width: 0;
    /* Prevent flex overflow */
    max-width: calc(50% - 10px);
  }

  /* Chart heights for side-by-side layout */
  .secondary-charts-row .chart-placeholder.large {
    min-height: 260px !important;
  }

  .secondary-charts-row .latency-panel .chart-container-with-y {
    min-height: 160px !important;
  }

  .secondary-charts-row .volume-chart-card .chart-container-with-y {
    min-height: 180px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* SECONDARY CHARTS - COMMON STYLES                                            */
/* Note: Volume chart has its own specific styles above, these are for latency */
/* ═══════════════════════════════════════════════════════════════════════════ */

.secondary-charts-row .panel {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0;
  /* Prevent flex overflow */
}

.secondary-charts-row .chart-placeholder.large {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-height: 200px !important;
  padding: 16px !important;
}

.secondary-charts-row .chart-header-row {
  flex-shrink: 0;
  margin-bottom: 12px;
}

/* Latency panel specific styles (not volume chart) */
.secondary-charts-row .latency-panel .chart-container-with-y {
  flex: 1 !important;
  display: block !important;
  min-height: 120px !important;
  position: relative !important;
  padding-left: 57px !important;
  box-sizing: border-box !important;
}

.secondary-charts-row .latency-panel .chart-y-axis {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 57px !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding-right: 8px !important;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  box-sizing: border-box;
  z-index: 1 !important;
}

.secondary-charts-row .latency-panel .chart-y-axis span {
  line-height: 1;
  white-space: nowrap;
  text-align: right;
}

.secondary-charts-row .latency-panel .chart-content {
  position: absolute !important;
  left: 57px !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  border: none !important;
  border-left: 1px solid var(--border) !important;
  overflow: hidden !important;
}

.secondary-charts-row .latency-panel .chart-content svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  overflow: hidden !important;
}

/* Ensure grid lines are visible */
.secondary-charts-row .chart-content svg .chart-grid-line {
  stroke: var(--border);
  stroke-width: 1;
  opacity: 0.3;
}

.secondary-charts-row .latency-panel .chart-axis {
  flex-shrink: 0;
  margin-top: 8px;
  padding-left: 57px;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* RESPONSIVE: TABLET (max-width: 1200px)                                      */
/* ─────────────────────────────────────────────────────────────────────────── */

@media (max-width: 1200px) {
  .security-detection-grid {
    gap: 16px;
  }

  .detection-metrics-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .secondary-charts-row {
    gap: 20px;
  }

  .secondary-charts-row .chart-placeholder.large {
    min-height: 180px !important;
  }

  .secondary-charts-row .latency-panel .chart-container-with-y {
    min-height: 100px !important;
  }

  .network-traffic-panel .chart-placeholder.large {
    min-height: 200px !important;
  }

  .network-traffic-panel .chart-placeholder.large .chart-container-with-y {
    min-height: 120px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* RESPONSIVE: SMALL TABLET (max-width: 900px)                                 */
/* ─────────────────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .security-detection-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .security-events-panel .hud-flow-container {
    grid-template-columns: 1fr 1fr;
  }

  .security-events-panel .pie-chart-wrapper {
    width: 100px;
    height: 100px;
  }

  .detection-metrics-row {
    grid-template-columns: 1fr 1fr;
  }

  .info-columns {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .secondary-charts-row {
    gap: 18px;
  }

  .secondary-charts-row .chart-placeholder.large {
    min-height: 180px !important;
  }

  .network-traffic-panel .chart-placeholder.large {
    min-height: 200px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* RESPONSIVE: MOBILE (max-width: 600px)                                       */
/* ─────────────────────────────────────────────────────────────────────────── */

@media (max-width: 600px) {

  .security-detection-section,
  .performance-section {
    margin-bottom: 24px;
  }

  .security-detection-grid {
    gap: 12px;
  }

  .security-events-panel .hud-flow-container {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .security-events-panel .hud-item {
    padding: 12px;
  }

  .security-events-panel .pie-chart-wrapper {
    width: 90px;
    height: 90px;
  }

  .detection-metrics-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .detection-card {
    padding: 12px;
  }

  .baseline-compact {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
  }

  .baseline-metrics-inline {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
  }

  .info-box-toggle {
    padding: 12px 14px;
  }

  .info-box-header span {
    font-size: 11px;
  }

  .info-column .info-text {
    font-size: 11px;
  }

  .performance-grid {
    gap: 16px;
  }

  .chart-header-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .chart-controls {
    width: 100%;
    justify-content: space-between;
  }

  .secondary-charts-row {
    gap: 16px;
  }

  .secondary-charts-row .chart-placeholder.large {
    min-height: 160px !important;
    padding: 12px !important;
  }

  .secondary-charts-row .latency-panel .chart-container-with-y {
    min-height: 90px !important;
  }

  .secondary-charts-row .latency-panel .chart-y-axis {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    font-size: 10px !important;
  }

  .secondary-charts-row .latency-panel .chart-axis {
    padding-left: 58px !important;
    font-size: 10px !important;
  }

  .network-traffic-panel .chart-placeholder.large {
    min-height: 180px !important;
    padding: 12px !important;
  }

  .network-traffic-panel .chart-placeholder.large .chart-container-with-y {
    min-height: 100px !important;
  }

  .network-traffic-panel .chart-placeholder.large .chart-y-axis {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    font-size: 10px !important;
  }

  .network-traffic-panel .chart-placeholder.large .chart-axis {
    padding-left: 58px !important;
    font-size: 10px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* RESPONSIVE: EXTRA SMALL MOBILE (max-width: 400px)                           */
/* ─────────────────────────────────────────────────────────────────────────── */

@media (max-width: 400px) {
  .baseline-metrics-inline {
    grid-template-columns: 1fr;
  }

  .detection-card .alert-status-grid {
    flex-direction: column;
    gap: 8px;
  }

  .alert-dist-compact {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* RESPONSIVE: LARGE DESKTOP (min-width: 1600px)                               */
/* ─────────────────────────────────────────────────────────────────────────── */

@media (min-width: 1600px) {
  .security-detection-grid {
    gap: 32px;
  }

  .security-events-panel .pie-chart-wrapper {
    width: 140px;
    height: 140px;
  }

  .detection-metrics-row {
    gap: 16px;
  }

  .info-columns {
    gap: 32px;
  }

  .performance-grid {
    gap: 32px;
  }

  /* Side-by-side layout with increased gap on extra large screens */
  .secondary-charts-row {
    gap: 28px;
  }

  .secondary-charts-row .chart-placeholder.large {
    min-height: 240px !important;
    padding: 20px !important;
  }

  .secondary-charts-row .latency-panel .chart-container-with-y {
    min-height: 160px !important;
  }

  /* Volume chart larger on big screens */
  .secondary-charts-row .volume-chart-card .chart-container-with-y {
    min-height: 200px !important;
  }

  .network-traffic-panel .chart-placeholder.large {
    min-height: 260px !important;
    padding: 20px !important;
  }

  .network-traffic-panel .chart-placeholder.large .chart-container-with-y {
    min-height: 180px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* RESPONSIVE: ULTRA WIDE (min-width: 2000px)                                  */
/* ─────────────────────────────────────────────────────────────────────────── */

@media (min-width: 2000px) {
  .security-detection-grid {
    grid-template-columns: 1fr 1.2fr;
  }
}

/* Section Toggle */
.section-toggle {
  margin-left: auto;
}

/* Spike Alerts Table Badges - TensorProx Blue/Grey Palette */
.alert-type-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* All alert types use blue palette with subtle distinctions */
.alert-type-badge.syn_flood {
  background: rgba(59, 130, 246, 0.15);
  color: var(--accent);
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.alert-type-badge.pps_spike {
  background: rgba(96, 165, 250, 0.12);
  color: #60a5fa;
  border: 1px solid rgba(96, 165, 250, 0.25);
}

.alert-type-badge.cps_spike {
  background: rgba(147, 197, 253, 0.1);
  color: #93c5fd;
  border: 1px solid rgba(147, 197, 253, 0.2);
}

.alert-type-badge.volumetric {
  background: rgba(59, 130, 246, 0.2);
  color: var(--text);
  border: 1px solid rgba(59, 130, 246, 0.35);
}

.alert-type-badge.bandwidth_spike {
  background: rgba(37, 99, 235, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(37, 99, 235, 0.3);
}

.alert-type-badge.unknown {
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  border: 1px solid var(--border);
}

.status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.status-badge.active {
  background: rgba(59, 130, 246, 0.15);
  color: var(--accent);
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.status-badge.resolved {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

/* Spike Alerts Feedback Buttons (horizontal layout) */
.feedback-btns {
  display: flex;
  flex-direction: row;
  gap: 4px;
  justify-content: center;
}

.feedback-btns .btn-feedback {
  width: 28px;
  height: 28px;
  padding: 4px;
}

.feedback-btns .btn-feedback svg {
  width: 14px;
  height: 14px;
}

.btn-feedback-alert {
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  color: var(--muted);
  transition: all 0.2s ease;
}

.btn-feedback-alert:hover {
  background: rgba(59, 130, 246, 0.1);
  border-color: var(--accent);
  color: var(--accent);
}

.btn-feedback-alert.submitted {
  background: rgba(59, 130, 246, 0.15);
  border-color: var(--accent);
  color: var(--accent);
}

/* Responsive */
@media (max-width: 900px) {
  .threat-analytics-grid {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* HOW IT WORKS VIEW - ARCHITECTURE VISUALIZATION                              */
/* ═══════════════════════════════════════════════════════════════════════════ */

.view[data-view="how-it-works"] {
  padding: 0;
}

/* Hero Section */
.hiw-hero {
  background: rgba(8, 10, 14, 0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 48px 40px;
  margin-bottom: 32px;
  position: relative;
  overflow: hidden;
}

.hiw-hero-content {
  position: relative;
  z-index: 1;
}

.hiw-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 20px;
  padding: 6px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 16px;
}

.hiw-badge-dot {
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.5;
    transform: scale(1.2);
  }
}

.hiw-title {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 16px 0;
  letter-spacing: 0.5px;
  line-height: 1.3;
}

.hiw-subtitle {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--muted);
  line-height: 1.7;
  max-width: 800px;
  margin: 0;
}

/* Section Styling */
.hiw-section {
  margin-bottom: 40px;
  padding: 0;
}

.hiw-section-title {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin: 0 0 20px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.hiw-section-title svg {
  color: var(--accent);
  opacity: 0.8;
}

.hiw-section-desc {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
  line-height: 1.7;
  margin: 0 0 24px 0;
  max-width: 900px;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* TRAFFIC FLOW DIAGRAM                                                        */
/* ─────────────────────────────────────────────────────────────────────────── */

.hiw-flow-container {
  background: rgba(8, 10, 14, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 32px;
  overflow: hidden;
}

.hiw-flow-diagram {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 24px 0;
  overflow-x: auto;
  min-height: 200px;
}

/* Flow Nodes */
.hiw-flow-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px 16px;
  background: rgba(8, 10, 14, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  min-width: 140px;
  max-width: 160px;
  position: relative;
  transition: all 0.3s ease;
}

.hiw-flow-node:hover {
  border-color: var(--accent);
  background: rgba(59, 130, 246, 0.05);
  transform: translateY(-4px);
}

.hiw-flow-node.highlight-node {
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.3);
}

.hiw-node-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: white;
  font-size: 9px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.hiw-node-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(59, 130, 246, 0.1);
  border-radius: 12px;
  margin-bottom: 12px;
}

.hiw-node-icon svg {
  width: 28px;
  height: 28px;
  color: var(--accent);
}

.internet-node .hiw-node-icon {
  background: rgba(255, 255, 255, 0.05);
}

.internet-node .hiw-node-icon svg {
  color: var(--muted);
}

.scrubber-node .hiw-node-icon {
  background: rgba(59, 130, 246, 0.12);
}

.scrubber-node .hiw-node-icon svg {
  color: var(--accent);
}

.exithub-node .hiw-node-icon {
  background: rgba(255, 255, 255, 0.05);
}

.exithub-node .hiw-node-icon svg {
  color: var(--muted);
}

.origin-node .hiw-node-icon {
  background: rgba(255, 255, 255, 0.05);
}

.origin-node .hiw-node-icon svg {
  color: var(--text);
}

.hiw-node-label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.hiw-node-desc {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  line-height: 1.4;
}

.hiw-node-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}

.hiw-node-stats .stat-item {
  font-size: 10px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.03);
  padding: 3px 8px;
  border-radius: 8px;
}

.hiw-node-stats .stat-value {
  color: var(--accent);
  font-weight: 600;
  font-family: var(--font-mono);
}

.hiw-node-tag {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.05);
  padding: 4px 10px;
  border-radius: 8px;
  margin-top: 10px;
}

.hiw-node-protected {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  margin-top: 10px;
}

/* EIP Badge on Internet Node */
.hiw-eip-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: 12px;
  padding: 8px 12px;
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 8px;
}

.hiw-eip-label {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent);
}

.hiw-eip-value {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
}

/* Hidden IP Badge on Origin Node */
.hiw-hidden-ip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed var(--border);
  border-radius: 8px;
}

.hiw-hidden-ip svg {
  color: var(--muted);
  opacity: 0.7;
}

.hiw-hidden-ip-text {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
}

.hiw-hidden-ip-value {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  opacity: 0.6;
  text-decoration: line-through;
}

/* EIP Explanation Callout */
/* Callouts Row */
.hiw-callouts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 24px;
}

@media (max-width: 800px) {
  .hiw-callouts-row {
    grid-template-columns: 1fr;
  }
}

.hiw-eip-callout {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  background: rgba(59, 130, 246, 0.04);
  border: 1px solid rgba(59, 130, 246, 0.12);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--accent);
}

.hiw-eip-callout.egress-callout {
  background: rgba(255, 255, 255, 0.02);
  border-color: var(--border);
  border-left-color: var(--muted);
}

.hiw-eip-callout.egress-callout .hiw-eip-callout-icon {
  background: rgba(255, 255, 255, 0.05);
}

.hiw-eip-callout.egress-callout .hiw-eip-callout-icon svg {
  color: var(--muted);
}

/* Egress Toggle Switch */
.hiw-egress-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 12px;
  cursor: pointer;
  user-select: none;
}

.hiw-egress-toggle input {
  display: none;
}

.hiw-toggle-slider {
  position: relative;
  width: 36px;
  height: 18px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 9px;
  transition: background 0.3s ease;
}

.hiw-toggle-slider::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: var(--muted);
  border-radius: 50%;
  transition: all 0.3s ease;
}

.hiw-egress-toggle input:checked+.hiw-toggle-slider {
  background: rgba(59, 130, 246, 0.3);
}

.hiw-egress-toggle input:checked+.hiw-toggle-slider::before {
  left: 20px;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
}

.hiw-toggle-label {
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent);
  min-width: 24px;
}

.hiw-egress-toggle input:not(:checked)~.hiw-toggle-label {
  color: var(--muted);
}

/* ==========================================
   ORIGIN-INITIATED TRAFFIC (EGRESS) SECTION
   ========================================== */

.hiw-egress-section {
  margin-top: 24px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 12px;
  position: relative;
}

.hiw-egress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(59, 130, 246, 0.1);
}

.hiw-egress-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.hiw-egress-title svg {
  color: var(--accent);
}

.hiw-egress-subtitle {
  font-weight: 400;
  font-size: 11px;
  color: var(--muted);
}

/* Enhanced toggle styling for egress section */
.hiw-egress-toggle-container {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 8px;
  cursor: pointer;
}

.hiw-egress-toggle-prefix {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.hiw-egress-toggle-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.hiw-egress-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.hiw-egress-toggle-switch .hiw-toggle-slider {
  width: 36px;
  height: 18px;
  background: var(--border);
  border-radius: 9px;
  position: relative;
  transition: all 0.2s ease;
  cursor: pointer;
}

.hiw-egress-toggle-switch .hiw-toggle-slider::before {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  left: 2px;
  top: 2px;
  background: var(--muted);
  border-radius: 50%;
  transition: all 0.2s ease;
}

.hiw-egress-toggle-switch input:checked+.hiw-toggle-slider {
  background: rgba(59, 130, 246, 0.3);
}

.hiw-egress-toggle-switch input:checked+.hiw-toggle-slider::before {
  left: 20px;
  background: var(--accent);
  box-shadow: 0 0 6px rgba(59, 130, 246, 0.5);
}

.hiw-egress-toggle-switch input:not(:checked)+.hiw-toggle-slider {
  background: rgba(59, 130, 246, 0.15);
}

.hiw-egress-toggle-switch input:not(:checked)+.hiw-toggle-slider::before {
  background: var(--muted);
}

.hiw-egress-toggle-container .hiw-toggle-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  min-width: 28px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent);
}

.hiw-egress-toggle-container:has(input:not(:checked)) .hiw-toggle-label {
  color: var(--muted);
}

.hiw-egress-flow-diagram {
  position: relative;
}

.hiw-egress-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 8px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.hiw-egress-flow.egress-on-flow {
  background: rgba(16, 185, 129, 0.04);
  border: 1px solid rgba(16, 185, 129, 0.15);
}

.hiw-egress-flow.egress-off-flow {
  display: none;
  background: rgba(239, 68, 68, 0.04);
  border: 1px solid rgba(239, 68, 68, 0.15);
}

/* Show egress-off-flow when toggle is off */
.hiw-egress-flow-diagram.egress-off .egress-on-flow {
  display: none;
}

.hiw-egress-flow-diagram.egress-off .egress-off-flow {
  display: flex;
}

.hiw-egress-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  min-width: 90px;
}

.hiw-egress-node svg {
  color: var(--accent);
}

.hiw-egress-node span {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  text-align: center;
  white-space: nowrap;
}

.hiw-egress-node.snat-node {
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.25);
}

.hiw-egress-node.snat-node svg {
  color: var(--accent);
}

.hiw-snat-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  padding: 2px 6px;
  background: rgba(59, 130, 246, 0.15);
  color: var(--accent);
  border-radius: 4px;
}

.hiw-egress-node.packet-node {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.25);
}

.hiw-egress-node.packet-node svg {
  color: #10b981;
}

.hiw-egress-node.warning {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.3);
}

.hiw-egress-node.warning svg {
  color: #ef4444;
}

.hiw-egress-ip-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  padding: 2px 6px;
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border-radius: 4px;
}

.hiw-egress-ip-badge.exposed {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.hiw-egress-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  min-width: 50px;
  height: 20px;
}

.hiw-egress-arrow-line {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.hiw-egress-arrow-line::before,
.hiw-egress-arrow-line::after {
  content: '›';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  font-weight: 300;
  color: var(--muted);
  animation: egress-chevron 1s linear infinite;
}

.hiw-egress-arrow-line::before {
  animation-delay: 0s;
}

.hiw-egress-arrow-line::after {
  animation-delay: 0.33s;
}

/* Green arrows for protected flow */
.egress-on-flow .hiw-egress-arrow-line::before,
.egress-on-flow .hiw-egress-arrow-line::after {
  color: #10b981;
}

/* Red arrows for exposed flow */
.egress-off-flow .hiw-egress-arrow-line::before,
.egress-off-flow .hiw-egress-arrow-line::after {
  color: #ef4444;
}

@keyframes egress-chevron {
  0% {
    left: -10%;
    opacity: 0;
  }

  15% {
    opacity: 1;
  }

  85% {
    opacity: 1;
  }

  100% {
    left: 100%;
    opacity: 0;
  }
}

.hiw-direct-label {
  position: absolute;
  top: -14px;
  font-family: var(--font-mono);
  font-size: 8px;
  color: #ef4444;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.hiw-egress-benefit {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 12px;
  padding: 6px 12px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: #10b981;
}

.hiw-egress-benefit svg {
  color: #10b981;
}

.hiw-egress-warning {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 12px;
  padding: 6px 12px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: #ef4444;
}

.hiw-egress-warning svg {
  color: #ef4444;
}

/* Light theme adjustments for egress section */
/* Light Mode: Flow Diagram Container */
[data-theme="light"] .hiw-flow-container {
  background: rgba(0, 0, 0, 0.02);
  border-color: var(--border);
}

[data-theme="light"] .hiw-flow-node {
  background: rgba(255, 255, 255, 0.95);
  border-color: var(--border);
}

[data-theme="light"] .hiw-flow-node:hover {
  background: rgba(255, 255, 255, 1);
  border-color: var(--accent);
}

/* Light Mode: Forward arrows (blue chevrons) - more visible */
[data-theme="light"] .hiw-arrow-line::before,
[data-theme="light"] .hiw-arrow-line::after {
  color: var(--accent);
  text-shadow: 0 0 4px rgba(37, 99, 235, 0.4);
}

[data-theme="light"] .hiw-egress-section {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .hiw-egress-header {
  border-bottom-color: rgba(59, 130, 246, 0.08);
}

[data-theme="light"] .hiw-egress-header .hiw-egress-toggle {
  background: rgba(59, 130, 246, 0.05);
  border-color: rgba(59, 130, 246, 0.15);
}

[data-theme="light"] .hiw-egress-node {
  background: white;
}

[data-theme="light"] .hiw-egress-flow.egress-on-flow {
  background: rgba(16, 185, 129, 0.03);
  border-color: rgba(16, 185, 129, 0.12);
}

[data-theme="light"] .hiw-egress-flow.egress-off-flow {
  background: rgba(239, 68, 68, 0.03);
  border-color: rgba(239, 68, 68, 0.12);
}

/* Responsive adjustments for egress section */
@media (max-width: 900px) {
  .hiw-egress-section {
    padding: 16px;
  }

  .hiw-egress-header {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }

  .hiw-egress-title {
    flex-wrap: wrap;
    gap: 6px;
  }

  .hiw-egress-subtitle {
    display: block;
    margin-top: 4px;
    margin-left: 24px;
  }

  /* Vertical egress flow for mobile */
  .hiw-egress-flow {
    flex-direction: column !important;
    gap: 0 !important;
    padding: 16px 8px !important;
    align-items: center !important;
  }

  .hiw-egress-node {
    width: 85% !important;
    max-width: 240px !important;
    min-width: unset !important;
    margin: 6px 0 !important;
    z-index: 2 !important;
  }

  /* Vertical egress arrows - matching desktop style */
  .hiw-egress-arrow {
    width: 40px !important;
    height: 50px !important;
    min-width: unset !important;
    margin: 4px 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .hiw-egress-arrow-line {
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    overflow: hidden !important;
  }

  /* Downward animated chevrons - same style as desktop but vertical */
  .hiw-egress-arrow-line::before,
  .hiw-egress-arrow-line::after {
    content: '›' !important;
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) rotate(90deg) !important;
    font-size: 18px !important;
    font-weight: 300 !important;
    animation: egress-chevron-down 1s linear infinite !important;
  }

  .hiw-egress-arrow-line::before {
    animation-delay: 0s !important;
  }

  .hiw-egress-arrow-line::after {
    animation-delay: 0.4s !important;
  }

  /* Preserve green color for ON flow on mobile */
  .egress-on-flow .hiw-egress-arrow-line::before,
  .egress-on-flow .hiw-egress-arrow-line::after {
    color: #10b981 !important;
  }

  /* Preserve red color for OFF flow on mobile */
  .egress-off-flow .hiw-egress-arrow-line::before,
  .egress-off-flow .hiw-egress-arrow-line::after {
    color: #ef4444 !important;
  }

  @keyframes egress-chevron-down {
    0% {
      top: -20%;
      opacity: 0;
    }

    15% {
      opacity: 1;
    }

    85% {
      opacity: 1;
    }

    100% {
      top: 100%;
      opacity: 0;
    }
  }

  .hiw-egress-benefit,
  .hiw-egress-warning {
    margin-left: 0;
    margin-top: 12px;
    width: 90%;
    max-width: 240px;
    justify-content: center;
  }
}

@media (max-width: 600px) {
  .hiw-egress-section {
    padding: 12px;
    margin-top: 16px;
  }

  .hiw-egress-title {
    font-size: 12px;
  }

  .hiw-egress-subtitle {
    font-size: 10px;
  }

  .hiw-egress-toggle-container {
    padding: 6px 10px;
    gap: 6px;
  }

  .hiw-egress-toggle-prefix {
    font-size: 10px;
  }

  .hiw-egress-toggle-container .hiw-toggle-label {
    font-size: 10px;
    min-width: 24px;
  }

  .hiw-egress-node {
    width: 90% !important;
    max-width: 200px !important;
    padding: 8px !important;
  }

  .hiw-egress-node svg {
    width: 16px !important;
    height: 16px !important;
  }

  .hiw-egress-node span {
    font-size: 9px;
  }

  .hiw-snat-badge,
  .hiw-egress-ip-badge {
    font-size: 8px;
    padding: 2px 5px;
  }

  .hiw-egress-arrow {
    height: 40px !important;
    width: 40px !important;
  }

  .hiw-egress-arrow-line::before,
  .hiw-egress-arrow-line::after {
    font-size: 16px !important;
  }

  .hiw-egress-benefit,
  .hiw-egress-warning {
    font-size: 9px;
    padding: 5px 10px;
    width: 85%;
  }
}

.hiw-eip-callout-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(59, 130, 246, 0.1);
  border-radius: 10px;
}

.hiw-eip-callout-icon svg {
  color: var(--accent);
}

.hiw-eip-callout-content {
  flex: 1;
}

.hiw-eip-callout-title {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}

.hiw-eip-callout-text {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  line-height: 1.6;
}

.hiw-eip-callout-text strong {
  color: var(--accent);
  font-weight: 600;
}

/* Light theme */
[data-theme="light"] .hiw-eip-callout {
  background: rgba(59, 130, 246, 0.03);
}

[data-theme="light"] .hiw-hidden-ip {
  background: rgba(0, 0, 0, 0.02);
}

/* Flow Arrows - Moving Chevrons */
.hiw-flow-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-width: 70px;
  flex: 1;
  max-width: 100px;
  height: 28px;
}

.hiw-arrow-line {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

/* Forward moving chevrons (blue, going right) */
.hiw-arrow-line::before,
.hiw-arrow-line::after {
  content: '›';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  font-weight: 300;
  color: var(--accent);
  animation: chevron-forward 1.2s linear infinite;
  text-shadow: 0 0 6px rgba(59, 130, 246, 0.6);
}

.hiw-arrow-line::before {
  animation-delay: 0s;
}

.hiw-arrow-line::after {
  animation-delay: 0.4s;
}

@keyframes chevron-forward {
  0% {
    left: -5%;
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    left: 100%;
    opacity: 0;
  }
}

/* Static arrow head at end */
.hiw-arrow-head {
  display: none;
}

/* Bidirectional arrows */
.hiw-flow-arrow.bidirectional {
  height: 36px;
}

/* Reverse moving chevrons (grey outbound, going left) - TOP row */
.hiw-flow-arrow.bidirectional .hiw-arrow-line.reverse {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.hiw-flow-arrow.bidirectional .hiw-arrow-line.reverse::before,
.hiw-flow-arrow.bidirectional .hiw-arrow-line.reverse::after {
  content: '‹';
  color: rgba(255, 255, 255, 0.4);
  animation: chevron-reverse 1.4s linear infinite;
  text-shadow: none;
  top: calc(50% - 10px);
}

/* Light mode: reverse arrows need darker color to be visible */
[data-theme="light"] .hiw-flow-arrow.bidirectional .hiw-arrow-line.reverse::before,
[data-theme="light"] .hiw-flow-arrow.bidirectional .hiw-arrow-line.reverse::after {
  color: rgba(100, 116, 139, 0.6);
}

.hiw-flow-arrow.bidirectional .hiw-arrow-line.reverse::before {
  animation-delay: 0s;
}

.hiw-flow-arrow.bidirectional .hiw-arrow-line.reverse::after {
  animation-delay: 0.5s;
}

/* Forward chevrons (blue inbound) - BOTTOM row */
.hiw-flow-arrow.bidirectional .hiw-arrow-line:first-child::before,
.hiw-flow-arrow.bidirectional .hiw-arrow-line:first-child::after {
  top: calc(50% + 10px);
}

@keyframes chevron-reverse {
  0% {
    left: 100%;
    opacity: 0;
  }

  10% {
    opacity: 0.8;
  }

  90% {
    opacity: 0.8;
  }

  100% {
    left: -5%;
    opacity: 0;
  }
}

/* Split Arrow with Drop */
.hiw-flow-arrow.split-arrow {
  position: relative;
}

.hiw-arrow-drop {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  z-index: 5;
}

.hiw-flow-arrow.split-arrow.bidirectional .hiw-arrow-drop {
  top: 22px;
}

/* Red falling dots */
.hiw-drop-packet {
  width: 5px;
  height: 5px;
  background: var(--red);
  border-radius: 50%;
  animation: drop-fall 1.4s ease-in infinite;
  opacity: 0;
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.6);
}

.hiw-drop-packet:nth-child(2) {
  animation-delay: 0.45s;
}

@keyframes drop-fall {
  0% {
    transform: translateY(0);
    opacity: 0;
  }

  15% {
    opacity: 0.9;
  }

  75% {
    opacity: 0.7;
  }

  100% {
    transform: translateY(26px);
    opacity: 0;
  }
}

.hiw-drop-icon {
  display: none;
}

.hiw-drop-label {
  font-size: 9px;
  color: var(--red);
  white-space: nowrap;
  opacity: 0.7;
  font-weight: 600;
  letter-spacing: 0.3px;
  margin-top: 4px;
  text-transform: uppercase;
}

.hiw-drop-icon {
  width: 20px;
  height: 20px;
  color: var(--red);
  opacity: 0.7;
}

.hiw-drop-label {
  font-size: 9px;
  color: var(--red);
  white-space: nowrap;
  opacity: 0.8;
}

/* Flow Legend */
.hiw-flow-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.hiw-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}

.hiw-legend-arrow {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 300;
  letter-spacing: -2px;
  min-width: 24px;
  text-align: center;
}

.hiw-legend-arrow.incoming {
  color: var(--accent);
  text-shadow: 0 0 4px rgba(59, 130, 246, 0.5);
}

.hiw-legend-arrow.outbound {
  color: var(--muted);
}

.hiw-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.hiw-legend-dot.dropped {
  background: var(--red);
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* 8-Stage Defense System                                                      */
/* ─────────────────────────────────────────────────────────────────────────── */

.hiw-layers-container {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 24px;
}

.hiw-layers-visual {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.hiw-layer-card {
  background: rgba(8, 10, 14, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  gap: 14px;
  transition: all 0.3s ease;
  position: relative;
}

.hiw-layer-card:hover {
  border-color: rgba(59, 130, 246, 0.3);
  background: rgba(59, 130, 246, 0.02);
  transform: translateX(4px);
}

.hiw-layer-card.highlight {
  background: rgba(59, 130, 246, 0.06);
  border-color: rgba(59, 130, 246, 0.3);
}

.hiw-layer-highlight-badge {
  position: absolute;
  top: -8px;
  right: 12px;
  background: var(--accent);
  color: white;
  font-size: 9px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.hiw-layer-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  background: rgba(59, 130, 246, 0.1);
  padding: 6px 10px;
  border-radius: 8px;
  height: fit-content;
  flex-shrink: 0;
}

.hiw-layer-content h4 {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 6px 0;
}

.hiw-layer-content p {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  line-height: 1.5;
  margin: 0 0 10px 0;
}

.hiw-layer-tag {
  display: inline-block;
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(59, 130, 246, 0.08);
  color: var(--accent);
}

.hiw-layer-tag.fast {
  background: rgba(59, 130, 246, 0.08);
  color: var(--accent);
}

.hiw-layer-tag.reputation {
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
}

.hiw-layer-tag.protocol {
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
}

.hiw-layer-tag.ratelimit {
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
}

.hiw-layer-tag.syncookie {
  background: rgba(59, 130, 246, 0.12);
  color: var(--accent);
}

.hiw-layer-tag.blacklist {
  background: rgba(239, 68, 68, 0.08);
  color: var(--red);
}

.hiw-layer-tag.baseline {
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
}

.hiw-layer-tag.fingerprint {
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
}

/* Layer Stats Sidebar */
.hiw-layers-stats {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hiw-stat-card {
  background: rgba(8, 10, 14, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  text-align: center;
  transition: all 0.3s ease;
}

.hiw-stat-card:hover {
  border-color: rgba(59, 130, 246, 0.3);
  transform: translateY(-2px);
}

.hiw-stat-icon {
  width: 40px;
  height: 40px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(59, 130, 246, 0.1);
  border-radius: 10px;
}

.hiw-stat-icon svg {
  width: 22px;
  height: 22px;
  color: var(--accent);
}

.hiw-stat-value {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  display: block;
}

.hiw-stat-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  margin-top: 4px;
  display: block;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* CONTROL PLANE VS DATA PLANE                                                 */
/* ─────────────────────────────────────────────────────────────────────────── */

.hiw-planes-container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: stretch;
}

.hiw-plane-card {
  background: rgba(8, 10, 14, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all 0.3s ease;
}

.hiw-plane-card:hover {
  border-color: rgba(59, 130, 246, 0.3);
}

.hiw-plane-card.control-plane .hiw-plane-header {
  background: rgba(59, 130, 246, 0.05);
  border-bottom: 1px solid var(--border);
}

.hiw-plane-card.data-plane .hiw-plane-header {
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid var(--border);
}

.hiw-plane-header {
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.hiw-plane-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
}

.hiw-plane-icon svg {
  width: 24px;
  height: 24px;
}

.hiw-plane-card.control-plane .hiw-plane-icon svg {
  color: var(--accent);
}

.hiw-plane-card.data-plane .hiw-plane-icon svg {
  color: var(--text);
}

.hiw-plane-header h3 {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  flex: 1;
}

.hiw-plane-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.hiw-plane-card.control-plane .hiw-plane-badge {
  background: rgba(59, 130, 246, 0.12);
  color: var(--accent);
}

.hiw-plane-card.data-plane .hiw-plane-badge {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}

.hiw-plane-body {
  padding: 20px;
}

/* Control Plane Services */
.hiw-plane-services {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hiw-service-item {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px;
}

.hiw-service-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.hiw-service-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.hiw-service-dot.tensorprox {
  background: var(--accent);
}

.hiw-service-dot.miner {
  background: var(--muted);
}

.hiw-service-port {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 10px;
}

.hiw-service-tasks {
  margin: 0;
  padding: 0 0 0 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  line-height: 1.7;
}

.hiw-service-tasks li {
  margin-bottom: 2px;
}

.hiw-plane-footer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.hiw-plane-stat {
  text-align: center;
}

.hiw-plane-stat-value {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  display: block;
}

.hiw-plane-stat-label {
  font-size: 10px;
  color: var(--muted);
}

/* Planes Connection */
.hiw-planes-connection {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 8px;
}

.hiw-connection-line {
  width: 3px;
  height: 120px;
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.3) 0%, var(--border) 50%, rgba(255, 255, 255, 0.1) 100%);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}

.hiw-connection-pulse {
  position: absolute;
  width: 100%;
  height: 20px;
  background: linear-gradient(180deg, transparent, var(--accent), transparent);
  animation: pulse-vertical 2s ease-in-out infinite;
}

@keyframes pulse-vertical {
  0% {
    top: -20px;
  }

  100% {
    top: 100%;
  }
}

.hiw-connection-label {
  font-size: 10px;
  color: var(--muted);
  text-align: center;
  white-space: nowrap;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  letter-spacing: 0.5px;
}

/* Data Plane Flow */
.hiw-dataplane-flow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 16px;
}

.hiw-dp-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 60px;
}

.hiw-dp-step.highlight {
  background: rgba(59, 130, 246, 0.08);
  padding: 8px 12px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(59, 130, 246, 0.15);
}

.hiw-dp-icon {
  width: 28px;
  height: 28px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hiw-dp-icon svg {
  width: 24px;
  height: 24px;
  color: var(--muted);
}

.hiw-dp-step.highlight .hiw-dp-icon svg {
  color: var(--accent);
}

.hiw-dp-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--text);
}

.hiw-dp-sublabel {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--muted);
}

.hiw-dp-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

.hiw-dp-arrow svg {
  width: 20px;
  height: 20px;
  color: var(--muted);
  opacity: 0.4;
}

/* Data Plane Features */
.hiw-dataplane-features {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hiw-dp-feature {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
}

.hiw-dp-feature svg {
  color: var(--accent);
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* BENEFITS GRID                                                               */
/* ─────────────────────────────────────────────────────────────────────────── */

.hiw-benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.hiw-benefit-card {
  background: rgba(8, 10, 14, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  transition: all 0.3s ease;
}

.hiw-benefit-card:hover {
  border-color: rgba(59, 130, 246, 0.3);
  transform: translateY(-4px);
}

.hiw-benefit-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  margin-bottom: 16px;
}

.hiw-benefit-icon svg {
  width: 26px;
  height: 26px;
}

.hiw-benefit-icon.protection {
  background: rgba(59, 130, 246, 0.1);
}

.hiw-benefit-icon.protection svg {
  color: var(--accent);
}

.hiw-benefit-icon.performance {
  background: rgba(255, 255, 255, 0.05);
}

.hiw-benefit-icon.performance svg {
  color: var(--text);
}

.hiw-benefit-icon.visibility {
  background: rgba(255, 255, 255, 0.05);
}

.hiw-benefit-icon.visibility svg {
  color: var(--muted);
}

.hiw-benefit-icon.automation {
  background: rgba(255, 255, 255, 0.05);
}

.hiw-benefit-icon.automation svg {
  color: var(--muted);
}

.hiw-benefit-card h4 {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 12px 0;
}

.hiw-benefit-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hiw-benefit-list li {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  line-height: 1.6;
  padding-left: 16px;
  position: relative;
  margin-bottom: 6px;
}

.hiw-benefit-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--accent);
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* COMPARISON TABLE                                                            */
/* ─────────────────────────────────────────────────────────────────────────── */

.hiw-comparison-table {
  background: rgba(8, 10, 14, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.hiw-comparison-header {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  background: rgba(59, 130, 246, 0.05);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.hiw-comparison-header>div {
  padding: 14px 16px;
  font-family: var(--font-mono);
}

.hiw-comparison-header .hiw-comparison-feature {
  color: var(--muted);
  font-family: var(--font-mono);
}

.hiw-comparison-header .hiw-comparison-us {
  color: var(--accent);
  text-align: center;
  font-family: var(--font-mono);
}

.hiw-comparison-header .hiw-comparison-them {
  color: var(--muted);
  text-align: center;
  font-family: var(--font-mono);
}

.hiw-comparison-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  border-bottom: 1px solid var(--border);
  transition: background 0.2s ease;
}

.hiw-comparison-row:last-child {
  border-bottom: none;
}

.hiw-comparison-row:hover {
  background: rgba(59, 130, 246, 0.02);
}

.hiw-comparison-row>div {
  padding: 12px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  display: flex;
  align-items: center;
}

.hiw-comparison-row .hiw-comparison-feature {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--text);
}

.hiw-comparison-row .hiw-comparison-us,
.hiw-comparison-row .hiw-comparison-them {
  font-family: var(--font-mono);
  text-transform: none;
  font-weight: 400;
  color: var(--muted);
  justify-content: flex-start;
  gap: 8px;
}

.hiw-check {
  color: var(--accent);
  font-weight: 700;
  font-size: 14px;
}

.hiw-x {
  color: var(--red);
  font-weight: 700;
  font-size: 14px;
  opacity: 0.7;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* CTA SECTION                                                                 */
/* ─────────────────────────────────────────────────────────────────────────── */

.hiw-cta {
  background: rgba(8, 10, 14, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: var(--radius-xl);
  padding: 32px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
}

.hiw-cta-content h3 {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 6px 0;
  letter-spacing: 0.3px;
}

.hiw-cta-content p {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}

.hiw-cta-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  font-size: 14px;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* RESPONSIVE DESIGN                                                           */
/* ─────────────────────────────────────────────────────────────────────────── */

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

  .hiw-layers-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }

  .hiw-planes-container {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .hiw-planes-connection {
    flex-direction: row;
    padding: 16px 0;
  }

  .hiw-connection-line {
    width: 120px;
    height: 3px;
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.3) 0%, var(--border) 50%, rgba(255, 255, 255, 0.1) 100%);
  }

  .hiw-connection-pulse {
    width: 20px;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    animation: pulse-horizontal 2s ease-in-out infinite;
  }

  @keyframes pulse-horizontal {
    0% {
      left: -20px;
    }

    100% {
      left: 100%;
    }
  }

  .hiw-connection-label {
    writing-mode: horizontal-tb;
    transform: none;
  }

  .hiw-benefits-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .hiw-hero {
    padding: 32px 24px;
    text-align: center;
  }

  .hiw-hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .hiw-badge {
    margin: 0 auto 16px;
  }

  .hiw-title {
    font-size: 22px;
    text-align: center;
    line-height: 1.4;
  }

  .hiw-subtitle {
    text-align: center;
    max-width: 100%;
  }

  /* Section titles centered on mobile */
  .hiw-section {
    padding: 0 8px;
  }

  .hiw-section-title {
    justify-content: center;
    text-align: center;
    font-size: 12px;
    margin-bottom: 16px;
  }

  .hiw-section-desc {
    text-align: center;
  }

  /* Vertical flow diagram for mobile */
  .hiw-flow-diagram {
    flex-direction: column !important;
    gap: 0 !important;
    padding: 20px 0 !important;
    align-items: center !important;
  }

  /* Add spacing to nodes */
  .hiw-flow-node {
    width: 85% !important;
    max-width: 300px !important;
    min-width: unset !important;
    z-index: 2;
    margin: 8px 0 !important;
  }

  /* Vertical arrows with chevrons */
  .hiw-flow-arrow {
    width: 80px !important;
    height: 60px !important;
    min-width: unset !important;
    max-width: unset !important;
    background: transparent !important;
    position: relative !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 16px !important;
    margin: 0 !important;
  }

  .hiw-flow-arrow.bidirectional {
    height: 60px !important;
    width: 90px !important;
  }

  /* Hide the bar background, use chevrons only */
  .hiw-flow-arrow .hiw-arrow-line {
    width: 30px !important;
    height: 100% !important;
    background: transparent !important;
    position: relative !important;
    overflow: visible !important;
  }

  /* Animated chevrons going DOWN (inbound - blue) */
  .hiw-flow-arrow .hiw-arrow-line::before,
  .hiw-flow-arrow .hiw-arrow-line::after {
    content: '▼' !important;
    position: absolute !important;
    left: 50% !important;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    border-radius: 0 !important;
    transform: translateX(-50%) !important;
    animation: mobile-chevron-down 1.2s linear infinite !important;
    box-shadow: none !important;
    font-size: 14px !important;
    color: var(--accent) !important;
    text-shadow: 0 0 8px rgba(59, 130, 246, 0.6) !important;
  }

  .hiw-flow-arrow .hiw-arrow-line::after {
    animation-delay: 0.4s !important;
  }

  @keyframes mobile-chevron-down {
    0% {
      top: -10px;
      opacity: 0;
    }

    15% {
      opacity: 1;
    }

    85% {
      opacity: 1;
    }

    100% {
      top: calc(100% + 10px);
      opacity: 0;
    }
  }

  /* Reverse chevrons (outbound - going UP - grey) */
  .hiw-flow-arrow.bidirectional .hiw-arrow-line.reverse {
    width: 30px !important;
    height: 100% !important;
    background: transparent !important;
    position: relative !important;
  }

  .hiw-flow-arrow.bidirectional .hiw-arrow-line.reverse::before,
  .hiw-flow-arrow.bidirectional .hiw-arrow-line.reverse::after {
    content: '▲' !important;
    position: absolute !important;
    left: 50% !important;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    border-radius: 0 !important;
    transform: translateX(-50%) !important;
    animation: mobile-chevron-up 1.4s linear infinite !important;
    box-shadow: none !important;
    top: auto !important;
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.5) !important;
    text-shadow: none !important;
  }

  .hiw-flow-arrow.bidirectional .hiw-arrow-line.reverse::after {
    animation-delay: 0.5s !important;
  }

  @keyframes mobile-chevron-up {
    0% {
      bottom: -10px;
      opacity: 0;
    }

    15% {
      opacity: 0.8;
    }

    85% {
      opacity: 0.8;
    }

    100% {
      bottom: calc(100% + 10px);
      opacity: 0;
    }
  }

  /* Arrow heads hidden on mobile */
  .hiw-flow-arrow .hiw-arrow-head,
  .hiw-flow-arrow .hiw-arrow-head.reverse {
    display: none !important;
  }

  /* Blocked drops for mobile - beside the arrows */
  .hiw-flow-arrow.split-arrow .hiw-arrow-drop {
    position: absolute !important;
    top: 50% !important;
    left: calc(100% + 8px) !important;
    transform: translateY(-50%) !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .hiw-flow-arrow.split-arrow .hiw-drop-packet {
    animation: mobile-drop-pulse 1s ease-in-out infinite !important;
  }

  .hiw-flow-arrow.split-arrow .hiw-drop-packet:nth-child(2) {
    animation-delay: 0.3s !important;
  }

  @keyframes mobile-drop-pulse {

    0%,
    100% {
      opacity: 0.4;
      transform: scale(0.9);
    }

    50% {
      opacity: 1;
      transform: scale(1.1);
    }
  }

  .hiw-layers-visual {
    grid-template-columns: 1fr;
  }

  .hiw-layers-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .hiw-comparison-table {
    overflow-x: auto;
  }

  .hiw-comparison-header,
  .hiw-comparison-row {
    min-width: 600px;
  }

  /* Callouts stack */
  .hiw-callouts-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .view[data-view="how-it-works"] {
    padding: 0 8px;
  }

  .hiw-hero {
    padding: 20px 16px;
    text-align: center;
  }

  .hiw-badge {
    font-size: 10px;
    padding: 6px 12px;
    gap: 6px;
  }

  .hiw-title {
    font-size: 17px;
    text-align: center;
    line-height: 1.4;
  }

  .hiw-subtitle {
    font-size: 12px;
    text-align: center;
    line-height: 1.6;
  }

  .hiw-flow-container {
    padding: 15px 11px;
  }

  .hiw-flow-node {
    width: 92%;
    max-width: 280px;
    padding: 16px 14px;
  }

  .hiw-node-icon {
    width: 40px;
    height: 40px;
  }

  .hiw-node-label {
    font-size: 13px;
  }

  .hiw-node-desc {
    font-size: 11px;
  }

  .hiw-node-badge {
    font-size: 8px;
    padding: 3px 10px;
  }

  .hiw-eip-badge,
  .hiw-hidden-ip-badge {
    font-size: 10px;
    padding: 6px 10px;
  }

  .hiw-node-stats {
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .hiw-node-stats .stat-item {
    font-size: 11px;
  }

  .hiw-node-stats .stat-value {
    font-size: 12px;
  }

  .hiw-node-tag {
    font-size: 10px;
    padding: 4px 10px;
  }

  /* Smaller arrows on small mobile */
  .hiw-flow-arrow {
    height: 50px !important;
    width: 70px !important;
  }

  .hiw-flow-arrow.bidirectional {
    height: 50px !important;
    width: 80px !important;
    gap: 12px !important;
  }

  .hiw-flow-arrow .hiw-arrow-line::before,
  .hiw-flow-arrow .hiw-arrow-line::after {
    font-size: 12px !important;
  }

  .hiw-flow-arrow.bidirectional .hiw-arrow-line.reverse::before,
  .hiw-flow-arrow.bidirectional .hiw-arrow-line.reverse::after {
    font-size: 10px !important;
  }

  .hiw-flow-node {
    margin: 6px 0 !important;
  }

  .hiw-drop-label {
    font-size: 9px;
  }

  /* Callouts */
  .hiw-eip-callout {
    padding: 14px;
    gap: 12px;
  }

  .hiw-eip-callout-icon {
    width: 32px;
    height: 32px;
  }

  .hiw-eip-callout-icon svg {
    width: 16px;
    height: 16px;
  }

  .hiw-eip-callout-title {
    font-size: 12px;
    flex-wrap: wrap;
    gap: 8px;
  }

  .hiw-eip-callout-text {
    font-size: 11px;
    line-height: 1.5;
  }

  .hiw-egress-toggle {
    margin-left: 0;
    margin-top: 6px;
  }

  .hiw-toggle-slider {
    width: 34px;
    height: 18px;
  }

  .hiw-toggle-slider::before {
    width: 14px;
    height: 14px;
  }

  .hiw-egress-toggle input:checked+.hiw-toggle-slider::before {
    left: 18px;
  }

  .hiw-benefits-grid {
    grid-template-columns: 1fr;
  }

  .hiw-layers-stats {
    grid-template-columns: 1fr 1fr;
  }

  .hiw-cta {
    flex-direction: column;
    text-align: center;
    gap: 20px;
    padding: 24px 16px;
  }

  .hiw-cta-btn {
    width: 100%;
    justify-content: center;
  }
}

/* Light Theme Adjustments */
[data-theme="light"] .hiw-hero {
  background: rgba(255, 255, 255, 0.4);
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .hiw-flow-container {
  background: rgba(255, 255, 255, 0.6);
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .hiw-flow-node {
  background: rgba(255, 255, 255, 0.5);
}

[data-theme="light"] .hiw-flow-node:hover {
  background: rgba(255, 255, 255, 0.7);
}

[data-theme="light"] .hiw-layer-card {
  background: rgba(255, 255, 255, 0.5);
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .hiw-layer-card:hover {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(59, 130, 246, 0.3);
}

[data-theme="light"] .hiw-layer-card.highlight {
  background: rgba(255, 255, 255, 0.7);
}

[data-theme="light"] .hiw-stat-card,
[data-theme="light"] .hiw-plane-card,
[data-theme="light"] .hiw-benefit-card,
[data-theme="light"] .hiw-comparison-table {
  background: rgba(255, 255, 255, 0.5);
}

[data-theme="light"] .hiw-cta {
  background: rgba(255, 255, 255, 0.5);
}

/* ============================================= */
/* Developer API Documentation Styles */
/* ============================================= */

/* API Hero Section */
.api-hero {
  position: relative;
  padding: 60px 40px;
  margin: 0 0 32px 0;
  overflow: hidden;
  background: linear-gradient(135deg,
      rgba(15, 23, 42, 0.95) 0%,
      rgba(30, 41, 59, 0.9) 50%,
      rgba(15, 23, 42, 0.95) 100%);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 16px;
}

.api-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.api-grid-pattern {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(59, 130, 246, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59, 130, 246, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
}

.api-gradient-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.4;
}

.api-orb-1 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.5), transparent);
  top: -100px;
  right: -100px;
}

.api-orb-2 {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.3), transparent);
  bottom: -100px;
  left: -50px;
}

.api-hero-content {
  position: relative;
  z-index: 1;
  max-width: 700px;
}

.api-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 20px;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  margin-bottom: 24px;
}

.api-title {
  font-family: 'Michroma', sans-serif;
  font-size: 48px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 16px 0;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.api-subtitle {
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0 0 32px 0;
  max-width: 550px;
}

.api-quick-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.api-quick-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* API Sections */
.api-section {
  margin-bottom: 48px;
  padding: 28px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--border);
  background: rgba(8, 10, 14, 0.45);
  border-radius: 16px;
  border: 1px solid var(--border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-lg);
}

.api-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.api-section-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
}

.api-section-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 12px;
  color: var(--accent);
  flex-shrink: 0;
}

.api-section-title {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 4px 0;
}

.api-section-desc {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--muted);
  margin: 0;
}

/* API Key Card */
.api-key-card {
  background: rgba(10, 10, 10, 0.4);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
}

.api-key-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.api-key-label {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.api-key-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--green);
}

.api-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

.api-key-display {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 16px;
}

.api-key-value {
  flex: 1;
  font-family: 'JetBrains Mono', monospace;
  font-size: 15px;
  color: var(--text);
  letter-spacing: 0.02em;
  word-break: break-all;
}

.api-key-actions {
  display: flex;
  gap: 8px;
}

.api-key-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s ease;
}

.api-key-btn:hover {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.3);
  color: var(--accent);
}

.api-key-btn.danger:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
  color: var(--red);
}

.api-key-warning {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--yellow);
  padding: 12px 16px;
  background: rgba(251, 191, 36, 0.1);
  border-radius: 8px;
}

/* Base URL Card */
.api-base-url-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 24px;
}

.api-base-url {
  flex: 1;
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px;
  color: var(--accent);
  font-weight: 500;
}

.api-copy-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.api-copy-btn:hover {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.3);
  color: var(--accent);
}

.api-copy-btn.compact {
  padding: 8px 12px;
}

.api-copy-btn.copied {
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.3);
  color: var(--green);
}

/* Rate Limits */
.api-rate-limits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.api-rate-card {
  background: rgba(10, 10, 10, 0.4);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  transition: all 0.2s ease;
}

.api-rate-card:hover {
  border-color: rgba(59, 130, 246, 0.3);
  transform: translateY(-2px);
}

.api-rate-value {
  font-size: 36px;
  font-weight: 700;
  color: var(--accent);
  font-family: 'JetBrains Mono', monospace;
  margin-bottom: 4px;
}

.api-rate-label {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text);
  margin-bottom: 8px;
}

.api-rate-type {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Rate Limits Table (New Operation-Specific) */
.api-rate-table-container {
  overflow-x: auto;
  margin-bottom: 16px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 12px;
  border: 1px solid var(--border);
}

.api-rate-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 13px;
}

.api-rate-table th,
.api-rate-table td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.api-rate-table th {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  background: rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .api-rate-table-container {
  background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .api-rate-table th {
  background: rgba(0, 0, 0, 0.05);
}

.api-rate-table tbody tr {
  transition: background 0.2s ease;
}

.api-rate-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.03);
}

.api-rate-table td:nth-child(2),
.api-rate-table td:nth-child(3),
.api-rate-table td:nth-child(4) {
  font-weight: 600;
  color: var(--text);
}

.api-rate-table td:last-child {
  color: var(--muted);
  font-size: 12px;
}

/* Rate Badges - Clean monochromatic with subtle left accent */
.rate-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
  position: relative;
  padding-left: 16px;
}

/* Left accent bar */
.rate-badge::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 4px 0 0 4px;
  background: rgba(255, 255, 255, 0.2);
}

/* Varying intensity via left bar opacity */
.rate-badge.read::before {
  background: rgba(255, 255, 255, 0.15);
}

.rate-badge.write::before {
  background: rgba(255, 255, 255, 0.25);
}

.rate-badge.delete::before {
  background: rgba(255, 255, 255, 0.35);
}

.rate-badge.sensitive::before {
  background: rgba(255, 255, 255, 0.45);
}

/* Light mode rate badges */
[data-theme="light"] .rate-badge {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.65);
}

[data-theme="light"] .rate-badge::before {
  background: rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .rate-badge.read::before {
  background: rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .rate-badge.write::before {
  background: rgba(0, 0, 0, 0.20);
}

[data-theme="light"] .rate-badge.delete::before {
  background: rgba(0, 0, 0, 0.28);
}

[data-theme="light"] .rate-badge.sensitive::before {
  background: rgba(0, 0, 0, 0.36);
}

/* Rate Note */
.api-rate-note {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text);
}

.api-rate-note svg {
  color: var(--accent);
  flex-shrink: 0;
}

.api-rate-note code {
  background: rgba(0, 0, 0, 0.2);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
}

/* Light mode adjustments for rate table */
[data-theme="light"] .api-rate-table tbody tr:hover {
  background: rgba(0, 0, 0, 0.02);
}

[data-theme="light"] .api-rate-note {
  background: rgba(59, 130, 246, 0.06);
}

[data-theme="light"] .api-rate-note code {
  background: rgba(0, 0, 0, 0.06);
}

/* API Endpoint Groups */
.api-endpoint-group {
  margin-bottom: 32px;
}

.api-group-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 16px 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.api-group-title svg {
  color: var(--muted);
}

/* API Endpoints */
.api-endpoint {
  background: rgba(10, 10, 10, 0.4);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;
  transition: all 0.2s ease;
}

.api-endpoint:hover {
  border-color: rgba(255, 255, 255, 0.1);
}

.api-endpoint-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.api-endpoint-header:hover {
  background: rgba(255, 255, 255, 0.02);
}

.api-endpoint-method {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.api-endpoint-method.get {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.api-endpoint-method.post {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.api-endpoint-method.put {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.3);
}

.api-endpoint-method.delete {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.api-endpoint-path {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
}

.api-endpoint-desc {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
}

.api-endpoint-chevron {
  color: var(--muted);
  transition: transform 0.2s ease;
}

.api-endpoint.open .api-endpoint-chevron {
  transform: rotate(180deg);
}

.api-endpoint-body {
  display: none;
  padding: 0 20px 20px 20px;
  border-top: 1px solid var(--border);
}

.api-endpoint.open .api-endpoint-body {
  display: block;
}

/* API Parameters */
.api-params {
  margin-bottom: 20px;
}

.api-params-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 16px 0 12px 0;
}

.api-param {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.api-param:last-child {
  border-bottom: none;
}

.api-param-name {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--accent);
  background: rgba(59, 130, 246, 0.1);
  padding: 2px 8px;
  border-radius: 4px;
}

.api-param-type {
  font-size: 12px;
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
}

.api-param-required {
  font-size: 10px;
  font-weight: 600;
  color: var(--red);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.api-param-desc {
  width: 100%;
  font-size: 13px;
  color: var(--muted);
  margin: 4px 0 0 0;
}

/* API Code Examples */
.api-code-example {
  margin-top: 16px;
}

.api-code-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
}

.api-code-title {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.api-response-status {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
}

.api-response-status.success {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.api-response-status.accepted {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}

.api-response-status.error {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.api-code-block {
  margin: 0;
  padding: 20px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 10px 10px;
  overflow-x: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
}

.api-code-block code {
  background: none;
  padding: 0;
}

/* Code Syntax Highlighting */
.code-key {
  color: #7dd3fc;
}

.code-string {
  color: #86efac;
}

.code-number {
  color: #fbbf24;
}

.code-boolean {
  color: #f472b6;
}

.code-comment {
  color: #6b7280;
  font-style: italic;
}

.code-keyword {
  color: #c084fc;
}

/* API Response Examples */
.api-response-example {
  margin-top: 16px;
}

/* Error Codes Table */
.api-error-codes {
  background: rgba(10, 10, 10, 0.4);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 24px;
}

.api-error-row {
  display: grid;
  grid-template-columns: 80px 160px 1fr;
  gap: 16px;
  padding: 16px 20px;
  align-items: center;
  border-bottom: 1px solid var(--border);
}

.api-error-row:last-child {
  border-bottom: none;
}

.api-error-row:hover {
  background: rgba(255, 255, 255, 0.02);
}

.api-error-code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
}

.api-error-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

.api-error-desc {
  font-size: 13px;
  color: var(--muted);
}

/* SDK Tabs */
.api-sdk-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  margin-bottom: 16px;
  width: fit-content;
}

.api-sdk-tab {
  padding: 10px 20px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s ease;
}

.api-sdk-tab:hover {
  color: var(--text);
}

.api-sdk-tab.active {
  background: var(--accent);
  color: white;
}

.api-sdk-content {
  position: relative;
}

.api-sdk-panel {
  display: none;
}

.api-sdk-panel.active {
  display: block;
}

.api-sdk-panel .api-code-block {
  border-radius: 10px;
  border: 1px solid var(--border);
}

/* Responsive */
@media (max-width: 768px) {
  .api-hero {
    padding: 40px 24px;
    margin: 0 0 24px 0;
    border-radius: 12px;
  }

  .api-title {
    font-size: 28px;
  }

  .api-subtitle {
    font-size: 14px;
  }

  .api-section {
    margin-bottom: 32px;
    padding-bottom: 32px;
  }

  .api-section-header {
    gap: 12px;
  }

  .api-section-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 10px;
  }

  .api-section-icon svg {
    width: 20px;
    height: 20px;
  }

  .api-section-title {
    font-size: 18px;
  }

  .api-section-desc {
    font-size: 12px;
  }

  .api-rate-limits {
    grid-template-columns: 1fr;
  }

  .api-endpoint-header {
    flex-wrap: wrap;
    padding: 12px 16px;
    gap: 10px;
  }

  .api-endpoint-desc {
    width: 100%;
    margin-top: 4px;
    font-size: 12px;
  }

  .api-endpoint-path {
    font-size: 12px;
  }

  .api-error-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .api-key-display {
    flex-direction: column;
    align-items: stretch;
  }

  .api-key-actions {
    justify-content: flex-end;
  }

  .api-sdk-tabs {
    width: 100%;
    overflow-x: auto;
  }

  /* Base URL Card - Keep horizontal but allow URL to wrap */
  .api-base-url-card {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 16px;
  }

  .api-base-url {
    font-size: 11px;
    word-break: break-all;
    flex: 1;
    min-width: 0;
  }

  .api-copy-btn.compact {
    flex-shrink: 0;
  }

  .api-group-title {
    font-size: 15px;
  }

  .api-rate-card {
    padding: 16px;
  }

  .api-rate-value {
    font-size: 28px;
  }

  .api-rate-label {
    font-size: 11px;
  }
}

/* Extra small screens (480px and below) */
@media (max-width: 480px) {
  .api-hero {
    padding: 28px 16px;
    margin: 0 0 20px 0;
  }

  .api-title {
    font-size: 22px;
  }

  .api-subtitle {
    font-size: 12px;
  }

  .api-section {
    margin-bottom: 24px;
    padding-bottom: 24px;
  }

  .api-section-header {
    gap: 10px;
  }

  .api-section-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 8px;
  }

  .api-section-icon svg {
    width: 18px;
    height: 18px;
  }

  .api-section-title {
    font-size: 16px;
  }

  .api-section-desc {
    font-size: 11px;
    line-height: 1.4;
  }

  /* Base URL Card - Still horizontal */
  .api-base-url-card {
    padding: 12px 14px;
    gap: 10px;
    border-radius: 10px;
  }

  .api-base-url {
    font-size: 10px;
    letter-spacing: -0.2px;
  }

  .api-copy-btn.compact {
    padding: 6px 8px;
    min-width: 32px;
  }

  .api-copy-btn.compact svg {
    width: 12px;
    height: 12px;
  }

  .api-endpoint-header {
    padding: 10px 12px;
    gap: 8px;
  }

  .api-endpoint-method {
    font-size: 9px;
    padding: 3px 6px;
  }

  .api-endpoint-path {
    font-size: 11px;
  }

  .api-endpoint-desc {
    font-size: 11px;
  }

  .api-group-title {
    font-size: 14px;
  }

  .api-key-card {
    padding: 16px;
  }

  .api-key-status {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .api-rate-card {
    padding: 14px;
  }

  .api-rate-value {
    font-size: 24px;
  }

  .api-rate-label {
    font-size: 10px;
  }

  .api-code-block {
    font-size: 10px;
  }

  .api-params-title {
    font-size: 12px;
  }

  .api-param-name {
    font-size: 11px;
  }

  .api-param-type {
    font-size: 9px;
  }

  .api-param-desc {
    font-size: 11px;
  }
}

/* Light Theme */
[data-theme="light"] .api-hero {
  background: rgba(255, 255, 255, 0.95);
  border-color: var(--border);
}

[data-theme="light"] .api-section {
  background: rgba(255, 255, 255, 0.45);
}

[data-theme="light"] .api-key-card,
[data-theme="light"] .api-rate-card,
[data-theme="light"] .api-endpoint,
[data-theme="light"] .api-error-codes {
  background: rgba(255, 255, 255, 0.4);
}

[data-theme="light"] .api-key-display,
[data-theme="light"] .api-base-url-card,
[data-theme="light"] .api-code-block {
  background: rgba(0, 0, 0, 0.02);
}

[data-theme="light"] .api-code-header {
  background: rgba(0, 0, 0, 0.04);
}

/* Light Mode: API Hero - Clean white with subtle grid */
[data-theme="light"] .api-grid-pattern {
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px);
}

/* Hide blue orbs in light mode - keep it clean white */
[data-theme="light"] .api-gradient-orb {
  display: none;
}

[data-theme="light"] .api-badge {
  background: rgba(37, 99, 235, 0.06);
  border-color: rgba(37, 99, 235, 0.15);
}

/* Light Mode: SDK Tabs - Better contrast */
[data-theme="light"] .api-sdk-tabs {
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid var(--border);
}

[data-theme="light"] .api-sdk-tab {
  color: #475569;
  font-weight: 500;
}

[data-theme="light"] .api-sdk-tab:hover {
  color: #1e293b;
  background: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .api-sdk-tab.active {
  background: var(--accent);
  color: #ffffff;
  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
}

/* Light Mode: API Key Buttons */
[data-theme="light"] .api-key-btn {
  background: rgba(0, 0, 0, 0.03);
  border-color: var(--border);
  color: #64748b;
}

[data-theme="light"] .api-key-btn:hover {
  background: rgba(37, 99, 235, 0.08);
  border-color: rgba(37, 99, 235, 0.2);
  color: var(--accent);
}

[data-theme="light"] .api-copy-btn {
  background: rgba(0, 0, 0, 0.03);
  border-color: var(--border);
  color: #64748b;
}

[data-theme="light"] .api-copy-btn:hover {
  background: rgba(37, 99, 235, 0.08);
  border-color: rgba(37, 99, 235, 0.2);
  color: var(--accent);
}

/* ======================================
   LANDING PAGE STYLES
   ====================================== */

.landing-page .landing-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
}

.landing-page .landing-content-centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 800px;
  padding: 40px 20px;
}

.landing-page .auth-brand-header {
  margin-bottom: 48px;
}

.landing-page h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.1;
  margin-bottom: 16px;
}

.landing-page h2 {
  font-size: clamp(1.2rem, 3vw, 1.8rem);
  margin-bottom: 40px;
}

.landing-page .auth-features {
  justify-content: center;
  margin-bottom: 60px;
}

.landing-page .support-badge {
  margin-bottom: 24px;
}

/* Sign In button fixed to right edge */
.landing-signin-btn {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  text-decoration: none;
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .landing-page .landing-content-centered {
    padding: 20px;
  }

  .landing-page .auth-brand-header {
    margin-bottom: 32px;
  }

  .landing-page h1 {
    font-size: 1.8rem;
  }

  .landing-page h2 {
    font-size: 1.1rem;
    margin-bottom: 24px;
  }

  .landing-page .auth-features {
    margin-bottom: 40px;
  }

  .landing-signin-btn {
    bottom: 24px;
    right: 24px;
    top: auto;
    transform: none;
  }
}

/* ================================================
   UNIFIED AUTH EXPERIENCE - Hero CTAs & Tabs
   ================================================ */

/* Hero CTA Container */
.hero-cta-container {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  gap: 20px;
  margin-top: 52px;
  margin-bottom: 52px;
}

/* Base Hero CTA Button - Refined & elegant primary action */
.hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 32px;
  height: 48px;
  font-family: 'Michroma', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  border: none;
  outline: none;
  transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  box-sizing: border-box;
}

.hero-cta .hero-cta-text {
  text-shadow: 0 0 30px rgba(255, 255, 255, 0.4),
    0 0 60px rgba(59, 130, 246, 0.3);
  transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  animation: ctaTextPulse 3s ease-in-out infinite;
}

@keyframes ctaTextPulse {

  0%,
  100% {
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.4),
      0 0 60px rgba(59, 130, 246, 0.3);
  }

  50% {
    text-shadow: 0 0 40px rgba(255, 255, 255, 0.6),
      0 0 80px rgba(59, 130, 246, 0.5);
  }
}

.hero-cta .hero-cta-text {
  position: relative;
  z-index: 2;
}

/* ========== GET STARTED - Refined futuristic hero button ========== */
.hero-cta-primary {
  background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 30%, #3b82f6 70%, #2563eb 100%);
  color: #fff;
  border: none;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  position: relative;
  box-shadow: 0 6px 24px -6px rgba(59, 130, 246, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.1) inset,
    0 0 40px rgba(59, 130, 246, 0.2);
  animation: ctaGlow 3s ease-in-out infinite;
}

@keyframes ctaGlow {

  0%,
  100% {
    box-shadow: 0 6px 24px -6px rgba(59, 130, 246, 0.5),
      0 0 0 1px rgba(255, 255, 255, 0.1) inset,
      0 0 40px rgba(59, 130, 246, 0.2);
  }

  50% {
    box-shadow: 0 8px 32px -6px rgba(59, 130, 246, 0.6),
      0 0 0 1px rgba(255, 255, 255, 0.12) inset,
      0 0 50px rgba(59, 130, 246, 0.3);
  }
}

/* Inner highlight edge */
.hero-cta-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, transparent 50%);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  pointer-events: none;
}

/* Shimmer sweep effect */
.hero-cta-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.12) 50%,
      transparent 100%);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  animation: ctaShimmer 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes ctaShimmer {

  0%,
  100% {
    left: -100%;
  }

  50%,
  60% {
    left: 150%;
  }
}

.hero-cta-primary .hero-cta-text {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(255, 255, 255, 0.3);
}

.hero-cta-primary:hover {
  background: linear-gradient(135deg, #93c5fd 0%, #60a5fa 30%, #3b82f6 70%, #2563eb 100%);
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 12px 36px -6px rgba(59, 130, 246, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.2) inset,
    0 0 60px rgba(59, 130, 246, 0.35);
  animation: none;
}

.hero-cta-primary:hover .hero-cta-text {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3),
    0 0 40px rgba(255, 255, 255, 0.8);
}

.hero-cta-primary:active {
  transform: translateY(-1px) scale(1.01);
  box-shadow: 0 8px 24px -4px rgba(59, 130, 246, 0.5);
}

/* ========== SIGN IN - Right Edge Button (mirrors Back button) - Balanced & elegant ========== */
.slide-signin-btn {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%) translateX(20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: transparent;
  border: none;
  border-left: 1px solid rgba(59, 130, 246, 0.45);
  border-radius: 0;
  color: var(--accent);
  cursor: pointer;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.3s ease,
    border-color 0.3s ease;
}

.slide-signin-btn.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

.slide-signin-btn:hover {
  background: rgba(59, 130, 246, 0.08);
  border-left-color: var(--accent);
}

.slide-signin-text {
  font-family: 'Michroma', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text);
  transition: all 0.3s ease;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.35);
}

.slide-signin-btn:hover .slide-signin-text {
  color: var(--accent);
  text-shadow: 0 0 36px rgba(59, 130, 246, 0.9);
}

.slide-signin-arrow {
  width: 18px;
  height: 18px;
  color: var(--accent);
  filter: drop-shadow(0 0 6px rgba(59, 130, 246, 0.5));
  transition: transform 0.3s ease;
  animation: arrowPulseSignin 2.5s ease-in-out infinite;
}

.slide-signin-btn:hover .slide-signin-arrow {
  transform: translateX(3px);
  animation: none;
}

@keyframes arrowPulseSignin {

  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(3px);
  }
}


/* Light theme for Sign In edge button */
[data-theme="light"] .slide-signin-btn {
  background: rgba(255, 255, 255, 0.8);
  border-left-color: rgba(37, 99, 235, 0.3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .slide-signin-btn:hover {
  background: rgba(255, 255, 255, 0.95);
  border-left-color: var(--accent);
}

[data-theme="light"] .slide-signin-text {
  color: rgba(0, 0, 0, 0.7);
  text-shadow: none;
}

[data-theme="light"] .slide-signin-btn:hover .slide-signin-text {
  color: var(--accent);
}

[data-theme="light"] .slide-signin-arrow {
  filter: drop-shadow(0 0 4px rgba(37, 99, 235, 0.4));
}

/* Mobile/Tablet Sign In button - vertical text like Back button */
@media (max-width: 1023px) {
  .slide-signin-btn {
    position: fixed;
    right: 0;
    left: auto;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%) translateX(10px);
    flex-direction: column;
    padding: 18px 14px;
    background: rgba(8, 10, 14, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: none;
    border-left: 1px solid rgba(59, 130, 246, 0.45);
    border-radius: 0;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.25), 0 0 16px rgba(59, 130, 246, 0.12);
    gap: 11px;
  }

  .slide-signin-btn.visible {
    transform: translateY(-50%) translateX(0);
  }

  .slide-signin-arrow {
    width: 18px;
    height: 18px;
  }

  .slide-signin-text {
    font-family: 'Michroma', sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 2.1px;
    text-transform: uppercase;
    color: var(--text);
    writing-mode: vertical-rl;
  }
}

/* Small mobile adjustments for Sign In */
@media (max-width: 374px) {
  .slide-signin-btn {
    padding: 14px 11px;
    gap: 8px;
  }

  .slide-signin-text {
    font-size: 9px;
    letter-spacing: 1.8px;
  }

  .slide-signin-arrow {
    width: 15px;
    height: 15px;
  }
}

/* Light theme mobile Sign In button */
@media (max-width: 1023px) {
  [data-theme="light"] .slide-signin-btn {
    background: rgba(255, 255, 255, 0.85);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.1), 0 0 20px rgba(59, 130, 246, 0.1);
  }

  [data-theme="light"] .slide-signin-btn:hover {
    background: rgba(255, 255, 255, 0.95);
  }
}

/* ========== SIGN IN - Responsive Scaling for Larger Screens ========== */

/* Medium Desktop (1280px - 1439px) */
@media (min-width: 1280px) and (max-width: 1439px) {
  .slide-signin-btn {
    gap: 10px;
    padding: 15px 16px;
  }

  .slide-signin-text {
    font-size: 11px;
    letter-spacing: 3.2px;
  }

  .slide-signin-arrow {
    width: 18px;
    height: 18px;
  }
}

/* Large Desktop (1440px - 1919px) */
@media (min-width: 1440px) and (max-width: 1919px) {
  .slide-signin-btn {
    gap: 11px;
    padding: 16px 17px;
  }

  .slide-signin-text {
    font-size: 12px;
    letter-spacing: 3.5px;
  }

  .slide-signin-arrow {
    width: 19px;
    height: 19px;
  }
}

/* Ultra-wide / 4K (1920px+) */
@media (min-width: 1920px) {
  .slide-signin-btn {
    gap: 12px;
    padding: 18px 18px;
  }

  .slide-signin-text {
    font-size: 13px;
    letter-spacing: 3.8px;
  }

  .slide-signin-arrow {
    width: 20px;
    height: 20px;
  }
}

/* ========== CTA ARROW ========== */
.hero-cta-arrow {
  width: 16px;
  height: 16px;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.3));
  animation: ctaArrowPulse 2.5s ease-in-out infinite;
}

@keyframes ctaArrowPulse {

  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(3px);
  }
}

.hero-cta:hover .hero-cta-arrow {
  transform: translateX(4px);
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5));
  animation: none;
}


/* ========== LIGHT THEME ========== */
[data-theme="light"] .hero-cta-primary {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #1d4ed8 100%);
  border-color: transparent;
  box-shadow: 0 8px 32px -8px rgba(37, 99, 235, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.2) inset,
    0 0 40px rgba(37, 99, 235, 0.2);
}

[data-theme="light"] .hero-cta-primary:hover {
  background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 50%, #2563eb 100%);
  border-color: transparent;
  box-shadow: 0 16px 48px -8px rgba(37, 99, 235, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.3) inset,
    0 0 60px rgba(37, 99, 235, 0.35);
}

[data-theme="light"] .hero-cta .hero-cta-text {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .hero-cta-arrow {
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.5));
}


/* ========== RESPONSIVE - Perfect scaling across all devices ========== */

/* Small Mobile (320px - 374px) */
@media (max-width: 374px) {
  .hero-cta-container {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
    margin-bottom: 24px;
  }

  .hero-cta {
    height: 40px;
    padding: 10px 22px;
    font-size: 9px;
    letter-spacing: 1.8px;
    gap: 7px;
  }

  .hero-cta-primary {
    clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  }

  .hero-cta-primary::before,
  .hero-cta-primary::after {
    clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  }

  .hero-cta-arrow {
    width: 12px;
    height: 12px;
  }
}

/* Mobile (375px - 479px) */
@media (min-width: 375px) and (max-width: 479px) {
  .hero-cta-container {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 28px;
    margin-bottom: 28px;
  }

  .hero-cta {
    height: 42px;
    padding: 11px 26px;
    font-size: 10px;
    letter-spacing: 2px;
    gap: 8px;
  }

  .hero-cta-primary {
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  }

  .hero-cta-primary::before,
  .hero-cta-primary::after {
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  }

  .hero-cta-arrow {
    width: 13px;
    height: 13px;
  }
}

/* Large Mobile (480px - 639px) */
@media (min-width: 480px) and (max-width: 639px) {
  .hero-cta-container {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 32px;
    margin-bottom: 32px;
  }

  .hero-cta {
    height: 44px;
    padding: 12px 28px;
    font-size: 10px;
    letter-spacing: 2.2px;
    gap: 9px;
  }

  .hero-cta-primary {
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  }

  .hero-cta-primary::before,
  .hero-cta-primary::after {
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  }

  .hero-cta-arrow {
    width: 14px;
    height: 14px;
  }
}

/* Small Tablet (640px - 767px) */
@media (min-width: 640px) and (max-width: 767px) {
  .hero-cta-container {
    flex-direction: row;
    gap: 16px;
    margin-top: 36px;
    margin-bottom: 36px;
  }

  .hero-cta {
    height: 44px;
    padding: 12px 28px;
    font-size: 10px;
    letter-spacing: 2.2px;
    gap: 9px;
  }

  .hero-cta-primary {
    clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  }

  .hero-cta-primary::before,
  .hero-cta-primary::after {
    clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  }

  .hero-cta-arrow {
    width: 14px;
    height: 14px;
  }
}

/* Tablet (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-cta-container {
    margin-top: 40px;
    margin-bottom: 40px;
    gap: 18px;
  }

  .hero-cta {
    height: 46px;
    padding: 13px 30px;
    font-size: 11px;
    letter-spacing: 2.3px;
    gap: 9px;
  }

  .hero-cta-arrow {
    width: 15px;
    height: 15px;
  }
}

/* Small Desktop (1024px - 1279px) - Base styles apply */

/* Medium Desktop (1280px - 1439px) */
@media (min-width: 1280px) and (max-width: 1439px) {
  .hero-cta-container {
    margin-top: 48px;
    margin-bottom: 48px;
    gap: 22px;
  }

  .hero-cta {
    height: 50px;
    padding: 14px 34px;
    font-size: 12px;
    letter-spacing: 2.8px;
    gap: 10px;
  }

  .hero-cta-primary {
    clip-path: polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px);
  }

  .hero-cta-primary::before,
  .hero-cta-primary::after {
    clip-path: polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px);
  }

  .hero-cta-arrow {
    width: 17px;
    height: 17px;
  }
}

/* Large Desktop (1440px - 1919px) */
@media (min-width: 1440px) and (max-width: 1919px) {
  .hero-cta-container {
    margin-top: 52px;
    margin-bottom: 52px;
    gap: 24px;
  }

  .hero-cta {
    height: 52px;
    padding: 15px 38px;
    font-size: 13px;
    letter-spacing: 3px;
    gap: 11px;
  }

  .hero-cta-primary {
    clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  }

  .hero-cta-primary::before,
  .hero-cta-primary::after {
    clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  }

  .hero-cta-arrow {
    width: 18px;
    height: 18px;
  }
}

/* Ultra-wide / 4K (1920px+) */
@media (min-width: 1920px) {
  .hero-cta-container {
    margin-top: 60px;
    margin-bottom: 60px;
    gap: 28px;
  }

  .hero-cta {
    height: 56px;
    padding: 16px 42px;
    font-size: 14px;
    letter-spacing: 3.2px;
    gap: 16px;
  }

  .hero-cta-primary {
    clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  }

  .hero-cta-primary::before,
  .hero-cta-primary::after {
    clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  }

  .hero-cta-arrow {
    width: 22px;
    height: 22px;
  }
}

/* ================================================
   AUTH TABS - Form Switching
   ================================================ */

.auth-tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 32px;
  padding: 0;
  background: transparent;
  border-radius: 0;
  position: relative;
  z-index: 5;
}

.auth-tab {
  position: relative;
  padding: 14px 28px;
  background: transparent;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}

.auth-tab-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.3s ease;
  position: relative;
  z-index: 2;
}

.auth-tab-indicator {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.auth-tab:hover .auth-tab-text {
  color: var(--text);
}

.auth-tab.active {
  background: transparent;
}

.auth-tab.active .auth-tab-text {
  color: var(--accent);
  font-weight: 600;
}

.auth-tab.active .auth-tab-indicator {
  width: 60%;
}

/* Light theme tabs */
[data-theme="light"] .auth-tabs {
  background: transparent;
}

[data-theme="light"] .auth-tab.active {
  background: transparent;
}

/* Mobile tabs */
@media (max-width: 767px) {
  .auth-tabs {
    gap: 4px;
    padding: 0;
    margin-bottom: 24px;
  }

  .auth-tab {
    padding: 12px 16px;
    flex: 1;
  }

  .auth-tab-text {
    font-size: 10px;
    letter-spacing: 0.3px;
  }
}

/* Tablet tabs */
@media (min-width: 768px) and (max-width: 1023px) {
  .auth-tabs {
    margin-bottom: 28px;
  }

  .auth-tab {
    padding: 12px 24px;
  }

  .auth-tab-text {
    font-size: 11px;
  }
}

/* ================================================
   AUTH FORM PANELS - Smooth Switching
   ================================================ */

.auth-form-panel {
  display: none;
  opacity: 0;
  transform: translateX(20px);
}

.auth-form-panel.active {
  display: block;
  opacity: 1;
  transform: translateX(0);
}

@keyframes tabSlideIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Panel header adjustments for unified card */
.auth-form-panel .auth-header {
  margin-bottom: 28px;
}

.auth-form-panel .auth-title {
  font-size: 26px;
  margin-bottom: 8px;
}

.auth-form-panel .auth-sub {
  font-size: 13px;
}

/* Mobile panel adjustments */
@media (max-width: 767px) {
  .auth-form-panel .auth-header {
    margin-bottom: 20px;
  }

  .auth-form-panel .auth-title {
    font-size: 22px;
  }

  .auth-form-panel .auth-sub {
    font-size: 12px;
  }
}

/* Large desktop panel */
@media (min-width: 1440px) {
  .auth-form-panel .auth-title {
    font-size: 30px;
  }

  .auth-form-panel .auth-sub {
    font-size: 14px;
  }
}

/* Auth card size adjustments for unified form */
.auth-card {
  max-width: 480px;
}

@media (max-width: 767px) {
  .auth-card {
    padding: 32px 24px;
  }
}

/* ================================================
   HIDE OLD SLIDE INDICATOR (replaced by hero CTAs)
   ================================================ */

/* Only hide slide indicator on index/landing page */
body.auth-bg:not(.has-slide-indicator) .slide-indicator {
  display: none !important;
}

/* Keep slide indicator on login/signup pages for consistency */
.auth-bg.has-slide-indicator .slide-indicator {
  display: flex;
}

/* ================================================
   HERO VERTICAL SCROLL LAYOUT
   ================================================ */

.hero-scroll-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  display: block;
  padding: 40px 24px 60px;
  scroll-behavior: smooth;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}

.hero-scroll-content {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0; /* Spacing handled by section padding and dividers */
}

/* Inline CTA Button (in hero section) */
.hero-cta-container.hero-cta-inline {
  margin-top: 32px;
  margin-bottom: 0;
  display: flex;
  justify-content: center;
}

/* Each Section - Consistent vertical spacing */
.hero-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  /* Start visible - animation is enhancement only */
  opacity: 1;
  transform: translateY(0);
}

/* Scroll reveal animation - progressive enhancement */
.hero-section.scroll-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-section.scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger animation for child elements */
.hero-section.revealed .carousel-slide-header {
  animation: fadeSlideUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero-section.revealed .carousel-comparison-table,
.hero-section.revealed .carousel-flow-diagram,
.hero-section.revealed .defense-layers-grid {
  animation: fadeSlideUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
  opacity: 0;
}

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

/* Main Hero Section - Special styling */
.hero-section-main {
  min-height: 45vh;
  justify-content: center;
  padding: 32px 0 0 0;
}

.hero-section-main .hero-section-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero-section-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Section Dividers - Consistent spacing above and below */
.hero-section:not(:last-child)::after {
  content: '';
  display: block;
  width: 200px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.6), rgba(59, 130, 246, 0.6), transparent);
  margin: 84px auto 84px;
  border-radius: 1px;
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.3);
  /* Start hidden - animate via JS */
  opacity: 0;
  transform: scaleX(0);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Divider animates in when section has divider-visible class */
.hero-section.divider-visible:not(:last-child)::after {
  opacity: 1;
  transform: scaleX(1);
}

/* First section has CTA button, use same spacing as other dividers */
.hero-section-main:not(:last-child)::after {
  margin: 84px auto 84px;
}

/* Responsive adjustments for scroll layout */
@media (max-width: 768px) {
  .hero-scroll-wrapper {
    padding: 24px 16px 80px;
  }
  
  .hero-section-main {
    min-height: 40vh;
  }
  
  .hero-section:not(:last-child)::after {
    width: 160px;
    margin: 80px auto 80px;
  }
  
  .hero-section-main:not(:last-child)::after {
    margin: 80px auto 80px;
  }
  
  /* Add padding to non-hero sections on tablet/mobile */
  .hero-section:not(.hero-section-main) .hero-section-content {
    padding: 0 12px;
  }
  
  /* Add bottom spacing to content components to match first divider spacing */
  .carousel-comparison-table,
  .carousel-flow-diagram,
  .defense-layers-grid {
    margin-bottom: 24px;
  }
}

@media (max-width: 480px) {
  .hero-scroll-wrapper {
    padding: 20px 12px 60px;
  }
  
  .hero-section-main {
    min-height: 35vh;
  }
  
  .hero-section:not(:last-child)::after {
    width: 120px;
    margin: 64px auto 64px;
  }
  
  .hero-section-main:not(:last-child)::after {
    margin: 64px auto 64px;
  }
  
  /* Add padding to non-hero sections on mobile */
  .hero-section:not(.hero-section-main) .hero-section-content {
    padding: 0 16px;
  }
  
  /* Add bottom spacing to content components to match first divider spacing */
  .carousel-comparison-table,
  .carousel-flow-diagram,
  .defense-layers-grid {
    margin-bottom: 20px;
  }
}

/* Support badge in scroll layout */
.hero-scroll-wrapper .support-badge {
  margin-top: 32px;
}

/* ================================================
   HERO CAROUSEL STYLES (Legacy)
   ================================================ */

.hero-carousel-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;
  overflow-y: auto;
  /* Add bottom padding to ensure content isn't hidden behind sticky button */
  padding-bottom: 140px;
  box-sizing: border-box;
  /* Enable touch interactions for swipe gestures */
  touch-action: pan-y pinch-zoom;
  -webkit-overflow-scrolling: touch;
}

.hero-carousel {
  position: relative;
  width: 100%;
  height: 100%;
  /* Enable touch interactions for swipe gestures */
  touch-action: pan-y pinch-zoom;
}

.hero-carousel-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100%;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.96) translateX(15px);
  filter: blur(4px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0.9s,
              filter 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  will-change: opacity, transform, filter;
  padding: 40px 0;
  box-sizing: border-box;
}

.hero-carousel-slide.active {
  opacity: 1;
  visibility: visible;
  transform: scale(1) translateX(0);
  filter: blur(0);
  position: relative;
  z-index: 2;
}

/* Only slides 2 and 3 (Architecture and Why Different) - positioned near top */
.hero-carousel-slide[data-slide="1"],
.hero-carousel-slide[data-slide="2"] {
  justify-content: flex-start;
  padding-top: 40px;
  padding-bottom: 40px;
}

/* First slide (Hero) - Full width, no constraints, original slogan size */
.hero-carousel-slide[data-slide="0"] .hero-slide-content {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0;
}

/* Ensure hero slide h1 uses full width and original sizes */
.hero-carousel-slide[data-slide="0"] h1 {
  width: 100%;
  max-width: 100%;
  font-family: 'Michroma', sans-serif;
  font-size: clamp(28px, 6vw, 64px);
  font-weight: 400;
  line-height: 1.1;
  margin-bottom: 16px;
  letter-spacing: 0.02em;
  padding: 0 24px;
  box-sizing: border-box;
}

.hero-carousel-slide[data-slide="0"] h2 {
  width: 100%;
  max-width: 100%;
  font-family: 'Michroma', sans-serif;
  font-size: clamp(18px, 4vw, 32px);
  font-weight: 500;
  color: var(--accent);
  margin-bottom: 32px;
  letter-spacing: 0.03em;
  padding: 0 24px;
  box-sizing: border-box;
}

.hero-carousel-slide[data-slide="0"] .auth-features {
  width: 100%;
  max-width: 100%;
  padding: 0 24px;
  box-sizing: border-box;
}

/* Other slides - Constrained width, aligned to top */
.hero-carousel-slide:not([data-slide="0"]) .hero-slide-content {
  width: 100%;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding: 0 24px;
  min-height: auto;
  margin: 0 auto;
  gap: 20px;
}

/* Carousel Badge - Premium Design */
.carousel-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 24px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 28px;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
  transition: all 0.3s ease;
}

.carousel-badge:hover {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.4);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

.carousel-badge-dot {
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.carousel-slide-header {
  width: 100%;
  margin-bottom: 20px;
}

.carousel-title {
  font-family: var(--font-heading);
  font-size: clamp(26px, 4.5vw, 36px);
  font-weight: 400;
  color: var(--text);
  margin: 0 0 16px 0;
  line-height: 1.3;
  letter-spacing: 0.02em;
  /* Subtle blue glow for premium feel - elegant accent without overwhelming */
  text-shadow: 0 0 20px rgba(59, 130, 246, 0.25),
               0 0 40px rgba(59, 130, 246, 0.12),
               0 2px 4px rgba(0, 0, 0, 0.2);
}

/* First word accent - elegant blue highlight */
.carousel-title-accent {
  color: var(--accent);
  text-shadow: 0 0 20px rgba(59, 130, 246, 0.4),
               0 0 40px rgba(59, 130, 246, 0.2),
               0 2px 4px rgba(0, 0, 0, 0.2);
  font-weight: 500;
}

.carousel-subtitle {
  font-family: var(--font-mono);
  font-size: clamp(14px, 2.5vw, 16px);
  color: var(--muted);
  line-height: 1.6;
  max-width: 750px;
  margin: 0 auto;
  letter-spacing: 0.3px;
}

/* Flow Diagram - Premium Design */
.carousel-flow-diagram {
  width: 100%;
  max-width: 900px;
  padding: 48px 32px;
  background: rgba(8, 10, 14, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-xl);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  overflow: visible;
  box-sizing: border-box;
  margin: 0 auto;
}

.carousel-flow-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: nowrap;
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: thin;
  scrollbar-color: rgba(59, 130, 246, 0.3) transparent;
  -ms-overflow-style: none;
  padding: 0 8px;
  box-sizing: border-box;
  margin: 0 auto;
}

.carousel-flow-row::-webkit-scrollbar {
  height: 6px;
}

.carousel-flow-row::-webkit-scrollbar-track {
  background: transparent;
}

.carousel-flow-row::-webkit-scrollbar-thumb {
  background: rgba(59, 130, 246, 0.3);
  border-radius: 3px;
}

.carousel-flow-row::-webkit-scrollbar-thumb:hover {
  background: rgba(59, 130, 246, 0.5);
}

/* Ensure all nodes fit in one row on desktop */
@media (min-width: 1024px) {
  .carousel-flow-row {
    gap: 20px;
    overflow-x: visible;
  }
  
  .carousel-flow-node {
    flex: 0 0 auto;
    min-width: 150px;
    max-width: 170px;
  }
  
  .carousel-flow-diagram {
    overflow: visible;
  }
}

.carousel-flow-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 24px;
  background: rgba(8, 10, 14, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  min-width: 150px;
  max-width: 170px;
  width: auto;
  flex: 0 0 auto;
  position: relative;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: visible;
  box-sizing: border-box;
}

.carousel-flow-node:hover {
  border-color: rgba(59, 130, 246, 0.5);
  background: rgba(59, 130, 246, 0.08);
  transform: translateY(-6px);
  box-shadow: 0 8px 24px rgba(59, 130, 246, 0.2);
}

.carousel-flow-node.highlight {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.4);
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.15);
}

.carousel-node-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: white;
  font-size: 9px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  font-family: var(--font-mono);
  z-index: 10;
  overflow: visible;
}

.carousel-node-icon {
  width: 40px;
  height: 40px;
  color: var(--accent);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-node-icon svg {
  width: 100%;
  height: 100%;
}

.carousel-node-label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}

.carousel-node-desc {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  line-height: 1.4;
  margin-bottom: 8px;
}

.carousel-node-stats {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--muted);
}

.carousel-node-privacy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--muted);
}

.carousel-node-privacy svg {
  width: 12px;
  height: 12px;
}

/* Carousel Flow Arrows - Animated like architecture page */
.carousel-flow-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-width: 60px;
  flex: 1;
  max-width: 80px;
  height: 28px;
  flex-shrink: 0;
}

.carousel-arrow-line {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

/* Forward moving chevrons (blue, going right) */
.carousel-arrow-line::before,
.carousel-arrow-line::after {
  content: '›';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  font-weight: 300;
  color: var(--accent);
  animation: carousel-chevron-forward 1.2s linear infinite;
  text-shadow: 0 0 6px rgba(59, 130, 246, 0.6);
}

.carousel-arrow-line::before {
  animation-delay: 0s;
}

.carousel-arrow-line::after {
  animation-delay: 0.4s;
}

@keyframes carousel-chevron-forward {
  0% {
    left: -5%;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}

.carousel-arrow-head {
  display: none;
}

.carousel-flow-arrow.bidirectional {
  height: 36px;
}

/* Reverse moving chevrons (grey outbound, going left) - TOP row */
.carousel-flow-arrow.bidirectional .carousel-arrow-line.reverse {
  position: absolute;
  top: -14px;
  left: 0;
  width: 100%;
  height: 100%;
}

.carousel-flow-arrow.bidirectional .carousel-arrow-line.reverse::before,
.carousel-flow-arrow.bidirectional .carousel-arrow-line.reverse::after {
  content: '‹';
  color: rgba(255, 255, 255, 0.4);
  animation: carousel-chevron-reverse 1.4s linear infinite;
  text-shadow: none;
}

.carousel-flow-arrow.bidirectional .carousel-arrow-line.reverse::before {
  animation-delay: 0s;
}

.carousel-flow-arrow.bidirectional .carousel-arrow-line.reverse::after {
  animation-delay: 0.5s;
}

@keyframes carousel-chevron-reverse {
  0% {
    left: 100%;
    opacity: 0;
  }
  10% {
    opacity: 0.8;
  }
  90% {
    opacity: 0.8;
  }
  100% {
    left: -5%;
    opacity: 0;
  }
}

.carousel-flow-arrow.bidirectional .carousel-arrow-head.reverse {
  display: none;
}

/* Split Arrow with Drop (Blocked Traffic) */
.carousel-flow-arrow.split-arrow {
  position: relative;
}

.carousel-arrow-drop {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  z-index: 5;
}

.carousel-flow-arrow.split-arrow.bidirectional .carousel-arrow-drop {
  top: 22px;
}

/* Red falling dots (Blocked packets) */
.carousel-drop-packet {
  width: 5px;
  height: 5px;
  background: var(--red);
  border-radius: 50%;
  animation: carousel-drop-fall 1.4s ease-in infinite;
  opacity: 0;
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.6);
}

.carousel-drop-packet:nth-child(2) {
  animation-delay: 0.45s;
}

@keyframes carousel-drop-fall {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  15% {
    opacity: 0.9;
  }
  75% {
    opacity: 0.7;
  }
  100% {
    transform: translateY(26px);
    opacity: 0;
  }
}

.carousel-drop-label {
  font-size: 9px;
  color: var(--red);
  white-space: nowrap;
  opacity: 0.8;
  font-weight: 600;
  letter-spacing: 0.3px;
  margin-top: 4px;
  text-transform: uppercase;
  font-family: var(--font-mono);
}

/* Comparison Table - Premium Design */
.carousel-comparison-table {
  background: rgba(8, 10, 14, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  overflow: hidden;
  width: 100%;
  max-width: 900px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.carousel-comparison-header {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1.5fr;
  background: rgba(59, 130, 246, 0.05);
  border-bottom: 1px solid var(--border);
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.carousel-comparison-header > div {
  font-family: 'JetBrains Mono', monospace !important;
  padding: 16px 14px;
}

.carousel-comparison-header .carousel-comparison-feature {
  color: var(--muted);
}

.carousel-comparison-header .carousel-comparison-us {
  color: var(--accent);
  text-align: center;
}

.carousel-comparison-header .carousel-comparison-them {
  color: var(--muted);
  text-align: center;
}

.carousel-comparison-row {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1.5fr;
  border-bottom: 1px solid var(--border);
  transition: background 0.2s ease;
}

.carousel-comparison-row:last-child {
  border-bottom: none;
}

.carousel-comparison-row:hover {
  background: rgba(59, 130, 246, 0.05);
}

.carousel-comparison-row > div {
  padding: 14px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  display: flex;
  align-items: center;
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 1.5;
}

.carousel-comparison-feature {
  font-weight: 500;
  color: var(--text);
}

.carousel-comparison-us,
.carousel-comparison-them {
  text-transform: none;
  font-weight: 400;
  color: var(--muted);
  justify-content: flex-start;
  gap: 6px;
  flex-wrap: wrap;
}

/* Desktop: Blue/Red backgrounds matching mobile styling (rows only, not headers) */
.carousel-comparison-row .carousel-comparison-us {
  background: rgba(59, 130, 246, 0.08);
  border-radius: 6px;
  margin: 4px 8px;
  padding: 10px 14px !important;
}

.carousel-comparison-row .carousel-comparison-us span:not(.carousel-check) {
  color: var(--text);
  font-weight: 500;
}

.carousel-comparison-row .carousel-comparison-them {
  background: rgba(239, 68, 68, 0.06);
  border-radius: 6px;
  margin: 4px 8px;
  padding: 10px 14px !important;
}

.carousel-comparison-row .carousel-comparison-them span:not(.carousel-x) {
  color: var(--muted);
}

.carousel-check {
  color: var(--accent);
  font-weight: 700;
  font-size: 16px;
}

.carousel-x {
  color: var(--red);
  font-weight: 700;
  font-size: 16px;
  opacity: 0.7;
}

/* Carousel Navigation Dots - Premium Design */
.hero-carousel-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 0 24px;
  position: relative;
  z-index: 5;
}

/* Start hidden for cinematic animation on auth pages - only when not animated yet */
.auth-bg .hero-carousel-dots:not(.cinema-animate) {
  opacity: 0;
}

/* Sticky Get Started Button - Always Visible (Professional UX Solution) */
.hero-cta-container.hero-cta-fixed {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 24px;
  padding-bottom: max(20px, env(safe-area-inset-bottom, 20px));
  margin-top: 20px;
  margin-bottom: 0;
  box-sizing: border-box;
  /* No background - transparent */
  background: transparent;
  /* Smooth transition when becoming sticky */
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  /* Ensure button is always accessible */
  pointer-events: auto;
}

.carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  padding: 0;
  position: relative;
  overflow: hidden;
}

.carousel-dot::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(59, 130, 246, 0.2);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.carousel-dot:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.2);
}

.carousel-dot:hover::before {
  transform: translate(-50%, -50%) scale(1);
}

.carousel-dot.active {
  background: var(--accent);
  width: 32px;
  border-radius: 16px;
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.4);
}

.carousel-dot.active::before {
  background: rgba(59, 130, 246, 0.3);
  transform: translate(-50%, -50%) scale(1);
}


/* Responsive Design */
@media (max-width: 1023px) {
  .carousel-flow-diagram {
    padding: 32px 20px;
    overflow-x: auto;
    overflow-y: visible;
  }

  .carousel-flow-row {
    gap: 12px;
    padding: 0 4px;
    min-width: min-content;
  }

  .carousel-flow-node {
    min-width: 130px;
    max-width: 140px;
    padding: 20px 16px;
    flex-shrink: 0;
  }

  .carousel-flow-arrow {
    min-width: 50px;
    max-width: 60px;
    height: 24px;
  }

  .carousel-flow-arrow.bidirectional {
    height: 30px;
  }

  .carousel-flow-arrow.bidirectional .carousel-arrow-line.reverse {
    top: -12px;
  }

  .carousel-flow-arrow.bidirectional .carousel-arrow-head.reverse {
    top: -12px;
  }

  .carousel-arrow-line::before,
  .carousel-arrow-line::after {
    font-size: 16px;
  }

  /* Mobile: Clean, digestible card layout for comparison table */
  .carousel-comparison-header {
    display: none; /* Hide header on mobile */
  }

  .carousel-comparison-row {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 14px 12px;
    margin-bottom: 10px;
    background: rgba(8, 10, 14, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  }

  .carousel-comparison-row:last-child {
    margin-bottom: 0;
  }

  .carousel-comparison-row > div {
    padding: 0;
    text-align: left;
    display: block;
    width: 100%;
  }

  .carousel-comparison-feature {
    font-weight: 700;
    font-size: 12px;
    color: var(--text);
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid rgba(59, 130, 246, 0.2);
    letter-spacing: 0.3px;
  }

  /* TensorProx - Positive styling */
  .carousel-comparison-us {
    padding: 8px 12px;
    margin-bottom: 6px;
    background: rgba(59, 130, 246, 0.08);
    border-left: none;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    line-height: 1.4;
  }

  .carousel-comparison-us .carousel-check {
    font-size: 14px;
    flex-shrink: 0;
    color: var(--accent);
  }

  .carousel-comparison-us span:not(.carousel-check) {
    color: var(--text);
    font-weight: 500;
  }

  /* Traditional DDoS - Negative styling */
  .carousel-comparison-them {
    padding: 8px 12px;
    background: rgba(239, 68, 68, 0.06);
    border-left: none;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    line-height: 1.4;
  }

  .carousel-comparison-them .carousel-x {
    font-size: 14px;
    flex-shrink: 0;
    color: rgba(239, 68, 68, 0.7);
  }

  .carousel-comparison-them span:not(.carousel-x) {
    color: var(--muted);
  }

}

@media (max-width: 768px) {
  .carousel-title {
    font-size: 22px;
    line-height: 1.3;
  }

  .carousel-subtitle {
    font-size: 13px;
    line-height: 1.5;
  }

  .carousel-comparison-table {
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
  }

  .carousel-comparison-header {
    display: none;
  }

  .carousel-comparison-row {
    display: block;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 12px 10px;
    margin-bottom: 8px;
    background: rgba(8, 10, 14, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  }

  .carousel-comparison-row:last-child {
    margin-bottom: 0;
  }

  .carousel-comparison-row > div {
    display: block;
    padding: 0;
    margin-bottom: 0;
  }

  .carousel-comparison-feature {
    font-weight: 700;
    font-size: 11px;
    color: var(--text);
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 2px solid rgba(59, 130, 246, 0.2);
    letter-spacing: 0.3px;
  }

  /* TensorProx - Positive styling with blue accent */
  .carousel-comparison-us {
    padding: 6px 10px;
    margin-bottom: 5px;
    background: rgba(59, 130, 246, 0.08);
    border-left: none;
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    line-height: 1.3;
  }

  .carousel-comparison-us .carousel-check {
    font-size: 12px;
    flex-shrink: 0;
    color: var(--accent);
  }

  .carousel-comparison-us span:not(.carousel-check) {
    color: var(--text);
    font-weight: 500;
  }

  /* Traditional DDoS - Negative styling with red accent */
  .carousel-comparison-them {
    padding: 6px 10px;
    background: rgba(239, 68, 68, 0.06);
    border-left: none;
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    line-height: 1.3;
  }

  .carousel-comparison-them .carousel-x {
    font-size: 12px;
    flex-shrink: 0;
    color: rgba(239, 68, 68, 0.7);
  }

  .carousel-comparison-them span:not(.carousel-x) {
    color: var(--muted);
  }
  
  /* Reduce top margin for first slide (hero) brand header on mobile */
  .hero-carousel-slide[data-slide="0"] .auth-brand-header {
    margin-top: clamp(20px, 6vh, 40px);
  }
  
  /* Reduce padding-top for first slide on mobile */
  .hero-carousel-slide[data-slide="0"] {
    padding-top: 20px;
  }
  
  /* Reduce spacing on first slide (hero) for mobile */
  .hero-carousel-slide[data-slide="0"] .auth-features {
    margin-bottom: 8px;
  }
  
  /* Carousel dots - much closer on mobile */
  .hero-carousel-dots {
    margin-top: 8px;
  }
  
  /* Sticky Get Started Button - Mobile Responsive - Much closer */
  .hero-cta-container.hero-cta-fixed {
    padding: 12px 20px;
    margin-top: 8px;
    /* No background - transparent */
    background: transparent;
  }
  
  /* Reduce bottom padding on mobile since button is smaller */
  .hero-carousel-wrapper {
    padding-bottom: 120px;
    padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px));
  }
}

/* Tablet-specific adjustments (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-cta-container.hero-cta-fixed {
    padding: 18px 24px;
    margin-top: 18px;
  }
  
  .hero-carousel-wrapper {
    padding-bottom: 130px;
  }
}

/* Mobile flow diagram styles - only for screens ≤900px */
@media (max-width: 900px) {
  .carousel-flow-diagram {
    padding: 24px 16px;
  }

  .carousel-flow-row {
    flex-direction: column;
    align-items: center;
    gap: 40px;
    padding: 0;
  }

  .carousel-flow-node {
    width: 100%;
    max-width: 280px;
    min-width: auto;
    padding: 20px 16px;
  }

  .carousel-flow-arrow {
    width: 100%;
    max-width: 80px;
    height: 60px;
    min-width: auto;
    margin: 8px 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .carousel-flow-arrow.bidirectional {
    height: 80px;
    max-width: 100px;
  }

  /* Vertical chevron animations for mobile - completely override desktop */
  .carousel-arrow-line {
    width: 30px !important;
    height: 60px !important;
    position: relative;
    overflow: visible !important;
  }

  /* Disable desktop horizontal animation completely */
  .carousel-arrow-line::before,
  .carousel-arrow-line::after {
    /* Reset desktop animation */
    animation: none !important;
    left: auto !important;
  }

  /* Blue chevrons moving down vertically */
  .carousel-arrow-line::before,
  .carousel-arrow-line::after {
    content: '▼' !important;
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    animation: carousel-chevron-vertical-down-mobile 1.2s linear infinite !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: var(--accent) !important;
    text-shadow: 0 0 8px rgba(59, 130, 246, 0.6) !important;
    z-index: 2;
    line-height: 1;
  }

  .carousel-arrow-line::before {
    animation-delay: 0s !important;
  }

  .carousel-arrow-line::after {
    animation-delay: 0.4s !important;
  }

  @keyframes carousel-chevron-vertical-down-mobile {
    0% {
      top: 0px;
      opacity: 0;
    }
    15% {
      top: 8px;
      opacity: 1;
    }
    85% {
      top: 48px;
      opacity: 1;
    }
    100% {
      top: 56px;
      opacity: 0;
    }
  }

  /* Grey chevrons moving up - positioned on the left side */
  .carousel-flow-arrow.bidirectional .carousel-arrow-line.reverse {
    position: absolute;
    top: 0;
    left: 0px;
    width: 30px !important;
    height: 60px !important;
    z-index: 1;
    overflow: visible !important;
  }

  /* Disable desktop animation for reverse arrows */
  .carousel-flow-arrow.bidirectional .carousel-arrow-line.reverse::before,
  .carousel-flow-arrow.bidirectional .carousel-arrow-line.reverse::after {
    animation: none !important;
    left: auto !important;
  }

  /* Grey chevrons moving up vertically */
  .carousel-flow-arrow.bidirectional .carousel-arrow-line.reverse::before,
  .carousel-flow-arrow.bidirectional .carousel-arrow-line.reverse::after {
    content: '▲' !important;
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    animation: carousel-chevron-vertical-up-mobile 1.4s linear infinite !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    color: rgba(255, 255, 255, 0.5) !important;
    text-shadow: none !important;
    z-index: 2;
    line-height: 1;
  }

  .carousel-flow-arrow.bidirectional .carousel-arrow-line.reverse::before {
    animation-delay: 0s !important;
  }

  .carousel-flow-arrow.bidirectional .carousel-arrow-line.reverse::after {
    animation-delay: 0.5s !important;
  }

  @keyframes carousel-chevron-vertical-up-mobile {
    0% {
      top: 56px;
      opacity: 0;
    }
    15% {
      top: 48px;
      opacity: 0.8;
    }
    85% {
      top: 8px;
      opacity: 0.8;
    }
    100% {
      top: 0px;
      opacity: 0;
    }
  }

  /* Adjust drop position for vertical - positioned to the right of arrows */
  .carousel-arrow-drop {
    top: 50%;
    right: -25px;
    left: auto;
    transform: translateY(-50%);
    z-index: 3;
  }

  .carousel-flow-arrow.split-arrow.bidirectional .carousel-arrow-drop {
    top: 50%;
    right: -28px;
    left: auto;
  }

  /* Adjust drop fall animation for vertical - falls to the right */
  .carousel-drop-packet {
    animation: carousel-drop-fall-mobile 1.4s ease-in infinite;
  }

  @keyframes carousel-drop-fall-mobile {
    0% {
      transform: translateX(0);
      opacity: 0;
    }
    15% {
      opacity: 0.9;
    }
    75% {
      opacity: 0.7;
    }
    100% {
      transform: translateX(20px);
      opacity: 0;
    }
  }

  .carousel-drop-label {
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    margin-top: 4px;
    margin-left: 0;
    text-align: left;
  }


  .carousel-node-icon {
    width: 36px;
    height: 36px;
  }

  .carousel-node-label {
    font-size: 13px;
  }

  .carousel-node-desc {
    font-size: 11px;
  }
}

/* Small Mobile */
@media (max-width: 480px) {
  .carousel-comparison-table {
    padding: 0;
  }

  .carousel-comparison-row {
    padding: 12px;
    margin-bottom: 10px;
  }

  .carousel-comparison-feature {
    font-size: 12px;
    margin-bottom: 10px;
  }

  .carousel-comparison-us,
  .carousel-comparison-them {
    font-size: 10px;
    gap: 4px;
  }

  .carousel-check,
  .carousel-x {
    font-size: 14px;
  }

  .carousel-flow-diagram {
    padding: 20px 12px;
  }

  .carousel-flow-row {
    gap: 36px;
  }

  .carousel-flow-node {
    max-width: 100%;
    padding: 16px 12px;
  }

  .carousel-flow-arrow {
    max-width: 50px;
    height: 50px;
    margin: 6px 0;
  }

  .carousel-flow-arrow.bidirectional {
    height: 70px;
  }

  .carousel-node-icon {
    width: 32px;
    height: 32px;
  }

  .carousel-node-label {
    font-size: 12px;
  }

  .carousel-node-desc {
    font-size: 10px;
  }

  .carousel-node-stats {
    font-size: 8px;
  }
}

/* ============================================
   LIGHT MODE - Carousel Elements Fix
   ============================================ */

/* Flow Diagram - Light Mode */
[data-theme="light"] .carousel-flow-diagram {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .carousel-flow-node {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .carousel-flow-node:hover {
  background: rgba(37, 99, 235, 0.06);
  border-color: rgba(37, 99, 235, 0.3);
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.12);
}

[data-theme="light"] .carousel-flow-node.highlight {
  background: rgba(37, 99, 235, 0.08);
  border-color: rgba(37, 99, 235, 0.25);
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.1);
}

[data-theme="light"] .carousel-flow-arrow .carousel-arrow-line.reverse::before,
[data-theme="light"] .carousel-flow-arrow .carousel-arrow-line.reverse::after {
  color: rgba(0, 0, 0, 0.3);
}

/* Comparison Table - Light Mode */
[data-theme="light"] .carousel-comparison-table {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .carousel-comparison-header {
  background: rgba(37, 99, 235, 0.04);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .carousel-comparison-row {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .carousel-comparison-row:hover {
  background: rgba(37, 99, 235, 0.03);
}

[data-theme="light"] .carousel-comparison-row .carousel-comparison-us {
  background: rgba(37, 99, 235, 0.08);
}

[data-theme="light"] .carousel-comparison-row .carousel-comparison-them {
  background: rgba(239, 68, 68, 0.06);
}

/* Light Mode - Mobile Comparison Table Cards */
@media (max-width: 1023px) {
  [data-theme="light"] .carousel-comparison-row {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  }
  
  [data-theme="light"] .carousel-comparison-feature {
    border-bottom: 2px solid rgba(37, 99, 235, 0.15);
  }
}

/* Carousel Navigation Dots - Light Mode */
[data-theme="light"] .carousel-dot {
  background: rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .carousel-dot:hover {
  background: rgba(0, 0, 0, 0.3);
}

[data-theme="light"] .carousel-dot.active {
  background: var(--accent);
  box-shadow: 0 0 12px rgba(37, 99, 235, 0.35);
}

/* =====================================================
   8-Stage Defense System - Carousel Slide
   ===================================================== */

/* Defense Layers Slide Container */
.defense-layers-content {
  width: 100%;
  max-width: 1000px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: auto;
}

.defense-layers-content .carousel-slide-header {
  margin-bottom: 16px;
}

.hero-carousel-slide[data-slide="3"] {
  justify-content: flex-start;
  padding-top: 40px;
  padding-bottom: 24px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Defense Layers Grid - 3x3 Layout */
.defense-layers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, auto);
  gap: 10px;
  width: 100%;
  max-width: 960px;
}

/* Defense Layer Card */
.defense-layer-card {
  background: rgba(8, 10, 14, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 14px;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  overflow: hidden;
}

.defense-layer-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.defense-layer-card:hover {
  border-color: rgba(59, 130, 246, 0.3);
  background: rgba(59, 130, 246, 0.08);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.defense-layer-card:hover::before {
  opacity: 1;
}

/* Highlighted Card (L4) */
.defense-layer-card.card-highlight {
  background: rgba(8, 10, 14, 0.8);
  border-color: rgba(59, 130, 246, 0.25);
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.1);
}

.defense-layer-card.card-highlight::before {
  opacity: 0.5;
}

/* Card Header */
.defense-layer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.defense-layer-id {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.5px;
}

.defense-layer-icon {
  width: 18px;
  height: 18px;
  color: var(--muted);
  opacity: 0.6;
  transition: all 0.3s ease;
}

.defense-layer-card:hover .defense-layer-icon {
  color: var(--accent);
  opacity: 1;
}

/* Card Title */
.defense-layer-title {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 6px 0;
  line-height: 1.3;
}

/* Defense Tags - Simplified color scheme (blue, red, green only) */
.defense-layer-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 4px 8px;
  border-radius: 4px;
  margin-bottom: 8px;
  color: var(--accent);
  background: rgba(59, 130, 246, 0.15);
}

.defense-layer-tag.tag-red {
  color: var(--red);
  background: rgba(239, 68, 68, 0.15);
}

.defense-layer-tag.tag-green {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.15);
}

/* Card Description */
.defense-layer-desc {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  margin: 0 0 10px 0;
}

/* Card Quote */
.defense-layer-quote {
  font-family: var(--font-mono);
  font-size: 10px;
  font-style: italic;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.5;
  margin: 0;
  padding-left: 10px;
  border-left: 2px solid rgba(59, 130, 246, 0.3);
}

.defense-quote-highlight {
  color: #22c55e;
  border-left-color: #22c55e;
}

/* Center Element - TensorProx Defense Core */
.defense-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 14px;
  background: rgba(8, 10, 14, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(59, 130, 246, 0.15);
  border-radius: 10px;
  position: relative;
}

/* Advanced Animated Core Icon */
.defense-core-icon {
  position: relative;
  width: 72px;
  height: 72px;
  margin-bottom: 8px;
}

/* Rotating Rings */
.defense-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.defense-ring-outer {
  animation: ring-rotate 20s linear infinite;
}

.defense-ring-middle {
  animation: ring-rotate-reverse 15s linear infinite;
}

.defense-ring-inner {
  animation: ring-pulse 3s ease-in-out infinite;
}

@keyframes ring-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes ring-rotate-reverse {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

@keyframes ring-pulse {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.95); }
}

/* 8 Network Nodes - positioned around the core */
.defense-nodes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.defense-node {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.8);
  animation: node-pulse 2s ease-in-out infinite;
}

/* Position 8 nodes in octagon pattern */
.defense-node.node-1 { top: 4px; left: 50%; transform: translateX(-50%); animation-delay: 0s; }
.defense-node.node-2 { top: 14px; right: 10px; animation-delay: 0.25s; }
.defense-node.node-3 { top: 50%; right: 4px; transform: translateY(-50%); animation-delay: 0.5s; }
.defense-node.node-4 { bottom: 14px; right: 10px; animation-delay: 0.75s; }
.defense-node.node-5 { bottom: 4px; left: 50%; transform: translateX(-50%); animation-delay: 1s; }
.defense-node.node-6 { bottom: 14px; left: 10px; animation-delay: 1.25s; }
.defense-node.node-7 { top: 50%; left: 4px; transform: translateY(-50%); animation-delay: 1.5s; }
.defense-node.node-8 { top: 14px; left: 10px; animation-delay: 1.75s; }

@keyframes node-pulse {
  0%, 100% { 
    opacity: 1; 
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.8);
    transform: translateX(var(--tx, 0)) translateY(var(--ty, 0)) scale(1);
  }
  50% { 
    opacity: 0.5; 
    box-shadow: 0 0 12px rgba(59, 130, 246, 1);
    transform: translateX(var(--tx, 0)) translateY(var(--ty, 0)) scale(1.3);
  }
}

/* Keep transforms for centered nodes */
.defense-node.node-1, .defense-node.node-5 { --tx: -50%; }
.defense-node.node-3, .defense-node.node-7 { --ty: -50%; }

/* Core T Letter */
.defense-core-letter {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 400;
  color: var(--text);
  text-shadow: 
    0 0 20px rgba(59, 130, 246, 0.6),
    0 0 40px rgba(59, 130, 246, 0.3);
  z-index: 2;
}

.defense-center-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  color: #22c55e;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.25);
  border-radius: 20px;
}

.defense-status-dot {
  width: 5px;
  height: 5px;
  background: #22c55e;
  border-radius: 50%;
  animation: defense-pulse 2s ease-in-out infinite;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
}

@keyframes defense-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(0.9);
  }
}

/* =====================================================
   8-Stage DEFENSE - Responsive Styles
   ===================================================== */

/* Large Tablets and Small Desktops */
@media (max-width: 1000px) {
  .defense-layers-grid {
    gap: 10px;
    max-width: 100%;
  }
  
  .defense-layer-card {
    padding: 14px;
  }
  
  .defense-layer-title {
    font-size: 13px;
  }
  
  .defense-layer-desc {
    font-size: 12px;
  }
  
  .defense-core-icon {
    width: 60px;
    height: 60px;
  }
  
  .defense-core-letter {
    font-size: 18px;
  }
  
  .defense-node {
    width: 5px;
    height: 5px;
  }
}

/* Tablets - 2x4 grid with center hidden */
@media (max-width: 800px) {
  .defense-layers-content .carousel-slide-header {
    margin-bottom: 16px;
  }
  
  .defense-layers-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, auto);
    gap: 10px;
  }
  
  /* Hide center element on tablet - title already shows defense info */
  .defense-center {
    display: none;
  }
  
  .defense-layer-card {
    padding: 14px;
  }
  
  .defense-layer-id {
    font-size: 12px;
  }
  
  .defense-layer-title {
    font-size: 13px;
  }
  
  .defense-layer-tag {
    font-size: 8px;
    padding: 3px 6px;
  }
  
  .defense-layer-desc {
    font-size: 12px;
    margin-bottom: 8px;
    line-height: 1.5;
  }
  
  .defense-layer-quote {
    font-size: 10px;
    padding-left: 8px;
    line-height: 1.4;
  }
}

/* Mobile Landscape */
@media (max-width: 600px) {
  .defense-layers-content {
    padding: 12px 10px;
  }
  
  .defense-layers-content .carousel-slide-header {
    margin-bottom: 14px;
  }
  
  .hero-carousel-slide[data-slide="3"] {
    padding-top: 24px;
    padding-bottom: 16px;
  }
  
  .defense-layers-grid {
    gap: 8px;
  }
  
  .defense-layer-card {
    padding: 12px 14px;
  }
  
  .defense-layer-id {
    font-size: 12px;
  }
  
  .defense-layer-icon {
    width: 16px;
    height: 16px;
  }
  
  .defense-layer-header {
    margin-bottom: 6px;
  }
  
  .defense-layer-title {
    font-size: 13px;
    margin-bottom: 5px;
  }
  
  .defense-layer-tag {
    font-size: 8px;
    padding: 3px 6px;
    margin-bottom: 6px;
  }
  
  .defense-layer-desc {
    font-size: 11px;
    line-height: 1.5;
    margin-bottom: 8px;
  }
  
  .defense-layer-quote {
    font-size: 10px;
    padding-left: 8px;
    line-height: 1.4;
  }
}

/* Mobile Portrait - Single column */
@media (max-width: 480px) {
  .defense-layers-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  
  .defense-layers-content {
    padding: 10px 12px;
  }
  
  .defense-layer-card {
    padding: 14px 16px;
  }
  
  .defense-layer-header {
    margin-bottom: 8px;
  }
  
  .defense-layer-id {
    font-size: 13px;
  }
  
  .defense-layer-icon {
    width: 18px;
    height: 18px;
  }
  
  .defense-layer-title {
    font-size: 14px;
    margin-bottom: 6px;
  }
  
  .defense-layer-tag {
    font-size: 9px;
    padding: 4px 8px;
    margin-bottom: 8px;
  }
  
  .defense-layer-desc {
    font-size: 12px;
    line-height: 1.6;
    margin-bottom: 10px;
  }
  
  .defense-layer-quote {
    font-size: 11px;
    padding-left: 10px;
    line-height: 1.5;
  }
}

/* =====================================================
   8-Stage DEFENSE - Light Mode
   ===================================================== */

[data-theme="light"] .defense-layer-card {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .defense-layer-card:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(37, 99, 235, 0.25);
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.12);
}

[data-theme="light"] .defense-layer-card.card-highlight {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(37, 99, 235, 0.2);
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.08);
}

[data-theme="light"] .defense-layer-quote {
  color: rgba(0, 0, 0, 0.5);
  border-left-color: rgba(37, 99, 235, 0.3);
}

[data-theme="light"] .defense-center {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(37, 99, 235, 0.12);
}

[data-theme="light"] .defense-layer-tag {
  background: rgba(37, 99, 235, 0.1);
}

[data-theme="light"] .defense-layer-tag.tag-red {
  background: rgba(239, 68, 68, 0.1);
}

[data-theme="light"] .defense-layer-tag.tag-green {
  background: rgba(34, 197, 94, 0.1);
}

[data-theme="light"] .defense-center-status {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.2);
}