:root {
    /* Tinggi layar sesungguhnya. Saat configurator dipasang di dalam halaman
       Shopify, nilai ini diisi oleh embed.js dengan tinggi layar HP pelanggan —
       karena di dalam bingkai, 100vh berarti tinggi bingkai, bukan tinggi layar. */
    --screen-h: 100vh;

    /* UKURAN KANVAS
       Mockup celananya hanya menempati 21%-82% tinggi gambar — sisanya abu-abu
       kosong. Jadi tampilannya dipotong: 6% dari atas, 16% dari bawah, sehingga
       tinggi tampilan = 78% dari lebarnya. Ruang yang dihemat dipakai untuk
       memperbesar celananya.

       Koordinat DI DALAM kanvas tetap 500x500 — hanya tampilannya yang dipotong,
       jadi perhitungan mask & ekspor cetak tidak terpengaruh sama sekali. */
    --canvas-crop-top: 6%;
    --canvas-ratio: 0.78;
    --canvas-max: min(1200px, max(420px, calc((var(--screen-h) - 150px) / 0.78)));

    /* Dokoyo Theme Alignment (Softer Palette) */
    --bg-color: #f5f5f7;
    --panel-bg: #ffffff;
    --text-main: #1c1c1e;
    --text-muted: #777777;
    --primary: #1c1c1e;
    --primary-text: #ffffff;
    --primary-hover: #333333;
    --secondary: #e5e5e5;
    --success: #10b981;
    --success-hover: #059669;
    --border: #e0e0e0;
    --ai-gradient: linear-gradient(135deg, #1c1c1e, #555555);
    --modal-overlay: rgba(255, 255, 255, 0.85);
}

[data-theme="dark"] {
    --bg-color: #121212;
    --panel-bg: #1c1c1e;
    --text-main: #f5f5f7;
    --text-muted: #a1a1aa;
    --primary: #f5f5f7;
    --primary-text: #1c1c1e;
    --primary-hover: #d4d4d8;
    --secondary: #2d2d2d;
    --border: #333333;
    --ai-gradient: linear-gradient(135deg, #333, #111);
    --modal-overlay: rgba(18, 18, 18, 0.85);
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: 'Outfit', sans-serif;
    background: var(--bg-color);
    color: var(--text-main);
    min-height: var(--screen-h);
    display: flex;
    justify-content: center;
}
/* Saat dipasang di halaman Shopify, tinggi bingkai mengikuti isi.
   Kalau body memaksa tinggi minimum, bingkainya tidak pernah bisa mengecil. */
.is-embedded body { min-height: 0; }
.app-container {
    width: 100%;
    max-width: 1600px;
    padding: 20px;
}
.editor-layout {
    display: flex;
    gap: 28px;
    align-items: flex-start;
    justify-content: center;
    /* Dulu min-height: 90vh — menyisakan ruang kosong di bawah tanpa guna,
       sekaligus memaksa halaman lebih tinggi dari isinya. */
    min-height: 0;
}
/* Panel kiri & kanan lebarnya tetap; sisa ruang diberikan ke kanvas */
.editor-layout > .style-panel { flex: 0 0 auto; }
.editor-layout > .canvas-section { min-width: 0; }
.editor-layout > .controls-section:not(.style-panel) { flex: 0 0 auto; }
.canvas-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
/* ==============================================================
   GLOWING RAINBOW BUTTON & STYLE GALLERY MODAL
============================================================== */
/* Glowing Rainbow Button */
.glowing-rainbow {
    position: relative;
    z-index: 1;
    overflow: hidden;
    background: #111; /* Dark background */
    color: white;
    border: none;
    transition: transform 0.2s ease;
}
.glowing-rainbow::before {
    content: '';
    position: absolute;
    top: -2px; left: -2px; right: -2px; bottom: -2px;
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    background-size: 400%;
    z-index: -1;
    border-radius: 14px;
    animation: rainbow-glow 20s linear infinite;
    opacity: 0.8;
}
.glowing-rainbow::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px; right: 2px; bottom: 2px;
    background: #1a1a1a; /* Inner button color */
    z-index: -1;
    border-radius: 10px;
}
.glowing-rainbow:hover {
    transform: scale(1.02);
}
.glowing-rainbow:hover::before {
    animation: rainbow-glow 5s linear infinite; /* Faster on hover */
    filter: blur(8px);
}
@keyframes rainbow-glow {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}
/* Style Modal Layout */
.style-modal-content {
    max-width: 800px;
    width: 90%;
    padding: 24px;
}
.style-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
    margin-top: 20px;
    max-height: calc(var(--screen-h) * 0.6);
    overflow-y: auto;
    padding-right: 8px; /* Scrollbar spacing */
}
.style-card {
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s;
    background: #fff;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    text-align: center;
}
.style-card img {
    width: 100%;
    aspect-ratio: 42 / 31;
    object-fit: cover;
    border-bottom: 1px solid #eee;
    -webkit-user-drag: none;
    pointer-events: none; /* Mencegah klik kanan langsung pada gambar */
}
.style-card .style-name {
    padding: 10px 8px;
    font-size: 0.9rem;
    font-weight: 500;
    color: #333;
}
.style-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px rgba(0,0,0,0.1);
}
.style-card.selected {
    border-color: #ff00c8;
    box-shadow: 0 0 0 3px rgba(255, 0, 200, 0.2);
}
/* Preview Box di Sidebar */
.style-preview-box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    margin-bottom: 12px;
}
.style-preview-box img {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    object-fit: cover;
}
.style-preview-box span {
    font-size: 0.95rem;
    font-weight: 500;
}
.canvas-wrapper {
    position: relative;
    /* Sebesar mungkin mengikuti monitor pelanggan, tetap berbentuk kotak.
       - 100%          : tidak melebihi ruang kolomnya
       - var(--screen-h): tidak melebihi tinggi layar (disisakan untuk toolbar & slide)
       - 880px         : batas atas yang wajar
       Ketajamannya dijaga di app.js lewat fabric.devicePixelRatio. */
    width: 100%;
    max-width: var(--canvas-max);
    height: auto;
    aspect-ratio: 1 / var(--canvas-ratio);
    margin: 0 auto;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    background: #c5c5c5;
    border: none;
}
/* Zakeke Style Layered Preview */
.product-preview-container {
    /* Tetap KOTAK (kanvasnya kotak), tapi digeser ke atas dan dibiarkan
       melebihi tinggi pembungkusnya — bagian kosongnya terpotong oleh
       overflow:hidden di .canvas-wrapper. */
    position: absolute;
    left: 0;
    top: calc(var(--canvas-crop-top) / var(--canvas-ratio) * -1);
    width: 100%;
    height: calc(100% / var(--canvas-ratio));
    background-color: transparent;
    border-radius: 0;
    overflow: visible;
    
    /* Security tweaks to prevent saving image */
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
/* CATATAN PENTING — JANGAN memberi z-index pada lapisan ini.

   Dulu di sini ada `z-index: 1`. Itu membuat lapisan ini menjadi "tumpukan
   tersendiri", sehingga isinya TIDAK BISA naik di atas elemen di luarnya —
   termasuk bingkai abu-abu (#zoom-frame, z-index 3).

   Akibatnya: pegangan gambar (kotak biru di sudut) digambar Fabric pada
   .upper-canvas, lalu tertimbun abu-abu. Yang terlihat hanya potongan yang
   kebetulan berada di dalam lubang bingkai — pelanggan melihatnya sebagai
   "bounding box terpotong". Dilaporkan Nandha 18 Agu 2026.

   Urutan tumpukan sekarang diatur di masing-masing lapisan di bawah ini. */
.design-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* `clip-path: polygon(...)` DIHAPUS dari sini (18 Agu 2026).

   Itu sisa cara lama memotong desain sebelum memakai mask SVG milik Fabric.
   Sudah tidak berlaku: `updateMockupImages()` di app.js selalu menyetelnya
   ke 'none' begitu halaman siap.

   Tapi selama masih tertulis di sini ia berbahaya: `clip-path` termasuk yang
   membuat "tumpukan tersendiri" — persis jebakan yang baru saja diperbaiki.
   Kalau JS-nya gagal jalan sesaat, peganganya terkurung lagi. */

/* 
 * LAYER SHADOW (REALISME)
 * Menggunakan filter mix-blend-mode: multiply untuk mempertahankan
 * tekstur lipatan celana namun background desain di bawahnya tetap terlihat.
 */
.shadow-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;   /* di atas kanvas desain (2) — lihat urutan lengkap di bawah */
    object-fit: cover;
    mix-blend-mode: multiply;
    pointer-events: none;
}

/* Fabric.js memasang ukuran 500px langsung di elemennya. Karena tampilan
   kanvas sekarang mengikuti lebar monitor, ukuran itu harus dipaksa 100%.
   Koordinat di dalam kanvas tetap 500x500 — titik sentuh tetap presisi
   (lihat PELAJARAN.md §3). */
#design-layer .canvas-container,
#design-layer canvas {
    width: 100% !important;
    height: 100% !important;
}

/* Urutan tumpukan di area produk — dibaca dari bawah ke atas:

     0  #white-backdrop   latar putih (WAJIB putih murni, lihat PELAJARAN §17)
     1  #zoom-frame       abu-abu di sekeliling saat tampilan diperkecil
     2  .lower-canvas     desain pelanggan DAN PEGANGANNYA
     3  .shadow-layer     gambar celana, mode multiply (lipatan & bayangan)
     4  .upper-canvas     kotak seret (marquee) saja

   FAKTA YANG MENENTUKAN URUTAN INI (diukur langsung di Chrome, 18 Agu 2026):
   Fabric.js 5 menggambar pegangan di **lower-canvas**, bersama gambarnya —
   BUKAN di upper-canvas. Upper-canvas terbukti kosong (0 piksel); lower-canvas
   berisi 1.972 piksel warna pegangan.

   Karena itu bingkai abu-abu HARUS berada di bawah lower-canvas. Kalau di atas
   (dulu z-index 3), ia menutupi pegangan di seluruh area di luar celana —
   pelanggan melihatnya sebagai "bounding box terpotong".

   Abu-abunya tidak ikut menggelap walaupun sekarang berada di bawah lapisan
   multiply: lubang bingkai ini persis seukuran gambar celana, jadi tidak ada
   piksel celana di atasnya untuk dikalikan (bandingkan PELAJARAN §17). */
#design-layer .lower-canvas {
    position: absolute;
    z-index: 2;
}
#design-layer .upper-canvas {
    z-index: 4;
}
/* Toolbar Undo Redo di atas Kanvas */
.canvas-toolbar {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}
.canvas-toolbar button {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--panel-bg);
    backdrop-filter: blur(2px);
    border: 1px solid var(--border);
    color: var(--text-main);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.2s;
}
.canvas-toolbar button:hover:not(:disabled) {
    background: #fff;
    transform: scale(1.1);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.canvas-toolbar button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.toolbar-btn-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

/* Flip Animation */
@keyframes flipAnimation {
    0% { transform: perspective(1000px) rotateY(0deg); }
    50% { transform: perspective(1000px) rotateY(90deg); opacity: 0.5; }
    100% { transform: perspective(1000px) rotateY(0deg); opacity: 1; }
}
.flip-animate {
    animation: flipAnimation 0.4s ease-in-out;
}
.toolbar-btn-wrapper span {
    font-size: 0.75rem;
    color: var(--text-main);
    font-weight: 600;
    text-shadow: none;
}
.canvas-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    width: 100%;
    max-width: var(--canvas-max);
    margin: 14px auto 0;
}
.canvas-action-bar {
    display: flex;
    gap: 10px;
}
.action-btn {
    padding: 8px 16px;
    background: var(--panel-bg);
    backdrop-filter: blur(2px);
    border: 1px solid var(--border);
    border-radius: 20px;
    color: var(--text-main);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
    width: auto;
}
.action-btn:hover {
    background: var(--secondary);
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.bottom-view-toggle {
    display: flex;
    justify-content: center;
    gap: 10px;
    z-index: 10;
}
.bottom-view-toggle .view-btn {
    background: var(--panel-bg);
    backdrop-filter: blur(2px);
    border-radius: 20px;
    padding: 8px 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    white-space: nowrap;
    border: 1px solid var(--border);
    color: var(--text-main);
    cursor: pointer;
    font-size: 14px;
    transition: 0.2s;
}
.bottom-view-toggle .view-btn.active {
    background: var(--primary);
    color: var(--primary-text);
}
/* Panel kiri memakai class .controls-section juga, dan aturan .controls-section
   ditulis SETELAH ini — jadi harus lebih spesifik supaya lebarnya tidak tertimpa. */
.controls-section.style-panel {
    width: 200px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.controls-section {
    width: 330px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.glass-panel {
    background: var(--panel-bg);
    border: 1px solid var(--border);
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
.control-group label {
    display: block;
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 8px;
    font-weight: 500;
}
.hint {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 12px;
    line-height: 1.5;
}
button, .btn-primary, .btn-ai, .btn-success {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 14px 16px;
    border: none;
    border-radius: 12px;
    font-family: inherit;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-primary {
    background: var(--primary);
    color: var(--primary-text);
}
.btn-primary:hover { 
    background: var(--primary-hover); 
    transform: translateY(-2px); 
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.btn-ai {
    background: transparent;
    border: 1px solid var(--primary);
    color: var(--primary);
    margin-top: 12px;
}
.btn-ai:hover:not(:disabled) { 
    background: var(--primary);
    color: white;
}
.btn-ai:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    border-color: var(--text-muted);
    color: var(--text-muted);
}
.color-picker-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}
/* Hue Slider (Rainbow) */
.hue-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(to right, 
        #ff0000 0%, #ffff00 17%, #00ff00 33%, 
        #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
    outline: none;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
    margin-top: 8px;
}
.hue-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: white;
    border: 2px solid #ccc;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.hue-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: white;
    border: 2px solid #ccc;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
/* Brightness Slider */
.brightness-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(to right, #000000 0%, #ff0000 50%, #ffffff 100%);
    outline: none;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
    margin-top: 8px;
    transition: background 0.3s;
}
.brightness-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: white;
    border: 2px solid #ccc;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.brightness-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: white;
    border: 2px solid #ccc;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
/* Toggle Front/Back */
.view-toggle-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 15px;
}
.view-btn {
    padding: 8px 16px;
    border: 1px solid var(--border);
    background: var(--secondary);
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    transition: 0.2s;
    color: var(--text-main);
}
.view-btn.active {
    background: var(--primary);
    color: var(--primary-text);
    border-color: var(--primary);
}
/* Product Selector Vertical */
.product-selector-vertical {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.product-selector-vertical .prod-btn {
    padding: 12px 16px;
    border: 1px solid var(--border);
    background: var(--panel-bg);
    border-radius: 12px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    transition: 0.2s;
    color: var(--text-main);
    text-align: left;
    display: block;
    width: 100%;
}
.product-selector-vertical .prod-btn.active {
    background: var(--primary);
    color: var(--primary-text);
    border-color: var(--primary);
}
/* Path Toggle (Manual vs AI) */
.path-toggle-container {
    display: flex;
    background: var(--primary);
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 20px;
    border: 1px solid var(--border);
}
.path-btn {
    flex: 1;
    padding: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary-text);
    background: var(--primary);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.3s;
}
.path-btn.active {
    background: var(--panel-bg);
    color: var(--text-main);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.design-path-section {
    animation: fadeIn 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.outline-box {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: var(--secondary);
    margin-bottom: 20px;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}
/* Utilities */
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 16px; }
.mt-4 { margin-top: 24px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 16px; }
.mb-4 { margin-bottom: 24px; }
/* AI Style Selector */
.ai-style-selector {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ai-style-btn {
    padding: 12px;
    border: 1px solid var(--border);
    background: var(--panel-bg);
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-main);
    cursor: pointer;
    transition: 0.2s;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ai-style-btn:hover {
    border-color: var(--primary);
    background: var(--secondary);
}
.ai-style-btn.active {
    background: var(--primary);
    color: var(--primary-text);
    border-color: var(--primary);
}
.generate-btn {
    background: var(--ai-gradient);
    color: white;
    border: none;
    margin-top: 16px;
    font-size: 1rem;
}
.generate-btn:hover {
    box-shadow: 0 8px 15px rgba(28, 28, 28, 0.3);
    transform: translateY(-2px);
}
/* Modal */
.modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--modal-overlay);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}
.modal.hidden {
    display: none;
}
.modal-content {
    width: 90%;
    max-width: 600px;
    background: var(--panel-bg);
    color: var(--text-main);
}
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    color: var(--text-main);
}
.modal-header button {
    width: auto;
    background: none;
    color: var(--text-main);
    font-size: 2rem;
    padding: 0;
}
textarea {
    width: 100%;
    height: 350px;
    background: var(--secondary);
    color: var(--text-main);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    font-family: monospace;
    font-size: 0.85rem;
    resize: none;
    margin-top: 16px;
}

/* Size Buttons */
.size-btn {
    background: var(--panel-bg);
    color: var(--text-main);
    border: 1px solid var(--border);
    padding: 10px 5px;
    cursor: pointer;
    border-radius: 4px;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.2s;
}
.size-btn:hover {
    border-color: #999;
}
.size-btn.active {
    background: var(--primary);
    color: var(--primary-text);
    border-color: var(--primary);
}

/* Zoom Controls */
.zoom-controls {
    display: flex;
    gap: 8px;
}
.zoom-controls button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--panel-bg);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.2rem;
    color: var(--text-main);
    transition: 0.2s;
}
.zoom-controls button:hover {
    background: var(--secondary);
    transform: scale(1.05);
}

/* Layers Management */
.layers-container {
    background: var(--secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 80px;
    max-height: 200px;
    overflow-y: auto;
}
.layer-empty-text {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
    padding: 20px 0;
}
.layer-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.9rem;
    transition: all 0.2s;
}
.layer-item.active {
    border-color: var(--primary);
    background: var(--secondary);
}
.layer-item-name {
    flex: 1;
    cursor: pointer;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.layer-controls {
    display: flex;
    gap: 4px;
}
.layer-btn {
    width: 28px;
    height: 28px;
    border: 1px solid var(--border);
    background: var(--panel-bg);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-muted);
    transition: 0.2s;
    padding: 0;
}
.layer-btn:hover {
    background: var(--secondary);
    color: var(--text-main);
}
.layer-btn.delete {
    color: #ef4444;
}
.layer-btn.delete:hover {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #ef4444;
}

/* Theme Toggle Button */
#theme-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    background: var(--panel-bg);
    color: var(--text-main);
    border: none;
    border-radius: 24px;
    padding: 6px 14px;
    width: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: none;
    transition: all 0.2s ease;
    z-index: 1000;
}
#theme-toggle:hover {
    opacity: 0.8;
}

.toast-container { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 10001; display: flex; flex-direction: column; gap: 10px; align-items: center; pointer-events: none; }
.toast { background: #059669; color: white; padding: 12px 24px; border-radius: 8px; font-size: 0.95rem; font-weight: 500; opacity: 0; animation: fadeinout 3s forwards; box-shadow: 0 4px 12px rgba(0,0,0,0.15); pointer-events: auto; }
@keyframes fadeinout { 0% { opacity: 0; transform: translateY(20px); } 10% { opacity: 1; transform: translateY(0); } 90% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-20px); } }

/* ==============================================================
   LAYAR TUNGGU (LOADING OVERLAY)
============================================================== */
#loading-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10050;
    background: var(--modal-overlay);
    backdrop-filter: blur(6px);
    align-items: center;
    justify-content: center;
    padding: 24px;
}
#loading-overlay .loading-box {
    background: var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 32px 28px;
    text-align: center;
    max-width: 340px;
    width: 100%;
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}
#loading-overlay .loading-spinner {
    width: 46px;
    height: 46px;
    margin: 0 auto 18px;
    border: 4px solid var(--secondary);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: loading-spin 0.9s linear infinite;
}
@keyframes loading-spin {
    to { transform: rotate(360deg); }
}
#loading-overlay #loading-text {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.45;
}
#loading-overlay .loading-subtext {
    margin-top: 8px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Sorotan saat pelanggan lupa memilih ukuran */
.size-selector-grid.needs-attention {
    animation: size-attention 1.6s ease-out 2;
    border-radius: 8px;
}
@keyframes size-attention {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 0, 200, 0); }
    30%      { box-shadow: 0 0 0 5px rgba(255, 0, 200, 0.35); }
}

/* Elemen khusus mobile: selalu tersembunyi di desktop */
#mobile-tabbar,
#mobile-cta-bar {
    display: none;
}

/* ==============================================================
   MOBILE / TABLET LAYOUT  (<= 900px)
   Menyusun ulang tampilan untuk layar kecil.
   Tidak ada fitur yang diubah — hanya posisi & ukuran.
============================================================== */
@media (max-width: 900px) {

    body {
        display: block;
        overflow-x: hidden;
    }

    .app-container {
        padding: 10px 12px 0;
        max-width: 100%;
    }

    /* --- Susun jadi satu kolom: kanvas di atas, panel di bawah --- */
    .editor-layout {
        display: flex;
        flex-direction: column;
        gap: 14px;
        min-height: 0;
        align-items: stretch;
    }
    .canvas-section  { order: 0; }
    .style-panel     { order: 1; }
    .controls-section:not(.style-panel) { order: 2; }

    /* --- Penunjuk langkah 1-2-3-4 di atas kanvas --- */
    #mobile-steps {
        display: flex;
        width: 100%;
        max-width: min(100%, 420px);
        margin: 0 auto 10px;
        padding: 0;
        list-style: none;
        gap: 4px;
    }
    #mobile-steps .mstep {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        padding: 7px 2px;
        border-radius: 10px;
        background: var(--secondary);
        color: var(--text-muted);
        font-size: 0.72rem;
        font-weight: 600;
        cursor: pointer;
        transition: background 0.2s, color 0.2s;
        min-height: 34px;
    }
    #mobile-steps .mstep-num {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: var(--panel-bg);
        color: var(--text-muted);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.68rem;
        font-weight: 700;
        flex-shrink: 0;
    }
    #mobile-steps .mstep.is-current {
        background: var(--primary);
        color: var(--primary-text);
    }
    #mobile-steps .mstep.is-current .mstep-num {
        background: var(--primary-text);
        color: var(--primary);
    }
    #mobile-steps .mstep.is-done {
        background: rgba(16, 185, 129, 0.14);
        color: #059669;
    }
    #mobile-steps .mstep.is-done .mstep-num {
        background: var(--success);
        color: #fff;
        font-size: 0;
    }
    #mobile-steps .mstep.is-done .mstep-num::after {
        content: '✓';
        font-size: 11px;
        line-height: 1;
    }

    /* --- Petunjuk cara memakai kanvas (muncul sekali) --- */
    #canvas-hint {
        position: absolute;
        left: 10px;
        right: 10px;
        bottom: 62px;
        z-index: 30;
        background: rgba(20, 20, 22, 0.9);
        color: #fff;
        border-radius: 14px;
        padding: 14px 16px 12px;
        font-size: 0.82rem;
        line-height: 1.5;
        animation: hint-in 0.35s ease-out;
        box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    }
    #canvas-hint.is-leaving {
        opacity: 0;
        transition: opacity 0.3s;
    }
    #canvas-hint .hint-row {
        display: flex;
        align-items: center;
        gap: 9px;
        margin-bottom: 4px;
    }
    #canvas-hint .hint-row span {
        width: 20px;
        text-align: center;
        flex-shrink: 0;
    }
    #canvas-hint #canvas-hint-ok {
        margin-top: 10px;
        width: 100%;
        padding: 9px;
        border: none;
        border-radius: 9px;
        background: #fff;
        color: #1c1c1e;
        font-weight: 700;
        font-size: 0.82rem;
        cursor: pointer;
    }
    @keyframes hint-in {
        from { opacity: 0; transform: translateY(10px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* --- Kanvas mengalir biasa ---
       Dulu menempel di atas (position: sticky). Diubah 13 Agu 2026 karena
       "menempel" hanya bisa terjadi kalau halaman ini punya scroll sendiri,
       dan scroll sendiri itulah yang menjebak pelanggan di dalam bingkai
       sehingga tidak bisa lanjut ke section berikutnya di halaman Shopify. */
    .canvas-section {
        padding: 6px 0 10px;
    }

    /* --- Kanvas ikut lebar layar ---
       Potongannya lebih ringan daripada desktop (0,86 bukan 0,78) supaya
       toolbar 6 tombol masih punya ruang kosong di atas celana. */
    .canvas-wrapper {
        --canvas-crop-top: 2%;
        --canvas-ratio: 0.88;
        width: 100%;
        max-width: min(100%, 420px);
        height: auto;
        margin: 0 auto;
        border-radius: 18px;
    }

    /* --- Toolbar: sebesar mungkin selama 6 tombol masih muat sebaris --- */
    .canvas-toolbar {
        top: 8px;
        gap: 4px;
    }
    .canvas-toolbar button {
        width: 42px;
        height: 42px;
    }
    .canvas-toolbar button svg {
        width: 19px;
        height: 19px;
    }
    .toolbar-btn-wrapper span {
        font-size: 0.6rem;
        line-height: 1;
    }

    /* --- Tombol zoom & Front/Back: minimal 44 px agar mudah disentuh --- */
    .canvas-controls { max-width: min(100%, 420px); gap: 10px; margin-top: 12px; }
    .zoom-controls button { width: 44px; height: 44px; font-size: 1.25rem; }
    .canvas-action-bar { gap: 8px; }
    .bottom-view-toggle .view-btn {
        padding: 11px 18px;
        font-size: 13.5px;
        min-height: 44px;
    }

    /* --- Tombol kecil di daftar Layers --- */
    .layer-btn { width: 40px; height: 40px; font-size: 16px; }
    .layer-controls { gap: 6px; }
    .layer-item { padding: 8px; }

    /* --- Panel jadi selebar layar --- */
    .style-panel,
    .controls-section {
        width: 100%;
    }
    .glass-panel {
        padding: 16px;
        border-radius: 16px;
    }

    /* --- Sistem tab: sembunyikan bagian yang bukan tab aktif --- */
    body.mobile-tabs[data-mtab-active="style"]  [data-mtab]:not([data-mtab~="style"]),
    body.mobile-tabs[data-mtab-active="design"] [data-mtab]:not([data-mtab~="design"]),
    body.mobile-tabs[data-mtab-active="layers"] [data-mtab]:not([data-mtab~="layers"]) {
        display: none !important;
    }
    body.mobile-tabs .layers-container { max-height: calc(var(--screen-h) * 0.45); }

    /* --- Bar tab di bawah layar --- */
    #mobile-tabbar {
        display: flex;
        width: 100%;
        max-width: min(100%, 420px);
        margin: 12px auto 0;
        background: var(--panel-bg);
        border: 1px solid var(--border);
        border-radius: 14px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        padding: 5px;
        gap: 4px;
    }
    #mobile-tabbar .mtab-btn {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        background: transparent;
        border: none;
        padding: 6px 2px;
        border-radius: 12px;
        color: var(--text-muted);
        font-weight: 600;
        font-size: 0.7rem;
        cursor: pointer;
    }
    #mobile-tabbar .mtab-btn .mtab-icon { font-size: 1.15rem; line-height: 1; }
    #mobile-tabbar .mtab-btn.active {
        background: var(--secondary);
        color: var(--text-main);
    }

    /* --- Tombol Add to Cart mengambang di atas bar tab --- */
    body.mobile-tabs { padding-bottom: 12px; }

    /* --- Tombol tema jadi ikon kecil agar tidak menutupi kanvas --- */
    #theme-toggle {
        position: absolute;
        top: 8px;
        right: 8px;
        padding: 7px;
        border-radius: 50%;
        z-index: 970;
        background: var(--panel-bg);
        border: 1px solid var(--border);
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }
    #theme-toggle #theme-text { display: none; }
    #theme-toggle #theme-icon { display: flex; }
    #theme-toggle svg { width: 16px; height: 16px; }

    /* --- Modal & galeri --- */
    .modal { padding: 12px; }
    .modal-content,
    .style-modal-content {
        width: 100%;
        max-width: 100% !important;
        max-height: calc(var(--screen-h) * 0.88);
        overflow-y: auto;
        padding: 20px 16px;
        border-radius: 16px;
    }
    .style-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px;
        max-height: none;
        padding-right: 0;
    }
    .style-card .style-name { font-size: 0.8rem; padding: 8px 6px; }
    .modal-header h2 { font-size: 1.15rem; }
    #json-modal textarea { height: 200px; }

    /* --- Ukuran sentuh & jarak --- */
    .size-selector-grid { gap: 8px !important; }
    .size-btn { padding: 12px 4px; }
    .path-btn { padding: 12px 6px; font-size: 0.85rem; }
    .toast-container { bottom: 24px; }
}

/* HP dalam posisi miring / landscape (layar pendek) */
@media (max-width: 900px) and (max-height: 500px) {
    .canvas-section { position: static; }
    .canvas-wrapper { max-width: min(100%, 320px); }
    .canvas-toolbar { gap: 3px; top: 6px; }
    .canvas-toolbar button { width: 30px; height: 30px; }
    .canvas-toolbar button svg { width: 14px; height: 14px; }
    .toolbar-btn-wrapper span { font-size: 0.5rem; }
    .zoom-controls button { width: 38px; height: 38px; }
    .modal-content, .style-modal-content { max-height: calc(var(--screen-h) * 0.92); }
}

/* Layar sangat kecil (<= 360px) */
@media (max-width: 360px) {
    .canvas-toolbar { gap: 3px; }
    .canvas-toolbar button { width: 36px; height: 36px; }
    .canvas-toolbar button svg { width: 16px; height: 16px; }
    .toolbar-btn-wrapper span { font-size: 0.54rem; }
    .path-btn { font-size: 0.78rem; }
    .zoom-controls button { width: 42px; height: 42px; }
}

/* ==============================================================
   MODE TERTANAM (dipasang di dalam halaman Shopify)
   --------------------------------------------------------------
   Di dalam bingkai yang tingginya mengikuti isi, "position: fixed"
   tidak lagi berarti "menempel di layar" — melainkan menempel pada
   bingkai yang panjangnya bisa 1500 px. Akibatnya jendela galeri
   dan layar tunggu bisa muncul di luar pandangan pelanggan.

   embed.js mengabari bagian mana dari bingkai yang sedang terlihat
   di layar (--embed-top dan --embed-height), lalu semua lapisan
   melayang diposisikan tepat di area itu.
============================================================== */
html.is-embedded .modal,
html.is-embedded #loading-overlay,
html.is-embedded .toast-container {
    position: absolute;
    top: var(--embed-top, 0px);
    height: var(--embed-height, var(--screen-h));
    left: 0;
    right: 0;
    bottom: auto;
}

html.is-embedded .toast-container {
    height: auto;
    top: auto;
    bottom: auto;
    transform: none;
    align-items: center;
    /* Ditempatkan di bagian bawah area yang sedang terlihat */
    top: calc(var(--embed-top, 0px) + var(--embed-height, 400px) - 90px);
}

/* Tombol tema mengikuti area yang terlihat, bukan ujung atas bingkai */
html.is-embedded #theme-toggle {
    position: absolute;
    top: calc(var(--embed-top, 0px) + 8px);
}

/* ==============================================================
   TOMBOL TEMA DISEMBUNYIKAN & LAYER DISEMBUNYIKAN
   --------------------------------------------------------------
   Keduanya disembunyikan 14 Agu 2026 atas permintaan Nandha.
   Elemennya sengaja dibiarkan ada di halaman supaya kodenya tidak
   perlu diubah — cukup hapus dua aturan ini kalau mau dimunculkan.
============================================================== */
#theme-toggle { display: none !important; }
/* Panel Layers ikut hidup lagi bersama "Custom Your Own" (18 Agu 2026),
   tapi HANYA di jalur manual — di jalur Dokoyo Style pelanggan cuma punya satu
   gambar, jadi panel ini cuma bikin ramai. app.js menandai jalur yang aktif
   pada <body data-design-path="...">. */
#layers-group { display: none !important; }
body[data-design-path="manual"] #layers-group { display: block !important; }

/* ==============================================================
   UKURAN: 3 kolom, muat di panel yang sudah dipersempit
============================================================== */
.size-selector-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 8px;
}

/* ==============================================================
   "YOUR DESIGNS" — slide riwayat hasil generasi
   --------------------------------------------------------------
   Pelanggan bisa melihat kembali semua hasil AI yang sudah dibuat
   dan memilih salah satunya TANPA memanggil AI lagi.
============================================================== */
.gen-history {
    width: 100%;
    max-width: var(--canvas-max);
    margin: 18px auto 0;
    background: var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 14px 16px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.05);
}
.gen-history-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.gen-history-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-main);
}
.gen-history-hint {
    font-size: 0.8rem;
    color: var(--text-muted);
}
.gen-history-strip {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}
.gen-item {
    flex: 0 0 auto;
    width: 132px;
    padding: 0;
    border: 2px solid var(--border);
    border-radius: 12px;
    background: var(--panel-bg);
    cursor: pointer;
    overflow: hidden;
    display: block;
    scroll-snap-align: start;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
    position: relative;
}
.gen-item img {
    display: block;
    width: 100%;
    aspect-ratio: 42 / 31;
    object-fit: cover;
    background: var(--secondary);
    -webkit-user-drag: none;
}
.gen-item-name {
    display: block;
    padding: 7px 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-main);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gen-item-badge {
    display: none;
    position: absolute;
    top: 6px;
    left: 6px;
    background: var(--success);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 999px;
    letter-spacing: 0.02em;
}
.gen-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.10);
}
.gen-item.is-active {
    border-color: var(--success);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
}
.gen-item.is-active .gen-item-badge { display: block; }
.gen-item.is-active:hover { transform: none; }

@media screen and (max-width: 900px) {
    .gen-history {
        max-width: min(100%, 420px);
        padding: 12px;
        border-radius: 14px;
    }
    .gen-item { width: 118px; }
    .gen-history-hint { font-size: 0.75rem; }
}

/* ==============================================================
   SAAT MENGIKUTI TEMA TOKO
   --------------------------------------------------------------
   Warna-warnanya diganti lewat variabel (--primary, --bg-color, dst)
   oleh theme.js, jadi tidak perlu aturan tambahan di sini.

   Yang perlu aturan khusus hanya dua: jenis huruf dan sudut lengkung.
   Sengaja dibatasi pada tombol tindakan utama dan panel saja — tombol
   bulat di toolbar dan tombol pil Front/Back tidak ikut supaya bentuknya
   tidak rusak.
============================================================== */
html.theme-linked body {
    font-family: var(--theme-font, 'Outfit'), 'Outfit', sans-serif;
}
html.theme-linked .glass-panel,
html.theme-linked .gen-history {
    border-radius: var(--theme-radius, 20px);
}
html.theme-linked .btn-primary,
html.theme-linked .btn-ai,
html.theme-linked .style-preview-box,
html.theme-linked #mobile-cta-bar #btn-save {
    border-radius: var(--theme-radius, 12px);
}

/* Tombol "Let it finish in the background" di dalam kotak menunggu.
   Sengaja dibuat tenang (bukan tombol utama): pilihan yang tersedia, bukan
   yang disarankan. Lihat catatan di app.js soal kenapa bukan "Cancel". */
#btn-background-wait {
    margin-top: 18px;
    padding: 10px 18px;
    min-height: 44px;              /* ukuran sentuh minimum di HP */
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.45);
    color: #fff;
    border-radius: 8px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
#btn-background-wait:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.8);
}