:root {
    /* Light Theme Colors */
    --bg-light: #f3f4f6;
    --text-primary-light: #111827;
    --text-secondary-light: #4b5563;
    --card-bg-light: rgba(255, 255, 255, 1);
    --border-light: #e5e7eb;
    --accent-light: #8b5cf6;
    --accent-hover-light: #7c3aed;
    --accent-text-light: #ffffff;
    --prefilled-bg-light: #f3f4f6;
    --prefilled-text-light: #1e293b;
    --user-text-light: #8b5cf6;
    --selected-bg-light: #ddd6fe;
    --highlight-bg-light: #e9e3fe;
    
    /* Dark Theme Colors */
    --bg-dark: #090a0f;
    --text-primary-dark: #e5e7eb;
    --text-secondary-dark: #9ca3af;
    --card-bg-dark: rgba(31, 41, 55, 0.5);
    --border-dark: #374151;
    --accent-dark: #a78bfa;
    --accent-hover-dark: #c4b5fd;
    --accent-text-dark: #1e1b4b;
    --prefilled-bg-dark: #374155;
    --prefilled-text-dark: #f8fafc;
    --user-text-dark: #c4b5fd;
    --selected-bg-dark: #4338ca;
    --highlight-bg-dark: #3730a399;

    /* Shared Colors */
    --color-danger: #ef4444;
    --color-success: #4ade80;
    --color-warning: #f59e0b;
}

body { 
    font-family: 'Inter', sans-serif; 
    transition: background-color 0.3s, color 0.3s; 
}

/* Light Theme */
.light {
    --color-background: var(--bg-light);
    --color-surface: var(--card-bg-light);
    --color-primary-text: var(--text-primary-light);
    --color-secondary-text: var(--text-secondary-light);
    --color-border: var(--border-light);
    --color-accent: var(--accent-light);
    --color-accent-hover: var(--accent-hover-light);
    --color-accent-text: var(--accent-text-light);
    --color-prefilled-bg: var(--prefilled-bg-light);
    --color-prefilled-text: var(--prefilled-text-light);
    --color-user-text: var(--user-text-light);
    --color-selected-bg: var(--selected-bg-light);
    --color-highlight-bg: var(--highlight-bg-light);
    --color-modal-button-bg: #e5e7eb; 
    --color-modal-button-text: #374151;
}

/* Dark Theme */
.dark {
    --color-background: var(--bg-dark);
    --color-surface: var(--card-bg-dark);
    --color-primary-text: var(--text-primary-dark);
    --color-secondary-text: var(--text-secondary-dark);
    --color-border: var(--border-dark);
    --color-accent: var(--accent-dark);
    --color-accent-hover: var(--accent-hover-dark);
    --color-accent-text: var(--accent-text-dark);
    --color-prefilled-bg: var(--prefilled-bg-dark);
    --color-prefilled-text: var(--prefilled-text-dark);
    --color-user-text: var(--user-text-dark);
    --color-selected-bg: var(--selected-bg-dark);
    --color-highlight-bg: var(--highlight-bg-dark);
    --color-modal-button-bg: #4b5563; 
    --color-modal-button-text: #f9fafb;
}

.dark { background-color: var(--bg-dark); background-image: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%); }
.light { background-color: var(--bg-light); }
body { color: var(--color-primary-text); }
.lobster-font { font-family: 'Lobster', cursive; }

.glass-panel {
    background-color: var(--color-surface);
    backdrop-filter: blur(10px);
    border: 1px solid var(--color-border);
}

.themed-text-primary { color: var(--color-primary-text); }
.themed-text-secondary { color: var(--color-secondary-text); }
.themed-btn-primary { background-color: var(--color-accent); color: var(--color-accent-text); transition: background-color 0.2s; }
.themed-btn-primary:hover { background-color: var(--color-accent-hover); }
.themed-btn-primary:disabled { background-color: var(--color-border); color: var(--color-secondary-text); cursor: not-allowed; }

.sudoku-cell { 
    background-color: var(--color-surface); 
    border: 1px solid var(--color-border); 
    color: var(--color-user-text); 
    cursor: pointer; 
    transition: background-color 0.2s; 
}
.prefilled-cell { 
    background-color: var(--color-prefilled-bg); 
    color: var(--color-prefilled-text); 
    font-weight: 700; 
    cursor: default; 
}
.correct-entry { color: var(--color-success) !important; font-weight: 600; }
.mistake-entry { color: var(--color-danger) !important; }
.highlight { background-color: var(--color-highlight-bg); }
.selected { background-color: var(--color-selected-bg) !important; }
.same-number-highlight { background-color: color-mix(in srgb, var(--color-selected-bg) 50%, var(--color-surface)); }
.sudoku-x-highlight { background-color: color-mix(in srgb, var(--color-highlight-bg) 50%, transparent); }
.accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-in-out; }