diff --git a/backend/static/css/components/document-list.css b/backend/static/css/components/document-list.css
new file mode 100644
index 00000000..6d592ee9
--- /dev/null
+++ b/backend/static/css/components/document-list.css
@@ -0,0 +1,204 @@
+/**
+ * document-list.css
+ * Стили списка документов, виджета получателей, и подтверждений
+ */
+
+/* ─────────────────────────────────────────────────────────────
+ DOCUMENT LIST
+────────────────────────────────────────────────────────────── */
+/* Список документов в общей «карточке» */
+#docList.feed-stream {
+ display: block;
+ gap: 0 !important;
+}
+
+#docList .doc-row {
+ padding: .9rem 1rem !important;
+ margin: 0 !important;
+ border-bottom: 1px solid var(--bs-border-color);
+}
+
+#docList .doc-row:last-child {
+ border-bottom: 0;
+}
+
+#docList .feed-hd {
+ display: grid;
+ grid-template-columns: 28px 1fr auto;
+ align-items: center;
+ gap: .75rem;
+ margin: 0;
+ padding: 0 !important;
+}
+
+#docList .feed-ico {
+ width: 28px;
+ height: 28px;
+ display: grid;
+ place-items: center;
+ border-radius: 8px;
+ background: color-mix(in srgb, var(--bs-body-bg) 90%, transparent);
+ border: 1px solid color-mix(in srgb, var(--bs-border-color), transparent 30%);
+ color: var(--bs-primary);
+}
+
+.btn-icon {
+ width: 36px;
+ height: 36px;
+ display: inline-grid;
+ place-items: center;
+ border: 1px solid var(--bs-border-color);
+ border-radius: 10px;
+ background: transparent;
+}
+
+.btn-icon--danger {
+ color: var(--bs-danger);
+}
+
+.doc-actions {
+ display: flex;
+ align-items: center;
+ gap: .4rem;
+}
+
+.badge-acked {
+ background: #d1e7dd;
+ color: #0f5132;
+ border: 1px solid #badbcc;
+ padding: .28rem .55rem;
+ border-radius: 999px;
+ font-size: .8rem;
+}
+
+[data-bs-theme="dark"] .badge-acked {
+ background: #234;
+ color: #8fd4b3;
+ border-color: #1f3b33;
+}
+
+.scope-switch .btn {
+ min-height: 36px;
+ border-radius: 999px;
+}
+
+/* ─────────────────────────────────────────────────────────────
+ RECIPIENT PICKER
+────────────────────────────────────────────────────────────── */
+.recipient-picker {
+ border: 1px solid var(--bs-border-color);
+ border-radius: 12px;
+ padding: .75rem;
+ background: var(--bs-body-bg);
+}
+
+.recipient-picker .rp-selected {
+ display: flex;
+ flex-wrap: wrap;
+ gap: .4rem;
+ margin-bottom: .5rem;
+}
+
+.recipient-picker .rp-chip {
+ display: inline-flex;
+ align-items: center;
+ gap: .35rem;
+ border: 1px solid var(--bs-border-color);
+ border-radius: 999px;
+ padding: .2rem .55rem;
+ font-size: .85rem;
+}
+
+.recipient-picker .rp-chip button {
+ border: 0;
+ background: transparent;
+ padding: 0 .2rem;
+ line-height: 1;
+}
+
+.recipient-picker .rp-search {
+ position: relative;
+}
+
+.recipient-picker .rp-search input {
+ width: 100%;
+}
+
+.recipient-picker .rp-results {
+ margin-top: .5rem;
+ max-height: 220px;
+ overflow: auto;
+ border: 1px solid var(--bs-border-color);
+ border-radius: 10px;
+}
+
+.recipient-picker .rp-item {
+ display: flex;
+ align-items: center;
+ gap: .5rem;
+ padding: .45rem .6rem;
+ border-bottom: 1px solid var(--bs-border-color);
+}
+
+.recipient-picker .rp-item:last-child {
+ border-bottom: 0;
+}
+
+.recipient-picker .rp-item small {
+ color: var(--bs-secondary-color);
+}
+
+.recipient-picker .rp-empty {
+ padding: .6rem;
+ text-align: center;
+ color: var(--bs-secondary-color);
+}
+
+.recipient-picker .rp-avatar {
+ width: 26px;
+ height: 26px;
+ border-radius: 50%;
+ background: color-mix(in srgb, var(--bs-primary) 12%, transparent);
+ display: inline-grid;
+ place-items: center;
+ font-size: .7rem;
+}
+
+.recipient-block[hidden] {
+ display: none !important;
+}
+
+/* ─────────────────────────────────────────────────────────────
+ ACKNOWLEDGMENTS
+────────────────────────────────────────────────────────────── */
+.acks-list {
+ max-height: 50vh;
+ overflow: auto;
+ margin: 0;
+ padding-left: 1.1rem;
+}
+
+.acks-empty {
+ color: var(--bs-secondary-color);
+}
+
+.acks-more {
+ margin-top: .5rem;
+}
+
+.feed-ava {
+ width: 32px;
+ height: 32px;
+ flex: 0 0 32px;
+ border-radius: 50%;
+ overflow: hidden;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.rp-avatar {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
diff --git a/backend/templates/documents/document_list.html b/backend/templates/documents/document_list.html
index 282ec8b7..1e1cc81f 100644
--- a/backend/templates/documents/document_list.html
+++ b/backend/templates/documents/document_list.html
@@ -4,48 +4,7 @@
{% block title %}Документы{% endblock %}
{% block extra_css %}
-
-
-
+
{% endblock %}
{% block content %}