:root { --bg:#0b1020; --card:#121a2e; --text:#e6edf7; --muted:#9db0c8; --line:#24304a; --accent:#6db7ff; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Arial, sans-serif; background:var(--bg); color:var(--text); }
header { padding:24px 32px; border-bottom:1px solid var(--line); }
h1 { margin:0 0 8px; }
code, pre { background:#060a14; color:#b7d7ff; border:1px solid var(--line); border-radius:6px; padding:2px 5px; }
.card { margin:20px 32px; padding:20px; background:var(--card); border:1px solid var(--line); border-radius:14px; }
.grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap:12px; margin-bottom:12px; }
label { display:flex; flex-direction:column; gap:6px; color:var(--muted); font-size:13px; }
input, select, button { background:#080d1b; color:var(--text); border:1px solid var(--line); border-radius:8px; padding:9px 10px; }
button, a { cursor:pointer; color:var(--accent); }
button { background:#102846; }
.filters { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:14px; }
.filters input { min-width:260px; }
.assets { display:grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap:14px; }
.asset { background:#0b1325; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.preview { height:220px; display:flex; align-items:center; justify-content:center; background:#050814; }
.preview img, .preview video { width:100%; height:100%; object-fit:contain; }
.file-icon { font-size:32px; color:var(--muted); }
.meta { padding:12px; display:flex; flex-direction:column; gap:8px; }
.meta small { color:var(--muted); }
.meta input { width:100%; font-size:12px; }
.actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
#uploadResult { white-space:pre-wrap; overflow:auto; max-height:220px; }