:root { --bd:#d6d6d6; --mut:#666; --bg:#f7f7f8; --acc:#2b5fa8; --dgr:#a82b2b; }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; color:#1c1c1c; background:#fff; }
main { max-width: 1000px; margin: 0 auto; padding: 0 16px 48px; }
h1 { font-size: 1.5rem; margin: 24px 0 16px; }

header.topbar { background: var(--bg); border-bottom: 1px solid var(--bd); }
header.topbar .inner { max-width: 1000px; margin: 0 auto; padding: 10px 16px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
header.topbar .brand { font-weight: 600; }
header.topbar nav a { margin-right: 12px; text-decoration: none; color: var(--acc); }
header.topbar nav a.active { font-weight: 600; text-decoration: underline; }
header.topbar .right { margin-left: auto; color: var(--mut); font-size: .9rem; }

table { width:100%; border-collapse: collapse; margin: 12px 0; }
th, td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--bd); vertical-align: top; }
th { background: var(--bg); font-size:.85rem; text-transform: uppercase; letter-spacing:.03em; color: var(--mut); }
th a { color: inherit; text-decoration: none; }
td.empty { color: var(--mut); font-style: italic; }

.tabs { display:flex; gap:12px; align-items:center; margin-bottom:12px; }
.tabs a { text-decoration:none; color:var(--acc); padding:4px 0; }
.tabs a.active { font-weight:600; border-bottom:2px solid var(--acc); }
.tabs .btn, a.btn { margin-left:auto; background:var(--acc); color:#fff; padding:6px 12px; border-radius:4px; }

.filters { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:12px;
           background:var(--bg); border:1px solid var(--bd); border-radius:4px; padding:10px; }
input, select, textarea { font: inherit; padding:6px 8px; border:1px solid var(--bd); border-radius:3px; max-width:100%; }
textarea { width: 100%; }
button { font: inherit; padding:6px 14px; border:1px solid var(--acc); background:var(--acc); color:#fff; border-radius:3px; cursor:pointer; }
button.danger { background:var(--dgr); border-color:var(--dgr); }
form p { margin: 10px 0; }
label { display:inline-block; }

.count { color:var(--mut); font-size:.9rem; }
.hint  { color:var(--mut); font-size:.9rem; }
.err   { color:var(--dgr); font-size:.9rem; margin-left:6px; }
.ok    { background:#e8f4ea; border:1px solid #b7dcc0; padding:8px 12px; border-radius:4px; }
.warn  { background:#fdf3e3; border:1px solid #e8cf9a; padding:8px 12px; border-radius:4px; }

.actions { display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin:20px 0;
           border-top:1px solid var(--bd); padding-top:16px; }
.actions form { margin:0; }

.status { padding:2px 8px; border-radius:10px; font-size:.85rem; border:1px solid var(--bd); }
.status-draft { background:#eef0f2; }
.status-ready { background:#e3ecfa; border-color:#b9cdea; }
.status-done  { background:#e8f4ea; border-color:#b7dcc0; }

.pagination { display:flex; gap:8px; margin:16px 0; }
.pagination strong { padding:2px 8px; background:var(--acc); color:#fff; border-radius:3px; }

.cards { display:flex; gap:16px; flex-wrap:wrap; margin:16px 0; }
.card { border:1px solid var(--bd); border-radius:4px; padding:12px 16px; min-width:130px; }
.card .n { font-size:1.7rem; font-weight:600; }
.card .l { color:var(--mut); font-size:.9rem; }

.grid { display:flex; gap:16px; flex-wrap:wrap; margin:16px 0; }
.file-card { border:1px solid var(--bd); border-radius:4px; padding:10px; width:160px; }
.file-thumb { display:block; position:relative; background:var(--bg); border:1px solid var(--bd);
              border-radius:3px; height:120px; overflow:hidden; }
.file-thumb img { width:100%; height:100%; object-fit:contain; }
.file-ext { position:absolute; top:4px; right:4px; background:rgba(0,0,0,.65); color:#fff;
            font-size:.7rem; padding:1px 5px; border-radius:3px; }
.file-name { font-size:.9rem; margin:8px 0 2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.file-meta { color:var(--mut); font-size:.8rem; margin:0 0 8px; }
.file-actions { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.file-actions form { margin:0; }
.file-actions button, .file-actions a { font-size:.8rem; padding:4px 8px; }