:root {
    --dark-900: oklch(15% 0.01 260);
    --dark-800: oklch(20% 0.01 260);
    --dark-700: oklch(25% 0.015 260);
    --dark-600: oklch(30% 0.02 260);
    --accent: oklch(70% 0.15 280);
    --accent-hover: oklch(75% 0.17 280);
    --glass-bg: oklch(20% 0.01 260 / 0.7);
    --glass-border: oklch(40% 0.02 260 / 0.3);
}

body {
    background: linear-gradient(135deg, var(--dark-900) 0%, oklch(12% 0.02 280) 100%);
    min-height: 100vh;
}

.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
}

.glass-subtle {
    background: oklch(18% 0.01 260 / 0.5);
    backdrop-filter: blur(10px);
    border: 1px solid oklch(35% 0.02 260 / 0.2);
}

.btn-primary {
    background: linear-gradient(135deg, var(--accent) 0%, oklch(65% 0.18 300) 100%);
    transition: all 0.3s ease;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 40px oklch(70% 0.15 280 / 0.3);
}

.btn-primary:active {
    transform: translateY(0);
}

.color-swatch {
    transition: all 0.2s ease;
    cursor: pointer;
}

.color-swatch:hover {
    transform: scale(1.1);
}

.color-swatch.active {
    ring: 3px solid white;
    transform: scale(1.15);
}

#tshirtPhoto {
    filter: drop-shadow(0 8px 24px oklch(0% 0 0 / 0.15));
}

.preview-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
}

.print-zone {
    stroke-dasharray: 8 4;
    animation: dash 20s linear infinite;
}

@keyframes dash {
    to { stroke-dashoffset: -100; }
}

.loading-spinner {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.fade-in {
    animation: fadeIn 0.5s ease forwards;
}

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

.history-item {
    transition: all 0.3s ease;
}

.history-item:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 30px oklch(0% 0 0 / 0.3);
}

textarea {
    resize: none;
}

.api-modal {
    animation: slideIn 0.3s ease forwards;
}

@keyframes slideIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--dark-800);
}

::-webkit-scrollbar-thumb {
    background: var(--dark-600);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: oklch(40% 0.02 260);
}

/* Side toggle */
.side-toggle {
    transition: all 0.3s ease;
}

.side-toggle.active {
    background: linear-gradient(135deg, var(--accent) 0%, oklch(65% 0.18 300) 100%);
}

/* SVG layer interactions */
#designLayers image,
#designLayers text {
    cursor: move;
}

#designLayers image:hover,
#designLayers text:hover {
    filter: drop-shadow(0 0 4px oklch(70% 0.15 280 / 0.6));
}

.selection-handle {
    cursor: nwse-resize;
}

.zone-option {
    transition: all 0.3s ease;
    color: oklch(60% 0.02 260);
}

.zone-option:hover {
    color: white;
}

.zone-option.active {
    background: linear-gradient(135deg, var(--accent) 0%, oklch(65% 0.18 300) 100%);
    color: white;
}

#bgRemoveBtn.processing {
    opacity: 0.7;
    pointer-events: none;
}

#eraserToggleBtn.active {
    background: oklch(40% 0.08 280) !important;
}

.eraser-cursor {
    cursor: crosshair !important;
}

.eraser-cursor image, .eraser-cursor rect, .eraser-cursor text {
    cursor: crosshair !important;
}

/* Eraser brush preview circle */
#eraserBrush {
    pointer-events: none;
}

/* Layers strip */
.layers-strip {
    width: 160px;
    flex-shrink: 0;
    border-right: 1px solid oklch(30% 0.02 260 / 0.4);
}

.layer-strip-item {
    cursor: grab;
    transition: all 0.15s ease;
    user-select: none;
}

.layer-strip-item:active {
    cursor: grabbing;
}

.layer-strip-item:hover {
    background: oklch(25% 0.015 260 / 0.8);
}

.layer-strip-item.selected {
    background: oklch(40% 0.05 280 / 0.15);
    border-color: var(--accent) !important;
}

.layer-strip-item.drag-over {
    border-top: 2px solid var(--accent);
}

.layer-strip-item.dragging {
    opacity: 0.4;
}

.layer-strip-item .delete-btn {
    opacity: 0;
    transition: opacity 0.15s;
}

.layer-strip-item:hover .delete-btn {
    opacity: 1;
}

/* Auth styles */
.auth-modal {
    animation: slideIn 0.3s ease forwards;
}

.auth-tab {
    transition: all 0.3s ease;
    color: oklch(60% 0.02 260);
}

.auth-tab.active {
    color: white;
    border-bottom: 2px solid var(--accent);
}

/* Image Editor */
.editor-modal {
    animation: slideIn 0.3s ease forwards;
}

#editorCanvas {
    transition: border-radius 0.3s ease;
}

.editor-draw-cursor {
    cursor: crosshair !important;
}

#editorPaintBtn.active,
#editorEraserBtn.active {
    background: linear-gradient(135deg, oklch(55% 0.15 280) 0%, oklch(50% 0.18 310) 100%) !important;
}