/* ==========================================================================
   Theme 6: Connection Universe (Living Connection / Cosmic Telecom)
   Stitch Design: "Connection Universe: Single-Page Portal"
   Deep Space Canvas, Central Glowing Connection Orb, Cyan/Violet Luminous Lines
   ========================================================================== */

:root,
html[data-theme-style="connection-universe"] {
    --theme-name: "connection-universe";

    /* Deep Cosmic Space Substrates */
    --bg-canvas: #040711;
    --bg-surface: #060a17;
    --bg-surface-lowest: #02040a;
    --bg-surface-low: #0a1024;
    --bg-surface-container: #101935;
    --bg-surface-high: #162248;
    --bg-surface-highest: #1f3060;

    /* Luminous Photonic Accents */
    --cyan-primary: #00f2fe;
    --cyan-glow: #00f2fe;
    --cyan-secondary: #38bdf8;
    --purple-glow: #c084fc;
    --violet-accent: #a855f7;
    --gold-accent: #f59e0b;
    --emerald-status: #10b981;

    /* Semantic Status Indicators */
    --status-active: #10b981;
    --status-active-bg: rgba(16, 185, 129, 0.15);
    --status-active-border: rgba(16, 185, 129, 0.35);

    --status-warning: #f59e0b;
    --status-warning-bg: rgba(245, 158, 11, 0.15);
    --status-warning-border: rgba(245, 158, 11, 0.35);

    --status-danger: #ef4444;
    --status-danger-bg: rgba(239, 68, 68, 0.15);
    --status-danger-border: rgba(239, 68, 68, 0.35);

    /* Text */
    --text-primary: #f1f5f9;
    --text-contrast: #ffffff;
    --text-muted: #94a3b8;
    --text-dim: #64748b;

    /* Cosmic Glassmorphism */
    --border-card: 1px solid rgba(56, 189, 248, 0.18);
    --border-accent: 1px solid rgba(0, 242, 254, 0.38);
    --card-bg: linear-gradient(135deg, rgba(14, 23, 47, 0.72) 0%, rgba(8, 14, 29, 0.85) 100%);
    --card-bg-subtle: rgba(10, 16, 36, 0.85);
    --backdrop-blur: blur(18px);
    --card-shadow: 0 16px 36px 0 rgba(0, 0, 0, 0.55), inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
    
    /* Cosmic Glow Effects */
    --glow-cyan: 0 0 35px -5px rgba(0, 242, 254, 0.45);
    --glow-purple: 0 0 35px -5px rgba(192, 132, 252, 0.45);
    --glow-gold: 0 0 25px -5px rgba(245, 158, 11, 0.45);

    /* Radii */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* Typography */
    --font-heading: 'Plus Jakarta Sans', sans-serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
}

/* ==========================================================================
   Background Atmosphere & Starfield
   ========================================================================== */
html[data-theme-style="connection-universe"] body {
    background-color: transparent !important;
    background-image: none !important;
    color: var(--text-primary);
    font-family: var(--font-body);
    position: relative;
}

html[data-theme-style="connection-universe"] body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: 
        radial-gradient(circle at 50% 10%, rgba(0, 229, 255, 0.12) 0%, rgba(14, 116, 144, 0.08) 28%, transparent 55%),
        radial-gradient(circle at 85% 25%, rgba(168, 85, 247, 0.15) 0%, rgba(147, 51, 234, 0.06) 35%, transparent 60%),
        radial-gradient(circle at 15% 70%, rgba(56, 189, 248, 0.09) 0%, transparent 48%),
        radial-gradient(circle at 80% 85%, rgba(99, 102, 241, 0.08) 0%, transparent 45%),
        radial-gradient(1.2px 1.2px at 15% 15%, rgba(255, 255, 255, 0.75) 1px, transparent 0),
        radial-gradient(1.5px 1.5px at 38% 70%, rgba(147, 197, 253, 0.65) 1px, transparent 0),
        radial-gradient(1.2px 1.2px at 68% 22%, rgba(233, 213, 255, 0.7) 1px, transparent 0),
        radial-gradient(1.8px 1.8px at 84% 80%, rgba(255, 255, 255, 0.6) 1px, transparent 0),
        radial-gradient(1.4px 1.4px at 92% 12%, rgba(56, 189, 248, 0.75) 1px, transparent 0);
    background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 540px 540px, 540px 540px, 540px 540px, 540px 540px, 540px 540px;
    background-attachment: fixed;
    pointer-events: none;
    z-index: -2;
}

#network-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    opacity: 0.6;
}

/* ==========================================================================
   Header Styling
   ========================================================================== */
html[data-theme-style="connection-universe"] .lumina-header {
    background: rgba(6, 10, 23, 0.85);
    backdrop-filter: var(--backdrop-blur);
    border-bottom: 1px solid rgba(56, 189, 248, 0.15);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

html[data-theme-style="connection-universe"] .brand-logo-squircle {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    box-shadow: var(--glow-gold);
    color: #040711;
}

html[data-theme-style="connection-universe"] .brand-super {
    color: var(--cyan-primary);
    font-weight: 700;
    letter-spacing: 0.05em;
}

html[data-theme-style="connection-universe"] .session-beacon-pill {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.35);
    color: #34d399;
}

html[data-theme-style="connection-universe"] .floating-refresh-btn {
    background: rgba(6, 10, 23, 0.75);
    border: 1px solid rgba(0, 242, 254, 0.35);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 12px rgba(0, 242, 254, 0.2);
    color: #00f2fe;
}

html[data-theme-style="connection-universe"] .floating-refresh-btn:hover {
    background: rgba(6, 10, 23, 0.92);
    border-color: rgba(0, 242, 254, 0.7);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.65), 0 0 20px rgba(0, 242, 254, 0.4);
    color: #ffffff;
}

/* ==========================================================================
   General Cards & Containers (Borderless & Transparent)
   ========================================================================== */
html[data-theme-style="connection-universe"] .glass-lumina,
html[data-theme-style="connection-universe"] .glass-card,
html[data-theme-style="connection-universe"] .subscriber-hero-card,
html[data-theme-style="connection-universe"] .telemetry-card,
html[data-theme-style="connection-universe"] .portal-card,
html[data-theme-style="connection-universe"] .quota-card,
html[data-theme-style="connection-universe"] .invoicing-card,
html[data-theme-style="connection-universe"] .diagnostics-card,
html[data-theme-style="connection-universe"] .hero-package-box,
html[data-theme-style="connection-universe"] .metric-box,
html[data-theme-style="connection-universe"] .smart-advisory-box,
html[data-theme-style="connection-universe"] .payment-card,
html[data-theme-style="connection-universe"] .diagnostics-row {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Main Subscription Intelligence Card Shell (#si-card-root) Visual Specifications */
html[data-theme-style="connection-universe"] #si-card-root,
#si-card-root {
    position: relative !important;
    overflow: visible !important;
    background: var(--si-card-bg, transparent) !important;
    backdrop-filter: var(--si-card-backdrop-blur, none) !important;
    -webkit-backdrop-filter: var(--si-card-backdrop-blur, none) !important;
    border-style: var(--si-card-border-style, dotted) !important;
    border-width: var(--si-card-border-width, 1.5px) !important;
    border-color: var(--si-card-border-color, rgba(124, 119, 255, 0.65)) !important;
    border-radius: var(--si-card-border-radius, var(--radius-xl, 1rem)) !important;
    box-shadow: none !important;
}

html[data-theme-style="connection-universe"] #si-card-root::before,
#si-card-root::before {
    display: none !important;
}

/* Traffic History Card Shell (.history-analytics-card) Visual Specifications */
html[data-theme-style="connection-universe"] #history-analytics-card-root,
html[data-theme-style="connection-universe"] .history-analytics-card,
#history-analytics-card-root,
.history-analytics-card {
    position: relative !important;
    overflow: visible !important;
    background: var(--th-card-bg, transparent) !important;
    backdrop-filter: var(--th-card-backdrop-blur, none) !important;
    -webkit-backdrop-filter: var(--th-card-backdrop-blur, none) !important;
    border-style: var(--th-card-border-style, dotted) !important;
    border-width: var(--th-card-border-width, 1.5px) !important;
    border-color: var(--th-card-border-color, rgba(124, 119, 255, 0.65)) !important;
    border-radius: var(--th-card-border-radius, var(--radius-xl, 1rem)) !important;
    box-shadow: none !important;
}

html[data-theme-style="connection-universe"] #history-analytics-card-root::before,
html[data-theme-style="connection-universe"] .history-analytics-card::before,
#history-analytics-card-root::before,
.history-analytics-card::before {
    display: none !important;
}

html[data-theme-style="connection-universe"] #history-analytics-card-root:hover,
html[data-theme-style="connection-universe"] .history-analytics-card:hover,
#history-analytics-card-root:hover,
.history-analytics-card:hover {
    background: var(--th-card-bg, transparent) !important;
    border-style: var(--th-card-border-style, dotted) !important;
    border-width: var(--th-card-border-width, 1.5px) !important;
    border-color: var(--th-card-border-color, rgba(124, 119, 255, 0.65)) !important;
    box-shadow: none !important;
}

/* Hover Accent Reset */
html[data-theme-style="connection-universe"] .glass-card:hover,
html[data-theme-style="connection-universe"] .quota-card:hover,
html[data-theme-style="connection-universe"] .subscriber-hero-card:hover,
html[data-theme-style="connection-universe"] .payment-card:hover,
html[data-theme-style="connection-universe"] .telemetry-card:hover {
    background: transparent !important;
    border: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* Reset Hero Card Neon Glow */
html[data-theme-style="connection-universe"] .neon-glow-cyan {
    box-shadow: none !important;
}

/* ==========================================================================
   CONNECTION CORE (HERO FOCAL POINT)
   Stitch "Connection Universe: Single-Page Portal"
   ========================================================================== */
html[data-theme-style="connection-universe"] .connection-universe-core {
    position: relative;
    width: 100%;
    min-height: 520px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
    margin-bottom: 1.5rem;
    overflow: visible;
    background: transparent;
    border: none;
    border-radius: var(--radius-xl);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Pedestal Radial Glow */
.universe-pedestal-glow {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    max-width: 680px;
    height: 100px;
    background: radial-gradient(ellipse at center, rgba(0, 242, 254, 0.25) 0%, rgba(168, 85, 247, 0.15) 45%, transparent 75%);
    border-radius: 50%;
    filter: blur(24px);
    pointer-events: none;
    z-index: 1;
}

/* Orbital Rings Container */
.universe-orbital-container {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 2;
}

/* Outer Orbit Ring Cyan */
.universe-orbit-ring-1 {
    position: absolute;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    border: 1.5px solid rgba(0, 242, 254, 0.28);
    box-shadow: 0 0 24px rgba(0, 242, 254, 0.2);
    animation: universe-orbit-slow 24s linear infinite;
    scale: var(--universe-orbit-1-scale, 0.60);
    transition: border-color 0.8s ease, box-shadow 0.8s ease, border-width 0.8s ease;
}

/* Inner Orbit Ring Purple */
.universe-orbit-ring-2 {
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    border: 1.5px solid rgba(168, 85, 247, 0.32);
    box-shadow: 0 0 24px rgba(168, 85, 247, 0.22);
    animation: universe-orbit-reverse 30s linear infinite;
    scale: var(--universe-orbit-2-scale, 0.72);
    transition: border-color 0.8s ease, box-shadow 0.8s ease, border-width 0.8s ease;
}

/* Ground Pedestal Rings */
.universe-pedestal-ring-1 {
    position: absolute;
    bottom: 2.75rem;
    width: 320px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(0, 242, 254, 0.4);
    background: radial-gradient(ellipse at center, rgba(0, 242, 254, 0.15) 0%, transparent 70%);
}

.universe-pedestal-ring-2 {
    position: absolute;
    bottom: 2.25rem;
    width: 390px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(168, 85, 247, 0.25);
    background: radial-gradient(ellipse at center, rgba(168, 85, 247, 0.10) 0%, transparent 70%);
}

/* Central 3D Connection Orb Wrapper */
.universe-orb-wrapper {
    position: relative;
    width: 270px;
    height: 270px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: var(--universe-orb-margin-top, 0px);
    margin-bottom: var(--universe-orb-margin-bottom, 0px);
}

/* Central 3D Connection Orb */
.universe-orb-sphere {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(56, 189, 248, 0.42) 0%, rgba(147, 51, 234, 0.30) 40%, rgba(4, 7, 17, 0.88) 85%);
    border: none !important;
    box-shadow: inset 0 0 45px rgba(0, 242, 254, 0.35),
                inset -10px -15px 40px rgba(168, 85, 247, 0.4),
                0 0 55px rgba(0, 242, 254, 0.35),
                0 0 90px rgba(168, 85, 247, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 0.5rem;
    text-align: center;
    animation: universe-core-pulse 6s ease-in-out infinite;
    transition: transform 0.3s ease;
}

/* Speed-Driven Animated Wavy Globe Border Overlay */
.universe-orb-wavy-border {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    z-index: 12;
}

#universe-orb-wavy-path {
    filter: drop-shadow(0 0 5px rgba(0, 242, 254, 0.55));
}

/* Inner Core Moving Circle / Pulse Ring */
.universe-orb-inner-ring {
    position: absolute;
    inset: 7px;
    border-radius: 50%;
    border: 1.5px solid rgba(0, 242, 254, 0.35);
    box-shadow: 0 0 12px rgba(0, 242, 254, 0.25), inset 0 0 8px rgba(0, 242, 254, 0.15);
    animation: universe-inner-ring-pulse 4s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

/* Inner Core Gloss Reflection */
.universe-orb-gloss {
    position: absolute;
    top: 14px;
    left: 28px;
    width: 70px;
    height: 35px;
    background: rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    filter: blur(3px);
    transform: rotate(-45deg);
    pointer-events: none;
    z-index: 2;
}

/* In-Orb Content Layering */
.universe-orb-status-pill,
.universe-orb-telemetry-dl,
.universe-orb-telemetry-ul {
    position: relative;
    z-index: 3;
}

/* Inside Orb: Connected Badge */
.universe-orb-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2.5px 10px;
    border-radius: 9999px;
    background: rgba(4, 30, 20, 0.85);
    border: 1px solid rgba(16, 185, 129, 0.45);
    color: #34d399;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.3);
}

.universe-orb-ping-dot {
    width: 6.5px;
    height: 6.5px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 8px #10b981;
    animation: universe-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* Inside Orb: Download Readout */
.universe-orb-telemetry-dl {
    margin: 12px 0 2px;
}

.universe-orb-telemetry-dl .dl-value-row {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    color: #00f2fe;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.75rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-shadow: 0 0 16px rgba(0, 242, 254, 0.7);
}

/* Inside Orb: Upload Readout */
.universe-orb-telemetry-ul {
    margin: 0 0 2px;
}

.universe-orb-telemetry-ul .ul-value-row {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    color: #c084fc;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.18rem;
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-shadow: 0 0 14px rgba(192, 132, 252, 0.7);
}

/* Inside Orb: Section Dividers */
.universe-orb-divider {
    width: 120px;
    height: 1px;
    background: rgba(0, 242, 254, 0.22);
    margin: 3px 0;
}

/* ==========================================================================
   Daily Traffic Consumption Progress Ring & In-Globe HUD
   ========================================================================== */
.universe-daily-ring-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    overflow: visible;
}

/* Daily Percentage HUD Badge (Under DAILY CONSUMPTION) */
.universe-daily-hud-badge {
    position: static;
    transform: none;
    margin-top: 3px;
    z-index: 5;
    text-align: center;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.daily-hud-pct {
    font-family: var(--font-mono);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--cyan-primary, #00f2fe);
    text-shadow: 0 0 10px rgba(0, 242, 254, 0.75), 0 0 20px rgba(0, 242, 254, 0.35);
    line-height: 1;
    display: block;
}

.daily-hud-label {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    font-weight: 700;
    color: var(--text-muted, #94a3b8);
    letter-spacing: 0.08em;
    display: block;
    margin-top: 2px;
    text-transform: uppercase;
}

/* Lower Daily Consumption Readout */
.universe-orb-daily-consumption {
    position: relative;
    z-index: 3;
    margin-top: 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.daily-consumption-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-family: var(--font-mono);
}

.daily-storage-icon {
    font-size: 14px;
    color: var(--cyan-primary, #00f2fe);
    filter: drop-shadow(0 0 4px rgba(0, 242, 254, 0.65));
    display: inline-flex;
}

.daily-used-digits {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.01em;
}

.daily-divider {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.40);
    margin: 0 1px;
}

.daily-limit-digits {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--cyan-primary, #00f2fe);
    text-shadow: 0 0 8px rgba(0, 242, 254, 0.5);
    letter-spacing: -0.01em;
}

.daily-consumption-caption {
    font-size: 7.5px;
    font-weight: 600;
    color: #34d399;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 2px;
}

/* Pedestal Ground Reflection */
.universe-orb-base-shadow {
    width: 180px;
    height: 12px;
    margin-top: 14px;
    background: radial-gradient(ellipse at center, rgba(0, 242, 254, 0.5) 0%, rgba(168, 85, 247, 0.3) 40%, transparent 75%);
    border-radius: 50%;
    filter: blur(5px);
    z-index: 5;
}

/* Floating Satellite Cards (Desktop Mode) */
.universe-floating-card {
    display: none;
    position: absolute;
    z-index: 15;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    padding: 0.5rem 0.75rem;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    animation: universe-float-y 6s ease-in-out infinite;
}

@media (min-width: 992px) {
    .universe-floating-card {
        display: flex;
    }
}

.universe-card-top-left {
    top: 2rem;
    left: 2rem;
    width: 250px;
    border: none;
    animation-delay: 0s;
}

.universe-card-top-right {
    top: 2rem;
    right: 2rem;
    width: 250px;
    border: none;
    animation-delay: 1.5s;
}

.universe-card-bottom-left {
    bottom: 2rem;
    left: 2.5rem;
    width: 230px;
    border: none;
    animation-delay: 2.5s;
}

.universe-card-bottom-right {
    bottom: 2rem;
    right: 2.5rem;
    width: 230px;
    border: none;
    animation-delay: 3.5s;
}

/* Floating Card Content */
.universe-float-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.universe-float-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.universe-float-label {
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.universe-float-value {
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
}

.universe-float-sub {
    font-size: 10px;
    color: var(--cyan-secondary);
    margin-top: 1px;
}

/* ==========================================================================
   Telemetry Card & Oscilloscope
   ========================================================================== */
html[data-theme-style="connection-universe"] .telemetry-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

html[data-theme-style="connection-universe"] .telemetry-title-text {
    color: #ffffff;
    font-weight: 800;
}

html[data-theme-style="connection-universe"] .telemetry-title-text::before {
    content: "✦ ";
    color: var(--cyan-primary);
}

/* Metric Boxes */
html[data-theme-style="connection-universe"] .metric-box.dl-box,
html[data-theme-style="connection-universe"] .metric-box.ul-box {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

html[data-theme-style="connection-universe"] .dl-box .metric-number {
    color: #00f2fe;
    text-shadow: 0 0 12px rgba(0, 242, 254, 0.5);
}

html[data-theme-style="connection-universe"] .ul-box .metric-number {
    color: #c084fc;
    text-shadow: 0 0 12px rgba(192, 132, 252, 0.5);
}

/* Velocity LED Meter */
html[data-theme-style="connection-universe"] .velocity-meter-wrapper {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0.5rem 0.25rem 0.75rem;
    margin-bottom: 1.25rem;
}

html[data-theme-style="connection-universe"] .led-segment {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
}

/* Oscilloscope Container */
/* Oscilloscope Container */
html[data-theme-style="connection-universe"] .oscilloscope-container {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Floating Real-Time Oscilloscope (Borderless & Transparent above Subscriber Session) */
html[data-theme-style="connection-universe"] .floating-oscilloscope {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ==========================================================================
   Bandwidth & Quota Sections
   ========================================================================== */
html[data-theme-style="connection-universe"] .quota-card,
html[data-theme-style="connection-universe"] .quota-card:hover {
    background: transparent !important;
    border: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* Gradient Progress Bars */
html[data-theme-style="connection-universe"] #val-today-progress-fill {
    background: linear-gradient(90deg, #00f2fe 0%, #10b981 100%) !important;
    box-shadow: 0 0 12px rgba(0, 242, 254, 0.4);
}

html[data-theme-style="connection-universe"] #val-quota-progress-fill {
    background: linear-gradient(90deg, #3b82f6 0%, #00f2fe 50%, #c084fc 100%) !important;
    box-shadow: 0 0 14px rgba(192, 132, 252, 0.4);
}

/* Period Switcher */
html[data-theme-style="connection-universe"] .history-period-tab.active {
    background: linear-gradient(135deg, rgba(0, 242, 254, 0.2) 0%, rgba(168, 85, 247, 0.2) 100%);
    border-color: var(--cyan-primary);
    color: #ffffff;
    box-shadow: 0 0 14px rgba(0, 242, 254, 0.25);
}

/* ==========================================================================
   Quick Actions & Interactive Triggers
   ========================================================================== */
html[data-theme-style="connection-universe"] .btn-action-primary,
html[data-theme-style="connection-universe"] .btn-primary-lumina {
    background: linear-gradient(135deg, #00f2fe 0%, #06b6d4 100%);
    color: #040711;
    font-weight: 700;
    box-shadow: var(--glow-cyan);
    border: none;
    transition: all 0.2s ease;
}

html[data-theme-style="connection-universe"] .btn-action-primary:hover,
html[data-theme-style="connection-universe"] .btn-primary-lumina:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(0, 242, 254, 0.6);
}

html[data-theme-style="connection-universe"] .btn-action-secondary,
html[data-theme-style="connection-universe"] .btn-secondary-lumina {
    background: rgba(56, 189, 248, 0.08);
    border: 1px solid rgba(56, 189, 248, 0.3);
    color: var(--cyan-primary);
    transition: all 0.2s ease;
}

html[data-theme-style="connection-universe"] .btn-action-secondary:hover,
html[data-theme-style="connection-universe"] .btn-secondary-lumina:hover {
    background: rgba(56, 189, 248, 0.16);
    border-color: var(--cyan-primary);
}

/* ==========================================================================
   Keyframe Animations for Cosmic Effects
   ========================================================================== */
@keyframes universe-core-pulse {
    0%, 100% {
        filter: drop-shadow(0 0 35px rgba(0, 242, 254, 0.45)) drop-shadow(0 0 65px rgba(168, 85, 247, 0.25));
        transform: scale(1);
    }
    50% {
        filter: drop-shadow(0 0 55px rgba(0, 242, 254, 0.7)) drop-shadow(0 0 90px rgba(168, 85, 247, 0.4));
        transform: scale(1.02);
    }
}

@keyframes universe-inner-ring-pulse {
    0%, 100% {
        opacity: 0.9;
        transform: scale(1);
    }
    50% {
        opacity: 0.55;
        transform: scale(1.02);
    }
}

@keyframes universe-orbit-slow {
    0% { transform: rotate(0deg) scaleY(0.42); }
    100% { transform: rotate(360deg) scaleY(0.42); }
}

@keyframes universe-orbit-reverse {
    0% { transform: rotate(0deg) scaleY(0.38); }
    100% { transform: rotate(-360deg) scaleY(0.38); }
}

@keyframes universe-float-y {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-7px); }
}

@keyframes universe-ping {
    0% { transform: scale(1); opacity: 1; }
    75%, 100% { transform: scale(2.2); opacity: 0; }
}

/* ==========================================================================
   Mobile & Small Viewport Responsive Behavior
   ========================================================================== */
@media (max-width: 640px) {
    html[data-theme-style="connection-universe"] .connection-universe-core {
        min-height: 420px;
        padding: 1.75rem 1rem;
    }

    .universe-orb-wrapper {
        width: 220px;
        height: 220px;
        margin-top: var(--universe-orb-margin-top, 0px);
        margin-bottom: var(--universe-orb-margin-bottom, 0px);
    }

    .universe-orb-sphere {
        width: 100%;
        height: 100%;
        padding: 0.5rem;
    }

    .universe-orb-telemetry-dl .dl-value-row {
        font-size: 1.4rem;
    }

    .universe-orb-telemetry-ul .ul-value-row {
        font-size: 1.05rem;
    }

    .daily-hud-pct {
        font-size: 0.95rem;
    }

    .daily-hud-label {
        font-size: 0.5rem;
    }

    .daily-used-digits,
    .daily-limit-digits {
        font-size: 0.7rem;
    }

    .daily-storage-icon {
        font-size: 13px;
    }

    .daily-consumption-caption {
        font-size: 7px;
    }

    .universe-orbit-ring-1 {
        width: 320px;
        height: 320px;
    }

    .universe-orbit-ring-2 {
        width: 270px;
        height: 270px;
    }

    .universe-pedestal-ring-1 {
        width: 240px;
    }

    .universe-pedestal-ring-2 {
        width: 280px;
    }
}

/* ==========================================================================
   Satellite 2 (L22): Expiry Live Countdown & Expired Red Warning State
   ========================================================================== */
.universe-expiry-card.is-account-expired .expiry-days-label {
    color: #f87171 !important;
}

.expiry-date-sub.is-countdown,
.expiry-date-sub.is-expired {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.35rem !important;
    text-align: center !important;
    position: relative !important;
    white-space: nowrap !important;
    line-height: 1.15 !important;
    margin-top: var(--si-countdown-margin-top, 0px) !important;
    margin-bottom: var(--si-countdown-margin-bottom, 0px) !important;
}

/* Strictly suppress red expiry countdown during Temporary Access */
body.is-ta-active .expiry-date-sub,
html.is-ta-active .expiry-date-sub,
.is-ta-active .expiry-date-sub,
.is-ta-active #val-expiry-date-tag,
body.is-ta-active #val-expiry-date-tag,
html.is-ta-active #val-expiry-date-tag,
#si-status-indicator.si-status-ta ~ .expiry-date-sub,
#si-status-indicator.si-status-ta ~ #val-expiry-date-tag,
.connection-universe-core:has(.si-status-ta) .expiry-date-sub,
.connection-universe-core:has(.si-status-ta) #val-expiry-date-tag {
    display: none !important;
}

.expiry-warn-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
    line-height: 1;
    flex-shrink: 0;
}

.expiry-warn-icon {
    width: 14px;
    height: 14px;
    color: var(--si-countdown-color, #ff3355) !important;
    fill: currentColor;
    filter: var(--si-countdown-drop-shadow, drop-shadow(0 0 4px rgba(255, 51, 85, 0.85)) drop-shadow(0 0 8px rgba(255, 51, 85, 0.45)));
    animation: si-countdown-flash var(--si-countdown-flash-speed, 1.2s) ease-in-out infinite;
}

@keyframes si-countdown-flash {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.25;
        transform: scale(0.92);
    }
}

.expiry-countdown-digits {
    font-family: 'SF Mono', 'Fira Code', 'Roboto Mono', 'Cascadia Code', 'Consolas', monospace !important;
    font-size: var(--si-countdown-font-size, clamp(0.60rem, 7cqi, 0.74rem)) !important;
    font-weight: var(--si-countdown-font-weight, 700) !important;
    font-variant-numeric: tabular-nums !important;
    letter-spacing: var(--si-countdown-letter-spacing, 0.05em) !important;
    color: var(--si-countdown-color, #ff3355) !important;
    text-shadow: var(--si-countdown-text-shadow, 0 0 8px rgba(255, 51, 85, 0.85), 0 0 16px rgba(255, 51, 85, 0.4)) !important;
    line-height: 1.15;
}

.expiry-expired-text {
    font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif) !important;
    font-size: var(--si-countdown-font-size, clamp(0.58rem, 6.5cqi, 0.70rem)) !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    color: var(--si-countdown-color, #ff3355) !important;
    text-transform: uppercase !important;
    text-shadow: var(--si-countdown-text-shadow, 0 0 8px rgba(255, 51, 85, 0.85), 0 0 18px rgba(255, 51, 85, 0.5)) !important;
    line-height: 1.15;
    text-align: center !important;
}

.expiry-date-sub.is-countdown::after,
.expiry-date-sub.is-expired::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 130%;
    height: 170%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 51, 85, 0.12) 0%, rgba(255, 51, 85, 0) 70%);
    pointer-events: none;
    z-index: -1;
}