:root {
    /* Основные цвета */
    --primary-color: rgb(99, 163, 193);
    --primary-hover: #5e98bc;
    --secondary-color: #A8D5BA;
    --error-color: #E57373;
    --warning-color: #FFB74D;
    --success-color: #81C784;

    /* Фоны */
    --bg-primary: #FFF0F0;
    --bg-secondary: #FFF5F5;
    --surface-color: #fbf3e5;
    --input-bg: #fbf3e5;
    --class-time-bg: #fbf3e5;
    --error-bg: #FFF0F0;

    /* Текст */
    --text-primary: #4A4A4A;
    --text-secondary: #807c78;
    --text-light: #aca395;
    --text-on-primary: #f7e6c9;

    /* Градиенты */
    --primary-gradient-end: #8FB5C5;
    --header-gradient-start: var(--primary-color);
    --header-gradient-end: var(--primary-hover);

    /* Рамки и тени */
    --border-color: #E0D0D0;
    --shadow: 0 2px 4px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --focus-ring: rgba(123,167,188,0.2);

    /* Типы занятий: фоны */
    --class-lecture-bg: #fbf3e5;
    --class-practice-bg: #fbf3e5;
    --class-seminar-bg: #fbf3e5;
    --class-lab-bg: #fbf3e5;

    /* Типы занятий: цвета текста */
    --class-lecture-text: #1976D2;
    --class-practice-text: #388E3C;
    --class-seminar-text: #F57C00;
    --class-lab-text: #7B1FA2;

    /* Отступы и размеры */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 24px;
    --font-size-sm: 12px;
    --font-size-base: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --font-size-2xl: 22px;
    --border-radius-sm: 6px;
    --border-radius-md: 10px;
    --border-radius-lg: 14px;
}

* { margin:0; padding:0; box-sizing:border-box; }

html, body {
    width:100%; height:100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-size: var(--font-size-base);
    line-height: 1.4;
}

.app-container {
    display: flex; flex-direction: column; min-height:100vh;
    background-color: var(--bg-primary);
}

.header {
    background: linear-gradient(135deg, var(--header-gradient-start), var(--header-gradient-end));
    color: var(--text-on-primary);
    padding: var(--spacing-lg) var(--spacing-md);
    text-align: center; box-shadow: var(--shadow-md); flex-shrink: 0;
    border-bottom-left-radius: 20px; border-bottom-right-radius: 20px;
}

.header h1 { font-size: var(--font-size-2xl); margin-bottom: 2px; font-weight: 600; }
.header .subtitle { font-size: var(--font-size-sm); opacity: 0.9; }

.main-content { flex:1; padding: var(--spacing-md); overflow-y: auto; }

.controls-section {
    background-color: var(--surface-color);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-md); margin-bottom: var(--spacing-md); box-shadow: var(--shadow);
}

.control-group { margin-bottom: var(--spacing-sm); }
.control-group label { display:block; font-weight:600; margin-bottom: 4px;
    color: var(--text-primary); font-size: var(--font-size-sm); }

.select-input {
    width:100%; padding: 10px 12px;
    border: 1px solid var(--border-color); border-radius: var(--border-radius-sm);
    font-size: var(--font-size-base); font-family: inherit;
    background-color: var(--input-bg);
    color: var(--text-primary);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A4A4A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
}

.select-input:focus {
    outline: none; border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.button {
    width:100%; padding: 12px;
    border: none; border-radius: var(--border-radius-md);
    font-size: var(--font-size-base); font-weight:600; cursor:pointer;
    transition: all 0.2s ease; font-family: inherit;
    margin-top: var(--spacing-sm);
}

.button-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-gradient-end));
    color: var(--text-on-primary);
    box-shadow: var(--shadow);
}
.button-primary:hover:not(:disabled) { filter: brightness(1.05); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.button-primary:active:not(:disabled) { transform: translateY(0); box-shadow: var(--shadow); }
.button:disabled { opacity:0.6; cursor:not-allowed; filter: grayscale(0.2); }

/* Навигация по дням */
.day-navigation {
    display: flex; justify-content: center; gap: 6px;
    margin-bottom: var(--spacing-md);
    flex-wrap: wrap;
}

.day-nav-btn {
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 8px 12px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
}

.day-nav-btn:hover {
    background-color: var(--primary-color);
    color: var(--text-on-primary);
    border-color: var(--primary-color);
}

.day-nav-btn.active {
    background-color: var(--primary-color);
    color: var(--text-on-primary);
}

.loading-spinner {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding: var(--spacing-xl);
}
.spinner {
    width:36px; height:36px; border:4px solid var(--border-color);
    border-top:4px solid var(--primary-color); border-radius:50%;
    animation: spin 1s linear infinite; margin-bottom: var(--spacing-sm);
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-spinner p { color: var(--text-secondary); font-size: var(--font-size-base); }

.error-message {
    background-color: var(--error-bg);
    border:1px solid var(--error-color);
    border-radius: var(--border-radius-md); padding: var(--spacing-md);
    margin-bottom: var(--spacing-md); color: var(--error-color); font-size: var(--font-size-base);
}
.error-message::before { content: "⚠️ "; margin-right: var(--spacing-sm); }

.schedule-info {
    background-color: var(--surface-color);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-md); margin-bottom: var(--spacing-md); box-shadow: var(--shadow);
}
.schedule-info h2 { font-size: var(--font-size-xl); margin-bottom: 4px; color: var(--text-primary); }
.schedule-info p { color: var(--text-secondary); font-size: var(--font-size-sm); }

.schedule-days {
    display: flex; flex-direction: column; gap: var(--spacing-md);
}

.day-block {
    background: var(--surface-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.day-header {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-gradient-end));
    color: var(--text-on-primary);
    font-weight: 600;
    font-size: var(--font-size-lg);
    padding: 10px var(--spacing-md);
    text-align: center;
}

.classes-container {
    display: flex; flex-direction: column;
}

.class-slot {
    display: flex; align-items: stretch; border-bottom: 1px solid var(--border-color);
}
.class-slot:last-child { border-bottom: none; }

.class-time {
    width: 70px; min-width: 70px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: var(--font-size-sm); color: var(--text-secondary);
    background-color: var(--class-time-bg);
    border-right: 1px solid var(--border-color);
}

.class-info {
    flex: 1; display: flex; align-items: stretch; padding: var(--spacing-sm);
}

.class-common {
    flex-direction: column; justify-content: center;
    align-items: center; text-align: center;
}

.class-split {
    display: flex; flex-direction: row; padding: 0;
}

.subgroup {
    flex: 1; display: flex; flex-direction: column; justify-content: center;
    align-items: center; text-align: center;
    padding: var(--spacing-sm);
}
.subgroup-a { border-right: 1px dashed var(--border-color); }
.subgroup-b { }

.class-detail { margin-bottom: 2px; }
.class-title { font-weight: 700; font-size: var(--font-size-base); color: var(--text-primary); }

.class-meta {
    display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm); color: var(--text-secondary);
}

.class-type {
    display: inline-block; padding: 2px 6px; border-radius: 4px;
    font-weight: 600; font-size: 10px; text-transform: uppercase;
}
.class-type-lecture { background-color: var(--class-lecture-bg); color: var(--class-lecture-text); }
.class-type-practice { background-color: var(--class-practice-bg); color: var(--class-practice-text); }
.class-type-seminar { background-color: var(--class-seminar-bg); color: var(--class-seminar-text); }
.class-type-lab { background-color: var(--class-lab-bg); color: var(--class-lab-text); }

.empty-state {
    background-color: var(--surface-color);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-xl); text-align:center; color: var(--text-secondary); box-shadow: var(--shadow);
}
.empty-state p { font-size: var(--font-size-lg); margin-bottom: var(--spacing-md); }

.welcome-section {
    background-color: var(--surface-color);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg); box-shadow: var(--shadow); text-align:center;
}
.welcome-content h2 { font-size: var(--font-size-xl); margin-bottom: var(--spacing-md); color: var(--text-primary); }
.welcome-content p { color: var(--text-secondary); margin-bottom: var(--spacing-md); }
.feature-list { list-style:none; text-align:left; display:inline-block; }
.feature-list li { padding: var(--spacing-sm) 0; color: var(--text-secondary); }

.footer {
    background-color: var(--surface-color);
    padding: var(--spacing-md);
    text-align:center; border-top:1px solid var(--border-color); flex-shrink:0;
    color: var(--text-light); font-size: var(--font-size-sm);
    border-top-left-radius: 20px; border-top-right-radius: 20px;
}

.hidden { display:none !important; }

@media (max-width: 360px) {
    .class-time { width: 60px; min-width: 60px; font-size: 11px; }
    .day-header { font-size: var(--font-size-base); padding: 8px; }
    .class-title { font-size: 13px; }
    .class-meta { font-size: 11px; }
}

@media (prefers-color-scheme: dark) {
    :root {
        --primary-color: rgb(99, 163, 193);
        --primary-hover: #5e98bc;
        --error-color: #EF9A9A;
        --bg-primary: #2C2C2E;
        --bg-secondary: #3A3A3C;
        --text-primary: #fbf3e5;
        --text-secondary: #fbf3e5;
        --text-light: #b4b4ae;
        --border-color: #4A4A4C;
        --shadow: 0 2px 8px rgba(0,0,0,0.2);
        --shadow-md: 0 4px 16px rgba(0,0,0,0.3);
        --surface-color: #3A3A3C;
        --input-bg: #3A3A3C;
        --class-time-bg: #323234;
        --error-bg: #3A2A2A;
        --primary-gradient-end: #6A96AB;
        --header-gradient-start: #5A7F8C;
        --header-gradient-end: #4A6A7A;
        --focus-ring: rgba(123,167,188,0.3);

        --class-lecture-bg: #1A365D;
        --class-lecture-text: #90CAF9;
        --class-practice-bg: #1B3B1B;
        --class-practice-text: #A5D6A7;
        --class-seminar-bg: #4A3A00;
        --class-seminar-text: #FFB74D;
        --class-lab-bg: #3A1A4A;
        --class-lab-text: #CE93D8;
    }

    /* Единственное, что приходится переопределять отдельно – стрелка в select, 
       так как она встроена в data URI */
    .select-input {
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F0F0F0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    }
}