/* ============================================= */
/*          СТИЛИ СТРАНИЦЫ "TWITCH FARMER"       */
/* ============================================= */

/* --- Общие стили страницы --- */
main.auto-twitch-page {
    padding-top: 70px;
    padding-bottom: 40px;
}
.page-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
}
.page-title-section {
    text-align: center;
    margin-bottom: 30px;
}
.page-title-section h1 { font-size: 2.8rem; font-weight: 700; }
.page-title-section p { font-size: 1.1rem; color: #6c757d; }

/* --- Дашборд --- */
.dashboard {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 25px;
}
.panel {
    background-color: #fff;
    border: 1px solid #e9ecef;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.panel-header {
    padding: 15px 20px;
    border-bottom: 1px solid #e9ecef;
}
.panel-header h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}
.panel-body {
    padding: 20px;
}

/* --- Левая панель: Список стримов --- */
#streamList {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    max-height: 250px;
    overflow-y: auto;
}
#streamList li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-radius: 8px;
    word-break: break-all;
}
#streamList li:nth-child(odd) {
    background-color: #f8f9fa;
}
.delete-stream-btn {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    color: #dc3545;
    font-size: 1rem;
    cursor: pointer;
    border-radius: 50%;
    margin-left: 10px;
    transition: background-color 0.2s;
}
.delete-stream-btn:hover { background-color: #f8d7da; }
.add-stream-form {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    border-top: 1px solid #e9ecef;
    padding-top: 20px;
}
#streamUrlInput {
    flex-grow: 1;
    min-width: 0;
    padding: 10px;
    border: 1px solid #ced4da;
    border-radius: 8px;
}
.add-btn {
    flex-shrink: 0;
    border: none;
    background-color: #0d6efd;
    color: #fff;
    border-radius: 8px;
    font-size: 1.2rem;
    cursor: pointer;
}

/* --- Правая панель: Настройки и статус --- */
.settings .control-group { margin-bottom: 0; }
.control-group { display: flex; flex-direction: column; gap: 8px; }
.control-group label { font-weight: 500; font-size: 0.9rem; }
#intervalSlider { width: 100%; }
.interval-value { text-align: center; color: #6c757d; font-weight: 500; }

.status {
    display: flex;
    align-items: center;
    gap: 15px;
}
#statusLight {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background-color 0.3s;
}
.status-light-off { background-color: #6c757d; }
.status-light-on { background-color: #28a745; box-shadow: 0 0 10px #28a745; }
.status-text { display: flex; flex-direction: column; }
#statusText { font-size: 1.1rem; font-weight: 600; }
#nextStreamInfo { font-size: 0.85rem; color: #6c757d; }

.playback-controls {
    display: flex;
    gap: 10px;
    padding: 20px;
    border-top: 1px solid #e9ecef;
}
.control-btn {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.control-btn.start { background-color: #28a745; }
.control-btn.stop { background-color: #dc3545; }
.control-btn:disabled { background-color: #e9ecef; color: #6c757d; cursor: not-allowed; }


/* ============================================= */
/*          АДАПТАЦИЯ ДЛЯ ТЕМНОЙ ТЕМЫ            */
/* ============================================= */
.dark-theme .page-title-section p { color: #a0a0a0; }
.dark-theme .panel { background-color: #2c2c2e; border-color: #444; }
.dark-theme .panel-header { border-bottom-color: #444; }
.dark-theme #streamList li:nth-child(odd) { background-color: #3a3a3c; }
.dark-theme .delete-stream-btn:hover { background-color: #4e4f50; }
.dark-theme .add-stream-form { border-top-color: #444; }
.dark-theme #streamUrlInput { background-color: #1c1c1e; border-color: #555; color: #fff; }
.dark-theme .interval-value, .dark-theme #nextStreamInfo { color: #a0a0a0; }
.dark-theme .playback-controls { border-top-color: #444; }
.dark-theme .control-btn:disabled { background-color: #3a3a3c; color: #888; }


/* ============================================= */
/*             АДАПТИВНОСТЬ (MOBILE)             */
/* ============================================= */
@media (max-width: 992px) {
    .dashboard {
        grid-template-columns: 1fr;
    }
}