:root{--bg-color: #f8f9fa;--text-color: #212529;--border-color: #dee2e6;--card-bg: #ffffff;--dropzone-bg: #ffffff;--dropzone-border: #ced4da;--dropzone-hover: #e9ecef;--accent-color: #4361ee;--tooltip-bg: rgba(255, 255, 255, .95);--tooltip-text: #212529;--notification-bg: rgba(67, 97, 238, .9);--notification-text: white}.dark{--bg-color: #121212;--text-color: #e9ecef;--border-color: #495057;--card-bg: #1e1e1e;--dropzone-bg: #2d2d2d;--dropzone-border: #495057;--dropzone-hover: #3d3d3d;--accent-color: #4cc9f0;--tooltip-bg: rgba(46, 46, 46, .95);--tooltip-text: #e9ecef;--notification-bg: rgba(76, 201, 240, .9);--notification-text: #121212}*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;line-height:1.6;text-align:center}.bg-var-bg{background-color:var(--bg-color)}.text-var-text{color:var(--text-color)}.theme-toggle{position:fixed;top:1rem;right:1rem;z-index:100;cursor:pointer;background-color:var(--card-bg);border:1px solid var(--border-color);border-radius:50%;width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #0000001a;transition:transform .2s}.theme-toggle:hover{transform:scale(1.1)}.toggle-icon{font-size:1.2rem}.main-content{display:flex;flex-direction:row;min-height:calc(100vh - 200px);gap:2rem}@media (max-width: 768px){.main-content{flex-direction:column;height:auto}.dropzone-container,.results-container{height:50vh}}.dropzone-container,.results-container{flex:1;padding:1rem;overflow-y:auto}.dropzone{height:100%;border:2px dashed var(--dropzone-border);border-radius:1rem;background-color:var(--dropzone-bg);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s;text-align:center}.dropzone:hover,.dropzone.dragging{background-color:var(--dropzone-hover);border-color:var(--accent-color)}.dropzone-placeholder{text-align:center;padding:2rem}.upload-icon{font-size:3rem;margin-bottom:1rem}.preview-image{max-width:100%;max-height:80vh;object-fit:contain;border-radius:1rem}.no-results,.processing{height:100%;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--text-color);opacity:.7}.palettes{display:flex;flex-direction:column;gap:2rem}.palette-card{background-color:var(--card-bg);border-radius:1rem;padding:1.5rem;box-shadow:0 2px 8px #0000001a;text-align:center}.palette-card h3{margin-bottom:1rem;font-weight:600}.color-swatches{display:flex;height:80px;border-radius:1rem;overflow:hidden;margin-bottom:1rem}.color-swatch{flex:1;cursor:pointer;transition:transform .2s}.color-swatch:hover{transform:translateY(-5px)}.palette-description{font-size:.9rem;opacity:.8;text-align:center}.color-tooltip{position:fixed;background-color:var(--tooltip-bg);color:var(--tooltip-text);padding:.5rem;border-radius:1rem;box-shadow:0 2px 8px #0003;z-index:1000;display:flex;align-items:center;gap:.5rem;pointer-events:none}.tooltip-color{width:1.5rem;height:1.5rem;border-radius:.5rem;border:1px solid var(--border-color)}.tooltip-text{font-size:.8rem;text-align:center}.copy-notification{position:fixed;bottom:2rem;left:50%;transform:translate(-50%);background-color:var(--notification-bg);color:var(--notification-text);padding:.75rem 1.5rem;border-radius:1rem;box-shadow:0 2px 8px #0003;z-index:1000;font-weight:500;text-align:center}