:root {
    --theme-pink: #ff4081;
    --theme-dark: #0a0a0a;
    --theme-panel: #141414;
    --theme-cyan: #00e5ff;
    --theme-gold: #ffd700;
    --theme-purple: #d580ff;
    
    /* Default Dark Mode */
    --text-main: #eee;
    --text-muted: #aaa;
    --border-color: #333;
    --input-bg: #222;
    --input-border: #444;
    --card-shadow: rgba(0,0,0,0.5);
    --bg-workspace: #111;
    --bg-toolbar: rgba(0,0,0,0.3);
    --bg-element: #1a1a1a;
}

/* Light Mode Overrides */
:root[data-theme="light"] {
    --theme-dark: #f4f4f4;
    --theme-panel: #ffffff;
    --text-main: #212529;
    --text-muted: #666;
    --border-color: #dee2e6;
    --input-bg: #ffffff;
    --input-border: #ced4da;
    --card-shadow: rgba(0,0,0,0.1);
    --bg-workspace: #e0e0e0;
    --bg-toolbar: rgba(255,255,255,0.9);
    --bg-element: #f8f9fa;
}

body {
    background-color: var(--theme-dark);
    color: var(--text-main);
    font-family: 'Segoe UI', sans-serif;
    margin: 0;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Common Utility Classes */
.container { max-width: 600px; width: 95%; margin: 40px auto; }
.card { background: var(--theme-panel); border: 1px solid var(--border-color); border-radius: 12px; padding: 25px; box-shadow: 0 4px 15px var(--card-shadow); }
.btn-primary { width: 100%; background: var(--theme-pink); color: white; border: none; padding: 15px; border-radius: 6px; font-size: 16px; font-weight: bold; cursor: pointer; margin-top: 10px; }
.btn-primary:hover { opacity: 0.9; }
.input-group { margin-bottom: 20px; }
label { display: block; margin-bottom: 8px; color: var(--text-muted); font-size: 0.9rem; }
input, select { width: 100%; padding: 12px; background: var(--input-bg); border: 1px solid var(--input-border); color: var(--text-main); border-radius: 6px; font-size: 16px; box-sizing: border-box; }
input:focus, select:focus { outline: none; border-color: var(--theme-pink); }

.home-link { display: inline-block; margin-top: 20px; color: var(--text-muted); text-decoration: none; font-size: 0.9rem; text-align: center; width: 100%; }
.cta-link { color: var(--theme-cyan); text-decoration: none; font-weight: bold; display: block; text-align: center; margin-top: 30px; }
.disclaimer { font-size: 0.8rem; color: var(--text-muted); margin-top: 20px; text-align: center; font-style: italic; }

/* Theme Toggle Button */
.theme-toggle {
    background: transparent;
    border: none;
    color: var(--text-main);
    cursor: pointer;
    font-size: 1.2rem;
    padding: 10px;
    transition: transform 0.2s;
}
.theme-toggle:hover { transform: scale(1.1); }

/* Compare Modal Styles */
.compare-wrapper { position: relative; width: 100%; aspect-ratio: 4/3; background: #000; border-radius: 8px; overflow: hidden; margin: 15px 0; border: 1px solid var(--border-color); }
.compare-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: fill; }
.compare-img.top { z-index: 2; clip-path: inset(0 50% 0 0); background-color: var(--bg-workspace); }
.compare-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--theme-pink); z-index: 3; pointer-events: none; transform: translateX(-50%); box-shadow: 0 0 5px rgba(0,0,0,0.5); }
.compare-slider { position: absolute; top: 0; left: 0; width: 100%; height: 100% !important; z-index: 10; opacity: 0; cursor: ew-resize; margin: 0; }
.compare-label { position: absolute; bottom: 10px; padding: 4px 8px; background: rgba(0,0,0,0.7); color: white; font-size: 12px; border-radius: 4px; pointer-events: none; z-index: 5; }
.compare-label.left { left: 10px; }
.compare-label.right { right: 10px; }