/* 1. BASE STYLES & SCROLLBARS */
body { 
    font-family: 'Montserrat', sans-serif; 
    background-color: #0a0a0a; 
    color: #f8fafc; 
    overflow: hidden; 
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #FDB913; }

#workspace { display: none; }

/* 2. CANVAS & VIEWER */
.checkerboard {
    background-image: 
        linear-gradient(45deg, #0a0a0a 25%, transparent 25%), 
        linear-gradient(-45deg, #0a0a0a 25%, transparent 25%), 
        linear-gradient(45deg, transparent 75%, #0a0a0a 75%), 
        linear-gradient(-45deg, transparent 75%, #0a0a0a 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

.canvas-wrapper {
    position: relative;
    display: inline-block;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
    transition: all 0.3s ease;
    overflow: hidden;
    background-color: #111111;
}

#main-canvas {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 4rem);
    transition: filter 0.3s ease, width 0.3s ease;
}

/* 3. OVERLAYS & GUIDES */
.grid-line-dashed { 
    border: 1.5px dashed rgba(253, 185, 19, 1); 
    position: absolute; 
    pointer-events: none; 
}

#col-grid-overlay { 
    display: grid; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    pointer-events: none; 
    opacity: 0; 
    transition: opacity 0.3s; 
}

.grid-cell { 
    background-color: rgba(253, 185, 19, 0.3); 
    outline: 1px solid rgba(253, 185, 19, 1); 
    outline-offset: -1px;
}

#align-overlay { 
    position: absolute; 
    inset: 0; 
    pointer-events: none; 
    display: none; 
    overflow: hidden; 
    z-index: 40; 
}

.sym-guide { 
    position: absolute; 
    background-color: #FDB913; 
    pointer-events: none; 
    z-index: 41; 
    box-shadow: 0 0 2px rgba(0,0,0,0.8); 
}

.sym-v { width: 1px; height: 100%; top: 0; }
.sym-h { height: 1px; width: 100%; left: 0; }

.guide-label { 
    position: absolute; 
    background: rgba(253, 185, 19, 0.95); 
    color: #000; 
    font-size: 13px; 
    font-weight: 800; 
    padding: 6px 12px; 
    border-radius: 2px; 
    pointer-events: none; 
    white-space: nowrap; 
    font-family: 'JetBrains Mono', monospace;
}

/* 4. ANIMATIONS */
.stat-bar { transition: width 1s cubic-bezier(0.22, 1, 0.36, 1); }
.fade-in { animation: fadeIn 0.3s ease-in-out forwards; }
@keyframes fadeIn { 
    from { opacity: 0; transform: translateY(5px); } 
    to { opacity: 1; transform: translateY(0); } 
}