/* Интерфейс: шрифт и цвета прототипа (docs/prototype). IBM Plex Sans — SIL OFL 1.1, fonts/OFL.txt */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/ibm-plex-sans-cyrillic-400-normal.woff2") format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/ibm-plex-sans-cyrillic-500-normal.woff2") format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/ibm-plex-sans-cyrillic-600-normal.woff2") format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/ibm-plex-sans-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/ibm-plex-sans-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/ibm-plex-sans-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  --bg: #F3F4F1;
  --surface: #FFFFFF;
  --ink: #171A1E;
  --muted: #565C63;
  --line: #DCDFD8;
  --field-line: #C9CDC5;
  --accent: #1E4FB8;
  --accent-dark: #163C8C;
  --ok-bg: #E6F2EA;
  --ok: #1D6B3F;
  --error-bg: #FBE7E4;
  --error: #A3261B;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.45;
}

.card {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 32px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.brand { display: flex; flex-direction: column; gap: 2px; }
.brand-name { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.brand-sub { font-size: 13px; color: var(--muted); }

h1 { margin: 0; font-size: 24px; font-weight: 600; }
.intro { margin: 0; color: var(--muted); }

form { display: flex; flex-direction: column; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 6px; }
label { font-weight: 500; }
.hint { font-size: 13px; color: var(--muted); }

input {
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--field-line);
  border-radius: 8px;
  background: var(--surface);
  font: inherit;
  color: var(--ink);
}
input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

button {
  min-height: 48px;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: #FFFFFF;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}
button:hover { background: var(--accent-dark); }
button:disabled { opacity: 0.6; cursor: default; }

.message { margin: 0; padding: 12px 14px; border-radius: 8px; }
.message.ok { background: var(--ok-bg); color: var(--ok); }
.message.error { background: var(--error-bg); color: var(--error); }
[hidden] { display: none !important; }

/* Раскладка макета Login: тёмная колонка с описанием, справа форма */
body.split { display: flex; flex-wrap: wrap; align-items: stretch; padding: 0; }
.hero {
  flex: 1 1 420px;
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding: 64px 56px;
  background: var(--ink);
  color: var(--bg);
}
.hero .brand-sub { color: #B9BEB4; }
.hero-text { display: flex; flex-direction: column; gap: 24px; max-width: 460px; }
.hero h1 { font-size: 34px; line-height: 1.2; letter-spacing: -0.015em; }
.hero ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 12px; color: #DCDFD8; }
.panel {
  flex: 1 1 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 40px;
}
.panel-inner { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 20px; }
.panel h2 { margin: 0; font-size: 24px; font-weight: 600; }
.tabs { display: flex; gap: 4px; padding: 4px; background: #E4E7E1; border-radius: 10px; align-self: flex-start; }
.tabs a {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 7px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
}
.tabs a[aria-current="page"] { background: var(--surface); }
.label-row { display: flex; justify-content: space-between; align-items: baseline; }
a { color: var(--accent); }
a.small, .note { font-size: 13px; }
.note { margin: 0; color: var(--muted); }
.switch { margin: 0; }
button.secondary { background: transparent; color: var(--accent); border: 1px solid var(--field-line); }
button.secondary:hover { background: var(--bg); }
@media (max-width: 640px) {
  .hero, .panel { padding: 32px 20px; }
  .hero h1 { font-size: 26px; }
}

.panel-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.languages { display: flex; gap: 4px; font-size: 13px; }
.languages a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 36px;
  border: 1px solid var(--field-line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
}
.languages a[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }

body.centered { display: flex; align-items: center; justify-content: center; padding: 40px 16px; }
.card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }

/* ---- оболочка приложения (макет Main) ---- */
.muted { color: var(--muted); }
.small { font-size: 13px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
h2 { margin: 0; font-size: 18px; font-weight: 600; }
body.shell { display: flex; flex-wrap: wrap; }
.sidebar {
  flex: 1 1 232px;
  max-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px 16px;
  background: #ECEEE9;
  border-right: 1px solid var(--line);
  min-height: 100vh;
}
.sidebar .brand { padding: 0 8px; }
.sidebar .brand-name { font-size: 18px; }
.nav-links { display: flex; flex-direction: column; gap: 4px; }
.nav-links a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  color: var(--ink);
  text-decoration: none;
}
.nav-links a[aria-current="page"] { background: var(--surface); border-color: var(--line); font-weight: 500; }
.account { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding: 14px 8px 0; border-top: 1px solid var(--line); }
.account-name { display: flex; flex-direction: column; gap: 2px; font-weight: 500; }
.content {
  flex: 999 1 560px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px 40px 56px;
}
.content h1 { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.01em; }
a.button, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 8px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}
a.button.primary, button.primary { background: var(--accent); color: #FFFFFF; border: 0; }
a.button.secondary, label.button.secondary { background: var(--surface); color: var(--ink); border: 1px solid var(--field-line); }
.button.large { min-height: 52px; font-size: 16px; align-self: flex-start; }
button.small, .button.small { min-height: 34px; padding: 0 12px; font-size: 13px; }
button.link { min-height: 0; padding: 0; border: 0; background: transparent; color: var(--accent); font: inherit; cursor: pointer; align-self: flex-start; }
button.link.small { font-size: 13px; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.search { min-width: 260px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.summary-card, .panel-card, .row-card, .notice, .empty {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.summary-card { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; }
.big { font-size: 22px; font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--field-line);
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-weight: 400;
}
.chip:hover { background: var(--bg); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
.chip .count { opacity: 0.75; font-variant-numeric: tabular-nums; }
.rows { display: flex; flex-direction: column; gap: 10px; }
.row-card { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 16px 20px; }
.row-main { flex: 999 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.row-title { color: var(--ink); font-weight: 600; font-size: 15px; text-decoration: none; }
.row-status { flex: 1 1 240px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.row-card > .button { min-width: 190px; }
.empty { padding: 32px 20px; color: var(--muted); }
.pill { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; background: #ECEEE9; color: var(--ink); }
.pill-collecting, .pill-doc-processing, .pill-doc-queued { background: #EDF2FC; color: var(--accent-dark); }
.pill-done, .pill-doc-done { background: var(--ok-bg); color: var(--ok); }
.pill-review, .pill-doc-review { background: #FBEEDD; color: #7A3A04; }
.pill-failed, .pill-doc-failed { background: var(--error-bg); color: var(--error); }
.notice { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 16px 20px; }
.notice p { margin: 4px 0 0; }
.welcome { max-width: 720px; display: flex; flex-direction: column; gap: 20px; }
.lead { margin: 0; font-size: 16px; color: var(--muted); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.steps li { display: flex; gap: 14px; }
.steps p { margin: 4px 0 0; }
.step-no {
  flex: 0 0 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ink);
  color: #FFFFFF;
  font-weight: 600;
}
.back { color: var(--muted); text-decoration: none; }
.stack { display: flex; flex-direction: column; gap: 20px; max-width: 760px; }
.panel-card { display: flex; flex-direction: column; gap: 16px; padding: 20px 24px; }
details.panel-card summary { cursor: pointer; font-weight: 500; }
details.panel-card[open] summary { margin-bottom: 4px; }
select {
  height: 46px;
  padding: 0 12px;
  border: 1px solid var(--field-line);
  border-radius: 8px;
  background: var(--surface);
  font: inherit;
  color: var(--ink);
}
.field-row { display: flex; flex-wrap: wrap; gap: 16px; }
.field-row .field { flex: 1 1 200px; }
.field-error { color: var(--error); font-size: 13px; }
.label { font-weight: 500; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ok-text { color: var(--ok); }
.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px;
  border: 2px dashed var(--field-line);
  border-radius: 10px;
  background: var(--bg);
  text-align: center;
}
.dropzone p { margin: 0; }
.dropzone.over { border-color: var(--accent); background: #EDF2FC; }
.documents { display: flex; flex-direction: column; gap: 8px; }
.doc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}
.doc.rejected { border-color: #F0C4BD; background: #FDF5F3; }
.ext { flex: 0 0 auto; padding: 2px 8px; border-radius: 4px; background: #ECEEE9; font-size: 12px; font-weight: 600; }
.doc-main { flex: 999 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.doc-name { font-weight: 500; overflow-wrap: anywhere; }
.doc-state { flex: 1 1 200px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.mailbox { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 1px solid var(--line); }
.mail-address { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mail-address code { font-family: ui-monospace, monospace; font-size: 15px; }
.suppliers { display: flex; flex-direction: column; gap: 8px; }
.supplier-row { display: flex; gap: 10px; align-items: center; }
.supplier-row input { flex: 1; }
.segmented { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: #E4E7E1; border-radius: 10px; align-self: flex-start; }
.segmented label, .segmented a {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 7px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
}
.segmented input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segmented label:has(input:checked), .segmented a[aria-current="true"] { background: var(--surface); }
.segmented label:has(input:focus-visible) { outline: 2px solid var(--accent); }
.list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; }
.inline-form { display: flex; flex-wrap: wrap; gap: 10px; }
.inline-form input { flex: 1 1 240px; }
@media (max-width: 760px) {
  .sidebar { max-width: none; min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .content { padding: 24px 16px 40px; }
}