@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
        :root {
            --accent: #f59e0b;
            --accent-soft: rgba(245, 158, 11, 0.16);
            --accent-border: rgba(255, 184, 82, 0.24);
            --copper: #b45309;
            --ember: #dc6b13;
            --panel: rgba(18, 18, 20, 0.78);
            --panel-deep: rgba(8, 11, 18, 0.82);
        }
        body {
            font-family: 'Inter', sans-serif;
            background:
                linear-gradient(120deg, rgba(245, 158, 11, 0.08), transparent 30%, rgba(34, 197, 94, 0.035) 74%, rgba(220, 107, 19, 0.06)),
                linear-gradient(180deg, #07090f 0%, #100c0a 48%, #07090f 100%);
            color: #f3f4f6;
        }
        body::before {
            content: "";
            position: fixed;
            inset: 0;
            pointer-events: none;
            background:
                linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 18%, transparent 78%, rgba(0, 0, 0, 0.28)),
                repeating-linear-gradient(135deg, rgba(255, 184, 82, 0.045) 0 1px, transparent 1px 24px);
            opacity: 0.45;
            z-index: -1;
        }
        .glass {
            background: linear-gradient(180deg, var(--panel), var(--panel-deep));
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid var(--accent-border);
            box-shadow: 0 18px 44px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 232, 190, 0.045);
        }
        nav.glass {
            background: rgba(9, 11, 18, 0.86);
            border-bottom-color: rgba(255, 184, 82, 0.18);
        }
        nav.glass .max-w-7xl > .flex {
            min-height: 72px;
            height: auto;
            gap: 18px;
            padding-top: 8px;
            padding-bottom: 8px;
        }
        nav.glass .flex.items-center.space-x-3 {
            flex: 0 0 auto;
            min-width: max-content;
        }
        nav.glass .flex.items-center.space-x-3 > div:first-child {
            width: 52px;
            height: 52px;
            flex: 0 0 52px;
            border-radius: 14px;
        }
        nav.glass .flex.items-center.space-x-3 > div:first-child img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        nav.glass h1 {
            line-height: 1.05;
        }
        .gradient-text { background: linear-gradient(135deg, #f8d68a 0%, #f59e0b 45%, #c2410c 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
        .status-dot { box-shadow: 0 0 12px currentColor; }
        .product-card { transition: all 0.3s ease; }
        .product-card:hover { transform: translateY(-4px); box-shadow: 0 22px 48px rgba(245, 158, 11, 0.16); }
        .shopify-product-thumb {
            overflow: hidden;
            border: 1px solid rgba(255, 184, 82, 0.18);
        }
        .shopify-product-thumb img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .workspace-switch {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 4px;
            margin: 0 18px;
            border-radius: 10px;
            border: 1px solid rgba(255, 184, 82, 0.18);
            background: rgba(7, 10, 17, 0.72);
            flex: 0 0 auto;
            min-width: 0;
        }
        .workspace-tab {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            height: 32px;
            padding: 0 11px;
            border-radius: 8px;
            color: #9ca3af;
            font-size: 13px;
            font-weight: 700;
            transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
            white-space: nowrap;
            flex: 0 0 auto;
        }
        .workspace-tab i {
            flex: 0 0 auto;
            width: 14px;
            text-align: center;
        }
        .workspace-tab span {
            display: inline-block;
        }
        .workspace-tab:hover {
            color: #f8d68a;
            background: rgba(245, 158, 11, 0.11);
        }
        .workspace-tab.active {
            color: #120906;
            background: linear-gradient(135deg, #f8d68a, #f59e0b 55%, #dc6b13);
            box-shadow: 0 10px 22px rgba(245, 158, 11, 0.2);
        }
        @media (max-width: 1180px) {
            .workspace-switch {
                position: fixed;
                left: 12px;
                right: 12px;
                bottom: 12px;
                z-index: 60;
                justify-content: center;
                backdrop-filter: blur(16px);
                margin: 0;
                box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
            }
            .workspace-tab {
                flex: 1;
                justify-content: center;
                min-width: 0;
            }
        }
        @media (max-width: 560px) {
            .workspace-tab {
                gap: 5px;
                padding: 0 7px;
                font-size: 11px;
            }
            .workspace-tab i {
                width: 12px;
                font-size: 12px;
            }
        }
        .market-hero {
            position: relative;
            overflow: hidden;
        }
        .market-hero::after {
            content: "";
            position: absolute;
            inset: auto -10% -60% 35%;
            height: 160px;
            transform: rotate(-8deg);
            background: linear-gradient(90deg, transparent, rgba(245, 158, 11, 0.16), transparent);
            pointer-events: none;
        }
        .market-card {
            transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
        }
        .market-card:hover {
            transform: translateY(-2px);
            border-color: rgba(245, 158, 11, 0.32);
            box-shadow: 0 18px 40px rgba(245, 158, 11, 0.12);
        }
        .market-icon {
            width: 48px;
            height: 48px;
            flex: 0 0 48px;
            display: grid;
            place-items: center;
            border-radius: 10px;
            background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(124, 45, 18, 0.14));
            border: 1px solid rgba(255, 184, 82, 0.2);
            font-size: 20px;
        }
        .market-badge {
            display: inline-flex;
            align-items: center;
            min-height: 21px;
            padding: 2px 7px;
            border-radius: 999px;
            border: 1px solid rgba(255, 184, 82, 0.18);
            background: rgba(245, 158, 11, 0.11);
            color: #f8d68a;
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 0;
        }
        .market-action {
            width: 36px;
            height: 36px;
            display: inline-grid;
            place-items: center;
            border-radius: 9px;
            border: 1px solid rgba(75, 85, 99, 0.9);
            background: rgba(7, 10, 17, 0.84);
            color: #d1d5db;
            transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
        }
        .market-action:hover {
            color: #f8d68a;
            border-color: rgba(245, 158, 11, 0.45);
            background: rgba(245, 158, 11, 0.12);
        }
        .market-action.primary {
            color: #f59e0b;
            border-color: rgba(245, 158, 11, 0.32);
        }
        .market-action.danger:hover {
            color: #f87171;
            border-color: rgba(248, 113, 113, 0.42);
            background: rgba(248, 113, 113, 0.11);
        }
        .market-monitor-panel {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 220px;
            gap: 16px;
            align-items: center;
            padding: 14px;
            margin-bottom: 16px;
            border-radius: 12px;
            border: 1px solid rgba(255, 184, 82, 0.14);
            background: rgba(7, 10, 17, 0.58);
        }
        .market-monitor-state {
            display: flex;
            align-items: center;
            gap: 10px;
            min-height: 48px;
            padding: 10px 12px;
            border-radius: 10px;
            background: rgba(3, 7, 18, 0.56);
            border: 1px solid rgba(75, 85, 99, 0.6);
        }
        .market-monitor-state span {
            width: 10px;
            height: 10px;
            flex: 0 0 10px;
            border-radius: 999px;
            background: #6b7280;
            box-shadow: 0 0 10px currentColor;
        }
        .market-monitor-state span.active {
            background: #22c55e;
            color: #22c55e;
        }
        .market-monitor-state p {
            color: #e5e7eb;
            font-size: 13px;
            font-weight: 700;
            line-height: 1.2;
        }
        .market-monitor-state small {
            display: block;
            color: #9ca3af;
            font-size: 11px;
            margin-top: 2px;
        }
        @media (max-width: 720px) {
            .market-monitor-panel {
                grid-template-columns: 1fr;
            }
        }
        .variants-hero {
            position: relative;
            overflow: hidden;
        }
        .variants-hero::after {
            content: "";
            position: absolute;
            inset: -55% -8% auto 42%;
            height: 190px;
            transform: rotate(10deg);
            background: linear-gradient(90deg, transparent, rgba(255, 184, 82, 0.16), transparent);
            pointer-events: none;
        }
        .variant-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 16px;
        }
        .variant-toolbar {
            display: flex;
            align-items: flex-end;
            gap: 12px;
            margin-bottom: 16px;
            flex-wrap: wrap;
        }
        .variant-search-group {
            flex: 1 1 280px;
            margin-bottom: 0;
        }
        .variant-card {
            overflow: hidden;
            border-radius: 12px;
            transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
        }
        .variant-card:hover {
            transform: translateY(-2px);
            border-color: rgba(245, 158, 11, 0.35);
            box-shadow: 0 18px 40px rgba(245, 158, 11, 0.12);
        }
        .variant-image {
            position: relative;
            aspect-ratio: 16 / 10;
            display: grid;
            place-items: center;
            background: linear-gradient(135deg, rgba(245, 158, 11, 0.16), rgba(8, 11, 19, 0.96));
            border-bottom: 1px solid rgba(255, 184, 82, 0.12);
            color: rgba(248, 214, 138, 0.42);
            font-size: 28px;
        }
        .variant-image img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .variant-image img + i {
            display: none;
        }
        .variant-image.is-empty i {
            display: block;
        }
        .variant-body {
            padding: 16px;
        }
        .variant-id-box {
            display: grid;
            gap: 3px;
            padding: 10px 12px;
            border-radius: 10px;
            background: rgba(7, 10, 17, 0.74);
            border: 1px solid rgba(255, 184, 82, 0.14);
        }
        .variant-id-box strong {
            color: #f8d68a;
            font-size: 13px;
            word-break: break-all;
            line-height: 1.35;
        }
        .variant-image-editor {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 38px;
            gap: 8px;
            margin-top: 14px;
        }
        .variant-image-editor input {
            min-width: 0;
            height: 38px;
            border-radius: 9px;
            border: 1px solid rgba(75, 85, 99, 0.9);
            background: rgba(7, 10, 17, 0.84);
            color: #e5e7eb;
            padding: 0 11px;
            font-size: 13px;
            outline: none;
        }
        .variant-image-editor input:focus {
            border-color: rgba(245, 158, 11, 0.55);
            box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.12);
        }
        .variant-image-editor button {
            width: 38px;
            height: 38px;
            display: grid;
            place-items: center;
            border-radius: 9px;
            border: 1px solid rgba(245, 158, 11, 0.32);
            background: rgba(245, 158, 11, 0.12);
            color: #f8d68a;
            transition: background 0.18s ease, border-color 0.18s ease;
        }
        .variant-image-editor button:hover {
            background: rgba(245, 158, 11, 0.2);
            border-color: rgba(245, 158, 11, 0.55);
        }
        .variant-actions {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            margin-top: 14px;
        }
        .scan-line { background: linear-gradient(90deg, transparent, rgba(245, 158, 11, 0.5), transparent); animation: scan 2s linear infinite; }
        @keyframes scan { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
        .custom-scrollbar::-webkit-scrollbar { width: 6px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: #090b12; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: #b45309; border-radius: 3px; }
        .weight-badge { background: linear-gradient(135deg, rgba(245, 158, 11, 0.22), rgba(180, 83, 9, 0.2)); border: 1px solid rgba(245, 158, 11, 0.34); }
        .unit-selector { appearance: none; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); background-position: right 0.5rem center; background-repeat: no-repeat; background-size: 1.5em 1.5em; }
        .toggle-checkbox:checked { right: 0; border-color: var(--accent); }
        .toggle-checkbox:checked + .toggle-label { background-color: var(--accent); }
        .method-badge { font-size: 10px; padding: 2px 6px; border-radius: 4px; font-weight: 600; }
        .method-redirect { background: rgba(34, 197, 94, 0.2); color: #22c55e; border: 1px solid rgba(34, 197, 94, 0.3); }
        .checkout-badge { background: rgba(245, 158, 11, 0.15); border: 1px solid rgba(245, 158, 11, 0.32); }
        .coupon-badge { background: rgba(234, 179, 8, 0.15); border: 1px solid rgba(234, 179, 8, 0.3); color: #eab308; }
        .klarna-badge { background: rgba(255, 179, 199, 0.15); border: 1px solid rgba(255, 179, 199, 0.3); color: #ffb3c7; }
        .secure-badge { background: rgba(34, 197, 94, 0.15); border: 1px solid rgba(34, 197, 94, 0.3); }
        .input-group label { font-size: 12px; color: #94a3b8; margin-bottom: 4px; display: block; }
        .input-group input, .input-group select { width: 100%; background: rgba(7, 10, 17, 0.88); border: 1px solid rgba(255, 184, 82, 0.18); border-radius: 8px; padding: 10px 12px; color: white; font-size: 14px; }
        .input-group input:focus, .input-group select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.16); }
        .payment-option { cursor: pointer; transition: all 0.2s; }
        .payment-option:hover { background: rgba(245, 158, 11, 0.09); }
        .payment-option.selected { border-color: var(--accent); background: rgba(245, 158, 11, 0.14); }
        .text-primary { color: var(--accent) !important; }
        .bg-primary { background-color: var(--accent) !important; }
        .bg-primary\/10 { background-color: rgba(245, 158, 11, 0.1) !important; }
        .bg-primary\/20 { background-color: rgba(245, 158, 11, 0.18) !important; }
        .bg-primary\/30 { background-color: rgba(245, 158, 11, 0.26) !important; }
        .hover\:bg-primary\/20:hover { background-color: rgba(245, 158, 11, 0.18) !important; }
        .hover\:bg-primary\/30:hover { background-color: rgba(245, 158, 11, 0.26) !important; }
        .border-primary { border-color: var(--accent) !important; }
        .border-primary\/30 { border-color: rgba(245, 158, 11, 0.34) !important; }
        .border-primary\/50 { border-color: rgba(245, 158, 11, 0.52) !important; }
        .ring-primary\/30 { --tw-ring-color: rgba(245, 158, 11, 0.34) !important; }
        .shadow-primary\/25 { --tw-shadow-color: rgba(245, 158, 11, 0.25) !important; }
        .accent-primary { accent-color: var(--accent); }
        .from-primary { --tw-gradient-from: #f59e0b var(--tw-gradient-from-position); --tw-gradient-to: rgb(245 158 11 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
        .from-primary\/20 { --tw-gradient-from: rgb(245 158 11 / 0.2) var(--tw-gradient-from-position); --tw-gradient-to: rgb(245 158 11 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
        .to-secondary { --tw-gradient-to: #7c2d12 var(--tw-gradient-to-position); }
        .to-secondary\/20 { --tw-gradient-to: rgb(124 45 18 / 0.2) var(--tw-gradient-to-position); }
        .hover\:from-primary\/90:hover { --tw-gradient-from: rgb(245 158 11 / 0.9) var(--tw-gradient-from-position); --tw-gradient-to: rgb(245 158 11 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
        .hover\:to-secondary\/90:hover { --tw-gradient-to: rgb(124 45 18 / 0.9) var(--tw-gradient-to-position); }
        input.bg-darker,
        select.bg-darker,
        .bg-surface {
            background-color: rgba(7, 10, 17, 0.88) !important;
            border-color: rgba(255, 184, 82, 0.18) !important;
        }
        input:focus,
        select:focus,
        textarea:focus {
            border-color: var(--accent) !important;
            box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.16) !important;
        }
        button.bg-gradient-to-r {
            box-shadow: 0 16px 34px rgba(245, 158, 11, 0.2), inset 0 1px 0 rgba(255, 244, 214, 0.24);
        }
        .rounded-full.bg-primary,
        .toggle-label.bg-primary {
            background-color: rgba(245, 158, 11, 0.32) !important;
        }
        .login-backdrop {
            position: fixed;
            overflow: hidden;
            background:
                linear-gradient(115deg, rgba(255, 132, 32, 0.12) 0%, transparent 24%, transparent 70%, rgba(246, 196, 93, 0.08) 100%),
                linear-gradient(20deg, rgba(21, 10, 5, 0.92), rgba(3, 7, 18, 0.98) 48%, rgba(18, 14, 18, 0.96)),
                repeating-linear-gradient(135deg, rgba(255, 196, 87, 0.055) 0 1px, transparent 1px 18px);
        }
        .login-backdrop::before {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            background:
                linear-gradient(90deg, transparent 0%, rgba(255, 149, 48, 0.14) 45%, rgba(255, 219, 128, 0.08) 50%, rgba(255, 149, 48, 0.14) 55%, transparent 100%),
                repeating-linear-gradient(90deg, transparent 0 92px, rgba(255, 176, 64, 0.07) 93px, transparent 96px);
            opacity: 0.45;
            transform: skewX(-12deg);
        }
        .login-backdrop::after {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            background:
                linear-gradient(180deg, rgba(255,255,255,0.04), transparent 16%, transparent 82%, rgba(0,0,0,0.45)),
                repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 7px);
            mix-blend-mode: screen;
            opacity: 0.38;
        }
        .login-backdrop > div { position: relative; z-index: 1; }
        .login-card {
            background: linear-gradient(180deg, rgba(24, 20, 18, 0.88), rgba(9, 12, 22, 0.9));
            border: 1px solid rgba(255, 184, 82, 0.22);
            box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55), 0 0 48px rgba(255, 112, 32, 0.14), inset 0 1px 0 rgba(255, 230, 170, 0.08);
        }
        .login-logo {
            border: 1px solid rgba(255, 196, 93, 0.42);
            box-shadow: 0 0 38px rgba(255, 126, 32, 0.34), 0 18px 45px rgba(0, 0, 0, 0.45);
        }
        .login-title {
            color: #f8ead0;
            text-shadow: 0 0 24px rgba(255, 145, 48, 0.3);
        }
        .auth-tab.active { background: linear-gradient(135deg, #f59e0b, #b45309); color: #120906; box-shadow: 0 8px 24px rgba(245, 158, 11, 0.24); }
        #loginOverlay .input-group input:focus {
            border-color: #f59e0b;
            box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.18);
        }
        #loginOverlay .text-primary { color: #f59e0b !important; }
        #loginOverlay .border-primary { border-color: rgba(245, 158, 11, 0.45) !important; }
        #loginOverlay .bg-primary\/10 { background-color: rgba(245, 158, 11, 0.1) !important; }
        #loginOverlay .auth-submit {
            background: linear-gradient(135deg, #f59e0b, #dc6b13 55%, #7c2d12);
            box-shadow: 0 14px 34px rgba(245, 158, 11, 0.22), inset 0 1px 0 rgba(255, 244, 214, 0.28);
        }
        #loginOverlay .auth-submit:hover {
            filter: brightness(1.08);
        }
        .language-control {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            min-height: 32px;
            padding: 3px 4px 3px 9px;
            border-radius: 10px;
            border: 1px solid rgba(255, 184, 82, 0.22);
            background: linear-gradient(180deg, rgba(20, 15, 12, 0.86), rgba(7, 10, 17, 0.88));
            box-shadow: inset 0 1px 0 rgba(255, 230, 170, 0.06), 0 10px 24px rgba(0, 0, 0, 0.18);
            color: #f59e0b;
        }
        .language-control .fa-language {
            font-size: 14px;
            color: #f59e0b;
        }
        .language-segments {
            display: grid;
            grid-template-columns: repeat(2, minmax(34px, 1fr));
            gap: 3px;
            padding: 2px;
            border-radius: 8px;
            background: rgba(0, 0, 0, 0.28);
            border: 1px solid rgba(255, 184, 82, 0.14);
        }
        .lang-btn {
            height: 24px;
            min-width: 34px;
            padding: 0 9px;
            border-radius: 6px;
            color: #9ca3af;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0;
            line-height: 24px;
            transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
        }
        .lang-btn:hover {
            color: #f8d68a;
            background: rgba(245, 158, 11, 0.12);
        }
        .lang-btn.active {
            color: #120906;
            background: linear-gradient(135deg, #f8d68a, #f59e0b 55%, #dc6b13);
            box-shadow: 0 8px 18px rgba(245, 158, 11, 0.22);
        }
        #loginLanguageControl.login-language-control {
            display: flex;
            width: max-content;
            margin: -10px auto 20px;
            padding: 3px 4px 3px 9px;
            background: rgba(7, 10, 17, 0.72);
            box-shadow: inset 0 1px 0 rgba(255, 230, 170, 0.05);
        }