/**
 * Deskbump Client Portal - Modern Dark Theme Design System
 * Version: 2.0.0
 */

:root {
  --db-bg-base: #0b0f17;
  --db-bg-surface: #121824;
  --db-bg-card: #182234;
  --db-bg-card-hover: #1f2b42;
  --db-bg-glass: rgba(24, 34, 52, 0.75);
  --db-border: rgba(255, 255, 255, 0.08);
  --db-border-focus: #3b82f6;

  --db-text-main: #f3f4f6;
  --db-text-muted: #94a3b8;
  --db-text-subtle: #64748b;

  --db-primary: #2563eb;
  --db-primary-hover: #1d4ed8;
  --db-primary-glow: rgba(37, 99, 235, 0.35);

  --db-accent: #06b6d4;
  --db-success: #10b981;
  --db-success-glow: rgba(16, 185, 129, 0.3);
  --db-warning: #f59e0b;
  --db-danger: #ef4444;
  --db-purple: #8b5cf6;

  --db-radius-sm: 6px;
  --db-radius-md: 10px;
  --db-radius-lg: 16px;
  --db-radius-xl: 22px;

  --db-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
  --db-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --db-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
  --db-font-main: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  --db-font-mono: 'JetBrains Mono', monospace;
}

/* Defensive Shield: Hide WordPress Admin Bar completely within the Portal */
#wpadminbar {
  display: none !important;
}
html {
  margin-top: 0 !important;
}

/* Reset & Base */
.deskbump-portal-body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--db-font-main);
  background-color: var(--db-bg-base);
  color: var(--db-text-main);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

#deskbump-app {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--db-font-main);
  color: var(--db-text-main);
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

#deskbump-app * {
  box-sizing: border-box;
}

/* Modern Portal Scrollbars */
.deskbump-portal-body * {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.16) rgba(15, 23, 42, 0.3);
}

.deskbump-portal-body ::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

.deskbump-portal-body ::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.3);
  border-radius: 999px;
}

.deskbump-portal-body ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  transition: all 0.2s ease;
}

.deskbump-portal-body ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Layout */
.db-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* Top Navbar */
.db-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 2rem;
  background: var(--db-bg-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--db-border);
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: 68px;
  box-sizing: border-box;
}

.db-nav-brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  color: var(--db-text-main);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  z-index: 2;
  position: relative;
  flex-shrink: 0;
}

.db-nav-brand img.db-nav-logo {
  height: 48px;
  width: auto;
  max-width: 240px;
  border-radius: 0;
  object-fit: contain;
  display: block;
}

.db-nav-brand img:not(.db-nav-logo) {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

.db-nav-brand-badge {
  font-size: 0.7rem;
  font-weight: 600;
  background: linear-gradient(135deg, var(--db-primary), var(--db-accent));
  padding: 2px 7px;
  border-radius: 12px;
  text-transform: uppercase;
  color: #fff;
}

.db-nav-center {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

@media (min-width: 1025px) {
  .db-nav-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: auto;
  }
  .db-nav-hamburger,
  .db-mobile-nav-drawer {
    display: none !important;
  }
}

@media (max-width: 1024px) {
  .db-nav-center {
    display: none !important;
  }
  .db-nav-hamburger {
    display: inline-flex !important;
  }
}

.db-nav-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  border-radius: var(--db-radius-md);
  color: var(--db-text-muted);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  transition: all 0.2s ease;
  cursor: pointer;
  border: 1px solid transparent;
}

.db-nav-item:hover {
  color: var(--db-text-main);
  background: rgba(255, 255, 255, 0.05);
}

.db-nav-item.active {
  color: #fff;
  background: rgba(37, 99, 235, 0.15);
  border-color: rgba(37, 99, 235, 0.3);
}

.db-nav-right {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  z-index: 2;
  position: relative;
  flex-shrink: 0;
}

/* Credit Balance Widget */
.db-credit-pill {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--db-border);
  padding: 0.35rem 0.45rem 0.35rem 0.95rem;
  border-radius: 30px;
  font-size: 0.9rem;
}

.db-credit-pill i {
  color: var(--db-accent);
}

.db-credit-amount {
  font-weight: 700;
  color: var(--db-text-main);
  font-family: var(--db-font-mono);
}

.db-btn-topup {
  background: linear-gradient(135deg, var(--db-primary), #1d4ed8);
  color: white;
  border: none;
  border-radius: 20px;
  padding: 0.25rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.db-btn-topup:hover {
  box-shadow: 0 0 12px var(--db-primary-glow);
  transform: translateY(-1px);
}

/* Primary Top-up & Buy Credits Button in Navbar */
#db-btn-topup-nav {
  padding: 0.38rem 1.05rem;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.35);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

#db-btn-topup-nav:hover {
  background: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%);
  box-shadow: 0 0 16px var(--db-primary-glow, rgba(37, 99, 235, 0.65));
  transform: translateY(-1px);
}

/* User Profile Menu */
.db-user-menu {
  position: relative;
}

.db-user-btn {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: var(--db-bg-surface);
  border: 1px solid var(--db-border);
  color: var(--db-text-main);
  cursor: pointer;
  font-size: 0.92rem;
  font-weight: 500;
  padding: 0.35rem 0.85rem 0.35rem 0.45rem;
  border-radius: 9999px;
  transition: all 0.2s ease;
  user-select: none;
}

.db-user-btn * {
  pointer-events: none;
}

.db-user-btn:hover,
.db-user-btn:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.05);
}

.db-btn-pay {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff !important;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.3rem 0.65rem;
  border-radius: var(--db-radius-sm);
  text-decoration: none;
  transition: all 0.15s ease;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.25);
  border: none;
  cursor: pointer;
}

.db-btn-pay:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(245, 158, 11, 0.4);
}

.db-status-completed {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.db-status-pending {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.db-status-failed {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.db-status-refunded {
  background: rgba(148, 163, 184, 0.15);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.3);
}

.db-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4f46e5, #06b6d4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  color: white;
}

.db-dropdown {
  position: absolute;
  right: 0;
  top: 120%;
  width: 250px;
  min-width: 240px;
  background: var(--db-bg-card);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius-lg);
  box-shadow: var(--db-shadow-lg);
  display: none;
  flex-direction: column;
  padding: 0.5rem;
  z-index: 150;
  backdrop-filter: blur(16px);
}

.db-dropdown.show {
  display: flex;
  animation: dbFadeIn 0.15s ease-out;
}

.db-dropdown-header {
  padding: 0.45rem 0.75rem 0.6rem;
  border-bottom: 1px solid var(--db-border);
  margin-bottom: 0.35rem;
}

.db-dropdown-user-name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--db-text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.db-dropdown-user-email {
  font-size: 0.76rem;
  color: var(--db-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.db-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.85rem;
  border-radius: var(--db-radius-sm);
  color: var(--db-text-muted);
  text-decoration: none;
  font-size: 0.88rem;
  cursor: pointer;
  transition: all 0.15s;
}

.db-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--db-text-main);
}

.db-dropdown-item.active {
  background: rgba(59, 130, 246, 0.12);
  color: var(--db-primary, #3b82f6);
  font-weight: 500;
}

.db-dropdown-item.active i {
  color: var(--db-primary, #3b82f6);
}

.db-dropdown-subgroup {
  display: flex;
  flex-direction: column;
  padding-left: 0.35rem;
  margin: 0.15rem 0 0.25rem 1.1rem;
  border-left: 2px solid rgba(255, 255, 255, 0.08);
}

.db-dropdown-item.db-dropdown-subitem {
  padding: 0.42rem 0.65rem;
  font-size: 0.82rem;
  gap: 0.65rem;
  color: var(--db-text-muted);
}

.db-dropdown-item.db-dropdown-subitem i {
  width: 14px;
  text-align: center;
  font-size: 0.78rem;
}

.db-dropdown-item.db-dropdown-subitem:hover {
  color: var(--db-text-main);
  background: rgba(255, 255, 255, 0.06);
}

.db-dropdown-item.db-dropdown-subitem.active {
  color: var(--db-primary, #3b82f6);
  background: rgba(59, 130, 246, 0.14);
}

.db-dropdown-divider {
  height: 1px;
  background: var(--db-border);
  margin: 0.35rem 0;
}

/* =========================================================================
   Mobile Navigation Hamburger Button & Slide-Down Drawer (<= 1024px)
   ========================================================================= */

/* Hamburger Toggle Button */
.db-nav-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--db-border, rgba(255, 255, 255, 0.1));
  border-radius: var(--db-radius-md, 10px);
  color: var(--db-text-main, #f1f5f9);
  cursor: pointer;
  padding: 0;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  font-size: 1.15rem;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  user-select: none;
}

.db-nav-hamburger:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
  color: #ffffff;
  transform: translateY(-1px);
}

.db-nav-hamburger:active {
  transform: translateY(0);
}

.db-nav-hamburger.active {
  background: rgba(37, 99, 235, 0.18);
  border-color: rgba(37, 99, 235, 0.45);
  color: #60a5fa;
}

/* Mobile Drawer Container */
.db-mobile-nav-drawer {
  position: fixed;
  top: 68px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.db-mobile-nav-drawer.open {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
}

/* Dark blurred backdrop overlay */
.db-mobile-nav-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
}

/* Slide-down drawer content */
.db-mobile-nav-content {
  position: relative;
  background: rgba(13, 17, 23, 0.98);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--db-border, rgba(255, 255, 255, 0.12));
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.85);
  padding: 1.25rem 1.5rem 1.5rem;
  max-height: calc(100vh - 78px);
  overflow-y: auto;
  transform: translateY(-14px);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

.db-mobile-nav-drawer.open .db-mobile-nav-content {
  transform: translateY(0);
}

.db-mobile-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.85rem;
  margin-bottom: 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.db-mobile-nav-title {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--db-text-subtle, #64748b);
}

.db-mobile-nav-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--db-border, rgba(255, 255, 255, 0.1));
  border-radius: 8px;
  color: var(--db-text-muted, #94a3b8);
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.2s ease;
  padding: 0;
}

.db-mobile-nav-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.25);
}

.db-mobile-nav-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.db-mobile-nav-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem 1rem;
  border-radius: var(--db-radius-md, 10px);
  color: var(--db-text-muted, #94a3b8);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.98rem;
  transition: all 0.18s ease;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  user-select: none;
}

.db-mobile-nav-item:hover {
  color: var(--db-text-main, #f8fafc);
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
}

.db-mobile-nav-item.active {
  color: #ffffff;
  background: rgba(37, 99, 235, 0.18);
  border-color: rgba(37, 99, 235, 0.35);
  font-weight: 600;
}

.db-mobile-nav-item-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--db-accent, #38bdf8);
  font-size: 1rem;
  flex-shrink: 0;
  transition: all 0.18s ease;
}

.db-mobile-nav-item:hover .db-mobile-nav-item-icon {
  background: rgba(255, 255, 255, 0.08);
  color: #60a5fa;
}

.db-mobile-nav-item.active .db-mobile-nav-item-icon {
  background: rgba(37, 99, 235, 0.3);
  color: #93c5fd;
}

.db-mobile-nav-item-text {
  flex: 1;
}

.db-mobile-nav-sublist {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0.25rem 0 0.5rem 1.25rem;
  padding-left: 0.75rem;
  border-left: 2px solid rgba(255, 255, 255, 0.08);
}

.db-mobile-nav-item.db-mobile-sublink {
  padding: 0.5rem 0.85rem;
  font-size: 0.85rem;
  color: var(--db-text-muted, #94a3b8);
  border-radius: 6px;
  background: transparent;
  border: 1px solid transparent;
  text-decoration: none;
}

.db-mobile-nav-item.db-mobile-sublink:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
}

.db-mobile-nav-item.db-mobile-sublink.active {
  color: #60a5fa;
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.25);
  font-weight: 600;
}

.db-mobile-nav-footer {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.db-mobile-nav-user-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.85rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--db-border, rgba(255, 255, 255, 0.08));
  border-radius: var(--db-radius-md, 10px);
}

.db-mobile-nav-user-meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.db-mobile-nav-user-name {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--db-text-main, #f8fafc);
}

.db-mobile-nav-user-credits {
  font-size: 0.8rem;
  color: var(--db-accent, #38bdf8);
  font-family: var(--db-font-mono, monospace);
  font-weight: 600;
}

.db-mobile-nav-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.db-mobile-nav-sublink {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--db-text-muted, #94a3b8);
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  background: none;
  border: none;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.18s ease;
}

.db-mobile-nav-sublink:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.05);
}

.db-mobile-nav-signout {
  color: var(--db-danger, #ef4444) !important;
  margin-left: auto;
}

.db-mobile-nav-signout:hover {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #f87171 !important;
}

/* Main Content Area */
.db-main {
  flex: 1;
  padding: 2rem;
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
}

/* Page Header */
.db-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.db-page-title {
  margin: 0;
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.db-page-subtitle {
  color: var(--db-text-muted);
  margin-top: 0.25rem;
  font-size: 0.95rem;
}

/* Quick Stats Ribbon */
.db-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
  margin-bottom: 2rem;
  position: relative;
  z-index: 40;
}

.db-stat-card {
  background: var(--db-bg-card);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius-lg);
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: transform 0.2s, border-color 0.2s;
  position: relative;
}

.db-stat-card:hover,
.db-stat-card:focus-within {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.15);
  z-index: 45;
}

.db-stat-card-burn,
.db-stat-card:has(.db-stat-popover.show) {
  z-index: 50;
}

.db-stat-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.db-stat-header {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.db-stat-info h4 {
  margin: 0;
  color: var(--db-text-muted);
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.db-stat-val {
  font-size: 1.85rem;
  font-weight: 800;
  margin-top: 0.35rem;
  font-family: var(--db-font-mono);
  line-height: 1.1;
}

.db-stat-sub {
  margin-top: 0.4rem;
  font-size: 0.76rem;
  color: var(--db-text-subtle);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.db-burn-breakdown {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.45rem;
  flex-wrap: wrap;
}

.db-burn-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  line-height: 1.3;
}

.db-burn-pill.running {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.db-burn-pill.idle {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.25);
}

.db-burn-pill strong {
  font-family: var(--db-font-mono, monospace);
  font-weight: 700;
}

.db-stat-info-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  z-index: 60;
}

.db-stat-info-btn {
  background: transparent;
  border: none;
  color: var(--db-text-subtle);
  cursor: pointer;
  padding: 0;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease, transform 0.15s ease;
  line-height: 1;
}

.db-stat-info-btn:hover,
.db-stat-info-btn.active {
  color: var(--db-accent, #06b6d4);
  transform: scale(1.15);
}

.db-stat-popover {
  position: absolute;
  top: calc(100% + 10px);
  right: -8px;
  width: 320px;
  max-width: min(320px, calc(100vw - 32px));
  background: rgba(15, 23, 42, 0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(6, 182, 212, 0.35);
  border-radius: var(--db-radius-md, 8px);
  padding: 0.95rem 1.1rem;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.75), 0 4px 14px rgba(0, 0, 0, 0.4);
  z-index: 1000 !important;
  display: none;
  flex-direction: column;
  gap: 0.75rem;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--db-text-muted);
  text-transform: none;
  letter-spacing: normal;
  font-weight: normal;
}

.db-stat-info-wrap:hover .db-stat-popover,
.db-stat-popover.show {
  display: flex;
  animation: dbFadeIn 0.18s ease-out;
}

.db-stat-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.db-stat-popover-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.db-stat-popover-close {
  background: none;
  border: none;
  color: var(--db-text-subtle);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 3px;
  transition: color 0.15s;
}

.db-stat-popover-close:hover {
  color: #ffffff;
}

.db-stat-popover-intro {
  margin: 0;
  font-size: 0.76rem;
  color: var(--db-text-muted);
}

.db-stat-popover-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  padding: 0.55rem 0.7rem;
}

.db-stat-popover-item-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  margin-bottom: 0.25rem;
}

.db-stat-popover-item-header strong {
  color: #ffffff;
}

.db-stat-popover-rate {
  margin-left: auto;
  font-family: var(--db-font-mono, monospace);
  font-weight: 700;
}

.db-stat-popover-item-desc {
  font-size: 0.72rem;
  color: var(--db-text-muted);
  line-height: 1.35;
}

.db-stat-popover-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.8rem;
}

.db-stat-popover-total span {
  color: var(--db-text-subtle);
  font-weight: 600;
}

.db-stat-popover-total strong {
  color: var(--db-accent, #06b6d4);
  font-family: var(--db-font-mono, monospace);
  font-size: 0.95rem;
}

.db-burn-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.db-burn-dot.running {
  background: #10b981;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.5);
}

.db-burn-dot.idle {
  background: #f59e0b;
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.5);
}

@media (max-width: 640px) {
  .db-stat-popover {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
    width: min(320px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    z-index: 1000 !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(6, 182, 212, 0.4) !important;
  }
}

.db-stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  flex-shrink: 0;
}

/* Action Toolbar */
.db-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
  background: var(--db-bg-surface);
  padding: 0.85rem 1.25rem;
  border-radius: var(--db-radius-lg);
  border: 1px solid var(--db-border);
  position: relative;
  z-index: 10;
}

/* Elevate toolbar above machine list when auto-refresh popover is active */
.db-toolbar:has(.db-refresh-popover.show),
.db-toolbar.has-open-popover {
  z-index: 150;
}

#db-machines-list-wrapper {
  position: relative;
  z-index: 1;
}

/* Elevate machine list above toolbar and stats ribbon when 3-dots more menu is open */
#db-machines-list-wrapper:has(.db-more-menu.show),
#db-machines-list-wrapper.has-open-menu {
  z-index: 100;
}

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

.db-search-box {
  position: relative;
  min-width: 260px;
}

.db-search-box i {
  position: absolute;
  left: 0.95rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--db-text-subtle);
  pointer-events: none;
  z-index: 2;
  font-size: 0.88rem;
}

.db-search-box input,
body.deskbump-portal-body .db-search-box input {
  width: 100%;
  background: var(--db-bg-card);
  border: 1px solid var(--db-border);
  padding: 0.55rem 0.85rem 0.55rem 2.65rem !important;
  border-radius: var(--db-radius-md);
  color: var(--db-text-main);
  font-family: var(--db-font-main);
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s;
}

.db-search-box input:focus,
body.deskbump-portal-body .db-search-box input:focus {
  border-color: var(--db-primary);
}

.db-select {
  background: var(--db-bg-card);
  border: 1px solid var(--db-border);
  color: var(--db-text-main);
  padding: 0.55rem 1rem;
  border-radius: var(--db-radius-md);
  font-family: var(--db-font-main);
  font-size: 0.9rem;
  outline: none;
  cursor: pointer;
}

/* Toolbar Sorting Controls */
.db-sort-control {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.db-select-sort {
  min-width: 160px;
}

.db-sort-dir-btn {
  width: 38px;
  height: 38px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--db-text-muted);
  border-radius: var(--db-radius-md, 6px);
  background: var(--db-bg-card);
  border: 1px solid var(--db-border);
  cursor: pointer;
  transition: all 0.2s ease;
}

.db-sort-dir-btn:hover {
  color: var(--db-primary);
  border-color: var(--db-primary);
  background: rgba(37, 99, 235, 0.1);
}

.db-view-toggle {
  display: flex;
  background: var(--db-bg-card);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius-md);
  overflow: hidden;
}

.db-view-btn {
  background: none;
  border: none;
  padding: 0.5rem 0.75rem;
  color: var(--db-text-muted);
  cursor: pointer;
  transition: all 0.15s;
}

.db-view-btn.active {
  background: rgba(255, 255, 255, 0.1);
  color: var(--db-text-main);
}

/* Primary Button */
.db-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, var(--db-primary), #1d4ed8);
  color: #fff;
  border: none;
  padding: 0.65rem 1.25rem;
  border-radius: var(--db-radius-md);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px var(--db-primary-glow);
  text-decoration: none;
}

.db-btn-primary:hover {
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.5);
  transform: translateY(-1px);
}

/* Virtual Machine Cards Grid */
.db-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 1.5rem;
}

.db-card {
  background: var(--db-bg-card);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius-xl);
  overflow: visible;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Elevate active card above sibling grid cards when more menu is open */
.db-card:has(.db-more-menu.show),
.db-card.has-open-menu {
  z-index: 60;
}

.db-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: var(--db-shadow-lg);
}

.db-card-header {
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border-bottom: 1px solid var(--db-border);
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

.db-card-title-group {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.db-os-badge {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  background: rgba(255, 255, 255, 0.05);
}

.db-os-badge.windows {
  color: #0078d4;
  background: rgba(0, 120, 212, 0.12);
}

.db-os-badge.linux {
  color: #e95420;
  background: rgba(233, 84, 32, 0.12);
}

.db-card-name {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0;
  color: var(--db-text-main);
}

.db-card-template {
  font-size: 0.8rem;
  color: var(--db-text-muted);
  margin-top: 0.15rem;
}

.db-star-btn {
  background: none;
  border: none;
  color: var(--db-text-subtle);
  font-size: 1.1rem;
  cursor: pointer;
  transition: color 0.15s;
}

.db-star-btn.fav {
  color: #fbbf24;
}

/* Status Indicator Pill */
.db-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.db-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.db-status-running {
  background: rgba(16, 185, 129, 0.12);
  color: var(--db-success);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.db-status-running .db-status-dot {
  background: var(--db-success);
  box-shadow: 0 0 8px var(--db-success);
  animation: dbPulse 2s infinite;
}

.db-status-stopped,
.db-status-terminated {
  background: rgba(239, 68, 68, 0.12);
  color: var(--db-danger);
  border: 1px solid rgba(239, 68, 68, 0.25);
}

.db-status-stopped .db-status-dot {
  background: var(--db-danger);
}

.db-status-provisioning,
.db-status-staging,
.db-status-stopping {
  background: rgba(245, 158, 11, 0.12);
  color: var(--db-warning);
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.db-status-provisioning .db-status-dot,
.db-status-stopping .db-status-dot {
  background: var(--db-warning);
  animation: dbBlink 1s infinite;
}

.db-status-deleted {
  background: rgba(148, 163, 184, 0.12);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.25);
}

.db-status-deleted .db-status-dot {
  background: #94a3b8;
}

.db-status-migrating {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.4);
}

.db-status-migrating .db-status-dot {
  background: #3b82f6;
  box-shadow: 0 0 8px #3b82f6;
  animation: dbPulse 1.5s infinite;
}

.db-status-migrating-error {
  background: rgba(239, 68, 68, 0.16);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.45);
}

.db-status-migrating-error .db-status-dot {
  background: #ef4444;
  box-shadow: 0 0 8px #ef4444;
  animation: dbPulse 1.1s infinite;
}

.db-card.db-card-deleted {
  opacity: 0.65;
  filter: grayscale(0.5);
  border-color: rgba(148, 163, 184, 0.2);
}

.db-card.db-card-deleted:hover {
  opacity: 0.85;
  filter: grayscale(0.2);
}

.db-card.db-card-deleted:has(.db-more-menu.show),
.db-card.db-card-deleted.has-open-menu {
  opacity: 1;
  filter: none;
}

/* Card Body */
.db-card-body {
  padding: 1.25rem 1.5rem;
  flex: 1;
}

.db-specs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.db-spec-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--db-text-muted);
}

.db-spec-item i {
  color: var(--db-text-subtle);
  width: 16px;
}

.db-spec-item.db-spec-gpu {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.38rem 0.65rem;
  border-radius: var(--db-radius-sm);
  font-size: 0.82rem;
  line-height: 1.3;
  margin-top: 0.15rem;
  box-sizing: border-box;
}

.db-spec-item.db-spec-gpu.has-gpu {
  background: rgba(192, 132, 252, 0.08);
  border: 1px solid rgba(192, 132, 252, 0.25);
  color: #c084fc;
  font-weight: 600;
}

.db-spec-item.db-spec-gpu.has-gpu .db-spec-gpu-icon {
  display: inline-flex;
  align-items: center;
  color: #c084fc;
}

.db-spec-item.db-spec-gpu.no-gpu {
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(255, 255, 255, 0.08);
  color: var(--db-text-subtle);
  font-weight: 500;
}

.db-spec-item.db-spec-gpu.no-gpu .db-spec-gpu-icon {
  display: inline-flex;
  align-items: center;
  color: var(--db-text-subtle);
  opacity: 0.55;
}

.db-spec-item.db-spec-gpu.no-gpu .db-spec-gpu-text {
  letter-spacing: 0.04em;
  font-size: 0.78rem;
  font-weight: 600;
}

.db-card-gpu-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 1px 6px;
  background: rgba(192, 132, 252, 0.15);
  border: 1px solid rgba(192, 132, 252, 0.35);
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  color: #c084fc;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  vertical-align: middle;
  margin-left: 0.4rem;
}

.db-card-gpu-tag-icon {
  width: 0.9em;
  height: 0.9em;
}

.db-ip-box {
  background: var(--db-bg-base);
  border: 1px solid var(--db-border);
  padding: 0.55rem 0.85rem;
  border-radius: var(--db-radius-md);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1rem;
}

.db-ip-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.db-ip-val {
  font-family: var(--db-font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--db-text-main);
}

.db-copy-icon {
  color: var(--db-text-subtle);
  cursor: pointer;
  transition: color 0.15s;
}

.db-copy-icon:hover {
  color: var(--db-text-main);
}

.db-burnrate-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
  padding: 0.5rem 0;
  border-top: 1px dashed var(--db-border);
  color: var(--db-text-muted);
}

.db-burnrate-val {
  font-family: var(--db-font-mono);
  font-weight: 700;
  color: var(--db-accent);
}

/* Card Screenshot Preview */
.db-card-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 140px;
  background: #090d16;
  border-bottom: 1px solid var(--db-border);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}

.db-card-preview-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  cursor: pointer;
  transition: transform 0.25s ease, filter 0.25s ease;
}

.db-card-preview:hover .db-card-preview-img {
  transform: scale(1.02);
  filter: brightness(1.06);
}

.db-card-preview-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, #111827 0%, #030712 100%);
  color: var(--db-text-subtle);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: default;
}

.db-card-preview-placeholder i {
  font-size: 1.8rem;
  opacity: 0.6;
}

.db-card-preview-placeholder.running {
  cursor: pointer;
  color: #94a3b8;
}

.db-card-preview-placeholder.running i {
  color: #10b981;
  opacity: 0.85;
}

.db-card-preview-placeholder.stopped i {
  color: #64748b;
}

.db-card-preview-placeholder.provisioning i {
  color: #3b82f6;
}

.db-card-preview-placeholder.deleted i {
  color: #ef4444;
}

.db-preview-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
  pointer-events: none;
  z-index: 2;
}

.db-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 6px #10b981;
  animation: dbPulse 1.8s infinite;
}

.db-preview-refresh-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #cbd5e1;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  cursor: pointer;
  transition: all 0.2s;
  z-index: 3;
}

.db-preview-refresh-btn:hover {
  background: rgba(37, 99, 235, 0.8);
  border-color: #3b82f6;
  color: #fff;
  transform: rotate(90deg);
}

/* First-Time Provisioning Preview Overlay */
.db-first-provision-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 15, 29, 0.65);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem 1.25rem;
  box-sizing: border-box;
  text-align: center;
  z-index: 3;
  transition: opacity 0.3s ease;
}

.db-card-preview-img.blurred {
  filter: blur(3px) brightness(0.8);
}

.db-provision-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(245, 158, 11, 0.18);
  border: 1px solid rgba(245, 158, 11, 0.45);
  color: #fbbf24;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.03em;
  margin-bottom: 8px;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.db-provision-title {
  color: #f8fafc;
  font-size: 0.88rem;
  font-weight: 700;
  margin-bottom: 4px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.db-provision-msg {
  color: #cbd5e1;
  font-size: 0.74rem;
  line-height: 1.35;
  max-width: 92%;
  margin-bottom: 12px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.db-provision-progress {
  width: 78%;
  height: 6px;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}

.db-provision-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  min-width: 6%;
  background: linear-gradient(90deg, #f59e0b, #3b82f6 50%, #10b981 100%);
  background-size: 200% 100%;
  border-radius: 999px;
  transition: width 1s linear;
  animation: dbProvisionShimmer 2.5s infinite linear;
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
}

.db-provision-bar:not([style*="width"]) {
  width: 40%;
  animation: db-provision-slide 1.8s infinite ease-in-out;
}

.db-provision-stage {
  color: #93c5fd;
  font-size: 0.72rem;
  font-weight: 600;
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

@keyframes dbProvisionShimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

@keyframes db-provision-slide {
  0% { left: -40%; width: 30%; }
  50% { width: 50%; }
  100% { left: 100%; width: 30%; }
}

.db-preview-badge.setup {
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.3);
}

.db-live-dot.orange {
  background: #f59e0b;
  box-shadow: 0 0 6px #f59e0b;
}

/* Card Actions Footer */
.db-card-footer {
  padding: 1rem 1.5rem;
  background: rgba(0, 0, 0, 0.15);
  border-top: 1px solid var(--db-border);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}

.db-btn-connect {
  flex: 1;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  border: none;
  padding: 0.55rem;
  border-radius: var(--db-radius-md);
  font-weight: 600;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  cursor: pointer;
  transition: all 0.2s;
}

.db-btn-connect:hover {
  box-shadow: 0 0 14px var(--db-success-glow);
}

.db-btn-action {
  width: 38px;
  height: 38px;
  background: var(--db-bg-surface);
  border: 1px solid var(--db-border);
  color: var(--db-text-muted);
  border-radius: var(--db-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.db-btn-action:hover {
  color: var(--db-text-main);
  border-color: rgba(255, 255, 255, 0.2);
}

.db-btn-action.start:hover {
  color: var(--db-success);
  border-color: var(--db-success);
}

.db-btn-action.stop:hover {
  color: var(--db-warning);
  border-color: var(--db-warning);
}

.db-btn-action.delete:hover {
  color: var(--db-danger);
  border-color: var(--db-danger);
}

.db-btn-action.db-refreshing {
  opacity: 0.85;
  cursor: wait;
  border-color: var(--db-primary);
  color: var(--db-primary);
}

.db-btn-action.db-refreshing i,
.db-btn-action i.fa-spin {
  display: inline-block;
  animation: db-action-spin 0.75s linear infinite;
}

@keyframes db-action-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Modal Windows */
.db-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  z-index: 1000;
}

.db-modal-overlay.show {
  display: flex;
  animation: dbFadeIn 0.2s ease-out;
}

.db-modal {
  background: var(--db-bg-card);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius-xl);
  width: 100%;
  max-width: 680px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--db-shadow-lg);
  display: flex;
  flex-direction: column;
}

.db-modal.wide {
  max-width: 900px;
}

.db-modal.full {
  max-width: 1200px;
  height: 85vh;
}

.db-modal-header {
  padding: 1.5rem;
  border-bottom: 1px solid var(--db-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.db-modal-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.db-modal-close {
  background: none;
  border: none;
  color: var(--db-text-subtle);
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0.25rem;
  transition: color 0.15s;
}

.db-modal-close:hover {
  color: var(--db-text-main);
}

.db-modal-body {
  padding: 1.5rem;
  flex: 1;
}

.db-modal-footer {
  padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--db-border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.85rem;
  background: rgba(0, 0, 0, 0.1);
}

/* Tabs inside Modal / Pages */
.db-tabs {
  display: flex;
  gap: 0.5rem;
  border-bottom: 1px solid var(--db-border);
  margin-bottom: 1.5rem;
}

.db-tab-btn {
  background: none;
  border: none;
  padding: 0.75rem 1.25rem;
  color: var(--db-text-muted);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.db-tab-btn:hover {
  color: var(--db-text-main);
}

.db-tab-btn.active {
  color: var(--db-primary);
  border-bottom-color: var(--db-primary);
}

/* Forms */
.db-form-group {
  margin-bottom: 1.25rem;
}

.db-form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--db-text-muted);
  margin-bottom: 0.5rem;
}

.db-input {
  width: 100%;
  background: var(--db-bg-base);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius-md);
  padding: 0.7rem 1rem;
  color: var(--db-text-main);
  font-family: var(--db-font-main);
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s;
}

.db-input:focus {
  border-color: var(--db-primary);
}

/* Template Selection Cards & Filter Bar */
.db-tpl-filter-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.85rem;
  background: var(--db-bg-base);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius-lg);
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.db-tpl-filter-group {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.db-tpl-filter-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--db-text-subtle);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

.db-tpl-filter-label i {
  color: var(--db-primary);
  font-size: 0.8rem;
}

.db-tpl-pill-group {
  display: inline-flex;
  align-items: center;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid var(--db-border);
  border-radius: 999px;
  padding: 2px;
  gap: 2px;
}

.db-tpl-pill-btn {
  background: transparent;
  border: none;
  border-radius: 999px;
  color: var(--db-text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: all 0.15s ease;
  white-space: nowrap;
  line-height: 1;
}

.db-tpl-pill-btn:hover:not(.active) {
  color: var(--db-text-main);
  background: rgba(255, 255, 255, 0.06);
}

.db-tpl-pill-btn.active {
  background: var(--db-primary);
  color: #ffffff;
  box-shadow: 0 0 10px var(--db-primary-glow);
}

.db-tpl-pill-btn.active i {
  color: #ffffff;
}

.db-tpl-filter-divider {
  width: 1px;
  height: 24px;
  background: var(--db-border);
}

.db-tpl-filter-meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.db-tpl-count-badge {
  font-size: 0.8rem;
  color: var(--db-text-subtle);
  white-space: nowrap;
}

.db-tpl-count-badge strong {
  color: var(--db-text-main);
}

.db-tpl-clear-filters-btn {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: var(--db-danger);
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: all 0.15s ease;
}

.db-tpl-clear-filters-btn:hover {
  background: rgba(239, 68, 68, 0.22);
  border-color: var(--db-danger);
  color: #ffffff;
}

/* Tooltips for Filter Bar Elements */
.db-tpl-filter-bar [data-tooltip] {
  position: relative;
}

.db-tpl-filter-bar [data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #0b1120;
  color: #f1f5f9;
  font-family: var(--db-font-main, sans-serif);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.35;
  padding: 0.38rem 0.65rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  white-space: normal;
  width: max-content;
  max-width: 250px;
  text-align: center;
  text-transform: none;
  letter-spacing: normal;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(59, 130, 246, 0.2);
  z-index: 1000;
}

.db-tpl-filter-bar [data-tooltip]::after {
  content: "";
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  border-width: 6px 5px 0 5px;
  border-style: solid;
  border-color: #0b1120 transparent transparent transparent;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
  z-index: 1000;
}

.db-tpl-filter-bar [data-tooltip]:hover::before,
.db-tpl-filter-bar [data-tooltip]:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.db-tpl-filter-bar .db-tpl-clear-filters-btn[data-tooltip]::before,
.db-tpl-filter-bar .db-tpl-count-badge[data-tooltip]::before {
  left: auto;
  right: 0;
  transform: translateY(4px);
}

.db-tpl-filter-bar .db-tpl-clear-filters-btn[data-tooltip]::after,
.db-tpl-filter-bar .db-tpl-count-badge[data-tooltip]::after {
  left: auto;
  right: 14px;
  transform: translateY(4px);
}

.db-tpl-filter-bar .db-tpl-clear-filters-btn[data-tooltip]:hover::before,
.db-tpl-filter-bar .db-tpl-count-badge[data-tooltip]:hover::before,
.db-tpl-filter-bar .db-tpl-clear-filters-btn[data-tooltip]:hover::after,
.db-tpl-filter-bar .db-tpl-count-badge[data-tooltip]:hover::after {
  transform: translateY(0);
}

/* Template Card Top Status/Selection Row (Fixed Height to Prevent Layout Shift) */
.db-tpl-card-top-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 22px;
  min-height: 22px;
  margin-bottom: 0.45rem;
  box-sizing: border-box;
}

.db-tpl-badge.db-tpl-badge-selected {
  background: rgba(16, 185, 129, 0.2) !important;
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.45) !important;
  font-weight: 800 !important;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.2);
}

/* Template Card Badges */
.db-tpl-card-badges {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.65rem;
  flex-wrap: wrap;
}

.db-tpl-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
}

.db-tpl-badge.windows {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.db-tpl-badge.linux {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.db-tpl-badge.gpu {
  background: rgba(168, 85, 247, 0.18);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.35);
  box-shadow: 0 0 8px rgba(168, 85, 247, 0.25);
}

.db-tpl-badge.cpu {
  background: rgba(255, 255, 255, 0.06);
  color: var(--db-text-muted);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.db-tpl-badge.spot {
  background: rgba(234, 179, 8, 0.15);
  color: #facc15;
  border: 1px solid rgba(234, 179, 8, 0.35);
}

.db-tpl-badge.normal {
  background: rgba(16, 185, 129, 0.12);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.db-tpl-badge.quota-avail {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.35);
}

.db-tpl-badge.quota-exhausted {
  background: rgba(239, 68, 68, 0.18);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.4);
}

.db-tpl-quota-capacity {
  font-size: 0.76rem;
  font-weight: 600;
  margin-top: 0.35rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.db-tpl-quota-capacity.is-available {
  color: #34d399;
}

.db-tpl-quota-capacity.is-exhausted {
  color: #f87171;
}

.db-tpl-card.quota-exhausted {
  opacity: 0.75;
}

.db-tpl-card.quota-exhausted:hover {
  border-color: rgba(239, 68, 68, 0.4);
}

.db-gpu-icon {
  display: inline-block;
  vertical-align: -0.15em;
  width: 1.05em;
  height: 1.05em;
  stroke: currentColor;
  fill: none;
  flex-shrink: 0;
}

.db-tpl-badge .db-gpu-icon {
  width: 0.95em;
  height: 0.95em;
  vertical-align: -0.1em;
}

.db-tpl-pill-btn .db-gpu-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.12em;
}

.db-tpl-spec-gpu {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: #c084fc;
  font-weight: 500;
}

/* Template Empty State */
.db-tpl-empty-state {
  grid-column: 1 / -1;
  padding: 3rem 2rem;
  text-align: center;
  background: var(--db-bg-base);
  border: 1px dashed var(--db-border);
  border-radius: var(--db-radius-xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.db-tpl-empty-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--db-border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.25rem;
}

.db-tpl-empty-icon i {
  font-size: 1.6rem;
  color: var(--db-text-subtle);
}

.db-tpl-empty-state h4 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--db-text-main);
  letter-spacing: -0.01em;
}

.db-tpl-empty-state p {
  margin: 0 0 0.5rem 0;
  font-size: 0.88rem;
  color: var(--db-text-muted);
  max-width: 440px;
  line-height: 1.5;
}

.db-tpl-empty-reset-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.55rem 1.25rem;
  background: rgba(37, 99, 235, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.35);
  color: #60a5fa;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: var(--db-radius-md, 8px);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  line-height: 1.2;
}

.db-tpl-empty-reset-btn i {
  font-size: 0.85rem !important;
  color: inherit !important;
  margin: 0 !important;
  transition: transform 0.2s ease;
}

.db-tpl-empty-reset-btn:hover {
  background: var(--db-primary);
  border-color: var(--db-primary);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px var(--db-primary-glow);
}

.db-tpl-empty-reset-btn:hover i {
  transform: rotate(-45deg);
}

.db-tpl-empty-reset-btn:active {
  transform: translateY(0);
}

.db-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.55rem 1.15rem;
  background: var(--db-bg-surface, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--db-border, rgba(255, 255, 255, 0.12));
  color: var(--db-text-main, #f8fafc);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: var(--db-radius-md, 8px);
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  line-height: 1.2;
}

.db-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
  color: #ffffff;
  transform: translateY(-1px);
}

.db-btn-secondary:active {
  transform: translateY(0);
}

.db-btn-secondary:disabled,
.db-btn-secondary.disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  transform: none !important;
  box-shadow: none !important;
}

.db-template-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  max-height: 480px;
  overflow-y: auto;
  padding: 0.25rem 0.5rem 0.5rem 0.25rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(59, 130, 246, 0.4) rgba(15, 23, 42, 0.35);
}

@media (max-width: 980px) {
  .db-template-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .db-template-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* Modern Template Grid Custom Scrollbar */
.db-template-grid::-webkit-scrollbar {
  width: 7px;
}

.db-template-grid::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.35);
  border-radius: 999px;
  margin: 6px 0;
}

.db-template-grid::-webkit-scrollbar-thumb {
  background: rgba(59, 130, 246, 0.35);
  border-radius: 999px;
  transition: all 0.2s ease;
}

.db-template-grid::-webkit-scrollbar-thumb:hover {
  background: var(--db-primary, #3b82f6);
  box-shadow: 0 0 10px var(--db-primary-glow, rgba(59, 130, 246, 0.5));
}

.db-template-grid::-webkit-scrollbar-corner {
  background: transparent;
}

.db-tpl-card {
  background: var(--db-bg-base);
  border: 2px solid var(--db-border);
  border-radius: var(--db-radius-lg);
  padding: 1.25rem;
  cursor: pointer;
  transition: all 0.2s;
}

.db-tpl-card:hover {
  border-color: rgba(255, 255, 255, 0.2);
}

.db-tpl-card.selected {
  border-color: #10b981;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(16, 185, 129, 0.08));
  box-shadow: 0 0 18px rgba(16, 185, 129, 0.22), inset 0 0 0 1px rgba(16, 185, 129, 0.4);
}

@keyframes dbTplPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    border-color: #10b981;
    transform: scale(1);
  }
  30% {
    box-shadow: 0 0 28px 6px rgba(16, 185, 129, 0.55), inset 0 0 15px rgba(16, 185, 129, 0.25);
    border-color: #34d399;
    transform: scale(1.02);
  }
  70% {
    box-shadow: 0 0 20px 2px rgba(6, 182, 212, 0.45);
    border-color: #06b6d4;
    transform: scale(1.01);
  }
  100% {
    box-shadow: 0 0 18px rgba(16, 185, 129, 0.22), inset 0 0 0 1px rgba(16, 185, 129, 0.4);
    border-color: #10b981;
    transform: scale(1);
  }
}

.db-tpl-card.db-tpl-pulse-highlight {
  animation: dbTplPulse 2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  z-index: 10;
  position: relative;
}

.db-tpl-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  color: #ffffff !important;
}

.db-tpl-price {
  font-family: var(--db-font-mono);
  font-weight: 700;
  color: var(--db-accent);
  font-size: 1.15rem;
  margin-top: 0.75rem;
}

/* Idle Storage Pricing Badges on Template Cards & Rows */
.db-tpl-idle-price {
  font-size: 0.78rem;
  color: #fbbf24;
  margin-top: 0.35rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 500;
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.2);
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  width: fit-content;
}

.db-tpl-idle-price strong {
  font-family: var(--db-font-mono);
  font-weight: 700;
  color: #fef08a;
}

.db-tpl-list-idle-price {
  font-size: 0.72rem;
  color: #fbbf24;
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
}

.db-tpl-list-idle-price strong {
  font-family: var(--db-font-mono);
  font-weight: 700;
  color: #fef08a;
}

/* Payment History Table Badges */
.db-history-package-name {
  font-weight: 600;
  color: #ffffff;
  display: inline-block;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.db-badge-discount {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 0.78rem;
  font-family: var(--db-font-mono);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

/* Payment History Table Optimizations */
.db-txid-cell {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  vertical-align: middle;
}

.db-txid-code {
  font-family: var(--db-font-mono, monospace);
  font-size: 0.82rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 3px 7px;
  border-radius: 4px;
  color: #e2e8f0;
  letter-spacing: 0.04em;
  font-weight: 500;
}

.db-btn-copy-tx {
  background: transparent;
  border: 1px solid transparent;
  color: var(--db-text-muted, #94a3b8);
  padding: 3px 6px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  transition: all 0.15s ease;
  line-height: 1;
}

.db-btn-copy-tx:hover {
  color: var(--db-primary, #3b82f6);
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.3);
}

.db-btn-copy-tx.copied {
  color: #10b981;
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.3);
}

.db-btn-invoice {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--db-text-main, #f8fafc);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.38rem 0.85rem;
  border-radius: var(--db-radius-sm, 6px);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.18s ease;
  width: auto;
  box-sizing: border-box;
  text-decoration: none;
  line-height: 1.25;
}

.db-btn-invoice:hover:not(:disabled) {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.45);
  color: #60a5fa;
  transform: translateY(-1px);
}

.db-btn-invoice:disabled {
  opacity: 0.75;
  cursor: wait;
}

.db-btn-invoice.is-requested {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.35);
  color: #34d399;
  cursor: default;
}

.db-btn-invoice.is-requested:hover {
  background: rgba(16, 185, 129, 0.18);
  border-color: rgba(16, 185, 129, 0.5);
  color: #34d399;
  transform: none;
}

.db-btn-invoice i {
  font-size: 0.82rem;
  flex-shrink: 0;
}

/* Remote Access UI */
.db-connect-box {
  background: var(--db-bg-base);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius-lg);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.db-cred-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--db-border);
}

.db-cred-row:last-child {
  border-bottom: none;
}

.db-cred-label {
  color: var(--db-text-muted);
  font-size: 0.9rem;
}

.db-cred-val {
  font-family: var(--db-font-mono);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* In-Browser Remote Desktop & WebSSH Terminal */
.db-viewport-container {
  width: 100%;
  min-height: 520px;
  height: auto;
  background: #000;
  border-radius: var(--db-radius-md);
  overflow: visible;
  position: relative;
  display: flex;
  flex-direction: column;
}

.db-viewport-bar {
  background: #111;
  padding: 0.6rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  flex-wrap: wrap;
  gap: 0.5rem;
}

.db-viewport-content {
  flex: 1;
  width: 100%;
  height: auto;
  min-height: 460px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: visible;
}

/* Toast Notifications */
.db-toast-container {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  z-index: 9999;
}

.db-toast {
  background: var(--db-bg-card);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius-md);
  padding: 0.85rem 1.25rem;
  color: var(--db-text-main);
  box-shadow: var(--db-shadow-lg);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 280px;
  animation: dbSlideUp 0.25s ease-out;
}

.db-toast.success {
  border-color: var(--db-success);
}
.db-toast.error {
  border-color: var(--db-danger);
}

/* Tables */
.db-table-wrapper {
  overflow: visible;
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius-lg);
  background: var(--db-bg-card);
  position: relative;
}

.db-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.db-table tr:first-child th:first-child { border-top-left-radius: var(--db-radius-lg); }
.db-table tr:first-child th:last-child { border-top-right-radius: var(--db-radius-lg); }
.db-table tr:last-child td:first-child { border-bottom-left-radius: var(--db-radius-lg); }
.db-table tr:last-child td:last-child { border-bottom-right-radius: var(--db-radius-lg); }

/* Elevate active table row and cell when 3-dots more menu is open */
.db-table tr:has(.db-more-menu.show),
.db-table tr.has-open-menu {
  position: relative;
  z-index: 60;
}

.db-table td:has(.db-more-menu.show),
.db-table td.has-open-menu {
  position: relative;
  z-index: 70;
}

.db-table th {
  background: var(--db-bg-surface);
  color: var(--db-text-muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--db-border);
}

.db-table td {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--db-border);
  font-size: 0.9rem;
}

.db-table tr:last-child td {
  border-bottom: none;
}

.db-table-gpu-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  padding: 0.28rem 0.6rem;
  border-radius: var(--db-radius-sm);
  white-space: nowrap;
}

.db-table-gpu-badge.has-gpu {
  background: rgba(192, 132, 252, 0.1);
  border: 1px solid rgba(192, 132, 252, 0.3);
  color: #c084fc;
  font-weight: 600;
}

.db-table-gpu-badge.has-gpu .db-table-gpu-svg {
  color: #c084fc;
  width: 1.05em;
  height: 1.05em;
}

.db-table-gpu-badge.no-gpu {
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(255, 255, 255, 0.1);
  color: var(--db-text-subtle);
  font-weight: 600;
  letter-spacing: 0.04em;
  font-size: 0.76rem;
}

.db-table-gpu-badge.no-gpu .db-no-gpu-label {
  color: var(--db-text-subtle);
  opacity: 0.75;
}

/* Animations */
@keyframes dbFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

@keyframes dbPulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

@keyframes dbBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* Responsive */
@media (max-width: 768px) {
  .db-navbar {
    padding: 0.75rem 1rem;
  }
  .db-nav-brand img.db-nav-logo {
    height: 36px;
    max-width: 160px;
  }
  .db-main {
    padding: 1rem;
  }
  .db-grid {
    grid-template-columns: 1fr;
  }
  .db-stats-row {
    grid-template-columns: 1fr;
  }
  .db-nav-center {
    display: none !important;
  }
}

@media (max-width: 640px) {
  .db-user-btn span,
  .db-user-btn .fa-chevron-down {
    display: none !important;
  }
  .db-user-btn {
    padding: 0.35rem !important;
    border-radius: 50% !important;
  }
  .db-nav-right {
    gap: 0.65rem !important;
  }
  .db-credit-pill {
    padding: 0.35rem 0.65rem !important;
    gap: 0.45rem !important;
    font-size: 0.82rem !important;
  }
  .db-btn-topup {
    padding: 0.2rem 0.55rem !important;
    font-size: 0.75rem !important;
  }
  #db-btn-topup-nav {
    padding: 0.3rem 0.8rem !important;
    font-size: 0.8rem !important;
  }
}

@media (max-width: 480px) {
  .db-nav-brand img.db-nav-logo {
    height: 32px !important;
    max-width: 125px !important;
  }
  .db-nav-brand-badge {
    display: none !important;
  }
  .db-credit-pill {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.78rem !important;
  }
  .db-navbar {
    padding: 0.55rem 0.85rem !important;
  }
}


.db-btn-connect:disabled,
.db-btn-connect.disabled {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--db-text-subtle, #64748b) !important;
  border: 1px solid var(--db-border, rgba(255, 255, 255, 0.1)) !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  box-shadow: none !important;
  transform: none !important;
  opacity: 0.5 !important;
}

.db-btn-connect.booting {
  flex: 1;
  background: rgba(59, 130, 246, 0.12) !important;
  color: #60a5fa !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
  padding: 0.55rem;
  border-radius: var(--db-radius-md);
  font-weight: 600;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  cursor: default !important;
  pointer-events: none !important;
  box-shadow: none !important;
  animation: db-pulse-glow 2s infinite ease-in-out;
}

.db-booting-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 4px 10px;
  font-size: 0.78rem;
  color: #60a5fa;
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.28);
  border-radius: var(--db-radius-sm);
  font-weight: 600;
  animation: db-pulse-glow 2s infinite ease-in-out;
}

@keyframes db-pulse-glow {
  0%, 100% {
    opacity: 0.85;
    border-color: rgba(59, 130, 246, 0.25);
  }
  50% {
    opacity: 1;
    border-color: rgba(59, 130, 246, 0.55);
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.2);
  }
}



/* DeskBump WebSSH & PowerShell Terminal Emulator (Putty / Native Console Style) */
.db-ssh-terminal-wrapper {
  width: 100%;
  height: 480px;
  max-height: 480px;
  background: #090d16;
  display: flex;
  flex-direction: column;
  font-family: var(--db-font-mono, 'JetBrains Mono', 'Fira Code', 'Courier New', monospace);
  overflow: hidden;
  border-radius: var(--db-radius-md);
  cursor: text;
  position: relative;
  text-align: left;
}

.db-ssh-terminal-wrapper.powershell-term {
  background: #060a14;
}

.db-ssh-terminal-output {
  flex: 1;
  height: 100%;
  max-height: 100%;
  padding: 1.25rem 1.25rem;
  overflow-y: auto;
  overflow-x: hidden;
  font-size: 0.86rem;
  line-height: 1.6;
  color: #10b981;
  background: #090d16;
  white-space: pre-wrap;
  word-break: break-word;
  user-select: text;
  text-align: left;
  scrollbar-width: thin;
  scrollbar-color: rgba(16, 185, 129, 0.5) rgba(15, 23, 42, 0.7);
}

.powershell-term .db-ssh-terminal-output {
  color: #e2e8f0;
  background: #060a14;
  text-align: left;
  scrollbar-color: rgba(56, 189, 248, 0.5) rgba(15, 23, 42, 0.7);
}

/* Custom Terminal Scrollbar */
.db-ssh-terminal-output::-webkit-scrollbar {
  width: 12px;
}

.db-ssh-terminal-output::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.7);
  border-radius: 6px;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
}

.db-ssh-terminal-output::-webkit-scrollbar-thumb {
  background: rgba(16, 185, 129, 0.45);
  border-radius: 6px;
  border: 2px solid rgba(15, 23, 42, 0.7);
}

.db-ssh-terminal-output::-webkit-scrollbar-thumb:hover {
  background: rgba(16, 185, 129, 0.85);
}

.powershell-term .db-ssh-terminal-output::-webkit-scrollbar-thumb {
  background: rgba(56, 189, 248, 0.45);
  border: 2px solid rgba(15, 23, 42, 0.7);
}

.powershell-term .db-ssh-terminal-output::-webkit-scrollbar-thumb:hover {
  background: rgba(56, 189, 248, 0.85);
}

.db-ssh-terminal-output .term-banner {
  color: #38bdf8;
  margin-bottom: 0.85rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  user-select: text;
  text-align: left;
}

.db-ssh-terminal-output .term-prompt {
  color: #f59e0b;
  font-weight: normal;
  white-space: nowrap;
  user-select: none;
}

.db-ssh-terminal-output .term-prompt-ps {
  color: #38bdf8;
  font-weight: normal;
  white-space: nowrap;
  user-select: none;
}

.db-ssh-terminal-output .term-cmd,
.db-ssh-terminal-output .term-cmd-text,
.db-ssh-terminal-output .db-ssh-cmd-text {
  color: #f8fafc;
  font-weight: normal;
  word-break: break-all;
}

.db-ssh-terminal-output .term-out {
  color: #e2e8f0;
  margin: 0.25rem 0 0.65rem 0;
  user-select: text;
  white-space: pre-wrap;
  word-break: break-word;
  text-align: left;
}

.db-ssh-terminal-output .term-err {
  color: #ef4444;
  margin: 0.25rem 0 0.65rem 0;
  user-select: text;
  white-space: pre-wrap;
  word-break: break-word;
  text-align: left;
}

.db-ssh-terminal-output .term-info {
  color: #94a3b8;
  font-style: italic;
  margin: 0.25rem 0 0.5rem 0;
  text-align: left;
}

.term-line {
  display: block;
  width: 100%;
  margin: 0.15rem 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  white-space: pre-wrap;
  word-break: break-word;
  text-align: left;
}

.db-term-active-line {
  margin-top: 0.35rem;
  display: block;
  width: 100%;
  text-align: left;
}

/* Blinking terminal cursor block */
.term-cursor {
  display: inline-block;
  width: 8px;
  height: 1.15em;
  background-color: #10b981;
  vertical-align: sub;
  animation: db-term-blink 1s step-start infinite;
  margin-left: 1px;
}

.term-cursor.ps-cursor {
  background-color: #38bdf8;
}

@keyframes db-term-blink {
  0%, 50% { opacity: 1; }
  50.1%, 100% { opacity: 0; }
}

/* Offscreen invisible keystroke capture input */
.db-term-hidden-capture,
input.db-term-hidden-capture,
body.deskbump-portal-body .db-modal input.db-term-hidden-capture {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
  background-color: transparent !important;
  display: block !important;
}

.db-ssh-chip {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  font-size: 0.72rem;
  font-family: var(--db-font-mono, 'JetBrains Mono', monospace);
  padding: 2px 7px;
  border-radius: var(--db-radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
}

.db-ssh-chip:hover {
  background: rgba(16, 185, 129, 0.15);
  border-color: #10b981;
  color: #10b981;
}

.powershell-term .db-ssh-chip:hover {
  background: rgba(56, 189, 248, 0.15);
  border-color: #38bdf8;
  color: #38bdf8;
}

/* =========================================================================
   Toolbar Auto-Refresh Slider & Popover
   ========================================================================= */
.db-refresh-slider-container {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.db-refresh-slider-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0 0.65rem;
  width: auto;
  min-width: 44px;
}

.db-refresh-rate-badge {
  font-size: 0.72rem;
  font-weight: 700;
  font-family: var(--db-font-mono, monospace);
  color: var(--db-accent);
}

.db-refresh-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 275px;
  max-width: 320px;
  background: var(--db-bg-card);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius-lg);
  padding: 1.15rem 1.25rem;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 120;
  display: none;
  flex-direction: column;
}

.db-refresh-popover.show {
  display: flex;
  animation: dbFadeIn 0.18s ease-out;
}

.db-refresh-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.65rem;
}

.db-refresh-title-wrap {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.db-refresh-popover-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--db-text-main);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.db-refresh-tooltip-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: help;
}

.db-refresh-tooltip-wrap .db-tooltip-icon {
  font-size: 0.82rem;
  color: var(--db-text-subtle);
  transition: color 0.15s ease, transform 0.15s ease;
}

.db-refresh-tooltip-wrap:hover .db-tooltip-icon {
  color: var(--db-primary);
  transform: scale(1.12);
}

.db-refresh-tooltip-text {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: calc(100% + 8px);
  left: -20px;
  transform: none;
  background: #0f172a;
  color: #f8fafc;
  text-align: left;
  padding: 0.6rem 0.75rem;
  border-radius: var(--db-radius-md);
  font-size: 0.73rem;
  line-height: 1.4;
  white-space: normal;
  width: 230px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.12);
  pointer-events: none;
  z-index: 1000;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.db-refresh-tooltip-wrap:hover .db-refresh-tooltip-text {
  visibility: visible;
  opacity: 1;
}

.db-refresh-tooltip-text::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 24px;
  margin-left: 0;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #0f172a transparent;
}

.db-refresh-slider-desc {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin-top: 0.65rem;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--db-text-subtle);
}

.db-refresh-slider-desc i {
  color: var(--db-primary);
  font-size: 0.76rem;
  margin-top: 1px;
  flex-shrink: 0;
}

.db-popover-close-btn {
  background: none;
  border: none;
  color: var(--db-text-subtle);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  transition: color 0.15s;
}

.db-popover-close-btn:hover {
  color: #fff;
}

.db-refresh-rate-display {
  font-size: 0.88rem;
  color: var(--db-text-muted);
  margin-bottom: 0.85rem;
  text-align: center;
}

.db-refresh-rate-display strong {
  color: var(--db-primary);
  font-size: 1.05rem;
  font-family: var(--db-font-mono, monospace);
}

/* ===========================================================================
   Range Slider — scoped to #deskbump-app for specificity over WP theme resets
   =========================================================================== */

/* The WordPress/The7 theme injects `input { background: #fff }` at high
   specificity. We defeat it by:
   1. Prefixing every rule with #deskbump-app
   2. Using !important on the input background
   3. Targeting ::-webkit-slider-container (the invisible WebKit shadow-DOM
      wrapper that was rendering as a white box) */

#deskbump-app .db-range-slider {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: transparent !important;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  margin: 0.5rem 0;
  color: var(--db-primary);
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* WebKit outer shadow-DOM container — this is the "white box" culprit */
#deskbump-app .db-range-slider::-webkit-slider-container {
  background: transparent !important;
  border: none;
  box-shadow: none;
}

/* Track — WebKit/Blink (Chrome, Edge, Safari) */
#deskbump-app .db-range-slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.14);
  border: none;
  box-shadow: none;
}

/* Track — Firefox */
#deskbump-app .db-range-slider::-moz-range-track {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.14);
  border: none;
  box-shadow: none;
}

/* Filled portion left of thumb — Firefox */
#deskbump-app .db-range-slider::-moz-range-progress {
  height: 6px;
  border-radius: 3px 0 0 3px;
  background: var(--db-primary);
}

/* Thumb — WebKit/Blink */
#deskbump-app .db-range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--db-primary);
  cursor: pointer;
  border: 2.5px solid var(--db-bg-card);
  box-shadow: 0 0 8px var(--db-primary-glow), 0 0 0 1px rgba(37, 99, 235, 0.4);
  transition: transform 0.15s, box-shadow 0.15s;
  margin-top: -6px;
}

#deskbump-app .db-range-slider::-webkit-slider-thumb:hover {
  transform: scale(1.18);
  box-shadow: 0 0 14px var(--db-primary-glow), 0 0 0 2px rgba(37, 99, 235, 0.5);
}

/* Thumb — Firefox */
#deskbump-app .db-range-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--db-primary);
  cursor: pointer;
  border: 2.5px solid var(--db-bg-card);
  box-shadow: 0 0 8px var(--db-primary-glow), 0 0 0 1px rgba(37, 99, 235, 0.4);
  transition: transform 0.15s, box-shadow 0.15s;
}

#deskbump-app .db-range-slider::-moz-range-thumb:hover {
  transform: scale(1.18);
}

/* Focus ring — keyboard accessibility */
#deskbump-app .db-range-slider:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px var(--db-bg-card), 0 0 0 5px var(--db-primary);
}
#deskbump-app .db-range-slider:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 3px var(--db-bg-card), 0 0 0 5px var(--db-primary);
}

.db-refresh-slider-ticks {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--db-text-subtle);
  margin-top: 0.35rem;
  font-family: var(--db-font-mono, monospace);
}

.db-btn-reset-refresh {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  margin-top: 1rem;
  background: var(--db-bg-surface);
  border: 1px solid var(--db-border);
  color: var(--db-text-muted);
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.45rem 0.75rem;
  border-radius: var(--db-radius-md);
  cursor: pointer;
  transition: all 0.15s ease;
}

.db-btn-reset-refresh:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--db-text-main);
  border-color: rgba(255, 255, 255, 0.2);
}

.db-refresh-load-info {
  margin-top: 0.75rem;
  padding: 0.6rem 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius-md);
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--db-text-muted);
}

.db-refresh-load-pill {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  color: var(--db-text-main);
  margin-bottom: 0.25rem;
}

.db-refresh-load-pill i {
  color: var(--db-primary);
  font-size: 0.8rem;
}

.db-refresh-load-note {
  color: var(--db-text-subtle);
  font-size: 0.72rem;
}


/* =========================================================================
   VM Card 3-Dots More Options Menu
   ========================================================================= */
.db-more-dropdown-container {
  position: relative;
  display: inline-flex;
  align-items: center;
  z-index: 50;
}

.db-more-dropdown-container:has(.db-more-menu.show),
.db-more-dropdown-container.has-open-menu {
  z-index: 100;
}

.db-more-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  max-height: min(420px, calc(100vh - 40px));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--db-bg-card);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius-lg);
  padding: 0.5rem;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.65), 0 4px 12px rgba(0, 0, 0, 0.4);
  z-index: 1000;
  display: none;
  flex-direction: column;
  gap: 0.2rem;
}

.db-more-menu::-webkit-scrollbar {
  width: 5px;
}

.db-more-menu::-webkit-scrollbar-track {
  background: transparent;
}

.db-more-menu::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 4px;
}

.db-more-menu::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.35);
}

.db-more-menu.show {
  display: flex;
  animation: dbFadeIn 0.15s ease-out;
}

/* Explicit Dropup / Dropdown directional modifiers */
.db-more-menu.dropup {
  bottom: calc(100% + 8px);
  top: auto;
}

.db-more-menu.dropdown {
  top: calc(100% + 8px);
  bottom: auto;
}

/* List view table placement: default to opening downwards below row */
.db-table .db-more-menu {
  top: calc(100% + 6px);
  bottom: auto;
}

.db-table .db-more-menu.dropup {
  bottom: calc(100% + 6px);
  top: auto;
}

.db-table .db-more-menu.dropdown {
  top: calc(100% + 6px);
  bottom: auto;
}

.db-menu-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.55rem 0.85rem;
  background: transparent;
  border: none;
  border-radius: var(--db-radius-md);
  color: var(--db-text-main);
  font-size: 0.84rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.db-menu-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.db-menu-item i {
  width: 16px;
  text-align: center;
  font-size: 0.88rem;
  color: var(--db-text-muted);
  transition: color 0.15s;
}

.db-menu-item:hover i {
  color: #fff;
}

.db-menu-item.text-success { color: var(--db-success); }
.db-menu-item.text-success:hover { background: rgba(16, 185, 129, 0.15); color: #fff; }
.db-menu-item.text-success i { color: var(--db-success); }

.db-menu-item.text-warning { color: var(--db-warning); }
.db-menu-item.text-warning:hover { background: rgba(245, 158, 11, 0.15); color: #fff; }
.db-menu-item.text-warning i { color: var(--db-warning); }

.db-menu-item.text-danger { color: var(--db-danger); }
.db-menu-item.text-danger:hover { background: rgba(239, 68, 68, 0.15); color: #fff; }
.db-menu-item.text-danger i { color: var(--db-danger); }

.db-menu-item.disabled {
  opacity: 0.35;
  pointer-events: none;
  cursor: not-allowed;
}

.db-menu-divider {
  height: 1px;
  background: var(--db-border);
  margin: 0.35rem 0;
}

/* =========================================================================
   Centered Delete Confirmation Modal
   ========================================================================= */
.db-modal-delete {
  max-width: 480px;
  width: 100%;
}

.db-delete-icon-circle {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--db-danger);
  font-size: 1.25rem;
  flex-shrink: 0;
}

.db-delete-warning-box {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: var(--db-radius-md);
  padding: 0.85rem 1rem;
  margin-bottom: 1.25rem;
  font-size: 0.85rem;
  color: var(--db-text-muted);
  line-height: 1.5;
}

.db-delete-confirm-code {
  color: var(--db-danger);
  font-weight: 700;
  background: rgba(239, 68, 68, 0.15);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--db-font-mono, monospace);
}

/* =========================================================================
   Card Selection & Multi-Machine Bulk Action Bar
   ========================================================================= */
#deskbump-app .db-card-select-label,
.db-card-select-label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  position: relative !important;
  width: 24px !important;
  height: 24px !important;
  vertical-align: middle !important;
  margin: 0 !important;
  padding: 0 !important;
}

#deskbump-app .db-card-select-input,
.db-card-select-input {
  width: 19px !important;
  height: 19px !important;
  border-radius: 4px !important;
  accent-color: #2563eb !important;
  cursor: pointer !important;
  margin: 0 !important;
  display: inline-block !important;
  vertical-align: middle !important;
  opacity: 1 !important;
  visibility: visible !important;
  outline: none !important;
  appearance: auto !important;
  -webkit-appearance: checkbox !important;
}

#deskbump-app .db-grid-select-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  margin-bottom: 1.25rem !important;
  padding: 0.65rem 1.15rem !important;
  background: rgba(15, 23, 42, 0.65) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: var(--db-radius-lg) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

#deskbump-app .db-grid-select-bar:hover {
  border-color: rgba(59, 130, 246, 0.25) !important;
}

#deskbump-app .db-grid-select-left {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  flex-wrap: wrap !important;
}

#deskbump-app .db-grid-select-all-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.65rem !important;
  padding: 5px 12px 5px 9px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#deskbump-app .db-grid-select-all-label:hover {
  background: rgba(37, 99, 235, 0.14) !important;
  border-color: rgba(59, 130, 246, 0.4) !important;
  box-shadow: 0 0 12px rgba(37, 99, 235, 0.2) !important;
}

#deskbump-app .db-grid-select-text {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  color: #e2e8f0 !important;
  transition: color 0.15s ease !important;
  line-height: 1 !important;
}

#deskbump-app .db-grid-select-all-label:hover .db-grid-select-text {
  color: #ffffff !important;
}

#deskbump-app .db-grid-select-count-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 20px !important;
  height: 18px !important;
  padding: 0 6px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: #60a5fa !important;
  background: rgba(37, 99, 235, 0.22) !important;
  border: 1px solid rgba(59, 130, 246, 0.35) !important;
  border-radius: 999px !important;
  line-height: 1 !important;
  transition: all 0.15s ease !important;
}

#deskbump-app .db-grid-select-all-label:hover .db-grid-select-count-badge {
  background: rgba(37, 99, 235, 0.35) !important;
  border-color: #60a5fa !important;
  color: #ffffff !important;
}


#deskbump-app .db-grid-selected-status {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  color: #38bdf8 !important;
  background: rgba(14, 165, 233, 0.12) !important;
  border: 1px solid rgba(14, 165, 233, 0.3) !important;
  border-radius: 999px !important;
  padding: 4px 12px !important;
}

#deskbump-app .db-grid-selected-status strong {
  font-weight: 700 !important;
  color: #ffffff !important;
}

#deskbump-app .db-grid-selected-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #38bdf8 !important;
  box-shadow: 0 0 8px #38bdf8 !important;
  animation: db-pulse 2s infinite ease-in-out !important;
}

#deskbump-app .db-grid-selection-hint {
  font-size: 0.78rem !important;
  color: var(--db-text-subtle) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
}

#deskbump-app .db-grid-selection-hint i {
  color: var(--db-text-subtle) !important;
  opacity: 0.7 !important;
}

.db-card.selected {
  border-color: var(--db-primary) !important;
  box-shadow: 0 0 16px var(--db-primary-glow), 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

.db-bulk-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: rgba(15, 23, 42, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(59, 130, 246, 0.4);
  border-radius: 999px;
  padding: 0.65rem 1.35rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7), 0 0 24px rgba(59, 130, 246, 0.3);
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  opacity: 0;
  visibility: hidden;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  max-width: 90vw;
}

.db-bulk-bar.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  visibility: visible;
}

.db-bulk-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.88rem;
  color: #f8fafc;
  white-space: nowrap;
}

.db-bulk-badge {
  background: var(--db-primary);
  color: #fff;
  font-weight: 700;
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 999px;
}

.db-bulk-label {
  font-size: 0.84rem;
  font-weight: 500;
  color: #f1f5f9;
}

#deskbump-app .db-bulk-toggle-btn,
.db-bulk-toggle-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  padding: 4px 11px !important;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #e2e8f0 !important;
  cursor: pointer !important;
  line-height: 1 !important;
  text-decoration: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  white-space: nowrap !important;
}

#deskbump-app .db-bulk-toggle-btn:hover,
.db-bulk-toggle-btn:hover {
  background: rgba(37, 99, 235, 0.28) !important;
  border-color: rgba(96, 165, 250, 0.6) !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(37, 99, 235, 0.35) !important;
  transform: translateY(-1px) !important;
}

#deskbump-app .db-bulk-toggle-btn i,
.db-bulk-toggle-btn i {
  color: #60a5fa !important;
  font-size: 0.8rem !important;
  transition: color 0.15s ease !important;
}

#deskbump-app .db-bulk-toggle-btn:hover i,
.db-bulk-toggle-btn:hover i {
  color: #ffffff !important;
}

#deskbump-app .db-bulk-toggle-btn:active,
.db-bulk-toggle-btn:active {
  transform: scale(0.97) !important;
}

.db-bulk-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.db-bulk-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.9rem;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 600;
  border: 1px solid var(--db-border);
  background: var(--db-bg-card);
  color: var(--db-text-main);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.db-bulk-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.3);
}

.db-bulk-btn.start { color: var(--db-success); border-color: rgba(16, 185, 129, 0.4); }
.db-bulk-btn.start:hover:not(:disabled) { background: rgba(16, 185, 129, 0.15); }
.db-bulk-btn.stop { color: var(--db-warning); border-color: rgba(245, 158, 11, 0.4); }
.db-bulk-btn.stop:hover:not(:disabled) { background: rgba(245, 158, 11, 0.15); }
.db-bulk-btn.reboot { color: var(--db-accent); border-color: rgba(6, 182, 212, 0.4); }
.db-bulk-btn.reboot:hover:not(:disabled) { background: rgba(6, 182, 212, 0.15); }
.db-bulk-btn.delete { color: var(--db-danger); border-color: rgba(239, 68, 68, 0.4); }
.db-bulk-btn.delete:hover:not(:disabled) { background: rgba(239, 68, 68, 0.15); }
.db-bulk-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.db-bulk-close {
  background: none;
  border: none;
  color: var(--db-text-subtle);
  cursor: pointer;
  font-size: 1rem;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s;
}

.db-bulk-close:hover {
  color: #fff;
}

/* =========================================================================
   Individual Machine Billing Modal (60% canvas width, 80% canvas height)
   ========================================================================= */
.db-modal-billing {
  width: 60vw !important;
  max-width: 60vw !important;
  height: 80vh !important;
  max-height: 80vh !important;
  display: flex !important;
  flex-direction: column !important;
}

.db-modal-billing .db-modal-body {
  flex: 1;
  min-height: 0;
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
  padding: 1rem 1.5rem 0.5rem 1.5rem;
}

.db-modal-billing .db-cost-tiles {
  flex-shrink: 0;
  margin-bottom: 0.85rem;
}

.db-billing-tabs-nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius-md);
  padding: 4px;
  margin-bottom: 0.85rem;
  flex-shrink: 0;
  position: relative;
}

.db-billing-tab-group {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.db-billing-tab-btn {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--db-text-muted);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.db-billing-tab-btn:hover {
  color: var(--db-text-main);
  background: rgba(255, 255, 255, 0.05);
}

.db-billing-tab-btn.active {
  background: var(--db-primary);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.4);
}

.db-billing-tab-btn .db-tab-count-badge {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 9999px;
  margin-left: 0.25rem;
}

.db-billing-tab-btn:not(.active) .db-tab-count-badge {
  background: rgba(255, 255, 255, 0.08);
  color: var(--db-text-subtle);
}

.db-billing-tabs-info-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: 2px;
}

.db-billing-tabs-info-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--db-text-subtle);
  cursor: pointer;
  font-size: 0.95rem;
  transition: all 0.2s ease;
  padding: 0;
}

.db-billing-tabs-info-btn:hover {
  color: var(--db-primary);
  background: rgba(37, 99, 235, 0.12);
  border-color: rgba(37, 99, 235, 0.25);
}

.db-billing-tabs-info-btn.active {
  color: #ffffff;
  background: var(--db-primary);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.4);
}

.db-billing-tabs-tooltip {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 390px;
  max-width: min(390px, calc(100vw - 48px));
  background: rgba(15, 23, 42, 0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(59, 130, 246, 0.35);
  border-radius: var(--db-radius-md, 8px);
  padding: 1rem 1.1rem;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.7), 0 4px 14px rgba(0, 0, 0, 0.4);
  z-index: 100;
  display: none;
  flex-direction: column;
  gap: 0.75rem;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--db-text-muted);
}

.db-billing-tabs-tooltip.show {
  display: flex;
  animation: dbFadeIn 0.18s ease-out;
}

.db-billing-tabs-tooltip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.db-billing-tabs-tooltip-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.db-billing-tabs-tooltip-close {
  background: none;
  border: none;
  color: var(--db-text-subtle);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  transition: color 0.15s;
}

.db-billing-tabs-tooltip-close:hover {
  color: #ffffff;
}

.db-billing-tooltip-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  padding: 0.65rem 0.75rem;
}

.db-billing-tooltip-card-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  color: var(--db-text-main);
  margin-bottom: 0.35rem;
  font-size: 0.82rem;
}

.db-billing-tooltip-card-desc {
  font-size: 0.76rem;
  color: var(--db-text-muted);
  line-height: 1.4;
}

.db-billing-tooltip-card-desc ul {
  margin: 0.35rem 0 0 1.1rem;
  padding: 0;
}

.db-billing-tooltip-card-desc li {
  margin-bottom: 0.25rem;
}

.db-billing-tooltip-card-desc strong {
  color: var(--db-text-main);
}

.db-billing-tab-content-wrapper {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.db-billing-tab-pane {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.db-billing-tab-pane .db-price-history-list {
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  padding-right: 6px;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.db-modal-billing .db-price-history-list {
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  padding-right: 6px;
}

.db-cost-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.db-cost-tile {
  background: var(--db-bg-base);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius-md);
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  position: relative;
}

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

.db-cost-tile-header .db-cost-tile-label {
  margin-bottom: 0;
}

.db-cost-tile-label {
  font-size: 0.72rem;
  color: var(--db-text-subtle);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 0.35rem;
}

.db-cost-tile-info-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.db-cost-tile-info-btn {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--db-text-subtle);
  cursor: pointer;
  font-size: 0.78rem;
  transition: all 0.18s ease;
  padding: 0;
}

.db-cost-tile-info-btn:hover {
  color: var(--db-primary);
  background: rgba(37, 99, 235, 0.12);
  border-color: rgba(37, 99, 235, 0.25);
}

.db-cost-tile-info-btn.active {
  color: #ffffff;
  background: var(--db-primary);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.4);
}

.db-cost-tile-tooltip {
  position: absolute;
  top: calc(100% + 8px);
  width: 290px;
  max-width: min(290px, calc(100vw - 48px));
  background: rgba(15, 23, 42, 0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(59, 130, 246, 0.35);
  border-radius: var(--db-radius-md, 8px);
  padding: 0.85rem 1rem;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.75), 0 4px 14px rgba(0, 0, 0, 0.4);
  z-index: 120;
  display: none;
  flex-direction: column;
  gap: 0.55rem;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--db-text-muted);
}

.db-cost-tile-tooltip.show {
  display: flex;
  animation: dbFadeIn 0.18s ease-out;
}

.db-cost-tile-tooltip.align-left {
  left: 0;
  right: auto;
}

.db-cost-tile-tooltip.align-left-center {
  left: -40px;
  right: auto;
}

.db-cost-tile-tooltip.align-right-center {
  right: -40px;
  left: auto;
}

.db-cost-tile-tooltip.align-right {
  right: 0;
  left: auto;
}

.db-cost-tile-tooltip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.db-cost-tile-tooltip-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.db-cost-tile-tooltip-close {
  background: none;
  border: none;
  color: var(--db-text-subtle);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 3px;
  transition: color 0.15s;
}

.db-cost-tile-tooltip-close:hover {
  color: #ffffff;
}

.db-cost-tile-tooltip-body {
  font-size: 0.76rem;
  color: var(--db-text-muted);
  line-height: 1.45;
}

@media (max-width: 640px) {
  .db-cost-tile-tooltip,
  .db-cost-tile-tooltip.align-left,
  .db-cost-tile-tooltip.align-left-center,
  .db-cost-tile-tooltip.align-right-center,
  .db-cost-tile-tooltip.align-right {
    left: auto !important;
    right: 0 !important;
    width: 270px !important;
    max-width: calc(100vw - 40px) !important;
  }
}

.db-cost-tile-val {
  font-size: 1.25rem;
  font-weight: 800;
  font-family: var(--db-font-mono, monospace);
  color: var(--db-text-main);
}

.db-cost-tile-sub {
  font-size: 0.75rem;
  color: var(--db-text-muted);
  margin-top: 0.25rem;
}

.db-price-history-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  max-height: 280px;
  overflow-y: auto;
  padding-right: 4px;
}

.db-price-history-item {
  background: var(--db-bg-base);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius-md);
  padding: 0.75rem 1rem;
  font-size: 0.82rem;
}

.db-price-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  color: var(--db-text-subtle);
  font-size: 0.75rem;
}

.db-price-history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.2rem 0;
  color: var(--db-text-muted);
}

.db-price-history-row strong {
  color: var(--db-text-main);
  font-family: var(--db-font-mono, monospace);
}

.db-price-history-item.is-price-change {
  border-left: 3px solid #f59e0b;
  background: rgba(245, 158, 11, 0.05);
}

.db-price-history-item.is-running-session {
  border-left: 3px solid rgba(16, 185, 129, 0.7);
  background: rgba(16, 185, 129, 0.02);
}

.db-price-history-item.is-idle-period {
  border-left: 3px solid rgba(59, 130, 246, 0.7);
  background: rgba(59, 130, 246, 0.02);
}

.db-billing-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.db-billing-tag.tag-running {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.db-billing-tag.tag-idle {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.db-billing-tag.tag-price-change {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.db-billing-tag.tag-generic {
  background: rgba(148, 163, 184, 0.15);
  color: #cbd5e1;
  border: 1px solid rgba(148, 163, 184, 0.25);
}

.db-billing-tag.tag-current-interval {
  background: rgba(37, 99, 235, 0.2);
  color: #93c5fd;
  border: 1px solid rgba(37, 99, 235, 0.4);
}

.db-price-change-callout {
  margin-top: 0.45rem;
  padding: 0.4rem 0.65rem;
  background: rgba(245, 158, 11, 0.08);
  border-radius: 4px;
  border-left: 2px solid #f59e0b;
  font-size: 0.73rem;
  color: #fbbf24;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.db-billing-price-change-separator {
  display: flex;
  align-items: center;
  margin: 0.85rem 0;
  gap: 0.65rem;
}

.db-billing-price-change-separator .db-separator-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245, 158, 11, 0.5), transparent);
}

.db-billing-price-change-separator .db-separator-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.8rem;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: 9999px;
  font-size: 0.74rem;
  font-weight: 600;
  color: #fbbf24;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.db-billing-price-change-separator .db-separator-badge i {
  color: #f59e0b;
}

.db-billing-price-change-separator .db-separator-details {
  padding-left: 0.45rem;
  border-left: 1px solid rgba(245, 158, 11, 0.35);
  font-weight: 500;
  color: var(--db-text-subtle, #cbd5e1);
  font-size: 0.72rem;
}

/* =========================================================================
   Individual Machine Activity Modal (60% canvas width, 80% canvas height)
   ========================================================================= */
.db-modal-activity {
  width: 60vw !important;
  max-width: 60vw !important;
  height: 80vh !important;
  max-height: 80vh !important;
  display: flex !important;
  flex-direction: column !important;
}

.db-modal-activity .db-modal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.db-modal-activity .db-machine-logs-wrapper {
  flex: 1;
  min-height: 250px;
  max-height: none;
  overflow-y: auto;
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius-md);
}

.db-machine-logs-wrapper thead th {
  position: sticky;
  top: 0;
  background: var(--db-bg-card, #111827);
  z-index: 2;
  box-shadow: 0 1px 0 var(--db-border);
}

.db-log-badge-op {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 0.74rem;
  font-weight: 600;
}

.db-log-badge-op.start { background: rgba(16, 185, 129, 0.12); color: var(--db-success); border: 1px solid rgba(16, 185, 129, 0.25); }
.db-log-badge-op.stop { background: rgba(239, 68, 68, 0.12); color: var(--db-danger); border: 1px solid rgba(239, 68, 68, 0.25); }
.db-log-badge-op.reset { background: rgba(245, 158, 11, 0.12); color: var(--db-warning); border: 1px solid rgba(245, 158, 11, 0.25); }
.db-log-badge-op.create { background: rgba(37, 99, 235, 0.12); color: var(--db-primary); border: 1px solid rgba(37, 99, 235, 0.25); }
.db-log-badge-op.delete { background: rgba(244, 63, 94, 0.12); color: #fb7185; border: 1px solid rgba(244, 63, 94, 0.25); }
.db-log-badge-op.payment { background: rgba(245, 158, 11, 0.12); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.25); }
.db-log-badge-op.auth { background: rgba(168, 85, 247, 0.12); color: #c084fc; border: 1px solid rgba(168, 85, 247, 0.25); }
.db-log-badge-op.default { background: rgba(255, 255, 255, 0.08); color: var(--db-text-muted); }

/* Activity Logs Toolbar, Sort & Category Controls */
.db-logs-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.db-logs-filter-group {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex: 1;
  min-width: 260px;
  flex-wrap: wrap;
}

.db-logs-search-wrapper {
  position: relative;
  flex: 1;
  min-width: 200px;
  max-width: 320px;
}

.db-logs-search-wrapper input {
  padding-left: 2.35rem !important;
  height: 38px;
  font-size: 0.85rem;
  width: 100%;
  border-radius: var(--db-radius-md);
  background: var(--db-bg-surface, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--db-border, rgba(255, 255, 255, 0.12));
  color: var(--db-text-main, #fff);
  box-sizing: border-box;
  transition: all 0.2s ease;
}

.db-logs-search-wrapper input:focus {
  border-color: var(--db-primary, #3b82f6);
  box-shadow: 0 0 0 2px var(--db-primary-glow, rgba(59, 130, 246, 0.25));
  outline: none;
}

.db-logs-select {
  height: 38px;
  font-size: 0.82rem;
  padding: 0 2rem 0 0.85rem;
  border-radius: var(--db-radius-md);
  background-color: #1e293b;
  border: 1px solid var(--db-border, rgba(255, 255, 255, 0.12));
  color: #fff;
  cursor: pointer;
  outline: none;
  transition: all 0.2s ease;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.65rem center;
  background-size: 0.85rem;
}

.db-logs-select:hover {
  border-color: rgba(255, 255, 255, 0.25);
}

.db-logs-select:focus {
  border-color: var(--db-primary, #3b82f6);
  box-shadow: 0 0 0 2px var(--db-primary-glow, rgba(59, 130, 246, 0.25));
}

.db-logs-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Category Filter Pills */
.db-logs-category-pills {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.15rem;
  padding: 0.15rem 0;
}

.db-log-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.38rem 0.85rem;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--db-text-muted, #94a3b8);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  white-space: nowrap;
}

.db-log-pill-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.db-log-pill-btn:active {
  transform: translateY(0);
}

.db-log-pill-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.2rem;
  padding: 0 0.35rem;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 600;
  font-family: var(--db-font-mono, monospace);
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
}

/* Active Category Pill Themes */
.db-log-pill-btn.active {
  color: #fff;
  font-weight: 600;
  background: rgba(59, 130, 246, 0.18);
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.22);
}

.db-log-pill-btn.active .db-log-pill-count {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.db-log-pill-btn[data-category="actions"].active {
  background: rgba(16, 185, 129, 0.18);
  border-color: rgba(16, 185, 129, 0.55);
  color: #34d399;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.25);
}

.db-log-pill-btn[data-category="deployments"].active {
  background: rgba(59, 130, 246, 0.18);
  border-color: rgba(59, 130, 246, 0.55);
  color: #60a5fa;
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.25);
}

.db-log-pill-btn[data-category="deletions"].active {
  background: rgba(244, 63, 94, 0.18);
  border-color: rgba(244, 63, 94, 0.55);
  color: #fb7185;
  box-shadow: 0 0 12px rgba(244, 63, 94, 0.25);
}

.db-log-pill-btn[data-category="payments"].active {
  background: rgba(245, 158, 11, 0.18);
  border-color: rgba(245, 158, 11, 0.55);
  color: #fbbf24;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.25);
}

.db-log-pill-btn[data-category="auth"].active {
  background: rgba(168, 85, 247, 0.18);
  border-color: rgba(168, 85, 247, 0.55);
  color: #c084fc;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.25);
}

/* Sortable Table Headers */
.db-logs-sortable-th {
  cursor: pointer;
  user-select: none;
  transition: color 0.15s ease, background 0.15s ease;
}

.db-logs-sortable-th:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.04);
}

.db-logs-sortable-th i {
  margin-left: 0.35rem;
  font-size: 0.72rem;
  opacity: 0.45;
  transition: opacity 0.15s ease, color 0.15s ease;
}

.db-logs-sortable-th:hover i {
  opacity: 0.85;
}

.db-logs-sortable-th.sorted i {
  opacity: 1;
  color: var(--db-primary, #3b82f6);
}

@media (max-width: 768px) {
  .db-logs-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .db-logs-filter-group {
    width: 100%;
    min-width: 100%;
  }
  .db-logs-search-wrapper {
    max-width: 100%;
    min-width: 100%;
  }
  .db-logs-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 1024px) {
  .db-modal-billing,
  .db-modal-activity {
    width: 90vw !important;
    max-width: 90vw !important;
    height: 85vh !important;
    max-height: 85vh !important;
  }
}

@media (max-width: 640px) {
  .db-modal-billing,
  .db-modal-activity {
    width: 96vw !important;
    max-width: 96vw !important;
    height: 90vh !important;
    max-height: 90vh !important;
  }
}

/* =========================================================================
   Rename & Reset Password Centered Modals
   ========================================================================= */
.db-modal-rename {
  max-width: 480px;
  width: 100%;
}

.db-modal-resetpass {
  max-width: 540px;
  width: 100%;
}

.db-modal-icon-circle {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.db-modal-icon-circle.primary {
  background: rgba(37, 99, 235, 0.15);
  border: 1px solid rgba(37, 99, 235, 0.3);
  color: var(--db-primary);
}

.db-modal-icon-circle.warning {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: var(--db-warning);
}

.db-modal-icon-circle.danger {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: var(--db-danger);
}

.db-modal-stop,
.db-modal-reboot {
  max-width: 500px;
  width: 100%;
}

/* =========================================================================
   High-specificity Dark Theme overrides for Modal Input Fields & Placeholders
   ========================================================================= */
body.deskbump-portal-body input.db-input,
body.deskbump-portal-body .db-modal input[type="text"],
body.deskbump-portal-body .db-modal input[type="password"],
body.deskbump-portal-body .db-modal input[type="number"],
body.deskbump-portal-body .db-modal input[type="email"],
body.deskbump-portal-body .db-modal input {
  background-color: #0b1120 !important;
  background: #0b1120 !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #f8fafc !important;
  border-radius: var(--db-radius-md) !important;
  padding: 0.75rem 1rem !important;
  font-family: var(--db-font-main) !important;
  font-size: 0.95rem !important;
  line-height: 1.5 !important;
  outline: none !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5) !important;
  -webkit-appearance: none !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

body.deskbump-portal-body input.db-input:focus,
body.deskbump-portal-body .db-modal input[type="text"]:focus,
body.deskbump-portal-body .db-modal input[type="password"]:focus,
body.deskbump-portal-body .db-modal input:focus {
  background-color: #0f172a !important;
  background: #0f172a !important;
  border-color: var(--db-primary) !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.35), inset 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

/* Clear, high-visibility placeholders */
body.deskbump-portal-body input.db-input::placeholder,
body.deskbump-portal-body .db-modal input[type="text"]::placeholder,
body.deskbump-portal-body .db-modal input[type="password"]::placeholder,
body.deskbump-portal-body .db-modal input::placeholder {
  color: rgba(148, 163, 184, 0.75) !important;
  opacity: 1 !important;
}

body.deskbump-portal-body input.db-input:-ms-input-placeholder,
body.deskbump-portal-body .db-modal input:-ms-input-placeholder {
  color: rgba(148, 163, 184, 0.75) !important;
}

body.deskbump-portal-body input.db-input::-ms-input-placeholder,
body.deskbump-portal-body .db-modal input::-ms-input-placeholder {
  color: rgba(148, 163, 184, 0.75) !important;
}

/* In-Browser Remote Desktop Stream Controls */
.db-stream-active-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  padding: 0.65rem 1rem !important;
  background: rgba(15, 23, 42, 0.98) !important;
  border: 1px solid var(--db-border) !important;
  border-bottom: none !important;
  border-radius: var(--db-radius-md) var(--db-radius-md) 0 0 !important;
  font-size: 0.85rem !important;
  position: relative !important;
  z-index: 10 !important;
}

.db-stream-live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  color: #10b981;
}

.db-stream-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: db-pulse 1.5s infinite;
}

@keyframes db-pulse {
  0% { transform: scale(0.9); opacity: 0.7; }
  50% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.7; }
}

/* Inline Form Error Banner */
.db-form-error-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-left: 4px solid var(--db-danger);
  border-radius: var(--db-radius-md);
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
  color: #fca5a5;
  font-size: 0.86rem;
  line-height: 1.45;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.db-form-error-banner i {
  color: var(--db-danger);
  font-size: 1.1rem;
  margin-top: 0.1rem;
  flex-shrink: 0;
}

.db-form-error-banner .db-error-content {
  flex: 1;
}

.db-form-error-banner .db-error-title {
  font-weight: 700;
  color: #fecaca;
  margin-bottom: 0.2rem;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}

/* Input Validation States & Shake Effect */
.db-input.db-input-error {
  border-color: var(--db-danger) !important;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25) !important;
}

.db-input.db-input-success {
  border-color: var(--db-success) !important;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25) !important;
}

@keyframes db-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

.db-input-shake {
  animation: db-shake 0.35s ease-in-out;
}


/* Live Preview Dynamic Aspect Ratio Viewport */
.db-stream-viewport {
  background: #000;
  border: 1px solid var(--db-border);
  border-top: none;
  border-radius: 0 0 var(--db-radius-md) var(--db-radius-md);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-height: 520px;
  aspect-ratio: 16 / 9;
  position: relative;
  transition: aspect-ratio 0.25s ease;
  margin-bottom: 0;
}

.db-stream-viewport img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

/* Live Preview Active RDP Connection Overlay Popup */
.db-rdp-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 15, 29, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 25;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 1.25rem;
}

.db-rdp-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.db-rdp-overlay-card {
  position: relative;
  max-width: 480px;
  width: 100%;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(245, 158, 11, 0.45);
  box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.85), 0 0 35px rgba(245, 158, 11, 0.15);
  border-radius: var(--db-radius-lg, 12px);
  padding: 1.5rem 1.75rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.db-rdp-overlay-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.db-rdp-overlay-close:hover {
  color: #f8fafc;
  background: rgba(255, 255, 255, 0.1);
}

.db-rdp-overlay-icon-wrap {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fbbf24;
  font-size: 1.35rem;
  margin-bottom: 0.85rem;
}

.db-rdp-overlay-pulse {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(245, 158, 11, 0.5);
  animation: dbRdpPulse 2s infinite ease-out;
  pointer-events: none;
}

@keyframes dbRdpPulse {
  0% { transform: scale(0.9); opacity: 0.9; }
  70% { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

.db-rdp-overlay-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(245, 158, 11, 0.18);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #fde68a;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 0.75rem;
}

.db-rdp-overlay-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #f8fafc;
  margin: 0 0 0.5rem 0;
  line-height: 1.3;
}

.db-rdp-overlay-text {
  font-size: 0.85rem;
  color: #cbd5e1;
  line-height: 1.45;
  margin: 0 0 0.45rem 0;
}

.db-rdp-overlay-subtext {
  font-size: 0.8rem;
  color: #94a3b8;
  line-height: 1.45;
  margin: 0 0 1.25rem 0;
}

.db-rdp-overlay-subtext strong {
  color: #38bdf8;
}

.db-rdp-overlay-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  width: 100%;
}

.db-btn-overlay-reconnect {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  border: 1px solid #38bdf8 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  padding: 0.55rem 1.15rem !important;
  border-radius: var(--db-radius-md, 8px) !important;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.db-btn-overlay-reconnect:hover {
  background: linear-gradient(135deg, #0369a1 0%, #075985 100%) !important;
  box-shadow: 0 6px 18px rgba(2, 132, 199, 0.5) !important;
  transform: translateY(-1px) !important;
}

.db-btn-overlay-peek {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #cbd5e1 !important;
  font-size: 0.82rem !important;
  padding: 0.55rem 0.95rem !important;
  border-radius: var(--db-radius-md, 8px) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
}

.db-btn-overlay-peek:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}

@media (max-width: 640px) {
  .db-rdp-overlay-card {
    padding: 1rem 1.15rem;
  }
  .db-rdp-overlay-title {
    font-size: 1rem;
  }
  .db-rdp-overlay-text,
  .db-rdp-overlay-subtext {
    font-size: 0.78rem;
  }
  .db-rdp-overlay-icon-wrap {
    width: 44px;
    height: 44px;
    font-size: 1.15rem;
    margin-bottom: 0.5rem;
  }
}

/* Card Grid Preview Scoped RDP Overlay Popup */
.db-card-preview .db-rdp-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.75rem;
  background: rgba(10, 15, 29, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.db-card-preview .db-rdp-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.db-card-preview .db-rdp-overlay-card {
  max-width: 95%;
  width: auto;
  padding: 0.65rem 0.85rem;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(245, 158, 11, 0.45);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.85), 0 0 15px rgba(245, 158, 11, 0.15);
  border-radius: var(--db-radius-md, 8px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: none !important;
}

.db-card-preview .db-rdp-overlay-icon-wrap {
  width: 32px;
  height: 32px;
  font-size: 0.9rem;
  margin-bottom: 0.35rem;
}

.db-card-preview .db-rdp-overlay-pulse {
  inset: -4px;
  border-width: 1.5px;
}

.db-card-preview .db-rdp-overlay-badge {
  font-size: 0.62rem;
  padding: 2px 7px;
  margin-bottom: 0.35rem;
  gap: 0.3rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.db-card-preview .db-rdp-overlay-title {
  font-size: 0.85rem;
  font-weight: 700;
  margin: 0 0 0.25rem 0;
  line-height: 1.25;
  color: #f8fafc;
}

.db-card-preview .db-rdp-overlay-text {
  font-size: 0.72rem;
  line-height: 1.35;
  margin: 0 0 0.55rem 0;
  color: #cbd5e1;
  max-width: 280px;
}

.db-card-preview .db-rdp-overlay-subtext,
.db-card-preview .db-rdp-overlay-close,
.db-card-preview .db-btn-overlay-peek {
  display: none !important;
}

.db-card-preview .db-btn-overlay-reconnect {
  font-size: 0.74rem !important;
  padding: 0.35rem 0.8rem !important;
  gap: 0.35rem !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
}

.db-preview-badge.rdp {
  background: rgba(245, 158, 11, 0.2) !important;
  border: 1px solid rgba(245, 158, 11, 0.5) !important;
  color: #fbbf24 !important;
}

.db-preview-disclaimer {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  background: rgba(30, 41, 59, 0.9) !important;
  border: 1px solid var(--db-border) !important;
  border-radius: var(--db-radius-md) !important;
  padding: 0.85rem 1rem !important;
  margin-top: 0.75rem !important;
  font-size: 0.85rem !important;
  line-height: 1.45 !important;
  color: #cbd5e1 !important;
  position: relative !important;
  z-index: 10 !important;
  box-sizing: border-box !important;
}

.db-preview-disclaimer i {
  color: var(--db-primary);
  font-size: 1.15rem;
  flex-shrink: 0;
}

.db-preview-disclaimer-link {
  color: var(--db-primary);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  transition: color 0.15s ease;
}

.db-preview-disclaimer-link:hover {
  color: #60a5fa;
}

/* Direct Remote PowerShell Disclaimer & Connection Card */
.db-ps-remote-disclaimer-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
  background: rgba(15, 23, 42, 0.85) !important;
  border: 1px solid rgba(56, 189, 248, 0.25) !important;
  border-left: 4px solid #38bdf8 !important;
  border-radius: var(--db-radius-md) !important;
  padding: 0.95rem 1.15rem !important;
  margin-top: 0.85rem !important;
  font-size: 0.84rem !important;
  line-height: 1.5 !important;
  color: #cbd5e1 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
  box-sizing: border-box !important;
  text-align: left !important;
}

.db-ps-remote-disclaimer-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
}

.db-ps-remote-disclaimer-title {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  font-weight: 700 !important;
  color: #38bdf8 !important;
  font-size: 0.88rem !important;
}

.db-ps-remote-disclaimer-badge {
  font-size: 0.7rem !important;
  padding: 2px 7px !important;
  background: rgba(56, 189, 248, 0.12) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(56, 189, 248, 0.3) !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
}

.db-ps-remote-command-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  background: rgba(0, 0, 0, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: var(--db-radius-sm) !important;
  padding: 0.55rem 0.85rem !important;
}

.db-ps-remote-code {
  font-family: var(--db-font-mono, 'JetBrains Mono', monospace) !important;
  color: #38bdf8 !important;
  background: transparent !important;
  font-size: 0.84rem !important;
  word-break: break-all !important;
  padding: 0 !important;
  border: none !important;
}

.db-ps-remote-actions {
  display: flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  flex-wrap: wrap !important;
}

.db-ps-direct-link-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  background: rgba(56, 189, 248, 0.15) !important;
  border: 1px solid rgba(56, 189, 248, 0.4) !important;
  color: #38bdf8 !important;
  font-size: 0.74rem !important;
  font-weight: 600 !important;
  padding: 3px 9px !important;
  border-radius: var(--db-radius-sm) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.db-ps-direct-link-btn:hover {
  background: rgba(56, 189, 248, 0.28) !important;
  border-color: #38bdf8 !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

/* Dual Pricing Display in Card & Table */
.db-price-box {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.65rem 0 0.35rem 0;
  border-top: 1px dashed var(--db-border);
}

.db-price-cassette {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.45rem 0.65rem;
  border-radius: var(--db-radius-sm);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.db-price-cassette:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}

.db-price-cassette.active-running {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.09) 0%, rgba(16, 185, 129, 0.02) 100%);
  border: 1px solid rgba(16, 185, 129, 0.3);
  box-shadow: 0 1px 6px rgba(16, 185, 129, 0.06);
}

.db-price-cassette.active-idle {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.09) 0%, rgba(245, 158, 11, 0.02) 100%);
  border: 1px solid rgba(245, 158, 11, 0.3);
  box-shadow: 0 1px 6px rgba(245, 158, 11, 0.06);
}

.db-price-cassette.db-price-cassette-total {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.08) 0%, rgba(37, 99, 235, 0.02) 100%);
  border: 1px solid rgba(37, 99, 235, 0.22);
  box-shadow: 0 1px 6px rgba(37, 99, 235, 0.05);
}

.db-price-cassette.db-price-cassette-total:hover {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.12) 0%, rgba(37, 99, 235, 0.04) 100%);
  border-color: rgba(37, 99, 235, 0.35);
}

.db-price-cassette-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
}

.db-price-cassette-title-group {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.db-price-cassette-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--db-text-muted);
}

.active-running .db-price-cassette-label {
  color: #10b981;
}

.active-idle .db-price-cassette-label {
  color: #f59e0b;
}

.db-price-cassette-total .db-price-cassette-label {
  color: #60a5fa;
}

.db-price-cassette-content {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.db-price-accrued {
  display: flex;
  align-items: baseline;
  gap: 0.28rem;
}

.db-price-accrued-val {
  font-family: var(--db-font-mono);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--db-text-main);
  letter-spacing: -0.01em;
}

/* Typography for Costs & Rates: Decimals Styled Exactly 30% Smaller */
.db-cost-num {
  display: inline-flex;
  align-items: baseline;
  font-variant-numeric: tabular-nums;
  line-height: inherit;
  white-space: nowrap;
}

.db-cost-dec {
  font-size: 0.7em; /* Exactly 30% smaller than the main integer digits */
  opacity: 0.88;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-left: 0.5px;
}

/* Yellow SPOT Machine Identificator Badge */
.db-spot-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.5rem;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.38);
  border-radius: var(--db-radius-sm, 4px);
  vertical-align: middle;
  margin-left: 0.45rem;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.12);
  transition: all 0.2s ease;
  line-height: 1.2;
}

.db-spot-badge:hover {
  background: rgba(245, 158, 11, 0.2);
  border-color: rgba(245, 158, 11, 0.65);
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.25);
}

.db-spot-badge i.fa-piggy-bank {
  font-size: 0.72rem;
  color: #fbbf24;
}

.db-spot-badge .db-spot-tooltip-wrap {
  margin-left: 2px;
  cursor: help;
  position: relative;
  display: inline-flex;
  align-items: center;
}

.db-spot-badge .db-spot-tooltip-wrap .db-tooltip-icon {
  font-size: 0.68rem;
  color: rgba(245, 158, 11, 0.75);
  transition: color 0.15s ease, transform 0.15s ease;
}

.db-spot-badge .db-spot-tooltip-wrap:hover .db-tooltip-icon {
  color: #fbbf24;
  transform: scale(1.15);
}

.db-spot-tooltip-text {
  min-width: 250px;
  max-width: 290px;
  font-size: 0.75rem;
  line-height: 1.4;
  text-transform: none;
  font-weight: 400;
  letter-spacing: normal;
  background: #0f172a;
  color: #f8fafc;
  border: 1px solid rgba(245, 158, 11, 0.3);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.65), 0 0 12px rgba(245, 158, 11, 0.15);
}

.db-card:has(.db-spot-tooltip-wrap:hover) {
  z-index: 100;
}

.db-table tr:has(.db-spot-tooltip-wrap:hover) {
  position: relative;
  z-index: 100;
}

.active-running .db-price-accrued-val {
  color: #10b981;
}

.active-idle .db-price-accrued-val {
  color: #f59e0b;
}

.db-price-cassette-total .db-price-accrued-val,
.db-price-accrued-val.text-primary {
  color: #60a5fa;
}

.db-price-accrued-unit {
  font-size: 0.72rem;
  color: var(--db-text-subtle);
  font-weight: 500;
}

.db-price-rate {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  font-size: 0.74rem;
  color: var(--db-text-muted);
}

.db-price-rate-at {
  font-size: 0.72rem;
  color: var(--db-text-subtle);
  font-weight: 600;
}

.db-price-rate-val {
  font-family: var(--db-font-mono);
  font-weight: 600;
  color: var(--db-text-main);
}

.db-price-rate-unit {
  font-size: 0.7rem;
  color: var(--db-text-subtle);
}

/* Backward compatibility for .db-price-row */
.db-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--db-text-muted);
  padding: 0.25rem 0.45rem;
  border-radius: var(--db-radius-sm);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.db-price-row.active-cost {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.25);
  color: var(--db-text-main);
}

.db-price-row.active-idle {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25);
  color: var(--db-text-main);
}

.db-price-label-group {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.db-price-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--db-text-subtle);
  flex-shrink: 0;
}

.db-price-dot.running {
  background: #10b981;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
}

.db-price-dot.stopped {
  background: #f59e0b;
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.6);
}

.db-price-dot.total {
  background: #3b82f6;
  box-shadow: 0 0 6px rgba(59, 130, 246, 0.6);
}

.db-price-rate-val {
  font-family: var(--db-font-mono);
  font-weight: 700;
  color: var(--db-text-main);
}

.db-price-active-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.65rem;
  text-transform: uppercase;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.db-price-active-tag.running {
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
}

.db-price-active-tag.idle {
  background: rgba(245, 158, 11, 0.2);
  color: #f59e0b;
}

.db-price-total-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(37, 99, 235, 0.15);
  color: #93c5fd;
  border: 1px solid rgba(37, 99, 235, 0.3);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.db-price-total-sub {
  font-size: 0.72rem;
  color: var(--db-text-subtle);
  font-style: italic;
}

/* Table Dual Cost Cassettes */
.db-table-price-cassettes {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 220px;
}

.db-table-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.22rem 0.5rem;
  border-radius: var(--db-radius-sm);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 0.76rem;
  transition: all 0.15s ease;
}

.db-table-price-row.active-running {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.25);
}

.db-table-price-row.active-idle {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.25);
}

.db-table-price-row.db-table-price-row-total {
  background: rgba(37, 99, 235, 0.06);
  border-color: rgba(37, 99, 235, 0.22);
}

.db-table-price-row.db-table-price-row-total:hover {
  background: rgba(37, 99, 235, 0.1);
  border-color: rgba(37, 99, 235, 0.35);
}

.db-table-price-row-total .db-table-price-label {
  color: #60a5fa;
  font-weight: 700;
}

.db-table-price-line {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
}

.db-table-price-label {
  font-weight: 600;
  color: var(--db-text-muted);
  min-width: 26px;
}

.db-table-price-cost {
  font-family: var(--db-font-mono);
  font-weight: 700;
  color: var(--db-text-main);
}

.db-table-price-cost.text-success {
  color: #10b981;
}

.db-table-price-cost.text-warning {
  color: #f59e0b;
}

.db-table-price-cost.text-primary {
  color: #60a5fa;
}

.db-table-price-unit {
  font-size: 0.68rem;
  color: var(--db-text-subtle);
  font-weight: normal;
}

.db-table-price-rate {
  font-size: 0.72rem;
  color: var(--db-text-muted);
}


/* Info Icon & CSS Tooltip System */
.db-tooltip-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: help;
  vertical-align: middle;
}

.db-tooltip-icon {
  font-size: 0.78rem;
  color: var(--db-text-subtle);
  transition: color 0.15s ease, transform 0.15s ease;
}

.db-tooltip-wrap:hover .db-tooltip-icon {
  color: var(--db-primary);
  transform: scale(1.15);
}

.db-tooltip-text {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  bottom: 135%;
  left: 50%;
  transform: translateX(-50%);
  background: #0f172a;
  color: #f8fafc;
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-size: 0.75rem;
  line-height: 1.35;
  white-space: normal;
  width: max-content;
  max-width: 230px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.12);
  pointer-events: none;
  z-index: 1000;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.db-tooltip-wrap:hover .db-tooltip-text {
  visibility: visible;
  opacity: 1;
}

.db-tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #0f172a transparent transparent transparent;
}

/* =========================================================================
   Live Preview Fullscreen Mode (Stretch with strict Aspect Ratio preservation)
   ========================================================================= */
.db-stream-viewport:fullscreen,
.db-stream-viewport:-webkit-full-screen {
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  background: #000000 !important;
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 9999999 !important;
  cursor: default;
}

.db-stream-viewport:fullscreen img,
.db-stream-viewport:-webkit-full-screen img {
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  object-fit: contain !important;
  margin: auto !important;
  display: block !important;
}

#db-viewport-screen:fullscreen .db-ssh-terminal-wrapper,
#db-viewport-screen:-webkit-full-screen .db-ssh-terminal-wrapper,
.db-ssh-terminal-wrapper:fullscreen,
.db-ssh-terminal-wrapper:-webkit-full-screen {
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  border-radius: 0 !important;
  background: #000000 !important;
  min-height: 100vh !important;
  box-sizing: border-box !important;
  padding: 1.25rem 2.25rem 1.25rem 1.25rem !important;
}

#db-viewport-screen:fullscreen .db-ssh-terminal-output,
#db-viewport-screen:-webkit-full-screen .db-ssh-terminal-output,
.db-ssh-terminal-wrapper:fullscreen .db-ssh-terminal-output,
.db-ssh-terminal-wrapper:-webkit-full-screen .db-ssh-terminal-output {
  height: calc(100vh - 2.5rem) !important;
  max-height: calc(100vh - 2.5rem) !important;
  background: #000000 !important;
  padding: 1.25rem 1.75rem !important;
  border-radius: var(--db-radius-md) !important;
}

.db-ssh-terminal-wrapper:fullscreen .db-ssh-terminal-output::-webkit-scrollbar,
.db-ssh-terminal-wrapper:-webkit-full-screen .db-ssh-terminal-output::-webkit-scrollbar {
  width: 14px !important;
}

/* =========================================================================
   Modern Switch Component (Used in Notifications & VAT toggles)
   ========================================================================= */
.db-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  vertical-align: middle;
}

.db-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.db-switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(51, 65, 85, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 24px;
}

.db-switch-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 2px;
  bottom: 2px;
  background-color: #cbd5e1;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.db-switch input:checked + .db-switch-slider {
  background-color: var(--db-primary);
  border-color: var(--db-primary);
}

.db-switch input:checked + .db-switch-slider:before {
  transform: translateX(20px);
  background-color: #ffffff;
}

.db-switch input:focus + .db-switch-slider {
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.35);
}

.db-switch.disabled,
.db-switch input:disabled + .db-switch-slider {
  opacity: 0.5;
  cursor: not-allowed;
}

/* =========================================================================
   Auth View (Qt Replicated Sign In / Create Account / Forgot Password)
   ========================================================================= */
.db-auth-page-container {
  min-height: calc(100vh - 140px);
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1rem;
  background: radial-gradient(circle at 50% 15%, rgba(59, 130, 246, 0.14), transparent 60%), #0a0d14;
}

.db-auth-card {
  width: 100%;
  max-width: 480px;
  background: var(--db-bg-card, #131926);
  border: 1px solid var(--db-border, rgba(255, 255, 255, 0.08));
  border-radius: var(--db-radius-xl, 16px);
  padding: 2.25rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7), 0 0 35px rgba(59, 130, 246, 0.08);
}

.db-auth-header {
  text-align: center;
  margin-bottom: 1.75rem;
}

.db-auth-header img {
  width: 48px;
  height: 48px;
  margin-bottom: 0.85rem;
  filter: drop-shadow(0 4px 12px rgba(59, 130, 246, 0.4));
}

.db-auth-title {
  font-size: 1.65rem;
  font-weight: 800;
  margin: 0;
  color: #ffffff;
  letter-spacing: -0.02em;
}

.db-auth-subtitle {
  color: var(--db-text-muted, #94a3b8);
  font-size: 0.88rem;
  margin-top: 0.35rem;
}

.db-auth-tabs {
  display: flex;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid var(--db-border, rgba(255, 255, 255, 0.08));
  border-radius: var(--db-radius-md, 8px);
  padding: 4px;
  gap: 4px;
  margin-bottom: 1.75rem;
}

.db-auth-tab-btn {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--db-text-muted, #94a3b8);
  padding: 0.6rem 0.5rem;
  font-size: 0.88rem;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  text-decoration: none;
}

.db-auth-tab-btn:hover {
  color: #ffffff;
}

.db-auth-tab-btn.active {
  background: var(--db-primary, #3b82f6);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.35);
}

.db-auth-company-box {
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid var(--db-border, rgba(255, 255, 255, 0.08));
  border-radius: var(--db-radius-md, 8px);
  padding: 1rem;
  margin: 1rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.db-vat-inline-group {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.db-btn-validate-vat {
  white-space: nowrap;
  background: #1e293b;
  border: 1px solid rgba(59, 130, 246, 0.4);
  color: #38bdf8;
  padding: 0.6rem 0.9rem;
  border-radius: var(--db-radius-md, 8px);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.db-btn-validate-vat:hover:not(:disabled) {
  background: rgba(56, 189, 248, 0.15);
  border-color: #38bdf8;
}

.db-btn-validate-vat.valid {
  background: rgba(16, 185, 129, 0.15);
  border-color: #10b981;
  color: #10b981;
  cursor: default;
}

.db-vat-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.76rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 0.5rem;
}

.db-vat-badge.valid {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.db-vat-badge.invalid {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.db-btn-modify-company {
  white-space: nowrap;
  background: rgba(30, 41, 59, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: #cbd5e1;
  padding: 0.6rem 0.95rem;
  border-radius: var(--db-radius-md, 8px);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.db-btn-modify-company:hover {
  background: rgba(59, 130, 246, 0.25);
  border-color: #3b82f6;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
}

/* =========================================================================
   My Account Consolidated Sub-Tabs Navigation
   ========================================================================= */
.db-account-tabs-nav {
  display: flex;
  align-items: center;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius-lg, 12px);
  padding: 6px;
  margin-bottom: 1.75rem;
  max-width: 820px;
}

.db-account-tab-group {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
}

.db-account-tab-btn {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 1.15rem;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--db-text-muted);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  text-decoration: none;
}

.db-account-tab-btn:hover {
  color: var(--db-text-main);
  background: rgba(255, 255, 255, 0.05);
}

.db-account-tab-btn.active {
  background: var(--db-primary);
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.4);
}

@media (max-width: 640px) {
  .db-account-tabs-nav {
    padding: 4px;
    margin-bottom: 1.25rem;
  }
  .db-account-tab-btn {
    padding: 0.5rem 0.8rem;
    font-size: 0.8rem;
    gap: 0.35rem;
  }
}

/* =========================================================================
   Notifications Settings Matrix Page
   ========================================================================= */
.db-notif-matrix-card {
  background: var(--db-bg-card, #131926);
  border: 1px solid var(--db-border, rgba(255, 255, 255, 0.08));
  border-radius: var(--db-radius-xl, 16px);
  padding: 1.75rem;
  box-shadow: var(--db-shadow-md);
  margin-bottom: 2rem;
}

.db-notif-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid var(--db-border, rgba(255, 255, 255, 0.08));
  border-radius: var(--db-radius-lg, 12px);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}

.db-notif-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.db-notif-table th {
  padding: 0.85rem 1rem;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #38bdf8;
  border-bottom: 1px solid var(--db-border, rgba(255, 255, 255, 0.1));
}

.db-notif-table td {
  padding: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  vertical-align: middle;
}

.db-notif-table tr:last-child td {
  border-bottom: none;
}

.db-notif-master-row {
  background: rgba(59, 130, 246, 0.07);
}

.db-notif-master-row td {
  border-bottom: 2px solid rgba(59, 130, 246, 0.3);
  font-weight: 700;
  color: #f8fafc;
}

.db-notif-col-name {
  text-align: left;
  font-size: 0.92rem;
  font-weight: 500;
  color: #f1f5f9;
}

.db-notif-col-center {
  text-align: center;
  width: 130px;
}

.db-notif-hours-input {
  width: 52px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid var(--db-border, rgba(255, 255, 255, 0.15));
  border-radius: 6px;
  color: #ffffff;
  padding: 4px 6px;
  font-size: 0.88rem;
  text-align: center;
  font-weight: 700;
  margin: 0 4px;
}

.db-notif-hours-input:focus {
  outline: none;
  border-color: var(--db-primary, #3b82f6);
}

/* =========================================================================
   Notification Settings: Running Hours Threshold Slider
   ========================================================================= */
.db-notif-hours-row-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0.25rem 0;
  max-width: 520px;
}

.db-notif-hours-header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.db-notif-hours-title-text {
  font-weight: 600;
  color: #f8fafc;
  font-size: 0.92rem;
}

.db-notif-hours-badge,
#deskbump-app .db-notif-hours-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  gap: 0.35rem !important;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.18) 0%, rgba(37, 99, 235, 0.28) 100%) !important;
  border: 1px solid rgba(96, 165, 250, 0.35) !important;
  color: #93c5fd !important;
  padding: 0 0.65rem !important;
  height: 26px !important;
  min-height: 26px !important;
  max-height: 26px !important;
  border-radius: 9999px !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.15) !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
}

.db-notif-hours-badge:hover,
#deskbump-app .db-notif-hours-badge:hover {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.28) 0%, rgba(37, 99, 235, 0.42) 100%) !important;
  border-color: rgba(96, 165, 250, 0.6) !important;
  box-shadow: 0 0 14px rgba(59, 130, 246, 0.3) !important;
  transform: translateY(-1px);
}

.db-notif-hours-badge i,
#deskbump-app .db-notif-hours-badge i {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  font-size: 0.85rem !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #93c5fd !important;
}

.db-notif-hours-badge strong,
#deskbump-app .db-notif-hours-badge strong {
  color: #ffffff !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
}

#deskbump-app #db-notif-hours-unit-display,
#db-notif-hours-unit-display {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  color: #93c5fd !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Direct inline editable number inside the badge - seamlessly styled like the original bold text */
#deskbump-app input[type="number"].db-notif-hours-direct-input,
#deskbump-app input.db-notif-hours-direct-input,
#deskbump-app .db-notif-hours-direct-input,
.db-notif-hours-direct-input {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  text-align: center !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 4px !important;
  color: #ffffff !important;
  font-family: inherit !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  height: 20px !important;
  min-height: 20px !important;
  max-height: 20px !important;
  width: 26px !important;
  min-width: 22px !important;
  max-width: 32px !important;
  padding: 0 !important;
  margin: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  cursor: text !important;
  transition: all 0.15s ease !important;
  -moz-appearance: textfield !important;
  -webkit-appearance: none !important;
}

#deskbump-app input[type="number"].db-notif-hours-direct-input::-webkit-outer-spin-button,
#deskbump-app input[type="number"].db-notif-hours-direct-input::-webkit-inner-spin-button,
#deskbump-app .db-notif-hours-direct-input::-webkit-outer-spin-button,
#deskbump-app .db-notif-hours-direct-input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
  display: none !important;
}

/* Subtle gentle hover so user sees it can be typed in */
#deskbump-app .db-notif-hours-badge:hover input[type="number"].db-notif-hours-direct-input,
#deskbump-app input[type="number"].db-notif-hours-direct-input:hover,
.db-notif-hours-badge:hover .db-notif-hours-direct-input,
.db-notif-hours-direct-input:hover {
  background: rgba(15, 23, 42, 0.4) !important;
  background-color: rgba(15, 23, 42, 0.4) !important;
  border-color: rgba(147, 197, 253, 0.35) !important;
}

/* Sleek subtle focused state when actively typing */
#deskbump-app input[type="number"].db-notif-hours-direct-input:focus,
#deskbump-app .db-notif-hours-direct-input:focus,
.db-notif-hours-direct-input:focus {
  background: rgba(15, 23, 42, 0.85) !important;
  background-color: rgba(15, 23, 42, 0.85) !important;
  border-color: #60a5fa !important;
  box-shadow: 0 0 6px rgba(96, 165, 250, 0.5) !important;
  color: #ffffff !important;
}

.db-notif-slider-box {
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 0.7rem 0.85rem 0.6rem;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.db-notif-slider-track-wrap {
  position: relative;
  width: 100%;
}

#deskbump-app .db-notif-hours-slider {
  width: 100%;
  height: 6px;
  border-radius: 9999px;
  background: linear-gradient(to right, #3b82f6 0%, #60a5fa 12%, rgba(255, 255, 255, 0.12) 12%, rgba(255, 255, 255, 0.12) 100%);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  margin: 0.35rem 0;
  transition: background 0.1s ease;
}

#deskbump-app .db-notif-hours-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  cursor: pointer;
  border: 3px solid #3b82f6;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.6), 0 2px 4px rgba(0, 0, 0, 0.4);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  margin-top: -6px;
}

#deskbump-app .db-notif-hours-slider::-webkit-slider-thumb:hover {
  transform: scale(1.22);
  box-shadow: 0 0 14px rgba(59, 130, 246, 0.8), 0 3px 6px rgba(0, 0, 0, 0.5);
}

#deskbump-app .db-notif-hours-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  cursor: pointer;
  border: 3px solid #3b82f6;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.6), 0 2px 4px rgba(0, 0, 0, 0.4);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#deskbump-app .db-notif-hours-slider::-moz-range-thumb:hover {
  transform: scale(1.22);
}

.db-notif-slider-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.2rem;
}

.db-notif-slider-ticks {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.72rem;
  color: var(--db-text-subtle, #64748b);
  user-select: none;
}

.db-notif-tick {
  cursor: pointer;
  transition: color 0.15s ease;
}

.db-notif-tick:hover {
  color: #93c5fd;
}

.db-notif-slider-presets {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.db-notif-presets-label {
  font-size: 0.72rem;
  color: var(--db-text-subtle, #64748b);
  margin-right: 2px;
}

.db-notif-preset-pill {
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--db-text-muted, #94a3b8);
  border-radius: 5px;
  padding: 2px 7px;
  font-size: 0.73rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1.35;
}

.db-notif-preset-pill:hover {
  background: rgba(59, 130, 246, 0.2);
  border-color: rgba(96, 165, 250, 0.4);
  color: #ffffff;
  transform: translateY(-1px);
}

.db-notif-preset-pill.active {
  background: rgba(59, 130, 246, 0.25);
  border-color: var(--db-primary, #3b82f6);
  color: #60a5fa;
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.25);
}

@media (max-width: 640px) {
  .db-notif-slider-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
  }
}

/* =========================================================================
   Custom Styled Checkbox (Ensures crisp white checkmark in all dark themes)
   ========================================================================= */
.db-custom-checkbox-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.65rem !important;
  cursor: pointer !important;
  user-select: none !important;
}

.db-custom-checkbox-input {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  pointer-events: none !important;
}

.db-custom-checkbox-box {
  width: 20px !important;
  height: 20px !important;
  border-radius: 4px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
  background: rgba(15, 23, 42, 0.7) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.15s ease !important;
  flex-shrink: 0 !important;
}

.db-custom-checkbox-input:checked + .db-custom-checkbox-box {
  background: #2563eb !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.35) !important;
}

.db-custom-check-svg {
  width: 14px !important;
  height: 14px !important;
  display: none !important;
  stroke: #ffffff !important;
}

.db-custom-checkbox-input:checked + .db-custom-checkbox-box .db-custom-check-svg {
  display: block !important;
}

/* =========================================================================
   Step 3: Access Credentials & Real-Time Password Verification System
   ========================================================================= */

#deskbump-app .db-input-eye-wrap {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}

#deskbump-app .db-input.has-eye-btn {
  padding-right: 2.75rem !important;
}

#deskbump-app .db-input-eye-btn {
  position: absolute !important;
  right: 0.75rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: transparent !important;
  border: none !important;
  color: var(--db-text-subtle) !important;
  font-size: 0.95rem !important;
  cursor: pointer !important;
  padding: 0.35rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 4px !important;
  transition: color 0.15s ease, background-color 0.15s ease !important;
  z-index: 2 !important;
}

#deskbump-app .db-input-eye-btn:hover {
  color: var(--db-text-main) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

/* Password Action Toolbar (Generate & Copy) */
#deskbump-app .db-pw-label-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  margin-bottom: 0.4rem !important;
}

#deskbump-app .db-pw-label-row .db-form-label {
  margin-bottom: 0 !important;
}

#deskbump-app .db-pw-toolbar {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
}

#deskbump-app .db-pw-toolbar-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  padding: 0.22rem 0.6rem !important;
  font-size: 0.76rem !important;
  font-weight: 500 !important;
  color: var(--db-text-muted) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--db-border) !important;
  border-radius: var(--db-radius-sm, 6px) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  line-height: 1.25 !important;
  user-select: none !important;
}

#deskbump-app .db-pw-toolbar-btn:hover {
  color: var(--db-text-main) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: var(--db-primary) !important;
}

#deskbump-app .db-pw-toolbar-btn.db-btn-gen-pw:hover {
  color: var(--db-primary) !important;
  border-color: var(--db-primary) !important;
}

#deskbump-app .db-pw-toolbar-btn.copied {
  color: var(--db-success) !important;
  border-color: var(--db-success) !important;
  background: rgba(16, 185, 129, 0.15) !important;
}

/* Tooltip wide variant for password / credentials info */
#deskbump-app .db-tooltip-text.db-tooltip-wide {
  max-width: 320px !important;
  width: 320px !important;
  padding: 0.75rem 0.95rem !important;
  font-size: 0.74rem !important;
  line-height: 1.5 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: #0b1120 !important;
  box-shadow: 0 12px 30px -4px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(99, 102, 241, 0.2) !important;
}

#deskbump-app .db-tooltip-text.db-tooltip-wide strong {
  color: #f1f5f9 !important;
}

#deskbump-app .db-tooltip-text.db-tooltip-wide code {
  background: rgba(255, 255, 255, 0.1) !important;
  padding: 1px 4px !important;
  border-radius: 3px !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.72rem !important;
  color: #38bdf8 !important;
}

@media (max-width: 640px) {
  #deskbump-app .db-tooltip-text.db-tooltip-wide {
    width: 260px !important;
    max-width: calc(100vw - 3rem) !important;
    left: auto !important;
    right: -20px !important;
    transform: none !important;
  }
  #deskbump-app .db-tooltip-text.db-tooltip-wide::after {
    left: auto !important;
    right: 25px !important;
  }
}

/* Strength Meter Box */
#deskbump-app .db-pw-strength-box {
  margin-top: 0.55rem !important;
  background: rgba(15, 23, 42, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: var(--db-radius-md) !important;
  padding: 0.6rem 0.85rem !important;
}

#deskbump-app .db-pw-strength-bar-bg {
  width: 100% !important;
  height: 6px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-radius: 9999px !important;
  overflow: hidden !important;
  margin-bottom: 0.4rem !important;
}

#deskbump-app .db-pw-strength-bar-fill {
  height: 100% !important;
  width: 0% !important;
  border-radius: 9999px !important;
  background: #ef4444 !important;
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.25s ease !important;
}

#deskbump-app .db-pw-strength-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-size: 0.75rem !important;
  color: var(--db-text-muted) !important;
}

#deskbump-app .db-pw-strength-status {
  font-weight: 600 !important;
  color: var(--db-text-subtle) !important;
}

#deskbump-app .db-pw-strength-status.weak {
  color: #ef4444 !important;
}

#deskbump-app .db-pw-strength-status.fair {
  color: #f59e0b !important;
}

#deskbump-app .db-pw-strength-status.good {
  color: #3b82f6 !important;
}

#deskbump-app .db-pw-strength-status.strong {
  color: #10b981 !important;
}

/* Rules Card */
#deskbump-app .db-pw-rules-card {
  margin-top: 0.55rem !important;
  background: rgba(15, 23, 42, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: var(--db-radius-md) !important;
  padding: 0.75rem 0.85rem !important;
}

#deskbump-app .db-pw-rules-title {
  font-size: 0.73rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--db-text-subtle) !important;
  margin-bottom: 0.5rem !important;
}

#deskbump-app .db-pw-rules-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
  gap: 0.35rem 0.75rem !important;
}

#deskbump-app .db-pw-rule-item {
  display: flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  font-size: 0.76rem !important;
  color: var(--db-text-subtle) !important;
  line-height: 1.35 !important;
  transition: color 0.15s ease !important;
}

#deskbump-app .db-pw-rule-item i {
  font-size: 0.78rem !important;
  width: 14px !important;
  text-align: center !important;
  flex-shrink: 0 !important;
  transition: transform 0.15s ease, color 0.15s ease !important;
}

#deskbump-app .db-pw-rule-item.pass {
  color: #10b981 !important;
}

#deskbump-app .db-pw-rule-item.pass i {
  color: #10b981 !important;
  transform: scale(1.05) !important;
}

#deskbump-app .db-pw-rule-item.fail {
  color: #ef4444 !important;
}

#deskbump-app .db-pw-rule-item.fail i {
  color: #ef4444 !important;
}

#deskbump-app .db-pw-rule-item code {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.72rem !important;
  background: rgba(255, 255, 255, 0.08) !important;
  padding: 1px 3px !important;
  border-radius: 3px !important;
}

/* Match & Hint Badges */
#deskbump-app .db-pw-match-hint,
#deskbump-app .db-pw-field-hint {
  font-size: 0.78rem !important;
  margin-top: 0.35rem !important;
  min-height: 1.1rem !important;
  transition: all 0.15s ease !important;
}

/* Auth Card Realtime Password Complexity Requirements Grid Optimization */
#deskbump-app .db-auth-card .db-pw-rules-grid {
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)) !important;
  gap: 0.35rem 0.65rem !important;
}


/* =========================================================================
   Virtual Machines Page: Background Visual Loader & Skeleton States
   ========================================================================= */

@keyframes dbShimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.db-shimmer {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.03) 20%,
    rgba(255, 255, 255, 0.08) 38%,
    rgba(255, 255, 255, 0.03) 56%
  ) !important;
  background-size: 200% 100% !important;
  animation: dbShimmer 1.8s ease-in-out infinite !important;
}

.db-machines-loader-container {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: 100%;
  animation: dbFadeIn 0.25s ease-out;
}

.db-machines-loader-banner {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  padding: 1rem 1.4rem;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(15, 23, 42, 0.65));
  border: 1px solid rgba(37, 99, 235, 0.25);
  border-radius: var(--db-radius-lg, 12px);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
}

.db-machines-loader-spinner {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(37, 99, 235, 0.16);
  border: 1px solid rgba(37, 99, 235, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--db-primary);
  font-size: 1.25rem;
  flex-shrink: 0;
  box-shadow: 0 0 16px rgba(37, 99, 235, 0.3);
}

.db-machines-loader-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.db-machines-loader-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.01em;
}

.db-machines-loader-sub {
  font-size: 0.79rem;
  color: var(--db-text-muted);
}

/* Skeleton Grid & Card Elements */
.db-card-skeleton {
  pointer-events: none;
  user-select: none;
  background: var(--db-bg-card, #1e293b);
  border: 1px solid var(--db-border, #334155);
  border-radius: var(--db-radius-xl, 14px);
  padding: 1.25rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  opacity: 0.9;
  min-height: 380px;
}

.db-skeleton-header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.db-skeleton-avatar {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  flex-shrink: 0;
}

.db-skeleton-title-lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.db-skeleton-line {
  height: 12px;
  border-radius: 4px;
}

.db-skeleton-line.tiny {
  width: 45%;
  height: 9px;
}

.db-skeleton-line.short {
  width: 65%;
}

.db-skeleton-line.medium {
  width: 82%;
}

.db-skeleton-line.long {
  width: 95%;
}

.db-skeleton-badge {
  width: 68px;
  height: 24px;
  border-radius: 9999px;
  flex-shrink: 0;
}

.db-skeleton-preview {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--db-radius-md, 8px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.db-skeleton-icon {
  font-size: 2.2rem;
  color: rgba(255, 255, 255, 0.12);
}

.db-skeleton-specs {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 0.65rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.db-skeleton-footer {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: auto;
}

.db-skeleton-btn {
  height: 36px;
  border-radius: var(--db-radius-md, 6px);
  flex: 1;
}

.db-skeleton-btn.mini {
  flex: 0 0 36px;
}

.db-skeleton-table-wrapper {
  background: var(--db-bg-card);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius-xl);
  overflow: hidden;
}

.db-skeleton-row td {
  padding: 1rem 0.85rem !important;
  vertical-align: middle;
}

/* ========================================================
   SPOT Instances Advisory & Disclaimers
   ======================================================== */
.db-spot-advisory-container {
  margin-top: 1.5rem;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--db-radius-lg);
  overflow: hidden;
  transition: all 0.25s ease;
}

.db-spot-advisory-container.active-spot-selected {
  background: rgba(245, 158, 11, 0.05);
  border-color: rgba(245, 158, 11, 0.35);
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.08);
}

.db-spot-advisory-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.95rem 1.25rem;
  cursor: pointer;
  user-select: none;
  transition: background 0.2s ease;
}

.db-spot-advisory-header:hover {
  background: rgba(255, 255, 255, 0.04);
}

.db-spot-advisory-container.is-open .db-spot-advisory-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.db-spot-advisory-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.65rem;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--db-text);
}

.db-spot-advisory-title i {
  font-size: 1.15rem;
  color: #facc15;
}

.db-spot-advisory-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.db-spot-toggle-chevron {
  font-size: 0.85rem;
  color: var(--db-text-muted);
  transition: transform 0.25s ease, color 0.2s ease;
}

.db-spot-advisory-container.is-open .db-spot-toggle-chevron {
  transform: rotate(180deg);
  color: #facc15;
}

.db-spot-advisory-tag {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  letter-spacing: 0.02em;
}

.db-spot-advisory-tag.tag-selected {
  background: rgba(245, 158, 11, 0.16);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.db-spot-advisory-body {
  padding: 1.25rem;
}

.db-spot-advisory-container.is-collapsed .db-spot-advisory-body {
  display: none;
}

.db-spot-advisory-container.is-open .db-spot-advisory-body {
  display: block;
}

.db-spot-advisory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

.db-spot-advisory-item {
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--db-radius-md);
  padding: 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.db-spot-advisory-item.note-item {
  border-left: 3.5px solid #38bdf8;
}

.db-spot-advisory-item.warn-item {
  border-left: 3.5px solid #f59e0b;
}

.db-spot-advisory-item-header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.92rem;
  color: var(--db-text);
}

.db-spot-icon-wrap {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.db-spot-icon-wrap.note-icon {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
}

.db-spot-icon-wrap.warn-icon {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

.db-spot-advisory-item p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--db-text-muted);
}

.db-spot-advisory-item p strong {
  color: var(--db-text);
}

/* Spot Launch Pre-Flight Banner */
.db-spot-launch-banner {
  background: rgba(245, 158, 11, 0.09);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-left: 4px solid #f59e0b;
  border-radius: var(--db-radius-md);
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
}

.db-spot-launch-banner-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(245, 158, 11, 0.2);
  color: #f59e0b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.db-spot-launch-banner-body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 1;
}

.db-spot-launch-banner-title {
  font-size: 0.92rem;
  color: #fbbf24;
}

.db-spot-launch-banner-title strong {
  color: #fff;
}

.db-spot-launch-banner-desc {
  font-size: 0.84rem;
  line-height: 1.5;
  color: #cbd5e1;
}

/* First-Time Windows Provisioning Overlay & Blur */
.db-card-preview-img.blurred,
#db-win-stream-img.blurred {
  filter: blur(3px) brightness(0.82);
  transform: scale(1.02);
  transition: filter 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}

.db-card-preview {
  position: relative;
  overflow: hidden;
}

.db-first-provision-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.25rem 1.5rem;
  background: radial-gradient(circle at center, rgba(15, 23, 42, 0.62) 0%, rgba(15, 23, 42, 0.74) 100%);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 15;
  text-align: center;
  pointer-events: none;
  animation: dbOverlayFadeIn 0.3s ease-out forwards;
}

.db-first-provision-overlay .db-provision-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(245, 158, 11, 0.18);
  border: 1px solid rgba(245, 158, 11, 0.45);
  color: #fbbf24;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.3rem 0.75rem;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.65rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.db-first-provision-overlay .db-provision-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0.45rem;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.db-first-provision-overlay .db-provision-msg {
  font-size: 0.82rem;
  color: #cbd5e1;
  max-width: 400px;
  line-height: 1.45;
  margin-bottom: 1rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

.db-first-provision-overlay .db-provision-progress {
  width: 100%;
  max-width: 260px;
  height: 6px;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 9999px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}

.db-first-provision-overlay .db-provision-bar {
  height: 100%;
  min-width: 6%;
  background: linear-gradient(90deg, #f59e0b, #3b82f6 50%, #10b981 100%);
  background-size: 200% 100%;
  border-radius: 9999px;
  position: absolute;
  top: 0;
  left: 0;
  transition: width 1s linear;
  animation: dbProvisionShimmer 2.5s infinite linear;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

.db-first-provision-overlay .db-provision-bar:not([style*="width"]) {
  width: 45%;
  animation: dbProvisionIndeterminate 1.8s infinite ease-in-out;
}

@keyframes dbProvisionIndeterminate {
  0% { left: -45%; width: 45%; }
  50% { left: 30%; width: 55%; }
  100% { left: 100%; width: 45%; }
}

.db-first-provision-overlay .db-provision-stage {
  color: #93c5fd;
  font-size: 0.76rem;
  font-weight: 600;
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.db-preview-badge.setup {
  background: rgba(245, 158, 11, 0.2);
  border: 1px solid rgba(245, 158, 11, 0.5);
  color: #fbbf24;
}

.db-live-dot.orange {
  background: #f59e0b;
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.6);
}

/* =========================================================================
   Failover & Zone Migration Modal Styles
   ========================================================================= */

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

.db-modal-failover {
  max-width: 640px;
  width: 95%;
  background: var(--db-bg-card);
  border: 1px solid var(--db-border);
  box-shadow: var(--db-shadow-lg);
  border-radius: var(--db-radius-lg);
  position: relative;
  overflow: hidden;
  animation: dbModalFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.db-modal-failover .db-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--db-border);
  background: rgba(255, 255, 255, 0.02);
}

.db-modal-failover .db-modal-body {
  padding: 1.5rem;
  max-height: 75vh;
  overflow-y: auto;
}

.db-modal-failover .db-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.85rem;
  padding: 1.15rem 1.5rem;
  border-top: 1px solid var(--db-border);
  background: rgba(11, 15, 23, 0.5);
}

/* Warning & Explanation Boxes */
.db-failover-warning-box {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: var(--db-radius-md);
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  color: #fde68a;
  font-size: 0.92rem;
  line-height: 1.5;
}

.db-failover-warning-box i {
  color: var(--db-warning);
  font-size: 1.25rem;
  margin-top: 0.15rem;
  flex-shrink: 0;
}

.db-failover-options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

@media (max-width: 600px) {
  .db-failover-options-grid {
    grid-template-columns: 1fr;
  }
}

.db-failover-option-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius-md);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: all 0.2s ease;
}

.db-failover-option-card h4 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.db-failover-option-card p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--db-text-muted);
  line-height: 1.45;
}

/* Zone Selection Pills / Radio List */
.db-zone-picker-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--db-text-muted);
  margin-bottom: 0.65rem;
}

.db-zone-picker-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 1.25rem;
}

.db-zone-choice-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.db-zone-choice-card:hover {
  background: rgba(37, 99, 235, 0.08);
  border-color: rgba(37, 99, 235, 0.4);
}

.db-zone-choice-card.selected {
  background: rgba(37, 99, 235, 0.15);
  border-color: var(--db-primary);
  box-shadow: 0 0 12px var(--db-primary-glow);
}

.db-zone-choice-card.db-zone-exhausted {
  opacity: 0.68;
  background: rgba(239, 68, 68, 0.03);
  border-color: rgba(239, 68, 68, 0.25);
}

.db-zone-choice-card.db-zone-exhausted:hover {
  opacity: 0.9;
  border-color: rgba(239, 68, 68, 0.45);
}

.db-zone-choice-info {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.db-zone-radio {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--db-text-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.db-zone-choice-card.selected .db-zone-radio {
  border-color: var(--db-primary);
}

.db-zone-choice-card.selected .db-zone-radio::after {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--db-primary);
  border-radius: 50%;
}

.db-zone-name {
  font-weight: 700;
  color: #fff;
  font-size: 0.95rem;
  font-family: var(--db-font-mono);
}

.db-zone-region-tag {
  font-size: 0.75rem;
  color: var(--db-text-muted);
}

.db-zone-availability-meta {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  margin-top: 0.3rem;
  flex-wrap: wrap;
}

.db-zone-avail-count {
  font-family: var(--db-font-mono);
}

.db-zone-vms-pill {
  font-size: 0.72rem;
  color: var(--db-text-muted);
  background: rgba(255, 255, 255, 0.05);
  padding: 1px 6px;
  border-radius: 4px;
}

.db-zone-tag-container {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.db-zone-tag-badge {
  font-size: 0.72rem;
  padding: 3px 9px;
  border-radius: 999px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.db-zone-tag-badge.recommended {
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid rgba(16, 185, 129, 0.55);
  color: #34d399;
  font-weight: 700;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.25);
}

.db-zone-tag-badge.available {
  background: rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.4);
  color: #60a5fa;
}

.db-zone-tag-badge.limited {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fbbf24;
}

.db-zone-tag-badge.exhausted {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #f87171;
}

/* Route Badge (us-central1-a -> us-central1-b) */
.db-mig-route-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius-sm);
  font-family: var(--db-font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  margin-top: 0.25rem;
}

.db-mig-route-badge i {
  color: var(--db-primary);
}

/* Migration Stepper */
.db-mig-stepper {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.db-mig-step-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--db-radius-md);
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid transparent;
  transition: all 0.25s ease;
}

.db-mig-step-row.completed {
  border-color: rgba(16, 185, 129, 0.25);
  background: rgba(16, 185, 129, 0.04);
}

.db-mig-step-row.active {
  border-color: rgba(59, 130, 246, 0.4);
  background: rgba(59, 130, 246, 0.08);
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.15);
}

.db-mig-step-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  flex-shrink: 0;
}

.db-mig-step-row.pending .db-mig-step-icon {
  background: rgba(255, 255, 255, 0.06);
  color: var(--db-text-subtle);
}

.db-mig-step-row.active .db-mig-step-icon {
  background: var(--db-primary);
  color: #fff;
  box-shadow: 0 0 8px var(--db-primary-glow);
}

.db-mig-step-row.completed .db-mig-step-icon {
  background: var(--db-success);
  color: #fff;
  box-shadow: 0 0 8px var(--db-success-glow);
}

.db-mig-step-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--db-text-muted);
}

.db-mig-step-row.active .db-mig-step-title {
  color: #fff;
}

.db-mig-step-row.completed .db-mig-step-title {
  color: #e2e8f0;
}

/* Migration Progress Bar */
.db-mig-progress-wrapper {
  margin-bottom: 1.25rem;
}

.db-mig-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.45rem;
  font-size: 0.82rem;
  color: var(--db-text-muted);
}

.db-mig-progress-track {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}

.db-mig-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #10b981);
  border-radius: 999px;
  transition: width 0.4s ease;
  position: relative;
}

.db-mig-progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: dbMigShimmer 1.5s infinite ease-in-out;
}

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

/* Terminal Console Logs */
.db-mig-console {
  background: #090d16;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--db-radius-md);
  padding: 0.85rem 1rem;
  max-height: 140px;
  overflow-y: auto;
  font-family: var(--db-font-mono);
  font-size: 0.78rem;
  color: #94a3b8;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.db-mig-log-line {
  line-height: 1.45;
  word-break: break-all;
}

.db-mig-log-line:last-child {
  color: #38bdf8;
  font-weight: 600;
}

/* Success Container */
.db-mig-success-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.5rem 1rem;
  gap: 0.75rem;
}

.db-mig-success-icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.15);
  border: 2px solid var(--db-success);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--db-success);
  font-size: 1.75rem;
  box-shadow: 0 0 20px var(--db-success-glow);
  margin-bottom: 0.5rem;
}

.db-mig-success-box h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
}

.db-mig-success-box p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--db-text-muted);
  max-width: 440px;
  line-height: 1.5;
}

/* Machine Grid Card Migration Overlay */
.db-card-preview.db-card-preview-migrating {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 50% 35%, rgba(59, 130, 246, 0.22), rgba(11, 15, 23, 0.96));
  border-bottom: 1px solid rgba(59, 130, 246, 0.35);
  box-shadow: 0 0 24px rgba(59, 130, 246, 0.15) inset;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 165px;
}

.db-card-preview.db-card-preview-migrating:hover {
  background: radial-gradient(circle at 50% 35%, rgba(59, 130, 246, 0.28), rgba(11, 15, 23, 0.94));
  border-bottom-color: rgba(59, 130, 246, 0.6);
  box-shadow: 0 0 32px rgba(59, 130, 246, 0.28) inset;
}

.db-mig-card-overlay {
  padding: 1.25rem 1.15rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}

.db-mig-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(59, 130, 246, 0.2);
  border: 1px solid rgba(59, 130, 246, 0.45);
  color: #60a5fa;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  margin-bottom: 0.45rem;
}

.db-mig-card-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.4rem;
}

.db-mig-card-route {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-size: 0.78rem;
  color: var(--db-text-muted);
  margin-bottom: 0.75rem;
}

.db-mig-card-zone {
  font-family: var(--db-font-mono, monospace);
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
}

.db-mig-card-zone.src {
  background: rgba(255, 255, 255, 0.06);
  color: var(--db-text-main);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.db-mig-card-zone.tgt {
  background: rgba(16, 185, 129, 0.12);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.db-mig-card-progress {
  width: 100%;
  max-width: 250px;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 0.55rem;
  position: relative;
}

.db-mig-card-bar {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #10b981);
  border-radius: 999px;
  transition: width 0.4s ease;
}

.db-mig-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 250px;
  font-size: 0.74rem;
  color: var(--db-text-muted);
}

.db-mig-card-click-hint {
  color: #60a5fa;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: color 0.15s ease;
}

.db-card-preview.db-card-preview-migrating:hover .db-mig-card-click-hint {
  color: #93c5fd;
  text-decoration: underline;
}

/* Machine Grid Card Migration Paused / Error State */
.db-card-preview.db-card-preview-migrating.db-card-preview-migrating-error {
  background: radial-gradient(circle at 50% 35%, rgba(239, 68, 68, 0.22), rgba(17, 12, 16, 0.97));
  border-bottom: 1px solid rgba(239, 68, 68, 0.45);
  box-shadow: 0 0 24px rgba(239, 68, 68, 0.18) inset;
}

.db-card-preview.db-card-preview-migrating.db-card-preview-migrating-error:hover {
  background: radial-gradient(circle at 50% 35%, rgba(239, 68, 68, 0.3), rgba(17, 12, 16, 0.95));
  border-bottom-color: rgba(239, 68, 68, 0.65);
  box-shadow: 0 0 32px rgba(239, 68, 68, 0.28) inset;
}

.db-mig-card-badge.error {
  background: rgba(239, 68, 68, 0.22);
  border-color: rgba(239, 68, 68, 0.5);
  color: #fca5a5;
  animation: dbPulse 2s infinite;
}

.db-mig-card-title.error {
  color: #fecaca;
}

.db-mig-card-zone.tgt.error {
  background: rgba(239, 68, 68, 0.14);
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.35);
}

.db-mig-card-bar.error {
  background: linear-gradient(90deg, #f59e0b, #ef4444);
}

.db-mig-card-click-hint.action-needed {
  color: #fca5a5;
  font-weight: 700;
}

.db-card-preview.db-card-preview-migrating.db-card-preview-migrating-error:hover .db-mig-card-click-hint.action-needed {
  color: #ffffff;
  text-decoration: underline;
}

/* =========================================================================
   Network & Security Mesh View
   ========================================================================= */

.db-net-loading-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 4rem 2rem;
  background: var(--db-card-bg);
  border: 1px solid var(--db-card-border);
  border-radius: var(--db-radius-lg);
  color: var(--db-text-muted);
  font-size: 0.95rem;
}

.db-net-loading-card i {
  font-size: 2rem;
  color: #06b6d4;
}

.db-net-hero-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 1.75rem;
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.08) 0%, rgba(15, 23, 42, 0.7) 100%);
  border: 1px solid rgba(6, 182, 212, 0.25);
  border-radius: var(--db-radius-lg);
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.db-net-hero-left {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.db-net-hero-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: rgba(6, 182, 212, 0.15);
  border: 1px solid rgba(6, 182, 212, 0.35);
  color: #06b6d4;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.db-net-hero-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--db-text-main);
  margin-bottom: 0.35rem;
}

.db-net-hero-tags {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.db-net-badge-secured {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.6rem;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #10b981;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--db-radius-full);
}

.db-net-badge-tenant {
  font-family: var(--db-font-mono);
  font-size: 0.75rem;
  color: var(--db-text-muted);
  background: rgba(255, 255, 255, 0.04);
  padding: 0.2rem 0.55rem;
  border-radius: var(--db-radius-sm);
  border: 1px solid var(--db-border-color);
}

.db-net-badge-fleet {
  font-size: 0.75rem;
  font-weight: 600;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.1);
  padding: 0.2rem 0.55rem;
  border-radius: var(--db-radius-sm);
  border: 1px solid rgba(56, 189, 248, 0.25);
}

.db-net-hero-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
  flex-shrink: 0;
}

.db-net-sync-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  border-radius: var(--db-radius-full);
  font-size: 0.8rem;
  font-weight: 600;
}

.db-net-sync-pill.synced {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #10b981;
}

.db-net-sync-pill.pending {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #f59e0b;
}

.db-net-sync-time {
  font-size: 0.72rem;
  color: var(--db-text-subtle);
}

.db-net-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.db-net-card {
  background: var(--db-card-bg);
  border: 1px solid var(--db-card-border);
  border-radius: var(--db-radius-lg);
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.db-net-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.db-net-card-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--db-text-main);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.25rem 0;
}

.db-net-card-desc {
  font-size: 0.85rem;
  color: var(--db-text-muted);
  margin: 0;
}

/* Toggle Switch Component */
.db-toggle-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 26px;
  flex-shrink: 0;
}

.db-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.db-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.15);
  transition: 0.25s ease;
  border-radius: 34px;
  border: 1px solid var(--db-border-color);
}

.db-toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: #ffffff;
  transition: 0.25s ease;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.db-toggle-switch input:checked + .db-toggle-slider {
  background-color: #06b6d4;
  border-color: #0891b2;
}

.db-toggle-switch input:checked + .db-toggle-slider:before {
  transform: translateX(24px);
}

.db-net-status-notice {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.15rem 1.25rem;
  border-radius: var(--db-radius-md);
  margin-top: 0.5rem;
}

.db-net-status-notice.enabled {
  background: rgba(6, 182, 212, 0.08);
  border: 1px solid rgba(6, 182, 212, 0.25);
  color: #e0f2fe;
}

.db-net-status-notice.enabled i {
  font-size: 1.35rem;
  color: #06b6d4;
  margin-top: 2px;
}

.db-net-status-notice.isolated {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #fef2f2;
}

.db-net-status-notice.isolated i {
  font-size: 1.35rem;
  color: #ef4444;
  margin-top: 2px;
}

.db-net-status-notice strong {
  display: block;
  font-size: 0.95rem;
  margin-bottom: 0.25rem;
}

.db-net-status-notice p {
  font-size: 0.82rem;
  color: var(--db-text-muted);
  margin: 0;
  line-height: 1.45;
}

/* Preset Ports Grid */
.db-net-presets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.85rem;
  margin-bottom: 1rem;
}

.db-net-preset-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--db-border-color);
  border-radius: var(--db-radius-md);
  padding: 0.9rem 1rem;
  transition: all 0.2s ease;
}

.db-net-preset-item:hover {
  border-color: rgba(6, 182, 212, 0.3);
  background: rgba(255, 255, 255, 0.05);
}

.db-net-preset-item.active {
  background: rgba(16, 185, 129, 0.06);
  border-color: rgba(16, 185, 129, 0.35);
}

.db-net-preset-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.35rem;
}

.db-net-preset-name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--db-text-main);
}

.db-net-preset-port {
  font-family: var(--db-font-mono);
  font-size: 0.72rem;
  padding: 0.15rem 0.45rem;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  color: #38bdf8;
  margin-left: 0.4rem;
}

.db-net-preset-desc {
  font-size: 0.76rem;
  color: var(--db-text-muted);
  line-height: 1.35;
}

.db-net-footer-hint {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--db-text-muted);
  background: rgba(255, 255, 255, 0.02);
  padding: 0.75rem 1rem;
  border-radius: var(--db-radius-sm);
  border: 1px dashed var(--db-border-color);
}

.db-net-footer-hint i {
  color: #38bdf8;
}

.db-net-footer-hint a {
  color: #38bdf8;
  text-decoration: underline;
  cursor: pointer;
}

.db-net-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--db-text-muted);
}

.db-net-empty-state i {
  font-size: 2rem;
  margin-bottom: 0.75rem;
  color: var(--db-text-subtle);
}

.db-net-empty-state p {
  max-width: 480px;
  font-size: 0.85rem;
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .db-net-hero-card {
    flex-direction: column;
    align-items: flex-start;
  }
  .db-net-hero-right {
    align-items: flex-start;
  }
  .db-net-presets-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================================
   Deploy Progress Modal & Multi-Zone Failover Live Radar
   ========================================================================= */

.db-modal-deploy-progress {
  max-width: 600px;
  width: 95%;
  background: var(--db-bg-card, #0f172a);
  border: 1px solid rgba(59, 130, 246, 0.35);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.75), 0 0 35px rgba(59, 130, 246, 0.2);
  border-radius: var(--db-radius-lg, 16px);
  position: relative;
  overflow: hidden;
  animation: dbModalFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.db-modal-deploy-progress .db-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.15rem 1.5rem;
  border-bottom: 1px solid var(--db-border, rgba(255, 255, 255, 0.08));
  background: rgba(255, 255, 255, 0.02);
}

.db-deploy-timer-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--db-font-mono, monospace);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.25rem 0.65rem;
  border-radius: 9999px;
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.3);
  color: #60a5fa;
  letter-spacing: 0.5px;
}

.db-modal-deploy-progress .db-modal-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

/* Machine Info Banner */
.db-deploy-meta-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--db-radius-md, 8px);
  padding: 0.65rem 0.9rem;
}

.db-deploy-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--db-text-muted, #94a3b8);
  font-weight: 500;
}

.db-deploy-meta-pill strong {
  color: var(--db-text, #f8fafc);
}

/* Center Radar & Animated Status Orb */
.db-deploy-visual-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 0 0.4rem 0;
  text-align: center;
  position: relative;
}

.db-deploy-radar-wrap {
  position: relative;
  width: 90px;
  height: 90px;
  margin-bottom: 1.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.db-deploy-radar-ripple {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  border: 2px solid rgba(59, 130, 246, 0.4);
  animation: dbRadarRipple 2.2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

.db-deploy-radar-ripple.delay-1 {
  animation-delay: 0.75s;
}

.db-deploy-radar-ripple.delay-2 {
  animation-delay: 1.5s;
}

@keyframes dbRadarRipple {
  0% {
    transform: scale(0.6);
    opacity: 0.9;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

.db-deploy-orb {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #2563eb, #1e3a8a);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.75rem;
  box-shadow: 0 0 25px rgba(37, 99, 235, 0.6), inset 0 2px 4px rgba(255, 255, 255, 0.3);
  position: relative;
  z-index: 2;
  transition: all 0.35s ease;
}

.db-deploy-orb.stockout {
  background: radial-gradient(circle at 35% 35%, #d97706, #78350f);
  box-shadow: 0 0 25px rgba(217, 119, 6, 0.6), inset 0 2px 4px rgba(255, 255, 255, 0.3);
}

.db-deploy-orb.success {
  background: radial-gradient(circle at 35% 35%, #059669, #064e3b);
  box-shadow: 0 0 30px rgba(16, 185, 129, 0.7), inset 0 2px 4px rgba(255, 255, 255, 0.4);
}

.db-deploy-orb.error {
  background: radial-gradient(circle at 35% 35%, #dc2626, #7f1d1d);
  box-shadow: 0 0 25px rgba(220, 38, 38, 0.6);
}

.db-deploy-status-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--db-text, #f8fafc);
  margin: 0 0 0.35rem 0;
}

.db-deploy-status-desc {
  font-size: 0.88rem;
  color: var(--db-text-muted, #94a3b8);
  margin: 0;
  max-width: 440px;
  line-height: 1.45;
}

/* Zone Pipeline Step Pills */
.db-deploy-zones-track {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.6rem;
  background: rgba(0, 0, 0, 0.25);
  border-radius: var(--db-radius-md, 8px);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.db-deploy-zone-step {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.65rem;
  border-radius: 9999px;
  font-size: 0.76rem;
  font-family: var(--db-font-mono, monospace);
  font-weight: 500;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--db-text-muted, #94a3b8);
  transition: all 0.25s ease;
}

.db-deploy-zone-step.active {
  background: rgba(59, 130, 246, 0.18);
  border-color: rgba(59, 130, 246, 0.55);
  color: #93c5fd;
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.35);
}

.db-deploy-zone-step.stockout {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.4);
  color: #fde68a;
  text-decoration: line-through;
  opacity: 0.75;
}

.db-deploy-zone-step.secured {
  background: rgba(16, 185, 129, 0.18);
  border-color: rgba(16, 185, 129, 0.55);
  color: #6ee7b7;
  font-weight: 600;
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.4);
}

/* Activity Terminal / Live Events Feed */
.db-deploy-live-log {
  background: rgba(7, 10, 19, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--db-radius-md, 8px);
  padding: 0.75rem 0.9rem;
  max-height: 125px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-family: var(--db-font-mono, monospace);
  font-size: 0.78rem;
  line-height: 1.45;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.db-deploy-log-entry {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  color: #cbd5e1;
}

.db-deploy-log-entry.new-entry {
  animation: dbLogFadeIn 0.2s ease;
}

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

.db-deploy-log-time {
  color: var(--db-text-subtle, #64748b);
  flex-shrink: 0;
}

.db-deploy-log-entry.warn {
  color: #fde68a;
}

.db-deploy-log-entry.success {
  color: #6ee7b7;
}

.db-deploy-log-entry.checking {
  color: #93c5fd;
}

/* Shimmer Continuous Progress Bar */
.db-deploy-progress-bar-wrap {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 9999px;
  overflow: hidden;
  position: relative;
}

.db-deploy-progress-bar-inner {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #2563eb, #38bdf8, #6366f1, #2563eb);
  background-size: 200% 100%;
  animation: dbProgressShimmer 2s linear infinite;
  border-radius: 9999px;
}

@keyframes dbProgressShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Reassurance Banner */
.db-deploy-reassurance {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  background: rgba(59, 130, 246, 0.06);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: var(--db-radius-md, 8px);
  padding: 0.75rem 0.95rem;
  font-size: 0.8rem;
  line-height: 1.45;
  color: #bfdbfe;
}

.db-deploy-reassurance i {
  color: #3b82f6;
  font-size: 1rem;
  margin-top: 0.1rem;
  flex-shrink: 0;
}

/* =========================================================================
   Buy Credits Topup Modal & Dynamic VAT Price Breakdown (Double Sized)
   ========================================================================= */

.db-modal.db-modal-topup {
  max-width: 1040px;
  width: 95vw;
  background: var(--db-bg-card, #0f172a);
  border: 1px solid var(--db-border, rgba(255, 255, 255, 0.12));
  border-radius: var(--db-radius-xl, 16px);
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.75), 0 0 40px rgba(37, 99, 235, 0.15);
  overflow: hidden;
  position: relative;
}

.db-topup-layout {
  display: grid;
  grid-template-columns: 1.28fr 0.92fr;
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 880px) {
  .db-topup-layout {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

/* Package Grid & Cards */
.db-topup-packs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.75rem;
}

@media (max-width: 540px) {
  .db-topup-packs-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.db-topup-pack-card {
  background: var(--db-bg-base, #0b1120);
  border: 1px solid var(--db-border, rgba(255, 255, 255, 0.1));
  border-radius: var(--db-radius-lg, 12px);
  padding: 0.95rem 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  color: var(--db-text-main, #fff);
  outline: none;
  position: relative;
  user-select: none;
  overflow: hidden;
}

.db-topup-pack-card:hover {
  background: rgba(37, 99, 235, 0.08);
  border-color: rgba(59, 130, 246, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

.db-topup-pack-card.selected {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.22), rgba(16, 185, 129, 0.18));
  border-color: #10b981;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.28), inset 0 0 0 1px rgba(16, 185, 129, 0.45);
}

.db-topup-pack-badge {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 9999px;
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.35);
  margin-bottom: 0.45rem;
}

.db-topup-pack-badge.no-discount {
  background: rgba(255, 255, 255, 0.06);
  color: var(--db-text-subtle, #94a3b8);
  border-color: rgba(255, 255, 255, 0.1);
}

.db-topup-pack-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--db-text-muted, #94a3b8);
  margin-bottom: 0.2rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.db-topup-pack-cr {
  font-size: 1.45rem;
  font-weight: 800;
  color: #fff;
  font-family: var(--db-font-mono, 'JetBrains Mono', monospace);
  line-height: 1.15;
  margin-bottom: 0.35rem;
}

.db-topup-pack-unit {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--db-accent, #06b6d4);
  text-transform: uppercase;
}

.db-topup-pack-prices {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 2px;
}

.db-topup-pack-price-orig {
  font-size: 0.76rem;
  color: var(--db-text-subtle, #64748b);
  text-decoration: line-through;
  font-family: var(--db-font-mono, 'JetBrains Mono', monospace);
}

.db-topup-pack-price-net {
  font-size: 0.92rem;
  font-weight: 800;
  color: #fff;
  font-family: var(--db-font-mono, 'JetBrains Mono', monospace);
}

.db-topup-pack-vat-sub {
  font-size: 0.7rem;
  color: #fbbf24;
  margin-top: 4px;
  font-weight: 600;
  white-space: nowrap;
}

.db-topup-pack-vat-sub.zero {
  color: #34d399;
}

.db-topup-pack-total-sub {
  font-size: 0.75rem;
  font-weight: 700;
  color: #10b981;
  margin-top: 3px;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
  padding-top: 4px;
  width: 100%;
}

/* Custom Input & Ladder Indicator */
.db-topup-ladder-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.85rem;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.22);
  border-radius: var(--db-radius-md, 8px);
  margin-top: 0.5rem;
  font-size: 0.78rem;
  color: #34d399;
}

.db-topup-ladder-banner.no-tier {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--db-text-subtle, #94a3b8);
}

/* Custom Currency Input in Topup Modal */
.db-currency-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.db-currency-input-wrap .db-currency-symbol {
  position: absolute;
  left: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 700;
  color: var(--db-text-muted, #94a3b8);
  font-size: 1.1rem;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  z-index: 2;
  transition: color 0.2s ease;
}

body.deskbump-portal-body .db-modal .db-currency-input-wrap input.db-input,
body.deskbump-portal-body input.db-input#db-custom-amt,
.db-currency-input-wrap input.db-input {
  padding-left: 2.75rem !important;
  font-family: var(--db-font-mono, 'JetBrains Mono', monospace) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  width: 100%;
}

.db-currency-input-wrap:focus-within .db-currency-symbol {
  color: var(--db-primary, #10b981);
}

/* Topup Minimum Purchase Alert & In-Modal Validation */
.db-topup-min-error {
  display: none;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 0.95rem;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: var(--db-radius-md, 8px);
  color: #fca5a5;
  font-size: 0.8rem;
  margin-top: 0.5rem;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.12);
  animation: db-topup-error-pop 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.db-topup-min-error.show {
  display: flex;
}

.db-topup-min-error i {
  color: #ef4444;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.db-topup-summary-min-notice {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.55rem 0.85rem;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: var(--db-radius-md, 8px);
  color: #fca5a5;
  font-size: 0.78rem;
  font-weight: 700;
  margin-top: 0.75rem;
  text-align: center;
  animation: db-topup-error-pop 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.db-topup-summary-min-notice.show {
  display: flex;
}

@keyframes db-topup-error-pop {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

body.deskbump-portal-body .db-modal .db-currency-input-wrap input.db-input.is-invalid {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25) !important;
}

/* Machine Runtime Estimator (Billing Page) */
.db-billing-runtime-card {
  min-height: 250px;
}

.db-billing-runtime-list::-webkit-scrollbar {
  width: 6px;
}

.db-billing-runtime-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 3px;
}

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

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

.db-billing-runtime-row:hover {
  background: rgba(37, 99, 235, 0.12) !important;
  border-color: rgba(59, 130, 246, 0.5) !important;
  transform: translateX(3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.db-runtime-pill {
  transition: all 0.2s ease;
}

.db-billing-runtime-row:hover .db-runtime-pill.has-runtime {
  background: rgba(16, 185, 129, 0.2) !important;
  border-color: #10b981 !important;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.25);
}

/* Order Summary & Tax Breakdown Cassette */
.db-topup-summary-card {
  background: rgba(11, 17, 32, 0.9);
  border: 1px solid var(--db-border, rgba(255, 255, 255, 0.1));
  border-radius: var(--db-radius-lg, 12px);
  padding: 1.35rem;
  backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.db-topup-summary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.1rem;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.db-topup-summary-title {
  font-size: 0.84rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--db-text-muted, #94a3b8);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.db-topup-summary-title i {
  color: var(--db-primary, #3b82f6);
}

.db-topup-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.db-topup-badge-ro {
  background: rgba(245, 158, 11, 0.14);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.db-topup-badge-exempt {
  background: rgba(16, 185, 129, 0.14);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.35);
}

.db-topup-badge-standard {
  background: rgba(59, 130, 246, 0.14);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.35);
}

.db-topup-summary-rows {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.db-topup-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.88rem;
  color: var(--db-text-muted, #94a3b8);
}

.db-topup-summary-row .value {
  font-weight: 600;
  color: var(--db-text-main, #fff);
  font-family: var(--db-font-mono, 'JetBrains Mono', monospace);
}

.db-topup-summary-row .value.discount-val {
  color: #34d399;
}

.db-topup-summary-row .value.vat-added {
  color: #fbbf24;
}

.db-topup-summary-row .value.vat-zero {
  color: #34d399;
}

.db-topup-summary-divider {
  height: 1px;
  background: var(--db-border, rgba(255, 255, 255, 0.08));
  margin: 0.65rem 0;
}

.db-topup-summary-row.total-row {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  padding-top: 0.2rem;
}

.db-topup-summary-row.total-row .total-val {
  font-size: 1.6rem;
  font-weight: 800;
  color: #10b981;
  text-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
}

.db-topup-summary-note {
  margin-top: 1rem;
  padding: 0.75rem 0.95rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--db-radius-md, 8px);
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--db-text-subtle, #94a3b8);
}

.db-topup-summary-note i {
  color: var(--db-accent, #06b6d4);
  font-size: 0.95rem;
  margin-top: 2px;
  flex-shrink: 0;
}

.db-topup-summary-note .note-text strong {
  color: #fff;
}

.db-topup-trust-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  color: var(--db-text-subtle, #64748b);
  margin-top: 0.85rem;
  text-align: center;
}

/* Animated Checkout Redirection Overlay */
.db-topup-redirect-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 2.5rem 1.5rem;
  text-align: center;
  animation: dbFadeIn 0.25s ease-out;
}

.db-topup-redirect-pulse {
  position: relative;
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.db-topup-redirect-pulse::before,
.db-topup-redirect-pulse::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #0070ba;
  opacity: 0.8;
  animation: dbPulseRing 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

.db-topup-redirect-pulse::after {
  animation-delay: 0.65s;
}

.db-topup-paypal-icon-box {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: linear-gradient(135deg, #003087, #0070ba);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #fff;
  box-shadow: 0 0 30px rgba(0, 112, 186, 0.5);
  position: relative;
  z-index: 2;
}

@keyframes dbPulseRing {
  0% {
    transform: scale(0.7);
    opacity: 0.9;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

.db-topup-redirect-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.5rem 0;
}

.db-topup-redirect-subtitle {
  font-size: 0.88rem;
  color: var(--db-text-muted, #94a3b8);
  max-width: 440px;
  line-height: 1.5;
  margin-bottom: 1.25rem;
}

.db-topup-redirect-summary {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9999px;
  font-size: 0.82rem;
  font-family: var(--db-font-mono, 'JetBrains Mono', monospace);
  color: #fff;
}

/* New Tab Waiting Confirmation State */
.db-topup-waiting-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2.5rem 1.5rem;
}

.db-topup-waiting-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.15);
  border: 2px solid #10b981;
  color: #10b981;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 0 25px rgba(16, 185, 129, 0.25);
  animation: dbFloat 3s ease-in-out infinite;
}

@keyframes dbFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.db-topup-waiting-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.5rem 0;
}

.db-topup-waiting-desc {
  font-size: 0.9rem;
  color: var(--db-text-muted, #94a3b8);
  max-width: 460px;
  line-height: 1.55;
  margin-bottom: 1.5rem;
}

.db-topup-waiting-polling {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.78rem;
  color: var(--db-text-subtle, #94a3b8);
  margin-bottom: 1.5rem;
  padding: 4px 12px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* =========================================================================
   Post-Registration Email Activation & Resend Card
   ========================================================================= */
.db-auth-activation-pane {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0.5rem 0.25rem;
}

.db-auth-activation-icon {
  width: 76px;
  height: 76px;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.22) 0%, rgba(14, 165, 233, 0.05) 75%);
  border: 1.5px solid rgba(56, 189, 248, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #38bdf8;
  font-size: 2.1rem;
  box-shadow: 0 0 28px rgba(56, 189, 248, 0.28);
  animation: dbActivationPulse 3s ease-in-out infinite;
}

@keyframes dbActivationPulse {
  0%, 100% {
    transform: scale(1) translateY(0);
    box-shadow: 0 0 24px rgba(56, 189, 248, 0.25);
  }
  50% {
    transform: scale(1.04) translateY(-3px);
    box-shadow: 0 0 35px rgba(56, 189, 248, 0.45);
  }
}

.db-auth-alert-banner {
  animation: dbAlertSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* =========================================================================
   Frontend Dynamic Pricing Catalog Component (Elementor Page post=8111)
   ========================================================================= */

.db-pricing-catalog-wrapper {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  box-sizing: border-box;
  font-family: var(--db-font-main, 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif);
  color: var(--db-text-main, #f3f4f6);
}

.db-pricing-catalog-wrapper .db-tpl-catalog-container {
  background: var(--db-bg-card, #182234);
  border: 1px solid var(--db-border, rgba(255, 255, 255, 0.08));
  border-radius: var(--db-radius-xl, 22px);
  padding: 2rem 1.75rem;
  box-shadow: var(--db-shadow-lg, 0 12px 32px rgba(0, 0, 0, 0.6));
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .db-pricing-catalog-wrapper .db-tpl-catalog-container {
    padding: 1.25rem 1rem;
    border-radius: var(--db-radius-lg, 16px);
  }
}

/* Pricing Card Layout & Deploy CTA */
.db-tpl-card.db-pricing-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  min-height: 280px;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.db-tpl-card.db-pricing-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(37, 99, 235, 0.5) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45), 0 0 15px rgba(37, 99, 235, 0.2) !important;
}

.db-pricing-card-action {
  margin-top: 1.25rem;
  width: 100%;
  box-sizing: border-box;
}

.db-tpl-deploy-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.6rem !important;
  width: 100% !important;
  padding: 0.72rem 1.25rem !important;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
  color: #ffffff !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  border-radius: var(--db-radius-md, 10px) !important;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
}

.db-tpl-deploy-btn:hover {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(37, 99, 235, 0.5) !important;
  color: #ffffff !important;
}

.db-tpl-deploy-btn i {
  font-size: 0.88rem !important;
  transition: transform 0.2s ease !important;
}

.db-tpl-deploy-btn:hover i {
  transform: translateX(4px) !important;
}

/* Deep Link Pulse Highlight Animation */
@keyframes dbCardPulseHighlight {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.8);
    border-color: #3b82f6;
  }
  50% {
    box-shadow: 0 0 0 10px rgba(37, 99, 235, 0);
    border-color: #60a5fa;
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
    border-color: var(--db-border, rgba(255, 255, 255, 0.08));
  }
}

.db-tpl-card-pulse-highlight {
  animation: dbCardPulseHighlight 1.4s ease-out 2 !important;
}

/* =========================================================================
   Defensive Title Color Shield: Prevent Theme / Elementor Heading Bleed
   ========================================================================= */

.db-tpl-title,
h4.db-tpl-title,
.db-tpl-card .db-tpl-title,
.db-pricing-catalog-wrapper .db-tpl-title,
.elementor .db-tpl-title,
.elementor .db-pricing-catalog-wrapper h4.db-tpl-title,
.elementor h4.db-tpl-title,
.entry-content .db-tpl-title,
.entry-content h4.db-tpl-title,
.db-tpl-list-title {
  color: #ffffff !important;
}

/* Pricing Catalog Layout Overrides (2.5 Rows Scroll Window & Fixed Filter Bar on post=8111) */
.db-pricing-catalog-wrapper .db-tpl-filter-bar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--db-bg-card, #182234);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}

.db-pricing-catalog-wrapper .db-template-grid {
  grid-template-columns: repeat(4, 1fr) !important;
  max-height: 965px !important;
  overflow-y: auto !important;
  padding: 0.25rem 0.6rem 0.5rem 0.25rem !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(59, 130, 246, 0.45) rgba(15, 23, 42, 0.4);
}

@media (max-width: 980px) {
  .db-pricing-catalog-wrapper .db-template-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .db-pricing-catalog-wrapper .db-template-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 520px) {
  .db-pricing-catalog-wrapper .db-template-grid {
    grid-template-columns: 1fr !important;
  }
}

.db-pricing-catalog-wrapper .db-tpl-table-wrapper {
  max-height: 780px !important;
  overflow-y: auto !important;
}

/* =========================================================================
   Template View Mode Toggle (Grid vs List View)
   ========================================================================= */

.db-tpl-view-toggle {
  display: inline-flex;
  align-items: center;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid var(--db-border, rgba(255, 255, 255, 0.1));
  border-radius: var(--db-radius-md, 10px);
  padding: 3px;
  gap: 3px;
}

.db-tpl-view-btn {
  background: transparent;
  border: none;
  border-radius: var(--db-radius-sm, 6px);
  color: var(--db-text-muted, #94a3b8);
  width: 32px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.88rem;
  cursor: pointer;
  transition: all 0.18s ease;
  line-height: 1;
}

.db-tpl-view-btn:hover:not(.active) {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}

.db-tpl-view-btn.active {
  background: var(--db-primary, #2563eb);
  color: #ffffff;
  box-shadow: 0 0 10px var(--db-primary-glow, rgba(37, 99, 235, 0.4));
}

/* =========================================================================
   Template List / Table View Styling (Portal & Pricing Shared Component)
   ========================================================================= */

.db-tpl-table-wrapper {
  background: var(--db-bg-base, #0b0f17);
  border: 1px solid var(--db-border, rgba(255, 255, 255, 0.08));
  border-radius: var(--db-radius-lg, 16px);
  overflow-x: auto;
  max-height: 520px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(59, 130, 246, 0.4) rgba(15, 23, 42, 0.35);
  box-sizing: border-box;
  width: 100%;
}

.db-tpl-table-wrapper::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

.db-tpl-table-wrapper::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.35);
  border-radius: 999px;
}

.db-tpl-table-wrapper::-webkit-scrollbar-thumb {
  background: rgba(59, 130, 246, 0.35);
  border-radius: 999px;
}

.db-tpl-table-wrapper::-webkit-scrollbar-thumb:hover {
  background: var(--db-primary, #3b82f6);
}

.db-tpl-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.88rem;
  color: var(--db-text-main, #f3f4f6);
  text-align: left;
}

.db-tpl-table thead th {
  background: #111827;
  color: var(--db-text-subtle, #94a3b8);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--db-border, rgba(255, 255, 255, 0.1));
  position: sticky;
  top: 0;
  z-index: 10;
  white-space: nowrap;
}

.db-tpl-table tbody tr.db-tpl-row {
  background: transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
  border-radius: 0 !important;
  border: none !important;
}

.db-tpl-table tbody tr.db-tpl-row td {
  padding: 0.85rem 1rem;
  vertical-align: middle;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: transparent;
  transition: background-color 0.15s ease;
}

.db-tpl-table tbody tr.db-tpl-row:hover td {
  background: rgba(255, 255, 255, 0.04);
}

.db-tpl-table tbody tr.db-tpl-row.selected td {
  background: linear-gradient(90deg, rgba(37, 99, 235, 0.14) 0%, rgba(16, 185, 129, 0.1) 100%);
  border-bottom-color: rgba(16, 185, 129, 0.35);
}

.db-tpl-table tbody tr.db-tpl-row.selected td:first-child {
  border-left: 3px solid #10b981;
}

/* Radio Indicator inside table row */
.db-tpl-radio-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--db-text-subtle, #64748b);
  font-size: 1.15rem;
  transition: all 0.15s ease;
}

.db-tpl-radio-indicator.is-selected {
  color: #10b981;
  text-shadow: 0 0 10px rgba(16, 185, 129, 0.55);
}

.db-tpl-row:hover .db-tpl-radio-indicator:not(.is-selected) {
  color: var(--db-text-muted, #94a3b8);
}

/* Row title & badges in table */
.db-tpl-row-title-wrap {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.db-tpl-list-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: #ffffff !important;
  margin: 0 !important;
  display: inline-block;
}

.db-tpl-col-badges {
  vertical-align: middle !important;
  min-width: 95px;
}

.db-tpl-col-badges .db-tpl-list-badges,
.db-tpl-list-badges {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0.35rem !important;
  justify-content: center !important;
}

.db-tpl-col-badges .db-tpl-badge {
  font-size: 0.68rem !important;
  padding: 3px 8px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

.db-tpl-col-os {
  vertical-align: middle !important;
  white-space: nowrap !important;
  color: var(--db-text-main, #f3f4f6);
  font-size: 0.88rem;
  font-weight: 500;
  min-width: 140px;
}

.db-tpl-col-os i {
  font-size: 1rem;
}

/* Price in table */
.db-tpl-list-price {
  display: flex;
  flex-direction: column;
}

.db-tpl-list-price .db-tpl-price-val {
  font-family: var(--db-font-mono, 'JetBrains Mono', monospace);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--db-accent, #06b6d4);
  line-height: 1.2;
}

.db-tpl-list-price .db-tpl-price-unit {
  font-size: 0.7rem;
  color: var(--db-text-subtle, #64748b);
  letter-spacing: 0.02em;
}

/* Compact deploy button in table */
.db-tpl-deploy-btn.db-tpl-deploy-btn-compact {
  padding: 0.42rem 0.95rem !important;
  font-size: 0.82rem !important;
  border-radius: var(--db-radius-sm, 6px) !important;
  width: auto !important;
  display: inline-flex !important;
  min-height: unset !important;
}

.db-tpl-select-btn {
  padding: 0.45rem 0.9rem;
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: var(--db-radius-sm, 6px);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: all 0.15s ease;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--db-border, rgba(255, 255, 255, 0.1));
  color: var(--db-text-main, #f3f4f6);
}

.db-tpl-select-btn:hover {
  background: rgba(37, 99, 235, 0.2);
  border-color: rgba(37, 99, 235, 0.45);
  color: #ffffff;
}

.db-tpl-select-btn.is-selected {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.45);
  color: #34d399;
}

/* =========================================================================
   DeskBump Website Footer in Portal - Perfect Horizontal Centering
   ========================================================================= */
.deskbump-portal-body #footer.db-portal-website-footer,
.deskbump-portal-body #footer {
  margin-top: auto !important;
  background-color: #000000 !important;
  border-top: 1px solid var(--db-border) !important;
  position: relative !important;
  z-index: 10 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 0 !important;
}

/* Ensure The7 wrapper containers are 100% width, centered, and have zero offsets */
.deskbump-portal-body #footer .wf-wrap {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 1.5rem 1rem !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

.deskbump-portal-body #footer .wf-container-footer,
.deskbump-portal-body #footer .wf-container {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Eliminate Elementor / The7 negative margins and asymmetrical gutters */
.deskbump-portal-body #footer .elementor-6647,
.deskbump-portal-body #footer [data-elementor-type="footer"],
.deskbump-portal-body #footer .elementor-section,
.deskbump-portal-body #footer .elementor-section.elementor-section-full_width,
.deskbump-portal-body #footer .elementor-container,
.deskbump-portal-body #footer .elementor-column,
.deskbump-portal-body #footer .elementor-widget-wrap {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

/* Center all widgets and cancel widget container side-margins */
.deskbump-portal-body #footer .elementor-widget,
.deskbump-portal-body #footer .elementor-widget-the7_horizontal-menu,
.deskbump-portal-body #footer .elementor-widget-container {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

/* Center horizontal navigation menus and neutralize left-align flex settings */
.deskbump-portal-body #footer .horizontal-menu-wrap {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

.deskbump-portal-body #footer nav.dt-nav-menu-horizontal--main,
.deskbump-portal-body #footer .dt-nav-menu-horizontal__container {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

.deskbump-portal-body #footer ul.dt-nav-menu-horizontal {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  list-style: none !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

.deskbump-portal-body #footer ul.dt-nav-menu-horizontal > li {
  list-style: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  float: none !important;
}

/* Center copyright widget text */
.deskbump-portal-body #footer .elementor-widget-text-editor,
.deskbump-portal-body #footer .elementor-widget-text-editor p,
.deskbump-portal-body #footer .elementor-element-32edd75e p {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}

/* Fallback styling for when Elementor post 6647 is rendered via fallback */
.db-footer-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  padding: 0.75rem 0;
  text-align: center;
  width: 100%;
}

.db-footer-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  width: 100%;
}

.db-footer-nav-primary a {
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
  letter-spacing: 0.02em;
}

.db-footer-nav-primary a:hover {
  color: #5A89B2;
}

.db-footer-nav-secondary a {
  color: #008AFF;
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
  letter-spacing: 0.02em;
}

.db-footer-nav-secondary a:hover {
  color: #5A89B2;
}

.db-footer-copyright p {
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.63);
  font-family: var(--db-font-main);
  letter-spacing: 0.02em;
}

/* =========================================================================
   Deploy View: Selected Machine Reconfirmation Cassette
   ========================================================================= */
.db-deploy-selected-reconfirm {
  transition: all 0.2s ease;
}

@media (max-width: 640px) {
  .db-deploy-selected-reconfirm {
    flex-direction: column;
    align-items: flex-start !important;
  }
  .db-deploy-selected-reconfirm .db-deploy-reconfirm-price-col {
    padding-left: 0 !important;
    border-left: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding-top: 0.75rem !important;
    align-items: flex-start !important;
    text-align: left !important;
    width: 100%;
  }
}

/* =========================================================================
   Social Authentication Buttons (Google OAuth 2.0 / SSO)
   ========================================================================= */
.db-btn-social-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.78rem 1rem;
  background: #ffffff;
  color: #1e293b;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.db-btn-social-google:hover {
  background: #f8fafc;
  color: #0f172a;
  border-color: #94a3b8;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
  transform: translateY(-1px);
}
.db-btn-social-google:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.db-google-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}