:root {
            --bg: #FAFAFA;
            --text: #111111;
            --gray: #888888;
            --light-gray: #CCCCCC;
            --border: #EAEAEA;
            --accent: #00A3FF;       
            
            --status-neu: var(--accent);       
            --status-pruefung: #FFCC00;  
            --status-produktion: #8A2BE2;
            --status-fertig: #28CD41;

            
            --surface: #FFFFFF;
            --surface-alt: #FAFAFA;
            --shadow-color: rgba(0,0,0,0.05);
        }

        
        body.dark-mode {
            --bg: #0F0F11;
            --text: #F5F5F7;
            --gray: #888888;
            --light-gray: #555555;
            --border: #2A2A2D;
            --accent: #2DB1FF;
            --surface: #18181B;
            --surface-alt: #1D1D21;
            --shadow-color: rgba(0,0,0,0.4);
        }

        body.dark-mode nav { background-color: rgba(15, 15, 17, 0.95); border-bottom-color: var(--border); }
        body.dark-mode .product-card { background: var(--surface); }
        body.dark-mode .product-image-container { background: var(--surface-alt); }
        body.dark-mode .hover-btn { background: var(--accent) !important; color: #ffffff !important; }
        body.dark-mode a.btn.btn-primary,
        body.dark-mode a.btn-primary,
        body.dark-mode .hero a.btn-primary,
        body.dark-mode .cta-section a.btn-primary {
            background-color: var(--accent) !important;
            color: #ffffff !important;
            border: none !important;
        }
        body.dark-mode a.btn.btn-primary:hover,
        body.dark-mode a.btn-primary:hover,
        body.dark-mode .hero a.btn-primary:hover,
        body.dark-mode .cta-section a.btn-primary:hover {
            background-color: #0088D6 !important;
            color: #ffffff !important;
            border: none !important;
        }
        body.dark-mode .pd-cta-primary {
            background-color: var(--accent) !important;
            color: #ffffff !important;
            border: none !important;
            box-shadow: none !important;
        }
        body.dark-mode .pd-cta-primary svg {
            stroke: #ffffff !important;
            fill: none !important;
        }
        body.dark-mode .pd-cta-primary:hover {
            background-color: #0088D6 !important;
            color: #ffffff !important;
            border: none !important;
            box-shadow: none !important;
        }
        body.dark-mode .admin-trigger,
        body.dark-mode #admin-trigger,
        body.dark-mode .shortcuts-fab {
            background-color: var(--accent) !important;
            color: #ffffff !important;
            border: none !important;
            box-shadow: none !important;
        }
        body.dark-mode .admin-trigger svg,
        body.dark-mode #admin-trigger svg,
        body.dark-mode .shortcuts-fab svg {
            stroke: #ffffff !important;
            fill: none !important;
        }
        body.dark-mode .saved-design-row:hover {
            background-color: #252525 !important;
        }
        body.dark-mode .saved-design-row:hover .saved-design-name,
        body.dark-mode .saved-design-row:hover .saved-design-meta {
            color: #ffffff !important;
        }
        body.dark-mode .saved-design-thumb {
            background-color: #333 !important;
        }
        body.dark-mode .swatch { border-color: rgba(255,255,255,0.1); }
        body.dark-mode .config-product-img-stage,
        body.dark-mode .canvas-toolbar,
        body.dark-mode .live-preview-wrap,
        body.dark-mode .config-canvas-area { background: var(--surface); }
        body.dark-mode .config-step-panel,
        body.dark-mode .config-progress-sidebar,
        body.dark-mode .config-product-header { background: var(--surface); border-color: var(--border); }
        body.dark-mode .info-card,
        body.dark-mode .spec-block,
        body.dark-mode .delivery-tracking,
        body.dark-mode .messaging-panel,
        body.dark-mode .invoice-block,
        body.dark-mode .team-section,
        body.dark-mode .stat-card,
        body.dark-mode .address-card,
        body.dark-mode .project-list-card,
        body.dark-mode .technique-card,
        body.dark-mode .project-preview-block,
        body.dark-mode .status-timeline { background: var(--surface); border-color: var(--border); }
        body.dark-mode .form-input,
        body.dark-mode .config-input,
        body.dark-mode .colormatch-input,
        body.dark-mode .messaging-textarea,
        body.dark-mode .notes-textarea,
        body.dark-mode .invite-field input,
        body.dark-mode .invite-field select { background: var(--surface-alt); color: var(--text); border-color: var(--border); }
        body.dark-mode .form-input { background-color: #1a1a1a !important; color: #ffffff !important; border-color: rgba(255,255,255,0.15) !important; }
        body.dark-mode select.form-input { background-color: #1a1a1a !important; color: #ffffff !important; border-color: rgba(255,255,255,0.15) !important; background-image: none !important; }
        body.dark-mode .form-input::placeholder { color: rgba(255,255,255,0.55) !important; }
        body.dark-mode .account-panel, body.dark-mode .address-card, body.dark-mode .account-panel .info-card { background-color: #1a1a1a !important; color: #ffffff !important; border-color: rgba(255,255,255,0.15) !important; }
        body.dark-mode .account-panel .info-card:is([style*="background: #f9f9f9"]:where(:not([data-stil-nur])), [data-stil*="background: #f9f9f9"]) { background-color: #1a1a1a !important; color: #ffffff !important; border-color: rgba(255,255,255,0.2) !important; }
        body.dark-mode .account-panel .info-card:is([style*="border-style: dashed"]:where(:not([data-stil-nur])), [data-stil*="border-style: dashed"]) { border-color: rgba(255,255,255,0.2) !important; }
        body.dark-mode .account-panel .info-card:is([style*="background: #f9f9f9"]:where(:not([data-stil-nur])), [data-stil*="background: #f9f9f9"]) span,
        body.dark-mode .account-panel .info-card:is([style*="background: #f9f9f9"]:where(:not([data-stil-nur])), [data-stil*="background: #f9f9f9"]) p,
        body.dark-mode .account-panel .info-card:is([style*="background: #f9f9f9"]:where(:not([data-stil-nur])), [data-stil*="background: #f9f9f9"]) div { color: #ffffff !important; }
        body.dark-mode .address-card .address-type,
        body.dark-mode .address-card .address-name,
        body.dark-mode .address-card .address-line,
        body.dark-mode .address-card .address-action-link,
        body.dark-mode .address-card .address-default-badge { color: #ffffff !important; }
        body.dark-mode .address-card .address-default-badge { background: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.12) !important; }
        body.dark-mode .address-card .address-action-link.primary { color: var(--accent) !important; }
        body.dark-mode .team-invite-btn { background: var(--accent) !important; color: #ffffff !important; border: none !important; }
        body.dark-mode .team-invite-btn:hover { background: #0088D6 !important; }
        body.dark-mode #panel-team .info-card div:is([style*="background: #fff"]:where(:not([data-stil-nur])), [data-stil*="background: #fff"]) { background-color: #1a1a1a !important; color: #ffffff !important; border-color: rgba(255,255,255,0.12) !important; }
        body.dark-mode #panel-team .info-card div:is([style*="background: #fff"]:where(:not([data-stil-nur])), [data-stil*="background: #fff"]) > div { color: #ffffff !important; }
        body.dark-mode .team-role-badge.owner,
        body.dark-mode .team-role-badge.admin,
        body.dark-mode .team-role-badge.designer,
        body.dark-mode .team-role-badge.viewer,
        body.dark-mode .team-role-badge.pending { background: rgba(255,255,255,0.06) !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,0.12) !important; }
        body.dark-mode .team-name,
        body.dark-mode .team-email { color: #ffffff !important; }
        body.dark-mode .team-section-subtitle { color: rgba(255,255,255,0.7) !important; }
        body.dark-mode #panel-designs .info-card:is([style*="background: #f9f9f9"]:where(:not([data-stil-nur])), [data-stil*="background: #f9f9f9"]) { background-color: #1a1a1a !important; border-color: rgba(255,255,255,0.15) !important; }
        body.dark-mode #panel-designs .info-card:is([style*="background: #f9f9f9"]:where(:not([data-stil-nur])), [data-stil*="background: #f9f9f9"]) .info-card-header,
        body.dark-mode #panel-designs .info-card:is([style*="background: #f9f9f9"]:where(:not([data-stil-nur])), [data-stil*="background: #f9f9f9"]) .info-card-action,
        body.dark-mode #panel-designs .info-card:is([style*="background: #f9f9f9"]:where(:not([data-stil-nur])), [data-stil*="background: #f9f9f9"]) p { color: #ffffff !important; }
        body.dark-mode #panel-designs .info-card:is([style*="background: #f9f9f9"]:where(:not([data-stil-nur])), [data-stil*="background: #f9f9f9"]) div:is([style*="background: var(--border)"]:where(:not([data-stil-nur])), [data-stil*="background: var(--border)"]) { background: rgba(255,255,255,0.12) !important; }
        body.dark-mode .btn-ghost { background-color: #1a1a1a !important; color: #ffffff !important; border: 1px dashed rgba(255,255,255,0.15) !important; }
        body.dark-mode .btn-ghost:hover { background-color: rgba(255,255,255,0.05) !important; color: #ffffff !important; }
        body.dark-mode .account-section-header button.btn-ghost { background-color: #1a1a1a !important; color: #ffffff !important; border-color: rgba(255,255,255,0.15) !important; }        
        body.dark-mode .message-bubble { background: var(--surface-alt); color: var(--text); }
        body.dark-mode .message.from-customer .message-bubble { background: var(--accent); color: #000; }
        body.dark-mode .invoice-item,
        body.dark-mode .notes-block,
        body.dark-mode .colormatch-tool,
        body.dark-mode .size-preview-block { background: var(--surface-alt); }
        body.dark-mode .placement-zone-btn,
        body.dark-mode .view-toggle-btn,
        body.dark-mode .filter-clear-btn,
        body.dark-mode .freq-product-card,
        body.dark-mode .library-modal-content,
        body.dark-mode .variants-modal-content,
        body.dark-mode .size-chart-content,
        body.dark-mode .confirm-modal,
        body.dark-mode .team-invite-content { background: var(--surface); color: var(--text); }
        body.dark-mode .nav-links > a, body.dark-mode .dropdown-trigger { color: var(--gray); }
        body.dark-mode .nav-links a:hover, body.dark-mode .dropdown:hover .dropdown-trigger { color: var(--text); }
        body.dark-mode .mega-menu,
        body.dark-mode .projects-dropdown-menu,
        body.dark-mode .account-dropdown-menu { background: var(--surface); border-color: var(--border); }
        body.dark-mode .projects-dd-item,
        body.dark-mode .account-dd-link { background: transparent !important; color: #ffffff !important; }
        body.dark-mode .projects-dd-item:hover,
        body.dark-mode .account-dd-link:hover { background-color: rgba(255,255,255,0.08) !important; color: #ffffff !important; }
        body.dark-mode .projects-dd-item:hover .projects-dd-name,
        body.dark-mode .projects-dd-item:hover .projects-dd-meta,
        body.dark-mode .account-dd-link:hover,
        body.dark-mode .account-dd-link:hover svg { color: #ffffff !important; }
        body.dark-mode .account-dd-link:hover svg { stroke: #ffffff !important; opacity: 1 !important; }
        body.dark-mode .projects-dd-thumb { background: var(--surface-alt) !important; color: #ffffff !important; }
        body.dark-mode .projects-dd-item { border-bottom-color: rgba(255,255,255,0.08) !important; }
        body.dark-mode .filter-item:not(.active) { color: var(--gray); }
        body.dark-mode .product-card-thumb { background: var(--surface-alt); }
        body.dark-mode .preview-control-btn { background: var(--surface); }
        body.dark-mode .product-card:hover img { filter: brightness(0.95); }
        body.dark-mode .size-chart-content { color: var(--text); }
        body.dark-mode .size-chart-table th,
        body.dark-mode .size-chart-table td:first-child { background: var(--surface-alt); color: var(--gray); }
        body.dark-mode .add-zone-btn { background: var(--surface-alt); }
        body.dark-mode .sustain-tag { background: rgba(40, 205, 65, 0.15); color: #5cd66f; border-color: rgba(40, 205, 65, 0.25); }
        body.dark-mode .sustain-tag.gots { background: rgba(107, 70, 229, 0.15); color: #9d83f0; border-color: rgba(107, 70, 229, 0.3); }
        body.dark-mode .sustain-tag.oekotex { background: rgba(0, 163, 255, 0.15); color: #5cb8ff; border-color: rgba(0, 163, 255, 0.3); }
        body.dark-mode .sustain-tag.recycled { background: rgba(255, 153, 0, 0.15); color: #ffba66; border-color: rgba(255, 153, 0, 0.3); }
        body.dark-mode .empty-design-prompt { color: var(--gray); }
        body.dark-mode .stitch-toggle-bar { background: rgba(196, 113, 0, 0.15); border-color: rgba(196, 113, 0, 0.3); }
        body.dark-mode .stitch-toggle-bar-text, body.dark-mode .stitch-toggle-bar-text strong { color: #ffba66; }
        body.dark-mode .pre-headline,
        body.dark-mode .config-step-eyebrow,
        body.dark-mode .reorder-banner-eyebrow,
        body.dark-mode .delivery-tracking-eyebrow,
        body.dark-mode .freq-section-eyebrow { color: var(--accent); }
        body.dark-mode .brand-marquee { background: var(--surface); border-color: var(--border); }
        body.dark-mode .brand-marquee::before { background: linear-gradient(to right, var(--surface) 20%, transparent 100%); }
        body.dark-mode .brand-marquee::after { background: linear-gradient(to left, var(--surface) 20%, transparent 100%); }
        body.dark-mode .brand-logo { color: var(--text); opacity: 0.6; }
        body.dark-mode .account-sidebar { background: var(--surface); }
        body.dark-mode .account-nav-item:hover { background: var(--surface-alt); }
        body.dark-mode .account-nav-item.active { background: var(--surface-alt); }
        body.dark-mode .product-meta { background: var(--surface); }
        body.dark-mode footer { background: var(--surface-alt); border-color: var(--border); }
        body.dark-mode .price-summary { background: var(--surface-alt); }

        
        .theme-toggle {
            background: none;
            border: 1px solid var(--border);
            width: 34px;
            height: 34px;
            margin-left: 1.5rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--gray);
            transition: all 0.2s;
            font-family: 'Inter', sans-serif;
        }

        .theme-toggle:hover {
            color: var(--text);
            border-color: var(--text);
        }

        .theme-toggle svg { transition: transform 0.4s; }
        body.dark-mode .theme-toggle svg { transform: rotate(180deg); }

        

        
        .onboarding-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.75);
            z-index: 10000;
            display: none;
            opacity: 0;
            transition: opacity 0.4s;
        }

        .onboarding-overlay.show {
            display: flex;
            opacity: 1;
            align-items: center;
            justify-content: center;
        }

        .onboarding-card {
            background: #fff;
            color: var(--text);
            width: 540px;
            max-width: 92vw;
            padding: 3rem;
            position: relative;
            transform: translateY(20px);
            opacity: 0;
            transition: all 0.5s 0.1s;
        }

        .onboarding-overlay.show .onboarding-card {
            transform: translateY(0);
            opacity: 1;
        }

        .onboarding-progress {
            display: flex;
            gap: 0.4rem;
            margin-bottom: 2rem;
        }

        .onboarding-progress-dot {
            flex: 1;
            height: 3px;
            background: var(--border);
            transition: background 0.3s;
        }

        .onboarding-progress-dot.active { background: var(--accent); }
        .onboarding-progress-dot.done { background: var(--text); }

        .onboarding-step-num {
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.15rem;
            color: var(--accent);
            font-weight: 600;
            margin-bottom: 0.8rem;
            display: flex;
            align-items: center;
            gap: 0.7rem;
        }

        .onboarding-step-num::before {
            content: "";
            width: 24px;
            height: 1px;
            background: var(--accent);
        }

        .onboarding-card h2 {
            font-size: 1.7rem;
            font-weight: 300;
            line-height: 1.2;
            letter-spacing: -0.03rem;
            margin: 0 0 1rem 0;
        }

        .onboarding-card h2 strong { font-weight: 700; display: block; }

        .onboarding-card p {
            font-size: 0.95rem;
            line-height: 1.6;
            color: var(--gray);
            margin: 0 0 2rem 0;
            font-weight: 300;
        }

        .onboarding-illustration {
            background: linear-gradient(135deg, #f5f5f5 0%, #ebebeb 100%);
            padding: 2.5rem;
            margin: 0 -3rem 2rem -3rem;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 180px;
        }

        body.dark-mode .onboarding-card { background: var(--surface); color: var(--text); }
        body.dark-mode .onboarding-illustration { background: linear-gradient(135deg, var(--surface-alt) 0%, #0a0a0c 100%); }

        .onboarding-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
        }

        .onboarding-skip {
            background: none;
            border: none;
            font-size: 0.7rem;
            color: var(--gray);
            text-transform: uppercase;
            letter-spacing: 0.08rem;
            font-weight: 500;
            cursor: pointer;
            font-family: 'Inter', sans-serif;
            padding: 0.7rem 0;
        }
        .onboarding-skip:hover { color: var(--text); }

        .onboarding-nav {
            display: flex;
            gap: 0.5rem;
        }

        .onboarding-back-btn,
        .onboarding-next-btn {
            padding: 0.85rem 1.5rem;
            border: 1px solid var(--border);
            background: #fff;
            color: var(--text);
            font-family: 'Inter', sans-serif;
            font-size: 0.7rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.08rem;
            cursor: pointer;
            transition: all 0.2s;
        }
        body.dark-mode .onboarding-back-btn { background: var(--surface-alt); }

        .onboarding-back-btn:disabled { opacity: 0.3; cursor: not-allowed; }
        .onboarding-back-btn:hover:not(:disabled) { border-color: var(--text); }

        .onboarding-next-btn {
            background: var(--accent);
            color: #fff;
            border-color: var(--accent);
        }
        .onboarding-next-btn:hover { background: #008be0; }

        .onboarding-illustration .icon-circle {
            width: 80px;
            height: 80px;
            background: var(--accent);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        
        .shortcuts-fab {
            
            display: none !important;
            position: fixed;
            bottom: 1.5rem;
            right: 1.5rem;
            width: 38px;
            height: 38px;
            border-radius: 50%;
            background: var(--text);
            color: #fff;
            border: none;
            cursor: pointer;
            font-family: 'Inter', sans-serif;
            font-size: 0.95rem;
            font-weight: 700;
            box-shadow: 0 4px 12px var(--shadow-color);
            z-index: 100;
            transition: transform 0.2s;
        }
        .shortcuts-fab:hover { transform: scale(1.05); background: var(--accent); }

        .shortcuts-modal {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.5);
            z-index: 9999;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 2rem;
        }
        .shortcuts-modal.show { display: flex; }

        .shortcuts-content {
            background: #fff;
            width: 580px;
            max-height: 88vh;
            overflow-y: auto;
            padding: 2.5rem;
        }
        body.dark-mode .shortcuts-content { background: var(--surface); }

        .shortcuts-content h3 {
            font-size: 1.4rem;
            font-weight: 300;
            margin: 0 0 0.4rem 0;
            letter-spacing: -0.02rem;
        }
        .shortcuts-content > p {
            font-size: 0.78rem;
            color: var(--gray);
            margin: 0 0 1.8rem 0;
            font-weight: 300;
        }

        .shortcuts-section {
            margin-bottom: 1.8rem;
        }

        .shortcuts-section-title {
            font-size: 0.65rem;
            text-transform: uppercase;
            letter-spacing: 0.1rem;
            color: var(--gray);
            font-weight: 600;
            margin-bottom: 0.7rem;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid var(--border);
        }

        .shortcut-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.6rem 0;
        }

        .shortcut-desc {
            font-size: 0.82rem;
            color: var(--text);
        }

        .shortcut-keys {
            display: flex;
            gap: 0.3rem;
            align-items: center;
        }

        .key {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 26px;
            height: 26px;
            padding: 0 0.5rem;
            background: var(--surface-alt);
            border: 1px solid var(--border);
            border-bottom-width: 2px;
            font-family: 'SF Mono', Menlo, monospace;
            font-size: 0.7rem;
            font-weight: 600;
            color: var(--text);
        }

        .key-plus {
            font-size: 0.75rem;
            color: var(--gray);
            font-weight: 300;
        }

        .shortcut-toast {
            position: fixed;
            bottom: 5rem;
            right: 1.5rem;
            background: var(--text);
            color: #fff;
            padding: 0.8rem 1.2rem;
            font-size: 0.78rem;
            z-index: 9999;
            opacity: 0;
            transform: translateY(10px);
            pointer-events: none;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 0.6rem;
        }

        .shortcut-toast.show {
            opacity: 1;
            transform: translateY(0);
        }

        .shortcut-toast .key {
            background: rgba(255,255,255,0.15);
            border-color: rgba(255,255,255,0.3);
            color: #fff;
            font-size: 0.65rem;
            min-width: 22px;
            height: 22px;
        }

        
        @media (max-width: 1024px) {
            
            nav { padding: 0.8rem 1.2rem; }
            .nav-links { gap: 1.2rem; }
            .nav-links > a, .dropdown-trigger { font-size: 0.78rem; margin-left: 1.2rem; padding: 0.7rem 0; }
            .nav-external-link { display: none !important; }
            .theme-toggle { margin-left: 1rem; }

            
            .hero-split { flex-direction: column; padding: 3rem 1.5rem; gap: 2.5rem; }
            .hero-text-col, .hero-image-col { width: 100%; }
            .hero-title { font-size: 2.8rem; }
            .hero-subtitle { font-size: 1rem; }
            main { padding: 1.5rem; }

            
            .brand-marquee { margin: 4rem -1.5rem; }

            
            .about-cta-section { margin: 4rem -1.5rem -1.5rem -1.5rem; padding: 4rem 1.5rem; }
            .about-cta-grid { grid-template-columns: 1fr; gap: 2.5rem; }
            .about-cta-headline { font-size: 2rem; }

            
            .katalog-layout { grid-template-columns: 220px 1fr; gap: 2rem; }
            .product-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.5rem; }

            
            .config-layout {
                grid-template-columns: 1fr !important;
                grid-template-rows: auto auto auto;
                gap: 1rem;
            }
            .config-progress-sidebar {
                position: relative;
                top: 0 !important;
                order: 1;
                height: auto !important;
            }
            .step-progress-list {
                display: flex !important;
                gap: 0.4rem;
                overflow-x: auto;
                padding: 0.7rem 0;
                margin: 0 !important;
            }
            .step-progress-list .step-progress-item {
                flex-shrink: 0;
                flex-direction: column;
                width: auto;
                min-width: 90px;
                padding: 0.7rem 0.5rem !important;
                border-bottom: none !important;
                text-align: center;
            }
            .config-canvas-area { order: 2; }
            .config-step-panel-wrapper, .config-product-header { order: 3; }
            .design-transform-bar { flex-wrap: wrap; }

            
            .project-detail-layout { grid-template-columns: 1fr; gap: 1.5rem; }

            
            .project-list-card {
                grid-template-columns: 64px 1fr;
                gap: 1rem;
            }
            .project-list-card > .project-card-status,
            .project-list-card > .project-card-meta-block,
            .project-list-card > .project-card-action {
                grid-column: 2;
                margin-top: 0.4rem;
            }

            
            .account-layout { grid-template-columns: 1fr; }
            .account-sidebar {
                position: relative !important;
                top: 0 !important;
                width: 100% !important;
                margin-bottom: 1.5rem;
            }
            .account-nav { display: flex; overflow-x: auto; gap: 0.3rem; padding: 0.5rem !important; }
            .account-nav li { flex-shrink: 0; }
            .account-nav-item { white-space: nowrap; padding: 0.7rem 1rem !important; border-left: none !important; border-bottom: 2px solid transparent !important; }
            .account-nav-item.active { border-left: none !important; border-bottom: 2px solid var(--accent) !important; }
            .account-avatar-block, .account-nav-divider { display: none !important; }

            
            .variants-modal-content,
            .size-chart-content,
            .library-modal-content,
            .team-invite-content,
            .shortcuts-content { padding: 1.5rem; }

            
            .shortcuts-fab { width: 36px; height: 36px; bottom: 1rem; right: 1rem; }

            
            .onboarding-card { padding: 2rem 1.5rem; }
            .onboarding-illustration { margin: 0 -1.5rem 1.5rem -1.5rem; padding: 2rem; min-height: 140px; }
            .onboarding-card h2 { font-size: 1.4rem; }
            .onboarding-card p { font-size: 0.85rem; }
        }

        @media (max-width: 640px) {
            
            .nav-logo { font-size: 1.2rem; }
            .nav-links > a, .dropdown-trigger { font-size: 0.7rem; margin-left: 0.8rem; }
            .hero-title { font-size: 2.2rem; }
            .product-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }

            
            .katalog-layout { grid-template-columns: 1fr; }
            .katalog-layout .sidebar { display: none; }

            
            .step-block { padding-left: 60px !important; }
            .step-bg-number { font-size: 4rem !important; }

            
            .project-status-tabs { overflow-x: auto; flex-wrap: nowrap; }
            .project-status-tab { white-space: nowrap; flex-shrink: 0; padding: 0.8rem 1rem; }

            
            .projects-dropdown-menu { width: 92vw; right: 0; left: auto; }

            
            .btn-massive { font-size: 0.9rem; padding: 1.2rem 2rem; }

            
            .about-cta-headline { font-size: 1.6rem; }
            .cta-card-meta { display: none; }

            
            .floating-orb { display: none; }

            
            .onboarding-actions { flex-wrap: wrap; gap: 0.5rem; }
            .onboarding-back-btn, .onboarding-next-btn { padding: 0.7rem 1rem; font-size: 0.65rem; flex: 1; }
        }

        
        @media (hover: none) {
            .product-card:hover .product-img { transform: none; }
            .hover-btn { opacity: 1; bottom: 1rem; }
        }

        

        .label-module {
            display: flex;
            flex-direction: column;
            gap: 1.2rem;
            margin-top: 1rem;
        }

        .label-skip-banner {
            background: linear-gradient(90deg, rgba(0, 163, 255, 0.04) 0%, transparent 100%);
            border-left: 3px solid var(--accent);
            padding: 0.75rem 1rem;
            margin-bottom: 1.2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 0.8rem;
            flex-wrap: wrap;
        }
        body.dark-mode .label-skip-banner { background: var(--accent); color: #fff; }

        .label-skip-text {
            font-size: 0.72rem;
            color: var(--text);
            font-weight: 500;
            line-height: 1.4;
            min-width: 0;
            flex: 1;
        }
        body.dark-mode .label-skip-text { color: #fff; }
        .label-skip-text small { color: var(--gray); font-weight: 400; font-size: 0.65rem; display: block; margin-top: 0.2rem; }
        body.dark-mode .label-skip-text small { color: rgba(255,255,255,0.7); }

        .label-skip-toggle {
            background: none;
            border: 1px solid var(--border);
            padding: 0.45rem 0.75rem;
            font-family: 'Inter', sans-serif;
            font-size: 0.6rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06rem;
            color: var(--text);
            cursor: pointer;
            white-space: nowrap;
            transition: all 0.2s;
            flex-shrink: 0;
        }
        .label-skip-toggle:hover { background: var(--text); color: #fff; }

        
        .label-preview-card {
            background: #fff;
            border: 1px solid var(--border);
            padding: 1rem;
            position: sticky;
            top: 0;
            z-index: 10;
            display: flex;
            flex-direction: column;
            gap: 0.7rem;
            margin: 0 -0.2rem;
        }
        body.dark-mode .label-preview-card { background: var(--surface); }

        .label-preview-header {
            font-size: 0.55rem;
            text-transform: uppercase;
            letter-spacing: 0.12rem;
            color: var(--gray);
            font-weight: 700;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .label-preview-header .live-dot {
            width: 6px; height: 6px; border-radius: 50%;
            background: #28CD41;
            display: inline-block;
            margin-right: 0.3rem;
            animation: pulseDot 2s ease-in-out infinite;
        }
        @keyframes pulseDot {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.4; }
        }

        .label-preview-stage {
            background: linear-gradient(180deg, #FAFAFA 0%, #F0F0F2 100%);
            border: 1px solid var(--border);
            height: 160px;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
        body.dark-mode .label-preview-stage { background: linear-gradient(180deg, #1F1F22 0%, #18181B 100%); }

        .label-preview-svg {
            width: 100%;
            height: 100%;
            transition: opacity 0.4s ease, transform 0.4s ease;
        }
        .label-preview-svg.fade-out { opacity: 0; transform: translateY(8px); }

        .label-preview-info-row {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            gap: 0.7rem;
        }

        .label-preview-name {
            font-size: 0.85rem;
            font-weight: 700;
            letter-spacing: -0.01rem;
            min-width: 0;
            line-height: 1.2;
        }

        .label-preview-price {
            font-size: 0.85rem;
            font-weight: 700;
            color: var(--accent);
            font-family: 'SF Mono', Menlo, monospace;
            white-space: nowrap;
        }
        .label-preview-price small { font-size: 0.6rem; color: var(--gray); font-weight: 500; display: block; text-align: right; margin-top: 0.1rem; font-family: 'Inter', sans-serif; }

        .label-preview-info {
            font-size: 0.68rem;
            color: var(--gray);
            line-height: 1.5;
            font-weight: 300;
        }

        
        .label-section-title {
            font-size: 0.58rem;
            text-transform: uppercase;
            letter-spacing: 0.12rem;
            color: var(--gray);
            font-weight: 700;
            margin-bottom: 0.5rem;
            margin-top: 0.5rem;
        }

        
        .label-fold-grid {
            display: flex;
            flex-direction: column;
            gap: 0.35rem;
        }

        .label-fold-card {
            border: 1px solid var(--border);
            background: #fff;
            padding: 0.55rem 0.75rem;
            cursor: pointer;
            transition: all 0.15s;
            position: relative;
            display: flex;
            align-items: center;
            gap: 0.7rem;
            min-height: 44px;
        }
        body.dark-mode .label-fold-card { background: var(--surface); }

        .label-fold-card:hover {
            border-color: var(--accent);
        }

        .label-fold-card.selected {
            border-color: var(--accent);
            border-width: 2px;
            padding: calc(0.55rem - 1px) calc(0.75rem - 1px);
            background: linear-gradient(90deg, rgba(0, 163, 255, 0.06) 0%, transparent 100%);
        }

        .label-fold-icon {
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text);
            opacity: 0.7;
            flex-shrink: 0;
        }
        body.dark-mode .label-fold-icon { color: rgba(255,255,255,0.7); }

        .label-fold-card.selected .label-fold-icon {
            color: var(--accent);
            opacity: 1;
        }

        .label-fold-text {
            min-width: 0;
            flex: 1;
        }

        .label-fold-name {
            font-size: 0.74rem;
            font-weight: 600;
            line-height: 1.2;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        
        .label-fold-desc { display: none; }

        .label-fold-price {
            font-size: 0.65rem;
            color: var(--accent);
            font-weight: 700;
            font-family: 'SF Mono', Menlo, monospace;
            white-space: nowrap;
            flex-shrink: 0;
        }

        
        .label-upload-section {
            margin: 0;
        }

        .label-dropzone {
            border: 2px dashed var(--border);
            background: var(--surface-alt);
            padding: 1rem;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s;
            position: relative;
        }
        .label-dropzone:hover {
            border-color: var(--accent);
            background: rgba(0, 163, 255, 0.03);
        }
        .label-dropzone.dragover {
            border-color: var(--accent);
            background: rgba(0, 163, 255, 0.07);
        }
        .label-dropzone.has-file {
            border-style: solid;
            border-color: #28CD41;
            background: rgba(40, 205, 65, 0.03);
            text-align: left;
            display: flex;
            align-items: center;
            gap: 0.7rem;
            padding: 0.7rem 0.85rem;
        }

        .label-dropzone-icon {
            color: var(--gray);
            margin-bottom: 0.3rem;
        }
        .label-dropzone:hover .label-dropzone-icon { color: var(--accent); }

        .label-dropzone-text {
            font-size: 0.72rem;
            color: var(--text);
            font-weight: 500;
            margin-bottom: 0.15rem;
        }
        .label-dropzone-hint {
            font-size: 0.6rem;
            color: var(--gray);
            font-weight: 300;
        }

        .label-dropzone-preview {
            width: 40px;
            height: 40px;
            background: #fff;
            border: 1px solid var(--border);
            padding: 0;
            appearance: none;
            font: inherit;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            overflow: hidden;
        }
        .label-dropzone-preview img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }

        .label-dropzone-info { flex-grow: 1; min-width: 0; }
        .label-dropzone-info .name { font-size: 0.7rem; font-weight: 600; margin-bottom: 0.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .label-dropzone-info .meta { font-size: 0.6rem; color: var(--gray); }

        .label-dropzone-remove {
            background: none;
            border: 1px solid var(--border);
            padding: 0.35rem 0.55rem;
            font-family: 'Inter', sans-serif;
            font-size: 0.55rem;
            font-weight: 600;
            text-transform: uppercase;
            color: var(--gray);
            cursor: pointer;
            transition: all 0.2s;
            flex-shrink: 0;
        }
        .label-dropzone-remove:hover { color: #e53e3e; border-color: #e53e3e; }

        
        .label-position-grid {
            display: flex;
            flex-direction: column;
            gap: 0.3rem;
        }

        .label-position-pill {
            padding: 0.55rem 0.7rem;
            background: #fff;
            border: 1px solid var(--border);
            cursor: pointer;
            transition: all 0.2s;
            font-size: 0.72rem;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 0.6rem;
        }
        body.dark-mode .label-position-pill { background: var(--surface); }
        .label-position-pill:hover { border-color: var(--text); }
        .label-position-pill.selected {
            background: var(--text);
            color: #fff;
            border-color: var(--text);
        }
        .label-position-pill .lbl {
            font-size: 0.55rem;
            text-transform: uppercase;
            letter-spacing: 0.08rem;
            color: var(--gray);
            font-weight: 700;
            min-width: 60px;
            flex-shrink: 0;
        }
        .label-position-pill.selected .lbl { color: rgba(255,255,255,0.7); }

        
        .label-price-box {
            background: var(--surface-alt);
            border: 1px solid var(--border);
            padding: 0.85rem 1rem;
            margin-top: 0.3rem;
        }
        body.dark-mode .label-price-box { background: rgba(255,255,255,0.03); }

        .label-price-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.25rem 0;
            font-size: 0.7rem;
            gap: 0.5rem;
        }
        .label-price-row.highlight {
            border-top: 1px solid var(--border);
            padding-top: 0.6rem;
            margin-top: 0.3rem;
            font-weight: 700;
            font-size: 0.78rem;
        }

        .label-price-label { color: var(--gray); white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
        .label-price-row.highlight .label-price-label { color: var(--text); }

        .label-price-value {
            font-family: 'SF Mono', Menlo, monospace;
            font-weight: 600;
            white-space: nowrap;
        }
        .label-price-row.highlight .label-price-value { color: var(--accent); font-weight: 700; }

        

        
        .quantity-tabs {
            display: flex;
            gap: 0;
            border-bottom: 1px solid var(--border);
            margin-bottom: 1.2rem;
        }
        .quantity-tab {
            background: none;
            border: none;
            padding: 0.7rem 1rem;
            font-family: 'Inter', sans-serif;
            font-size: 0.72rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.08rem;
            color: var(--gray);
            cursor: pointer;
            border-bottom: 2px solid transparent;
            margin-bottom: -1px;
            transition: all 0.15s;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }
        .quantity-tab:hover { color: var(--text); }
        .quantity-tab.active {
            color: var(--text);
            border-bottom-color: var(--accent);
        }
        .quantity-tab .tab-counter {
            background: var(--surface-alt);
            color: var(--text);
            font-size: 0.6rem;
            padding: 0.15rem 0.4rem;
            font-weight: 700;
            min-width: 18px;
            text-align: center;
        }
        .quantity-tab.active .tab-counter {
            background: var(--accent);
            color: #fff;
        }

        .quantity-panel { display: none; }
        .quantity-panel.active { display: block; }

        
        .pers-import-bar {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 0.6rem;
            margin-bottom: 1rem;
            align-items: stretch;
        }
        .pers-csv-drop {
            border: 1.5px dashed var(--border);
            background: var(--surface-alt);
            padding: 0.85rem 1rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 0.7rem;
            transition: all 0.15s;
            min-width: 0;
        }
        .pers-csv-drop:hover {
            border-color: var(--accent);
            background: rgba(0, 163, 255, 0.04);
        }
        body.dark-mode .pers-csv-drop:hover { background: var(--accent); color: #fff; }
        .pers-csv-drop.dragover {
            border-color: var(--accent);
            background: rgba(0, 163, 255, 0.08);
        }
        body.dark-mode .pers-csv-drop.dragover { background: var(--accent); color: #fff; }
        .pers-csv-drop-icon {
            color: var(--gray);
            flex-shrink: 0;
        }
        .pers-csv-drop:hover .pers-csv-drop-icon { color: var(--accent); }
        .pers-csv-drop-text {
            font-size: 0.72rem;
            line-height: 1.4;
            min-width: 0;
        }
        .pers-csv-drop-text strong { color: var(--text); font-weight: 600; }
        .pers-csv-drop-text small { color: var(--gray); display: block; margin-top: 0.1rem; font-size: 0.62rem; }

        .pers-template-btn {
            background: none;
            border: 1px solid var(--border);
            padding: 0 0.85rem;
            font-family: 'Inter', sans-serif;
            font-size: 0.6rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06rem;
            color: var(--text);
            cursor: pointer;
            transition: all 0.2s;
            white-space: nowrap;
        }
        .pers-template-btn:hover { background: var(--text); color: #fff; }

        
        .pers-table-wrap {
            border: 1px solid var(--border);
            background: #fff;
            margin-bottom: 0.8rem;
            max-height: 380px;
            overflow-y: auto;
        }
        body.dark-mode .pers-table-wrap { background: var(--surface); }

        .pers-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.72rem;
        }
        .pers-table thead {
            position: sticky;
            top: 0;
            background: var(--surface-alt);
            z-index: 1;
        }
        body.dark-mode .pers-table thead { background: rgba(255,255,255,0.03); }
        .pers-table th {
            font-size: 0.58rem;
            text-transform: uppercase;
            letter-spacing: 0.1rem;
            color: var(--gray);
            font-weight: 700;
            padding: 0.55rem 0.6rem;
            text-align: left;
            border-bottom: 1px solid var(--border);
            white-space: nowrap;
        }
        .pers-table th.center { text-align: center; }
        .pers-table td {
            padding: 0.4rem 0.5rem;
            border-bottom: 1px solid var(--border);
            vertical-align: middle;
        }
        .pers-table tr:last-child td { border-bottom: none; }
        .pers-table tr:hover td { background: rgba(0, 163, 255, 0.03); }
        body.dark-mode .pers-table tr:hover td { background: var(--accent); color: #fff; }

        .pers-row-num {
            font-size: 0.62rem;
            color: var(--gray);
            font-family: 'SF Mono', Menlo, monospace;
            text-align: center;
            min-width: 24px;
        }
        .pers-input {
            width: 100%;
            padding: 0.4rem 0.5rem;
            border: 1px solid transparent;
            background: transparent;
            font-family: 'Inter', sans-serif;
            font-size: 0.72rem;
            color: var(--text);
            outline: none;
            transition: all 0.1s;
        }
        .pers-input:hover { border-color: var(--border); }
        .pers-input:focus {
            border-color: var(--accent);
            background: #fff;
        }
        body.dark-mode .pers-input:focus { background: var(--surface); }

        .pers-size-select {
            width: 100%;
            padding: 0.4rem 0.5rem;
            border: 1px solid transparent;
            background: transparent;
            font-family: 'Inter', sans-serif;
            font-size: 0.72rem;
            color: var(--text);
            outline: none;
            cursor: pointer;
            font-weight: 600;
        }
        .pers-size-select:hover { border-color: var(--border); }
        .pers-size-select:focus { border-color: var(--accent); background: #fff; }
        body.dark-mode .pers-size-select { background: transparent; }
        body.dark-mode .pers-size-select:focus { background: var(--surface); }

        .pers-row-delete {
            background: none;
            border: none;
            color: var(--gray);
            font-size: 1.1rem;
            line-height: 1;
            cursor: pointer;
            padding: 0.3rem 0.5rem;
            transition: color 0.15s;
        }
        .pers-row-delete:hover { color: #e53e3e; }

        .pers-table-empty {
            padding: 2rem;
            text-align: center;
            color: var(--gray);
            font-size: 0.78rem;
            font-style: italic;
        }

        .pers-add-row {
            background: none;
            border: 1px dashed var(--border);
            padding: 0.7rem;
            width: 100%;
            font-family: 'Inter', sans-serif;
            font-size: 0.7rem;
            font-weight: 600;
            color: var(--accent);
            cursor: pointer;
            transition: all 0.15s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.4rem;
        }
        .pers-add-row:hover {
            background: rgba(0, 163, 255, 0.04);
            border-color: var(--accent);
        }
        body.dark-mode .pers-add-row:hover { background: var(--accent); color: #fff; }

        .pers-summary-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.85rem 1.1rem;
            background: var(--text);
            color: #fff;
            margin-top: 1rem;
            gap: 1rem;
        }
        body.dark-mode .pers-summary-bar { background: var(--surface); }
        .pers-summary-stats {
            display: flex;
            gap: 1.5rem;
            font-size: 0.7rem;
        }
        .pers-summary-stat {
            display: flex;
            flex-direction: column;
            gap: 0.15rem;
        }
        .pers-summary-stat .lbl {
            font-size: 0.55rem;
            text-transform: uppercase;
            letter-spacing: 0.08rem;
            color: rgba(255,255,255,0.55);
            font-weight: 700;
        }
        .pers-summary-stat .val {
            font-size: 0.95rem;
            font-weight: 700;
            font-family: 'SF Mono', Menlo, monospace;
        }
        .pers-summary-stat .val.accent { color: var(--accent); }

        .pers-info-bar {
            display: flex;
            align-items: flex-start;
            gap: 0.6rem;
            background: linear-gradient(90deg, rgba(0,163,255,0.05) 0%, transparent 100%);
            border-left: 3px solid var(--accent);
            padding: 0.7rem 0.9rem;
            margin-bottom: 1rem;
            font-size: 0.68rem;
            line-height: 1.5;
            color: var(--text);
        }
        body.dark-mode .pers-info-bar { background: var(--accent); color: #fff; }
        .pers-info-bar strong { font-weight: 700; display: block; margin-bottom: 0.15rem; }
        .pers-info-bar small { color: var(--gray); font-weight: 400; }
        body.dark-mode .pers-info-bar small { color: rgba(255,255,255,0.7); }

        
        .pers-actions-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 0.7rem;
            margin-bottom: 0.7rem;
            flex-wrap: wrap;
        }
        .pers-bulk-actions {
            display: flex;
            gap: 0.4rem;
        }
        .pers-mini-btn {
            background: none;
            border: 1px solid var(--border);
            padding: 0.4rem 0.7rem;
            font-family: 'Inter', sans-serif;
            font-size: 0.58rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06rem;
            color: var(--text);
            cursor: pointer;
            transition: all 0.15s;
        }
        .pers-mini-btn:hover { background: var(--text); color: #fff; }
        .pers-mini-btn.danger:hover { background: #e53e3e; border-color: #e53e3e; color: #fff; }

        
        .roster-editor-modal {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.55);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 99998;
            padding: 2rem;
        }
        .roster-editor-modal.show { display: flex; }
        .roster-editor-content {
            background: #fff;
            max-width: 720px;
            width: 100%;
            max-height: 85vh;
            overflow-y: auto;
            padding: 2rem 2.2rem;
            position: relative;
        }
        body.dark-mode .roster-editor-content { background: var(--surface); }

        .roster-editor-eyebrow {
            font-size: 0.6rem;
            text-transform: uppercase;
            letter-spacing: 0.12rem;
            color: var(--accent);
            font-weight: 700;
            margin-bottom: 0.4rem;
        }
        .roster-editor-title {
            font-size: 1.4rem;
            font-weight: 700;
            margin-bottom: 0.4rem;
            letter-spacing: -0.02rem;
        }
        .roster-editor-desc {
            font-size: 0.78rem;
            color: var(--gray);
            line-height: 1.55;
            margin-bottom: 1.5rem;
            font-weight: 300;
        }

        .roster-editor-name-input {
            width: 100%;
            padding: 0.7rem 0.9rem;
            border: 1px solid var(--border);
            background: var(--surface-alt);
            font-family: 'Inter', sans-serif;
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--text);
            outline: none;
            margin-bottom: 1rem;
            transition: border-color 0.15s;
        }
        body.dark-mode .roster-editor-name-input { background: rgba(255,255,255,0.03); }
        .roster-editor-name-input:focus { border-color: var(--accent); }

        .roster-editor-section-title {
            font-size: 0.6rem;
            text-transform: uppercase;
            letter-spacing: 0.12rem;
            color: var(--gray);
            font-weight: 700;
            margin: 1.3rem 0 0.5rem;
        }

        .roster-size-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 0.5rem;
            margin-bottom: 1rem;
        }
        .roster-size-cell {
            border: 1px solid var(--border);
            padding: 0.7rem 0.85rem;
            background: var(--surface-alt);
        }
        body.dark-mode .roster-size-cell { background: rgba(255,255,255,0.03); }
        .roster-size-cell label {
            display: block;
            font-size: 0.55rem;
            text-transform: uppercase;
            letter-spacing: 0.1rem;
            color: var(--gray);
            font-weight: 700;
            margin-bottom: 0.25rem;
        }
        body.dark-mode .roster-size-cell label { color: rgba(255,255,255,0.6) !important; }
        .roster-size-cell input {
            width: 100%;
            border: none;
            background: transparent;
            font-family: 'Inter', sans-serif;
            font-size: 1rem;
            font-weight: 700;
            color: var(--text);
            outline: none;
            padding: 0;
        }
        .roster-size-cell input:focus { color: var(--accent); }

        .roster-total-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.85rem 1rem;
            background: var(--text);
            color: #fff;
            margin-bottom: 1.2rem;
        }
        body.dark-mode .roster-total-row { background: var(--surface); }
        .roster-total-label {
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.1rem;
            font-weight: 700;
        }
        .roster-total-val {
            font-size: 1.3rem;
            font-weight: 700;
            color: var(--accent);
            font-family: 'SF Mono', Menlo, monospace;
        }

        .roster-editor-toggle {
            display: flex;
            align-items: center;
            gap: 0.7rem;
            padding: 0.85rem 1rem;
            background: var(--surface-alt);
            border-left: 3px solid var(--border);
            margin: 1.5rem 0 1rem;
            cursor: pointer;
            transition: border-color 0.15s;
        }
        .roster-editor-toggle.on { border-left-color: var(--accent); }
        body.dark-mode .roster-editor-toggle { background: rgba(255,255,255,0.03); }

        .roster-editor-toggle-checkbox {
            width: 18px;
            height: 18px;
            border: 1.5px solid var(--border);
            background: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: transparent;
            font-weight: 700;
            font-size: 0.7rem;
            transition: all 0.15s;
            flex-shrink: 0;
        }
        .roster-editor-toggle.on .roster-editor-toggle-checkbox {
            background: var(--accent);
            border-color: var(--accent);
            color: #fff;
        }

        .roster-editor-toggle-text {
            flex: 1;
            font-size: 0.78rem;
            color: var(--text);
            line-height: 1.4;
            font-weight: 500;
        }
        .roster-editor-toggle-text small {
            color: var(--gray);
            display: block;
            font-weight: 400;
            font-size: 0.65rem;
            margin-top: 0.15rem;
        }

        .roster-editor-actions {
            display: flex;
            gap: 0.6rem;
            justify-content: flex-end;
            margin-top: 1.5rem;
            padding-top: 1.2rem;
            border-top: 1px solid var(--border);
        }
        .roster-editor-cancel {
            background: none;
            border: 1px solid var(--border);
            padding: 0.75rem 1.4rem;
            font-family: 'Inter', sans-serif;
            font-size: 0.7rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08rem;
            color: var(--gray);
            cursor: pointer;
            transition: all 0.15s;
        }
        .roster-editor-cancel:hover { color: var(--text); border-color: var(--text); }
        .roster-editor-save {
            background: var(--accent);
            color: #ffffff;
            border: none;
            border-radius: 4px;
            padding: 0.75rem 1.5rem;
            min-width: 180px;
            font-family: 'Inter', sans-serif;
            font-size: 0.85rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            cursor: pointer;
            transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
            box-shadow: 0 8px 18px rgba(45, 177, 255, 0.18);
        }
        .roster-editor-save:hover {
            background: #24a8f2;
            box-shadow: 0 12px 24px rgba(45, 177, 255, 0.22);
            transform: translateY(-1px);
        }

        
        .account-roster-item {
            display: grid;
            grid-template-columns: 1fr auto auto auto;
            gap: 0.6rem;
            align-items: center;
        }
        .account-roster-edit {
            background: none;
            border: 1px solid var(--border);
            padding: 0.4rem 0.7rem;
            font-family: 'Inter', sans-serif;
            font-size: 0.55rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08rem;
            color: var(--text);
            cursor: pointer;
            transition: all 0.15s;
        }
        .account-roster-edit:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
        .account-roster-item.has-pers .account-roster-name::after {
            content: "👤 personalisiert";
            display: inline-block;
            margin-left: 0.5rem;
            font-size: 0.55rem;
            text-transform: uppercase;
            letter-spacing: 0.08rem;
            color: var(--accent);
            font-weight: 700;
            background: rgba(0,163,255,0.08);
            padding: 0.15rem 0.45rem;
            vertical-align: middle;
        }

        

        .product-detail-layout {
            display: grid;
            grid-template-columns: 1.15fr 1fr;
            gap: 3rem;
            max-width: 1400px;
            margin: 0 auto;
            padding: 2rem 0 4rem;
        }

        
        .pd-gallery {
            display: flex;
            flex-direction: column;
            gap: 0.6rem;
            position: sticky;
            top: 2rem;
            align-self: start;
        }

        .pd-main-image {
            background: #fafafa;
            border: 1px solid var(--border);
            aspect-ratio: 4/5;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            position: relative;
        }
        body.dark-mode .pd-main-image { background: #1a1a1a; }

        .pd-main-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: opacity 0.3s ease;
        }

        .pd-main-image-badges {
            position: absolute;
            top: 1rem;
            left: 1rem;
            display: flex;
            gap: 0.4rem;
            z-index: 2;
        }

        .pd-badge {
            background: var(--accent);
            color: #fff;
            font-size: 0.6rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08rem;
            padding: 0.3rem 0.65rem;
        }
        .pd-badge.trend { background: rgba(255,255,255,0.92); color: var(--text); border: 1px solid var(--border); }
        .pd-badge.sustain { background: #28CD41; }
        body.dark-mode .pd-badge { background-color: var(--accent) !important; color: #ffffff !important; }
        body.dark-mode .pd-badge.sustain { background-color: var(--accent) !important; color: #ffffff !important; }
        body.dark-mode .pd-badge.trend { background-color: var(--surface) !important; color: #ffffff !important; border-color: var(--border) !important; }

        .pd-thumbs {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 0.5rem;
        }

        .pd-thumb {
            background: #fafafa;
            border: 1px solid var(--border);
            aspect-ratio: 4/5;
            cursor: pointer;
            overflow: hidden;
            transition: all 0.15s;
            position: relative;
        }
        body.dark-mode .pd-thumb { background: #1a1a1a; }

        .pd-thumb:hover { border-color: var(--text); }
        .pd-thumb.active {
            border-color: var(--accent);
            border-width: 2px;
        }
        .pd-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .pd-thumb-label {
            position: absolute;
            bottom: 0.3rem;
            left: 0.3rem;
            background: rgba(255,255,255,0.85);
            font-size: 0.55rem;
            padding: 0.15rem 0.4rem;
            font-weight: 600;
            color: var(--text);
        }

        
        .pd-info {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        .pd-breadcrumb {
            font-size: 0.7rem;
            color: var(--gray);
            text-transform: uppercase;
            letter-spacing: 0.1rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        .pd-breadcrumb a {
            color: var(--gray);
            text-decoration: none;
            cursor: pointer;
            transition: color 0.15s;
        }
        .pd-breadcrumb a:hover { color: var(--accent); }
        .pd-breadcrumb .sep { opacity: 0.4; }

        .pd-header {
            border-bottom: 1px solid var(--border);
            padding-bottom: 1.3rem;
        }

        .pd-brand-eyebrow {
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.18rem;
            color: var(--accent);
            font-weight: 700;
            margin-bottom: 0.5rem;
        }

        
        .pd-brand-logo {
            height: 38px;
            width: auto;
            max-width: 180px;
            object-fit: contain;
            display: block;
            margin-bottom: 0.75rem;
        }

        .pd-title-row {
            display: flex;
            align-items: baseline;
            gap: 0.9rem;
            flex-wrap: wrap;
            margin-bottom: 0.6rem;
        }
        .pd-title {
            font-size: 2.4rem;
            font-weight: 700;
            letter-spacing: -0.03rem;
            line-height: 1.05;
            margin: 0;
        }
        .pd-sku {
            font-size: 0.85rem;
            color: var(--gray);
            font-family: 'SF Mono', Menlo, monospace;
            font-weight: 500;
        }

        .pd-tagline {
            font-size: 0.95rem;
            color: var(--gray);
            line-height: 1.5;
            font-weight: 300;
        }

        
        .pd-specs-row {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 0;
            border: 1px solid var(--border);
        }
        .pd-spec {
            padding: 0.95rem 1.2rem;
            border-right: 1px solid var(--border);
            background: var(--surface-alt);
        }
        .pd-spec:last-child { border-right: none; }
        body.dark-mode .pd-spec { background: rgba(255,255,255,0.03); }

        .pd-spec-label {
            font-size: 0.6rem;
            text-transform: uppercase;
            letter-spacing: 0.12rem;
            color: var(--gray);
            font-weight: 700;
            margin-bottom: 0.3rem;
        }
        .pd-spec-value {
            font-size: 0.92rem;
            font-weight: 600;
            color: var(--text);
            letter-spacing: -0.01rem;
        }

        
        .pd-colors-block .pd-section-mini-title {
            font-size: 0.7rem;
            font-weight: 600;
            color: var(--text);
            margin-bottom: 0.5rem;
        }
        .pd-colors-block .pd-section-mini-title strong {
            color: var(--gray);
            font-weight: 400;
            margin-left: 0.4rem;
        }

        .pd-color-swatches {
            display: flex;
            flex-wrap: wrap;
            gap: 0.6rem;
        }
        .pd-color-swatch {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            cursor: pointer;
            border: 1px solid var(--border);
            position: relative;
            transition: transform 0.15s;
        }
        .pd-color-swatch:hover { transform: scale(1.1); }
        .pd-color-swatch.selected {
            box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--text);
        }
        
        .pd-color-swatch.pd-color-photo {
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }
        
        .pd-color-swatch.pd-color-photo, .color-swatch-item.color-swatch-photo { overflow: hidden; }
        .pd-color-photo > img, .color-swatch-photo > img, .et-farbfoto > img {
            width: 100%; height: 100%; object-fit: cover; display: block;
            border-radius: inherit; pointer-events: none;
        }
        body.dark-mode .pd-color-swatch.selected {
            box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--accent);
        }

        
        .pd-cta-stack {
            display: flex;
            flex-direction: column;
            gap: 0.6rem;
            margin-top: 0.5rem;
        }
        .pd-cta-primary {
            background: var(--text);
            color: #fff;
            border: none;
            padding: 1.1rem 1.5rem;
            font-family: 'Inter', sans-serif;
            font-size: 0.85rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08rem;
            cursor: pointer;
            transition: all 0.2s;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.6rem;
        }
        .pd-cta-primary:hover { background: var(--accent); }

        .pd-cta-secondary {
            background: transparent;
            color: var(--text);
            border: 1px solid var(--border);
            padding: 0.85rem 1.5rem;
            font-family: 'Inter', sans-serif;
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.08rem;
            cursor: pointer;
            transition: all 0.15s;
        }
        .pd-cta-secondary:hover { border-color: var(--text); background: var(--surface-alt); }

        
        .pd-section {
            padding-top: 1.3rem;
            border-top: 1px solid var(--border);
        }
        .pd-section-title {
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.14rem;
            color: var(--text);
            font-weight: 700;
            margin-bottom: 0.85rem;
        }

        .pd-bullets {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .pd-bullets li {
            font-size: 0.85rem;
            color: var(--text);
            line-height: 1.55;
            padding: 0.3rem 0 0.3rem 1.4rem;
            position: relative;
            font-weight: 400;
        }
        .pd-bullets li::before {
            content: "✓";
            position: absolute;
            left: 0;
            top: 0.3rem;
            color: var(--accent);
            font-weight: 700;
            font-size: 0.95rem;
        }

        .pd-composition-text,
        .pd-care-text {
            font-size: 0.85rem;
            color: var(--text);
            line-height: 1.6;
            font-weight: 300;
        }

        .pd-care-block {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 1.5rem;
            align-items: start;
        }

        .pd-care-symbols {
            display: grid;
            grid-template-columns: repeat(5, 28px);
            gap: 0.4rem;
        }
        .pd-care-sym {
            width: 28px; height: 28px;
            border: 1px solid var(--text);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.6rem;
            font-weight: 700;
            color: var(--text);
            background: #fff;
            position: relative;
        }
        body.dark-mode .pd-care-sym {
            background: var(--surface);
            border-color: rgba(255,255,255,0.6);
            color: rgba(255,255,255,0.85);
        }
        .pd-care-sym.crossed::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(45deg, transparent calc(50% - 1px), var(--text) calc(50% - 1px), var(--text) calc(50% + 1px), transparent calc(50% + 1px));
        }

        
        .pd-certs {
            display: flex;
            flex-wrap: wrap;
            gap: 0.7rem;
            margin-top: 0.7rem;
        }
        .pd-cert {
            border: 1px solid var(--border);
            padding: 0.55rem 0.85rem;
            font-size: 0.62rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08rem;
            color: var(--text);
            background: var(--surface-alt);
            display: flex;
            align-items: center;
            gap: 0.4rem;
        }
        body.dark-mode .pd-cert { background: rgba(255,255,255,0.03); }
        .pd-cert-icon {
            width: 18px; height: 18px;
            background: var(--accent);
            color: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            font-size: 0.5rem;
        }
        .pd-cert.green .pd-cert-icon { background: #28CD41; }
        .pd-cert.dark .pd-cert-icon { background: var(--text); }
        .pd-cert.red .pd-cert-icon { background: #e53e3e; }

        
        .pd-downloads {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.6rem;
            margin-top: 0.7rem;
        }
        .pd-download-btn {
            background: #fff;
            border: 1px solid var(--border);
            padding: 0.85rem 1rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-family: 'Inter', sans-serif;
            font-size: 0.72rem;
            font-weight: 600;
            color: var(--text);
            cursor: pointer;
            transition: all 0.15s;
            text-align: left;
        }
        body.dark-mode .pd-download-btn { background: var(--surface); }
        .pd-download-btn:hover {
            border-color: var(--accent);
            color: var(--accent);
        }
        .pd-download-icon {
            width: 22px; height: 22px;
            background: var(--surface-alt);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: var(--gray);
        }
        .pd-download-btn:hover .pd-download-icon {
            background: rgba(0,163,255,0.1);
            color: var(--accent);
        }

        
        .size-guide-section {
            grid-column: 1 / -1;
            margin-top: 4rem;
            padding-top: 3rem;
            border-top: 1px solid var(--border);
        }

        .size-guide-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
        }
        .size-guide-title {
            font-size: 1.5rem;
            font-weight: 700;
            letter-spacing: -0.02rem;
            margin: 0;
        }
        .size-guide-eyebrow {
            font-size: 0.65rem;
            text-transform: uppercase;
            letter-spacing: 0.15rem;
            color: var(--accent);
            font-weight: 700;
            margin-bottom: 0.4rem;
        }

        .size-guide-body {
            display: grid;
            grid-template-columns: 1fr 1.5fr;
            gap: 3rem;
            align-items: start;
        }

        .size-guide-schema {
            background: var(--surface-alt);
            padding: 1.5rem;
            text-align: center;
        }
        body.dark-mode .size-guide-schema { background: rgba(255,255,255,0.03); }

        .size-guide-schema-svg {
            width: 100%;
            max-width: 320px;
            margin: 0 auto;
            display: block;
        }
        .size-guide-schema-label {
            font-size: 0.85rem;
            font-weight: 600;
            margin-top: 0.7rem;
        }

        .size-guide-table-wrap {
            overflow-x: auto;
        }

        .size-guide-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.78rem;
        }
        .size-guide-table th,
        .size-guide-table td {
            padding: 0.7rem 0.7rem;
            text-align: center;
            border-bottom: 1px solid var(--border);
        }
        .size-guide-table th {
            font-size: 0.65rem;
            text-transform: uppercase;
            letter-spacing: 0.08rem;
            color: var(--gray);
            font-weight: 700;
            background: var(--surface-alt);
            border-bottom: 1px solid var(--border);
        }
        body.dark-mode .size-guide-table th { background: rgba(255,255,255,0.03); }
        .size-guide-table td.label-cell {
            text-align: left;
            font-weight: 600;
            color: var(--text);
        }
        .size-guide-table tbody tr:hover {
            background: rgba(0, 163, 255, 0.04);
        }
        body.dark-mode .size-guide-table tbody tr:hover { background: var(--accent); color: #fff; }

        .packing-table {
            margin-top: 2rem;
        }
        .packing-table-title {
            font-size: 0.85rem;
            font-weight: 700;
            margin-bottom: 0.7rem;
            color: var(--text);
        }

        
        @media (max-width: 1024px) {
            .product-detail-layout {
                grid-template-columns: 1fr;
                gap: 2rem;
            }
            .pd-gallery { position: static; }
            .size-guide-body { grid-template-columns: 1fr; gap: 1.5rem; }
        }

        

        
        .info-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: var(--surface-alt);
            color: var(--gray);
            font-size: 0.55rem;
            font-weight: 700;
            cursor: help;
            margin-left: 0.3rem;
            transition: all 0.15s;
            border: 1px solid var(--border);
            font-family: 'Inter', sans-serif;
            position: relative;
            top: -1px;
        }
        .info-icon:hover {
            background: var(--accent);
            color: #fff;
            border-color: var(--accent);
        }

        .tooltip-popup {
            position: fixed;
            background: #111;
            color: #fff;
            padding: 0.7rem 0.9rem;
            font-size: 0.7rem;
            line-height: 1.5;
            font-weight: 400;
            max-width: 260px;
            z-index: 99999;
            pointer-events: none;
            opacity: 0;
            transform: translateY(4px);
            transition: opacity 0.15s, transform 0.15s;
            box-shadow: 0 8px 28px rgba(0,0,0,0.25);
        }
        .tooltip-popup.show { opacity: 1; transform: translateY(0); }
        .tooltip-popup::after {
            content: "";
            position: absolute;
            top: -5px;
            left: 12px;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-bottom: 5px solid #111;
        }
        .tooltip-popup.below::after {
            top: auto;
            bottom: -5px;
            border-bottom: none;
            border-top: 5px solid #111;
        }
        .tooltip-popup .tt-title {
            font-weight: 700;
            font-size: 0.72rem;
            color: var(--accent);
            margin-bottom: 0.3rem;
            display: block;
        }

        
        .technique-card.disabled {
            opacity: 0.55;
            position: relative;
            background: linear-gradient(135deg, rgba(229, 62, 62, 0.04) 0%, transparent 100%);
            cursor: not-allowed;
        }
        .technique-card.disabled:hover {
            border-color: var(--border);
            transform: none;
        }
        .technique-card.disabled .technique-card-name {
            text-decoration: line-through;
            text-decoration-color: rgba(229, 62, 62, 0.4);
        }
        .technique-why-badge {
            position: absolute;
            top: 0.7rem;
            right: 0.7rem;
            background: rgba(229, 62, 62, 0.12);
            color: #c73838;
            padding: 0.25rem 0.55rem;
            font-size: 0.6rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06rem;
            border: 1px solid rgba(229, 62, 62, 0.3);
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
            transition: all 0.15s;
            font-family: 'Inter', sans-serif;
        }
        .technique-why-badge:hover {
            background: #c73838;
            color: #fff;
            border-color: #c73838;
        }

        
        .why-modal {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.55);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 99998;
            padding: 2rem;
        }
        .why-modal.show { display: flex; }
        .why-modal-content {
            background: #fff;
            max-width: 500px;
            width: 100%;
            padding: 2rem 2.2rem;
            position: relative;
        }
        body.dark-mode .why-modal-content { background: var(--surface); }
        .why-modal-eyebrow {
            font-size: 0.6rem;
            text-transform: uppercase;
            letter-spacing: 0.12rem;
            color: #c73838;
            font-weight: 700;
            margin-bottom: 0.5rem;
        }
        .why-modal-title {
            font-size: 1.3rem;
            font-weight: 700;
            margin: 0 0 0.5rem 0;
            letter-spacing: -0.02rem;
        }
        .why-modal-subtitle {
            font-size: 0.78rem;
            color: var(--gray);
            margin-bottom: 1.5rem;
            font-weight: 300;
        }
        .why-modal-body {
            font-size: 0.85rem;
            line-height: 1.65;
            color: var(--text);
            margin-bottom: 1.5rem;
        }
        .why-modal-alt {
            background: var(--surface-alt);
            padding: 1rem 1.2rem;
            border-left: 3px solid #28CD41;
            margin-bottom: 1.5rem;
        }
        .why-modal-alt-eyebrow {
            font-size: 0.6rem;
            text-transform: uppercase;
            letter-spacing: 0.12rem;
            color: #1a8a2c;
            font-weight: 700;
            margin-bottom: 0.4rem;
        }
        .why-modal-alt-text {
            font-size: 0.78rem;
            line-height: 1.55;
        }
        .why-modal-close {
            background: var(--text);
            color: #fff;
            border: none;
            padding: 0.7rem 1.3rem;
            font-family: 'Inter', sans-serif;
            font-size: 0.7rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08rem;
            cursor: pointer;
        }

        
        .roster-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 0.7rem;
            padding: 0.85rem 1rem;
            background: linear-gradient(90deg, rgba(0, 163, 255, 0.05) 0%, transparent 100%);
            border-left: 3px solid var(--accent);
            margin-bottom: 1rem;
        }
        body.dark-mode .roster-bar { background: var(--accent); color: #fff; }
        .roster-bar-text {
            font-size: 0.7rem;
            color: var(--text);
            font-weight: 500;
        }
        body.dark-mode .roster-bar-text { color: #fff; }
        .roster-bar-text small {
            display: block;
            color: var(--gray);
            font-weight: 400;
            font-size: 0.62rem;
            margin-top: 0.15rem;
        }
        body.dark-mode .roster-bar-text small { color: rgba(255,255,255,0.7); }
        .roster-select {
            background: #fff;
            border: 1px solid var(--border);
            padding: 0.5rem 0.7rem;
            font-family: 'Inter', sans-serif;
            font-size: 0.7rem;
            color: var(--text);
            outline: none;
            cursor: pointer;
            min-width: 130px;
        }
        body.dark-mode .roster-select { background: var(--surface); }

        .roster-save-btn {
            background: var(--text);
            color: #fff;
            border: none;
            padding: 0.55rem 0.9rem;
            font-family: 'Inter', sans-serif;
            font-size: 0.6rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06rem;
            cursor: pointer;
            white-space: nowrap;
        }
        .roster-save-btn:hover { background: var(--accent); }

        
        .account-roster-list {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }
        .account-roster-item {
            display: grid;
            grid-template-columns: 1fr auto auto;
            gap: 1rem;
            align-items: center;
            padding: 0.85rem 1.1rem;
            background: var(--surface-alt);
            border: 1px solid var(--border);
        }
        .account-roster-name {
            font-size: 0.85rem;
            font-weight: 600;
        }
        .account-roster-summary {
            font-size: 0.7rem;
            color: var(--gray);
            margin-top: 0.15rem;
            font-family: 'SF Mono', Menlo, monospace;
        }
        .account-roster-delete {
            background: none;
            border: 1px solid var(--border);
            padding: 0.4rem 0.6rem;
            font-family: 'Inter', sans-serif;
            font-size: 0.55rem;
            font-weight: 600;
            text-transform: uppercase;
            color: var(--gray);
            cursor: pointer;
        }
        .account-roster-delete:hover { color: #e53e3e; border-color: #e53e3e; }

        
        .smart-default-hint {
            background: linear-gradient(90deg, rgba(40, 205, 65, 0.06) 0%, transparent 100%);
            border-left: 2px solid #28CD41;
            padding: 0.55rem 0.8rem;
            margin-top: 0.7rem;
            font-size: 0.66rem;
            color: var(--text);
            display: none;
            align-items: center;
            gap: 0.4rem;
            line-height: 1.4;
            font-weight: 400;
        }
        .smart-default-hint.show {
            display: flex;
            animation: smartHintIn 0.4s ease-out;
        }
        @keyframes smartHintIn {
            from { opacity: 0; transform: translateX(-4px); }
            to { opacity: 1; transform: translateX(0); }
        }
        .smart-default-hint::before {
            content: "✨";
            font-size: 0.85rem;
        }
        .smart-default-hint strong { font-weight: 700; color: #1a8a2c; }
        body.dark-mode .smart-default-hint { background: linear-gradient(90deg, rgba(45, 177, 255, 0.1) 0%, transparent 100%) !important; border-left-color: var(--accent) !important; color: #fff !important; }
        body.dark-mode .smart-default-hint strong { color: #40d959 !important; }

        

        
        main#view-backoffice {
            margin: 0;
            padding: 0;
            max-width: none;
            width: 100%;
            min-height: 100vh;
            background: #F5F5F7;
            animation: none;
        }

        body.dark-mode main#view-backoffice { background: #0a0a0c; }

        
        #view-backoffice {
            margin: 0;
            padding: 0;
            max-width: none;
            min-height: 100vh;
            background: #F5F5F7;
        }

        body.dark-mode #view-backoffice { background: #0a0a0c; }









        .bo-nav-item {
            display: flex;
            align-items: center;
            gap: 0.7rem;
            padding: 0.85rem 1.5rem;
            font-size: 0.78rem;
            font-weight: 500;
            color: rgba(255,255,255,0.65);
            cursor: pointer;
            border-left: 2px solid transparent;
            transition: all 0.2s;
        }
        .bo-nav-item:hover { color: #fff; background: rgba(255,255,255,0.04); }
        .bo-nav-item.active {
            color: #fff;
            border-left-color: var(--accent);
            background: rgba(0,163,255,0.08);
        }
        .bo-nav-item svg { flex-shrink: 0; }












































































        .bo-comm-btn {
            padding: 0.7rem 1rem;
            font-size: 0.7rem;
            font-weight: 500;
            border: 1px solid var(--border);
            background: #fff;
            cursor: pointer;
            font-family: 'Inter', sans-serif;
            color: var(--text);
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            transition: all 0.2s;
        }
        body.dark-mode .bo-comm-btn { background: var(--surface-alt); }
        .bo-comm-btn:hover { border-color: var(--text); }
        .bo-comm-btn.primary {
            background: var(--accent);
            color: #fff;
            border-color: var(--accent);
        }
        .bo-comm-btn.primary:hover { background: #008be0; }








































        

        
        .ai-text-divider {
            text-align: center;
            margin: 1.4rem 0 1rem 0;
            font-size: 0.65rem;
            color: var(--gray);
            text-transform: uppercase;
            letter-spacing: 0.1rem;
            position: relative;
        }
        .ai-text-divider::before, .ai-text-divider::after {
            content: "";
            position: absolute;
            top: 50%;
            width: 38%;
            height: 1px;
            background: var(--border);
        }
        .ai-text-divider::before { left: 0; }
        .ai-text-divider::after { right: 0; }

        .ai-text-trigger {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            width: 100%;
            padding: 0.85rem 1rem;
            background: linear-gradient(135deg, #6B46E5 0%, #4A30A8 100%);
            color: #fff;
            border: none;
            font-family: 'Inter', sans-serif;
            font-size: 0.72rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.08rem;
            cursor: pointer;
            transition: opacity 0.2s;
        }
        .ai-text-trigger:hover { opacity: 0.92; }

        .ai-text-trigger .sparkle {
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        
        .ai-text-modal {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.55);
            z-index: 9999;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 2rem;
        }
        .ai-text-modal.show { display: flex; }

        .ai-text-content {
            background: #fff;
            width: 640px;
            max-width: 92vw;
            max-height: 90vh;
            overflow-y: auto;
            padding: 2.5rem;
            position: relative;
        }
        body.dark-mode .ai-text-content { background: var(--surface); }

        .ai-text-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 1.5rem;
        }

        .ai-text-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: linear-gradient(135deg, #6B46E5 0%, #4A30A8 100%);
            color: #fff;
            padding: 0.35rem 0.7rem;
            font-size: 0.6rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.1rem;
            margin-bottom: 0.7rem;
        }

        .ai-text-content h3 {
            font-size: 1.4rem;
            font-weight: 500;
            margin: 0 0 0.4rem 0;
            letter-spacing: -0.02rem;
        }

        .ai-text-content > p {
            font-size: 0.82rem;
            color: var(--gray);
            margin: 0 0 1.5rem 0;
            font-weight: 300;
            line-height: 1.5;
        }

        .ai-prompt-area {
            position: relative;
            margin-bottom: 1.5rem;
        }

        .ai-prompt-textarea {
            width: 100%;
            border: 1px solid var(--border);
            background: #fff;
            padding: 0.95rem 1rem;
            font-family: 'Inter', sans-serif;
            font-size: 0.9rem;
            line-height: 1.6;
            outline: none;
            resize: vertical;
            min-height: 90px;
            transition: border-color 0.2s;
            color: var(--text);
        }
        body.dark-mode .ai-prompt-textarea { background: var(--surface-alt); }
        .ai-prompt-textarea:focus { border-color: #6B46E5; }

        .ai-suggestions {
            margin-bottom: 1.5rem;
        }

        .ai-suggestions-title {
            font-size: 0.62rem;
            text-transform: uppercase;
            letter-spacing: 0.08rem;
            color: var(--gray);
            font-weight: 600;
            margin-bottom: 0.6rem;
        }

        .ai-suggestion-chips {
            display: flex;
            gap: 0.4rem;
            flex-wrap: wrap;
        }

        .ai-chip {
            padding: 0.5rem 0.8rem;
            background: var(--surface-alt);
            border: 1px solid var(--border);
            font-size: 0.7rem;
            color: var(--text);
            cursor: pointer;
            font-family: 'Inter', sans-serif;
            transition: all 0.2s;
        }
        .ai-chip:hover {
            border-color: #6B46E5;
            color: #6B46E5;
        }

        .ai-options {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
            margin-bottom: 1.5rem;
        }

        .ai-option-field label {
            font-size: 0.6rem;
            text-transform: uppercase;
            letter-spacing: 0.08rem;
            color: var(--gray);
            font-weight: 600;
            margin-bottom: 0.4rem;
            display: block;
        }

        .ai-option-field select,
        .ai-option-field input {
            width: 100%;
            padding: 0.7rem 0.9rem;
            border: 1px solid var(--border);
            font-family: 'Inter', sans-serif;
            font-size: 0.78rem;
            background: #fff;
            color: var(--text);
            outline: none;
        }
        body.dark-mode .ai-option-field select,
        body.dark-mode .ai-option-field input { background: var(--surface-alt); }

        .ai-generated-preview {
            background: linear-gradient(135deg, #f5f5f5 0%, #ebebeb 100%);
            padding: 2.5rem;
            margin-bottom: 1.5rem;
            display: none;
            text-align: center;
            min-height: 140px;
            align-items: center;
            justify-content: center;
        }
        body.dark-mode .ai-generated-preview { background: linear-gradient(135deg, var(--surface-alt) 0%, #0a0a0c 100%); }

        .ai-generated-preview.show { display: flex; }

        .ai-preview-text {
            font-size: 2rem;
            font-weight: 700;
            color: var(--text);
            letter-spacing: -0.02rem;
            line-height: 1.1;
        }

        .ai-actions {
            display: flex;
            gap: 0.7rem;
            justify-content: flex-end;
            padding-top: 1rem;
            border-top: 1px solid var(--border);
        }

        .ai-action-btn {
            padding: 0.85rem 1.4rem;
            border: 1px solid var(--border);
            background: #fff;
            color: var(--text);
            font-family: 'Inter', sans-serif;
            font-size: 0.7rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.08rem;
            cursor: pointer;
            transition: all 0.2s;
        }
        body.dark-mode .ai-action-btn { background: var(--surface-alt); }
        .ai-action-btn:hover { border-color: var(--text); }
        .ai-action-btn.primary {
            background: linear-gradient(135deg, #6B46E5 0%, #4A30A8 100%);
            color: #fff;
            border-color: transparent;
        }
        .ai-action-btn.primary:hover { opacity: 0.92; }
        .ai-action-btn:disabled { opacity: 0.4; cursor: not-allowed; }

        
        .collection-toggle-bar {
            background: linear-gradient(135deg, rgba(107, 70, 229, 0.08) 0%, rgba(0, 163, 255, 0.06) 100%);
            border: 1px solid rgba(107, 70, 229, 0.2);
            padding: 1rem 1.5rem;
            margin-bottom: 1.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        body.dark-mode .collection-toggle-bar {
            background: linear-gradient(135deg, rgba(107, 70, 229, 0.15) 0%, rgba(0, 163, 255, 0.1) 100%);
            border-color: rgba(107, 70, 229, 0.3);
        }

        .collection-toggle-content { flex-grow: 1; }
        .collection-toggle-title {
            font-size: 0.78rem;
            font-weight: 600;
            margin-bottom: 0.2rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        .collection-toggle-text {
            font-size: 0.7rem;
            color: var(--gray);
            font-weight: 300;
        }

        .collection-mode-btn {
            padding: 0.6rem 1.2rem;
            background: linear-gradient(135deg, #6B46E5 0%, #4A30A8 100%);
            color: #fff;
            border: none;
            font-family: 'Inter', sans-serif;
            font-size: 0.65rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08rem;
            cursor: pointer;
            white-space: nowrap;
            transition: opacity 0.2s;
        }
        .collection-mode-btn:hover { opacity: 0.92; }

        
        .active-collection {
            background: var(--surface-alt);
            border: 1px solid var(--border);
            padding: 1rem 1.2rem;
            margin-bottom: 1.5rem;
        }

        .active-collection-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.7rem;
        }

        .active-collection-eyebrow {
            font-size: 0.55rem;
            text-transform: uppercase;
            letter-spacing: 0.15rem;
            color: #6B46E5;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 0.4rem;
        }

        .active-collection-name {
            font-size: 0.95rem;
            font-weight: 600;
            margin-top: 0.15rem;
        }

        .active-collection-clear {
            background: none;
            border: none;
            color: var(--gray);
            font-size: 0.85rem;
            cursor: pointer;
            font-family: 'Inter', sans-serif;
        }
        .active-collection-clear:hover { color: var(--text); }

        .collection-items {
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
            margin-bottom: 0.7rem;
        }

        .collection-item-pill {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.45rem 0.6rem;
            background: #fff;
            border: 1px solid var(--border);
            font-size: 0.7rem;
        }
        body.dark-mode .collection-item-pill { background: var(--bg); }

        .collection-item-pill.current {
            border-color: var(--accent);
            background: rgba(0, 163, 255, 0.05);
        }
        body.dark-mode .collection-item-pill.current { background: rgba(0, 163, 255, 0.15); }

        .collection-item-thumb {
            width: 22px;
            height: 22px;
            background: var(--border);
            overflow: hidden;
            flex-shrink: 0;
        }
        .collection-item-thumb img { width: 100%; height: 100%; object-fit: cover; }

        .collection-item-name { font-weight: 500; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .collection-item-status {
            font-size: 0.55rem;
            padding: 0.1rem 0.4rem;
            text-transform: uppercase;
            letter-spacing: 0.05rem;
            font-weight: 700;
        }
        .collection-item-status.done { background: #28CD41; color: #fff; }
        .collection-item-status.pending { background: var(--border); color: var(--gray); }

        .collection-add-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            padding: 0.45rem 0.7rem;
            background: transparent;
            border: 1px dashed var(--border);
            font-size: 0.7rem;
            color: var(--gray);
            cursor: pointer;
            font-family: 'Inter', sans-serif;
            font-weight: 500;
            transition: all 0.2s;
        }
        .collection-add-btn:hover { border-color: #6B46E5; color: #6B46E5; }

        
        .collection-setup-modal {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.6);
            z-index: 9999;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 2rem;
        }
        .collection-setup-modal.show { display: flex; }

        .collection-setup-content {
            background: #fff;
            width: 640px;
            max-width: 92vw;
            max-height: 90vh;
            overflow-y: auto;
            padding: 2.5rem;
        }
        body.dark-mode .collection-setup-content { background: var(--surface); }

        .collection-add-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.7rem;
            margin: 1.2rem 0;
        }

        .collection-product-pick {
            background: var(--surface-alt);
            border: 1px solid var(--border);
            padding: 0.9rem;
            cursor: pointer;
            display: flex;
            gap: 0.7rem;
            align-items: center;
            transition: all 0.2s;
        }
        .collection-product-pick:hover { border-color: var(--accent); }
        .collection-product-pick.selected {
            border-color: #6B46E5;
            background: rgba(107, 70, 229, 0.08);
        }
        body.dark-mode .collection-product-pick.selected { background: rgba(107, 70, 229, 0.2); }

        .collection-pick-thumb {
            width: 50px;
            height: 50px;
            background: var(--border);
            overflow: hidden;
            flex-shrink: 0;
        }
        .collection-pick-thumb img { width: 100%; height: 100%; object-fit: cover; }

        .collection-pick-info { flex-grow: 1; min-width: 0; }
        .collection-pick-name {
            font-size: 0.8rem;
            font-weight: 600;
            margin-bottom: 0.15rem;
        }
        .collection-pick-meta {
            font-size: 0.62rem;
            color: var(--gray);
            text-transform: uppercase;
            letter-spacing: 0.05rem;
        }

        .collection-pick-check {
            width: 20px;
            height: 20px;
            border: 1.5px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
            flex-shrink: 0;
        }
        .collection-product-pick.selected .collection-pick-check {
            background: #6B46E5;
            border-color: #6B46E5;
        }
        .collection-product-pick.selected .collection-pick-check::after {
            content: "✓";
            color: #fff;
            font-weight: 700;
            font-size: 0.7rem;
        }

        
        .yarn-match-block {
            margin-top: 1rem;
            background: linear-gradient(135deg, rgba(196, 113, 0, 0.04) 0%, rgba(196, 113, 0, 0.08) 100%);
            border: 1px solid rgba(196, 113, 0, 0.2);
            padding: 1.2rem;
        }
        body.dark-mode .yarn-match-block {
            background: linear-gradient(135deg, rgba(196, 113, 0, 0.12) 0%, rgba(196, 113, 0, 0.18) 100%);
        }

        .yarn-match-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 1rem;
        }

        .yarn-match-eyebrow {
            font-size: 0.6rem;
            text-transform: uppercase;
            letter-spacing: 0.12rem;
            color: #946800;
            font-weight: 700;
            margin-bottom: 0.3rem;
            display: flex;
            align-items: center;
            gap: 0.4rem;
        }
        body.dark-mode .yarn-match-eyebrow { color: #ffba66; }

        .yarn-match-title {
            font-size: 0.88rem;
            font-weight: 600;
            margin: 0;
        }

        .yarn-match-count {
            font-size: 0.6rem;
            background: var(--surface);
            padding: 0.25rem 0.6rem;
            color: var(--text);
            font-weight: 600;
            border: 1px solid var(--border);
        }
        body.dark-mode .yarn-match-count { background: var(--surface-alt); }

        .yarn-match-list {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .yarn-match-row {
            display: grid;
            
            grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
            grid-template-areas: "design arrow result" "dev dev dev";
            gap: 0.7rem;
            row-gap: 0.45rem;
            align-items: center;
            padding: 0.7rem 0.85rem;
            background: var(--surface);
            border: 1px solid var(--border);
        }
        .yarn-design-color { grid-area: design; }
        .yarn-arrow { grid-area: arrow; }
        .yarn-match-result { grid-area: result; }
        .yarn-deviation { grid-area: dev; justify-self: start; }
        .yarn-color-info .name, .yarn-result-info .name,
        .yarn-color-info .lbl, .yarn-result-info .number { overflow-wrap: anywhere; }
        body.dark-mode .yarn-match-row { background: var(--surface-alt); }

        .yarn-design-color {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.68rem;
            min-width: 0;
        }

        .yarn-color-swatch {
            width: 24px;
            height: 24px;
            border: 1px solid var(--border);
            flex-shrink: 0;
        }

        .yarn-color-info { min-width: 0; }
        .yarn-color-info .name { font-weight: 600; font-family: 'SF Mono', Menlo, monospace; font-size: 0.65rem; }
        .yarn-color-info .lbl { font-size: 0.55rem; color: var(--gray); text-transform: uppercase; letter-spacing: 0.05rem; }

        .yarn-arrow {
            color: var(--gray);
            font-size: 0.85rem;
            font-weight: 300;
        }

        .yarn-match-result {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            min-width: 0;
        }

        .yarn-result-info { min-width: 0; }
        .yarn-result-info .name { font-weight: 600; font-size: 0.7rem; }
        .yarn-result-info .number { font-size: 0.6rem; color: var(--gray); font-family: 'SF Mono', Menlo, monospace; }

        .yarn-deviation {
            font-size: 0.55rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05rem;
            padding: 0.25rem 0.5rem;
            white-space: nowrap;
        }

        .yarn-deviation.perfect { background: rgba(40, 205, 65, 0.15); color: #1a8a2c; }
        .yarn-deviation.good { background: rgba(0, 163, 255, 0.15); color: #006eb8; }
        .yarn-deviation.acceptable { background: rgba(255, 204, 0, 0.2); color: #946800; }
        .yarn-deviation.warning { background: rgba(229, 62, 62, 0.15); color: #c73838; }
        body.dark-mode .yarn-deviation.perfect { background: rgba(40, 205, 65, 0.25); color: #5cd66f; }
        body.dark-mode .yarn-deviation.good { background: rgba(0, 163, 255, 0.25); color: #5cb8ff; }
        body.dark-mode .yarn-deviation.acceptable { background: rgba(255, 204, 0, 0.25); color: #ffd84d; }
        body.dark-mode .yarn-deviation.warning { background: rgba(229, 62, 62, 0.25); color: #f08080; }

        .yarn-match-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 0.9rem;
            margin-top: 0.9rem;
            border-top: 1px solid rgba(196, 113, 0, 0.15);
            font-size: 0.65rem;
            color: var(--gray);
        }

        .yarn-action-link {
            color: #946800;
            font-weight: 600;
            cursor: pointer;
            text-decoration: none;
            font-size: 0.68rem;
        }
        .yarn-action-link:hover { text-decoration: underline; }
        body.dark-mode .yarn-action-link { color: #ffba66; }

        

        
        main#view-bo-login {
            margin: 0;
            padding: 0;
            max-width: none;
            width: 100%;
            min-height: 100vh;
            background: #0a0a0c;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            animation: none;
        }

        #view-bo-login {
            margin: 0;
            padding: 0;
            max-width: none;
            min-height: 100vh;
            background: #0a0a0c;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }

        #view-bo-login::before {
            content: "";
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 30% 30%, rgba(0, 163, 255, 0.15) 0%, transparent 50%),
                        radial-gradient(circle at 70% 70%, rgba(107, 70, 229, 0.12) 0%, transparent 50%);
        }











        












        .pipeline-column {
            background: var(--surface-alt);
            border: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            min-width: 220px;
        }
        body.dark-mode .pipeline-column { background: rgba(255,255,255,0.02); }

        .pipeline-column-header {
            padding: 1rem 1.2rem;
            border-bottom: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .pipeline-column-title {
            font-size: 0.65rem;
            text-transform: uppercase;
            letter-spacing: 0.1rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .pipeline-column-title .dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
        }

        .pipeline-column-count {
            background: #fff;
            color: var(--text);
            font-size: 0.6rem;
            font-weight: 700;
            padding: 0.2rem 0.5rem;
            border: 1px solid var(--border);
        }
        body.dark-mode .pipeline-column-count { background: var(--surface); }

        .pipeline-column-value {
            font-size: 0.65rem;
            color: var(--gray);
            padding: 0.4rem 1.2rem 0.7rem;
            font-family: 'SF Mono', Menlo, monospace;
            font-weight: 600;
            border-bottom: 1px solid var(--border);
            background: rgba(255,255,255,0.4);
        }
        body.dark-mode .pipeline-column-value { background: rgba(0,0,0,0.2); }

        .pipeline-cards {
            padding: 0.7rem;
            display: flex;
            flex-direction: column;
            gap: 0.6rem;
            flex-grow: 1;
            overflow-y: auto;
            max-height: 700px;
        }

        .pipeline-card {
            background: #fff;
            border: 1px solid var(--border);
            padding: 0.85rem 1rem;
            cursor: grab;
            transition: all 0.2s;
            border-left: 3px solid var(--border);
        }
        body.dark-mode .pipeline-card { background: var(--surface); }

        .pipeline-card:hover {
            border-color: var(--text);
            transform: translateY(-1px);
            box-shadow: 0 2px 8px var(--shadow-color);
        }

        .pipeline-card.dragging {
            opacity: 0.5;
            cursor: grabbing;
        }

        .pipeline-card.at-risk {
            border-left-color: #e53e3e;
            background: linear-gradient(90deg, rgba(229, 62, 62, 0.04) 0%, transparent 100%);
        }

        .pipeline-card-id {
            font-family: 'SF Mono', Menlo, monospace;
            font-size: 0.6rem;
            color: var(--gray);
            font-weight: 600;
            margin-bottom: 0.4rem;
        }

        .pipeline-card-customer {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 0.6rem;
        }

        .pipeline-card-avatar {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            font-size: 0.55rem;
            font-weight: 700;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .pipeline-card-name {
            font-size: 0.75rem;
            font-weight: 500;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .pipeline-card-article {
            font-size: 0.78rem;
            font-weight: 600;
            margin-bottom: 0.2rem;
            line-height: 1.3;
        }

        .pipeline-card-meta {
            font-size: 0.65rem;
            color: var(--gray);
            margin-bottom: 0.5rem;
        }

        .pipeline-card-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 0.6rem;
            border-top: 1px solid var(--border);
        }

        .pipeline-card-value {
            font-family: 'SF Mono', Menlo, monospace;
            font-weight: 700;
            font-size: 0.72rem;
        }

        .pipeline-card-time {
            font-size: 0.6rem;
            color: var(--gray);
        }

        .pipeline-card-time.overdue {
            color: #e53e3e;
            font-weight: 600;
        }

        .pipeline-card-tags {
            display: flex;
            gap: 0.3rem;
            margin-bottom: 0.5rem;
            flex-wrap: wrap;
        }

        .pipeline-tag {
            font-size: 0.55rem;
            padding: 0.15rem 0.4rem;
            background: var(--surface-alt);
            color: var(--gray);
            text-transform: uppercase;
            letter-spacing: 0.05rem;
            font-weight: 600;
        }

        .pipeline-tag.priority-high {
            background: rgba(229, 62, 62, 0.1);
            color: #c73838;
        }
        .pipeline-tag.priority-rush {
            background: rgba(229, 62, 62, 0.15);
            color: #c73838;
        }
        .pipeline-tag.repeat {
            background: rgba(40, 205, 65, 0.1);
            color: #1a8a2c;
        }
        .pipeline-tag.vip {
            background: rgba(255, 204, 0, 0.15);
            color: #946800;
        }

























        
        .activity-timeline {
            position: relative;
            padding-left: 2rem;
        }

        .activity-timeline::before {
            content: "";
            position: absolute;
            left: 11px;
            top: 0;
            bottom: 0;
            width: 1px;
            background: var(--border);
        }

        .activity-item {
            position: relative;
            padding-bottom: 1.5rem;
        }
        .activity-item:last-child { padding-bottom: 0; }

        .activity-icon {
            position: absolute;
            left: -2rem;
            top: 0;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: #fff;
            border: 2px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.7rem;
            color: var(--gray);
        }
        body.dark-mode .activity-icon { background: var(--surface); }

        .activity-icon.email { color: var(--accent); border-color: var(--accent); }
        .activity-icon.call { color: #28CD41; border-color: #28CD41; }
        .activity-icon.note { color: #946800; border-color: #FFCC00; }
        .activity-icon.status { color: #6B46E5; border-color: #6B46E5; }
        .activity-icon.file { color: var(--gray); border-color: var(--border); }
        .activity-icon.task { color: #28CD41; border-color: #28CD41; }

        .activity-card {
            background: var(--surface-alt);
            padding: 0.85rem 1rem;
            border: 1px solid var(--border);
        }

        .activity-header {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            gap: 1rem;
            margin-bottom: 0.4rem;
        }

        .activity-title {
            font-size: 0.78rem;
            font-weight: 600;
        }

        .activity-time {
            font-size: 0.62rem;
            color: var(--gray);
            white-space: nowrap;
        }

        .activity-content {
            font-size: 0.75rem;
            color: var(--text);
            line-height: 1.5;
            font-weight: 300;
        }

        .activity-meta {
            font-size: 0.62rem;
            color: var(--gray);
            margin-top: 0.5rem;
            display: flex;
            gap: 0.7rem;
            align-items: center;
        }

        .activity-link {
            color: var(--accent);
            cursor: pointer;
            font-weight: 500;
            text-decoration: none;
        }
        .activity-link:hover { text-decoration: underline; }

        
        .activity-filter-bar {
            display: flex;
            gap: 0.4rem;
            margin-bottom: 1.5rem;
            flex-wrap: wrap;
        }

        .activity-filter-pill {
            padding: 0.45rem 0.85rem;
            font-size: 0.65rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.06rem;
            border: 1px solid var(--border);
            background: #fff;
            cursor: pointer;
            color: var(--gray);
            transition: all 0.2s;
            font-family: 'Inter', sans-serif;
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
        }
        body.dark-mode .activity-filter-pill { background: var(--surface-alt); }
        .activity-filter-pill:hover { color: var(--text); }
        .activity-filter-pill.active {
            background: var(--text);
            color: #fff;
            border-color: var(--text);
        }

        
        .tasks-layout {
            display: grid;
            grid-template-columns: 240px 1fr;
            gap: 1.5rem;
        }

        .tasks-sidebar {
            display: flex;
            flex-direction: column;
            gap: 0.3rem;
        }

        .tasks-filter-item {
            padding: 0.7rem 1rem;
            background: #fff;
            border: 1px solid var(--border);
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.78rem;
            transition: all 0.2s;
        }
        body.dark-mode .tasks-filter-item { background: var(--surface); }
        .tasks-filter-item:hover { border-color: var(--text); }
        .tasks-filter-item.active {
            background: var(--text);
            color: #fff;
            border-color: var(--text);
        }

        .tasks-filter-count {
            background: var(--surface-alt);
            color: var(--gray);
            font-size: 0.6rem;
            padding: 0.15rem 0.5rem;
            font-weight: 700;
        }
        .tasks-filter-item.active .tasks-filter-count {
            background: rgba(255,255,255,0.2);
            color: #fff;
        }

        .tasks-quick-add {
            padding: 0.85rem 1rem;
            background: var(--surface-alt);
            border: 1px dashed var(--border);
            display: flex;
            gap: 0.5rem;
            align-items: center;
            margin-bottom: 1rem;
        }

        .tasks-quick-add input {
            flex-grow: 1;
            border: none;
            background: none;
            font-family: 'Inter', sans-serif;
            font-size: 0.85rem;
            color: var(--text);
            outline: none;
        }
        .tasks-quick-add input::placeholder { color: var(--gray); }

        .tasks-list {
            display: flex;
            flex-direction: column;
            gap: 0.4rem;
        }

        .task-item {
            background: #fff;
            border: 1px solid var(--border);
            padding: 1rem 1.2rem;
            display: grid;
            grid-template-columns: 22px 1fr auto auto;
            gap: 1rem;
            align-items: center;
            transition: all 0.2s;
        }
        body.dark-mode .task-item { background: var(--surface); }

        .task-item.completed {
            opacity: 0.5;
        }

        .task-item.overdue {
            border-left: 3px solid #e53e3e;
        }

        .task-checkbox {
            width: 20px;
            height: 20px;
            border: 1.5px solid var(--border);
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .task-checkbox:hover { border-color: var(--accent); }
        .task-checkbox.checked {
            background: var(--accent);
            border-color: var(--accent);
        }
        .task-checkbox.checked::after {
            content: "✓";
            color: #fff;
            font-size: 0.75rem;
            font-weight: 700;
        }

        .task-content { min-width: 0; }
        .task-title {
            font-size: 0.85rem;
            font-weight: 500;
            margin-bottom: 0.2rem;
        }
        .task-item.completed .task-title {
            text-decoration: line-through;
        }

        .task-meta {
            font-size: 0.65rem;
            color: var(--gray);
            display: flex;
            gap: 0.7rem;
            align-items: center;
        }

        .task-priority {
            font-size: 0.55rem;
            padding: 0.15rem 0.4rem;
            text-transform: uppercase;
            letter-spacing: 0.05rem;
            font-weight: 700;
        }

        .task-priority.high { background: rgba(229, 62, 62, 0.15); color: #c73838; }
        .task-priority.medium { background: rgba(255, 204, 0, 0.15); color: #946800; }
        .task-priority.low { background: rgba(150, 150, 150, 0.15); color: #666; }

        .task-due {
            font-size: 0.7rem;
            font-weight: 500;
            color: var(--gray);
            white-space: nowrap;
        }
        .task-due.overdue { color: #e53e3e; font-weight: 700; }
        .task-due.today { color: var(--accent); font-weight: 700; }

        .task-assignee-mini {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            font-size: 0.55rem;
            font-weight: 700;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        
        .calendar-container {
            background: #fff;
            border: 1px solid var(--border);
            overflow: hidden;
        }
        body.dark-mode .calendar-container { background: var(--surface); }

        .calendar-header {
            padding: 1rem 1.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid var(--border);
        }

        .calendar-title {
            font-size: 1.1rem;
            font-weight: 700;
            letter-spacing: -0.01rem;
        }

        .calendar-nav {
            display: flex;
            gap: 0.3rem;
        }

        .calendar-nav button {
            background: var(--surface-alt);
            border: 1px solid var(--border);
            width: 32px;
            height: 32px;
            cursor: pointer;
            font-family: 'Inter', sans-serif;
            color: var(--text);
        }
        .calendar-nav button:hover { background: var(--text); color: #fff; }

        .calendar-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
        }

        .calendar-day-name {
            padding: 0.7rem;
            text-align: center;
            font-size: 0.6rem;
            text-transform: uppercase;
            letter-spacing: 0.1rem;
            color: var(--gray);
            font-weight: 600;
            background: var(--surface-alt);
            border-bottom: 1px solid var(--border);
        }

        .calendar-day {
            min-height: 100px;
            padding: 0.5rem;
            border-bottom: 1px solid var(--border);
            border-right: 1px solid var(--border);
            position: relative;
            cursor: pointer;
            transition: background 0.15s;
        }
        .calendar-day:nth-child(7n) { border-right: none; }
        .calendar-day:hover { background: var(--surface-alt); }

        .calendar-day.empty {
            background: var(--surface-alt);
            cursor: default;
            opacity: 0.4;
        }

        .calendar-day.today {
            background: rgba(0, 163, 255, 0.05);
        }

        .calendar-day-num {
            font-size: 0.75rem;
            font-weight: 600;
            margin-bottom: 0.4rem;
        }
        .calendar-day.today .calendar-day-num {
            background: var(--accent);
            color: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            font-size: 0.7rem;
        }

        .calendar-event {
            background: var(--accent);
            color: #fff;
            padding: 0.25rem 0.4rem;
            font-size: 0.6rem;
            margin-bottom: 0.2rem;
            font-weight: 500;
            cursor: pointer;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            transition: opacity 0.2s;
        }
        .calendar-event:hover { opacity: 0.85; }

        .calendar-event.delivery { background: #28CD41; }
        .calendar-event.production { background: #6B46E5; }
        .calendar-event.deadline { background: #e53e3e; }
        .calendar-event.appointment { background: var(--accent); } 

        .calendar-event-more {
            font-size: 0.55rem;
            color: var(--gray);
            cursor: pointer;
            font-weight: 600;
        }

        
        .funnel-stages {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            padding-top: 1rem;
        }

        .funnel-stage {
            display: grid;
            grid-template-columns: 140px 1fr 80px 60px;
            gap: 1rem;
            align-items: center;
            padding: 0.6rem 0;
        }

        .funnel-stage-name {
            font-size: 0.78rem;
            font-weight: 500;
        }

        .funnel-stage-bar {
            height: 26px;
            background: var(--surface-alt);
            position: relative;
        }

        .funnel-stage-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--accent) 0%, #008be0 100%);
            transition: width 0.6s;
        }

        .funnel-stage-count {
            font-family: 'SF Mono', Menlo, monospace;
            font-weight: 700;
            text-align: right;
        }

        .funnel-stage-pct {
            font-size: 0.7rem;
            color: var(--gray);
            text-align: right;
            font-weight: 600;
        }

        
        .global-search-results {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: #fff;
            border: 1px solid var(--border);
            margin-top: 0.3rem;
            max-height: 480px;
            overflow-y: auto;
            display: none;
            box-shadow: 0 8px 24px var(--shadow-color);
            z-index: 1000;
        }
        body.dark-mode .global-search-results { background: var(--surface); }

        .global-search-results.show { display: block; }

        .search-section-title {
            padding: 0.7rem 1rem 0.4rem;
            font-size: 0.55rem;
            text-transform: uppercase;
            letter-spacing: 0.12rem;
            color: var(--gray);
            font-weight: 700;
            background: var(--surface-alt);
        }

        .search-result {
            padding: 0.85rem 1rem;
            border-bottom: 1px solid var(--border);
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 0.8rem;
            transition: background 0.15s;
        }
        .search-result:hover { background: var(--surface-alt); }
        .search-result:last-child { border-bottom: none; }

        .search-result-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.65rem;
            font-weight: 700;
            flex-shrink: 0;
        }

        .search-result-icon {
            width: 32px;
            height: 32px;
            background: var(--surface-alt);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--gray);
            flex-shrink: 0;
        }

        .search-result-info { flex-grow: 1; min-width: 0; }
        .search-result-title { font-size: 0.85rem; font-weight: 600; margin-bottom: 0.15rem; }
        .search-result-meta { font-size: 0.65rem; color: var(--gray); }

        .search-result-type {
            font-size: 0.55rem;
            text-transform: uppercase;
            letter-spacing: 0.1rem;
            color: var(--gray);
            font-weight: 700;
            white-space: nowrap;
        }

        
        .view-mode-toggle {
            display: inline-flex;
            border: 1px solid var(--border);
            background: var(--surface-alt);
        }

        .view-mode-btn {
            padding: 0.55rem 1rem;
            background: none;
            border: none;
            font-family: 'Inter', sans-serif;
            font-size: 0.65rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.08rem;
            color: var(--gray);
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
        }
        .view-mode-btn.active {
            background: var(--text);
            color: #fff;
        }

        
        .team-perf-list {
            display: flex;
            flex-direction: column;
            gap: 0.7rem;
        }

        .team-perf-row {
            display: grid;
            grid-template-columns: 36px 1fr auto auto;
            gap: 1rem;
            align-items: center;
            padding: 0.7rem 0;
            border-bottom: 1px solid var(--border);
        }
        .team-perf-row:last-child { border-bottom: none; }

        .team-perf-name { font-size: 0.85rem; font-weight: 600; }
        .team-perf-role { font-size: 0.62rem; color: var(--gray); }

        .team-perf-stats {
            font-size: 0.7rem;
            color: var(--gray);
            text-align: right;
        }
        .team-perf-stats strong { color: var(--text); display: block; font-size: 0.85rem; font-weight: 700; margin-bottom: 0.15rem; }


        body {
            margin: 0;
            font-family: 'Inter', sans-serif;
            background-color: var(--bg);
            color: var(--text);
            -webkit-font-smoothing: antialiased;
            overflow-x: hidden;
        }

        
        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.5rem 4rem;
            background: #fff;
            border-bottom: 1px solid var(--border);
            position: sticky;
            top: 0;
            z-index: 2000;
        }
        
        .logo { font-size: 1.1rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05rem; cursor: pointer; }
        
        .nav-links { display: flex; align-items: center; }

        .nav-links > a, .dropdown-trigger {
            text-decoration: none;
            color: var(--gray);
            margin-left: 2.5rem;
            font-size: 0.85rem;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.05rem;
            transition: all 0.3s ease;
            cursor: pointer;
            padding: 1rem 0;
            border-bottom: 1px solid transparent;
        }
        
        .nav-links a:hover, .dropdown:hover .dropdown-trigger { color: var(--text); }
        .nav-links a.active { color: var(--text); border-bottom: 1px solid var(--text); }

        
        .nav-external-link {
            display: inline-flex !important;
            align-items: center;
            gap: 0.5rem;
            margin-left: 2.5rem !important;
            padding-left: 2.5rem !important;
            position: relative;
            font-size: 0.78rem !important;
            text-transform: none !important;
            letter-spacing: 0 !important;
            font-weight: 500 !important;
            color: var(--gray) !important;
            text-decoration: none;
            transition: color 0.3s ease;
            border-bottom: 1px solid transparent !important;
        }

        .nav-external-link::before {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 1px;
            height: 18px;
            background: var(--border);
        }

        .nav-external-link:hover {
            color: var(--accent) !important;
        }

        .nav-external-link:hover .external-arrow {
            transform: translate(2px, -2px);
        }

        .external-arrow {
            display: inline-block;
            transition: transform 0.3s ease;
            font-size: 0.7rem;
            opacity: 0.7;
        }

        .external-domain-tag {
            font-family: 'SF Mono', Menlo, monospace;
            font-size: 0.7rem;
            color: inherit;
        }
        

        .dropdown { position: relative; }

        .mega-menu {
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            background: #fff;
            border: 1px solid var(--border);
            box-shadow: 0 20px 40px rgba(0,0,0,0.05);
            padding: 3rem;
            width: 850px;
            display: none;
            grid-template-columns: repeat(3, 1fr);
            gap: 3rem;
            z-index: 1100;
        }

        .dropdown:hover .mega-menu { display: grid; }

        .menu-column h4 { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1rem; color: var(--gray); margin-bottom: 1.5rem; border-bottom: 1px solid var(--border); padding-bottom: 0.5rem; }
        .menu-column ul { list-style: none; padding: 0; margin: 0; }
        .menu-column li { margin-bottom: 0.8rem; }
        .menu-column a { text-decoration: none; color: var(--text); font-size: 0.9rem; transition: color 0.2s; cursor: pointer; }
        .menu-column a:hover { color: var(--accent); }

        
        .account-dropdown-menu {
            position: absolute;
            top: 100%;
            right: 0;
            background: #fff;
            border: 1px solid var(--border);
            box-shadow: 0 20px 40px rgba(0,0,0,0.05);
            padding: 1.5rem;
            width: 280px;
            display: none;
            z-index: 1100;
        }

        .dropdown:hover .account-dropdown-menu { display: block; }

        .account-dd-header {
            display: flex;
            align-items: center;
            gap: 0.9rem;
            padding-bottom: 1.2rem;
            margin-bottom: 1rem;
            border-bottom: 1px solid var(--border);
        }

        .account-dd-avatar {
            width: 40px;
            height: 40px;
            background: var(--text);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.85rem;
            font-weight: 800;
            letter-spacing: -0.02rem;
            flex-shrink: 0;
        }

        .account-dd-info { overflow: hidden; }
        .account-dd-name {
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--text);
            margin: 0 0 0.15rem 0;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .account-dd-email {
            font-size: 0.7rem;
            color: var(--gray);
            margin: 0;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .account-dd-list { list-style: none; padding: 0; margin: 0; }
        .account-dd-list li { margin: 0; }

        .account-dd-link {
            display: flex !important;
            align-items: center;
            gap: 0.85rem;
            padding: 0.7rem 0.5rem !important;
            margin: 0 !important;
            font-size: 0.8rem !important;
            font-weight: 500 !important;
            color: var(--gray) !important;
            text-transform: none !important;
            letter-spacing: 0 !important;
            border-bottom: none !important;
            transition: all 0.2s;
            cursor: pointer;
            text-decoration: none;
        }

        .account-dd-link:hover { color: var(--text) !important; background: #f5f5f5; }
        .account-dd-link svg { flex-shrink: 0; opacity: 0.6; }
        .account-dd-link:hover svg { opacity: 1; color: var(--accent); }

        .account-dd-divider {
            height: 1px;
            background: var(--border);
            margin: 0.7rem 0;
        }

        .account-dd-link.danger { color: #e53e3e !important; }
        .account-dd-link.danger:hover { background: #fff5f5; }

        
        .projects-dropdown-menu {
            position: absolute;
            top: 100%;
            left: 0;
            background: #fff;
            border: 1px solid var(--border);
            box-shadow: 0 20px 40px rgba(0,0,0,0.05);
            padding: 1.5rem;
            width: 380px;
            display: none;
            z-index: 1100;
        }

        .dropdown:hover .projects-dropdown-menu { display: block; }

        .projects-dd-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-bottom: 1rem;
            margin-bottom: 1rem;
            border-bottom: 1px solid var(--border);
        }

        .projects-dd-title {
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.1rem;
            color: var(--gray);
            font-weight: 600;
        }

        .projects-dd-count {
            font-size: 0.7rem;
            color: var(--accent);
            font-weight: 600;
        }

        .projects-dd-list {
            list-style: none;
            padding: 0;
            margin: 0 0 1rem 0;
            max-height: 320px;
            overflow-y: auto;
        }

        .projects-dd-item {
            display: flex;
            align-items: center;
            gap: 0.9rem;
            padding: 0.75rem 0.5rem;
            cursor: pointer;
            transition: background 0.2s;
            border-bottom: 1px solid #f5f5f5;
        }
        .projects-dd-item:hover { background: #f9f9f9; }
        .projects-dd-item:last-child { border-bottom: none; }

        .projects-dd-thumb {
            width: 36px;
            height: 36px;
            background: var(--border);
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.55rem;
            color: var(--gray);
            text-transform: uppercase;
            font-weight: 600;
        }

        .projects-dd-info {
            flex-grow: 1;
            min-width: 0;
        }

        .projects-dd-name {
            font-size: 0.78rem;
            font-weight: 500;
            color: var(--text);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-bottom: 0.15rem;
        }

        .projects-dd-meta {
            font-size: 0.65rem;
            color: var(--gray);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .projects-dd-status-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            flex-shrink: 0;
        }

        .projects-dd-footer {
            border-top: 1px solid var(--border);
            padding-top: 1rem;
        }

        .projects-dd-footer-link {
            display: block;
            font-size: 0.7rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05rem;
            color: var(--accent);
            text-align: center;
            cursor: pointer;
            padding: 0.5rem;
            transition: background 0.2s;
        }
        .projects-dd-footer-link:hover { background: rgba(0, 163, 255, 0.05); }

        
        .project-status-tabs {
            display: flex;
            gap: 0;
            border-bottom: 1px solid var(--border);
            margin-bottom: 2rem;
        }

        .project-status-tab {
            padding: 1rem 1.5rem;
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 0.08rem;
            font-weight: 500;
            color: var(--gray);
            cursor: pointer;
            border-bottom: 2px solid transparent;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 0.6rem;
        }
        .project-status-tab:hover { color: var(--text); }
        .project-status-tab.active {
            color: var(--text);
            border-bottom-color: var(--text);
            font-weight: 600;
        }

        .project-status-tab .count-badge {
            background: var(--border);
            color: var(--gray);
            padding: 0.1rem 0.5rem;
            font-size: 0.65rem;
            font-weight: 600;
            min-width: 22px;
            text-align: center;
        }
        .project-status-tab.active .count-badge {
            background: var(--text);
            color: #fff;
        }

        
        .project-list-card {
            display: grid;
            grid-template-columns: 80px 1fr 220px 200px 140px;
            gap: 1.5rem;
            align-items: center;
            padding: 1.5rem;
            background: #fff;
            border: 1px solid var(--border);
            margin-bottom: 0.75rem;
            cursor: pointer;
            transition: all 0.2s;
        }
        .project-list-card:hover {
            border-color: var(--text);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.04);
        }

        .project-card-thumb {
            width: 80px;
            height: 80px;
            background: var(--border);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.55rem;
            color: var(--gray);
            text-transform: uppercase;
            overflow: hidden;
        }
        .project-card-thumb img { width: 100%; height: 100%; object-fit: cover; }

        .project-card-info { min-width: 0; }
        .project-card-id {
            font-size: 0.65rem;
            text-transform: uppercase;
            letter-spacing: 0.1rem;
            color: var(--gray);
            font-weight: 500;
            margin-bottom: 0.25rem;
        }
        .project-card-name {
            font-size: 1rem;
            font-weight: 600;
            margin-bottom: 0.25rem;
        }
        .project-card-meta {
            font-size: 0.72rem;
            color: var(--gray);
            font-weight: 300;
        }

        .project-card-status {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            font-size: 0.75rem;
            font-weight: 500;
        }

        .project-card-status .status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            flex-shrink: 0;
        }

        .project-card-meta-block {
            font-size: 0.72rem;
            color: var(--gray);
            font-weight: 300;
        }
        .project-card-meta-block strong {
            display: block;
            color: var(--text);
            font-size: 0.85rem;
            font-weight: 600;
            margin-bottom: 0.2rem;
        }

        .project-card-action {
            text-align: right;
        }
        .project-action-pill {
            display: inline-block;
            padding: 0.6rem 1rem;
            font-size: 0.65rem;
            text-transform: uppercase;
            letter-spacing: 0.08rem;
            font-weight: 600;
            border: 1px solid var(--border);
            color: var(--text);
            transition: all 0.2s;
        }
        .project-action-pill.cta {
            background: var(--accent);
            color: #fff;
            border-color: var(--accent);
        }
        .project-list-card:hover .project-action-pill { border-color: var(--text); }
        .project-list-card:hover .project-action-pill.cta { background: #008be0; }

        
        .project-detail-layout {
            display: grid;
            grid-template-columns: 1fr 380px;
            gap: 2.5rem;
            align-items: flex-start;
        }

        .project-detail-back {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.1rem;
            color: var(--gray);
            cursor: pointer;
            margin-bottom: 1.5rem;
            font-weight: 500;
            transition: color 0.2s;
        }
        .project-detail-back:hover { color: var(--text); }

        .project-detail-header {
            padding-bottom: 2rem;
            margin-bottom: 2rem;
            border-bottom: 1px solid var(--border);
        }

        .project-detail-id {
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.15rem;
            color: var(--accent);
            font-weight: 600;
            margin-bottom: 0.5rem;
        }

        .project-detail-title {
            font-size: 2.5rem;
            font-weight: 300;
            letter-spacing: -0.05rem;
            margin: 0 0 0.5rem 0;
            line-height: 1.1;
        }

        .project-detail-subtitle {
            font-size: 0.95rem;
            color: var(--gray);
            font-weight: 300;
        }

        
        .project-preview-block {
            background: linear-gradient(180deg, #F8F8F8 0%, #EFEFEF 100%);
            border: 1px solid var(--border);
            padding: 2.5rem;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 400px;
            margin-bottom: 2rem;
            position: relative;
        }

        .project-preview-stage {
            position: relative;
            width: 320px;
            aspect-ratio: 3/4;
            background: #fff;
            box-shadow: 0 10px 30px rgba(0,0,0,0.06);
        }
        .project-preview-stage img { width: 100%; height: 100%; object-fit: cover; }

        .project-preview-design {
            position: absolute;
            top: 28%;
            left: 30%;
            width: 18%;
            height: 18%;
            background: rgba(0, 163, 255, 0.1);
            border: 1px dashed var(--accent);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.5rem;
            color: var(--accent);
            text-transform: uppercase;
            font-weight: 700;
            letter-spacing: 0.05rem;
        }

        
        .project-preview-design.has-image {
            background: transparent;
            border: none;
        }

        .preview-controls {
            position: absolute;
            top: 1rem;
            right: 1rem;
            display: flex;
            gap: 0.4rem;
        }

        .preview-control-btn {
            width: 32px;
            height: 32px;
            background: #fff;
            border: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: var(--gray);
            transition: color 0.2s;
        }
        .preview-control-btn:hover { color: var(--text); }

        
        .spec-block {
            background: #fff;
            border: 1px solid var(--border);
            padding: 2rem;
            margin-bottom: 1.5rem;
        }

        .spec-block-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid var(--border);
        }

        .spec-block-title {
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 0.1rem;
            font-weight: 600;
        }

        .spec-block-edit {
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.05rem;
            color: var(--accent);
            cursor: pointer;
            font-weight: 600;
        }

        .spec-row {
            display: grid;
            grid-template-columns: 180px 1fr;
            padding: 0.7rem 0;
            border-bottom: 1px solid #f5f5f5;
            font-size: 0.85rem;
        }
        .spec-row:last-child { border-bottom: none; }
        .spec-row .lbl { color: var(--gray); font-weight: 500; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05rem; }
        .spec-row .val { font-weight: 500; }

        
        .status-timeline {
            background: #fff;
            border: 1px solid var(--border);
            padding: 1.5rem;
        }

        .status-timeline-title {
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.1rem;
            font-weight: 600;
            color: var(--gray);
            margin-bottom: 1.5rem;
        }

        .timeline-step {
            display: flex;
            gap: 1rem;
            padding-bottom: 1.2rem;
            position: relative;
        }
        .timeline-step:not(:last-child)::after {
            content: "";
            position: absolute;
            left: 11px;
            top: 24px;
            bottom: -2px;
            width: 1px;
            background: var(--border);
        }

        .timeline-dot {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: var(--border);
            border: 4px solid #fff;
            box-shadow: 0 0 0 1px var(--border);
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 0.6rem;
            font-weight: 700;
            position: relative;
            z-index: 2;
        }

        .timeline-step.done .timeline-dot {
            background: #28CD41;
            box-shadow: 0 0 0 1px #28CD41;
        }
        .timeline-step.active .timeline-dot {
            background: var(--accent);
            box-shadow: 0 0 0 1px var(--accent);
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0%, 100% { box-shadow: 0 0 0 1px var(--accent), 0 0 0 6px rgba(0, 163, 255, 0.15); }
            50% { box-shadow: 0 0 0 1px var(--accent), 0 0 0 8px rgba(0, 163, 255, 0); }
        }

        .timeline-content { flex-grow: 1; padding-top: 1px; }
        .timeline-content h4 {
            font-size: 0.85rem;
            font-weight: 500;
            margin: 0 0 0.2rem 0;
            color: var(--text);
        }
        .timeline-step:not(.done):not(.active) .timeline-content h4 { color: var(--gray); }
        .timeline-content p {
            font-size: 0.7rem;
            color: var(--gray);
            margin: 0;
            font-weight: 300;
        }

        
        .offer-card {
            background: linear-gradient(135deg, #00A3FF 0%, #0080CC 100%);
            color: #fff;
            padding: 2rem;
            margin-bottom: 1.5rem;
        }

        .offer-eyebrow {
            font-size: 0.65rem;
            text-transform: uppercase;
            letter-spacing: 0.15rem;
            opacity: 0.85;
            font-weight: 600;
            margin-bottom: 0.5rem;
        }

        .offer-headline {
            font-size: 1.4rem;
            font-weight: 600;
            margin: 0 0 1.5rem 0;
            line-height: 1.3;
        }

        .offer-price {
            display: flex;
            align-items: baseline;
            gap: 0.5rem;
            padding: 1.2rem 0;
            border-top: 1px solid rgba(255,255,255,0.2);
            border-bottom: 1px solid rgba(255,255,255,0.2);
            margin-bottom: 1.5rem;
        }

        .offer-price-value {
            font-size: 2.5rem;
            font-weight: 800;
            letter-spacing: -0.05rem;
            line-height: 1;
        }

        .offer-price-unit {
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.1rem;
            opacity: 0.85;
        }

        .offer-meta {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
            margin-bottom: 1.5rem;
            font-size: 0.75rem;
        }

        .offer-meta-item .lbl {
            opacity: 0.75;
            text-transform: uppercase;
            letter-spacing: 0.05rem;
            font-size: 0.6rem;
            margin-bottom: 0.2rem;
            display: block;
        }
        .offer-meta-item .val { font-weight: 600; }

        .offer-cta {
            display: block;
            width: 100%;
            padding: 1.1rem;
            background: #fff;
            color: var(--text);
            border: none;
            font-family: 'Inter', sans-serif;
            font-size: 0.85rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08rem;
            cursor: pointer;
            transition: all 0.2s;
        }
        .offer-cta:hover { background: var(--text); color: #fff; }
        .offer-cta:disabled,
        .offer-cta:disabled:hover {
            background: rgba(255,255,255,0.68);
            color: #444;
            cursor: not-allowed;
            opacity: 0.85;
        }

        .offer-secondary {
            display: block;
            width: 100%;
            padding: 0.9rem;
            background: transparent;
            color: #fff;
            border: 1px solid rgba(255,255,255,0.4);
            margin-top: 0.6rem;
            font-family: 'Inter', sans-serif;
            font-size: 0.7rem;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.08rem;
            cursor: pointer;
            transition: all 0.2s;
        }
        .offer-secondary:hover { background: rgba(255,255,255,0.1); }

        .offer-note {
            font-size: 0.65rem;
            opacity: 0.8;
            margin-top: 1rem;
            line-height: 1.5;
            text-align: center;
        }

        
        .action-card {
            background: #fff;
            border: 1px solid var(--border);
            padding: 1.5rem;
            margin-bottom: 1rem;
        }

        .action-card.warning { border-left: 3px solid #FFCC00; background: #fffcf2; }
        .action-card.success { border-left: 3px solid #28CD41; background: #f4fcf6; }
        .action-card.info { border-left: 3px solid var(--accent); }

        .action-card h4 {
            font-size: 0.85rem;
            font-weight: 600;
            margin: 0 0 0.5rem 0;
        }

        .action-card p {
            font-size: 0.78rem;
            color: var(--gray);
            margin: 0 0 1rem 0;
            font-weight: 300;
            line-height: 1.5;
        }

        .action-card .btn-link {
            font-size: 0.7rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05rem;
            color: var(--accent);
            cursor: pointer;
        }

        
        .auto-save-indicator {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            font-size: 0.65rem;
            color: var(--gray);
            text-transform: uppercase;
            letter-spacing: 0.08rem;
            font-weight: 500;
            padding: 0.35rem 0.7rem;
            background: #f5f5f5;
            margin-left: 1rem;
        }
        .auto-save-indicator.saving {
            color: var(--accent);
            background: rgba(0, 163, 255, 0.08);
        }
        .auto-save-indicator.saved {
            color: #28CD41;
            background: rgba(40, 205, 65, 0.08);
        }

        .auto-save-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: currentColor;
        }
        .auto-save-indicator.saving .auto-save-dot {
            animation: blink 1s infinite;
        }
        @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.3; }
        }

        
        .confirm-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.4);
            z-index: 9999;
            display: none;
            align-items: center;
            justify-content: center;
        }
        .confirm-overlay.show { display: flex; }

        .confirm-modal {
            background: #fff;
            width: 460px;
            max-width: 90vw;
            padding: 2.5rem;
            box-shadow: 0 20px 60px rgba(0,0,0,0.2);
        }

        .confirm-modal h3 {
            font-size: 1.4rem;
            font-weight: 300;
            margin: 0 0 0.75rem 0;
            letter-spacing: -0.03rem;
        }

        .confirm-modal p {
            font-size: 0.85rem;
            color: var(--gray);
            line-height: 1.6;
            margin: 0 0 1.5rem 0;
            font-weight: 300;
        }

        .confirm-modal .summary {
            background: #f8f8f8;
            padding: 1.2rem;
            margin-bottom: 1.5rem;
        }
        .confirm-modal .summary-row {
            display: flex;
            justify-content: space-between;
            font-size: 0.8rem;
            padding: 0.3rem 0;
        }
        .confirm-modal .summary-row.total {
            border-top: 1px solid var(--border);
            margin-top: 0.5rem;
            padding-top: 0.7rem;
            font-weight: 700;
            font-size: 0.95rem;
        }
        .confirm-modal .summary-row .lbl { color: var(--gray); }

        .confirm-actions {
            display: flex;
            gap: 0.8rem;
        }
        .confirm-actions button {
            flex: 1;
            padding: 1rem;
            font-family: 'Inter', sans-serif;
            font-size: 0.8rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05rem;
            cursor: pointer;
            border: 1px solid var(--border);
            background: #fff;
            color: var(--text);
        }
        .confirm-actions button.primary {
            background: var(--accent);
            color: #fff;
            border-color: var(--accent);
        }
        .confirm-actions button.primary:hover { background: #008be0; }

        
        main { padding: 4rem 4rem 8rem 4rem; max-width: 1400px; margin: 0 auto; animation: fadeIn 0.4s ease-out; }

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

        
        .hero-split {
            display: flex;
            align-items: center;
            gap: 6rem;
            margin-bottom: 12rem;
            min-height: 75vh;
        }

        .hero-text-col {
            flex: 1;
            padding-right: 2rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        
        .pre-headline {
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.2rem;
            color: var(--accent);
            font-weight: 600;
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        
        .pre-headline::before {
            content: "";
            display: block;
            width: 30px;
            height: 1px;
            background-color: var(--accent);
        }

        
        .hero-title { 
            font-size: 5.5rem; 
            letter-spacing: -0.2rem; 
            line-height: 1.05; 
            margin: 0 0 2rem 0; 
            color: var(--text);
        }
        
        .hero-title .font-light { font-weight: 200; display: block; }
        .hero-title .font-bold { font-weight: 800; display: block; }

        
        .hero-subtitle { 
            font-size: 1.15rem; 
            color: var(--gray); 
            font-weight: 300; 
            max-width: 500px; 
            line-height: 1.7; 
            margin-bottom: 1rem; 
        }

        .hero-mission {
            font-size: 1.15rem;
            font-weight: 600;
            color: var(--text);
            margin-top: 0;
            margin-bottom: 3.5rem;
        }
        
        .btn { padding: 1.2rem 2.5rem; font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05rem; cursor: pointer; transition: all 0.3s; text-decoration: none; display: inline-table;}
        body.dark-mode .btn { color: #ffffff !important; }
        .btn-primary { background: var(--accent); color: #fff; border: 1px solid var(--accent); }
        .btn-primary:hover { background: #0088D6; border-color: #0088D6; box-shadow: 0 10px 20px rgba(0, 163, 255, 0.2); }
        body.dark-mode .btn.btn-primary,
        body.dark-mode a.btn-primary,
        body.dark-mode button.btn-primary,
        body.dark-mode .btn-primary {
            background-color: var(--accent) !important;
            color: #ffffff !important;
            border-color: var(--accent) !important;
        }
        body.dark-mode .btn.btn-primary:hover,
        body.dark-mode a.btn-primary:hover,
        body.dark-mode button.btn-primary:hover,
        body.dark-mode .btn-primary:hover {
            background-color: #0088D6 !important;
            border-color: #0088D6 !important;
            color: #ffffff !important;
        }
        .btn-massive { padding: 1.5rem 3.5rem; font-size: 1rem; }

        
        .hero-image-col {
            flex: 1;
            height: 80vh;
            position: relative;
            overflow: hidden;
            background: var(--border);
        }

        .carousel-slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            opacity: 0;
            transition: opacity 1.5s ease-in-out;
        }

        .carousel-slide.active {
            opacity: 1;
        }

        
        .hero-video {
            position: absolute;
            top: 0; left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            background: #111;
        }
        .hero-video.fit-contain { object-fit: contain; }

        
        @media (max-width: 1024px) {
            .hero-image-col { height: auto; aspect-ratio: 16 / 9; }
        }

        
        .process-extreme { position: relative; padding-bottom: 0; }
        .process-extreme h2 { font-size: 1.5rem; font-weight: 500; margin-bottom: 5rem; text-transform: uppercase; letter-spacing: 0.1rem; border-bottom: 1px solid var(--text); padding-bottom: 1rem; display: inline-block;}

        
        .brand-marquee {
            position: relative;
            margin: 6rem -4rem 6rem -4rem;
            padding: 3rem 0;
            background: #fff;
            border-top: 1px solid var(--border);
            border-bottom: 1px solid var(--border);
            overflow: hidden;
        }

        .brand-marquee-eyebrow {
            text-align: center;
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.25rem;
            color: var(--gray);
            font-weight: 500;
            margin-bottom: 2.5rem;
        }

        .brand-marquee-track {
            display: flex;
            gap: 5rem;
            width: max-content;
            animation: marquee-scroll 50s linear infinite;
        }

        .brand-marquee:hover .brand-marquee-track {
            animation-play-state: paused;
        }

        @keyframes marquee-scroll {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }

        .brand-logo {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 180px;
            height: 60px;
            color: var(--text);
            opacity: 0.7;
            transition: opacity 0.3s, transform 0.3s;
            cursor: pointer;
        }

        .brand-logo:hover {
            opacity: 1;
            transform: scale(1.05);
        }

        
        .brand-logo-real { opacity: 1; min-width: 150px; }
        .brand-logo-real img {
            max-height: 44px;
            max-width: 240px;
            width: auto;
            height: auto;
            object-fit: contain;
            display: block;
        }

        
        .brand-marquee::before,
        .brand-marquee::after {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            width: 120px;
            z-index: 2;
            pointer-events: none;
        }
        .brand-marquee::before {
            left: 0;
            background: linear-gradient(to right, #fff 20%, transparent 100%);
        }
        .brand-marquee::after {
            right: 0;
            background: linear-gradient(to left, #fff 20%, transparent 100%);
        }

        
        .brand-logo-stanley { font-family: 'Inter', sans-serif; font-size: 1.1rem; font-weight: 300; letter-spacing: -0.02rem; }
        .brand-logo-stanley span { font-weight: 700; }
        .brand-logo-stanley em { font-style: normal; font-weight: 200; opacity: 0.7; }

        .brand-logo-hakro { font-family: 'Inter', sans-serif; font-size: 1.5rem; font-weight: 800; letter-spacing: 0.1rem; }

        .brand-logo-nimbus { font-family: 'Inter', sans-serif; font-size: 1.4rem; font-weight: 600; letter-spacing: 0.3rem; text-transform: uppercase; }

        .brand-logo-stedman { font-family: 'Inter', sans-serif; font-size: 1.4rem; font-weight: 700; letter-spacing: 0.05rem; font-style: italic; }

        .brand-logo-watc { font-family: 'Inter', sans-serif; font-size: 1.3rem; font-weight: 800; letter-spacing: -0.04rem; }
        .brand-logo-watc small { font-size: 0.55rem; letter-spacing: 0.4rem; font-weight: 500; display: block; margin-top: 0.3rem; opacity: 0.7; text-transform: uppercase; }

        .brand-logo-atlantis { font-family: 'Inter', sans-serif; font-size: 1.15rem; font-weight: 600; letter-spacing: 0.18rem; text-transform: uppercase; text-align: center; line-height: 1.1; }
        .brand-logo-atlantis small { font-size: 0.55rem; letter-spacing: 0.4rem; font-weight: 400; display: block; margin-top: 0.35rem; opacity: 0.6; }

        .brand-logo-gildan { font-family: 'Inter', sans-serif; font-size: 1.6rem; font-weight: 800; letter-spacing: -0.03rem; font-style: italic; }

        .brand-logo-fotl { font-family: 'Inter', sans-serif; font-size: 0.95rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12rem; text-align: center; line-height: 1.2; }
        .brand-logo-fotl em { font-style: normal; font-weight: 800; font-size: 1.1rem; letter-spacing: 0.15rem; display: block; }

        .brand-logo-nextlvl { font-family: 'Inter', sans-serif; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.22rem; text-align: center; line-height: 1.3; }
        .brand-logo-nextlvl em { font-style: normal; font-weight: 800; font-size: 1.25rem; letter-spacing: 0.05rem; display: block; margin-bottom: 0.2rem; }

        
        .about-cta-section {
            margin: 8rem -4rem -8rem -4rem;
            padding: 7rem 4rem;
            background: var(--text);
            color: #fff;
            position: relative;
            overflow: hidden;
        }
        body.dark-mode .about-cta-section { background: var(--surface); }

        .about-cta-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 6rem;
            max-width: 1400px;
            margin: 0 auto;
            align-items: center;
            position: relative;
            z-index: 2;
        }

        .about-cta-eyebrow {
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.25rem;
            color: var(--accent);
            font-weight: 600;
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            gap: 0.8rem;
        }

        .about-cta-eyebrow::before {
            content: "";
            width: 32px;
            height: 1px;
            background: var(--accent);
        }

        .about-cta-headline {
            font-size: 2.8rem;
            font-weight: 200;
            line-height: 1.15;
            letter-spacing: -0.05rem;
            margin: 0 0 2rem 0;
            color: #fff;
        }

        .about-cta-headline strong {
            font-weight: 700;
            display: block;
        }

        .about-cta-text {
            font-size: 1rem;
            line-height: 1.7;
            font-weight: 300;
            color: rgba(255, 255, 255, 0.7);
            margin: 0 0 2.5rem 0;
        }

        .about-cta-link-card {
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.12);
            padding: 2.5rem;
            position: relative;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            display: block;
        }

        .about-cta-link-card:hover {
            background: rgba(255, 255, 255, 0.08);
            border-color: var(--accent);
            transform: translateY(-2px);
        }

        .about-cta-link-card:hover .cta-card-arrow {
            transform: translate(8px, -8px);
            color: var(--accent);
        }

        .cta-card-domain {
            font-family: 'SF Mono', Menlo, monospace;
            font-size: 0.75rem;
            color: var(--accent);
            margin-bottom: 1.5rem;
            letter-spacing: 0.05rem;
        }

        .cta-card-title {
            font-size: 1.6rem;
            font-weight: 300;
            color: #fff;
            margin: 0 0 0.8rem 0;
            line-height: 1.3;
            letter-spacing: -0.03rem;
        }

        .cta-card-subtitle {
            font-size: 0.85rem;
            color: rgba(255, 255, 255, 0.6);
            font-weight: 300;
            line-height: 1.6;
            margin: 0;
        }

        .cta-card-arrow {
            position: absolute;
            top: 2.5rem;
            right: 2.5rem;
            color: rgba(255, 255, 255, 0.5);
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            border: 1px solid rgba(255, 255, 255, 0.15);
        }

        .cta-card-meta {
            display: flex;
            gap: 2rem;
            margin-top: 2rem;
            padding-top: 1.5rem;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
        }

        .cta-card-meta-item {
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.1rem;
            color: rgba(255, 255, 255, 0.5);
            font-weight: 500;
        }
        .cta-card-meta-item strong {
            display: block;
            color: #fff;
            font-size: 1rem;
            font-weight: 600;
            text-transform: none;
            letter-spacing: 0;
            margin-top: 0.3rem;
        }

        
        .about-cta-section::before {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            width: 50%;
            height: 100%;
            background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
                              linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
            background-size: 40px 40px;
            opacity: 0.6;
            pointer-events: none;
        }
        
        
        .thread-container { position: relative; max-width: 1000px; margin: 0 auto; padding: 10rem 0 5rem 0; }

        .thread-line { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--light-gray); transform: translateX(-50%); z-index: 1; }

        .needle-wrapper { position: sticky; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 20px; height: 100px; z-index: 10; display: flex; justify-content: center; }

        .needle-svg { color: var(--accent); filter: drop-shadow(0 4px 8px rgba(0, 163, 255, 0.3)); }

        .step-block { position: relative; width: 100%; margin-bottom: 30vh; display: flex; opacity: 0.2; transform: scale(0.9); filter: grayscale(100%); transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); }
        .step-block.active { opacity: 1; transform: scale(1); filter: grayscale(0%); }

        .step-block:nth-child(odd) { justify-content: flex-start; }
        .step-block:nth-child(even) { justify-content: flex-end; }
        
        .step-content { width: 40%; position: relative; }
        .step-block:nth-child(odd) .step-content { padding-right: 4rem; text-align: right; }
        .step-block:nth-child(even) .step-content { padding-left: 4rem; text-align: left; }

        .step-accent-line { width: 60px; height: 4px; background: var(--accent); margin-bottom: 2rem; transition: width 0.6s ease; }
        .step-block.active .step-accent-line { width: 120px; }
        .step-block:nth-child(odd) .step-accent-line { margin-left: auto; }
        
        .step-bg-number { position: absolute; font-size: 15rem; font-weight: 800; color: rgba(0, 0, 0, 0.03); z-index: -1; line-height: 0.7; top: -2rem; user-select: none; transition: color 0.6s ease; }
        .step-block.active .step-bg-number { color: rgba(0, 163, 255, 0.08); }
        .step-block:nth-child(odd) .step-bg-number { right: 2rem; }
        .step-block:nth-child(even) .step-bg-number { left: 2rem; }

        .step-content h3 { font-size: 3rem; font-weight: 300; margin: 0 0 1rem 0; letter-spacing: -0.1rem; line-height: 1.1; }
        .step-content p { font-size: 1.1rem; color: var(--gray); line-height: 1.6; margin: 0; font-weight: 300; }

        
        .cta-section { text-align: center; padding: 8rem 0; border-top: 1px solid var(--border); margin-top: 5rem; position: relative; }
        .cta-section h2 { font-size: 4rem; font-weight: 300; letter-spacing: -0.15rem; margin: 0 0 1.5rem 0; }
        .cta-section p { font-size: 1.25rem; color: var(--gray); font-weight: 300; margin-bottom: 4rem; }
        body.dark-mode .cta-section a.btn-primary { background-color: var(--accent) !important; color: #ffffff !important; border-color: var(--accent) !important; }
        body.dark-mode .cta-section a.btn-primary:hover { background-color: #0088D6 !important; color: #ffffff !important; border-color: #0088D6 !important; }

        
        .page-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 3rem; }
        .page-header h1 { font-size: 3rem; font-weight: 300; letter-spacing: -0.05rem; margin: 0; }
        
        .filter-bar { display: flex; gap: 2.5rem; margin-bottom: 3rem; border-bottom: 1px solid var(--border); padding-bottom: 1rem; }
        .filter-item { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05rem; color: var(--gray); cursor: pointer; transition: color 0.3s; }
        .filter-item.active { color: var(--text); font-weight: 600; }

        .project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 3rem; }
        .p-card { background: #fff; border: 1px solid var(--border); transition: all 0.4s; display: flex; flex-direction: column; cursor: pointer;}
        .p-card:hover { transform: translateY(-8px); border-color: var(--text); box-shadow: 0 30px 60px rgba(0,0,0,0.04); }
        body.dark-mode .p-card { background: var(--surface) !important; border-color: var(--border) !important; }
        
        .p-preview { aspect-ratio: 1/1; background: #F2F2F2; display: flex; align-items: center; justify-content: center; position: relative; }
        body.dark-mode .p-preview { background: var(--surface-alt) !important; }
        .badge { position: absolute; top: 1.5rem; left: 1.5rem; font-size: 0.6rem; font-weight: 600; text-transform: uppercase; padding: 0.5rem 1rem; background: #fff; letter-spacing: 0.1rem; border: 1px solid var(--border); }
        body.dark-mode .badge { background: var(--surface) !important; color: #ffffff !important; border-color: var(--border) !important; }
        
        .p-content { padding: 2rem; flex-grow: 1; }
        .p-content .id { font-size: 0.7rem; color: var(--gray); letter-spacing: 0.05rem; display: block; margin-bottom: 0.5rem; }
        .p-content h3 { font-size: 1.25rem; font-weight: 400; margin: 0 0 1.5rem 0; }
        
        .p-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 1.5rem; border-top: 1px solid var(--border); }
        .btn-action { text-decoration: none; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05rem; color: var(--text); padding: 0.8rem 1.5rem; border: 1px solid var(--text); transition: all 0.3s; }
        .btn-action:hover { background: var(--text); color: #fff; }
        .btn-reorder { background: transparent; border-color: var(--border); color: var(--gray); }
        .btn-reorder:hover { border-color: var(--accent); color: var(--accent); }

        
        .katalog-layout { display: flex; gap: 4rem; align-items: flex-start; }

        
        .active-filter-bar {
            display: none;
            align-items: center;
            gap: 1rem;
            padding: 1rem 1.5rem;
            background: #fff;
            border: 1px solid var(--border);
            border-left: 3px solid var(--accent);
            margin-bottom: 2rem;
            font-size: 0.8rem;
        }

        .active-filter-bar.show { display: flex; }

        .active-filter-label {
            font-size: 0.65rem;
            text-transform: uppercase;
            letter-spacing: 0.1rem;
            color: var(--gray);
            font-weight: 600;
        }

        .active-filter-value {
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--text);
        }

        .filter-results-count {
            margin-left: auto;
            font-size: 0.75rem;
            color: var(--gray);
        }

        .filter-clear-btn {
            background: transparent;
            border: 1px solid var(--border);
            padding: 0.5rem 1rem;
            font-size: 0.7rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05rem;
            color: var(--gray);
            cursor: pointer;
            font-family: 'Inter', sans-serif;
            transition: all 0.2s;
        }
        .filter-clear-btn:hover { color: var(--text); border-color: var(--text); }

        .empty-results {
            grid-column: 1 / -1;
            text-align: center;
            padding: 4rem 2rem;
            color: var(--gray);
            font-size: 0.9rem;
            font-weight: 300;
            border: 1px dashed var(--border);
        }
        .empty-results h3 {
            font-size: 1.4rem;
            font-weight: 300;
            margin: 0 0 0.5rem 0;
            color: var(--text);
        }
        
        
        .sidebar { width: 250px; flex-shrink: 0; position: sticky; top: 120px; }
        .filter-group { margin-bottom: 2.5rem; }
        .filter-group h4 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1rem; color: var(--text); margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); }
        .filter-list { list-style: none; padding: 0; margin: 0; }
        .filter-list li { margin-bottom: 0.6rem; }
        .filter-label { display: flex; align-items: center; gap: 0.8rem; font-size: 0.9rem; color: var(--gray); cursor: pointer; transition: color 0.2s; }
        .filter-label:hover { color: var(--text); }
        .filter-checkbox { appearance: none; width: 14px; height: 14px; border: 1px solid var(--gray); border-radius: 2px; cursor: pointer; position: relative; }
        .filter-checkbox:checked { background: var(--text); border-color: var(--text); }
        
        
        .product-grid { flex-grow: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 3rem; }
        
        .product-card { cursor: pointer; position: relative; }
        .product-image-container { aspect-ratio: 3/4; background: #F5F5F5; position: relative; overflow: hidden; margin-bottom: 1.5rem; }
        
        .product-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); }
        .product-card:hover .product-img { transform: scale(1.05); }
        
        .hover-btn { position: absolute; bottom: -50px; left: 0; width: 100%; background: var(--text); color: #fff; text-align: center; padding: 1.2rem 0; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05rem; transition: bottom 0.3s ease; }
        .product-card:hover .hover-btn { bottom: 0; }

        .product-meta { display: flex; justify-content: space-between; align-items: flex-start; }
        .product-brand { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.1rem; color: var(--gray); display: block; margin-bottom: 0.4rem; }
        .product-name { font-size: 1.1rem; font-weight: 500; margin: 0; color: var(--text); }
        .product-price { font-size: 1rem; font-weight: 300; color: var(--gray); }
        
        
        .color-swatches { display: flex; gap: 0.4rem; margin-top: 1rem; }
        .swatch { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--border); }

        

        
        .product-sustainability-tags {
            display: flex;
            gap: 0.3rem;
            flex-wrap: wrap;
            margin-top: 0.6rem;
            padding-top: 0.6rem;
            border-top: 1px solid #f0f0f0;
        }

        .sustain-tag {
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
            padding: 0.2rem 0.5rem;
            font-size: 0.55rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.06rem;
            background: #ebf7ee;
            color: #1f7a32;
            border: 1px solid #d4ecdb;
        }

        .sustain-tag.gots { background: #f0eef9; color: #4530a8; border-color: #ddd6f3; }
        .sustain-tag.oekotex { background: #ebf2fb; color: #0a4f9e; border-color: #c8def3; }
        .sustain-tag.recycled { background: #fef4e6; color: #985a08; border-color: #f5dbb5; }
        body.dark-mode .sustain-tag { background: rgba(45, 177, 255, 0.2) !important; color: var(--accent) !important; border-color: var(--border) !important; }
        body.dark-mode .sustain-tag.gots { background: rgba(69, 48, 168, 0.2) !important; color: #b8a8ff !important; }
        body.dark-mode .sustain-tag.oekotex { background: rgba(10, 79, 158, 0.2) !important; color: #4db8ff !important; }
        body.dark-mode .sustain-tag.recycled { background: rgba(255, 153, 0, 0.2) !important; color: #ffb84d !important; }

        
        .sustain-filter-group {
            margin-top: 1.5rem;
            padding-top: 1.5rem;
            border-top: 1px solid var(--border);
        }

        .sustain-filter-title {
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.1rem;
            color: var(--gray);
            font-weight: 600;
            margin-bottom: 0.8rem;
        }

        .sustain-filter-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .sustain-filter-item {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            padding: 0.5rem 0;
            cursor: pointer;
            font-size: 0.78rem;
            color: var(--text);
            transition: color 0.2s;
        }
        .sustain-filter-item:hover { color: var(--accent); }

        .sustain-filter-checkbox {
            width: 14px;
            height: 14px;
            border: 1.5px solid var(--border);
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
            flex-shrink: 0;
        }
        .filter-sustainability .sustain-filter-checkbox {
            background: #000000;
            border: 1px solid var(--gray);
            border-radius: 2px;
        }
        .sustain-filter-item.active .sustain-filter-checkbox {
            background: var(--text);
            border-color: var(--text);
        }
        .filter-sustainability .sustain-filter-item.active .sustain-filter-checkbox {
            background: #ffffff;
            border-color: #000000;
        }
        .sustain-filter-item.active .sustain-filter-checkbox::after {
            content: "✓";
            color: #fff;
            font-size: 0.65rem;
            font-weight: 700;
        }
        .filter-sustainability .sustain-filter-item.active .sustain-filter-checkbox::after {
            color: #000000;
        }
        .sustainability-box {
            appearance: none;
            background-color: #ffffff;  
            border: 1px solid var(--gray);
            border-radius: 2px;
            width: 14px;
            height: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
            flex-shrink: 0;
            cursor: pointer;
        }

        .sustainability-box::before,
        .sustainability-box::after {
            display: none;  
        }

        .sustainability-box:checked {
            background-color: #000000;  
        }

        body.dark-mode .sustainability-box {
            background-color: #000000;  
        }

        body.dark-mode .sustainability-box:checked {
            background-color: #ffffff;  
        }
        .sustain-filter-item.active { color: var(--text); font-weight: 500; }

        .sustain-filter-count {
            margin-left: auto;
            font-size: 0.65rem;
            color: var(--gray);
            font-weight: 400;
        }


        
        .compare-modal-close {
            background: none;
            border: 1px solid var(--border);
            width: 36px;
            height: 36px;
            cursor: pointer;
            font-size: 1rem;
            color: var(--gray);
            font-family: 'Inter', sans-serif;
        }
        .compare-modal-close:hover { color: var(--text); border-color: var(--text); }

        
        .size-chart-modal {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.6);
            z-index: 9999;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 2rem;
        }
        .size-chart-modal.show { display: flex; }

        .size-chart-content {
            background: #fff;
            width: 720px;
            max-width: 92vw;
            max-height: 90vh;
            overflow-y: auto;
            padding: 2.5rem;
        }

        .size-chart-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 2rem;
            padding-bottom: 1.5rem;
            border-bottom: 1px solid var(--border);
        }

        .size-chart-header h3 {
            font-size: 1.4rem;
            font-weight: 300;
            margin: 0 0 0.3rem 0;
            letter-spacing: -0.02rem;
        }

        .size-chart-header p {
            font-size: 0.78rem;
            color: var(--gray);
            margin: 0;
            font-weight: 300;
        }

        .size-chart-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.8rem;
        }

        .size-chart-table th,
        .size-chart-table td {
            padding: 0.9rem 1rem;
            text-align: left;
            border-bottom: 1px solid var(--border);
        }

        .size-chart-table th {
            font-size: 0.65rem;
            text-transform: uppercase;
            letter-spacing: 0.1rem;
            color: var(--gray);
            font-weight: 600;
            background: #fafafa;
        }

        .size-chart-table td:first-child {
            font-weight: 600;
            background: #fafafa;
            font-size: 0.75rem;
        }

        .size-chart-illustration {
            background: #f8f8f8;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
            text-align: center;
        }

        .size-chart-illustration svg {
            max-width: 100%;
            height: 140px;
        }

        .size-chart-note {
            margin-top: 1.5rem;
            padding: 1rem;
            background: #fafafa;
            font-size: 0.72rem;
            color: var(--gray);
            line-height: 1.6;
        }

        .size-chart-note strong { color: var(--text); display: block; margin-bottom: 0.3rem; font-weight: 600; }

        
        .product-size-link {
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
            font-size: 0.65rem;
            text-transform: uppercase;
            letter-spacing: 0.08rem;
            color: var(--gray);
            cursor: pointer;
            padding: 0.4rem 0;
            font-weight: 500;
            transition: color 0.2s;
        }
        .product-size-link:hover { color: var(--accent); }

        
        .frequently-bought-section {
            margin-top: 4rem;
            padding-top: 3rem;
            border-top: 1px solid var(--border);
        }

        .freq-section-eyebrow {
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.15rem;
            color: var(--accent);
            font-weight: 600;
            margin-bottom: 0.8rem;
            display: flex;
            align-items: center;
            gap: 0.7rem;
        }

        .freq-section-eyebrow::before {
            content: "";
            width: 24px;
            height: 1px;
            background: var(--accent);
        }

        .freq-section-title {
            font-size: 1.6rem;
            font-weight: 300;
            margin: 0 0 0.5rem 0;
            letter-spacing: -0.03rem;
        }

        .freq-section-subtitle {
            font-size: 0.85rem;
            color: var(--gray);
            font-weight: 300;
            margin-bottom: 2.5rem;
        }

        .freq-products-row {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.5rem;
        }

        .freq-product-card {
            background: #fff;
            border: 1px solid var(--border);
            padding: 1.2rem;
            display: flex;
            gap: 1rem;
            align-items: center;
            cursor: pointer;
            transition: all 0.2s;
            text-decoration: none;
            color: inherit;
        }

        .freq-product-card:hover {
            border-color: var(--text);
            transform: translateY(-1px);
        }

        .freq-product-thumb {
            width: 75px;
            height: 75px;
            background: #f5f5f5;
            flex-shrink: 0;
            overflow: hidden;
        }
        .freq-product-thumb img { width: 100%; height: 100%; object-fit: cover; }

        .freq-product-info { flex-grow: 1; min-width: 0; }
        .freq-product-brand {
            font-size: 0.6rem;
            text-transform: uppercase;
            letter-spacing: 0.1rem;
            color: var(--gray);
            font-weight: 500;
            margin-bottom: 0.2rem;
        }
        .freq-product-name {
            font-size: 0.85rem;
            font-weight: 600;
            margin-bottom: 0.3rem;
            line-height: 1.3;
        }
        .freq-product-meta {
            font-size: 0.65rem;
            color: var(--gray);
            display: flex;
            align-items: center;
            gap: 0.4rem;
        }
        .freq-product-meta strong { color: var(--accent); font-weight: 600; }

        

        
        .reorder-banner {
            background: linear-gradient(135deg, #28CD41 0%, #1ea832 100%);
            color: #fff;
            padding: 1.5rem 1.8rem;
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            gap: 1.2rem;
        }

        .reorder-banner-icon {
            width: 44px;
            height: 44px;
            background: rgba(255,255,255,0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .reorder-banner-content { flex-grow: 1; }
        .reorder-banner-title {
            font-size: 0.95rem;
            font-weight: 600;
            margin: 0 0 0.2rem 0;
        }
        .reorder-banner-text {
            font-size: 0.78rem;
            margin: 0;
            opacity: 0.9;
            line-height: 1.5;
            font-weight: 300;
        }

        .reorder-banner-cta {
            padding: 0.85rem 1.4rem;
            background: #fff;
            color: #1ea832;
            border: none;
            font-family: 'Inter', sans-serif;
            font-size: 0.7rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08rem;
            cursor: pointer;
            white-space: nowrap;
            transition: transform 0.2s;
        }
        .reorder-banner-cta:hover { transform: scale(1.03); }

        
        .messaging-panel {
            background: #fff;
            border: 1px solid var(--border);
            margin-bottom: 1.5rem;
            display: flex;
            flex-direction: column;
        }

        .messaging-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.2rem 1.5rem;
            border-bottom: 1px solid var(--border);
        }

        .messaging-header-left {
            display: flex;
            align-items: center;
            gap: 0.7rem;
        }

        .messaging-status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #28CD41;
            position: relative;
        }
        .messaging-status-dot::after {
            content: "";
            position: absolute;
            inset: -3px;
            border-radius: 50%;
            background: rgba(40, 205, 65, 0.3);
            animation: pulse-soft 2s infinite;
        }
        @keyframes pulse-soft {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.5); opacity: 0; }
        }

        .messaging-title {
            font-size: 0.85rem;
            font-weight: 600;
        }

        .messaging-subtitle {
            font-size: 0.7rem;
            color: var(--gray);
            margin-top: 0.1rem;
        }

        .messaging-counter {
            background: var(--accent);
            color: #fff;
            font-size: 0.6rem;
            font-weight: 700;
            padding: 0.15rem 0.5rem;
            text-transform: uppercase;
            letter-spacing: 0.05rem;
        }

        .messaging-thread {
            padding: 1.5rem;
            max-height: 380px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .message {
            display: flex;
            gap: 0.8rem;
            max-width: 85%;
        }

        .message.from-team {
            align-self: flex-start;
        }

        .message.from-customer {
            align-self: flex-end;
            flex-direction: row-reverse;
        }

        .message-avatar {
            width: 32px;
            height: 32px;
            background: var(--text);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.65rem;
            font-weight: 700;
            flex-shrink: 0;
        }

        .message.from-customer .message-avatar {
            background: var(--accent);
        }

        .message-bubble {
            background: #f5f5f5;
            padding: 0.85rem 1rem;
            font-size: 0.78rem;
            line-height: 1.5;
            font-weight: 400;
            color: var(--text);
        }

        .message.from-customer .message-bubble {
            background: var(--text);
            color: #fff;
        }

        .message-meta {
            font-size: 0.6rem;
            color: var(--gray);
            margin-top: 0.3rem;
            display: flex;
            gap: 0.5rem;
            align-items: center;
        }

        .message.from-customer .message-meta {
            justify-content: flex-end;
        }

        .messaging-input-area {
            border-top: 1px solid var(--border);
            padding: 1rem 1.5rem;
            display: flex;
            gap: 0.7rem;
            align-items: flex-end;
        }

        .messaging-textarea {
            flex-grow: 1;
            border: 1px solid var(--border);
            padding: 0.7rem 0.9rem;
            font-family: 'Inter', sans-serif;
            font-size: 0.8rem;
            outline: none;
            resize: vertical;
            min-height: 42px;
            max-height: 120px;
            transition: border-color 0.2s;
        }
        .messaging-textarea:focus { border-color: var(--accent); }

        .messaging-send-btn {
            background: var(--accent);
            color: #fff;
            border: none;
            padding: 0.85rem 1.3rem;
            font-family: 'Inter', sans-serif;
            font-size: 0.7rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.08rem;
            cursor: pointer;
            transition: background 0.2s;
            flex-shrink: 0;
        }
        .messaging-send-btn:hover { background: #008be0; }
        .messaging-send-btn:disabled { background: var(--light-gray); cursor: not-allowed; }

        
        .delivery-tracking {
            background: #fff;
            border: 1px solid var(--border);
            padding: 1.8rem;
            margin-bottom: 1.5rem;
        }

        .delivery-tracking-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 1.5rem;
        }

        .delivery-tracking-eyebrow {
            font-size: 0.65rem;
            text-transform: uppercase;
            letter-spacing: 0.15rem;
            color: var(--accent);
            font-weight: 600;
            margin-bottom: 0.3rem;
        }

        .delivery-tracking-title {
            font-size: 1.1rem;
            font-weight: 500;
            margin: 0;
        }

        .delivery-eta {
            text-align: right;
        }

        .delivery-eta-label {
            font-size: 0.6rem;
            text-transform: uppercase;
            letter-spacing: 0.1rem;
            color: var(--gray);
            margin-bottom: 0.2rem;
        }

        .delivery-eta-date {
            font-size: 1rem;
            font-weight: 700;
        }

        .delivery-progress-bar {
            position: relative;
            height: 4px;
            background: var(--border);
            margin: 1.5rem 0;
        }

        .delivery-progress-fill {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            background: linear-gradient(90deg, #28CD41 0%, #00A3FF 100%);
            transition: width 0.6s ease-out;
        }

        .delivery-stages {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 0.5rem;
        }

        .delivery-stage {
            text-align: center;
            position: relative;
        }

        .delivery-stage-icon {
            width: 36px;
            height: 36px;
            margin: 0 auto 0.5rem auto;
            background: var(--border);
            color: var(--gray);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 0.85rem;
            transition: all 0.3s;
        }

        .delivery-stage.done .delivery-stage-icon {
            background: #28CD41;
            color: #fff;
        }

        .delivery-stage.active .delivery-stage-icon {
            background: var(--accent);
            color: #fff;
            box-shadow: 0 0 0 5px rgba(0, 163, 255, 0.15);
        }

        .delivery-stage-name {
            font-size: 0.7rem;
            font-weight: 600;
            color: var(--text);
            margin-bottom: 0.15rem;
        }

        .delivery-stage:not(.done):not(.active) .delivery-stage-name {
            color: var(--gray);
            font-weight: 400;
        }

        .delivery-stage-time {
            font-size: 0.6rem;
            color: var(--gray);
        }

        .delivery-tracking-id {
            margin-top: 1.5rem;
            padding-top: 1.2rem;
            border-top: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.72rem;
        }

        .delivery-tracking-id .lbl { color: var(--gray); text-transform: uppercase; letter-spacing: 0.05rem; font-size: 0.6rem; }
        .delivery-tracking-id .val { font-family: 'SF Mono', Menlo, monospace; font-weight: 600; }

        
        .proof-card {
            background: linear-gradient(135deg, #FFB900 0%, #ff9500 100%);
            color: #fff;
            padding: 1.8rem;
            margin-bottom: 1.5rem;
        }

        .proof-card-eyebrow {
            font-size: 0.65rem;
            text-transform: uppercase;
            letter-spacing: 0.15rem;
            opacity: 0.9;
            font-weight: 600;
            margin-bottom: 0.6rem;
            display: flex;
            align-items: center;
            gap: 0.6rem;
        }

        .proof-card-title {
            font-size: 1.3rem;
            font-weight: 600;
            margin: 0 0 0.6rem 0;
            line-height: 1.3;
        }

        .proof-card-text {
            font-size: 0.82rem;
            line-height: 1.6;
            opacity: 0.92;
            margin: 0 0 1.5rem 0;
            font-weight: 300;
        }

        .proof-preview-box {
            background: rgba(255,255,255,0.15);
            padding: 1rem;
            margin-bottom: 1.5rem;
            display: flex;
            gap: 1rem;
            align-items: center;
        }

        .proof-preview-thumb {
            width: 80px;
            height: 80px;
            background: rgba(255,255,255,0.25);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.55rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.1rem;
            flex-shrink: 0;
        }

        .proof-preview-info { flex-grow: 1; font-size: 0.78rem; }
        .proof-preview-info strong { display: block; margin-bottom: 0.2rem; }
        .proof-preview-info small { font-size: 0.65rem; opacity: 0.8; }

        .proof-actions {
            display: flex;
            gap: 0.7rem;
        }

        .proof-action-btn {
            flex: 1;
            padding: 0.95rem;
            border: none;
            font-family: 'Inter', sans-serif;
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08rem;
            cursor: pointer;
            transition: all 0.2s;
        }

        .proof-action-btn.approve {
            background: #fff;
            color: #c47100;
        }
        .proof-action-btn.approve:hover { background: var(--text); color: #fff; }

        .proof-action-btn.feedback {
            background: transparent;
            color: #fff;
            border: 1px solid rgba(255,255,255,0.5);
        }
        .proof-action-btn.feedback:hover { background: rgba(255,255,255,0.15); }

        
        .notes-block {
            background: #fafafa;
            border: 1px dashed var(--border);
            padding: 1.5rem;
            margin-top: 1.5rem;
        }

        .notes-block-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.8rem;
        }

        .notes-block-title {
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.1rem;
            color: var(--text);
            font-weight: 600;
        }

        .notes-block-helper {
            font-size: 0.62rem;
            color: var(--gray);
        }

        .notes-textarea {
            width: 100%;
            border: 1px solid var(--border);
            background: #fff;
            padding: 0.85rem;
            font-family: 'Inter', sans-serif;
            font-size: 0.8rem;
            line-height: 1.6;
            outline: none;
            resize: vertical;
            min-height: 80px;
            transition: border-color 0.2s;
        }
        .notes-textarea:focus { border-color: var(--accent); }

        .notes-counter {
            font-size: 0.62rem;
            color: var(--gray);
            text-align: right;
            margin-top: 0.4rem;
        }

        
        .team-section {
            background: #fff;
            border: 1px solid var(--border);
            padding: 2rem;
            margin-bottom: 1.5rem;
        }

        .team-section-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 1.5rem;
            padding-bottom: 1.2rem;
            border-bottom: 1px solid var(--border);
        }

        .team-section-title {
            font-size: 1rem;
            font-weight: 600;
            margin: 0 0 0.2rem 0;
        }

        .team-section-subtitle {
            font-size: 0.75rem;
            color: var(--gray);
            font-weight: 300;
        }

        .team-invite-btn {
            padding: 0.7rem 1.2rem;
            background: var(--text);
            color: #fff;
            border: none;
            font-family: 'Inter', sans-serif;
            font-size: 0.65rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.08rem;
            cursor: pointer;
            transition: background 0.2s;
        }
        .team-invite-btn:hover { background: var(--accent); }

        .team-member-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .team-member-row {
            display: grid;
            grid-template-columns: 44px 1fr auto auto;
            gap: 1rem;
            align-items: center;
            padding: 1rem 0;
            border-bottom: 1px solid #f0f0f0;
        }
        .team-member-row:last-child { border-bottom: none; }

        .team-avatar {
            width: 40px;
            height: 40px;
            background: var(--accent);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 0.85rem;
            border-radius: 50%;
        }

        .team-avatar.owner { background: var(--text); }

        .team-info { min-width: 0; }
        .team-name {
            font-size: 0.88rem;
            font-weight: 600;
            margin-bottom: 0.15rem;
        }
        .team-email {
            font-size: 0.7rem;
            color: var(--gray);
        }

        .team-role-badge {
            padding: 0.3rem 0.7rem;
            font-size: 0.6rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05rem;
            background: #f5f5f5;
            color: var(--gray);
        }

        .team-role-badge.owner { background: var(--text); color: #fff; }
        .team-role-badge.admin { background: rgba(0,163,255,0.1); color: var(--accent); }
        .team-role-badge.designer { background: rgba(107,70,229,0.1); color: #6B46E5; }
        .team-role-badge.viewer { background: #f5f5f5; color: var(--gray); }
        .team-role-badge.pending { background: #fff8e1; color: #c47100; }

        .team-actions-btn {
            background: none;
            border: none;
            color: var(--gray);
            cursor: pointer;
            font-size: 1.1rem;
            padding: 0.4rem;
            font-family: 'Inter', sans-serif;
        }
        .team-actions-btn:hover { color: var(--text); }

        
        .team-invite-modal {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.5);
            z-index: 9999;
            display: none;
            align-items: center;
            justify-content: center;
        }
        .team-invite-modal.show { display: flex; }

        .team-invite-content {
            background: #fff;
            width: 480px;
            max-width: 92vw;
            padding: 2.5rem;
        }

        .team-invite-header {
            margin-bottom: 1.5rem;
        }

        .team-invite-header h3 {
            font-size: 1.3rem;
            font-weight: 500;
            margin: 0 0 0.3rem 0;
        }

        .team-invite-header p {
            font-size: 0.78rem;
            color: var(--gray);
            margin: 0;
            font-weight: 300;
            line-height: 1.5;
        }

        .invite-field {
            margin-bottom: 1.3rem;
        }

        .invite-field label {
            display: block;
            font-size: 0.65rem;
            text-transform: uppercase;
            letter-spacing: 0.08rem;
            color: var(--gray);
            font-weight: 600;
            margin-bottom: 0.5rem;
        }

        .invite-field input,
        .invite-field select {
            width: 100%;
            padding: 0.85rem 1rem;
            border: 1px solid var(--border);
            font-family: 'Inter', sans-serif;
            font-size: 0.85rem;
            outline: none;
            background: #fff;
            transition: border-color 0.2s;
        }
        .invite-field input:focus,
        .invite-field select:focus { border-color: var(--accent); }

        .role-options {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 0.5rem;
        }

        .role-option {
            padding: 0.85rem 0.6rem;
            border: 1px solid var(--border);
            background: #fff;
            cursor: pointer;
            text-align: center;
            transition: all 0.2s;
        }
        .role-option:hover { border-color: var(--text); }
        .role-option.selected {
            border-color: var(--accent);
            background: rgba(0,163,255,0.04);
        }

        .role-option-name {
            font-size: 0.78rem;
            font-weight: 600;
            margin-bottom: 0.2rem;
        }

        .role-option-desc {
            font-size: 0.62rem;
            color: var(--gray);
            line-height: 1.4;
        }

        .invite-actions {
            display: flex;
            gap: 0.7rem;
            margin-top: 2rem;
        }

        .invite-actions button {
            flex: 1;
            padding: 0.95rem;
            font-family: 'Inter', sans-serif;
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.08rem;
            cursor: pointer;
            border: 1px solid var(--border);
            background: #fff;
            color: var(--text);
        }

        .invite-actions button.primary {
            background: var(--accent);
            color: #fff;
            border-color: var(--accent);
        }
        .invite-actions button.primary:hover { background: #008be0; }

        
        .invoice-block {
            background: #fff;
            border: 1px solid var(--border);
            padding: 1.5rem;
            margin-bottom: 1.5rem;
        }

        .invoice-block-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.2rem;
            padding-bottom: 0.9rem;
            border-bottom: 1px solid var(--border);
        }

        .invoice-block-title {
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 0.1rem;
            font-weight: 600;
        }

        .invoice-list {
            display: flex;
            flex-direction: column;
            gap: 0.8rem;
        }

        .invoice-item {
            display: grid;
            grid-template-columns: 50px 1fr auto auto;
            gap: 1rem;
            align-items: center;
            padding: 0.9rem 1rem;
            background: #fafafa;
            border: 1px solid #f0f0f0;
            transition: border-color 0.2s;
        }
        .invoice-item:hover { border-color: var(--border); }

        .invoice-icon {
            width: 50px;
            height: 50px;
            background: #e53e3e;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.6rem;
            font-weight: 700;
        }

        .invoice-details { min-width: 0; }
        .invoice-name {
            font-size: 0.85rem;
            font-weight: 600;
            margin-bottom: 0.2rem;
        }
        .invoice-meta {
            font-size: 0.7rem;
            color: var(--gray);
            display: flex;
            gap: 0.7rem;
        }

        .invoice-amount {
            font-size: 0.95rem;
            font-weight: 700;
            font-family: 'SF Mono', Menlo, monospace;
        }

        .invoice-actions-group {
            display: flex;
            gap: 0.4rem;
        }

        .invoice-action-btn {
            padding: 0.55rem 0.8rem;
            background: #fff;
            border: 1px solid var(--border);
            font-family: 'Inter', sans-serif;
            font-size: 0.62rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05rem;
            cursor: pointer;
            transition: all 0.2s;
            color: var(--text);
        }
        .invoice-action-btn:hover { border-color: var(--text); }
        .invoice-action-btn.primary { background: var(--text); color: #fff; border-color: var(--text); }
        .invoice-action-btn.primary:hover { background: var(--accent); border-color: var(--accent); }

        .invoice-empty {
            text-align: center;
            padding: 2rem;
            color: var(--gray);
            font-size: 0.85rem;
        }

        
        .configurator-layout {
            display: grid;
            grid-template-columns: 360px 1fr 220px;
            min-height: 85vh;
            gap: 1.5rem;
        }

        
        .config-sidebar-left {
            background: #fff;
            border: 1px solid var(--border);
            overflow-y: auto;
            display: flex;
            flex-direction: column;
        }
        body.dark-mode .config-sidebar-left { background: var(--surface) !important; color: #fff !important; }

        .config-product-header {
            padding: 1.8rem 2rem;
            border-bottom: 1px solid var(--border);
            background: #fafafa;
        }
        .config-product-header h2 { font-size: 1.15rem; font-weight: 600; margin: 0 0 0.3rem 0; }
        .config-product-header span { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.1rem; color: var(--gray); display: block; }
        .config-product-header .config-product-price { font-size: 0.78rem; color: var(--text); font-weight: 500; margin-top: 0.5rem; }

        .config-step-content {
            padding: 1.8rem 2rem;
            flex-grow: 1;
        }

        .config-step-eyebrow {
            font-size: 0.65rem;
            text-transform: uppercase;
            letter-spacing: 0.15rem;
            color: var(--accent);
            font-weight: 600;
            margin-bottom: 0.5rem;
            display: flex;
            align-items: center;
            gap: 0.6rem;
        }
        .config-step-eyebrow::before {
            content: "";
            width: 16px;
            height: 1px;
            background: var(--accent);
        }

        .config-step-title { font-size: 1.4rem; font-weight: 300; letter-spacing: -0.03rem; margin: 0 0 0.4rem 0; line-height: 1.2; }
        .config-step-desc { font-size: 0.78rem; color: var(--gray); font-weight: 300; line-height: 1.6; margin: 0 0 2rem 0; }

        .config-group { margin-bottom: 1.8rem; }
        .config-group h4 { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.1rem; color: var(--gray); margin: 0 0 0.9rem 0; font-weight: 600; }
        body.dark-mode .config-group:is([style*="background: #fafafa"]:where(:not([data-stil-nur])), [data-stil*="background: #fafafa"]) { background: var(--surface) !important; color: #fff !important; }
        body.dark-mode .config-group:is([style*="background: #fafafa"]:where(:not([data-stil-nur])), [data-stil*="background: #fafafa"]) h4,
        body.dark-mode .config-group:is([style*="background: #fafafa"]:where(:not([data-stil-nur])), [data-stil*="background: #fafafa"]) p { color: #fff !important; }
        body.dark-mode .config-group:is([style*="background: #fff8e1"]:where(:not([data-stil-nur])), [data-stil*="background: #fff8e1"]) { background: var(--surface) !important; border-left-color: var(--accent) !important; }
        body.dark-mode .config-group:is([style*="background: #fff8e1"]:where(:not([data-stil-nur])), [data-stil*="background: #fff8e1"]) h4 { color: #fff !important; }
        body.dark-mode .config-group:is([style*="background: #fff8e1"]:where(:not([data-stil-nur])), [data-stil*="background: #fff8e1"]) p { color: #fff !important; }

        select.config-select, input.config-input {
            width: 100%;
            padding: 0.95rem 1rem;
            border: 1px solid var(--border);
            font-family: 'Inter', sans-serif;
            font-size: 0.85rem;
            appearance: none;
            background: #fff;
            cursor: pointer;
            outline: none;
            color: var(--text);
            transition: border-color 0.2s;
        }
        body.dark-mode select.config-select,
        body.dark-mode input.config-input { background: var(--surface) !important; color: #fff !important; border-color: var(--border) !important; }
        select.config-select { background: #fff url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNiIgdmlld0JveD0iMCAwIDEwIDYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEgMUw1IDVMOSAxIiBzdHJva2U9IiM4ODg4ODgiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=') no-repeat right 1rem center; }
        body.dark-mode select.config-select { background: var(--surface) url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNiIgdmlld0JveD0iMCAwIDEwIDYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEgMUw1IDVMOSAxIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=') no-repeat right 1rem center !important; }
        select.config-select:focus, input.config-input:focus { border-color: var(--accent); }

        
        .color-swatch-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 0.7rem;
        }

        .color-swatch-item {
            aspect-ratio: 1/1;
            border: 1px solid var(--border);
            position: relative;
            cursor: pointer;
            transition: all 0.2s;
        }

        .color-swatch-item:hover { transform: scale(1.05); border-color: var(--text); }

        .color-swatch-item.selected {
            border: 2px solid var(--accent);
            box-shadow: 0 0 0 1px #fff inset;
        }

        .color-swatch-item.selected::after {
            content: "✓";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #fff;
            font-size: 0.85rem;
            font-weight: 800;
            text-shadow: 0 0 3px rgba(0,0,0,0.5);
        }

        .color-name-display {
            font-size: 0.78rem;
            color: var(--text);
            margin-top: 1rem;
            padding: 0.7rem 0.9rem;
            background: #f5f5f5;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        body.dark-mode .color-name-display { background: var(--surface) !important; color: #fff !important; }
        .color-name-display strong { font-weight: 600; }
        .color-name-display .hex { color: var(--gray); font-family: 'SF Mono', Menlo, monospace; font-size: 0.7rem; }
        body.dark-mode .color-name-display .hex { color: rgba(255,255,255,0.7) !important; }

        
        .config-upload-box {
            border: 1.5px dashed var(--light-gray);
            padding: 2.5rem 1rem;
            text-align: center;
            cursor: pointer;
            background: #fafafa;
            transition: 0.2s;
        }
        .config-upload-box:hover, .config-upload-box.dragover {
            border-color: var(--accent);
            background: rgba(0, 163, 255, 0.04);
        }

        .config-upload-box svg { color: var(--gray); margin-bottom: 0.8rem; }
        .config-upload-box p { font-size: 0.85rem; margin: 0.4rem 0 0.2rem 0; font-weight: 500; }
        .config-upload-box span { font-size: 0.65rem; color: var(--gray); text-transform: uppercase; letter-spacing: 0.05rem; }
        body.dark-mode .config-upload-box { background: var(--surface) !important; border-color: rgba(255,255,255,0.2) !important; }
        body.dark-mode .config-upload-box:hover, body.dark-mode .config-upload-box.dragover { background: rgba(45, 177, 255, 0.08) !important; border-color: var(--accent) !important; }
        body.dark-mode .config-upload-box svg { color: rgba(255,255,255,0.5) !important; }
        body.dark-mode .config-upload-box p { color: #fff !important; }
        body.dark-mode .config-upload-box span { color: rgba(255,255,255,0.6) !important; }

        
        .preflight-results {
            margin-top: 1.5rem;
            border: 1px solid var(--border);
            background: #fff;
        }

        .preflight-file-info {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 1rem 1.2rem;
            background: #f9f9f9;
            border-bottom: 1px solid var(--border);
        }

        .preflight-file-icon {
            width: 36px;
            height: 36px;
            background: var(--text);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.6rem;
            font-weight: 700;
            letter-spacing: 0.05rem;
            flex-shrink: 0;
        }

        .preflight-file-meta { flex-grow: 1; overflow: hidden; }
        .preflight-file-name { font-size: 0.78rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .preflight-file-size { font-size: 0.65rem; color: var(--gray); margin-top: 0.15rem; }

        .preflight-remove {
            cursor: pointer;
            color: var(--gray);
            transition: color 0.2s;
            flex-shrink: 0;
        }
        .preflight-remove:hover { color: #e53e3e; }

        .preflight-checks { padding: 0.5rem 1.2rem; }

        .preflight-check {
            display: flex;
            align-items: center;
            gap: 0.8rem;
            padding: 0.65rem 0;
            border-bottom: 1px solid #f5f5f5;
            font-size: 0.75rem;
        }
        .preflight-check:last-child { border-bottom: none; }

        .preflight-check-icon {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 0.6rem;
            flex-shrink: 0;
            font-weight: 700;
        }
        .preflight-check.ok .preflight-check-icon { background: #28CD41; }
        .preflight-check.warning .preflight-check-icon { background: #FFCC00; color: #111; }
        .preflight-check.error .preflight-check-icon { background: #e53e3e; }

        .preflight-check-text { flex-grow: 1; color: var(--text); }
        .preflight-check-detail { font-size: 0.68rem; color: var(--gray); }

        .preflight-color-palette {
            display: flex;
            gap: 0.3rem;
            flex-wrap: wrap;
            padding: 0.8rem 1.2rem;
            background: #fafafa;
            border-top: 1px solid var(--border);
        }

        .preflight-color-chip {
            width: 18px;
            height: 18px;
            border: 1px solid rgba(0,0,0,0.1);
            cursor: help;
        }

        
        .placement-zone-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.5rem;
            margin-bottom: 1.5rem;
        }

        .placement-zone-btn {
            padding: 0.85rem 0.6rem;
            border: 1px solid var(--border);
            background: #fff;
            font-size: 0.7rem;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.05rem;
            color: var(--gray);
            cursor: pointer;
            transition: all 0.2s;
            font-family: 'Inter', sans-serif;
            text-align: center;
        }
        .placement-zone-btn:hover { color: var(--text); border-color: var(--text); }
        .placement-zone-btn.active {
            background: var(--text);
            color: #fff;
            border-color: var(--text);
        }
        body.dark-mode .placement-zone-btn { background: var(--surface) !important; color: rgba(255,255,255,0.6) !important; border-color: var(--border) !important; }
        body.dark-mode .placement-zone-btn:hover { color: #fff !important; border-color: var(--accent) !important; }
        body.dark-mode .placement-zone-btn.active { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; }

        .placement-size-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.5rem;
        }

        .placement-size-field {
            position: relative;
        }

        .placement-size-field input {
            padding-right: 2.2rem;
        }

        .placement-size-field::after {
            content: "mm";
            position: absolute;
            right: 0.9rem;
            top: 50%;
            transform: translateY(-50%);
            font-size: 0.7rem;
            color: var(--gray);
            pointer-events: none;
        }

        .placement-info-bar {
            margin-top: 1rem;
            padding: 0.8rem 1rem;
            background: #f5f5f5;
            font-size: 0.7rem;
            color: var(--text);
            display: flex;
            justify-content: space-between;
        }
        .placement-info-bar .lbl { color: var(--gray); }
        .placement-info-bar .val { font-weight: 600; }
        body.dark-mode .placement-info-bar { background: var(--surface) !important; color: #fff !important; }
        body.dark-mode .placement-info-bar .lbl { color: rgba(255,255,255,0.6) !important; }
        body.dark-mode .placement-info-bar .val { color: #fff !important; }

        
        .technique-list { display: flex; flex-direction: column; gap: 0.6rem; }

        .technique-card {
            padding: 1rem 1.2rem;
            border: 1px solid var(--border);
            background: #fff;
            cursor: pointer;
            transition: all 0.2s;
            position: relative;
        }
        .technique-card:hover { border-color: var(--text); }
        .technique-card.selected { border-color: var(--accent); background: rgba(0, 163, 255, 0.02); }
        body.dark-mode .technique-card.selected { background: var(--accent); color: #fff; }
        .technique-card.disabled { opacity: 0.4; cursor: not-allowed; }

        .technique-card-recommended {
            position: absolute;
            top: -8px;
            right: 12px;
            background: var(--accent);
            color: #fff;
            font-size: 0.55rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08rem;
            padding: 0.2rem 0.6rem;
        }

        .technique-card-name { font-size: 0.85rem; font-weight: 600; margin-bottom: 0.25rem; }
        .technique-card-desc { font-size: 0.7rem; color: var(--gray); line-height: 1.5; margin-bottom: 0.5rem; }
        .technique-card-price { font-size: 0.7rem; color: var(--accent); font-weight: 600; }
        .technique-card-warning { font-size: 0.65rem; color: #c47100; margin-top: 0.4rem; }

        
        .size-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 0.5rem;
            margin-bottom: 1.2rem;
        }

        .size-input-cell {
            text-align: center;
        }

        .size-input-cell label {
            display: block;
            font-size: 0.65rem;
            text-transform: uppercase;
            letter-spacing: 0.1rem;
            color: var(--gray);
            margin-bottom: 0.4rem;
            font-weight: 600;
        }
        body.dark-mode .size-input-cell label { color: rgba(255,255,255,0.6) !important; }

        .size-input-cell input {
            width: 100%;
            padding: 0.7rem 0;
            border: 1px solid var(--border);
            text-align: center;
            font-family: 'Inter', sans-serif;
            font-size: 0.9rem;
            font-weight: 500;
            outline: none;
            background: #fff;
            color: var(--text);
        }
        .size-input-cell input:focus { border-color: var(--accent); }
        body.dark-mode .size-input-cell input { background: var(--surface) !important; color: #fff !important; border-color: var(--border) !important; }
        body.dark-mode .size-input-cell input:focus { border-color: var(--accent) !important; }

        .price-summary {
            border-top: 1px solid var(--border);
            padding-top: 1.2rem;
            margin-top: 1.2rem;
        }

        .price-row {
            display: flex;
            justify-content: space-between;
            font-size: 0.78rem;
            padding: 0.4rem 0;
        }
        .price-row .lbl { color: var(--gray); }
        .price-row .val { font-weight: 500; }
        .price-row.total {
            border-top: 1px solid var(--border);
            margin-top: 0.5rem;
            padding-top: 0.8rem;
            font-size: 0.95rem;
            font-weight: 700;
        }
        .price-row.total .val { color: var(--accent); font-weight: 800; }

        
        .summary-row {
            display: flex;
            justify-content: space-between;
            padding: 0.7rem 0;
            border-bottom: 1px solid var(--border);
            font-size: 0.78rem;
        }
        .summary-row:last-child { border-bottom: none; }
        .summary-row .lbl { color: var(--gray); }
        .summary-row .val { font-weight: 500; text-align: right; max-width: 60%; }

        
        .config-canvas-area {
            background: linear-gradient(180deg, #F8F8F8 0%, #EFEFEF 100%);
            border: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            position: relative;
            overflow: hidden;
        }

        
        .canvas-toolbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.9rem 1.5rem;
            background: #fff;
            border-bottom: 1px solid var(--border);
        }

        .canvas-tabs {
            display: flex;
            gap: 0.3rem;
        }

        .canvas-tab {
            padding: 0.45rem 0.9rem;
            font-size: 0.65rem;
            text-transform: uppercase;
            letter-spacing: 0.1rem;
            color: var(--gray);
            cursor: pointer;
            border: 1px solid transparent;
            font-weight: 600;
        }
        .canvas-tab.active {
            color: var(--text);
            border-color: var(--text);
        }

        .canvas-info-pill {
            font-size: 0.65rem;
            text-transform: uppercase;
            letter-spacing: 0.08rem;
            color: var(--gray);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        .canvas-info-pill .dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--accent);
        }

        
        .live-preview-wrap {
            flex-grow: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            padding: 2rem;
            overflow: auto;
        }

        .product-stage {
            position: relative;
            width: 480px;
            max-width: 100%;
            aspect-ratio: 3/4;
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 10px 40px rgba(0,0,0,0.06);
            user-select: none;
        }

        .product-stage img.product-base {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        
        .print-zone-overlay {
            position: absolute;
            border: 1px dashed rgba(0, 163, 255, 0.6);
            pointer-events: none;
            display: none;
        }

        .print-zone-overlay.show { display: block; }

        .print-zone-overlay::before {
            content: attr(data-zone-name);
            position: absolute;
            top: -22px;
            left: 0;
            font-size: 0.55rem;
            text-transform: uppercase;
            letter-spacing: 0.1rem;
            color: var(--accent);
            font-weight: 700;
            background: rgba(255,255,255,0.95);
            padding: 0.15rem 0.4rem;
        }
        body.dark-mode .print-zone-overlay::before { background: var(--surface) !important; color: #fff !important; }

        
        .design-layer {
            position: absolute;
            cursor: grab;
            display: flex;
            align-items: center;
            justify-content: center;
            user-select: none;
        }
        .design-layer:active { cursor: grabbing; }
        .design-layer.placed { outline: 1px solid rgba(0, 163, 255, 0.8); outline-offset: 4px; }

        .design-layer img, .design-layer svg {
            width: 100%;
            height: 100%;
            object-fit: contain;
            pointer-events: none;
        }

        
        .resize-handle {
            position: absolute;
            width: 10px;
            height: 10px;
            background: #fff;
            border: 1.5px solid var(--accent);
            cursor: nwse-resize;
        }
        .resize-handle.tl { top: -6px; left: -6px; cursor: nwse-resize; }
        .resize-handle.tr { top: -6px; right: -6px; cursor: nesw-resize; }
        .resize-handle.bl { bottom: -6px; left: -6px; cursor: nesw-resize; }
        .resize-handle.br { bottom: -6px; right: -6px; cursor: nwse-resize; }

        
        .design-measurements {
            position: absolute;
            top: -30px;
            right: 0;
            background: var(--text);
            color: #fff;
            font-size: 0.55rem;
            padding: 0.25rem 0.5rem;
            text-transform: uppercase;
            letter-spacing: 0.08rem;
            font-weight: 600;
            white-space: nowrap;
        }

        
        .empty-design-prompt {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            color: var(--gray);
            pointer-events: none;
        }
        .empty-design-prompt p {
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.15rem;
            margin: 0.5rem 0 0 0;
            font-weight: 500;
        }

        
        .config-sidebar-right {
            display: flex;
            flex-direction: column;
            background: #fff;
            border: 1px solid var(--border);
            padding: 1.5rem 1rem;
        }
        body.dark-mode .config-sidebar-right { background: var(--surface) !important; color: #fff !important; }

        .step-progress-list {
            list-style: none;
            padding: 0;
            margin: 0 0 2rem 0;
            flex-grow: 1;
        }

        .step-progress-item {
            display: flex;
            align-items: flex-start;
            gap: 0.7rem;
            padding: 0.7rem 0.5rem;
            font-size: 0.7rem;
            font-weight: 500;
            color: var(--gray);
            cursor: pointer;
            transition: color 0.2s;
            border-left: 2px solid transparent;
            margin-left: -1rem;
            padding-left: 1rem;
        }

        .step-progress-item.active { color: var(--text); border-left-color: var(--accent); font-weight: 600; }
        body.dark-mode .step-progress-item.active { color: #fff !important; }
        .step-progress-item.done { color: var(--text); }
        body.dark-mode .step-progress-item.done { color: #fff !important; }
        .step-progress-item.done .step-num { background: var(--accent); color: #fff; border-color: var(--accent); }
        .step-progress-item.active .step-num { background: var(--text); color: #fff; border-color: var(--text); }
        body.dark-mode .step-progress-item.active .step-num { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; }

        .step-num {
            width: 20px;
            height: 20px;
            border: 1px solid var(--light-gray);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.6rem;
            font-weight: 700;
            flex-shrink: 0;
        }
        body.dark-mode .step-num { border-color: rgba(255,255,255,0.3) !important; color: #fff !important; }

        .step-progress-name { padding-top: 2px; }

        .step-controls {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.7rem;
            border-top: 1px solid var(--border);
            padding-top: 1.5rem;
        }

        .next-circle-btn {
            width: 64px;
            height: 64px;
            border-radius: 50%;
            background: var(--text);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.3rem;
            cursor: pointer;
            transition: 0.3s;
            border: none;
        }
        .next-circle-btn:hover { background: var(--accent); transform: scale(1.05); }
        .next-circle-btn:disabled { background: var(--light-gray); cursor: not-allowed; transform: scale(1); }
        body.dark-mode .next-circle-btn { background: var(--accent) !important; color: #fff !important; }
        body.dark-mode .next-circle-btn:hover { background: #0088d9 !important; }
        body.dark-mode .next-circle-btn:disabled { background: rgba(255,255,255,0.2) !important; cursor: not-allowed !important; }

        .back-btn {
            font-size: 0.65rem;
            text-transform: uppercase;
            letter-spacing: 0.1rem;
            color: var(--gray);
            cursor: pointer;
            background: none;
            border: none;
            padding: 0.4rem;
            font-family: 'Inter', sans-serif;
            font-weight: 500;
        }
        .back-btn:hover { color: var(--text); }
        body.dark-mode .back-btn { color: rgba(255,255,255,0.7) !important; }
        body.dark-mode .back-btn:hover { color: #fff !important; }

        

        
        .canvas-view-toggle {
            display: flex;
            gap: 0.4rem;
            padding: 0 1.5rem 0.8rem 1.5rem;
            background: #fff;
            border-bottom: 1px solid var(--border);
        }
        body.dark-mode .canvas-view-toggle { background: var(--surface) !important; border-bottom-color: var(--border) !important; }

        .view-toggle-btn {
            padding: 0.5rem 0.9rem;
            font-size: 0.65rem;
            text-transform: uppercase;
            letter-spacing: 0.08rem;
            color: var(--gray);
            border: 1px solid var(--border);
            background: #fff;
            cursor: pointer;
            font-family: 'Inter', sans-serif;
            font-weight: 500;
            transition: all 0.2s;
        }
        .view-toggle-btn:hover { color: var(--text); border-color: var(--text); }
        .view-toggle-btn.active {
            background: var(--text);
            color: #fff;
            border-color: var(--text);
        }
        body.dark-mode .view-toggle-btn { background: var(--surface) !important; color: rgba(255,255,255,0.6) !important; border-color: var(--border) !important; }
        body.dark-mode .view-toggle-btn:hover { color: #fff !important; border-color: var(--accent) !important; }
        body.dark-mode .view-toggle-btn.active { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; }

        
        .design-transform-bar {
            display: flex;
            align-items: center;
            gap: 1.2rem;
            padding: 0.9rem 1.5rem;
            background: #fff;
            border-top: 1px solid var(--border);
        }
        body.dark-mode .design-transform-bar { background: var(--surface) !important; color: #fff !important; }

        .transform-control {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            font-size: 0.65rem;
            text-transform: uppercase;
            letter-spacing: 0.08rem;
            color: var(--gray);
            font-weight: 500;
        }

        .transform-control input[type="range"] {
            width: 110px;
            height: 4px;
            -webkit-appearance: none;
            appearance: none;
            background: var(--border);
            outline: none;
            cursor: pointer;
        }
        .transform-control input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 14px;
            height: 14px;
            background: var(--text);
            cursor: grab;
            border-radius: 50%;
        }

        .transform-value {
            font-size: 0.7rem;
            color: var(--text);
            font-family: 'SF Mono', Menlo, monospace;
            min-width: 32px;
            font-weight: 600;
        }

        .flip-btn {
            width: 32px;
            height: 32px;
            border: 1px solid var(--border);
            background: #fff;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--gray);
            font-family: 'Inter', sans-serif;
            transition: all 0.2s;
        }
        .flip-btn:hover { border-color: var(--text); color: var(--text); }
        .flip-btn.active {
            background: var(--accent);
            border-color: var(--accent);
            color: #fff;
        }

        .transform-divider {
            width: 1px;
            height: 22px;
            background: var(--border);
        }

        
        .zones-manager {
            margin-top: 1rem;
            padding-top: 1rem;
            border-top: 1px solid var(--border);
        }

        .zones-list {
            display: flex;
            flex-direction: column;
            gap: 0.4rem;
            margin-bottom: 0.8rem;
        }

        .zone-tab {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            padding: 0.7rem 0.9rem;
            border: 1px solid var(--border);
            cursor: pointer;
            transition: all 0.2s;
            background: #fff;
        }
        .zone-tab:hover { border-color: var(--text); }
        .zone-tab.active {
            border-color: var(--accent);
            background: rgba(0, 163, 255, 0.04);
        }

        .zone-tab-num {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: var(--text);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.65rem;
            font-weight: 700;
            flex-shrink: 0;
        }
        .zone-tab.active .zone-tab-num { background: var(--accent); }

        .zone-tab-info { flex-grow: 1; }
        .zone-tab-name { font-size: 0.78rem; font-weight: 500; }
        .zone-tab-meta { font-size: 0.62rem; color: var(--gray); margin-top: 0.1rem; }

        .zone-tab-remove {
            width: 18px;
            height: 18px;
            border: none;
            background: transparent;
            color: var(--gray);
            cursor: pointer;
            font-size: 0.85rem;
            font-family: 'Inter', sans-serif;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .zone-tab-remove:hover { color: #e53e3e; }

        .add-zone-btn {
            width: 100%;
            padding: 0.7rem;
            border: 1px dashed var(--border);
            background: #fafafa;
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.08rem;
            color: var(--gray);
            cursor: pointer;
            font-family: 'Inter', sans-serif;
            font-weight: 500;
            transition: all 0.2s;
        }
        .add-zone-btn:hover { color: var(--accent); border-color: var(--accent); background: rgba(0, 163, 255, 0.04); }
        .add-zone-btn:disabled { opacity: 0.4; cursor: not-allowed; }

        
        .colormatch-tool {
            margin-top: 1.2rem;
            padding: 1rem;
            background: #fafafa;
            border-left: 2px solid var(--accent);
        }

        .colormatch-tool h4 {
            font-size: 0.65rem;
            text-transform: uppercase;
            letter-spacing: 0.1rem;
            color: var(--gray);
            margin-bottom: 0.6rem;
            font-weight: 600;
        }

        .colormatch-row {
            display: flex;
            gap: 0.5rem;
            margin-bottom: 0.6rem;
        }

        .colormatch-input {
            flex-grow: 1;
            padding: 0.6rem 0.8rem;
            border: 1px solid var(--border);
            font-family: 'SF Mono', Menlo, monospace;
            font-size: 0.78rem;
            text-transform: uppercase;
            outline: none;
            transition: border-color 0.2s;
        }
        .colormatch-input:focus { border-color: var(--accent); }

        .colormatch-btn {
            padding: 0.6rem 1rem;
            background: var(--text);
            color: #fff;
            border: none;
            font-size: 0.65rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.08rem;
            cursor: pointer;
            font-family: 'Inter', sans-serif;
            transition: background 0.2s;
        }
        .colormatch-btn:hover { background: var(--accent); }
        body.dark-mode .colormatch-btn { background: var(--accent) !important; color: #fff !important; }
        body.dark-mode .colormatch-btn:hover { background: #0088d9 !important; }

        .colormatch-result {
            display: none;
            font-size: 0.7rem;
            color: var(--text);
            padding-top: 0.5rem;
        }
        .colormatch-result.show { display: block; }

        .colormatch-comparison {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            margin-top: 0.4rem;
        }

        .colormatch-swatch-pair {
            display: flex;
            align-items: center;
            gap: 0.3rem;
            font-size: 0.62rem;
            color: var(--gray);
        }
        .colormatch-mini-swatch {
            width: 14px;
            height: 14px;
            border: 1px solid #ddd;
        }

        
        .size-preview-block {
            margin-top: 1.5rem;
            padding: 1rem;
            background: #fafafa;
        }

        .size-preview-title {
            font-size: 0.65rem;
            text-transform: uppercase;
            letter-spacing: 0.1rem;
            color: var(--gray);
            margin-bottom: 0.8rem;
            font-weight: 600;
        }

        .size-comparison-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.8rem;
        }

        .size-mini-preview {
            background: #fff;
            border: 1px solid var(--border);
            padding: 0.6rem;
            text-align: center;
        }
        body.dark-mode .size-mini-preview { background: var(--surface) !important; border-color: var(--border) !important; }

        .size-mini-shirt {
            position: relative;
            background: var(--border);
            aspect-ratio: 3/4;
            margin-bottom: 0.4rem;
        }
        body.dark-mode .size-mini-shirt { background: var(--surface-alt) !important; border-color: var(--border) !important; }

        .size-mini-shirt .mini-design {
            position: absolute;
            background: var(--text);
            top: 28%; left: 30%;
        }

        .size-mini-label { font-size: 0.6rem; color: var(--gray); text-transform: uppercase; letter-spacing: 0.05rem; }
        .size-mini-label strong { color: var(--text); font-weight: 600; }
        body.dark-mode .size-mini-label { color: rgba(255,255,255,0.6) !important; }
        body.dark-mode .size-mini-label strong { color: #fff !important; }

        
        .variants-bar {
            margin-top: 1rem;
            padding: 0.7rem 0.9rem;
            background: #fafafa;
            border: 1px dashed var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.7rem;
        }
        .variants-bar-text { color: var(--gray); }
        .variants-bar strong { color: var(--accent); }
        body.dark-mode .variants-bar { background: var(--surface) !important; border-color: rgba(255,255,255,0.1) !important; }
        body.dark-mode .variants-bar-text { color: rgba(255,255,255,0.7) !important; }
        body.dark-mode .variants-bar strong { color: var(--accent) !important; }

        .variants-save-btn {
            padding: 0.4rem 0.8rem;
            background: var(--text);
            color: #fff;
            border: none;
            font-size: 0.6rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.08rem;
            cursor: pointer;
            font-family: 'Inter', sans-serif;
            transition: background 0.2s;
        }
        .variants-save-btn:hover { background: var(--accent); }
        .variants-save-btn:disabled { opacity: 0.4; cursor: not-allowed; }
        body.dark-mode .variants-save-btn { background-color: var(--accent) !important; color: #ffffff !important; }
        body.dark-mode .variants-save-btn:hover { background-color: #0088D6 !important; }
        body.dark-mode .variants-save-btn:disabled { opacity: 0.4 !important; cursor: not-allowed !important; }

        
        .variants-modal {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.6);
            z-index: 9999;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 2rem;
        }
        .variants-modal.show { display: flex; }

        .variants-modal-content {
            background: #fff;
            width: 100%;
            max-width: 1200px;
            max-height: 90vh;
            overflow-y: auto;
            padding: 2.5rem;
        }

        .variants-modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid var(--border);
        }

        .variants-modal-header h3 {
            font-size: 1.5rem;
            font-weight: 300;
            margin: 0;
            letter-spacing: -0.03rem;
        }

        .variants-modal-close {
            background: none;
            border: 1px solid var(--border);
            width: 36px;
            height: 36px;
            cursor: pointer;
            font-size: 1rem;
            color: var(--gray);
            font-family: 'Inter', sans-serif;
        }
        .variants-modal-close:hover { color: var(--text); border-color: var(--text); }

        .variants-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 1.5rem;
        }

        .variant-card {
            border: 1px solid var(--border);
            padding: 1.5rem;
        }

        .variant-card-preview {
            background: #f5f5f5;
            aspect-ratio: 3/4;
            margin-bottom: 1.2rem;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }
        .variant-card-preview img { width: 100%; height: 100%; object-fit: cover; }

        .variant-card-name {
            font-size: 1rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
        }

        .variant-card-spec {
            font-size: 0.72rem;
            color: var(--gray);
            line-height: 1.6;
        }

        .variant-card-spec strong { color: var(--text); display: block; margin-top: 0.2rem; }

        
        .library-modal {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.5);
            z-index: 9998;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 2rem;
        }
        .library-modal.show { display: flex; }

        .library-modal-content {
            background: #fff;
            width: 560px;
            max-height: 80vh;
            overflow-y: auto;
            padding: 2rem;
        }

        .library-modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid var(--border);
        }

        .library-modal-header h3 {
            font-size: 1.2rem;
            font-weight: 500;
            margin: 0;
        }

        .library-list {
            display: flex;
            flex-direction: column;
            gap: 0.4rem;
        }

        .library-item {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 0.9rem;
            border: 1px solid var(--border);
            cursor: pointer;
            transition: all 0.2s;
        }
        .library-item:hover { border-color: var(--accent); background: rgba(0,163,255,0.04); }

        .library-item-icon {
            width: 44px;
            height: 44px;
            background: var(--text);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.6rem;
            font-weight: 700;
            flex-shrink: 0;
        }

        .library-item-info { flex-grow: 1; }
        .library-item-name { font-size: 0.85rem; font-weight: 500; }
        .library-item-meta { font-size: 0.7rem; color: var(--gray); margin-top: 0.15rem; }

        .library-or-divider {
            text-align: center;
            margin: 0.8rem 0;
            font-size: 0.65rem;
            color: var(--gray);
            text-transform: uppercase;
            letter-spacing: 0.1rem;
            position: relative;
        }
        .library-or-divider::before, .library-or-divider::after {
            content: "";
            position: absolute;
            top: 50%;
            width: 38%;
            height: 1px;
            background: var(--border);
        }
        .library-or-divider::before { left: 0; }
        .library-or-divider::after { right: 0; }

        .library-trigger-btn {
            display: block;
            width: 100%;
            margin-top: 0.5rem;
            padding: 0.7rem;
            background: transparent;
            border: 1px solid var(--border);
            color: var(--text);
            font-family: 'Inter', sans-serif;
            font-size: 0.7rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.08rem;
            cursor: pointer;
            transition: all 0.2s;
        }
        .library-trigger-btn:hover {
            border-color: var(--accent);
            color: var(--accent);
        }

        
        .design-layer.stitched-preview img,
        .design-layer.stitched-preview svg {
            filter: contrast(1.3) saturate(1.2);
            image-rendering: pixelated;
            transform: scale(0.98);
        }

        .design-layer.stitched-preview {
            filter: drop-shadow(0 0 1px rgba(0,0,0,0.4));
        }

        .stitch-toggle-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.7rem 1rem;
            background: #f9f5ed;
            border: 1px solid #e8d8b8;
            margin-top: 1rem;
            font-size: 0.72rem;
        }
        .stitch-toggle-bar-text { color: #7a5410; }
        .stitch-toggle-bar-text strong { color: #5d3f0a; }

        .stitch-toggle {
            position: relative;
            width: 36px;
            height: 20px;
        }
        .stitch-toggle input { opacity: 0; width: 0; height: 0; }
        .stitch-toggle-slider {
            position: absolute;
            cursor: pointer;
            top: 0; left: 0; right: 0; bottom: 0;
            background: var(--light-gray);
            transition: 0.3s;
        }
        .stitch-toggle-slider:before {
            position: absolute;
            content: "";
            height: 14px;
            width: 14px;
            left: 3px;
            bottom: 3px;
            background: white;
            transition: 0.3s;
        }
        .stitch-toggle input:checked + .stitch-toggle-slider { background: #c47100; }
        .stitch-toggle input:checked + .stitch-toggle-slider:before { transform: translateX(16px); }

        
        .account-layout {
            display: grid;
            grid-template-columns: 280px 1fr;
            gap: 4rem;
            align-items: flex-start;
        }

        .account-sidebar {
            position: sticky;
            top: 120px;
        }

        .account-avatar-block {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            margin-bottom: 3rem;
            padding-bottom: 3rem;
            border-bottom: 1px solid var(--border);
        }

        .account-avatar {
            width: 72px;
            height: 72px;
            background: var(--text);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            font-weight: 800;
            color: #fff;
            letter-spacing: -0.05rem;
            margin-bottom: 1.2rem;
            position: relative;
            cursor: pointer;
        }

        .account-avatar-edit {
            position: absolute;
            bottom: -4px;
            right: -4px;
            width: 22px;
            height: 22px;
            background: var(--accent);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .account-name {
            font-size: 1.1rem;
            font-weight: 600;
            margin: 0 0 0.25rem 0;
        }

        .account-meta-tag {
            font-size: 0.65rem;
            text-transform: uppercase;
            letter-spacing: 0.1rem;
            color: var(--gray);
        }

        .account-tag-pill {
            display: inline-block;
            font-size: 0.6rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.08rem;
            padding: 0.3rem 0.8rem;
            border: 1px solid var(--accent);
            color: var(--accent);
            margin-top: 0.8rem;
        }

        
        .account-nav { list-style: none; padding: 0; margin: 0; }
        .account-nav li { margin-bottom: 0.2rem; }
        .account-nav-item {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 0.9rem 1rem;
            font-size: 0.82rem;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.05rem;
            color: var(--gray);
            cursor: pointer;
            transition: all 0.2s;
            border-left: 2px solid transparent;
        }
        .account-nav-item:hover { color: var(--text); background: #f5f5f5; }
        .account-nav-item.active { color: var(--text); border-left-color: var(--accent); background: #f9f9f9; font-weight: 600; }
        .account-nav-item svg { flex-shrink: 0; }

        .account-nav-divider {
            height: 1px;
            background: var(--border);
            margin: 1rem 0;
        }

        .account-nav-danger {
            color: #e53e3e !important;
        }
        .account-nav-danger:hover {
            background: #fff5f5 !important;
            border-left-color: #e53e3e !important;
        }

        
        .account-panel { display: none; animation: fadeIn 0.3s ease-out; }
        .account-panel.active { display: block; }

        .account-section-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            margin-bottom: 2.5rem;
            padding-bottom: 1.5rem;
            border-bottom: 1px solid var(--border);
        }

        .account-section-header h2 {
            font-size: 2rem;
            font-weight: 300;
            letter-spacing: -0.05rem;
            margin: 0 0 0.3rem 0;
        }

        .account-section-header p {
            font-size: 0.85rem;
            color: var(--gray);
            margin: 0;
            font-weight: 300;
        }

        
        .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 2rem; }
        .form-grid-full { grid-column: 1 / -1; }

        .form-field { display: flex; flex-direction: column; gap: 0.5rem; }
        .form-label {
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.1rem;
            color: var(--gray);
            font-weight: 500;
        }
        .form-input {
            padding: 1rem 1.2rem;
            border: 1px solid var(--border);
            font-family: 'Inter', sans-serif;
            font-size: 0.9rem;
            color: var(--text);
            background: #fff;
            transition: border-color 0.2s;
            outline: none;
        }
        .form-input:focus { border-color: var(--accent); }
        .form-input:disabled { background: #f9f9f9; color: var(--gray); }
        .form-input-hint { font-size: 0.7rem; color: var(--gray); margin-top: 0.25rem; }

        
        .info-card {
            border: 1px solid var(--border);
            padding: 2rem;
            background: #fff;
            margin-bottom: 1.5rem;
        }

        .info-card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
        }

        .info-card-title {
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.1rem;
            font-weight: 600;
            color: var(--text);
        }

        .info-card-action {
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.05rem;
            color: var(--accent);
            cursor: pointer;
            font-weight: 600;
        }

        
        .stats-row {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1.5rem;
            margin-bottom: 2.5rem;
        }

        .stat-card {
            border: 1px solid var(--border);
            padding: 1.8rem;
            background: #fff;
        }

        .stat-value {
            font-size: 2.5rem;
            font-weight: 800;
            letter-spacing: -0.1rem;
            line-height: 1;
            margin-bottom: 0.5rem;
        }

        .stat-label {
            font-size: 0.65rem;
            text-transform: uppercase;
            letter-spacing: 0.1rem;
            color: var(--gray);
        }

        
        .activity-feed { display: flex; flex-direction: column; }

        .activity-item {
            display: flex;
            align-items: flex-start;
            gap: 1.5rem;
            padding: 1.5rem 0;
            border-bottom: 1px solid var(--border);
        }

        .activity-item:last-child { border-bottom: none; }

        .activity-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            flex-shrink: 0;
            margin-top: 5px;
        }

        .activity-content { flex-grow: 1; }
        .activity-title { font-size: 0.9rem; font-weight: 500; margin-bottom: 0.2rem; }
        .activity-sub { font-size: 0.78rem; color: var(--gray); font-weight: 300; }
        .activity-time { font-size: 0.65rem; color: var(--gray); text-transform: uppercase; letter-spacing: 0.05rem; flex-shrink: 0; margin-top: 3px; }

        
        .security-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.5rem 0;
            border-bottom: 1px solid var(--border);
        }

        .security-item:last-child { border-bottom: none; }

        .security-item-left h4 { font-size: 0.9rem; font-weight: 500; margin: 0 0 0.3rem 0; }
        .security-item-left p { font-size: 0.78rem; color: var(--gray); margin: 0; font-weight: 300; }

        .security-status {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.7rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05rem;
        }

        .security-dot { width: 6px; height: 6px; border-radius: 50%; }

        .btn-ghost {
            background: transparent;
            border: 1px solid var(--border);
            padding: 0.7rem 1.5rem;
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05rem;
            cursor: pointer;
            font-family: 'Inter', sans-serif;
            transition: all 0.2s;
            color: var(--text);
        }
        .btn-ghost:hover { border-color: var(--text); }

        .btn-danger-ghost {
            background: transparent;
            border: 1px solid #e53e3e;
            padding: 0.7rem 1.5rem;
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05rem;
            cursor: pointer;
            font-family: 'Inter', sans-serif;
            transition: all 0.2s;
            color: #e53e3e;
        }
        .btn-danger-ghost:hover { background: #fff5f5; }

        
        .notification-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.5rem 0;
            border-bottom: 1px solid var(--border);
        }

        .notification-item:last-child { border-bottom: none; }
        .notification-text h4 { font-size: 0.9rem; font-weight: 500; margin: 0 0 0.25rem 0; }
        .notification-text p { font-size: 0.78rem; color: var(--gray); margin: 0; font-weight: 300; }

        .toggle-switch {
            position: relative;
            width: 44px;
            height: 24px;
            flex-shrink: 0;
        }

        .toggle-switch input { opacity: 0; width: 0; height: 0; }

        .toggle-slider {
            position: absolute;
            cursor: pointer;
            top: 0; left: 0; right: 0; bottom: 0;
            background: var(--light-gray);
            transition: 0.3s;
        }

        .toggle-slider:before {
            position: absolute;
            content: "";
            height: 16px;
            width: 16px;
            left: 4px;
            bottom: 4px;
            background: white;
            transition: 0.3s;
        }

        input:checked + .toggle-slider { background: var(--accent); }
        input:checked + .toggle-slider:before { transform: translateX(20px); }

        
        .address-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 2rem; }

        .address-card {
            border: 1px solid var(--border);
            padding: 1.8rem;
            position: relative;
            background: #fff;
        }

        .address-card.default {
            border-color: var(--text);
        }

        .address-default-badge {
            position: absolute;
            top: -1px;
            right: -1px;
            font-size: 0.55rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.08rem;
            padding: 0.3rem 0.8rem;
            background: var(--text);
            color: #fff;
        }

        .address-type {
            font-size: 0.65rem;
            text-transform: uppercase;
            letter-spacing: 0.1rem;
            color: var(--gray);
            margin-bottom: 0.75rem;
        }

        .address-name { font-weight: 600; font-size: 0.9rem; margin-bottom: 0.25rem; }
        .address-line { font-size: 0.85rem; color: var(--gray); font-weight: 300; line-height: 1.6; }

        .address-actions {
            display: flex;
            gap: 1rem;
            margin-top: 1.5rem;
            padding-top: 1.2rem;
            border-top: 1px solid var(--border);
        }

        .address-action-link {
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.05rem;
            color: var(--gray);
            cursor: pointer;
            font-weight: 600;
            transition: color 0.2s;
        }

        .address-action-link:hover { color: var(--text); }
        .address-action-link.primary { color: var(--accent); }

        
        .integration-item {
            display: flex;
            align-items: center;
            gap: 1.5rem;
            padding: 1.5rem 0;
            border-bottom: 1px solid var(--border);
        }

        .integration-item:last-child { border-bottom: none; }

        .integration-icon {
            width: 44px;
            height: 44px;
            background: var(--border);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            flex-shrink: 0;
        }

        .integration-info { flex-grow: 1; }
        .integration-info h4 { font-size: 0.9rem; font-weight: 500; margin: 0 0 0.2rem 0; }
        .integration-info p { font-size: 0.78rem; color: var(--gray); margin: 0; font-weight: 300; }

        .integration-status {
            font-size: 0.65rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.08rem;
            padding: 0.35rem 0.9rem;
            border: 1px solid;
        }

        .integration-status.connected { color: #28CD41; border-color: #28CD41; }
        .integration-status.disconnected { color: var(--gray); border-color: var(--border); }

        
        .danger-zone {
            border: 1px solid #fed7d7;
            padding: 2rem;
            background: #fff;
            margin-top: 2rem;
        }

        .danger-zone-header {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1.5rem;
        }

        .danger-zone-header h3 {
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.1rem;
            color: #e53e3e;
            margin: 0;
            font-weight: 600;
        }

        .danger-zone-line { flex-grow: 1; height: 1px; background: #fed7d7; }

        .danger-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.2rem 0;
            border-bottom: 1px solid #fff5f5;
        }

        .danger-item:last-child { border-bottom: none; }
        .danger-item h4 { font-size: 0.9rem; font-weight: 500; margin: 0 0 0.25rem 0; color: var(--text); }
        .danger-item p { font-size: 0.78rem; color: var(--gray); margin: 0; font-weight: 300; }

        
        .saved-design-row {
            display: flex;
            align-items: center;
            gap: 1.5rem;
            padding: 1.2rem 0;
            border-bottom: 1px solid var(--border);
            transition: background 0.2s;
            cursor: pointer;
        }

        button.info-card-action {
            background: none;
            border: 0;
            padding: 0;
            font: inherit;
        }

        .saved-design-row:hover { background: #f9f9f9; margin: 0 -1rem; padding: 1.2rem 1rem; }
        .saved-design-row:last-child { border-bottom: none; }

        .saved-design-thumb {
            width: 52px;
            height: 52px;
            background: var(--border);
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.5rem;
            color: var(--gray);
            text-transform: uppercase;
        }

        .saved-design-info { flex-grow: 1; }
        .saved-design-name { font-size: 0.9rem; font-weight: 500; margin-bottom: 0.2rem; }
        .saved-design-meta { font-size: 0.72rem; color: var(--gray); font-weight: 300; }

        .saved-design-status {
            font-size: 0.6rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.08rem;
            padding: 0.3rem 0.8rem;
            border: 1px solid;
        }

        
        .floating-orb-container { position: fixed; bottom: 4rem; right: 4rem; display: flex; align-items: center; gap: 1.5rem; z-index: 2000; }
        
        body:has(main#view-backoffice[style*="block"]) .floating-orb-container,
        body:has(main#view-backoffice[style*="flex"]) .floating-orb-container { display: none !important; }
        .status-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1rem; color: var(--text); text-align: right; line-height: 1.4; transition: opacity 0.3s;}
        .orb { width: 60px; height: 60px; border-radius: 50%; border: 1px solid var(--border); position: relative; overflow: hidden; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.05); transition: border-color 0.3s; }
        .orb-fill { position: absolute; bottom: 0; width: 100%; height: 0%; background: var(--accent); transition: height 1.5s cubic-bezier(0.19, 1, 0.22, 1); }


        

        
        .account-modal {
            position: fixed; inset: 0;
            background: rgba(0,0,0,0.5);
            z-index: 9999;
            display: none;
            align-items: center; justify-content: center;
            animation: fadeIn 0.2s ease-out;
        }
        .account-modal.show { display: flex; }

        .account-modal-content {
            background: #fff;
            width: 520px; max-width: 92vw;
            max-height: 88vh;
            padding: 2.5rem;
            overflow-y: auto;
            animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .account-modal-header { margin-bottom: 1.5rem; }
        .account-modal-header h3 {
            font-size: 1.3rem; font-weight: 500;
            margin: 0 0 0.3rem 0; letter-spacing: -0.02rem;
        }
        .account-modal-header p {
            font-size: 0.78rem; color: var(--gray);
            margin: 0; font-weight: 300; line-height: 1.5;
        }

        .account-modal-actions {
            display: flex; gap: 0.7rem; margin-top: 2rem;
        }
        .account-modal-actions button {
            flex: 1; padding: 0.95rem;
            font-family: 'Inter', sans-serif;
            font-size: 0.75rem; font-weight: 600;
            text-transform: uppercase; letter-spacing: 0.08rem;
            cursor: pointer;
            border: 1px solid var(--border);
            background: #fff; color: var(--text);
            transition: all 0.2s;
        }
        .account-modal-actions button:hover { border-color: var(--text); }
        .account-modal-actions button.primary {
            background: var(--accent); color: #fff;
            border-color: var(--accent);
        }
        .account-modal-actions button.primary:hover { background: #008be0; }
        .account-modal-actions button.danger {
            background: #e53e3e; color: #fff;
            border-color: #e53e3e;
        }
        .account-modal-actions button.danger:hover { background: #c53030; }

        
        .account-form-field {
            display: flex; flex-direction: column;
            gap: 0.5rem; margin-bottom: 1.2rem;
        }
        .account-form-field label {
            font-size: 0.65rem;
            text-transform: uppercase; letter-spacing: 0.08rem;
            color: var(--gray); font-weight: 600;
        }
        .account-form-field input,
        .account-form-field select,
        .account-form-field textarea {
            width: 100%; padding: 0.85rem 1rem;
            border: 1px solid var(--border);
            font-family: 'Inter', sans-serif;
            font-size: 0.85rem; outline: none;
            background: #fff;
            transition: border-color 0.2s;
        }
        .account-form-field input:focus,
        .account-form-field select:focus,
        .account-form-field textarea:focus { border-color: var(--accent); }
        .account-form-field-row {
            display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
        }

        
        .design-upload-zone {
            border: 2px dashed var(--border);
            background: #fafafa;
            padding: 3rem 1.5rem;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s;
            margin-bottom: 1.5rem;
        }
        .design-upload-zone:hover,
        .design-upload-zone.dragover {
            border-color: var(--accent);
            background: rgba(0, 163, 255, 0.04);
        }
        .design-upload-zone svg { width: 40px; height: 40px; color: var(--gray); margin-bottom: 0.8rem; }
        .design-upload-zone-title { font-size: 0.9rem; font-weight: 600; margin-bottom: 0.3rem; }
        .design-upload-zone-hint { font-size: 0.72rem; color: var(--gray); font-weight: 300; }
        .design-upload-formats {
            margin-top: 0.8rem; font-size: 0.62rem;
            color: var(--gray); letter-spacing: 0.05rem;
        }

        .design-source-divider {
            display: flex; align-items: center; gap: 1rem;
            margin: 1.5rem 0;
        }
        .design-source-divider::before,
        .design-source-divider::after {
            content: ""; flex: 1; height: 1px; background: var(--border);
        }
        .design-source-divider span {
            font-size: 0.65rem; color: var(--gray);
            text-transform: uppercase; letter-spacing: 0.1rem;
        }

        .workspace-source-btn {
            width: 100%; padding: 1rem;
            background: #fff; border: 1px solid var(--border);
            display: flex; align-items: center; gap: 0.8rem;
            cursor: pointer; transition: all 0.2s;
            font-family: 'Inter', sans-serif;
            font-size: 0.85rem; color: var(--text);
        }
        .workspace-source-btn:hover { border-color: var(--accent); }
        .workspace-source-btn svg { width: 24px; height: 24px; flex-shrink: 0; }

        .saved-design-delete {
            cursor: pointer; color: var(--gray);
            padding: 0.5rem; transition: color 0.2s;
            display: inline-flex; align-items: center;
        }
        .saved-design-delete:hover { color: #e53e3e; }

        
        .saved-design-open {
            cursor: pointer; color: var(--gray);
            padding: 0.5rem; transition: color 0.2s;
            display: inline-flex; align-items: center;
        }
        .saved-design-open:hover { color: var(--accent); }

        
        .password-strength {
            display: flex; gap: 0.3rem; margin-top: 0.5rem;
        }
        .password-strength-bar {
            flex: 1; height: 3px; background: #eee;
            transition: background 0.3s;
        }
        .password-strength-bar.active-weak { background: #e53e3e; }
        .password-strength-bar.active-medium { background: #f39c12; }
        .password-strength-bar.active-strong { background: #28CD41; }
        .password-strength-label {
            font-size: 0.62rem; color: var(--gray);
            margin-top: 0.4rem; text-transform: uppercase;
            letter-spacing: 0.05rem; font-weight: 600;
        }

        
        .api-key-display {
            display: flex; align-items: center; gap: 0.5rem;
            background: #fafafa; border: 1px solid var(--border);
            padding: 0.8rem 1rem;
            font-family: 'SF Mono', Menlo, monospace;
            font-size: 0.75rem;
        }
        .api-key-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .api-key-action {
            font-family: 'Inter', sans-serif;
            font-size: 0.65rem; font-weight: 600;
            text-transform: uppercase; letter-spacing: 0.06rem;
            color: var(--accent); cursor: pointer;
            background: none; border: none; padding: 0.3rem 0.5rem;
        }
        .api-key-action:hover { color: #008be0; }

        
        .integration-detail-meta {
            background: #fafafa; padding: 1rem 1.2rem;
            margin: 1rem 0; border-left: 3px solid var(--accent);
        }
        .integration-detail-meta-row {
            display: flex; justify-content: space-between;
            padding: 0.3rem 0; font-size: 0.75rem;
        }
        .integration-detail-meta-row .lbl { color: var(--gray); }
        .integration-detail-meta-row .val { font-weight: 500; }

        
        .integration-status { cursor: pointer; }

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



        

        
        .auth-modal {
            position: fixed; inset: 0;
            background: rgba(0,0,0,0.65);
            backdrop-filter: blur(8px);
            z-index: 10000;
            display: none;
            align-items: center; justify-content: center;
            animation: fadeIn 0.25s ease-out;
        }
        .auth-modal.show { display: flex; }

        .auth-modal-content {
            background: #fff;
            width: 480px; max-width: 92vw;
            max-height: 90vh;
            overflow-y: auto;
            position: relative;
            animation: slideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .auth-modal-close {
            position: absolute; top: 1.2rem; right: 1.2rem;
            width: 32px; height: 32px;
            background: none; border: none;
            cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            color: var(--gray);
            transition: color 0.2s;
            z-index: 2;
        }
        .auth-modal-close:hover { color: var(--text); }

        .auth-modal-header {
            padding: 3rem 2.5rem 1.5rem;
            text-align: center;
        }

        .auth-modal-eyebrow {
            font-size: 0.62rem;
            text-transform: uppercase;
            letter-spacing: 0.15rem;
            color: var(--accent);
            font-weight: 700;
            margin-bottom: 0.8rem;
        }

        .auth-modal-header h2 {
            font-size: 1.8rem;
            font-weight: 300;
            letter-spacing: -0.04rem;
            margin: 0 0 0.4rem 0;
            line-height: 1.2;
        }

        .auth-modal-header p {
            font-size: 0.85rem;
            color: var(--gray);
            margin: 0;
            font-weight: 300;
            line-height: 1.5;
        }

        .auth-modal-body {
            padding: 0 2.5rem 2.5rem;
        }

        
        .auth-screen { display: none; }
        .auth-screen.active { display: block; animation: fadeIn 0.3s ease-out; }

        
        .auth-providers {
            display: flex; flex-direction: column;
            gap: 0.7rem; margin-bottom: 1.5rem;
        }

        .auth-provider-btn {
            width: 100%;
            padding: 0.95rem 1rem;
            background: #fff;
            border: 1px solid var(--border);
            font-family: 'Inter', sans-serif;
            font-size: 0.85rem;
            font-weight: 500;
            color: var(--text);
            cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            gap: 0.7rem;
            transition: all 0.2s;
        }
        .auth-provider-btn:hover { border-color: var(--text); background: #fafafa; }
        .auth-provider-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

        
        .auth-divider {
            display: flex; align-items: center; gap: 1rem;
            margin: 1.5rem 0;
        }
        .auth-divider::before,
        .auth-divider::after {
            content: ""; flex: 1; height: 1px; background: var(--border);
        }
        .auth-divider span {
            font-size: 0.62rem;
            text-transform: uppercase; letter-spacing: 0.15rem;
            color: var(--gray); font-weight: 600;
        }

        
        .auth-field {
            margin-bottom: 1.1rem;
        }
        .auth-field label {
            display: block;
            font-size: 0.62rem;
            text-transform: uppercase;
            letter-spacing: 0.1rem;
            color: var(--gray);
            font-weight: 600;
            margin-bottom: 0.5rem;
        }
        .auth-field input {
            width: 100%;
            padding: 0.9rem 1rem;
            border: 1px solid var(--border);
            font-family: 'Inter', sans-serif;
            font-size: 0.9rem;
            background: #fff;
            color: var(--text);
            outline: none;
            transition: border-color 0.2s;
        }
        .auth-field input:focus { border-color: var(--accent); }
        .auth-field input.error { border-color: #e53e3e; }

        .auth-field-error {
            font-size: 0.68rem;
            color: #e53e3e;
            margin-top: 0.4rem;
            font-weight: 500;
        }
        .auth-field-hint {
            font-size: 0.68rem;
            color: var(--gray);
            margin-top: 0.4rem;
            font-weight: 300;
        }
        .auth-forgot-link {
            display: inline-block;
            font-size: 0.7rem;
            color: var(--accent);
            cursor: pointer;
            margin-top: 0.5rem;
            font-weight: 500;
        }
        .auth-forgot-link:hover { color: #008be0; }

        
        .auth-submit-btn {
            width: 100%;
            padding: 1.05rem;
            background: var(--accent);
            color: #fff;
            border: none;
            font-family: 'Inter', sans-serif;
            font-size: 0.78rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.1rem;
            cursor: pointer;
            margin-top: 0.5rem;
            transition: background 0.2s;
            position: relative;
        }
        .auth-submit-btn:hover { background: #008be0; }
        .auth-submit-btn:disabled { background: var(--border); cursor: not-allowed; }
        .auth-submit-btn.loading { color: transparent; }
        .auth-submit-btn.loading::after {
            content: "";
            position: absolute;
            top: 50%; left: 50%;
            width: 16px; height: 16px;
            margin: -8px 0 0 -8px;
            border: 2px solid rgba(255,255,255,0.3);
            border-top-color: #fff;
            border-radius: 50%;
            animation: auth-spin 0.6s linear infinite;
        }
        @keyframes auth-spin { to { transform: rotate(360deg); } }

        
        .auth-footer-switch {
            margin-top: 1.8rem;
            text-align: center;
            font-size: 0.78rem;
            color: var(--gray);
            font-weight: 300;
        }
        .auth-footer-switch a {
            color: var(--accent);
            font-weight: 600;
            cursor: pointer;
        }
        .auth-footer-switch a:hover { color: #008be0; }

        
        .auth-legal {
            margin-top: 1.5rem;
            text-align: center;
            font-size: 0.65rem;
            color: var(--gray);
            line-height: 1.6;
            font-weight: 300;
        }
        .auth-legal a {
            color: var(--text);
            text-decoration: underline;
            text-underline-offset: 2px;
            cursor: pointer;
        }

        
        .auth-success {
            text-align: center;
            padding: 2rem 0;
        }
        .auth-success-icon {
            width: 64px; height: 64px;
            margin: 0 auto 1.5rem;
            background: rgba(40, 205, 65, 0.1);
            color: #28CD41;
            display: flex; align-items: center; justify-content: center;
        }
        .auth-success-icon svg { width: 32px; height: 32px; }

        .auth-success h3 {
            font-size: 1.3rem;
            font-weight: 500;
            margin: 0 0 0.6rem 0;
        }
        .auth-success p {
            font-size: 0.85rem;
            color: var(--gray);
            line-height: 1.6;
            font-weight: 300;
            margin: 0 0 1.5rem 0;
        }

        .auth-success-email {
            background: #fafafa;
            padding: 0.8rem 1rem;
            border-left: 3px solid var(--accent);
            font-size: 0.85rem;
            font-weight: 500;
            margin-bottom: 1.5rem;
            word-break: break-all;
        }

        
        .auth-onboarding-overlay {
            position: fixed; inset: 0;
            background: #fff;
            z-index: 10001;
            display: none;
            overflow-y: auto;
        }
        .auth-onboarding-overlay.show { display: block; animation: fadeIn 0.3s; }

        .onboarding-container {
            max-width: 640px;
            margin: 0 auto;
            padding: 4rem 2rem;
        }

        .onboarding-progress {
            display: flex; gap: 0.5rem;
            margin-bottom: 3rem;
        }
        .onboarding-progress-bar {
            flex: 1; height: 2px;
            background: var(--border);
            transition: background 0.3s;
        }
        .onboarding-progress-bar.done { background: var(--accent); }
        .onboarding-progress-bar.active { background: var(--accent); }

        .onboarding-step { display: none; animation: fadeIn 0.4s ease-out; }
        .onboarding-step.active { display: block; }

        .onboarding-step-eyebrow {
            font-size: 0.62rem;
            text-transform: uppercase;
            letter-spacing: 0.15rem;
            color: var(--accent);
            font-weight: 700;
            margin-bottom: 1rem;
        }

        .onboarding-step h2 {
            font-size: 2.2rem;
            font-weight: 300;
            letter-spacing: -0.04rem;
            line-height: 1.15;
            margin: 0 0 1rem 0;
        }

        .onboarding-step .subtitle {
            font-size: 1rem;
            color: var(--gray);
            line-height: 1.6;
            font-weight: 300;
            margin-bottom: 3rem;
        }

        .onboarding-usecase-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.8rem;
        }

        .onboarding-usecase-tile {
            padding: 1.5rem 1.2rem;
            background: #fff;
            border: 1px solid var(--border);
            cursor: pointer;
            transition: all 0.2s;
        }
        .onboarding-usecase-tile:hover { border-color: var(--text); }
        .onboarding-usecase-tile.selected {
            border-color: var(--accent);
            background: rgba(0, 163, 255, 0.04);
        }

        .onboarding-usecase-name {
            font-size: 0.95rem;
            font-weight: 600;
            margin-bottom: 0.3rem;
        }
        .onboarding-usecase-desc {
            font-size: 0.72rem;
            color: var(--gray);
            line-height: 1.5;
            font-weight: 300;
        }

        .onboarding-actions {
            display: flex; justify-content: space-between;
            align-items: center; gap: 1rem;
            margin-top: 3rem;
        }

        .onboarding-skip {
            font-size: 0.7rem;
            color: var(--gray);
            cursor: pointer;
            text-transform: uppercase;
            letter-spacing: 0.1rem;
            font-weight: 600;
            background: none; border: none;
            padding: 0.5rem;
        }
        .onboarding-skip:hover { color: var(--text); }

        .onboarding-next-btn {
            padding: 1rem 2.5rem;
            background: var(--accent);
            color: #fff;
            border: none;
            font-family: 'Inter', sans-serif;
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.1rem;
            cursor: pointer;
            transition: background 0.2s;
        }
        .onboarding-next-btn:hover { background: #008be0; }
        .onboarding-next-btn:disabled {
            background: var(--border);
            cursor: not-allowed;
        }

        
        .verify-banner {
            position: fixed; top: 0; left: 0; right: 0;
            background: #FFF8E6;
            border-bottom: 1px solid #F2D478;
            color: #7A5A00;
            padding: 0.7rem 1.5rem;
            z-index: 100;
            display: none;
            font-size: 0.78rem;
            text-align: center;
            font-weight: 500;
        }
        .verify-banner.show { display: block; }
        body.verify-banner-active nav { top: 38px; }
        body.verify-banner-active main { padding-top: 38px; }
        .verify-banner a {
            color: var(--text);
            font-weight: 700;
            cursor: pointer;
            text-decoration: underline;
            text-underline-offset: 2px;
            margin-left: 0.5rem;
        }
        .verify-banner-close {
            position: absolute; right: 1rem; top: 50%;
            transform: translateY(-50%);
            background: none; border: none;
            cursor: pointer; color: inherit;
            font-size: 1.1rem; opacity: 0.6;
        }
        .verify-banner-close:hover { opacity: 1; }

        
        .nav-user-section {
            display: flex; align-items: center; gap: 0.5rem;
        }

        
        .nav-login-btn {
            padding: 0.5rem 0.7rem;
            background: transparent;
            color: var(--text);
            border: none;
            font-family: 'Inter', sans-serif;
            font-size: 0.75rem;
            font-weight: 500;
            letter-spacing: 0.02rem;
            cursor: pointer;
            transition: color 0.2s;
            text-decoration: none;
        }
        .nav-login-btn:hover { color: var(--accent); }

        
        .nav-signup-btn {
            padding: 0.55rem 1rem;
            background: var(--accent);
            color: #fff;
            border: none;
            font-family: 'Inter', sans-serif;
            font-size: 0.7rem;
            font-weight: 600;
            letter-spacing: 0.04rem;
            cursor: pointer;
            transition: background 0.2s;
            white-space: nowrap;
        }
        .nav-signup-btn:hover { background: #008be0; }

        
        @media (max-width: 1100px) {
            .nav-user-section .nav-login-btn { display: none; }
        }

        
        .auth-wall {
            position: fixed; inset: 0;
            background: rgba(0,0,0,0.6);
            backdrop-filter: blur(6px);
            z-index: 9998;
            display: none;
            align-items: center; justify-content: center;
            animation: fadeIn 0.25s;
        }
        .auth-wall.show { display: flex; }

        .auth-wall-content {
            background: #fff;
            width: 440px; max-width: 92vw;
            padding: 3rem 2.5rem;
            text-align: center;
        }

        .auth-wall-icon {
            width: 64px; height: 64px;
            margin: 0 auto 1.5rem;
            background: rgba(0, 163, 255, 0.08);
            color: var(--accent);
            display: flex; align-items: center; justify-content: center;
        }
        .auth-wall-icon svg { width: 32px; height: 32px; }

        .auth-wall-content h3 {
            font-size: 1.4rem;
            font-weight: 400;
            letter-spacing: -0.02rem;
            margin: 0 0 0.6rem 0;
        }

        .auth-wall-content p {
            font-size: 0.85rem;
            color: var(--gray);
            line-height: 1.6;
            font-weight: 300;
            margin: 0 0 2rem 0;
        }

        .auth-wall-actions {
            display: flex; flex-direction: column; gap: 0.7rem;
        }

        .auth-wall-actions button {
            padding: 1rem;
            font-family: 'Inter', sans-serif;
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.1rem;
            cursor: pointer;
            transition: all 0.2s;
        }

        .auth-wall-actions .primary {
            background: var(--accent); color: #fff; border: none;
        }
        .auth-wall-actions .primary:hover { background: #008be0; }

        .auth-wall-actions .secondary {
            background: #fff; color: var(--text);
            border: 1px solid var(--border);
        }
        .auth-wall-actions .secondary:hover { border-color: var(--text); }

        .auth-wall-context {
            margin-top: 1.5rem;
            font-size: 0.7rem;
            color: var(--gray);
            font-style: italic;
        }

        
        .account-guest-wall {
            display: none;
            padding: 6rem 2rem;
            text-align: center;
            max-width: 720px;
            margin: 0 auto;
        }
        .account-guest-wall h2 {
            font-size: 2rem;
            font-weight: 300;
            letter-spacing: -0.03rem;
            margin: 0 0 1rem 0;
        }
        .account-guest-wall p {
            font-size: 0.95rem;
            color: var(--gray);
            max-width: 480px;
            margin: 0 auto 2rem;
            line-height: 1.6;
            font-weight: 300;
        }
        .account-guest-wall-actions {
            display: flex; gap: 1rem; justify-content: center;
        }



        

        
        .config-sidebar-left {
            min-width: 0;
            max-width: 360px;
            box-sizing: border-box;
            overflow-x: hidden;
        }
        .config-sidebar-left * {
            min-width: 0;
            max-width: 100%;
            box-sizing: border-box;
        }
        .config-step-content {
            min-width: 0;
            overflow-x: hidden;
            box-sizing: border-box;
        }

        
        .config-sidebar-left .roster-bar {
            flex-direction: column;
            align-items: stretch;
            gap: 0.6rem;
            padding: 0.85rem;
        }
        .config-sidebar-left .roster-bar-text {
            font-size: 0.7rem;
        }
        .config-sidebar-left .roster-select {
            width: 100%;
            min-width: 0;
        }
        .config-sidebar-left .roster-save-btn {
            width: 100%;
            white-space: nowrap;
            text-align: center;
        }

        
        .config-sidebar-left .quantity-tabs {
            flex-wrap: wrap;
            gap: 0;
        }
        .config-sidebar-left .quantity-tab {
            padding: 0.7rem 0.5rem;
            font-size: 0.62rem;
            letter-spacing: 0.04rem;
            flex: 1 1 auto;
            min-width: 0;
            justify-content: center;
            text-align: center;
            white-space: nowrap;
        }
        .config-sidebar-left .quantity-tab .tab-counter {
            font-size: 0.55rem;
            min-width: 16px;
            padding: 0.1rem 0.35rem;
        }

        
        .config-sidebar-left .size-grid {
            gap: 0.4rem;
        }
        .config-sidebar-left .size-input-cell input {
            min-width: 0;
            width: 100%;
        }

        
        .config-sidebar-left .pers-info-bar,
        .config-sidebar-left .pers-import-bar,
        .config-sidebar-left .pers-csv-drop {
            min-width: 0;
            max-width: 100%;
            box-sizing: border-box;
            word-wrap: break-word;
            overflow-wrap: break-word;
        }

        
        .config-sidebar-left input,
        .config-sidebar-left select,
        .config-sidebar-left textarea {
            min-width: 0;
            max-width: 100%;
        }

        
        .config-sidebar-left table {
            display: block;
            overflow-x: auto;
            max-width: 100%;
        }


        

        
        .nav-inbox-bell {
            position: relative;
            width: 36px; height: 36px;
            display: flex; align-items: center; justify-content: center;
            cursor: pointer;
            color: var(--text);
            transition: color 0.2s;
        }
        .nav-inbox-bell:hover { color: var(--accent); }
        .nav-inbox-bell svg { width: 20px; height: 20px; }
        .nav-inbox-badge {
            position: absolute;
            top: 4px; right: 4px;
            background: #e53e3e;
            color: #fff;
            font-size: 0.55rem;
            font-weight: 700;
            min-width: 16px; height: 16px;
            padding: 0 4px;
            display: flex; align-items: center; justify-content: center;
            line-height: 1;
        }
        .nav-inbox-bell.has-unread svg { color: var(--accent); animation: bellPulse 2s ease-in-out infinite; }
        @keyframes bellPulse {
            0%, 100% { transform: scale(1); }
            10% { transform: scale(1.15) rotate(-8deg); }
            20% { transform: scale(1.15) rotate(8deg); }
            30% { transform: scale(1) rotate(0deg); }
        }

        
        .inbox-layout {
            display: grid;
            grid-template-columns: 360px 1fr;
            gap: 0;
            border: 1px solid var(--border);
            background: #fff;
            height: 70vh;
            min-height: 500px;
        }
        body.dark-mode .inbox-layout { background: var(--surface); }

        .inbox-filter-bar {
            display: flex; gap: 0.5rem;
            margin: 1.5rem 0 1rem;
            flex-wrap: wrap;
        }
        .inbox-filter {
            padding: 0.5rem 0.85rem;
            background: #fff;
            border: 1px solid var(--border);
            font-family: 'Inter', sans-serif;
            font-size: 0.7rem;
            font-weight: 500;
            color: var(--gray);
            cursor: pointer;
            display: inline-flex; align-items: center; gap: 0.4rem;
            transition: all 0.2s;
        }
        .inbox-filter:hover { color: var(--text); border-color: var(--text); }
        .inbox-filter.active {
            background: var(--text);
            color: #fff;
            border-color: var(--text);
        }
        .inbox-filter .num {
            font-size: 0.6rem;
            background: var(--surface-alt);
            color: var(--text);
            padding: 0.1rem 0.4rem;
            font-weight: 700;
        }
        .inbox-filter.active .num { background: rgba(255,255,255,0.2); color: #fff; }

        
        .inbox-thread-list {
            border-right: 1px solid var(--border);
            overflow-y: auto;
            background: #fafafa;
        }
        body.dark-mode .inbox-thread-list { background: rgba(255,255,255,0.02); }

        .inbox-thread-item {
            padding: 1rem 1.1rem;
            border-bottom: 1px solid var(--border);
            cursor: pointer;
            display: flex; gap: 0.8rem;
            background: transparent;
            transition: background 0.15s;
            position: relative;
        }
        .inbox-thread-item:hover { background: rgba(0,163,255,0.04); }
        .inbox-thread-item.active { background: rgba(0,163,255,0.08); border-left: 3px solid var(--accent); padding-left: calc(1.1rem - 3px); }
        .inbox-thread-item.unread { background: #fff; }
        body.dark-mode .inbox-thread-item.unread { background: var(--surface); }

        .inbox-thread-icon {
            width: 36px; height: 36px;
            display: flex; align-items: center; justify-content: center;
            font-size: 1rem;
            flex-shrink: 0;
        }

        .inbox-thread-body { flex: 1; min-width: 0; }
        .inbox-thread-top {
            display: flex; justify-content: space-between;
            align-items: baseline;
            margin-bottom: 0.25rem;
        }
        .inbox-thread-label {
            font-size: 0.6rem;
            text-transform: uppercase;
            letter-spacing: 0.08rem;
            color: var(--accent);
            font-weight: 700;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 65%;
        }
        .inbox-thread-time {
            font-size: 0.62rem;
            color: var(--gray);
            white-space: nowrap;
            flex-shrink: 0;
        }
        .inbox-thread-subject {
            font-size: 0.82rem;
            font-weight: 600;
            color: var(--text);
            margin-bottom: 0.25rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .inbox-thread-item.unread .inbox-thread-subject { font-weight: 700; }
        .inbox-thread-preview {
            font-size: 0.7rem;
            color: var(--gray);
            font-weight: 400;
            line-height: 1.4;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .inbox-thread-badge {
            display: inline-block;
            margin-top: 0.5rem;
            background: #e53e3e;
            color: #fff;
            font-size: 0.55rem;
            font-weight: 700;
            padding: 0.2rem 0.5rem;
            text-transform: uppercase;
            letter-spacing: 0.05rem;
        }
        .inbox-thread-action-pill {
            display: inline-block;
            margin-top: 0.5rem;
            margin-left: 0.4rem;
            background: rgba(255,204,0,0.15);
            color: #b88a00;
            font-size: 0.55rem;
            font-weight: 700;
            padding: 0.2rem 0.5rem;
            text-transform: uppercase;
            letter-spacing: 0.05rem;
        }

        
        .inbox-thread-detail {
            overflow-y: auto;
            padding: 0;
            background: #fff;
        }
        body.dark-mode .inbox-thread-detail { background: var(--surface); }

        .inbox-thread-header {
            padding: 1.3rem 1.5rem;
            border-bottom: 1px solid var(--border);
            background: #fafafa;
            display: flex; justify-content: space-between;
            align-items: flex-start;
            gap: 1rem;
        }
        body.dark-mode .inbox-thread-header { background: rgba(255,255,255,0.02); }
        .inbox-thread-header-label {
            font-size: 0.6rem;
            text-transform: uppercase;
            letter-spacing: 0.1rem;
            color: var(--accent);
            font-weight: 700;
            margin-bottom: 0.3rem;
        }
        .inbox-thread-header h3 {
            margin: 0; font-size: 1.05rem; font-weight: 500;
            letter-spacing: -0.01rem;
        }
        .inbox-thread-header-link {
            display: inline-block;
            font-size: 0.7rem;
            color: var(--accent);
            font-weight: 500;
            cursor: pointer;
            margin-top: 0.3rem;
        }
        .inbox-thread-header-link:hover { text-decoration: underline; }

        .inbox-reply-btn {
            padding: 0.7rem 1.2rem;
            background: var(--accent);
            color: #fff;
            border: none;
            font-family: 'Inter', sans-serif;
            font-size: 0.7rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08rem;
            cursor: pointer;
            white-space: nowrap;
        }
        .inbox-reply-btn:hover { background: #008be0; }

        .inbox-messages {
            padding: 1.5rem;
            display: flex; flex-direction: column;
            gap: 1.2rem;
        }

        
        .msg-bubble {
            border: 1px solid var(--border);
            padding: 1.1rem 1.2rem;
            background: #fff;
            position: relative;
        }
        body.dark-mode .msg-bubble { background: rgba(255,255,255,0.02); }
        .msg-bubble.from-customer {
            background: rgba(0,163,255,0.04);
            border-color: rgba(0,163,255,0.2);
            margin-left: 1.5rem;
        }
        body.dark-mode .msg-bubble.from-customer { background: rgba(0,163,255,0.08); }
        .msg-bubble.from-team {
            margin-right: 1.5rem;
        }

        .msg-bubble-header {
            display: flex; align-items: center; gap: 0.7rem;
            margin-bottom: 0.8rem;
        }
        .msg-bubble-avatar {
            width: 30px; height: 30px;
            display: flex; align-items: center; justify-content: center;
            color: #fff;
            font-size: 0.6rem;
            font-weight: 700;
            letter-spacing: 0.05rem;
            flex-shrink: 0;
        }
        .msg-bubble-meta { flex: 1; min-width: 0; }
        .msg-bubble-sender {
            font-size: 0.78rem;
            font-weight: 600;
            color: var(--text);
        }
        .msg-bubble-time {
            font-size: 0.62rem;
            color: var(--gray);
            margin-top: 0.1rem;
        }
        .msg-bubble-type {
            font-size: 0.6rem;
            padding: 0.25rem 0.55rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05rem;
            white-space: nowrap;
        }
        .msg-bubble-subject {
            font-size: 0.95rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
            color: var(--text);
        }
        .msg-bubble-body {
            font-size: 0.85rem;
            line-height: 1.6;
            color: var(--text);
        }
        .msg-bubble-body strong { font-weight: 700; color: var(--accent); }

        .msg-bubble-attachments {
            margin-top: 1rem;
            display: flex; flex-direction: column;
            gap: 0.5rem;
        }
        .msg-attachment {
            display: flex; align-items: center; gap: 0.7rem;
            width: 100%;
            padding: 0.7rem 0.9rem;
            background: #fafafa;
            border: 1px solid var(--border);
            color: inherit;
            font: inherit;
            text-align: left;
            cursor: pointer;
            transition: border-color 0.2s;
        }
        body.dark-mode .msg-attachment { background: rgba(255,255,255,0.02); }
        .msg-attachment:hover { border-color: var(--accent); }
        .msg-attachment:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
        .msg-attachment:disabled { cursor: wait; opacity: 0.65; }
        .msg-attachment-icon { font-size: 1.2rem; }
        .msg-attachment-info { flex: 1; min-width: 0; }
        .msg-attachment-name {
            font-size: 0.78rem;
            font-weight: 500;
            color: var(--text);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .msg-attachment-size {
            font-size: 0.65rem;
            color: var(--gray);
            margin-top: 0.15rem;
        }
        .msg-attachment-action {
            font-size: 1rem;
            color: var(--accent);
            font-weight: 700;
        }

        
        .msg-action-card {
            margin-top: 1rem;
            padding: 1rem 1.2rem;
            background: linear-gradient(135deg, rgba(0,163,255,0.06) 0%, rgba(0,163,255,0.02) 100%);
            border: 1px solid var(--accent);
            display: flex; justify-content: space-between;
            align-items: center; gap: 1rem;
            flex-wrap: wrap;
        }
        .msg-action-title {
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--accent);
            margin-bottom: 0.3rem;
        }
        .msg-action-desc {
            font-size: 0.72rem;
            color: var(--text);
            line-height: 1.5;
        }
        .msg-action-btns {
            display: flex; gap: 0.5rem;
        }
        .msg-action-btn {
            padding: 0.65rem 1.1rem;
            font-family: 'Inter', sans-serif;
            font-size: 0.7rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06rem;
            cursor: pointer;
            border: 1px solid var(--border);
            background: #fff;
            color: var(--text);
            transition: all 0.2s;
        }
        .msg-action-btn:hover { border-color: var(--text); }
        .msg-action-btn.primary {
            background: var(--accent);
            color: #fff;
            border-color: var(--accent);
        }
        .msg-action-btn.primary:hover { background: #008be0; }
        .msg-action-completed {
            margin-top: 0.8rem;
            padding: 0.5rem 0.9rem;
            background: rgba(40,205,65,0.08);
            color: #28CD41;
            font-size: 0.72rem;
            font-weight: 600;
            display: inline-block;
        }

        .inbox-empty {
            display: flex; flex-direction: column;
            align-items: center; justify-content: center;
            height: 100%; min-height: 300px;
            color: var(--gray);
            font-size: 0.85rem;
            text-align: center;
            padding: 2rem;
            font-weight: 300;
        }

        
        #composer-modal .account-modal-content {
            width: 720px;
        }

        .comp-type-bar {
            display: flex; gap: 0.4rem;
            margin-bottom: 1.2rem;
            flex-wrap: wrap;
        }
        .comp-type-btn {
            padding: 0.55rem 0.85rem;
            background: #fff;
            border: 1px solid var(--border);
            font-family: 'Inter', sans-serif;
            font-size: 0.68rem;
            font-weight: 600;
            color: var(--gray);
            cursor: pointer;
            display: inline-flex; align-items: center; gap: 0.4rem;
            transition: all 0.2s;
        }
        .comp-type-btn:hover { color: var(--text); border-color: var(--text); }
        .comp-type-btn.active {
            background: var(--accent);
            color: #fff;
            border-color: var(--accent);
        }

        .comp-drop-zone {
            border: 2px dashed var(--border);
            background: #fafafa;
            padding: 1.2rem;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s;
        }
        body.dark-mode .comp-drop-zone { background: rgba(255,255,255,0.02); }
        .comp-drop-zone:hover, .comp-drop-zone.dragover {
            border-color: var(--accent);
            background: rgba(0,163,255,0.04);
        }
        .comp-drop-zone-text {
            font-size: 0.78rem;
            color: var(--gray);
            font-weight: 300;
        }

        .comp-attachment-item {
            display: grid;
            grid-template-columns: 28px 1fr auto;
            gap: 0.7rem;
            align-items: center;
            padding: 0.6rem 0.85rem;
            background: #fafafa;
            border: 1px solid var(--border);
            margin-top: 0.4rem;
        }
        body.dark-mode .comp-attachment-item { background: rgba(255,255,255,0.02); }
        .comp-attachment-icon { font-size: 1rem; }
        .comp-attachment-name {
            font-size: 0.75rem;
            font-weight: 500;
        }
        .comp-attachment-size {
            font-size: 0.62rem;
            color: var(--gray);
            margin-top: 0.15rem;
        }
        .comp-attachment-remove {
            cursor: pointer;
            color: var(--gray);
            font-size: 1.2rem;
            font-weight: 600;
            padding: 0 0.3rem;
            border: 0;
            background: transparent;
            font-family: inherit;
        }
        .comp-attachment-remove:hover { color: #e53e3e; }



        

        
        .legal-layout {
            max-width: 1200px;
            margin: 0 auto;
            padding: 3rem 2rem 4rem;
            display: grid;
            grid-template-columns: 240px 1fr;
            gap: 3rem;
        }
        .legal-sidebar {
            position: sticky;
            top: 100px;
            align-self: start;
        }
        .legal-sidebar-title {
            font-size: 0.65rem;
            text-transform: uppercase;
            letter-spacing: 0.12rem;
            color: var(--gray);
            margin-bottom: 1rem;
            font-weight: 600;
        }
        .legal-nav-item {
            display: block;
            padding: 0.7rem 0.95rem;
            margin-bottom: 0.2rem;
            font-size: 0.78rem;
            color: var(--text);
            cursor: pointer;
            border-left: 2px solid transparent;
            transition: all 0.2s;
            font-weight: 400;
        }
        .legal-nav-item:hover {
            background: var(--surface-alt);
            border-left-color: var(--gray);
        }
        .legal-nav-item.active {
            background: var(--surface-alt);
            border-left-color: var(--accent);
            color: var(--accent);
            font-weight: 600;
        }

        .legal-content {
            background: #fff;
            border: 1px solid var(--border);
            padding: 3rem 3.5rem;
            max-width: 760px;
        }
        body.dark-mode .legal-content { background: var(--surface); }

        .legal-content h1 {
            font-size: 1.8rem;
            font-weight: 500;
            margin-bottom: 0.5rem;
            letter-spacing: -0.02rem;
        }
        .legal-content .legal-subtitle {
            font-size: 0.85rem;
            color: var(--gray);
            margin-bottom: 2.5rem;
            font-weight: 300;
        }
        .legal-content h2 {
            font-size: 1.15rem;
            font-weight: 600;
            margin-top: 2.5rem;
            margin-bottom: 1rem;
            color: var(--text);
            letter-spacing: -0.01rem;
        }
        .legal-content h2:first-of-type { margin-top: 0; }
        .legal-content h3 {
            font-size: 0.92rem;
            font-weight: 600;
            margin-top: 1.5rem;
            margin-bottom: 0.6rem;
            color: var(--text);
        }
        .legal-content h4 {
            font-size: 0.82rem;
            font-weight: 600;
            margin-top: 1.2rem;
            margin-bottom: 0.5rem;
            color: var(--gray);
        }
        .legal-content p {
            font-size: 0.85rem;
            line-height: 1.65;
            color: var(--text);
            margin-bottom: 1rem;
            font-weight: 300;
        }
        .legal-content ul, .legal-content ol {
            padding-left: 1.5rem;
            margin-bottom: 1rem;
        }
        .legal-content li {
            font-size: 0.85rem;
            line-height: 1.65;
            color: var(--text);
            margin-bottom: 0.4rem;
            font-weight: 300;
        }
        .legal-content strong { font-weight: 600; }
        .legal-content a { color: var(--accent); text-decoration: none; }
        .legal-content a:hover { text-decoration: underline; }
        .legal-content .legal-emphasis-uppercase {
            text-transform: uppercase;
            font-size: 0.75rem;
            line-height: 1.7;
            letter-spacing: 0.02rem;
            background: var(--surface-alt);
            padding: 1rem 1.2rem;
            border-left: 3px solid var(--accent);
            margin: 1rem 0;
            font-weight: 400;
        }
        .legal-content .legal-info-box {
            background: rgba(0, 163, 255, 0.05);
            border-left: 3px solid var(--accent);
            padding: 1rem 1.3rem;
            margin: 1.2rem 0;
            font-size: 0.78rem;
            line-height: 1.6;
        }
        .legal-content .legal-warning-box {
            background: rgba(255, 204, 0, 0.08);
            border-left: 3px solid #FFCC00;
            padding: 1rem 1.3rem;
            margin: 1.2rem 0;
            font-size: 0.78rem;
            line-height: 1.6;
            color: #8a6800;
        }
        body.dark-mode .legal-content .legal-warning-box { color: #ffdd55; }
        .legal-content .legal-address {
            background: var(--surface-alt);
            padding: 1rem 1.3rem;
            margin: 0.8rem 0 1.2rem;
            font-family: 'Inter', sans-serif;
            font-size: 0.82rem;
            line-height: 1.6;
            font-weight: 400;
        }
        .legal-content .legal-meta {
            font-size: 0.72rem;
            color: var(--gray);
            margin-top: 3rem;
            padding-top: 1.5rem;
            border-top: 1px solid var(--border);
            font-style: italic;
        }

        
        .app-footer {
            background: var(--surface-alt);
            border-top: 1px solid var(--border);
            padding: 2.5rem 2rem 2rem;
            margin-top: 4rem;
        }
        body.dark-mode .app-footer { background: rgba(255, 255, 255, 0.02); }
        .app-footer-inner {
            max-width: 1400px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            gap: 2.5rem;
            padding-bottom: 2rem;
            border-bottom: 1px solid var(--border);
        }
        .app-footer-col h4 {
            font-size: 0.65rem;
            text-transform: uppercase;
            letter-spacing: 0.12rem;
            font-weight: 700;
            color: var(--gray);
            margin-bottom: 1rem;
        }
        .app-footer-col a, .app-footer-col span.footer-link {
            display: block;
            font-size: 0.78rem;
            color: var(--text);
            padding: 0.3rem 0;
            cursor: pointer;
            text-decoration: none;
            transition: color 0.2s;
        }
        .app-footer-col a:hover, .app-footer-col span.footer-link:hover {
            color: var(--accent);
        }
        .app-footer-bottom {
            max-width: 1400px;
            margin: 0 auto;
            padding-top: 1.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
            flex-wrap: wrap;
        }
        .app-footer-copyright {
            font-size: 0.72rem;
            color: var(--gray);
            font-weight: 300;
        }
        .app-footer-meta {
            display: flex;
            gap: 1.2rem;
            font-size: 0.7rem;
            color: var(--gray);
        }
        .app-footer-meta span {
            cursor: pointer;
        }
        .app-footer-meta span:hover { color: var(--accent); }

        
        .cookie-banner {
            position: fixed;
            bottom: 0; left: 0; right: 0;
            background: #1a1a1a;
            color: #fff;
            padding: 1.5rem 2rem;
            z-index: 9999;
            box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
            display: none;
        }
        .cookie-banner.show { display: block; }
        .cookie-banner-inner {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 2rem;
            align-items: center;
        }
        @media (max-width: 768px) {
            .cookie-banner-inner { grid-template-columns: 1fr; }
        }
        .cookie-banner-text {
            font-size: 0.78rem;
            line-height: 1.55;
            color: #e0e0e0;
        }
        .cookie-banner-text strong {
            color: #fff;
            font-weight: 600;
            display: block;
            margin-bottom: 0.4rem;
            font-size: 0.92rem;
        }
        .cookie-banner-text a {
            color: var(--accent);
            text-decoration: underline;
            cursor: pointer;
        }
        .cookie-banner-buttons {
            display: flex;
            gap: 0.6rem;
            flex-wrap: wrap;
        }
        .cookie-btn {
            padding: 0.7rem 1.3rem;
            font-family: inherit;
            font-size: 0.7rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0;
            cursor: pointer;
            border: 1px solid #444;
            background: transparent;
            color: var(--text);
            transition: all 0.2s;
            white-space: nowrap;
        }
        .cookie-btn:hover { border-color: #fff; }
        .cookie-btn.primary {
            background: var(--accent);
            border-color: var(--accent);
            color: #fff;
        }
        .cookie-btn.primary:hover { background: #008be0; }

        
        .cookie-settings-modal {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.7);
            z-index: 10000;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 2rem;
        }
        .cookie-settings-modal.show { display: flex; }
        .cookie-settings-content {
            background: #fff;
            max-width: 560px;
            width: 100%;
            max-height: 85vh;
            overflow-y: auto;
            padding: 2.5rem;
        }
        body.dark-mode .cookie-settings-content { background: var(--surface); }
        .cookie-settings-content h3 {
            margin: 0 0 0.5rem;
            font-size: 1.25rem;
            font-weight: 500;
        }
        .cookie-settings-content > p {
            font-size: 0.82rem;
            color: var(--gray);
            margin-bottom: 1.5rem;
            font-weight: 300;
        }
        .cookie-category {
            border: 1px solid var(--border);
            padding: 1rem 1.2rem;
            margin-bottom: 0.7rem;
        }
        .cookie-category-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
            margin-bottom: 0.4rem;
        }
        .cookie-category-name {
            font-size: 0.85rem;
            font-weight: 600;
        }
        .cookie-category-desc {
            font-size: 0.72rem;
            color: var(--gray);
            line-height: 1.5;
        }
        .cookie-toggle {
            position: relative;
            width: 40px; height: 22px;
            background: var(--border);
            cursor: pointer;
            transition: background 0.2s;
            flex-shrink: 0;
        }
        .cookie-toggle::after {
            content: '';
            position: absolute;
            top: 2px; left: 2px;
            width: 18px; height: 18px;
            background: #fff;
            transition: transform 0.2s;
        }
        .cookie-toggle.on { background: var(--accent); }
        .cookie-toggle.on::after { transform: translateX(18px); }
        .cookie-toggle.locked {
            background: var(--accent);
            opacity: 0.5;
            cursor: not-allowed;
        }
        .cookie-toggle.locked::after { transform: translateX(18px); }
        .cookie-settings-actions {
            display: flex;
            justify-content: space-between;
            gap: 0.8rem;
            margin-top: 1.5rem;
            flex-wrap: wrap;
        }
        .cookie-settings-actions button {
            padding: 0.8rem 1.3rem;
            font-family: 'Inter', sans-serif;
            font-size: 0.7rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08rem;
            cursor: pointer;
            border: 1px solid var(--border);
            background: #fff;
            color: var(--text);
            flex: 1;
            white-space: nowrap;
        }
        .cookie-settings-actions button:hover { border-color: var(--text); }
        .cookie-settings-actions button.primary {
            background: var(--accent);
            color: #fff;
            border-color: var(--accent);
        }

        @media (max-width: 900px) {
            .legal-layout { grid-template-columns: 1fr; gap: 2rem; padding: 2rem 1rem; }
            .legal-sidebar { position: relative; top: 0; }
            .legal-content { padding: 2rem 1.5rem; }
            .app-footer-inner { grid-template-columns: 1fr 1fr; gap: 2rem; }
        }


        

        
        .support-fab {
            position: fixed;
            bottom: 1.5rem;
            right: 1.5rem;
            width: 52px;
            height: 52px;
            border-radius: 50%;
            background: var(--accent);
            color: #fff;
            border: none;
            cursor: pointer;
            box-shadow: 0 4px 20px rgba(0, 163, 255, 0.35);
            z-index: 996;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
            font-family: 'Inter', sans-serif;
        }
        .support-fab:hover {
            transform: scale(1.06);
            box-shadow: 0 6px 28px rgba(0, 163, 255, 0.5);
        }
        .support-fab svg {
            width: 24px;
            height: 24px;
            stroke-width: 1.8;
        }
        .support-fab-label {
            position: absolute;
            right: 70px;
            background: var(--text);
            color: var(--bg);
            padding: 0.5rem 0.9rem;
            font-size: 0.72rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.08rem;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.2s, transform 0.2s;
            transform: translateX(10px);
        }
        .support-fab:hover .support-fab-label {
            opacity: 1;
            transform: translateX(0);
        }
        @media (max-width: 700px) {
            .support-fab { width: 44px; height: 44px; bottom: 1rem; right: 1rem; }
            .support-fab svg { width: 20px; height: 20px; }
            .support-fab-label { display: none; }
        }

        
        .support-fab-dot {
            position: absolute;
            top: 4px; right: 4px;
            width: 12px; height: 12px;
            background: #e53e3e;
            border-radius: 50%;
            border: 2px solid var(--accent);
            display: none;
        }
        .support-fab.has-update .support-fab-dot { display: block; }

        
        .support-menu {
            position: fixed;
            bottom: 5.5rem;
            right: 1.5rem;
            background: #fff;
            border: 1px solid var(--border);
            min-width: 280px;
            box-shadow: 0 12px 40px rgba(0,0,0,0.15);
            z-index: 997;
            display: none;
            overflow: hidden;
        }
        body.dark-mode .support-menu { background: var(--surface); }
        .support-menu.show {
            display: block;
            animation: supportMenuIn 0.18s ease-out;
        }
        @keyframes supportMenuIn {
            from { opacity: 0; transform: translateY(8px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .support-menu-header {
            padding: 1.1rem 1.3rem 0.8rem;
            border-bottom: 1px solid var(--border);
            background: var(--surface-alt);
        }
        body.dark-mode .support-menu-header { background: rgba(255,255,255,0.03); }
        .support-menu-title {
            font-size: 0.95rem;
            font-weight: 600;
            margin-bottom: 0.2rem;
        }
        .support-menu-subtitle {
            font-size: 0.7rem;
            color: var(--gray);
            font-weight: 300;
        }
        .support-menu-item {
            padding: 0.9rem 1.3rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 0.85rem;
            transition: background 0.15s;
            border-bottom: 1px solid var(--border);
        }
        .support-menu-item:last-child { border-bottom: none; }
        .support-menu-item:hover { background: var(--surface-alt); }
        .support-menu-item-icon {
            width: 36px; height: 36px;
            display: flex; align-items: center; justify-content: center;
            background: rgba(0, 163, 255, 0.08);
            color: var(--accent);
            flex-shrink: 0;
        }
        .support-menu-item-icon svg { width: 18px; height: 18px; }
        .support-menu-item-text { flex: 1; min-width: 0; }
        .support-menu-item-title {
            font-size: 0.82rem;
            font-weight: 600;
            color: var(--text);
            margin-bottom: 0.15rem;
        }
        .support-menu-item-desc {
            font-size: 0.65rem;
            color: var(--gray);
            line-height: 1.4;
        }
        .support-menu-item-badge {
            background: #28CD41;
            color: #fff;
            font-size: 0.55rem;
            font-weight: 700;
            padding: 0.15rem 0.5rem;
            text-transform: uppercase;
            letter-spacing: 0.05rem;
            margin-left: 0.5rem;
            flex-shrink: 0;
        }

        
        .booking-modal {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.6);
            z-index: 10000;
            display: none;
            align-items: flex-start;
            justify-content: center;
            overflow-y: auto;
            padding: 3rem 1rem;
        }
        .booking-modal.show { display: flex; }
        .booking-modal-content {
            background: #fff;
            max-width: 720px;
            width: 100%;
            position: relative;
        }
        body.dark-mode .booking-modal-content { background: var(--surface); }

        .booking-modal-close {
            position: absolute;
            top: 1.2rem; right: 1.2rem;
            width: 32px; height: 32px;
            background: var(--surface-alt);
            border: none;
            cursor: pointer;
            font-size: 1.1rem;
            color: var(--gray);
            display: flex; align-items: center; justify-content: center;
            transition: all 0.2s;
            z-index: 2;
        }
        .booking-modal-close:hover { background: var(--text); color: #fff; }

        .booking-header {
            padding: 2.2rem 2.5rem 1.5rem;
            border-bottom: 1px solid var(--border);
        }
        .booking-header-label {
            font-size: 0.65rem;
            text-transform: uppercase;
            letter-spacing: 0.12rem;
            color: var(--accent);
            font-weight: 700;
            margin-bottom: 0.5rem;
        }
        .booking-header h2 {
            margin: 0;
            font-size: 1.4rem;
            font-weight: 500;
            letter-spacing: -0.01rem;
        }
        .booking-header p {
            margin-top: 0.4rem;
            font-size: 0.78rem;
            color: var(--gray);
            font-weight: 300;
        }

        
        .booking-steps {
            display: flex;
            gap: 0.5rem;
            padding: 1rem 2.5rem;
            background: var(--surface-alt);
            border-bottom: 1px solid var(--border);
            font-size: 0.65rem;
            text-transform: uppercase;
            letter-spacing: 0.08rem;
            font-weight: 600;
            color: var(--gray);
        }
        body.dark-mode .booking-steps { background: rgba(255,255,255,0.02); }
        .booking-step {
            display: flex;
            align-items: center;
            gap: 0.4rem;
        }
        .booking-step .step-num {
            width: 18px; height: 18px;
            background: var(--border);
            color: var(--text);
            display: flex; align-items: center; justify-content: center;
            font-size: 0.62rem;
            font-weight: 700;
        }
        .booking-step.active .step-num {
            background: var(--accent);
            color: #fff;
        }
        .booking-step.active { color: var(--text); }
        .booking-step.done .step-num {
            background: #28CD41;
            color: #fff;
        }
        .booking-step.done { color: #28CD41; }
        .booking-step-sep { color: var(--border); margin: 0 0.2rem; }

        .booking-body {
            padding: 2rem 2.5rem 2.5rem;
        }

        
        .meeting-type-list {
            display: grid;
            grid-template-columns: 1fr;
            gap: 0.8rem;
        }
        .meeting-type-card {
            border: 1px solid var(--border);
            padding: 1.3rem 1.5rem;
            cursor: pointer;
            transition: all 0.2s;
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 1rem;
            align-items: center;
        }
        .meeting-type-card:hover {
            border-color: var(--accent);
            background: rgba(0, 163, 255, 0.02);
        }
        .meeting-type-card.featured {
            background: linear-gradient(135deg, rgba(40, 205, 65, 0.04), rgba(0, 163, 255, 0.02));
            border-color: rgba(40, 205, 65, 0.4);
        }
        .meeting-type-card.featured:hover {
            border-color: #28CD41;
        }
        .meeting-type-card.disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        .meeting-type-card.disabled:hover { border-color: var(--border); background: #fff; }
        body.dark-mode .meeting-type-card.disabled:hover { background: var(--surface); }
        .meeting-type-name {
            font-size: 0.95rem;
            font-weight: 600;
            margin-bottom: 0.3rem;
            display: flex;
            align-items: center;
            gap: 0.6rem;
        }
        .meeting-type-badge {
            background: #28CD41;
            color: #fff;
            font-size: 0.55rem;
            font-weight: 700;
            padding: 0.2rem 0.55rem;
            text-transform: uppercase;
            letter-spacing: 0.06rem;
        }
        .meeting-type-badge.warning {
            background: #FFCC00;
            color: #6b5500;
        }
        .meeting-type-desc {
            font-size: 0.75rem;
            color: var(--gray);
            line-height: 1.5;
            font-weight: 300;
        }
        .meeting-type-meta {
            font-size: 0.7rem;
            color: var(--text);
            margin-top: 0.4rem;
            display: flex;
            gap: 1rem;
            font-weight: 400;
        }
        .meeting-type-meta strong { font-weight: 600; }
        .meeting-type-price {
            text-align: right;
            min-width: 80px;
        }
        .meeting-type-price-val {
            font-size: 1.5rem;
            font-weight: 500;
            color: var(--text);
            letter-spacing: -0.01rem;
        }
        .meeting-type-price-val.free {
            color: #28CD41;
            font-size: 1.1rem;
            font-weight: 600;
        }
        .meeting-type-price-suffix {
            font-size: 0.6rem;
            color: var(--gray);
            text-transform: uppercase;
            letter-spacing: 0.08rem;
            font-weight: 600;
            margin-top: 0.1rem;
        }

        
        .booking-picker-layout {
            display: grid;
            grid-template-columns: 200px 1fr;
            gap: 1.5rem;
        }
        @media (max-width: 600px) {
            .booking-picker-layout { grid-template-columns: 1fr; }
        }
        .booking-picker-label {
            font-size: 0.62rem;
            text-transform: uppercase;
            letter-spacing: 0.1rem;
            color: var(--gray);
            font-weight: 700;
            margin-bottom: 0.7rem;
        }
        .date-list {
            display: flex;
            flex-direction: column;
            gap: 0.3rem;
            max-height: 320px;
            overflow-y: auto;
        }
        @media (max-width: 600px) {
            .date-list { flex-direction: row; max-height: none; overflow-x: auto; }
        }
        .date-option {
            padding: 0.7rem 0.9rem;
            border: 1px solid var(--border);
            cursor: pointer;
            transition: all 0.15s;
            background: #fff;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        body.dark-mode .date-option { background: var(--surface); }
        @media (max-width: 600px) {
            .date-option { flex-direction: column; min-width: 100px; text-align: center; }
        }
        .date-option:hover { border-color: var(--accent); }
        .date-option.active {
            background: var(--accent);
            color: #fff;
            border-color: var(--accent);
        }
        .date-option.weekend { opacity: 0.4; cursor: not-allowed; }
        .date-option-day {
            font-size: 0.62rem;
            text-transform: uppercase;
            letter-spacing: 0.08rem;
            font-weight: 700;
            opacity: 0.7;
        }
        .date-option-date {
            font-size: 0.85rem;
            font-weight: 600;
        }
        .time-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
            gap: 0.4rem;
        }
        .time-slot {
            padding: 0.7rem 0.5rem;
            border: 1px solid var(--border);
            background: #fff;
            font-size: 0.75rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.15s;
            text-align: center;
        }
        body.dark-mode .time-slot { background: var(--surface); }
        .time-slot:hover { border-color: var(--accent); }
        .time-slot.active {
            background: var(--accent);
            color: #fff;
            border-color: var(--accent);
        }
        .time-slot.booked {
            opacity: 0.35;
            cursor: not-allowed;
            text-decoration: line-through;
        }
        .time-slot.booked:hover { border-color: var(--border); }

        
        .booking-form-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
        }
        @media (max-width: 600px) {
            .booking-form-grid { grid-template-columns: 1fr; }
        }
        .booking-form-field {
            display: flex;
            flex-direction: column;
            gap: 0.4rem;
        }
        .booking-form-field.full { grid-column: 1 / -1; }
        .booking-form-field label {
            font-size: 0.65rem;
            text-transform: uppercase;
            letter-spacing: 0.1rem;
            color: var(--gray);
            font-weight: 600;
        }
        .booking-form-field input,
        .booking-form-field textarea,
        .booking-form-field select {
            padding: 0.7rem 0.9rem;
            border: 1px solid var(--border);
            background: #fff;
            font-family: 'Inter', sans-serif;
            font-size: 0.82rem;
            outline: none;
            transition: border-color 0.15s;
        }
        body.dark-mode .booking-form-field input,
        body.dark-mode .booking-form-field textarea,
        body.dark-mode .booking-form-field select { background: var(--surface); color: var(--text); }
        .booking-form-field input:focus,
        .booking-form-field textarea:focus { border-color: var(--accent); }
        .booking-form-field textarea {
            resize: vertical;
            min-height: 80px;
            line-height: 1.5;
        }

        
        .booking-success {
            text-align: center;
            padding: 2rem 1rem;
        }
        .booking-success-icon {
            width: 64px; height: 64px;
            background: rgba(40, 205, 65, 0.1);
            color: #28CD41;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1.5rem;
            font-size: 1.8rem;
            font-weight: 300;
        }
        .booking-success h3 {
            font-size: 1.3rem;
            font-weight: 500;
            margin-bottom: 0.5rem;
            letter-spacing: -0.01rem;
        }
        .booking-success-detail {
            margin: 1.5rem auto;
            max-width: 360px;
            background: var(--surface-alt);
            padding: 1.2rem 1.4rem;
            border-left: 3px solid var(--accent);
            text-align: left;
        }
        body.dark-mode .booking-success-detail { background: rgba(255,255,255,0.03); }
        .booking-success-row {
            display: flex;
            justify-content: space-between;
            padding: 0.4rem 0;
            font-size: 0.78rem;
            border-bottom: 1px solid var(--border);
        }
        .booking-success-row:last-child { border-bottom: none; }
        .booking-success-row-label {
            color: var(--gray);
            font-weight: 400;
        }
        .booking-success-row-value {
            font-weight: 600;
        }
        .booking-success-actions {
            display: flex;
            justify-content: center;
            gap: 0.6rem;
            margin-top: 1.5rem;
            flex-wrap: wrap;
        }
        .booking-success-actions button {
            padding: 0.8rem 1.4rem;
            font-family: 'Inter', sans-serif;
            font-size: 0.7rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08rem;
            cursor: pointer;
            border: 1px solid var(--border);
            background: #fff;
            color: var(--text);
            transition: all 0.2s;
        }
        body.dark-mode .booking-success-actions button { background: var(--surface); color: var(--text); }
        .booking-success-actions button:hover { border-color: var(--text); }
        .booking-success-actions button.primary {
            background: var(--accent);
            color: #fff;
            border-color: var(--accent);
        }

        
        .booking-footer {
            display: flex;
            justify-content: space-between;
            gap: 0.8rem;
            padding: 1.3rem 2.5rem;
            border-top: 1px solid var(--border);
            background: var(--surface-alt);
        }
        body.dark-mode .booking-footer { background: rgba(255,255,255,0.02); }
        .booking-footer-btn {
            padding: 0.85rem 1.6rem;
            font-family: 'Inter', sans-serif;
            font-size: 0.7rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08rem;
            cursor: pointer;
            border: 1px solid var(--border);
            background: #fff;
            color: var(--text);
            transition: all 0.2s;
        }
        body.dark-mode .booking-footer-btn { background: var(--surface); color: var(--text); }
        .booking-footer-btn:hover:not(:disabled) { border-color: var(--text); }
        .booking-footer-btn:disabled { opacity: 0.4; cursor: not-allowed; }
        .booking-footer-btn.primary {
            background: var(--accent);
            color: #fff;
            border-color: var(--accent);
        }
        .booking-footer-btn.primary:hover:not(:disabled) { background: #008be0; }




        

        
        body.dark-mode .inbox-filter {
            background: var(--surface);
            color: var(--gray);
            border-color: var(--border);
        }
        body.dark-mode .inbox-filter:hover { color: var(--text); border-color: var(--gray); }
        body.dark-mode .inbox-filter.active {
            background: var(--accent);
            color: #fff;
            border-color: var(--accent);
        }
        body.dark-mode .inbox-filter .num {
            background: rgba(255, 255, 255, 0.06);
            color: var(--text);
        }
        body.dark-mode .inbox-filter.active .num {
            background: rgba(255, 255, 255, 0.2);
            color: #fff;
        }

        
        body.dark-mode .inbox-thread-item.unread {
            background: rgba(0, 163, 255, 0.06);
        }
        body.dark-mode .inbox-thread-item:hover { background: rgba(45, 177, 255, 0.05); }
        body.dark-mode .inbox-thread-item.active {
            background: rgba(45, 177, 255, 0.12);
        }
        body.dark-mode .inbox-thread-item { border-bottom-color: var(--border); }

        
        body.dark-mode .msg-bubble {
            background: var(--surface);
            border-color: var(--border);
        }
        body.dark-mode .msg-bubble.from-customer {
            background: rgba(45, 177, 255, 0.06);
            border-color: rgba(45, 177, 255, 0.25);
        }
        body.dark-mode .msg-attachment {
            background: var(--surface-alt);
            border-color: var(--border);
        }
        body.dark-mode .msg-attachment:hover { border-color: var(--accent); }

        
        body.dark-mode .msg-action-btn {
            background: var(--surface);
            color: var(--text);
            border-color: var(--border);
        }
        body.dark-mode .msg-action-btn:hover { border-color: var(--gray); }
        

        
        body.dark-mode .comp-type-btn {
            background: var(--surface);
            color: var(--gray);
            border-color: var(--border);
        }
        body.dark-mode .comp-type-btn:hover { color: var(--text); border-color: var(--gray); }
        body.dark-mode .comp-type-btn.active {
            background: var(--accent);
            color: #fff;
            border-color: var(--accent);
        }

        
        body.dark-mode .cookie-settings-actions button {
            background: var(--surface);
            color: var(--text);
            border-color: var(--border);
        }
        body.dark-mode .cookie-settings-actions button:hover { border-color: var(--gray); }
        body.dark-mode .cookie-settings-actions button.primary {
            background: var(--accent);
            color: #fff;
            border-color: var(--accent);
        }
        body.dark-mode .cookie-category {
            border-color: var(--border);
        }
        body.dark-mode .cookie-toggle {
            background: var(--border);
        }
        body.dark-mode .cookie-toggle::after {
            background: #f0f0f0;
        }

        
        body.dark-mode .cookie-btn {
            background: transparent;
            border-color: #555;
        }
        body.dark-mode .cookie-btn:hover { border-color: #fff; }

        
        body.dark-mode .legal-nav-item:hover {
            background: var(--surface-alt);
        }
        body.dark-mode .legal-nav-item.active {
            background: var(--surface-alt);
            border-left-color: var(--accent);
            color: var(--accent);
        }

        
        body.dark-mode .legal-content .legal-emphasis-uppercase {
            background: var(--surface-alt);
        }
        body.dark-mode .legal-content .legal-address {
            background: var(--surface-alt);
        }
        body.dark-mode .legal-content .legal-warning-box {
            background: rgba(255, 204, 0, 0.06);
            color: #ffdd66;
        }
        body.dark-mode .legal-content .legal-info-box {
            background: rgba(45, 177, 255, 0.06);
        }

        
        body.dark-mode .meeting-type-card {
            background: var(--surface);
            border-color: var(--border);
        }
        body.dark-mode .meeting-type-card:hover {
            border-color: var(--accent);
            background: rgba(45, 177, 255, 0.04);
        }
        body.dark-mode .meeting-type-card.featured {
            background: linear-gradient(135deg, rgba(40, 205, 65, 0.06), rgba(45, 177, 255, 0.04));
            border-color: rgba(40, 205, 65, 0.35);
        }
        body.dark-mode .meeting-type-card.featured:hover {
            border-color: #28CD41;
        }
        body.dark-mode .meeting-type-card.disabled {
            opacity: 0.4;
        }
        body.dark-mode .meeting-type-card.disabled:hover {
            border-color: var(--border);
            background: var(--surface);
        }

        
        body.dark-mode .date-option {
            background: var(--surface);
            border-color: var(--border);
            color: var(--text);
        }
        body.dark-mode .date-option:hover { border-color: var(--accent); }
        body.dark-mode .date-option.active {
            background: var(--accent);
            color: #fff;
            border-color: var(--accent);
        }
        body.dark-mode .time-slot {
            background: var(--surface);
            border-color: var(--border);
            color: var(--text);
        }
        body.dark-mode .time-slot:hover { border-color: var(--accent); }
        body.dark-mode .time-slot.active {
            background: var(--accent);
            color: #fff;
            border-color: var(--accent);
        }
        body.dark-mode .time-slot.booked:hover { border-color: var(--border); }

        
        body.dark-mode .booking-form-field input,
        body.dark-mode .booking-form-field textarea,
        body.dark-mode .booking-form-field select {
            background: var(--surface);
            color: var(--text);
            border-color: var(--border);
        }
        body.dark-mode .booking-form-field input:focus,
        body.dark-mode .booking-form-field textarea:focus,
        body.dark-mode .booking-form-field select:focus { border-color: var(--accent); }

        
        body.dark-mode .booking-footer-btn {
            background: var(--surface);
            color: var(--text);
            border-color: var(--border);
        }
        body.dark-mode .booking-footer-btn:hover:not(:disabled) { border-color: var(--gray); }
        body.dark-mode .booking-footer-btn.primary {
            background: var(--accent);
            color: #fff;
            border-color: var(--accent);
        }
        body.dark-mode .booking-success-actions button {
            background: var(--surface);
            color: var(--text);
            border-color: var(--border);
        }
        body.dark-mode .booking-success-actions button.primary {
            background: var(--accent);
            color: #fff;
            border-color: var(--accent);
        }

        
        body.dark-mode .booking-modal-close {
            background: var(--surface-alt);
            color: var(--gray);
        }
        body.dark-mode .booking-modal-close:hover {
            background: var(--accent);
            color: #fff;
        }

        
        body.dark-mode .support-menu {
            border-color: var(--border);
        }
        body.dark-mode .support-menu-item:hover {
            background: var(--surface-alt);
        }
        body.dark-mode .support-menu-item {
            border-bottom-color: var(--border);
        }
        body.dark-mode .support-menu-item-icon {
            background: rgba(45, 177, 255, 0.1);
        }


        
        body.dark-mode .app-footer {
            background: var(--surface);
            border-top-color: var(--border);
        }
        body.dark-mode .app-footer-col a,
        body.dark-mode .app-footer-col span.footer-link {
            color: var(--text);
        }
        body.dark-mode .app-footer-col a:hover,
        body.dark-mode .app-footer-col span.footer-link:hover {
            color: var(--accent);
        }
        body.dark-mode .app-footer-bottom { border-top-color: var(--border); }

        
        body.dark-mode .comp-drop-zone {
            background: var(--surface);
            border-color: var(--border);
        }
        body.dark-mode .comp-drop-zone:hover,
        body.dark-mode .comp-drop-zone.dragover {
            border-color: var(--accent);
            background: rgba(45, 177, 255, 0.04);
        }
        body.dark-mode .comp-attachment-item {
            background: var(--surface);
            border-color: var(--border);
        }

        
        body.dark-mode #account-inbox-nav-badge {
            background: #e53e3e;
            color: #fff;
        }

        
        body.dark-mode .inbox-layout {
            background: var(--surface);
            border-color: var(--border);
        }
        body.dark-mode .inbox-thread-list {
            background: rgba(255, 255, 255, 0.015);
            border-right-color: var(--border);
        }
        body.dark-mode .inbox-thread-detail {
            background: var(--surface);
        }
        body.dark-mode .inbox-thread-header {
            background: rgba(255, 255, 255, 0.02);
            border-bottom-color: var(--border);
        }
        body.dark-mode .inbox-messages { background: transparent; }



        

        
        
        body.dark-mode .project-status-tab {
            color: var(--gray);
        }
        body.dark-mode .project-status-tab:hover { color: var(--text); }
        body.dark-mode .project-status-tab.active {
            color: var(--accent);
            border-bottom-color: var(--accent);
        }
        body.dark-mode .project-status-tab .ps-tab-count {
            background: var(--surface-alt);
            color: var(--text);
        }
        body.dark-mode .project-status-tab.active .ps-tab-count {
            background: var(--accent);
            color: #fff;
        }
        
        body.dark-mode .project-status-tab .count-badge {
            background: var(--surface-alt);
            color: var(--text);
        }
        body.dark-mode .project-status-tab.active .count-badge {
            background: var(--accent);
            color: #fff;
        }
        
        body.dark-mode .project-status-tab span,
        body.dark-mode .project-status-tab [class*="count"],
        body.dark-mode .project-status-tab [class*="badge"] {
            background: var(--surface-alt);
            color: var(--text);
        }
        body.dark-mode .project-status-tab.active span,
        body.dark-mode .project-status-tab.active [class*="count"],
        body.dark-mode .project-status-tab.active [class*="badge"] {
            background: var(--accent);
            color: #fff;
        }

        
        body.dark-mode .view-mode-btn {
            background: var(--surface);
            color: var(--gray);
            border-color: var(--border);
        }
        body.dark-mode .view-mode-btn:hover { color: var(--text); }
        body.dark-mode .view-mode-btn.active {
            background: var(--accent);
            color: #fff;
            border-color: var(--accent);
        }

        
        body.dark-mode .pers-mini-btn:hover {
            background: var(--accent);
            color: #fff;
        }
        body.dark-mode .pers-template-btn:hover {
            background: var(--accent);
            color: #fff;
        }
        body.dark-mode .label-skip-toggle:hover {
            background: var(--surface-alt);
            color: var(--text);
        }
        body.dark-mode .roster-save-btn {
            background: var(--accent);
            color: #fff;
            border-color: var(--accent);
        }
        body.dark-mode .roster-save-btn:hover { background: #008be0; }

        
        body.dark-mode .why-modal-close {
            background: var(--surface-alt);
            color: var(--text);
        }
        body.dark-mode .why-modal-close:hover {
            background: var(--accent);
            color: #fff;
        }
        
        body.dark-mode .account-dd-avatar {
            background: var(--accent);
            color: #fff;
        }

        
        body.dark-mode .shortcut-toast {
            background: var(--surface);
            color: var(--text);
            border: 1px solid var(--border);
        }


        
        body.dark-mode .tooltip-popup {
            background: var(--surface);
            color: var(--text);
            border: 1px solid var(--border);
        }

        
        body.dark-mode .btn-ghost {
            background-color: var(--surface) !important;
            color: var(--text) !important;
        }
        body.dark-mode .btn-ghost:hover {
            background-color: var(--surface-alt) !important;
        }

        
        body.dark-mode .filter-sustainability .sustain-filter-checkbox {
            background: var(--surface);
            border-color: var(--border);
        }

        
        body.dark-mode .label-position-pill {
            background: var(--surface);
            color: var(--gray);
            border-color: var(--border);
        }
        body.dark-mode .label-position-pill:hover { color: var(--text); }
        

        
        body.dark-mode .pers-summary-bar {
            background: var(--surface-alt);
            color: var(--text);
            border-color: var(--border);
        }

        
        body.dark-mode .pd-cta-primary {
            background: var(--accent);
            color: #fff;
            border-color: var(--accent);
        }
        body.dark-mode .pd-cta-primary:hover { background: #008be0; }

        
        body.dark-mode .roster-total-row {
            background: var(--surface-alt);
            color: var(--text);
        }

        
        body.dark-mode .shortcuts-fab {
            background: var(--surface);
            color: var(--text);
        }

        
        body.dark-mode .pd-care-sym.crossed::after {
            background: linear-gradient(45deg, transparent calc(50% - 1px), var(--text) calc(50% - 1px), var(--text) calc(50% + 1px), transparent calc(50% + 1px));
        }

        
        body.dark-mode .pd-cert.dark .pd-cert-icon {
            background: var(--surface-alt);
            color: var(--text);
        }

        
        body.dark-mode .onboarding-progress-dot.done {
            background: var(--accent);
        }




        
        body.dark-mode .filter-pill.active,
        body.dark-mode .pill.active,
        body.dark-mode .chip.active,
        body.dark-mode .tab.active,
        body.dark-mode [class*="-tab"].active:not(.canvas-tab):not(.quantity-tab):not(.cust-tab):not(.config-step-tab):not(.bo-cust-tab):not(.detail-tab) {
            background: var(--accent);
            color: #fff;
            border-color: var(--accent);
        }


        
        @media (max-width: 768px) {

            
            
            html { overflow-x: clip; }
            body { overflow-x: clip; max-width: 100vw; }
            img, video, iframe, canvas { max-width: 100%; height: auto; }
            
            table { display: block; overflow-x: auto; max-width: 100%; }

            
            nav {
                padding: 0.7rem 0.9rem !important;
                flex-wrap: wrap !important;
                gap: 0.4rem !important;
            }
            .logo {
                font-size: 0.95rem !important;
                flex-shrink: 0;
                letter-spacing: 0.03rem !important;
            }
            .nav-links {
                flex-wrap: wrap !important;
                gap: 0.3rem 0.55rem !important;
                justify-content: flex-end;
                align-items: center;
            }
            .nav-links > a,
            .dropdown-trigger {
                font-size: 0.72rem !important;
                margin-left: 0 !important;
                padding: 0.4rem 0.35rem !important;
                white-space: nowrap;
            }
            .nav-external-link { display: none !important; }
            .nav-signup-btn {
                padding: 0.42rem 0.85rem !important;
                font-size: 0.7rem !important;
                white-space: nowrap;
                margin-left: 0 !important;
            }
            .theme-toggle {
                margin-left: 0.2rem !important;
                padding: 0.3rem !important;
            }
            .nav-user-section,
            #nav-user-section { font-size: 0.7rem; }
            #nav-backoffice-btn {
                padding: 4px 8px !important;
                font-size: 11px !important;
                margin-right: 4px !important;
            }
            .nav-inbox-bell { padding: 0.3rem !important; }

            
            .mega-menu,
            .account-dropdown-menu,
            .projects-dropdown-menu {
                display: none !important;
            }

            
            .hero-split {
                flex-direction: column !important;
                padding: 2rem 1rem !important;
                gap: 1.8rem !important;
            }
            .hero-text-col,
            .hero-image-col { width: 100% !important; }
            .hero-title {
                font-size: 1.9rem !important;
                letter-spacing: -0.04rem !important;
                line-height: 1.15 !important;
                margin-bottom: 1.2rem !important;
                word-break: break-word;
                overflow-wrap: break-word;
                hyphens: auto;
            }
            .hero-subtitle {
                font-size: 0.95rem !important;
                max-width: 100% !important;
                line-height: 1.55 !important;
            }
            .hero-mission {
                font-size: 0.95rem !important;
                margin-bottom: 1.8rem !important;
            }
            .pre-headline { font-size: 0.7rem !important; }
            .btn {
                padding: 0.9rem 1.5rem !important;
                font-size: 0.78rem !important;
            }
            .btn-massive {
                padding: 1rem 1.5rem !important;
                font-size: 0.85rem !important;
            }

            
            main { padding: 1rem !important; }
            .brand-marquee { margin: 2.5rem -1rem !important; }
            .about-cta-section {
                margin: 3rem -1rem -1rem -1rem !important;
                padding: 2.5rem 1rem !important;
            }
            .about-cta-headline { font-size: 1.4rem !important; }
            .about-cta-grid {
                grid-template-columns: 1fr !important;
                gap: 1.8rem !important;
            }

            
            .katalog-layout {
                display: flex !important;
                flex-direction: column !important;
                grid-template-columns: 1fr !important;
                gap: 1.2rem !important;
            }
            .katalog-layout .sidebar {
                display: block !important;
                width: 100% !important;
                position: relative !important;
            }
            .product-grid {
                grid-template-columns: repeat(2, 1fr) !important;
                gap: 0.8rem !important;
            }
            .product-card { font-size: 0.85rem; }

            
            .config-layout {
                display: flex !important;
                flex-direction: column !important;
                grid-template-columns: 1fr !important;
                gap: 0.8rem !important;
            }
            .config-progress-sidebar {
                position: relative !important;
                top: 0 !important;
                height: auto !important;
                width: 100% !important;
                order: 1;
                padding: 0.5rem !important;
            }
            .step-progress-list {
                display: flex !important;
                flex-direction: column !important;
                gap: 0.2rem !important;
                overflow-x: visible !important;
                overflow-y: visible !important;
                padding: 0 !important;
                margin: 0 0 1rem 0 !important;
                flex-wrap: nowrap !important;
            }
            .step-progress-list .step-progress-item {
                flex-direction: row !important;
                align-items: center !important;
                width: 100% !important;
                min-width: 0 !important;
                padding: 0.7rem 0.8rem !important;
                text-align: left !important;
                border-bottom: 1px solid var(--border) !important;
                border-left: 3px solid transparent !important;
                font-size: 0.8rem !important;
                flex-shrink: 1 !important;
            }
            .step-progress-list .step-progress-item.active {
                border-left-color: var(--accent) !important;
                background: rgba(0, 163, 255, 0.04);
            }
            .config-canvas-area { order: 2; width: 100% !important; }
            .config-product-header,
            .config-step-panel-wrapper { order: 3; width: 100% !important; }
            .config-sidebar-right { width: 100% !important; padding: 1rem !important; }
            .design-transform-bar { flex-wrap: wrap !important; gap: 0.4rem !important; }

            
            .auth-modal-content,
            .booking-modal-content {
                width: 100vw !important;
                max-width: 100vw !important;
                height: 100vh !important;
                max-height: 100vh !important;
                border-radius: 0 !important;
                margin: 0 !important;
                padding: 1.2rem !important;
                overflow-y: auto !important;
            }

            
            .project-detail-layout {
                grid-template-columns: 1fr !important;
                gap: 1rem !important;
            }
            .project-list-card {
                grid-template-columns: 56px 1fr !important;
                gap: 0.8rem !important;
            }

            
            .account-layout {
                display: flex !important;
                flex-direction: column !important;
                grid-template-columns: 1fr !important;
            }
            .account-sidebar {
                position: relative !important;
                top: 0 !important;
                width: 100% !important;
                margin-bottom: 1rem !important;
            }
            .account-nav {
                display: flex !important;
                flex-wrap: wrap !important;
                overflow-x: visible !important;
                gap: 0.3rem !important;
                padding: 0.5rem !important;
            }
            .account-nav li { flex-shrink: 1 !important; }
            .account-nav-item {
                white-space: nowrap;
                padding: 0.55rem 0.8rem !important;
                font-size: 0.75rem !important;
            }

            
            h1, h2, h3, h4 {
                word-break: break-word;
                overflow-wrap: break-word;
            }

            
            .floating-orb { display: none !important; }
            .shortcuts-fab {
                width: 36px !important;
                height: 36px !important;
                bottom: 1rem !important;
                right: 1rem !important;
            }

        }
        


        

        
        .mobile-menu-toggle {
            display: none;
            background: transparent;
            border: none;
            padding: 0.5rem;
            cursor: pointer;
            flex-direction: column;
            gap: 4px;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            margin-left: auto;
        }
        .mobile-menu-toggle .mm-bar {
            display: block;
            width: 22px;
            height: 2px;
            background: var(--text);
            transition: transform 0.25s ease, opacity 0.2s ease;
            border-radius: 1px;
        }
        body.dark-mode .mobile-menu-toggle .mm-bar { background: #fff; }
        .mobile-menu-toggle.active .mm-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
        .mobile-menu-toggle.active .mm-bar:nth-child(2) { opacity: 0; }
        .mobile-menu-toggle.active .mm-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

        
        .mobile-nav-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.5);
            z-index: 3000;
            animation: fadeIn 0.22s ease;
        }
        .mobile-nav-overlay.open { display: block; }
        .mobile-nav-content {
            background: #fff;
            position: absolute;
            top: 0;
            right: 0;
            width: min(85vw, 360px);
            height: 100vh;
            overflow-y: auto;
            padding: 1.5rem 1.2rem;
            box-shadow: -8px 0 30px rgba(0,0,0,0.15);
            animation: mobileNavSlideIn 0.28s cubic-bezier(0.16,1,0.3,1);
        }
        body.dark-mode .mobile-nav-content { background: var(--surface); color: #fff; }
        @keyframes mobileNavSlideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }

        .mobile-nav-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-bottom: 1.2rem;
            border-bottom: 1px solid var(--border);
            margin-bottom: 1rem;
        }
        body.dark-mode .mobile-nav-header { border-color: rgba(255,255,255,0.08); }
        .mobile-nav-brand {
            font-size: 0.85rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.08rem;
            color: var(--text);
        }
        body.dark-mode .mobile-nav-brand { color: #fff; }
        .mobile-nav-close {
            background: transparent;
            border: none;
            color: var(--text);
            cursor: pointer;
            padding: 6px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .mobile-nav-close:hover { background: var(--surface-alt); }
        body.dark-mode .mobile-nav-close { color: #fff; }
        body.dark-mode .mobile-nav-close:hover { background: rgba(255,255,255,0.08); }

        .mobile-nav-list { list-style: none; padding: 0; margin: 0; }
        .mobile-nav-item {
            display: flex;
            align-items: center;
            gap: 0.9rem;
            padding: 0.95rem 0.4rem;
            border-bottom: 1px solid var(--border);
            color: var(--text);
            text-decoration: none;
            font-size: 0.95rem;
            font-weight: 500;
            cursor: pointer;
            transition: background 0.15s, color 0.15s;
        }
        body.dark-mode .mobile-nav-item { color: #fff; border-color: rgba(255,255,255,0.08); }
        .mobile-nav-item:hover { background: var(--surface-alt); color: var(--accent); }
        body.dark-mode .mobile-nav-item:hover { background: rgba(255,255,255,0.04); }
        .mobile-nav-item svg { color: var(--gray); flex-shrink: 0; }
        .mobile-nav-item:hover svg { color: var(--accent); }

        
        .mobile-nav-expandable {
            width: 100%;
            background: transparent;
            border: none;
            border-bottom: 1px solid var(--border);
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            text-align: left;
        }
        body.dark-mode .mobile-nav-expandable { border-color: rgba(255,255,255,0.08); }
        .mobile-nav-chevron {
            margin-left: auto;
            transition: transform 0.25s ease;
            color: var(--gray) !important;
        }
        .mobile-nav-expandable.open .mobile-nav-chevron { transform: rotate(180deg); }
        .mobile-nav-submenu {
            display: none;
            flex-direction: column;
            background: var(--surface-alt);
            border-bottom: 1px solid var(--border);
        }
        body.dark-mode .mobile-nav-submenu {
            background: rgba(255,255,255,0.03);
            border-color: rgba(255,255,255,0.08);
        }
        .mobile-nav-submenu.open { display: flex; }
        .mobile-nav-subheading {
            font-size: 0.62rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.1rem;
            color: var(--gray);
            padding: 0.9rem 0.4rem 0.4rem 3.2rem;
        }
        .mobile-nav-subitem {
            display: block;
            padding: 0.7rem 0.4rem 0.7rem 3.2rem;
            color: var(--text);
            text-decoration: none;
            font-size: 0.88rem;
            cursor: pointer;
            transition: background 0.15s, color 0.15s;
        }
        body.dark-mode .mobile-nav-subitem { color: #f5f5f7; }
        .mobile-nav-subitem:hover { background: rgba(0,0,0,0.04); color: var(--accent); }
        body.dark-mode .mobile-nav-subitem:hover { background: rgba(255,255,255,0.05); color: var(--accent); }
        .mobile-nav-subitem-all {
            font-weight: 600;
            color: var(--accent);
            border-bottom: 1px solid var(--border);
        }
        body.dark-mode .mobile-nav-subitem-all { border-color: rgba(255,255,255,0.08); }

        .mobile-nav-badge {
            background: var(--accent);
            color: #fff;
            font-size: 0.65rem;
            padding: 2px 7px;
            border-radius: 10px;
            margin-left: auto;
            font-weight: 700;
        }
        .mobile-nav-divider { height: 1rem; }
        .mobile-nav-actions {
            display: flex;
            flex-direction: column;
            gap: 0.6rem;
            margin-top: 0.5rem;
        }
        .mobile-nav-theme-btn {
            background: transparent;
            border: 1px solid var(--border);
            padding: 0.7rem 1rem;
            font-family: 'Inter', sans-serif;
            font-size: 0.8rem;
            color: var(--text);
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 0.7rem;
            border-radius: 6px;
            transition: border-color 0.15s, color 0.15s;
        }
        body.dark-mode .mobile-nav-theme-btn { color: #fff; border-color: rgba(255,255,255,0.15); }
        .mobile-nav-theme-btn:hover { border-color: var(--accent); color: var(--accent); }
        .mobile-nav-cta {
            background: var(--accent);
            color: #fff;
            border: none;
            padding: 0.85rem 1rem;
            font-family: 'Inter', sans-serif;
            font-size: 0.8rem;
            font-weight: 600;
            cursor: pointer;
            border-radius: 6px;
            transition: background 0.15s;
        }
        .mobile-nav-cta:hover { background: #008be0; }
        .mobile-nav-cta-secondary {
            background: transparent;
            color: var(--text);
            border: 1px solid var(--border);
            padding: 0.75rem 1rem;
            font-family: 'Inter', sans-serif;
            font-size: 0.78rem;
            font-weight: 500;
            cursor: pointer;
            border-radius: 6px;
            transition: border-color 0.15s, color 0.15s;
        }
        body.dark-mode .mobile-nav-cta-secondary { color: #fff; border-color: rgba(255,255,255,0.15); }
        .mobile-nav-cta-secondary:hover { border-color: var(--accent); color: var(--accent); }

        @media (max-width: 768px) {
            
            .mobile-menu-toggle { display: flex !important; }
            .nav-links { display: none !important; }
            nav { padding: 0.7rem 1rem !important; flex-wrap: nowrap !important; }
            .logo { flex: 1; }

            
            .booking-modal-content { padding: 0 !important; }
            .booking-steps {
                flex-wrap: wrap !important;
                padding: 0.7rem 1rem !important;
                gap: 0.4rem 0.6rem !important;
                font-size: 0.55rem !important;
            }
            .booking-step .step-num { width: 16px !important; height: 16px !important; font-size: 0.55rem !important; }
            .booking-step-sep { display: none !important; }
            .booking-header { padding: 1.2rem 1rem 0.5rem !important; }
            .booking-header h2 { font-size: 1.2rem !important; line-height: 1.25 !important; }
            .booking-header p { font-size: 0.85rem !important; }
            .booking-modal-close { top: 0.6rem !important; right: 0.6rem !important; width: 32px !important; height: 32px !important; }
            .booking-body { padding: 1.2rem 1rem !important; }
            .meeting-type-card { padding: 1rem !important; }
            .meeting-type-name { font-size: 0.95rem !important; }
            .meeting-type-desc { font-size: 0.78rem !important; line-height: 1.45 !important; }
            .meeting-type-meta {
                font-size: 0.7rem !important;
                flex-wrap: wrap !important;
                gap: 0.4rem 0.7rem !important;
            }
            .meeting-type-price-val { font-size: 1.1rem !important; }
            .meeting-type-badge { font-size: 0.55rem !important; padding: 0.15rem 0.4rem !important; }
            .booking-form-grid {
                grid-template-columns: 1fr !important;
                gap: 0.9rem !important;
            }
            .slot-grid, .date-picker-grid, .date-grid {
                grid-template-columns: repeat(auto-fill, minmax(75px, 1fr)) !important;
                gap: 0.4rem !important;
            }
            .slot-btn, .date-btn { font-size: 0.75rem !important; padding: 0.6rem 0.3rem !important; }

            
            .auth-modal-header { padding: 1.5rem 1rem 1rem !important; }
            .auth-modal-header h2 { font-size: 1.4rem !important; }
            .auth-modal-header p { font-size: 0.85rem !important; }
            .auth-modal-body { padding: 0.5rem 1rem 1.5rem !important; }
            .auth-modal-eyebrow { font-size: 0.65rem !important; }
            .auth-modal-close { top: 0.8rem !important; right: 0.8rem !important; }
            .auth-screen { padding: 0 !important; }

            
            .auth-onboarding-overlay { padding: 0 !important; align-items: stretch !important; }
            .onboarding-container {
                width: 100vw !important;
                max-width: 100vw !important;
                height: 100vh !important;
                max-height: 100vh !important;
                border-radius: 0 !important;
                margin: 0 !important;
                overflow-y: auto !important;
            }
            .onboarding-card { padding: 1.5rem 1.2rem !important; }
            .onboarding-step { padding: 1.2rem 1rem !important; }
            .onboarding-illustration {
                margin: 0 -1rem 1rem -1rem !important;
                padding: 1.5rem !important;
                min-height: 120px !important;
            }
            .onboarding-card h2, .onboarding-step h2 { font-size: 1.3rem !important; }
            .onboarding-step-eyebrow { font-size: 0.65rem !important; }
            .onboarding-actions {
                flex-direction: column-reverse !important;
                gap: 0.5rem !important;
                align-items: stretch !important;
            }
            .onboarding-actions button,
            .onboarding-back-btn,
            .onboarding-next-btn,
            .onboarding-skip { width: 100% !important; padding: 0.85rem 1rem !important; font-size: 0.78rem !important; }

            
            .inbox-layout {
                grid-template-columns: 1fr !important;
                display: flex !important;
                flex-direction: column !important;
                height: auto !important;
                min-height: 0 !important;
            }
            .inbox-sidebar, .inbox-thread-list {
                width: 100% !important;
                max-height: 50vh;
                overflow-y: auto;
                border-right: none !important;
                border-bottom: 1px solid var(--border);
            }
            .inbox-filter-bar {
                gap: 0.3rem !important;
                margin: 1rem 0 0.6rem !important;
                flex-wrap: wrap !important;
            }
            .inbox-filter {
                padding: 0.4rem 0.6rem !important;
                font-size: 0.62rem !important;
                white-space: nowrap;
            }
            .inbox-thread-item { padding: 0.8rem 0.9rem !important; }
            .inbox-thread-subject { font-size: 0.85rem !important; }
            .inbox-thread-preview { font-size: 0.75rem !important; line-height: 1.4 !important; }
            .inbox-message-area, .inbox-detail, .inbox-content { padding: 1rem !important; }

            .bo-nav-item {
                display: flex !important;
                width: 100% !important;
                flex: none !important;
                padding: 0.9rem 1.5rem !important;
                font-size: 0.85rem !important;
                border-radius: 0 !important;
                border-left: 2px solid transparent !important;
            }
            .bo-nav-item.active {
                border-left-color: var(--accent) !important;
                background: rgba(0,163,255,0.08) !important;
            }



            
            .form-grid { grid-template-columns: 1fr !important; gap: 0.9rem !important; margin-bottom: 1.2rem !important; }
            .form-grid-full { grid-column: auto !important; }
            .form-input, .form-textarea, .form-select, input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], textarea, select {
                font-size: 16px !important;  
            }
            .form-label { font-size: 0.72rem !important; }

            
            .verify-banner, .auth-verify-banner {
                padding: 0.6rem 0.9rem !important;
                font-size: 0.75rem !important;
                flex-wrap: wrap !important;
                gap: 0.4rem !important;
            }

            
            .cookie-banner { padding: 1rem !important; }
            .cookie-banner-inner { gap: 0.8rem !important; }
            .cookie-btn { padding: 0.55rem 1rem !important; font-size: 0.65rem !important; }

            
            .thread-container {
                max-width: 100% !important;
                padding: 4rem 0 2rem 0 !important;
                box-sizing: border-box !important;
            }
            
            .thread-line {
                left: 26px !important;
                transform: none !important;
            }
            
            .needle-wrapper {
                left: 26px !important;
                transform: translate(-50%, -50%) !important;
                top: 50% !important;
            }
            
            .step-block {
                display: block !important;
                width: 100% !important;
                padding-left: 52px !important;
                padding-right: 1.2rem !important;
                margin-bottom: 16vh !important;
                box-sizing: border-box !important;
            }
            .step-block:nth-child(odd),
            .step-block:nth-child(even) {
                justify-content: flex-start !important;
            }
            .step-content,
            .step-block:nth-child(odd) .step-content,
            .step-block:nth-child(even) .step-content {
                width: 100% !important;
                max-width: 100% !important;
                padding: 3.2rem 0 0 0 !important;   
                text-align: left !important;
                box-sizing: border-box !important;
                position: relative !important;
            }
            
            .step-content h3,
            .step-content p {
                max-width: 100% !important;
                overflow-wrap: break-word !important;
                word-break: break-word !important;
                white-space: normal !important;
            }
            .step-content h3 {
                font-size: 1.9rem !important;
                letter-spacing: -0.04rem !important;
                line-height: 1.15 !important;
                margin-bottom: 0.8rem !important;
            }
            .step-content p { font-size: 0.95rem !important; line-height: 1.6 !important; }
            
            .step-bg-number,
            .step-block:nth-child(odd) .step-bg-number,
            .step-block:nth-child(even) .step-bg-number {
                font-size: 3rem !important;
                left: 0 !important;
                right: auto !important;
                top: 0 !important;
                line-height: 1 !important;
            }
            
            .step-accent-line,
            .step-block:nth-child(odd) .step-accent-line,
            .step-block:nth-child(even) .step-accent-line {
                margin-left: 0 !important;
                margin-top: 0 !important;
                margin-bottom: 1.5rem !important;
                position: absolute !important;
                top: 2.9rem !important;
                left: 0 !important;
            }

            
            .project-status-tabs {
                display: flex !important;
                flex-wrap: wrap !important;
                gap: 0.3rem !important;
                overflow-x: visible !important;
            }
            .project-status-tab {
                padding: 0.5rem 0.8rem !important;
                font-size: 0.7rem !important;
                flex: 0 1 auto !important;
                white-space: nowrap;
            }

            
            .design-transform-bar {
                flex-wrap: wrap !important;
                gap: 0.3rem !important;
                padding: 0.5rem !important;
            }
            .design-transform-bar button { font-size: 0.65rem !important; padding: 0.4rem 0.6rem !important; }

            
            .library-modal-content,
            .team-invite-content,
            .variants-modal-content,
            .size-chart-content,
            .shortcuts-content {
                max-width: 100vw !important;
                width: 100vw !important;
                max-height: 95vh !important;
                margin: 0 !important;
                border-radius: 12px 12px 0 0 !important;
                padding: 1.2rem !important;
            }
        }
        


        

        
        @media (max-width: 768px) {
            .floating-orb-container { display: none !important; }
        }

        
        .brand-marquee {
            background: var(--surface-alt) !important;
        }
        .brand-marquee::before {
            background: linear-gradient(to right, var(--surface-alt) 20%, transparent 100%) !important;
        }
        .brand-marquee::after {
            background: linear-gradient(to left, var(--surface-alt) 20%, transparent 100%) !important;
        }
        .pd-care-sym {
            background: var(--surface-alt) !important;
        }
        .pd-download-btn {
            background: var(--surface-alt) !important;
        }
        .orb {
            background: var(--surface-alt) !important;
        }

        

        
        body.dark-mode .brand-marquee {
            background: var(--surface) !important;
            border-color: var(--border) !important;
        }
        body.dark-mode .brand-marquee::before {
            background: linear-gradient(to right, var(--surface) 20%, transparent 100%) !important;
        }
        body.dark-mode .brand-marquee::after {
            background: linear-gradient(to left, var(--surface) 20%, transparent 100%) !important;
        }
        body.dark-mode .brand-marquee-eyebrow {
            color: rgba(255,255,255,0.55) !important;
        }
        
        body.dark-mode .brand-logo {
            color: rgba(255,255,255,0.7) !important;
        }
        body.dark-mode .brand-logo-real {
            filter: none !important;
            opacity: 1;
            background: #ffffff;
            border-radius: 10px;
            padding: 0.45rem 0.9rem;
            box-sizing: border-box;
        }
        body.dark-mode .brand-logo-real img {
            max-height: 38px;
        }
        
        body.dark-mode .pd-brand-logo {
            background: #ffffff;
            border-radius: 8px;
            padding: 0.35rem 0.6rem;
            box-sizing: content-box;
        }

        
        body.dark-mode .app-footer {
            background: var(--surface) !important;
            border-top-color: var(--border) !important;
        }
        body.dark-mode .app-footer-inner {
            border-bottom-color: var(--border) !important;
        }
        body.dark-mode .app-footer-col h4 {
            color: rgba(255,255,255,0.5) !important;
        }
        body.dark-mode .app-footer-col a,
        body.dark-mode .app-footer-col span.footer-link {
            color: #f5f5f7 !important;
        }
        body.dark-mode .app-footer-col a:hover,
        body.dark-mode .app-footer-col span.footer-link:hover {
            color: var(--accent) !important;
        }
        body.dark-mode .app-footer-copyright,
        body.dark-mode .app-footer-meta,
        body.dark-mode .app-footer-meta span {
            color: rgba(255,255,255,0.55) !important;
        }
        body.dark-mode .app-footer-bottom {
            border-color: var(--border) !important;
        }

        
        body.dark-mode .pd-care-sym {
            background: var(--surface) !important;
            border-color: rgba(255,255,255,0.5) !important;
            color: rgba(255,255,255,0.9) !important;
        }
        body.dark-mode .pd-care-sym.crossed::after {
            background: linear-gradient(45deg,
                transparent calc(50% - 1px),
                rgba(255,255,255,0.6) calc(50% - 1px),
                rgba(255,255,255,0.6) calc(50% + 1px),
                transparent calc(50% + 1px)) !important;
        }

        
        body.dark-mode .pd-cert {
            background: rgba(255,255,255,0.04) !important;
            border-color: rgba(255,255,255,0.12) !important;
            color: #f5f5f7 !important;
        }

        
        body.dark-mode .pd-download-btn {
            background: var(--surface) !important;
            border-color: rgba(255,255,255,0.12) !important;
            color: #f5f5f7 !important;
        }
        body.dark-mode .pd-download-btn:hover {
            background: rgba(255,255,255,0.04) !important;
            border-color: var(--accent) !important;
        }
        body.dark-mode .pd-download-icon {
            background: rgba(255,255,255,0.08) !important;
            color: #f5f5f7 !important;
        }

        
        body.dark-mode .pd-section {
            border-top-color: var(--border) !important;
        }
        body.dark-mode .pd-section-title {
            color: rgba(255,255,255,0.55) !important;
        }

        
        body.dark-mode .orb {
            background: var(--surface) !important;
            border-color: var(--border) !important;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
        }
        body.dark-mode .status-label {
            color: #f5f5f7 !important;
        }

        
        body.dark-mode .pre-headline {
            color: rgba(255,255,255,0.55) !important;
        }

        
        body.dark-mode .info-card {
            background: var(--surface) !important;
            border-color: var(--border) !important;
        }

        
        body.dark-mode .account-modal-content {
            background: var(--surface) !important;
            color: var(--text) !important;
        }

        
        @media (max-width: 768px) {
            
            body.dark-mode .app-footer { padding: 2rem 1rem 1.5rem !important; }
            body.dark-mode .app-footer-inner {
                display: grid !important;
                grid-template-columns: 1fr 1fr !important;
                gap: 1.5rem !important;
            }
            
            body.dark-mode .pd-care-sym,
            body.dark-mode .pd-download-btn,
            body.dark-mode .orb {
                background: var(--surface) !important;
            }
        }

        


        

        
        body.dark-mode nav {
            background: var(--surface) !important;
            border-bottom-color: var(--border) !important;
        }
        body.dark-mode .logo {
            color: #f5f5f7 !important;
        }
        body.dark-mode .nav-links > a,
        body.dark-mode .dropdown-trigger {
            color: rgba(255,255,255,0.75) !important;
        }
        body.dark-mode .nav-links > a:hover,
        body.dark-mode .dropdown-trigger:hover {
            color: var(--accent) !important;
        }
        body.dark-mode .nav-links > a.active,
        body.dark-mode .dropdown-trigger.active {
            color: var(--accent) !important;
        }
        body.dark-mode .nav-signup-btn {
            background: var(--accent) !important;
            color: #fff !important;
        }
        body.dark-mode .theme-toggle {
            color: rgba(255,255,255,0.75) !important;
        }
        body.dark-mode .mobile-menu-toggle .mm-bar {
            background: #f5f5f7 !important;
        }
        body.dark-mode .nav-external-link {
            color: rgba(255,255,255,0.6) !important;
        }
        body.dark-mode .nav-user-section {
            color: rgba(255,255,255,0.75) !important;
        }

        
        body.dark-mode .pd-title {
            color: #f5f5f7 !important;
        }
        body.dark-mode .pd-sku {
            color: rgba(255,255,255,0.55) !important;
        }
        body.dark-mode .pd-tagline {
            color: rgba(255,255,255,0.75) !important;
        }
        body.dark-mode .pd-breadcrumb {
            color: rgba(255,255,255,0.5) !important;
        }
        body.dark-mode .pd-breadcrumb a,
        body.dark-mode .pd-breadcrumb span {
            color: rgba(255,255,255,0.6) !important;
        }
        body.dark-mode .pd-breadcrumb a:hover {
            color: var(--accent) !important;
        }
        body.dark-mode .pd-care-text {
            color: rgba(255,255,255,0.75) !important;
        }
        body.dark-mode .pd-colors-block .pd-section-mini-title {
            color: #f5f5f7 !important;
        }

        
        body.dark-mode .pd-specs-row {
            border-color: rgba(255,255,255,0.12) !important;
        }
        body.dark-mode .pd-spec {
            background: rgba(255,255,255,0.04) !important;
            border-right-color: rgba(255,255,255,0.12) !important;
        }
        body.dark-mode .pd-spec-label {
            color: rgba(255,255,255,0.55) !important;
        }
        body.dark-mode .pd-spec-value {
            color: #f5f5f7 !important;
        }

        
        body.dark-mode .pd-thumb {
            background: var(--surface) !important;
            border-color: rgba(255,255,255,0.12) !important;
        }
        body.dark-mode .pd-thumb.active {
            border-color: var(--accent) !important;
        }
        body.dark-mode .pd-thumb-label {
            color: rgba(255,255,255,0.7) !important;
            background: rgba(0,0,0,0.5) !important;
        }
        body.dark-mode .pd-thumbs {
            background: transparent !important;
        }

        
        body.dark-mode .product-image-container {
            background: var(--surface) !important;
        }
        body.dark-mode .product-card {
            background: transparent !important;
        }
        body.dark-mode .product-name {
            color: #f5f5f7 !important;
        }
        body.dark-mode .product-brand {
            color: rgba(255,255,255,0.55) !important;
        }
        body.dark-mode .product-price {
            color: rgba(255,255,255,0.7) !important;
        }
        body.dark-mode .product-sustainability-tags {
            border-top-color: rgba(255,255,255,0.08) !important;
        }
        body.dark-mode .hover-btn {
            background: var(--accent) !important;
            color: #fff !important;
        }
        body.dark-mode .swatch {
            border-color: rgba(255,255,255,0.2) !important;
        }
        body.dark-mode .product-extra-colors,
        body.dark-mode .color-swatches-extra {
            color: rgba(255,255,255,0.65) !important;
        }

        
        body.dark-mode .spec-block {
            background: var(--surface) !important;
            border-color: var(--border) !important;
        }
        body.dark-mode .spec-block-header {
            border-bottom-color: var(--border) !important;
        }
        body.dark-mode .spec-block-title {
            color: #f5f5f7 !important;
        }
        body.dark-mode .spec-row {
            border-bottom-color: rgba(255,255,255,0.08) !important;
        }
        body.dark-mode .spec-row .val {
            color: #f5f5f7 !important;
        }
        body.dark-mode .spec-row .lbl {
            color: rgba(255,255,255,0.55) !important;
        }

        
        body.dark-mode .sidebar {
            background: transparent !important;
        }
        body.dark-mode .filter-group {
            border-bottom-color: var(--border) !important;
        }
        body.dark-mode .filter-title {
            color: rgba(255,255,255,0.65) !important;
        }
        body.dark-mode .filter-label {
            color: rgba(255,255,255,0.8) !important;
        }
        body.dark-mode .filter-checkbox {
            border-color: rgba(255,255,255,0.3) !important;
            background: transparent !important;
        }
        body.dark-mode .filter-checkbox:checked {
            background: var(--accent) !important;
            border-color: var(--accent) !important;
        }
        body.dark-mode .sustain-filter-count {
            color: rgba(255,255,255,0.5) !important;
        }

        
        body.dark-mode input[type="text"],
        body.dark-mode input[type="email"],
        body.dark-mode input[type="tel"],
        body.dark-mode input[type="password"],
        body.dark-mode input[type="search"],
        body.dark-mode input[type="number"],
        body.dark-mode input[type="url"],
        body.dark-mode textarea,
        body.dark-mode select {
            background: var(--surface) !important;
            color: #f5f5f7 !important;
            border-color: rgba(255,255,255,0.15) !important;
        }
        body.dark-mode input::placeholder,
        body.dark-mode textarea::placeholder {
            color: rgba(255,255,255,0.4) !important;
        }
        body.dark-mode input:focus,
        body.dark-mode textarea:focus,
        body.dark-mode select:focus {
            border-color: var(--accent) !important;
            outline-color: var(--accent) !important;
        }

        
        body.dark-mode .project-card,
        body.dark-mode .project-list-card,
        body.dark-mode .projects-card {
            background: var(--surface) !important;
            border-color: var(--border) !important;
        }
        body.dark-mode .project-status-tab {
            background: transparent !important;
            color: rgba(255,255,255,0.7) !important;
            border-color: var(--border) !important;
        }
        body.dark-mode .project-status-tab.active {
            background: var(--accent) !important;
            color: #fff !important;
            border-color: var(--accent) !important;
        }

        
        body.dark-mode .modal-content,
        body.dark-mode .auth-modal-content,
        body.dark-mode .booking-modal-content,
        body.dark-mode .library-modal-content,
        body.dark-mode .variants-modal-content,
        body.dark-mode .size-chart-content,
        body.dark-mode .shortcuts-content,
        body.dark-mode .team-invite-content {
            background: var(--surface) !important;
            color: var(--text) !important;
            border-color: var(--border) !important;
        }

        
        body.dark-mode .cookie-banner {
            background: #0a0a0c !important;
            border-top-color: var(--border) !important;
        }

        
        
        body.dark-mode .hero-title {
            color: #f5f5f7 !important;
        }
        body.dark-mode .hero-mission {
            color: #f5f5f7 !important;
        }
        body.dark-mode .hero-subtitle {
            color: rgba(255,255,255,0.7) !important;
        }

        
        body.dark-mode .freq-product-card {
            background: var(--surface) !important;
            border-color: var(--border) !important;
        }
        body.dark-mode .freq-section-title {
            color: #f5f5f7 !important;
        }

        
        body.dark-mode .pers-csv-drop {
            background: var(--surface) !important;
            border-color: var(--border) !important;
            color: rgba(255,255,255,0.75) !important;
        }

        
        body.dark-mode :is([style*="background: #fff"]:where(:not([data-stil-nur])), [data-stil*="background: #fff"]),
        body.dark-mode :is([style*="background:#fff"]:where(:not([data-stil-nur])), [data-stil*="background:#fff"]),
        body.dark-mode :is([style*="background: white"]:where(:not([data-stil-nur])), [data-stil*="background: white"]),
        body.dark-mode :is([style*="background:white"]:where(:not([data-stil-nur])), [data-stil*="background:white"]),
        body.dark-mode :is([style*="background-color: #fff"]:where(:not([data-stil-nur])), [data-stil*="background-color: #fff"]),
        body.dark-mode :is([style*="background-color:#fff"]:where(:not([data-stil-nur])), [data-stil*="background-color:#fff"]),
        body.dark-mode :is([style*="background-color: white"]:where(:not([data-stil-nur])), [data-stil*="background-color: white"]),
        body.dark-mode :is([style*="background-color:white"]:where(:not([data-stil-nur])), [data-stil*="background-color:white"]) {
            background: var(--surface) !important;
            background-color: var(--surface) !important;
            color: #f5f5f7 !important;
        }

        
        body.dark-mode .account-sidebar {
            background: transparent !important;
        }
        body.dark-mode .account-nav-item {
            color: rgba(255,255,255,0.75) !important;
        }
        body.dark-mode .account-nav-item:hover,
        body.dark-mode .account-nav-item.active {
            color: var(--accent) !important;
        }

        
        body.dark-mode .view-title,
        body.dark-mode .section-title,
        body.dark-mode .page-title {
            color: #f5f5f7 !important;
        }
        body.dark-mode .view-subtitle,
        body.dark-mode .section-subtitle {
            color: rgba(255,255,255,0.65) !important;
        }

        
        body.dark-mode .card,
        body.dark-mode .info-card,
        body.dark-mode .stat-card,
        body.dark-mode .summary-card {
            background: var(--surface) !important;
            border-color: var(--border) !important;
            color: var(--text) !important;
        }

        


        
        @media (max-width: 768px) {
            
            body:not(.dark-mode) {
                background-color: var(--bg) !important;
                color: var(--text) !important;
            }
            body:not(.dark-mode) main,
            body:not(.dark-mode) #view-start,
            body:not(.dark-mode) #view-katalog,
            body:not(.dark-mode) #view-projekte,
            body:not(.dark-mode) #view-account,
            body:not(.dark-mode) .hero-split,
            body:not(.dark-mode) .hero-text-col,
            body:not(.dark-mode) .process-extreme,
            body:not(.dark-mode) .katalog-layout,
            body:not(.dark-mode) .product-card {
                background-color: transparent !important;
            }
            
            body:not(.dark-mode) nav {
                background: #fff !important;
                border-bottom-color: var(--border) !important;
            }
            body:not(.dark-mode) .logo {
                color: var(--text) !important;
            }
            
            body:not(.dark-mode) .hero-title,
            body:not(.dark-mode) .hero-mission,
            body:not(.dark-mode) .process-extreme h2,
            body:not(.dark-mode) .pd-title,
            body:not(.dark-mode) .product-name,
            body:not(.dark-mode) .config-step-title,
            body:not(.dark-mode) .view-title,
            body:not(.dark-mode) .section-title {
                color: var(--text) !important;
            }
            body:not(.dark-mode) .hero-subtitle,
            body:not(.dark-mode) .pd-tagline,
            body:not(.dark-mode) .product-brand {
                color: var(--gray) !important;
            }
            
            body:not(.dark-mode) .product-image-container {
                background: #F5F5F5 !important;
            }
            body:not(.dark-mode) .pd-spec,
            body:not(.dark-mode) .spec-block,
            body:not(.dark-mode) .info-card,
            body:not(.dark-mode) .card {
                background: #fff !important;
                color: var(--text) !important;
            }
            body:not(.dark-mode) .pd-spec {
                background: var(--surface-alt) !important;
            }
            body:not(.dark-mode) .pd-spec-value,
            body:not(.dark-mode) .spec-row .val {
                color: var(--text) !important;
            }
            
            body:not(.dark-mode) .app-footer {
                background: var(--surface-alt) !important;
            }
            body:not(.dark-mode) .app-footer-col a,
            body:not(.dark-mode) .app-footer-col span.footer-link {
                color: var(--text) !important;
            }
            
            body:not(.dark-mode) .pd-thumb {
                background: #fff !important;
            }
        }
        


        

        
        .mobile-filter-toggle,
        .mobile-filter-header,
        .mobile-filter-apply,
        .mobile-filter-backdrop { display: none; }


        @media (max-width: 768px) {
            
            .mobile-filter-toggle {
                display: inline-flex !important;
                align-items: center;
                gap: 0.5rem;
                margin: 0 0 1.2rem 0;
                padding: 0.7rem 1.2rem;
                background: var(--text);
                color: var(--bg);
                border: none;
                border-radius: 8px;
                font-family: 'Inter', sans-serif;
                font-size: 0.8rem;
                font-weight: 600;
                letter-spacing: 0.02rem;
                cursor: pointer;
            }
            body.dark-mode .mobile-filter-toggle {
                background: var(--accent) !important;
                color: #fff !important;
            }
            .mobile-filter-toggle svg { flex-shrink: 0; }
            .mobile-filter-count {
                background: var(--accent);
                color: #fff;
                font-size: 0.65rem;
                font-weight: 700;
                padding: 1px 7px;
                border-radius: 10px;
            }
            body.dark-mode .mobile-filter-count { background: #fff; color: var(--accent); }

            
            .katalog-layout {
                display: block !important;
            }
            #view-katalog .product-grid {
                width: 100% !important;
                grid-template-columns: repeat(2, 1fr) !important;
                gap: 0.8rem !important;
            }

            
            #view-katalog .sidebar {
                position: fixed !important;
                top: 0 !important;
                left: 0 !important;
                bottom: 0 !important;
                width: 86vw !important;
                max-width: 360px !important;
                margin: 0 !important;
                padding: 1.2rem 1.2rem 6.5rem !important;
                background: #fff !important;
                z-index: 3600 !important;
                overflow-y: auto !important;
                display: block !important;
                transform: translateX(-100%);
                transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
                box-shadow: 6px 0 40px rgba(0,0,0,0.18);
                -webkit-overflow-scrolling: touch;
            }
            body.dark-mode #view-katalog .sidebar {
                background: var(--surface) !important;
            }
            #view-katalog .sidebar.mobile-open {
                transform: translateX(0);
            }

            
            .mobile-filter-header {
                display: flex !important;
                align-items: center;
                justify-content: space-between;
                padding-bottom: 1rem;
                margin-bottom: 0.5rem;
                border-bottom: 1px solid var(--border);
                position: sticky;
                top: -1.2rem;
                background: #fff;
                z-index: 2;
            }
            body.dark-mode .mobile-filter-header { background: var(--surface); border-color: rgba(255,255,255,0.1); }
            .mobile-filter-header-title {
                font-size: 1.1rem;
                font-weight: 700;
                color: var(--text);
            }
            body.dark-mode .mobile-filter-header-title { color: #f5f5f7; }
            .mobile-filter-close {
                background: transparent;
                border: none;
                color: var(--text);
                cursor: pointer;
                padding: 4px;
                display: flex;
            }
            body.dark-mode .mobile-filter-close { color: #f5f5f7; }

            
            .mobile-filter-apply {
                display: block !important;
                position: fixed;
                bottom: 0;
                left: 0;
                width: 86vw;
                max-width: 360px;
                padding: 1rem;
                background: var(--accent);
                color: #fff;
                border: none;
                font-family: 'Inter', sans-serif;
                font-size: 0.85rem;
                font-weight: 600;
                cursor: pointer;
                box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
                z-index: 3;
            }
            .mobile-filter-apply:hover { background: #008be0; }

            
            .mobile-filter-backdrop {
                display: block;
                position: fixed;
                inset: 0;
                background: rgba(0,0,0,0.5);
                z-index: 3500;
                opacity: 0;
                pointer-events: none;
                transition: opacity 0.3s ease;
            }
            .mobile-filter-backdrop.show {
                opacity: 1;
                pointer-events: auto;
            }
        }
        


        
        @media (max-width: 768px) {
            
            .page-header,
            .account-section-header {
                flex-direction: column !important;
                align-items: flex-start !important;
                gap: 1rem !important;
                margin-bottom: 1.8rem !important;
            }
            .page-header h1 { font-size: 2rem !important; line-height: 1.1 !important; }
            .account-section-header h2 { font-size: 1.6rem !important; line-height: 1.15 !important; }
            .page-header p,
            .account-section-header p {
                font-size: 0.85rem !important;
                max-width: 100% !important;
                overflow-wrap: break-word !important;
                white-space: normal !important;
            }
            
            .page-header > button,
            .page-header > a,
            .account-section-header > button,
            .account-section-header > a,
            .account-section-header .btn-ghost {
                align-self: stretch !important;
                width: 100% !important;
                white-space: normal !important;
                box-sizing: border-box !important;
                text-align: center !important;
            }

            
            .stats-row {
                grid-template-columns: repeat(2, 1fr) !important;
                gap: 0.8rem !important;
                margin-bottom: 1.8rem !important;
            }
            .stat-card { box-sizing: border-box !important; min-width: 0 !important; padding: 1.2rem 1rem !important; }
            .stat-value { font-size: 1.8rem !important; }

            
            .address-grid {
                grid-template-columns: 1fr !important;
                gap: 1rem !important;
            }
            .address-card { box-sizing: border-box !important; }

            
            .info-card { box-sizing: border-box !important; }
            .info-card-header {
                flex-wrap: wrap !important;
                gap: 0.4rem !important;
            }
            
            .account-panel .info-card > div:is([style*="flex"]:where(:not([data-stil-nur])), [data-stil*="flex"]) {
                flex-wrap: wrap !important;
                gap: 0.7rem !important;
            }
            .account-panel .info-card .btn,
            .account-panel .info-card .btn-primary,
            .account-panel .info-card .btn-ghost {
                white-space: normal !important;
                max-width: 100% !important;
                box-sizing: border-box !important;
                flex: 1 1 100% !important;
                text-align: center !important;
            }

            
            .activity-item { flex-wrap: wrap !important; }
            .activity-content { min-width: 0 !important; flex: 1 1 auto !important; }
            .activity-title,
            .activity-sub {
                overflow-wrap: break-word !important;
                word-break: break-word !important;
                white-space: normal !important;
            }
            .activity-time { margin-top: 0 !important; }

            
            .integration-item {
                flex-wrap: wrap !important;
                gap: 0.6rem !important;
                box-sizing: border-box !important;
            }
            .integration-info { min-width: 0 !important; flex: 1 1 60% !important; }
            .integration-info h4,
            .integration-info p { overflow-wrap: break-word !important; white-space: normal !important; }
            .integration-status {
                flex-shrink: 0 !important;
                white-space: nowrap !important;
            }

            
            .account-panel,
            .account-panel .info-card,
            .account-panel .stats-row,
            .account-panel .address-grid {
                max-width: 100% !important;
                box-sizing: border-box !important;
            }
        }
        


        
        .account-mobile-nav-toggle { display: none; }

        @media (max-width: 768px) {
            
            .account-sidebar .account-avatar-block { display: none !important; }
            .account-sidebar {
                position: relative !important;
                top: 0 !important;
                width: 100% !important;
                margin-bottom: 1.2rem !important;
                padding: 0 !important;
                background: transparent !important;
                border: none !important;
            }
            
            .account-mobile-nav-toggle {
                display: flex !important;
                align-items: center;
                justify-content: space-between;
                width: 100%;
                box-sizing: border-box;
                padding: 0.9rem 1.1rem;
                background: var(--text);
                color: var(--bg);
                border: none;
                border-radius: 10px;
                font-family: 'Inter', sans-serif;
                font-size: 0.95rem;
                font-weight: 600;
                cursor: pointer;
            }
            body.dark-mode .account-mobile-nav-toggle {
                background: var(--surface-alt) !important;
                color: #f5f5f7 !important;
                border: 1px solid var(--border);
            }
            .account-mobile-nav-chevron { transition: transform 0.25s ease; flex-shrink: 0; }
            .account-mobile-nav-toggle.open .account-mobile-nav-chevron { transform: rotate(180deg); }

            
            .account-nav {
                display: none !important;
                flex-direction: column !important;
                flex-wrap: nowrap !important;
                gap: 0 !important;
                margin-top: 0.5rem !important;
                padding: 0.4rem !important;
                background: var(--surface) !important;
                border: 1px solid var(--border) !important;
                border-radius: 12px !important;
                box-shadow: 0 12px 40px rgba(0,0,0,0.12) !important;
                overflow: hidden !important;
            }
            body.dark-mode .account-nav {
                background: var(--surface) !important;
                border-color: rgba(255,255,255,0.1) !important;
            }
            .account-nav.mobile-open { display: flex !important; }
            .account-nav li { flex-shrink: 0 !important; width: 100% !important; list-style: none !important; }
            .account-nav-item {
                white-space: normal !important;
                width: 100% !important;
                box-sizing: border-box !important;
                padding: 0.85rem 0.9rem !important;
                font-size: 0.9rem !important;
                border-radius: 8px !important;
                display: flex !important;
                align-items: center !important;
                gap: 0.7rem !important;
            }
            .account-nav-item.active { background: var(--surface-alt) !important; color: var(--accent) !important; }
            body.dark-mode .account-nav-item.active { background: rgba(0,163,255,0.12) !important; }
            .account-nav-divider {
                width: 100% !important;
                height: 1px !important;
                background: var(--border) !important;
                margin: 0.4rem 0 !important;
            }
        }
        


        
        .config-step-nav-toggle { display: none; }

        @media (max-width: 768px) {
            .configurator-layout {
                display: flex !important;
                flex-direction: column !important;
                grid-template-columns: 1fr !important;
                gap: 1rem !important;
                min-height: auto !important;
            }
            
            .config-sidebar-right {
                display: contents !important;
            }
            
            .config-step-nav-toggle { order: 1 !important; }
            .config-sidebar-right .step-progress-list { order: 2 !important; }
            .config-canvas-area { order: 3 !important; }
            .config-sidebar-left { order: 4 !important; }
            .config-sidebar-right .step-controls { order: 5 !important; }

            
            .config-step-nav-toggle {
                display: flex !important;
                align-items: center;
                justify-content: space-between;
                width: 100%;
                box-sizing: border-box;
                padding: 0.9rem 1.1rem;
                background: var(--text);
                color: var(--bg);
                border: none;
                border-radius: 10px;
                font-family: 'Inter', sans-serif;
                font-size: 0.9rem;
                font-weight: 600;
                cursor: pointer;
            }
            body.dark-mode .config-step-nav-toggle {
                background: var(--surface-alt) !important;
                color: #f5f5f7 !important;
                border: 1px solid var(--border);
            }
            .config-step-nav-chevron { transition: transform 0.25s ease; flex-shrink: 0; }
            .config-step-nav-toggle.open .config-step-nav-chevron { transform: rotate(180deg); }

            
            .config-sidebar-right .step-progress-list {
                display: none !important;
                flex-direction: column !important;
                overflow: visible !important;
                gap: 0 !important;
                margin: 0.4rem 0 0 0 !important;
                padding: 0.4rem !important;
                background: var(--surface) !important;
                border: 1px solid var(--border) !important;
                border-radius: 12px !important;
                box-shadow: 0 12px 40px rgba(0,0,0,0.12) !important;
            }
            body.dark-mode .config-sidebar-right .step-progress-list {
                background: var(--surface) !important;
                border-color: rgba(255,255,255,0.1) !important;
            }
            .config-sidebar-right .step-progress-list.mobile-open { display: flex !important; }
            .config-sidebar-right .step-progress-item {
                flex-direction: row !important;
                align-items: center !important;
                width: 100% !important;
                min-width: 0 !important;
                gap: 0.7rem !important;
                padding: 0.8rem 0.9rem !important;
                border-radius: 8px !important;
                border-bottom: none !important;
                text-align: left !important;
            }
            .config-sidebar-right .step-progress-name br { display: none !important; }
            .config-sidebar-right .step-progress-item.active { background: var(--surface-alt) !important; }
            body.dark-mode .config-sidebar-right .step-progress-item.active { background: rgba(0,163,255,0.12) !important; }

            
            .config-canvas-area,
            .config-sidebar-left {
                border: 1px solid var(--border) !important;
                box-sizing: border-box !important;
                width: 100% !important;
                border-radius: 12px !important;
                overflow: hidden !important;
            }
            .config-step-content { padding: 1.3rem !important; }
            .config-product-header { padding: 1.3rem 1.3rem 0 1.3rem !important; }
            
            .live-preview-wrap { max-height: 60vh !important; }

            
            .config-sidebar-right .step-controls {
                flex-direction: row !important;
                align-items: center !important;
                justify-content: space-between !important;
                gap: 1rem !important;
                width: 100% !important;
                box-sizing: border-box !important;
                border-top: none !important;
                border: 1px solid var(--border) !important;
                border-radius: 12px !important;
                padding: 1rem !important;
                margin: 0 !important;
                background: var(--surface) !important;
            }
            body.dark-mode .config-sidebar-right .step-controls { background: var(--surface) !important; }
            .config-sidebar-right .step-controls .back-btn { margin-right: auto !important; }
        }
        


        
        @media (max-width: 768px) {

            
            #view-backoffice :is([style*="repeat(3, 1fr)"]:where(:not([data-stil-nur])), [data-stil*="repeat(3, 1fr)"]) { grid-template-columns: repeat(2, 1fr) !important; }
            #view-backoffice :is([style*="repeat(4, 1fr)"]:where(:not([data-stil-nur])), [data-stil*="repeat(4, 1fr)"]) { grid-template-columns: repeat(2, 1fr) !important; }
            #view-backoffice :is([style*="1.5fr 1fr"]:where(:not([data-stil-nur])), [data-stil*="1.5fr 1fr"]) { grid-template-columns: 1fr !important; gap: 1rem !important; }
            #view-backoffice :is([style*="130px 1fr 100px"]:where(:not([data-stil-nur])), [data-stil*="130px 1fr 100px"]) { grid-template-columns: 1fr !important; }




            
            .tasks-layout { grid-template-columns: 1fr !important; gap: 1rem !important; }


            .pipeline-column { min-width: 0 !important; }

            
            .calendar-container { max-width: 100% !important; overflow-x: hidden !important; box-sizing: border-box !important; }
            .calendar-header { flex-wrap: wrap !important; gap: 0.5rem !important; }
            .calendar-grid { min-width: 0 !important; }
            .calendar-day {
                min-width: 0 !important;
                min-height: 58px !important;
                padding: 0.2rem !important;
                overflow: hidden !important;
                box-sizing: border-box !important;
            }
            .calendar-day-name { font-size: 0.55rem !important; padding: 0.3rem 0 !important; }
            .calendar-day-num { font-size: 0.7rem !important; }
            .calendar-event {
                font-size: 0.5rem !important;
                padding: 1px 3px !important;
                white-space: nowrap !important;
                overflow: hidden !important;
                text-overflow: ellipsis !important;
                max-width: 100% !important;
                box-sizing: border-box !important;
            }

        }
        


        


        
        @media (max-width: 768px) {
            #view-bo-login {
                min-height: 100vh !important;
                align-items: stretch !important;
                justify-content: flex-start !important;
                overflow-y: auto !important;
                overflow-x: hidden !important;
            }
        }
        


        

        
        .pd-table-scroll {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            max-width: 100%;
        }
        .pd-table-scroll table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.78rem;
            white-space: nowrap;
        }
        .pd-table-scroll th, .pd-table-scroll td {
            padding: 0.5rem 0.7rem;
            border-bottom: 1px solid var(--border);
            text-align: center;
        }
        .pd-table-scroll th:first-child, .pd-table-scroll td:first-child { text-align: left; }
        .pd-table-scroll thead th {
            font-size: 0.62rem;
            text-transform: uppercase;
            letter-spacing: 0.05rem;
            color: var(--gray);
            font-weight: 600;
        }
        body.dark-mode .pd-table-scroll th,
        body.dark-mode .pd-table-scroll td { border-bottom-color: rgba(255,255,255,0.08); }

        @media (max-width: 768px) {
            
            .product-detail-layout {
                gap: 1.4rem !important;
                padding: 0.8rem 0 2.5rem !important;
            }
            .pd-title { font-size: 1.45rem !important; }
            .pd-tagline { font-size: 0.85rem !important; }
            .pd-breadcrumb { font-size: 0.62rem !important; }
            
            .pd-specs-row {
                display: grid !important;
                grid-template-columns: 1fr 1fr !important;
                gap: 0.6rem !important;
            }
            
            .pd-cta-stack { gap: 0.6rem !important; }
            .pd-cta-primary, .pd-cta-secondary {
                width: 100% !important;
                min-height: 48px !important;
                font-size: 0.8rem !important;
            }
            
            .pd-color-swatches { gap: 0.55rem !important; }
            .pd-color-swatches > div { width: 30px !important; height: 30px !important; }
            
            .pd-downloads { flex-direction: column !important; gap: 0.5rem !important; }
            .pd-download-btn { width: 100% !important; justify-content: space-between !important; min-height: 44px !important; }
            
            .pd-section { padding: 1rem 0 !important; }
            .pd-section-title { font-size: 0.7rem !important; }

            
            #view-backoffice .bo-nav-item {
                padding: 0.95rem 1.5rem !important;
                min-height: 44px !important;
                box-sizing: border-box !important;
            }
        }
        


        

        
        .pipeline-move-btn {
            display: none;
            position: absolute;
            top: 0.4rem; right: 0.4rem;
            width: 30px; height: 30px;
            background: var(--accent); color: #fff;
            border: none; font-size: 0.85rem; font-weight: 700;
            cursor: pointer; z-index: 2;
        }
        .pipeline-card { position: relative; }
        body.touch-device .pipeline-move-btn { display: flex; align-items: center; justify-content: center; }

        
        #pipeline-move-sheet .pms-backdrop {
            position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 100000;
        }
        #pipeline-move-sheet .pms-panel {
            position: fixed; left: 0; right: 0;
            bottom: 0;
            background: var(--surface, #fff);
            z-index: 100001;
            padding: 1rem 1rem 1.2rem;
            box-shadow: 0 -8px 30px rgba(0,0,0,0.25);
        }
        #pipeline-move-sheet .pms-title {
            font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08rem;
            font-weight: 700; color: var(--gray); margin-bottom: 0.7rem;
        }
        #pipeline-move-sheet .pms-option {
            display: block; width: 100%;
            padding: 0.85rem 1rem; margin-bottom: 0.45rem;
            background: var(--bg, #f7f7f8); border: 1px solid var(--border);
            font-size: 0.8rem; font-weight: 600; text-align: left; cursor: pointer;
        }
        #pipeline-move-sheet .pms-option:not(.current):active { border-color: var(--accent); color: var(--accent); }
        #pipeline-move-sheet .pms-option.current { opacity: 0.45; cursor: default; }
        body.dark-mode #pipeline-move-sheet .pms-panel { background: #1a1a1e; }
        body.dark-mode #pipeline-move-sheet .pms-option { background: #222228; color: #eee; }

        
        @media (max-width: 768px) {
            .config-sidebar-right .step-controls {
                position: fixed !important;
                left: 0 !important; right: 0 !important;
                bottom: 0 !important;
                z-index: 9000 !important;
                margin: 0 !important;
                box-shadow: 0 -4px 18px rgba(0,0,0,0.12) !important;
            }
            
            #view-konfigurator { padding-bottom: 5.5rem !important; }
        }
        


        
        body.dark-mode .calendar-nav button:hover,
        body.dark-mode .offer-cta:hover,
        body.dark-mode .btn-action:hover,
        body.dark-mode .proof-action-btn.approve:hover,
        body.dark-mode .invoice-action-btn.primary {
            color: var(--bg) !important;
        }
        


        

        
        .upload-spinner {
            display: inline-block;
            width: 13px; height: 13px;
            border: 2px solid currentColor;
            border-top-color: transparent;
            border-radius: 50%;
            animation: et-spin 0.6s linear infinite;
            vertical-align: middle;
        }
        @keyframes et-spin { to { transform: rotate(360deg); } }

        
        #confirm-modal-v27 {
            position: fixed; inset: 0; z-index: 100050;
            opacity: 0; transition: opacity 0.18s ease;
        }
        #confirm-modal-v27.show { opacity: 1; }
        #confirm-modal-v27 .cm27-backdrop {
            position: absolute; inset: 0;
            background: rgba(0,0,0,0.5);
        }
        #confirm-modal-v27 .cm27-panel {
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -48%);
            width: calc(100% - 3rem); max-width: 420px;
            background: var(--bg, #fff);
            border: 1px solid var(--border, #e5e5e5);
            padding: 1.5rem 1.5rem 1.3rem;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            transition: transform 0.2s ease;
        }
        #confirm-modal-v27.show .cm27-panel { transform: translate(-50%, -50%); }
        #confirm-modal-v27 .cm27-title {
            font-size: 1rem; font-weight: 700;
            color: var(--text, #111); margin-bottom: 0.6rem;
        }
        #confirm-modal-v27 .cm27-msg {
            font-size: 0.85rem; line-height: 1.5;
            color: var(--gray, #666); margin-bottom: 1.4rem;
            white-space: pre-line;
        }
        #confirm-modal-v27 .cm27-actions {
            display: flex; gap: 0.7rem; justify-content: flex-end;
        }
        #confirm-modal-v27 .cm27-actions button {
            padding: 0.6rem 1.1rem;
            font-size: 0.8rem; font-weight: 600;
            cursor: pointer; border: 1px solid var(--border, #ccc);
            font-family: inherit;
        }
        #confirm-modal-v27 .cm27-cancel {
            background: transparent; color: var(--text, #111);
        }
        #confirm-modal-v27 .cm27-cancel:hover { background: rgba(0,0,0,0.04); }
        #confirm-modal-v27 .cm27-ok {
            background: var(--text, #111); color: var(--bg, #fff);
            border-color: var(--text, #111);
        }
        #confirm-modal-v27 .cm27-ok.danger {
            background: #dc2626; border-color: #dc2626; color: #fff;
        }
        body.dark-mode #confirm-modal-v27 .cm27-panel { background: #1a1a1e; border-color: #2a2a30; }
        body.dark-mode #confirm-modal-v27 .cm27-cancel { color: #eee; }
        body.dark-mode #confirm-modal-v27 .cm27-ok { background: var(--accent); border-color: var(--accent); color: #fff; }

        @media (max-width: 768px) {
            #confirm-modal-v27 .cm27-actions { flex-direction: column-reverse; }
            #confirm-modal-v27 .cm27-actions button { width: 100%; padding: 0.85rem; }
        }
        


        
        @media (max-width: 768px) {
            
            main#view-backoffice, main#view-bo-login {
                padding: 0 !important;
                max-width: none !important;
                width: 100% !important;
            }


            
            #view-backoffice .calendar-grid {
                grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
                width: 100% !important;
            }
            #view-backoffice .calendar-day-name { padding: 0.3rem 0.1rem !important; letter-spacing: 0 !important; }
            #view-backoffice .calendar-title { font-size: 1rem !important; }
            #view-backoffice .calendar-nav button { padding: 0.35rem 0.55rem !important; font-size: 0.7rem !important; }

            #view-backoffice #pipeline-filter-owner { max-width: 100% !important; }

            #view-backoffice .tasks-quick-add { max-width: 100% !important; box-sizing: border-box !important; }
            #view-backoffice .tasks-quick-add input { min-width: 0 !important; }

            #view-backoffice .pipeline-column { scroll-snap-align: start; }
        }
        


        
        @media (max-width: 768px) {
            
            *, *::before, *::after { box-sizing: border-box; }





            
            .inbox-thread-header { padding: 0.9rem 0.8rem !important; flex-wrap: wrap !important; }
            .inbox-thread-top { flex-wrap: wrap !important; }
            .inbox-thread-subject, .inbox-thread-body { overflow-wrap: anywhere; }
        }
        

        
        .live-catalog-section { margin-top: 5rem; padding-top: 3.5rem; border-top: 1px solid rgba(0,0,0,0.08); }
        body.dark-mode .live-catalog-section { border-top-color: rgba(255,255,255,0.1); }
        .live-catalog-controls { display: flex; gap: 0.8rem; flex-wrap: wrap; margin: 1.6rem 0 2rem; }
        .live-catalog-controls input[type="search"] { flex: 1 1 260px; min-width: 0; padding: 0.75rem 1rem; border: 1px solid rgba(0,0,0,0.15); border-radius: 10px; font: inherit; font-size: 0.9rem; background: transparent; color: inherit; }
        .live-catalog-controls select { flex: 0 1 auto; padding: 0.75rem 1rem; border: 1px solid rgba(0,0,0,0.15); border-radius: 10px; font: inherit; font-size: 0.9rem; background: transparent; color: inherit; max-width: 100%; }
        body.dark-mode .live-catalog-controls input[type="search"], body.dark-mode .live-catalog-controls select { border-color: rgba(255,255,255,0.2); }
        body.dark-mode .live-catalog-controls select option { color: #111; }
        .live-catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1.5rem; }
        .live-card { cursor: pointer; border-radius: 14px; overflow: hidden; border: 1px solid rgba(0,0,0,0.07); transition: transform .18s ease, box-shadow .18s ease; background: rgba(0,0,0,0.015); position: relative; }
        .live-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,0.10); }
        body.dark-mode .live-card { border-color: rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); }
        .live-card-img { aspect-ratio: 6 / 7; background: #f2f2f0; }
        .live-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .live-card-badge { position: absolute; top: 0.7rem; left: 0.7rem; background: #111; color: #fff; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.28rem 0.6rem; border-radius: 999px; }
        .live-card-body { padding: 0.9rem 1rem 1.1rem; }
        .live-card-brand { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray, #888); }
        .live-card-name { font-size: 0.95rem; font-weight: 600; margin: 0.15rem 0 0.3rem; line-height: 1.3; }
        .live-card-meta { font-size: 0.75rem; color: var(--gray, #888); margin-bottom: 0.5rem; }
        .live-card-swatches { display: flex; align-items: center; gap: 0.3rem; margin-bottom: 0.55rem; }
        .live-card-swatch { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.15); }
        .live-card-swatch-more { font-size: 0.68rem; color: var(--gray, #888); }
        .live-card-price { font-size: 0.9rem; font-weight: 600; }
        .live-catalog-pag { display: flex; align-items: center; justify-content: center; gap: 1.2rem; margin: 2.2rem 0 0.5rem; }
        .live-pag-btn { padding: 0.6rem 1.3rem; border-radius: 999px; border: 1px solid rgba(0,0,0,0.18); background: transparent; color: inherit; font: inherit; font-size: 0.85rem; cursor: pointer; transition: opacity .15s; }
        .live-pag-btn:disabled { opacity: 0.3; cursor: default; }
        body.dark-mode .live-pag-btn { border-color: rgba(255,255,255,0.25); }
        .live-catalog-empty { text-align: center; padding: 3rem 1rem; color: var(--gray, #888); font-size: 0.9rem; }
        @media (max-width: 768px) {
            .live-catalog-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }
            .live-catalog-controls { flex-direction: column; }
            .live-catalog-controls select { width: 100%; }
        }
        

        

        
        @media (max-width: 768px) {
            
            #prod-color-input, #prod-size-input { min-width: 8rem !important; }
        }
        

        
        #auth-legal-overlay {
            position: fixed;
            inset: 0;
            z-index: 10050;
            background: rgba(0, 0, 0, 0.75);
            display: none;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            padding: 1.5rem 1rem 4rem;
        }
        #auth-legal-overlay.show { display: block; }
        #auth-legal-overlay .legal-content {
            margin: 0 auto;
            background: var(--bg);
            max-width: 780px;
            padding: 2rem 2.2rem 3rem;
        }
        .auth-legal-bar {
            max-width: 780px;
            margin: 0 auto;
            display: flex;
            justify-content: flex-end;
            padding-bottom: 0.6rem;
        }
        .auth-legal-close {
            background: var(--bg);
            border: 1px solid var(--border);
            color: var(--text);
            font-family: inherit;
            font-size: 0.7rem;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            padding: 0.6rem 1.1rem;
            cursor: pointer;
        }
        .auth-legal-close:hover { background: var(--light-gray); }
        @media (max-width: 768px) {
            #auth-legal-overlay { padding: 0.8rem 0.5rem 3rem; }
            #auth-legal-overlay .legal-content { padding: 1.4rem 1.1rem 2.4rem; }
        }
        

        
        @media (max-width: 768px) {

            
            .account-modal-content {
                max-width: 96vw !important;
                padding: 1.4rem 1.1rem 1.8rem !important;
            }
            .account-form-field-row { grid-template-columns: 1fr !important; }
            .account-modal-content :is([style*="grid-template-columns: 1fr 1fr"]:where(:not([data-stil-nur])), [data-stil*="grid-template-columns: 1fr 1fr"]),
            .account-modal-content :is([style*="grid-template-columns:1fr 1fr"]:where(:not([data-stil-nur])), [data-stil*="grid-template-columns:1fr 1fr"]) {
                grid-template-columns: 1fr !important;
            }
            .account-modal-actions { flex-wrap: wrap !important; }

            
            #view-backoffice :is([style*="1fr 1fr"]:where(:not([data-stil-nur])), [data-stil*="1fr 1fr"]) { grid-template-columns: 1fr !important; }
        }
        

    
        
        .carousel-slide.is-packshot {
            background-size: contain;
            background-repeat: no-repeat;
            background-color: #fff;
        }

        
        .live-card-price-note {
            display: block;
            font-size: 0.68rem;
            font-weight: 400;
            color: #888;
            letter-spacing: 0.02em;
            margin-top: 0.1rem;
        }

        
        .live-card-skeleton { pointer-events: none; cursor: default; }
        .live-card-skeleton:hover { transform: none; box-shadow: none; }
        .live-card-skeleton .live-card-img,
        .live-card-skeleton .live-card-body span {
            background: linear-gradient(90deg, rgba(0,0,0,0.05) 25%, rgba(0,0,0,0.09) 37%, rgba(0,0,0,0.05) 63%);
            background-size: 400% 100%;
            animation: etSkeletonShimmer 1.4s ease infinite;
        }
        .live-card-skeleton .live-card-body span {
            display: block; height: 0.7rem; border-radius: 4px; margin-bottom: 0.5rem;
        }
        .live-card-skeleton .live-card-body span:last-child { width: 60%; margin-bottom: 0; }
        @keyframes etSkeletonShimmer {
            0%   { background-position: 100% 50%; }
            100% { background-position: 0 50%; }
        }
        body.dark-mode .live-card-skeleton .live-card-img,
        body.dark-mode .live-card-skeleton .live-card-body span {
            background: linear-gradient(90deg, rgba(255,255,255,0.06) 25%, rgba(255,255,255,0.12) 37%, rgba(255,255,255,0.06) 63%);
            background-size: 400% 100%;
        }
        .live-catalog-error {
            text-align: center;
            padding: 2.6rem 1.2rem;
            border: 1px solid rgba(0,0,0,0.1);
            border-radius: 14px;
        }
        body.dark-mode .live-catalog-error { border-color: rgba(255,255,255,0.15); }
        .live-catalog-error strong { display: block; font-size: 1rem; font-weight: 600; margin-bottom: 0.5rem; }
        .live-catalog-error span {
            display: block; font-size: 0.85rem; color: var(--gray, #888);
            margin-bottom: 1.2rem; line-height: 1.5;
        }

        
        @media (max-width: 768px) {
            input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
            select,
            textarea { font-size: 16px !important; }
        }



        
        .pd-price-block {
            margin-top: 1.6rem; padding: 1.1rem 1.2rem;
            border: 1px solid var(--border); border-radius: 12px;
            background: var(--surface-alt);
        }
        .pd-price-title {
            font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em;
            text-transform: uppercase; color: var(--gray); margin-bottom: 0.7rem;
        }
        .pd-price-lead { font-size: 1.5rem; font-weight: 600; color: var(--text); }
        .pd-price-lead span { font-size: 0.85rem; font-weight: 300; color: var(--gray); }
        .pd-price-uvp { font-size: 0.85rem; color: var(--gray); margin-top: 0.2rem; }
        .pd-price-table { display: flex; flex-direction: column; }
        .pd-price-row {
            display: flex; justify-content: space-between; align-items: baseline;
            gap: 1rem; padding: 0.42rem 0; border-bottom: 1px solid var(--border);
            font-size: 0.9rem; color: var(--text);
        }
        .pd-price-row:last-child { border-bottom: none; }
        .pd-price-row span { color: var(--gray); font-weight: 300; }
        .pd-price-row strong { font-weight: 600; font-variant-numeric: tabular-nums; }
        .pd-price-hint {
            font-size: 0.76rem; font-weight: 300; color: var(--gray);
            line-height: 1.5; margin-top: 0.7rem;
        }

        
        .view-toggle-btn.no-photo { opacity: 0.55; }
        .view-toggle-btn.no-photo::after { content: ' ·'; }
        .config-view-hint {
            font-size: 0.74rem; font-weight: 300; color: var(--gray);
            line-height: 1.45; margin: 0.5rem 0 0;
        }

        @media (max-width: 768px) {
            .pd-price-block { padding: 0.95rem 1rem; }
            .pd-price-row { font-size: 0.86rem; }
        }


        
        .et-card-del {
            display: block;
            margin-top: 0.45rem;
            background: none;
            border: none;
            padding: 0;
            font: inherit;
            font-size: 0.68rem;
            letter-spacing: 0.02em;
            color: var(--gray);
            cursor: pointer;
            text-decoration: underline;
            text-underline-offset: 2px;
        }
        .et-card-del:hover { color: #D0342C; }


        
        @media (max-width: 768px) {
            .yarn-match-row {
                grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
                grid-template-areas: "design arrow result" "dev dev dev";
                row-gap: 0.45rem;
            }
            .yarn-design-color { grid-area: design; }
            .yarn-arrow { grid-area: arrow; }
            .yarn-match-result { grid-area: result; }
            .yarn-deviation { grid-area: dev; justify-self: start; }
            .yarn-color-info .name, .yarn-result-info .name { overflow-wrap: anywhere; }
            .pers-summary-bar { flex-direction: column; align-items: stretch; gap: 0.7rem; }
            .pers-summary-stats { flex-wrap: wrap; row-gap: 0.6rem; justify-content: space-between; }
            .pers-summary-stat .lbl { white-space: nowrap; }
            .pers-summary-bar > div:last-child { text-align: left !important; }
        }
    

        
        .es-65d1f1c:not(#_):not(#_) { display: none; }
        .es-08d6924:not(#_):not(#_) { max-height: 240px; }
        .es-9c8d62e:not(#_):not(#_) { width: 30px; }
        .es-3d69470:not(#_):not(#_) { width: 100px; }
        .es-eee683a:not(#_):not(#_) { width: 90px; }
        .es-49c831a:not(#_):not(#_) { margin-top: 0.5rem; }
        .es-6aa34d7:not(#_):not(#_) { display:none; }
        .es-c21b703:not(#_):not(#_) { display:flex; align-items:flex-start; gap:0.6rem; margin:0.9rem 0 0; font-size:0.72rem; line-height:1.5; cursor:pointer; }
        .es-8727428:not(#_):not(#_) { margin-top:0.18rem; flex:0 0 auto; }
        .es-abab4e3:not(#_):not(#_) { display:flex; align-items:flex-start; gap:0.6rem; margin:0.55rem 0 1rem; font-size:0.72rem; line-height:1.5; cursor:pointer; }
        .es-1e3291a:not(#_):not(#_) { padding-top: 3rem; }
        .es-fa4b46b:not(#_):not(#_) { font-size: 0.72rem; }
        .es-442dcdb:not(#_):not(#_) { color: var(--accent); cursor: pointer; font-weight: 600; }
        .es-8dca15e:not(#_):not(#_) { display: grid; grid-template-columns: 120px 1fr; gap: 1rem; }
        .es-bf8248e:not(#_):not(#_) { font-size: 0.6em; color: var(--gray); font-weight: 400; letter-spacing: 0; }
        .es-cdc1500:not(#_):not(#_) { color:var(--gray); font-weight:300; margin-top:0.8rem; }
        .es-a5a576f:not(#_):not(#_) { display:none; margin-top:1.2rem; }
        .es-197598d:not(#_):not(#_) { font-size:0.7rem; color:var(--gray); margin-left:0.8rem; }
        .es-984c6c1:not(#_):not(#_) { display:none; width:100%; height:100%; object-fit:contain; }
        .es-f7a8211:not(#_):not(#_) { display: inline-block; width: 14px; height: 14px; background: #111; vertical-align: middle; margin-right: 0.5rem; }
        .es-39dfb25:not(#_):not(#_) { display: flex; gap: 1.2rem; align-items: center; }
        .es-7149872:not(#_):not(#_) { width: 60px; height: 60px; background: var(--text); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.65rem; font-weight: 700; flex-shrink: 0; }
        .es-6cb5373:not(#_):not(#_) { flex-grow: 1; }
        .es-a3d7533:not(#_):not(#_) { font-size: 0.85rem; font-weight: 500; }
        .es-99b32e1:not(#_):not(#_) { font-size: 0.7rem; color: var(--gray); margin-top: 0.2rem; }
        .es-9042cd4:not(#_):not(#_) { display: flex; gap: 0.4rem; }
        .es-f234143:not(#_):not(#_) { background: transparent; border: none; padding: 0; margin: 0; }
        .es-9463ff4:not(#_):not(#_) { cursor:pointer; }
        .es-c8dc096:not(#_):not(#_) { width: 60px; height: 60px; background: #e53e3e; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.65rem; font-weight: 700; flex-shrink: 0; }
        .es-0946154:not(#_):not(#_) { display: none; margin-bottom: 0.9rem; }
        .es-0019dae:not(#_):not(#_) { margin-bottom: 0.35rem; }
        .es-55dd1b1:not(#_):not(#_) { font-size: 0.66rem; color: var(--gray); }
        .es-9565381:not(#_):not(#_) { background:var(--surface-alt);border-left:3px solid var(--accent);padding:0.8rem 1rem;margin:0 0 1rem;font-size:0.74rem;line-height:1.55; }
        .es-1bfc97d:not(#_):not(#_) { font-size:0.72rem; line-height:1.55; color:var(--gray); margin-bottom:1rem; }
        .es-988b389:not(#_):not(#_) { margin-top:0.65rem; }
        .es-920f6b9:not(#_):not(#_) { font-size:0.7rem; line-height:1.5; color:var(--gray); margin:-0.35rem 0 1rem; }
        .es-2f89c75:not(#_):not(#_) { display:flex; align-items:flex-start; gap:0.55rem; margin-bottom:0.65rem; font-size:0.72rem; line-height:1.5; cursor:pointer; }
        .es-ea400bf:not(#_):not(#_) { margin-top:0.16rem; flex:0 0 auto; }
        .es-5ac09cc:not(#_):not(#_) { display:none; align-items:flex-start; gap:0.55rem; margin-bottom:0.65rem; font-size:0.72rem; line-height:1.5; cursor:pointer; }
        .es-397d543:not(#_):not(#_) { display:none; align-items:flex-start; gap:0.55rem; margin-bottom:1rem; font-size:0.72rem; line-height:1.5; cursor:pointer; }
        .es-0fd4e87:not(#_):not(#_) { color: #6B46E5; }
        .es-888c63e:not(#_):not(#_) { color:var(--gray,#888); font-size:0.85rem; }
        .es-4c215d8:not(#_):not(#_) { display:flex; gap:0.5rem; align-items:center; }
        .es-194b4a7:not(#_):not(#_) { width:50%; min-width:0; padding:0.45rem 0.55rem; border:1px solid var(--border); background:var(--surface); color:var(--text); font-size:0.8rem; }
        .es-f1c1c2c:not(#_):not(#_) { color:var(--gray); font-size:0.8rem; }
        .es-90a80d2:not(#_):not(#_) { font-size:0.62rem; color:var(--gray); margin:0.4rem 0 0; line-height:1.4; }
        .es-99b3114:not(#_):not(#_) { flex:1 1 auto; min-width:0; }
        .es-e9d15fb:not(#_):not(#_) { color:var(--gray,#888); font-size:0.9rem; margin:0 0 1.2rem; }
        .es-57ae43d:not(#_):not(#_) { font-size:0.85rem; color:var(--gray, #888); }
        .es-9951c63:not(#_):not(#_) { display:none;margin-top:14px; }
        .es-de6a0d2:not(#_):not(#_) { display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:#1a1a1a;text-decoration:none;border:1px solid #ddd;border-radius:8px;padding:9px 14px;background:#fafafa; }
        .es-983ab02:not(#_):not(#_) { display:none; margin-top: 0.55rem; padding: 0.55rem 0.7rem; background: rgba(45,177,255,0.08); border-left: 2px solid var(--accent); font-size: 0.72rem; line-height: 1.45; }
        .es-b51be25:not(#_):not(#_) { display:block; font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.08rem; color: var(--gray); font-weight: 600; }
        .es-e014588:not(#_):not(#_) { font-size: 0.95rem; }
        .es-65d2c7d:not(#_):not(#_) { display:block; color: var(--gray); font-size: 0.62rem; margin-top: 0.15rem; }
        .es-16e26fb:not(#_):not(#_) { margin-left: 0; margin-top: 0.7rem; }
        .es-342f2af:not(#_):not(#_) { font-size: 0.7rem; color: var(--gray); margin-bottom: 0.7rem; line-height: 1.5; }
        .es-685f487:not(#_):not(#_) { color: var(--gray); }
        .es-074b6cd:not(#_):not(#_) { color: var(--text); }
        .es-ab5c1dd:not(#_):not(#_) { font-size: 0.62rem; color: var(--gray); margin-top: 0.5rem; }
        .es-dd046da:not(#_):not(#_) { background: #fafafa; padding: 1rem; border-left: 2px solid var(--accent); margin-top: 1.5rem; }
        .es-6b4c38d:not(#_):not(#_) { margin-bottom: 0.5rem; color: var(--accent); }
        .es-b8ff4e8:not(#_):not(#_) { font-size: 0.72rem; color: var(--text); line-height: 1.5; margin: 0; font-weight: 300; }
        .es-1fb379e:not(#_):not(#_) { font-size: 0.72rem; color: var(--gray); line-height: 1.5; margin: 0; }
        .es-493f0f7:not(#_):not(#_) { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.1rem; color: var(--gray); margin: 0 0 0.8rem 0; font-weight: 600; }
        .es-4d64274:not(#_):not(#_) { font-size: 0.62rem; color: var(--gray); margin-top: 0.7rem; line-height: 1.5; }
        .es-940631d:not(#_):not(#_) { background: #fff8e1; padding: 1rem; border-left: 2px solid #FFCC00; margin-top: 1.5rem; }
        .es-535c098:not(#_):not(#_) { margin-bottom: 0.5rem; color: #c47100; }
        .es-a4279a6:not(#_):not(#_) { font-size: 1.1rem; line-height: 1; }
        .es-fa207e9:not(#_):not(#_) { font-size: 0.65rem; color: var(--gray); text-transform: uppercase; letter-spacing: 0.08rem; font-weight: 700; }
        .es-9e38d55:not(#_):not(#_) { font-size: 0.62rem; color: rgba(255,255,255,0.55); text-align: right; line-height: 1.4; }
        .es-28fc572:not(#_):not(#_) { color: #28CD41; }
        .es-7454d08:not(#_):not(#_) { width: 25%; height: 18%; }
        .es-d8117bc:not(#_):not(#_) { width: 18%; height: 13%; }
        .es-f870f38:not(#_):not(#_) { display: flex; gap: 0.5rem; }
        .es-5b3798e:not(#_):not(#_) { background: var(--accent); display: none; }
        .es-021de70:not(#_):not(#_) { background: #fafafa; padding: 1rem; margin-top: 1.5rem; }
        .es-46a136d:not(#_):not(#_) { margin-bottom: 0.6rem; }
        .es-b63e495:not(#_):not(#_) { margin: 0; padding-left: 1.2rem; font-size: 0.72rem; color: var(--text); line-height: 1.7; font-weight: 300; }
        .es-cecb683:not(#_):not(#_) { top: 28%; left: 28%; width: 18%; height: 18%; }
        .es-d7183d8:not(#_):not(#_) { display: none; top: 30%; left: 30%; width: 14%; height: 14%; }
        .es-86c88ea:not(#_):not(#_) { opacity:0.4; }
        .es-7aee0cf:not(#_):not(#_) { width: auto; padding: 0 0.7rem; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08rem; }
        .es-15b2ef1:not(#_):not(#_) { font-size: 0.6rem; text-transform: uppercase; color: var(--gray); letter-spacing: 0.1rem; font-weight: 600; cursor: pointer; }
        .es-f450083:not(#_):not(#_) { font-size: 0.7rem; color: var(--gray); margin-top: 1.5rem; text-align: center; }
        .es-02f5344:not(#_):not(#_) { color: var(--text); cursor: pointer; }
        .es-1f47a8c:not(#_):not(#_) { font-size: 0.75rem; color: var(--gray); margin-top: 1.5rem; text-align: center; line-height: 1.6; }
        .es-63aee35:not(#_):not(#_) { margin-right: 0.4rem; vertical-align: -1px; }
        .es-f327f31:not(#_):not(#_) { background: linear-gradient(135deg, #6B46E5 0%, #4A30A8 100%); }
        .es-9ad2db0:not(#_):not(#_) { font-size: 0.82rem; color: var(--gray); margin: 0 0 1.5rem 0; font-weight: 300; line-height: 1.5; }
        .es-76270ce:not(#_):not(#_) { margin-bottom: 0.5rem; }
        .es-8f2c8e3:not(#_):not(#_) { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08rem; color: var(--gray); font-weight: 600; margin: 1.2rem 0 0.5rem; }
        .es-ba8fd26:not(#_):not(#_) { margin-top: 1.5rem; }
        .es-78852a8:not(#_):not(#_) { position: relative; }
        .es-21b675d:not(#_):not(#_) { display:none; background:#e53e3e; color:#fff; font-size:0.55rem; padding:0.15rem 0.4rem; font-weight:700; margin-left:auto; position: absolute; right: 1rem; }
        .es-e04b126:not(#_):not(#_) { display:none; margin-bottom:1.5rem; padding:0.9rem 1.2rem; background:rgba(0,163,255,0.06); border-left:3px solid var(--accent); font-size:0.78rem; line-height:1.55; color:var(--text); font-weight:300; }
        .es-cb9cb98:not(#_):not(#_) { color: var(--accent); }
        .es-3d63a14:not(#_):not(#_) { border-left: 3px solid var(--accent); display: none; }
        .es-4d95492:not(#_):not(#_) { color: #111; }
        .es-7d47f5f:not(#_):not(#_) { font-size: 0.85rem; color: var(--gray); font-weight: 300; margin: 0 0 1.5rem 0; }
        .es-5f9de1c:not(#_):not(#_) { display: flex; gap: 1rem; align-items: center; }
        .es-c80ba5d:not(#_):not(#_) { padding: 0.9rem 2rem; font-size: 0.8rem; }
        .es-b67e34c:not(#_):not(#_) { background: var(--off-white); cursor: not-allowed; }
        .es-83a4197:not(#_):not(#_) { appearance: none; background: #fff url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNiIgdmlld0JveD0iMCAwIDEwIDYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEgMUw1IDVMOSAxIiBzdHJva2U9IiM4ODg4ODgiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=') no-repeat right 1.2rem center; }
        .es-f8abd8e:not(#_):not(#_) { display: flex; justify-content: flex-end; gap: 1rem; margin-top: 0.5rem; }
        .es-1534229:not(#_):not(#_) { padding: 1rem 2rem; font-size: 0.8rem; }
        .es-bedfcfe:not(#_):not(#_) { background: #f9f9f9; border-style: dashed; cursor: pointer; }
        .es-129bbd9:not(#_):not(#_) { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 1rem 0; color: var(--gray); }
        .es-918b15e:not(#_):not(#_) { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08rem; font-weight: 500; }
        .es-179b190:not(#_):not(#_) { background: #f9f9f9; }
        .es-196b0de:not(#_):not(#_) { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
        .es-6d74443:not(#_):not(#_) { padding: 1rem; background: #fff; border: 1px solid var(--border); }
        .es-bed969e:not(#_):not(#_) { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08rem; color: var(--accent); font-weight: 600; margin-bottom: 0.4rem; }
        .es-a83fd85:not(#_):not(#_) { font-size: 0.72rem; color: var(--gray); line-height: 1.6; font-weight: 300; }
        .es-fc3afbf:not(#_):not(#_) { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08rem; color: #6B46E5; font-weight: 600; margin-bottom: 0.4rem; }
        .es-dd9f2bb:not(#_):not(#_) { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08rem; color: var(--gray); font-weight: 600; margin-bottom: 0.4rem; }
        .es-2dcb983:not(#_):not(#_) { font-size: 0.75rem; color: var(--gray); margin: 0; }
        .es-a33cd5a:not(#_):not(#_) { margin-bottom: 1.5rem; padding: 1rem 1.2rem; background: linear-gradient(90deg, rgba(0,163,255,0.05) 0%, transparent 100%); border-left: 3px solid var(--accent); }
        .es-a7f677f:not(#_):not(#_) { font-size: 0.8rem; color: var(--text); font-weight: 500; margin-bottom: 0.3rem; }
        .es-6b1ee1d:not(#_):not(#_) { font-size: 0.72rem; color: var(--gray); line-height: 1.55; font-weight: 300; }
        .es-6f10684:not(#_):not(#_) { margin-top: 1rem; display: inline-flex; align-items: center; gap: 0.5rem; }
        .es-96b6a36:not(#_):not(#_) { font-size:0.66rem; text-transform:uppercase; letter-spacing:0.05rem; color:var(--gray); white-space:nowrap; }
        .es-c93fcc1:not(#_):not(#_) { font-size:0.7rem;line-height:1.5;color:var(--gray);margin:0.8rem 0 0; }
        .es-a4748a2:not(#_):not(#_) { margin:0.9rem 0 0 0; font-size:0.74rem; color:var(--gray); }
        .es-53b8ce0:not(#_):not(#_) { display: flex; justify-content: space-between; align-items: center; }
        .es-aa258f4:not(#_):not(#_) { font-size:0.9rem; font-weight:500; margin: 0 0 0.3rem 0; }
        .es-65d7dc9:not(#_):not(#_) { font-size:0.78rem; color:var(--gray); margin: 0; font-weight: 300; }
        .es-e5cad0e:not(#_):not(#_) { background: #fff5f5; }
        .es-48614c0:not(#_):not(#_) { color:var(--gray); }
        .es-1a00c26:not(#_):not(#_) { width: 100%; margin-top: 1rem; }
        .es-908d14d:not(#_):not(#_) { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; text-transform: none; letter-spacing: 0; color: var(--text); }
        .es-3e4b7c8:not(#_):not(#_) { width: auto; }
        .es-1b93e58:not(#_):not(#_) { font-size: 0.78rem; }
        .es-65f7d47:not(#_):not(#_) { display:none; padding: 1rem; background: #fafafa; border-left: 3px solid var(--accent); margin-bottom: 1rem; font-size: 0.78rem; line-height: 1.5; }
        .es-160b7b3:not(#_):not(#_) { background:none; border:0; padding:0; color:var(--accent); cursor:pointer; font:inherit; font-weight:600; }
        .es-71ddd8a:not(#_):not(#_) { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
        .es-e53b590:not(#_):not(#_) { width: 100%; padding: 0.85rem 1rem; border: 1px solid var(--border); font-family: 'Inter', sans-serif; font-size: 0.85rem; outline: none; resize: vertical; line-height: 1.55; }
        .es-8c970e5:not(#_):not(#_) { font-size: 0.62rem; color: var(--gray); margin-top: 0.3rem; }
        .es-c83acb9:not(#_):not(#_) { display: none; padding: 1rem 1.2rem; background: rgba(0,163,255,0.04); border-left: 3px solid var(--accent); margin-bottom: 1rem; }
        .es-4bbf3df:not(#_):not(#_) { margin-bottom: 0; }
        .es-9c14a81:not(#_):not(#_) { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.78rem; line-height: 1.5; color: var(--gray); font-weight: 300; }
        .es-680ee1d:not(#_):not(#_) { font-size: 0.72rem; color: var(--gray); margin-top: 0.6rem; display: block; }
        .es-7234d96:not(#_):not(#_) { background: rgba(120, 120, 120, 0.08); color: var(--text); }
        .es-52defd6:not(#_):not(#_) { visibility: hidden; }

        
        .es-638f1b3:not(#_):not(#_) { font-size:0.55rem;color:var(--gray); }
        .es-3f368a3:not(#_):not(#_) { width:100%;height:100%;object-fit:cover; }
        .es-4992732:not(#_):not(#_) { padding:1.2rem;color:var(--gray);font-size:0.75rem;text-align:center; }
        .es-c898ed3:not(#_):not(#_) { width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--gray);font-size:0.65rem; }
        .es-0ed01b5:not(#_):not(#_) { padding:1rem 0;color:var(--gray);font-size:0.8rem;font-weight:300; }
        .es-8236cb4:not(#_):not(#_) { font-family:'SF Mono', Menlo, monospace; font-size:0.78rem; margin-top:0.35rem; word-break:break-all; }
        .es-654cd64:not(#_):not(#_) { font-size:0.75rem; color:var(--gray); line-height:1.6; margin:0; }
        .es-992b7d8:not(#_):not(#_) { margin-bottom:1rem; }
        .es-81f1272:not(#_):not(#_) { font-size:0.72rem; margin-top:0.5rem; line-height:1.55; }
        .es-0dc81bc:not(#_):not(#_) { font-size:0.7rem; color:var(--gray); margin-top:0.35rem; }
        .es-5f377ca:not(#_):not(#_) { font-size:0.7rem; color:var(--accent); text-decoration:none; white-space:nowrap; }
        .es-f9ee1d8:not(#_):not(#_) { font-size:0.85rem; font-weight:600; }
        .es-443c8a8:not(#_):not(#_) { display:flex; justify-content:space-between; align-items:baseline; gap:0.8rem; flex-wrap:wrap; }
        .es-b7c5396:not(#_):not(#_) { border:1px solid var(--border); border-radius:10px; padding:0.9rem 1rem; margin-bottom:0.7rem; }
        .es-c959ba4:not(#_):not(#_) { color:var(--gray);font-size:0.8rem;text-align:center;padding:1.5rem 0; }
        .es-1963162:not(#_):not(#_) { display:inline-block; width:14px; height:14px; overflow:hidden; vertical-align:middle; margin-right:0.5rem; border:1px solid #ddd; }
        .es-5b0d456:not(#_):not(#_) { width:100%; box-sizing:border-box; margin:0.4rem 0 0; padding:0.7rem; border:1px solid var(--border); font-family:inherit; font-size:0.85rem; resize:vertical; }
        .es-5cc5629:not(#_):not(#_) { background:var(--accent); padding:1rem; }
        .es-ff60e8b:not(#_):not(#_) { width:100%; margin-top:0.9rem; padding:0.8rem; border:1px solid #d7d7e0; border-radius:9px; font-size:1.35rem; letter-spacing:0.35em; text-align:center; box-sizing:border-box; }
        .es-a8ab6d1:not(#_):not(#_) { margin:0 0 0.9rem; padding:0.6rem 0.75rem; border-radius:8px; background:#fdecec; color:#c53030; font-size:0.85rem; }
        .es-49d5208:not(#_):not(#_) { padding:0.78rem 1rem; border:1px solid #d7d7e0; border-radius:9px; background:#fff; color:#555; font-size:0.95rem; cursor:pointer; }
        .es-540b53e:not(#_):not(#_) { flex:1; padding:0.78rem; border:0; border-radius:9px; background:#6B46E5; color:#fff; font-size:0.95rem; cursor:pointer; }
        .es-55c6f48:not(#_):not(#_) { display:flex; gap:0.6rem; margin-top:1.3rem; }
        .es-09455a2:not(#_):not(#_) { margin:0 0 0.8rem; font-size:1.15rem; }
        .es-9d34dbc:not(#_):not(#_) { background:#fff; color:#1a1a2e; border-radius:14px; max-width:420px; width:100%; padding:1.6rem 1.5rem; box-shadow:0 20px 60px rgba(0,0,0,0.35); max-height:90vh; overflow:auto; }
        .es-2e17507:not(#_):not(#_) { font-family:monospace; font-size:0.85rem; }
        .es-708044c:not(#_):not(#_) { margin:0.9rem 0 0; font-size:0.78rem; color:#777; line-height:1.5; word-break:break-all; }
        .es-ac77cbf:not(#_):not(#_) { width:190px; height:190px; border:1px solid #eceCf2; border-radius:10px; }
        .es-9050085:not(#_):not(#_) { text-align:center; }
        .es-4c9252e:not(#_):not(#_) { margin:0 0 1rem; font-size:0.9rem; color:#555; line-height:1.5; }
        .es-960ef9a:not(#_):not(#_) { opacity: 0.7; }
        .es-c235685:not(#_):not(#_) { opacity: 0.3; }
        .es-afa019e:not(#_):not(#_) { font-size: 0.78rem; font-weight: 600; color: var(--accent); font-family: 'SF Mono', monospace; }
        .es-5b60ca3:not(#_):not(#_) { background: #28CD41; }
        .es-4867b88:not(#_):not(#_) { color: #e53e3e; }
        .es-456c500:not(#_):not(#_) { border:1px solid var(--border); border-radius:50%; width:18px; height:18px; line-height:1; font-size:0.6rem; padding:0; color:var(--gray); }
        .es-8d8827f:not(#_):not(#_) { display:inline-flex; align-items:center; gap:0.5rem; }
        .es-3aab5e9:not(#_):not(#_) { font-weight: 400; color: var(--gray); font-size: 0.7rem; }
        .es-8e5513a:not(#_):not(#_) { list-style:none; color: var(--gray); font-size: 0.85rem; text-align: center; padding: 2rem 0; }
        .es-b2d0926:not(#_):not(#_) { opacity:0.55; cursor:default; }
        .es-28add9d:not(#_):not(#_) { color:#e53e3e; }
        .es-dc12d9f:not(#_):not(#_) { color: var(--gray); font-size: 0.85rem; grid-column: 1/-1; text-align: center; padding: 2rem; }
        .es-097ae64:not(#_):not(#_) { color:var(--accent); }
        .es-62065d8:not(#_):not(#_) { font-size:0.6rem; }
        .es-f7ee192:not(#_):not(#_) { background: #fff; border: 1px solid #ccc; padding: 1rem; font-size: 0.7rem; color: #888; text-align: center; }
        .es-c0e3a5d:not(#_):not(#_) { width:100%;height:100%;object-fit:contain;display:block; }
        .es-e912545:not(#_):not(#_) { max-width:100%;max-height:100%; }
        .es-b6eb53e:not(#_):not(#_) { color:var(--gray); font-size:0.7rem; }
        .es-4f93258:not(#_):not(#_) { color:var(--gray);font-size:0.8rem;text-align:center;padding:2rem 0; }
        .es-41c6172:not(#_):not(#_) { background:#f0f0f0; display:flex; align-items:center; justify-content:center; font-size:0.55rem; color:var(--gray); text-align:center; padding:2px; }
        .es-0deeda8:not(#_):not(#_) { text-align:left; }
        .es-3d6b815:not(#_):not(#_) { padding: 2rem; text-align: center; color: var(--gray); border: 1px dashed var(--border); font-size: 0.85rem; }
        .es-d1c0ca8:not(#_):not(#_) { padding:0.9rem 0;font-size:0.72rem;line-height:1.5;color:var(--gray); }
        .es-d62d90a:not(#_):not(#_) { padding:1.5rem; font-size:0.85rem; color:var(--gray,#888); }
        .es-74bb51a:not(#_):not(#_) { font-size: 0.7rem; color: var(--gray); margin-top: 0.4rem; }
        .es-6959359:not(#_):not(#_) { font-size: 0.78rem; line-height: 1.5; color: var(--text); font-weight: 500; }
        .es-0e79223:not(#_):not(#_) { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.1rem; color: #1a8a2c; font-weight: 700; margin-bottom: 0.5rem; }
        .es-03c1f37:not(#_):not(#_) { margin-top: 1.5rem; padding: 1rem; background: rgba(40, 205, 65, 0.1); border-left: 3px solid #28CD41; }
        .es-f1792c2:not(#_):not(#_) { opacity: 0.3; margin-bottom: 1rem; }
        .es-29f101f:not(#_):not(#_) { color: var(--gray); margin: 0; }
        .es-4bde3a6:not(#_):not(#_) { text-align:center; padding: 3rem 2rem; }
        .es-e66ad0d:not(#_):not(#_) { font-size: 0.7rem; color: var(--gray); padding: 0.5rem 0; }
        .es-43f4c1f:not(#_):not(#_) { padding:2rem; text-align:center; }
        .es-6695a6e:not(#_):not(#_) { margin-top:0.8rem; }
        .es-ad7942c:not(#_):not(#_) { color:var(--accent);cursor:pointer; }
        .es-66e6b65:not(#_):not(#_) { margin-top:1rem; }
        .es-b99656c:not(#_):not(#_) { border:none; }
        .es-8dc2e57:not(#_):not(#_) { margin-right:0.5rem; }
        .es-2c1d28a:not(#_):not(#_) { margin:0 0 0.8rem; }
        .es-383d953:not(#_):not(#_) { border:none;margin-top:0.8rem; }
        .es-867267d:not(#_):not(#_) { color: var(--accent); cursor: pointer; }
        .es-769c74a:not(#_):not(#_) { background: #FFCC00; color: #000; }
        .es-36fc079:not(#_):not(#_) { font-size: 0.7rem; color: var(--gray); margin-top: 1.5rem; }
        .es-e775dfd:not(#_):not(#_) { color: var(--gray); font-size: 0.72rem; }
        .es-a476d57:not(#_):not(#_) { background: var(--surface-alt); padding: 1rem 1.2rem; margin: 1rem auto; max-width: 460px; text-align: left; font-size: 0.78rem; line-height: 1.6; }
        .es-b2a2451:not(#_):not(#_) { font-family: monospace; font-size: 0.7rem; }
        .es-547d246:not(#_):not(#_) { color: var(--gray); font-size: 0.85rem; font-weight: 300; }
        .es-78e6c20:not(#_):not(#_) { margin-top:0.9rem; }
        .es-d4f9930:not(#_):not(#_) { margin-top:1.1rem; border-top:1px solid var(--border); padding-top:0.9rem; }
        .es-bfff618:not(#_):not(#_) { background: rgba(40,205,65,0.06); border-left: 3px solid #28CD41; padding: 0.85rem 1.1rem; margin-top: 1.3rem; font-size: 0.75rem; line-height: 1.5; }
        .es-6382c2e:not(#_):not(#_) { background: rgba(255,204,0,0.08); border-left: 3px solid #FFCC00; padding: 0.85rem 1.1rem; margin-top: 1.3rem; font-size: 0.75rem; line-height: 1.5; }
        .es-59f0d3b:not(#_):not(#_) { background: var(--surface-alt); padding: 0.85rem 1.1rem; border-left: 3px solid var(--accent); margin-bottom: 1.5rem; font-size: 0.78rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; }
        .es-bb8e611:not(#_):not(#_) { color:#28CD41; }
        .es-a69c45a:not(#_):not(#_) { background: var(--surface-alt); padding: 0.85rem 1.1rem; border-left: 3px solid var(--accent); margin-bottom: 1.5rem; font-size: 0.78rem; }
        .es-3ed8d9a:not(#_):not(#_) { grid-column: 1 / -1; color: var(--gray); font-size: 0.78rem; text-align: center; padding: 2rem; }
        .es-bf8042c:not(#_):not(#_) { font-size: 0.7rem; color: var(--gray); margin-top: 1.3rem; line-height: 1.5; }
        .es-6a6d205:not(#_):not(#_) { background: rgba(40,205,65,0.06); border-left: 3px solid #28CD41; padding: 0.9rem 1.1rem; margin-bottom: 1.2rem; font-size: 0.78rem; color: var(--text); }

        
        .es-9fbf8e1:not(#_):not(#_) { display:inline-block; width:14px; height:14px; vertical-align:middle; margin-right:0.5rem; border:1px solid #ddd; }
        .es-3eadd47:not(#_):not(#_) { font-size: 0.7rem; font-weight: 600; }
        .es-a4aea5e:not(#_):not(#_) { display:inline-block; width:10px; height:10px; vertical-align:middle; margin-right:0.4rem; }
        .es-58f2063:not(#_):not(#_) { margin-top: 0.65rem; padding-top: 0.55rem; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; font-size: 0.66rem; }
        .es-f4b896c:not(#_):not(#_) { background: transparent; border: 1px solid currentColor; padding: 0.3rem 0.55rem; font-size: 0.58rem; font-weight: 600; color: inherit; }
        .es-5950463:not(#_):not(#_) { padding:0.6rem 0.8rem; margin-bottom:0.7rem; font-size:0.7rem; line-height:1.5; }