:root {
    /* Light Theme */
    --bg-color: #eef2f9;
    --card-bg-color: #ffffff;
    --text-color: #333;
    --secondary-text-color: #70757a;
    --border-color: #dfe1e5;
    --accent-color: #5A67D8;
    --accent-color-hover: #434190;
    --shadow-color: rgba(0, 0, 0, 0.08);
    --success-color: #28a745;
    --danger-color: #dc3545;
}

[data-theme="dark"] {
    /* Dark Theme */
    --bg-color: #1a1a2e;
    --card-bg-color: #242444;
    --text-color: #e8eaed;
    --secondary-text-color: #bdc1c6;
    --border-color: #5f6368;
    --accent-color: #7f5af0;
    --accent-color-hover: #9873ff;
    --shadow-color: rgba(0, 0, 0, 0.2);
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }
body { background-color: var(--bg-color); color: var(--text-color); transition: background-color 0.3s, color 0.3s; }
.page-wrapper { display: flex; flex-direction: column; min-height: 100vh; position: relative; z-index: 1; }
.hidden { display: none !important; }

/* Animated Background */
.background-animation { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; overflow: hidden; }
.background-animation span { position: absolute; color: var(--accent-color); opacity: 0.1; font-size: 5rem; animation: float 20s linear infinite; }
@keyframes float { 0% { transform: translateY(100vh) rotate(0deg); } 100% { transform: translateY(-10vh) rotate(720deg); } }

/* Header & Theme Switcher */
header { background-color: var(--card-bg-color); box-shadow: 0 2px 5px var(--shadow-color); padding: 1rem 5%; width: 100%; z-index: 10; }
.header-content { max-width: 800px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
header h1 { font-size: 1.5rem; color: var(--accent-color); }
.theme-switcher { display: flex; align-items: center; gap: 0.5rem; }
.switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; }
.slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .4s; }
input:checked + .slider { background-color: var(--accent-color); }
input:checked + .slider:before { transform: translateX(20px); }
.slider.round { border-radius: 24px; }
.slider.round:before { border-radius: 50%; }

/* Main Container & Cards */
.container { max-width: 800px; width: 90%; margin: 2rem auto; flex-grow: 1; }
.card { background-color: var(--card-bg-color); border-radius: 12px; padding: 1.5rem; margin-bottom: 1.5rem; box-shadow: 0 4px 12px var(--shadow-color); transition: background-color 0.3s, transform 0.2s; }
.card:hover { transform: translateY(-3px); }

/* Word of the Day Card */
#wotd-card { border-left: 5px solid var(--accent-color); }
#wotd-card .wotd-header { display: flex; align-items: center; gap: 10px; font-size: 1.2rem; font-weight: 600; color: var(--accent-color); margin-bottom: 1rem; }
#wotd-card h3 { font-size: 1.8rem; margin-bottom: 0.5rem; }
#wotd-card .wotd-meaning { font-style: italic; color: var(--secondary-text-color); }

/* Search & Actions */
.search-box { display: flex; gap: 1rem; }
.search-box input { width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--border-color); border-radius: 8px; font-size: 1rem; background-color: var(--bg-color); color: var(--text-color); outline: none; transition: all 0.3s; }
.search-box input:focus { border-color: var(--accent-color); box-shadow: 0 0 0 3px var(--accent-color-hover); }
.search-box button, .action-buttons button { padding: 0.75rem 1.25rem; background-color: var(--accent-color); color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 1rem; transition: background-color 0.2s; white-space: nowrap; }
.search-box button:hover, .action-buttons button:hover { background-color: var(--accent-color-hover); }
.action-buttons { display: flex; gap: 1rem; margin-top: 1rem; }
.action-buttons button { width: 100%; }

/* Result Styling */
.result-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; }
.word-info h3 { font-size: 2.2rem; font-weight: 700; }
.word-info .phonetic { font-size: 1.1rem; color: var(--secondary-text-color); }
.result-actions { display: flex; gap: 1rem; }
.result-actions button { background: none; border: none; color: var(--secondary-text-color); font-size: 1.5rem; cursor: pointer; transition: color 0.2s; }
.result-actions button:hover { color: var(--accent-color); }
.result-actions button.favorited { color: #FFC107; }
.result-block { border-top: 1px solid var(--border-color); padding-top: 1rem; margin-top: 1rem; }
.result-block h4 { font-size: 1.1rem; margin-bottom: 0.75rem; color: var(--accent-color); }
.definition { margin-bottom: 1rem; line-height: 1.6; }
.example { font-style: italic; color: var(--secondary-text-color); border-left: 3px solid #ccc; padding-left: 1rem; margin-top: 0.5rem; font-size: 0.9rem; }
.chips-container { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { background-color: var(--bg-color); padding: 0.25rem 0.75rem; border-radius: 15px; font-size: 0.9rem; cursor: pointer; transition: background-color 0.2s; }
.chip:hover { background-color: var(--accent-color); color: white; }
.loader { width: 48px; height: 48px; border: 5px solid var(--accent-color); border-bottom-color: transparent; border-radius: 50%; display: block; margin: 2rem auto; animation: rotation 1s linear infinite; }
@keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Tabs (History/Favorites) */
.tab-buttons { display: flex; border-bottom: 1px solid var(--border-color); }
.tab-btn { padding: 0.75rem 1rem; background: none; border: none; font-size: 1rem; color: var(--secondary-text-color); cursor: pointer; border-bottom: 3px solid transparent; }
.tab-btn.active { color: var(--accent-color); border-bottom-color: var(--accent-color); font-weight: 600; }
.tab-pane { padding: 1rem 0; display: none; }
.tab-pane.active { display: block; }
.tab-pane ul { list-style: none; max-height: 200px; overflow-y: auto; }
.tab-pane li { padding: 0.75rem; cursor: pointer; transition: background-color 0.2s; border-radius: 5px; }
.tab-pane li:hover { background-color: var(--bg-color); }

/* Quiz Interface */
#quiz-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
#exit-quiz-btn { background: none; border: 1px solid var(--border-color); color: var(--text-color); padding: 0.5rem 1rem; border-radius: 5px; cursor: pointer; }
#question-text { font-size: 1.2rem; font-weight: 500; margin-bottom: 1.5rem; }
#options-container { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.option-btn { width: 100%; padding: 1rem; text-align: left; background-color: var(--bg-color); border: 1px solid var(--border-color); border-radius: 8px; font-size: 1rem; cursor: pointer; transition: all 0.2s; }
.option-btn:hover:not(:disabled) { border-color: var(--accent-color); background-color: var(--accent-color-hover); color: white; }
.option-btn.correct { background-color: var(--success-color); color: white; border-color: var(--success-color); }
.option-btn.incorrect { background-color: var(--danger-color); color: white; border-color: var(--danger-color); }
#feedback-text { margin-top: 1rem; font-weight: 500; height: 1.2em; }
#next-question-btn, #restart-quiz-btn { width: 100%; padding: 1rem; background-color: var(--accent-color); color: white; border: none; border-radius: 8px; font-size: 1rem; cursor: pointer; margin-top: 1rem; }
#quiz-results h2 { margin-bottom: 1rem; }

/* Footer */
footer { text-align: center; padding: 1.5rem; font-size: 0.9rem; color: var(--secondary-text-color); background-color: var(--card-bg-color); margin-top: auto; }

/* Media Queries */
@media (max-width: 600px) {
    .action-buttons { flex-direction: column; }
    .result-header { flex-direction: column; align-items: flex-start; gap: 1rem; }
    header h1 { font-size: 1.2rem; }
}

/* =================================== */
/* ==   RESPONSIVE MEDIA QUERIES    == */
/* =================================== */

/* For Small Tablets (e.g., iPad Mini, Portrait Mode) - up to 768px */
@media (max-width: 768px) {
    .container {
        width: 95%; /* Use more of the screen space */
        margin: 1.5rem auto;
    }

    header h1 {
        font-size: 1.3rem; /* Slightly smaller title */
    }

    .card {
        padding: 1rem; /* Reduce padding on cards */
    }

    .word-info h3 {
        font-size: 1.8rem; /* Make the main word a bit smaller */
    }
    
    .action-buttons {
        flex-direction: column; /* Stack the action buttons vertically */
    }
    
    #options-container {
        grid-template-columns: 1fr; /* Ensure quiz options are in a single column */
    }
}

/* For Mobile Phones (e.g., iPhone, Android) - up to 480px */
@media (max-width: 480px) {
    body {
        font-size: 14px; /* Adjust base font size for better readability */
    }

    header h1 {
        font-size: 1.1rem; /* Even smaller title for phone screens */
    }

    .theme-switcher {
        gap: 0.3rem; /* Reduce gap in theme switcher */
        transform: scale(0.9); /* Make the switcher slightly smaller */
    }

    .search-card {
        flex-direction: column; /* Stack search input and buttons */
        gap: 1rem;
    }
    
    .search-box {
        flex-direction: column; /* Stack input and search button on small screens */
    }
    
    .search-box input, .search-box button {
        width: 100%; /* Make input and buttons full width */
        font-size: 0.9rem;
    }

    .result-header {
        flex-direction: column; /* Stack word info and action buttons */
        align-items: flex-start;
        gap: 1rem;
    }

    .word-info h3 {
        font-size: 1.5rem; /* Smaller word size for mobile */
    }
    
    .tab-btn {
        padding: 0.5rem; /* Smaller tab buttons */
        font-size: 0.9rem;
    }
    
    footer {
        font-size: 0.75rem; /* Smaller footer text */
    }
}

/* For Large Screens (Laptops, Desktops) - 1200px and up */
@media (min-width: 1200px) {
    .container {
        max-width: 960px; /* Increase max-width for more content space */
    }

    body {
        font-size: 18px; /* Increase base font size for better legibility */
    }
    
    .card {
        padding: 2rem; /* More generous padding */
    }
}

/* For Extra Large Screens (2K, 4K Monitors) - 1600px and up */
@media (min-width: 1600px) {
    .container {
        max-width: 1200px; /* A wider container for very large screens */
    }
    
    .page-wrapper {
        font-size: 20px; /* Larger font makes it easier to read from a distance */
    }

    .background-animation span {
        font-size: 7rem; /* Make the background animation elements larger */
    }
}