:root {
    --font-main: 'Plus Jakarta Sans', sans-serif;
    --font-display: 'Space Grotesk', sans-serif;
    --c-primary: #11C6AE;
    --c-primary-light: rgba(17, 198, 174, 0.1);
    --c-text-dark: #1A1A24;
    --c-text-muted: #8E8E93;
    --c-border: #E8E8E8;
    --bg-app: #F8F9FA;
    --glass-bg: #FFFFFF;
    --shadow-soft: 0px 8px 30px rgba(0, 0, 0, 0.04);
}

* { box-sizing: border-box; margin: 0; padding: 0; }


.app-layout { display: grid; grid-template-columns: 220px 1fr 440px; height: 100vh; padding: 30px; gap: 30px; }
.sidebar-left { display: flex; flex-direction: column; justify-content: center; }
.nav-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--c-text-muted); margin-bottom: 40px; }
.stepper { list-style: none; display: flex; flex-direction: column; gap: 30px; }
.step { display: flex; align-items: center; gap: 15px; opacity: 0.3; transition: 0.3s; }
.step.active { opacity: 1; }
.step-num { font-family: var(--font-display); font-size: 24px; font-weight: 800; color: var(--c-primary); }
.step.active .step-num { color: var(--c-primary); }
.step:not(.active) .step-num { color: var(--c-text-muted); }
.step-name { font-weight: 800; font-size: 13px; text-transform: uppercase; }

.viewer-area { position: relative; display: flex; justify-content: center; align-items: center; }
model-viewer { width: 100%; height: 100%; outline: none; }
.camera-controls { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); display: flex; background: #fff; padding: 6px; border-radius: 30px; box-shadow: var(--shadow-soft); border: 1px solid var(--c-border); }
.cam-btn { background: transparent; border: none; color: var(--c-text-muted); padding: 12px 20px; border-radius: 24px; font-weight: 700; font-size: 11px; cursor: pointer; transition: 0.2s; }
.cam-btn.active, .cam-btn:hover { background: #F5F5F5; color: var(--c-text-dark); }

.sidebar-right { display: flex; flex-direction: column; gap: 20px; overflow-y: auto; padding-right: 5px; padding-bottom: 20px; }
.sidebar-right::-webkit-scrollbar { width: 4px; }
.sidebar-right::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; }

.glass-island { background: var(--glass-bg); border-radius: 24px; padding: 24px; box-shadow: var(--shadow-soft); border: 1px solid var(--c-border); }
.accordion-item { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.accordion-header { display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.island-title { font-family: var(--font-display); font-size: 16px; font-weight: 800; color: var(--c-text-dark); text-transform: uppercase; }
.island-action { font-size: 12px; font-weight: 800; color: var(--c-text-dark); }
.accordion-content { position: relative !important; bottom: auto !important; left: auto !important; right: auto !important; transform: none !important; color: inherit !important; max-height: 0; opacity: 0; overflow: hidden; transition: all 0.4s ease; }
.accordion-item.active .accordion-content { max-height: 1500px; opacity: 1; overflow: visible; transform: none !important; }

.flex-row { display: flex; } .gap-10 { gap: 10px; } .flex-1 { flex: 1; } .w-100 { width: 100%; }
.mt-5 { margin-top: 5px; } .mt-10 { margin-top: 10px; } .mt-15 { margin-top: 15px; } .mt-20 { margin-top: 20px; }
.mb-10 { margin-bottom: 10px; } .mb-15 { margin-bottom: 15px; } .text-center { text-align: center; } .flex-between { display: flex; justify-content: space-between; align-items: center; }
.apple-radius { border-radius: 16px !important; }

.group-label, .control-group label { display: block; font-size: 10px; font-weight: 800; color: var(--c-text-muted); margin-bottom: 8px; text-transform: uppercase; }
.glass-input { width: 100%; background: #ffffff; border: 1px solid var(--c-border); border-radius: 14px; padding: 14px 16px; font-family: var(--font-main); font-weight: 700; font-size: 14px; color: var(--c-text-dark); outline: none; transition: 0.2s; }
.glass-input:focus { border-color: var(--c-primary); }

.custom-select-wrapper { position: relative; }
.custom-select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;}
.select-icon { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); pointer-events: none; font-size: 12px; color: var(--c-text-dark); }

.color-picker-group { display: flex; gap: 12px; }
.color-swatch { width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer; transition: 0.2s; }
.color-swatch.active { transform: scale(1.1); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c-text-dark); }

.format-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.format-btn-new { background: #fff; border: 1px solid var(--c-border); border-radius: 14px; padding: 12px 5px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: 0.2s; }
.format-btn-new.active { border-color: var(--c-primary); background: var(--c-primary-light); }
.format-btn-new .f-name { font-family: var(--font-display); font-weight: 800; font-size: 12px; color: var(--c-text-dark); }
.format-btn-new .f-dim { font-size: 10px; font-weight: 600; color: var(--c-text-muted); margin-top: 4px; }
.format-btn-new.active .f-name, .format-btn-new.active .f-dim { color: var(--c-primary); }

.btn-dark-small { background: #1A1A24; color: #fff; border: none; border-radius: 12px; padding: 10px 16px; font-weight: 700; font-size: 11px; cursor: pointer; transition:0.2s;}
.btn-dark-small:hover { background: #2a2a36; }
.btn-outline-small { background: transparent; color: var(--c-primary); border: 1px solid var(--c-primary); border-radius: 12px; padding: 10px 16px; font-weight: 700; font-size: 11px; cursor: pointer; transition:0.2s;}

/* --- CANVAS AREA (ВІВЕР) --- */
.canvas-container { 
    
    background-size: contain; 
    background-position: center; 
    background-repeat: no-repeat;
    border: 1px solid var(--c-border);
   
    display: flex; justify-content: center; align-items: center; 
    height: 350px;
    position: relative; 
    overflow: visible; /* Важливо: щоб тулбар міг виходити за межі, якщо треба */
}

/* ПРОЗОРА РАМКА З РОЖЕВОЮ ОБВОДКОЮ */
.canvas-paper { 
    background: transparent !important; 
    border: 2px dashed #E6007E !important; 
    position: absolute; 
    cursor: move; 
    box-shadow: none !important;
}

#print-canvas {
    background-color: transparent !important;
}


/* --- СИСТЕМА 3-Х ТУЛБАРІВ --- */
.toolbar-side {
    position: absolute;
    display: none; /* З'являється тільки при виділенні */
    gap: 6px;
    z-index: 1000;
}

/* Кожна кнопка - це окремий чорний квадратик */
.toolbar-side button {
    background: #1A1A24; /* Чорний фон */
    border: none;
    cursor: pointer;
    width: 32px; 
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s;
    padding: 6px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* При наведенні стає зеленим */
.toolbar-side button:hover {
    background: #11C6AE; 
}

/* Робимо чорні іконки білосніжними */
.toolbar-side button img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: invert(1) brightness(2); 
}

/* ПОЗИЦІОНУВАННЯ (Відступи від країв рожевої рамки) */
/* 1. Лівий блок */
.toolbar-left {
    left: -40px; 
    top: 50%;
    transform: translateY(-50%);
    flex-direction: column;
}

/* 2. Нижній блок */
.toolbar-bottom {
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: row;
}

/* 3. Правий блок */
.toolbar-right {
    right: -40px;
    top: 50%;
    transform: translateY(-50%);
    flex-direction: column;
}

/* Штурвал руху */
.paper-drag-handle img {
    width: 18px;
    height: 18px;
    pointer-events: none;
    filter: invert(1) brightness(2); 
}
/* --- АДАПТАЦІЯ ТУЛБАРІВ ДЛЯ МАЛИХ ФОРМАТІВ (Logo Cuore, A5) --- */
.canvas-paper.mini-format .toolbar-bottom {
    bottom: -80px; /* Спускаємо нижній блоамяк суттєво нижче, щоб не перетинався з боковими */
}
.canvas-paper.mini-format .toolbar-left {
    left: -52px; /* Даємо трохи більше "повітря" зліва */
}
.canvas-paper.mini-format .toolbar-right {
    right: -52px; /* Даємо трохи більше "повітря" справа */
}
.layers-container-clean { background: transparent; border: none; }
.btn-text-primary { background: transparent; border: none; color: var(--c-primary); font-weight: 800; font-size: 12px; cursor: pointer; }
.level-card { background: #ffffff; border: 1px solid #e1e1e1; border-radius: 12px; margin-bottom: 10px; overflow: hidden; transition: all 0.2s ease; }
.level-card-header { padding: 12px 15px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 12px; color: #1A1A24; }
.level-card.active { border-color: var(--c-primary); }
.level-card.active .level-card-header { background: var(--c-primary-light); color: var(--c-primary); }
.level-card-body { display: none; padding: 10px; }
.level-card.active .level-card-body { display: block; }
.layer-item { display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 600; color: var(--c-text-muted); margin-bottom: 8px;}
.item-icon { font-weight: 800; color: var(--c-text-dark); font-size: 10px; }
.item-name { flex: 1; }
.item-delete { background: none; border: none; color: #D1D1D6; font-size: 12px; font-weight: 800; cursor: pointer; } .item-delete:hover { color: #ff3b30; }

.tools-tabs { display: flex; background: #F8F9FA; border-radius: 16px; padding: 6px; gap: 6px; }
.tab-btn { flex: 1; display: flex; flex-direction: column; align-items: center; background: transparent; border: none; padding: 10px; border-radius: 12px; cursor: pointer; transition: 0.3s; }
.tab-btn.active { background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.04); }
.tab-title { font-size: 14px; font-weight: 800; color: var(--c-text-muted); }
.tab-desc { font-size: 11px; font-weight: 600; color: var(--c-text-muted); }
.tab-btn.active .tab-title, .tab-btn.active .tab-desc { color: var(--c-primary); }

.tab-pane { display: none; }
.tab-pane.active { display: block; animation: fadeIn 0.3s; }

.image-upload-wrapper-compact { display: flex; gap: 15px; align-items: stretch; }
.upload-dropzone { flex: 1; border: 1px dashed var(--c-primary); background-color: #f0fdfb; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; position: relative; overflow: hidden; background-size: cover; background-position: center; }
.upload-content { position: relative; z-index: 2; text-align: center; background: rgba(255,255,255,0.7); padding: 5px 10px; border-radius: 8px;}
.upload-info-compact { width: 130px; display: flex; flex-direction: column; justify-content: center; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; width: 100%; }
.quality-warning { color: #E6007E; font-size: 10px; font-weight: 700; background: rgba(230,0,126,0.1); padding: 8px; border-radius: 8px; }
.info-row {display: flex; justify-content: space-between; align-items: center;}
.info-label { font-size: 10px; font-weight: 800; color: var(--c-text-dark); }
.info-value { font-size: 10px; font-weight: 600; color: var(--c-text-muted); }
.status-ok { color: var(--c-primary); font-weight: 800; }

.color-picker-input { width: 100%; height: 48px; border: none; border-radius: 12px; cursor: pointer; padding: 0; outline: none; }
.color-picker-input::-webkit-color-swatch-wrapper { padding: 0; }
.color-picker-input::-webkit-color-swatch { border: none; border-radius: 12px; }

.btn-primary-light { background: var(--c-primary-light); color: var(--c-primary); border: none; padding: 14px; font-family: var(--font-main); font-weight: 800; font-size: 13px; cursor: pointer; transition: 0.2s; }
.btn-primary-light:hover { background: var(--c-primary); color: #fff; }

.price-display { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.price-label { font-size: 13px; font-weight: 800; color: var(--c-text-muted); }
.price-value { font-family: var(--font-display); font-size: 32px; font-weight: 800; color: var(--c-text-dark); }
.btn-primary { background: var(--c-primary); color: #fff; border: none; padding: 18px; font-family: var(--font-main); font-weight: 800; font-size: 14px; cursor: pointer; transition: 0.3s; }
.btn-primary:hover { opacity: 0.9; transform: translateY(-2px); box-shadow: 0 10px 20px var(--c-primary-light); }

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

.zone-filter { display: flex; gap: 8px; flex-wrap: wrap; }
.zone-btn { background: #f0f0f5; border: 1px solid #e1e1e1; color: #8E8E93; padding: 8px 12px; border-radius: 8px; font-family: 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; }
.zone-btn:hover { background: #e6e6ec; color: #1A1A24; }
.zone-btn.active { background: #11C6AE; border-color: #11C6AE; color: #ffffff; }

/* ГОЛОВНЕ ВІКНО ВІВЕРА (Підігнано під карту футболки) */
#master-canvas-container { 
    background-color: #F8F9FA;
    
    /* ЗУМ КАРТИНКИ: 110% або 120% (підбери так, щоб футболка торкалась країв) */
    background-size: 115%; 
    background-position: center -50px; /* Трохи опускаємо чи піднімаємо, якщо треба */
    background-repeat: no-repeat;
    
    border: 1px solid var(--c-border);
    border-radius: 16px;
    display: flex; justify-content: center; align-items: center; 
    
    /* РОБИМО ІДЕАЛЬНУ ПРОПОРЦІЮ (Квадрат) замість жорстких 350px */
    width: 100%;
    aspect-ratio: 1 / 1; 
    max-height: 380px; /* Обмеження, щоб не роздуло на великих екранах */
    
    position: relative; 
    overflow: visible; 
}

/* Скидаємо стандартні стилі Fabric, щоб не було білого квадрата */
.canvas-container { margin: 0 auto; }

/* ПРОЗОРА РАМКА ДЛЯ ПАПЕРУ */
/* РОЖЕВА РАМКА: Тільки пунктир, жодного білого кольору */
.canvas-paper { 
    background: transparent !important; 
    border: 2px dashed #E6007E !important; 
    border-radius: 0px !important;
    position: absolute; 
    box-shadow: none !important;
    overflow: visible; /* Щоб штурвал і тулбар не обрізались */
}

/* ШТУРВАЛ: Рожевий, прямо на куті (на перетині ліній) */
.paper-drag-handle {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%); /* Центруємо на куті */
    width: 28px;
    height: 28px;
    background: #E6007E;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: move;
    z-index: 1001;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* --- NEW CSS EXTRACTED FROM index.html --- */
/* --- STUDIO MAIN LAYOUT GRID --- */
body.studio-page {
    overflow: auto !important; /* Allow the global page scroll */
}
body.studio-page .footer-c {
    display: block !important; /* Show footer */
}

.studio-inner-layout {
    width: 100%;
    min-height: calc(100vh - 90px);
    padding: 20px 20px 40px 20px; 
    box-sizing: border-box;
    display: grid;
    /* Left stepper is fixed 200px, center gets min 60% up to 70%, right gets the rest */
    grid-template-columns: 200px 1fr 400px; 
    gap: 30px;
    align-items: start; /* Let items grow downwards naturally */
}
.studio-inner-layout .accordion-item { height: auto !important; }
.studio-inner-layout .accordion-item.active { height: auto !important; flex: initial !important; }

/* Scrollbars for independent columns */
.sidebar-right::-webkit-scrollbar { width: 4px; }
.sidebar-right::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; }

.sidebar-left { 
    position: sticky; 
    top: 50vh; 
    transform: translateY(-50%); 
    display: flex; 
    flex-direction: column; 
    padding: 0 10px; 
    background: transparent;
    align-self: start; 
}
.logo-main { position: absolute; top: 30px; left: 20px; display: block; }
.nav-title { font-family: var(--font-display); font-size: 13px; font-weight: 800; color: var(--c-text-muted); margin-bottom: 25px; letter-spacing: 1px; }
.stepper { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 30px; }
.step { position: relative; padding-left: 15px; }
.step::before { content: ''; position: absolute; left: 0; top: 0; bottom: -30px; width: 2px; background: var(--c-border); z-index: 1; }
.step:last-child::before { display: none; }
.step.active::before { background: var(--c-primary); }
.step-num { font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--c-text-muted); width: 30px; }
.step-name { font-weight: 700; font-size: 14px; color: var(--c-text-muted); }
.step.active .step-num, .step.active .step-name { color: var(--c-text-dark); }
.step-link { display: flex; align-items: center; gap: 15px; text-decoration: none; color: inherit; width: 100%; cursor: pointer; }

/* --- CENTER COLUMN --- */
.center-column { 
    display: flex; 
    flex-direction: column; 
    gap: 20px; 
    width: 100%;
    margin: 0 auto; /* Center within the grid column */
    position: sticky;
    top: 110px;
    height: calc(100vh - 120px);
}
#island-base { width: 100%; margin: 0; z-index: 10; flex-shrink: 0; }
.viewer-area { 
    position: relative; 
    background: transparent; 
    border: none; 
    border-radius: 24px; 
    flex: 1; /* Stretch to fill remaining space */
    min-height: 500px; /* Base fallback */
    width: 100%; 
    display: flex; /* Make it a flex container so child height resolves */
    flex-direction: column;
}
model-viewer#hero-3d-logo { 
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important; 
    height: 100% !important; 
}
.studio-inner-layout .view-pill { bottom: 20px !important; } /* Make sure the nav doesn't clip */

/* Force glass island styling to override any home-style.css透明 rules */
.studio-inner-layout .glass-island {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid var(--c-border) !important;
}

/* --- RIGHT SIDEBAR (TOOLS & CHECKOUT) --- */
.sidebar-right { 
    display: flex; 
    flex-direction: column; 
    gap: 20px; 
    padding-bottom: 20px; 
}

/* --- INLINE STYLES EXTRACTED --- */
.step-col { display: flex; flex-direction: column; }
.island-base-padding { padding: 18px 24px; }
.island-base-header { margin-bottom: 12px; }
.island-base-flex { display: flex; gap: 20px; align-items: flex-end; }
.control-model { flex: 1; min-width: 0; max-width: 100%; margin: 0; }
.control-model .custom-select { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: 100%; }
.control-color { margin: 0; flex-shrink: 0; }
.select-padding { padding: 12px 16px; }

.swatch-white { background: #ffffff; border: 2px solid #e1e1e1; }
.swatch-dark { background: #1A1A24; }
.swatch-gold { background: #D9A01B; }
.swatch-green { background: #009933; }
.swatch-pink { background: #E6007E; }
.swatch-red { background: #FF0000; }

.island-action-plus { color: var(--c-text-muted); }

.layer-label { margin: 0; }
.control-size { width: 70px; }
.control-color-picker { width: 60px; }

.export-png-btn { border-radius: 12px; padding: 10px; font-weight: 800; font-size: 12px; border: 1px solid var(--c-border); cursor: pointer; background: #fff; }

.upload-icon-emoji { font-size: 20px; }
.upload-icon-text { font-size: 10px; margin-top: 5px; }

.action-footer-margin { margin-top: auto; }
.project-name-group { margin-bottom: 14px; }
.project-name-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--c-text-muted); display: block; margin-bottom: 6px; }
.project-name-input { width: 100%; padding: 12px 14px; font-size: 13px; font-weight: 700; }

.project-name-error { display: none; color: #E6007E; font-size: 11px; font-weight: 700; margin-top: 5px; }