/* === ОСНОВНОЙ КОНТЕЙНЕР === */
.fp-app {
    max-width: 970px;
    margin: 0 auto 30px;
    font-family: 'Roboto', 'Segoe UI', Helvetica, Arial, sans-serif;
    background: #ffffff;
    padding: 25px;
    color: #333;
    border: 1px solid #ddd;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border-radius: 6px;
    font-size: 15px;
    box-sizing: border-box;
    line-height: 1.5;
}

/* === ЗАГОЛОВКИ === */
.fp-title {
    font-size: 22px;
    font-weight: 700;
    color: #003366;
    margin: 0 0 20px 0;
    padding-bottom: 10px;
    border-bottom: 3px solid #21A038;
    text-transform: uppercase;
    display: flex;
    align-items: center;
}
.fp-title::before { 
    content: ''; 
    display: inline-block; 
    width: 8px; 
    height: 8px; 
    background: #21A038; 
    border-radius: 50%; 
    margin-right: 10px; 
}

/* === ЛЕНТА ТИПОВ (ШАГ 1) === */
.fp-type-grid { 
    display: flex; 
    gap: 10px; 
    margin-bottom: 25px; 
    overflow-x: auto; 
    padding-bottom: 5px; 
}
.fp-tile {
    flex: 1; 
    min-width: 100px; 
    background: #f4f6f8; 
    border: 1px solid #ddd; 
    border-radius: 6px;
    padding: 12px 5px; 
    text-align: center; 
    cursor: pointer; 
    transition: all 0.2s;
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    height: 80px;
}
.fp-tile:hover { 
    border-color: #21A038; 
    background: #fff; 
    transform: translateY(-2px); 
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); 
}
.fp-tile.active { 
    background: #003366; 
    border-color: #003366; 
    color: #fff; 
}
.fp-tile-icon { 
    font-size: 28px; 
    margin-bottom: 6px; 
    color: #8898aa; 
    line-height: 1; 
}
.fp-tile:hover .fp-tile-icon { color: #21A038; }
.fp-tile.active .fp-tile-icon { color: #fff; }
.fp-tile span:last-child { font-size: 13px; font-weight: 600; line-height: 1.2; }

/* === ВЫБОР СТАНДАРТА (ШАГ 2) === */
.fp-label-head { font-weight: 700; font-size: 16px; margin-bottom: 10px; display: block; color: #444; }
.fp-std-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.fp-std-tile { 
    padding: 8px 16px; 
    background: #fff; 
    border: 1px solid #ccc; 
    border-radius: 4px; 
    font-size: 14px; 
    cursor: pointer; 
    color: #555; 
    transition: all 0.2s; 
}
.fp-std-tile:hover { border-color: #21A038; color: #21A038; }
.fp-std-tile.active { background: #003366; color: #fff; border-color: #003366; }

/* === РАБОЧАЯ ОБЛАСТЬ (2 КОЛОНКИ) === */
.fp-work-area {
    display: flex; 
    gap: 25px; 
    align-items: flex-start;
    min-height: 400px;
}

/* ЛЕВАЯ КОЛОНКА - ВВОД */
.fp-col-input {
    flex: 0 0 50%; /* Половина экрана */
    min-width: 300px;
    display: flex; 
    flex-direction: column;
}

/* ПРАВАЯ КОЛОНКА - РЕЗУЛЬТАТ */
.fp-col-result {
    flex: 1;
    display: flex; 
    flex-direction: column; 
    gap: 15px;
}

/* Старый select (для I-beam) */
.fp-list-select { 
    width: 100%; 
    height: 400px; 
    border: 1px solid #ccc; 
    border-radius: 4px; 
    padding: 8px; 
    font-size: 14px; 
    background: #fdfdfd; 
}
.fp-list-select optgroup { font-weight: 700; background: #eee; color: #003366; font-size: 14px; }
.fp-list-select option { padding: 6px; border-bottom: 1px solid #f9f9f9; }

/* КАСКАДНЫЕ СПИСКИ */
.fp-cascading-wrap {
    display: flex; 
    gap: 10px; 
    height: 400px; /* Фиксированная высота */
}

.fp-list-col {
    flex: 1;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    display: flex; 
    flex-direction: column;
    overflow: hidden;
}

.fp-col-header {
    background: #f0f0f0;
    padding: 8px;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    border-bottom: 1px solid #ccc;
    color: #003366;
}

.fp-col-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

.fp-list-item {
    padding: 8px 10px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    font-size: 14px;
    text-align: center;
}
.fp-list-item:hover { background: #f9f9f9; color: #21A038; }
.fp-list-item.active { background: #003366; color: #fff; }

/* === ВИЗУАЛИЗАЦИЯ (КАРТИНКА) === */
.fp-col-visual {
    background: #fff; 
    border: 1px solid #e0e0e0; 
    border-radius: 4px;
    position: relative; 
    padding: 10px;
    display: flex; 
    align-items: center; 
    justify-content: center;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.03);
    overflow: hidden;
    height: 250px; /* Компактная высота */
}
.fp-visual-header { 
    top: 5px; 
    font-size: 10px; 
    font-weight: 600; 
    color: #888; 
    width: 100%; 
    text-align: center; 
    position: absolute; 
    text-transform: uppercase; 
    pointer-events: none; 
}

/* === ХАРАКТЕРИСТИКИ === */
.fp-stat-card {
    background: #f8f9fa; 
    border: 1px solid #e0e0e0; 
    border-radius: 4px;
    padding: 15px; 
    box-sizing: border-box;
}
.fp-stat-card h4 { font-size: 15px; margin: 0 0 15px 0; border-bottom: 2px solid #ddd; padding-bottom: 8px; text-transform: uppercase; color: #003366; font-weight: 700; }
.fp-stat-rows { display: flex; flex-direction: column; gap: 8px; }
.fp-stat-row { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px dotted #ccc; padding-bottom: 4px; }
.fp-stat-label { color: #444; font-size: 13px; font-weight: 600; line-height: 1.3; margin-right: 10px; }
.fp-stat-val { font-family: 'Consolas', monospace; font-weight: 600; color: #000; font-size: 15px; white-space: nowrap; }
.fp-stat-val small { font-size: 12px; color: #777; margin-left: 2px; }
.fp-divider { margin: 8px 0; background: #ddd; height: 1px; }

/* === INPUTS (Ручной ввод) === */
.fp-inp-wrap { margin-bottom: 15px; } 
.fp-inp-wrap label { font-size: 14px; margin-bottom: 5px; font-weight: 600; display:block; }
.fp-input { padding: 8px 10px; font-size: 15px; height: 40px; width: 100%; box-sizing: border-box; border-radius: 4px; border:1px solid #ccc; }

/* === SVG СТИЛИ === */
svg#profileSvg { width: 100%; height: 100%; }
.profile-body { fill: #c0c8d0; stroke: #5c6b7f; stroke-width: 1px; vector-effect: non-scaling-stroke; }

/* Линия обводки (выделение) */
.side-coating { 
    stroke: #21A038; 
    stroke-width: 2px; /* Сделано тоньше по запросу */
    fill: none; 
    stroke-linecap: round; 
    pointer-events: none; 
    transition: opacity 0.2s; 
    vector-effect: non-scaling-stroke; 
    stroke-opacity: 1; /* Четкость */
}

/* Зона клика (невидимая толстая линия) */
.side-click-area { 
    stroke: transparent; 
    stroke-width: 22px; 
    fill: none; 
    cursor: pointer; 
    vector-effect: non-scaling-stroke; 
}
.side-click-area:hover { stroke: rgba(33, 160, 56, 0.25); }

.wall-hatch { fill: url(#wallHatch); opacity: 0; pointer-events: none; } 
.wall-hatch.visible { opacity: 1; }

.dim-text { 
    font-size: 18px; 
    fill: #000; 
    font-weight: 400; 
    text-anchor: middle; 
    font-family: Arial, sans-serif; 
    pointer-events: none; 
    text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff; 
}
.dim-line { stroke: #333; stroke-width: 1.5px; vector-effect: non-scaling-stroke; pointer-events: none; }

/* === ТАБЫ И ТАБЛИЦА (ШАГ 3) === */
#fpStep3 { margin-top: 30px !important; }
.fp-tabs-header { display: flex; border-bottom: 2px solid #003366; background: #f0f0f0; }
.fp-tab-btn { padding: 12px 20px; background: transparent; border: none; border-right: 1px solid #ddd; cursor: pointer; font-size: 14px; font-weight: 700; color: #555; }
.fp-tab-btn:hover { background: #e9e9e9; color: #000; }
.fp-tab-btn.active { background: #003366; color: #fff; border-bottom: 2px solid #003366; margin-bottom: -2px; }
.fp-tabs-content { border: 1px solid #ccc; border-top: none; background: #fff; padding: 10px; overflow-x: auto; }
.fp-tab-pane { display: none; padding: 0; } .fp-tab-pane.active { display: block; }

/* ТАБЛИЦА */
.fp-paint-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.fp-paint-table th { 
    background: #f2f2f2; 
    padding: 12px; 
    text-align: center; 
    border-bottom: 2px solid #ccc; 
    color: #333; 
    font-weight: 700; 
    vertical-align: middle; 
}
.fp-paint-table td { 
    padding: 10px 12px; 
    border-bottom: 1px solid #eee; 
    color: #333; 
    text-align: center; 
    vertical-align: middle; /* Центрирование по вертикали для rowspan */
    font-weight: 600;
}
.fp-paint-table tr:hover td { background: #f0fff4; }

/* Итоговые значения (черный цвет) */
.fp-paint-table strong { color: #000; font-weight: 600; }

/* Значения расхода и толщины (зеленый цвет) */
.fp-val-green {
    color: #21A038 !important;
    font-weight: 600;
}

/* === СТИЛИ ДЛЯ ЯЧЕЕК СЛОЕВ === */
.fp-cell-center { 
    vertical-align: middle !important; 
    background: #fff; 
    border-right: 1px solid #eee; 
    font-weight: bold; 
}

/* Контейнер внутри ячейки для разделения "Слой" и "Значение" */
.fp-cell-wrap {
    display: flex;
    justify-content: space-between; 
    align-items: center;
    width: 100%;
}

.fp-small-label {
    font-size: 9px;
    color: #999;
    font-weight: normal;
    white-space: nowrap;
    margin-right: 15px;
}

.fp-value {
    font-weight: normal;
    font-size: 14px;
    color: #000; /* Цвет цифр по умолчанию черный, перезаписывается fp-val-green */
    margin-left: auto;
    font-weight: 600;
}

/* АДАПТИВНОСТЬ */
@media (max-width: 900px) {
    .fp-work-area { flex-direction: column; }
    .fp-col-input, .fp-col-result { flex: none; width: 100%; }
    .fp-cascading-wrap, .fp-list-select { height: 300px; }
}