/* =========================================
   1. STYLES GÉNÉRAUX
   ========================================= */
.reveal h1, .reveal h2, .reveal h3 {
    color: #2c3e50;
    text-transform: none;
    margin-bottom: 20px; /* Уменьшили отступ заголовков */
}

.reveal p, .reveal li {
    font-size: 0.9em;
}

.highlight { color: #e74c3c; font-weight: bold; }
.small-font { font-size: 0.7em !important; }
.text-left { text-align: left; }
.text-grey { color: #7f8c8d; }

/* Цвета текста */
.text-green { color: #27ae60; }
.text-blue { color: #2980b9; }
.text-orange { color: #f39c12; }

/* =========================================
   2. IMAGES (ИСПРАВЛЕНО: Сделали крупнее)
   ========================================= */

.img-responsive {
    /* Разрешаем картинке быть шире (до 55% экрана) */
    max-width: 55% !important; 
    /* Ограничиваем высоту, но даем больше свободы (до 450px) */
    max-height: 450px !important; 
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto; 
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* =========================================
   3. MISE EN PAGE
   ========================================= */

.grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

.flex-center {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px;
    width: 100%;
}

.flex-1 { 
    flex: 1; 
    min-width: 0;
}

/* Компоненты UI */
.box {
    border-left: 5px solid #3498db;
    padding: 15px; /* Чуть меньше паддинг */
    background: #f8f9fa;
    text-align: left;
    margin-bottom: 15px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.05);
}

.card-concept { padding: 15px; border-radius: 10px; font-size: 0.8em; }
.bg-green { background: #e8f6f3; }
.bg-blue { background: #eaf2f8; }
.bg-orange { background: #fef9e7; }
.bg-orange-light { background: #fdf2e9; }
.bg-red-light { background: #fadbd8; }
.border-orange { border-left-color: #e67e22; }
.border-red { border-left-color: #c0392b; }

/* =========================================
   4. ИСТОРИЯ ЖАНА
   ========================================= */
.story-container {
    display: flex;
    align-items: stretch;
    gap: 15px;
    margin-top: 20px;
}
.story-step {
    flex: 1; background: white; padding: 10px; border-radius: 8px; border: 1px solid #eee; text-align: center; font-size: 0.8em;
}
.story-icon { font-size: 2em; display: block; margin-bottom: 5px; }
.bill-total {
    background: #fadbd8; color: #c0392b; padding: 10px 20px; font-weight: bold; border-radius: 5px; margin-top: 15px; display: inline-block;
}

/* =========================================
   5. КАЛЬКУЛЯТОР (ИСПРАВЛЕНО: Компактнее)
   ========================================= */

.calculator-container {
    display: flex;
    gap: 20px; /* Уменьшили расстояние между панелью и графиком */
    align-items: center;
    justify-content: center;
    margin-top: 10px; /* Подняли повыше */
}

.control-panel {
    width: 40%;
    font-size: 0.75em; /* Чуть уменьшили шрифт панели */
    background: #fff;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.input-group { margin-bottom: 8px; text-align: left; }
.input-group label { display: block; font-size: 0.9em; color: #555; margin-bottom: 2px; }
.input-group input, .input-group select {
    font-size: 1.1em; padding: 5px; width: 100%; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box;
}

.calc-btn {
    background-color: #27ae60; color: white; border: none;
    padding: 8px; font-size: 1em; border-radius: 5px; cursor: pointer; width: 100%; margin-top: 8px;
}
.calc-btn:hover { background-color: #219150; }

.result-box {
    margin-top: 10px; padding: 10px; background: #ecf0f1; border-radius: 5px; min-height: 60px;
}

/* === ГЛАВНОЕ ИСПРАВЛЕНИЕ ГРАФИКА === */
.chart-wrapper {
    width: 55%;        /* Даем графику чуть больше ширины */
    height: 300px;     /* ФИКСИРОВАННАЯ ВЫСОТА (было 350-400px, это слишком много) */
    position: relative;
}

.credits {
    margin-top: 30px; font-size: 0.5em; border-top: 1px solid #ddd; padding-top: 10px; color: #95a5a6;
}