:root {
  --bg: #f4f6f3;
  --panel: #ffffff;
  --ink: #1f2a28;
  --muted: #66736f;
  --line: #dbe3df;
  --green: #18664f;
  --green-soft: #e7f3ee;
  --red: #c94135;
  --red-soft: #fdecea;
  --ochre: #b7791f;
  --ochre-soft: #fff4db;
  --blue: #2563eb;
  --blue-soft: #eaf1ff;
  --shadow: 0 18px 40px rgba(31, 42, 40, .08);
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, Segoe UI, Roboto, Arial, sans-serif; background: var(--bg); color: var(--ink); }
/*.app-header {
    position: relative;
    display: flex; justify-content: center;
    gap: 24px;
    align-items: center;
    padding: 34px 44px;
    background: linear-gradient(135deg, #153f34, #286e55);
    color: #fff;
}*/
.app-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 10px 20px;
    gap: 12px;
    /*padding: 34px 44px;*/
    background: linear-gradient(135deg, #153f34, #286e55);
    color: #fff;
}
.eyebrow {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0 0 8px;
    text-transform: uppercase;
    letter-spacing: .12em;
    opacity: .75;
    font-size: 12px;
    font-weight: bold;
    justify-content: center;
}
    .eyebrow p {
        justify-content: left;
    }

    h1 {
        margin: 0;
        font-size: clamp(28px, 4vw, 42px);
    }
.subtitle { margin: 10px 0 0; opacity: .82; }
/*.header-card { min-width: 170px; padding: 18px; border-radius: 18px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.24); }*/
.label, .hint { color: var(--muted); font-size: 13px; }
/*.header-card .label { color: rgba(255,255,255,.72); display:block; margin-bottom:6px; }*/
.logo img {
    height: 50px;
    width: auto;
    display: block;
    justify-content: start;
}
/*.layout {
    display: grid; /*grid-template-columns: repeat(2, minmax(0, 1fr))
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "panel panel"
        "panel1 panel2"
        "panel wide panel wide"
        "";
    gap: 22px;
    padding: 26px 44px 44px;
}*/
.layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "employee employee"
        "range weight"
        "values values"
        "result result"
        "levels levels"
        "json json";
    gap: 22px;
    padding: 26px 44px 44px;
}
.employee-panel {
    grid-area: employee;
}

.range-panel {
    grid-area: range;
}

.weight-panel {
    grid-area: weight;
}

.values-panel {
    grid-area: values;
}

.result-panel {
    grid-area: result;
}

.levels-panel {
    grid-area: levels;
}

.json-panel {
    grid-area: json;
}

#jsonPanel {
    display: none;
}

/*.panel {
    grid-area: panel;
    width: 100%;
    max-width: auto;
    margin: auto;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 22px;
    box-shadow: var(--shadow);
}
.panel1 {
    grid-area: panel1;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 22px;
    box-shadow: var(--shadow);
}
.panel2 {
    grid-area: panel2;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 22px;
    box-shadow: var(--shadow);
}*/

.panel {
    width: 100%;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 22px;
    box-shadow: var(--shadow);
}

.panel-card {
    min-width: 170px;
    padding: 8px;
    border-radius: 18px;
    background: var(--green-soft);
    border: 1px solid rgba(255,255,255,.24);
    align-content: center;
}
/*.panel.wide { grid-column: 1 / -1; }*/
.panel-title { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:8px; }
.panel1-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 8px;
}
.panel2-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 8px;
}
h2 { margin:0; font-size:20px; }
.grid.two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 18px;
}
.grid2.two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.range-selectors { margin-top:16px; }
label { display:flex; flex-direction:column; gap:7px; font-weight:600; font-size:14px; }
input, select { width:100%; min-height:40px; border:1px solid var(--line); border-radius:12px; padding:9px 11px; font:inherit; background:#fff; color:var(--ink); }
input[readonly] { background:#f8faf9; color:var(--muted); }
button { border:0; border-radius:12px; font-weight:700; cursor:pointer; padding:10px 14px; }
.primary { background:var(--green); color:#fff; }
.ghost { background:var(--green-soft); color:var(--green); }
.icon { width:32px; height:32px; padding:0; }
.danger { background:var(--red-soft); color:var(--red); }
.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:16px; }
table { width:100%; border-collapse:collapse; min-width:820px; }
th, td { padding:12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle; }
th { background:#f8faf9; color:var(--muted); font-size:13px; }
tr:last-child td { border-bottom:0; }
.profile-summary { display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-top:16px; }
.profile-summary div { background:#f8faf9; border:1px solid var(--line); border-radius:16px; padding:14px; }
.profile-summary span { display:block; color:var(--muted); font-size:12px; margin-bottom:6px; }
.profile-summary strong { font-size:18px; }
.factors { display:grid; gap:14px; }
.factor-card, .criterion-card { border:1px solid var(--line); border-radius:16px; padding:14px; background:#fbfcfb; }
.factor-head { display:grid; grid-template-columns: 1fr 120px; gap:14px; align-items:center; }
.factor-name { font-weight:800; }
.weight-pill { display:flex; align-items:center; gap:8px; }
.criteria { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:16px; }
.criterion-title { display:flex; justify-content:space-between; gap:10px; margin-bottom:10px; font-weight:800; }
.range-line { display:grid; grid-template-columns: 1fr 70px; gap:10px; align-items:center; margin:7px 0; }
.range-line input[type="range"] { padding:0; }
.range-line output { text-align:right; font-weight:700; color:var(--green); }
.kpi-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
.kpi { background:#f8faf9; border:1px solid var(--line); border-radius:16px; padding:14px; }
.kpi span { color:var(--muted); font-size:13px; display:block; margin-bottom:6px; }
.kpi strong { font-size:24px; }
.verdict { margin-top:18px; padding:14px; border-radius:16px; font-weight:800; }
.verdict.low { background:var(--ochre-soft); color:var(--ochre); }
.verdict.high { background:var(--blue-soft); color:var(--blue); }
.verdict.neutral { background:#f4f6f3; color:var(--muted); }
.disclaimer { color:var(--muted); font-size:13px; margin-bottom:0; line-height:1.5; }
.legend { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:14px; color:var(--muted); font-size:13px; }
.legend span { display:inline-flex; align-items:center; gap:6px; }
.dot { width:10px; height:10px; border-radius:50%; display:inline-block; }
.target-dot { background:var(--red); }
.real-good-dot { background:var(--green); }
.real-low-dot { background:var(--ochre); }
.range-dot { background:var(--blue); }
.levels-table tr.faded { opacity:.16; }
.levels-table tr.in-range:not(.target):not(.real) { background:#f8fbff; }
.levels-table tr.target { background:var(--red-soft); outline:2px solid var(--red); }
.levels-table tr.real.good { background:var(--green-soft); outline:2px solid var(--green); }
.levels-table tr.real.low { background:var(--ochre-soft); outline:2px solid var(--ochre); }
.levels-table tr.real.same { background:#eef2ff; outline:2px solid var(--blue); }
.badge { display:inline-flex; padding:4px 8px; border-radius:999px; font-size:12px; font-weight:800; margin-left:6px; }
.badge.target { background:var(--red); color:#fff; }
.badge.real-good { background:var(--green); color:#fff; }
.badge.real-low { background:var(--ochre); color:#fff; }
.badge.range { background:var(--blue); color:#fff; }
pre { margin:0; background:#111827; color:#d1fae5; padding:18px; border-radius:16px; overflow:auto; min-height:200px; }
@media (max-width: 960px) {
  .layout { grid-template-columns:1fr; padding:18px; }
  .app-header { padding:26px 18px; flex-direction:column; align-items:flex-start; }
  .criteria { grid-template-columns:1fr; }
  .grid.two, .kpi-grid, .profile-summary { grid-template-columns:1fr; }
}