:root {
    /* Premium Light Theme Palette */
    --bg-primary: #ffffff;
    --bg-secondary: #f1f5f9;
    /* Slate 100 - complementary darker white */
    --bg-glass: #f1f5f9;
    /* Changed to Opaque Slate 100 for clear contrast against white */
    --text-primary: #0f172a;
    /* Slate 900 */
    --text-secondary: #64748b;
    /* Slate 500 */
    --accent-primary: #3b82f6;
    --accent-hover: #2563eb;
    --border-color: #cbd5e1;
    /* Slate 300 - stronger border */
    --shadow-sm: 0 4px 10px rgba(0, 0, 0, 0.1);
    /* Slightly stronger shadow */
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --radius-md: 12px;
    --radius-lg: 16px;
    --font-main: 'Inter', system-ui, -apple-system, sans-serif;
}

body.dark-mode {
    --bg-primary: #0f172a;
    /* Slate 900 */
    --bg-secondary: #1e293b;
    /* Slate 800 - Base for panels (will be lightened slightly via opacity or specific color if needed, but Slate 800 is standard dark card) */
    /* Let's actually make bg-secondary lighter as requested: Slate 800 is standard, maybe Slate 750? */
    /* User said "too dark", so let's try Slate 700? */
    /* Actually better: keep bg-secondary as Slate 800 for buttons, but make panels slightly lighter */
    --panel-bg-dark: #1e293b;

    --text-primary: #f8fafc;
    /* Slate 50 */
    --text-secondary: #cbd5e1;
    /* Slate 300 - Lighter text for better contrast */
    --border-color: #334155;
    /* Slate 700 */
    --shadow-sm: 0 4px 10px rgba(0, 0, 0, 0.5);
}

/* Dark Mode Overrides */
/* Dark Mode Overrides */
body.dark-mode .panel,
body.dark-mode .glass,
body.dark-mode .canvas-area {
    background: #1e293b !important;
    /* Slate 800 - Base for panels */
    border-color: var(--border-color) !important;
    color: var(--text-primary);
}

/* Interactive Elements (Buttons, Inputs): Lighter than panel */
body.dark-mode .action-row,
body.dark-mode .code-box,
body.dark-mode #palette-name,
body.dark-mode .input-group input,
body.dark-mode .btn-icon,
body.dark-mode .btn-sidebar-action,
body.dark-mode .upload-btn.danger {
    background: #334155 !important;
    /* Slate 700 - Lighter than panel */
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

body.dark-mode .action-row:hover,
body.dark-mode .btn-icon:hover,
body.dark-mode .btn-sidebar-action:hover {
    background: #475569 !important;
    /* Slate 600 - Hover state */
    border-color: var(--accent-primary) !important;
    color: white !important;
}

/* Download Button Dark Mode */
body.dark-mode .btn-download {
    background: #334155 !important;
    /* Slate 700 - Consistent with other buttons */
    border-color: var(--border-color) !important;
    color: var(--text-primary);
}

body.dark-mode .btn-download:hover {
    background: var(--accent-primary) !important;
    color: white;
}

body.dark-mode .btn-icon:hover,
body.dark-mode .btn-sidebar-action:hover {
    background: var(--accent-primary) !important;
    color: white;
}

body.dark-mode .canvas-area {
    border: 2px solid var(--border-color) !important;
}

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

/* Global Scale Down */
html {
    font-size: 15px;
    /* Increased slightly (was 14px) */
}

body {
    font-family: var(--font-main);
    background-color: var(--bg-primary);
    /* White background behind the fade */
    color: var(--text-primary);
    min-height: 100vh;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    /* Force vertical scrollbar always visible to prevent jumpiness */
}

/* Glassmorphism Utilities */
.glass {
    background: #f8fafc;
    /* Opaque Slate 50 to remove glare/transparency */
    backdrop-filter: none;
    /* Remove light/glass effect */
    border: 2px solid #94a3b8;
    /* Darker, thicker border (Slate 400) for distinct edges */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

/* Background Animation Wrapper */
/* Curtain Effect with Custom Palette */
#background-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    display: flex;
    overflow: hidden;



    opacity: 0.8;
    /* Fade from middle downwards */
    -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
    /* Custom Palette: #009B9E, #42B7B9, #A7D3D4, #F1F1F1, #E4C1D9, #D691C1, #C75DAB */
    background: linear-gradient(to right,
            #009B9E 0%, #009B9E 14.28%,
            #42B7B9 14.28%, #42B7B9 28.57%,
            #A7D3D4 28.57%, #A7D3D4 42.85%,
            #F1F1F1 42.85%, #F1F1F1 57.14%,
            #E4C1D9 57.14%, #E4C1D9 71.42%,
            #D691C1 71.42%, #D691C1 85.71%,
            #C75DAB 85.71%, #C75DAB 100%);
}

/* Curtain Folds Overlay */
#background-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Repeating gradient for texture folds */
    background: linear-gradient(to right,
            rgba(255, 255, 255, 0.2) 0%,
            rgba(0, 0, 0, 0.15) 100%);
    pointer-events: none;
    box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.2);
    background-size: 7.14% 100%;
    /* ~2 folds per color band (14.28% / 2) */
}

/* Remove animations */
@keyframes sway {
    0% {}

    100% {}
}

@keyframes vertical-sway {
    0% {}

    100% {}
}

@keyframes flow {
    0% {}

    100% {}
}

.bg-overlay {
    display: none;
}

.container {
    max-width: 1200px;
    /* Reduced for tighter centering */
    margin: 0 auto;
    padding: 0 2rem;
    width: 100%;
}

/* Header */
header {
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
    position: sticky;
    /* Keep header at top */
    top: 0;
    z-index: 50;
}

.logo {
    font-size: 1.5rem;
    font-weight: 800;
    background: linear-gradient(to right, #60a5fa, #a855f7);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
}

/* Main Layout */
/* Using Flexbox to center vertical content if it's small, but allow scroll if tall */
/* Main Layout */
/* Using Flexbox to center vertical content if it's small, but allow scroll if tall */
main {
    flex: 1;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    /* Vertical layout as requested */
    align-items: center;
    /* Stretch to match heights */
    /* Rigid Layout: We explicitly set pixel heights below */
    justify-content: center;
    /* Center horizontally */
    gap: 1.5rem;
    padding: 2rem;
    /* Reduced top padding */
    width: 100%;
    max-width: 950px;
    /* Reduced from 1200px to reveal background */
    margin: 2rem auto;
    /* Add vertical spacing to float it */
    min-height: auto;
    /* Allow it to be shorter than screen */
}

/* Responsive Scaling for Laptops */
@media (max-height: 800px) and (min-width: 900px) {
    main {
        transform: scale(0.85);
        /* Scale down the whole interface to fit vertical space */
        transform-origin: top center;
        margin-top: 1rem;
    }
}

/* ... (omitting irrelevant parts) ... */

/* Canvas AreaWrapper to control width */
.canvas-wrapper {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: auto;
    /* Let content dictate height (Canvas + Palettes) */
    gap: 0.75rem;
    /* Reduced Gap to bring panels closer */
    align-self: flex-start;
    margin-top: 0 !important;
}

/* ... (omitting irrelevant parts) ... */

.panel {
    background: #f8fafc;
    /* Opaque off-white to reduce brightness */
    border: 2px solid #94a3b8;
    /* Added strong border */
    box-shadow: var(--shadow-md);
    padding: 1rem;
    transition: transform 0.2s;
    /* Removed height: 100% default to avoid overflow in stack contexts */
    display: flex;
    flex-direction: column;
}

/* Specific: Sidebar Panel should fill sidebar */
aside .panel {
    height: 100%;
    overflow-y: hidden;
}

/* Specific: Palette Panel in wrapper should fill remaining space */
.canvas-wrapper .panel {
    flex: 1;
    /* Automatically fills the space: 580 - 360 - 12 = ~208px available */
    min-height: 0;
    /* Important for scroll if needed */
    flex-basis: 0;
    /* Force equal sizing if multiple, but here acts as fill */
    overflow: hidden;
    justify-content: space-between;
    /* Button at bottom, content top */
}

.canvas-area {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    border: 2px solid #94a3b8;
    /* Matched solid border style */
    transition: all 0.3s ease;
    padding: 1rem;
    height: 360px;
    /* Reduced to 360px to allow Palette to move UP */
    flex: none;
    /* Never grow or shrink */
    width: 100%;
    margin: 0 auto;
}

.canvas-area.drag-active {
    border-color: var(--accent-primary);
    background: rgba(59, 130, 246, 0.1);
}

canvas {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    height: auto;
    box-shadow: var(--shadow-lg);
    cursor: crosshair;
}

/* Sidebar */
aside {
    width: 240px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    /* gap removed; single panel fills it */
    height: 360px;
    /* Exact match to Canvas Area */
    /* Stretch with main content */
    align-self: flex-start;
    /* Ensure top alignment */
    margin-top: 0 !important;
    /* Force no top margin */
}

@media (max-width: 900px) {
    aside {
        width: 100%;
        margin-top: 0;
    }
}

.panel {
    padding: 0.75rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.color-preview {
    width: 100%;
    height: 40px;
    /* Reduced to 40px for maximum compactness */
    border-radius: 8px;
    margin-bottom: 0.5rem;
    border: 1px solid var(--border-color);
    transition: background-color 0.2s, transform 0.2s;
}

.btn-sidebar-action {
    width: 100%;
    margin-top: 0.5rem;
    /* Reduced margin */
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
}

/* Code Box & Inputs */
.input-group {
    position: relative;
    margin-bottom: 0.5rem;
    /* Reduced spacer */
}

.input-group label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 0.1rem;
    /* Compact label */
}

.code-box-wrapper {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.code-box {
    background: rgba(0, 0, 0, 0.05);
    /* Lighter bg for code box in light theme */
    padding: 0.3rem 0.5rem;
    /* Reduced padding */
    /* Reduced padding */
    border-radius: 8px;
    font-family: monospace;
    font-size: 0.85rem;
    /* Reduced font size */
    flex: 1;
    border: 1px solid var(--border-color);
    transition: border-color 0.2s;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 32px;
    /* Fixed smaller height */
    display: flex;
    align-items: center;
}

/* Copy Icon in Input Group */
.btn-copy-icon {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    width: 32px;
    /* Smaller button */
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-copy-icon:hover {
    border-color: var(--accent-primary);
    color: var(--text-primary);
    background: rgba(59, 130, 246, 0.1);
}


.upload-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    color: var(--accent-primary);
    border: 2px solid var(--accent-primary);
    padding: 0.4rem 1rem;
    /* Reduced padding */
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    font-size: 0.9rem;
    /* Reduced font size */
    box-shadow: 0 2px 4px -1px rgba(99, 102, 241, 0.1);
}

.upload-btn:hover {
    background: var(--accent-primary);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px -2px rgba(99, 102, 241, 0.3);
}

.upload-btn.danger {
    background: #ffffff;
    border-color: #ef4444;
    color: #ef4444;
    box-shadow: none;
}

.upload-btn.danger:hover {
    background: #ef4444;
    color: white;
    box-shadow: 0 4px 12px -2px rgba(239, 68, 68, 0.3);
}

/* Magnifier */
.magnifier {
    position: absolute;
    width: 140px;
    /* Slightly larger */
    height: 140px;
    border-radius: 16px;
    /* Rounded square */
    border: 2px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
    /* Deeper shadow */
    pointer-events: none;
    display: none;
    overflow: hidden;
    z-index: 100;
    backdrop-filter: blur(4px);
    background: rgba(15, 23, 42, 0.2);
    /* Darkish tint background */
}

/* Ensure crisp pixels inside magnifier */
.magnifier canvas {
    image-rendering: pixelated;
    width: 100%;
    height: 100%;
}

/* Palette */
.palette-container {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    /* Reduced gap */
}

.palette-row {
    display: flex;
    gap: 0.25rem;
    /* Reduced gap */
    overflow-x: auto;
    padding: 0.25rem 0;
    /* Minimal padding */
    padding-top: 0.25rem;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

.palette-swatch {
    min-width: 36px;
    /* Smaller swatches */
    height: 36px;
    border-radius: 6px;
    /* Smaller radius */
    cursor: pointer;
    border: 1px solid var(--border-color);
    transition: transform 0.2s, box-shadow 0.2s;
    flex-shrink: 0;
}

.palette-swatch:hover {
    transform: translateY(-2px);
    /* Smaller lift */
    box-shadow: var(--shadow-lg);
    z-index: 10;
}

.palette-actions {
    margin-top: 0.25rem;
    /* Tighter margin */
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.btn-download {
    background: #ffffff;
    color: var(--accent-primary);
    border: 2px solid var(--accent-primary);
    padding: 0.25rem 0.75rem;
    /* Compact padding */
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    /* Smaller font */
    height: 32px;
    /* Fixed height for button */
    box-shadow: 0 2px 4px -1px rgba(99, 102, 241, 0.1);
}

.btn-download:hover {
    background: var(--accent-primary);
    /* Fill on hover */
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px -2px rgba(99, 102, 241, 0.3);
    /* Glow effect */
}

.btn-download svg {
    opacity: 1;
}

.btn-icon {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    /* Slightly rounded square like reference */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.btn-icon:hover {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: white;
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.btn-icon.danger:hover {
    background: #ef4444;
    /* Red for delete */
    border-color: #ef4444;
}

.btn-icon svg {
    pointer-events: none;
    /* Prevent clicks on icon interfering */
}

.btn-secondary {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
    flex: 1;
}

.btn-secondary:hover {
    border-color: var(--accent-primary);
    color: var(--text-primary);
    background: rgba(59, 130, 246, 0.1);
}

.btn-sidebar-action {
    width: 100%;
    margin-top: 1rem;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-weight: 600;
    padding: 0.6rem 1rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-sidebar-action:hover {
    background: white;
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
}


/* Palette Controls & Animations */
.palette-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.palette-controls {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

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

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

@keyframes scaleOut {
    from {
        transform: scale(1);
        opacity: 1;
    }

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

.swatch-enter {
    animation: scaleIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.swatch-exit {
    animation: scaleOut 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
}

/* Responsive */
.empty-state {
    text-align: center;
    color: var(--text-secondary);
}

.empty-state svg {
    width: 36px;
    /* Reduced from 48px */
    height: 36px;
    margin-bottom: 0.75rem;
    opacity: 0.5;
}

.empty-state h3 {
    font-size: 1rem;
    /* Reduced size */
    margin-bottom: 0.25rem;
}

.empty-state p {
    font-size: 0.85rem;
}

/* Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
}

.modal-content {
    width: 100%;
    max-width: 500px;
    background: white;
    /* Force white for modal content in light theme */
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    animation: scaleIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.panel {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 1.5rem;
    transition: transform 0.2s;
    /* height: 100%; removed to support flex contexts */
    display: flex;
    /* To manage internal spacing if needed */
    flex-direction: column;
}

/* Specific: Sidebar Panel should fill sidebar */
aside .panel {
    height: 100%;
}

/* Specific: Palette Panel in wrapper should fill remaining space */
.canvas-wrapper .panel {
    flex: 1;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.modal-header h3 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--text-primary);
}

.saved-list {
    max-height: 300px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.saved-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.saved-info {
    flex: 1;
}

.saved-name {
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
    color: var(--text-primary);
}

.saved-preview {
    display: flex;
    gap: 2px;
}

/* Designs Gallery Grid */
.designs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    /* Reduced from 180px */
    gap: 0.75rem;
    align-items: start;
    align-content: start;
}

.design-card {
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 10px;
    /* Slightly tighter radius */
    overflow: hidden;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    height: auto;
    align-self: start;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
}

.design-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025);
    border-color: var(--accent-primary);
}

/* Folder Tabs Style - Compact */
.folder-card {
    min-height: 36px !important;
    height: 36px !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 0.75rem !important;
    gap: 0.5rem !important;
    border-radius: 6px !important;
    background: #f8fafc !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: none !important;
}

.folder-card svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.folder-card:hover {
    background: #ffffff !important;
    border-color: var(--accent-primary) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
    transform: translateY(-1px) !important;
}

.design-preview-area {
    height: 40px;
    /* Reduced from 48px */
    width: 100%;
    display: flex;
    padding: 4px 4px 0 4px;
    gap: 3px;
    background: transparent;
}

.design-preview-strip {
    flex: 1;
    height: 100%;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.design-preview-strip.empty {
    background: transparent;
    box-shadow: none;
    border: none;
}

.design-info {
    padding: 0.5rem;
    /* Reduced from 0.6rem 0.75rem */
    border-top: 1px solid rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 1;
}

.design-name {
    font-weight: 600;
    font-size: 0.85rem;
    /* Reduced from 0.95rem */
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.design-actions {
    display: flex;
    gap: 2px;
    /* Tiny gap */
    justify-content: space-between;
    /* Spread them out evenly */
    margin-top: auto;
}


/* --- Folder System Styles --- */

#folder-breadcrumbs span:hover {
    text-decoration: underline;
}

/* .folder-card rules are handled in previous section */

/* Danger variant reverted to outline as per general reversion request */
/* The user asked to revert "iconos de descargar" but generally disapproved of the solid buttons */
/* Keeping consistent outline style for danger button too to avoid mixing */
/* .upload-btn definition above handles base outline */



.btn-card {
    flex: none;
    width: 22px;
    /* Reduced from 24px */
    height: 22px;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    transition: all 0.2s;
    padding: 0;
}

.btn-card svg {
    width: 14px;
    /* Force smaller icons */
    height: 14px;
}

.btn-card:hover {
    background: #f1f5f9;
    color: var(--accent-primary);
}

.btn-card.danger:hover {
    background: #fee2e2;
    color: #ef4444;
    border-color: #ef4444;
}

.mini-swatch {
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

.saved-actions {
    display: flex;
    gap: 0.5rem;
}

/* Preview Modal Swatches */
.preview-swatch {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    transition: transform 0.2s;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.preview-swatch:hover {
    transform: scale(1.05);
    z-index: 10;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

.preview-swatch-code {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
    font-size: 0.75rem;
    padding: 4px;
    text-align: center;
    font-family: monospace;
    width: 100%;
    cursor: pointer;
}

/* Fix Preview Download Button Width */
#btn-preview-download {
    flex: none;
    width: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* Version Badge */
.version-badge {
    background: rgba(255, 255, 255, 0.2);
    padding: 0.1rem 0.5rem;
    border-radius: 99px;
    font-size: 0.7rem;
    margin-left: 0.5rem;
    border: 1px solid var(--border-color);
    vertical-align: middle;
}

/* Side Panel (Changelog) */
.side-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 300px;
    height: 100vh;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-left: 1px solid var(--border-color);
    box-shadow: -5px 0 25px rgba(0, 0, 0, 0.1);
    z-index: 2000;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

.side-panel.active {
    transform: translateX(0);
}

.side-panel .panel-header {
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.side-panel .panel-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--text-primary);
}

.side-panel .panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}

.version-item {
    margin-bottom: 1.5rem;
}

.version-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.version-number {
    font-weight: 700;
    color: var(--accent-primary);
}

.version-date {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.version-changes {
    padding-left: 1.2rem;
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.version-changes li {
    margin-bottom: 0.3rem;
}

/* Footer */
.app-footer {
    position: relative;
    z-index: 10;
    text-align: center;
    padding: 1rem;
    margin-top: 2rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
    border-top: none;
    background: transparent;
}

/* Custom Scrollbar for Panel */
.side-panel .panel-content::-webkit-scrollbar {
    width: 6px;
}

.side-panel .panel-content::-webkit-scrollbar-track {
    background: transparent;
}

.side-panel .panel-content::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 20px;
}

/* Palette Swatch Deletion (v1.1) */
.palette-swatch {
    position: relative;
    /* Ensure existing styles don't conflict */
}

.swatch-delete {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 18px;
    height: 18px;
    background: #ef4444;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.2s ease;
    z-index: 10;
}

.palette-swatch:hover .swatch-delete {
    opacity: 1;
    transform: scale(1);
}

/* Browser Style URL Bar (Refinement) */
.url-bar-container {
    width: 100%;
    max-width: 420px;
    /* Width adjust */
    background: #ffffff;
    /* White background always */
    border: 1px solid var(--border-color);
    /* Visible border */
    border-radius: 99px;
    /* Pill shape */
    padding: 2px 3px 2px 14px;
    /* Reduced vertical padding for slim look */
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    transition: all 0.2s ease;
}

.url-bar-container:focus-within {
    border-color: var(--accent-primary);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.url-bar-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--text-primary);
    min-width: 0;
    /* Prevents flex overflow */
}

/* Go Button */
.btn-url-go {
    width: 34px;
    /* Slightly adjusted */
    height: 34px;
    border-radius: 50%;
    background: var(--accent-primary);
    border: none;
    padding: 0;
    margin: 0;
    position: relative;
    /* For absolute centering backup */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    transition: all 0.2s;
    flex-shrink: 0;
    box-shadow: 0 2px 5px rgba(59, 130, 246, 0.3);
    overflow: hidden;
    /* contain any overflows */
}

.btn-url-go:hover {
    background: var(--accent-hover);
    transform: scale(1.05);
}

.btn-url-go svg {
    stroke-width: 2.5px;
    width: 18px;
    /* Fixed size */
    height: 18px;
    display: block;
    margin: auto;
    /* Auto margin for centering */
    pointer-events: none;
    /* Ensure clicks pass to button */
}

/* Mini Action Button (Screen Capture) */
.btn-mini-action {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    /* Tighter gap */
    background: rgba(0, 0, 0, 0.02);
    /* Very subtle background */
    border: 1px solid transparent;
    color: var(--text-secondary);
    padding: 0.2rem 0.6rem;
    /* Smaller vertical padding */
    border-radius: 20px;
    /* Pill shape */
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    font-size: 0.75rem;
    /* Explicit small font */
}

.btn-mini-action:hover {
    background: rgba(59, 130, 246, 0.08);
    /* Blue tint on hover */
    color: var(--accent-primary);
    transform: translateY(-1px);
}

.btn-mini-action svg {
    opacity: 0.6;
    transition: opacity 0.2s;
}

/* Minimalist & Organized Upload Area (Compact) */
.empty-state {
    padding: 0.5rem;
    /* Reduced padding */
    text-align: center;
}

.empty-state-header {
    margin-bottom: 1rem;
    /* Reduced margin */
}

.empty-state-icon-minimal {
    width: 40px;
    /* Reduced from 48px */
    height: 40px;
    margin: 0 auto 0.5rem;
    /* Reduced margin */
    color: var(--text-tertiary);
    opacity: 0.5;
}

.empty-state-icon-minimal svg {
    width: 100%;
    height: 100%;
}

.minimal-title {
    font-size: 1rem;
    /* Slightly smaller */
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.2rem;
}

.minimal-subtitle {
    font-size: 0.85rem;
    color: var(--text-tertiary);
}

/* Action Stack */
.action-stack {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* Tighter gap */
    max-width: 380px;
    margin: 0 auto;
}

.action-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    /* Reduced gap */
    padding: 0.5rem 0.75rem;
    /* Compact padding */
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    /* Slightly tighter radius */
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: left;
    height: 50px;
    /* Compact Fixed Height */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.action-row:hover {
    border-color: var(--accent-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px -2px rgba(59, 130, 246, 0.1);
}

.action-icon {
    width: 28px;
    height: 28px;
    position: relative;
    /* Setup for absolute centering */
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border-radius: 6px;
    flex-shrink: 0;
}

.action-row:hover .action-icon {
    color: var(--accent-primary);
    background: rgba(59, 130, 246, 0.1);
}

.action-icon svg {
    width: 16px;
    height: 16px;
    /* Absolute Centering */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
}

.action-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: center;
    /* Ensure vertical center */
}

.action-title {
    font-weight: 600;
    font-size: 0.9rem;
    /* Slightly smaller */
    color: var(--text-primary);
    line-height: 1.2;
}

.action-desc {
    font-size: 0.75rem;
    /* Smaller desc */
    color: var(--text-tertiary);
    line-height: 1.2;
}

/* Integrated URL Input */
.url-input-wrapper {
    flex-grow: 1;
    display: flex;
    align-items: center;
    position: relative;
    height: 100%;
}

.url-input-wrapper input {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    font-size: 0.9rem;
    color: var(--text-primary);
    background: transparent;
    padding-right: 2.5rem;
}

.url-input-wrapper button {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: var(--bg-secondary);
    border: none;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    /* Use relative positioning for child absolute centering */
    position: absolute;
    /* Wait, 'position: absolute' is already set for the button itself relative to wrapper. 
       That serves as the anchor for the SVG's absolute positioning. 
       We just need to ensure the SVG is absolutely positioned within this button. */
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s;
    padding: 0;
}

.url-input-wrapper button:hover {
    background: var(--accent-primary);
    color: white;
}

.url-input-wrapper button.danger-hover:hover {
    background: #ef4444;
    /* Red for delete action */
    color: white;
}

.url-input-wrapper button svg {
    width: 14px;
    height: 14px;
    position: absolute;
    top: 45%;
    /* Optical correction: 45% instead of 50% */
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
}

.paste-hint {
    margin-top: 2rem;
    font-size: 0.85rem;
    color: var(--text-tertiary);
    font-family: monospace;
    opacity: 0.6;
}

/* --- v1.2 Design Manager Styles --- */

.designs-container {
    display: flex;
    flex: 1;
    overflow: hidden;
    /* Ensure container respects modal radius */
    border-radius: 0 0 12px 12px;
    /* Bottom corners if needed, or inherit */
    /* If inside a modal content with radius, we need to make sure children don't overflow */
}

/* Sidebar */
.designs-sidebar {
    width: 260px;
    background: rgba(255, 255, 255, 0.85);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    /* Fix: inherit radius on left side to match modal */
    border-top-left-radius: 12px;
    /* Assuming modal radius */
    border-bottom-left-radius: 12px;
}

.sidebar-header {
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: transparent;
}

.sidebar-header h3 {
    margin: 0;
    font-size: 1rem;
    color: var(--text-primary);
}

.btn-icon-small {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 6px;
    /* Slightly larger touch target */
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.btn-icon-small:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--accent-primary);
}

.folder-tree {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
}

/* Tree Item */
.tree-item {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.8rem;
    /* Relaxed padding */
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 500;
    transition: background 0.15s;
    user-select: none;
    margin-bottom: 2px;
}

.tree-item:hover {
    background: rgba(0, 0, 0, 0.03);
}

.tree-item.active {
    background: rgba(59, 130, 246, 0.08);
    /* Softer active state */
    color: var(--accent-primary);
    border-left: 3px solid var(--accent-primary);
    /* Highlight accent */
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.tree-toggle:hover {
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

.tree-item svg {
    margin-right: 0.6rem;
    color: #fbbf24;
}

/* Main Content */
.designs-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.5);
    /* Semi-transparent */
    position: relative;
    overflow: hidden;
    /* Fix: Ensure no extra margin pushes content down */
    margin: 0;
}

.designs-toolbar {
    padding: 0.8rem 1.2rem;
    /* Adjusted padding */
    border-bottom: 1px solid var(--border-color);
    background: white;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
    /* Fix: ensure it stays at top */
    position: sticky;
    top: 0;
    z-index: 10;
}

.btn-text {
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-secondary);
    font-weight: 600;
    /* Bolder for "Title" feel */
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0.5rem 0.8rem;
    border-radius: 6px;
    transition: all 0.2s;
}

.btn-text:hover {
    background: rgba(0, 0, 0, 0.04);
    color: var(--text-primary);
}

.search-wrapper {
    flex: 1;
    position: relative;
    max-width: 400px;
    /* Wider search */
    margin-left: 0;
}

/* Context Menu Items */
.context-item {
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-radius: 6px;
    transition: background 0.15s;
}

.context-item:hover {
    background: rgba(0, 0, 0, 0.04);
}

.context-item svg {
    color: var(--text-secondary);
}

.context-item.danger {
    color: #ef4444;
}

.context-item.danger svg {
    color: #ef4444;
}

.context-item.danger:hover {
    background: #fef2f2;
}

.context-item:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
}

.search-wrapper input {
    width: 100%;
    padding: 0.5rem 1rem 0.5rem 2.4rem;
    border-radius: 8px;
    /* Standard rounded */
    border: 1px solid var(--border-color);
    /* Visible border */
    background: var(--bg-secondary);
    font-size: 0.9rem;
    outline: none;
    transition: all 0.2s;
}

.search-wrapper input:focus {
    background: white;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Breadcrumbs */
.breadcrumbs-bar {
    padding: 0.8rem 1.2rem;
    background: transparent;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* Force Left Align */
    gap: 0.5rem;
    width: 100%;
}


/* Grid Override used in Main */
.designs-grid {
    display: flex;
    /* Flex is better for "left to right" flow without strict columns */
    flex-wrap: wrap;
    /* Allow wrapping */
    align-content: flex-start;
    justify-content: flex-start;
    /* Force Left Align */
    /* Start from left */
    gap: 1rem;
    padding: 1.5rem;
    /* More padding */
    width: 100%;
    /* Ensure grid fills container for context menu */
    flex-grow: 1;
    min-height: 100%;
    /* Fill available height */
}

/* Empty Folder State - Centered in Flex Grid */
.empty-folder-state {
    width: 100%;
    height: 100%;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--text-secondary);
    opacity: 0.8;
}

/* Ensure cards don't stretch weirdly in flex */
.design-card {
    width: 120px;
    /* Reduced size (was 200px) */
    height: 100px;
    /* Reduced size (was 160px) */
    flex-shrink: 0;
}

/* Force folder card to match design card dimensions */
.design-card.folder-card {
    width: 120px !important;
    height: 100px !important;
    min-width: 120px;
}

/* Design Card Updates */
.design-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s, box-shadow 0.2s;
    user-select: none;
    /* Make draggable easier */
    cursor: default;
}

/* Draggable State */
.design-card[draggable="true"] {
    cursor: grab;
}

.design-card[draggable="true"]:active {
    cursor: grabbing;
}

.design-card.is-dragging {
    opacity: 0.5;
    border: 2px dashed var(--accent-primary);
}

/* Drop Target Feedback (Folder Item) */
.tree-item.drag-over {
    background: rgba(59, 130, 246, 0.2);
    outline: 2px dashed var(--accent-primary);
    outline-offset: -2px;
}

/* Sidebar Header Alignment Fix */
.compact-panel-content h2 {
    margin-top: 0 !important;
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

/* New Layout Structure v1.2 */
.layout-top {
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
    width: 100%;
    justify-content: center;
    align-items: flex-start;
    /* Top align sidebar and canvas */
}

.layout-bottom {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
    margin-top: 1.5rem;
}

/* Unified Palette Styles v1.2 */
.unified-palettes {
    display: flex;
    flex-direction: column;
    gap: 0;
    /* Padding is handled by sections */
}

.palette-section {
    padding: 1.5rem;
}

.palette-divider {
    height: 1px;
    background: var(--border-color);
    width: 100%;
    opacity: 0.5;
}

/* Unified Palette Styles v1.2 Polish */
.unified-palettes {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-radius: 1.5rem;
    overflow: hidden;
}

.palette-section {
    padding: 1.5rem;
}

.header-icon-box {
    width: 36px;
    height: 36px;
    background: rgba(var(--accent-primary-rgb), 0.1);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-primary);
}

.palette-divider {
    height: 1px;
    background: linear-gradient(to right, transparent, var(--border-color), transparent);
    width: 80%;
    /* Don't span full width to differentiate from borders */
    margin: 0 auto;
    /* Center it */
    opacity: 0.6;
    display: block;
}

.palette-divider span {
    background: var(--bg-primary);
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(4px);
}

.reference-section,
.reference-section-content {
    background: rgba(0, 0, 0, 0.02);
}

@media (prefers-color-scheme: dark) {

    .reference-section,
    .reference-section-content {
        background: rgba(255, 255, 255, 0.03);
    }
}

/* Fix Sidebar Divider Height */
#designs-modal .modal-content {
    height: 80vh;
    /* Fixed height for the modal */
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    /* Remove padding to let container fill */
    overflow: hidden;
}

.designs-container {
    height: 100%;
    /* Fill available space */
    border-radius: 0;
}

/* Ensure sidebar border goes all the way down */
.designs-sidebar {
    height: 100%;
    min-height: 100%;
    background: #f9fafb;
    /* Slight contrast */
}

/* =========================================
   DARK MODE OVERRIDES - DESIGNS MODAL
   ========================================= */
body.dark-mode #designs-modal .modal-content,
body.dark-mode .designs-sidebar,
body.dark-mode .designs-toolbar,
body.dark-mode .designs-main {
    background-color: #0f172a !important;
    /* Unified Deep Dark (Slate 900) */
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

body.dark-mode .designs-sidebar {
    border-right: 1px solid var(--border-color);
}

body.dark-mode .designs-toolbar {
    border-bottom: 1px solid var(--border-color);
}

body.dark-mode .design-card,
body.dark-mode .design-card.folder-card {
    background-color: #1e293b !important;
    /* Slate 800 (Surface for cards) */
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

body.dark-mode .design-card:hover,
body.dark-mode .design-card.folder-card:hover {
    background-color: #334155 !important;
    /* Slate 700 (Hover) */
    border-color: var(--accent-primary) !important;
}

body.dark-mode .search-wrapper input {
    background-color: #1e293b !important;
    /* Slightly lighter input */
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode .btn-text,
body.dark-mode .btn-icon-small {
    color: var(--text-secondary);
}

body.dark-mode .btn-text:hover,
body.dark-mode .btn-icon-small:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

body.dark-mode #context-menu {
    background-color: #1e293b !important;
    border: 1px solid var(--border-color);
}

body.dark-mode .context-item {
    color: var(--text-primary);
}

body.dark-mode .context-item:hover {
    background-color: #334155;
}

body.dark-mode .context-item.danger:hover {
    background-color: rgba(239, 68, 68, 0.1);
}

/* --- AUTH & ADMIN SYSTEM STYLES (v1.5) --- */

/* Admin Button in Header */
.btn-admin {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(251, 191, 36, 0.1);
    /* Subtle Amber tint */
    color: #d97706;
    /* Amber 600 */
    border: 1px solid rgba(217, 119, 6, 0.3);
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-admin:hover {
    background: rgba(251, 191, 36, 0.2);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(217, 119, 6, 0.1);
}

/* Dark Mode: Admin Button */
/* Dark Mode: Admin Button */
body.dark-mode .btn-admin {
    background: rgba(217, 119, 6, 0.15) !important;
    color: #fbbf24 !important;
    /* Amber 400 */
    border-color: rgba(251, 191, 36, 0.3) !important;
}

body.dark-mode .btn-admin:hover {
    background: rgba(217, 119, 6, 0.25) !important;
    box-shadow: 0 2px 8px rgba(251, 191, 36, 0.15);
}

/* User Menu */
.user-menu {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-md);
    transition: background 0.2s;
}

.user-menu:hover {
    background: rgba(0, 0, 0, 0.03);
}

body.dark-mode .user-menu:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* Admin Table Styles */
.admin-table-wrapper {
    overflow-x: auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.admin-table th {
    text-align: left;
    padding: 1rem;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-weight: 600;
    border-bottom: 1px solid var(--border-color);
}

body.dark-mode .admin-table th {
    background: #1e293b !important;
    color: #cbd5e1 !important;
    border-color: #334155 !important;
}

.admin-table td {
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

body.dark-mode .admin-table td {
    color: #f8fafc !important;
    border-color: #334155 !important;
}

.admin-table tr:last-child td {
    border-bottom: none;
}

.admin-table tr:hover td {
    background: rgba(0, 0, 0, 0.02);
}

body.dark-mode .admin-table tr:hover td {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* Role Badges */
.badge-role {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
}

.badge-admin {
    background: #fef3c7;
    /* Amber 100 */
    color: #d97706;
    /* Amber 600 */
}

.badge-user {
    background: #e0e7ff;
    /* Indigo 100 */
    color: #4f46e5;
    /* Indigo 600 */
}

/* Dark Mode Badges */
body.dark-mode .badge-admin {
    background: rgba(217, 119, 6, 0.2) !important;
    color: #fbbf24 !important;
}

body.dark-mode .badge-user {
    background: rgba(79, 70, 229, 0.2) !important;
    color: #818cf8 !important;
}


/* FORCE AUTH MODAL VISIBILITY */
#auth-modal {
    /* Base display is managed by JS (flex/none), but we ensure it's not hidden by other rules */
    z-index: 99999 !important;
    background: rgba(15, 23, 42, 0.95);
    /* Dark background */
    backdrop-filter: blur(10px);
}



/* --- AUTHENTICATION & ADMIN STYLES --- */

/* Auth Modal */
.auth-content {
    max-width: 400px;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
}

.auth-header {
    justify-content: center;
    margin-bottom: 2rem;
    text-align: center;
}

.auth-header h2 {
    font-size: 1.75rem;
    color: var(--text-primary);
}

.auth-tabs {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 0;
}

.auth-tab {
    flex: 1;
    padding: 0.75rem;
    background: none;
    border: none;
    font-weight: 600;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    /* Overlap border */
    font-size: 1rem;
}

.auth-tab:hover {
    color: var(--text-primary);
}

.auth-tab.active {
    color: var(--accent-primary);
    border-bottom-color: var(--accent-primary);
}

.auth-input {
    width: 100%;
    padding: 0.8rem 1rem;
    font-size: 1rem;
    height: 48px;
    /* Larger touch target */
}

.auth-btn {
    width: 100%;
    margin-top: 1rem;
    padding: 0.8rem;
    font-size: 1rem;
    height: 48px;
    justify-content: center;
}

.auth-error {
    color: #ef4444;
    margin-top: 1rem;
    text-align: center;
    background: rgba(239, 68, 68, 0.1);
    padding: 0.75rem;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    display: none;
    animation: shake 0.4s cubic-bezier(.36, .07, .19, .97) both;
}

@keyframes shake {

    10%,
    90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(2px, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(4px, 0, 0);
    }
}

/* User Menu in Header */
.user-menu {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.35rem 0.75rem;
    border-radius: 12px;
    transition: background 0.2s;
    border: 1px solid transparent;
}

.user-menu:hover {
    background: rgba(0, 0, 0, 0.03);
    border-color: var(--border-color);
}

.btn-admin {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(251, 191, 36, 0.1);
    color: #d97706;
    border: 1px solid rgba(217, 119, 6, 0.3);
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-admin:hover {
    background: rgba(251, 191, 36, 0.2);
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(217, 119, 6, 0.1);
}

/* Admin Table */
.admin-content {
    max-width: 800px;
    width: 95%;
}

.admin-table-wrapper {
    overflow-x: auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.admin-table th {
    text-align: left;
    padding: 1rem;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-weight: 600;
    border-bottom: 1px solid var(--border-color);
}

.admin-table td {
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

.admin-table tr:hover td {
    background: rgba(0, 0, 0, 0.02);
}

.badge-role {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.badge-admin {
    background: rgba(251, 191, 36, 0.2);
    color: #d97706;
    border: 1px solid rgba(251, 191, 36, 0.3);
}

.badge-user {
    background: rgba(59, 130, 246, 0.1);
    color: var(--accent-primary);
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.btn-delete-user {
    color: #ef4444;
    background: transparent;
    border: 1px solid transparent;
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
    font-weight: 500;
}

.btn-delete-user:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
}

/* Dark Mode Overrides for Auth */
body.dark-mode .auth-header h2 {
    color: #f8fafc;
}

body.dark-mode .auth-tab {
    color: #94a3b8;
}

body.dark-mode .auth-tab:hover {
    color: #f8fafc;
}

body.dark-mode .auth-tab.active {
    color: #60a5fa;
    border-bottom-color: #60a5fa;
}

body.dark-mode .user-menu:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--border-color);
}

body.dark-mode .btn-admin {
    background: rgba(217, 119, 6, 0.15);
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.3);
}

body.dark-mode .btn-admin:hover {
    background: rgba(217, 119, 6, 0.25);
}

body.dark-mode .admin-table th {
    background: #0f172a;
    color: #cbd5e1;
    border-color: #334155;
}

body.dark-mode .admin-table td {
    color: #f8fafc;
    border-color: #334155;
}

body.dark-mode .admin-table tr:hover td {
    background: rgba(255, 255, 255, 0.03);
}

body.dark-mode .badge-admin {
    background: rgba(217, 119, 6, 0.2);
    color: #fbbf24;
    border-color: rgba(217, 119, 6, 0.3);
}

body.dark-mode .badge-user {
    background: rgba(59, 130, 246, 0.15);
    color: #93c5fd;
    border-color: rgba(59, 130, 246, 0.3);
}