:root {
    --red: rgb(170, 39, 47);
    --black: rgb(0, 0, 0);
    --light-grey: rgb(188, 189, 188);
    --dark-grey: rgb(116, 118, 120);
    --white: rgb(255, 255, 255);
    --yellow: rgb(255, 193, 7);
}

body { 
    font-family: 'Segoe UI', Arial, sans-serif; 
    background: var(--light-grey); 
    margin: 0; 
    padding: 0; 
    color: var(--black); 
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

header { background: var(--red); color: var(--white); padding: 10px 0; width: 100%; }
.header-container { max-width: 800px; margin: 0 auto; display: flex; align-items: center; gap: 15px; padding: 0 15px; }
.logo { height: 40px; }
header h1 { margin: 0; font-size: 1.2rem; }

/* Адаптация рабочей области - растягивание по ширине экрана */
.screen { 
    background: var(--white); 
    max-width: 800px; 
    width: calc(100% - 30px);
    margin: 15px auto;
    padding: 20px; 
    border-radius: 8px; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); 
    box-sizing: border-box;
}

/* Landscape режим - растянуть на всю ширину с отступами 15px */
@media (orientation: landscape) {
    .screen {
        max-width: none;
        width: calc(100% - 30px);
        margin: 15px;
    }
    
    .header-container {
        max-width: none;
    }
}

/* Portrait режим - стандартное поведение */
@media (orientation: portrait) {
    .screen {
        max-width: 800px;
        width: calc(100% - 30px);
        margin: 15px auto;
    }
}

/* Мобильные устройства Portrait - уменьшенные отступы */
@media (max-width: 767px) and (orientation: portrait) {
    .screen {
        width: calc(100% - 20px);
        margin: 10px auto;
        padding: 15px;
    }
}

.hidden { display: none !important; }

button { border: none; border-radius: 4px; cursor: pointer; font-weight: bold; transition: opacity 0.2s; }
button:active { opacity: 0.8; }

.mode-selector { display: flex; gap: 10px; margin-bottom: 15px; }
.mode-btn { flex: 1; padding: 12px; border: 1px solid var(--dark-grey); background: var(--white); color: var(--dark-grey); }
.mode-btn.active { background: var(--red); color: var(--white); border-color: var(--red); }

.main-btn { background: var(--red); color: var(--white); width: 100%; padding: 15px; font-size: 16px; margin-top: 10px; }
.secondary-btn { background: var(--dark-grey); color: var(--white); width: 100%; padding: 12px; margin-top: 10px; }

.navigation-controls { display: flex; gap: 10px; margin-top: 20px; }
.nav-button { flex: 1; background: var(--dark-grey); color: var(--white); padding: 15px; }
.finish-btn { flex: 1; background: var(--red); color: var(--white); padding: 15px; }

input[type="text"], textarea { 
    width: 100%; 
    padding: 12px; 
    margin: 8px 0; 
    border: 1px solid var(--dark-grey); 
    border-radius: 4px; 
    box-sizing: border-box; 
}
textarea { font-size: 1.1rem; }

.check-item, .radio-option { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid #f0f0f0; }
.check-item input, .radio-option input { 
    width: 22px; 
    height: 22px; 
    accent-color: var(--dark-grey);
    flex-shrink: 0; 
    cursor: pointer; 
}

input[type="file"] { color: var(--dark-grey); font-size: 0.9rem; margin-top: 5px; }

.item-divider {
    border-top: 1px dashed var(--dark-grey);
    margin: 20px 0 10px;
    padding-top: 5px;
    color: var(--dark-grey);
    font-size: 0.85rem;
    font-weight: bold;
    text-transform: uppercase;
}

.subname-title { background: #f4f4f4; padding: 8px 12px; margin: 25px 0 10px; border-left: 5px solid var(--red); font-size: 1.1rem; }
.topitem-title { color: var(--red); margin: 15px 0 5px 10px; font-size: 0.95rem; border-bottom: 1px solid #ffcccc; padding-bottom: 3px; }

.detail-item { background: #fdfdfd; padding: 15px; border-radius: 6px; margin: 15px 0; border: 1px solid var(--light-grey); }

.rating-summary { background: #333; color: white; padding: 20px; border-radius: 8px; margin-bottom: 30px; }
.rating-summary h3 { margin-top: 0; color: var(--red); }
.rating-block { padding: 8px 0; border-bottom: 1px solid #555; }
.rating-block:last-child { border-bottom: none; }
.score-val { color: var(--red); font-weight: bold; }

/* Разделитель внутри блока Сводная оценка */
.competencies-rating-divider {
    border-top: 2px solid #666;
    margin: 15px 0 10px;
    padding-top: 10px;
}

.competencies-rating-title {
    color: var(--red);
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 10px;
}

.report-meta p { margin: 5px 0; border-bottom: 1px solid #eee; padding-bottom: 3px; }
.report-main-title { color: var(--red); border-bottom: 3px solid var(--red); padding-bottom: 10px; }

/* Стили для стандартных процедур - уменьшенный шрифт и без bold */
.flex-row { display: flex; align-items: center; gap: 10px; }
.icon-ok { color: green; font-weight: normal; font-size: 1rem; }
.icon-fail { color: var(--red); font-weight: normal; font-size: 1rem; }

/* Убрать margin после названия в стандартных процедурах */
.report-item-row p {
    margin: 0 !important;
}

.report-item-row {
    margin-bottom: 15px;
}

/* Стили для техники пилотирования */
.report-radio-item {
    margin-bottom: 15px;
}

.report-radio-item p {
    margin: 0 !important;
}

.report-radio-item > div {
    margin-bottom: 15px;
}

/* Разделитель перед детальным блоком компетенций */
.competencies-divider {
    border-top: 3px solid var(--dark-grey);
    margin: 40px 0 30px;
    padding-top: 20px;
}

.competencies-title {
    color: var(--red);
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 20px;
}

/* Стили для компетенций - только линия слева */
.competency-item {
    padding: 8px 0 8px 15px;
    margin: 5px 0;
    line-height: 1.5;
}

.comp-yellow {
    border-left: 4px solid var(--yellow);
    padding-left: 15px;
}

.comp-red {
    border-left: 4px solid var(--red);
    padding-left: 15px;
}

.signature-section { margin-top: 30px; border-top: 2px solid var(--black); padding-top: 15px; }
canvas { border: 1px solid var(--black); background: #fff; width: 100%; height: 150px; touch-action: none; }

@media print {
    header, .no-print, .navigation-controls, .mode-selector, .main-btn, .secondary-btn { display: none !important; }
    body { background: white !important; }
    .screen { max-width: 100% !important; width: 100% !important; margin: 0 !important; box-shadow: none !important; padding: 0 !important; }
}