:root {
    /* CSS VERSION 3.0 - SLIM PC TOOLBAR */
    --bg-color: #1a1a1a;
    --panel-bg: rgba(0, 0, 0, 0.75);
    --text-color: #ffffff;
    --accent-color: #70a1ff;
    --border-radius: 12px;
}

html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* Script will toggle this */
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Playfair Display', serif;
}

canvas {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    pointer-events: auto;
    background: transparent !important;
    /* Keep canvas transparent so we see white body background if needed? Or user wants to see ghost on top? 
                                          If ghost is on top, canvas background doesn't block it. 
                                          But user said "canvas background is white" might be blocking.
                                          So keeping canvas transparent is good. */
}

#lightbox-layer {
    z-index: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* Let clicks pass through to canvas if needed, or user wants to click it? usually reference is background */
}


#paint-app {
    background-color: #ffffff !important;
    background-image: none !important;
}

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    /* Allow scrolling */
    background-color: #f0f0f0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    height: 100%;
    scroll-behavior: smooth;
}

#canvas,
#preview-layer {
    width: 100% !important;
    height: 100% !important;
    display: block;
    object-fit: contain;
    touch-action: none;
}

#lightbox-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* KEY: Let clicks pass through */
    z-index: 50;
    /* Overlay on top of canvas */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

#lightbox-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.5;
}

/* Merch Section Styles */
.merch-section {
    padding: 60px 40px;
    max-width: 1200px;
    margin: 0 auto;
    background: #1a1a1a;
    color: white;
}

.merch-section h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 40px;
}

.merch-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

@media (max-width: 1024px) {
    .merch-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .merch-grid {
        grid-template-columns: 1fr;
    }
}

.product-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.product-image {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 8px;
    background: #000;
}

.product-info h3 {
    margin: 0 0 5px 0;
    font-size: 1.1rem;
}

.product-price {
    color: #70a1ff;
    font-weight: bold;
    font-size: 1.1rem;
}

.cta-button {
    background: #70a1ff;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
}

canvas {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #ffffff;
    /* Custom Dot Cursor (Black dot with white outline) */
    cursor: url('data:image/svg+xml;utf8,<svg width="10" height="10" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="5" cy="5" r="3" fill="black" stroke="white" stroke-width="1"/></svg>') 5 5, crosshair;
    touch-action: none;
    /* Prevents scrolling on mobile while drawing */
}

/* Toolbar / Controls Container */
.controls {
    position: fixed;
    /* Stick to bottom */
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);

    /* Layout */
    display: flex;
    flex-wrap: nowrap;
    /* Prevent wrapping */
    justify-content: space-between;
    align-items: center;
    gap: 20px;

    /* Dimensions and Style */
    width: 95%;
    max-width: 1100px;
    height: 55px !important;
    /* Forced Slim Height */
    /* Consistently narrow */
    padding: 5px 15px !important;
    gap: 10px;

    /* Visuals */
    background: rgba(30, 30, 30, 0.85);
    /* Modern Glass */
    backdrop-filter: blur(10px);
    border-radius: 50px;
    /* Pill shape */
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    border: 1px solid rgba(255, 255, 255, 0.18);
    align-items: center;
    /* Vertically center everything */
    z-index: 2000;

    /* Animation & Collapse logic */
    transition: width 0.3s ease-in-out, padding 0.3s ease-in-out;
    overflow: hidden;
    /* Ensure flex items single row */
    /* The following are already defined above, but kept for context if they were meant to be overridden */
    /* display: flex; */
    /* flex-wrap: nowrap; */

    /* Original animation and scroll properties, adjusted */
    /* transition: all 0.3s ease; */
    /* Replaced by specific width/padding transition */
    overflow-x: auto;
    /* Allow scroll on very narrow screens, but hidden for collapse */
    scrollbar-width: none;
    /* Hide scrollbar Firefox */
}

/* Global Extras Banner Position (Top Right) */
.extras-container {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    display: flex !important;
    gap: 10px;
    z-index: 2000 !important;
}

.controls.collapsed {
    width: 60px !important;
    /* Just enough for the toggle */
    /* Just enough for the toggle */
    padding: 5px !important;
    justify-content: center;
    /* Center the gear */
}

/* Hide children when collapsed (except toggle) */
/* Hide children when collapsed (except toggle) */
.controls.collapsed>*:not(#toolbar-toggle):not(#help-btn) {
    display: none !important;
}

/* Toggle Button Style */
#toolbar-toggle {
    flex-shrink: 0;
    /* Always stay full size */
    width: 40px !important;
    height: 40px !important;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: transparent;
    transition: transform 0.3s;
    color: white;
    /* Ensure visible on dark bg */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2001;
}

.controls.collapsed #toolbar-toggle {
    margin-right: 0 !important;
    transform: rotate(180deg);
}

.controls::-webkit-scrollbar {
    display: none;
    /* Hide scrollbar Chrome/Safari */
}

/* Control Groups (Color, Tool, Settings, Actions) */
.control-group {
    display: flex;
    flex-direction: column !important;
    /* Stack label above control */
    gap: 1px !important;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    /* Separator */
    padding-right: 15px;

    /* Text Color Update - Professional Grey on Dark Glass */
    color: #dadada !important;
}

/* Updated Label Styling */
.control-group label {
    color: #dadada !important;
    /* Professional Off-White/Grey */
    font-weight: 500;
    font-size: 0.85rem;
    letter-spacing: 0.3px;
}

/* Secondary/Subtle Text */
.control-group span,
.value-display,
.control-group small {
    color: #a8a8a8 !important;
    /* Slightly darker grey for hierarchy */
}

/* Input Color Override */
input[type="color"] {
    border-color: #666666;
}

.control-group:last-child {
    border-right: none;
    padding-right: 0;
}

#lightbox-controls {
    flex-direction: row !important;
    gap: 8px !important;
    align-items: center;
}

#lightbox-controls label {
    display: none;
}

#lightbox-opacity {
    margin: 0 4px !important;
    /* Spacing */
    width: 70px !important;
}

#lightbox-controls button {
    margin: 0 !important;
}

/* Specific fix for Actions Group to ensure single row */
.actions-group {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end;
    gap: 12px !important;
    flex-wrap: nowrap !important;
    flex: 0 0 auto;
    /* Do not shrink */
}

/* Hide the label for Actions group to save space and look cleaner */
.actions-group label {
    display: none;
}

.actions-group button {
    margin: 0 !important;
    display: inline-flex !important;
    white-space: nowrap;
}

/* Base styles for labels */
label {
    font-size: 9px !important;
    font-weight: bold !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 0;
    white-space: nowrap;
}

/* Compact circular buttons for Actions */
#undo-btn,
#redo-btn,
#camera-btn,
#chat-toggle,
#mode-toggle,
#vault-btn {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

#lightbox-btn {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    font-size: 0.9rem;
}

button {
    padding: 0 14px;
    font-size: 0.85rem;
    border-radius: 50px;
    /* Pill Shape */
    height: 32px;
    /* Fixed elegant height */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


/* Responsive Breakpoints */
@media (max-width: 768px) {
    .controls {
        bottom: 10px;
        width: 100%;
        padding: 10px;
        gap: 10px;
        /* Reduce padding/gap on tablet/mobile */
    }

    .control-group {
        justify-content: center;
        flex: 1 1 auto;
        /* Allow groups to shrink/grow */
    }

    /* Make sliders more compact */
    input[type="range"] {
        width: 80px;
    }
}

/* Ensure font selector fits */
#font-family {
    width: 120px;
    font-size: 0.8rem;
}

@media (max-width: 480px) {
    .controls {
        bottom: 0;
        border-radius: 12px 12px 0 0;
        /* Dock to bottom on small mobile */
        padding-bottom: 20px;
        /* Safe area for swipe bar */
        gap: 8px;
    }

    label {
        font-size: 0.65rem;
        /* Smaller text */
    }

    /* Stack elements if really tight, or keep scrolling */
    .control-group {
        flex-wrap: nowrap;
        /* Tries to keep groups in one line */
    }
}

/* Custom Color Picker Wrapper */
.color-wrapper {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.5);
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

input[type="color"] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150%;
    height: 150%;
    opacity: 0;
    cursor: pointer;
    padding: 0;
    margin: 0;
    border: none;
}

/* Normalized Sliders */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    /* Standard */
    width: 80px;
    height: 6px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    outline: none;
}

/* WebKit Thumb */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    background: var(--accent-color);
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.2s;
    border: 2px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    margin-top: 0;
    /* WebKit needs this if track has height? No, standard is ok */
}

/* Mozilla Thumb */
input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: var(--accent-color);
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

input[type="range"]::-webkit-slider-thumb:hover,
input[type="range"]::-moz-range-thumb:hover {
    transform: scale(1.2);
}

select {
    appearance: none;
    background-color: rgba(255, 255, 255, 0.15);
    color: var(--text-color);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    padding: 5px 10px;
    font-family: inherit;
    font-size: 0.9rem;
    cursor: pointer;
    outline: none;
}

select:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

select option {
    background-color: var(--bg-color);
    color: var(--text-color);
}

.chat-container {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 300px;
    height: 400px;
    background: var(--panel-bg);
    backdrop-filter: blur(10px);
    border-radius: var(--border-radius);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    display: none;
    /* Hidden by default */
    flex-direction: column;
    overflow: hidden;
    z-index: 2500;
}

.chat-header {
    position: relative;
    padding: 10px;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.close-btn {
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.2s;
}

.close-btn:hover {
    color: #ff4757;
}

#username {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--accent-color);
    font-weight: bold;
    font-size: 1rem;
    outline: none;
    text-align: center;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.message {
    font-size: 0.9rem;
    word-wrap: break-word;
}

.message strong {
    color: var(--accent-color);
}

.chat-input {
    padding: 10px;
    display: flex;
    gap: 8px;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

#message-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 4px;
    padding: 8px;
    color: #ffffff;
    outline: none;
}

button {
    background: var(--accent-color);
    border: none;
    border-radius: 4px;
    color: white;
    padding: 6px 10px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
}

button:hover {
    filter: brightness(1.1);
}

/* Chat Notification Dot */
#chat-toggle {
    position: relative;
}

#chat-toggle.has-notification::after {
    content: '';
    position: absolute;
    top: -5px;
    right: -5px;
    width: 12px;
    height: 12px;
    background-color: #ff4757;
    border-radius: 50%;
    border: 2px solid var(--panel-bg);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 71, 87, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(255, 71, 87, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 71, 87, 0);
    }
}

.user-counter {
    position: absolute;
    top: 20px;
    left: 20px;
    background: var(--panel-bg);
    backdrop-filter: blur(10px);
    padding: 10px 15px;
    border-radius: 20px;
    color: var(--text-color);
    font-weight: bold;
    font-size: 0.9rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 1500;
    pointer-events: none;
    /* Let clicks pass through if needed, though it's top-left */
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Vault Styles */
.vault-modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    z-index: 3000;
    justify-content: center;
    align-items: center;
}

.vault-content {
    background: #2a2a2a;
    width: 80%;
    max-width: 900px;
    height: 80%;
    border-radius: var(--border-radius);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.vault-header {
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.vault-header h2 {
    margin: 0;
    color: var(--accent-color);
}

.vault-header button {
    background: transparent;
    font-size: 1.5rem;
    padding: 0 10px;
}

.vault-grid {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

.vault-item {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform 0.2s;
}

.vault-item:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.1);
}

.vault-item img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 4px;
    background: #fff;
    /* Ensure transparent drawings show up */
}

.vault-timestamp {
    font-size: 0.8rem;
    color: #aaa;
    text-align: center;
}

.vault-actions {
    display: flex;
    gap: 5px;
}

/* Feed Navigation */
#feed-nav {
    position: absolute;
    bottom: 20px;
    left: 20px;
    /* Moved to left */
    display: flex;
    gap: 20px;
    z-index: 100;
}

/* Extras Container (Merch, Private, Challenge) */
.extras-container {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: flex;
    gap: 10px;
    z-index: 2000;
    align-items: flex-end;
}

/* Mobile Optimizations */
@media (max-width: 600px) {

    /* Compact Toolbar */
    .controls {
        padding: 8px;
        gap: 5px;
        width: 100%;
        border-radius: 15px 15px 0 0;
        bottom: 0;
        left: 0;
        transform: none;
        justify-content: space-between;
        overflow-x: auto;
        /* Allow scrolling if it overflows */
        white-space: nowrap;
        background: rgba(0, 0, 0, 0.85);
        /* Darker for better contrast */
    }

    .control-group {
        gap: 5px;
        padding: 0 5px;
        flex-shrink: 0;
    }

    label {
        display: none;
        /* Hide labels to save space */
    }

    input[type="color"] {
        width: 25px;
        height: 25px;
    }

    input[type="range"] {
        width: 60px;
    }

    select {
        padding: 3px 5px;
        font-size: 0.8rem;
    }

    button {
        padding: 5px 8px;
        font-size: 0.8rem;
    }

    /* Shrink Extras and move them up */
    .extras-container {
        bottom: auto;
        /* Unset bottom */
        top: 60px;
        /* Below user count */
        right: 10px;
        flex-direction: column;
        /* Stack vertically */
        align-items: flex-end;
        gap: 5px;
        transform: scale(0.7);
        /* Make them 70% size */
        transform-origin: top right;
    }

    /* Adjust specific buttons inside extras if needed */
    .extras-container a,
    .extras-container button {
        padding: 5px 10px !important;
        font-size: 0.8rem !important;
        white-space: nowrap;
    }
}

/* Shirt Color Widget */
.shirt-color-widget {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    /* Spacing from other buttons */
}

.shirt-color-trigger {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    background-color: #ffffff;
    /* Default */
    transition: transform 0.2s, box-shadow 0.2s;
    padding: 0;
    /* Override generic button padding */
}

.shirt-color-trigger:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.4);
}

.shirt-color-panel {
    display: none;
    /* Hidden by default */
    position: absolute;
    top: 45px;
    /* Below the trigger (Fixed for Top-Right position) */
    bottom: auto;
    right: 0;
    width: 180px;
    background: white;
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    z-index: 2500;
    /* Grid Layout */
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.shirt-color-panel.open {
    display: grid;
    animation: popIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popIn {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(10px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.shirt-color-option {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: transform 0.1s;
}

.shirt-color-option:hover {
    transform: scale(1.2);
    border-color: rgba(0, 0, 0, 0.5);
    z-index: 2;
}

/* --- Visualization Studio --- */
#visualization-studio {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #ffffff;
    z-index: 2000;
    display: flex;
    /* flex-col handled by display toggling script */
    flex-direction: column;
}

.studio-header {
    background: #f8f9fa;
    padding: 15px 25px;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.studio-header h2 {
    margin: 0;
    font-size: 1.5rem;
    color: #333;
}

.studio-workspace {
    flex: 1;
    position: relative;
    padding: 40px;
    background: #ffffff;
    /* Was #f0f2f5 (Purple-ish), fixed to White */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.05);
    /* Subtle inner shadow */
}

#shirt-container {
    position: relative;
    width: 80vmin;
    height: 80vmin;
    background: white;
    /* Match Mockup Shadow/Radius */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    border-radius: 20px;
    border: none;
    /* Mockup has no border, just shadow */

    /* Zoom logic inside, no external scale */
    transform-origin: top center !important;
}

/* Layer 1: Base Shirt */
#shirt-bg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    user-select: none;
    /* High Quality Rendering */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    transform-origin: top center !important;
}

/* Layer 2: Color Tint (Multiply) */
#tint-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    /* JS sets the color */
    mix-blend-mode: multiply;
    /* Blends with the fabric texture */
    pointer-events: none;
    /* Let clicks pass through to the design */
    opacity: 0.8;

    /* High Quality Rendering */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;

    /* THE MAGIC MASK: Forces the color to be the exact shape of the shirt */
    -webkit-mask-image: url('./shirt-white.png');
    mask-image: url('./shirt-white.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

#studio-safe-zone {
    position: absolute;
    top: 45%;
    /* Centered on Chest */
    left: calc(50% + 10px);
    width: calc(35% + 20px);
    /* Estimated Print Width relative to Shirt Image */
    height: 55%;
    /* Estimated Print Height */
    transform: translate(-50%, -50%);
    border: 2px dashed rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
    /* Double line for visibility */
    pointer-events: none;
    z-index: 2;
    /* Between Tint and Design */
}

/* Layer 3: User Design (Draggable) */
#design-layer {
    position: absolute;
    /* Centered Origin Logic */
    transform: translate(-50%, -50%);
    z-index: 3;
    /* FIXED: Changed from multiply to normal so white ink is visible */
    mix-blend-mode: normal;

    /* Update: Anchor Zoom */
    transform-origin: top center !important;
    cursor: grab;
    /* Show hand cursor to indicate draggable */
}

#design-layer:active {
    cursor: grabbing;
}

/* Reference Box (Highlight active area) - Optional */
#design-layer.dragging {
    outline: 2px dashed #007aff;
}

.studio-controls {
    background: white;
    padding: 15px 30px;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.05);
    display: flex;
    gap: 40px;
    align-items: center;
    justify-content: center;
    z-index: 2001;
    /* Above workspace */
}

.control-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.control-group label {
    font-size: 1.2rem;
    /* Larger */
    font-weight: 700;
    color: #333;
    /* Darker */
    text-transform: uppercase;
}

#studio-scale-slider {
    width: 150px;
    cursor: pointer;
}

#studio-color-picker {
    display: flex;
    gap: 8px;
}

#studio-proceed-btn {
    background: #007aff;
    color: white;
    padding: 18px 50px;
    /* Much Bigger Padding */
    border: none;
    border-radius: 40px;
    font-size: 1.4rem;
    /* Larger Text */
    font-weight: 800;
    /* Extra Bold */
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0, 122, 255, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
    margin-left: auto;
    /* Push to right */
    letter-spacing: 0.5px;
}

#studio-proceed-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 122, 255, 0.4);
}

#studio-proceed-btn:active {
    transform: translateY(0);
}

/* Mobile Tweak */
@media (max-width: 768px) {
    .studio-controls {
        flex-direction: column;
        gap: 15px;
        padding: 15px;
    }

    #studio-proceed-btn {
        width: 100%;
        margin-left: 0;
    }
}

/* Target only iPads and Tablets (Up to iPad Pro 12.9) */
@media only screen and (min-device-width: 768px) and (max-device-width: 1400px) {

    .bottom-nav-container,
    #footer-actions {
        /* Lift the buttons specifically for iPad Safe Area */
        bottom: 40px !important;
        z-index: 9999 !important;
        display: flex !important;
        padding-bottom: env(safe-area-inset-bottom);
    }

    .extras-container {
        /* Move Extras to Top Right on iPad */
        position: absolute !important;
        top: 20px !important;
        right: 20px !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        z-index: 9999 !important;
        display: flex !important;
        flex-direction: row;
        gap: 10px;
    }

    /* Prevent buttons from overlapping or wrapping */
    .bottom-nav-container button {
        transform: scale(0.85);
        margin: 0 5px;
    }
}

/* A3 Stencil Guide for Shirt Mode */
#artboard-guide {
    width: 1190px;
    /* A3 relative scale */
    height: 1684px;
    border: 2px dashed rgba(255, 255, 255, 0.5);
    /* Lighter dash for visibility on dark bg */
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.75);
    /* Darker stencil effect */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    /* Lets you draw 'through' it */
    z-index: 10;
    display: none;
    /* Hidden by default */
}

/* === PREMIUM STABILIZATION SLIDER === */
.slider-minimal {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 2px;
    background: rgba(255, 255, 255, 0.15);
    outline: none;
    border-radius: 2px;
    transition: background 0.2s;
}

.slider-minimal:hover {
    background: rgba(255, 255, 255, 0.25);
}

.slider-minimal::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: linear-gradient(135deg, #70a1ff, #a29bfe);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(112, 161, 255, 0.4);
    transition: transform 0.2s;
}

.slider-minimal::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 3px 12px rgba(112, 161, 255, 0.6);
}

.slider-minimal::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: linear-gradient(135deg, #70a1ff, #a29bfe);
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 8px rgba(112, 161, 255, 0.4);
}

.value-display {
    display: inline-block;
    min-width: 20px;
    padding: 2px 6px;
    background: rgba(112, 161, 255, 0.15);
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #70a1ff;
    text-align: center;
    margin-left: 4px;
}

/* LIGHTBOX INTERACTIVE MODE */

/* By default, the layer ignores clicks (so you can draw) */
#lightbox-layer {
    pointer-events: none;
}

/* When Unlocked: Enable clicks on the image itself */
#lightbox-image.unlocked {
    pointer-events: auto !important;
    cursor: grab;
    border: 2px dashed #70a1ff;
    /* Visual cue that it's editable */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    transition: box-shadow 0.2s;
}

#lightbox-image.unlocked:active {
    cursor: grabbing;
}

/* NETWORK STATUS WIDGET */
#net-status-widget {
    position: fixed;
    top: 24px;
    left: 160px;
    /* Next to Users Online */
    width: 32px;
    height: 32px;
    cursor: pointer;
    z-index: 2100;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
    transition: transform 0.1s;
}

#net-status-widget:active {
    transform: scale(0.9);
}

#net-stats-panel {
    position: fixed;
    top: 70px;
    left: 20px;
    width: 200px;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    padding: 15px;
    border-radius: 12px;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 2100;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    font-family: monospace;
    font-size: 0.85rem;
}

#net-stats-panel h4 {
    margin: 0 0 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 5px;
    color: #70a1ff;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.load-bar-bg {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    margin-top: 4px;
    border-radius: 2px;
    overflow: hidden;
}

.load-bar-fill {
    height: 100%;
    width: 0%;
    background: #4CAF50;
    transition: width 0.5s, background 0.5s;
}

/* NUCLEAR OPTION: Force Hide the Old Modal */
#custom-design-modal {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: -9999 !important;
}

/* NUCLEAR KILL SWITCH */
#custom-design-modal,
.modal[id*="custom-design"],
div[id="custom-design-modal"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    position: absolute !important;
    z-index: -9999 !important;
    left: -9999px !important;
}

/* Shirt Mode Logo Controls */
#shirt-logo-controls {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.8);
    padding: 20px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 2500;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

#shirt-logo-controls button {
    width: 100%;
    padding: 10px;
    background: #e67e22;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

#shirt-logo-controls label {
    color: white;
    font-size: 12px;
    margin-bottom: 5px;
    display: block;
}

#shirt-logo-layer {
    position: absolute;
    cursor: default;
    user-select: none;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 100%;
    pointer-events: none;
    /* Default: Locked (Pass through) */
}

/* User requested .logo-active container concept */
/* Assuming .logo-active is added to #shirt-container or parent */
.logo-active #shirt-logo-layer {
    pointer-events: auto !important;
    cursor: move;
    outline: 2px dashed #e67e22;
}

#shirt-logo-layer:active {
    cursor: grabbing;
}

/* --- GLOBAL VAULT MASTER STYLES (ID BASED) --- */

/* 1. The Full Screen Container */
#global-vault-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #0d0d0d;
    /* Dark Background */
    z-index: 99999;
    /* Always on top */

    display: none;
    /* <--- CRITICAL: HIDES IT BY DEFAULT */

    justify-content: center;
    align-items: center;
    font-family: sans-serif;
}

/* 2. The Big Toolbar */
.conveyor-toolbar {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);

    background: rgba(0, 0, 0, 0.95);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 60px;
    padding: 15px 40px;
    gap: 30px;

    display: flex;
    align-items: center;
    white-space: nowrap;
    z-index: 100001;
    /* Above the track */
    backdrop-filter: blur(10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
}

/* 3. Toolbar Buttons */
.conveyor-toolbar button {
    background: transparent;
    color: white;
    border: 2px solid transparent;
    padding: 12px 25px;
    font-size: 1.1rem;
    cursor: pointer;
    border-radius: 30px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
}

.conveyor-toolbar button:hover {
    background: rgba(255, 255, 255, 0.15);
}

.conveyor-toolbar button.active-tool {
    background: #e17055;
    border-color: #e17055;
    color: white;
    transform: scale(1.05);
}

/* 4. The Scrolling Track */
.conveyor-track {
    width: 100%;
    max-width: 1400px;
    height: 100%;
    overflow-y: scroll;
    padding-top: 50vh;
    padding-bottom: 50vh;
    scrollbar-width: none;
}

.conveyor-track::-webkit-scrollbar {
    display: none;
}

/* 5. The Images */
.conveyor-item {
    display: block;
    width: 85%;
    margin: 60px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
    transition: transform 0.3s;
    cursor: crosshair;
    background: #fff;
}

.conveyor-item:hover {
    border-color: #70a1ff;
    transform: scale(1.05);
}

/* 6. Cutting Layer */
#cutting-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 100000;
}

/* Lightbox & Toolbar Optimization */
.controls {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
}

/* Prevent buttons from crushing */
.controls button,
.control-group button,
.actions-group button {
    min-width: 30px;
    flex-shrink: 0 !important;
}

#lightbox-controls {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
}

#lightbox-controls input[type='range'] {
    max-width: 50px;
}

#lightbox-controls button {
    padding: 1px 4px;
    font-size: 11px;
}

/* --- APP UI REFACTOR --- */

.top-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* Command Bar Styles (Compact Text) */
/* Glassmorphism for Top Bar and Dock */
.top-bar,
.dock,
#tool-palette {
    /* Dark Glass Effect */
    background: rgba(20, 20, 20, 0.6) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Make labels text white */
.top-bar label,
.top-bar span {
    color: white;
    font-weight: 500;
    font-size: 14px;
    margin-right: 8px;
}

/* Command Bar Styles (Compact Text) */
.dock {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    /* COMPACT FIX: Use fit-content so it doesn't stretch */
    width: fit-content;
    min-width: auto;
    max-width: 95vw;

    display: flex;
    gap: 12px;
    padding: 10px 20px;

    /* Background removed (handled by glass class) */
    border-radius: 16px;
    z-index: 1000;

}

/* Remove the massive gaps */
.dock-left,
.dock-right {
    display: flex;
    gap: 8px;
}

.dock-center {
    display: flex;
    justify-content: center;
}

/* Palette Grid Fix */
#tool-palette {
    position: absolute;
    bottom: 75px;
    /* Position above dock */
    left: 50%;
    transform: translateX(-50%);
    background: rgba(30, 30, 30, 0.95);
    backdrop-filter: blur(10px);
    padding: 15px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);

    /* 3 Text Columns */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    width: 300px;
    z-index: 1001;
}

/* Text Button Styling */
.tool-btn {
    background: #333;
    /* High Contrast BG */
    /* High Contrast BG */
    border: 1px solid #444;
    border-radius: 6px;
    padding: 8px 16px;
    font-family: sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: white;
    /* High Contrast Text */
    cursor: pointer;
    white-space: nowrap;
    /* Prevent text wrapping */
    width: 100%;
    /* Fill grid cell */
    text-align: center;
}

.tool-btn:hover {
    background: #555;
    /* Hover Effect */
}

.tool-btn.active {
    background: #007bff;
    /* Active State (Blue) */
    color: white;
    border-color: #007bff;
}

/* Updated Button Styles for Command Bar */
.dock button {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    transition: transform 0.2s;
    padding: 5px;
    border-radius: 8px;
}

.dock button:hover {
    transform: scale(1.1);
    background: rgba(0, 0, 0, 0.05);
}

/* Main Trigger Button Style */
#tools-trigger {
    font-size: 1rem;
    font-weight: bold;
    background: #007bff;
    color: white;
    padding: 10px 20px;
    border-radius: 20px;
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3);
}

#tools-trigger:hover {
    background: #0056b3;
}

.corner-action {
    position: fixed;
    z-index: 1000;
}

.corner-action.top-right {
    top: 20px;
    right: 20px;
}

.corner-action.bottom-right {
    bottom: 20px;
    right: 20px;
}

.corner-action button {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: none;
    background: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    font-size: 20px;
    cursor: pointer;
    transition: transform 0.2s;
    display: flex;
    /* Centering fix */
    align-items: center;
    justify-content: center;
}

.corner-action button:hover {
    transform: scale(1.1);
    background: #f8f8f8;
}

#size {
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: #e0e0e0;
    border-radius: 2px;
}

#size::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #333;
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.top-bar button {
    background: transparent;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: background 0.2s;
}

.top-bar button:hover {
    background: rgba(0, 0, 0, 0.05);
}

/* Move Extras Container (Shirt/Private btns) to the left */
.extras-container {
    position: fixed;
    top: 15px;
    /* Aligned with Top Bar */
    right: 90px;
    /* Moved ~2cm left to make room for Info button */
    z-index: 10001;
    /* Above Top Bar */
    display: flex;
    gap: 10px;
}

/* Ensure the Info button stays in the far corner */
/* Create a container for system status items */
/* Create a container for system status items */
.status-bar-left {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 10002;

    /* FLEXBOX ALIGNMENT MAGIC */
    display: flex;
    align-items: center;
    /* This forces everything to the exact middle line */
    justify-content: flex-start;
    gap: 12px;
    height: 40px;
    /* Fixed height ensures stability */

    /* Glass Look */
    background: rgba(20, 20, 20, 0.6);
    backdrop-filter: blur(12px);
    padding: 0 16px;
    /* Horizontal padding only */
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
}

/* Text Styling */
.online-group {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: sans-serif;
    font-size: 13px;
}

.online-group .label {
    color: #aaa;
    /* Slightly dimmer label */
    font-weight: 400;
}

#count-display {
    color: #fff;
    font-weight: 700;
}

/* The Vertical Separator Line */
.status-bar-left .separator {
    width: 1px;
    height: 16px;
    background: rgba(255, 255, 255, 0.2);
}

/* Network Widget Alignment Fix */
#net-status-widget {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    /* Match container */
    margin: 0;
    padding: 0;
    cursor: pointer;
}

/* Info Button Styling */
#help-btn {
    background: rgba(255, 255, 255, 0.1) !important;
    border: none;
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-family: serif;
    font-style: italic;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

#help-btn:hover {
    background: rgba(255, 255, 255, 0.2) !important;
}

/* Bottom Left Actions */
.bottom-left-actions {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 1000;
    display: flex;
    gap: 10px;
    /* Space between buttons */
}

/* --- CLEAN FIX FOR BOTTOM LEFT BUTTONS --- */

.bottom-left-actions {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 99999 !important;
    /* Force to be on top of everything */
    pointer-events: auto;
    /* Ensure clicks register */
    display: flex;
    gap: 10px;
}

/* Style the buttons (Glassy look) */
.action-btn {
    background: rgba(20, 20, 20, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    padding: 10px 16px;
    border-radius: 12px;
    font-family: sans-serif;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.2s;
}

.action-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}