/* Basic Reset & Body */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* CSS Custom Properties (Variables) for Theming */
:root { /* ... same as before ... */
    --bg-color: #f8f9fa; --top-bar-bg: #ffffff; --top-bar-text: #333; --top-bar-border: #e0e0e0;
    --button-bg: transparent; --button-text: #555; --button-border: #ccc;
    --button-hover-bg: #e9ecef; --button-hover-text: #333; --button-hover-border: #bbb;
    --logo-text: #2c3e50; --hint-text-color: #777; --swatch-count-text: #555;
    --theory-group-border: #ddd; --theory-button-bg: #f8f9fa; --theory-button-hover-bg: #e9ecef;
    --disabled-opacity: 0.5; --disabled-bg: #f0f0f0;
    --shade-viewer-overlay-bg: rgba(0, 0, 0, 0.05);
    --shade-viewer-close-btn-bg: rgba(255, 255, 255, 0.7); --shade-viewer-close-btn-text: #333;
    --shade-viewer-close-btn-border: #ccc; --shade-viewer-close-btn-hover-bg: rgba(255, 255, 255, 0.9);
    --scrollbar-track-bg: rgba(0,0,0,0.1); --scrollbar-thumb-bg: rgba(0,0,0,0.3); --scrollbar-thumb-hover-bg: rgba(0,0,0,0.5);
    --mobile-menu-bg: #ffffff; --mobile-menu-text: #333; --mobile-menu-border: #e0e0e0;
    --mobile-bottom-bar-bg: #ffffff; --mobile-bottom-bar-border: #e0e0e0;
    --mobile-logo-color: #007AFF;
}
body.dark-mode { /* ... same as before ... */
    --bg-color: #1a1a1a; --top-bar-bg: #2c3e50; --top-bar-text: #ecf0f1; --top-bar-border: #34495e;
    --button-bg: transparent; --button-text: #bdc3c7; --button-border: #566573;
    --button-hover-bg: #34495e; --button-hover-text: #ecf0f1; --button-hover-border: #7f8c8d;
    --logo-text: #ecf0f1; --hint-text-color: #95a5a6; --swatch-count-text: #bdc3c7;
    --theory-group-border: #566573; --theory-button-bg: #34495e; --theory-button-hover-bg: #4e6070;
    --disabled-bg: #3a3a3a;
    --shade-viewer-overlay-bg: rgba(255, 255, 255, 0.03);
    --shade-viewer-close-btn-bg: rgba(50, 50, 50, 0.7); --shade-viewer-close-btn-text: #ecf0f1;
    --shade-viewer-close-btn-border: #7f8c8d; --shade-viewer-close-btn-hover-bg: rgba(70, 70, 70, 0.9);
    --scrollbar-track-bg: rgba(255,255,255,0.1); --scrollbar-thumb-bg: rgba(255,255,255,0.3); --scrollbar-thumb-hover-bg: rgba(255,255,255,0.5);
    --mobile-menu-bg: #2c3e50; --mobile-menu-text: #ecf0f1; --mobile-menu-border: #3e5770;
    --mobile-bottom-bar-bg: #2c3e50; --mobile-bottom-bar-border: #34495e;
    --mobile-logo-color: #58a6ff;
}

body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; display: flex; flex-direction: column; height: 100vh; overflow: auto; background-color: var(--bg-color); transition: background-color 0.3s ease; }
body.mobile-menu-open { overflow: hidden; }

/* --- Desktop Top Bar --- (no changes) */
.top-bar.desktop-only { display: flex; justify-content: space-between; align-items: center; padding: 0 20px; background-color: var(--top-bar-bg); color: var(--top-bar-text); height: 60px; flex-shrink: 0; border-bottom: 1px solid var(--top-bar-border); z-index: 1000; transition: background-color 0.3s ease, color 0.3s ease, border-bottom-color 0.3s ease; }
/* ... (all other .top-bar.desktop-only styles) ... */
.top-bar.desktop-only .logo-area { display: flex; align-items: center; }
.top-bar.desktop-only .logo { font-size: 1.6em; font-weight: bold; color: var(--logo-text); margin-right: 20px; transition: color 0.3s ease; white-space: nowrap; }
.top-bar.desktop-only .hint-text { font-size: 0.9em; color: var(--hint-text-color); transition: color 0.3s ease; }
.top-bar.desktop-only .main-actions { display: flex; align-items: center; gap: 10px; flex-grow: 1; justify-content: center; }
.top-bar.desktop-only .settings-actions { display: flex; align-items: center; }
.top-bar.desktop-only .settings-actions button { background-color: var(--button-bg); color: var(--button-text); border: 1px solid var(--button-border); padding: 8px; border-radius: 50%; width: 38px; height: 38px; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; font-size: 1em; display: inline-flex; align-items: center; justify-content: center; }
.top-bar.desktop-only .settings-actions button:hover { background-color: var(--button-hover-bg); border-color: var(--button-hover-border); color: var(--button-hover-text); transform: scale(1.1); }
.top-bar.desktop-only .main-actions button, .top-bar.desktop-only .theory-buttons-group button { background-color: var(--button-bg); color: var(--button-text); border: 1px solid var(--button-border); padding: 8px 12px; border-radius: 5px; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; font-size: 0.9em; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; }
.top-bar.desktop-only .main-actions button:hover, .top-bar.desktop-only .theory-buttons-group button:hover { background-color: var(--button-hover-bg); border-color: var(--button-hover-border); color: var(--button-hover-text); }
.top-bar.desktop-only .main-actions button:disabled { opacity: var(--disabled-opacity); cursor: not-allowed; background-color: var(--disabled-bg); }
.top-bar.desktop-only .main-actions button i, .top-bar.desktop-only .theory-buttons-group button i { margin-right: 6px; }
.top-bar.desktop-only .theory-buttons-group { display: flex; align-items: center; gap: 5px; border: 1px solid var(--theory-group-border); padding: 3px; border-radius: 5px; margin: 0 5px; transition: border-color 0.3s ease; }
.top-bar.desktop-only .swatch-count { font-size: 0.9em; color: var(--swatch-count-text); margin-left: 10px; padding: 8px 0; transition: color 0.3s ease; white-space: nowrap; }

/* --- Mobile UI Elements --- (no changes) */
.mobile-only { display: none; }
.mobile-top-bar { display: flex; justify-content: space-between; align-items: center; padding: 0 10px; height: 56px; background-color: var(--top-bar-bg); color: var(--top-bar-text); border-bottom: 1px solid var(--top-bar-border); z-index: 1010; position: fixed; top: 0; left: 0; width: 100%; transition: background-color 0.3s ease, color 0.3s ease, border-bottom-color 0.3s ease; }
/* ... (all other mobile UI styles for .mobile-menu-btn, .mobile-logo, .mobile-nav-menu etc.) ... */
.mobile-menu-btn, .mobile-placeholder { background: none; border: none; color: var(--top-bar-text); font-size: 1.3em; padding: 8px; cursor: pointer; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; transition: color 0.3s ease; }
.mobile-logo { font-size: 1.4em; font-weight: 700; color: var(--mobile-logo-color); transition: color 0.3s ease; }
.mobile-placeholder { visibility: hidden; }
.mobile-nav-menu { position: fixed; top: 0; left: -100%; width: 80%; max-width: 300px; height: 100%; background-color: var(--mobile-menu-bg); color: var(--mobile-menu-text); border-right: 1px solid var(--mobile-menu-border); box-shadow: 3px 0 15px rgba(0,0,0,0.1); z-index: 1020; overflow-y: auto; transition: left 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; display: flex; flex-direction: column; padding-top: 0; }
.mobile-nav-menu.open { left: 0; }
.mobile-nav-menu ul { list-style: none; padding: 0; margin: 0; flex-grow: 1; }
.mobile-nav-menu li button { display: flex; align-items: center; width: 100%; padding: 14px 20px; text-align: left; background: none; border: none; border-bottom: 1px solid var(--mobile-menu-border); color: var(--mobile-menu-text); font-size: 1em; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; }
.mobile-nav-menu li button:hover { background-color: rgba(0,0,0,0.04); }
body.dark-mode .mobile-nav-menu li button:hover { background-color: rgba(255,255,255,0.04); }
.mobile-nav-menu li button i { margin-right: 15px; width: 20px; text-align: center; font-size: 1.1em; }
.mobile-nav-menu li.menu-divider { padding: 12px 20px 6px; font-size: 0.75em; text-transform: uppercase; color: var(--hint-text-color); font-weight: 500; }
.close-mobile-menu-btn { display: flex; align-items: center; padding: 14px 20px; background: none; border: none; border-bottom: 1px solid var(--mobile-menu-border); color: var(--mobile-menu-text); font-size: 1em; cursor: pointer; text-align: left; margin-bottom: 0; font-weight: 500; }
.close-mobile-menu-btn i { margin-right: 10px; font-size: 1.1em; }
.swatch-count-mobile { padding: 15px 20px; text-align: center; font-size: 0.9em; color: var(--hint-text-color); border-top: 1px solid var(--mobile-menu-border); margin-top: auto; }
.mobile-menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4); z-index: 1015; opacity: 0; visibility: hidden; transition: opacity 0.3s ease-in-out, visibility 0s 0.3s linear; }
.mobile-menu-overlay.open { opacity: 1; visibility: visible; transition-delay: 0s; }
.mobile-bottom-bar { position: fixed; bottom: 0; left: 0; width: 100%; height: 60px; background-color: var(--mobile-bottom-bar-bg); border-top: 1px solid var(--mobile-bottom-bar-border); display: none; align-items: center; justify-content: center; padding: 0 15px; z-index: 1010; transition: background-color 0.3s ease, border-top-color 0.3s ease; }
.generate-mobile-btn { background-color: var(--mobile-logo-color); color: #fff; border: none; padding: 10px 30px; border-radius: 25px; font-size: 1.05em; font-weight: 600; letter-spacing: 0.5px; cursor: pointer; transition: background-color 0.2s ease, transform 0.1s ease; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
body.dark-mode .generate-mobile-btn { background-color: var(--mobile-logo-color); color: var(--top-bar-bg); }
.generate-mobile-btn:active { transform: scale(0.96); }


/* Palette Container */
.palette-container { display: flex; flex-direction: row; flex-grow: 1; width: 100%; }
body.mobile-view .palette-container { padding-top: 56px; padding-bottom: 60px; flex-direction: column; }

/* Individual Swatch Styling */
.swatch {
    flex-grow: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 8px;
    position: relative;
    transition: background-color 0.4s ease, height 0.15s ease-out;
    overflow: hidden;
    cursor: grab;
    justify-content: flex-end; /* Default for desktop: info/toolbar at bottom */
}
.swatch:active { cursor: grabbing; }

body.mobile-view .swatch {
    width: 100%;
    flex-grow: 0;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    justify-content: space-between; /* Mobile: toolbar top, info bottom */
}
body.dark-mode.mobile-view .swatch { border-bottom: 1px solid rgba(255,255,255,0.08); }
body.mobile-view .swatch:last-child { border-bottom: none; }

/* Swatch Toolbar (actions) */
.swatch-toolbar {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 10px;
    padding: 7px 12px;
    background-color: rgba(0,0,0,0.2);
    border-radius: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    z-index: 10;
    max-width: calc(100% - 16px);
    /* Desktop: absolute positioning */
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    order: 0; /* Default order for desktop */
}
.swatch:hover .swatch-toolbar, .swatch.mobile-touch-active .swatch-toolbar { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
body.dark-mode .swatch-toolbar { background-color: rgba(255,255,255,0.1); }

body.mobile-view .swatch-toolbar {
    position: relative; /* Flow normally in mobile view */
    top: auto;
    left: auto;
    transform: none;
    margin-top: 5px; /* Space from top of swatch */
    order: 1; /* Toolbar first in mobile column */
    background-color: rgba(0,0,0,0.15); /* Slightly less intrusive on mobile */
    border-radius: 15px;
    padding: 5px 8px;
    opacity: 1; /* Always visible when .mobile-touch-active or if forced by CSS for all mobile */
    visibility: visible;
}
.swatch.mobile-touch-active .swatch-toolbar { /* Ensure transform is reset for mobile if it was absolute */
    transform: none;
}


.swatch-action-btn { background: none; border: none; color: inherit; font-size: 1.1em; padding: 5px; cursor: pointer; opacity: 0.85; transition: opacity 0.2s ease, transform 0.2s ease; flex-shrink: 0; }
.swatch-action-btn:hover { opacity: 1; transform: scale(1.1); }
.swatch-action-btn.locked i { color: gold; text-shadow: 0 0 3px rgba(0,0,0,0.2); }

/* Swatch Info (Hex, Name) */
.swatch-info {
    text-align: center;
    padding: 8px 5px;
    margin-bottom: 10px; /* Desktop default */
    color: inherit;
    user-select: text;
    border-radius: 3px;
    width: auto;
    min-width: 90px;
    order: 0; /* Default order for desktop */
}
.hex-code { display: block; font-size: 1em; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; cursor: pointer; margin-bottom: 2px; }
.hex-code:hover { text-decoration: underline; }
.color-name { font-size: 0.8em; font-style: normal; opacity: 0.9; display: none; }
.swatch:hover .color-name, .swatch.mobile-touch-active .color-name { display: block; }

body.mobile-view .swatch-info {
    order: 2; /* Info second in mobile column */
    margin-bottom: 5px; /* Space from bottom of swatch */
    /* margin-top: auto; /* Removed, let space-between handle */
    padding: 10px 5px; /* Slightly more padding on mobile */
}


/* Shade Viewer Styling (no changes) */
.shade-viewer-container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--shade-viewer-overlay-bg); backdrop-filter: blur(1px); display: flex; flex-direction: column; align-items: stretch; overflow: hidden; z-index: 20; transition: background-color 0.3s ease; }
/* ... (all other shade viewer styles) ... */
.shades-list { width: 100%; flex-grow: 1; overflow-y: auto; display: flex; flex-direction: column; }
.shades-list::-webkit-scrollbar { width: 6px; } .shades-list::-webkit-scrollbar-track { background: var(--scrollbar-track-bg); border-radius: 3px; } .shades-list::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb-bg); border-radius: 3px; } .shades-list::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover-bg); }
.shade-item { flex-grow: 1; min-height: 15px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; transition: filter 0.1s ease, transform 0.1s ease; }
.shade-item:hover { filter: brightness(1.05) saturate(1.05); transform: scaleX(1.01); z-index: 1; }
.shade-item-hex { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(0, 0, 0, 0.7); color: white; padding: 2px 6px; border-radius: 3px; font-size: 0.8em; font-weight: 500; pointer-events: none; opacity: 0; transition: opacity 0.15s ease; white-space: nowrap; }
.shade-item:hover .shade-item-hex { opacity: 1; }
.original-color-marker { position: absolute; left: 7px; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 3px rgba(0,0,0,0.5); }
.close-shade-viewer-btn { background-color: var(--shade-viewer-close-btn-bg); color: var(--shade-viewer-close-btn-text); border: 1px solid var(--shade-viewer-close-btn-border); border-radius: 50%; width: 30px; height: 30px; font-size: 1em; cursor: pointer; display: flex; align-items: center; justify-content: center; margin: 8px auto 8px auto; flex-shrink: 0; z-index: 25; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; }
.close-shade-viewer-btn:hover { background-color: var(--shade-viewer-close-btn-hover-bg); transform: scale(1.1); }

/* SortableJS helper class */
.sortable-ghost { opacity: 0.4; background: #cce5ff; }

/* --- Responsive Breakpoints --- */
@media (min-width: 769px) { /* Tablet and larger */
    .desktop-only { display: flex !important; }
    .mobile-only { display: none !important; }
    body.mobile-view .palette-container { padding-top: 0; padding-bottom: 0; flex-direction: row; height: auto; }
    body.mobile-view .swatch { width: auto; height: 100%; flex-grow: 1; border-bottom: none; flex-shrink: 1; justify-content: flex-end; /* Desktop: info/toolbar at bottom */ }
    body.mobile-view .swatch-toolbar { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); margin-top: 0; order: 0; background-color: rgba(0,0,0,0.2); border-radius: 20px; padding: 7px 12px; gap: 10px; opacity: 0; visibility: hidden; }
    body.mobile-view .swatch:hover .swatch-toolbar { opacity: 1; visibility: visible; } /* Desktop hover for toolbar */
    body.mobile-view .swatch-info { margin-top: 0; margin-bottom: 10px; padding: 8px 5px; order: 0; }
}

@media (max-width: 768px) { /* Mobile view */
    .desktop-only { display: none !important; }
    .mobile-top-bar.mobile-only, .mobile-bottom-bar.mobile-only { display: flex !important; }
    .mobile-nav-menu.mobile-only, .mobile-menu-overlay.mobile-only { display: block !important; }
    .swatch.mobile-touch-active .swatch-toolbar { opacity: 1; visibility: visible; } /* Ensure toolbar is visible on tap */
}