/* ==========================================================================
   NETSYNQ HOMEPAGE DEDICATED STYLESHEET (home.css)
   Dual-Theme Compatible | Feature Mockups, Interactive Visuals & 3D Panes
   ========================================================================== */

/* --- Style Section 1 --- */
.disconnected-apps-3d-panel {
                            background: var(--glass-surface);
                            border: 1px solid var(--glass-border);
                            backdrop-filter: blur(24px);
                            -webkit-backdrop-filter: blur(24px);
                            box-shadow: 0 25px 60px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.1);
                        }

                        .ambient-light-sphere-1 {
                            position: absolute;
                            top: -60px;
                            right: -60px;
                            width: 220px;
                            height: 220px;
                            background: radial-gradient(circle, rgba(14, 165, 233, 0.22) 0%, rgba(99, 102, 241, 0.1) 40%, transparent 70%);
                            filter: blur(30px);
                            pointer-events: none;
                            animation: ambientPulse 4s ease-in-out infinite alternate;
                        }

                        .ambient-light-sphere-2 {
                            position: absolute;
                            bottom: -60px;
                            left: -60px;
                            width: 200px;
                            height: 200px;
                            background: radial-gradient(circle, rgba(239, 68, 68, 0.15) 0%, transparent 70%);
                            filter: blur(30px);
                            pointer-events: none;
                        }

                        @keyframes ambientPulse {
                            0% { transform: scale(0.9) translate(0, 0); opacity: 0.7; }
                            100% { transform: scale(1.15) translate(-10px, 10px); opacity: 1; }
                        }

                        .cyber-status-badge {
                            background: rgba(239, 68, 68, 0.08);
                            border: 1px solid rgba(239, 68, 68, 0.3);
                            box-shadow: 0 0 15px rgba(239, 68, 68, 0.15);
                        }

                        .pulse-signal-dot {
                            width: 8px;
                            height: 8px;
                            background: #ff4d4d;
                            border-radius: 50%;
                            box-shadow: 0 0 10px #ff4d4d;
                            animation: signalPulse 1.8s ease-in-out infinite;
                        }

                        @keyframes signalPulse {
                            0% { transform: scale(0.9); opacity: 0.7; box-shadow: 0 0 5px #ff4d4d; }
                            50% { transform: scale(1.35); opacity: 1; box-shadow: 0 0 15px #ff4d4d, 0 0 25px rgba(255, 77, 77, 0.5); }
                            100% { transform: scale(0.9); opacity: 0.7; box-shadow: 0 0 5px #ff4d4d; }
                        }

                        .disconnected-app-card-wrapper {
                            perspective: 1000px;
                            height: 100%;
                        }

                        .disconnected-app-card-3d {
                            display: block;
                            height: 100%;
                            text-decoration: none !important;
                            position: relative;
                            border-radius: 18px;
                        }

                        .disconnected-app-card-inner {
                            background: var(--bg-accent);
                            border: 1px solid var(--glass-border);
                            border-radius: 18px;
                            padding: 14px 16px;
                            display: flex;
                            align-items: center;
                            gap: 13px;
                            position: relative;
                            overflow: hidden;
                            transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
                                        border-color 0.35s ease, 
                                        box-shadow 0.35s ease, 
                                        background-color 0.35s ease;
                            height: 100%;
                            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
                        }

                        /* Shiny Sweep Overlay */
                        .disconnected-app-card-inner::after {
                            content: '';
                            position: absolute;
                            top: -50%;
                            left: -50%;
                            width: 200%;
                            height: 200%;
                            background: linear-gradient(60deg, transparent 40%, rgba(255, 255, 255, 0.1) 50%, transparent 60%);
                            transform: rotate(25deg) translateY(-100%);
                            transition: transform 0.65s ease;
                            pointer-events: none;
                        }

                        .disconnected-app-card-3d:hover .disconnected-app-card-inner {
                            border-color: rgba(14, 165, 233, 0.55);
                            box-shadow: 0 18px 38px rgba(14, 165, 233, 0.22), 0 0 25px rgba(14, 165, 233, 0.15);
                            background: var(--glass-surface);
                            transform: translateY(-4px);
                        }

                        .disconnected-app-card-3d:hover .disconnected-app-card-inner::after {
                            transform: rotate(25deg) translateY(100%);
                        }

                        .disconnected-app-card-3d:hover .app-card-title-3d {
                            color: var(--neon-primary) !important;
                        }

                        .disconnected-app-card-3d:hover .app-card-logo-3d {
                            transform: scale(1.08);
                        }

                        .disconnected-app-card-3d:hover .app-card-arrow-3d {
                            transform: translateX(4px);
                            color: var(--neon-primary) !important;
                            opacity: 1 !important;
                        }

                        .app-card-logo-3d {
                            transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease;
                        }

                        .app-card-arrow-3d {
                            transition: transform 0.28s ease, color 0.28s ease, opacity 0.28s ease;
                        }

                        [data-theme="light"] .disconnected-app-card-3d:hover .app-card-arrow-3d {
                            transform: translateX(4px);
                            color: #0284c7 !important;
                            opacity: 1 !important;
                        }

/* --- Style Section 2 --- */
/* Premium Mockup Card Container (100% Stationary, Zero Corner Distortion) */
    .feature-showcase-box {
        width: 100%;
        position: relative;
    }

    .feature-mockup-frame {
        background: var(--glass-surface);
        border: 1px solid var(--glass-border);
        border-radius: 20px;
        padding: 22px;
        position: relative;
        overflow: hidden;
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.12);
        transition: border-color 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
    }

    .feature-showcase-box:hover .feature-mockup-frame {
        border-color: rgba(14, 165, 233, 0.45);
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.12), 0 0 35px rgba(14, 165, 233, 0.12);
    }

    /* Ambient Glow Backdrops */
    .mockup-ambient-glow {
        position: absolute;
        width: 260px;
        height: 260px;
        border-radius: 50%;
        filter: blur(60px);
        opacity: 0.22;
        pointer-events: none;
        z-index: 0;
        animation: glowPulse 6s ease-in-out infinite alternate;
    }
    .glow-cyan { top: -50px; right: -40px; background: radial-gradient(circle, #00f2ff, #0284c7); }
    .glow-indigo { top: -50px; left: -40px; background: radial-gradient(circle, #6366f1, #3b82f6); }
    .glow-emerald { bottom: -50px; right: -40px; background: radial-gradient(circle, #10b981, #059669); }
    .glow-amber { top: -50px; right: -40px; background: radial-gradient(circle, #f59e0b, #d97706); }
    .glow-rose { bottom: -50px; left: -40px; background: radial-gradient(circle, #f43f5e, #e11d48); }

    @keyframes glowPulse {
        0% { transform: scale(0.92); opacity: 0.18; }
        100% { transform: scale(1.18); opacity: 0.32; }
    }

    /* macOS Window Chrome Header */
    .mockup-app-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 12px;
        margin-bottom: 16px;
        border-bottom: 1px solid var(--glass-border);
        position: relative;
        z-index: 2;
    }
    .mockup-app-dots {
        display: flex;
        align-items: center;
        gap: 6px;
    }
    .app-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        display: inline-block;
    }
    .dot-close { background: #ef4444; }
    .dot-min { background: #f59e0b; }
    .dot-max { background: #10b981; }

    .mockup-app-address-bar {
        font-family: var(--font-heading), monospace;
        font-size: 0.74rem;
        color: var(--text-dim);
        font-weight: 600;
        background: var(--bg-accent);
        padding: 4px 14px;
        border-radius: 20px;
        border: 1px solid var(--glass-border);
        display: flex;
        align-items: center;
        gap: 6px;
    }

    /* Floating Status Badges (Stationary with subtle hover elevation) */
    .mockup-floating-pill {
        position: absolute;
        background: var(--glass-surface);
        border: 1px solid var(--glass-border);
        border-radius: 14px;
        padding: 8px 14px;
        display: flex;
        align-items: center;
        gap: 8px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        z-index: 10;
        pointer-events: none;
    }
    .pill-top-right { top: 16px; right: 16px; }
    .pill-bottom-left { bottom: 16px; left: 16px; }

    /* ==========================================================================
       FEATURE 01: PINPOINT SYNCHRONIZED MULTI-TAB & LIVE STUDIO SHOWCASE
       ========================================================================== */
    .portfolio-workflow-stage {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 22px;
        box-shadow: 0 24px 60px -12px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(226, 232, 240, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.9);
        overflow: hidden;
        position: relative;
        height: 400px;
        min-height: 400px;
        max-height: 400px;
        display: flex;
        flex-direction: column;
        transition: border-color 0.35s ease, box-shadow 0.35s ease;
    }

    [data-theme="dark"] .portfolio-workflow-stage {
        background: #0b1120;
        border: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }

    /* Ambient Lighting Halos */
    .stage-ambient-aura {
        position: absolute;
        width: 320px;
        height: 320px;
        border-radius: 50%;
        filter: blur(90px);
        opacity: 0.22;
        pointer-events: none;
        z-index: 0;
        transition: background 0.5s ease;
    }
    .aura-top { top: -80px; right: -80px; background: #00f2ff; }
    .aura-bottom { bottom: -80px; left: -80px; background: #6366f1; }

    /* macOS Window Chrome Header */
    .stage-chrome-bar {
        background: rgba(248, 250, 252, 0.95);
        border-bottom: 1px solid #e2e8f0;
        padding: 10px 18px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        z-index: 10;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    [data-theme="dark"] .stage-chrome-bar {
        background: rgba(15, 23, 42, 0.95);
        border-color: rgba(255, 255, 255, 0.08);
    }

    .stage-dots {
        display: flex;
        align-items: center;
        gap: 7px;
    }
    .stage-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        display: inline-block;
        box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
    }
    .dot-red { background: #ef4444; }
    .dot-yellow { background: #f59e0b; }
    .dot-green { background: #10b981; }

    .stage-domain-pill {
        background: #ffffff;
        border: 1px solid #cbd5e1;
        border-radius: 20px;
        padding: 4px 16px;
        font-family: var(--font-heading), monospace;
        font-size: 0.72rem;
        font-weight: 700;
        color: #0f172a;
        display: flex;
        align-items: center;
        gap: 7px;
        box-shadow: 0 1px 4px rgba(0,0,0,0.04);
        transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }

    [data-theme="dark"] .stage-domain-pill {
        background: #0f172a;
        color: #f8fafc;
        border-color: rgba(255, 255, 255, 0.12);
        box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    }

    .stage-publish-btn {
        background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
        color: #ffffff;
        font-size: 0.7rem;
        font-weight: 700;
        padding: 5px 15px;
        border-radius: 9px;
        display: flex;
        align-items: center;
        gap: 6px;
        border: none;
        box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35);
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        cursor: pointer;
    }
    .stage-publish-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 18px rgba(2, 132, 199, 0.45);
    }
    .stage-publish-btn.is-published {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
        box-shadow: 0 0 22px rgba(16, 185, 129, 0.6) !important;
        color: #ffffff !important;
    }

    /* Live Portfolio Web Canvas (Clean Solid Studio Background - Zero Dots) */
    .stage-web-canvas {
        padding: 12px 18px 48px;
        background-color: #ffffff;
        height: 100%;
        min-height: 0;
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 10px;
        position: relative;
        z-index: 2;
        transition: background-color 0.45s ease;
        overflow: hidden;
    }

    [data-theme="dark"] .stage-web-canvas {
        background-color: #0b1120;
    }

    /* 3 Switchable Themes (Clean Solid Gradients/Tints) */
    .stage-web-canvas.theme-indigo {
        background-color: #f5f7ff;
    }
    [data-theme="dark"] .stage-web-canvas.theme-indigo {
        background-color: #0d1226;
    }

    .stage-web-canvas.theme-purple {
        background-color: #faf5ff;
    }
    [data-theme="dark"] .stage-web-canvas.theme-purple {
        background-color: #140e24;
    }

    .stage-web-canvas.theme-cyan {
        background-color: #f0fdf9;
    }
    [data-theme="dark"] .stage-web-canvas.theme-cyan {
        background-color: #06181e;
    }

    /* Website Navbar on Canvas (Frosted Glass Pill) */
    .canvas-navbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 6px 14px;
        background: rgba(255, 255, 255, 0.88);
        border: 1px solid rgba(226, 232, 240, 0.95);
        border-radius: 14px;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }

    [data-theme="dark"] .canvas-navbar {
        background: rgba(15, 23, 42, 0.82);
        border-color: rgba(255, 255, 255, 0.08);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }

    .canvas-brand {
        font-family: var(--font-heading);
        font-weight: 800;
        font-size: 0.88rem;
        letter-spacing: -0.01em;
        color: #0f172a;
        display: flex;
        align-items: center;
        gap: 7px;
    }

    [data-theme="dark"] .canvas-brand {
        color: #f8fafc;
    }

    .brand-icon-sq {
        width: 22px;
        height: 22px;
        border-radius: 7px;
        background: linear-gradient(135deg, #0284c7 0%, #6366f1 100%);
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.68rem;
        box-shadow: 0 2px 8px rgba(2, 132, 199, 0.35);
    }

    .canvas-nav-links {
        display: flex;
        align-items: center;
        gap: 6px;
        background: transparent !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
    }

    [data-theme="dark"] .canvas-nav-links {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    .canvas-tab-btn {
        background: transparent;
        border: none;
        font-size: 0.68rem;
        font-weight: 500;
        color: #64748b;
        padding: 4px 10px;
        border-radius: 7px;
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }

    [data-theme="dark"] .canvas-tab-btn {
        color: #94a3b8;
    }

    .canvas-tab-btn:hover {
        color: #0f172a;
        background: rgba(15, 23, 42, 0.05);
    }
    [data-theme="dark"] .canvas-tab-btn:hover {
        color: #ffffff;
        background: rgba(255, 255, 255, 0.08);
    }

    .canvas-tab-btn.active {
        background: #0f172a;
        color: #ffffff !important;
        font-weight: 600;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.2);
    }

    [data-theme="dark"] .canvas-tab-btn.active {
        background: #38bdf8;
        color: #0f172a !important;
        font-weight: 700;
        box-shadow: 0 2px 10px rgba(56, 189, 248, 0.35);
    }

    .canvas-tab-btn.sim-active-click {
        transform: scale(0.92);
    }

    /* Tab Panes Viewport (Centered Vertically with Zero Bottom Blank Space) */
    .canvas-tab-viewport {
        position: relative;
        flex: 1;
        height: 100%;
        min-height: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        overflow: hidden;
    }

    .canvas-tab-pane {
        display: none;
        opacity: 0;
        transform: translateY(8px);
        transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1), transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
        width: 100%;
    }

    .canvas-tab-pane.active {
        display: flex;
        flex-direction: column;
        justify-content: center;
        opacity: 1;
        transform: translateY(0);
    }

    /* Blank State Initial Preview */
    .canvas-blank-state {
        border: 1.5px dashed #cbd5e1;
        border-radius: 16px;
        padding: 44px 20px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: rgba(248, 250, 252, 0.75);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        transition: all 0.35s ease;
    }
    [data-theme="dark"] .canvas-blank-state {
        border-color: rgba(255, 255, 255, 0.12);
        background: rgba(15, 23, 42, 0.7);
    }
    .canvas-blank-state.is-hidden {
        display: none !important;
    }

    .blank-icon-glow {
        width: 48px;
        height: 48px;
        border-radius: 14px;
        background: rgba(2, 132, 199, 0.1);
        border: 1px solid rgba(2, 132, 199, 0.25);
        color: #0284c7;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.35rem;
        margin-bottom: 10px;
        box-shadow: 0 0 20px rgba(2, 132, 199, 0.15);
        animation: pulseAvail 2s infinite ease-in-out;
    }

    /* Home Content (Revealed on Edit Click - Perfectly Centered) */
    .canvas-home-content {
        display: none;
        opacity: 0;
        transform: translateY(6px);
        text-align: center;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        min-height: 0;
        transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .canvas-home-content.is-revealed {
        display: flex;
        opacity: 1;
        transform: translateY(0);
    }

    /* Availability Pill & Hero */
    .canvas-avail-pill {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: #f0fdf4;
        border: 1px solid #bbf7d0;
        color: #16a34a;
        font-size: 0.62rem;
        font-weight: 700;
        letter-spacing: 0.03em;
        padding: 3px 11px;
        border-radius: 999px;
    }
    [data-theme="dark"] .canvas-avail-pill {
        background: rgba(22, 163, 74, 0.15);
        border-color: rgba(34, 197, 94, 0.35);
        color: #4ade80;
    }

    .pulse-dot {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #16a34a;
        display: inline-block;
        animation: pulseAvail 1.5s infinite;
    }
    @keyframes pulseAvail {
        0%, 100% { opacity: 1; transform: scale(1); }
        50% { opacity: 0.4; transform: scale(1.35); }
    }

    .canvas-hero-title {
        font-family: var(--font-heading);
        font-weight: 800;
        font-size: 1.15rem;
        line-height: 1.35;
        letter-spacing: -0.02em;
        color: #0f172a;
        margin-bottom: 6px;
        text-align: center;
    }

    [data-theme="dark"] .canvas-hero-title {
        color: #ffffff;
    }

    .sim-typed-text {
        color: #0284c7;
        font-weight: 800;
        transition: color 0.3s ease;
    }
    [data-theme="dark"] .sim-typed-text {
        color: #38bdf8;
    }

    .sim-type-cursor {
        display: inline-block;
        font-weight: 300;
        color: #0284c7;
        animation: cursorBlink 0.9s infinite;
    }
    @keyframes cursorBlink {
        0%, 100% { opacity: 1; }
        50% { opacity: 0; }
    }

    .canvas-hero-desc {
        font-size: 0.72rem;
        color: #64748b;
        line-height: 1.55;
        max-width: 440px;
        margin: 0 auto 14px;
        text-align: center;
    }
    [data-theme="dark"] .canvas-hero-desc {
        color: #94a3b8;
    }

    /* Seamless Stat Metrics (Zero Box inside Box) */
    .canvas-stat-metric {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .canvas-stat-num {
        font-family: var(--font-heading);
        font-weight: 800;
        font-size: 1.05rem;
        color: #0f172a;
        line-height: 1.1;
    }
    [data-theme="dark"] .canvas-stat-num {
        color: #f8fafc;
    }
    .canvas-stat-lbl {
        font-size: 0.56rem;
        color: #64748b;
        font-weight: 600;
        margin-top: 1px;
    }
    [data-theme="dark"] .canvas-stat-lbl {
        color: #94a3b8;
    }
    .canvas-stat-divider {
        width: 1px;
        height: 22px;
        background: rgba(148, 163, 184, 0.45);
    }
    [data-theme="dark"] .canvas-stat-divider {
        background: rgba(255, 255, 255, 0.15);
    }

    .canvas-btn-primary {
        background: #0f172a;
        color: #ffffff;
        font-size: 0.68rem;
        font-weight: 700;
        padding: 5.5px 16px;
        border-radius: 8px;
        display: inline-flex;
        align-items: center;
        text-decoration: none;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.2);
        transition: all 0.2s ease;
    }
    [data-theme="dark"] .canvas-btn-primary {
        background: #38bdf8;
        color: #0f172a;
        box-shadow: 0 2px 10px rgba(56, 189, 248, 0.3);
    }
    .canvas-btn-outline {
        background: rgba(255, 255, 255, 0.6);
        color: #334155;
        border: 1px solid #cbd5e1;
        font-size: 0.68rem;
        font-weight: 700;
        padding: 5.5px 16px;
        border-radius: 8px;
        display: inline-flex;
        align-items: center;
        backdrop-filter: blur(8px);
        transition: all 0.2s ease;
    }
    [data-theme="dark"] .canvas-btn-outline {
        background: rgba(30, 41, 59, 0.5);
        color: #cbd5e1;
        border-color: rgba(255, 255, 255, 0.12);
    }

    /* Seamless About Section Styles (Zero Box inside Box) */
    .canvas-heading-text {
        font-family: var(--font-heading);
        font-weight: 700;
        font-size: 0.92rem;
        color: #0f172a;
        line-height: 1.3;
    }
    [data-theme="dark"] .canvas-heading-text {
        color: #f8fafc;
    }

    .canvas-desc-text {
        font-size: 0.69rem;
        color: #64748b;
        line-height: 1.45;
    }
    [data-theme="dark"] .canvas-desc-text {
        color: #94a3b8;
    }

    /* ABOUT TAB: Stat Metric Cards */
    .about-stats-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        margin-top: 12px;
    }
    .about-stat-box {
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        padding: 8px 6px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        box-shadow: 0 1px 3px rgba(0,0,0,0.02);
        transition: transform 0.2s ease, border-color 0.2s ease;
    }
    [data-theme="dark"] .about-stat-box {
        background: rgba(15, 23, 42, 0.7);
        border-color: rgba(255, 255, 255, 0.08);
    }
    .about-stat-num {
        font-family: var(--font-heading);
        font-weight: 800;
        font-size: 0.95rem;
        color: #0284c7;
        line-height: 1.1;
    }
    [data-theme="dark"] .about-stat-num {
        color: #38bdf8;
    }
    .about-stat-lbl {
        font-size: 0.54rem;
        font-weight: 600;
        color: #64748b;
        margin-top: 2px;
    }
    [data-theme="dark"] .about-stat-lbl {
        color: #94a3b8;
    }

    /* ABOUT TAB: Coding Developer 3D Render */
    .about-coder-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .about-coder-img-wrapper {
        position: relative;
        width: 100%;
        height: 128px;
        border-radius: 12px;
        overflow: hidden;
        border: 1.5px solid rgba(2, 132, 199, 0.35);
        box-shadow: 0 8px 24px rgba(0,0,0,0.12);
        background: #0b1120;
        margin-bottom: 6px;
    }
    [data-theme="dark"] .about-coder-img-wrapper {
        border-color: rgba(56, 189, 248, 0.4);
        box-shadow: 0 8px 25px rgba(0,0,0,0.5);
    }
    .about-coder-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .about-live-code-badge {
        position: absolute;
        top: 6px;
        right: 6px;
        background: rgba(15, 23, 42, 0.88);
        color: #38bdf8;
        border: 1px solid rgba(56, 189, 248, 0.4);
        border-radius: 999px;
        font-size: 0.5rem;
        font-weight: 700;
        padding: 2px 8px;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        backdrop-filter: blur(8px);
    }
    .about-coder-name {
        font-family: var(--font-heading);
        font-weight: 700;
        font-size: 0.8rem;
        color: #0f172a;
    }
    [data-theme="dark"] .about-coder-name {
        color: #f8fafc;
    }
    .about-coder-role {
        font-size: 0.58rem;
        font-weight: 600;
        color: #16a34a;
    }
    [data-theme="dark"] .about-coder-role {
        color: #4ade80;
    }

    /* PROJECTS TAB: 3 Horizontal Cards (Single Row Bento Showcase) */
    .canvas-projects-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    .project-item-card {
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        padding: 6px;
        display: flex;
        flex-direction: column;
        gap: 4px;
        text-align: left;
        transition: border-color 0.25s ease, transform 0.25s ease;
    }
    [data-theme="dark"] .project-item-card {
        background: rgba(15, 23, 42, 0.6);
        border-color: rgba(255, 255, 255, 0.08);
    }
    .project-item-card:hover {
        border-color: #0284c7;
    }
    .project-img-wrapper {
        position: relative;
        width: 100%;
        height: 62px;
        border-radius: 7px;
        overflow: hidden;
        background: #0f172a;
    }
    .project-real-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
    }
    .project-item-card:hover .project-real-img {
        transform: scale(1.05);
    }
    .project-tag-pill {
        position: absolute;
        bottom: 3px;
        left: 4px;
        background: rgba(15, 23, 42, 0.85);
        color: #ffffff;
        font-size: 0.48rem;
        font-weight: 700;
        padding: 1.5px 5px;
        border-radius: 4px;
        backdrop-filter: blur(4px);
    }
    .project-box-title {
        font-family: var(--font-heading);
        font-weight: 700;
        font-size: 0.7rem;
        color: #0f172a;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    [data-theme="dark"] .project-box-title {
        color: #f8fafc;
    }
    .bento-chip-pill {
        font-size: 0.48rem;
        font-weight: 600;
        padding: 1px 5px;
        border-radius: 4px;
        background: #e2e8f0;
        color: #334155;
    }
    [data-theme="dark"] .bento-chip-pill {
        background: rgba(30, 41, 59, 0.8);
        color: #cbd5e1;
    }

    /* CONTACT TAB: Centered Modern Form & Direct Details */
    .contact-center-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        max-width: 440px;
        margin: 0 auto;
        width: 100%;
    }
    .contact-pills-row {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 10px;
    }
    .contact-pill-item {
        background: #f1f5f9;
        border: 1px solid #e2e8f0;
        border-radius: 999px;
        padding: 3px 10px;
        font-size: 0.6rem;
        font-weight: 600;
        color: #334155;
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }
    [data-theme="dark"] .contact-pill-item {
        background: rgba(15, 23, 42, 0.8);
        border-color: rgba(255, 255, 255, 0.1);
        color: #cbd5e1;
    }
    .contact-modern-form {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    .canvas-form-input {
        background: #ffffff;
        border: 1px solid #cbd5e1;
        border-radius: 7px;
        padding: 5px 10px;
        font-size: 0.64rem;
        color: #0f172a;
        outline: none;
        width: 100%;
        transition: border-color 0.2s ease;
    }
    [data-theme="dark"] .canvas-form-input {
        background: #0f172a;
        border-color: rgba(255, 255, 255, 0.15);
        color: #f8fafc;
    }

    /* Floating Studio Toolbar (Clean Light Theme Frosted Glass) */
    .stage-dock-toolbar {
        position: absolute;
        bottom: 12px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(255, 255, 255, 0.96);
        border: 1px solid #cbd5e1;
        border-radius: 999px;
        padding: 5px 12px;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        white-space: nowrap !important;
        gap: 8px;
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12), 0 2px 8px rgba(0, 0, 0, 0.04);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        z-index: 20;
        transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s ease;
    }
    [data-theme="dark"] .stage-dock-toolbar {
        background: rgba(15, 23, 42, 0.94);
        border-color: rgba(255, 255, 255, 0.2);
        box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5);
    }
    .stage-dock-toolbar.is-hidden {
        opacity: 0 !important;
        transform: translate(-50%, 25px) !important;
        pointer-events: none !important;
        visibility: hidden !important;
    }
    .dock-btn {
        background: none;
        border: none;
        font-size: 0.65rem;
        font-weight: 700;
        color: #1e293b;
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 5px;
        padding: 4px 10px;
        border-radius: 20px;
        transition: all 0.2s ease;
        cursor: pointer;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        word-break: keep-all !important;
    }
    [data-theme="dark"] .dock-btn {
        color: #f1f5f9;
    }
    .dock-btn:hover {
        background: rgba(15, 23, 42, 0.05);
        color: #0f172a;
    }
    [data-theme="dark"] .dock-btn:hover {
        background: rgba(255, 255, 255, 0.1);
        color: #ffffff;
    }
    .dock-btn.sim-active-click {
        background: rgba(2, 132, 199, 0.12);
        color: #0284c7;
        transform: scale(0.92);
    }
    [data-theme="dark"] .dock-btn.sim-active-click {
        background: rgba(56, 189, 248, 0.25);
        color: #38bdf8;
    }

    /* Precision Simulated Mouse Pointer */
    .interactive-sim-cursor {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 100;
        pointer-events: none;
        display: flex;
        align-items: flex-start;
        opacity: 0;
        transform: translate3d(200px, 200px, 0);
        will-change: transform;
    }
    .cursor-svg-icon {
        width: 18px;
        height: 18px;
        filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.4));
        transition: transform 0.12s cubic-bezier(0.2, 0.9, 0.3, 1);
        transform-origin: 0 0;
    }
    .interactive-sim-cursor.cursor-clicking .cursor-svg-icon,
    .interactive-sim-cursor.sim-clicking .cursor-svg-icon {
        transform: scale(0.80) translate(1px, 2px);
    }
    .cursor-label-badge {
        background: #ffffff;
        color: #0f172a;
        font-size: 0.56rem;
        font-weight: 700;
        padding: 3px 8px;
        border-radius: 6px;
        margin-left: 8px;
        margin-top: 2px;
        white-space: nowrap;
        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.15);
        border: 1px solid #cbd5e1;
    }
    [data-theme="dark"] .cursor-label-badge {
        background: #0f172a;
        color: #ffffff;
        border-color: rgba(255, 255, 255, 0.18);
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
    }

    /* Click Ripple Effect (High Precision Center Pulsing) */
    .cursor-click-ripple {
        position: absolute;
        top: 0;
        left: 0;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        border: 2px solid #00f2ff;
        background: radial-gradient(circle, rgba(0, 242, 255, 0.4) 0%, rgba(0, 242, 255, 0) 75%);
        box-shadow: 0 0 16px rgba(0, 242, 255, 0.8);
        pointer-events: none;
        z-index: 95;
        opacity: 0;
        transform: translate(-50%, -50%);
    }
    .cursor-click-ripple.ripple-active {
        animation: rippleBurst 0.4s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
    }
    @keyframes rippleBurst {
        0% { opacity: 1; transform: translate(-50%, -50%) scale(0.2); }
        50% { opacity: 0.85; transform: translate(-50%, -50%) scale(1.15); }
        100% { opacity: 0; transform: translate(-50%, -50%) scale(1.85); }
    }

    .canvas-tab-btn.sim-active-click,
    .dock-btn.sim-active-click,
    .contacts-filter-pill.sim-active-click,
    .crm-action-btn.sim-active-click,
    .crm-complete-btn.sim-active-click,
    .stage-publish-btn.sim-active-click,
    .camera-shutter-btn.sim-active-click,
    .ats-kw-chip.sim-active-click,
    .ocr-tray-item.sim-active-click,
    .crm-quick-note-box.sim-active-click {
        transform: scale(0.92) !important;
        box-shadow: 0 0 14px rgba(0, 242, 255, 0.5) !important;
        transition: transform 0.1s ease, box-shadow 0.1s ease !important;
    }

    /* ==========================================================================
       FEATURE 02: HIGH-FIDELITY ATS RESUME STUDIO & SCANNER SIMULATOR
       ========================================================================== */
    .resume-workflow-stage {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 22px;
        box-shadow: 0 24px 60px -12px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(226, 232, 240, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.9);
        overflow: hidden;
        position: relative;
        height: 400px;
        min-height: 400px;
        max-height: 400px;
        display: flex;
        flex-direction: column;
        transition: border-color 0.35s ease, box-shadow 0.35s ease;
    }

    [data-theme="dark"] .resume-workflow-stage {
        background: #0b1120;
        border: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }

    .res-chrome-bar {
        background: rgba(248, 250, 252, 0.95);
        border-bottom: 1px solid #e2e8f0;
        padding: 10px 18px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        z-index: 10;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    [data-theme="dark"] .res-chrome-bar {
        background: rgba(15, 23, 42, 0.95);
        border-color: rgba(255, 255, 255, 0.08);
    }

    .res-file-pill {
        background: #ffffff;
        border: 1px solid #cbd5e1;
        border-radius: 20px;
        padding: 4px 14px;
        font-family: var(--font-heading), monospace;
        font-size: 0.72rem;
        font-weight: 700;
        color: #0f172a;
        display: flex;
        align-items: center;
        gap: 6px;
        box-shadow: 0 1px 4px rgba(0,0,0,0.04);
        transition: all 0.35s ease;
    }

    [data-theme="dark"] .res-file-pill {
        background: #0f172a;
        color: #f8fafc;
        border-color: rgba(255, 255, 255, 0.12);
        box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    }

    .res-export-btn {
        background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
        color: #ffffff;
        font-size: 0.7rem;
        font-weight: 700;
        padding: 5px 14px;
        border-radius: 9px;
        display: flex;
        align-items: center;
        gap: 6px;
        border: none;
        box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35);
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        cursor: pointer;
    }
    .res-export-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 18px rgba(2, 132, 199, 0.45);
    }
    .res-export-btn.is-downloaded {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
        box-shadow: 0 0 22px rgba(16, 185, 129, 0.6) !important;
        color: #ffffff !important;
    }

    .res-document-canvas {
        flex: 1;
        height: 100%;
        min-height: 0;
        padding: 10px 18px 52px 18px;
        position: relative;
        background: #f8fafc;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: background-color 0.35s ease;
        overflow: hidden;
    }

    [data-theme="dark"] .res-document-canvas {
        background: #090e1a;
    }

    .res-blank-state {
        border: 1.5px dashed #cbd5e1;
        border-radius: 16px;
        padding: 30px 20px;
        width: 100%;
        max-width: 360px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        transition: all 0.35s ease;
    }

    [data-theme="dark"] .res-blank-state {
        border-color: rgba(255, 255, 255, 0.12);
        background: rgba(15, 23, 42, 0.7);
    }

    .res-blank-state.is-hidden {
        display: none !important;
    }

    .res-paper-sheet {
        display: none;
        opacity: 0;
        transform: translateY(6px);
        flex-direction: column;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 14px;
        padding: 12px 16px;
        width: 100%;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02);
        position: relative;
        overflow: hidden;
        transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }

    [data-theme="dark"] .res-paper-sheet {
        background: #0f172a;
        border-color: rgba(255, 255, 255, 0.08);
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
    }

    .res-paper-sheet.is-revealed {
        display: flex;
        opacity: 1;
        transform: translateY(0);
    }

    /* Template 1: Minimalist ATS */
    .res-paper-sheet.template-minimal {
        border-left: 1px solid #e2e8f0;
    }
    .res-paper-sheet.template-minimal .res-header-title {
        font-family: var(--font-heading);
        font-size: 1.02rem;
        font-weight: 800;
        color: #0f172a;
        letter-spacing: 0.04em;
    }
    [data-theme="dark"] .res-paper-sheet.template-minimal .res-header-title {
        color: #f8fafc;
    }
    .res-paper-sheet.template-minimal .res-sec-head {
        font-size: 0.62rem;
        font-weight: 800;
        color: #0284c7;
        letter-spacing: 0.06em;
        border-bottom: 1.5px solid rgba(2, 132, 199, 0.35);
        padding-bottom: 2px;
        margin-bottom: 5px;
        text-transform: uppercase;
    }

    /* Template 2: Modern Tech */
    .res-paper-sheet.template-modern {
        border-left: 4px solid #00f2ff;
        background: linear-gradient(180deg, rgba(240, 249, 255, 0.7) 0%, rgba(255, 255, 255, 1) 100%);
    }
    [data-theme="dark"] .res-paper-sheet.template-modern {
        background: linear-gradient(180deg, rgba(14, 165, 233, 0.1) 0%, rgba(15, 23, 42, 1) 100%);
        border-left-color: #38bdf8;
    }
    .res-paper-sheet.template-modern .res-header-title {
        font-family: var(--font-heading);
        font-size: 1.02rem;
        font-weight: 800;
        color: #0284c7;
    }
    [data-theme="dark"] .res-paper-sheet.template-modern .res-header-title {
        color: #38bdf8;
    }
    .res-paper-sheet.template-modern .res-sec-head {
        font-size: 0.62rem;
        font-weight: 800;
        color: #6366f1;
        letter-spacing: 0.06em;
        border-bottom: 1.5px solid rgba(99, 102, 241, 0.35);
        padding-bottom: 2px;
        margin-bottom: 5px;
        text-transform: uppercase;
    }
    [data-theme="dark"] .res-paper-sheet.template-modern .res-sec-head {
        color: #818cf8;
        border-bottom-color: rgba(129, 140, 248, 0.35);
    }

    /* Template 3: Executive */
    .res-paper-sheet.template-executive .res-header-block {
        background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
        margin: -14px -16px 8px -16px;
        padding: 10px 16px;
        border-radius: 13px 13px 0 0;
    }
    .res-paper-sheet.template-executive .res-header-title {
        color: #ffffff !important;
        font-family: var(--font-heading);
        font-size: 1.02rem;
        font-weight: 800;
        letter-spacing: 0.05em;
    }
    .res-paper-sheet.template-executive .res-header-sub {
        color: #94a3b8 !important;
    }
    .res-paper-sheet.template-executive .res-sec-head {
        font-size: 0.62rem;
        font-weight: 800;
        color: #0f172a;
        letter-spacing: 0.06em;
        border-bottom: 2px solid #0f172a;
        padding-bottom: 2px;
        margin-bottom: 5px;
        text-transform: uppercase;
    }
    [data-theme="dark"] .res-paper-sheet.template-executive .res-sec-head {
        color: #38bdf8;
        border-bottom-color: #38bdf8;
    }

    /* ATS Laser Scanning Beam */
    .res-laser-scanner {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: #00f2ff;
        box-shadow: 0 0 16px 4px rgba(0, 242, 255, 0.75), 0 0 30px 8px rgba(0, 242, 255, 0.45);
        opacity: 0;
        z-index: 25;
        pointer-events: none;
    }
    .res-laser-scanner.is-scanning {
        animation: resLaserScan 1.6s ease-in-out forwards;
    }
    @keyframes resLaserScan {
        0% { top: 0%; opacity: 0.95; }
        50% { opacity: 1; }
        100% { top: 100%; opacity: 0; }
    }

    /* ATS Skill Chips */
    .ats-kw-chip {
        display: inline-flex;
        align-items: center;
        background: #f1f5f9;
        border: 1px solid #e2e8f0;
        border-radius: 4px;
        padding: 1px 6px;
        font-size: 0.58rem;
        font-weight: 600;
        color: #334155;
        margin-right: 4px;
        margin-bottom: 3px;
        transition: all 0.35s ease;
    }
    [data-theme="dark"] .ats-kw-chip {
        background: rgba(30, 41, 59, 0.8);
        border-color: rgba(255, 255, 255, 0.1);
        color: #cbd5e1;
    }
    .ats-kw-chip.ats-matched {
        background: #ecfdf5 !important;
        border-color: #10b981 !important;
        color: #059669 !important;
        box-shadow: 0 0 8px rgba(16, 185, 129, 0.3);
    }
    [data-theme="dark"] .ats-kw-chip.ats-matched {
        background: rgba(16, 185, 129, 0.2) !important;
        border-color: #34d399 !important;
        color: #6ee7b7 !important;
    }

    /* ATS Score Pill floating in top right with 2-3 Multi-Score Indicators */
    .res-score-badge {
        position: absolute;
        top: 48px;
        right: 18px;
        background: rgba(255, 255, 255, 0.95);
        border: 1px solid #e2e8f0;
        border-radius: 14px;
        padding: 6px 12px;
        display: flex;
        flex-direction: column;
        gap: 5px;
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.09);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        z-index: 15;
        transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }
    [data-theme="dark"] .res-score-badge {
        background: rgba(15, 23, 42, 0.94);
        border-color: rgba(255, 255, 255, 0.12);
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
    }
    .res-score-main-group {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .res-score-circle {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: linear-gradient(135deg, #0284c7 0%, #6366f1 100%);
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-heading);
        font-size: 0.72rem;
        font-weight: 800;
        box-shadow: 0 0 10px rgba(2, 132, 199, 0.35);
        transition: all 0.3s ease;
    }
    .res-score-circle.is-high {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
        box-shadow: 0 0 14px rgba(16, 185, 129, 0.5) !important;
    }
    .res-score-sub-metrics {
        display: flex;
        align-items: center;
        gap: 5px;
        padding-top: 3px;
        border-top: 1px solid rgba(226, 232, 240, 0.8);
    }
    [data-theme="dark"] .res-score-sub-metrics {
        border-top-color: rgba(255, 255, 255, 0.08);
    }
    .res-sub-metric-pill {
        font-size: 0.58rem;
        font-weight: 600;
        color: #64748b;
        background: #f1f5f9;
        border: 1px solid #e2e8f0;
        padding: 1px 6px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        gap: 3px;
        transition: all 0.3s ease;
    }
    [data-theme="dark"] .res-sub-metric-pill {
        background: rgba(30, 41, 59, 0.8);
        border-color: rgba(255, 255, 255, 0.1);
        color: #94a3b8;
    }
    .res-sub-metric-pill.pill-active {
        background: #ecfdf5 !important;
        border-color: #a7f3d0 !important;
        color: #059669 !important;
    }
    [data-theme="dark"] .res-sub-metric-pill.pill-active {
        background: rgba(16, 185, 129, 0.15) !important;
        border-color: #34d399 !important;
        color: #6ee7b7 !important;
    }

    /* Resume Studio Bottom Dock Toolbar (Clean Light Theme Frosted Glass) */
    .res-dock-toolbar {
        position: absolute;
        bottom: 12px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(255, 255, 255, 0.96);
        border: 1px solid #cbd5e1;
        border-radius: 999px;
        padding: 5px 12px;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        white-space: nowrap !important;
        gap: 8px;
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12), 0 2px 8px rgba(0, 0, 0, 0.04);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        z-index: 20;
        transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s ease;
    }
    [data-theme="dark"] .res-dock-toolbar {
        background: rgba(15, 23, 42, 0.94);
        border-color: rgba(255, 255, 255, 0.2);
        box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5);
    }
    .res-dock-toolbar.is-hidden {
        opacity: 0 !important;
        transform: translate(-50%, 25px) !important;
        pointer-events: none !important;
        visibility: hidden !important;
    }

    /* ==========================================================================
       FEATURE 03: HOLOGRAPHIC DIGITAL NFC CARD & AI OCR CAMERA SCANNER SIMULATOR
       ========================================================================== */
    .card-workflow-stage {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 22px;
        box-shadow: 0 24px 60px -12px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(226, 232, 240, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.9);
        overflow: hidden;
        position: relative;
        height: 400px;
        min-height: 400px;
        max-height: 400px;
        display: flex;
        flex-direction: column;
        transition: border-color 0.35s ease, box-shadow 0.35s ease;
    }

    [data-theme="dark"] .card-workflow-stage {
        background: #0b1120;
        border: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }

    .card-chrome-bar {
        background: rgba(248, 250, 252, 0.95);
        border-bottom: 1px solid #e2e8f0;
        padding: 10px 18px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        z-index: 10;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    [data-theme="dark"] .card-chrome-bar {
        background: rgba(15, 23, 42, 0.95);
        border-color: rgba(255, 255, 255, 0.08);
    }

    .card-mode-tabs {
        display: flex;
        align-items: center;
        gap: 6px;
        background: rgba(241, 245, 249, 0.85);
        padding: 3px;
        border-radius: 999px;
        border: 1px solid #e2e8f0;
    }

    [data-theme="dark"] .card-mode-tabs {
        background: rgba(30, 41, 59, 0.7);
        border-color: rgba(255, 255, 255, 0.1);
    }

    .card-mode-tab {
        background: transparent;
        border: none;
        font-size: 0.66rem;
        font-weight: 600;
        color: #64748b;
        padding: 3px 11px;
        border-radius: 999px;
        transition: all 0.2s ease;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }

    [data-theme="dark"] .card-mode-tab {
        color: #94a3b8;
    }

    .card-mode-tab.active {
        background: #ffffff;
        color: #0f172a !important;
        font-weight: 700;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
    }

    [data-theme="dark"] .card-mode-tab.active {
        background: #0f172a;
        color: #ffffff !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    }

    .card-status-badge {
        background: #ecfdf5;
        border: 1px solid #a7f3d0;
        color: #059669;
        font-size: 0.62rem;
        font-weight: 700;
        padding: 3px 10px;
        border-radius: 999px;
        display: flex;
        align-items: center;
        gap: 5px;
        transition: all 0.3s ease;
    }

    [data-theme="dark"] .card-status-badge {
        background: rgba(16, 185, 129, 0.15);
        border-color: #34d399;
        color: #6ee7b7;
    }

    /* Card Studio Canvas */
    .card-document-canvas {
        flex: 1;
        height: 100%;
        min-height: 0;
        padding: 12px 18px 50px 18px;
        position: relative;
        background: #f8fafc;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

    [data-theme="dark"] .card-document-canvas {
        background: #090e1a;
    }

    /* Views: Card View vs Scanner View */
    .card-view-pane {
        display: none;
        width: 100%;
        height: 100%;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transform: translateY(6px);
        transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
        margin: auto;
    }

    .card-view-pane.active {
        display: flex;
        opacity: 1;
        transform: translateY(0);
    }

    /* 3D Holographic NFC Card */
    .nfc-card-3d-wrapper {
        width: 100%;
        max-width: 355px;
        height: 215px;
        perspective: 1000px;
        position: relative;
        margin: auto;
    }

    .nfc-card-3d-inner {
        width: 100%;
        height: 100%;
        position: relative;
        border-radius: 18px;
        transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
        transform-style: preserve-3d;
        box-shadow: 0 16px 36px rgba(15, 23, 42, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.2);
    }

    .nfc-card-3d-wrapper.is-flipped .nfc-card-3d-inner {
        transform: rotateY(180deg);
    }

    .nfc-card-face {
        position: absolute;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        border-radius: 18px;
        padding: 16px 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        overflow: hidden;
    }

    /* Card Themes */
    /* Theme 1: Emerald Cyber Foil (Default) */
    .nfc-card-3d-inner.card-theme-emerald .nfc-card-face {
        background: linear-gradient(135deg, #064e3b 0%, #047857 45%, #059669 75%, #10b981 100%);
        color: #ffffff;
    }

    /* Theme 2: Midnight Obsidian */
    .nfc-card-3d-inner.card-theme-obsidian .nfc-card-face {
        background: linear-gradient(135deg, #020617 0%, #0f172a 50%, #1e293b 100%);
        color: #ffffff;
        border: 1px solid rgba(56, 189, 248, 0.35);
        box-shadow: 0 0 25px rgba(56, 189, 248, 0.2);
    }

    /* Theme 3: Executive Gold */
    .nfc-card-3d-inner.card-theme-gold .nfc-card-face {
        background: linear-gradient(135deg, #78350f 0%, #b45309 45%, #d97706 75%, #f59e0b 100%);
        color: #ffffff;
    }

    /* Iridescent Shimmer Foil Overlay */
    .nfc-iridescent-shine {
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.22) 50%, transparent 60%);
        transform: rotate(25deg);
        pointer-events: none;
        animation: cardShimmer 6s infinite linear;
    }

    @keyframes cardShimmer {
        0% { transform: translateY(-100%) rotate(25deg); }
        100% { transform: translateY(100%) rotate(25deg); }
    }

    .nfc-metallic-chip {
        width: 32px;
        height: 24px;
        border-radius: 5px;
        background: linear-gradient(135deg, #fbbf24 0%, #d97706 50%, #fef3c7 100%);
        border: 1px solid rgba(255, 255, 255, 0.4);
        box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
        position: relative;
    }
    .nfc-metallic-chip::after {
        content: '';
        position: absolute;
        top: 6px;
        left: 0;
        right: 0;
        height: 1px;
        background: rgba(0,0,0,0.3);
    }

    /* Card Back (QR Code Screen) */
    .nfc-card-back {
        transform: rotateY(180deg);
        background: #ffffff !important;
        color: #0f172a !important;
        border: 1px solid #e2e8f0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        text-align: center;
        padding: 12px 16px;
    }
    [data-theme="dark"] .nfc-card-back {
        background: #0f172a !important;
        color: #ffffff !important;
        border-color: rgba(255, 255, 255, 0.12);
    }

    .qr-code-box {
        width: 110px;
        height: 110px;
        background: #ffffff;
        border-radius: 10px;
        padding: 5px;
        box-shadow: 0 4px 16px rgba(0,0,0,0.08);
        border: 1px solid #e2e8f0;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        margin: auto;
    }

    /* AI OCR Camera Viewfinder & Realistic Photo Snap Styles */
    .ocr-camera-viewport {
        width: 100%;
        max-width: 375px;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 16px;
        padding: 9px;
        position: relative;
        box-shadow: 0 8px 24px rgba(0,0,0,0.04);
    }
    [data-theme="dark"] .ocr-camera-viewport {
        background: #0f172a;
        border-color: rgba(255, 255, 255, 0.1);
    }

    .ocr-viewfinder-screen {
        width: 100%;
        height: 215px;
        background: radial-gradient(circle at 50% 45%, #1e293b 0%, #0f172a 60%, #020617 100%);
        border-radius: 12px;
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.85);
    }

    /* Camera Flash Burst Effect */
    .camera-shutter-flash {
        position: absolute;
        inset: 0;
        background: #ffffff;
        opacity: 0;
        pointer-events: none;
        z-index: 40;
        transition: opacity 0.05s ease-in;
    }
    .camera-shutter-flash.flash-active {
        animation: cameraShutterFlashAnim 0.32s ease-out forwards;
    }
    @keyframes cameraShutterFlashAnim {
        0% { opacity: 0.95; }
        25% { opacity: 0.92; }
        100% { opacity: 0; }
    }

    /* Camera Viewfinder Top HUD */
    .camera-hud-top {
        position: absolute;
        top: 8px;
        left: 10px;
        right: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 15;
        font-size: 0.56rem;
        font-family: var(--font-monospace, monospace);
        color: rgba(255, 255, 255, 0.85);
        pointer-events: none;
    }
    .camera-hud-pill {
        background: rgba(0, 0, 0, 0.55);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        padding: 2px 7px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        display: flex;
        align-items: center;
        gap: 4px;
    }
    .hud-red-rec {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #ef4444;
        animation: recPulseDot 1.2s ease-in-out infinite alternate;
    }
    @keyframes recPulseDot {
        0% { opacity: 0.4; }
        100% { opacity: 1; box-shadow: 0 0 8px #ef4444; }
    }

    /* Camera Viewfinder Bottom HUD with Shutter Button */
    .camera-hud-bottom {
        position: absolute;
        bottom: 8px;
        left: 10px;
        right: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 15;
    }
    .camera-hud-hint {
        font-size: 0.56rem;
        color: rgba(255, 255, 255, 0.85);
        background: rgba(0, 0, 0, 0.55);
        padding: 2px 8px;
        border-radius: 6px;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        font-family: var(--font-heading);
    }
    .camera-shutter-btn {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: #ffffff;
        border: 2px solid rgba(255, 255, 255, 0.5);
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 0 12px rgba(255, 255, 255, 0.35);
        cursor: pointer;
        transition: transform 0.15s ease, box-shadow 0.15s ease;
    }
    .camera-shutter-btn .shutter-inner-dot {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #ffffff;
        border: 1.5px solid #0f172a;
        transition: background 0.15s ease;
    }
    .camera-shutter-btn:hover,
    .camera-shutter-btn.sim-hover {
        transform: scale(1.08);
        box-shadow: 0 0 16px rgba(255, 255, 255, 0.6);
    }
    .camera-shutter-btn:active,
    .camera-shutter-btn.sim-active-click,
    .camera-shutter-btn.btn-pressed {
        transform: scale(0.9);
    }

    /* Camera Corner Viewfinder Brackets (Fitting outer card perimeter) */
    .viewfinder-bracket {
        position: absolute;
        width: 15px;
        height: 15px;
        border-color: #38bdf8;
        border-style: solid;
        pointer-events: none;
        z-index: 10;
        transition: border-color 0.3s ease;
    }
    .bracket-tl {
        top: 22px;
        left: 14px;
        border-width: 2px 0 0 2px;
        border-top-left-radius: 4px;
    }
    .bracket-tr {
        top: 22px;
        right: 14px;
        border-width: 2px 2px 0 0;
        border-top-right-radius: 4px;
    }
    .bracket-bl {
        bottom: 24px;
        left: 14px;
        border-width: 0 0 2px 2px;
        border-bottom-left-radius: 4px;
    }
    .bracket-br {
        bottom: 24px;
        right: 14px;
        border-width: 0 2px 2px 0;
        border-bottom-right-radius: 4px;
    }
    .ocr-viewfinder-screen.is-focused .viewfinder-bracket {
        border-color: #10b981;
    }

    /* Authentic Physical Corporate Business Card (3.5" x 2" Ratio & Realistic Cardstock) */
    .ocr-physical-card {
        width: 305px;
        height: 154px;
        max-width: 90%;
        background: #ffffff;
        background-image: linear-gradient(145deg, #ffffff 0%, #fcfdfe 40%, #f6f8fb 100%);
        border-radius: 8px;
        padding: 10px 14px 10px 16px;
        box-shadow: 0 20px 36px -6px rgba(0, 0, 0, 0.8), 0 4px 12px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.95);
        position: relative;
        z-index: 5;
        transform: perspective(1000px) rotateX(2deg);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        user-select: none;
    }
    .ocr-physical-card.snap-recoil {
        animation: shutterRecoil 0.35s ease-out;
    }
    @keyframes shutterRecoil {
        0% { transform: perspective(1000px) rotateX(2deg) scale(1); }
        25% { transform: perspective(1000px) rotateX(2deg) scale(0.96); }
        100% { transform: perspective(1000px) rotateX(2deg) scale(1); }
    }

    /* Left Premium Edge Foil Accent Stripe */
    .ocr-card-edge-strip {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3.5px;
        background: linear-gradient(180deg, #0284c7 0%, #38bdf8 50%, #0369a1 100%);
        border-radius: 8px 0 0 8px;
    }

    /* Company Brand Header in Card */
    .card-brand-row {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 2px;
    }
    .card-logo-badge {
        width: 18px;
        height: 18px;
        background: #0f172a;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #38bdf8;
        box-shadow: 0 2px 5px rgba(15, 23, 42, 0.25);
        flex-shrink: 0;
    }
    .card-company-name {
        font-family: var(--font-heading, sans-serif);
        font-weight: 800;
        font-size: 0.63rem;
        letter-spacing: 0.08em;
        color: #0f172a;
        text-transform: uppercase;
        line-height: 1.1;
    }
    .card-company-sub {
        font-size: 0.48rem;
        color: #64748b;
        font-weight: 500;
        letter-spacing: 0.02em;
    }
    .card-foil-pill {
        font-size: 0.46rem;
        font-family: var(--font-monospace, monospace);
        font-weight: 700;
        color: #0369a1;
        background: rgba(2, 132, 199, 0.08);
        border: 1px solid rgba(2, 132, 199, 0.2);
        padding: 1px 5px;
        border-radius: 3px;
        letter-spacing: 0.05em;
    }

    /* Executive Details in Card */
    .card-person-block {
        margin: 1px 0 2px 0;
        display: flex;
        flex-direction: column;
        gap: 1px;
    }
    .card-person-name {
        font-family: var(--font-heading, sans-serif);
        font-size: 0.88rem;
        font-weight: 800;
        color: #0f172a;
        line-height: 1.15;
        letter-spacing: -0.01em;
    }
    .card-person-role {
        font-size: 0.55rem;
        font-weight: 700;
        color: #0284c7;
        letter-spacing: 0.02em;
    }

    /* Subtle Card Hairline Divider */
    .card-hairline-sep {
        height: 1px;
        background: rgba(15, 23, 42, 0.08);
        margin: 2px 0 3px 0;
        width: 100%;
    }

    /* Bottom Contact Strip in Card */
    .card-footer-strip {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        width: 100%;
    }
    .card-contact-lines {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    .card-contact-item {
        font-size: 0.53rem;
        color: #334155;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 4px;
        line-height: 1.2;
    }
    .card-contact-item i {
        font-size: 0.5rem;
    }
    .card-meta-lines {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 2px;
        text-align: right;
    }

    /* OCR Live Laser Beam Sweep */
    .ocr-live-laser-beam {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2.5px;
        background: #10b981;
        box-shadow: 0 0 16px 4px rgba(16, 185, 129, 0.95), 0 0 30px 8px rgba(16, 185, 129, 0.6);
        opacity: 0;
        z-index: 30;
        pointer-events: none;
    }
    .ocr-laser-curtain {
        height: 34px;
        margin-top: -34px;
        background: linear-gradient(to top, rgba(16, 185, 129, 0.35) 0%, transparent 100%);
    }
    .ocr-live-laser-beam.is-scanning {
        animation: ocrLaserSweep 1.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }
    @keyframes ocrLaserSweep {
        0% { top: 12%; opacity: 1; }
        85% { opacity: 1; }
        100% { top: 88%; opacity: 0; }
    }

    /* Detected Fields Bounding Box */
    .ocr-detect-tag {
        display: inline-flex;
        align-items: center;
        padding: 0.5px 3px;
        border-radius: 3px;
        transition: all 0.25s ease;
        position: relative;
    }
    .ocr-detect-tag.is-detected {
        background: rgba(16, 185, 129, 0.12) !important;
        outline: 1.5px solid #10b981 !important;
        box-shadow: 0 0 8px rgba(16, 185, 129, 0.35) !important;
        color: #047857 !important;
    }

    /* Saved Contact Screen (Clean Auto-Extracted CRM Profile) */
    .saved-contact-card-box {
        width: 100%;
        max-width: 375px;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 16px;
        padding: 14px 16px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
        display: flex;
        flex-direction: column;
        gap: 10px;
        animation: savedCardFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    @keyframes savedCardFadeIn {
        from { opacity: 0; transform: translateY(6px); }
        to { opacity: 1; transform: translateY(0); }
    }
    [data-theme="dark"] .saved-contact-card-box {
        background: #0f172a;
        border-color: rgba(255, 255, 255, 0.1);
    }
    .saved-contact-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 8px;
        border-bottom: 1px solid #f1f5f9;
    }
    [data-theme="dark"] .saved-contact-header {
        border-bottom-color: rgba(255, 255, 255, 0.08);
    }
    .saved-contact-avatar {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        background: linear-gradient(135deg, #10b981 0%, #0284c7 100%);
        color: #ffffff;
        font-weight: 800;
        font-size: 0.85rem;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 3px 10px rgba(16, 185, 129, 0.35);
        flex-shrink: 0;
    }
    .saved-contact-name {
        font-family: var(--font-heading);
        font-weight: 700;
        font-size: 0.95rem;
        color: #0f172a;
    }
    [data-theme="dark"] .saved-contact-name {
        color: #ffffff;
    }
    .saved-contact-sub {
        font-size: 0.62rem;
        color: #64748b;
        line-height: 1.2;
    }
    [data-theme="dark"] .saved-contact-sub {
        color: #94a3b8;
    }
    .saved-fields-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }
    .saved-field-pill {
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 5px 8px;
        display: flex;
        align-items: center;
        gap: 7px;
        transition: all 0.2s ease;
    }
    [data-theme="dark"] .saved-field-pill {
        background: rgba(15, 23, 42, 0.6);
        border-color: rgba(255, 255, 255, 0.08);
    }
    .saved-field-icon {
        font-size: 0.82rem;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    .saved-field-info {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }
    .saved-field-label {
        font-size: 0.52rem;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        line-height: 1;
    }
    [data-theme="dark"] .saved-field-label {
        color: #94a3b8;
    }
    .saved-field-val {
        font-size: 0.64rem;
        color: #0f172a;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.2;
    }
    [data-theme="dark"] .saved-field-val {
        color: #f1f5f9;
    }
    .saved-contact-actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 4px;
    }

    /* Card Studio Bottom Dock Toolbar */
    .card-dock-toolbar {
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(255, 255, 255, 0.96);
        border: 1px solid #cbd5e1;
        border-radius: 999px;
        padding: 4px 10px;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        white-space: nowrap !important;
        gap: 6px;
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12), 0 2px 8px rgba(0, 0, 0, 0.04);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        z-index: 20;
        max-width: 95%;
        transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s ease;
    }
    .card-dock-toolbar .dock-btn {
        padding: 3.5px 7px !important;
        font-size: 0.62rem !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    [data-theme="dark"] .card-dock-toolbar {
        background: rgba(15, 23, 42, 0.94);
        border-color: rgba(255, 255, 255, 0.2);
        box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5);
    }
    /* ==========================================================================
       FEATURE 04: SMART NETWORKING CRM & FOLLOW-UP ENGINE SIMULATOR (REFINED 10/10)
       ========================================================================== */
    .contacts-workflow-stage {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 20px;
        box-shadow: 0 20px 50px -10px rgba(15, 23, 42, 0.1), 0 0 0 1px rgba(226, 232, 240, 0.8);
        overflow: hidden;
        position: relative;
        height: 355px;
        min-height: 355px;
        max-height: 355px;
        max-width: 530px;
        width: 100%;
        margin-left: 0;
        margin-right: auto;
        display: flex;
        flex-direction: column;
        transition: all 0.35s ease;
    }

    [data-theme="dark"] .contacts-workflow-stage {
        background: #0b1120;
        border: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.65);
    }

    /* Top macOS Chrome Bar */
    .contacts-chrome-bar {
        background: #f8fafc;
        border-bottom: 1px solid #e2e8f0;
        padding: 6px 14px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        z-index: 10;
        flex-shrink: 0;
        height: 36px;
    }

    [data-theme="dark"] .contacts-chrome-bar {
        background: rgba(15, 23, 42, 0.95);
        border-color: rgba(255, 255, 255, 0.08);
    }

    .contacts-search-pill {
        display: flex;
        align-items: center;
        background: #ffffff;
        border: 1px solid #cbd5e1;
        border-radius: 999px;
        padding: 2.5px 10px;
        font-size: 0.62rem;
        color: #0f172a;
        max-width: 250px;
        flex-grow: 1;
        margin: 0 10px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
        transition: all 0.25s ease;
    }

    [data-theme="dark"] .contacts-search-pill {
        background: rgba(30, 41, 59, 0.7);
        border-color: rgba(255, 255, 255, 0.12);
        color: #f8fafc;
    }

    .contacts-search-text {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: 600;
        font-size: 0.60rem;
        color: #0f172a;
    }

    [data-theme="dark"] .contacts-search-text {
        color: #f1f5f9;
    }

    .contacts-search-badge {
        font-size: 0.52rem;
        font-weight: 700;
        padding: 1px 6px;
        border-radius: 999px;
        background: #f1f5f9;
        color: #475569;
        border: 1px solid #e2e8f0;
        margin-left: 6px;
        white-space: nowrap;
        font-family: var(--font-monospace);
    }

    [data-theme="dark"] .contacts-search-badge {
        background: rgba(15, 23, 42, 0.8);
        border-color: rgba(255, 255, 255, 0.1);
        color: #94a3b8;
    }

    .contacts-search-badge.badge-highlight {
        background: #fef3c7;
        color: #92400e;
        border-color: #fde68a;
    }

    [data-theme="dark"] .contacts-search-badge.badge-highlight {
        background: rgba(245, 158, 11, 0.2);
        color: #fde68a;
        border-color: rgba(245, 158, 11, 0.4);
    }

    .contacts-status-badge {
        background: #fffbeb;
        border: 1px solid #fde68a;
        color: #92400e;
        font-size: 0.55rem;
        font-weight: 700;
        padding: 2.5px 8px;
        border-radius: 999px;
        display: flex;
        align-items: center;
        white-space: nowrap;
        gap: 4px;
        transition: all 0.3s ease;
    }

    [data-theme="dark"] .contacts-status-badge {
        background: rgba(245, 158, 11, 0.15);
        border-color: rgba(245, 158, 11, 0.3);
        color: #fde68a;
    }

    .contacts-status-badge.is-synced {
        background: #ecfdf5 !important;
        border-color: #a7f3d0 !important;
        color: #047857 !important;
    }

    [data-theme="dark"] .contacts-status-badge.is-synced {
        background: rgba(16, 185, 129, 0.15) !important;
        border-color: rgba(16, 185, 129, 0.3) !important;
        color: #34d399 !important;
    }

    /* Category Filter Ribbon */
    .contacts-filter-ribbon {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 6px 14px;
        background: #ffffff;
        border-bottom: 1px solid #f1f5f9;
        overflow-x: auto;
        scrollbar-width: none;
        flex-shrink: 0;
        height: 34px;
    }

    [data-theme="dark"] .contacts-filter-ribbon {
        background: rgba(15, 23, 42, 0.6);
        border-bottom-color: rgba(255, 255, 255, 0.05);
    }

    .contacts-filter-pill {
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 999px;
        padding: 2.5px 9px;
        font-size: 0.56rem;
        font-weight: 600;
        color: #475569;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        white-space: nowrap;
        transition: all 0.2s ease;
    }

    [data-theme="dark"] .contacts-filter-pill {
        background: rgba(30, 41, 59, 0.6);
        border-color: rgba(255, 255, 255, 0.1);
        color: #94a3b8;
    }

    .contacts-filter-pill:hover {
        border-color: #cbd5e1;
        color: #0f172a;
    }

    [data-theme="dark"] .contacts-filter-pill:hover {
        border-color: rgba(255, 255, 255, 0.25);
        color: #ffffff;
    }

    .contacts-filter-pill.active {
        background: #fef3c7 !important;
        border-color: #f59e0b !important;
        color: #92400e !important;
        font-weight: 700 !important;
        box-shadow: 0 1px 6px rgba(245, 158, 11, 0.2);
    }

    [data-theme="dark"] .contacts-filter-pill.active {
        background: rgba(245, 158, 11, 0.22) !important;
        border-color: #f59e0b !important;
        color: #fef08a !important;
        box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35);
    }

    /* Contacts Canvas Area */
    .contacts-canvas-area {
        flex: 1;
        min-height: 0;
        padding: 8px 14px 34px 14px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: relative;
        z-index: 5;
        overflow: hidden;
    }

    /* Dynamic Active Lead Card */
    .crm-lead-card {
        background: #ffffff;
        border: 1.5px solid #e2e8f0;
        border-radius: 14px;
        padding: 9px 12px;
        box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
        transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
        position: relative;
    }

    [data-theme="dark"] .crm-lead-card {
        background: rgba(15, 23, 42, 0.7);
        border-color: rgba(255, 255, 255, 0.08);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    }

    .crm-lead-card.card-highlight {
        border-color: #0284c7;
        box-shadow: 0 0 0 1.5px rgba(2, 132, 199, 0.3), 0 8px 24px rgba(2, 132, 199, 0.08);
    }

    [data-theme="dark"] .crm-lead-card.card-highlight {
        border-color: #38bdf8;
        box-shadow: 0 0 0 1.5px rgba(56, 189, 248, 0.4), 0 8px 24px rgba(0, 0, 0, 0.4);
    }

    .crm-avatar-box {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-heading);
        font-weight: 800;
        font-size: 0.70rem;
        color: #ffffff;
        position: relative;
        flex-shrink: 0;
        transition: background 0.3s ease;
    }

    .avatar-amber {
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
        box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35);
    }

    .avatar-cyan {
        background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
        box-shadow: 0 2px 8px rgba(2, 132, 199, 0.35);
    }

    .avatar-purple {
        background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%) !important;
        box-shadow: 0 2px 8px rgba(124, 58, 237, 0.35);
    }

    .crm-tag-pill {
        font-size: 0.52rem;
        font-weight: 700;
        padding: 1.5px 6px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        gap: 2.5px;
        white-space: nowrap;
        line-height: 1;
        transition: all 0.25s ease;
    }

    .crm-tag-pill.tag-amber,
    .crm-mini-tag.tag-amber {
        background: #fef3c7;
        color: #92400e;
        border: 1px solid #fde68a;
    }

    [data-theme="dark"] .crm-tag-pill.tag-amber,
    [data-theme="dark"] .crm-mini-tag.tag-amber {
        background: rgba(245, 158, 11, 0.2);
        color: #fde68a;
        border-color: rgba(245, 158, 11, 0.4);
    }

    .crm-tag-pill.tag-cyan,
    .crm-mini-tag.tag-cyan {
        background: #e0f2fe;
        color: #0369a1;
        border: 1px solid #bae6fd;
    }

    [data-theme="dark"] .crm-tag-pill.tag-cyan,
    [data-theme="dark"] .crm-mini-tag.tag-cyan {
        background: rgba(14, 165, 233, 0.2);
        color: #7dd3fc;
        border-color: rgba(14, 165, 233, 0.4);
    }

    .crm-tag-pill.tag-purple,
    .crm-mini-tag.tag-purple {
        background: #f3e8ff;
        color: #6b21a8;
        border: 1px solid #e9d5ff;
    }

    [data-theme="dark"] .crm-tag-pill.tag-purple,
    [data-theme="dark"] .crm-mini-tag.tag-purple {
        background: rgba(168, 85, 247, 0.2);
        color: #d8b4fe;
        border-color: rgba(168, 85, 247, 0.4);
    }

    .crm-tag-pill.tag-slate {
        background: #f1f5f9;
        color: #334155;
        border: 1px solid #e2e8f0;
    }

    [data-theme="dark"] .crm-tag-pill.tag-slate {
        background: rgba(30, 41, 59, 0.8);
        color: #cbd5e1;
        border-color: rgba(255, 255, 255, 0.1);
    }

    .crm-person-sub {
        font-size: 0.58rem;
        color: #475569;
        font-weight: 500;
        margin-top: 1px;
    }

    [data-theme="dark"] .crm-person-sub {
        color: #94a3b8;
    }

    /* Follow-Up Alert Banner */
    .crm-followup-banner {
        background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
        border: 1px solid #fde68a;
        border-radius: 8px;
        padding: 4px 8px;
        margin-top: 5px;
        transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }

    [data-theme="dark"] .crm-followup-banner {
        background: rgba(245, 158, 11, 0.12);
        border-color: rgba(245, 158, 11, 0.3);
    }

    .crm-followup-banner.is-completed {
        background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%) !important;
        border-color: #6ee7b7 !important;
        box-shadow: 0 0 14px rgba(16, 185, 129, 0.2) !important;
    }

    [data-theme="dark"] .crm-followup-banner.is-completed {
        background: rgba(16, 185, 129, 0.18) !important;
        border-color: #34d399 !important;
        box-shadow: 0 0 16px rgba(16, 185, 129, 0.3) !important;
    }

    .crm-bell-wrapper {
        width: 19px;
        height: 19px;
        border-radius: 50%;
        background: rgba(245, 158, 11, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .crm-followup-banner.is-completed .crm-bell-wrapper {
        background: rgba(16, 185, 129, 0.22) !important;
    }

    .crm-followup-title {
        font-size: 0.58rem;
        font-weight: 700;
        color: #0f172a;
        line-height: 1.25;
    }

    [data-theme="dark"] .crm-followup-title {
        color: #ffffff;
    }

    .crm-followup-sub {
        font-size: 0.50rem;
        color: #64748b;
    }

    [data-theme="dark"] .crm-followup-sub {
        color: #94a3b8;
    }

    .crm-due-badge {
        background: #f59e0b;
        color: #ffffff;
        font-weight: 800;
        font-size: 0.50rem;
        padding: 1.5px 5px;
        border-radius: 3px;
        font-family: var(--font-monospace);
        letter-spacing: 0.03em;
    }

    .crm-complete-btn {
        background: #ffffff;
        border: 1px solid #cbd5e1;
        border-radius: 5px;
        padding: 2px 7px;
        font-size: 0.52rem;
        font-weight: 700;
        color: #0f172a;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 2.5px;
        transition: all 0.2s ease;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }

    [data-theme="dark"] .crm-complete-btn {
        background: rgba(30, 41, 59, 0.8);
        border-color: rgba(255, 255, 255, 0.15);
        color: #ffffff;
    }

    .crm-complete-btn:hover {
        background: #f8fafc;
        border-color: #94a3b8;
    }

    .crm-complete-btn.is-done {
        background: #059669 !important;
        border-color: #059669 !important;
        color: #ffffff !important;
        box-shadow: 0 2px 6px rgba(5, 150, 105, 0.4);
    }

    /* Meeting Story Note Box */
    .crm-story-box {
        background: #f8fafc;
        border: 1px dashed #cbd5e1;
        border-radius: 8px;
        padding: 5px 8px;
        margin-top: 5px;
        transition: all 0.3s ease;
    }

    [data-theme="dark"] .crm-story-box {
        background: rgba(30, 41, 59, 0.4);
        border-color: rgba(255, 255, 255, 0.12);
    }

    .crm-note-text {
        font-size: 0.55rem;
        color: #334155;
        line-height: 1.35;
        font-weight: 500;
    }

    [data-theme="dark"] .crm-note-text {
        color: #cbd5e1;
    }

    .crm-note-addon {
        margin-top: 3px;
        padding-top: 3px;
        border-top: 1px dashed #e2e8f0;
        font-size: 0.54rem;
        color: #047857;
        font-weight: 700;
        display: none;
    }

    [data-theme="dark"] .crm-note-addon {
        border-top-color: rgba(255, 255, 255, 0.08);
        color: #34d399;
    }

    .crm-note-addon.is-visible {
        display: block;
        animation: noteFadeIn 0.3s ease-out;
    }

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

    .note-type-cursor {
        display: inline-block;
        font-weight: 700;
        color: #059669;
        animation: noteCursorBlink 0.75s infinite;
    }

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

    /* Action Buttons Strip */
    .crm-action-strip {
        display: flex;
        gap: 4px;
        margin-top: 5px;
    }

    .crm-action-btn {
        flex: 1;
        background: #f8fafc;
        border: 1px solid #cbd5e1;
        border-radius: 6px;
        padding: 3px 5px;
        font-size: 0.54rem;
        font-weight: 700;
        color: #0f172a;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 3px;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    [data-theme="dark"] .crm-action-btn {
        background: rgba(30, 41, 59, 0.6);
        border-color: rgba(255, 255, 255, 0.12);
        color: #f1f5f9;
    }

    .crm-action-btn:hover {
        background: #f1f5f9;
        border-color: #94a3b8;
        color: #0f172a;
    }

    [data-theme="dark"] .crm-action-btn:hover {
        background: rgba(30, 41, 59, 0.9);
        border-color: rgba(255, 255, 255, 0.25);
        color: #ffffff;
    }

    /* vCard Button Active / Exported State */
    .crm-action-btn.is-exported {
        background: #ecfdf5 !important;
        border-color: #10b981 !important;
        color: #059669 !important;
        box-shadow: 0 0 12px rgba(16, 185, 129, 0.35) !important;
        transform: scale(1.02);
    }
    [data-theme="dark"] .crm-action-btn.is-exported {
        background: rgba(16, 185, 129, 0.2) !important;
        border-color: #34d399 !important;
        color: #6ee7b7 !important;
        box-shadow: 0 0 12px rgba(16, 185, 129, 0.45) !important;
    }

    /* Live vCard Download & Sync Toast Banner */
    .crm-vcard-download-toast {
        display: none;
        align-items: center;
        justify-content: center;
        gap: 6px;
        background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
        border: 1px solid #10b981;
        border-radius: 6px;
        padding: 3px 8px;
        font-size: 0.54rem;
        font-weight: 700;
        color: #047857;
        margin-top: 4px;
        box-shadow: 0 2px 10px rgba(16, 185, 129, 0.25);
        animation: vcardToastPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    }
    [data-theme="dark"] .crm-vcard-download-toast {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(6, 78, 59, 0.5) 100%);
        border-color: #34d399;
        color: #6ee7b7;
    }
    .crm-vcard-download-toast.is-visible {
        display: flex;
    }
    @keyframes vcardToastPop {
        from { opacity: 0; transform: translateY(4px) scale(0.95); }
        to { opacity: 1; transform: translateY(0) scale(1); }
    }

    /* Contacts Studio Bottom Dock Toolbar */
    .contacts-dock-toolbar {
        position: absolute;
        bottom: 7px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(255, 255, 255, 0.98);
        border: 1px solid #cbd5e1;
        border-radius: 999px;
        padding: 3px 10px;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        white-space: nowrap !important;
        gap: 5px;
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(0, 0, 0, 0.04);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        z-index: 20;
        max-width: 95%;
        transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s ease;
    }

    [data-theme="dark"] .contacts-dock-toolbar {
        background: rgba(15, 23, 42, 0.96);
        border-color: rgba(255, 255, 255, 0.2);
        box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5);
    }

    .contacts-dock-toolbar .dock-btn {
        white-space: nowrap !important;
        font-size: 0.52rem !important;
        font-weight: 700 !important;
        padding: 2.5px 7px !important;
    }

    .contacts-dock-toolbar.is-hidden {
        opacity: 0 !important;
        transform: translate(-50%, 25px) !important;
        pointer-events: none !important;
        visibility: hidden !important;
    }

    /* ==========================================================================
       FEATURE 05: GLOBAL REAL-TIME VISITOR RADAR & ATTENTION TELEMETRY MATRIX
       ========================================================================== */
    .analytics-telemetry-console {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 20px;
        box-shadow: 0 24px 60px -12px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(226, 232, 240, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.9);
        overflow: hidden;
        position: relative;
        height: 400px;
        min-height: 400px;
        max-height: 400px;
        padding: 7px 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 5px;
        transition: border-color 0.35s ease, box-shadow 0.35s ease;
    }

    [data-theme="dark"] .analytics-telemetry-console {
        background: #0b1120;
        border: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.05);
    }

    .telemetry-ambient-aura {
        position: absolute;
        width: 320px;
        height: 320px;
        border-radius: 50%;
        filter: blur(90px);
        opacity: 0.16;
        pointer-events: none;
        z-index: 0;
    }
    .aura-rose { top: -70px; right: -60px; background: radial-gradient(circle, #f43f5e 0%, #e11d48 100%); }
    .aura-indigo { bottom: -70px; left: -60px; background: radial-gradient(circle, #6366f1 0%, #06b6d4 100%); }

    /* Top Cockpit Ribbon */
    .telemetry-top-ribbon {
        position: relative;
        z-index: 2;
        background: rgba(248, 250, 252, 0.92);
        border: 1px solid #e2e8f0;
        border-radius: 9px;
        padding: 3px 8px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        flex-shrink: 0;
    }
    [data-theme="dark"] .telemetry-top-ribbon {
        background: rgba(15, 23, 42, 0.85);
        border-color: rgba(255, 255, 255, 0.08);
    }

    .telemetry-radar-beacon {
        position: relative;
        width: 10px;
        height: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    .beacon-pulse {
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: #10b981;
        opacity: 0.75;
        animation: beaconPing 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
    }
    .beacon-core {
        position: relative;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #10b981;
        box-shadow: 0 0 6px #10b981;
    }
    @keyframes beaconPing {
        75%, 100% { transform: scale(2.5); opacity: 0; }
    }

    .radar-header-title {
        font-family: var(--font-heading);
        font-size: 0.56rem;
        font-weight: 800;
        letter-spacing: 0.05em;
        color: #0f172a;
    }
    [data-theme="dark"] .radar-header-title {
        color: #f8fafc;
    }

    .live-active-pill {
        background: rgba(16, 185, 129, 0.1);
        border: 1px solid rgba(16, 185, 129, 0.25);
        color: #059669;
        font-size: 0.50rem;
        font-weight: 700;
        padding: 1px 5px;
        border-radius: 999px;
    }
    [data-theme="dark"] .live-active-pill {
        background: rgba(16, 185, 129, 0.18);
        border-color: rgba(16, 185, 129, 0.35);
        color: #34d399;
    }

    .privacy-shield-badge {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        background: rgba(244, 63, 94, 0.08);
        border: 1px solid rgba(244, 63, 94, 0.2);
        color: #e11d48;
        font-size: 0.48rem;
        font-weight: 700;
        padding: 1px 6px;
        border-radius: 999px;
        letter-spacing: 0.02em;
    }
    [data-theme="dark"] .privacy-shield-badge {
        background: rgba(244, 63, 94, 0.15);
        border-color: rgba(244, 63, 94, 0.3);
        color: #fda4af;
    }

    .latency-node-pill {
        font-size: 0.48rem;
        font-weight: 600;
        color: #64748b;
        display: inline-flex;
        align-items: center;
        gap: 3px;
    }
    [data-theme="dark"] .latency-node-pill {
        color: #94a3b8;
    }

    /* Main Console Split Grid */
    .telemetry-main-grid {
        display: grid;
        grid-template-columns: 1.05fr 1fr;
        gap: 6px;
        flex: 1;
        min-height: 0;
        position: relative;
        z-index: 2;
        margin: 0;
    }

    /* Left Column */
    .telemetry-col-left {
        display: flex;
        flex-direction: column;
        gap: 5px;
        height: 100%;
        min-height: 0;
    }

    /* Card A: World Map Radar HUD */
    .radar-map-card {
        background: rgba(248, 250, 252, 0.88);
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        padding: 5px 8px 3px;
        flex: 1.25;
        min-height: 0;
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    [data-theme="dark"] .radar-map-card {
        background: rgba(15, 23, 42, 0.75);
        border-color: rgba(255, 255, 255, 0.08);
    }

    .radar-card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1px;
    }
    .radar-card-title {
        font-family: var(--font-heading);
        font-size: 0.54rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        color: #0f172a;
    }
    [data-theme="dark"] .radar-card-title {
        color: #f8fafc;
    }

    .radar-map-container {
        position: relative;
        width: 100%;
        flex: 1;
        min-height: 0;
        max-height: 125px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .world-map-svg {
        width: 100%;
        height: 100%;
        overflow: visible;
    }
    .map-continent {
        fill: #cbd5e1;
        stroke: none;
        opacity: 0.85;
        transition: fill 0.3s ease;
    }
    [data-theme="dark"] .map-continent {
        fill: #334155;
        stroke: none;
        opacity: 0.85;
    }
    .map-grid-line {
        stroke: rgba(148, 163, 184, 0.2);
        stroke-width: 0.75;
        stroke-dasharray: 2 4;
    }
    [data-theme="dark"] .map-grid-line {
        stroke: rgba(255, 255, 255, 0.08);
    }
    .map-grid-circle {
        fill: none;
        stroke: rgba(244, 63, 94, 0.15);
        stroke-width: 0.75;
        stroke-dasharray: 3 5;
    }
    [data-theme="dark"] .map-grid-circle {
        stroke: rgba(244, 63, 94, 0.25);
    }

    /* Radar Sweep Rotating Arm */
    .radar-scan-arm {
        transform-origin: 270px 120px;
        animation: radarSweepSpin 6s linear infinite;
        pointer-events: none;
    }
    @keyframes radarSweepSpin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }

    /* Radar City Hotspots */
    .radar-city-group {
        cursor: pointer;
    }
    .radar-city-ring {
        fill: none;
        stroke: #f43f5e;
        stroke-width: 1.5;
        opacity: 0.85;
        animation: cityPulse 2.2s cubic-bezier(0, 0, 0.2, 1) infinite;
    }
    .ring-cyan { stroke: #06b6d4 !important; }
    .ring-emerald { stroke: #10b981 !important; }

    @keyframes cityPulse {
        0% { r: 5; opacity: 0.95; }
        80%, 100% { r: 24; opacity: 0; }
    }

    .radar-city-core {
        fill: #f43f5e;
        filter: drop-shadow(0 0 4px #f43f5e);
        transition: r 0.2s ease, fill 0.2s ease;
    }
    .core-cyan { fill: #06b6d4 !important; filter: drop-shadow(0 0 4px #06b6d4) !important; }
    .core-emerald { fill: #10b981 !important; filter: drop-shadow(0 0 4px #10b981) !important; }

    .city-label-tag {
        font-size: 10px;
        font-weight: 800;
        font-family: var(--font-heading), monospace;
        fill: #0f172a;
        paint-order: stroke;
        stroke: #ffffff;
        stroke-width: 3px;
        stroke-linecap: butt;
        stroke-linejoin: miter;
    }
    [data-theme="dark"] .city-label-tag {
        fill: #ffffff;
        stroke: #0b1120;
        stroke-width: 3px;
    }

    /* Radar Sweep Line Overlay */
    .radar-sweep-beam {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        background: radial-gradient(circle at 50% 50%, rgba(244, 63, 94, 0.08) 0%, transparent 65%);
    }

    /* Origin Pills Row */
    .radar-origin-pills {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 2px;
        padding-top: 1px;
    }
    .origin-pill {
        font-size: 0.46rem;
        font-weight: 700;
        color: #475569;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        padding: 1px 3.5px;
        border-radius: 4px;
        display: inline-flex;
        align-items: center;
        gap: 2px;
    }
    [data-theme="dark"] .origin-pill {
        background: rgba(30, 41, 59, 0.7);
        border-color: rgba(255, 255, 255, 0.08);
        color: #cbd5e1;
    }

    /* Card B: Attention Heatmap Scanner */
    .attention-heatmap-card {
        background: rgba(248, 250, 252, 0.88);
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        padding: 4px 8px;
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: relative;
        overflow: hidden;
    }
    [data-theme="dark"] .attention-heatmap-card {
        background: rgba(15, 23, 42, 0.75);
        border-color: rgba(255, 255, 255, 0.08);
    }

    .heatmap-laser-line {
        position: absolute;
        left: 0;
        right: 0;
        height: 1.5px;
        background: linear-gradient(90deg, transparent 0%, #f43f5e 50%, transparent 100%);
        box-shadow: 0 0 8px #f43f5e;
        pointer-events: none;
        z-index: 5;
        animation: laserScanV 3.8s ease-in-out infinite alternate;
    }
    @keyframes laserScanV {
        0% { top: 12%; opacity: 0.2; }
        50% { opacity: 0.9; }
        100% { top: 88%; opacity: 0.2; }
    }

    .heatmap-row-item {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 6px;
        padding: 3px 6px;
        display: flex;
        flex-direction: column;
        gap: 2px;
        transition: border-color 0.2s ease, transform 0.2s ease;
    }
    [data-theme="dark"] .heatmap-row-item {
        background: rgba(30, 41, 59, 0.55);
        border-color: rgba(255, 255, 255, 0.08);
    }
    .heatmap-row-item:hover {
        border-color: #cbd5e1;
        transform: translateY(-1px);
    }
    [data-theme="dark"] .heatmap-row-item:hover {
        border-color: rgba(255, 255, 255, 0.2);
    }

    .heatmap-meta-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 0.50rem;
        font-weight: 700;
        color: #0f172a;
    }
    [data-theme="dark"] .heatmap-meta-row {
        color: #f8fafc;
    }
    .badge-hot {
        font-size: 0.44rem;
        font-weight: 800;
        background: #fff1f2;
        color: #e11d48;
        border: 1px solid #fecdd3;
        padding: 0.5px 4px;
        border-radius: 3px;
    }
    [data-theme="dark"] .badge-hot {
        background: rgba(244, 63, 94, 0.2);
        border-color: rgba(244, 63, 94, 0.35);
        color: #fda4af;
    }
    .badge-action {
        font-size: 0.44rem;
        font-weight: 800;
        background: #eff6ff;
        color: #2563eb;
        border: 1px solid #bfdbfe;
        padding: 0.5px 4px;
        border-radius: 3px;
    }
    [data-theme="dark"] .badge-action {
        background: rgba(37, 99, 235, 0.2);
        border-color: rgba(37, 99, 235, 0.35);
        color: #93c5fd;
    }
    .badge-tap {
        font-size: 0.44rem;
        font-weight: 800;
        background: #ecfdf5;
        color: #059669;
        border: 1px solid #a7f3d0;
        padding: 0.5px 4px;
        border-radius: 3px;
    }
    [data-theme="dark"] .badge-tap {
        background: rgba(16, 185, 129, 0.2);
        border-color: rgba(16, 185, 129, 0.35);
        color: #6ee7b7;
    }

    .heatmap-bar-track {
        height: 3.5px;
        background: #f1f5f9;
        border-radius: 999px;
        overflow: hidden;
    }
    [data-theme="dark"] .heatmap-bar-track {
        background: rgba(15, 23, 42, 0.8);
    }
    .bar-fill-rose {
        height: 100%;
        background: linear-gradient(90deg, #f43f5e 0%, #fb7185 100%);
        border-radius: 999px;
    }
    .bar-fill-blue {
        height: 100%;
        background: linear-gradient(90deg, #2563eb 0%, #38bdf8 100%);
        border-radius: 999px;
    }
    .bar-fill-emerald {
        height: 100%;
        background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
        border-radius: 999px;
    }

    /* Right Column: Live Stream */
    .telemetry-col-right {
        display: flex;
        flex-direction: column;
        gap: 5px;
        height: 100%;
        min-height: 0;
    }

    /* Card C: Rich Live Stream */
    .stream-feed-card {
        background: rgba(248, 250, 252, 0.88);
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        padding: 5px 7px;
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        overflow: hidden;
    }
    [data-theme="dark"] .stream-feed-card {
        background: rgba(15, 23, 42, 0.75);
        border-color: rgba(255, 255, 255, 0.08);
    }

    .stream-feed-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 2px;
    }
    .stream-title {
        font-family: var(--font-heading);
        font-size: 0.54rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        color: #0f172a;
    }
    [data-theme="dark"] .stream-title {
        color: #f8fafc;
    }

    .live-signal-indicator {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        font-size: 0.48rem;
        font-weight: 700;
        color: #059669;
        font-family: var(--font-monospace);
    }
    [data-theme="dark"] .live-signal-indicator {
        color: #34d399;
    }
    .live-signal-dot {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #10b981;
        box-shadow: 0 0 5px #10b981;
        animation: beaconPing 1.6s infinite;
    }

    /* Filter Chips */
    .stream-filter-tray {
        display: flex;
        gap: 2.5px;
        margin-bottom: 3.5px;
    }
    .stream-filter-btn {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 999px;
        font-size: 0.44rem;
        font-weight: 700;
        color: #64748b;
        padding: 1px 5px;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    [data-theme="dark"] .stream-filter-btn {
        background: rgba(30, 41, 59, 0.6);
        border-color: rgba(255, 255, 255, 0.08);
        color: #94a3b8;
    }
    .stream-filter-btn.active {
        background: #0f172a;
        color: #ffffff !important;
        border-color: #0f172a;
    }
    [data-theme="dark"] .stream-filter-btn.active {
        background: #f43f5e;
        border-color: #f43f5e;
        color: #ffffff !important;
    }

    /* Stream Feed List Container */
    .live-stream-list {
        display: flex;
        flex-direction: column;
        gap: 3px;
        overflow: hidden;
        flex: 1;
        min-height: 0;
    }

    .stream-card-item {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 6px;
        padding: 3px 5px;
        display: flex;
        flex-direction: column;
        gap: 1.5px;
        transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
        animation: streamItemSlideIn 0.4s ease-out;
    }
    @keyframes streamItemSlideIn {
        from { opacity: 0; transform: translateY(-6px); }
        to { opacity: 1; transform: translateY(0); }
    }

    [data-theme="dark"] .stream-card-item {
        background: rgba(30, 41, 59, 0.65);
        border-color: rgba(255, 255, 255, 0.08);
    }
    .stream-card-item.item-fresh {
        border-color: #10b981 !important;
        background: #ecfdf5 !important;
        box-shadow: 0 0 10px rgba(16, 185, 129, 0.15);
    }
    [data-theme="dark"] .stream-card-item.item-fresh {
        background: rgba(16, 185, 129, 0.16) !important;
        border-color: #10b981 !important;
    }

    .stream-item-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .stream-location {
        font-size: 0.50rem;
        font-weight: 800;
        color: #0f172a;
        display: flex;
        align-items: center;
        gap: 3px;
    }
    [data-theme="dark"] .stream-location {
        color: #f8fafc;
    }
    .stream-flag { font-size: 0.58rem; }

    /* Cross-Platform Stylized Country Badges */
    .flag-chip {
        font-family: var(--font-monospace), monospace;
        font-size: 0.40rem;
        font-weight: 800;
        letter-spacing: 0.03em;
        padding: 0.5px 3px;
        border-radius: 3px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1.1;
        flex-shrink: 0;
    }
    .chip-in { background: #fff7ed; color: #ea580c; border: 1px solid #fed7aa; }
    .chip-us { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; }
    .chip-gb { background: #fdf2f8; color: #db2777; border: 1px solid #fbcfe8; }
    .chip-de { background: #fefce8; color: #ca8a04; border: 1px solid #fef08a; }
    .chip-sg { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; }
    .chip-jp { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
    .chip-eu { background: #eef2ff; color: #4f46e5; border: 1px solid #c7d2fe; }
    .chip-apac { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }

    [data-theme="dark"] .chip-in { background: rgba(234, 88, 12, 0.18); color: #fdba74; border-color: rgba(234, 88, 12, 0.35); }
    [data-theme="dark"] .chip-us { background: rgba(37, 99, 235, 0.18); color: #93c5fd; border-color: rgba(37, 99, 235, 0.35); }
    [data-theme="dark"] .chip-gb { background: rgba(219, 39, 119, 0.18); color: #f472b6; border-color: rgba(219, 39, 119, 0.35); }
    [data-theme="dark"] .chip-de { background: rgba(202, 138, 4, 0.18); color: #fde047; border-color: rgba(202, 138, 4, 0.35); }
    [data-theme="dark"] .chip-sg { background: rgba(5, 150, 105, 0.18); color: #6ee7b7; border-color: rgba(5, 150, 105, 0.35); }
    [data-theme="dark"] .chip-jp { background: rgba(220, 38, 38, 0.18); color: #fca5a5; border-color: rgba(220, 38, 38, 0.35); }
    [data-theme="dark"] .chip-eu { background: rgba(79, 70, 229, 0.18); color: #a5b4fc; border-color: rgba(79, 70, 229, 0.35); }
    [data-theme="dark"] .chip-apac { background: rgba(22, 163, 74, 0.18); color: #86efac; border-color: rgba(22, 163, 74, 0.35); }

    .action-tag {
        font-size: 0.42rem;
        font-weight: 800;
        padding: 0.5px 4px;
        border-radius: 3px;
        letter-spacing: 0.01em;
    }
    .tag-resume { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; }
    .tag-nfc { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; }
    .tag-portfolio { background: #fff1f2; color: #e11d48; border: 1px solid #fecdd3; }
    .tag-vcard { background: #fdf4ff; color: #9333ea; border: 1px solid #f0abfc; }

    [data-theme="dark"] .tag-resume { background: rgba(37, 99, 235, 0.2); border-color: rgba(37, 99, 235, 0.4); color: #93c5fd; }
    [data-theme="dark"] .tag-nfc { background: rgba(16, 185, 129, 0.2); border-color: rgba(16, 185, 129, 0.4); color: #6ee7b7; }
    [data-theme="dark"] .tag-portfolio { background: rgba(244, 63, 94, 0.2); border-color: rgba(244, 63, 94, 0.4); color: #fda4af; }
    [data-theme="dark"] .tag-vcard { background: rgba(147, 51, 234, 0.2); border-color: rgba(147, 51, 234, 0.4); color: #e9d5ff; }

    .stream-time {
        font-size: 0.42rem;
        color: #94a3b8;
        font-family: var(--font-monospace);
    }

    .stream-item-desc {
        font-size: 0.46rem;
        color: #475569;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    [data-theme="dark"] .stream-item-desc {
        color: #94a3b8;
    }
    .stream-recruiter {
        font-weight: 600;
        color: #334155;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 155px;
    }
    [data-theme="dark"] .stream-recruiter {
        color: #cbd5e1;
    }
    .stream-device {
        font-size: 0.42rem;
        color: #94a3b8;
        background: #f1f5f9;
        padding: 0.5px 3px;
        border-radius: 3px;
    }
    [data-theme="dark"] .stream-device {
        background: rgba(15, 23, 42, 0.6);
        color: #64748b;
    }

    /* Card D: Referral Channels Strip */
    .referral-channel-strip {
        background: rgba(248, 250, 252, 0.88);
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        padding: 3.5px 6px;
        height: 56px;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    [data-theme="dark"] .referral-channel-strip {
        background: rgba(15, 23, 42, 0.75);
        border-color: rgba(255, 255, 255, 0.08);
    }
    .ref-header-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .ref-title {
        font-family: var(--font-heading);
        font-size: 0.48rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        color: #0f172a;
    }
    [data-theme="dark"] .ref-title {
        color: #f8fafc;
    }
    .ref-badges-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 2.5px;
    }
    .ref-channel-pill {
        font-size: 0.44rem;
        font-weight: 700;
        color: #334155;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 4px;
        padding: 1.5px 2px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        line-height: 1.1;
    }
    [data-theme="dark"] .ref-channel-pill {
        background: rgba(30, 41, 59, 0.6);
        border-color: rgba(255, 255, 255, 0.08);
        color: #cbd5e1;
    }
    .ref-pct {
        font-size: 0.50rem;
        font-weight: 800;
        font-family: var(--font-heading), monospace;
    }

    /* Bottom Cockpit Status Bar */
    .telemetry-bottom-strip {
        position: relative;
        z-index: 2;
        background: rgba(248, 250, 252, 0.92);
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 2.5px 8px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 0.48rem;
        font-weight: 700;
        color: #475569;
        flex-shrink: 0;
    }
    [data-theme="dark"] .telemetry-bottom-strip {
        background: rgba(15, 23, 42, 0.85);
        border-color: rgba(255, 255, 255, 0.08);
        color: #94a3b8;
    }
    .bottom-kpi-highlight {
        color: #0f172a;
        font-weight: 800;
    }
    [data-theme="dark"] .bottom-kpi-highlight {
        color: #ffffff;
    }

    /* ==========================================================================
       SECTION 8: CAREER PROGRESSION EVOLUTION MATRIX (IT GROWS WITH YOU)
       ========================================================================== */
    .career-progression-matrix {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 24px;
        box-shadow: 0 24px 60px -12px rgba(15, 23, 42, 0.1), 0 0 0 1px rgba(226, 232, 240, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.9);
        position: relative;
        overflow: hidden;
        padding: 20px 24px;
        display: flex;
        flex-direction: column;
        gap: 18px;
        transition: border-color 0.35s ease, box-shadow 0.35s ease;
    }
    [data-theme="dark"] .career-progression-matrix {
        background: #0b1120;
        border-color: rgba(255, 255, 255, 0.08);
        box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.05);
    }

    .progression-ambient-glow {
        position: absolute;
        width: 380px;
        height: 380px;
        border-radius: 50%;
        filter: blur(100px);
        opacity: 0.14;
        pointer-events: none;
        z-index: 0;
    }
    .glow-left { top: -80px; left: -60px; background: radial-gradient(circle, #06b6d4 0%, #3b82f6 100%); }
    .glow-right { bottom: -80px; right: -60px; background: radial-gradient(circle, #f43f5e 0%, #8b5cf6 100%); }

    /* Top Ribbon */
    .progression-top-bar {
        position: relative;
        z-index: 2;
        background: rgba(248, 250, 252, 0.92);
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        padding: 8px 14px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
    [data-theme="dark"] .progression-top-bar {
        background: rgba(15, 23, 42, 0.85);
        border-color: rgba(255, 255, 255, 0.08);
    }

    .progression-status-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #06b6d4;
        box-shadow: 0 0 8px #06b6d4;
        animation: beaconPing 2s cubic-bezier(0, 0, 0.2, 1) infinite;
    }
    .progression-header-title {
        font-family: var(--font-heading);
        font-size: 0.68rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        color: #0f172a;
    }
    [data-theme="dark"] .progression-header-title {
        color: #f8fafc;
    }

    .progression-tag-pill {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: rgba(6, 182, 212, 0.08);
        border: 1px solid rgba(6, 182, 212, 0.25);
        color: #0891b2;
        font-size: 0.64rem;
        font-weight: 700;
        padding: 3px 10px;
        border-radius: 999px;
    }
    [data-theme="dark"] .progression-tag-pill {
        background: rgba(6, 182, 212, 0.15);
        border-color: rgba(6, 182, 212, 0.35);
        color: #67e8f9;
    }

    /* Timeline Stepper Container */
    .progression-timeline-container {
        position: relative;
        z-index: 2;
        padding: 4px 0 8px;
    }

    /* Connected Stepper Progress Track */
    .stepper-track-wrapper {
        position: relative;
        width: 100%;
        margin-bottom: 12px;
        padding: 4px 0;
    }
    .stepper-base-line {
        position: absolute;
        top: 50%;
        left: 8.333%;
        right: 8.333%;
        height: 2.5px;
        background: #e2e8f0;
        transform: translateY(-50%);
        z-index: 1;
        border-radius: 999px;
    }
    [data-theme="dark"] .stepper-base-line {
        background: rgba(255, 255, 255, 0.12);
    }
    .stepper-active-line {
        position: absolute;
        top: 50%;
        left: 8.333%;
        height: 2.5px;
        width: 0%;
        background: linear-gradient(90deg, #06b6d4 0%, #3b82f6 50%, #f43f5e 100%);
        box-shadow: 0 0 10px rgba(6, 182, 212, 0.7);
        transform: translateY(-50%);
        z-index: 2;
        border-radius: 999px;
        transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .stepper-nodes-row {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        position: relative;
        z-index: 3;
    }
    .stepper-node {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        cursor: pointer;
    }
    .node-core {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: #ffffff;
        border: 2px solid #cbd5e1;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 2;
        position: relative;
    }
    [data-theme="dark"] .node-core {
        background: #0f172a;
        border-color: rgba(255, 255, 255, 0.25);
    }
    .node-num {
        font-family: var(--font-monospace), monospace;
        font-size: 0.54rem;
        font-weight: 800;
        color: #64748b;
        position: absolute;
        z-index: 3;
        transition: color 0.3s ease;
    }
    [data-theme="dark"] .node-num {
        color: #94a3b8;
    }

    .node-ring {
        position: absolute;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        border: 1.5px solid transparent;
        opacity: 0;
        transition: all 0.3s ease;
        z-index: 1;
    }

    /* Active & Completed Node States */
    .stepper-node.active .node-core {
        background: #06b6d4;
        border-color: #06b6d4;
        box-shadow: 0 0 12px rgba(6, 182, 212, 0.75);
        transform: scale(1.15);
    }
    .stepper-node.active .node-num {
        color: #ffffff;
    }
    .stepper-node.active .node-ring {
        border-color: rgba(6, 182, 212, 0.45);
        opacity: 1;
        animation: beaconPing 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
    }

    .stepper-node.completed .node-core {
        background: #eff6ff;
        border-color: #06b6d4;
    }
    [data-theme="dark"] .stepper-node.completed .node-core {
        background: rgba(6, 182, 212, 0.2);
        border-color: #06b6d4;
    }
    .stepper-node.completed .node-num {
        color: #0891b2;
    }
    [data-theme="dark"] .stepper-node.completed .node-num {
        color: #67e8f9;
    }

    /* Steps Grid */
    .progression-steps-grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 8px;
        position: relative;
        z-index: 2;
    }

    .progression-step-card {
        background: rgba(248, 250, 252, 0.88);
        border: 1px solid #e2e8f0;
        border-radius: 16px;
        padding: 12px 10px;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
        position: relative;
    }
    [data-theme="dark"] .progression-step-card {
        background: rgba(15, 23, 42, 0.75);
        border-color: rgba(255, 255, 255, 0.08);
    }

    .progression-step-card:hover {
        border-color: #cbd5e1;
        background: #ffffff;
    }
    [data-theme="dark"] .progression-step-card:hover {
        border-color: rgba(255, 255, 255, 0.22);
        background: rgba(30, 41, 59, 0.8);
    }

    .progression-step-card.active {
        background: #ffffff !important;
        border-color: #06b6d4 !important;
        box-shadow: 0 12px 28px -6px rgba(6, 182, 212, 0.22), 0 0 0 1px #06b6d4;
    }
    [data-theme="dark"] .progression-step-card.active {
        background: rgba(15, 23, 42, 0.95) !important;
        border-color: #06b6d4 !important;
        box-shadow: 0 12px 28px -6px rgba(6, 182, 212, 0.35), 0 0 0 1px rgba(6, 182, 212, 0.6);
    }

    .step-card-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        gap: 6px;
    }

    .step-header-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        margin-bottom: 2px;
    }
    .step-phase-badge {
        font-size: 0.52rem;
        font-weight: 800;
        font-family: var(--font-monospace), monospace;
        letter-spacing: 0.04em;
        padding: 1.5px 5px;
        border-radius: 4px;
        text-transform: uppercase;
    }
    .badge-cyan { background: #ecfeff; color: #0891b2; border: 1px solid #cffafe; }
    .badge-blue { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; }
    .badge-purple { background: #faf5ff; color: #7c3aed; border: 1px solid #e9d5ff; }
    .badge-emerald { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; }
    .badge-amber { background: #fffbeb; color: #d97706; border: 1px solid #fde68a; }
    .badge-rose { background: #fff1f2; color: #e11d48; border: 1px solid #fecdd3; }

    [data-theme="dark"] .badge-cyan { background: rgba(6, 182, 212, 0.2); color: #67e8f9; border-color: rgba(6, 182, 212, 0.35); }
    [data-theme="dark"] .badge-blue { background: rgba(37, 99, 235, 0.2); color: #93c5fd; border-color: rgba(37, 99, 235, 0.35); }
    [data-theme="dark"] .badge-purple { background: rgba(124, 58, 237, 0.2); color: #c4b5fd; border-color: rgba(124, 58, 237, 0.35); }
    [data-theme="dark"] .badge-emerald { background: rgba(16, 185, 129, 0.2); color: #6ee7b7; border-color: rgba(16, 185, 129, 0.35); }
    [data-theme="dark"] .badge-amber { background: rgba(217, 119, 6, 0.2); color: #fcd34d; border-color: rgba(217, 119, 6, 0.35); }
    [data-theme="dark"] .badge-rose { background: rgba(244, 63, 94, 0.2); color: #fda4af; border-color: rgba(244, 63, 94, 0.35); }

    .step-status-chip {
        font-size: 0.50rem;
        font-weight: 700;
        color: #64748b;
        background: #f1f5f9;
        padding: 1px 5px;
        border-radius: 3px;
    }
    [data-theme="dark"] .step-status-chip {
        background: rgba(30, 41, 59, 0.7);
        color: #94a3b8;
    }

    /* Icon Box with Stationary Container Lift Rule */
    .step-icon-wrap {
        width: 38px;
        height: 38px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.15rem;
        margin: 4px 0 2px;
        transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
    }
    .progression-step-card:hover .step-icon-wrap {
        transform: translateY(-3px) scale(1.06);
    }
    .progression-step-card.active .step-icon-wrap {
        transform: translateY(-2px) scale(1.08);
    }

    .icon-cyan { background: #ecfeff; color: #0891b2; box-shadow: 0 4px 12px rgba(6, 182, 212, 0.18); }
    .icon-blue { background: #eff6ff; color: #2563eb; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.18); }
    .icon-purple { background: #faf5ff; color: #7c3aed; box-shadow: 0 4px 12px rgba(124, 58, 237, 0.18); }
    .icon-emerald { background: #ecfdf5; color: #059669; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.18); }
    .icon-amber { background: #fffbeb; color: #d97706; box-shadow: 0 4px 12px rgba(217, 119, 6, 0.18); }
    .icon-rose { background: #fff1f2; color: #e11d48; box-shadow: 0 4px 12px rgba(244, 63, 94, 0.18); }

    [data-theme="dark"] .icon-cyan { background: rgba(6, 182, 212, 0.2); color: #67e8f9; box-shadow: 0 4px 16px rgba(6, 182, 212, 0.35); }
    [data-theme="dark"] .icon-blue { background: rgba(37, 99, 235, 0.2); color: #93c5fd; box-shadow: 0 4px 16px rgba(37, 99, 235, 0.35); }
    [data-theme="dark"] .icon-purple { background: rgba(124, 58, 237, 0.2); color: #c4b5fd; box-shadow: 0 4px 16px rgba(124, 58, 237, 0.35); }
    [data-theme="dark"] .icon-emerald { background: rgba(16, 185, 129, 0.2); color: #6ee7b7; box-shadow: 0 4px 16px rgba(16, 185, 129, 0.35); }
    [data-theme="dark"] .icon-amber { background: rgba(217, 119, 6, 0.2); color: #fcd34d; box-shadow: 0 4px 16px rgba(217, 119, 6, 0.35); }
    [data-theme="dark"] .icon-rose { background: rgba(244, 63, 94, 0.2); color: #fda4af; box-shadow: 0 4px 16px rgba(244, 63, 94, 0.35); }

    .step-title {
        font-family: var(--font-heading);
        font-size: 0.82rem;
        font-weight: 800;
        color: #0f172a;
        line-height: 1.2;
    }
    [data-theme="dark"] .step-title {
        color: #f8fafc;
    }

    .step-subtitle {
        font-size: 0.65rem;
        font-weight: 600;
        color: #64748b;
        line-height: 1.2;
    }
    [data-theme="dark"] .step-subtitle {
        color: #94a3b8;
    }

    .step-pill-tag {
        font-size: 0.52rem;
        font-weight: 700;
        color: #334155;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        padding: 2px 6px;
        border-radius: 999px;
        margin-top: 2px;
        white-space: nowrap;
    }
    [data-theme="dark"] .step-pill-tag {
        background: rgba(30, 41, 59, 0.7);
        border-color: rgba(255, 255, 255, 0.08);
        color: #cbd5e1;
    }

    /* Dynamic Evolution Spotlight Panel */
    .progression-spotlight-panel {
        position: relative;
        z-index: 2;
        background: rgba(248, 250, 252, 0.92);
        border: 1px solid #e2e8f0;
        border-radius: 18px;
        padding: 20px 22px;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
    [data-theme="dark"] .progression-spotlight-panel {
        background: rgba(15, 23, 42, 0.85);
        border-color: rgba(255, 255, 255, 0.08);
    }

    .spotlight-split-grid {
        display: grid;
        grid-template-columns: 1.15fr 1fr;
        gap: 20px;
        align-items: center;
    }

    .spotlight-active-stage-badge {
        background: #0f172a;
        color: #ffffff;
        font-size: 0.58rem;
        font-weight: 800;
        padding: 2.5px 8px;
        border-radius: 999px;
        letter-spacing: 0.04em;
    }
    [data-theme="dark"] .spotlight-active-stage-badge {
        background: #06b6d4;
        color: #0b1120;
    }

    .spotlight-tool-badge {
        font-size: 0.58rem;
        font-weight: 700;
        color: #0891b2;
        background: rgba(6, 182, 212, 0.1);
        border: 1px solid rgba(6, 182, 212, 0.25);
        padding: 2px 8px;
        border-radius: 999px;
    }
    [data-theme="dark"] .spotlight-tool-badge {
        color: #67e8f9;
        background: rgba(6, 182, 212, 0.18);
        border-color: rgba(6, 182, 212, 0.35);
    }

    .spotlight-heading {
        font-family: var(--font-heading);
        font-size: 1.15rem;
        font-weight: 800;
        color: #0f172a;
        margin-bottom: 8px;
        line-height: 1.35;
    }
    [data-theme="dark"] .spotlight-heading {
        color: #f8fafc;
    }

    .spotlight-desc {
        font-size: 0.82rem;
        color: #475569;
        line-height: 1.6;
        margin-bottom: 14px;
    }
    [data-theme="dark"] .spotlight-desc {
        color: #94a3b8;
    }

    .spotlight-comparison-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .spotlight-contrast-box {
        border-radius: 10px;
        padding: 9px 12px;
        font-size: 0.68rem;
        display: flex;
        flex-direction: column;
        gap: 3px;
    }
    .box-vulnerable {
        background: #fff1f2;
        border: 1px solid #fecdd3;
        color: #9f1239;
    }
    [data-theme="dark"] .box-vulnerable {
        background: rgba(244, 63, 94, 0.12);
        border-color: rgba(244, 63, 94, 0.25);
        color: #fda4af;
    }
    .box-permanent {
        background: #ecfdf5;
        border: 1px solid #a7f3d0;
        color: #065f46;
    }
    [data-theme="dark"] .box-permanent {
        background: rgba(16, 185, 129, 0.12);
        border-color: rgba(16, 185, 129, 0.25);
        color: #6ee7b7;
    }
    .contrast-title {
        font-weight: 800;
        font-size: 0.62rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }
    .contrast-text {
        line-height: 1.35;
        font-weight: 500;
    }

    /* Right Preview Card */
    .spotlight-preview-card {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 14px;
        box-shadow: 0 16px 36px -8px rgba(15, 23, 42, 0.08);
        padding: 14px 16px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        transition: all 0.35s ease;
    }
    [data-theme="dark"] .spotlight-preview-card {
        background: #0f172a;
        border-color: rgba(255, 255, 255, 0.08);
        box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.6);
    }

    .preview-card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 8px;
        border-bottom: 1px solid #f1f5f9;
    }
    [data-theme="dark"] .preview-card-header {
        border-bottom-color: rgba(255, 255, 255, 0.06);
    }

    .preview-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #06b6d4;
        box-shadow: 0 0 6px #06b6d4;
    }
    .preview-identity-title {
        font-family: var(--font-monospace), monospace;
        font-size: 0.65rem;
        font-weight: 700;
        color: #0f172a;
    }
    [data-theme="dark"] .preview-identity-title {
        color: #f8fafc;
    }

    .preview-status-pill {
        font-size: 0.54rem;
        font-weight: 800;
        background: #ecfdf5;
        color: #059669;
        border: 1px solid #a7f3d0;
        padding: 1.5px 6px;
        border-radius: 999px;
    }
    [data-theme="dark"] .preview-status-pill {
        background: rgba(16, 185, 129, 0.2);
        border-color: rgba(16, 185, 129, 0.35);
        color: #6ee7b7;
    }

    .preview-body-content {
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        padding: 10px 12px;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    [data-theme="dark"] .preview-body-content {
        background: rgba(30, 41, 59, 0.5);
        border-color: rgba(255, 255, 255, 0.08);
    }

    .preview-snippet-badge {
        font-size: 0.54rem;
        font-weight: 800;
        color: #0891b2;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }
    [data-theme="dark"] .preview-snippet-badge {
        color: #67e8f9;
    }
    .preview-snippet-title {
        font-family: var(--font-heading);
        font-size: 0.85rem;
        font-weight: 800;
        color: #0f172a;
    }
    [data-theme="dark"] .preview-snippet-title {
        color: #ffffff;
    }

    .preview-tags-row {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin-top: 2px;
    }
    .preview-tag-chip {
        font-size: 0.52rem;
        font-weight: 700;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        color: #475569;
        padding: 1px 6px;
        border-radius: 4px;
    }
    [data-theme="dark"] .preview-tag-chip {
        background: rgba(15, 23, 42, 0.7);
        border-color: rgba(255, 255, 255, 0.08);
        color: #cbd5e1;
    }

    .preview-stat-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 0.55rem;
        font-weight: 700;
        color: #64748b;
        margin-top: 4px;
        padding-top: 4px;
        border-top: 1px dashed #e2e8f0;
    }
    [data-theme="dark"] .preview-stat-row {
        border-top-color: rgba(255, 255, 255, 0.08);
        color: #94a3b8;
    }

    .preview-card-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 0.56rem;
        font-weight: 700;
        color: #64748b;
    }
    [data-theme="dark"] .preview-card-footer {
        color: #94a3b8;
    }
    .preview-active-pill {
        font-size: 0.52rem;
        font-weight: 800;
        font-family: var(--font-monospace), monospace;
        color: #0891b2;
    }
    [data-theme="dark"] .preview-active-pill {
        color: #67e8f9;
    }

    /* Bottom Permanence Strip */
    .progression-bottom-banner {
        position: relative;
        z-index: 2;
        background: rgba(248, 250, 252, 0.92);
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        padding: 8px 14px;
        display: flex;
        align-items: center;
    }
    [data-theme="dark"] .progression-bottom-banner {
        background: rgba(15, 23, 42, 0.85);
        border-color: rgba(255, 255, 255, 0.08);
    }
    .assurance-item {
        font-size: 0.62rem;
        color: #475569;
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }
    [data-theme="dark"] .assurance-item {
        color: #94a3b8;
    }
    .assurance-item strong {
        color: #0f172a;
    }
    [data-theme="dark"] .assurance-item strong {
        color: #f8fafc;
    }

    @media (max-width: 991px) {
        .progression-steps-grid {
            grid-template-columns: repeat(3, 1fr);
        }
        .progression-energy-rail {
            display: none;
        }
        .spotlight-split-grid {
            grid-template-columns: 1fr;
        }
    }
    @media (max-width: 576px) {
        .progression-steps-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    /* ==========================================================================
       SECTION 9: TEMPLATES SHOWCASE SUITE (HIGH-FIDELITY PERSONA FRAMEWORKS)
       ========================================================================== */
    .templates-showcase-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 18px;
    }
    @media (max-width: 1199px) {
        .templates-showcase-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }
    @media (max-width: 576px) {
        .templates-showcase-grid {
            grid-template-columns: 1fr;
        }
    }

    .template-showcase-card {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 20px;
        box-shadow: 0 16px 36px -10px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(226, 232, 240, 0.6);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: relative;
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }
    [data-theme="dark"] .template-showcase-card {
        background: #0b1120;
        border-color: rgba(255, 255, 255, 0.08);
        box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.04);
    }
    .template-showcase-card:hover {
        border-color: #cbd5e1;
        box-shadow: 0 24px 48px -12px rgba(15, 23, 42, 0.15);
    }
    [data-theme="dark"] .template-showcase-card:hover {
        border-color: rgba(255, 255, 255, 0.22);
        box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.85);
    }

    /* Top Chrome Window Bar */
    .template-card-chrome {
        background: rgba(248, 250, 252, 0.95);
        border-bottom: 1px solid #e2e8f0;
        padding: 8px 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    [data-theme="dark"] .template-card-chrome {
        background: rgba(15, 23, 42, 0.88);
        border-bottom-color: rgba(255, 255, 255, 0.08);
    }

    .template-chrome-dots {
        display: flex;
        align-items: center;
        gap: 4px;
    }
    .template-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
    }
    .t-dot-red { background: #ef4444; }
    .t-dot-yellow { background: #f59e0b; }
    .t-dot-green { background: #10b981; }

    .template-domain-pill {
        font-family: var(--font-monospace), monospace;
        font-size: 0.52rem;
        font-weight: 700;
        color: #64748b;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        padding: 1px 6px;
        border-radius: 999px;
    }
    [data-theme="dark"] .template-domain-pill {
        background: rgba(30, 41, 59, 0.7);
        border-color: rgba(255, 255, 255, 0.08);
        color: #94a3b8;
    }

    .template-archetype-tag {
        font-size: 0.50rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        padding: 1.5px 6px;
        border-radius: 4px;
    }

    /* =============================================================
       LIVE TEMPLATE PREVIEW IFRAME SYSTEM (REAL BROWSER VIEW)
       ============================================================= */
    .template-mockup-frame.template-iframe-container {
        height: 220px;
        position: relative;
        overflow: hidden;
        padding: 0 !important;
        margin: 0 !important;
        background: #080a10;
        border-bottom: 1px solid #e2e8f0;
        border-radius: 0;
        display: block !important;
    }
    [data-theme="dark"] .template-mockup-frame.template-iframe-container {
        background: #05070d;
        border-bottom-color: rgba(255, 255, 255, 0.08);
    }

    .template-preview-iframe {
        width: 1160px;
        height: 900px;
        border: none;
        outline: none;
        display: block;
        pointer-events: none;
        transform: scale(0.245);
        transform-origin: top left;
        background: transparent;
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .template-showcase-card:hover .template-preview-iframe {
        transform: scale(0.252) translateY(-2px);
    }

    .template-iframe-overlay {
        position: absolute;
        inset: 0;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none !important;
        background: transparent;
        transition: background-color 0.25s ease, backdrop-filter 0.25s ease;
        cursor: pointer;
    }

    .template-iframe-overlay:hover {
        background: rgba(15, 23, 42, 0.35);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }

    .preview-hover-cta {
        font-family: var(--font-heading);
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        color: #ffffff;
        background: rgba(15, 23, 42, 0.92);
        border: 1px solid rgba(255, 255, 255, 0.22);
        padding: 6px 14px;
        border-radius: 999px;
        opacity: 0;
        transform: translateY(8px);
        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        display: inline-flex;
        align-items: center;
        gap: 6px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 15px rgba(14, 165, 233, 0.3);
    }

    .template-iframe-overlay:hover .preview-hover-cta {
        opacity: 1;
        transform: translateY(0);
    }

    /* -------------------------------------------------------------
       TEMPLATE CARD INFO BODY & ACTION BUTTONS
       ------------------------------------------------------------- */
    .template-card-body {
        padding: 14px 16px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        flex: 1;
        justify-content: space-between;
    }
    .template-title-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .template-name {
        font-family: var(--font-heading);
        font-size: 1.05rem;
        font-weight: 800;
        color: #0f172a;
    }
    [data-theme="dark"] .template-name {
        color: #ffffff;
    }

    .template-desc {
        font-size: 0.78rem;
        color: #64748b;
        line-height: 1.5;
        margin-bottom: 4px;
    }
    [data-theme="dark"] .template-desc {
        color: #94a3b8;
    }

    .template-chips-wrap {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }
    .template-feature-chip {
        font-size: 0.50rem;
        font-weight: 700;
        background: #f1f5f9;
        color: #475569;
        padding: 1.5px 6px;
        border-radius: 4px;
    }
    [data-theme="dark"] .template-feature-chip {
        background: rgba(30, 41, 59, 0.7);
        color: #cbd5e1;
    }

    /* Card Action Buttons */
    .template-actions-row {
        display: grid;
        grid-template-columns: 1fr 1.15fr;
        gap: 6px;
        margin-top: 8px;
        padding-top: 10px;
        border-top: 1px solid #f1f5f9;
    }
    [data-theme="dark"] .template-actions-row {
        border-top-color: rgba(255, 255, 255, 0.06);
    }

    .btn-template-preview {
        font-size: 0.65rem;
        font-weight: 800;
        padding: 6px 8px;
        border-radius: 8px;
        text-align: center;
        background: #ffffff;
        border: 1px solid #cbd5e1;
        color: #0f172a;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        transition: all 0.2s ease;
    }
    [data-theme="dark"] .btn-template-preview {
        background: rgba(30, 41, 59, 0.6);
        border-color: rgba(255, 255, 255, 0.15);
        color: #f8fafc;
    }
    .btn-template-preview:hover {
        background: #f8fafc;
        border-color: #0f172a;
        color: #0f172a;
    }
    [data-theme="dark"] .btn-template-preview:hover {
        background: rgba(30, 41, 59, 0.95);
        border-color: #ffffff;
        color: #ffffff;
    }

    .btn-template-use {
        font-size: 0.65rem;
        font-weight: 800;
        padding: 6px 8px;
        border-radius: 8px;
        text-align: center;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        transition: all 0.2s ease;
    }
    .use-cyan { background: #06b6d4; color: #0b1120; }
    .use-cyan:hover { background: #0891b2; color: #ffffff; }
    .use-purple { background: #6366f1; color: #ffffff; }
    .use-purple:hover { background: #4f46e5; color: #ffffff; }
    .use-emerald { background: #10b981; color: #0b1120; }
    .use-emerald:hover { background: #059669; color: #ffffff; }
    .use-amber { background: #f59e0b; color: #0b1120; }
    .use-amber:hover { background: #d97706; color: #ffffff; }

    /* Clean Textual Bottom Gallery Link & Full Pricing Link (No Box, No Underline) */
    .template-gallery-link,
    .home-pricing-full-link {
        font-family: var(--font-body), sans-serif;
        font-size: 1.05rem;
        font-weight: 600;
        color: var(--neon-primary);
        text-decoration: none !important;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: color 0.2s ease, opacity 0.2s ease;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
    }
    .template-gallery-link:hover,
    .home-pricing-full-link:hover {
        color: var(--neon-primary) !important;
        opacity: 0.88;
        text-decoration: none !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    .template-gallery-link i,
    .home-pricing-full-link i {
        display: inline-block;
        transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        font-size: 1.05rem;
    }
    .template-gallery-link:hover i,
    .home-pricing-full-link:hover i {
        transform: translateX(4px);
    }
    [data-theme="light"] .template-gallery-link,
    [data-theme="light"] .home-pricing-full-link {
        color: #0284c7;
        background: transparent !important;
    }
    [data-theme="light"] .template-gallery-link:hover,
    [data-theme="light"] .home-pricing-full-link:hover {
        color: #0369a1 !important;
        text-decoration: none !important;
        background: transparent !important;
    }