* { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; margin: 0; background: #0f1115; color: #e7e9ee; }
a { color: #7aa2f7; }
.container { max-width: 900px; margin: 2rem auto; padding: 0 1rem; }
header.topbar { display:flex; justify-content:space-between; align-items:center; padding:.8rem 1.2rem; background:#161a22; border-bottom:1px solid #23293a; position:sticky; top:0; }
header.topbar nav a { margin-left: 1rem; text-decoration:none; }
.card { background:#161a22; border:1px solid #23293a; border-radius:10px; padding:1.2rem; margin-bottom:1.2rem; }
label { display:block; margin:.6rem 0 .25rem; font-size:.9rem; color:#aab; }
input[type=text], input[type=password], textarea { width:100%; padding:.55rem .7rem; border-radius:8px; border:1px solid #2a3040; background:#0d1017; color:#e7e9ee; font-family:inherit; }
textarea { min-height:120px; resize:vertical; }
button, .btn { display:inline-block; margin-top:.8rem; padding:.55rem 1.1rem; border:0; border-radius:8px; background:#3b5bdb; color:#fff; cursor:pointer; text-decoration:none; font-size:.95rem; }
.btn.secondary { background:#23293a; }
.badge { padding:.15rem .6rem; border-radius:999px; font-size:.75rem; font-weight:600; }
.badge.pending{background:#3b4252;color:#ccc}.badge.fetching{background:#8f6100;color:#ffd27d}
.badge.analyzing{background:#155e75;color:#a5e6ff}.badge.cutting{background:#5b21b6;color:#ddd6fe}
.badge.done{background:#14532d;color:#bbf7d0}.badge.failed{background:#7f1d1d;color:#fecaca}
table.list { width:100%; border-collapse:collapse; }
table.list td, table.list th { text-align:left; padding:.5rem; border-bottom:1px solid #23293a; font-size:.9rem; }
.error-box { background:#7f1d1d33; border:1px solid #7f1d1d; color:#fecaca; padding:.6rem .8rem; border-radius:8px; margin-bottom:1rem; }
video.clip-preview { width:100%; max-width:420px; border-radius:8px; background:#000; }
.muted { color:#8891a5; font-size:.85rem; }