:root {
  --tekst: #1c1c1a;
  --tiho: #6b6b66;
  --fon: #faf9f7;
  --karta: #fff;
  --ramka: #e2e0da;
  --akcent: #2f5d50;
  --horosho: #1f7a4d;
  --horosho-fon: #eaf5ee;
  --vnimanie: #8a6100;
  --vnimanie-fon: #fdf4e0;
  --ploho: #9b2c22;
  --ploho-fon: #fbecea;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fon);
  color: var(--tekst);
  font: 15px/1.5 -apple-system, "Segoe UI", Roboto, sans-serif;
}

main { max-width: 1000px; margin: 0 auto; padding: 24px 20px 80px; }

h1 { font-size: 24px; margin: 0 0 4px; }
h2 { font-size: 18px; margin: 36px 0 12px; }

a { color: var(--akcent); }

.tiho { color: var(--tiho); font-size: 13px; }
.chislo { font-variant-numeric: tabular-nums; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }

/* шапка */
.shapka {
  display: flex; align-items: center; gap: 24px;
  padding: 12px 20px; background: var(--karta);
  border-bottom: 1px solid var(--ramka);
}
.shapka .logo { font-weight: 600; text-decoration: none; }
.shapka nav { display: flex; gap: 18px; flex: 1; }
.shapka nav a { text-decoration: none; color: var(--tiho); }
.shapka nav a:hover { color: var(--tekst); }
.shapka .kto { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--tiho); }

/* вход */
.vhod { max-width: 340px; margin: 12vh auto; }
.vhod form { margin-top: 20px; display: grid; gap: 14px; }

/* формы */
label { display: block; font-size: 13px; color: var(--tiho); }
input, select {
  display: block; width: 100%; margin-top: 4px; padding: 8px 10px;
  border: 1px solid var(--ramka); border-radius: 6px;
  background: #fff; color: var(--tekst); font: inherit;
}
input:focus, select:focus { outline: 2px solid var(--akcent); outline-offset: -1px; }
input[readonly] { background: #f3f2ef; color: var(--tiho); }

button {
  padding: 9px 16px; border: 0; border-radius: 6px;
  background: var(--akcent); color: #fff; font: inherit; cursor: pointer;
}
button:hover { filter: brightness(1.1); }
button.prosto {
  background: none; color: var(--tiho); padding: 4px 6px;
  text-decoration: underline; font-size: 13px;
}
button.prosto:hover { color: var(--tekst); }

.knopka {
  display: inline-block; padding: 9px 16px; border-radius: 6px;
  background: var(--akcent); color: #fff; text-decoration: none;
}

.forma { max-width: 760px; display: grid; gap: 14px; margin-top: 16px; }
.forma.polya { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.knopki { grid-column: 1 / -1; }
.vryad { display: flex; gap: 6px; align-items: flex-end; }
.vryad input { width: 150px; }

.polosa { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

/* таблицы */
table { width: 100%; border-collapse: collapse; margin-top: 16px; background: var(--karta); }
th, td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--ramka); vertical-align: top; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--tiho); font-weight: 600; }
tr.vyklyuchen td { opacity: .45; }

/* метки состояния */
.metka {
  display: inline-block; padding: 2px 8px; border-radius: 20px;
  font-size: 12px; font-weight: 600;
}
.metka.horosho { background: var(--horosho-fon); color: var(--horosho); }
.metka.vnimanie { background: var(--vnimanie-fon); color: var(--vnimanie); }
.metka.ploho { background: var(--ploho-fon); color: var(--ploho); }
.metka.zhdyom { background: #eef1f5; color: #4a5568; }

/* итоговая полоса пачки */
.itog {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  margin: 20px 0; padding: 16px 18px; border-radius: 10px; border: 1px solid;
}
.itog p { margin: 4px 0 0; }
.itog.horosho { background: var(--horosho-fon); border-color: #bfe0cb; }
.itog.vnimanie { background: var(--vnimanie-fon); border-color: #e8d6a8; }
.itog.zhdyom { background: #eef1f5; border-color: #d5dce5; }

/* карточка счёта */
.schet {
  background: var(--karta); border: 1px solid var(--ramka);
  border-radius: 10px; padding: 14px 16px; margin-bottom: 14px;
  border-left: 4px solid var(--ramka);
}
.schet.ok { border-left-color: var(--horosho); }
.schet.problem { border-left-color: var(--vnimanie); }
.schet.failed { border-left-color: var(--ploho); }
.schet.vyklyuchen { opacity: .5; }
.schet > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.schet .polya {
  display: grid; gap: 12px; margin-top: 14px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.schet .polya .shiroko { grid-column: 1 / -1; }
.naznachenie {
  margin: 0; padding: 8px 12px; border-radius: 6px;
  background: #f3f2ef; font-size: 13px; word-break: break-word;
}
.pereznaznachit { display: flex; gap: 8px; align-items: center; }
.pereznaznachit select { width: auto; margin: 0; }

.problemy {
  margin: 12px 0 0; padding: 10px 14px 10px 30px;
  background: var(--vnimanie-fon); border-radius: 6px;
  color: var(--vnimanie); font-size: 13px;
}

.oshibka {
  padding: 10px 14px; border-radius: 6px;
  background: var(--ploho-fon); color: var(--ploho);
}
.zametka {
  padding: 10px 14px; border-radius: 6px;
  background: #eef1f5; color: #4a5568; font-size: 13px;
}
code { font-family: ui-monospace, Consolas, monospace; background: #eceae5; padding: 1px 5px; border-radius: 4px; }

/* Что программа прочитала в документе — для разбора, когда не сошлось */
.vypiska {
  max-height: 22rem;
  overflow: auto;
  padding: .75rem 1rem;
  background: #fbfbf9;
  border: 1px solid #e3e3dd;
  border-radius: 6px;
  font-size: .8rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}