:root{--ink:#17211d;--muted:#68736e;--line:#dfe5e1;--paper:#f4f7f5;--card:#fff;--brand:#176b4b;--accent:#d9f36a;--danger:#a94141}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.5 Inter,Segoe UI,Arial,sans-serif}.topbar{height:70px;padding:0 max(24px,calc((100vw - 1180px)/2));display:flex;align-items:center;justify-content:space-between;background:#11241c;color:#fff}.brand{color:#fff;text-decoration:none;font-size:21px;font-weight:800;letter-spacing:-.5px}.brand span{color:var(--accent)}.brand small{font-size:12px;font-weight:600;opacity:.68;margin-left:8px}.topbar nav{display:flex;align-items:center;gap:20px}.topbar nav a,.link-button{color:#dce7e1;text-decoration:none;background:none;border:0;font:inherit;cursor:pointer}.topbar form{margin:0}.topbar .primary{background:var(--accent);color:#14211b;padding:8px 13px;border-radius:8px;font-weight:700}.shell{max-width:1180px;margin:0 auto;padding:44px 24px 70px}.hero{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:30px}.hero.compact{align-items:center}.eyebrow{margin:0 0 7px;color:var(--brand);font-size:12px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase}h1{font-size:clamp(30px,4vw,48px);line-height:1.05;letter-spacing:-1.8px;margin:0 0 12px}h2{font-size:20px;margin:0}.muted{color:var(--muted);margin:0;max-width:660px}.button{display:inline-flex;justify-content:center;border:0;border-radius:10px;background:var(--brand);color:#fff;padding:12px 18px;text-decoration:none;font-weight:750;cursor:pointer}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:20px}.stats article,.panel,.form-card,.login-card{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 8px 28px rgba(29,55,44,.05)}.stats article{padding:20px}.stats strong{display:block;font-size:28px}.stats span{color:var(--muted)}.panel{padding:22px}.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.panel-head span{color:var(--muted);font-size:13px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:13px 10px;border-bottom:1px solid var(--line);white-space:nowrap}th{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}td a,.text-link{color:var(--brand);font-weight:700}.status{display:inline-block;padding:5px 9px;border-radius:999px;background:#e9eeeb;font-size:12px;font-weight:800}.status.ready{background:#d8f4e4;color:#16623e}.status.error{background:#f8dddd;color:var(--danger)}.status.processing,.status.queued{background:#fff0c9;color:#7a5811}.status.review{background:#e5e2ff;color:#4e4292}.form-card,.login-card{max-width:620px;margin:20px auto;padding:34px}.stack{display:grid;gap:15px;margin-top:25px}.stack p{display:grid;gap:6px;margin:0}.stack label{font-weight:700}.stack input,.stack select{width:100%;border:1px solid #cfd8d3;border-radius:9px;padding:11px;background:#fff;font:inherit}.hint{font-size:13px;color:var(--muted);margin-top:18px}.message{padding:12px 16px;border-radius:10px;background:#e8f4ec;margin-bottom:20px}.message.warning{background:#fff0c9}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.detail-grid h2{margin-bottom:18px}dl{display:grid;grid-template-columns:120px 1fr;gap:10px;margin:0 0 20px}dt{color:var(--muted)}dd{margin:0;font-weight:650}.text-link{display:block;margin:9px 0}.timeline{list-style:none;padding:0;margin:0}.timeline li{border-left:2px solid var(--line);padding:0 0 18px 18px;position:relative}.timeline li:before{content:"";position:absolute;width:9px;height:9px;border-radius:50%;background:var(--brand);left:-5.5px;top:5px}.timeline span{display:block;color:var(--muted);font-size:12px}.timeline p{margin:5px 0 0}.error-box{white-space:pre-wrap;background:#fff1f1;color:var(--danger);padding:12px;border-radius:8px}.empty{text-align:center;color:var(--muted);padding:28px}code{font-size:12px;overflow-wrap:anywhere}@media(max-width:760px){.topbar{height:auto;padding:16px 20px;align-items:flex-start}.topbar nav{gap:10px;flex-wrap:wrap;justify-content:flex-end}.shell{padding:30px 16px}.hero{align-items:flex-start;flex-direction:column}.stats,.detail-grid{grid-template-columns:1fr}.panel{padding:16px}.panel-head{align-items:flex-start;gap:8px;flex-direction:column}}


/* DOK032 v2.1.2 — карточка документа */

.document-hero {
  align-items: center;
}

.document-workspace {
  display: grid;
  grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.document-sidebar {
  display: grid;
  gap: 24px;
}

.document-summary h2,
.pdf-panel h2 {
  margin-top: 0;
}

.document-meta {
  display: grid;
  grid-template-columns: minmax(110px, 0.7fr) minmax(0, 1.3fr);
  gap: 10px 16px;
  margin: 0;
}

.document-meta dt {
  color: var(--muted, #687386);
  font-weight: 600;
}

.document-meta dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.compact-meta {
  font-size: 0.9rem;
}

.document-actions {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}

.document-actions form {
  margin: 0;
}

.document-actions .button,
.document-actions button {
  width: 100%;
  justify-content: center;
  box-sizing: border-box;
}

.button.warning {
  background: #b56b00;
  color: #fff;
  border-color: #b56b00;
}

.button.warning:hover {
  background: #955800;
  border-color: #955800;
}

.technical-details {
  margin-top: 20px;
  border-top: 1px solid rgba(127, 127, 127, 0.2);
  padding-top: 16px;
}

.technical-details summary {
  cursor: pointer;
  font-weight: 600;
}

.technical-details[open] summary {
  margin-bottom: 14px;
}

.pdf-panel {
  min-width: 0;
  padding: 0;
  overflow: hidden;
}

.pdf-panel-header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(127, 127, 127, 0.2);
}

.pdf-panel-header h2,
.pdf-panel-header p {
  margin-bottom: 0;
}

.pdf-viewer {
  display: block;
  width: 100%;
  min-height: 78vh;
  border: 0;
  background: #f2f3f5;
}

.pdf-placeholder {
  min-height: 65vh;
  display: grid;
  place-content: center;
  text-align: center;
  color: var(--muted, #687386);
  padding: 32px;
}

.pdf-placeholder p {
  margin-bottom: 8px;
  font-size: 1.1rem;
  font-weight: 600;
}

.enhanced-timeline {
  list-style: none;
  padding: 0;
  margin: 0;
}

.enhanced-timeline li {
  position: relative;
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 12px;
  padding-bottom: 18px;
}

.enhanced-timeline li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 13px;
  bottom: 0;
  width: 2px;
  background: rgba(127, 127, 127, 0.22);
}

.timeline-marker {
  width: 12px;
  height: 12px;
  margin-top: 5px;
  border-radius: 50%;
  background: #2f9e44;
  box-shadow: 0 0 0 4px rgba(47, 158, 68, 0.14);
  z-index: 1;
}

.timeline-content {
  min-width: 0;
}

.timeline-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.timeline-heading time {
  color: var(--muted, #687386);
  white-space: nowrap;
  font-size: 0.85rem;
}

.timeline-content p {
  margin: 6px 0 0;
  color: var(--muted, #687386);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 1000px) {
  .document-workspace {
    grid-template-columns: 1fr;
  }

  .pdf-viewer {
    min-height: 70vh;
  }
}

@media (max-width: 620px) {
  .document-meta {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .document-meta dd {
    margin-bottom: 12px;
  }

  .pdf-panel-header,
  .timeline-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .pdf-viewer {
    min-height: 60vh;
  }
}


/* DOK032 v2.2 — кабинет оператора */

.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.dashboard-stats .stat-card {
  display: block;
  padding: 20px;
  color: var(--ink);
  text-decoration: none;
  background: var(--card);
  border: 1px solid var(--line);
  border-top-width: 4px;
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(29, 55, 44, 0.05);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.dashboard-stats a.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(29, 55, 44, 0.10);
}

.dashboard-stats .stat-card strong {
  display: block;
  margin-bottom: 4px;
  color: var(--ink);
  font-size: 28px;
  line-height: 1.1;
}

.dashboard-stats .stat-card span {
  color: var(--muted);
}

.dashboard-stats .ready-card {
  border-top-color: #2f9e44;
}

.dashboard-stats .processing-card {
  border-top-color: #1971c2;
}

.dashboard-stats .review-card {
  border-top-color: #7048e8;
}

.dashboard-stats .queued-card {
  border-top-color: #f08c00;
}

.dashboard-stats .error-card {
  border-top-color: #c92a2a;
}

.dashboard-head > div {
  display: grid;
  gap: 4px;
}

.dashboard-filter {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.dashboard-filter input,
.dashboard-filter select {
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #cfd8d3;
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  font: inherit;
}

.dashboard-filter input {
  flex: 1 1 360px;
  min-width: 240px;
}

.dashboard-filter select {
  min-width: 190px;
}

.documents-table td {
  vertical-align: middle;
}

.document-name-cell {
  max-width: 380px;
  white-space: normal;
}

.document-name-cell a {
  display: block;
  overflow-wrap: anywhere;
}

.document-name-cell small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-weight: 400;
}

.table-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.table-actions form {
  margin: 0;
}

.action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  margin: 0;
  padding: 6px 10px;
  border: 1px solid #cfd8d3;
  border-radius: 8px;
  background: #fff;
  color: var(--brand);
  text-decoration: none;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.action-button:hover {
  background: #edf5f1;
}

.action-warning {
  border-color: #e7c784;
  background: #fff8e6;
  color: #8a5200;
}

.pagination {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  margin-top: 22px;
}

.pagination > div:last-child {
  text-align: right;
}

.button.secondary {
  background: #e8eeeb;
  color: var(--ink);
}

@media (max-width: 1100px) {
  .dashboard-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .dashboard-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-filter {
    flex-direction: column;
  }

  .dashboard-filter input,
  .dashboard-filter select,
  .dashboard-filter .button {
    width: 100%;
    min-width: 0;
  }

  .pagination {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .pagination > div:last-child {
    text-align: center;
  }
}

/* DOK032 — визуальный редактор размещения */

.editor-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.editor-controls {
  position: sticky;
  top: 20px;
}

.editor-controls h2 {
  margin-bottom: 20px;
}

.editor-field {
  display: grid;
  gap: 7px;
  margin-bottom: 18px;
  font-weight: 700;
}

.editor-field select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #cfd8d3;
  border-radius: 9px;
  background: #fff;
  font: inherit;
}

.editor-status {
  margin-bottom: 18px;
  padding: 11px 12px;
  border-radius: 9px;
  background: #edf5f1;
  color: var(--brand);
  font-weight: 650;
}

.editor-values {
  grid-template-columns: 70px minmax(0, 1fr);
  margin-bottom: 20px;
  font-size: 13px;
}

.editor-values dd {
  overflow-wrap: anywhere;
}

.editor-controls .button {
  width: 100%;
  margin-bottom: 10px;
}

.editor-stage-panel {
  padding: 14px;
  min-width: 0;
}

.editor-stage-scroll {
  max-height: 82vh;
  overflow: auto;
  padding: 12px;
  border-radius: 12px;
  background: #dfe4e1;
}

.editor-stage {
  position: relative;
  width: min(100%, 980px);
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .14);
  user-select: none;
}

#editor-page-image {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.placement-box {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  min-width: 35px;
  min-height: 25px;
  border: 2px solid;
  border-radius: 5px;
  touch-action: none;
  cursor: move;
}

.placement-box span {
  margin: 4px;
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .88);
  font-size: 11px;
  font-weight: 800;
  pointer-events: none;
}

.signature-box {
  border-color: #1971c2;
  background: rgba(25, 113, 194, .16);
  color: #124f89;
}

.seal-box {
  border-color: #c92a2a;
  background: rgba(201, 42, 42, .14);
  color: #922020;
}

.resize-handle {
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 14px;
  height: 14px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: currentColor;
  cursor: nwse-resize;
}

@media (max-width: 900px) {
  .editor-layout {
    grid-template-columns: 1fr;
  }

  .editor-controls {
    position: static;
  }

  .editor-stage-scroll {
    max-height: none;
  }
}

/* Реальные изображения в редакторе */

.placement-box {
  overflow: visible;
  background: transparent;
}

.placement-box > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.signature-box > img {
  opacity: 0.9;
}

.seal-box > img {
  opacity: 0.72;
}

.placement-box:active > img {
  opacity: 1;
}

.placement-label {
  position: absolute;
  left: 2px;
  top: -25px;
  margin: 0;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.94);
  white-space: nowrap;
  font-size: 11px;
  font-weight: 800;
  pointer-events: none;
}

.editor-render-button {
  margin-top: 14px;
  background: #0c5f43;
}