:root {
    --bg-color: #1a1a1a;
    --card-bg: #2c2c2c;
    --text-color: #ffffff;
    --input-bg: #333333;
    --input-border: #555555;
    --keyword-bg: #444444;
    --accent-color: #007bff;
    --accent-hover: #0056b3;
    --shadow-color: rgba(0, 0, 0, 0.3);
    --grid-color: rgba(255, 255, 255, 0.05);
}

body.light-mode {
    --bg-color: #f0f2f5;
    --card-bg: #ffffff;
    --text-color: #1a1a1a;
    --input-bg: #f9f9f9;
    --input-border: #cccccc;
    --keyword-bg: #e0e0e0;
    --accent-color: #007bff;
    --accent-hover: #0056b3;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --grid-color: rgba(0, 0, 0, 0.05);
}

body {
    display: grid;
    place-items: center;
    min-height: 100vh;
    margin: 0;
    transition: background-color 0.3s ease;
    background-color: var(--bg-color);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-image: linear-gradient(var(--grid-color) 1px, transparent 1px), 
                      linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
    background-size: 20px 20px;
}