/* ==========================================================================
   SecureVPN - Pixel-Perfect Ultra-Luxury Enterprise Dashboard
   Strictly engineered to match the reference UI screenshot down to the pixel
   ========================================================================== */

   @import url('cyber-toast.css');

   :root {
     /* Exact Background Palettes from Screenshot */
     --bg-deep-space: #070c18;
     --bg-sidebar: #070d1a;
     --bg-card: #0b1325;
     --bg-card-sub: #070e1d;
     --bg-card-border: rgba(28, 45, 77, 0.7);
     --bg-card-hover: #0e182e;
   
     /* Accent Colors */
     --blue-primary: #1e56ed;
     --blue-hover: #2d66ff;
     --blue-glow: rgba(30, 86, 237, 0.45);
     
     --cyan-neon: #00d2ff;
     --cyan-glow: rgba(0, 210, 255, 0.4);
   
     --green-neon: #00e676;
     --green-dark: #003319;
     --green-glow: rgba(0, 230, 118, 0.45);
   
     --purple-neon: #b042ff;
     --purple-glow: rgba(176, 66, 255, 0.4);
   
     --amber-warning: #ffb300;
   
     /* Typography Colors - Strictly High-Contrast & Luminous */
     --text-white: #ffffff;
     --text-heading: #ffffff;
     --text-body: #e2e8f0;
     --text-muted: #94a3b8;
     --text-dim: #94a3b8;
     --text-nav-inactive: #cbd5e1;
   
     /* Typography */
     --font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
     --font-mono: 'JetBrains Mono', monospace;
   }
   
   /* Base Resets */
   *, *::before, *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
   }
   
   html, body {
     background-color: var(--bg-deep-space);
     color: var(--text-white);
     font-family: var(--font-family);
     font-size: 13.5px;
     line-height: 1.45;
     overflow-x: hidden;
     -webkit-font-smoothing: antialiased;
   }
   
   /* Main Container Layout */
   .app-container {
     display: flex;
     min-height: 100vh;
     width: 100vw;
     background: var(--bg-deep-space);
     background-image: 
       radial-gradient(ellipse at 30% 10%, rgba(15, 35, 75, 0.35) 0%, transparent 60%),
       radial-gradient(ellipse at 80% 40%, rgba(10, 25, 60, 0.25) 0%, transparent 50%);
     background-attachment: fixed;
   }
   
   /* ==========================================================================
      ENTERPRISE CYBERSECURITY SIDEBAR (SOLID MATTE NAVY • ZERO TRUST)
      ========================================================================== */
   .sidebar {
     width: 268px;
     min-width: 268px;
     background-color: #090e1a;
     border-right: 1px solid rgba(148, 163, 184, 0.12);
     display: flex;
     flex-direction: column;
     height: 100vh;
     position: sticky;
     top: 0;
     z-index: 100;
     padding: 0;
     overflow: hidden;
     box-shadow: 1px 0 3px rgba(0, 0, 0, 0.4);
   }
   
   /* 1. TOP AREA: BRAND & ENTERPRISE SYSTEM STATUS */
   .sidebar-top-container {
     padding: 18px 16px 14px 16px;
     background-color: #070c17;
     border-bottom: 1px solid rgba(148, 163, 184, 0.09);
     display: flex;
     flex-direction: column;
     gap: 12px;
     flex-shrink: 0;
   }
   
   .enterprise-brand-header {
     display: flex;
     align-items: center;
     gap: 10px;
     text-decoration: none;
     user-select: none;
   }
   
   .enterprise-brand-icon {
     width: 34px;
     height: 34px;
     border-radius: 8px;
     background: #0d1527;
     border: 1px solid rgba(59, 130, 246, 0.3);
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
   }
   
   .brand-shield-svg {
     width: 20px;
     height: 20px;
     display: block;
   }
   
   .brand-text-block {
     display: flex;
     flex-direction: column;
     gap: 1px;
     min-width: 0;
   }
   
   .brand-name-row {
     display: flex;
     align-items: center;
     gap: 7px;
   }
   
   .brand-name-title {
     font-size: 1.08rem;
     font-weight: 700;
     color: #f8fafc;
     letter-spacing: -0.02em;
     line-height: 1.2;
   }
   
   .brand-enterprise-tag {
     font-size: 0.61rem;
     font-weight: 700;
     letter-spacing: 0.06em;
     color: #38bdf8;
     background: rgba(56, 189, 248, 0.1);
     border: 1px solid rgba(56, 189, 248, 0.25);
     border-radius: 4px;
     padding: 1px 5px;
     line-height: 1.3;
   }
   
   .brand-subtext {
     font-size: 0.68rem;
     color: #64748b;
     font-weight: 500;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
   
   /* System Status Box (Solid Matte Enterprise Panel) */
   .enterprise-system-status-box {
     background: #0d1527;
     border: 1px solid rgba(148, 163, 184, 0.1);
     border-radius: 8px;
     padding: 9px 12px;
     display: flex;
     flex-direction: column;
     gap: 7px;
   }
   
   .sys-status-head {
     display: flex;
     align-items: center;
     justify-content: space-between;
   }
   
   .sys-indicator-live {
     display: flex;
     align-items: center;
     gap: 7px;
   }
   
   .sys-status-dot {
     width: 7px;
     height: 7px;
     border-radius: 50%;
     background: #10b981;
     box-shadow: 0 0 6px rgba(16, 185, 129, 0.7);
     display: inline-block;
     animation: sysPulseGlow 2.5s infinite ease-in-out;
   }
   
   @keyframes sysPulseGlow {
     0%, 100% { opacity: 1; transform: scale(1); }
     50% { opacity: 0.65; transform: scale(0.9); }
   }
   
   .sys-status-label {
     font-size: 0.76rem;
     font-weight: 600;
     color: #10b981;
     letter-spacing: 0.02em;
   }
   
   .sys-uptime-badge {
     font-size: 0.66rem;
     font-family: var(--font-mono);
     color: #94a3b8;
     background: rgba(148, 163, 184, 0.1);
     padding: 1.5px 6px;
     border-radius: 4px;
     letter-spacing: 0.02em;
   }
   
   .sys-specs-list {
     display: flex;
     flex-direction: column;
     gap: 4px;
     border-top: 1px solid rgba(148, 163, 184, 0.07);
     padding-top: 6px;
   }
   
   .sys-spec-item {
     display: flex;
     align-items: center;
     gap: 7px;
     font-size: 0.71rem;
     color: #94a3b8;
     font-weight: 500;
   }
   
   .sys-spec-item i {
     font-size: 0.78rem;
   }
   
   /* 2. SCROLLABLE NAVIGATION CONTAINER */
   .sidebar-nav-scroll-container {
     flex: 1;
     overflow-y: auto;
     overflow-x: hidden;
     padding: 12px 10px;
     display: flex;
     flex-direction: column;
     gap: 16px;
   }
   
   /* Subtle thin custom scrollbar for enterprise feel */
   .sidebar-nav-scroll-container::-webkit-scrollbar {
     width: 4px;
   }
   .sidebar-nav-scroll-container::-webkit-scrollbar-track {
     background: transparent;
   }
   .sidebar-nav-scroll-container::-webkit-scrollbar-thumb {
     background: rgba(148, 163, 184, 0.15);
     border-radius: 4px;
   }
   .sidebar-nav-scroll-container::-webkit-scrollbar-thumb:hover {
     background: rgba(148, 163, 184, 0.3);
   }
   
   .nav-section-group {
     display: flex;
     flex-direction: column;
     gap: 2px;
   }
   
   .nav-section-header {
     font-size: 0.65rem;
     font-weight: 700;
     letter-spacing: 0.08em;
     color: #475569;
     padding: 4px 10px 4px 10px;
     text-transform: uppercase;
     user-select: none;
   }
   
   .enterprise-nav-list {
     list-style: none;
     padding: 0;
     margin: 0;
     display: flex;
     flex-direction: column;
     gap: 2px;
   }
   
   .nav-item {
     width: 100%;
   }
   
   /* Nav Link Base */
   .sidebar-menu-link {
     position: relative;
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 7.5px 12px;
     border-radius: 8px;
     color: #94a3b8;
     font-size: 0.845rem;
     font-weight: 500;
     text-decoration: none;
     cursor: pointer;
     transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
     user-select: none;
     border: 1px solid transparent;
   }
   
   .sidebar-menu-link i {
     font-size: 1rem;
     color: #64748b;
     transition: all 0.18s ease;
     flex-shrink: 0;
   }
   
   .nav-link-text {
     flex: 1;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
   
   /* Badges & Meta Tags */
   .nav-link-badge {
     font-size: 0.64rem;
     font-weight: 600;
     padding: 2px 6px;
     border-radius: 4px;
     line-height: 1.2;
     background: rgba(148, 163, 184, 0.1);
     color: #94a3b8;
     font-family: var(--font-mono);
   }
   
   .badge-active {
     background: rgba(59, 130, 246, 0.12);
     color: #60a5fa;
     border: 1px solid rgba(59, 130, 246, 0.22);
   }
   
   .badge-success {
     background: rgba(16, 185, 129, 0.1);
     color: #34d399;
     border: 1px solid rgba(16, 185, 129, 0.22);
   }
   
   .badge-primary {
     background: rgba(59, 130, 246, 0.1);
     color: #60a5fa;
     border: 1px solid rgba(59, 130, 246, 0.22);
   }
   
   .badge-info {
     background: rgba(14, 165, 233, 0.1);
     color: #38bdf8;
     border: 1px solid rgba(14, 165, 233, 0.22);
   }
   
   .badge-alert {
     background: rgba(239, 68, 68, 0.15);
     color: #f87171;
     border: 1px solid rgba(239, 68, 68, 0.3);
     font-weight: 700;
     padding: 1px 6px;
     border-radius: 9999px;
   }
   
   .nav-link-meta {
     font-size: 0.67rem;
     color: #64748b;
     font-family: var(--font-mono);
   }
   
   /* Hover State */
   .sidebar-menu-link:hover {
     color: #f1f5f9;
     background: rgba(255, 255, 255, 0.035);
     border-color: rgba(255, 255, 255, 0.04);
   }
   
   .sidebar-menu-link:hover i {
     color: #cbd5e1;
     transform: translateX(1.5px);
   }
   
   /* Active State (Floating Navigation Pill with Soft Blue Highlight & Left Accent Line) */
   .sidebar-menu-link.active {
     background: rgba(59, 130, 246, 0.08);
     border: 1px solid rgba(59, 130, 246, 0.22);
     color: #ffffff;
     font-weight: 600;
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
   }
   
   .sidebar-menu-link.active::before {
     content: '';
     position: absolute;
     left: -1px;
     top: 6px;
     bottom: 6px;
     width: 3px;
     border-radius: 0 3px 3px 0;
     background: #3b82f6;
     box-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
   }
   
   .sidebar-menu-link.active i {
     color: #38bdf8;
   }
   
   /* 3. BOTTOM SECURITY STATUS PANEL (SOLID MATTE REPLACEMENT FOR PROMOTIONAL CARDS) */
   .enterprise-security-panel {
     margin: 4px 10px 10px 10px;
     background: #0d1527;
     border: 1px solid rgba(148, 163, 184, 0.12);
     border-radius: 9px;
     padding: 11px 12px;
     display: flex;
     flex-direction: column;
     gap: 9px;
     flex-shrink: 0;
   }
   
   .sec-panel-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
   }
   
   .sec-panel-title-wrap {
     display: flex;
     align-items: center;
     gap: 6px;
   }
   
   .sec-panel-title {
     font-size: 0.77rem;
     font-weight: 600;
     color: #e2e8f0;
     letter-spacing: -0.01em;
   }
   
   .sec-live-indicator {
     display: flex;
     align-items: center;
     gap: 5px;
     font-size: 0.64rem;
     color: #10b981;
     font-weight: 600;
     background: rgba(16, 185, 129, 0.08);
     border: 1px solid rgba(16, 185, 129, 0.2);
     padding: 1.5px 6px;
     border-radius: 9999px;
   }
   
   .sec-live-dot {
     width: 5px;
     height: 5px;
     border-radius: 50%;
     background: #10b981;
     box-shadow: 0 0 4px rgba(16, 185, 129, 0.8);
   }
   
   .sec-score-container {
     display: flex;
     flex-direction: column;
     gap: 4px;
   }
   
   .sec-score-row {
     display: flex;
     align-items: center;
     justify-content: space-between;
   }
   
   .sec-score-label {
     font-size: 0.71rem;
     color: #94a3b8;
   }
   
   .sec-score-number {
     font-size: 0.85rem;
     font-weight: 700;
     color: #10b981;
     font-family: var(--font-mono);
   }
   
   .sec-score-track {
     width: 100%;
     height: 4px;
     background: rgba(148, 163, 184, 0.12);
     border-radius: 9999px;
     overflow: hidden;
   }
   
   .sec-score-fill {
     height: 100%;
     background: linear-gradient(90deg, #10b981 0%, #06b6d4 100%);
     border-radius: 9999px;
   }
   
   .sec-telemetry-matrix {
     display: flex;
     flex-direction: column;
     gap: 4px;
     border-top: 1px solid rgba(148, 163, 184, 0.08);
     padding-top: 7px;
   }
   
   .sec-telemetry-row {
     display: flex;
     align-items: center;
     justify-content: space-between;
     font-size: 0.70rem;
   }
   
   .sec-tel-key {
     color: #64748b;
     font-weight: 500;
   }
   
   .sec-tel-val {
     color: #cbd5e1;
     font-weight: 500;
   }
   
   .sec-val-success {
     color: #10b981;
     font-weight: 600;
     display: flex;
     align-items: center;
     gap: 4px;
   }
   
   /* 4. PROFILE & SYSTEM CONTROLS (FOOTER) */
   .enterprise-sidebar-profile {
     border-top: 1px solid rgba(148, 163, 184, 0.09);
     padding: 10px 14px;
     background-color: #070c17;
     display: flex;
     align-items: center;
     justify-content: space-between;
     flex-shrink: 0;
   }
   
   .profile-info-assembly {
     display: flex;
     align-items: center;
     gap: 9px;
     min-width: 0;
   }
   
   .profile-avatar-wrapper {
     position: relative;
     width: 32px;
     height: 32px;
     border-radius: 50%;
     flex-shrink: 0;
   }
   
   .sidebar-avatar-img {
     width: 100%;
     height: 100%;
     border-radius: 50%;
     object-fit: cover;
     border: 1px solid rgba(148, 163, 184, 0.2);
   }
   
   .avatar-online-dot {
     position: absolute;
     bottom: 0;
     right: 0;
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background: #10b981;
     border: 2px solid #070c17;
   }
   
   .profile-meta-text {
     display: flex;
     flex-direction: column;
     min-width: 0;
   }
   
   .profile-user-name {
     font-size: 0.82rem;
     font-weight: 600;
     color: #f8fafc;
     line-height: 1.2;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
   
   .profile-org-name {
     font-size: 0.67rem;
     color: #64748b;
     line-height: 1.2;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
   
   .profile-action-buttons {
     display: flex;
     align-items: center;
     gap: 3px;
   }
   
   .btn-sidebar-control {
     width: 28px;
     height: 28px;
     border-radius: 6px;
     background: transparent;
     border: 1px solid transparent;
     color: #64748b;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: all 0.15s ease;
     padding: 0;
   }
   
   .btn-sidebar-control:hover {
     background: rgba(255, 255, 255, 0.05);
     color: #cbd5e1;
     border-color: rgba(148, 163, 184, 0.15);
   }
   
   .btn-sidebar-logout:hover {
     color: #ef4444;
     border-color: rgba(239, 68, 68, 0.25);
     background: rgba(239, 68, 68, 0.08);
   }
   
   /* ==========================================================================
      MAIN VIEWPORT
      ========================================================================== */
   .main-viewport {
     flex: 1;
     min-width: 0;
     display: flex;
     flex-direction: column;
   }
   
   /* Topbar */
   .topbar {
     height: 68px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 0 32px;
   }
   
   /* Search Bar (Pill with magnifying glass) */
   .search-container {
     position: relative;
     width: 320px;
   }
   
   .search-icon {
     position: absolute;
     left: 14px;
     top: 50%;
     transform: translateY(-50%);
     color: var(--text-dim);
     font-size: 0.95rem;
     pointer-events: none;
   }
   
   .search-input {
     width: 100%;
     background: #091122;
     border: 1px solid rgba(255, 255, 255, 0.07);
     border-radius: 9999px;
     padding: 8px 16px 8px 38px;
     color: #ffffff;
     font-size: 0.86rem;
     outline: none;
     transition: border-color 0.2s ease;
   }
   
   .search-input:focus {
     border-color: var(--blue-primary);
   }
   
   .search-input::placeholder {
     color: var(--text-dim);
   }
   
   /* Topbar Right Icons & Profile */
   .topbar-right {
     display: flex;
     align-items: center;
     gap: 18px;
   }
   
   .bell-btn {
     background: none;
     border: none;
     color: #889bb8;
     font-size: 1.2rem;
     cursor: pointer;
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
   }
   
   .bell-badge-count {
     position: absolute;
     top: -4px;
     right: -5px;
     width: 15px;
     height: 15px;
     border-radius: 50%;
     background-color: #ef4444;
     color: #ffffff;
     font-size: 0.65rem;
     font-weight: 700;
     display: flex;
     align-items: center;
     justify-content: center;
     border: 2px solid var(--bg-deep-space);
   }
   
   .profile-dropdown-wrap {
     position: relative;
   }
   
   .profile-pill {
     display: flex;
     align-items: center;
     gap: 10px;
     cursor: pointer;
     user-select: none;
     padding: 4px 8px;
     border-radius: 9999px;
     transition: all 0.2s ease;
   }
   
   .profile-pill:hover {
     background: rgba(255, 255, 255, 0.05);
   }
   
   .profile-avatar {
     width: 34px;
     height: 34px;
     border-radius: 50%;
     object-fit: cover;
     border: 1.5px solid rgba(0, 210, 255, 0.4);
   }
   
   .profile-name {
     font-size: 0.92rem;
     font-weight: 600;
     color: #ffffff;
   }
   
   .profile-chevron {
     font-size: 0.75rem;
     color: var(--text-muted);
     transition: transform 0.2s ease;
   }
   
   .profile-dropdown-wrap.open .profile-chevron {
     transform: rotate(180deg);
   }
   
   /* Glassmorphic Profile Dropdown */
   .profile-glass-dropdown {
     position: absolute;
     top: calc(100% + 12px);
     right: 0;
     width: 260px;
     background: rgba(10, 19, 38, 0.94);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     border: 1px solid rgba(0, 210, 255, 0.3);
     border-radius: 16px;
     padding: 16px;
     box-shadow: 0 16px 45px rgba(0, 0, 0, 0.7), 0 0 25px rgba(0, 210, 255, 0.15);
     display: none;
     flex-direction: column;
     z-index: 1000;
     animation: dropdownFade 0.2s cubic-bezier(0.16, 1, 0.3, 1);
   }
   
   .profile-dropdown-wrap.open .profile-glass-dropdown {
     display: flex;
   }
   
   @keyframes dropdownFade {
     from { opacity: 0; transform: translateY(-8px); }
     to { opacity: 1; transform: translateY(0); }
   }
   
   .dropdown-user-header {
     display: flex;
     align-items: center;
     gap: 12px;
     margin-bottom: 12px;
   }
   
   .dropdown-avatar {
     width: 42px;
     height: 42px;
     border-radius: 50%;
     object-fit: cover;
     border: 2px solid var(--cyan-neon);
   }
   
   .dropdown-user-meta {
     display: flex;
     flex-direction: column;
     text-align: left;
   }
   
   .dropdown-user-name {
     font-size: 0.95rem;
     font-weight: 700;
     color: #ffffff;
   }
   
   .dropdown-user-email {
     font-size: 0.74rem;
     color: var(--text-muted);
   }
   
   .dropdown-status-badge {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     padding: 4px 10px;
     border-radius: 9999px;
     background: rgba(0, 230, 118, 0.1);
     border: 1px solid rgba(0, 230, 118, 0.25);
     color: var(--green-neon);
     font-size: 0.72rem;
     font-weight: 600;
     margin-bottom: 12px;
   }
   
   .dropdown-divider {
     height: 1px;
     background: rgba(255, 255, 255, 0.08);
     margin: 6px 0 10px 0;
   }
   
   .dropdown-menu-list {
     list-style: none;
     padding: 0;
     margin: 0;
     display: flex;
     flex-direction: column;
     gap: 4px;
   }
   
   .dropdown-menu-link {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 8px 10px;
     border-radius: 8px;
     color: #94a3b8;
     font-size: 0.85rem;
     font-weight: 500;
     text-decoration: none;
     transition: all 0.2s ease;
   }
   
   .dropdown-menu-link:hover {
     background: rgba(0, 210, 255, 0.1);
     color: #ffffff;
   }
   
   .dropdown-menu-link i {
     color: var(--cyan-neon);
     font-size: 0.95rem;
   }
   
   .dropdown-logout-btn {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 9px 12px;
     border-radius: 8px;
     background: rgba(239, 68, 68, 0.1);
     border: 1px solid rgba(239, 68, 68, 0.25);
     color: #f87171;
     font-size: 0.85rem;
     font-weight: 600;
     cursor: pointer;
     width: 100%;
     transition: all 0.2s ease;
     margin-top: 4px;
   }
   
   .dropdown-logout-btn:hover {
     background: rgba(239, 68, 68, 0.2);
     color: #ffffff;
     border-color: #ef4444;
     box-shadow: 0 0 15px rgba(239, 68, 68, 0.3);
   }
   
   .dropdown-logout-btn i {
     font-size: 1rem;
   }
   
   /* ==========================================================================
      CONTENT CANVAS (MATCHING EXACT SCREENSHOT)
      ========================================================================== */
   .content-canvas {
     padding: 10px 32px 40px 32px;
     flex: 1;
   }
   
   /* Hero Title Header */
   .hero-header {
     margin-bottom: 22px;
   }
   
   .hero-title {
     font-size: 1.85rem;
     font-weight: 700;
     color: #ffffff;
     letter-spacing: -0.025em;
     margin-bottom: 4px;
   }
   
   .hero-subtitle {
     font-size: 0.94rem;
     color: var(--text-muted);
   }
   
   /* ==========================================================================
      TOP ROW: 3 MAIN CARDS
      ========================================================================== */
   .top-hero-grid {
     display: grid;
     grid-template-columns: 310px 1fr 285px;
     gap: 18px;
     margin-bottom: 18px;
   }
   
   /* Base Card Styling */
   .card-box {
     background: var(--bg-card);
     border: 1px solid var(--bg-card-border);
     border-radius: 16px;
     padding: 20px;
     position: relative;
     overflow: hidden;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
   }
   
   /* --------------------------------------------------------------------------
      CARD 1: CONNECTION POWER CONTROLLER
      -------------------------------------------------------------------------- */
   .power-card {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: space-between;
     text-align: center;
     padding: 18px 20px;
   }
   
   .power-top-status {
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: space-between;
   }
   
   .status-pill-green {
     display: inline-flex;
     align-items: center;
     gap: 7px;
     padding: 4px 12px;
     border-radius: 9999px;
     background: rgba(0, 230, 118, 0.12);
     border: 1px solid rgba(0, 230, 118, 0.3);
     color: var(--green-neon);
     font-size: 0.8rem;
     font-weight: 600;
   }
   
   .status-dot-pulse {
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background-color: var(--green-neon);
     box-shadow: 0 0 8px var(--green-neon);
     animation: pulseDot 2s infinite ease-in-out;
   }
   
   @keyframes pulseDot {
     0%, 100% { transform: scale(1); opacity: 1; }
     50% { transform: scale(1.3); opacity: 0.5; }
   }
   
   .timer-counter {
     font-family: var(--font-mono);
     font-size: 0.84rem;
     color: var(--text-muted);
   }
   
   /* Power Button Circular Assembly */
   .power-btn-container {
     position: relative;
     width: 156px;
     height: 156px;
     margin: 16px auto;
     display: flex;
     align-items: center;
     justify-content: center;
   }
   
   .power-outer-ring {
     position: absolute;
     inset: -6px;
     border-radius: 50%;
     border: 2px dashed rgba(0, 230, 118, 0.25);
     animation: rotateRing 25s linear infinite;
     pointer-events: none;
   }
   
   .power-glow-aura {
     position: absolute;
     inset: 0;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(0, 230, 118, 0.3) 0%, transparent 70%);
     animation: pulseAura 3s infinite ease-out;
     pointer-events: none;
   }
   
   @keyframes rotateRing {
     from { transform: rotate(0deg); }
     to { transform: rotate(360deg); }
   }
   
   @keyframes pulseAura {
     0% { transform: scale(0.9); opacity: 0.7; }
     100% { transform: scale(1.25); opacity: 0; }
   }
   
   .btn-power-dial {
     width: 130px;
     height: 130px;
     border-radius: 50%;
     border: 3.5px solid var(--green-neon);
     background: radial-gradient(circle at 45% 35%, #059669 0%, #064e3b 50%, #022c22 100%);
     box-shadow: 
       0 0 40px rgba(0, 230, 118, 0.5),
       inset 0 0 25px rgba(0, 230, 118, 0.3);
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     position: relative;
     z-index: 2;
     border: 3px solid #00e676;
     outline: none;
     transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
   }
   
   .btn-power-dial:hover {
     transform: scale(1.03);
     box-shadow: 
       0 0 55px rgba(0, 230, 118, 0.7),
       inset 0 0 30px rgba(0, 230, 118, 0.4);
   }
   
   .btn-power-dial:active {
     transform: scale(0.97);
   }
   
   .btn-power-dial i {
     font-size: 3rem;
     color: #ffffff;
     text-shadow: 0 0 16px rgba(0, 230, 118, 0.8);
   }
   
   /* Disconnected Button State */
   .btn-power-dial.disconnected {
     border-color: #ef4444 !important;
     background: radial-gradient(circle at 45% 35%, #991b1b 0%, #450a0a 50%, #1f0505 100%) !important;
     box-shadow: 0 0 35px rgba(239, 68, 68, 0.4) !important;
   }
   
   .btn-power-dial.disconnected i {
     color: #ef4444 !important;
     text-shadow: 0 0 16px rgba(239, 68, 68, 0.7);
   }
   
   /* Server Location Meta */
   .server-destination-meta {
     width: 100%;
   }
   
   .connected-label {
     font-size: 0.76rem;
     color: var(--text-dim);
     margin-bottom: 2px;
   }
   
   .destination-country-row {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
   }
   
   .destination-country-title {
     font-size: 1.15rem;
     font-weight: 700;
     color: #ffffff;
   }
   
   .chevron-down-sm {
     font-size: 0.8rem;
     color: var(--text-muted);
   }
   
   .destination-city-name {
     font-size: 0.82rem;
     color: var(--text-muted);
     margin-bottom: 14px;
   }
   
   /* Inset IP / ISP Panel */
   .inset-ip-panel {
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 10px 14px;
     background: var(--bg-card-sub);
     border: 1px solid rgba(255, 255, 255, 0.04);
     border-radius: 10px;
     font-size: 0.8rem;
   }
   
   .inset-ip-col {
     display: flex;
     flex-direction: column;
     text-align: left;
   }
   
   .inset-ip-label {
     font-size: 0.72rem;
     color: var(--text-dim);
     margin-bottom: 2px;
   }
   
   .inset-ip-val {
     font-family: var(--font-mono);
     font-weight: 600;
     color: #ffffff;
     display: flex;
     align-items: center;
     gap: 6px;
   }
   
   .copy-icon-btn {
     background: none;
     border: none;
     color: var(--text-dim);
     cursor: pointer;
     padding: 2px;
     font-size: 0.85rem;
     transition: color 0.2s ease;
   }
   
   .copy-icon-btn:hover {
     color: var(--cyan-neon);
   }
   
   /* --------------------------------------------------------------------------
      CARD 2: ULTRA-REALISTIC 3D EARTH GLOBE & CYBER ROUTE PARTICLES
      -------------------------------------------------------------------------- */
   .globe-stage-card {
     padding: 0;
     position: relative;
     background: radial-gradient(circle at 50% 50%, #0a1429 0%, #060b18 100%);
     border: 1px solid var(--bg-card-border);
     border-radius: 16px;
     overflow: hidden;
     display: flex;
     flex-direction: column;
   }
   
   .globe-topbar-hud {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 16px 20px;
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     z-index: 20;
     pointer-events: none;
   }
   
   .hud-mesh-badge {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 5px 12px;
     background: rgba(9, 17, 34, 0.75);
     backdrop-filter: blur(8px);
     border: 1px solid rgba(0, 210, 255, 0.25);
     border-radius: 9999px;
     font-size: 0.76rem;
     font-weight: 500;
     color: #94a3b8;
   }
   
   .hud-radar-dot {
     width: 7px;
     height: 7px;
     border-radius: 50%;
     background-color: var(--cyan-neon);
     box-shadow: 0 0 8px var(--cyan-neon);
     animation: pulseDot 1.8s infinite ease-in-out;
   }
   
   .hud-telemetry-tag {
     font-family: var(--font-mono);
     font-size: 0.72rem;
     color: var(--cyan-neon);
     letter-spacing: 0.04em;
   }
   
   /* 3D Scene Viewport */
   .globe-3d-scene {
     width: 100%;
     height: 100%;
     min-height: 420px;
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     perspective: 1400px;
     overflow: hidden;
     background: radial-gradient(circle at 50% 50%, rgba(10, 22, 45, 0.85) 0%, rgba(6, 11, 24, 0.98) 100%);
   }
   
   /* Photorealistic 3D Earth Globe Sphere */
   .globe-sphere-wrap {
     width: 360px;
     height: 360px;
     border-radius: 50%;
     position: relative;
     box-shadow: 
       inset -30px -25px 50px rgba(0, 0, 0, 0.95),
       inset 18px 18px 40px rgba(0, 210, 255, 0.3),
       0 0 60px rgba(0, 210, 255, 0.4),
       0 0 120px rgba(0, 119, 182, 0.25);
     transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
     will-change: transform;
     transform-style: preserve-3d;
   }
   
   .globe-sphere-texture {
     width: 100%;
     height: 100%;
     border-radius: 50%;
     object-fit: cover;
     display: block;
     transform: scale(1.18);
     filter: contrast(1.12) brightness(1.06);
     animation: globeGentleRotate 80s linear infinite;
     box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.8);
   }
   
   @keyframes globeGentleRotate {
     0% { filter: contrast(1.12) brightness(1.06) hue-rotate(0deg); }
     50% { filter: contrast(1.16) brightness(1.09) hue-rotate(6deg); }
     100% { filter: contrast(1.12) brightness(1.06) hue-rotate(0deg); }
   }
   
   /* Atmospheric Neon Rim Glow */
   .globe-atmosphere-halo {
     position: absolute;
     inset: -16px;
     border-radius: 50%;
     background: radial-gradient(circle, transparent 58%, rgba(0, 210, 255, 0.22) 82%, rgba(0, 180, 216, 0.45) 100%);
     box-shadow: 0 0 50px rgba(0, 210, 255, 0.4), 0 0 90px rgba(14, 165, 233, 0.25);
     pointer-events: none;
     animation: atmosphereAuraPulse 4.5s infinite ease-in-out;
   }
   
   @keyframes atmosphereAuraPulse {
     0%, 100% { opacity: 0.8; transform: scale(1); }
     50% { opacity: 1; transform: scale(1.03); }
   }
   
   /* Holographic Orbital Rings */
   .globe-orbit-ring-1 {
     position: absolute;
     inset: -28px;
     border-radius: 50%;
     border: 1.5px dashed rgba(0, 210, 255, 0.3);
     transform: rotateX(68deg) rotateY(16deg);
     animation: orbitSpin1 26s linear infinite;
     pointer-events: none;
     filter: drop-shadow(0 0 6px rgba(0, 210, 255, 0.4));
   }
   
   .globe-orbit-ring-2 {
     position: absolute;
     inset: -44px;
     border-radius: 50%;
     border: 1px dashed rgba(59, 130, 246, 0.25);
     transform: rotateX(76deg) rotateY(-24deg);
     animation: orbitSpin2 36s linear infinite reverse;
     pointer-events: none;
     filter: drop-shadow(0 0 5px rgba(59, 130, 246, 0.3));
   }
   
   @keyframes orbitSpin1 {
     from { transform: rotateX(68deg) rotateY(16deg) rotateZ(0deg); }
     to { transform: rotateX(68deg) rotateY(16deg) rotateZ(360deg); }
   }
   
   @keyframes orbitSpin2 {
     from { transform: rotateX(76deg) rotateY(-24deg) rotateZ(0deg); }
     to { transform: rotateX(76deg) rotateY(-24deg) rotateZ(360deg); }
   }
   
   /* Canvas Overlying Globe for Dynamic Routing Particles */
   #globeDynamicArcsCanvas {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     pointer-events: none;
     z-index: 10;
   }
   
   /* Floating Glassmorphism Server Badges */
   .globe-glass-badge {
     position: absolute;
     background: rgba(9, 17, 34, 0.82);
     backdrop-filter: blur(16px);
     -webkit-backdrop-filter: blur(16px);
     border: 1px solid rgba(0, 210, 255, 0.4);
     border-radius: 12px;
     padding: 8px 14px;
     display: flex;
     align-items: center;
     gap: 10px;
     box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 210, 255, 0.25);
     z-index: 15;
     user-select: none;
     pointer-events: auto;
     transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
     cursor: pointer;
   }
   
   .globe-glass-badge:hover {
     transform: translateY(-3px) scale(1.05);
     border-color: var(--cyan-neon);
     box-shadow: 0 12px 35px rgba(0, 0, 0, 0.7), 0 0 30px rgba(0, 210, 255, 0.5);
   }
   
   .globe-glass-badge.badge-ny {
     top: 22%;
     left: 8%;
     animation: floatBadgeNY 3.8s infinite ease-in-out;
   }
   
   .globe-glass-badge.badge-lon {
     top: 17%;
     right: 9%;
     animation: floatBadgeLon 4.2s infinite ease-in-out;
   }
   
   .globe-glass-badge.badge-tok {
     bottom: 20%;
     right: 8%;
     animation: floatBadgeTok 4s infinite ease-in-out;
   }
   
   .globe-glass-badge.badge-fra {
     bottom: 19%;
     left: 9%;
     animation: floatBadgeFra 4.4s infinite ease-in-out;
   }
   
   @keyframes floatBadgeNY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
   @keyframes floatBadgeLon { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
   @keyframes floatBadgeTok { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
   @keyframes floatBadgeFra { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
   
   .badge-dot-live {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background: var(--cyan-neon);
     box-shadow: 0 0 10px var(--cyan-neon);
     flex-shrink: 0;
   }
   
   .badge-dot-blue {
     width: 7px;
     height: 7px;
     border-radius: 50%;
     background: #3b82f6;
     box-shadow: 0 0 8px #3b82f6;
     flex-shrink: 0;
   }
   
   .badge-text-col {
     display: flex;
     flex-direction: column;
     line-height: 1.25;
   }
   
   .badge-city-name {
     font-size: 0.82rem;
     font-weight: 700;
     color: #ffffff;
   }
   
   .badge-stat-sub {
     font-size: 0.7rem;
     color: var(--cyan-neon);
   }
   
     color: var(--text-muted);
   }
   
   /* --------------------------------------------------------------------------
      CARD 3: POPULAR LOCATIONS LIST
      -------------------------------------------------------------------------- */
   .locations-card {
     display: flex;
     flex-direction: column;
   }
   
   .locations-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 14px;
   }
   
   .locations-header-title {
     font-size: 0.95rem;
     font-weight: 700;
     color: #ffffff;
     display: flex;
     align-items: center;
     gap: 8px;
   }
   
   .locations-header-seeall {
     font-size: 0.78rem;
     color: #3b82f6;
     text-decoration: none;
     font-weight: 500;
     cursor: pointer;
   }
   
   .locations-header-seeall:hover {
     text-decoration: underline;
   }
   
   .locations-list {
     display: flex;
     flex-direction: column;
     gap: 7px;
     overflow-y: auto;
     max-height: 290px;
   }
   
   .location-item {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 7px 10px;
     border-radius: 8px;
     transition: all 0.2s ease;
     cursor: pointer;
   }
   
   .location-item:hover {
     background: rgba(255, 255, 255, 0.04);
     transform: translateX(2px);
   }
   
   .loc-flag-group {
     display: flex;
     align-items: center;
     gap: 12px;
   }
   
   .flag-svg-icon {
     width: 22px;
     height: 16px;
     border-radius: 2.5px;
     object-fit: cover;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
   }
   
   .loc-country-text {
     font-size: 0.88rem;
     font-weight: 500;
     color: #ffffff;
   }
   
   .loc-latency-group {
     display: flex;
     align-items: center;
     gap: 8px;
   }
   
   .loc-latency-value {
     font-family: var(--font-mono);
     font-size: 0.78rem;
     color: var(--text-muted);
   }
   
   .loc-chevron {
     font-size: 0.78rem;
     color: var(--text-dim);
   }
   
   /* ==========================================================================
      MIDDLE ROW: 4 METRIC CARDS
      ========================================================================== */
   .middle-metric-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 18px;
     margin-bottom: 18px;
   }
   
   .metric-box {
     background: var(--bg-card);
     border: 1px solid var(--bg-card-border);
     border-radius: 16px;
     padding: 18px 20px 14px 20px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     height: 140px;
     overflow: hidden;
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
   }
   
   .metric-header {
     display: flex;
     align-items: center;
     gap: 14px;
   }
   
   .metric-circle-icon {
     width: 38px;
     height: 38px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.15rem;
     flex-shrink: 0;
   }
   
   .icon-bg-green {
     background: rgba(0, 230, 118, 0.15);
     color: var(--green-neon);
   }
   
   .icon-bg-purple {
     background: rgba(176, 66, 255, 0.15);
     color: var(--purple-neon);
   }
   
   .icon-bg-cyan {
     background: rgba(0, 210, 255, 0.15);
     color: var(--cyan-neon);
   }
   
   .icon-bg-blue {
     background: rgba(30, 86, 237, 0.15);
     color: #3b82f6;
   }
   
   .metric-details {
     display: flex;
     flex-direction: column;
   }
   
   .metric-title {
     font-size: 0.76rem;
     color: var(--text-dim);
     font-weight: 500;
     margin-bottom: 1px;
   }
   
   .metric-value-num {
     font-size: 1.55rem;
     font-weight: 700;
     color: #ffffff;
     letter-spacing: -0.02em;
   }
   
   /* Live Wave Sparkline Canvas */
   .wave-canvas-container {
     width: 100%;
     height: 42px;
     margin-top: 4px;
   }
   
   .wave-canvas-container canvas {
     width: 100%;
     height: 100%;
     display: block;
   }
   
   /* Data Used Split (Top Right & Bar Equalizer) */
   .data-card-header-split {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     width: 100%;
   }
   
   .data-bandwidth-stats {
     text-align: right;
     font-size: 0.74rem;
     line-height: 1.4;
   }
   
   .down-stat { color: #60a5fa; }
   .up-stat { color: #3b82f6; }
   
   /* ==========================================================================
      BOTTOM ROW: 3 CARDS (RECENT CONNECTIONS | QUICK CONNECT | DEVICES)
      ========================================================================== */
   .bottom-triple-grid {
     display: grid;
     grid-template-columns: 1.25fr 0.95fr 0.95fr;
     gap: 18px;
   }
   
   /* Card 1: Recent Connections Table */
   .recent-conn-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 12px;
   }
   
   .recent-title-group {
     display: flex;
     align-items: center;
     gap: 8px;
     font-size: 0.95rem;
     font-weight: 700;
     color: #ffffff;
   }
   
   .recent-conn-table {
     width: 100%;
     border-collapse: collapse;
   }
   
   .recent-conn-table tr {
     border-bottom: 1px solid rgba(255, 255, 255, 0.04);
   }
   
   .recent-conn-table tr:last-child {
     border-bottom: none;
   }
   
   .recent-conn-table td {
     padding: 8px 4px;
     font-size: 0.82rem;
     color: var(--text-muted);
   }
   
   .col-dest {
     color: #ffffff;
     font-weight: 500;
     display: flex;
     align-items: center;
     gap: 8px;
   }
   
   .col-timestamp {
     color: var(--text-dim);
     font-size: 0.76rem;
   }
   
   .col-duration-dot {
     font-family: var(--font-mono);
     font-size: 0.78rem;
     color: #34d399;
     text-align: right;
   }
   
   .col-duration-dot span {
     display: inline-flex;
     align-items: center;
     gap: 5px;
   }
   
   .col-chevron-right {
     color: var(--text-dim);
     font-size: 0.78rem;
     text-align: right;
   }
   
   /* Card 2: Quick Connect & Kill Switch */
   .quick-connect-box {
     background: #091224;
     border-radius: 12px;
     padding: 16px;
     margin-bottom: 14px;
   }
   
   .quick-connect-top {
     display: flex;
     align-items: center;
     gap: 8px;
     margin-bottom: 4px;
   }
   
   .quick-connect-top i {
     color: var(--amber-warning);
     font-size: 1rem;
   }
   
   .quick-connect-title {
     font-size: 0.92rem;
     font-weight: 700;
     color: #ffffff;
   }
   
   .quick-connect-subtitle {
     font-size: 0.78rem;
     color: var(--text-muted);
     margin-bottom: 14px;
   }
   
   .btn-connect-now {
     width: 100%;
     padding: 10px 18px;
     background: linear-gradient(90deg, #1d4ed8 0%, #0284c7 100%);
     color: #ffffff;
     border: none;
     border-radius: 8px;
     font-size: 0.9rem;
     font-weight: 600;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     cursor: pointer;
     box-shadow: 0 4px 16px rgba(30, 86, 237, 0.4);
     transition: all 0.2s ease;
   }
   
   .btn-connect-now:hover {
     background: linear-gradient(90deg, #2563eb 0%, #0369a1 100%);
     transform: translateY(-1px);
   }
   
   /* Kill Switch Row */
   .kill-switch-row {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 12px 14px;
     background: var(--bg-card-sub);
     border-radius: 12px;
   }
   
   .kill-switch-left {
     display: flex;
     align-items: center;
     gap: 12px;
   }
   
   .kill-switch-icon {
     font-size: 1.25rem;
     color: #ffffff;
   }
   
   .kill-switch-name {
     font-size: 0.88rem;
     font-weight: 600;
     color: #ffffff;
   }
   
   .kill-switch-desc {
     font-size: 0.72rem;
     color: var(--text-dim);
   }
   
   /* iOS Luxury Toggle Switch */
   .switch-control {
     position: relative;
     display: inline-block;
     width: 42px;
     height: 24px;
     flex-shrink: 0;
   }
   
   .switch-control input {
     opacity: 0;
     width: 0;
     height: 0;
   }
   
   .switch-track {
     position: absolute;
     cursor: pointer;
     inset: 0;
     background-color: #1e293b;
     border-radius: 9999px;
     transition: all 0.25s ease;
   }
   
   .switch-track::before {
     position: absolute;
     content: "";
     height: 18px;
     width: 18px;
     left: 3px;
     bottom: 3px;
     background-color: #ffffff;
     border-radius: 50%;
     transition: all 0.25s ease;
   }
   
   .switch-control input:checked + .switch-track {
     background: #2563eb;
     box-shadow: 0 0 10px rgba(37, 99, 235, 0.5);
   }
   
   .switch-control input:checked + .switch-track::before {
     transform: translateX(18px);
   }
   
   /* Card 3: Devices List */
   .devices-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 12px;
   }
   
   .devices-title-group {
     display: flex;
     align-items: center;
     gap: 8px;
     font-size: 0.95rem;
     font-weight: 700;
     color: #ffffff;
   }
   
   .device-row-item {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 8px 6px;
     border-bottom: 1px solid rgba(255, 255, 255, 0.04);
   }
   
   .device-row-item:last-child {
     border-bottom: none;
   }
   
   .device-col-left {
     display: flex;
     align-items: center;
     gap: 12px;
   }
   
   .device-os-icon {
     font-size: 1.35rem;
     color: #38bdf8;
   }
   
   .device-os-icon.icon-apple { color: #ffffff; }
   .device-os-icon.icon-android { color: #10b981; }
   
   .device-info-name {
     font-size: 0.88rem;
     font-weight: 600;
     color: #ffffff;
   }
   
   .device-info-sub {
     font-size: 0.74rem;
     color: var(--text-dim);
   }
   
   .device-status-bulb {
     width: 7px;
     height: 7px;
     border-radius: 50%;
     background: #334155;
   }
   
   .device-status-bulb.online {
     background: var(--green-neon);
     box-shadow: 0 0 8px var(--green-neon);
   }
   
   /* ==========================================================================
      OTHER VIEWS (SERVERS, LOCATIONS, STREAMING, SECURITY, SPEED TEST, ETC.)
      Animated smoothly without `#` tags
      ========================================================================== */
   .view-panel {
     display: none;
     opacity: 0;
     transform: translateY(10px);
     transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
   }
   
   .view-panel.active-view {
     display: block;
     opacity: 1;
     transform: translateY(0);
   }
   
   /* Responsive adjustments */
   @media (max-width: 1250px) {
     .top-hero-grid {
       grid-template-columns: 290px 1fr;
     }
     .locations-card {
       grid-column: span 2;
     }
     .middle-metric-grid {
       grid-template-columns: repeat(2, 1fr);
     }
     .bottom-triple-grid {
       grid-template-columns: 1fr;
     }
   }
   
   /* ==========================================================================
      CINEMATIC 8-SECOND GLOWING WELCOME LOADER OVERLAY
      ========================================================================== */
   .welcome-splash-loader {
     position: fixed;
     inset: 0;
     z-index: 999999;
     background: radial-gradient(circle at 50% 40%, #0d1d3d 0%, #060b18 65%, #03060d 100%);
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     overflow: hidden;
     transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), filter 0.8s cubic-bezier(0.16, 1, 0.3, 1);
     will-change: opacity, transform, filter;
   }
   
   .welcome-splash-loader.splash-fade-out {
     opacity: 0;
     transform: scale(1.05);
     filter: blur(10px);
     pointer-events: none;
   }
   
   /* Background Cyber Grid & Ambient Lighting */
   .splash-bg-grid {
     position: absolute;
     inset: -50%;
     width: 200%;
     height: 200%;
     background-image: 
       linear-gradient(rgba(0, 210, 255, 0.04) 1px, transparent 1px),
       linear-gradient(90deg, rgba(0, 210, 255, 0.04) 1px, transparent 1px);
     background-size: 44px 44px;
     animation: splashGridDrift 40s linear infinite;
     pointer-events: none;
   }
   
   @keyframes splashGridDrift {
     0% { transform: translateY(0); }
     100% { transform: translateY(44px); }
   }
   
   .splash-ambient-glow {
     position: absolute;
     width: 600px;
     height: 600px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(0, 210, 255, 0.22) 0%, rgba(30, 86, 237, 0.15) 45%, transparent 70%);
     filter: blur(50px);
     animation: splashAuraBreath 5s infinite ease-in-out;
     pointer-events: none;
   }
   
   @keyframes splashAuraBreath {
     0%, 100% { transform: scale(0.9); opacity: 0.7; }
     50% { transform: scale(1.15); opacity: 1; }
   }
   
   /* Splash Main Content Wrap */
   .splash-content-wrap {
     position: relative;
     z-index: 10;
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     padding: 20px;
   }
   
   /* Glowing Avatar & Biometric Scanning Rings */
   .splash-avatar-assembly {
     position: relative;
     width: 156px;
     height: 156px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 24px;
   }
   
   .splash-scan-ring-outer {
     position: absolute;
     inset: -14px;
     border-radius: 50%;
     border: 2px dashed rgba(0, 210, 255, 0.45);
     animation: splashOuterSpin 16s linear infinite;
     filter: drop-shadow(0 0 8px rgba(0, 210, 255, 0.4));
   }
   
   .splash-scan-ring-inner {
     position: absolute;
     inset: -4px;
     border-radius: 50%;
     border: 2px solid rgba(0, 230, 118, 0.45);
     border-top-color: transparent;
     border-bottom-color: transparent;
     animation: splashInnerSpin 9s linear infinite reverse;
   }
   
   @keyframes splashOuterSpin {
     from { transform: rotate(0deg); }
     to { transform: rotate(360deg); }
   }
   
   @keyframes splashInnerSpin {
     from { transform: rotate(0deg); }
     to { transform: rotate(360deg); }
   }
   
   .splash-avatar-glow {
     position: absolute;
     inset: 0;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(0, 210, 255, 0.35) 0%, transparent 70%);
     animation: splashAuraBreath 3s infinite ease-in-out;
   }
   
   .splash-avatar-img {
     width: 108px;
     height: 108px;
     border-radius: 50%;
     object-fit: cover;
     border: 3px solid rgba(0, 210, 255, 0.8);
     box-shadow: 
       0 0 40px rgba(0, 210, 255, 0.55),
       0 0 80px rgba(30, 86, 237, 0.35),
       inset 0 0 20px rgba(0, 0, 0, 0.7);
     position: relative;
     z-index: 2;
     animation: splashAvatarFloat 4s infinite ease-in-out;
   }
   
   @keyframes splashAvatarFloat {
     0%, 100% { transform: translateY(0); }
     50% { transform: translateY(-4px); }
   }
   
   .splash-badge-shield {
     position: absolute;
     bottom: 8px;
     right: 14px;
     z-index: 5;
     width: 32px;
     height: 32px;
     border-radius: 50%;
     background: #00e676;
     color: #060b18;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.05rem;
     box-shadow: 0 0 18px rgba(0, 230, 118, 0.85);
     border: 2.5px solid #060b18;
   }
   
   /* Identity Pill */
   .splash-identity-pill {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 6px 18px;
     border-radius: 9999px;
     background: rgba(0, 210, 255, 0.1);
     border: 1px solid rgba(0, 210, 255, 0.35);
     font-family: var(--font-mono);
     font-size: 0.76rem;
     font-weight: 600;
     color: #00d2ff;
     letter-spacing: 0.08em;
     margin-bottom: 16px;
     box-shadow: 0 0 20px rgba(0, 210, 255, 0.2);
   }
   
   .splash-live-dot {
     width: 7px;
     height: 7px;
     border-radius: 50%;
     background-color: var(--green-neon);
     box-shadow: 0 0 10px var(--green-neon);
     animation: pulseDot 1.6s infinite ease-in-out;
   }
   
   /* Main Welcome Heading */
   .splash-main-title {
     font-family: var(--font-sans);
     font-size: 2.3rem;
     font-weight: 800;
     color: #ffffff;
     letter-spacing: -0.03em;
     margin-bottom: 14px;
     text-shadow: 0 4px 25px rgba(0, 0, 0, 0.8);
   }
   
   .splash-gradient-name {
     background: linear-gradient(135deg, #00d2ff 0%, #00e676 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
   }
   
   /* Phase Status Box */
   .splash-phase-box {
     font-family: var(--font-mono);
     font-size: 0.88rem;
     color: #94a3b8;
     display: inline-flex;
     align-items: center;
     gap: 10px;
     padding: 10px 20px;
     background: rgba(9, 17, 34, 0.8);
     border: 1px solid rgba(0, 210, 255, 0.25);
     border-radius: 12px;
     margin-bottom: 30px;
     min-width: 420px;
     max-width: 90vw;
     justify-content: center;
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
   }
   
   .splash-terminal-icon {
     color: var(--cyan-neon);
     font-size: 1rem;
   }
   
   .splash-phase-text {
     color: #e2e8f0;
     font-weight: 500;
     transition: opacity 0.25s ease;
   }
   
   /* Glowing 8-Second Progress Track & Bar */
   .splash-progress-container {
     width: 440px;
     max-width: 88vw;
   }
   
   .splash-progress-track {
     width: 100%;
     height: 8px;
     background: rgba(255, 255, 255, 0.08);
     border-radius: 999px;
     overflow: visible;
     position: relative;
     border: 1px solid rgba(0, 210, 255, 0.25);
     box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6);
   }
   
   .splash-progress-bar {
     height: 100%;
     width: 0%;
     background: linear-gradient(90deg, #1e56ed 0%, #00d2ff 65%, #00e676 100%);
     position: relative;
     box-shadow: 0 0 22px rgba(0, 210, 255, 0.85);
     border-radius: 999px;
     will-change: width;
   }
   
   .splash-progress-photon {
     position: absolute;
     right: -5px;
     top: 50%;
     transform: translateY(-50%);
     width: 14px;
     height: 14px;
     border-radius: 50%;
     background: #ffffff;
     box-shadow: 
       0 0 14px #00e676,
       0 0 28px #00d2ff,
       0 0 40px #1e56ed;
   }
   
   .splash-progress-meta {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-top: 12px;
     font-family: var(--font-mono);
     font-size: 0.78rem;
     color: #64748b;
   }
   
   .splash-protocol-tag {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     color: #94a3b8;
   }
   
   .splash-protocol-tag i {
     color: var(--cyan-neon);
   }
   
   .splash-pct-counter {
     font-weight: 700;
     color: var(--cyan-neon);
     font-size: 0.88rem;
   }
   
   /* Skip Button (Bottom Right) */
   .splash-skip-btn {
     position: absolute;
     bottom: 32px;
     right: 36px;
     z-index: 20;
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(255, 255, 255, 0.12);
     color: #94a3b8;
     font-family: var(--font-mono);
     font-size: 0.78rem;
     padding: 8px 18px;
     border-radius: 9999px;
     cursor: pointer;
     transition: all 0.25s ease;
     display: inline-flex;
     align-items: center;
     gap: 8px;
     backdrop-filter: blur(8px);
   }
   
   .splash-skip-btn:hover {
     background: rgba(0, 210, 255, 0.12);
     border-color: rgba(0, 210, 255, 0.4);
     color: #ffffff;
     transform: translateX(2px);
     box-shadow: 0 0 18px rgba(0, 210, 255, 0.3);
   }
   
   /* ==========================================================================
      FULL-WINDOW ULTRA-RICH VIEW PANELS STYLING
      Fills the entire window with high-contrast, high-density enterprise UI
      ========================================================================== */
   
   .view-panel {
     display: none;
     opacity: 0;
     transform: translateY(12px);
     min-height: calc(100vh - 120px);
     padding-bottom: 48px;
     transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
   }
   
   .view-panel.active-view {
     display: block;
     opacity: 1;
     transform: translateY(0);
   }
   
   /* Panel Header & Toolbars */
   .panel-toolbar {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 16px;
     margin-bottom: 22px;
     flex-wrap: wrap;
   }
   
   .panel-filter-pills {
     display: flex;
     gap: 8px;
     flex-wrap: wrap;
   }
   
   .filter-pill {
     padding: 8px 18px;
     border-radius: 9999px;
     background: rgba(255, 255, 255, 0.04);
     border: 1px solid rgba(255, 255, 255, 0.08);
     color: #94a3b8;
     font-size: 0.84rem;
     font-weight: 500;
     cursor: pointer;
     transition: all 0.2s ease;
     user-select: none;
   }
   
   .filter-pill:hover,
   .filter-pill.active {
     background: rgba(30, 86, 237, 0.2);
     border-color: rgba(30, 86, 237, 0.55);
     color: #ffffff;
     box-shadow: 0 0 15px rgba(30, 86, 237, 0.25);
   }
   
   .panel-search-box {
     position: relative;
     min-width: 280px;
   }
   
   .panel-search-box input {
     width: 100%;
     background: #091122;
     border: 1px solid rgba(255, 255, 255, 0.09);
     border-radius: 9999px;
     padding: 8px 16px 8px 38px;
     color: #f1f5f9;
     font-size: 0.86rem;
     outline: none;
     transition: border-color 0.2s;
   }
   
   .panel-search-box input:focus {
     border-color: var(--blue-primary);
     box-shadow: 0 0 12px rgba(30, 86, 237, 0.3);
   }
   
   .panel-search-box i {
     position: absolute;
     left: 14px;
     top: 50%;
     transform: translateY(-50%);
     color: #64748b;
     font-size: 0.95rem;
   }
   
   /* Metric Cards HUD Row */
   .panel-metrics-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
     gap: 18px;
     margin-bottom: 24px;
   }
   
   .panel-stat-card {
     background: var(--bg-card);
     border: 1px solid var(--bg-card-border);
     border-radius: 16px;
     padding: 20px 22px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
     transition: transform 0.2s, border-color 0.2s;
   }
   
   .panel-stat-card:hover {
     transform: translateY(-2px);
     border-color: rgba(255, 255, 255, 0.12);
   }
   
   .panel-stat-label {
     font-size: 0.8rem;
     color: #94a3b8;
     font-weight: 500;
     margin-bottom: 4px;
     text-transform: uppercase;
     letter-spacing: 0.04em;
   }
   
   .panel-stat-value {
     font-size: 1.55rem;
     font-weight: 700;
     color: #f1f5f9;
     font-family: var(--font-mono);
     letter-spacing: -0.02em;
   }
   
   .panel-stat-sub {
     font-size: 0.78rem;
     color: #64748b;
     margin-top: 3px;
   }
   
   .panel-stat-icon-badge {
     width: 44px;
     height: 44px;
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.35rem;
   }
   
   /* High-Contrast Tables */
   .panel-table-wrap {
     background: var(--bg-card);
     border: 1px solid var(--bg-card-border);
     border-radius: 16px;
     overflow: hidden;
     box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
     margin-bottom: 24px;
   }
   
   .panel-table {
     width: 100%;
     border-collapse: collapse;
     font-size: 0.88rem;
     text-align: left;
   }
   
   .panel-table thead th {
     padding: 15px 22px;
     background: rgba(6, 12, 24, 0.9);
     color: #94a3b8;
     font-weight: 600;
     font-size: 0.76rem;
     text-transform: uppercase;
     letter-spacing: 0.06em;
     border-bottom: 1px solid var(--bg-card-border);
   }
   
   .panel-table tbody td {
     padding: 16px 22px;
     color: #f1f5f9;
     border-bottom: 1px solid rgba(255, 255, 255, 0.04);
     vertical-align: middle;
   }
   
   .panel-table tbody tr:hover td {
     background: rgba(255, 255, 255, 0.025);
   }
   
   .panel-table tbody tr:last-child td {
     border-bottom: none;
   }
   
   /* Load Bar */
   .load-bar-wrap {
     width: 100px;
     height: 6px;
     background: rgba(255, 255, 255, 0.08);
     border-radius: 999px;
     overflow: hidden;
     margin-top: 5px;
   }
   
   .load-bar-fill {
     height: 100%;
     border-radius: 999px;
   }
   
   .load-low { background: #00e676; box-shadow: 0 0 8px rgba(0, 230, 118, 0.5); }
   .load-mid { background: #00d2ff; box-shadow: 0 0 8px rgba(0, 210, 255, 0.5); }
   .load-high { background: #fbbf24; box-shadow: 0 0 8px rgba(251, 191, 36, 0.5); }
   
   /* Action Buttons in Panels */
   .btn-panel-action {
     padding: 7px 18px;
     border-radius: 8px;
     font-size: 0.82rem;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.2s ease;
     border: none;
     outline: none;
     display: inline-flex;
     align-items: center;
     gap: 6px;
     text-decoration: none;
   }
   
   .btn-panel-connect {
     background: var(--blue-primary);
     color: #ffffff;
   }
   
   .btn-panel-connect:hover {
     background: var(--blue-hover);
     box-shadow: 0 0 14px var(--blue-glow);
     transform: translateY(-1px);
   }
   
   .btn-panel-connected {
     background: rgba(0, 230, 118, 0.14);
     border: 1px solid rgba(0, 230, 118, 0.45);
     color: #00e676;
     cursor: default;
   }
   
   /* Streaming Grid */
   .streaming-cards-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
     gap: 22px;
     margin-bottom: 24px;
   }
   
   .stream-service-card {
     background: var(--bg-card);
     border: 1px solid var(--bg-card-border);
     border-radius: 16px;
     padding: 24px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     min-height: 220px;
     box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
     transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
   }
   
   .stream-service-card:hover {
     transform: translateY(-3px);
     border-color: rgba(0, 210, 255, 0.45);
     box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7), 0 0 20px rgba(0, 210, 255, 0.15);
   }
   
   .stream-top-row {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 14px;
   }
   
   .stream-logo-pill {
     display: flex;
     align-items: center;
     gap: 12px;
     font-weight: 700;
     font-size: 1.15rem;
     color: #ffffff;
   }
   
   .stream-badge-4k {
     padding: 4px 10px;
     border-radius: 6px;
     background: rgba(0, 230, 118, 0.14);
     border: 1px solid rgba(0, 230, 118, 0.4);
     color: #00e676;
     font-size: 0.74rem;
     font-weight: 700;
     letter-spacing: 0.05em;
   }
   
   .stream-desc-text {
     font-size: 0.86rem;
     color: #94a3b8;
     line-height: 1.5;
     margin-bottom: 20px;
   }
   
   /* Security Suite Modules */
   .security-modules-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
     gap: 22px;
     margin-bottom: 24px;
   }
   
   .security-module-card {
     background: var(--bg-card);
     border: 1px solid var(--bg-card-border);
     border-radius: 16px;
     padding: 24px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
     transition: border-color 0.2s;
   }
   
   .security-module-card:hover {
     border-color: rgba(255, 255, 255, 0.12);
   }
   
   .security-card-header {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     margin-bottom: 12px;
   }
   
   .security-icon-circle {
     width: 44px;
     height: 44px;
     border-radius: 12px;
     background: rgba(30, 86, 237, 0.15);
     border: 1px solid rgba(30, 86, 237, 0.35);
     color: #38bdf8;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.35rem;
   }
   
   .security-card-title {
     font-size: 1.05rem;
     font-weight: 700;
     color: #f1f5f9;
     margin-bottom: 4px;
   }
   
   .security-card-desc {
     font-size: 0.85rem;
     color: #94a3b8;
     line-height: 1.5;
     margin-bottom: 18px;
   }
   
   /* Speed Test Suite */
   .speedtest-hero-card {
     background: var(--bg-card);
     border: 1px solid var(--bg-card-border);
     border-radius: 20px;
     padding: 40px 30px;
     text-align: center;
     margin-bottom: 24px;
     box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
     position: relative;
     overflow: hidden;
   }
   
   .speedtest-dial-wrap {
     width: 220px;
     height: 220px;
     margin: 0 auto 28px auto;
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
   }
   
   .speedtest-dial-svg {
     width: 100%;
     height: 100%;
     transform: rotate(-90deg);
   }
   
   .speedtest-dial-center {
     position: absolute;
     text-align: center;
   }
   
   .speedtest-num-big {
     font-size: 2.75rem;
     font-weight: 800;
     color: #ffffff;
     font-family: var(--font-mono);
     line-height: 1;
   }
   
   .speedtest-unit-sub {
     font-size: 0.88rem;
     color: var(--cyan-neon);
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.08em;
     margin-top: 4px;
   }
   
   .btn-speedtest-run {
     background: linear-gradient(135deg, #1e56ed 0%, #00d2ff 100%);
     border: none;
     color: #ffffff;
     font-size: 1rem;
     font-weight: 700;
     padding: 14px 38px;
     border-radius: 9999px;
     cursor: pointer;
     box-shadow: 0 0 25px rgba(0, 210, 255, 0.4);
     transition: all 0.25s ease;
     display: inline-flex;
     align-items: center;
     gap: 10px;
   }
   
   .btn-speedtest-run:hover {
     transform: scale(1.04);
     box-shadow: 0 0 35px rgba(0, 210, 255, 0.6);
   }
   
   /* Devices Management Grid */
   .devices-management-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 20px;
     margin-bottom: 24px;
   }
   
   .device-full-card {
     background: var(--bg-card);
     border: 1px solid var(--bg-card-border);
     border-radius: 16px;
     padding: 22px;
     box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     min-height: 200px;
     transition: transform 0.2s, border-color 0.2s;
   }
   
   .device-full-card:hover {
     transform: translateY(-2px);
     border-color: rgba(255, 255, 255, 0.12);
   }
   
   .device-full-top {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 16px;
   }
   
   .device-full-meta-row {
     display: flex;
     align-items: center;
     justify-content: space-between;
     font-size: 0.84rem;
     padding: 7px 0;
     border-bottom: 1px solid rgba(255, 255, 255, 0.04);
   }
   
   .device-meta-label {
     color: #94a3b8;
   }
   
   .device-meta-val {
     color: #f1f5f9;
     font-family: var(--font-mono);
     font-weight: 500;
   }
   
   /* Settings Form Controls */
   .settings-section-card {
     background: var(--bg-card);
     border: 1px solid var(--bg-card-border);
     border-radius: 16px;
     padding: 28px;
     margin-bottom: 22px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
   }
   
   .settings-section-title {
     font-size: 1.12rem;
     font-weight: 700;
     color: #ffffff;
     margin-bottom: 6px;
     display: flex;
     align-items: center;
     gap: 10px;
   }
   
   .settings-section-desc {
     font-size: 0.85rem;
     color: #94a3b8;
     margin-bottom: 22px;
   }
   
   .protocol-options-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
     gap: 14px;
   }
   
   .protocol-choice-card {
     border: 1px solid rgba(255, 255, 255, 0.08);
     border-radius: 12px;
     padding: 16px 18px;
     background: rgba(7, 14, 29, 0.6);
     cursor: pointer;
     transition: all 0.2s ease;
     display: flex;
     align-items: flex-start;
     gap: 12px;
   }
   
   .protocol-choice-card:hover,
   .protocol-choice-card.active {
     border-color: var(--blue-primary);
     background: rgba(30, 86, 237, 0.12);
     box-shadow: 0 0 18px rgba(30, 86, 237, 0.2);
   }
   
   .protocol-name {
     font-size: 0.94rem;
     font-weight: 700;
     color: #f1f5f9;
     margin-bottom: 2px;
   }
   
   .protocol-desc {
     font-size: 0.8rem;
     color: #94a3b8;
     line-height: 1.4;
   }
   
   /* Support Helpdesk Grid */
   .support-cards-row {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 20px;
     margin-bottom: 26px;
   }
   
   .support-action-card {
     background: var(--bg-card);
     border: 1px solid var(--bg-card-border);
     border-radius: 16px;
     padding: 24px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     min-height: 180px;
     box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
   }
   
   /* ==========================================================================
      LIVE CHAT FLOATING LAUNCHER & HUD CONVERSATION DRAWER
      Ultra-Luxury Frosted Glass Cybersecurity Support Widget
      ========================================================================== */
   
   /* Floating Launcher Button */
   .live-chat-launcher {
     position: fixed;
     bottom: 24px;
     right: 28px;
     z-index: 99990;
     background: rgba(10, 18, 36, 0.88);
     backdrop-filter: blur(24px) saturate(190%);
     -webkit-backdrop-filter: blur(24px) saturate(190%);
     border: 1px solid rgba(0, 210, 255, 0.45);
     border-radius: 9999px;
     padding: 8px 18px 8px 8px;
     display: flex;
     align-items: center;
     gap: 12px;
     cursor: pointer;
     box-shadow: 
       0 16px 38px rgba(0, 0, 0, 0.75),
       0 0 25px rgba(0, 210, 255, 0.28),
       inset 0 1px 1px rgba(255, 255, 255, 0.18);
     transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
     user-select: none;
   }
   
   .live-chat-launcher:hover {
     transform: translateY(-3px) scale(1.02);
     border-color: rgba(0, 210, 255, 0.75);
     box-shadow: 
       0 22px 48px rgba(0, 0, 0, 0.85),
       0 0 35px rgba(0, 210, 255, 0.45),
       inset 0 1px 1px rgba(255, 255, 255, 0.25);
   }
   
   .chat-launcher-avatar-wrap {
     position: relative;
     width: 42px;
     height: 42px;
   }
   
   .chat-launcher-avatar {
     width: 42px;
     height: 42px;
     border-radius: 50%;
     background: linear-gradient(135deg, #0284c7 0%, #1e56ed 100%);
     display: flex;
     align-items: center;
     justify-content: center;
     color: #ffffff;
     font-size: 1.25rem;
     box-shadow: 0 0 14px rgba(30, 86, 237, 0.4);
   }
   
   .chat-launcher-online-dot {
     position: absolute;
     bottom: 0;
     right: 0;
     width: 12px;
     height: 12px;
     border-radius: 50%;
     background: #00e676;
     border: 2px solid #070c18;
     box-shadow: 0 0 8px #00e676;
   }
   
   .chat-launcher-meta {
     display: flex;
     flex-direction: column;
   }
   
   .chat-launcher-name {
     font-size: 0.86rem;
     font-weight: 700;
     color: #ffffff;
     letter-spacing: -0.01em;
     line-height: 1.2;
   }
   
   .chat-launcher-sub {
     font-size: 0.72rem;
     color: #00e676;
     display: flex;
     align-items: center;
     gap: 5px;
     font-weight: 500;
     margin-top: 2px;
   }
   
   .chat-launcher-unread-badge {
     position: absolute;
     top: -4px;
     left: 28px;
     background: #ef4444;
     color: #ffffff;
     font-size: 0.65rem;
     font-weight: 700;
     width: 18px;
     height: 18px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     border: 2px solid #070c18;
     box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
     animation: pulseBadge 2s infinite;
   }
   
   @keyframes pulseBadge {
     0%, 100% { transform: scale(1); }
     50% { transform: scale(1.15); }
   }
   
   /* ==========================================================================
      LIVE CHAT WINDOW HUD MODAL
      ========================================================================== */
   .live-chat-window {
     position: fixed;
     bottom: 84px;
     right: 28px;
     width: 390px;
     height: 560px;
     max-height: calc(100vh - 110px);
     max-width: calc(100vw - 32px);
     z-index: 99995;
     background: rgba(8, 15, 30, 0.95);
     backdrop-filter: blur(28px) saturate(190%);
     -webkit-backdrop-filter: blur(28px) saturate(190%);
     border: 1px solid rgba(0, 210, 255, 0.38);
     border-radius: 20px;
     box-shadow: 
       0 28px 65px rgba(0, 0, 0, 0.85),
       0 0 35px rgba(0, 210, 255, 0.22),
       inset 0 1px 1px rgba(255, 255, 255, 0.16);
     display: flex;
     flex-direction: column;
     overflow: hidden;
     transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
     transform-origin: bottom right;
   }
   
   .live-chat-window.hidden {
     opacity: 0;
     visibility: hidden;
     transform: translateY(24px) scale(0.92);
     pointer-events: none;
   }
   
   .live-chat-window.active {
     opacity: 1;
     visibility: visible;
     transform: translateY(0) scale(1);
     pointer-events: auto;
   }
   
   /* Header */
   .chat-window-header {
     padding: 16px 20px;
     background: rgba(6, 12, 24, 0.9);
     border-bottom: 1px solid rgba(255, 255, 255, 0.08);
     display: flex;
     align-items: center;
     justify-content: space-between;
   }
   
   .chat-header-user-info {
     display: flex;
     align-items: center;
     gap: 12px;
   }
   
   .chat-header-avatar-circle {
     width: 38px;
     height: 38px;
     border-radius: 50%;
     background: linear-gradient(135deg, #0284c7 0%, #1e56ed 100%);
     display: flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     font-size: 1.15rem;
     box-shadow: 0 0 12px rgba(30, 86, 237, 0.4);
     position: relative;
   }
   
   .chat-header-name {
     font-size: 0.92rem;
     font-weight: 700;
     color: #ffffff;
     letter-spacing: -0.01em;
     display: flex;
     align-items: center;
     gap: 6px;
   }
   
   .chat-header-role {
     font-size: 0.72rem;
     color: #00e676;
     display: flex;
     align-items: center;
     gap: 5px;
     font-weight: 500;
     margin-top: 1px;
   }
   
   .chat-header-controls {
     display: flex;
     align-items: center;
     gap: 8px;
   }
   
   .chat-control-btn {
     width: 28px;
     height: 28px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.06);
     border: 1px solid rgba(255, 255, 255, 0.1);
     color: #94a3b8;
     font-size: 0.85rem;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     outline: none;
     transition: all 0.2s ease;
   }
   
   .chat-control-btn:hover {
     background: rgba(239, 68, 68, 0.2);
     border-color: rgba(239, 68, 68, 0.4);
     color: #ffffff;
   }
   
   /* Chat Messages Body */
   .chat-window-messages {
     flex: 1;
     padding: 18px 20px;
     overflow-y: auto;
     display: flex;
     flex-direction: column;
     gap: 14px;
   }
   
   .chat-window-messages::-webkit-scrollbar {
     width: 5px;
   }
   
   .chat-window-messages::-webkit-scrollbar-thumb {
     background: rgba(255, 255, 255, 0.15);
     border-radius: 9999px;
   }
   
   .chat-date-pill {
     align-self: center;
     font-size: 0.7rem;
     font-weight: 600;
     color: #64748b;
     text-transform: uppercase;
     letter-spacing: 0.06em;
     background: rgba(255, 255, 255, 0.04);
     border: 1px solid rgba(255, 255, 255, 0.06);
     padding: 4px 12px;
     border-radius: 9999px;
   }
   
   .chat-bubble {
     max-width: 86%;
     font-size: 0.85rem;
     line-height: 1.45;
     border-radius: 16px;
     padding: 12px 16px;
     position: relative;
     word-break: break-word;
   }
   
   .chat-bubble-agent {
     align-self: flex-start;
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(255, 255, 255, 0.09);
     color: #f1f5f9;
     border-bottom-left-radius: 4px;
   }
   
   .chat-bubble-user {
     align-self: flex-end;
     background: linear-gradient(135deg, #1e56ed 0%, #0284c7 100%);
     color: #ffffff;
     border-bottom-right-radius: 4px;
     box-shadow: 0 4px 16px rgba(30, 86, 237, 0.35);
   }
   
   .chat-bubble-meta {
     font-size: 0.68rem;
     color: #64748b;
     margin-top: 4px;
     text-align: right;
   }
   
   .chat-bubble-user .chat-bubble-meta {
     color: rgba(255, 255, 255, 0.65);
   }
   
   /* Typing Indicator Animation */
   .chat-typing-indicator {
     align-self: flex-start;
     display: none;
     align-items: center;
     gap: 8px;
     background: rgba(255, 255, 255, 0.04);
     border: 1px solid rgba(255, 255, 255, 0.08);
     border-radius: 16px;
     padding: 10px 16px;
     border-bottom-left-radius: 4px;
   }
   
   .chat-typing-indicator.active {
     display: flex !important;
   }
   
   .chat-typing-dots {
     display: flex;
     gap: 4px;
   }
   
   .chat-typing-dots span {
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: #00d2ff;
     animation: typingBounce 1.4s infinite ease-in-out;
   }
   
   .chat-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
   .chat-typing-dots span:nth-child(3) { animation-delay: 0.4s; }
   
   @keyframes typingBounce {
     0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
     40% { transform: scale(1.1); opacity: 1; }
   }
   
   .chat-typing-label {
     font-size: 0.74rem;
     color: #94a3b8;
   }
   
   /* Suggestion Pills Bar */
   .chat-quick-suggestions {
     display: flex;
     gap: 8px;
     overflow-x: auto;
     padding: 10px 16px;
     background: rgba(6, 12, 24, 0.8);
     border-top: 1px solid rgba(255, 255, 255, 0.05);
   }
   
   .chat-quick-suggestions::-webkit-scrollbar {
     display: none;
   }
   
   .chat-prompt-chip {
     padding: 5px 12px;
     border-radius: 9999px;
     background: rgba(30, 86, 237, 0.12);
     border: 1px solid rgba(30, 86, 237, 0.35);
     color: #38bdf8;
     font-size: 0.76rem;
     font-weight: 500;
     cursor: pointer;
     white-space: nowrap;
     transition: all 0.2s;
     user-select: none;
   }
   
   .chat-prompt-chip:hover {
     background: rgba(30, 86, 237, 0.28);
     border-color: rgba(0, 210, 255, 0.6);
     color: #ffffff;
     transform: translateY(-1px);
   }
   
   /* Input Bar */
   .chat-window-input-bar {
     padding: 12px 16px;
     background: rgba(6, 12, 24, 0.95);
     border-top: 1px solid rgba(255, 255, 255, 0.08);
     display: flex;
     align-items: center;
     gap: 10px;
   }
   
   .chat-input-text {
     flex: 1;
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 9999px;
     padding: 9px 18px;
     color: #f1f5f9;
     font-size: 0.85rem;
     outline: none;
     transition: border-color 0.2s, box-shadow 0.2s;
   }
   
   .chat-input-text:focus {
     border-color: var(--blue-primary);
     box-shadow: 0 0 12px rgba(30, 86, 237, 0.35);
   }
   
   .chat-send-btn {
     width: 36px;
     height: 36px;
     border-radius: 50%;
     background: var(--blue-primary);
     border: none;
     color: #ffffff;
     font-size: 0.95rem;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     outline: none;
     transition: all 0.2s ease;
     box-shadow: 0 0 12px var(--blue-glow);
   }
   
   .chat-send-btn:hover {
     background: var(--blue-hover);
     transform: scale(1.08);
     box-shadow: 0 0 18px var(--blue-glow);
   }
   
   /* ==========================================================================
      ADVANCED CYBER VISUALIZATIONS & MICRO-ANIMATIONS EXTENSION
      ========================================================================== */
   
   /* 1. Dynamic Cursor Spotlight & Elevation */
   .card-box, .panel-stat-card, .metric-box, .location-item, .security-module-card {
     position: relative;
     overflow: hidden;
     transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease, border-color 0.28s ease !important;
   }
   
   .card-box::before, .panel-stat-card::before, .metric-box::before, .security-module-card::before {
     content: '';
     position: absolute;
     inset: 0;
     background: radial-gradient(350px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(0, 210, 255, 0.09), transparent 70%);
     opacity: 0;
     transition: opacity 0.35s ease;
     pointer-events: none;
     z-index: 1;
   }
   
   .card-box:hover::before, .panel-stat-card:hover::before, .metric-box:hover::before, .security-module-card:hover::before {
     opacity: 1;
   }
   
   .card-box:hover, .metric-box:hover {
     border-color: rgba(0, 210, 255, 0.32) !important;
     box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45), 0 0 20px rgba(0, 210, 255, 0.12) !important;
     transform: translateY(-2px);
   }
   
   /* 2. Power Button Multilayer Cyber HUD Assembly */
   .power-hud-svg-wrap {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 146px;
     height: 146px;
     pointer-events: none;
     z-index: 2;
   }
   
   .power-hud-rotating-ring {
     transform-origin: center;
     animation: rotateClockwise 18s linear infinite;
   }
   
   .power-hud-rotating-ring-rev {
     transform-origin: center;
     animation: rotateCounterClockwise 24s linear infinite;
   }
   
   .power-pulse-ripple {
     position: absolute;
     top: 50%;
     left: 50%;
     width: 110px;
     height: 110px;
     border-radius: 50%;
     border: 1.5px solid rgba(0, 230, 118, 0.5);
     transform: translate(-50%, -50%) scale(1);
     pointer-events: none;
     z-index: 1;
     animation: pulseRippleGlow 2.8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
   }
   
   .power-pulse-ripple.ripple-delayed {
     animation-delay: 1.4s;
   }
   
   .power-card.is-disconnected .power-pulse-ripple {
     border-color: rgba(239, 68, 68, 0.4);
   }
   
   .power-telemetry-pill {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background: rgba(0, 230, 118, 0.08);
     border: 1px solid rgba(0, 230, 118, 0.25);
     border-radius: 9999px;
     padding: 4px 12px;
     font-family: var(--font-mono);
     font-size: 0.72rem;
     font-weight: 600;
     color: #00e676;
     letter-spacing: 0.04em;
     margin-top: 14px;
     box-shadow: 0 0 12px rgba(0, 230, 118, 0.15);
     transition: all 0.3s ease;
   }
   
   .power-card.is-disconnected .power-telemetry-pill {
     background: rgba(239, 68, 68, 0.08);
     border-color: rgba(239, 68, 68, 0.25);
     color: #ef4444;
     box-shadow: 0 0 12px rgba(239, 68, 68, 0.15);
   }
   
   .power-telemetry-dot {
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: currentColor;
     box-shadow: 0 0 8px currentColor;
     animation: pulseDot 1.6s infinite;
   }
   
   /* 3. Metric Peak Badges */
   .metric-peak-badge {
     display: inline-flex;
     align-items: center;
     gap: 5px;
     font-size: 0.68rem;
     font-family: var(--font-mono);
     font-weight: 600;
     padding: 2px 7px;
     border-radius: 6px;
     background: rgba(0, 230, 118, 0.1);
     color: #00e676;
     border: 1px solid rgba(0, 230, 118, 0.22);
   }
   
   /* 4. Globe Route Controls & Floating HUD */
   .globe-route-controls {
     position: absolute;
     bottom: 14px;
     left: 14px;
     right: 14px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     z-index: 20;
     pointer-events: auto;
   }
   
   .globe-route-pills {
     display: flex;
     gap: 6px;
   }
   
   .globe-route-pill {
     padding: 3px 9px;
     border-radius: 6px;
     background: rgba(7, 14, 29, 0.82);
     border: 1px solid rgba(255, 255, 255, 0.08);
     font-size: 0.68rem;
     font-family: var(--font-mono);
     color: var(--text-muted);
     cursor: pointer;
     transition: all 0.2s ease;
   }
   
   .globe-route-pill.active, .globe-route-pill:hover {
     background: rgba(30, 86, 237, 0.25);
     border-color: var(--cyan-neon);
     color: #ffffff;
   }
   
   .globe-interactive-tooltip {
     position: absolute;
     pointer-events: none;
     background: rgba(7, 14, 29, 0.94);
     border: 1px solid rgba(0, 210, 255, 0.45);
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 16px rgba(0, 210, 255, 0.25);
     border-radius: 10px;
     padding: 8px 12px;
     font-size: 0.75rem;
     z-index: 50;
     transform: translate(-50%, -120%);
     opacity: 0;
     transition: opacity 0.2s ease, transform 0.2s ease;
     backdrop-filter: blur(12px);
     white-space: nowrap;
   }
   
   .globe-interactive-tooltip.visible {
     opacity: 1;
   }
   
   /* 5. Cyber Threat Radar & Live Interception Matrix */
   .radar-stage-card {
     background: var(--bg-card);
     border: 1px solid var(--bg-card-border);
     border-radius: 16px;
     padding: 24px;
     display: flex;
     flex-direction: column;
     position: relative;
     overflow: hidden;
   }
   
   .radar-header-row {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 18px;
   }
   
   .radar-live-badge {
     display: inline-flex;
     align-items: center;
     gap: 7px;
     font-family: var(--font-mono);
     font-size: 0.72rem;
     padding: 3px 10px;
     border-radius: 9999px;
     background: rgba(0, 230, 118, 0.1);
     color: #00e676;
     border: 1px solid rgba(0, 230, 118, 0.3);
   }
   
   .radar-canvas-assembly {
     position: relative;
     width: 100%;
     height: 240px;
     display: flex;
     align-items: center;
     justify-content: center;
   }
   
   #canvasThreatRadar {
     width: 100%;
     height: 100%;
     border-radius: 12px;
   }
   
   .radar-stat-strip {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 12px;
     margin-top: 18px;
   }
   
   .radar-stat-item {
     background: rgba(7, 14, 29, 0.6);
     border: 1px solid rgba(255, 255, 255, 0.05);
     border-radius: 10px;
     padding: 10px 12px;
   }
   
   .radar-stat-lbl {
     font-size: 0.68rem;
     color: var(--text-muted);
     text-transform: uppercase;
     letter-spacing: 0.05em;
     margin-bottom: 4px;
   }
   
   .radar-stat-val {
     font-family: var(--font-mono);
     font-size: 1.05rem;
     font-weight: 700;
     color: #ffffff;
   }
   
   /* 6. Speed Test Multi-Stage Simulator */
   .speedtest-stages-bar {
     display: flex;
     gap: 12px;
     margin-bottom: 24px;
     width: 100%;
     justify-content: center;
   }
   
   .speedtest-step-pill {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 6px 14px;
     border-radius: 9999px;
     background: rgba(255, 255, 255, 0.04);
     border: 1px solid rgba(255, 255, 255, 0.08);
     font-size: 0.78rem;
     font-family: var(--font-mono);
     color: var(--text-muted);
     transition: all 0.3s ease;
   }
   
   .speedtest-step-pill.active {
     background: rgba(30, 86, 237, 0.18);
     border-color: var(--cyan-neon);
     color: #ffffff;
     box-shadow: 0 0 16px rgba(0, 210, 255, 0.3);
   }
   
   .speedtest-step-pill.completed {
     background: rgba(0, 230, 118, 0.12);
     border-color: rgba(0, 230, 118, 0.35);
     color: #00e676;
   }
   
   .speedtest-wave-graph-container {
     width: 100%;
     height: 85px;
     margin-top: 20px;
     border-radius: 10px;
     background: rgba(7, 14, 29, 0.45);
     border: 1px solid rgba(255, 255, 255, 0.05);
     overflow: hidden;
     position: relative;
   }
   
   #speedtestWaveCanvas {
     width: 100%;
     height: 100%;
   }
   
   /* 7. Keyframes for Micro-Animations */
   @keyframes rotateClockwise {
     from { transform: rotate(0deg); }
     to { transform: rotate(360deg); }
   }
   
   @keyframes rotateCounterClockwise {
     from { transform: rotate(360deg); }
     to { transform: rotate(0deg); }
   }
   
   @keyframes pulseRippleGlow {
     0% {
       transform: translate(-50%, -50%) scale(0.92);
       opacity: 0.8;
     }
     50% {
       opacity: 0.4;
     }
     100% {
       transform: translate(-50%, -50%) scale(1.42);
       opacity: 0;
     }
   }
   
   @keyframes pulseDot {
     0%, 100% { opacity: 1; transform: scale(1); }
     50% { opacity: 0.4; transform: scale(0.85); }
   }
   
   /* Smooth view transitions */
   .view-panel {
     animation: fadeInView 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
   }
   
   @keyframes fadeInView {
     from {
       opacity: 0;
       transform: translateY(8px);
     }
     to {
       opacity: 1;
       transform: translateY(0);
     }
   }
   
   /* ==========================================================================
      NEXAVPN WORLDWIDE LOCATIONS & DASHBOARD OVERHAUL (MATCHING SCREENSHOT 1:1)
      ========================================================================== */
   
   /* Topbar Theme Toggle Pill */
   .theme-toggle-pill {
     display: flex;
     align-items: center;
     gap: 8px;
     background: rgba(11, 19, 38, 0.85);
     border: 1px solid rgba(255, 255, 255, 0.09);
     padding: 4px 10px;
     border-radius: 9999px;
     cursor: pointer;
     user-select: none;
     transition: all 0.25s ease;
     backdrop-filter: blur(8px);
   }
   
   .theme-toggle-pill:hover {
     border-color: rgba(59, 130, 246, 0.45);
     background: rgba(16, 28, 56, 0.95);
   }
   
   .theme-sun-icon {
     color: #f59e0b;
     font-size: 0.88rem;
     opacity: 0.8;
   }
   
   .theme-moon-icon {
     color: #64748b;
     font-size: 0.88rem;
     transition: color 0.2s ease;
   }
   
   .theme-moon-icon.active {
     color: #38bdf8;
     text-shadow: 0 0 8px rgba(56, 189, 248, 0.6);
   }
   
   .theme-switch-slider {
     width: 28px;
     height: 14px;
     background: rgba(22, 33, 56, 0.95);
     border: 1px solid rgba(255, 255, 255, 0.12);
     border-radius: 9999px;
     position: relative;
     display: inline-block;
   }
   
   .theme-switch-knob {
     position: absolute;
     top: 1px;
     right: 2px;
     width: 10px;
     height: 10px;
     border-radius: 50%;
     background: #2563eb;
     box-shadow: 0 0 8px #3b82f6;
     transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
   }
   
   /* Promotional upgrade card styles deprecated and removed for Enterprise Security compliance */
   
   
   /* ==========================================================================
      LOCATIONS HERO SECTION
      ========================================================================== */
   .locations-hero-section {
     display: grid;
     grid-template-columns: 1.18fr 1fr;
     align-items: center;
     gap: 32px;
     padding: 8px 0 28px 0;
     position: relative;
   }
   
   @media (max-width: 1100px) {
     .locations-hero-section {
       grid-template-columns: 1fr;
       gap: 20px;
     }
   }
   
   .locations-hero-content {
     display: flex;
     flex-direction: column;
     z-index: 2;
   }
   
   .hero-secure-breadcrumb {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     color: #38bdf8;
     font-size: 0.86rem;
     font-weight: 500;
     text-decoration: none;
     margin-bottom: 12px;
     transition: all 0.2s ease;
   }
   
   .hero-secure-breadcrumb:hover {
     color: #7dd3fc;
     transform: translateX(2px);
   }
   
   .hero-secure-breadcrumb i {
     font-size: 0.75rem;
   }
   
   .locations-hero-headline {
     color: #ffffff;
     font-size: 2.5rem;
     font-weight: 800;
     letter-spacing: -0.03em;
     line-height: 1.15;
     margin-bottom: 12px;
   }
   
   .locations-headline-gradient {
     background: linear-gradient(135deg, #38bdf8 0%, #818cf8 50%, #c084fc 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     display: inline-block;
     filter: drop-shadow(0 0 25px rgba(129, 140, 248, 0.4));
   }
   
   .locations-hero-description {
     color: #94a3b8;
     font-size: 0.92rem;
     line-height: 1.55;
     max-width: 520px;
     margin-bottom: 22px;
   }
   
   /* 4 Feature Capsule Pills */
   .locations-capsules-strip {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: 10px;
   }
   
   .loc-capsule-item {
     display: flex;
     align-items: center;
     gap: 8px;
     background: rgba(12, 20, 39, 0.75);
     border: 1px solid rgba(255, 255, 255, 0.08);
     border-radius: 9999px;
     padding: 7px 15px;
     font-size: 0.8rem;
     font-weight: 500;
     color: #e2e8f0;
     backdrop-filter: blur(10px);
     transition: all 0.2s ease;
     user-select: none;
   }
   
   .loc-capsule-item:hover {
     background: rgba(19, 32, 62, 0.9);
     border-color: rgba(56, 189, 248, 0.35);
     transform: translateY(-1px);
   }
   
   .capsule-icon-wrap {
     display: flex;
     align-items: center;
     justify-content: center;
     color: #38bdf8;
     font-size: 0.95rem;
   }
   
   /* Right 3D Globe with Live Pins */
   .locations-hero-globe {
     position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
   }
   
   .globe-stage {
     position: relative;
     width: 100%;
     max-width: 520px;
     height: 310px;
     display: flex;
     justify-content: center;
     align-items: center;
   }
   
   .globe-earth-img {
     width: 100%;
     height: 100%;
     object-fit: contain;
     filter: drop-shadow(0 0 40px rgba(0, 180, 216, 0.35));
     user-select: none;
     pointer-events: none;
   }
   
   .globe-ambient-glow {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 280px;
     height: 280px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(14, 165, 233, 0.18) 0%, transparent 70%);
     pointer-events: none;
     z-index: 1;
   }
   
   /* Floating Live Interactive Pins */
   .globe-live-pin {
     position: absolute;
     display: flex;
     flex-direction: column;
     align-items: center;
     cursor: pointer;
     z-index: 10;
     transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
   }
   
   .globe-live-pin:hover {
     transform: translateY(-4px) scale(1.05);
   }
   
   .globe-live-pin.pin-london {
     top: 14%;
     right: 22%;
   }
   
   .globe-live-pin.pin-newyork {
     top: 45%;
     left: 12%;
   }
   
   .globe-live-pin.pin-tokyo {
     top: 55%;
     right: 8%;
   }
   
   .globe-pin-card {
     display: flex;
     align-items: center;
     gap: 8px;
     background: rgba(9, 16, 33, 0.9);
     backdrop-filter: blur(14px);
     -webkit-backdrop-filter: blur(14px);
     border: 1px solid rgba(59, 130, 246, 0.4);
     border-radius: 9999px;
     padding: 5px 12px 5px 8px;
     box-shadow: 0 6px 24px rgba(0, 0, 0, 0.65), 0 0 16px rgba(37, 99, 235, 0.35);
   }
   
   .pin-flag-svg {
     width: 20px;
     height: 20px;
     border-radius: 50%;
     box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
   }
   
   .pin-text-group {
     display: flex;
     align-items: center;
     gap: 8px;
   }
   
   .pin-city-name {
     color: #ffffff;
     font-size: 0.82rem;
     font-weight: 600;
     letter-spacing: -0.01em;
   }
   
   .pin-latency-tag {
     color: #10b981;
     font-size: 0.72rem;
     font-weight: 700;
     background: rgba(16, 185, 129, 0.14);
     border: 1px solid rgba(16, 185, 129, 0.3);
     padding: 1px 6px;
     border-radius: 6px;
     font-family: var(--font-mono);
   }
   
   .pin-beacon {
     position: relative;
     width: 10px;
     height: 10px;
     margin-top: 4px;
   }
   
   .beacon-center {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: #38bdf8;
     box-shadow: 0 0 8px #38bdf8;
   }
   
   .beacon-wave {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 14px;
     height: 14px;
     border-radius: 50%;
     border: 1.5px solid #38bdf8;
     animation: pulseBeacon 2s infinite cubic-bezier(0, 0.2, 0.8, 1);
   }
   
   @keyframes pulseBeacon {
     0% {
       transform: translate(-50%, -50%) scale(0.6);
       opacity: 1;
     }
     100% {
       transform: translate(-50%, -50%) scale(2.2);
       opacity: 0;
     }
   }
   
   /* ==========================================================================
      LOCATIONS TOOLBAR: REGION PILLS & SEARCH / FILTERS
      ========================================================================== */
   .locations-filter-toolbar {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin: 20px 0 22px 0;
     gap: 16px;
     flex-wrap: wrap;
   }
   
   .region-pill-selector {
     display: flex;
     align-items: center;
     gap: 8px;
     flex-wrap: wrap;
   }
   
   .region-filter-tab {
     background: rgba(12, 20, 39, 0.75);
     border: 1px solid rgba(255, 255, 255, 0.08);
     border-radius: 9999px;
     padding: 8px 18px;
     font-size: 0.84rem;
     font-weight: 500;
     color: #8da2c0;
     cursor: pointer;
     transition: all 0.2s ease;
     user-select: none;
   }
   
   .region-filter-tab:hover {
     color: #ffffff;
     border-color: rgba(59, 130, 246, 0.4);
     background: rgba(20, 35, 65, 0.85);
   }
   
   .region-filter-tab.active {
     background: linear-gradient(135deg, #1b53e4 0%, #2563eb 100%);
     border-color: #3b82f6;
     color: #ffffff;
     font-weight: 600;
     box-shadow: 0 4px 18px rgba(27, 83, 228, 0.5);
   }
   
   .locations-search-controls {
     display: flex;
     align-items: center;
     gap: 10px;
   }
   
   .loc-search-input-box {
     position: relative;
     width: 250px;
   }
   
   .loc-search-input-box i {
     position: absolute;
     left: 14px;
     top: 50%;
     transform: translateY(-50%);
     color: #64748b;
     font-size: 0.85rem;
     pointer-events: none;
   }
   
   .loc-search-input-box input {
     width: 100%;
     background: rgba(12, 20, 39, 0.85);
     border: 1px solid rgba(255, 255, 255, 0.09);
     border-radius: 9999px;
     padding: 8px 16px 8px 36px;
     color: #ffffff;
     font-size: 0.82rem;
     outline: none;
     transition: all 0.2s ease;
   }
   
   .loc-search-input-box input:focus {
     border-color: #3b82f6;
     background: rgba(16, 28, 56, 0.95);
     box-shadow: 0 0 12px rgba(59, 130, 246, 0.3);
   }
   
   .loc-search-input-box input::placeholder {
     color: #64748b;
   }
   
   .btn-loc-filter-toggle {
     width: 38px;
     height: 38px;
     border-radius: 10px;
     background: rgba(12, 20, 39, 0.85);
     border: 1px solid rgba(255, 255, 255, 0.09);
     color: #8da2c0;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: all 0.2s ease;
   }
   
   .btn-loc-filter-toggle:hover {
     color: #ffffff;
     border-color: #3b82f6;
     background: rgba(20, 35, 65, 0.9);
   }
   
   /* ==========================================================================
      6 PRESTIGE COUNTRY CARDS (EXACT TO REFERENCE SCREENSHOT)
      ========================================================================== */
   .prestige-locations-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 20px;
     margin-bottom: 40px;
   }
   
   @media (max-width: 1200px) {
     .prestige-locations-grid {
       grid-template-columns: repeat(2, 1fr);
     }
   }
   
   @media (max-width: 768px) {
     .prestige-locations-grid {
       grid-template-columns: 1fr;
     }
   }
   
   .prestige-country-card {
     background: linear-gradient(180deg, #0d152a 0%, #080e1c 100%);
     border: 1px solid rgba(35, 60, 105, 0.5);
     border-radius: 16px;
     padding: 18px;
     display: flex;
     flex-direction: column;
     transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
     position: relative;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
   }
   
   .prestige-country-card:hover {
     transform: translateY(-4px);
     border-color: rgba(59, 130, 246, 0.6);
     box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5), 0 0 24px rgba(30, 86, 237, 0.22);
   }
   
   .card-header-line {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 6px;
   }
   
   .country-identity {
     display: flex;
     align-items: center;
     gap: 10px;
   }
   
   .flag-icon-container {
     width: 32px;
     height: 22px;
     border-radius: 4px;
     overflow: hidden;
     box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
   }
   
   .country-flag-svg {
     width: 100%;
     height: 100%;
     display: block;
   }
   
   .country-name-title {
     color: #ffffff;
     font-size: 1.15rem;
     font-weight: 700;
     letter-spacing: -0.01em;
     margin: 0;
   }
   
   .latency-indicator {
     font-size: 0.74rem;
     font-weight: 700;
     padding: 3px 10px;
     border-radius: 9999px;
     font-family: var(--font-mono);
     letter-spacing: 0.02em;
   }
   
   .green-latency {
     background: rgba(16, 185, 129, 0.12);
     border: 1px solid rgba(16, 185, 129, 0.35);
     color: #10b981;
   }
   
   .country-city-description {
     color: #7d92af;
     font-size: 0.8rem;
     line-height: 1.4;
     margin-bottom: 12px;
     min-height: 34px;
   }
   
   .skyline-photo-frame {
     width: 100%;
     height: 125px;
     border-radius: 10px;
     overflow: hidden;
     position: relative;
     margin-bottom: 12px;
     border: 1px solid rgba(255, 255, 255, 0.08);
   }
   
   .skyline-photo-img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
     transition: transform 0.45s ease;
   }
   
   .prestige-country-card:hover .skyline-photo-img {
     transform: scale(1.05);
   }
   
   .skyline-edge-vignette {
     position: absolute;
     inset: 0;
     background: linear-gradient(180deg, rgba(7, 12, 24, 0.05) 0%, rgba(7, 12, 24, 0.35) 100%);
     pointer-events: none;
   }
   
   .card-specs-row {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 8px 2px 14px 2px;
     gap: 6px;
   }
   
   .spec-cell {
     display: flex;
     align-items: center;
     gap: 5px;
     color: #94a3b8;
     font-size: 0.74rem;
     white-space: nowrap;
   }
   
   .spec-cell i {
     color: #60a5fa;
     font-size: 0.85rem;
   }
   
   .spec-cell strong {
     color: #f1f5f9;
     font-weight: 600;
   }
   
   .card-action-footer {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-top: auto;
   }
   
   .btn-node-connect {
     flex: 1;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 6px;
     background: linear-gradient(135deg, #1b53e4 0%, #2563eb 50%, #3b82f6 100%);
     color: #ffffff;
     border: none;
     border-radius: 10px;
     padding: 9px 16px;
     font-size: 0.86rem;
     font-weight: 600;
     cursor: pointer;
     box-shadow: 0 4px 14px rgba(27, 83, 228, 0.4);
     transition: all 0.2s ease;
   }
   
   .btn-node-connect:hover {
     transform: translateY(-1px);
     box-shadow: 0 6px 20px rgba(27, 83, 228, 0.6);
     filter: brightness(1.1);
   }
   
   .btn-node-connect:active {
     transform: translateY(1px);
   }
   
   .btn-node-favorite {
     width: 38px;
     height: 38px;
     border-radius: 10px;
     background: rgba(12, 20, 39, 0.8);
     border: 1px solid rgba(255, 255, 255, 0.1);
     color: #94a3b8;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: all 0.2s ease;
     font-size: 0.95rem;
   }
   
   .btn-node-favorite:hover {
     color: #f59e0b;
     border-color: rgba(245, 158, 11, 0.4);
     background: rgba(245, 158, 11, 0.1);
   }
   
   .btn-node-favorite.active {
     color: #f59e0b;
     border-color: rgba(245, 158, 11, 0.5);
     background: rgba(245, 158, 11, 0.15);
   }