/* ==========================================================================
           DESIGN TOKENS & SYSTEM VARIABLES
           ========================================================================== */
        :root {
            /* GoTrace Brand Colors */
            --primary: #0D52D6;
            --primary-hover: #0A43B0;
            --primary-light: #EFF4FF;
            --primary-border: #BFDBFE;

            /* Safe / Validated states (Green) */
            --success: #15803D;
            --success-hover: #047857;
            --success-light: #ECFDF5;
            --success-border: #A7F3D0;

            /* Warning / Alert states (Amber) */
            --warning: #F59E0B;
            --warning-hover: #D97706;
            --warning-light: #FFFBEB;
            --warning-border: #FDE68A;

            /* High Risk / Error states (Red) */
            --error: #EF4444;
            --error-hover: #DC2626;
            --error-light: #FEF2F2;
            --error-border: #FCA5A5;

            /* Neutral Backgrounds & Borders */
            --bg-main: #F5F5F7;
            --bg-card: #FFFFFF;
            --bg-body-dark: #1D1D1F;
            --bg-card-dark: #1E293B;
            --border-color: #E2E8F0;
            --border-color-dark: #334155;

            /* Typography Colors */
            --text-main: #1D1D1F;
            --text-muted: #64748B;
            --text-main-dark: #F1F5F9;
            --text-muted-dark: #94A3B8;

            /* Fonts */
            --font-title: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

            /* Borders and Radius */
            --radius-sm: 6px;
            --radius-md: 12px;
            --radius-lg: 16px;
            --radius-full: 9999px;

            /* Elevation */
            --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05);
            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.08);
            
            /* Transitions */
            --transition-fast: 0.15s ease;
            --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            
            /* Translucent Glassmorphic tokens */
            --bg-navbar-translucent: rgba(255, 255, 255, 0.82);
        }

        [data-theme="dark"] {
            --bg-main: #0B0F19;
            --bg-card: #131B2E;
            --border-color: #222F47;
            --text-main: var(--text-main-dark);
            --text-muted: var(--text-muted-dark);
            --primary-light: rgba(13, 82, 214, 0.15);
            --success-light: rgba(21, 128, 61, 0.15);
            --warning-light: rgba(245, 158, 11, 0.15);
            --error-light: rgba(239, 68, 68, 0.15);
            --bg-navbar-translucent: rgba(19, 27, 46, 0.85);
        }

        /* ==========================================================================
           BASE STYLES & RESET
           ========================================================================== */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: var(--font-body);
            background-color: var(--bg-main); /* Match Apple Store neutral grey-white (#F5F5F7) */
            color: var(--text-main);
            min-height: 100vh;
            overflow-x: hidden;
            display: flex;
            flex-direction: column;
            line-height: 1.6;
            transition: padding-right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* ==========================================================================
           PROTOTYPE CONTROL BAR (TOP FIX)
           ========================================================================== */
        .proto-control-bar {
            background-color: #1E293B;
            border-bottom: 2px solid #334155;
            height: 58px;
            padding: 0 24px;
            display: flex;
            flex-wrap: nowrap;
            overflow-x: auto;
            scrollbar-width: none; /* Hide scrollbar for clean look */
            justify-content: space-between;
            align-items: center;
            gap: 16px;
            z-index: 1000;
            position: sticky;
            top: 0;
            width: 100%;
            box-sizing: border-box;
            transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .proto-control-bar::-webkit-scrollbar {
            display: none;
        }

        .proto-title {
            font-family: var(--font-title);
            font-weight: 700;
            font-size: 16px;
            color: #38BDF8;
            display: flex;
            align-items: center;
            gap: 8px;
            letter-spacing: -0.01em;
            flex-shrink: 0;
        }

        .proto-title span {
            background-color: #0284C7;
            color: white;
            font-size: 10px;
            padding: 2px 6px;
            border-radius: var(--radius-sm);
            text-transform: uppercase;
            font-family: var(--font-body);
            letter-spacing: 0.05em;
        }

        .proto-toggles {
            display: flex;
            align-items: center;
            gap: 16px;
            flex-wrap: nowrap;
            flex-shrink: 0;
        }

        .toggle-group {
            display: flex;
            align-items: center;
            background-color: #1D1D1F;
            padding: 4px;
            border-radius: var(--radius-sm);
            border: 1px solid #475569;
        }

        .toggle-label {
            font-size: 12px;
            font-weight: 600;
            color: #94A3B8;
            margin-right: 8px;
        }

        .toggle-btn {
            background: none;
            border: none;
            color: #94A3B8;
            padding: 6px 12px;
            font-size: 12px;
            font-weight: 500;
            border-radius: 4px;
            cursor: pointer;
            transition: var(--transition-fast);
            font-family: var(--font-body);
        }

        .toggle-btn.active {
            background-color: var(--primary);
            color: white;
            font-weight: 600;
        }

        .toggle-btn:hover:not(.active) {
            color: #F1F5F9;
            background-color: #334155;
        }

        /* ==========================================================================
           SIMULATOR WRAPPER
           ========================================================================== */
        .simulator-wrapper {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            padding: 24px;
            transition: all 0.3s ease;
            width: 100%;
        }

        /* Simulated frame style for Device size preview */
        .simulator-container {
            width: 100%;
            max-width: 1280px;
            background-color: var(--bg-main);
            color: var(--text-main);
            border-radius: var(--radius-lg);
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.03);
            overflow: visible; /* Changed from hidden to allow sticky vertical navbar scroll tracking */
            transition: max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            border: 1px solid var(--border-color);
        }

        /* Mobile Simulation Mode */
        .simulator-container.mobile-sim {
            max-width: 375px;
            border: 8px solid #334155;
            border-radius: 40px;
            height: 812px;
            overflow-y: auto;
            scrollbar-width: thin;
        }

        .simulator-container.mobile-sim::-webkit-scrollbar {
            width: 4px;
        }

        .simulator-container.mobile-sim::-webkit-scrollbar-thumb {
            background-color: #475569;
            border-radius: 2px;
        }

        /* ==========================================================================
           GOTRACE APP LAYOUT
           ========================================================================== */
        .app-header {
            background-color: var(--bg-card);
            border-bottom: 1px solid var(--border-color);
            padding: 16px 24px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 50;
            border-top-left-radius: var(--radius-lg);
            border-top-right-radius: var(--radius-lg);
        }

        .app-logo {
            font-family: var(--font-title);
            font-weight: 800;
            font-size: 22px;
            color: var(--primary);
            display: flex;
            align-items: center;
            gap: 6px;
            text-decoration: none;
            letter-spacing: -0.03em;
        }

        .app-logo svg {
            fill: var(--primary);
            height: 24px;
            width: auto;
        }

        .app-logo span {
            color: var(--text-main);
        }

        .app-nav {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .theme-toggle {
            background: none;
            border: 1px solid var(--border-color);
            border-radius: var(--radius-sm);
            padding: 6px;
            cursor: pointer;
            color: var(--text-muted);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition-fast);
        }

        .theme-toggle:hover {
            color: var(--primary);
            background-color: var(--primary-light);
        }

        .btn-header {
            background: none;
            border: 1px solid var(--border-color);
            border-radius: var(--radius-sm);
            padding: 8px 16px;
            font-size: 14px;
            font-weight: 600;
            color: var(--text-main);
            cursor: pointer;
            transition: var(--transition-fast);
            text-decoration: none;
            font-family: var(--font-body);
        }

        .btn-header:hover {
            border-color: var(--primary);
            color: var(--primary);
        }

        .btn-header-primary {
            background-color: var(--primary);
            border-color: var(--primary);
            color: white;
        }

        .btn-header-primary:hover {
            background-color: var(--primary-hover);
            border-color: var(--primary-hover);
            color: white;
        }

        /* Breadcrumbs */
        .breadcrumbs-container {
            padding: 16px 24px 8px;
            background-color: var(--bg-main);
        }

        .breadcrumbs {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            color: var(--text-muted);
            list-style: none;
            overflow-x: auto;
            white-space: nowrap;
        }

        .breadcrumbs li:not(:last-child)::after {
            content: "/";
            margin-left: 8px;
            color: var(--text-muted);
            opacity: 0.5;
        }

        .breadcrumbs a {
            color: var(--text-muted);
            text-decoration: none;
            transition: var(--transition-fast);
        }

        .breadcrumbs a:hover {
            color: var(--primary);
        }

        .breadcrumbs li.active {
            color: var(--text-main);
            font-weight: 500;
        }

        /* Main Container */
        .app-body {
            padding: 12px 24px 48px;
            display: block; /* Changed from flex to block to resolve Chrome/Safari sticky height containment bug */
        }

        .app-body > * {
            margin-bottom: 32px;
        }

        .app-body > *:last-child {
            margin-bottom: 0;
        }

        /* ==========================================================================
           PRODUCT HERO SECTION (ABOVE THE FOLD)
           ========================================================================== */
        .hero-section {
            display: grid;
            grid-template-columns: 0.72fr 1fr;
            gap: 32px;
            background-color: var(--bg-card);
            padding: 32px;
            border-radius: var(--radius-lg);
            border: none;
            box-shadow: var(--shadow-sm);
            transition: var(--transition-normal);
        }

        /* Media Gallery (Left Column) */
        .hero-media {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .main-image-container {
            position: relative;
            aspect-ratio: 16/10;
            background-color: #F1F5F9;
            border-radius: var(--radius-md);
            overflow: hidden;
            border: 1px solid var(--border-color);
        }

        .main-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition-normal);
        }

        .dynamic-island-badge {
            position: absolute;
            top: 16px;
            left: 50%;
            transform: translateX(-50%);
            background: #000000 !important;
            border: 1px solid rgba(255, 255, 255, 0.15) !important;
            color: #FFFFFF !important;
            padding: 6px 16px !important;
            border-radius: 9999px !important;
            font-size: 11px !important;
            font-weight: 600 !important;
            letter-spacing: 0.02em !important;
            display: flex !important;
            align-items: center !important;
            gap: 8px !important;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35) !important;
            backdrop-filter: blur(12px) !important;
            -webkit-backdrop-filter: blur(12px) !important;
            z-index: 10;
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
            cursor: default;
            user-select: none;
            white-space: nowrap;
        }

        .dynamic-island-badge:hover {
            transform: translateX(-50%) scale(1.06);
            box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45) !important;
            border-color: rgba(255, 255, 255, 0.3) !important;
            background: #09090b !important;
        }

        .dynamic-island-badge .island-icon {
            flex-shrink: 0;
            filter: drop-shadow(0 0 2px rgba(34, 197, 94, 0.6));
            animation: island-pulse 2s infinite alternate;
        }

        @keyframes island-pulse {
            0% { opacity: 0.8; }
            100% { opacity: 1; filter: drop-shadow(0 0 4px rgba(34, 197, 94, 0.9)); }
        }



        .thumbnail-row {
            display: flex;
            gap: 12px;
            overflow-x: auto;
            padding-bottom: 4px;
        }

        .thumbnail-btn {
            flex: 0 0 72px;
            aspect-ratio: 1;
            border-radius: var(--radius-sm);
            border: 2px solid transparent;
            overflow: hidden;
            cursor: pointer;
            padding: 0;
            background-color: #F1F5F9;
            transition: var(--transition-fast);
        }

        .thumbnail-btn img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .thumbnail-btn.active {
            border-color: var(--primary);
        }

        /* Information Column (Right Column) */
        .hero-info {
            display: flex;
            flex-direction: column;
        }

        .product-badge-row {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 12px;
        }

        .badge-type {
            background-color: var(--primary-light);
            color: var(--primary);
            font-size: 11px;
            font-weight: 700;
            padding: 3px 8px;
            border-radius: var(--radius-sm);
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .product-title {
            font-family: var(--font-title);
            font-size: 28px;
            font-weight: 800;
            line-height: 1.25;
            letter-spacing: -0.02em;
            color: var(--text-main);
            margin-bottom: 20px;
        }

        .product-meta-summary {
            display: flex;
            align-items: center;
            gap: 16px;
            font-size: 14px;
            color: var(--text-muted);
            margin-bottom: 20px;
            padding-bottom: 16px;
            border-bottom: 1px solid var(--border-color);
            flex-wrap: wrap;
        }

        .supplier-link {
            font-weight: 600;
            color: var(--primary);
            text-decoration: none;
        }

        .supplier-link:hover {
            text-decoration: underline;
        }

        .rating-stars-container {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .rating-num {
            font-weight: 700;
            color: var(--text-main);
        }

        .star-icon {
            fill: var(--warning);
            width: 16px;
            height: 16px;
        }

        .star-icon-muted {
            fill: #CBD5E1;
            width: 16px;
            height: 16px;
        }

        .review-count {
            color: var(--text-muted);
            font-size: 13px;
        }

        /* Trust Score Card Block */
        /* Redesigned Premium Trust Score Card */
        .trust-card-wrapper {
            background: linear-gradient(135deg, var(--bg-card) 0%, rgba(240, 253, 244, 0.4) 100%);
            border: 1px solid rgba(74, 222, 128, 0.35);
            border-radius: var(--radius-lg);
            padding: 18px;
            margin-bottom: 24px;
            box-shadow: 0 4px 18px -2px rgba(74, 222, 128, 0.08);
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            gap: 14px;
            transition: var(--transition-normal);
        }

        .dark-theme .trust-card-wrapper {
            background: linear-gradient(135deg, var(--bg-card) 0%, rgba(6, 78, 59, 0.15) 100%);
            border: 1px solid rgba(21, 128, 61, 0.25);
            box-shadow: 0 4px 18px -2px rgba(21, 128, 61, 0.04);
        }

        .trust-card-wrapper:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 22px -2px rgba(74, 222, 128, 0.12);
        }

        .trust-card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px dashed rgba(74, 222, 128, 0.25);
            padding-bottom: 10px;
        }

        .trust-card-badge {
            background-color: var(--success-light);
            color: var(--success-hover);
            font-size: 10px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            padding: 4px 8px;
            border-radius: var(--radius-sm);
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }

        .trust-card-seal-text {
            font-size: 11px;
            color: var(--text-muted);
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .trust-card-body {
            display: grid;
            grid-template-columns: 88px 1fr;
            gap: 16px;
            align-items: center;
        }

        @media (max-width: 576px) {
            .trust-card-body {
                grid-template-columns: 1fr;
                justify-items: center;
                gap: 16px;
            }
        }

        .trust-gauge-container {
            width: 80px;
            height: 80px;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .trust-gauge-svg {
            transform: rotate(-90deg);
            width: 100%;
            height: 100%;
        }

        .gauge-bg {
            fill: none;
            stroke: rgba(226, 232, 240, 0.8);
            stroke-width: 3.2;
        }

        .dark-theme .gauge-bg {
            stroke: rgba(51, 65, 85, 0.4);
        }

        .gauge-fill {
            fill: none;
            stroke: var(--success);
            stroke-width: 3.2;
            stroke-linecap: round;
        }

        .trust-gauge-overlay {
            position: absolute;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

        .trust-gauge-num {
            font-family: var(--font-title);
            font-size: 18px;
            font-weight: 800;
            color: var(--success-hover);
            line-height: 1;
        }

        .trust-gauge-label {
            font-size: 8px;
            font-weight: 500;
            color: var(--text-muted);
            margin-top: 2px;
            text-transform: uppercase;
        }

        .trust-checkpoints-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .trust-checkpoint-item {
            display: flex;
            align-items: flex-start;
            gap: 10px;
        }

        .trust-checkpoint-icon {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            margin-top: 1px;
        }

        .trust-checkpoint-icon.success {
            background-color: var(--success-light);
            color: var(--success-hover);
        }

        .trust-checkpoint-icon.info {
            background-color: var(--primary-light);
            color: var(--primary);
        }

        .trust-checkpoint-icon svg {
            width: 10px;
            height: 10px;
        }

        .trust-checkpoint-content {
            display: flex;
            flex-direction: column;
            gap: 1px;
        }

        .trust-checkpoint-title {
            font-size: 13px;
            font-weight: 700;
            color: var(--text-main);
        }

        .trust-checkpoint-desc {
            font-size: 11px;
            color: var(--text-muted);
            line-height: 1.3;
        }

        .trust-card-footer {
            border-top: 1px dashed rgba(74, 222, 128, 0.2);
            padding-top: 8px;
            font-size: 10px;
            color: var(--text-muted);
            display: flex;
            align-items: center;
            gap: 6px;
            line-height: 1.4;
        }

        .trust-card-footer svg {
            color: var(--success-hover);
            flex-shrink: 0;
        }

        /* Key-Value Quick Specs */
        .quick-specs-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            margin-bottom: 24px;
            font-size: 13px;
        }

        .quick-spec-item {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .quick-spec-label {
            color: var(--text-muted);
            font-size: 11px;
            text-transform: uppercase;
            font-weight: 600;
            letter-spacing: 0.02em;
        }

        .quick-spec-val {
            color: var(--text-main);
            font-weight: 600;
        }

        /* Hero CTA Buttons */
        .hero-actions-container {
            display: flex;
            gap: 12px;
            margin-top: auto;
        }

        .btn-cta {
            flex: 1;
            padding: 12px 24px;
            border-radius: var(--radius-sm);
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
            transition: var(--transition-fast);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            border: none;
            text-decoration: none;
            font-family: var(--font-body);
        }

        .btn-cta-primary {
            background-color: var(--primary);
            color: white;
        }

        .btn-cta-primary:hover {
            background-color: var(--primary-hover);
        }

        .btn-cta-secondary {
            background-color: var(--bg-main);
            border: 1px solid var(--border-color);
            color: var(--text-main);
        }

        .btn-cta-secondary:hover {
            background-color: var(--border-color);
        }

        /* HERO LAYOUT VARIANT STYLING */
        /* Variant B: Trust-first */
        .hero-section.variant-b {
            grid-template-columns: 0.8fr 1.2fr;
        }

        .hero-section.variant-b .trust-summary-block {
            grid-column: 1 / -1;
            order: -1; /* Pushed to the top of the card */
        }

        /* Variant C: Data-Commerce Hybrid */
        .hero-section.variant-c {
            position: relative;
            padding-bottom: 96px; /* Space for the bottom origin rail */
        }

        .origin-rail {
            display: none; /* Only visible in Variant C */
        }

        .hero-section.variant-c .origin-rail {
            display: flex;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 72px;
            background-color: var(--primary-light);
            border-top: 1px solid var(--primary-border);
            align-items: center;
            justify-content: space-around;
            padding: 0 32px;
            font-size: 13px;
        }

        .origin-rail-step {
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--primary);
            font-weight: 600;
        }

        .origin-rail-step svg {
            width: 18px;
            height: 18px;
        }

        .origin-rail-arrow {
            color: var(--primary-border);
        }

        /* ==========================================================================
           STICKY SECTION NAVIGATION
           ========================================================================== */
        .sticky-navbar {
            background-color: var(--bg-navbar-translucent);
            backdrop-filter: blur(20px) saturate(190%);
            -webkit-backdrop-filter: blur(20px) saturate(190%);
            border: 1px solid var(--border-color);
            width: max-content;
            max-width: 90vw;
            position: sticky;
            top: 0; /* Sticks right at the top viewport edge */
            left: 50% !important;
            transform: translateX(-50%) !important;
            margin: 24px 0 !important; /* Margin vertical, horizontal centered by translate */
            padding: 4px !important;
            display: flex;
            flex-direction: row;
            gap: 4px;
            z-index: 40;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
            border-radius: 9999px;
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            overflow: visible;
            white-space: nowrap;
        }

        .sticky-navbar::-webkit-scrollbar {
            display: none;
        }

        /* Simple collapsed sticky-navbar layout (floating compact pill) */
        .sticky-navbar.collapsed {
            background-color: var(--bg-navbar-translucent) !important;
            backdrop-filter: blur(20px) saturate(190%) !important;
            -webkit-backdrop-filter: blur(20px) saturate(190%) !important;
            box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.08), 0 4px 10px -5px rgba(0, 0, 0, 0.04) !important;
            border-color: var(--border-color) !important;
            transform: scale(0.97) translateX(-51.5%) !important; /* Smooth hardware scale transition with centered position */
        }
        
        .sticky-navbar .navbar-item {
            flex: 0 0 auto !important;
            width: auto !important;
            padding: 6px 18px !important;
            font-size: 13px !important;
            border-radius: 9999px !important;
            white-space: nowrap !important;
            display: flex !important;
            align-items: center !important;
            gap: 6px !important;
            color: var(--text-muted) !important;
            text-decoration: none;
            position: relative;
            z-index: 2 !important; /* draw above slider */
            background-color: transparent !important;
            box-shadow: none !important;
            border: none !important;
            transition: color 0.3s cubic-bezier(0.25, 1, 0.5, 1);
        }

        .sticky-navbar .navbar-item svg {
            width: 14px !important;
            height: 14px !important;
            transition: color 0.3s cubic-bezier(0.25, 1, 0.5, 1);
        }

        .sticky-navbar .navbar-item.active {
            color: #ffffff !important;
            background-color: transparent !important;
            box-shadow: none !important;
            border: none !important;
        }

        .sticky-navbar .navbar-item.active svg {
            color: #ffffff !important;
        }

        .sticky-navbar .navbar-slider {
            position: absolute;
            background-color: var(--primary);
            box-shadow: 0 4px 12px -3px rgba(13, 82, 214, 0.35);
            border-radius: 9999px;
            z-index: 1; /* behind text */
            transition: all 0.32s cubic-bezier(0.25, 1, 0.5, 1);
            pointer-events: none;
        }

        [data-theme="dark"] .sticky-navbar .navbar-slider {
            box-shadow: 0 4px 12px -3px rgba(13, 82, 214, 0.6);
        }

        .navbar-item {
            flex: 1;
            text-align: center;
            justify-content: center;
            padding: 10px 16px;
            font-size: 14px;
            font-weight: 600;
            color: var(--text-muted);
            text-decoration: none;
            border-radius: var(--radius-sm);
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            display: flex;
            align-items: center;
            gap: 8px;
            white-space: nowrap; /* Prevent wrapping of text */
        }

        .navbar-item.active {
            background-color: var(--primary);
            color: #ffffff;
            box-shadow: 0 4px 12px rgba(13, 82, 214, 0.25);
        }

        .navbar-item:hover:not(.active) {
            color: var(--text-main);
            background-color: var(--bg-main);
        }

        /* ==========================================================================
           SECTIONS GENERAL STYLING
           ========================================================================== */
        .app-section {
            background-color: var(--bg-card);
            border-radius: var(--radius-lg);
            border: none;
            padding: 40px 32px 32px; /* Increased top padding from 32px to 40px for more breathing room */
            box-shadow: var(--shadow-sm);
            scroll-margin-top: 116px; /* Offset for sticky navbar */
        }

        .section-header {
            margin-bottom: 24px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 16px;
        }

        .section-title {
            font-family: var(--font-title);
            font-size: 22px;
            font-weight: 600;
            letter-spacing: -0.01em;
            color: var(--text-main);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        /* ==========================================================================
           SECTION: OVERVIEW
           ========================================================================== */
        .overview-grid {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 32px;
        }

        .overview-desc {
            font-size: 15px;
            line-height: 1.65;
            color: var(--text-main);
        }

        .overview-desc p {
            margin-bottom: 12px;
        }

        .overview-table-container {
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            overflow: hidden;
        }

        .overview-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 13px;
            text-align: left;
        }

        .overview-table th, .overview-table td {
            padding: 12px 16px;
            border-bottom: 1px solid var(--border-color);
        }

        .overview-table th {
            background-color: var(--bg-main);
            color: var(--text-muted);
            font-weight: 600;
            width: 40%;
        }

        .overview-table td {
            color: var(--text-main);
            font-weight: 500;
        }

        .overview-table tr:last-child th, .overview-table tr:last-child td {
            border-bottom: none;
        }

        /* ==========================================================================
           SECTION: INGREDIENTS / DISHES
           ========================================================================== */
        .dishes-layout {
            display: flex;
            flex-direction: column;
            gap: 24px;
        }

        .dishes-cards-grid {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 16px;
        }

        .dish-card {
            width: 140px;
            flex-shrink: 0;
            background-color: var(--bg-main);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            padding: 12px;
            text-align: center;
            cursor: pointer;
            transition: var(--transition-normal);
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
        }

        .dish-card:hover {
            transform: translateY(-2px);
            border-color: var(--primary);
            box-shadow: var(--shadow-md);
        }

        .dish-card.active,
        body.v7-liquid-glass .dish-card.active {
            border-color: var(--primary) !important;
            border-width: 2px !important;
            background-color: var(--bg-card) !important;
            transform: translateY(-4px) !important;
            box-shadow: 0 8px 24px rgba(10, 95, 232, 0.12) !important;
        }

        body.v7-liquid-glass .dish-card.active {
            background-color: var(--bg-card) !important;
        }

        /* Bottom pill indicator removed */
        .dish-card.active::after,
        body.v7-liquid-glass .dish-card.active::after {
            display: none !important;
        }

        .dish-img {
            width: 72px;
            height: 72px;
            border-radius: var(--radius-full);
            object-fit: cover;
            border: 2px solid white;
            box-shadow: var(--shadow-sm);
            transition: transform var(--transition-fast) ease, border-color var(--transition-fast) ease, box-shadow var(--transition-fast) ease;
        }

        .dish-card.active .dish-img {
            border-color: var(--primary) !important;
            transform: scale(1.08) !important;
            box-shadow: 0 4px 12px rgba(10, 95, 232, 0.18) !important;
        }

        .dish-card.active .dish-title {
            color: var(--primary) !important;
            font-weight: 700 !important;
        }

        .dish-title {
            font-size: 13px;
            font-weight: 600;
            color: var(--text-main);
            margin-top: 4px;
            line-height: 1.4em;
            height: 2.8em;
            overflow: hidden;
            display: block;
            position: relative;
            width: 100%;
            text-align: center;
        }

        .dish-title-inner {
            display: block;
            transition: transform 0.3s ease;
            word-break: break-word;
        }

        /* Hover scroll animation for text overflow */
        .dish-card.has-overflow:hover .dish-title-inner {
            animation: dish-title-scroll 4s linear infinite alternate;
        }

        @keyframes dish-title-scroll {
            0%, 20% {
                transform: translateY(0);
            }
            80%, 100% {
                transform: translateY(calc(-100% + 2.8em));
            }
        }

        .dish-badge {
            font-size: 10px;
            background-color: var(--success-light);
            color: var(--success-hover);
            border: 1px solid var(--success-border);
            padding: 2px 6px;
            border-radius: var(--radius-full);
            font-weight: 600;
        }

        /* Ingredient Drilldown Details */
        .ingredient-drilldown-box {
            background-color: var(--bg-main);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            padding: 20px;
        }

        .drilldown-header {
            font-size: 14px;
            font-weight: 500;
            color: var(--text-muted);
            text-transform: uppercase;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 6px;
            letter-spacing: 0.02em;
        }

        .ingredients-flow-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
        }

        .ingredient-tag {
            background-color: var(--bg-card);
            border: 1px solid var(--border-color);
            color: var(--text-main);
            padding: 8px 16px;
            border-radius: var(--radius-full);
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: var(--transition-fast);
        }

        .ingredient-tag:hover {
            border-color: var(--primary);
            color: var(--primary);
        }

        .ingredient-tag.active {
            background-color: var(--primary);
            border-color: var(--primary);
            color: white;
            font-weight: 600;
        }

        .ingredient-tag-status {
            width: 8px;
            height: 8px;
            border-radius: var(--radius-full);
            background-color: var(--success);
        }

        .ingredient-tag.active .ingredient-tag-status {
            background-color: white;
        }

        /* ==========================================================================
           SECTION: TRACEABILITY EXPLORER
           ========================================================================== */
        .explorer-section {
            background-color: var(--bg-card);
            border-radius: var(--radius-lg);
            border: none;
            padding: 32px;
            box-shadow: var(--shadow-sm);
        }

        .explorer-workspace {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        /* Segmented View Mode Toggle */
        .explorer-toolbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 16px;
            flex-wrap: wrap;
            gap: 16px;
        }

        .view-mode-selector {
            display: flex;
            background-color: var(--bg-main);
            padding: 4px;
            border-radius: var(--radius-md);
            border: 1px solid var(--border-color);
        }

        .view-mode-btn {
            background: none;
            border: none;
            color: var(--text-muted);
            padding: 8px 16px;
            font-size: 13px;
            font-weight: 600;
            border-radius: var(--radius-sm);
            cursor: pointer;
            transition: var(--transition-fast);
            display: flex;
            align-items: center;
            gap: 6px;
            font-family: var(--font-body);
        }

        .view-mode-btn.active {
            background-color: var(--bg-card);
            color: var(--primary);
            box-shadow: var(--shadow-sm);
        }

        .explorer-filters {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
        }

        .filter-select {
            background-color: var(--bg-card);
            border: 1px solid var(--border-color);
            color: var(--text-main);
            padding: 6px 12px;
            border-radius: var(--radius-sm);
            font-size: 13px;
            font-weight: 500;
            outline: none;
            cursor: pointer;
            font-family: var(--font-body);
        }

        /* Layout variants of the Explorer workspace */
        /* Variant A: Full Width Explorer (Default CSS structure matches this mostly) */
        .explorer-container.variant-a {
            display: block;
        }

        /* Variant B: Ingredient Sidebar + Canvas */
        .explorer-container.variant-b {
            display: grid;
            grid-template-columns: 240px 1fr;
            gap: 24px;
        }

        .variant-b-sidebar {
            display: none; /* Hide unless Variant B is active */
            background-color: var(--bg-main);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            padding: 16px;
        }

        .explorer-container.variant-b .variant-b-sidebar {
            display: block;
        }

        /* Variant C: Context Canvas (Dashboard setup) */
        .explorer-container.variant-c {
            display: grid;
            grid-template-columns: 1fr 320px;
            gap: 24px;
        }

        .variant-c-inspector {
            display: none; /* Hide unless Variant C is active */
            background-color: var(--bg-main);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            padding: 20px;
        }

        .explorer-container.variant-c .variant-c-inspector {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        /* Scope Selector Indicator */
        .scope-indicator-bar {
            background-color: var(--primary-light);
            border: 1px solid var(--primary-border);
            color: var(--primary);
            padding: 8px 16px;
            border-radius: var(--radius-sm);
            font-size: 13px;
            font-weight: 600;
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .btn-clear-scope {
            background: none;
            border: none;
            color: var(--primary);
            cursor: pointer;
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            font-family: var(--font-body);
            letter-spacing: 0.05em;
        }

        .btn-clear-scope:hover {
            text-decoration: underline;
        }

        .btn-timeline-toggle {
            background-color: var(--bg-card);
            border: 1px solid var(--border-color);
            color: var(--text-main);
            font-weight: 700;
            font-size: 11.5px;
            padding: 8px 24px;
            border-radius: var(--radius-full);
            cursor: pointer;
            transition: var(--transition-normal);
            box-shadow: var(--shadow-sm);
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .btn-timeline-toggle:hover {
            background-color: var(--primary-light);
            border-color: var(--primary);
            color: var(--primary);
            transform: translateY(-1px);
            box-shadow: var(--shadow-md);
        }

        /* TIMELINE VIEW (MODE 1) */
        .timeline-view {
            position: relative;
            padding-left: 32px;
            display: flex;
            flex-direction: column;
            gap: 24px;
        }

        .timeline-view::before {
            content: '';
            position: absolute;
            left: 11px;
            top: 12px;
            bottom: 12px;
            width: 2px;
            background-color: var(--border-color);
            z-index: 1;
        }

        .timeline-node {
            position: relative;
            z-index: 2;
        }

        .timeline-marker {
            position: absolute;
            left: -32px;
            top: 2px;
            width: 24px;
            height: 24px;
            border-radius: var(--radius-full);
            background-color: var(--bg-card);
            border: 2px solid var(--border-color);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 3;
            transition: var(--transition-normal);
        }

        .timeline-marker svg {
            width: 12px;
            height: 12px;
            color: var(--text-muted);
        }

        /* Marker coloring based on event state */
        .timeline-node.verified .timeline-marker {
            border-color: var(--success);
            background-color: var(--success-light);
        }

        .timeline-node.verified .timeline-marker svg {
            color: var(--success);
        }

        .timeline-node.warning .timeline-marker {
            border-color: var(--warning);
            background-color: var(--warning-light);
        }

        .timeline-node.warning .timeline-marker svg {
            color: var(--warning);
        }

        .timeline-node.unverified .timeline-marker {
            border-color: var(--text-muted);
            background-color: var(--bg-main);
        }

        .timeline-node.active .timeline-marker {
            box-shadow: 0 0 0 4px var(--primary-light);
            border-color: var(--primary);
        }

        .timeline-card {
            background-color: var(--bg-main);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            padding: 16px 20px;
            cursor: pointer;
            transition: var(--transition-normal);
            display: grid;
            grid-template-columns: auto 1fr auto;
            gap: 16px;
            align-items: center;
        }

        .timeline-card:hover {
            transform: translateX(4px);
            border-color: var(--primary);
            box-shadow: var(--shadow-md);
        }

        .timeline-card.active {
            border-color: var(--primary);
            background-color: var(--bg-card);
            box-shadow: var(--shadow-md), 0 0 0 1px var(--primary);
        }

        .event-time-col {
            font-size: 12px;
            font-weight: 500;
            color: var(--text-muted);
            text-align: right;
            min-width: 80px;
        }

        .event-details-col {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .event-title-row {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }

        .event-title {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-main);
        }

        .event-badge {
            font-size: 9px;
            font-weight: 600;
            padding: 2px 6px;
            border-radius: var(--radius-full);
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .badge-verified-gt {
            background-color: var(--success-light);
            color: var(--success-hover);
            border: 1px solid var(--success-border);
        }

        .badge-warning-gt {
            background-color: var(--warning-light);
            color: var(--warning-hover);
            border: 1px solid var(--warning-border);
        }

        .badge-unverified-gt {
            background-color: #F1F5F9;
            color: #475569;
            border: 1px solid #CBD5E1;
        }

        .event-metadata-row {
            display: flex;
            gap: 16px;
            font-size: 12px;
            color: var(--text-muted);
            flex-wrap: wrap;
        }

        .event-meta-item {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .event-meta-item svg {
            width: 12px;
            height: 12px;
        }

        .event-action-col {
            color: var(--primary);
            font-size: 12px;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        /* SIMPLE TIMELINE DENSITY OVERRIDES */
        .timeline-view.simple {
            gap: 8px; /* Closer together like rows of a table */
        }
        
        .timeline-node.simple {
            margin-bottom: 0px;
        }
        
        .timeline-marker.simple {
            width: 18px;
            height: 18px;
            left: -29px;
            top: 6px;
            font-size: 9px;
            border-width: 1.5px;
        }
        
        .timeline-marker.simple svg {
            width: 10px;
            height: 10px;
        }
        
        .timeline-card.simple {
            padding: 8px 16px;
            gap: 16px;
            border-radius: var(--radius-sm);
            box-shadow: none !important;
            background-color: var(--bg-card);
            border-color: var(--border-color);
            display: grid;
            grid-template-columns: 140px 1fr auto;
            align-items: center;
        }

        .timeline-card.simple:hover {
            transform: translateX(4px);
            background-color: var(--bg-main);
            border-color: var(--primary);
        }

        .timeline-card.simple.active {
            border-color: var(--primary);
            background-color: var(--primary-light);
            box-shadow: 0 0 0 1px var(--primary) !important;
        }
        
        .event-time-col.simple {
            font-size: 12px;
            font-weight: 500;
            color: var(--text-muted);
            text-align: left;
            min-width: 130px;
            white-space: nowrap;
        }
        
        .event-details-col.simple {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 12px;
            overflow: hidden;
        }
        
        .event-title.simple {
            font-size: 13px;
            font-weight: 500;
            color: var(--text-main);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .event-badge.simple {
            font-size: 8px;
            padding: 1px 6px;
            flex-shrink: 0;
        }
        
        .event-action-col.simple {
            font-size: 11px;
            font-weight: 700;
            color: var(--primary);
            white-space: nowrap;
        }

        /* ==========================================================================
           SWIMLANE VIEW (MODE 2)
           ========================================================================== */
        .swimlane-container-outer {
            width: 100%;
            overflow-x: auto;
            position: relative;
            background-color: var(--bg-main);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            padding: 8px 0;
            scrollbar-width: auto;
        }

        .swimlane-grid {
            display: grid;
            grid-template-columns: 180px repeat(6, 260px); /* 1 Label column, 6 stage columns */
            position: relative;
        }

        /* SVG overlay for drawing connections - moved inside .swimlane-grid */
        .swimlane-svg-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 10;
        }

        .swimlane-svg-overlay path {
            fill: none;
            stroke: var(--primary);
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
            opacity: 0.6;
            transition: var(--transition-normal);
        }

        .swimlane-svg-overlay path.flow-active {
            stroke-width: 3;
            stroke: var(--success);
            opacity: 1;
            stroke-dasharray: 6 4;
            animation: dash 1s linear infinite;
        }

        @keyframes dash {
            to {
                stroke-dashoffset: -10;
            }
        }

        /* Sticky Row & Col Headers */
        .swimlane-header-row {
            display: contents;
        }

        .swimlane-corner-cell {
            background-color: var(--bg-card);
            border-bottom: 2px solid var(--border-color);
            border-right: 2px solid var(--border-color);
            position: sticky;
            left: 0;
            top: 0;
            z-index: 25;
            padding: 16px;
            font-weight: 700;
            font-size: 12px;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .swimlane-stage-cell {
            background-color: var(--bg-card);
            border-bottom: 2px solid var(--border-color);
            border-right: 1px solid var(--border-color);
            padding: 16px;
            text-align: center;
            font-family: var(--font-title);
            font-size: 13px;
            font-weight: 700;
            color: var(--text-main);
            text-transform: uppercase;
            position: sticky;
            top: 0;
            z-index: 15;
            letter-spacing: 0.02em;
        }

        /* Lanes */
        .swimlane-row {
            display: contents;
        }

        .swimlane-lane-label {
            background-color: var(--bg-card);
            border-bottom: 1px solid var(--border-color);
            border-right: 2px solid var(--border-color);
            padding: 20px 16px;
            font-weight: 700;
            font-size: 13px;
            color: var(--text-main);
            position: sticky;
            left: 0;
            z-index: 20;
            display: flex;
            flex-direction: column;
            gap: 4px;
            box-shadow: 4px 0 8px -4px rgba(0,0,0,0.05);
        }

        .swimlane-lane-sub {
            font-size: 10px;
            font-weight: 500;
            color: var(--text-muted);
        }

        .swimlane-cell {
            border-bottom: 1px solid var(--border-color);
            border-right: 1px solid var(--border-color);
            position: relative;
            min-height: 160px;
            padding: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Compact cards inside swimlane cells */
        .swimlane-event-card {
            background-color: var(--bg-card);
            border: 1.5px solid var(--border-color);
            border-radius: var(--radius-md);
            padding: 10px 12px;
            width: 100%;
            max-width: 190px;
            cursor: pointer;
            z-index: 12;
            transition: var(--transition-normal);
            box-shadow: var(--shadow-sm);
        }

        .swimlane-event-card:hover {
            transform: translateY(-2px);
            border-color: var(--primary);
            box-shadow: var(--shadow-md);
        }

        .swimlane-event-card.active {
            border-color: var(--primary);
            box-shadow: var(--shadow-md), 0 0 0 1.5px var(--primary);
        }

        .swimlane-card-time {
            font-size: 10px;
            font-weight: 500;
            color: var(--text-muted);
            margin-bottom: 4px;
        }

        .swimlane-card-title {
            font-size: 11px;
            font-weight: 700;
            line-height: 1.35;
            color: var(--text-main);
            margin-bottom: 6px;
        }

        .swimlane-card-meta {
            font-size: 10px;
            color: var(--text-muted);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .swimlane-card-status-dot {
            width: 6px;
            height: 6px;
            border-radius: var(--radius-full);
            background-color: var(--success);
        }

        .swimlane-event-card.warning .swimlane-card-status-dot {
            background-color: var(--warning);
        }

        .swimlane-event-card.unverified .swimlane-card-status-dot {
            background-color: #64748B;
        }

        /* MOBILE SWIMLANE ACCORDIONS (Hidden on Desktop) */
        .swimlane-mobile-list {
            display: none;
            flex-direction: column;
            gap: 16px;
        }

        .mobile-lane-accordion {
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            background-color: var(--bg-card);
            overflow: hidden;
        }

        .mobile-lane-header {
            padding: 16px;
            background-color: var(--bg-main);
            font-weight: 700;
            font-size: 14px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            border-bottom: 1px solid var(--border-color);
        }

        .mobile-lane-header-label {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .mobile-lane-header-label svg {
            width: 16px;
            height: 16px;
            color: var(--primary);
        }

        .mobile-lane-content {
            padding: 16px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .mobile-handover-label {
            font-size: 11px;
            font-weight: 700;
            color: var(--primary);
            background-color: var(--primary-light);
            padding: 4px 8px;
            border-radius: var(--radius-sm);
            align-self: flex-start;
            margin-top: -6px;
        }

        /* ==========================================================================
           SECTION: CERTIFICATES
           ========================================================================== */
        .certificates-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 20px;
        }

        .cert-card {
            background-color: var(--bg-main);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            padding: 20px;
            display: flex;
            flex-direction: column;
            gap: 12px;
            cursor: pointer;
            transition: var(--transition-normal);
        }

        .cert-card:hover {
            transform: translateY(-2px);
            border-color: var(--primary);
            box-shadow: var(--shadow-md);
        }

        .cert-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
        }

        .cert-icon-box {
            background-color: var(--success-light);
            border: 1px solid var(--success-border);
            color: var(--success);
            padding: 8px;
            border-radius: var(--radius-sm);
        }

        .cert-icon-box svg {
            width: 24px;
            height: 24px;
        }

        .cert-status-badge {
            font-size: 10px;
            font-weight: 700;
            padding: 4px 8px;
            border-radius: var(--radius-full);
            letter-spacing: 0.05em;
        }

        .cert-status-active {
            background-color: var(--success-light);
            color: var(--success-hover);
        }

        .cert-title {
            font-size: 14px;
            font-weight: 700;
            color: var(--text-main);
            line-height: 1.4;
        }

        .cert-meta-list {
            list-style: none;
            font-size: 12px;
            color: var(--text-muted);
            display: flex;
            flex-direction: column;
            gap: 6px;
            margin-top: auto;
        }

        .cert-meta-list li {
            display: flex;
            justify-content: space-between;
        }

        .cert-meta-list span:last-child {
            color: var(--text-main);
            font-weight: 600;
        }

        /* ==========================================================================
           SECTION: REVIEWS
           ========================================================================== */
        .reviews-layout {
            display: grid;
            grid-template-columns: 280px 1fr;
            gap: 40px;
        }

        .rating-dashboard {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .average-score-card {
            background-color: var(--bg-main);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            padding: 24px;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .average-score-num {
            font-family: var(--font-title);
            font-size: 48px;
            font-weight: 800;
            color: var(--text-main);
            line-height: 1;
            letter-spacing: -0.02em;
        }

        .average-score-label {
            font-size: 12px;
            color: var(--text-muted);
            margin-top: 8px;
        }

        .rating-bars-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-top: 8px;
        }

        .rating-bar-row {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 12px;
            cursor: pointer;
            padding: 2px 4px;
            border-radius: var(--radius-sm);
            transition: var(--transition-fast);
        }

        .rating-bar-row:hover {
            background-color: var(--primary-light);
        }

        .rating-bar-row.active {
            font-weight: 700;
            color: var(--primary);
        }

        .rating-bar-stars {
            width: 48px;
            display: flex;
            align-items: center;
            gap: 2px;
        }

        .rating-bar-stars svg {
            width: 10px;
            height: 10px;
            fill: var(--warning);
        }

        .rating-bar-track {
            flex: 1;
            height: 6px;
            background-color: var(--border-color);
            border-radius: var(--radius-full);
            overflow: hidden;
        }

        .rating-bar-fill {
            height: 100%;
            background-color: var(--warning);
            border-radius: var(--radius-full);
            width: 0;
            transition: width 0.4s ease;
        }

        .rating-bar-count {
            width: 32px;
            text-align: right;
            color: var(--text-muted);
        }

        .reviews-feed-column {
            display: flex;
            flex-direction: column;
            gap: 24px;
        }

        /* Review Item Card */
        .review-item-card {
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 24px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .review-item-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            flex-wrap: wrap;
            gap: 12px;
        }

        .reviewer-info {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .reviewer-avatar {
            width: 40px;
            height: 40px;
            border-radius: var(--radius-full);
            background-color: var(--primary-light);
            color: var(--primary);
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
        }

        .reviewer-details {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .reviewer-name {
            font-size: 14px;
            font-weight: 700;
            color: var(--text-main);
        }

        .review-date {
            font-size: 11px;
            color: var(--text-muted);
        }

        .review-meta-box {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 6px;
        }

        .verified-trace-badge {
            font-size: 9px;
            font-weight: 700;
            background-color: var(--success-light);
            color: var(--success);
            border: 1px solid var(--success-border);
            padding: 2px 6px;
            border-radius: var(--radius-full);
            display: flex;
            align-items: center;
            gap: 4px;
            letter-spacing: 0.05em;
        }

        .verified-trace-badge svg {
            width: 10px;
            height: 10px;
        }

        .review-body {
            font-size: 14px;
            line-height: 1.5;
            color: var(--text-main);
        }

        .review-images-row {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        .review-img-thumb {
            width: 64px;
            height: 64px;
            border-radius: var(--radius-sm);
            object-fit: cover;
            border: 1px solid var(--border-color);
            cursor: pointer;
        }

        /* Review Submission Form */
        .review-form-card {
            background-color: var(--bg-main);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            padding: 24px;
            margin-top: 16px;
        }

        .review-form-title {
            font-family: var(--font-title);
            font-size: 16px;
            font-weight: 800;
            color: var(--text-main);
            margin-bottom: 16px;
            letter-spacing: -0.01em;
        }

        .form-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
            margin-bottom: 16px;
        }

        .form-grid.single-col {
            grid-template-columns: 1fr;
        }

        .form-group {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .form-group-full {
            grid-column: 1 / -1;
        }

        .form-label {
            font-size: 12px;
            font-weight: 500;
            color: var(--text-muted);
        }

        .form-input, .form-textarea {
            background-color: var(--bg-card);
            border: 1px solid var(--border-color);
            color: var(--text-main);
            padding: 10px 12px;
            border-radius: var(--radius-sm);
            font-size: 13px;
            outline: none;
            transition: var(--transition-fast);
            font-family: var(--font-body);
        }

        .form-input:focus, .form-textarea:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 2px var(--primary-light);
        }

        .star-rating-picker {
            display: flex;
            gap: 6px;
            align-items: center;
        }

        .star-picker-btn {
            background: none;
            border: none;
            cursor: pointer;
            padding: 0;
        }

        .star-picker-btn svg {
            width: 24px;
            height: 24px;
            fill: #CBD5E1;
            transition: var(--transition-fast);
        }

        .star-picker-btn.active svg, .star-picker-btn:hover svg {
            fill: var(--warning);
        }

        .btn-submit-review {
            background-color: var(--primary);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: var(--radius-sm);
            font-weight: 700;
            cursor: pointer;
            font-size: 13px;
            transition: var(--transition-fast);
            align-self: flex-start;
            font-family: var(--font-body);
        }

        .btn-submit-review:hover {
            background-color: var(--primary-hover);
        }

        /* ==========================================================================
           FOOTER
           ========================================================================== */
        .app-footer {
            background-color: var(--bg-card);
            border-top: 1px solid var(--border-color);
            padding: 24px;
            text-align: center;
            font-size: 12px;
            color: var(--text-muted);
            display: flex;
            flex-direction: column;
            gap: 8px;
            align-items: center;
            border-bottom-left-radius: var(--radius-lg);
            border-bottom-right-radius: var(--radius-lg);
        }

        .app-footer span {
            font-weight: 700;
            color: var(--primary);
        }

        /* ==========================================================================
           MODALS AND DRAWER OVERLAYS
           ========================================================================== */
        /* Backdrop */
        .modal-backdrop {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(15, 23, 42, 0.6);
            backdrop-filter: blur(4px);
            z-index: 100;
            display: none;
            opacity: 0;
            transition: opacity 0.25s ease;
        }

        /* Slide-over Event Detail Drawer */
        .detail-drawer {
            position: fixed;
            top: 0;
            right: -450px;
            bottom: 0;
            width: 100%;
            max-width: 450px;
            background-color: var(--bg-card);
            background-image: radial-gradient(rgba(37, 99, 235, 0.025) 1.2px, transparent 1.2px);
            background-size: 16px 16px;
            z-index: 110;
            box-shadow: -10px 0 30px rgba(0, 0, 0, 0.15);
            display: flex;
            flex-direction: column;
            transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            color: var(--text-main);
            overflow: hidden;
        }

        /* Ambient Glow Orbs for Technology, Trust and Blockchain security theme */
        .detail-drawer::before {
            content: '';
            position: absolute;
            top: -50px;
            right: -50px;
            width: 260px;
            height: 260px;
            background: radial-gradient(circle, rgba(37, 99, 235, 0.08) 0%, rgba(37, 99, 235, 0) 70%);
            filter: blur(35px);
            pointer-events: none;
            z-index: 0;
        }

        .detail-drawer::after {
            content: '';
            position: absolute;
            bottom: -50px;
            left: -50px;
            width: 260px;
            height: 260px;
            background: radial-gradient(circle, rgba(21, 128, 61, 0.06) 0%, rgba(21, 128, 61, 0) 70%);
            filter: blur(35px);
            pointer-events: none;
            z-index: 0;
        }

        .detail-drawer.open {
            right: 0;
        }

        .drawer-grab-handle {
            display: none; /* Hidden on desktop */
            width: 36px;
            height: 5px;
            background-color: var(--border-color);
            border-radius: var(--radius-full);
            margin: 8px auto 0 auto;
            flex-shrink: 0;
            position: relative;
            z-index: 1;
        }

        .simulator-container.mobile-sim .drawer-grab-handle {
            display: block; /* Visible on mobile simulator sheets */
        }

        .drawer-header {
            padding: 20px 24px;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
            z-index: 1;
        }

        .drawer-title {
            font-family: var(--font-title);
            font-size: 18px;
            font-weight: 600;
            letter-spacing: -0.01em;
        }

        .btn-close-drawer {
            background: var(--bg-main);
            border: 1px solid var(--border-color);
            color: var(--text-muted);
            cursor: pointer;
            padding: 6px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition-fast);
        }

        .btn-close-drawer:hover {
            background-color: var(--primary-light);
            color: var(--primary);
            border-color: var(--primary-border);
        }

        .blockchain-proof-box {
            background-color: var(--bg-main);
            border: 1px solid var(--border-color);
            padding: 14px 16px;
            border-radius: var(--radius-md);
            font-size: 12.5px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-top: 6px;
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02);
            position: relative;
            overflow: hidden;
        }

        .responsive-hash-box {
            display: flex;
            align-items: center;
            font-family: monospace;
            font-size: 12px;
            font-weight: 600;
            color: var(--primary);
            overflow: hidden;
            flex: 1;
            white-space: nowrap;
        }

        .responsive-hash-box .hash-left {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            flex: 1;
        }

        .responsive-hash-box .hash-right {
            flex-shrink: 0;
            white-space: nowrap;
        }

        .drawer-content {
            flex: 1;
            overflow-y: auto;
            padding: 24px;
            display: flex;
            flex-direction: column;
            gap: 20px;
            position: relative;
            z-index: 1;
        }

        .drawer-section {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .drawer-section-label {
            font-size: 11px;
            font-weight: 500;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .drawer-field-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px;
            margin-top: 8px;
        }

        .drawer-field-card {
            background-color: var(--bg-main);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            padding: 12px 14px;
            display: flex;
            flex-direction: column;
            gap: 4px;
            transition: var(--transition-fast);
            box-sizing: border-box;
        }

        .drawer-field-card:hover {
            border-color: var(--primary-border);
            background-color: var(--primary-light);
        }

        .drawer-field-card.full-width {
            grid-column: 1 / -1;
        }

        .drawer-field-card .field-label {
            font-size: 10px;
            font-weight: 600;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }

        .drawer-field-card .field-val {
            font-size: 13px;
            font-weight: 500;
            color: var(--text-main);
            line-height: 1.45;
            word-break: break-word;
        }

        /* Keep legacy classes to prevent JS selector crashes, mapping them to the new card layout rules */
        .drawer-field-row {
            display: flex;
            flex-direction: column;
            gap: 4px;
            background-color: var(--bg-main);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            padding: 12px 14px;
            box-sizing: border-box;
        }
        .drawer-field-label {
            font-size: 10px;
            font-weight: 600;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }
        .drawer-field-val {
            font-size: 13px;
            font-weight: 500;
            color: var(--text-main);
            line-height: 1.45;
            word-break: break-word;
        }
        .drawer-field-row.stacked {
            grid-column: 1 / -1;
        }

        .btn-copy-code {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background-color: var(--bg-main);
            border: 1px solid var(--border-color);
            color: var(--text-muted);
            width: 28px;
            height: 28px;
            border-radius: var(--radius-sm);
            cursor: pointer;
            transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
            flex-shrink: 0;
            position: relative;
            overflow: hidden;
        }

        .btn-copy-code:hover {
            border-color: var(--primary-border);
            background-color: var(--primary-light);
            color: var(--primary);
        }

        /* Success active animation state (shadcn @animate-ui/components-buttons-copy style) */
        .btn-copy-code.copied {
            color: var(--success) !important;
            border-color: var(--success-border) !important;
            background-color: var(--success-light) !important;
            box-shadow: 0 0 10px rgba(21, 128, 61, 0.15) !important;
        }

        .btn-copy-icon-wrapper {
            position: relative;
            width: 13px;
            height: 13px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .btn-copy-code .copy-icon {
            position: absolute;
            opacity: 1;
            transform: scale(1) rotate(0deg);
            transition: opacity 200ms ease, transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .btn-copy-code.copied .copy-icon {
            opacity: 0;
            transform: scale(0.6) rotate(-45deg);
        }

        .btn-copy-code .check-icon {
            position: absolute;
            opacity: 0;
            transform: scale(0.4) rotate(45deg);
            transition: opacity 200ms ease, transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .btn-copy-code.copied .check-icon {
            opacity: 1;
            transform: scale(1) rotate(0deg);
        }

        /* Certificate Viewer Modal */
        .cert-modal {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.9);
            width: 90%;
            max-width: 700px;
            background-color: var(--bg-card);
            border-radius: var(--radius-lg);
            z-index: 120;
            box-shadow: var(--shadow-lg);
            display: none;
            flex-direction: column;
            overflow: hidden;
            opacity: 0;
            transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
            color: var(--text-main);
            border: 1px solid var(--border-color);
        }

        .cert-modal.open {
            transform: translate(-50%, -50%) scale(1);
            opacity: 1;
        }

        .cert-modal-body {
            padding: 24px;
            display: grid;
            grid-template-columns: 1.2fr 1fr;
            gap: 24px;
            align-items: center;
        }

        .cert-scan-preview {
            background-color: transparent;
            border: none;
            border-radius: 0;
            overflow: hidden;
            aspect-ratio: 1/1.4;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .cert-scan-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .toast-notification {
            position: fixed;
            bottom: 24px;
            left: 50%;
            transform: translateX(-50%) translateY(100px);
            background-color: #1E293B;
            border: 1px solid #334155;
            color: white;
            padding: 12px 24px;
            border-radius: var(--radius-full);
            box-shadow: var(--shadow-lg);
            z-index: 1000;
            font-size: 13px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            pointer-events: none;
        }

        .toast-notification.show {
            transform: translateX(-50%) translateY(0);
        }

        .toast-notification svg {
            color: var(--success);
            width: 16px;
            height: 16px;
        }

        /* ==========================================================================
           RESPONSIVE SHIFTS (MOBILE MODE CLASS SHIFTS FOR SIMULATOR)
           ========================================================================== */
        /* Native media queries for actual browsers */
        @media (max-width: 768px) {
            .hero-section {
                grid-template-columns: 1fr;
                padding: 20px;
            }
            .overview-grid {
                grid-template-columns: 1fr;
            }
            .reviews-layout {
                grid-template-columns: 1fr;
            }
            .sticky-navbar {
                top: 0;
                flex-direction: row;
                overflow-x: auto;
                white-space: nowrap;
                margin-left: -24px;
                margin-right: -24px;
                padding: 6px 24px;
                border-radius: 0;
                border-bottom: 1px solid var(--border-color);
                gap: 4px;
                scrollbar-width: none; /* Hide scrollbar Firefox */
            }
            .sticky-navbar::-webkit-scrollbar {
                display: none; /* Hide scrollbar Chrome/Safari */
            }
            .navbar-item {
                text-align: center;
                flex: none; /* Do not stretch or shrink on mobile */
                padding: 10px 14px;
                border-radius: var(--radius-sm);
            }
            .navbar-item svg {
                display: none; /* Keep text clean on mobile */
            }
            .app-body {
                padding: 12px 12px 48px !important;
            }
            .app-section {
                scroll-margin-top: 54px; /* Aligns perfectly on mobile scroll */
                padding: 28px 16px 20px !important;
            }
            .overview-grid {
                grid-template-columns: 1fr !important;
                gap: 20px !important;
            }
            .detail-drawer {
                top: auto !important;
                right: 0 !important;
                bottom: -520px !important;
                left: 0 !important;
                width: 100% !important;
                max-width: 100% !important;
                height: 82vh !important;
                border-left: none !important;
                border-top: 1px solid var(--border-color) !important;
                border-top-left-radius: 24px !important;
                border-top-right-radius: 24px !important;
                box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.15) !important;
                transition: bottom 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
            }
            body.v7-liquid-glass .detail-drawer {
                border-top: 1px solid var(--glass-edge) !important;
                box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.25) !important;
            }
            .detail-drawer.open {
                bottom: 0 !important;
                right: 0 !important;
            }
            .drawer-grab-handle {
                display: block !important;
            }
            .swimlane-container-outer {
                display: none; /* Hide swimlane table */
            }
            .swimlane-mobile-list {
                display: flex; /* Show mobile list adaptation */
            }
            .cert-modal-body {
                grid-template-columns: 1fr !important;
            }
        }

        /* Simulated responsive shifts inside simulator container */
        .simulator-container.mobile-sim .app-header {
            padding: 12px 16px;
            top: 0; /* Override desktop 58px sticky top */
        }

        .simulator-container.mobile-sim .btn-header {
            padding: 6px 12px;
            font-size: 12px;
        }

        .simulator-container.mobile-sim .hero-section {
            grid-template-columns: 1fr;
            padding: 16px;
            gap: 20px;
        }

        .simulator-container.mobile-sim .hero-section.variant-b {
            grid-template-columns: 1fr;
        }

        .simulator-container.mobile-sim .hero-section.variant-c {
            padding-bottom: 120px;
        }

        .simulator-container.mobile-sim .origin-rail {
            flex-direction: column;
            height: auto;
            padding: 12px;
            gap: 6px;
            align-items: flex-start;
        }

        .simulator-container.mobile-sim .origin-rail-arrow {
            display: none;
        }

        .simulator-container.mobile-sim .sticky-navbar {
            top: 0;
            flex-direction: row;
            overflow-x: auto;
            white-space: nowrap;
            width: calc(100% + 32px);
            margin-left: -16px;
            margin-right: -16px;
            padding: 6px 16px;
            border-radius: 0px;
            border-bottom: 1px solid var(--border-color);
            gap: 4px;
            scrollbar-width: none;
        }
        .simulator-container.mobile-sim .sticky-navbar.collapsed {
            width: calc(100% - 24px) !important;
            margin-left: 12px !important;
            margin-right: 12px !important;
            margin-top: 8px !important;
            margin-bottom: 8px !important;
            padding: 4px 6px !important;
            top: 8px !important;
            border-radius: 9999px !important;
            border: 1px solid var(--border-color) !important;
            box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.03) !important;
        }
        
        .simulator-container.mobile-sim .sticky-navbar.collapsed .navbar-item {
            flex: none !important;
            padding: 6px 12px !important;
            font-size: 11px !important;
            border-radius: 9999px !important;
        }

        .simulator-container.mobile-sim .sticky-navbar.collapsed .navbar-item svg {
            display: none !important;
        }
        .simulator-container.mobile-sim .sticky-navbar::-webkit-scrollbar {
            display: none;
        }
        .simulator-container.mobile-sim .navbar-item {
            text-align: center;
            flex: none;
            padding: 10px 14px;
            border-radius: var(--radius-sm);
        }
        .simulator-container.mobile-sim .navbar-item svg {
            display: none;
        }
        .simulator-container.mobile-sim .app-section {
            scroll-margin-top: 54px;
        }

        .simulator-container.mobile-sim .overview-grid {
            grid-template-columns: 1fr;
            gap: 20px;
        }

        .simulator-container.mobile-sim .dishes-cards-grid {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 8px;
        }

        .simulator-container.mobile-sim .dish-card {
            width: calc(33.33% - 8px);
            min-width: 90px;
            padding: 8px 4px;
            gap: 4px;
        }

        .simulator-container.mobile-sim .explorer-container.variant-b {
            grid-template-columns: 1fr;
        }

        .simulator-container.mobile-sim .variant-b-sidebar {
            display: none !important; /* Hide Sidebar on mobile */
        }

        .simulator-container.mobile-sim .explorer-container.variant-c {
            grid-template-columns: 1fr;
        }

        .simulator-container.mobile-sim .variant-c-inspector {
            display: none !important; /* Hide Right inspector on mobile */
        }

        .simulator-container.mobile-sim .swimlane-container-outer {
            display: none; /* Hide visual table on mobile view */
        }

        .simulator-container.mobile-sim .swimlane-mobile-list {
            display: flex; /* Show accordion list instead */
        }

        .simulator-container.mobile-sim .reviews-layout {
            grid-template-columns: 1fr;
            gap: 24px;
        }

        .simulator-container.mobile-sim .app-body {
            padding: 12px 12px 48px;
            gap: 24px;
        }

        .simulator-container.mobile-sim .app-section {
            padding: 28px 16px 20px; /* Increased top padding from 20px to 28px */
        }

        .simulator-container.mobile-sim .form-grid {
            grid-template-columns: 1fr;
        }

        .simulator-container.mobile-sim .detail-drawer {
            max-width: 100%;
            top: auto;
            bottom: -500px;
            height: 500px;
            right: 0;
            border-top-left-radius: var(--radius-lg);
            border-top-right-radius: var(--radius-lg);
            transition: bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .simulator-container.mobile-sim .detail-drawer.open {
            bottom: 0;
        }

        .simulator-container.mobile-sim .cert-modal-body {
            grid-template-columns: 1fr;
        }

        /* ==========================================================================
           FIGMA COMMENTING SYSTEM STYLES
           ========================================================================== */
        .hero-section, .app-section, .app-footer, .app-body {
            position: relative;
        }

        .comment-pin {
            position: absolute;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background-color: #8B5CF6;
            color: white;
            border: 2px solid white;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
            z-index: 900;
            transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            user-select: none;
            transform: translate(-50%, -50%);
        }

        .comment-pin:hover {
            transform: translate(-50%, -50%) scale(1.15);
            background-color: #7C3AED;
        }

        @keyframes pulse-highlight {
            0% {
                box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.7);
                transform: translate(-50%, -50%) scale(1);
            }
            50% {
                box-shadow: 0 0 0 12px rgba(139, 92, 246, 0);
                transform: translate(-50%, -50%) scale(1.25);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(139, 92, 246, 0);
                transform: translate(-50%, -50%) scale(1);
            }
        }

        .comment-pin.highlighted {
            animation: pulse-highlight 1.5s infinite;
            background-color: #7C3AED !important;
            border-color: #F59E0B !important;
        }

        .comment-pin.resolved {
            background-color: #94A3B8;
            opacity: 0.6;
        }

        .comment-popover {
            position: absolute;
            width: 300px;
            background-color: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-lg), 0 10px 25px -5px rgba(0, 0, 0, 0.1);
            padding: 16px;
            z-index: 1000;
            display: flex;
            flex-direction: column;
            gap: 12px;
            color: var(--text-main);
            font-size: 13px;
            transform: translate(-50%, 15px);
        }

        [data-theme="dark"] .comment-popover {
            background-color: var(--bg-card-dark);
            border-color: var(--border-color-dark);
        }

        .comment-popover-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 8px;
            font-weight: 700;
            cursor: move !important;
        }

        .comment-popover-close {
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            font-size: 16px;
        }

        .comment-threads-container {
            max-height: 180px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 10px;
            padding-right: 4px;
        }

        .comment-thread-msg {
            display: flex;
            flex-direction: column;
            gap: 2px;
            padding-bottom: 8px;
            border-bottom: 1px dashed var(--border-color);
        }

        .comment-thread-msg:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

        .comment-msg-meta {
            display: flex;
            justify-content: space-between;
            font-size: 11px;
            color: var(--text-muted);
        }

        .comment-msg-author {
            font-weight: 700;
            color: var(--text-main);
        }

        .comment-msg-text {
            line-height: 1.4;
            word-break: break-word;
        }

        .comment-popover-footer {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .comment-popover-input {
            width: 100%;
            background-color: var(--bg-main);
            border: 1px solid var(--border-color);
            color: var(--text-main);
            padding: 8px 10px;
            border-radius: var(--radius-sm);
            font-size: 12px;
            outline: none;
            font-family: var(--font-body);
        }

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

        .comment-popover-actions {
            display: flex;
            justify-content: space-between;
            gap: 8px;
        }

        .btn-comment-action {
            padding: 6px 12px;
            border-radius: var(--radius-sm);
            font-size: 11px;
            font-weight: 700;
            cursor: pointer;
            border: none;
            font-family: var(--font-body);
        }

        .btn-comment-submit {
            background-color: var(--primary);
            color: white;
        }

        .btn-comment-resolve {
            background-color: var(--success-light);
            color: var(--success-hover);
            border: 1px solid var(--success-border);
        }

        .btn-comment-cancel {
            background-color: var(--bg-main);
            color: var(--text-main);
            border: 1px solid var(--border-color);
        }

        .simulator-container.comment-mode-active {
            cursor: cell !important;
        }

        /* Comments Sidebar Styles */
        .comments-sidebar {
            position: fixed;
            right: 0;
            top: 0;
            bottom: 0;
            width: 320px;
            background-color: var(--bg-card);
            border-left: 1px solid var(--border-color);
            display: flex;
            flex-direction: column;
            z-index: 1050;
            transform: translateX(100%);
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            color: var(--text-main); /* FIX: Set text color */
        }

        [data-theme="dark"] .comments-sidebar {
            background-color: var(--bg-card-dark);
            border-color: var(--border-color-dark);
        }

        .comments-sidebar-header {
            padding: 16px 20px;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .comments-sidebar-header h3 {
            font-family: var(--font-title);
            font-size: 15px;
            font-weight: 800;
            color: var(--text-main); /* FIX: Set heading color */
        }

        .comments-sidebar-count {
            background-color: var(--primary-light);
            color: var(--primary);
            font-size: 11px;
            font-weight: 700;
            padding: 2px 8px;
            border-radius: var(--radius-full);
        }

        .comments-sidebar-filter {
            padding: 10px 20px;
            border-bottom: 1px solid var(--border-color);
            font-size: 11px;
            color: var(--text-muted);
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .comments-sidebar-list {
            flex: 1;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
        }

        .comments-sidebar-list::-webkit-scrollbar {
            width: 6px;
        }

        .comments-sidebar-list::-webkit-scrollbar-thumb {
            background-color: var(--border-color);
            border-radius: 3px;
        }

        .comments-sidebar-item {
            padding: 16px 20px;
            border-bottom: 1px solid var(--border-color);
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .comments-sidebar-item:hover {
            background-color: var(--bg-main);
        }

        .comments-sidebar-item.active {
            background-color: var(--primary-light);
            border-left: 4px solid var(--primary);
            box-shadow: inset 0 0 0 1px var(--primary-border);
        }

        .sidebar-item-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 11px;
            color: var(--text-muted);
        }

        .sidebar-item-author {
            font-weight: 700;
            color: var(--text-main);
            font-size: 12px;
        }

        .sidebar-item-text {
            font-size: 12px;
            line-height: 1.4;
            color: var(--text-main);
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            word-break: break-word;
        }

        .sidebar-item-replies {
            font-size: 11px;
            color: var(--primary);
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        body.comment-mode-active {
            padding-right: 320px;
        }

        body.comment-mode-active .comments-sidebar {
            transform: translateX(0);
        }

        body.comment-mode-active .proto-control-bar {
            gap: 8px;
            padding: 0 12px;
        }

        body.comment-mode-active .proto-toggles {
            gap: 8px;
        }

        body.comment-mode-active .proto-title-extra,
        body.comment-mode-active .proto-badge {
            display: none !important;
        }

        body.comment-mode-active .toggle-label {
            display: none !important;
        }

        body.comment-mode-active .toggle-btn {
            padding: 6px 10px;
            font-size: 11px;
        }

        /* Disable normal interactions in Comment Mode */
        body.comment-mode-active .app-body *,
        body.comment-mode-active .breadcrumbs-container *,
        body.comment-mode-active .app-header * {
            pointer-events: none !important;
        }

        /* Allow interactions with comments components */
        body.comment-mode-active .comment-pin,
        body.comment-mode-active .comment-pin *,
        body.comment-mode-active .comment-popover,
        body.comment-mode-active .comment-popover *,
        body.comment-mode-active .comments-sidebar,
        body.comment-mode-active .comments-sidebar *,
        body.comment-mode-active .proto-control-bar,
        body.comment-mode-active .proto-control-bar * {
            pointer-events: auto !important;
        }

        /* Custom Figma comment cursor */
        body.comment-mode-active #sim-container {
            cursor: url("flork_cursor.png") 18 6, cell;
        }

        /* Ensure interactive comments components have the correct pointer */
        .comment-pin {
            cursor: pointer !important;
        }

        .comment-popover-header,
        .comment-popover-header span {
            cursor: move !important;
        }

        .comment-popover-close {
            cursor: pointer !important;
        }

        /* Lock down text selection and interactions on canvas in Comment Mode */
        body.comment-mode-active #sim-container {
            user-select: none !important;
            -webkit-user-select: none !important;
        }

        body.comment-mode-active .comment-popover,
        body.comment-mode-active .comment-popover * {
            user-select: text !important;
            -webkit-user-select: text !important;
        }

        /* Review Actions and Replies Styles */
        .review-actions-row {
            margin-top: 12px;
            display: flex;
            gap: 16px;
            align-items: center;
            font-size: 12px;
            color: var(--text-muted);
        }

        .btn-review-action {
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 12px;
            padding: 4px 8px;
            border-radius: var(--radius-sm);
            transition: all 0.2s ease;
        }

        .btn-review-action:hover {
            color: var(--primary);
            background-color: var(--bg-main);
        }

        .btn-review-like.liked {
            color: #3B82F6 !important;
            font-weight: bold;
        }
        
        [data-theme="dark"] .btn-review-action:hover {
            background-color: var(--bg-main-dark);
        }

        .review-replies-section {
            margin-top: 12px;
            background-color: var(--bg-main);
            border-radius: var(--radius-sm);
            padding: 12px;
            border: 1px solid var(--border-color);
        }

        [data-theme="dark"] .review-replies-section {
            background-color: var(--bg-card-dark);
            border-color: var(--border-color-dark);
        }

        .review-reply-item {
            font-size: 12px;
            border-bottom: 1px dashed var(--border-color);
            padding-bottom: 8px;
            margin-bottom: 8px;
        }

        [data-theme="dark"] .review-reply-item {
            border-color: var(--border-color-dark);
        }

        .review-reply-item:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }

        .review-reply-form {
            margin-top: 12px;
            display: flex;
            gap: 8px;
        }

        .review-reply-form .form-input {
            height: 32px;
            font-size: 12px;
            padding: 6px 10px;
        }
        /* ==========================================================================
           V7 — ASSURANCE GLASS DESIGN LAYER

           Liquid Glass is deliberately reserved for navigation, controls and
           overlays. Data-bearing surfaces stay opaque enough to preserve trust,
           contrast and scanability.
           ========================================================================== */
        body.v7-liquid-glass {
            --glass-surface: rgba(255, 255, 255, 0.72);
            --glass-surface-strong: rgba(255, 255, 255, 0.90);
            --glass-surface-soft: rgba(248, 250, 252, 0.66);
            --glass-edge: rgba(255, 255, 255, 0.78);
            --glass-stroke: rgba(148, 163, 184, 0.25);
            --glass-highlight: rgba(255, 255, 255, 0.92);
            --glass-shadow: 0 18px 50px rgba(15, 23, 42, 0.13), 0 2px 8px rgba(15, 23, 42, 0.05);
            --glass-shadow-hover: 0 24px 64px rgba(15, 23, 42, 0.16), 0 4px 12px rgba(13, 82, 214, 0.07);
            --glass-blur: 22px;
            --glass-saturate: 150%;
            --v7-blue: #0A5FE8;
            --v7-blue-deep: #0647B9;
            --v7-cyan: #22B8F0;
            --v7-mint: #5EEAD4;
            --v7-ink: #0A1633;
            --v7-ease: cubic-bezier(0.16, 1, 0.3, 1);
            background:
                radial-gradient(circle at 10% -10%, rgba(34, 184, 240, 0.27), transparent 34%),
                radial-gradient(circle at 92% 12%, rgba(94, 234, 212, 0.17), transparent 29%),
                radial-gradient(circle at 50% 105%, rgba(13, 82, 214, 0.22), transparent 38%),
                #071226;
            background-attachment: fixed;
        }

        body.v7-liquid-glass[data-theme="dark"],
        body.v7-liquid-glass #sim-container[data-theme="dark"] {
            --glass-surface: rgba(14, 24, 43, 0.72);
            --glass-surface-strong: rgba(16, 27, 48, 0.91);
            --glass-surface-soft: rgba(20, 32, 55, 0.72);
            --glass-edge: rgba(255, 255, 255, 0.14);
            --glass-stroke: rgba(148, 163, 184, 0.16);
            --glass-highlight: rgba(255, 255, 255, 0.16);
            --glass-shadow: 0 22px 60px rgba(0, 0, 0, 0.36), 0 2px 10px rgba(0, 0, 0, 0.18);
            --glass-shadow-hover: 0 28px 72px rgba(0, 0, 0, 0.46), 0 4px 18px rgba(34, 184, 240, 0.10);
            --bg-main: #08101E;
            --bg-card: #101B2F;
            --border-color: #283750;
            --text-main: #F4F8FF;
            --text-muted: #A9B7CA;
            --primary: #69A7FF;
            --primary-hover: #8DBBFF;
            --primary-border: rgba(105, 167, 255, 0.34);
            --primary-light: rgba(49, 117, 219, 0.18);
        }

        /* Atmospheric prototype chrome */
        body.v7-liquid-glass .proto-control-bar {
            height: 64px;
            padding: 0 20px;
            background: rgba(5, 14, 31, 0.68);
            border: 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.11);
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(26px) saturate(150%);
            -webkit-backdrop-filter: blur(26px) saturate(150%);
        }

        body.v7-liquid-glass .proto-title {
            color: #E7F5FF;
            letter-spacing: -0.025em;
        }

        body.v7-liquid-glass .proto-title > svg {
            filter: drop-shadow(0 6px 12px rgba(13, 82, 214, 0.42));
        }

        body.v7-liquid-glass .proto-title span {
            background: rgba(255, 255, 255, 0.10);
            border: 1px solid rgba(255, 255, 255, 0.12);
            color: #C7EAFF;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
            border-radius: 999px;
        }

        body.v7-liquid-glass .proto-title .proto-badge {
            background: linear-gradient(135deg, rgba(47, 150, 255, 0.92), rgba(18, 98, 223, 0.84));
            border-color: rgba(150, 210, 255, 0.34);
            color: white;
        }

        body.v7-liquid-glass .toggle-group {
            padding: 4px;
            gap: 2px;
            background: rgba(255, 255, 255, 0.065);
            border: 1px solid rgba(255, 255, 255, 0.10);
            border-radius: 999px;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
        }

        body.v7-liquid-glass .toggle-btn {
            min-height: 32px;
            padding: 6px 12px;
            border-radius: 999px;
            color: #AFC0D5;
            transition: color 180ms ease, background 220ms ease, box-shadow 220ms ease;
        }

        body.v7-liquid-glass .toggle-btn.active {
            background: linear-gradient(180deg, rgba(57, 145, 255, 0.98), rgba(13, 82, 214, 0.94));
            color: white;
            box-shadow: 0 6px 18px rgba(13, 82, 214, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.36);
        }

        body.v7-liquid-glass .toggle-btn:hover:not(.active) {
            color: white;
            background: rgba(255, 255, 255, 0.10);
        }

        body.v7-liquid-glass .simulator-wrapper {
            padding: 30px 24px 48px;
        }

        body.v7-liquid-glass .simulator-container {
            position: relative;
            isolation: isolate;
            background:
                radial-gradient(circle at 18% 9%, rgba(34, 184, 240, 0.13), transparent 28%),
                radial-gradient(circle at 88% 4%, rgba(94, 234, 212, 0.10), transparent 25%),
                linear-gradient(145deg, rgba(244, 249, 255, 0.98), rgba(239, 247, 255, 0.95));
            border: 1px solid rgba(255, 255, 255, 0.72);
            border-radius: 28px;
            box-shadow: 0 38px 110px rgba(0, 0, 0, 0.38), 0 4px 18px rgba(0, 0, 0, 0.15), inset 0 1px 0 white;
        }

        body.v7-liquid-glass .simulator-container[data-theme="dark"] {
            background:
                radial-gradient(circle at 16% 6%, rgba(34, 184, 240, 0.12), transparent 27%),
                radial-gradient(circle at 90% 8%, rgba(94, 234, 212, 0.08), transparent 24%),
                linear-gradient(145deg, #07101F, #0A1425 55%, #08111F);
            border-color: rgba(255, 255, 255, 0.13);
            box-shadow: 0 40px 120px rgba(0, 0, 0, 0.58), 0 4px 18px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.10);
        }

        /* Product chrome: navigation is glass; data surfaces remain substantial */
        body.v7-liquid-glass .app-header {
            position: relative;
            padding: 15px 24px;
            background: var(--glass-surface);
            border-bottom: 1px solid var(--glass-stroke);
            border-radius: 28px 28px 0 0;
            box-shadow: inset 0 1px 0 var(--glass-highlight);
            backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
            -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
        }

        body.v7-liquid-glass .app-header::after {
            content: "";
            position: absolute;
            left: 24px;
            right: 24px;
            bottom: -1px;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(34, 184, 240, 0.36), transparent);
            pointer-events: none;
        }

        body.v7-liquid-glass .app-logo {
            color: var(--v7-blue);
        }

        body.v7-liquid-glass #sim-container[data-theme="dark"] .app-logo {
            color: #7CB5FF;
        }

        body.v7-liquid-glass .theme-toggle,
        body.v7-liquid-glass .btn-header {
            min-height: 40px;
            border-color: var(--glass-stroke);
            background: rgba(255, 255, 255, 0.42);
            box-shadow: inset 0 1px 0 var(--glass-highlight);
            border-radius: 999px;
        }

        body.v7-liquid-glass #sim-container[data-theme="dark"] .theme-toggle,
        body.v7-liquid-glass #sim-container[data-theme="dark"] .btn-header:not(.btn-header-primary) {
            background: rgba(255, 255, 255, 0.06);
        }

        body.v7-liquid-glass .theme-toggle {
            width: 40px;
            padding: 9px;
        }

        body.v7-liquid-glass .btn-header-primary,
        body.v7-liquid-glass .btn-primary,
        body.v7-liquid-glass .btn-submit-review,
        body.v7-liquid-glass .btn-comment-submit {
            color: #fff;
            border-color: rgba(10, 95, 232, 0.72);
            background: linear-gradient(180deg, #2D89FF 0%, #0A5FE8 54%, #0647B9 100%);
            box-shadow: 0 9px 24px rgba(13, 82, 214, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.44);
        }

        body.v7-liquid-glass .breadcrumbs-container {
            padding-top: 18px;
            background: transparent;
        }

        body.v7-liquid-glass .app-body {
            position: relative;
            background: transparent;
        }

        body.v7-liquid-glass .hero-section,
        body.v7-liquid-glass .app-section,
        body.v7-liquid-glass .explorer-section {
            position: relative;
            overflow: hidden;
            background: var(--glass-surface-strong);
            border: none;
            border-radius: 24px;
            box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-highlight);
            backdrop-filter: blur(14px) saturate(125%);
            -webkit-backdrop-filter: blur(14px) saturate(125%);
        }



        body.v7-liquid-glass .hero-section {
            animation: v7-surface-arrive 620ms var(--v7-ease) both;
        }

        body.v7-liquid-glass .main-image-container {
            border-radius: 20px;
            box-shadow: 0 18px 44px rgba(15, 23, 42, 0.18);
        }

        body.v7-liquid-glass .main-image {
            transition: transform 700ms var(--v7-ease), filter 300ms ease;
        }

        body.v7-liquid-glass .main-image-container:hover .main-image {
            transform: scale(1.018);
        }



        body.v7-liquid-glass .trust-card-wrapper {
            border-color: rgba(21, 128, 61, 0.32);
            background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(236, 253, 245, 0.86));
            box-shadow: 0 18px 42px rgba(21, 128, 61, 0.10), inset 0 1px 0 white;
        }

        body.v7-liquid-glass #sim-container[data-theme="dark"] .trust-card-wrapper {
            background: linear-gradient(145deg, rgba(16, 34, 50, 0.94), rgba(8, 43, 40, 0.88));
            box-shadow: 0 20px 48px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.10);
        }

        body.v7-liquid-glass .quick-spec-item,
        body.v7-liquid-glass .overview-table-container,
        body.v7-liquid-glass .ingredient-drilldown-box,
        body.v7-liquid-glass .dish-card,
        body.v7-liquid-glass .cert-card,
        body.v7-liquid-glass .average-score-card,
        body.v7-liquid-glass .review-form-card {
            border-color: var(--glass-stroke);
            box-shadow: inset 0 1px 0 var(--glass-highlight);
        }

        /* Apple-style floating section navigation */
        body.v7-liquid-glass .sticky-navbar {
            top: 0;
            margin: 24px 0 !important;
            padding: 4px;
            gap: 4px;
            background: var(--glass-surface);
            border: 1px solid var(--glass-edge);
            border-radius: 9999px;
            box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-highlight);
            backdrop-filter: blur(26px) saturate(165%);
            -webkit-backdrop-filter: blur(26px) saturate(165%);
            width: max-content;
            max-width: 90vw;
            left: 50% !important;
            transform: translateX(-50%) !important;
        }

        body.v7-liquid-glass .navbar-item {
            min-height: 38px;
            border-radius: 9999px;
            transition: color 180ms ease, background 220ms ease, box-shadow 220ms ease;
            padding: 6px 18px;
        }

        body.v7-liquid-glass .navbar-item.active {
            background: linear-gradient(180deg, rgba(45, 137, 255, 0.98), rgba(10, 95, 232, 0.96));
            box-shadow: 0 8px 22px rgba(13, 82, 214, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.35);
        }

        body.v7-liquid-glass .sticky-navbar.collapsed {
            top: 0 !important;
            background: var(--glass-surface) !important;
            border-color: var(--glass-edge) !important;
            box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-highlight) !important;
            transform: scale(0.97) translateX(-51.5%) !important;
        }

        body.v7-liquid-glass #sim-container[data-theme="dark"] .sticky-navbar.collapsed {
            background: var(--glass-surface) !important;
            border-color: var(--glass-edge) !important;
        }

        /* Explorer controls float above the denser, opaque trace data */
        body.v7-liquid-glass .explorer-toolbar {
            position: relative;
            top: auto;
            z-index: 12;
            margin: -10px -10px 2px;
            padding: 10px;
            border: 1px solid var(--glass-edge);
            border-radius: 18px;
            background: var(--glass-surface);
            box-shadow: 0 14px 34px rgba(15, 23, 42, 0.10), inset 0 1px 0 var(--glass-highlight);
            backdrop-filter: blur(22px) saturate(150%);
            -webkit-backdrop-filter: blur(22px) saturate(150%);
        }

        body.v7-liquid-glass .view-mode-selector {
            border-color: var(--glass-stroke);
            border-radius: 999px;
            background: rgba(148, 163, 184, 0.14);
            box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
        }

        body.v7-liquid-glass .view-mode-btn {
            min-height: 40px;
            border-radius: 999px;
        }

        body.v7-liquid-glass .view-mode-btn.active {
            background: var(--glass-surface-strong);
            box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12), inset 0 1px 0 var(--glass-highlight);
        }

        body.v7-liquid-glass .filter-select {
            min-height: 40px;
            border-color: var(--glass-stroke);
            border-radius: 999px;
            background-color: var(--glass-surface-strong);
            box-shadow: inset 0 1px 0 var(--glass-highlight);
        }

        body.v7-liquid-glass .timeline-card,
        body.v7-liquid-glass .swimlane-card,
        body.v7-liquid-glass .drawer-field-row,
        body.v7-liquid-glass .overview-table th,
        body.v7-liquid-glass .overview-table td {
            background-color: var(--bg-card);
        }

        body.v7-liquid-glass .timeline-card:hover,
        body.v7-liquid-glass .dish-card:hover,
        body.v7-liquid-glass .cert-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 15px 34px rgba(13, 82, 214, 0.12);
        }

        /* Liquid overlays */
        body.v7-liquid-glass .modal-backdrop {
            background: rgba(3, 10, 24, 0.44);
            backdrop-filter: blur(8px) saturate(120%);
            -webkit-backdrop-filter: blur(8px) saturate(120%);
        }

        body.v7-liquid-glass .detail-drawer,
        body.v7-liquid-glass .cert-modal,
        body.v7-liquid-glass .comment-popover,
        body.v7-liquid-glass .comments-sidebar,
        body.v7-liquid-glass .toast-notification {
            background: var(--glass-surface-strong);
            border-color: var(--glass-edge);
            box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-highlight);
            backdrop-filter: blur(28px) saturate(155%);
            -webkit-backdrop-filter: blur(28px) saturate(155%);
        }

        body.v7-liquid-glass .detail-drawer {
            width: min(460px, calc(100vw - 16px));
            top: 8px;
            right: -480px;
            bottom: 8px;
            height: auto;
            border: 1px solid var(--glass-edge);
            border-radius: 24px;
        }

        body.v7-liquid-glass .detail-drawer.open {
            right: 8px;
        }

        body.v7-liquid-glass .drawer-header {
            background: rgba(255, 255, 255, 0.32);
            border-bottom-color: var(--glass-stroke);
            box-shadow: inset 0 1px 0 var(--glass-highlight);
        }

        body.v7-liquid-glass[data-theme="dark"] .detail-drawer .drawer-header,
        body.v7-liquid-glass[data-theme="dark"] .cert-modal .drawer-header {
            background: rgba(255, 255, 255, 0.06);
        }

        body.v7-liquid-glass .cert-modal {
            border: 1px solid var(--glass-edge);
            border-radius: 26px;
            overflow: hidden;
        }

        body.v7-liquid-glass .toast-notification {
            color: var(--text-main);
            border-radius: 999px;
        }

        body.v7-liquid-glass .comments-sidebar {
            top: 8px;
            right: 0;
            bottom: 8px;
            border: 1px solid var(--glass-edge);
            border-radius: 22px;
            overflow: hidden;
        }

        body.v7-liquid-glass.comment-mode-active .comments-sidebar {
            right: 8px;
        }

        body.v7-liquid-glass.comment-mode-active {
            padding-right: 336px;
        }

        body.v7-liquid-glass .app-footer {
            background: var(--glass-surface);
            border-top-color: var(--glass-stroke);
            border-radius: 0 0 28px 28px;
            box-shadow: inset 0 1px 0 var(--glass-highlight);
            backdrop-filter: blur(20px) saturate(140%);
            -webkit-backdrop-filter: blur(20px) saturate(140%);
        }

        /* Cohesive interaction language */
        body.v7-liquid-glass :is(button, a, select, input, textarea):focus-visible {
            outline: 3px solid rgba(34, 184, 240, 0.68);
            outline-offset: 3px;
        }

        body.v7-liquid-glass :is(.btn-header, .theme-toggle, .view-mode-btn, .filter-select, .ingredient-tag, .dish-card, .cert-card) {
            transition-duration: 220ms;
            transition-timing-function: var(--v7-ease);
        }

        @keyframes v7-surface-arrive {
            from {
                opacity: 0;
                transform: translateY(12px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
            body.v7-liquid-glass .proto-control-bar,
            body.v7-liquid-glass .app-header,
            body.v7-liquid-glass .sticky-navbar,
            body.v7-liquid-glass .explorer-toolbar,
            body.v7-liquid-glass .detail-drawer,
            body.v7-liquid-glass .cert-modal,
            body.v7-liquid-glass .comment-popover,
            body.v7-liquid-glass .comments-sidebar,
            body.v7-liquid-glass .toast-notification {
                background: var(--bg-card);
            }
        }

        @media (max-width: 768px) {
            body.v7-liquid-glass {
                --glass-blur: 14px;
            }

            body.v7-liquid-glass .proto-control-bar {
                height: 58px;
                padding: 0 12px;
            }

            body.v7-liquid-glass .simulator-wrapper {
                padding: 14px 10px 28px;
            }

            body.v7-liquid-glass .simulator-container:not(.mobile-sim) {
                border-radius: 20px;
            }

            body.v7-liquid-glass .app-header {
                border-radius: 20px 20px 0 0;
            }

            body.v7-liquid-glass .sticky-navbar {
                top: 64px;
                margin: 0 -4px;
                padding: 5px;
                border-radius: 16px;
            }

            body.v7-liquid-glass .hero-section,
            body.v7-liquid-glass .app-section,
            body.v7-liquid-glass .explorer-section {
                border-radius: 20px;
            }

            body.v7-liquid-glass .explorer-toolbar {
                position: relative;
                top: auto;
                margin: 0;
                border-radius: 16px;
            }

            body.v7-liquid-glass .detail-drawer {
                width: calc(100vw - 12px);
                top: 6px;
                left: auto;
                right: calc(-100vw - 12px);
                bottom: 6px;
                height: auto;
                border-radius: 24px;
            }

            body.v7-liquid-glass .detail-drawer.open {
                right: 6px;
            }

            body.v7-liquid-glass .comments-sidebar {
                width: min(320px, calc(100vw - 16px));
            }
            body.v7-liquid-glass .simulator-container.mobile-sim .detail-drawer {
                top: auto;
                bottom: -500px;
                height: 500px;
                right: 0 !important;
                left: 0;
                width: 100% !important;
                max-width: 100% !important;
                border-radius: 24px 24px 0 0;
                border: 1px solid var(--glass-edge);
                border-bottom: none;
                transition: bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }
            body.v7-liquid-glass .simulator-container.mobile-sim .detail-drawer.open {
                bottom: 0 !important;
                right: 0 !important;
            }
        }

        body.v7-liquid-glass .mobile-sim {
            --glass-blur: 12px;
            border-color: rgba(105, 167, 255, 0.25);
            box-shadow: 0 38px 90px rgba(0, 0, 0, 0.52), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
        }

        body.v7-liquid-glass .mobile-sim .app-header {
            gap: 8px;
            padding: 12px 14px;
        }

        body.v7-liquid-glass .mobile-sim .app-logo {
            font-size: 20px;
            flex-shrink: 0;
        }

        body.v7-liquid-glass .mobile-sim .app-nav {
            gap: 7px;
        }

        body.v7-liquid-glass .mobile-sim .btn-header:not(.btn-header-primary) {
            display: none;
        }

        body.v7-liquid-glass .mobile-sim .btn-header-primary {
            padding: 8px 12px;
            white-space: nowrap;
        }

        body.v7-liquid-glass .mobile-sim .sticky-navbar {
            top: 8px;
            margin-left: 4px;
            margin-right: 4px;
        }

        body.v7-liquid-glass .mobile-sim .explorer-toolbar {
            position: relative;
            top: auto;
            margin: 0;
        }

        @media (max-width: 768px) {
            body.v7-liquid-glass .mobile-sim {
                max-width: calc(100vw - 20px);
            }

            body.v7-liquid-glass .app-header .btn-header:not(.btn-header-primary) {
                display: none;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            body.v7-liquid-glass *,
            body.v7-liquid-glass *::before,
            body.v7-liquid-glass *::after {
                scroll-behavior: auto !important;
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
        }

        /* ======================================================================
           V7.1 — EVIDENCE FIRST / TRUST & TRANSPARENCY LAYER
           Glass is reserved for navigation and overlays. Evidence stays solid.
           ====================================================================== */
        .evidence-status-line {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: -4px;
            color: var(--text-muted);
            font-size: 12px;
            line-height: 1.5;
        }

        .evidence-status-line strong { color: var(--text-main); }

        .evidence-status-dot {
            width: 9px;
            height: 9px;
            border-radius: 999px;
            background: var(--warning);
            box-shadow: 0 0 0 4px color-mix(in srgb, var(--warning) 16%, transparent);
        }

        .evidence-source-banner {
            display: grid;
            grid-template-columns: auto 1fr auto;
            align-items: center;
            gap: 14px;
            padding: 16px;
            margin-bottom: 16px;
            border: 1px solid color-mix(in srgb, var(--success) 30%, var(--border-color));
            border-radius: var(--radius-lg);
            background: color-mix(in srgb, var(--success) 7%, var(--bg-card));
        }

        .evidence-source-icon {
            display: grid;
            place-items: center;
            width: 38px;
            height: 38px;
            border-radius: 12px;
            color: var(--success);
            background: color-mix(in srgb, var(--success) 13%, var(--bg-card));
        }

        .evidence-source-copy strong,
        .evidence-source-copy span { display: block; }
        .evidence-source-copy strong { font-size: 13px; color: var(--text-main); }
        .evidence-source-copy span { margin-top: 3px; font-size: 12px; line-height: 1.5; color: var(--text-muted); }

        .evidence-pill,
        .evidence-state {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            width: max-content;
            min-height: 26px;
            padding: 4px 9px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 600;
            white-space: nowrap;
        }

        .evidence-pill { color: var(--success); background: color-mix(in srgb, var(--success) 12%, var(--bg-card)); }
        .evidence-state.source { color: var(--success); background: color-mix(in srgb, var(--success) 12%, var(--bg-card)); }
        .evidence-state.review { color: #9A5A00; background: color-mix(in srgb, var(--warning) 18%, var(--bg-card)); }
        .evidence-state.expired { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, var(--bg-card)); }

        .evidence-metrics-grid {
            display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: 10px;
            margin-bottom: 18px;
        }

        .evidence-metric {
            min-height: 112px;
            padding: 15px;
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            background: var(--bg-card);
        }

        .evidence-metric-value { display: block; font-size: 24px; line-height: 1.05; font-weight: 800; color: var(--primary); }
        .evidence-metric-label { display: block; margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--text-main); }
        .evidence-metric-note { display: block; margin-top: 4px; font-size: 10px; line-height: 1.35; color: var(--text-muted); }

        .evidence-hub-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 16px;
        }

        .evidence-panel {
            overflow: hidden;
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            background: var(--bg-card);
        }

        .evidence-panel-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 12px;
            padding: 15px 16px;
            border-bottom: 1px solid var(--border-color);
        }

        .evidence-panel-header h3 { font-size: 13px; color: var(--text-main); }
        .evidence-panel-header p { margin-top: 3px; font-size: 11px; color: var(--text-muted); }

        .evidence-data-table { width: 100%; border-collapse: collapse; font-size: 12px; }
        .evidence-data-table th,
        .evidence-data-table td { padding: 11px 16px; border-bottom: 1px solid var(--border-color); text-align: left; vertical-align: top; }
        .evidence-data-table tr:last-child th,
        .evidence-data-table tr:last-child td { border-bottom: 0; }
        .evidence-data-table th { width: 34%; color: var(--text-muted); font-weight: 650; }
        .evidence-data-table td { color: var(--text-main); font-weight: 650; overflow-wrap: anywhere; }

        .exception-list { list-style: none; padding: 8px; }
        .exception-item { display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 11px 8px; }
        .exception-item + .exception-item { border-top: 1px solid var(--border-color); }
        .exception-icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 9px; color: #9A5A00; background: color-mix(in srgb, var(--warning) 18%, var(--bg-card)); font-size: 12px; font-weight: 800; }
        .exception-copy strong { display: block; font-size: 12px; color: var(--text-main); }
        .exception-copy span { display: block; margin-top: 3px; font-size: 11px; line-height: 1.45; color: var(--text-muted); }

        .source-references { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
        .source-reference-card { display: grid; grid-template-columns: 74px 1fr; gap: 11px; align-items: center; padding: 9px; border: 1px solid var(--border-color); border-radius: var(--radius-lg); color: inherit; text-decoration: none; background: var(--bg-card); transition: transform .2s ease, border-color .2s ease; }
        .source-reference-card:hover { transform: translateY(-2px); border-color: var(--primary); }
        .source-reference-card img { width: 74px; height: 54px; object-fit: cover; object-position: top; border-radius: 9px; border: 1px solid var(--border-color); }
        .source-reference-card strong { display: block; font-size: 12px; color: var(--text-main); }
        .source-reference-card span { display: block; margin-top: 3px; font-size: 10px; line-height: 1.4; color: var(--text-muted); }

        #traceability .explorer-workspace { display: none; }
        .evidence-log { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); gap: 16px; }
        .evidence-register { padding: 8px 16px; }
        .evidence-record { display: grid; grid-template-columns: 132px 1fr auto; gap: 14px; align-items: start; padding: 15px 0; border-bottom: 1px solid var(--border-color); }
        .evidence-record:last-child { border-bottom: 0; }
        .evidence-record-time { font-size: 11px; line-height: 1.45; color: var(--text-muted); font-variant-numeric: tabular-nums; }
        .evidence-record-copy strong { display: block; font-size: 12px; color: var(--text-main); }
        .evidence-record-copy span { display: block; margin-top: 4px; font-size: 11px; line-height: 1.45; color: var(--text-muted); }

        .source-scope-card { padding: 16px; border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: var(--bg-card); }
        .source-scope-card h3 { font-size: 13px; color: var(--text-main); }
        .source-scope-card > p { margin-top: 6px; font-size: 11px; line-height: 1.5; color: var(--text-muted); }
        .source-scope-list { margin-top: 14px; list-style: none; display: grid; gap: 9px; }
        .source-scope-list li { display: flex; gap: 8px; align-items: flex-start; font-size: 11px; line-height: 1.45; color: var(--text-main); }
        .source-scope-list li::before { content: '✓'; flex: 0 0 auto; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: var(--success); background: color-mix(in srgb, var(--success) 12%, var(--bg-card)); font-weight: 800; }

        .source-origin-matrix { margin-top: 14px; padding: 16px; border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: var(--bg-card); }
        .source-origin-matrix h3 { font-size: 13px; color: var(--text-main); }
        .source-origin-matrix > p { margin-top: 4px; font-size: 10px; color: var(--text-muted); }
        .origin-chip-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
        .origin-chip { padding: 9px 10px; border-radius: var(--radius-md); background: var(--bg-main); border: 1px solid var(--border-color); }
        .origin-chip strong { display: block; font-size: 11px; color: var(--text-main); }
        .origin-chip span { display: block; margin-top: 3px; font-size: 9px; color: var(--text-muted); }

        .certificate-legal-details { margin-top: 12px; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-main); }
        .certificate-legal-details summary { cursor: pointer; padding: 11px 12px; font-size: 11px; font-weight: 600; color: var(--primary); }
        .certificate-legal-details div { padding: 0 12px 12px; font-size: 10px; line-height: 1.55; color: var(--text-muted); }
        .certificate-legal-details p + p { margin-top: 8px; }

        .certificate-evidence-layout { display: grid; grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr); gap: 16px; }
        .certificate-source-preview { overflow: hidden; border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: var(--bg-card); }
        .certificate-source-preview img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top; display: block; border-bottom: 1px solid var(--border-color); }
        .certificate-source-preview div { padding: 13px 15px; }
        .certificate-source-preview strong { display: block; font-size: 12px; color: var(--text-main); }
        .certificate-source-preview span { display: block; margin-top: 4px; font-size: 10px; line-height: 1.45; color: var(--text-muted); }
        .certificate-record { padding: 18px; border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: var(--bg-card); }
        .certificate-record-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
        .certificate-record h3 { font-size: 18px; line-height: 1.3; color: var(--text-main); }
        .certificate-record .evidence-data-table { margin-top: 12px; border: 1px solid var(--border-color); border-radius: var(--radius-md); overflow: hidden; display: table; }
        .certificate-warning { display: flex; gap: 10px; align-items: flex-start; padding: 12px; margin-top: 14px; border-radius: var(--radius-md); border: 1px solid color-mix(in srgb, var(--warning) 45%, var(--border-color)); background: color-mix(in srgb, var(--warning) 10%, var(--bg-card)); color: var(--text-main); font-size: 11px; line-height: 1.5; }
        .certificate-actions { display: flex; gap: 8px; margin-top: 14px; }

        .review-source-banner { display: flex; justify-content: space-between; gap: 14px; align-items: center; padding: 12px 14px; margin-bottom: 14px; border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: var(--bg-card); }
        .review-source-banner strong { display: block; font-size: 12px; color: var(--text-main); }
        .review-source-banner span { display: block; margin-top: 3px; font-size: 10px; line-height: 1.45; color: var(--text-muted); }
        .source-counter-list { display: grid; gap: 8px; }
        .source-counter { display: flex; justify-content: space-between; gap: 12px; padding: 11px 12px; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-card); font-size: 11px; color: var(--text-muted); }
        .source-counter strong { color: var(--text-main); font-variant-numeric: tabular-nums; }
        .review-source-tag { display: inline-flex; margin-top: 9px; padding: 3px 7px; border-radius: 999px; background: color-mix(in srgb, var(--primary) 9%, var(--bg-card)); color: var(--primary); font-size: 10px; font-weight: 700; }

        .legacy-variant-controls { display: none !important; }
        body.v7-liquid-glass #sim-container[data-theme="dark"] .hero-section { background: #101B2F; }

        .simulator-container.mobile-sim .evidence-source-banner { grid-template-columns: auto 1fr; }
        .simulator-container.mobile-sim .evidence-source-banner .evidence-pill { grid-column: 1 / -1; }
        .simulator-container.mobile-sim .evidence-metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .simulator-container.mobile-sim .evidence-metric:last-child { grid-column: 1 / -1; }
        .simulator-container.mobile-sim .evidence-hub-grid,
        .simulator-container.mobile-sim .evidence-log,
        .simulator-container.mobile-sim .certificate-evidence-layout,
        .simulator-container.mobile-sim .source-references { grid-template-columns: 1fr; }
        .simulator-container.mobile-sim .origin-chip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .simulator-container.mobile-sim .evidence-record { grid-template-columns: 1fr; gap: 7px; }
        .simulator-container.mobile-sim .evidence-data-table th,
        .simulator-container.mobile-sim .evidence-data-table td { display: block; width: 100%; padding: 8px 12px; }
        .simulator-container.mobile-sim .evidence-data-table th { padding-bottom: 2px; border-bottom: 0; }
        .simulator-container.mobile-sim .evidence-data-table td { padding-top: 2px; }
        .simulator-container.mobile-sim .certificate-record-top,
        .simulator-container.mobile-sim .review-source-banner { flex-direction: column; align-items: flex-start; }

        @media (max-width: 980px) {
            .evidence-metrics-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
            .evidence-hub-grid,
            .evidence-log,
            .certificate-evidence-layout { grid-template-columns: 1fr; }
        }

        @media (max-width: 640px) {
            .evidence-source-banner { grid-template-columns: auto 1fr; }
            .evidence-source-banner .evidence-pill { grid-column: 1 / -1; }
            .evidence-metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .evidence-metric:last-child { grid-column: 1 / -1; }
            .source-references { grid-template-columns: 1fr; }
            .evidence-record { grid-template-columns: 1fr; gap: 7px; }
            .evidence-data-table th,
            .evidence-data-table td { display: block; width: 100%; padding: 8px 12px; }
            .evidence-data-table th { padding-bottom: 2px; border-bottom: 0; }
            .evidence-data-table td { padding-top: 2px; }
            .certificate-record-top,
            .review-source-banner { flex-direction: column; align-items: flex-start; }
            .origin-chip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        }

        /* Modern premium certificate layout styles */
        /* Clean tech professional certificate layout */
        .cert-layout {
            display: grid;
            grid-template-columns: 320px 1fr;
            gap: 40px;
            background-color: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            padding: 32px;
            margin-top: 16px;
        }

        .cert-hero-image-wrapper {
            width: 100%;
            height: 420px;
            border: none;
            border-radius: 0;
            overflow: hidden;
            position: relative;
            background-color: transparent;
            box-shadow: none;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .cert-hero-image-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .cert-arrow-btn {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            color: var(--text-main);
            border-radius: 50%;
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s ease;
            box-shadow: var(--shadow-sm);
            z-index: 10;
        }

        .cert-arrow-btn:hover {
            background-color: var(--primary-light);
            color: var(--primary);
            border-color: var(--primary-border);
        }

        .cert-thumb-box {
            flex: 0 0 54px;
            height: 72px;
            border-radius: 4px;
            overflow: hidden;
            cursor: pointer;
            transition: all 0.2s ease;
            position: relative;
            background: #FFF;
            box-shadow: 0 2px 4px rgba(0,0,0,0.03);
            box-sizing: border-box;
        }

        .cert-thumb-box:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
        }

        [data-theme="dark"] .cert-image-wrapper {
            background: #1d1d1f;
        }

        .cert-image-wrapper img {
            width: 100%;
            height: auto;
            display: block;
            transition: transform 0.5s ease;
        }

        .cert-image-card:hover .cert-image-wrapper img {
            transform: scale(1.03);
        }

        .cert-status-badge {
            position: absolute;
            top: 12px;
            right: 12px;
            background-color: rgba(255, 255, 255, 0.9);
            border: 1px solid #15803D;
            padding: 4px 10px;
            border-radius: 9999px;
            font-size: 11px;
            font-weight: 700;
            color: #047857;
            display: flex;
            align-items: center;
            gap: 6px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            z-index: 5;
        }

        [data-theme="dark"] .cert-status-badge {
            background-color: rgba(15, 23, 42, 0.85);
            border-color: #15803D;
            color: #34D399;
        }

        .cert-status-badge .badge-dot {
            width: 6px;
            height: 6px;
            background-color: #15803D;
            border-radius: 50%;
            box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.2);
        }

        .cert-zoom-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
            padding: 16px 12px 8px;
            color: #ffffff;
            font-size: 11px;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            opacity: 0;
            transition: opacity 0.3s ease;
            pointer-events: none;
        }

        .cert-image-card:hover .cert-zoom-overlay {
            opacity: 1;
        }

        /* Right column details */
        .cert-details-card {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .cert-main-info {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .cert-main-title {
            font-size: 20px;
            font-weight: 800;
            letter-spacing: -0.02em;
            color: var(--text-main);
            margin: 0;
            line-height: 1.3;
        }

        .cert-main-subtitle {
            font-size: 13px;
            font-weight: 550;
            color: var(--text-muted);
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .cert-main-subtitle svg {
            color: #15803D;
            flex-shrink: 0;
        }

        /* Grid info */
        .cert-grid-info {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 16px;
            border-top: 1px solid var(--border-color);
            border-bottom: 1px solid var(--border-color);
            padding: 18px 0;
        }

        .cert-grid-item {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .cert-grid-item.full-width {
            grid-column: span 2;
        }

        .cert-grid-label {
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--text-muted);
        }

        .cert-grid-value {
            font-size: 13.5px;
            font-weight: 600;
            color: var(--text-main);
            line-height: 1.45;
        }

        /* Legal footnote block */
        .cert-legal-reference {
            background-color: var(--bg-main);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            padding: 14px 16px;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .cert-legal-label {
            font-size: 11px;
            font-weight: 800;
            color: var(--primary);
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .cert-legal-text {
            font-size: 11px;
            line-height: 1.6;
            color: var(--text-muted);
            margin: 0;
        }

        @media (max-width: 768px) {
            .cert-layout {
                grid-template-columns: 1fr;
                gap: 24px;
                padding: 20px;
            }
            .cert-image-card {
                max-width: 260px;
                margin: 0 auto;
            }
            .cert-grid-info {
                grid-template-columns: 1fr;
            }
            .cert-grid-item.full-width {
                grid-column: auto;
            }
            .cert-main-title {
                font-size: 18px;
            }
        }

        .simulator-container.mobile-sim .cert-layout {
            grid-template-columns: 1fr;
            gap: 24px;
            padding: 20px;
        }
        
        .simulator-container.mobile-sim .cert-image-card {
            max-width: 260px;
            margin: 0 auto;
        }

        .simulator-container.mobile-sim .cert-grid-info {
            grid-template-columns: 1fr;
        }

        .simulator-container.mobile-sim .cert-grid-item.full-width {
            grid-column: auto;
        }

        .simulator-container.mobile-sim .cert-main-title {
            font-size: 18px;
        }

        /* Clean and Professional Metrics Dashboard */
        .metrics-horizontal-layout {
            display: grid;
            grid-template-columns: 200px 1fr;
            gap: 24px;
            align-items: center;
        }

        .metrics-title-block {
            min-width: 0;
            text-align: left;
        }

        .metrics-dashboard-grid {
            display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: 12px;
            width: 100%;
        }

        .metric-card-clean {
            background-color: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            padding: 12px 14px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: 8px;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            position: relative;
            overflow: hidden;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
        }

        .metric-card-clean:hover {
            transform: translateY(-2px);
            border-color: var(--primary-light);
            box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.04);
        }

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

        .metric-label-clean {
            font-size: 11.5px;
            font-weight: 500;
            color: var(--text-muted);
            letter-spacing: -0.01em;
        }

        .metric-icon-clean {
            width: 16px;
            height: 16px;
            color: var(--text-muted);
            opacity: 0.7;
            transition: color 0.3s ease;
        }

        .metric-card-clean:hover .metric-icon-clean {
            color: var(--primary);
            opacity: 1;
        }

        .metric-body-row {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            width: 100%;
        }

        .metric-value-clean {
            font-size: 22px;
            font-weight: 800;
            color: var(--text-main);
            line-height: 1;
            font-variant-numeric: tabular-nums;
            letter-spacing: -0.02em;
        }

        .metric-badge-clean {
            font-size: 9.5px;
            font-weight: 700;
            padding: 2px 8px;
            border-radius: 9999px;
            line-height: 1;
        }

        .metric-badge-clean.success {
            background-color: rgba(21, 128, 61, 0.1);
            color: #15803D;
        }

        .metric-badge-clean.info {
            background-color: rgba(37, 99, 235, 0.1);
            color: #2563EB;
        }

        .metric-badge-clean.secondary {
            background-color: var(--bg-main);
            color: var(--text-muted);
            border: 1px solid var(--border-color);
        }

        .metric-progress-clean {
            height: 4px;
            background-color: var(--border-color);
            border-radius: 2px;
            overflow: hidden;
            width: 100%;
            margin-top: 4px;
        }

        .metric-progress-bar-clean {
            height: 100%;
            background-color: #15803D;
            border-radius: 2px;
        }

        @media (max-width: 1024px) {
            .metrics-horizontal-layout {
                grid-template-columns: 1fr;
                gap: 16px;
            }
            .metrics-dashboard-grid {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }
        }

        @media (max-width: 768px) {
            .metrics-dashboard-grid {
                grid-template-columns: 1fr;
            }
        }
        
        .simulator-container.mobile-sim .metrics-horizontal-layout {
            grid-template-columns: 1fr !important;
            gap: 16px !important;
        }

        .simulator-container.mobile-sim .metrics-dashboard-grid {
            grid-template-columns: 1fr !important;
        }

        /* Explorer Split Layout: Left Ingredients, Right Timeline */
        .explorer-split-container {
            display: grid;
            grid-template-columns: 260px 1fr;
            gap: 24px;
            margin-top: 24px;
            align-items: start;
        }

        .explorer-ingredients-sidebar {
            background-color: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            padding: 20px;
            position: sticky;
            top: 130px; /* Sits cleanly below sticky navbar */
            z-index: 10;
        }

        .sidebar-title {
            font-size: 13px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--text-main);
            margin-top: 0;
            margin-bottom: 16px;
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 10px;
        }

        .sidebar-list-container {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .sidebar-list-container li {
            margin: 0;
        }

        /* Sidebar active toggle buttons */
        .ingredient-sidebar-btn {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            padding: 10px 12px;
            background: transparent;
            border: 1px solid transparent;
            border-radius: var(--radius-md);
            font-size: 13px;
            font-weight: 600;
            color: var(--text-muted);
            text-align: left;
            cursor: pointer;
            transition: var(--transition-fast);
        }

        .ingredient-sidebar-btn:hover {
            background-color: var(--bg-main);
            color: var(--text-main);
        }

        .ingredient-sidebar-btn.active {
            background-color: var(--primary) !important;
            border-color: var(--primary) !important;
            color: #ffffff !important;
            box-shadow: 0 4px 12px -3px rgba(13, 82, 214, 0.3) !important;
        }

        .ingredient-sidebar-btn.active .sidebar-btn-bullet {
            color: #ffffff !important;
            opacity: 0.9;
        }

        .ingredient-sidebar-btn.active .sidebar-btn-dot {
            background-color: #ffffff !important;
            box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2) !important;
        }

        .sidebar-btn-left {
            display: flex;
            align-items: center;
            gap: 8px;
            min-width: 0;
        }

        .sidebar-btn-left span {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .sidebar-btn-bullet {
            font-size: 12px;
            color: var(--text-muted);
            opacity: 0.6;
            flex-shrink: 0;
        }

        .sidebar-btn-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            flex-shrink: 0;
        }

        .dot-green {
            background-color: #15803D;
            box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.15);
        }

        .dot-gray {
            background-color: #64748B;
            box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.15);
        }

        .explorer-timeline-content {
            min-width: 0;
        }

        /* Timeline Node & Card Layout Redesign */
        .timeline-view {
            display: flex;
            flex-direction: column;
            position: relative;
            padding-left: 32px;
        }

        .timeline-view::before {
            content: '';
            position: absolute;
            top: 24px;
            bottom: 24px;
            left: 11px;
            width: 2px;
            background-color: var(--border-color);
            z-index: 1;
        }

        .timeline-node {
            position: relative;
            margin-bottom: 20px;
        }

        .timeline-node:last-child {
            margin-bottom: 0;
        }

        .timeline-marker {
            position: absolute;
            left: -32px;
            top: 22px;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background-color: var(--bg-card);
            border: 2px solid var(--border-color);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 2;
            transition: var(--transition-normal);
        }

        .timeline-node.verified .timeline-marker {
            border-color: #15803D;
            color: #15803D;
            background-color: rgba(21, 128, 61, 0.1);
        }

        .timeline-node.warning .timeline-marker {
            border-color: #F59E0B;
            color: #F59E0B;
            background-color: rgba(245, 158, 11, 0.1);
        }

        .timeline-node.unverified .timeline-marker {
            border-color: #64748B;
            color: #64748B;
            background-color: rgba(100, 116, 139, 0.1);
        }

        .timeline-node.active .timeline-marker {
            transform: scale(1.15);
            box-shadow: 0 0 0 4px rgba(13, 82, 214, 0.15);
        }

        .timeline-marker svg {
            width: 12px;
            height: 12px;
        }

        /* Timeline Event Card */
        .timeline-card {
            background-color: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            padding: 16px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            cursor: pointer;
            transition: var(--transition-normal);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.01);
        }

        .timeline-card:hover {
            border-color: var(--primary);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
            transform: translateX(4px);
        }

        .timeline-card.active {
            border-color: var(--primary);
            box-shadow: 0 0 0 1px var(--primary), 0 6px 16px rgba(13, 82, 214, 0.08);
        }

        .event-time-col {
            font-size: 12.5px;
            font-weight: 500;
            color: var(--text-muted);
            width: 130px;
            flex-shrink: 0;
            font-variant-numeric: tabular-nums;
            line-height: 1.4;
        }

        .event-details-col {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 8px;
            min-width: 0;
        }

        .event-title-row {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }

        .event-title {
            font-size: 14.5px;
            font-weight: 600;
            color: var(--text-main);
            letter-spacing: -0.01em;
            line-height: 1.3;
        }

        .event-badge {
            font-size: 10px;
            font-weight: 700;
            padding: 2px 8px;
            border-radius: 9999px;
            text-transform: uppercase;
            letter-spacing: 0.02em;
        }

        .badge-verified-gt {
            background-color: rgba(21, 128, 61, 0.1);
            color: #047857;
            border: 1px solid rgba(21, 128, 61, 0.2);
        }

        .badge-warning-gt {
            background-color: rgba(245, 158, 11, 0.1);
            color: #D97706;
            border: 1px solid rgba(245, 158, 11, 0.2);
        }

        .badge-unverified-gt {
            background-color: #F1F5F9;
            color: #475569;
            border: 1px solid #E2E8F0;
        }

        [data-theme="dark"] .badge-unverified-gt {
            background-color: #1E293B;
            color: #94A3B8;
            border-color: #334155;
        }

        .event-metadata-row {
            display: flex;
            align-items: center;
            gap: 16px;
            flex-wrap: wrap;
        }

        .event-meta-item {
            font-size: 12px;
            color: var(--text-muted);
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .event-meta-item svg {
            width: 14px;
            height: 14px;
            color: var(--text-muted);
            opacity: 0.7;
        }

        .event-action-col {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 13px;
            font-weight: 700;
            color: var(--primary);
            flex-shrink: 0;
        }

        .event-action-col svg {
            transition: transform 0.2s ease;
        }

        .timeline-card:hover .event-action-col svg {
            transform: translateX(3px);
        }

        @media (max-width: 768px) {
            .explorer-split-container {
                grid-template-columns: 1fr;
                gap: 18px;
            }
            .explorer-ingredients-sidebar {
                position: static;
                padding: 16px;
            }
            .sidebar-list-container {
                flex-direction: row;
                overflow-x: auto;
                white-space: nowrap;
                scrollbar-width: none;
                gap: 8px;
                padding-bottom: 4px;
            }
            .sidebar-list-container li {
                flex-shrink: 0;
            }
            .ingredient-sidebar-btn {
                padding: 8px 12px;
                width: auto;
            }
            .ingredient-sidebar-btn .sidebar-btn-dot {
                margin-left: 8px;
            }
        }

        .simulator-container.mobile-sim .explorer-split-container {
            grid-template-columns: 1fr;
            gap: 18px;
        }
        
        .simulator-container.mobile-sim .explorer-ingredients-sidebar {
            position: static;
            padding: 16px;
        }

        .simulator-container.mobile-sim .sidebar-list-container {
            flex-direction: row;
            overflow-x: auto;
            white-space: nowrap;
            scrollbar-width: none;
            gap: 8px;
            padding-bottom: 4px;
            display: flex;
        }

        .simulator-container.mobile-sim .sidebar-list-container::-webkit-scrollbar {
            display: none;
        }

        .simulator-container.mobile-sim .sidebar-list-container li {
            flex-shrink: 0;
        }

        .simulator-container.mobile-sim .ingredient-sidebar-btn {
            padding: 8px 12px;
            width: auto;
        }
        
        .simulator-container.mobile-sim .ingredient-sidebar-btn .sidebar-btn-dot {
            margin-left: 8px;
        }

/* ==========================================================================
   REDESIGNED THÀNH PHẦN GRID CARDS (SECTION 1)
   ========================================================================== */
.ingredients-detail-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 24px;
}

.ingredient-detail-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.01);
}

.ingredient-detail-card:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
    box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.05);
}

.ing-card-media {
    width: 100%;
    height: 110px;
    border-radius: var(--radius-md);
    object-fit: cover;
    background-color: var(--bg-main);
    border: 1px solid var(--border-color);
}

.ing-card-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ing-card-title {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text-main);
    letter-spacing: -0.01em;
}

.ing-card-batch {
    font-size: 11.5px;
    color: var(--text-muted);
    font-family: monospace;
}

.ing-card-badge {
    align-self: flex-start;
    font-size: 10.5px;
    font-weight: 700;
    padding: 2.5px 8px;
    border-radius: 999px;
    line-height: 1;
}

.ing-card-badge.type-badge {
    background-color: rgba(37, 99, 235, 0.1);
    color: var(--primary);
}

.ing-card-badge.status-verified {
    background-color: rgba(21, 128, 61, 0.1);
    color: #047857;
    border: 1px solid rgba(21, 128, 61, 0.2);
}

.ing-card-badge.status-warning {
    background-color: rgba(245, 158, 11, 0.1);
    color: #D97706;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.ing-card-meta {
    font-size: 11.5px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    border-top: 1px solid var(--border-color);
    padding-top: 10px;
    margin-top: auto;
}

.ing-card-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 4px;
}

.btn-ing-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    font-size: 11.5px;
    font-weight: 700;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition-fast);
    text-align: center;
}

.btn-ing-action-primary {
    background-color: var(--bg-main);
    border: 1px solid var(--border-color);
    color: var(--primary);
}

.btn-ing-action-primary:hover {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
}

.btn-ing-action-secondary {
    background-color: var(--bg-main);
    border: 1px solid var(--border-color);
    color: var(--text-main);
}

.btn-ing-action-secondary:hover {
    background-color: var(--bg-main);
    border-color: var(--primary-light);
    color: var(--primary);
}

/* ==========================================================================
   REDESIGNED HÀNH TRÌNH WORKSPACE (SECTION 2)
   ========================================================================== */
.trace-toolbar {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.01);
}

.trace-filters {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.filter-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-item label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
}

.filter-item select {
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 12px;
    background-color: var(--bg-main);
    color: var(--text-main);
    font-weight: 600;
    outline: none;
    cursor: pointer;
}

.btn-reset-filters {
    background: transparent;
    border: 0;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    margin-left: auto;
}

.btn-reset-filters:hover {
    color: var(--primary);
}

.trace-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--border-color);
    padding-top: 12px;
}

.toggle-group-sm {
    display: inline-flex;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.toggle-group-sm .toggle-btn {
    padding: 5px 12px;
    font-size: 11.5px;
    font-weight: 700;
    border: 0;
    background-color: var(--bg-main);
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition-fast);
}

.toggle-group-sm .toggle-btn.active {
    background-color: var(--primary);
    color: #ffffff;
}

.result-counter {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 600;
}

.trace-workspace {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 24px;
    margin-top: 20px;
    align-items: start;
}

.trace-scope-sidebar {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 20px;
    position: sticky;
    top: 130px;
    z-index: 10;
}

.scope-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.scope-item-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 9px 12px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-size: 12.5px;
    font-weight: 650;
    color: var(--text-muted);
    text-align: left;
    cursor: pointer;
    transition: var(--transition-fast);
}

.scope-item-btn:hover {
    background-color: var(--bg-main);
    color: var(--text-main);
}

.scope-item-btn.active {
    background-color: var(--primary) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px -3px rgba(13, 82, 214, 0.3) !important;
}

.scope-item-btn.active .sidebar-btn-bullet {
    color: #ffffff !important;
}

.scope-item-btn.active .sidebar-btn-dot {
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25) !important;
}

.trace-content-pane {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.trace-tabs-header {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    gap: 16px;
}

.trace-tabs-header .tab-btn {
    padding: 12px 16px;
    font-size: 13.5px;
    font-weight: 600;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition-fast);
}

.trace-tabs-header .tab-btn:hover {
    color: var(--text-main);
}

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

.tab-pane-content {
    display: none;
}

.tab-pane-content.active {
    display: block;
}

/* ==========================================================================
   VISUALIZE GRAPH LAYOUT & Legend
   ========================================================================== */
.graph-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.btn-graph-action {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 6px 12px;
    font-size: 11.5px;
    font-weight: 700;
    border-radius: var(--radius-sm);
    color: var(--text-main);
    cursor: pointer;
    transition: var(--transition-fast);
}

.btn-graph-action:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.graph-legend {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-muted);
}

.graph-legend .legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.graph-legend .legend-color {
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

.legend-color.material { background-color: #2563EB; }
.legend-color.transformation { background-color: #7C3AED; }
.legend-color.sgtin { background-color: #15803D; }

.visualize-graph-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.graph-canvas-container {
    width: 100%;
    overflow: auto;
    border-radius: var(--radius-md);
}

/* SVG DAG Interactive Nodes styling */
.node-group {
    transition: opacity 0.3s ease, transform 0.2s ease;
    cursor: pointer;
}

.node-group:hover {
    transform: translateY(-2px);
}

.node-group rect {
    transition: stroke 0.2s ease, stroke-width 0.2s ease, fill 0.2s ease;
}

.node-group:hover rect {
    stroke: var(--primary);
    stroke-width: 2px;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.05));
}

.node-text {
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    fill: var(--text-main);
    pointer-events: none;
}

.node-subtext {
    font-family: monospace;
    font-size: 9px;
    fill: var(--text-muted);
    pointer-events: none;
}

.edge-path {
    stroke: #E2E8F0;
    stroke-width: 1.5px;
    fill: none;
    transition: stroke 0.3s ease, stroke-width 0.3s ease, opacity 0.3s ease;
}

.edge-text {
    font-size: 8.5px;
    fill: var(--text-muted);
    font-weight: 700;
    text-anchor: middle;
    background-color: var(--bg-card);
}

/* Selected state high-fidelity animation path highlights */
.node-group.selected rect {
    stroke: var(--primary);
    stroke-width: 2.5px;
    filter: drop-shadow(0 4px 12px rgba(13, 82, 214, 0.15));
}

@keyframes dashflow {
    to {
        stroke-dashoffset: -20;
    }
}

.edge-path.highlighted {
    stroke: var(--primary) !important;
    stroke-width: 2.5px !important;
    stroke-dasharray: 6, 4;
    animation: dashflow 1s linear infinite;
    opacity: 1 !important;
}

.edge-path.dimmed,
.node-group.dimmed {
    opacity: 0.15 !important;
}

/* Provenance Tree for mobile viewport alternative */
.provenance-tree-mobile {
    display: none;
    flex-direction: column;
    gap: 8px;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-top: 12px;
}

.tree-node-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-main);
    padding: 4px 0;
}

.tree-node-row .tree-bullet {
    font-family: monospace;
    color: var(--text-muted);
    opacity: 0.6;
    margin-right: 4px;
}

/* Drawer mass balance and dynamic grid details */
.drawer-composition-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    margin-top: 8px;
}

.drawer-composition-table th,
.drawer-composition-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
}

.drawer-composition-table th {
    color: var(--text-muted);
    font-weight: 600;
    background-color: var(--bg-main);
}

.drawer-composition-table td {
    color: var(--text-main);
    font-weight: 500;
}

.drawer-section-title-sm {
    font-size: 12.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-main);
    margin-top: 20px;
    margin-bottom: 8px;
}

/* Certificate Thumbnails CSS */
.cert-thumbnail-row::-webkit-scrollbar {
    height: 6px;
}
.cert-thumbnail-row::-webkit-scrollbar-track {
    background: transparent;
}
.cert-thumbnail-row::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: var(--radius-full);
}
.cert-thumbnail-row::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}
.cert-thumb-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
    border-color: var(--text-muted) !important;
}
.cert-thumb-card.active:hover {
    border-color: inherit !important;
}

/* ==========================================================================
   RESPONSIVE OVERLOAD RESOLUTION (TABLET / MOBILE)
   ========================================================================== */
@media (max-width: 980px) {
    .trace-workspace {
        grid-template-columns: 1fr;
    }
    .trace-scope-sidebar {
        position: static;
        padding: 16px;
    }
    .scope-list {
        flex-direction: row;
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: none;
        gap: 8px;
    }
    .scope-list::-webkit-scrollbar {
        display: none;
    }
    .scope-list li {
        flex-shrink: 0;
    }
    .scope-item-btn {
        width: auto;
        padding: 8px 14px;
    }
    .ingredients-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .ingredients-detail-grid {
        grid-template-columns: 1fr;
    }
    .provenance-tree-mobile {
        display: flex;
    }
    .visualize-graph-wrapper {
        display: none; /* Hide graph on pure mobile to prevent massive clamping, fallback to Tree */
    }
    .btn-reset-filters {
        margin-left: 0;
        width: 100%;
        text-align: left;
    }
}

.simulator-container.mobile-sim .ingredients-detail-grid {
    grid-template-columns: 1fr !important;
}

.simulator-container.mobile-sim .trace-workspace {
    grid-template-columns: 1fr !important;
}

.simulator-container.mobile-sim .trace-scope-sidebar {
    position: static !important;
    padding: 16px !important;
}

.simulator-container.mobile-sim .scope-list {
    flex-direction: row !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    display: flex !important;
}

.simulator-container.mobile-sim .scope-list li {
    flex-shrink: 0 !important;
}

.simulator-container.mobile-sim .scope-item-btn {
    width: auto !important;
    padding: 8px 14px !important;
}

.simulator-container.mobile-sim .visualize-graph-wrapper {
    display: none !important;
}

.simulator-container.mobile-sim .provenance-tree-mobile {
    display: flex !important;
}

/* ==========================================================================
   INTERACTIVE SUPPLY CHAIN PIPELINE FILTER TRACKER
   ========================================================================== */
.pipeline-filter-container {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    padding: 12px 16px;
    background-color: var(--bg-main);
    border-radius: var(--radius-lg);
    overflow-x: auto;
    scrollbar-width: none; /* Hide scrollbar for clean horizontal scrolling */
    -webkit-overflow-scrolling: touch;
}

.pipeline-filter-container::-webkit-scrollbar {
    display: none;
}

.pipeline-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 8px;
    border-radius: var(--radius-md);
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: all 180ms ease;
    text-align: center;
    min-width: 130px;
    outline: none;
}

.pipeline-step:hover {
    border-color: var(--primary-border);
    background-color: var(--primary-light);
}

.pipeline-step.active {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: white !important;
    box-shadow: 0 6px 14px rgba(13, 82, 214, 0.2) !important;
}

.pipeline-step.active .pipeline-icon {
    color: white !important;
}

.pipeline-step.active .pipeline-title {
    color: white !important;
    font-weight: 600;
}

.pipeline-step.active .pipeline-subtitle {
    color: rgba(255, 255, 255, 0.8) !important;
}

.pipeline-icon {
    width: 20px;
    height: 20px;
    margin-bottom: 6px;
    color: var(--primary);
    transition: color 180ms ease;
    flex-shrink: 0;
}

.pipeline-title {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.pipeline-subtitle {
    font-size: 9.5px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    margin-top: 2px;
}

.pipeline-connector {
    color: var(--text-muted);
    font-size: 14px;
    display: flex;
    align-items: center;
    padding: 0 4px;
    user-select: none;
    opacity: 0.5;
    flex-shrink: 0;
}

/* Glassmorphic Overrides for Pipeline Tracker */
body.v7-liquid-glass .pipeline-filter-container {
    background: var(--glass-surface);
    border: 1px solid var(--glass-edge);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

body.v7-liquid-glass .pipeline-step {
    background: rgba(255, 255, 255, 0.35);
    border-color: var(--glass-stroke);
}

body.v7-liquid-glass .pipeline-step:hover {
    background: rgba(13, 82, 214, 0.08);
    border-color: var(--primary-border);
}

body.v7-liquid-glass .pipeline-step.active {
    background: linear-gradient(180deg, rgba(45, 137, 255, 0.95), rgba(10, 95, 232, 0.95)) !important;
    box-shadow: 0 8px 22px rgba(13, 82, 214, 0.22) !important;
    border-color: transparent !important;
}

/* Mobile responsive adjustments */
.simulator-container.mobile-sim .pipeline-connector {
    display: none; /* Hide arrows on mobile slider layout to save space */
}

.simulator-container.mobile-sim .pipeline-step {
    min-width: 120px;
}

/* Subtle reset header button action */
.btn-reset-header-action {
    display: flex;
    align-items: center;
    gap: 6px;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 6px 14px;
    border-radius: var(--radius-md);
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 180ms ease;
    box-shadow: var(--shadow-sm);
}

.btn-reset-header-action:hover {
    color: var(--primary);
    border-color: var(--primary-border);
    background-color: var(--primary-light);
    box-shadow: 0 4px 10px rgba(13, 82, 214, 0.05);
}

.btn-reset-header-action svg {
    transition: transform 0.3s ease;
}

.btn-reset-header-action:hover svg {
    transform: rotate(-180deg);
}

/* Glassmorphic Overrides for Reset Action */
body.v7-liquid-glass .btn-reset-header-action {
    background: rgba(255, 255, 255, 0.35) !important;
    border-color: var(--glass-stroke) !important;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

body.v7-liquid-glass .btn-reset-header-action:hover {
    background: rgba(13, 82, 214, 0.08) !important;
    border-color: var(--primary-border) !important;
}

/* ==========================================================================
   FORCE PREMIUM LIGHT BLUEPRINT DRAWER & HIGH-LEGIBILITY LAYERING OVERRIDES
   ========================================================================== */
.detail-drawer,
body.v7-liquid-glass .detail-drawer {
    background-color: var(--bg-card) !important;
    background-image: linear-gradient(rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.88)), url('../assets/images/drawer_bg.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    position: fixed;
    z-index: 110;
    overflow: hidden !important;
    border-left: 1px solid var(--border-color) !important;
    box-shadow: -10px 0 35px rgba(0, 0, 0, 0.08) !important;
    color: var(--text-main) !important;
}

body.v7-liquid-glass .detail-drawer {
    background-color: transparent !important;
    background-image: linear-gradient(rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.88)), url('../assets/images/drawer_bg.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    backdrop-filter: blur(28px) saturate(155%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(155%) !important;
    border-left: 1px solid var(--glass-edge) !important;
    box-shadow: var(--glass-shadow) !important;
}

body[data-theme="dark"] .detail-drawer,
body[data-theme="dark"].v7-liquid-glass .detail-drawer {
    background-image: linear-gradient(rgba(15, 23, 42, 0.90), rgba(15, 23, 42, 0.90)), url('../assets/images/drawer_bg.jpg') !important;
}


/* Force absolute glowing ambient orbs under content with soft, elegant opacities */
.detail-drawer::before,
body.v7-liquid-glass .detail-drawer::before {
    content: "" !important;
    position: absolute !important;
    top: -80px !important;
    right: -80px !important;
    width: 280px !important;
    height: 280px !important;
    background: radial-gradient(circle, rgba(13, 82, 214, 0.08) 0%, rgba(13, 82, 214, 0) 70%) !important;
    filter: blur(35px) !important;
    pointer-events: none !important;
    z-index: 0 !important;
    display: block !important;
}

.detail-drawer::after,
body.v7-liquid-glass .detail-drawer::after {
    content: "" !important;
    position: absolute !important;
    bottom: -80px !important;
    left: -80px !important;
    width: 280px !important;
    height: 280px !important;
    background: radial-gradient(circle, rgba(21, 128, 61, 0.06) 0%, rgba(21, 128, 61, 0) 70%) !important;
    filter: blur(35px) !important;
    pointer-events: none !important;
    z-index: 0 !important;
    display: block !important;
}

/* Force light header style */
.detail-drawer .drawer-header {
    background: rgba(255, 255, 255, 0.4) !important;
    border-bottom: 1px solid var(--border-color) !important;
    padding: 16px 20px !important;
    position: relative !important;
    z-index: 2 !important;
}

body.v7-liquid-glass .detail-drawer .drawer-header {
    background: rgba(255, 255, 255, 0.32) !important;
    border-bottom-color: var(--glass-stroke) !important;
    box-shadow: inset 0 1px 0 var(--glass-highlight) !important;
}

.detail-drawer .drawer-title {
    color: var(--text-main) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
}

.detail-drawer .btn-close-drawer {
    background: var(--bg-main) !important;
    color: var(--text-muted) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 50% !important;
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
}

body.v7-liquid-glass .detail-drawer .btn-close-drawer {
    background: rgba(255, 255, 255, 0.35) !important;
    border-color: var(--glass-stroke) !important;
}

.detail-drawer .btn-close-drawer:hover {
    background: var(--primary-light) !important;
    border-color: var(--primary-border) !important;
    color: var(--primary) !important;
    transform: rotate(90deg) !important;
}

/* Core layers wrapper */
.drawer-grab-handle,
.drawer-content,
.drawer-footer {
    position: relative !important;
    z-index: 2 !important;
}

/* Verified green alert banner */
.detail-drawer #drawer-status-banner {
    background-color: var(--success-light) !important;
    border: 1px solid var(--success-border) !important;
    color: var(--success) !important;
    box-shadow: none !important;
}

/* Section title labels with left colored accent bar */
.detail-drawer .drawer-section-label {
    color: var(--text-main) !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-weight: 700 !important;
    margin-bottom: 10px !important;
    display: block !important;
    border-left: 3px solid var(--primary) !important;
    padding-left: 8px !important;
}

/* Crisp light cards with clean contrast borders */
.detail-drawer .drawer-field-card {
    background-color: #FFFFFF !important;
    border: 1px solid #D8E2EF !important;
    border-radius: 8px !important;
    padding: 12px 14px !important;
    transition: all 200ms ease !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

.detail-drawer .drawer-field-card:hover {
    border-color: var(--primary-border) !important;
    box-shadow: 0 4px 15px rgba(13, 82, 214, 0.06) !important;
}

body.v7-liquid-glass .detail-drawer .drawer-field-card {
    background-color: rgba(255, 255, 255, 0.8) !important;
    border-color: rgba(13, 82, 214, 0.15) !important;
}

body.v7-liquid-glass .detail-drawer .drawer-field-card:hover {
    background-color: #FFFFFF !important;
    border-color: var(--primary) !important;
}

.detail-drawer .field-label {
    color: #475569 !important;
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-weight: 600 !important;
    margin-bottom: 2px !important;
}

.detail-drawer .field-val {
    color: #1D1D1F !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
}

/* Cryptographic Blockchain Info Block */
.detail-drawer .blockchain-proof-box {
    background-color: #FFFFFF !important;
    border: 1px solid #D8E2EF !important;
    border-radius: 8px !important;
    padding: 16px !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

body.v7-liquid-glass .detail-drawer .blockchain-proof-box {
    background-color: rgba(255, 255, 255, 0.8) !important;
    border-color: rgba(13, 82, 214, 0.15) !important;
}

/* Explicitly unify height between hash box and copy button (38px height) */
.detail-drawer #drawer-tx-hash-container {
    background: var(--bg-main) !important;
    border: 1px solid var(--border-color) !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    height: 38px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    flex: 1 !important;
    color: var(--text-main) !important;
    text-decoration: none !important;
    transition: background 0.15s ease, border-color 0.15s ease !important;
}

.detail-drawer #drawer-tx-hash-container:hover {
    border-color: var(--primary) !important;
    background: rgba(10, 95, 232, 0.04) !important;
}

body.v7-liquid-glass .detail-drawer #drawer-tx-hash-container {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: var(--glass-stroke) !important;
}

body.v7-liquid-glass .detail-drawer #drawer-tx-hash-container:hover {
    background: rgba(10, 95, 232, 0.06) !important;
    border-color: var(--primary) !important;
}

.detail-drawer .hash-left,
.detail-drawer .hash-right {
    font-family: monospace !important;
    font-size: 12px !important;
    color: var(--text-main) !important;
    font-weight: 500 !important;
}

/* Copy button styled to match the hash box exactly */
.detail-drawer .btn-copy-code {
    background-color: var(--bg-main) !important;
    border: 1px solid var(--border-color) !important;
    color: #000000 !important; /* Explicit black color for high visibility */
    width: 38px !important;
    height: 38px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body.v7-liquid-glass .detail-drawer .btn-copy-code {
    background-color: rgba(0, 0, 0, 0.04) !important; /* Slightly darker glass background */
    border-color: rgba(0, 0, 0, 0.08) !important;
    color: #000000 !important; /* Always black icon in glass theme */
}

.detail-drawer .btn-copy-code:hover {
    background-color: var(--primary-light) !important;
    border-color: var(--primary-border) !important;
    color: var(--primary) !important;
    box-shadow: 0 2px 8px rgba(13, 82, 214, 0.05) !important;
}

.detail-drawer .btn-copy-code.copied {
    background-color: var(--success-light) !important;
    border-color: var(--success-border) !important;
    color: var(--success) !important;
}

/* Verified Documents Certificates styling */
.detail-drawer .drawer-docs-container > div {
    background: #FFFFFF !important;
    border: 1px solid #D8E2EF !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.2s ease !important;
}

body.v7-liquid-glass .detail-drawer .drawer-docs-container > div {
    background: rgba(255, 255, 255, 0.8) !important;
    border-color: rgba(13, 82, 214, 0.15) !important;
}

.detail-drawer .drawer-docs-container > div:hover {
    border-color: rgba(21, 128, 61, 0.35) !important;
    box-shadow: 0 4px 15px rgba(21, 128, 61, 0.06) !important;
}

.detail-drawer .drawer-docs-container .doc-name-text {
    color: var(--text-main) !important;
    font-weight: 500 !important;
    font-size: 12.5px !important;
}

.detail-drawer .drawer-docs-container .btn-open-doc {
    background-color: var(--success-light) !important;
    color: var(--success) !important;
    border: 1px solid var(--success-border) !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    padding: 4px 10px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

.detail-drawer .drawer-docs-container .btn-open-doc:hover {
    background-color: var(--success) !important;
    color: #FFFFFF !important;
    border-color: transparent !important;
    box-shadow: 0 0 10px rgba(21, 128, 61, 0.2) !important;
}

/* Isometric network watermark opacity on light theme */
.detail-drawer .blockchain-proof-box > svg {
    color: var(--primary) !important;
    opacity: 0.04 !important;
}

/* Composition tables overrides */
.detail-drawer .drawer-composition-table th {
    background-color: var(--bg-main) !important;
    color: var(--text-muted) !important;
    font-weight: 600 !important;
    font-size: 10.5px !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.detail-drawer .drawer-composition-table tr {
    background-color: transparent !important;
}

.detail-drawer .drawer-composition-table td {
    color: var(--text-main) !important;
    font-size: 12px !important;
    border-bottom: 1px solid var(--border-color) !important;
}

/* ==========================================================================
   TIMELINE MARKER OVERRIDES: REMOVE CIRCLE AND INCREASE SYMBOL SIZE
   ========================================================================== */
.timeline-marker,
.timeline-marker.simple,
.timeline-view.simple .timeline-marker.simple {
    background-color: var(--bg-card) !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 50% !important;
}

/* Set size for detailed view SVG */
.timeline-marker svg {
    width: 20px !important;
    height: 20px !important;
    transition: transform 0.2s ease, filter 0.2s ease;
}

/* Set size for simple view SVG */
.timeline-marker.simple svg,
.timeline-view.simple .timeline-marker.simple svg {
    width: 15px !important;
    height: 15px !important;
    transition: transform 0.2s ease, filter 0.2s ease;
}

/* Color overrides directly on SVGs based on parent classes */
.timeline-node.verified .timeline-marker svg {
    color: var(--success) !important;
}

.timeline-node.warning .timeline-marker svg {
    color: var(--warning) !important;
}

.timeline-node.unverified .timeline-marker svg {
    color: var(--text-muted) !important;
}

.timeline-node.active .timeline-marker svg {
    transform: scale(1.2);
    filter: drop-shadow(0 0 3px var(--primary-light)) !important;
    color: var(--primary) !important;
}



/* ==========================================================================
   REDESIGNED HERO SECTION AND ACCESSIBLE SHIELD LAYOUT
   ========================================================================== */
.product-status-badge {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: #ECFDF5;
    color: #15803D;
    font-size: 11px;
    font-weight: 800;
    padding: 6px 12px;
    border-radius: var(--radius-full);
    border: 1px solid #A7F3D0;
    margin-bottom: 12px;
    letter-spacing: 0.5px;
}

body[data-theme="dark"] .product-status-badge {
    background-color: rgba(21, 128, 61, 0.1);
    color: #15803D;
    border-color: rgba(21, 128, 61, 0.2);
}

.title-verified-check {
    vertical-align: middle;
    margin-left: 6px;
    flex-shrink: 0;
}

/* Liked button inside hero media */
.btn-like-hero {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #FFFFFF;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    color: #64748B;
    z-index: 10;
    transition: transform 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.btn-like-hero:hover {
    transform: scale(1.1);
    color: #EF4444;
}

body[data-theme="dark"] .btn-like-hero {
    background-color: #1E293B;
    color: #94A3B8;
}

/* Thumbnail slider with arrows layout */
.thumbnail-slider-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.slider-arrow {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background-color: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-main);
    transition: all 0.2s ease;
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
}

.slider-arrow:hover {
    background-color: var(--bg-main);
    border-color: var(--primary);
    color: var(--primary);
}

/* Trust stats metrics card */
.metrics-card {
    border: 1px solid #D8E2EF;
    background-color: var(--bg-card);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    box-shadow: 0 4px 20px -2px rgba(148, 163, 184, 0.06);
    transition: border-color 0.2s ease;
}

body[data-theme="dark"] .metrics-card {
    border-color: #334155;
    box-shadow: none;
}

.metrics-card-main {
    display: grid;
    grid-template-columns: 120px 1px 1fr;
    gap: 24px;
    align-items: center;
}

@media (max-width: 640px) {
    .metrics-card-main {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .metrics-divider {
        display: none;
    }
}

.metrics-divider {
    background-color: var(--border-color);
    width: 1px;
    height: 80px;
    align-self: center;
}

.trust-shield-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.trust-shield {
    position: relative;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.trust-shield-svg {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    filter: drop-shadow(0 4px 10px rgba(21, 128, 61, 0.15));
}

.trust-shield-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
    text-align: center;
}

.trust-shield-num {
    font-size: 25px;
    font-weight: 850;
    color: #15803D;
    line-height: 1.1;
}

.trust-shield-label {
    font-size: 9px;
    font-weight: 800;
    color: #15803D;
    letter-spacing: 0.1em;
    margin-top: 1px;
}

.metrics-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

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

.metric-stat-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    text-align: center;
}

.metric-icon-wrapper {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(21, 128, 61, 0.08);
    color: #15803D;
    flex-shrink: 0;
}

.metric-info {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.metric-num {
    font-size: 19px;
    font-weight: 850;
    color: var(--text-main);
    line-height: 1.2;
}

.metric-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    line-height: 1.35;
    margin-top: 2px;
}

.metric-subtext {
    font-size: 9px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 4px;
    margin-top: 6px;
    display: inline-block;
    letter-spacing: 0.2px;
}

.metric-subtext.success {
    background-color: #ECFDF5;
    color: #15803D;
}

body[data-theme="dark"] .metric-subtext.success {
    background-color: rgba(21, 128, 61, 0.1);
}

.metric-subtext.info {
    background-color: #EFF6FF;
    color: #3B82F6;
}

body[data-theme="dark"] .metric-subtext.info {
    background-color: rgba(59, 130, 246, 0.1);
}

.metrics-card-footer {
    border-top: 1px solid var(--border-color);
    padding-top: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-muted);
}

.footer-icon {
    width: 14px;
    height: 14px;
    color: #15803D;
    flex-shrink: 0;
}

/* Horizontal technical specs rail */
.tech-specs-rail {
    display: grid;
    grid-template-columns: 1.2fr 1px 1.4fr 1px 1.4fr 1px 1fr;
    gap: 12px;
    align-items: center;
    background-color: #F8FAFC;
    border: 1px solid #D8E2EF;
    border-radius: 12px;
    padding: 16px 20px;
}

body[data-theme="dark"] .tech-specs-rail {
    background-color: #1E293B;
    border-color: #334155;
}

@media (max-width: 768px) {
    .tech-specs-rail {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .tech-spec-divider {
        display: none;
    }
}

.tech-spec-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tech-spec-label {
    font-size: 9px;
    font-weight: 800;
    color: var(--text-muted);
    letter-spacing: 0.05em;
}

.tech-spec-val-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.spec-icon {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.tech-spec-value {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.2;
}

.tech-spec-value small {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
}

.tech-spec-divider {
    background-color: var(--border-color);
    width: 1px;
    height: 32px;
    align-self: center;
}

/* Bottom Trust Banner (Wide layout) */
.bottom-trust-banner {
    display: grid;
    grid-template-columns: 280px 1px 1fr;
    gap: 24px;
    align-items: center;
    background-color: #F8FAFC;
    border: 1px solid #D8E2EF;
    border-radius: 12px;
    padding: 24px;
    margin-top: -24px !important; /* Pulls banner close to hero-section above it */
    margin-bottom: 24px;
}

body[data-theme="dark"] .bottom-trust-banner {
    background-color: #1E293B;
    border-color: #334155;
}

@media (max-width: 1024px) {
    .bottom-trust-banner {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .banner-vertical-divider {
        display: none;
    }
}

.trust-banner-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.banner-shield-icon {
    width: 48px;
    height: 48px;
    color: #15803D;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 6px rgba(21, 128, 61, 0.15));
}

.banner-title-col {
    display: flex;
    flex-direction: column;
}

.banner-big-title {
    font-size: 18px;
    font-weight: 800;
    color: #15803D;
    line-height: 1.25;
}

.banner-sub-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #15803D;
    opacity: 0.85;
}

.banner-vertical-divider {
    background-color: var(--border-color);
    width: 1px;
    height: 52px;
    align-self: center;
}

.banner-features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

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

.banner-feature-item {
    display: flex;
    gap: 12px;
    align-items: center;
}

.feature-icon-wrapper {
    width: auto;
    height: auto;
    background: none;
    color: #15803D;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.feature-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.feature-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1.2;
}

.feature-desc {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.2;
}

/* ==========================================================================
   REFINED CLEAN HERO SECTION OVERRIDES (ACCURATE & PROFESSIONAL)
   ========================================================================== */
.hero-info .product-title {
    font-size: 26px !important;
    font-weight: 700 !important;
    color: var(--text-main) !important;
    margin-top: 4px !important;
    margin-bottom: 16px !important;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Metric labels must not wrap unevenly and must be medium font weight */
.metrics-card {
    border-color: #D8E2EF !important;
}

.trust-shield-num {
    color: var(--primary) !important; /* GoTrace Blue instead of green */
}

.trust-shield-label {
    color: var(--primary) !important; /* GoTrace Blue instead of green */
}

.metric-label {
    font-size: 11px !important;
    font-weight: 500 !important; /* Regular/Medium typography */
    color: var(--text-muted) !important;
    line-height: 1.4 !important;
    min-height: 32px !important; /* Prevent uneven vertical heights */
    display: flex;
    align-items: center;
    justify-content: center;
}

.metric-num {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--text-main) !important;
}

/* All metric badge status subtexts mapped to matching soft green themes */
.metric-subtext.success {
    background-color: #ECFDF5 !important;
    color: #15803D !important;
    font-weight: 600 !important;
    font-size: 10px !important;
}

body[data-theme="dark"] .metric-subtext.success {
    background-color: rgba(21, 128, 61, 0.1) !important;
}

/* Technical Specs Clean Layout Overrides */
.tech-specs-rail {
    margin-top: 0px !important;
    border-color: #D8E2EF !important;
    background-color: var(--bg-card) !important; /* Keep it clean matching white cards */
}

body[data-theme="dark"] .tech-specs-rail {
    background-color: #1E293B !important;
}

.tech-spec-label {
    font-size: 9.5px !important;
    font-weight: 500 !important;
    color: var(--text-muted) !important;
}

.tech-spec-value {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: var(--text-main) !important;
}

/* Bottom trust banner elements overrides */
.bottom-trust-banner {
    background-color: var(--bg-card) !important; /* White surface card */
    border-color: #D8E2EF !important;
    box-shadow: var(--shadow-sm);
}

body.v7-liquid-glass .bottom-trust-banner {
    background: var(--glass-surface-strong) !important;
    border: 1px solid var(--glass-edge) !important;
    box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-highlight) !important;
    backdrop-filter: blur(14px) saturate(125%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(125%) !important;
    border-radius: 24px !important;
}

body[data-theme="dark"] .bottom-trust-banner {
    background-color: #1E293B !important;
}

.banner-big-title {
    color: var(--primary) !important; /* GoTrace Blue */
    font-size: 17px !important;
    font-weight: 700 !important;
}

.banner-sub-title {
    color: var(--primary) !important; /* GoTrace Blue */
    font-size: 13.5px !important;
    font-weight: 500 !important;
    opacity: 0.9 !important;
}

.feature-title {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--text-main) !important;
}

.feature-desc {
    font-size: 11px !important;
    color: var(--text-muted) !important;
    font-weight: 400 !important; /* Lighter description */
}

.feature-icon-wrapper {
    background: none !important;
    color: var(--primary) !important;
    width: auto !important;
    height: auto !important;
}

/* ==========================================================================
   REFINED REVIEW FEED CARD AND DASHBOARD STYLING
   ========================================================================== */
.review-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 20px;
    margin-bottom: 16px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.review-card:hover {
    box-shadow: var(--shadow-sm);
    border-color: #CBD5E1;
}

body[data-theme="dark"] .review-card:hover {
    border-color: #475569;
}

.review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.review-author {
    font-weight: 700;
    color: var(--text-main);
    font-size: 13.5px;
}

.review-role {
    font-size: 10px;
    color: var(--text-muted);
    background-color: var(--bg-main);
    padding: 3px 8px;
    border-radius: 4px;
    margin-left: 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2px;
}

.review-comment {
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: var(--text-main) !important;
    margin: 8px 0 !important;
}

.review-footer {
    border-top: 1px solid var(--border-color) !important;
    padding-top: 12px !important;
    margin-top: 12px !important;
}

.btn-like-rev {
    transition: transform 0.1s ease;
}

.btn-like-rev:active {
    transform: scale(0.9);
}

.rating-bar-row {
    font-weight: 500;
}

.rating-bar-row.active {
    font-weight: 700 !important;
    color: var(--primary) !important;
}

/* Refined tech specs rail layouts and alignment */
.tech-specs-rail {
    margin-top: 16px !important;
    padding: 14px 20px !important;
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-sm) !important;
    grid-template-columns: 1fr 1px 1.2fr 1px 1.2fr 1px 1fr !important;
}



.tech-spec-val-row .spec-icon {
    color: var(--primary) !important;
    opacity: 0.85;
}

/* ==========================================================================
   GLASSMORPHIC REVIEWS BACKGROUND & PANELS
   ========================================================================== */
#reviews {
    background-image: url('../assets/images/reviews_bg.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    border-radius: 16px !important;
    padding: 32px !important;
    border: 1px solid var(--border-color) !important;
    position: relative;
    overflow: hidden;
}

body[data-theme="dark"] #reviews {
    background-image: linear-gradient(rgba(15, 23, 42, 0.88), rgba(15, 23, 42, 0.88)), url('../assets/images/reviews_bg.jpg') !important;
}

/* Make review container blocks translucent glass panels */
.average-score-card,
.review-card,
.review-form-card {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    box-shadow: 0 10px 30px -10px rgba(10, 95, 232, 0.05), 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

body[data-theme="dark"] .average-score-card,
body[data-theme="dark"] .review-card,
body[data-theme="dark"] .review-form-card {
    background: rgba(30, 41, 59, 0.75) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.3) !important;
}

/* Highlight hover states on glass cards */
.review-card:hover {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(10, 95, 232, 0.15) !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 30px -10px rgba(10, 95, 232, 0.1), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

body[data-theme="dark"] .review-card:hover {
    background: rgba(30, 41, 59, 0.85) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.4) !important;
}

/* ==========================================================================
   FACEBOOK-STYLE COMPACT FEED STYLING OVERRIDES
   ========================================================================== */
.reviews-list-feed {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    margin-bottom: 24px !important;
    background: transparent !important;
    border: none !important;
}

.fb-comment-item {
    display: flex !important;
    gap: 12px !important;
    align-items: flex-start !important;
    padding: 0 !important;
    margin-bottom: 4px !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.fb-comment-avatar {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background-color: var(--primary-light) !important;
    color: var(--primary) !important;
    font-weight: 700 !important;
    font-size: 12.5px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    border: 1px solid var(--primary-border) !important;
    user-select: none !important;
}

body[data-theme="dark"] .fb-comment-avatar {
    background-color: rgba(13, 82, 214, 0.15) !important;
    border-color: rgba(13, 82, 214, 0.3) !important;
}

.fb-comment-body {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

.fb-comment-meta {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    font-size: 13px !important;
}

.fb-comment-author {
    font-weight: 650 !important;
    color: var(--text-main) !important;
}

.fb-comment-bullet {
    color: var(--text-muted) !important;
    font-size: 11px !important;
}

.fb-comment-date {
    font-size: 11px !important;
    color: var(--text-muted) !important;
    font-weight: 400 !important;
}

.fb-comment-text {
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    color: var(--text-main) !important;
    margin-top: 4px !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    display: block !important;
    max-width: 100% !important;
    width: auto !important;
}

body[data-theme="dark"] .fb-comment-text {
    background: none !important;
    border: none !important;
}

.fb-comment-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 6px !important;
    padding-left: 0 !important;
    font-size: 12px !important;
}

.fb-action-btn {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    color: var(--text-muted) !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    transition: var(--transition-fast) !important;
    font-size: 11.5px !important;
}

.fb-action-btn:hover {
    color: var(--primary) !important;
}

.fb-like-badge {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 11px !important;
    margin-left: 12px !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

body[data-theme="dark"] .fb-like-badge {
    background: none !important;
    border: none !important;
}

.fb-like-icon-circle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 14px !important;
    height: 14px !important;
    background-color: var(--primary) !important;
    color: white !important;
    border-radius: 50% !important;
}

.fb-like-count {
    color: var(--text-main) !important;
    font-weight: 600 !important;
}

/* Indented replies list style matching facebook design */
.fb-comment-replies {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-top: 10px !important;
    padding-left: 12px !important;
    border-left: 2px solid var(--border-color) !important;
}

body[data-theme="dark"] .fb-comment-replies {
    border-left-color: #334155 !important;
}

.fb-reply-item {
    display: flex !important;
    gap: 10px !important;
    align-items: flex-start !important;
    margin-top: 6px !important;
}

.fb-reply-avatar {
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    background-color: var(--border-color) !important;
    color: var(--text-muted) !important;
    font-weight: 700 !important;
    font-size: 10.5px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

body[data-theme="dark"] .fb-reply-avatar {
    background-color: #334155 !important;
    color: #94A3B8 !important;
}

.fb-reply-body {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

.fb-reply-meta {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 12px !important;
}

.fb-reply-author {
    font-weight: 650 !important;
    color: var(--text-main) !important;
}

.fb-reply-bullet {
    color: var(--text-muted) !important;
    font-size: 10px !important;
}

.fb-reply-date {
    font-size: 10.5px !important;
    color: var(--text-muted) !important;
    font-weight: 400 !important;
}

.fb-reply-text {
    font-size: 13px !important;
    line-height: 1.45 !important;
    color: var(--text-main) !important;
    margin-top: 2px !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
}

body[data-theme="dark"] .fb-reply-text {
    background: none !important;
    border: none !important;
}

/* Reply input box overrides */
.fb-reply-input-box {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: 12px !important;
    background-color: var(--bg-main) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
    padding: 10px !important;
    width: 90% !important;
}

body[data-theme="dark"] .fb-reply-input-box {
    background-color: #1E293B !important;
    border-color: #334155 !important;
}

.fb-reply-input-name {
    width: 120px !important;
    padding: 6px 10px !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-sm) !important;
    font-size: 12px !important;
    background-color: var(--bg-card) !important;
    color: var(--text-main) !important;
}

body[data-theme="dark"] .fb-reply-input-name {
    background-color: #1D1D1F !important;
    border-color: #334155 !important;
}

.fb-reply-input-text {
    flex: 1 !important;
    padding: 6px 10px !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-sm) !important;
    font-size: 12px !important;
    background-color: var(--bg-card) !important;
    color: var(--text-main) !important;
}

body[data-theme="dark"] .fb-reply-input-text {
    background-color: #1D1D1F !important;
    border-color: #334155 !important;
}

.fb-reply-submit-btn {
    padding: 6px 12px !important;
    background-color: var(--primary) !important;
    color: white !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: var(--transition-fast) !important;
}

.fb-reply-submit-btn:hover {
    background-color: var(--primary-hover) !important;
}