:root { --bg:#0f1115; --panel:#181b22; --line:#2a2f3a; --text:#e6e8ec; --muted:#8b93a3; --accent:#7c5cff; --red:#e5484d; --green:#30a46c; }
* { box-sizing:border-box; }
body { margin:0; font:15px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background:var(--bg); color:var(--text); }
a { color:#a99bff; text-decoration:none; } a:hover { text-decoration:underline; }
header { display:flex; justify-content:space-between; align-items:center; padding:12px 24px; background:var(--panel); border-bottom:1px solid var(--line); }
.brand { font-weight:700; font-size:18px; color:var(--text); }
nav { display:flex; gap:18px; align-items:center; }
main { max-width:1200px; margin:0 auto; padding:24px; }
h1 { font-size:22px; } h2 { font-size:17px; margin-top:32px; }
table { width:100%; border-collapse:collapse; background:var(--panel); border:1px solid var(--line); border-radius:8px; overflow:hidden; }
th, td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
th { color:var(--muted); font-weight:600; font-size:13px; }
.muted { color:var(--muted); } .pre { white-space:pre-wrap; } .reason { color:var(--muted); font-size:13px; }
code { background:#0b0d11; padding:1px 5px; border-radius:4px; font-size:13px; }
input { background:#0b0d11; color:var(--text); border:1px solid var(--line); border-radius:6px; padding:8px 10px; font:inherit; }
button { background:var(--accent); color:#fff; border:0; border-radius:6px; padding:8px 14px; font:inherit; cursor:pointer; }
button.small { padding:4px 10px; font-size:13px; } button.danger { background:var(--red); }
button.link { background:none; color:#a99bff; padding:0; }
form.inline { display:inline-flex; gap:6px; align-items:center; margin:2px 6px 2px 0; }
form.stack, .login form { display:flex; flex-direction:column; gap:12px; max-width:380px; }
label { display:flex; flex-direction:column; gap:4px; color:var(--muted); font-size:13px; }
label.check { flex-direction:row; align-items:center; gap:8px; }
.login { max-width:380px; margin:12vh auto; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:28px; }
.flash { padding:10px 14px; border-radius:6px; margin-bottom:16px; }
.flash.error { background:#3b1219; color:#ffb1b5; } .flash.ok { background:#13281e; color:#a5e4c3; }
.tiles { display:flex; gap:12px; flex-wrap:wrap; }
.tile { flex:1; min-width:120px; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:14px; display:flex; flex-direction:column; color:var(--text); }
.tile.active { border-color:var(--accent); } .tile .n { font-size:26px; font-weight:700; } .tile .l { color:var(--muted); text-transform:capitalize; }
.clip { display:grid; grid-template-columns:minmax(260px,360px) 1fr; gap:24px; }
video { width:100%; border-radius:8px; background:#000; }
dl { display:grid; grid-template-columns:140px 1fr; gap:6px 12px; } dt { color:var(--muted); } dd { margin:0; word-break:break-word; }
.actions { white-space:nowrap; }
@media (max-width:760px) { .clip { grid-template-columns:1fr; } .actions { white-space:normal; } }