/* ========================================================================= */
/* HANDSKILLS DESIGN STUDIO - PREMIUM STYLE ENGINE CORE                     */
/* ========================================================================= */

body { 
    font-family: 'Inter', system-ui, -apple-system, sans-serif; 
    background-color: #0c0c0e; 
    touch-action: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* High-Definition Pro Geometric Blueprint Dot Grid (Figma & Linear Style) */
.studio-bg { 
    background-image: radial-gradient(rgba(255, 255, 255, 0.04) 1.2px, transparent 1.2px); 
    background-size: 24px 24px; 
    background-color: #0e0e11;
    position: relative;
}

/* Professional Adaptive Layer Component Thumbnail */
.layer-thumbnail {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background-color: #09090b;
    border: 1px solid rgba(255, 255, 255, 0.06);
    object-fit: contain;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    transition: border-color 0.15s ease, shadow 0.15s ease;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* CORE LAYER MATRIX WRAPPER LIST (HIGHLY DRAGGABLE SUITE) */
#photoshop-layers-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem; 
    max-height: calc(100vh - 14rem) !important; 
    overflow-y: auto !important;
    overflow-x: hidden;
    padding-right: 0.25rem; 
    padding-left: 0.1rem;   
    scrollbar-gutter: stable;
}

/* Floating Sidebar Glassmorphism Engine (Luxury Interface Profile) */
#layers-sidebar {
    position: fixed !important;
    top: 4rem;      
    right: 1.25rem;  
    width: 260px;
    height: 560px;  
    max-height: calc(100vh - 8rem);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 1rem;
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.7), 
                0 1px 0 rgba(255, 255, 255, 0.02) inset;
    cursor: default;
    background-color: rgba(18, 18, 20, 0.85) !important;
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#layers-sidebar:hover {
    border-color: rgba(255, 255, 255, 0.08);
}

#layers-sidebar-header {
    cursor: grab;
    user-select: none;
}

#layers-sidebar-header:active {
    cursor: grabbing;
}

.layer-item { 
    width: 100%; 
    will-change: transform, opacity;
}

/* Micro-interaction on Layer Row Hover */
.layer-item:hover .layer-thumbnail {
    border-color: rgba(255, 255, 255, 0.15);
}

/* Fabric.js Vector Content Canvas Sandbox Sandbox */
#canvas-zoom-wrapper {
    position: relative;
    background-color: #ffffff;
    box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.85), 
                0 0 0 1px rgba(255, 255, 255, 0.04);
    transform-origin: center center;
    transition: transform 0.04s cubic-bezier(0.1, 0.8, 0.2, 1);
    will-change: transform;
}

.canvas-container {
    margin: 0 auto;
    overflow: visible !important;
}

/* Micro-Sleek Scrollbars Suite (Minimal Disruptive Architecture) */
.custom-scroll::-webkit-scrollbar { 
    height: 3px; 
    width: 3px; 
}

.custom-scroll::-webkit-scrollbar-track { 
    background: transparent; 
}

.custom-scroll::-webkit-scrollbar-thumb { 
    background: rgba(255, 255, 255, 0.08); 
    border-radius: 99px; 
}

.custom-scroll::-webkit-scrollbar-thumb:hover { 
    background: rgba(255, 255, 255, 0.2); 
}

/* Professional Active Dragging States */
.layer-item.dragging { 
    opacity: 0.4; 
    background-color: rgba(37, 99, 235, 0.1) !important; 
    border-color: rgba(37, 99, 235, 0.5) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Ruler Interactive Zones */
#ruler-top { 
    cursor: ns-resize !important; 
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02);
}

#ruler-left { 
    cursor: ew-resize !important; 
    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.02);
}

/* Custom Animation Transitions for Modals */
#asset-modal, #shape-variant-modal {
    will-change: opacity;
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

#modal-card, #shape-modal-card {
    will-change: transform;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* OPTIMASI PERFORMA PANEL PROPERTI (ANTI-LAG) */
#text-properties-panel {
    /* 1. Paksa browser menggunakan akselerasi GPU */
    transform: translateZ(0);
    will-change: transform, top, left;
    
    /* 2. Matikan seleksi teks di dalam panel saat digeser */
    user-select: none;
    -webkit-user-select: none;
    
    /* 3. Optimasi rendering transisi */
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* Matikan efek blur BERAT hanya pada saat panel sedang aktif digeser */
/* (Catatan: Tambahkan class 'dragging' melalui JS Anda jika memungkinkan) */
#text-properties-panel.dragging {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-color: rgba(18, 18, 20, 0.95) !important;
}