* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    font-family: Consolas, "Courier New", monospace;
    background: #d8d8d8;
    color: #161616;
    font-size: 13px;
}

.app {
    width: 1280px;
    margin: 0 auto;
    padding: 10px;
}

.app-header {
    background: #cfcfcf;
    border: 1px solid #7e7e7e;
    padding: 10px 12px;
    margin-bottom: 10px;
}

.app-header h1 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}

.panel {
    background: #d2d2d2;
    border: 1px solid #7e7e7e;
    margin-bottom: 10px;
    padding: 10px;
}

.panel-title {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 10px;
    padding-bottom: 4px;
    border-bottom: 1px solid #8b8b8b;
    text-transform: uppercase;
}

.controls-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: end;
}

.controls-row label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    min-width: 150px;
}

input[type="number"],
.matrix-input {
    height: 28px;
    padding: 4px 6px;
    border: 1px solid #787878;
    background: #f3f3f3;
    color: #111111;
    font-family: inherit;
    font-size: 12px;
}

input[type="number"]:focus,
.matrix-input:focus {
    outline: none;
    background: #ffffff;
    border-color: #4a4a4a;
}

input[type="range"] {
    width: 180px;
    accent-color: #5a5a5a;
}

button {
    height: 28px;
    min-width: 120px;
    border: 1px solid #666666;
    background: #e6e6e6;
    padding: 0 10px;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    color: #111111;
}

button:hover {
    background: #dcdcdc;
}

button.primary {
    background: #c4c4c4;
    border-color: #585858;
    font-weight: 700;
}

button.primary:hover {
    background: #b7b7b7;
}

.buttons-row {
    margin-top: 8px;
}

.muted-text {
    color: #343434;
    font-size: 12px;
    margin-bottom: 8px;
}

.matrix-wrap,
.table-wrap,
.canvas-wrap {
    overflow: auto;
    border: 1px solid #818181;
    background: #ededed;
}

.matrix-table,
.result-table {
    border-collapse: collapse;
    width: 100%;
    min-width: max-content;
}

.matrix-table th,
.matrix-table td,
.result-table th,
.result-table td {
    border: 1px solid #8a8a8a;
    padding: 4px 6px;
    text-align: center;
    font-size: 12px;
}

.matrix-table th,
.result-table th {
    background: #c3c3c3;
    font-weight: 700;
}

.matrix-table td:first-child,
.result-table td:first-child {
    background: #d7d7d7;
    font-weight: 700;
}

.matrix-input {
    width: 52px;
    text-align: center;
}

.methods-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.method-box,
.gantt-block,
.best-method-line,
.bi-block {
    border: 1px solid #868686;
    background: #d9d9d9;
    padding: 8px;
}

.method-box-title,
.gantt-title,
.chart-title {
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.check-line {
    display: block;
    font-size: 12px;
    margin-bottom: 6px;
}

.analysis-text,
.best-method-line {
    font-size: 12px;
    color: #1b1b1b;
    line-height: 1.4;
}

.gantt-controls {
    margin-bottom: 10px;
}

canvas {
    display: block;
    background: #ffffff;
}

.top-gap {
    margin-top: 10px;
}

@media (max-width: 1320px) {
    .app {
        width: 100%;
    }
}