:root { --bg:#0f1115; --card:#1a1e27; --fg:#e8eaed; --mut:#9aa0aa; --acc:#4f8cff; --danger:#e5534b; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; }
.wrap { max-width:720px; margin:0 auto; padding:20px 16px 60px; }
h1 { font-size:22px; letter-spacing:.5px; }
.card { background:var(--card); border-radius:12px; padding:16px; margin:14px 0; display:flex; flex-direction:column; gap:10px; }
label { color:var(--mut); font-size:13px; }
input, textarea, button { font:inherit; }
input[type=password], input[type=text], textarea { width:100%; padding:10px 12px; border-radius:8px; border:1px solid #2a2f3a; background:#12151c; color:var(--fg); }
textarea { min-height:70px; resize:vertical; }
button, .btn { display:inline-block; padding:9px 14px; border-radius:8px; border:0; background:var(--acc); color:#fff; cursor:pointer; text-decoration:none; text-align:center; }
.btn.danger { background:var(--danger); }
.hint { color:var(--mut); font-size:12px; margin:0; }
.flash { background:#173d2a; color:#9be7b4; padding:10px 12px; border-radius:8px; }
.err { background:#3d1717; color:#f0a; padding:10px 12px; border-radius:8px; }
.list { display:flex; flex-direction:column; gap:12px; }
.item { background:var(--card); border-radius:12px; padding:12px; display:flex; flex-direction:column; gap:8px; }
.thumb { max-width:100%; max-height:260px; border-radius:8px; object-fit:contain; background:#000; }
.note { white-space:pre-wrap; word-break:break-word; background:#12151c; padding:10px; border-radius:8px; margin:0; }
.doc { font-size:15px; }
.meta { display:flex; gap:12px; flex-wrap:wrap; color:var(--mut); font-size:13px; }
.meta .name { color:var(--fg); word-break:break-all; }
.actions { display:flex; gap:8px; align-items:center; }
.actions form { margin:0; }
.empty { color:var(--mut); text-align:center; padding:24px; }