:root {
            /* ─── Premium Navy Blue Theme (الكحلي الفاخر) ─── */
            --cream:      #0a0f1a;
            --cream-dark: #111827;
            --parchment:  #1e293b;
            --gold:       #fbbf24;
            --gold-deep:  #d97706;
            --gold-light: #fcd34d;
            --gold-soft:  rgba(251, 191, 36, 0.12);
            --gold-glow:  rgba(251, 191, 36, 0.35);
            --ink:        #f8fafc;
            --ink-soft:   #e2e8f0;
            --charcoal:   #cbd5e1;
            --muted:      #94a3b8;
            --muted-light:#64748b;
            --border:     rgba(255, 255, 255, 0.08);
            --border-soft:rgba(255, 255, 255, 0.04);
            --danger:     #ef4444;
            --white:      #1e293b;
            --sidebar-bg: #0a0f1a;
            --sidebar-w:  320px;
            --topbar-h:   72px;
            --bottombar-h:80px;
            --font-display: 'Playfair Display', serif;
            --font-serif:   'Playfair Display', serif;
            --font-body:    'Cairo', sans-serif;
            --radius:     20px;
            --radius-sm:  12px;
            --radius-lg:  28px;
            --shadow-sm:  0 4px 16px rgba(0,0,0,0.25);
            --shadow-md:  0 16px 40px rgba(0,0,0,0.35);
            --shadow-lg:  0 32px 80px rgba(0,0,0,0.45);
            --shadow-gold:0 0 40px rgba(251, 191, 36, 0.2);
        }

        html[data-theme="dark"] {
            /* ─── Premium Dark Theme (Black/Gold) ─── */
            --cream:      #050505;
            --cream-dark: #0a0a0a;
            --parchment:  #121212;
            --gold:       #fbbf24;
            --gold-deep:  #d97706;
            --gold-light: #fcd34d;
            --gold-soft:  rgba(251, 191, 36, 0.12);
            --gold-glow:  rgba(251, 191, 36, 0.35);
            --ink:        #f8fafc;
            --ink-soft:   #e2e8f0;
            --charcoal:   #cbd5e1;
            --muted:      #a1a1aa;
            --muted-light:#71717a;
            --border:     rgba(255, 255, 255, 0.1);
            --border-soft:rgba(255, 255, 255, 0.05);
            --danger:     #ef4444;
            --white:      #0a0a0a;
            --sidebar-bg: #050505;
            --shadow-sm:  0 4px 16px rgba(0,0,0,0.4);
            --shadow-md:  0 16px 40px rgba(0,0,0,0.5);
            --shadow-lg:  0 32px 80px rgba(0,0,0,0.7);
            --shadow-gold:0 0 40px rgba(251, 191, 36, 0.2);
        }

        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        html, body { height: 100%; background: var(--cream); color: var(--ink); font-family: var(--font-body); overflow: hidden; transition: background-color 0.4s ease, color 0.4s ease; }

        /* Subtle premium grain overlay */
        body::after {
            content: '';
            position: fixed; inset: 0;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.018'/%3E%3C/svg%3E");
            background-size: 180px;
            pointer-events: none; z-index: 9999; opacity: 0.6;
        }

        /* ════ LOADING ════ */
        #loadingScreen {
            position: fixed; inset: 0;
            background: linear-gradient(135deg, #0a0f1a 0%, #111827 100%);
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            z-index: 99998; transition: opacity 0.8s ease, visibility 0.8s ease;
            gap: 24px;
        }
        #loadingScreen.hidden { opacity: 0; visibility: hidden; pointer-events: none; }

        .ls-bg-pattern {
            position: absolute; inset: 0;
            background-image: 
                radial-gradient(circle at 20% 50%, rgba(251, 191, 36, 0.03) 0%, transparent 50%),
                radial-gradient(circle at 80% 80%, rgba(251, 191, 36, 0.02) 0%, transparent 50%);
        }

        .ls-inner { position: relative; z-index: 1; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; }

        .ls-ornament {
            width: 60px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent);
            margin: 0 auto;
        }

        .ls-brand {
            font-family: var(--font-display);
            font-size: clamp(24px, 6vw, 60px); font-weight: 300;
            letter-spacing: 0.35em;
            color: #ffffff;
            line-height: 1;
            text-indent: 0.35em;
        }
        .ls-brand em { font-style: normal; color: var(--gold-light); font-weight: 600; }

        .ls-tagline {
            font-size: 10px; letter-spacing: 0.5em; color: var(--muted-light);
            text-transform: uppercase; font-weight: 400;
        }

        .ls-bar-wrap {
            width: 180px; height: 1px;
            background: rgba(255,255,255,0.08);
            position: relative; overflow: hidden;
        }
        .ls-bar {
            position: absolute; top: 0; left: 0;
            height: 100%; width: 0%;
            background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-light));
            transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 0 20px var(--gold-glow), 0 0 40px rgba(251, 191, 36, 0.15);
        }
        .ls-pct {
            font-family: var(--font-display);
            font-size: 11px; letter-spacing: 0.4em;
            color: var(--gold-light); font-weight: 400;
            text-shadow: 0 0 10px rgba(251, 191, 36, 0.3);
        }

        /* ════ APP SHELL ════ */
        .app { display: flex; height: 100vh; width: 100vw; overflow: hidden; }

        /* ════ SIDEBAR ════ */
        .sidebar {
            width: var(--sidebar-w); flex-shrink: 0;
            background: linear-gradient(180deg, var(--cream-dark) 0%, var(--cream) 100%);
            border-left: 1px solid var(--border);
            display: flex; flex-direction: column; overflow: hidden;
            position: relative; z-index: 10;
            box-shadow: -8px 0 32px rgba(0,0,0,0.2);
        }
        .sidebar::before {
            content: '';
            position: absolute; top: 0; left: 0; right: 0; bottom: 0;
            background: radial-gradient(ellipse at top right, rgba(251, 191, 36, 0.03) 0%, transparent 60%);
            pointer-events: none;
        }

        .sb-header {
            padding: 20px 20px 16px;
            border-bottom: 1px solid var(--border);
            background: transparent;
            flex-shrink: 0; position: relative;
            z-index: 1;
        }

        .sb-logo-wrap { display: flex; align-items: baseline; gap: 2px; margin-bottom: 2px; }
        .sb-brand {
            font-family: var(--font-display);
            font-size: 24px; font-weight: 700;
            letter-spacing: 0.12em; color: var(--ink);
            text-shadow: 0 0 20px rgba(251, 191, 36, 0.1);
        }
        .sb-brand em { font-style: normal; color: var(--gold); }

        .sb-subtitle {
            font-size: 9px; letter-spacing: 0.3em;
            color: var(--muted); text-transform: uppercase;
            margin-bottom: 10px;
        }

        .sb-product-badge {
            display: inline-flex; align-items: center; gap: 6px;
            background: var(--gold-soft);
            border: 1px solid rgba(251, 191, 36, 0.2);
            border-radius: 100px; padding: 5px 12px;
            font-size: 10px; color: var(--gold);
            font-weight: 600;
            letter-spacing: 0.05em;
        }
        .sb-product-badge::before {
            content: '';
            width: 6px; height: 6px;
            background: var(--gold);
            border-radius: 50%;
            box-shadow: 0 0 8px var(--gold);
        }

        .sb-body {
            flex: 1; overflow-y: auto; overflow-x: hidden;
            padding: 16px 16px; scrollbar-width: thin;
            scrollbar-color: var(--border) transparent;
        }

        .sb-section-label {
            font-size: 11px;
            font-weight: 700;
            color: var(--muted);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            user-select: none;
            transition: color 0.2s;
        }
        .sb-section-label.collapsible:hover {
            color: var(--gold-light);
        }
        .toggle-icon {
            font-size: 10px;
            transition: transform 0.3s ease;
        }
        .toggle-icon.rotated {
            transform: rotate(180deg);
        }
        .sb-section-content {
            max-height: 2000px;
            overflow: hidden;
            transition: max-height 0.3s ease, opacity 0.3s ease;
            opacity: 1;
        }
        .sb-section-content.collapsed {
            max-height: 0;
            opacity: 0;
        }
        .sb-section-label:first-child { margin-top: 0; }

        /* Sections Nav Container */
        .sections-nav-container {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 10px;
            width: 100%;
        }
        .sections-nav-scroll {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 6px;
            padding-bottom: 8px;
            flex: 1;
        }

        .section-nav-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 14px;
            border-radius: 100px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid var(--border);
            color: var(--muted);
            font-size: 11px;
            font-weight: 600;
            cursor: pointer;
            white-space: nowrap;
            flex-shrink: 0;
            transition: all 0.2s ease;
        }
        .section-nav-btn img {
            width: 16px;
            height: 16px;
            border-radius: 4px;
            object-fit: cover;
        }
        .section-nav-btn:hover {
            background: rgba(255, 255, 255, 0.1);
            color: var(--ink);
        }
        .section-nav-btn.active {
            background: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%);
            border-color: var(--gold);
            color: #ffffff;
            box-shadow: 0 4px 14px rgb(187 205 39 / 40%);
        }
        .section-nav-btn.search-trigger {
            padding: 6px 10px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.06);
        }

        .logo-search-box {
            margin-bottom: 10px;
        }
        .logo-search-box input {
            width: 100%;
            padding: 8px 14px;
            border-radius: 100px;
            border: 1px solid var(--border);
            background: var(--cream);
            color: var(--ink);
            font-size: 12px;
            outline: none;
        }

        .logos-panel-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 8px;
            flex-shrink: 0;
        }
        .logos-panel {
            display: flex;
            flex-direction: column;
        }
        .logo-grid { 
            display: grid; 
            grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); 
            gap: 8px; 
            max-width: 100%; 
            box-sizing: border-box;
            height: 180px;
            overflow-y: auto;
            padding-right: 4px;
        }
        .logo-grid::-webkit-scrollbar {
            width: 6px;
        }
        .logo-grid::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 3px;
        }
        .logo-grid::-webkit-scrollbar-thumb {
            background: rgba(251, 191, 36, 0.3);
            border-radius: 3px;
        }
        .logo-grid::-webkit-scrollbar-thumb:hover {
            background: rgba(251, 191, 36, 0.5);
        }
        .logo-item-wrapper {
            position: relative;
            aspect-ratio: 1;
            border: 1.5px solid var(--border);
            border-radius: 12px;
            background: var(--cream);
            padding: 5px;
            cursor: pointer;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .logo-item-wrapper:hover {
            border-color: var(--gold);
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(0,0,0,0.3);
        }
        .logo-item-wrapper.added {
            border-color: var(--gold);
            box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
            background: rgba(99, 102, 241, 0.05);
        }
        .logo-item-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            user-select: none;
            -webkit-user-select: none;
            -webkit-touch-callout: none;
            pointer-events: none;
        }

        /* Check Badge top right */
        .logo-check-badge {
            position: absolute;
            top: 4px;
            right: 4px;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%);
            color: #ffffff;
            font-size: 10px;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transform: scale(0.5);
            transition: all 0.2s ease;
            box-shadow: 0 2px 6px rgba(99, 102, 241, 0.5);
            z-index: 2;
        }
        .logo-item-wrapper.added .logo-check-badge {
            opacity: 1;
            transform: scale(1);
        }

        /* Plus Icon bottom right */
        .logo-add-icon {
            position: absolute;
            bottom: 4px;
            right: 4px;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.15);
            color: var(--muted);
            font-size: 11px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
            z-index: 2;
        }
        .logo-item-wrapper:hover .logo-add-icon {
            background: rgba(255, 255, 255, 0.3);
            color: var(--ink);
        }
        .logo-item-wrapper.added .logo-add-icon {
            display: none;
        }
        /* Sizes Grid & Color Grid */
        .sizes-grid {
            display: grid; grid-template-columns: repeat(5, 1fr);
            gap: 6px; margin-bottom: 8px;
        }
        .size-item {
            aspect-ratio: 1; border-radius: 6px;
            background: var(--parchment); border: 1px solid var(--border);
            display: flex; align-items: center; justify-content: center;
            font-size: 11px; font-weight: 700; color: var(--muted);
            cursor: pointer; transition: all 0.2s;
            position: relative; overflow: hidden;
        }
        .size-item:hover:not(.unavailable) {
            border-color: var(--gold-light); color: var(--gold-light);
        }
        .size-item.active {
            border-color: var(--gold); background: var(--gold-soft); color: var(--gold-light);
            box-shadow: 0 0 10px var(--gold-glow);
        }
        .size-item.unavailable {
            opacity: 0.4; cursor: not-allowed;
            background: var(--cream);
        }
        .size-item.unavailable::after {
            content: ''; position: absolute; top: 50%; left: -10%; width: 120%; height: 1px;
            background: var(--danger); transform: rotate(-45deg);
        }

        #colorsGrid {
            display: grid; grid-template-columns: repeat(6, 1fr);
            gap: 6px; margin-bottom: 8px;
        }
        #colorsGrid .section-item {
            aspect-ratio: 1;
            display: flex; flex-direction: column;
            align-items: center; justify-content: center;
            border: 2px solid var(--border);
            border-radius: 8px; cursor: pointer;
            background: var(--cream);
            transition: all 0.2s ease;
            padding: 3px; position: relative; overflow: hidden;
        }
        #colorsGrid .section-item:hover { border-color: var(--gold); transform: translateY(-1px); }
        #colorsGrid .section-item.active { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-glow); }

        .no-logos-msg { color: var(--muted); font-size: 11px; text-align: center; grid-column: 1/-1; padding: 8px 0; }

        /* Upload Button */
        .upload-logo-btn {
            width: 100%; padding: 8px;
            background: transparent;
            border: 1px dashed var(--border);
            border-radius: 8px; color: var(--muted);
            font-family: var(--font-body); font-size: 11px;
            cursor: pointer;
            display: flex; align-items: center; justify-content: center; gap: 6px;
            transition: all 0.2s; margin-bottom: 10px;
        }
        .upload-logo-btn:hover {
            border-color: var(--gold);
            color: var(--gold-light);
            background: var(--gold-soft);
        }

        /* Instructions */
        .instructions {
            border: 1px solid var(--border);
            border-radius: 8px; padding: 8px 10px;
            background: var(--cream);
        }
        .instruction-row {
            display: flex; align-items: center; gap: 8px;
            font-size: 10px; color: var(--muted);
            padding: 4px 0; line-height: 1.4;
        }
        .instruction-row:not(:last-child) { border-bottom: 1px solid var(--border); }
        .instruction-icon {
            width: 20px; height: 20px;
            background: var(--gold-soft);
            border: 1px solid var(--border);
            border-radius: 5px;
            display: flex; align-items: center; justify-content: center;
            font-size: 10px; flex-shrink: 0;
        }

        /* ════ MAIN ════ */
        .main {
            flex: 1; display: flex; flex-direction: column;
            background: var(--cream); height: 100vh; overflow: hidden; min-width: 0;
        }

        /* ════ TOP BAR ════ */
        .top-bar {
            height: var(--topbar-h); flex-shrink: 0;
            display: flex; align-items: center;
            padding: 0 8px 0 20px;
            border-bottom: 1px solid var(--border-soft);
            gap: 4px;
            background: var(--white);
            box-shadow: var(--shadow-sm);
            position: relative; z-index: 5;
        }
        .top-bar::-webkit-scrollbar { display: none; }
        .top-bar-btns {
            display: flex; align-items: center; justify-content: center;
            gap: 4px; flex: 1; flex-wrap: nowrap;
        }

        .view-btn {
            font-family: var(--font-body); font-size: 11px; font-weight: 600;
            letter-spacing: 0.06em; padding: 7px 14px;
            border-radius: 100px; cursor: pointer;
            border: 1px solid transparent;
            background: transparent; color: var(--muted);
            transition: all 0.2s; white-space: nowrap; flex-shrink: 0;
        }
        .view-btn:hover { color: var(--ink); background: var(--cream-dark); }
        .view-btn.active {
            color: var(--cream);
    box-shadow: var(--shadow-sm);
    background: linear-gradient(135deg, var(--gold-deep) 0%, var(--gold) 50%, var(--gold-light) 100%);
        }
        .view-btn.gold-active {
            background: var(--gold); color: var(--white);
            border-color: var(--gold);
            box-shadow: var(--shadow-gold);
        }

        .divider-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--parchment); flex-shrink: 0; }

        .sidebar-toggle {
            display: none; width: 36px; height: 36px;
            background: var(--cream-dark); border: 1px solid var(--border-soft);
            border-radius: 10px; color: var(--charcoal);
            font-size: 16px; align-items: center; justify-content: center;
            cursor: pointer; flex-shrink: 0; transition: all 0.2s;
        }
        .sidebar-toggle:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }

        /* ════ CANVAS WRAP ════ */
        .canvas-wrap {
            flex: 1; min-height: 0;
            display: flex; align-items: center; justify-content: center;
            padding: 24px; position: relative; overflow: hidden;
            background: var(--cream);
        }

        /* Subtle cross pattern */
        .canvas-wrap::before {
            content: '';
            position: absolute; inset: 0;
            background-image:
                linear-gradient(var(--border-soft) 1px, transparent 1px),
                linear-gradient(90deg, var(--border-soft) 1px, transparent 1px);
            background-size: 40px 40px;
            mask-image: radial-gradient(ellipse at center, transparent 40%, black 100%);
            opacity: 0.4;
        }

        /* Corner brackets */
        .corner { position: absolute; width: 28px; height: 28px; pointer-events: none; z-index: 1; }
        .corner-tl { top: 12px; right: 12px; border-top: 1.5px solid var(--gold-light); border-right: 1.5px solid var(--gold-light); }
        .corner-br { bottom: 12px; left: 12px; border-bottom: 1.5px solid var(--gold-light); border-left: 1.5px solid var(--gold-light); }
        .corner-tr { top: 12px; left: 12px; border-top: 1.5px solid var(--gold-light); border-left: 1.5px solid var(--gold-light); }
        .corner-bl { bottom: 12px; right: 12px; border-bottom: 1.5px solid var(--gold-light); border-right: 1.5px solid var(--gold-light); }

        /* ════ HOODIE CONTAINER ════ */
        .hoodie-container {
            width: min(calc(100vh - var(--topbar-h) - var(--bottombar-h) - 48px), calc(100% - 48px));
            height: min(calc(100vh - var(--topbar-h) - var(--bottombar-h) - 48px), calc(100% - 48px));
            max-width: 520px; max-height: 520px;
            aspect-ratio: 1; position: relative;
            border-radius: 20px; overflow: hidden;
            border: 1px solid rgba(184,146,74,0.2);
            background: #ede9e0;
            box-shadow:
                0 0 0 4px rgba(255,255,255,0.8),
                0 1px 3px rgba(184,146,74,0.15) inset,
                var(--shadow-lg),
                0 0 60px rgba(184,146,74,0.06);
            transition: background 0.3s;
            flex-shrink: 0;
        }

        .hoodie-wrapper { width: 100%; height: 100%; position: relative; }
        .hoodie-wrapper.drag-over::after {
            content: 'أفلت هنا';
            position: absolute; inset: 0;
            border: 2px dashed var(--gold); border-radius: 18px;
            pointer-events: none; z-index: 100;
            display: flex; align-items: center; justify-content: center;
            background: rgba(184,146,74,0.06);
            font-size: 16px; font-weight: 700; color: var(--gold);
        }

        model-viewer {
            width: 100%; height: 100%; border-radius: 18px;
            background-color: transparent; --poster-color: transparent;
        }
        model-viewer::part(default-progress-bar) { height: 2px; background: var(--gold); }

        .logos-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 10; }
        .color-overlay { position: absolute; inset: 0; border-radius: 18px; pointer-events: none; z-index: 5; mix-blend-mode: multiply; opacity: 0; transition: opacity 0.3s; }
        .color-overlay.active { opacity: 0.45; }

        /* Color Picker */
        .color-picker-btn {
            width: 100%; padding: 10px;
            background: transparent;
            border: 1px dashed rgba(184,146,74,0.25);
            border-radius: 10px; color: var(--gold-light);
            font-family: var(--font-body); font-size: 11px;
            cursor: pointer;
            display: flex; align-items: center; justify-content: center; gap: 7px;
            transition: all 0.2s; margin-bottom: 12px;
            letter-spacing: 0.05em;
        }
        .color-picker-btn:hover {
            border-color: var(--gold);
            background: rgba(184,146,74,0.07);
            box-shadow: 0 0 20px rgba(184,146,74,0.1);
        }
        .color-picker-btn .current-color {
            width: 20px; height: 20px;
            border-radius: 50%;
            border: 2px solid var(--gold);
            box-shadow: 0 0 8px rgba(184,146,74,0.3);
        }

        .color-palette {
            display: none;
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(184,146,74,0.15);
            border-radius: 12px;
            padding: 12px;
            margin-bottom: 14px;
        }
        .color-palette.open { display: block; }
        .color-palette-title {
            font-size: 9px; letter-spacing: 0.3em;
            color: var(--gold-light); text-transform: uppercase;
            margin-bottom: 10px;
        }
        .color-options {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 8px;
        }
        .color-option {
            width: 100%; aspect-ratio: 1;
            border-radius: 8px;
            cursor: pointer;
            border: 2px solid transparent;
            transition: all 0.2s;
            position: relative;
        }
        .color-option:hover {
            transform: scale(1.1);
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        }
        .color-option.selected {
            border-color: var(--gold);
            box-shadow: 0 0 0 2px rgba(184,146,74,0.3);
        }
        .color-option.selected::after {
            content: '✓';
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 12px;
            font-weight: bold;
            text-shadow: 0 1px 3px rgba(0,0,0,0.5);
        }

        /* Logo controls */
        body.free-control-active .logo-on-hoodie { pointer-events: none !important; }
        body.free-control-active .logo-on-hoodie .delete-btn,
        body.free-control-active .logo-on-hoodie .resize-handle { display: none !important; }

        .logo-on-hoodie { position: absolute; pointer-events: none; cursor: move; user-select: none; opacity: 0; transition: opacity 0.3s; border: 1px dashed transparent; box-sizing: border-box; }
        .logo-on-hoodie:hover { border-color: rgba(129, 140, 248, 0.6); }
        .logo-on-hoodie.active { opacity: 1; pointer-events: auto; }
        .logo-on-hoodie.selected {
            border-style: solid;
            border-color: var(--gold);
            box-shadow: 0 0 20px rgba(251,191,36,0.35);
        }
        .logo-on-hoodie img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
        .logo-on-hoodie .delete-btn {
            position: absolute; top: -10px; right: -10px;
            background: var(--danger); color: #fff;
            border: 2px solid var(--white);
            border-radius: 50%; width: 22px; height: 22px; cursor: pointer;
            font-size: 10px; opacity: 0; transition: opacity 0.2s; z-index: 10;
            display: flex; align-items: center; justify-content: center;
            box-shadow: var(--shadow-sm);
        }
        .logo-on-hoodie .resize-handle {
            position: absolute; bottom: -10px; right: -10px;
            width: 20px; height: 20px; background: var(--gold);
            border: 2px solid var(--white); border-radius: 50%;
            cursor: nwse-resize; opacity: 0; transition: opacity 0.2s; z-index: 10;
            box-shadow: var(--shadow-sm);
        }
        .logo-on-hoodie .resize-handle-x {
            position: absolute; top: 50%; right: -6px; transform: translateY(-50%);
            width: 12px; height: 20px; border-radius: 4px;
            background: var(--gold); border: 2px solid var(--white);
            cursor: ew-resize; opacity: 0; transition: opacity 0.2s; z-index: 10;
            box-shadow: var(--shadow-sm);
        }
        @media (min-width: 769px) {
            .logo-on-hoodie:hover .delete-btn,
            .logo-on-hoodie:hover .resize-handle,
            .logo-on-hoodie:hover .resize-handle-x { opacity: 1; }
        }
        @font-face {
    font-family: 'Diwani';
    src: url('/fonts/diwani.ttf') format('truetype');
    font-display: swap;
}
        @font-face {
    font-family: 'ArefRuqaa';
    src: url('/fonts/ArefRuqaa.ttf') format('truetype');
    font-display: swap;
}
        @media (max-width: 768px) {
            .logo-on-hoodie.selected .delete-btn,
            .logo-on-hoodie.selected .resize-handle,
            .logo-on-hoodie.selected .resize-handle-x { opacity: 1; }
        }

        /* ════ ADD TEXT SECTION ════ */
        .add-text-container {
            display: flex; flex-direction: column; gap: 8px;
            background: var(--cream-dark); padding: 12px; border-radius: var(--radius-sm);
            margin-bottom: 16px; border: 1px solid var(--border-soft);
        }
        .add-text-input {
            width: 100%; padding: 10px; border-radius: 6px;
            border: 1px solid var(--border-soft); background: var(--cream);
            color: var(--ink); font-family: var(--font-body); outline: none;
            text-align: center; font-size: 14px;
        }
        .add-text-controls {
            display: flex; gap: 8px; align-items: center;
        }
        /* ════ CUSTOM FONT PICKER ════ */
        .font-picker {
            flex: 1; position: relative;
        }
        .font-picker-btn {
            width: 100%; padding: 8px 12px;
            border-radius: 8px;
            border: 1px solid var(--border-soft); background: var(--cream);
            color: var(--ink); outline: none; cursor: pointer;
            display: flex; align-items: center; justify-content: space-between; gap: 6px;
            transition: border-color 0.2s, box-shadow 0.2s;
            font-size: 18px;
        }
        .font-picker-btn:focus, .font-picker-btn.open {
            border-color: var(--gold);
            box-shadow: 0 0 0 3px var(--gold-soft);
        }
        .font-picker-btn .fp-arrow {
            font-size: 10px; color: var(--muted); flex-shrink: 0;
            transition: transform 0.2s;
        }
        .font-picker-btn.open .fp-arrow { transform: rotate(180deg); }
        .font-picker-dropdown {
            display: none;
            position: absolute; top: calc(100% + 6px); right: 0; left: 0;
            background: var(--cream-dark);
            border: 1px solid var(--border);
            border-radius: 10px;
            overflow: hidden; overflow-y: auto;
            max-height: 280px;
            z-index: 500;
            box-shadow: 0 12px 32px rgba(0,0,0,0.4);
            scrollbar-width: thin;
            scrollbar-color: var(--border) transparent;
        }
        .font-picker-dropdown.open { display: block; }
        .font-picker-option {
            padding: 10px 14px;
            cursor: pointer;
            color: var(--ink);
            font-size: 20px;
            line-height: 1.4;
            border-bottom: 1px solid var(--border-soft);
            transition: background 0.15s, color 0.15s;
            display: flex; align-items: center; justify-content: space-between;
        }
        .font-picker-option:last-child { border-bottom: none; }
        .font-picker-option:hover { background: var(--gold-soft); color: var(--gold-light); }
        .font-picker-option.selected { background: var(--gold-soft); color: var(--gold-light); }
        .font-picker-option .fp-check { font-size: 11px; opacity: 0; }
        .font-picker-option.selected .fp-check { opacity: 1; }
        .fp-group-label {
            padding: 6px 14px 4px;
            font-size: 9px; letter-spacing: 0.35em;
            color: var(--gold-light); text-transform: uppercase;
            background: var(--cream); border-bottom: 1px solid var(--border-soft);
            font-weight: 700; pointer-events: none;
        }
        .text-color-picker {
            width: 34px; height: 34px; border: none; border-radius: 6px;
            padding: 0; cursor: pointer; background: transparent; flex-shrink: 0;
        }
        
        /* ════ TASHKEEL TOGGLE ════ */
        .tashkeel-toggle-container {
            display: flex; align-items: center; justify-content: space-between;
            margin-top: 8px; margin-bottom: 8px; padding: 0 4px;
        }
        .tashkeel-label {
            font-size: 13px; color: var(--muted); font-weight: 600;
        }
        .switch {
            position: relative; display: inline-block; width: 34px; height: 20px;
        }
        .switch input { opacity: 0; width: 0; height: 0; }
        .slider {
            position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
            background-color: var(--cream); border: 1px solid var(--border-soft); transition: .2s;
        }
        .slider:before {
            position: absolute; content: ""; height: 12px; width: 12px; left: 3px; bottom: 3px;
            background-color: var(--muted); transition: .2s;
        }
        input:checked + .slider { background-color: var(--gold); border-color: var(--gold); }
        input:checked + .slider:before { transform: translateX(14px); background-color: #fff; }
        .slider.round { border-radius: 20px; }
        .slider.round:before { border-radius: 50%; }

        .add-text-btn {
            width: 100%; padding: 10px; border-radius: 6px;
            background: var(--gold-soft); color: var(--gold-light);
            border: 1px solid rgba(129, 140, 248, 0.3); cursor: pointer;
            font-weight: 600; transition: all 0.2s;
        }
        .add-text-btn:hover { background: var(--gold); color: #fff; }
        
        .logo-on-hoodie.text-type {
            height: auto !important;
            padding: 1px 4px;
            border-radius: 4px;
        }
        .logo-on-hoodie.text-type span {
            white-space: nowrap;
            line-height: 1.1;
            text-align: center;
            word-break: break-word;
            display: inline-block;
            width: 100%;
            vertical-align: middle;
        }
        .logo-on-hoodie.text-type.fixed-width span {
            white-space: normal;
        }

        /* ════ BOTTOM BAR ════ */
        .bottom-bar {
            flex-shrink: 0; height: var(--bottombar-h);
            display: flex; align-items: center; justify-content: space-between;
            padding: 0 24px;
            border-top: 1px solid var(--border-soft);
            gap: 10px;
            background: var(--white);
            box-shadow: 0 -4px 16px rgba(26,22,18,0.05);
            z-index: 10;
            padding-bottom: env(safe-area-inset-bottom, 0px);
        }

        .status-hint { font-size: 11px; letter-spacing: 0.05em; color: var(--muted); white-space: nowrap; }
        .status-hint strong { color: var(--gold-deep); font-weight: 600; }

        .bottom-actions { display: flex; gap: 8px; flex-shrink: 0; }

        .save-btn {
            font-family: var(--font-body); font-size: 12px; font-weight: 600;
            padding: 10px 18px; border-radius: 100px;
            border: 1.5px solid var(--border-soft);
            background: var(--cream-dark); color: var(--charcoal);
            cursor: pointer; transition: all 0.2s; white-space: nowrap;
            letter-spacing: 0.04em;
        }
        .save-btn:hover {
            border-color: var(--gold);
            color: var(--gold-deep);
            background: var(--cream);
            box-shadow: 0 0 0 3px var(--gold-soft);
        }

        .order-btn {
            font-family: var(--font-body); font-size: 13px; font-weight: 700;
            letter-spacing: 0.06em; padding: 10px 22px;
            border-radius: 100px; border: none; cursor: pointer;
            background: linear-gradient(135deg, var(--gold-deep) 0%, var(--gold) 50%, var(--gold-light) 100%);
            color: #1a1612; transition: all 0.25s; white-space: nowrap;
            box-shadow: 0 4px 16px rgba(184,146,74,0.35);
            position: relative; overflow: hidden;
        }
        .order-btn::before {
            content: '';
            position: absolute; inset: 0;
            background: linear-gradient(135deg, rgba(255,255,255,0.25), transparent 60%);
            opacity: 0; transition: opacity 0.2s;
        }
        .order-btn::after {
            content: '';
            position: absolute; top: 0; left: -100%;
            width: 60%; height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
            transition: left 0.5s ease;
        }
        .order-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(184,146,74,0.55); }
        .order-btn:hover::before { opacity: 1; }
        .order-btn:hover::after { left: 150%; }
        .order-btn:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(184,146,74,0.3); }

        /* ════ CART BUTTON ════ */
        .cart-btn {
            font-family: var(--font-body); font-size: 13px; font-weight: 700;
            letter-spacing: 0.04em; padding: 10px 20px;
            border-radius: 100px;
            border: 1.5px solid rgba(184,146,74,0.45);
            background: rgba(184,146,74,0.08);
            color: var(--gold-deep, #b8924a);
            cursor: pointer; transition: all 0.25s; white-space: nowrap;
            position: relative; overflow: visible;
            display: flex; align-items: center; gap: 6px;
        }
        .cart-btn:hover {
            background: rgba(184,146,74,0.15);
            border-color: rgba(184,146,74,0.75);
            box-shadow: 0 0 0 3px rgba(184,146,74,0.12), 0 4px 16px rgba(184,146,74,0.2);
            transform: translateY(-1px);
        }
        .cart-btn:active { transform: translateY(0); }
        .cart-btn.has-items {
            background: linear-gradient(135deg, rgba(184,146,74,0.18), rgba(210,170,90,0.12));
            border-color: rgba(184,146,74,0.7);
            color: var(--gold-deep, #b8924a);
            box-shadow: 0 2px 12px rgba(184,146,74,0.2);
        }
        .cart-btn .cart-icon {
            font-size: 15px;
            transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
        }
        .cart-btn:hover .cart-icon { transform: rotate(-8deg) scale(1.15); }

        /* Cart badge */
        .cart-badge {
            position: absolute;
            top: -7px; right: -7px;
            min-width: 20px; height: 20px;
            padding: 0 5px;
            background: linear-gradient(135deg, #e6b84a, #c8922a);
            color: #1a1612;
            border-radius: 50px;
            display: none;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            font-weight: 900;
            font-family: var(--font-body);
            border: 2px solid var(--white, #fff);
            box-shadow: 0 2px 8px rgba(184,146,74,0.5);
            z-index: 5;
            line-height: 1;
            letter-spacing: 0;
        }
        .cart-badge.visible { display: flex; }
        .cart-badge.bounce {
            animation: cartBadgeBounce 0.6s cubic-bezier(0.34,1.56,0.64,1);
        }
        @keyframes cartBadgeBounce {
            0%   { transform: scale(0.3); opacity: 0; }
            40%  { transform: scale(1.35); opacity: 1; }
            60%  { transform: scale(0.9); }
            80%  { transform: scale(1.1); }
            100% { transform: scale(1); }
        }
        @keyframes cartBtnPulse {
            0%   { box-shadow: 0 0 0 0 rgba(184,146,74,0.55); }
            70%  { box-shadow: 0 0 0 10px rgba(184,146,74,0); }
            100% { box-shadow: 0 0 0 0 rgba(184,146,74,0); }
        }
        .cart-btn.added-pulse { animation: cartBtnPulse 0.7s ease-out; }

        /* ════ MOBILE LOGO TOOLBAR ════ */
        .logo-toolbar {
            position: fixed; bottom: calc(var(--bottombar-h) + 12px);
            left: 40%; transform: translateX(-50%);
            background: var(--ink); border: 1px solid rgba(184,146,74,0.2);
            border-radius: 100px; padding: 1px 1px;
            display: none; gap: 4px; z-index: 1000;
            box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,0.05) inset;
        }
        .logo-toolbar.active { display: flex; }
        body.free-control-active .logo-toolbar { display: none !important; }

        .toolbar-btn {
            background: rgba(255,255,255,0.06); color: var(--cream);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 100px; width: 40px; height: 40px;
            cursor: pointer; font-size: 16px;
            display: flex; align-items: center; justify-content: center;
            transition: all 0.15s;
        }
        .toolbar-btn:active { background: var(--gold); color: var(--ink); border-color: var(--gold); }
        .toolbar-btn.danger { color: #ff7b6b; }
        .toolbar-btn.danger:active { background: var(--danger); color: #fff; border-color: var(--danger); }

        .drag-preview {
            position: fixed; width: 64px;
            pointer-events: none; z-index: 9999;
            opacity: 0.85; filter: drop-shadow(0 8px 20px rgba(184,146,74,0.5));
        }

        /* ════ MODALS ════ */
        .modal-overlay {
            position: fixed; inset: 0;
            background: rgba(26,22,18,0.65);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            z-index: 10000;
            display: none; align-items: center; justify-content: center;
            padding: 16px;
        }
        .modal-overlay.open { display: flex; }

        .modal-box {
            background: var(--white);
            border: 1px solid var(--border-soft);
            border-radius: 20px; width: 100%; max-width: 460px;
            overflow: hidden;
            animation: modalIn 0.35s cubic-bezier(0.34,1.4,0.64,1);
            box-shadow: var(--shadow-lg), 0 0 0 1px rgba(184,146,74,0.08);
            max-height: 90vh; display: flex; flex-direction: column;
        }
        @media (max-width: 480px) {
            .modal-box {
                max-width: 95vw;
                border-radius: 16px;
            }
            .modal-header {
                padding: 16px 18px 14px;
            }
            .modal-title {
                font-size: 22px;
            }
            .modal-body {
                padding: 16px 18px;
            }
            .modal-footer {
                padding: 12px 18px;
            }
        }
        @keyframes modalIn {
            from { opacity:0; transform: scale(0.94) translateY(16px); }
            to   { opacity:1; transform: scale(1) translateY(0); }
        }

        .modal-header {
            padding: 20px 22px 16px;
            border-bottom: 1px solid var(--border-soft);
            display: flex; align-items: center; justify-content: space-between;
            flex-shrink: 0;
            background: linear-gradient(180deg, var(--cream) 0%, var(--white) 100%);
        }
        .modal-title {
            font-family: var(--font-display);
            font-size: 26px; font-weight: 300;
            letter-spacing: 0.1em; color: var(--ink);
        }
        .modal-title em { font-style: normal; color: var(--gold); font-weight: 600; }

        .modal-close {
            width: 30px; height: 30px; background: var(--cream-dark);
            border: 1px solid var(--border-soft); color: var(--muted);
            border-radius: 8px; cursor: pointer; font-size: 12px;
            display: flex; align-items: center; justify-content: center;
            transition: all 0.2s; flex-shrink: 0;
        }
        .modal-close:hover { background: #fee; border-color: #fcc; color: var(--danger); }

        .modal-body { padding: 20px 22px; overflow-y: auto; flex: 1; }

        .form-group { margin-bottom: 14px; }
        .form-group label {
            display: block; font-size: 9px; letter-spacing: 0.4em;
            color: var(--muted); text-transform: uppercase; margin-bottom: 7px;
            font-weight: 600;
        }
        .form-group input, .form-group select, .form-group textarea {
            width: 100%; padding: 11px 14px;
            background: var(--cream);
            border: 1.5px solid var(--border-soft);
            border-radius: 10px; font-size: 13px;
            color: var(--ink); font-family: var(--font-body);
            outline: none; transition: all 0.2s;
        }
        .form-group input:focus, .form-group select:focus, .form-group textarea:focus {
            border-color: var(--gold);
            background: var(--white);
            box-shadow: 0 0 0 3px var(--gold-soft);
        }
        .form-group select option { background: var(--white); }
        .form-group textarea { resize: none; }

        .modal-footer {
            padding: 14px 22px;
            border-top: 1px solid var(--border-soft);
            display: flex; gap: 10px; flex-shrink: 0;
            background: var(--cream);
        }
        .btn-cancel {
            flex: 1; padding: 12px;
            background: var(--white); border: 1.5px solid var(--border-soft);
            border-radius: 100px; color: var(--muted);
            font-family: var(--font-body); font-size: 12px;
            cursor: pointer; transition: all 0.2s; font-weight: 600;
        }
        .btn-cancel:hover { color: var(--ink); border-color: var(--charcoal); }

        .btn-submit {
            flex: 2; padding: 12px;
            background: linear-gradient(135deg, var(--gold-deep), var(--gold));
            border: none; border-radius: 100px;
            color: var(--white); font-family: var(--font-body);
            font-size: 13px; font-weight: 700; cursor: pointer;
            transition: all 0.2s; letter-spacing: 0.04em;
            box-shadow: 0 4px 14px rgba(184,146,74,0.3);
        }
        .btn-submit:hover { box-shadow: 0 6px 20px rgba(184,146,74,0.45); transform: translateY(-1px); }
        .btn-submit:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

        /* Export */
        .export-previews { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; margin-top: 10px; }
        .export-preview-item {
            position: relative; border: 1px solid var(--border-soft);
            border-radius: 10px; overflow: hidden; background: #ede9e0;
        }
        .export-preview-item img { width: 100%; display: block; }
        .export-preview-label {
            position: absolute; bottom: 0; left: 0; right: 0;
            text-align: center; font-size: 10px; font-weight: 700;
            color: var(--white);
            background: linear-gradient(180deg, transparent, rgba(26,22,18,0.7));
            padding: 8px 3px 3px;
            letter-spacing: 0.1em;
        }
        .export-loading {
            text-align: center; padding: 28px 0; color: var(--gold);
            font-size: 13px; display: none;
        }

        /* Success */
        .success-msg { text-align: center; padding: 28px 16px; }
        .success-icon {
            font-size: 40px; margin-bottom: 14px;
            display: block;
            animation: successPulse 0.6s ease;
        }
        @keyframes successPulse { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
        .success-msg h4 { font-family: var(--font-display); font-size: 26px; font-weight: 300; color: var(--ink); margin-bottom: 8px; }
        .success-msg h4 em { font-style: normal; color: var(--gold); font-weight: 600; }
        .success-msg p { color: var(--muted); font-size: 13px; line-height: 1.6; }
        .success-msg strong { color: var(--gold-deep); }

        /* Sidebar close button (mobile) */
        .sidebar-close {
            display: none; position: absolute; top: 14px; left: 14px;
            width: 30px; height: 30px;
            background: rgba(184,146,74,0.15); border: 1px solid rgba(184,146,74,0.25);
            color: var(--gold-light); border-radius: 8px; cursor: pointer;
            font-size: 13px; font-weight: 700;
            align-items: center; justify-content: center; z-index: 10;
            transition: all 0.2s;
        }
        .sidebar-close:hover { background: var(--gold); color: var(--ink); }

        /* ════ UPLOAD PROGRESS ════ */
        #uploadProgressBar {
            position: fixed; top: 0; left: 0; right: 0;
            height: 3px; background: var(--border-soft);
            z-index: 999999; display: none;
        }
        #uploadProgressFill {
            height: 100%; width: 0%;
            background: linear-gradient(90deg, var(--gold-deep), var(--gold-light));
            transition: width 0.3s ease;
            box-shadow: 0 0 10px var(--gold-glow);
        }
        #uploadProgressLabel {
            position: fixed; top: 10px; left: 50%; transform: translateX(-50%);
            background: var(--ink); border: 1px solid rgba(184,146,74,0.3);
            color: var(--gold-light); padding: 6px 18px; border-radius: 100px;
            font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
            z-index: 999999; display: none; white-space: nowrap; pointer-events: none;
            box-shadow: var(--shadow-md);
        }

        /* Animations */
        @keyframes slideIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
        .slide-in { animation: slideIn 0.2s ease forwards; }
        @keyframes spin { to { transform: rotate(360deg); } }

        /* ════ RESPONSIVE ════ */
        @media (max-width: 1024px) { :root { --sidebar-w: 280px; } }

        @media (max-width: 900px) { :root { --sidebar-w: 268px; } }

        /* ════════════════════════════════════════════
           MOBILE ELEMENTS — hidden on desktop
        ════════════════════════════════════════════ */
        .mob-topbar, .mob-canvas-row, .mob-price-strip, .mob-sizes-strip,
        .mob-tabbar, .mob-panels, .mob-actions {
            display: none;
        }

        /* ════════════════════════════════════════════
           MOBILE BREAKPOINT ≤ 768px
        ════════════════════════════════════════════ */
        @media (max-width: 768px) {

            /* ── Reset desktop shell ── */
            html, body { overflow: hidden; height: 100dvh; }
            .app { display: none !important; }           /* hide desktop layout entirely */
            .logo-toolbar { display: none !important; }  /* replaced by mob-left-tools */

            /* ── Sidebar (still used for font picker portal etc, keep hidden) ── */
            .sidebar {
                position: fixed; right: 0; top: 0; bottom: 0;
                width: min(320px, 92vw);
                transform: translateX(110%);
                transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
                z-index: 3000; height: 100dvh;
                pointer-events: none;
            }
            .sidebar.open {
                transform: translateX(0);
                pointer-events: all;
                box-shadow: -24px 0 60px rgba(0,0,0,0.5);
            }
            .sidebar.open::before {
                content: ''; position: fixed; inset: 0;
                background: rgba(0,0,0,0.55); z-index: -1;
            }
            .sidebar-close { display: flex; }

            /* ══════════════════════════════
               MOB FULL-PAGE LAYOUT
               Stack: topbar / canvas-row / price / sizes / tabbar / panels / actions
            ══════════════════════════════ */

            /* Root page flow */
            body { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }

            /* ── Top bar ── */
            .mob-topbar {
                display: flex;
                flex-shrink: 0;
                background: var(--white);
                border-bottom: 1px solid var(--border-soft);
                padding: 0 8px;
                height: 44px;
                z-index: 100;
            }
            .mob-views-row {
                display: flex; align-items: center;
                width: 100%; gap: 2px;
                overflow-x: auto; scrollbar-width: none;
            }
            .mob-views-row::-webkit-scrollbar { display: none; }

            .mob-view-btn {
                font-family: var(--font-body); font-size: 11px; font-weight: 600;
                padding: 6px 10px; border-radius: 100px;
                border: 1px solid transparent;
                background: transparent; color: var(--muted);
                cursor: pointer; white-space: nowrap; flex-shrink: 0;
                transition: all 0.2s;
            }
            .mob-view-btn.active {
                background: linear-gradient(135deg, var(--gold-deep), var(--gold));
                color: #fff;
            }
            .mob-sep {
                width: 1px; height: 20px;
                background: var(--border); flex-shrink: 0; margin: 0 4px;
            }
            .mob-ctrl-btn {
                font-family: var(--font-body); font-size: 11px; font-weight: 700;
                padding: 5px 9px; border-radius: 8px;
                border: 1px solid var(--border-soft);
                background: var(--cream-dark); color: var(--charcoal);
                cursor: pointer; white-space: nowrap; flex-shrink: 0;
                transition: all 0.2s;
            }
            .mob-ctrl-btn.active {
                background: var(--gold); color: #fff; border-color: var(--gold);
            }
            .mob-theme-btn {
                font-size: 14px; padding: 4px 8px;
            }

            /* ── Canvas row ── */
            .mob-canvas-row {
                display: flex;
                flex-shrink: 0;
                align-items: center;
                justify-content: center;
                padding: 8px 6px;
                gap: 6px;
                background: var(--bg);
                position: relative;
                direction: ltr; /* نثبت الاتجاه عشان الترتيب يكون: tools يسار | model وسط | ألوان يمين */
            }

            /* Left tools column — يسار التيشيرت */
            .mob-left-tools {
                display: flex; flex-direction: column;
                gap: 5px; flex-shrink: 0;
                order: 1;
            }
            .mob-tool-btn {
                width: 36px; height: 36px;
                border-radius: 10px;
                border: 1px solid var(--border-2);
                background: var(--surface); color: var(--ink-2);
                font-size: 15px; cursor: pointer;
                display: flex; align-items: center; justify-content: center;
                transition: all 0.15s;
            }
            .mob-tool-btn:active { background: var(--gold); color: #fff; border-color: var(--gold); }
            .mob-tool-btn.danger { color: #fca5a5; }
            .mob-tool-btn.danger:active { background: var(--danger); color: #fff; }

            /* Model slot — وسط */
            .mob-model-slot {
                flex: 1; min-width: 0; order: 2;
                aspect-ratio: 1;
                max-width: calc(100vw - 52px - 52px - 24px);
                max-height: calc(100vw - 52px - 52px - 24px);
                border-radius: 18px; overflow: hidden;
                background: #e8e4de;
                box-shadow: 0 4px 24px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.1);
                position: relative;
            }
            .mob-model-slot .hoodie-wrapper,
            .mob-model-slot model-viewer { width: 100%; height: 100%; }
            .mob-model-slot .logos-overlay { position: absolute; inset: 0; }
            .mob-model-slot .color-overlay  { position: absolute; inset: 0; border-radius: 16px; }

            /* Colors column — يمين التيشيرت */
            .mob-colors-col {
                display: flex; flex-direction: column;
                gap: 5px; flex-shrink: 0; order: 3;
                padding: 2px;
                max-height: 200px;
                overflow-y: auto;
            }
            .mob-colors-col::-webkit-scrollbar { width: 4px; }
            .mob-colors-col::-webkit-scrollbar-track { background: rgba(255,255,255,0.1); border-radius: 2px; }
            .mob-colors-col::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 2px; }
            .mob-color-dot {
                width: 28px; height: 28px; border-radius: 50%;
                border: 2px solid transparent;
                cursor: pointer; flex-shrink: 0;
                display: flex; align-items: center; justify-content: center;
                transition: all 0.2s;
            }
            .mob-color-dot span {
                width: 22px; height: 22px; border-radius: 50%;
                display: block;
                box-shadow: 0 1px 5px rgba(0,0,0,0.4);
            }
            .mob-color-dot.active {
                border-color: var(--gold);
                box-shadow: 0 0 0 2px var(--gold-soft);
            }
            /* زرار + لعرض باقي الألوان */
            .mob-color-more {
                width: 28px; height: 28px; border-radius: 50%;
                background: var(--surface); border: 1px solid var(--border-2);
                color: var(--muted); font-size: 14px; font-weight: 700;
                cursor: pointer; flex-shrink: 0;
                display: flex; align-items: center; justify-content: center;
                transition: all 0.2s;
            }
            .mob-color-more:active { background: var(--gold-soft); color: var(--gold-deep); border-color: var(--gold); }
            /* الألوان المخفية */
            .mob-color-dot.mob-color-hidden { display: none; }
            .mob-colors-col.expanded .mob-color-dot.mob-color-hidden { display: flex; }
            .mob-colors-col.expanded .mob-color-more { display: none; }

            /* ── Price strip ── */
            .mob-price-strip {
                display: flex;
                align-items: center;
                flex-shrink: 0;
                background: var(--cream-dark);
                border-top: 1px solid var(--border-soft);
                border-bottom: 1px solid var(--border-soft);
                padding: 6px 14px;
                gap: 6px;
                position: relative;
            }
            .mob-price-cell {
                display: flex; flex-direction: column; align-items: center;
                flex: 1;
            }
            .mob-price-cell.highlight { flex: 1.2; }
            .mob-price-lbl {
                font-size: 9px; color: var(--muted);
                text-transform: uppercase; letter-spacing: 0.04em;
                font-weight: 600; white-space: nowrap;
            }
            .mob-price-num {
                font-size: 14px; font-weight: 800; color: var(--ink);
                line-height: 1.2;
            }
            .mob-price-num.print { color: var(--gold-light); }
            .mob-price-cell.highlight .mob-price-num {
                font-size: 18px; color: var(--gold);
            }
            .mob-price-op {
                font-size: 13px; color: var(--muted); font-weight: 700; flex-shrink: 0;
            }
            .mob-price-msg {
                display: none;
            }
            /* Warning banner ٠وق شريط السعر */
            .mob-warn-banner {
                display: none;
                flex-shrink: 0;
                background: rgba(245,158,11,0.12);
                border-top: 1px solid rgba(245,158,11,0.3);
                border-bottom: 1px solid rgba(245,158,11,0.3);
                color: #d97706;
                font-size: 11px;
                font-weight: 700;
                font-family: var(--font-body);
                padding: 6px 12px;
                text-align: center;
                line-height: 1.4;
            }
            .mob-warn-banner.visible {
                display: block;
            }

            /* ── Sizes strip ── */
            .mob-sizes-strip {
                display: flex;
                align-items: center;
                flex-shrink: 0;
                background: var(--cream);
                padding: 5px 12px;
                gap: 6px;
                min-height: 36px;
            }
            .mob-sizes-lbl {
                font-size: 10px; color: var(--muted); font-weight: 700;
                flex-shrink: 0;
            }
            .mob-sizes-list {
                display: flex; gap: 5px; flex-wrap: nowrap;
                overflow-x: auto; scrollbar-width: none;
                flex: 1; /* allow it to shrink and scroll */
            }
            .mob-sizes-list::-webkit-scrollbar { display: none; }
            .mob-size-item {
                padding: 3px 10px; border-radius: 6px;
                border: 1px solid var(--border);
                background: var(--cream-dark); color: var(--muted);
                font-size: 11px; font-weight: 700; cursor: pointer;
                flex-shrink: 0; white-space: nowrap;
                transition: all 0.2s;
            }
            .mob-size-item.active {
                border-color: var(--gold); 
                background: linear-gradient(135deg, var(--gold-deep) 0%, var(--gold) 100%);
                color: #ffffff;
                box-shadow: 0 4px 10px rgba(251, 191, 36, 0.25);
            }
            .mob-size-item.unavailable {
                opacity: 0.35; cursor: not-allowed;
                text-decoration: line-through;
            }
            .mob-dims-badge {
                font-size: 10px; color: var(--muted); flex-shrink: 0;
                background: var(--cream-dark); border: 1px solid var(--border-soft);
                border-radius: 6px; padding: 2px 7px; white-space: nowrap;
            }

            /* ── Tab bar ── */
            .mob-tabbar {
                display: flex;
                flex-shrink: 0;
                background: var(--white);
                border-top: 1px solid var(--border-soft);
                border-bottom: 1px solid var(--border-soft);
            }
            .mob-tab {
                flex: 1; padding: 6px 4px;
                background: transparent;
                border: none; border-bottom: 2px solid transparent;
                cursor: pointer; font-family: var(--font-body);
                color: var(--muted); font-size: 11px; font-weight: 700;
                display: flex; flex-direction: row; justify-content: center; align-items: center;
                gap: 5px; transition: all 0.2s;
            }
            .mob-tab.active {
                color: var(--gold-deep);
                border-bottom-color: var(--gold);
                background: var(--gold-soft);
            }
            .mob-tab-icon { font-size: 14px; line-height: 1; }

            /* ── Panels ── */
            .mob-panels {
                display: block;
                flex: 1; min-height: 0; min-width: 0; max-width: 100vw;
                overflow: hidden;
                background: var(--cream-dark);
            }
            .mob-panel { display: none; height: 100%; overflow-y: auto; width: 100%; max-width: 100%; }
            .mob-panel.active { display: flex; flex-direction: column; }

            /* Logos panel */
            .mob-sections-bar {
                display: flex; flex-wrap: wrap; gap: 3px; padding: 8px 10px 10px;
                flex-shrink: 0; width: 100%; max-width: 100%; box-sizing: border-box;
                border-bottom: 1px solid var(--border-soft);
            }
            .mob-sec-chip {
                display: flex; align-items: center; gap: 5px;
                padding: 5px 10px; border-radius: 100px;
                background: var(--cream); border: 1px solid var(--border);
                cursor: pointer; white-space: nowrap; flex-shrink: 0;
                font-size: 11px; font-weight: 600; color: var(--muted);
                transition: all 0.2s;
            }
            .mob-sec-chip img {
                width: 18px; height: 18px; border-radius: 4px; object-fit: cover;
            }
            .mob-sec-chip.active {
                background: var(--gold-soft); border-color: var(--gold);
                color: var(--gold-light);
            }
            .mob-logos-grid {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
                gap: 6px;
                padding: 10px;
                flex: 1; min-width: 0; width: 100%; max-width: 100%; box-sizing: border-box;
                overflow-y: auto;
                align-content: start;
            }
            .mob-logo-item {
                aspect-ratio: 1; border: 1px solid var(--border);
                border-radius: 8px; background: var(--cream);
                padding: 3px; object-fit: contain; width: 100%;
                cursor: pointer; transition: all 0.2s;
            }
            .mob-logo-item:active {
                border-color: var(--gold); transform: scale(0.95);
                box-shadow: 0 0 10px var(--gold-soft);
            }

            /* Text panel */
            .mob-text-panel {
                display: flex; flex-direction: column; gap: 10px;
                padding: 12px;
            }
            .mob-text-input {
                width: 100%; padding: 11px 14px;
                background: var(--cream); border: 1.5px solid var(--border-soft);
                border-radius: 10px; color: var(--ink);
                font-family: var(--font-body); font-size: 15px;
                outline: none; text-align: right;
                transition: border-color 0.2s;
            }
            .mob-text-input:focus { border-color: var(--gold); }
            .mob-text-controls {
                display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
            }
            .mob-font-btn {
                flex: 1; min-width: 0;
                padding: 8px 12px; border-radius: 8px;
                border: 1px solid var(--border-soft); background: var(--cream);
                color: var(--ink); font-size: 13px; cursor: pointer;
                display: flex; align-items: center; justify-content: space-between; gap: 4px;
                font-family: var(--font-body); font-weight: 600;
                white-space: nowrap; overflow: hidden;
            }
            .mob-font-btn span { overflow: hidden; text-overflow: ellipsis; }
            .mob-color-dot-input {
                width: 36px; height: 36px; border: none;
                border-radius: 8px; padding: 2px;
                cursor: pointer; background: transparent; flex-shrink: 0;
            }
            .mob-tashkeel {
                display: flex; align-items: center; gap: 5px;
                font-size: 12px; color: var(--muted); cursor: pointer;
                flex-shrink: 0;
            }
            .mob-tashkeel input { width: 14px; height: 14px; accent-color: var(--gold); }
            .mob-add-btn {
                padding: 8px 14px; border-radius: 8px;
                background: var(--gold-soft); color: var(--gold-light);
                border: 1px solid rgba(251,191,36,0.3);
                font-family: var(--font-body); font-size: 13px; font-weight: 700;
                cursor: pointer; flex-shrink: 0; transition: all 0.2s;
            }
            .mob-add-btn:active { background: var(--gold); color: #fff; }

            /* Upload panel */
            .mob-upload-area {
                display: flex; flex-direction: column; align-items: center;
                justify-content: center; gap: 10px;
                padding: 32px 20px; cursor: pointer;
                border: 2px dashed var(--border);
                border-radius: 14px; margin: 12px;
                background: var(--cream);
                transition: all 0.2s;
            }
            .mob-upload-area:active { border-color: var(--gold); background: var(--gold-soft); }
            .mob-upload-icon { font-size: 36px; }
            .mob-upload-title { font-size: 14px; font-weight: 700; color: var(--ink); }
            .mob-upload-hint { font-size: 11px; color: var(--muted); }
            /* -- Bottom action buttons -- */
            .mob-actions {
                display: flex;
                flex-shrink: 0;
                gap: 6px; padding: 8px 10px;
                padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
                background: var(--white);
                border-top: 1px solid var(--border-soft);
                align-items: center;
            }
            .mob-act-btn {
                flex: 1; padding: 11px 6px;
                border-radius: 12px; border: none;
                font-family: var(--font-body); font-size: 12px; font-weight: 700;
                cursor: pointer; display: flex; align-items: center; justify-content: center;
                gap: 4px; transition: all 0.2s;
                white-space: nowrap; min-width: 0;
            }
            .mob-act-btn.secondary {
                background: var(--cream-dark); color: var(--charcoal);
                border: 1.5px solid var(--border-soft);
                flex: 0.85;
            }
            .mob-act-btn.secondary:active { border-color: var(--gold); color: var(--gold-light); }
            .mob-act-btn.primary {
                background: linear-gradient(135deg, var(--gold-deep) 0%, var(--gold) 100%);
                color: #fff;
                box-shadow: 0 4px 14px rgba(217,119,6,0.35);
                flex: 1.2;
            }
            .mob-act-btn.primary:active { opacity: 0.9; transform: scale(0.97); }
            /* cart button */
            .mob-act-btn.cart {
                flex: 0;
                min-width: 54px;
                max-width: 62px;
                flex-direction: column;
                gap: 2px;
                padding: 8px 4px;
                font-size: 9px;
                font-weight: 700;
                background: rgba(26,22,18,0.92);
                color: var(--gold-light, #e6c98a);
                border: 1.5px solid rgba(184,146,74,0.4);
                border-radius: 12px;
                position: relative;
            }
            .mob-act-btn.cart:active { background: rgba(184,146,74,0.18); border-color: var(--gold); }
            #mobCartCount {
                display: none;
                align-items: center;
                justify-content: center;
                min-width: 18px;
                height: 18px;
                border-radius: 9px;
                background: linear-gradient(135deg, #d97706, #fbbf24);
                color: #fff;
                font-size: 10px;
                font-weight: 800;
                padding: 0 4px;
                position: absolute;
                top: -6px;
                right: -6px;
                box-shadow: 0 2px 8px rgba(217,119,6,0.55);
            }

            /* AI Chat - moved up so it doesn't overlap buttons */
            #aiChatToggle {
                bottom: calc(env(safe-area-inset-bottom, 0px) + 74px);
                left: 8px;
                width: 42px;
                height: 42px;
                font-size: 17px;
            }
            #aiChatWindow {
                bottom: calc(env(safe-area-inset-bottom, 0px) + 124px);
                left: 8px;
                width: min(300px, 88vw);
            }

            /* ── Font picker dropdown portal (used from mob text panel) ── */
            #fontPickerDropdown.open {
                position: fixed;
                bottom: 0; left: 0; right: 0;
                top: auto; max-height: 55vh;
                border-radius: 16px 16px 0 0;
                z-index: 5000;
            }

        } /* end @media ≤768px */

        @media (max-width: 480px) {
            .mob-logos-grid { grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 5px; padding: 6px; }
            .mob-sec-chip { font-size: 10px; padding: 4px 8px; }
            .mob-price-num { font-size: 13px; }
            .mob-price-cell.highlight .mob-price-num { font-size: 16px; }
        }

        @media (max-width: 360px) {
            .mob-view-btn { font-size: 10px; padding: 5px 7px; }
            .mob-logos-grid { grid-template-columns: repeat(auto-fill, minmax(55px, 1fr)); }
        }

        @media (min-width: 769px) and (max-width: 1024px) {
            .hoodie-container {
                max-width: 480px; max-height: 480px;
            }
        }

        @media (min-height: 500px) and (max-height: 600px) and (max-width: 768px) {
            .hoodie-container {
                max-width: 280px; max-height: 280px;
            }
        }

        /* Landscape mobile */
        @media (max-height: 500px) and (orientation: landscape) {
            :root { --topbar-h: 44px; --bottombar-h: 52px; }
            .hoodie-container {
                max-width: 250px; max-height: 250px;
            }
            .canvas-wrap { padding: 8px; }
            .view-btn { padding: 5px 8px; font-size: 9px; }
        }

        /* ══════════════════════════════════════════
           PRICING CARD — السعر الديناميكي
        ══════════════════════════════════════════ */
        .price-card {
            margin: 14px 0 6px;
            background: linear-gradient(135deg,
                rgba(217,119,6,0.10) 0%,
                rgba(251,191,36,0.06) 100%
            );
            border: 1px solid rgba(251,191,36,0.22);
            border-radius: var(--radius-sm);
            overflow: hidden;
            transition: border-color .3s;
        }
        .price-card:hover {
            border-color: rgba(251,191,36,0.45);
        }
        .price-card-header {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 14px 8px;
            border-bottom: 1px solid rgba(251,191,36,0.12);
        }
        .price-card-icon { font-size: 15px; }
        .price-card-title {
            font-size: 12px;
            font-weight: 700;
            color: var(--gold-light);
            letter-spacing: .4px;
            text-transform: uppercase;
        }
        .price-rows {
            padding: 10px 14px 6px;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .price-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .price-row-label {
            font-size: 12px;
            color: var(--muted);
        }
        .price-row-val {
            font-size: 13px;
            font-weight: 700;
            color: var(--ink-soft);
        }
        .price-row-val.print-val {
            color: var(--gold-light);
        }
        .price-divider {
            height: 1px;
            background: rgba(251,191,36,0.14);
            margin: 4px 0;
        }
        .total-row .price-row-label {
            color: var(--ink-soft);
            font-weight: 700;
        }
        .total-row .total-val {
            font-size: 16px;
            font-weight: 900;
            color: var(--gold-light);
            text-shadow: 0 0 12px rgba(251,191,36,0.4);
            animation: priceGlow .4s ease;
        }
        @keyframes priceGlow {
            from { text-shadow: 0 0 0 rgba(251,191,36,0); transform: scale(1); }
            50%  { text-shadow: 0 0 20px rgba(251,191,36,0.7); transform: scale(1.06); }
            to   { text-shadow: 0 0 12px rgba(251,191,36,0.4); transform: scale(1); }
        }
        .price-dims {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 14px 4px;
            font-size: 11px;
            color: var(--muted);
            border-top: 1px solid rgba(251,191,36,0.10);
        }
        .dims-icon { font-size: 12px; }
        .price-note {
            padding: 4px 14px 10px;
            font-size: 10px;
            color: var(--muted-light);
            font-style: italic;
        }