/* ==========================================================================
   СБИС / Saby — документы сделки (вкладка в карточке amoCRM)
   Visual language of Saby (online.sbis.ru): tokens taken from the Saby
   (Wasaby) theme — Inter 14px, brand orange #f6733c, links #2562aa,
   headings #313e78, labels #8991a9, pill buttons, flat registry list.
   Only presentation lives here: every id/class used by sbis.js is kept.
   ========================================================================== */

:root {
  --font: "Inter", "InterMac", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Saby theme tokens */
  --s-bg: #fff;
  --s-hover: #f3f4f8;                 /* --hover_background-color */
  --s-contrast-bg: #f3f5f7;           /* --contrast_background-color */
  --s-unaccented-bg: #f8f8f8;
  --s-border: #eaeaea;                /* --border-color */
  --s-separator: rgba(0, 0, 0, .06);
  --s-text: #000;
  --s-heading: #313e78;               /* --secondary_text-color */
  --s-label: #8991a9;                 /* --label_text-color */
  --s-unaccented: #999;
  --s-link: #2562aa;
  --s-link-hover: #153f6f;
  --s-primary: #f6733c;
  --s-primary-hover: #e4662f;
  --s-primary-active: #d6551f;
  --s-primary-text: #cc3d00;
  --s-primary-bg: #fff8f5;
  --s-primary-bg-hover: #fff1eb;
  --s-primary-border: #f88f62;
  --s-success: #298e3c;
  --s-success-bg: #f4fbf5;
  --s-warning: #e6a119;
  --s-warning-bg: #fffcf7;
  --s-danger: #c2140a;
  --s-danger-bg: #fff7f7;
  --s-danger-border: #f86a62;
  --s-pad: 20px;

  font-family: var(--font);
  font-size: 14px;
  line-height: 20px;
  color: var(--s-text);
  background: var(--s-bg);
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--s-bg); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--s-primary-border); outline-offset: 2px; }
button:disabled, .button:disabled, .icon-button:disabled { opacity: .45; cursor: default; }
button[aria-busy=true] { cursor: wait; }
svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.live-workspace { width: 100%; min-width: 0; min-height: 240px; margin: 0; }
.widget { min-width: 0; }

/* Saby wordmark-like source label */
.source-badge {
  display: inline-flex; align-items: baseline; gap: 4px; flex: none;
  color: var(--s-primary); font-size: 15px; font-weight: 600; line-height: 20px; white-space: nowrap;
}
.source-badge > span { color: var(--s-unaccented); font-weight: 400; font-size: 13px; }

/* --------------------------------------------------------------------------
   Header: company + deal
   -------------------------------------------------------------------------- */
.widget-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px var(--s-pad) 0; }
.widget-header > div { min-width: 0; }
.widget-header h1 { margin: 0; font-size: 20px; line-height: 26px; font-weight: 600; color: var(--s-heading); overflow-wrap: anywhere; }
.requisites { margin: 4px 0 0; font-size: 13px; line-height: 18px; color: var(--s-label); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.scope-line { display: flex; align-items: center; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; padding: 0 var(--s-pad); margin: 6px 0 12px; }
.scope-note { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; line-height: 18px; color: var(--s-unaccented); }
.scope-note svg { width: 14px; height: 14px; }
.identity-link { padding: 4px 0; border: 0; background: none; color: var(--s-link); font-size: 13px; line-height: 18px; text-align: right; }
.identity-link:hover { color: var(--s-link-hover); text-decoration: underline; }

/* --------------------------------------------------------------------------
   Registry toolbar (flattened into one grid row)
   -------------------------------------------------------------------------- */
.registry {
  position: relative; display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 190px) auto auto;
  grid-template-areas: "search type actions upload" "chips chips chips chips" "guide guide guide guide";
  column-gap: 12px; align-items: center;
  padding: 12px var(--s-pad) 0; background: var(--s-bg); border-top: 1px solid var(--s-border);
}
.registry > * { grid-column: 1 / -1; }
.type-controls, .toolbar { display: contents; }
.type-controls > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* Saby inputs: flat, bottom border */
.search { grid-area: search; display: block; min-width: 0; position: relative; }
.search::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 16px; height: 16px; margin-top: -8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='5' fill='none' stroke='%23999' stroke-width='1.5'/%3E%3Cpath d='m10.8 10.8 3.4 3.4' stroke='%23999' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
  pointer-events: none;
}
.search input {
  width: 100%; height: 32px; padding: 0 4px 0 24px;
  border: 0; border-bottom: 1px solid #ccc; border-radius: 0; background: transparent;
  color: var(--s-text); font-size: 14px; outline: 0;
}
.search input::placeholder { color: var(--s-unaccented); }
.search input:focus { border-bottom-color: var(--s-primary); }

.type-select {
  grid-area: type; width: 100%; min-width: 0; height: 32px; padding: 0 22px 0 2px;
  border: 0; border-bottom: 1px solid #ccc; border-radius: 0;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%232562aa' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 4px center;
  -webkit-appearance: none; appearance: none; color: var(--s-link); font-size: 14px; cursor: pointer;
}
.type-select:focus { border-bottom-color: var(--s-primary); outline: 0; }
.type-select:disabled { color: var(--s-unaccented); }

.toolbar-actions { grid-area: actions; justify-self: end; display: flex; align-items: center; gap: 2px; }
.icon-button {
  position: relative; display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--s-unaccented);
}
.icon-button:hover:not(:disabled) { color: var(--s-primary); background: var(--s-primary-bg-hover); }
#refreshButton[aria-busy=true] svg { animation: sbis-spin 1s linear infinite; }
@keyframes sbis-spin { to { transform: rotate(360deg); } }
.filter-button > span { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--s-primary); }
.filter-button[aria-expanded=true] { color: var(--s-primary); }

/* Primary action: Saby contrast pill button (brand orange) */
.upload-trigger {
  grid-area: upload; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 16px; border: 0; border-radius: 100px;
  background: var(--s-primary); color: #fff; font-size: 14px; font-weight: 600; white-space: nowrap;
}
.upload-trigger:hover:not(:disabled) { background: var(--s-primary-hover); }
.upload-trigger:active:not(:disabled) { background: var(--s-primary-active); }

/* Saby popup */
.filter-menu {
  position: absolute; z-index: 6; top: 52px; right: var(--s-pad); width: 250px; margin: 0; padding: 6px 0;
  border: 0; border-radius: 8px; background: var(--s-bg);
  box-shadow: 0 4px 24px rgba(0, 0, 0, .14), 0 0 1px rgba(0, 0, 0, .2);
}
.filter-menu legend { float: left; width: 100%; padding: 6px 14px; font-size: 12px; color: var(--s-label); }
.filter-menu label { clear: both; display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 14px; font-size: 14px; cursor: pointer; }
.filter-menu label:hover { background: var(--s-hover); }
.filter-menu input { width: 15px; height: 15px; margin: 0; accent-color: var(--s-primary); }

/* Status filter: Saby tabs (text, orange underline on the selected one) */
.quick-status { grid-area: chips; display: flex; flex-wrap: wrap; gap: 0 22px; padding-top: 10px; border-bottom: 1px solid var(--s-border); }
.status-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 0 7px; margin-bottom: -1px;
  border: 0; border-bottom: 2px solid transparent; background: none; color: var(--s-heading);
  font-size: 14px; line-height: 20px; white-space: nowrap;
}
.status-chip:hover:not(:disabled) { color: var(--s-primary-text); }
.status-chip.is-active, .status-chip[aria-pressed=true] { border-bottom-color: var(--s-primary); color: var(--s-text); font-weight: 600; }
.chip-count { color: var(--s-unaccented); font-size: 13px; font-weight: 400; font-variant-numeric: tabular-nums; }

.signature-guide { grid-area: guide; margin: 8px 0 0; font-size: 12px; line-height: 16px; color: var(--s-unaccented); }
.signature-guide strong { color: var(--s-label); }

/* --------------------------------------------------------------------------
   Notices / loading / empty — Saby infobox look
   -------------------------------------------------------------------------- */
.list-notice { margin: 12px 0 0; padding: 8px 12px; border-left: 3px solid var(--s-link); background: #f4f8fd; color: var(--s-heading); font-size: 13px; line-height: 18px; }
.list-notice[data-kind=error] { border-left-color: var(--s-danger); background: var(--s-danger-bg); color: var(--s-danger); }
.loading-state { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 8px; padding: 32px 16px; color: var(--s-unaccented); font-size: 14px; }
.loading-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--s-primary-bg-hover); border-top-color: var(--s-primary); animation: sbis-spin .9s linear infinite; }
.empty-state { margin-top: 8px; padding: 36px 16px; text-align: center; color: var(--s-unaccented); }
.empty-state > svg { display: block; width: 40px; height: 40px; margin: 0 auto 10px; color: #c9cdd6; stroke-width: 1.3; }
.empty-state strong { display: block; font-size: 15px; line-height: 20px; font-weight: 600; color: var(--s-heading); }
.empty-state p { margin: 6px auto 0; max-width: 420px; font-size: 13px; line-height: 18px; }

/* Saby link buttons */
.text-button { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 0; border: 0; background: none; color: var(--s-link); font-size: 14px; white-space: nowrap; }
.text-button:hover:not(:disabled) { color: var(--s-link-hover); text-decoration: underline; }
.more-row { padding: 12px 0 0; text-align: center; }

/* --------------------------------------------------------------------------
   Registry list (flat rows, thin separators, hover — like a Saby registry)
   -------------------------------------------------------------------------- */
.document-section, .draft-section { margin-top: 14px; }
.legacy-section { margin-top: 20px; }
.list-caption { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 0 0 6px; }
.list-caption h2 { margin: 0; font-size: 15px; line-height: 20px; font-weight: 600; color: var(--s-heading); }
.list-caption h2 > span { margin-left: 6px; color: var(--s-unaccented); font-weight: 400; font-size: 13px; font-variant-numeric: tabular-nums; }
.list-caption h2 > span:empty { display: none; }
.list-caption p { margin: 2px 0 0; font-size: 12px; line-height: 16px; color: var(--s-unaccented); }
.legacy-label { flex: none; color: var(--s-unaccented); font-size: 12px; white-space: nowrap; }
.draft-section > .signature-guide { margin: -2px 0 6px; }

.document-list { list-style: none; margin: 0 calc(-1 * var(--s-pad)); padding: 0; border-top: 1px solid var(--s-border); }
.document-list:empty { display: none; }
.document-row {
  position: relative; display: grid;
  grid-template-columns: 70px minmax(0, 1fr) 130px 200px;
  gap: 2px 16px; align-items: start;
  padding: 10px var(--s-pad); border-bottom: 1px solid var(--s-separator);
  scroll-margin-top: 12px;
}
.document-row:hover, .document-row:focus-within { background: var(--s-hover); }
/* Saby marker: orange bar on the hovered/focused row */
.document-row::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 2px 2px 0; background: transparent; }
.document-row:focus-within::before { background: var(--s-primary-text); }

.document-date { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 0; padding-top: 1px; font-size: 13px; line-height: 18px; color: var(--s-unaccented); font-variant-numeric: tabular-nums; }
.date-day { min-height: 18px; color: var(--s-text); white-space: nowrap; }
.date-time { font-size: 12px; }

.document-body { grid-column: 2; grid-row: 1; min-width: 0; }
.document-type-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; margin-bottom: 1px; font-size: 13px; line-height: 18px; }
.type-badge { color: var(--s-label); font-weight: 400; white-space: nowrap; background: none; padding: 0; }
.type-badge::before { display: none; }
.document-number { color: var(--s-label); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.document-number::before { content: "·"; margin-right: 6px; color: #ccc; }

.document-title {
  display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none;
  color: var(--s-text); font-size: 14px; line-height: 20px; font-weight: 600;
  text-align: left; text-decoration: none; overflow-wrap: anywhere;
}
button.document-title:hover { color: var(--s-link); }
.draft-row p.document-title { color: var(--s-text); }
.document-description { margin: 2px 0 0; font-size: 13px; line-height: 18px; color: var(--s-unaccented); overflow-wrap: anywhere; }

.document-amount { grid-column: 3; grid-row: 1; padding-top: 1px; text-align: right; white-space: nowrap; font-size: 15px; line-height: 20px; font-weight: 600; color: var(--s-text); font-variant-numeric: tabular-nums; }
.cents { font-size: 12px; font-weight: 400; color: var(--s-unaccented); }

.document-state-label { grid-column: 4; grid-row: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; text-align: right; }

/* Saby status: coloured text with a state icon, no pill */
.signature-badge, .detail-status {
  display: inline-flex; align-items: center; gap: 5px; width: max-content; max-width: 100%;
  padding: 0; border: 0; background: none; color: var(--s-unaccented);
  font-size: 13px; line-height: 18px; font-weight: 600; text-align: right; overflow-wrap: anywhere;
}
.signature-badge::before, .detail-status::before {
  content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%;
  background: currentColor no-repeat center / 10px 10px;
  -webkit-mask: radial-gradient(circle, #000 0 4px, transparent 4.5px); mask: radial-gradient(circle, #000 0 4px, transparent 4.5px);
}
.signature-badge.signed, .detail-status.signed { color: var(--s-success); }
.signature-badge.signed::before, .detail-status.signed::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 0a7 7 0 1 1 0 14A7 7 0 0 1 7 0zm3.2 4.3L6.1 8.4 3.9 6.2l-.9.9 3.1 3.1 5-5z' fill-rule='evenodd'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 0a7 7 0 1 1 0 14A7 7 0 0 1 7 0zm3.2 4.3L6.1 8.4 3.9 6.2l-.9.9 3.1 3.1 5-5z' fill-rule='evenodd'/%3E%3C/svg%3E") center/contain no-repeat;
}
.signature-badge.waiting, .detail-status.waiting { color: var(--s-primary-text); }
.signature-badge.partial, .detail-status.partial { color: var(--s-danger); }
.signature-badge.unknown, .detail-status.unknown, .detail-status.completed { color: var(--s-unaccented); }
button.signature-badge:hover { text-decoration: underline; }
button.signature-badge:disabled { text-decoration: none; }
.signature-badge svg { width: 14px; height: 14px; }

.delivery-state { font-size: 12px; line-height: 16px; color: var(--s-unaccented); font-weight: 400; overflow-wrap: anywhere; }
.document-state-label .text-button { font-size: 13px; }

.widget-footer { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 4px 16px; flex-wrap: wrap; padding: 12px 0 18px; font-size: 12px; line-height: 16px; color: var(--s-unaccented); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Auth / identity / fatal
   -------------------------------------------------------------------------- */
.auth-card { max-width: 400px; margin: 40px auto; padding: 28px 28px 24px; border: 0; border-radius: 8px; background: var(--s-bg); box-shadow: 0 4px 24px rgba(0, 0, 0, .12), 0 0 1px rgba(0, 0, 0, .2); }
.auth-card h1 { margin: 14px 0 8px; font-size: 20px; line-height: 26px; font-weight: 600; color: var(--s-heading); }
.auth-card p { margin: 0 0 4px; font-size: 14px; line-height: 20px; color: var(--s-unaccented); }
.auth-card label { display: block; margin: 18px 0 4px; font-size: 12px; color: var(--s-label); }
.auth-card input { display: block; width: 100%; height: 32px; padding: 0 2px; margin-bottom: 18px; border: 0; border-bottom: 1px solid #ccc; border-radius: 0; color: var(--s-text); background: transparent; }
.auth-card input:focus { border-bottom-color: var(--s-primary); outline: 0; }
.auth-card .button { width: 100%; margin-top: 16px; }
.auth-card form .button, #login .button { margin-top: 0; }
.auth-card .auth-error { margin: 12px 0 0; padding: 8px 12px; border-left: 3px solid var(--s-danger); background: var(--s-danger-bg); color: var(--s-danger); font-size: 13px; }

/* --------------------------------------------------------------------------
   Buttons — Saby pill buttons
   -------------------------------------------------------------------------- */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 32px; padding: 5px 16px; border-radius: 100px;
  border: 1px solid color-mix(in srgb, var(--s-primary) 35%, transparent); background: var(--s-bg);
  color: var(--s-primary-text); font-size: 14px; line-height: 20px; font-weight: 600; white-space: nowrap;
}
.button:hover:not(:disabled) { border-color: var(--s-primary-border); background: var(--s-primary-bg); }
.button.primary { border-color: var(--s-primary); background: var(--s-primary); color: #fff; }
.button.primary:hover:not(:disabled) { border-color: var(--s-primary-hover); background: var(--s-primary-hover); }
.button.primary:active:not(:disabled) { background: var(--s-primary-active); }
.button svg { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   Side panels (document card, upload) — Saby stack panel
   -------------------------------------------------------------------------- */
dialog {
  width: 600px; max-width: 100%;
  height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh;
  margin: 0 0 0 auto; padding: 0; border: 0; border-radius: 0;
  background: var(--s-bg); color: var(--s-text);
  box-shadow: -4px 0 24px rgba(0, 0, 0, .16);
  overflow: auto; overscroll-behavior: contain;
}
dialog[open] { display: flex; flex-direction: column; animation: sbis-panel .2s ease-out; }
dialog::backdrop { background: rgba(0, 0, 0, .2); }
@keyframes sbis-panel { from { transform: translateX(32px); } }

.dialog-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px var(--s-pad) 14px; background: var(--s-bg); border-bottom: 1px solid var(--s-border); }
.dialog-head h2 { margin: 0; font-size: 20px; line-height: 26px; font-weight: 600; color: var(--s-heading); overflow-wrap: anywhere; }
.eyebrow { margin: 0 0 2px; font-size: 13px; line-height: 18px; color: var(--s-label); }
.close-button { flex: none; margin: -4px -8px 0 0; color: var(--s-unaccented); font-size: 22px; line-height: 1; }
.close-button:hover:not(:disabled) { color: var(--s-text); background: var(--s-hover); }

.dialog-body { flex: 1 0 auto; padding: 16px var(--s-pad) 24px; }
.detail-scope { margin: 0 0 16px; padding: 8px 12px; border-left: 3px solid var(--s-link); background: #f4f8fd; color: var(--s-heading); font-size: 13px; line-height: 18px; }

/* Saby property list: label left, value right */
.document-party { padding: 0 0 12px; }
.document-party > span { display: block; margin-bottom: 2px; font-size: 12px; line-height: 16px; color: var(--s-label); }
.document-party strong { font-size: 15px; line-height: 20px; font-weight: 600; color: var(--s-text); }
.document-party p { margin: 2px 0 0; font-size: 13px; line-height: 18px; color: var(--s-unaccented); font-variant-numeric: tabular-nums; }

.document-facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0 0 18px; border-top: 1px solid var(--s-separator); }
.document-facts > div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--s-separator); }
.document-facts dt { font-size: 13px; line-height: 20px; color: var(--s-label); }
.document-facts dd { margin: 0; font-size: 14px; line-height: 20px; color: var(--s-text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.document-state { padding: 0; }
.document-state h3, .history-section h3, .files-section h3 { margin: 0 0 8px; font-size: 15px; line-height: 20px; font-weight: 600; color: var(--s-heading); }
#dialogStatus { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
#dialogStatus .delivery-state { margin: 0; font-size: 13px; }
.document-state > p { margin: 8px 0 0; font-size: 13px; line-height: 18px; color: var(--s-unaccented); }

.detail-loading { padding: 14px 0 0; font-size: 14px; color: var(--s-unaccented); }
.detail-error { margin: 14px 0 0; padding: 8px 12px; border-left: 3px solid var(--s-danger); background: var(--s-danger-bg); color: var(--s-danger); font-size: 13px; line-height: 18px; }
.no-detail { margin: 0; font-size: 13px; line-height: 18px; color: var(--s-unaccented); }

/* Saby event feed */
.history-section, .files-section { margin-top: 22px; }
.history { list-style: none; margin: 0; padding: 0; }
.history li { position: relative; padding: 0 0 12px 20px; }
.history li::before { content: ""; position: absolute; left: 3px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: #d4d8e2; }
.history li::after { content: ""; position: absolute; left: 6.5px; top: 16px; bottom: 0; width: 1px; background: var(--s-border); }
.history li:last-child { padding-bottom: 0; }
.history li:last-child::after { display: none; }
.history li:last-child::before { background: var(--s-primary); }
.history strong { display: block; font-size: 14px; line-height: 20px; font-weight: 400; color: var(--s-text); }
.history p { margin: 0; font-size: 12px; line-height: 16px; color: var(--s-unaccented); font-variant-numeric: tabular-nums; }

.files-section ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--s-separator); }
.files-section li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--s-separator); font-size: 14px; line-height: 20px; color: var(--s-text); }
.files-section li > span { min-width: 0; overflow-wrap: anywhere; }
.files-section small { display: block; font-size: 12px; line-height: 16px; color: var(--s-unaccented); }
.files-section li button { flex: none; padding: 2px 0; border: 0; background: none; color: var(--s-link); font-size: 14px; }
.files-section li button:hover:not(:disabled) { color: var(--s-link-hover); text-decoration: underline; }

.dialog-footer { position: sticky; bottom: 0; z-index: 2; padding: 12px var(--s-pad) calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--s-border); background: var(--s-bg); }
.dialog-notice { margin: 0 0 10px; padding: 8px 12px; border-left: 3px solid var(--s-link); background: #f4f8fd; color: var(--s-heading); font-size: 13px; line-height: 18px; }
.dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }

/* Upload panel */
.upload-form { display: flex; flex-direction: column; min-height: 100%; margin: 0; min-width: 0; }
.upload-context { margin: 0 0 14px; padding: 8px 12px; border-left: 3px solid var(--s-primary); background: var(--s-primary-bg); font-size: 13px; line-height: 18px; color: var(--s-heading); overflow-wrap: anywhere; }
.upload-context strong { display: block; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--s-text); }
.upload-context p { margin: 1px 0 0; }
.upload-help { margin: 0 0 14px; font-size: 13px; line-height: 18px; color: var(--s-unaccented); }

.file-drop { display: block; position: relative; margin: 0 0 18px; padding: 20px 16px; text-align: center; border: 1px dashed #ccc; border-radius: 8px; background: var(--s-unaccented-bg); color: var(--s-unaccented); cursor: pointer; }
.file-drop:hover, .file-drop:focus-within { border-color: var(--s-primary-border); background: var(--s-primary-bg); }
.file-drop > strong { display: block; font-size: 14px; line-height: 20px; color: var(--s-link); font-weight: 600; }
.file-drop > span { display: block; margin-top: 2px; font-size: 12px; line-height: 16px; }
.file-drop > #uploadFileName { margin-top: 8px; font-weight: 600; color: var(--s-text); font-size: 13px; overflow-wrap: anywhere; }
.file-drop > #uploadFileName:empty { display: none; }
.file-drop input[type=file] { display: block; width: 100%; max-width: 320px; margin: 10px auto 0; font-size: 13px; color: var(--s-unaccented); }
.file-drop input[type=file]::file-selector-button { margin-right: 10px; padding: 4px 14px; border: 1px solid color-mix(in srgb, var(--s-primary) 35%, transparent); border-radius: 100px; background: var(--s-bg); color: var(--s-primary-text); font: inherit; font-weight: 600; cursor: pointer; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; min-width: 0; }
.form-grid .field { min-width: 0; }
.form-grid .field.full, .form-grid .field.full-width, .form-grid .field-wide { grid-column: 1 / -1; }
.form-grid label { display: block; margin: 0 0 2px; font-size: 12px; line-height: 16px; color: var(--s-label); }
.form-grid label small { color: var(--s-unaccented); }
.form-grid input, .form-grid select, .form-grid textarea { display: block; width: 100%; min-width: 0; height: 32px; padding: 0 2px; border: 0; border-bottom: 1px solid #ccc; border-radius: 0; background: transparent; color: var(--s-text); font-size: 14px; }
.form-grid select { padding-right: 22px; -webkit-appearance: none; appearance: none; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%232562aa' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 4px center; }
.form-grid textarea { height: auto; min-height: 72px; padding: 6px 2px; resize: vertical; }
.form-grid input::placeholder { color: #bbb; }
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { border-bottom-color: var(--s-primary); outline: 0; }
.form-grid input:disabled, .form-grid select:disabled { color: var(--s-unaccented); border-bottom-style: dashed; }
.form-grid [aria-invalid=true] { border-bottom-color: var(--s-danger); }
#uploadDialog .list-notice { margin: 14px 0 0; }
.upload-actions { margin-top: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }

.toast { position: fixed; z-index: 40; left: 50%; bottom: 20px; transform: translateX(-50%); width: max-content; max-width: min(520px, calc(100% - 32px)); padding: 10px 16px; border-radius: 8px; background: #3d3d3d; color: #fff; font-size: 14px; line-height: 20px; box-shadow: 0 4px 24px rgba(0, 0, 0, .2); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  :root { --s-pad: 16px; }
  .registry {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "search actions upload" "type type type" "chips chips chips" "guide guide guide";
    row-gap: 8px;
  }
  .type-select { width: auto; justify-self: start; min-width: 180px; }
  .filter-menu { top: 50px; }
  .document-row { grid-template-columns: 60px minmax(0, 1fr) auto; gap: 4px 14px; }
  .document-state-label { grid-column: 2 / -1; grid-row: 2; flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: 2px 12px; text-align: left; }
}
@media (max-width: 560px) {
  :root { --s-pad: 12px; }
  .widget-header { flex-wrap: wrap; gap: 6px 10px; padding-top: 14px; }
  .widget-header > div { flex: 1 1 220px; }
  .widget-header h1 { font-size: 18px; line-height: 24px; }
  .identity-link { text-align: left; }
  .registry { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "search actions" "type upload" "chips chips" "guide guide"; }
  .type-select { width: 100%; min-width: 0; justify-self: stretch; }
  .filter-menu { left: var(--s-pad); right: var(--s-pad); width: auto; top: 48px; }
  .quick-status { gap: 0 16px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .quick-status::-webkit-scrollbar { display: none; }
  .document-row { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px var(--s-pad); }
  .document-date { grid-column: 1 / -1; grid-row: 1; flex-direction: row; gap: 6px; padding: 0; font-size: 12px; }
  .document-date .date-day:empty { display: none; }
  .document-body { grid-column: 1; grid-row: 2; }
  .document-amount { grid-column: 2; grid-row: 2; }
  .document-state-label { grid-column: 1 / -1; grid-row: 3; }
  .widget-footer { flex-direction: column; }
  dialog { width: 100%; box-shadow: none; }
  .dialog-head h2 { font-size: 18px; line-height: 24px; }
  .document-facts > div { grid-template-columns: 120px minmax(0, 1fr); }
  .dialog-actions .button, .upload-actions .button { flex: 1 1 140px; white-space: normal; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .auth-card { margin: 16px 12px; padding: 22px 18px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Shared guluev.com wordmark. */
#login h1,#login>button,#identityConnect{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-weight:750;letter-spacing:-.035em;text-transform:none}#login h1{font-size:34px;line-height:1.2}