/* CSS DLA USTAWIEŃ I ZMIENNYCH DYNAMICZNYCH */

:root {
    /* Zmienne kontrolowane przez ustawienia */
    --card-width: 320px;
    --grid-cols: auto-fill;
    --font-size-multiplier: 1;
    --text-color-override: var(--text-main);
    --app-max-width: 1200px;
    --border-radius-override: 16px;
    
    /* Nowe zmienne dla szczegółowych ustawień tekstów */
    --word-en-size: 22px;
    --word-en-color: #3b82f6; /* Domyślny accent */
    
    --word-pl-size: 16px;
    --word-pl-color: #64748b; /* Domyślny text-muted */
    
    --example-size: 14px;
    --example-color: #0f172a; /* Domyślny text-main */

    /* Czcionka i Ikony */
    --font-family-main: 'Poppins', sans-serif;
    --icon-size: 16px;

    /* Konfiguracja Menu (Sidebar) */
    --sidebar-width: 240px;
    --sidebar-radius: 40px;
    --sidebar-btn-padding: 15px 20px;
    --sidebar-btn-font-size: 16px;
    --content-margin: 240px; /* Margines treści - 0 dla overlap, width dla push */
}

.settings-container {
    background: var(--bg-panel);
    padding: 40px;
    border-radius: 20px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    max-width: 900px;
}

.setting-group {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}

.setting-group:last-child {
    border-bottom: none;
}

.setting-group h4 {
    margin-bottom: 15px;
    color: var(--accent);
    font-size: 18px;
}

.setting-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    flex-wrap: wrap;
    gap: 15px;
}

.setting-row label {
    font-weight: 600;
    color: var(--text-muted);
    flex: 1;
    min-width: 250px;
}

.setting-control {
    display: flex;
    align-items: center;
    gap: 10px;
}

input[type="range"] {
    -webkit-appearance: none;
    width: 200px;
    height: 8px;
    background: var(--border);
    border-radius: 4px;
    outline: none;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    transition: 0.2s;
}

input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

input[type="color"] {
    -webkit-appearance: none;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    cursor: pointer;
    background: transparent;
}

input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

input[type="color"]::-webkit-color-swatch {
    border: 2px solid var(--border);
    border-radius: 8px;
}

/* Nadpisywanie stylów z użyciem zmiennych */
.words-grid {
    grid-template-columns: repeat(var(--grid-cols), minmax(var(--card-width), 1fr)) !important;
}

.word-card, .flashcard-front, .flashcard-back, .stat-card, .btn {
    border-radius: var(--border-radius-override) !important;
}

/* Globalne skalowanie tekstów - wyłączono .nav-links button z głównej reguły */
body, p, button, input, select, label {
    font-size: calc(16px * var(--font-size-multiplier)) !important;
}

.nav-links button {
    font-size: var(--sidebar-btn-font-size) !important;
    padding: var(--sidebar-btn-padding) !important;
}
h2 { font-size: calc(32px * var(--font-size-multiplier)) !important; }
h3 { font-size: calc(24px * var(--font-size-multiplier)) !important; }
h4 { font-size: calc(18px * var(--font-size-multiplier)) !important; }

/* Szczegółowe nadpisywanie tekstów słownictwa */
.word-en, .fc-en, .quiz-word, .typing-word-en {
    font-size: var(--word-en-size) !important;
    color: var(--word-en-color) !important;
}

.word-pl, .fc-pl, .typing-word-pl {
    font-size: var(--word-pl-size) !important;
    color: var(--word-pl-color) !important;
}

.ex-en, .ex-pl, .fc-ex {
    font-size: var(--example-size) !important;
    color: var(--example-color) !important;
}

/* Wyjątki dla kolorów, żeby nie zepsuć UI */
.btn.primary, .btn.primary * { color: white !important; }
.btn.danger, .btn.danger * { color: white !important; }
.stat-card.mastered::before, .word-card.mastered { border-color: var(--success) !important; }
.stat-card.review::before, .word-card.review { border-color: var(--accent) !important; }