:root {
            --fd-glass-bg: rgba(255, 255, 255, 0.45);
            --fd-glass-border: rgba(255, 255, 255, 0.25);
            --fd-glass-text: #0b2214;
            --fd-glass-muted: #4d7a5b;
            --fd-glass-title: #146c3a;
            --fd-glass-accent: #ff6f00;
            --fd-glass-pill-bg: rgba(255, 255, 255, 0.55);
            --fd-shadow-elevated: 0 8px 32px 0 rgba(0, 0, 0, 0.08);
            --fd-radius-round: 24px;
        }

        /* Active Dark Mode Overrides (System Preference & Body/HTML Selectors) */
        @media (prefers-color-scheme: dark) {
            :root {
                --fd-glass-bg: rgba(15, 36, 24, 0.65);
                --fd-glass-border: rgba(255, 255, 255, 0.08);
                --fd-glass-text: #f3fff8;
                --fd-glass-muted: #8ab79a;
                --fd-glass-title: #4be08a;
                --fd-glass-accent: #ffb877;
                --fd-glass-pill-bg: rgba(15, 36, 24, 0.4);
                --fd-shadow-elevated: 0 12px 40px 0 rgba(0, 0, 0, 0.4);
            }
        }
        body.dark-mode :root, body.dark :root, html[data-theme="dark"] :root, [data-mode="dark"] :root {
            --fd-glass-bg: rgba(15, 36, 24, 0.65);
            --fd-glass-border: rgba(255, 255, 255, 0.08);
            --fd-glass-text: #f3fff8;
            --fd-glass-muted: #8ab79a;
            --fd-glass-title: #4be08a;
            --fd-glass-accent: #ffb877;
            --fd-glass-pill-bg: rgba(15, 36, 24, 0.4);
            --fd-shadow-elevated: 0 12px 40px 0 rgba(0, 0, 0, 0.4);
        }

        #fd-live-widget {
            position: fixed;
            z-index: 999999;
            display: flex;
            flex-direction: column;
            gap: 12px;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            touch-action: none; /* Prevents viewport scrolling on custom JS drags */
        }

        /* Screen Corner Alignments */
        .fd-pos-bottom-right { bottom: 24px; right: 24px; align-items: flex-end; }
        .fd-pos-bottom-left  { bottom: 24px; left: 24px; align-items: flex-start; }
        .fd-pos-top-right    { top: 24px; right: 24px; align-items: flex-end; flex-direction: column-reverse; }
        .fd-pos-top-left     { top: 24px; left: 24px; align-items: flex-start; flex-direction: column-reverse; }

        /* Floating Action Button (FAB) */
        #fd-widget-trigger {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background-color: var(--mtn-brand);
            border: none;
            box-shadow: 0 4px 16px rgba(0,0,0,0.15);
            cursor: pointer;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            outline: none;
            transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            user-select: none;
        }
        #fd-widget-trigger:hover {
            transform: scale(1.08);
        }
        #fd-widget-trigger:active {
            transform: scale(0.92);
        }
        .fd-btn-logo {
            font-weight: 900;
            font-size: 15px;
            color: #000;
            letter-spacing: -0.5px;
        }
        .fd-live-dot-pulse {
            position: absolute;
            top: 4px;
            right: 4px;
            width: 10px;
            height: 10px;
            background-color: #00ff95;
            border-radius: 50%;
            border: 1.5px solid #fff;
            animation: fdDotPulse 1.6s infinite;
        }

        /* Fintech Glassmorphism Card Style */
        .fd-glass-card {
            width: 320px;
            background: var(--fd-glass-bg);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            border: 1px solid var(--fd-glass-border);
            border-radius: var(--fd-radius-round);
            box-shadow: var(--fd-shadow-elevated);
            padding: 18px 20px;
            color: var(--fd-glass-text);
            box-sizing: border-box;
            display: none;
            opacity: 0;
            transform: translateY(15px) scale(0.94);
            transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s ease;
        }

        .fd-glass-card.fd-active {
            display: block;
            opacity: 1;
            transform: translateY(0) scale(1);
        }

        .fd-card-inner {
            position: relative;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        /* Card Close Button */
        .fd-close-btn {
            position: absolute;
            top: -6px;
            right: -6px;
            background: none;
            border: none;
            color: var(--fd-glass-muted);
            font-size: 20px;
            cursor: pointer;
            line-height: 1;
            padding: 4px;
            transition: color 0.2s;
        }
        .fd-close-btn:hover {
            color: var(--fd-glass-text);
        }

        /* Micro Components Inside Card */
        .fd-header {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .fd-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #00ff95;
            box-shadow: 0 0 8px #00ff95;
            animation: fdPulse 1.8s infinite;
            flex-shrink: 0;
        }
        .fd-title {
            font-size: 13px;
            font-weight: 700;
            color: var(--fd-glass-title);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .fd-bundle-row {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            gap: 8px;
            margin-top: 2px;
        }
        .fd-bundle {
            font-size: 18px;
            font-weight: 800;
        }
        .fd-recipient {
            font-family: monospace;
            font-size: 14px;
            color: var(--fd-glass-muted);
        }

        .fd-timeline {
            font-size: 12px;
            line-height: 1.4;
            color: var(--fd-glass-muted);
        }
        .fd-timeline strong {
            color: var(--fd-glass-text);
        }

        .fd-took {
            font-size: 12px;
            color: var(--fd-glass-muted);
            font-weight: 600;
            border-top: 1px dashed rgba(255,255,255,0.15);
            padding-top: 6px;
        }

        .fd-estimate-pill {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            align-self: flex-start;
            padding: 6px 12px;
            border-radius: 999px;
            background: var(--fd-glass-pill-bg);
            color: var(--fd-glass-text);
            font-size: 11px;
            border: 1px solid var(--fd-glass-border);
        }
        .fd-clock {
            font-size: 12px;
            animation: fdTick 2s infinite ease-in-out;
            transform-origin: 50% 55%;
        }

        .fd-content {
            font-size: 13px;
            color: var(--fd-glass-muted);
            text-align: center;
            padding: 8px 0;
        }

        /* Crossfade layout update states */
        .fd-updating .fd-card-inner {
            opacity: 0;
            transform: translateY(-2px);
            transition: opacity 0.25s, transform 0.25s;
        }

        /* Animations */
        @keyframes fdPulse {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.2); opacity: 0.5; }
        }
        @keyframes fdDotPulse {
            0% { box-shadow: 0 0 0 0 rgba(0, 255, 149, 0.6); }
            100% { box-shadow: 0 0 0 8px rgba(0, 255, 149, 0); }
        }
        @keyframes fdTick {
            0%, 100% { transform: rotate(0deg); }
            25% { transform: rotate(-12deg); }
            75% { transform: rotate(12deg); }
        }

        @media (prefers-reduced-motion: reduce) {
            .fd-dot, .fd-live-dot-pulse, .fd-clock, .fd-glass-card {
                animation: none !important;
                transition: none !important;
            }
        }

        /* Responsive Mobile rules */
        @media (max-width: 480px) {
            #fd-live-widget {
                gap: 8px;
            }
            .fd-pos-bottom-right, .fd-pos-bottom-left { bottom: 16px; }
            .fd-pos-top-right, .fd-pos-top-left     { top: 16px; }
            .fd-pos-bottom-right, .fd-pos-top-right { right: 16px; }
            .fd-pos-bottom-left, .fd-pos-top-left   { left: 16px; }

            .fd-glass-card {
                width: 290px;
                padding: 14px 16px;
            }
            .fd-bundle { font-size: 16px; }
            .fd-recipient { font-size: 13px; }
        }