:root{
  --bg:#0b1220; --card:#0f1720; --muted:#9aa7b2; --text:#e6eef6; --accent:#3ddc84;
  --border:rgba(255,255,255,.06);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;background:linear-gradient(180deg,#061018 0%,#071826 60%);color:var(--text)}
a,a:visited{color:#3ddc84;text-decoration:none}
.container{max-width:1140px;margin:28px auto;padding:16px}
.header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.brand{display:flex;align-items:center;gap:10px}
.logo{height:42px;width:42px;border-radius:12px;background:linear-gradient(135deg,#0ea5a4,#023047);display:flex;align-items:center;justify-content:center;font-weight:800}
.title{font-size:20px;font-weight:800}
.grid{display:grid;grid-template-columns:1fr 380px;gap:18px}
.card{background:#0f1720;border:1px solid var(--border);border-radius:14px;padding:14px;box-shadow:0 10px 32px rgba(0,0,0,.5)}
.controls{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.btn{background:#0f1824;border:1px solid var(--border);padding:9px 12px;border-radius:10px;color:var(--text);cursor:pointer}
.btn.primary{background:linear-gradient(90deg,#3ddc84,#22c572);color:#042014;font-weight:800}
.input{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:transparent;color:var(--text)}
.preview{width:100%;height:420px;background:#071019;border-radius:12px;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center}
video{width:100%;height:100%;object-fit:cover;background:#000}
.pills{position:absolute;left:12px;top:12px;display:flex;gap:8px;flex-wrap:wrap}
.pill{padding:8px 10px;background:rgba(255,255,255,.06);border:1px solid var(--border);border-radius:999px;font-size:13px}
.small{font-size:13px;color:var(--muted)}
.section-title{font-size:16px;font-weight:700;margin:0}
.divider{margin:12px 0;border:0;border-top:1px solid var(--border)}
.list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.item{background:#0f1720;border:1px solid var(--border);border-radius:10px;padding:10px}
@media (max-width:980px){.grid{grid-template-columns:1fr}.preview{height:340px}}
.toast{position:fixed;right:14px;bottom:14px;background:#0f1720;border:1px solid var(--border);padding:10px 12px;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.5);display:none}
.toast.show{display:block}