style(library): аккуратная карточка файла — действия отдельным рядом

Раньше метаданные и «Открыть»+3 иконки делили одну строку → на ширине грида
дата переносилась криво, кнопки наезжали. Теперь подвал колонкой: метаданные
строкой, действия — отдельным рядом (Открыть растягивается, иконки — компактные
квадраты 34×34 с лёгким фоном). Без наложений и кривых переносов.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/library.html

@@ -109,17 +109,17 @@
     .tag-type   { background: rgba(15,23,42,0.06); color: var(--text-3); }
     .tag-private{ background: rgba(241,91,181,0.1); color: var(--pink); }
     .tag-public { background: rgba(6,214,100,0.1);  color: var(--green); }
-    .file-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
+    /* Подвал карточки: метаданные строкой, действия — отдельным рядом (не теснятся) */
+    .file-footer { display: flex; flex-direction: column; gap: 12px; margin-top: auto; }
+    .file-meta-text { min-width: 0; }
     .file-size  { font-size: 0.75rem; color: var(--text-3); }
-    .file-actions { display: flex; gap: 6px; }
-    .btn-dl  { padding: 6px 16px; border: none; border-radius: var(--r-pill); background: var(--grad-1); color: #fff; font-family: 'Manrope', sans-serif; font-size: 0.8rem; font-weight: 700; cursor: pointer; text-decoration: none; transition: opacity var(--tr); }
+    .file-actions { display: flex; gap: 6px; align-items: center; }
+    .btn-dl  { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 8px 14px; border: none; border-radius: var(--r-pill); background: var(--grad-1); color: #fff; font-family: 'Manrope', sans-serif; font-size: 0.8rem; font-weight: 700; cursor: pointer; text-decoration: none; transition: opacity var(--tr); white-space: nowrap; }
     .btn-dl:hover { opacity: 0.85; }
-    .btn-del    { padding: 6px 12px; border: 1.5px solid transparent; border-radius: var(--r-pill); background: transparent; font-family: 'Manrope', sans-serif; font-size: 0.8rem; font-weight: 600; color: var(--text-3); cursor: pointer; transition: all var(--tr); }
-    .btn-del:hover { border-color: var(--pink); color: var(--pink); }
-    .btn-assign { padding: 6px 12px; border: 1.5px solid transparent; border-radius: var(--r-pill); background: transparent; font-family: 'Manrope', sans-serif; font-size: 0.8rem; font-weight: 600; color: var(--text-3); cursor: pointer; transition: all var(--tr); }
-    .btn-assign:hover { border-color: var(--violet); color: var(--violet); }
-    .btn-move   { padding: 6px 12px; border: 1.5px solid transparent; border-radius: var(--r-pill); background: transparent; font-family: 'Manrope', sans-serif; font-size: 0.8rem; font-weight: 600; color: var(--text-3); cursor: pointer; transition: all var(--tr); }
-    .btn-move:hover { border-color: var(--cyan); color: #0aa6b0; }
+    .btn-del, .btn-assign, .btn-move { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1.5px solid transparent; border-radius: 10px; background: rgba(15,23,42,0.04); color: var(--text-3); cursor: pointer; transition: all var(--tr); }
+    .btn-del:hover    { border-color: var(--pink);   color: var(--pink);   background: rgba(241,91,181,0.08); }
+    .btn-assign:hover { border-color: var(--violet); color: var(--violet); background: rgba(155,93,229,0.08); }
+    .btn-move:hover   { border-color: var(--cyan);   color: #0aa6b0;       background: rgba(6,214,224,0.08); }
 
     /* assign modal */
     .src-toggle { display: flex; gap: 6px; margin-bottom: 16px; }
@@ -131,7 +131,7 @@
     .assign-list-type { font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: rgba(155,93,229,0.1); color: var(--violet); }
     .btn-rm-assign { padding: 4px 10px; border: 1.5px solid transparent; border-radius: 99px; background: transparent; font-size: 0.76rem; font-weight: 600; color: var(--text-3); cursor: pointer; transition: all 0.18s; }
     .btn-rm-assign:hover { border-color: var(--pink); color: var(--pink); }
-    .uploader { font-size: 0.72rem; color: var(--text-3); }
+    .uploader { font-size: 0.72rem; color: var(--text-3); margin-top: 3px; }
 
     .spinner { width: 32px; height: 32px; border: 3px solid var(--border); border-top-color: var(--violet); border-radius: 50%; animation: spin 0.8s linear infinite; margin: 60px auto; display: block; }
     .empty { text-align: center; padding: 60px 20px; color: var(--text-3); }
@@ -640,7 +640,7 @@
             <span class="tag ${f.is_public ? 'tag-public' : 'tag-private'}">${f.is_public ? '<i data-lucide="globe" style="width:10px;height:10px;vertical-align:-1px"></i> Публичный' : '<i data-lucide="lock" style="width:10px;height:10px;vertical-align:-1px"></i> Приватный'}</span>
           </div>
           <div class="file-footer">
-            <div>
+            <div class="file-meta-text">
               <div class="file-size">${fmtSize(f.size)} · ${fmtDate(f.created_at)}</div>
               <div class="uploader">Загрузил: ${esc(f.uploader_name)}</div>
             </div>