:root{
  --bg:#0b0d12; --surface:#12151c; --surface2:#181c26; --border:#222836;
  --text:#e8eaf0; --muted:#8b93a7; --accent:#6366f1;
  --green:#22c55e; --red:#ef4444; --amber:#f59e0b; --radius:14px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:15px; line-height:1.5;
}
h1,h2{margin:0; font-weight:600; letter-spacing:-.01em}
h2{font-size:15px; color:var(--text)}

/* top bar */
.topbar{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 28px; border-bottom:1px solid var(--border);
  background:rgba(18,21,28,.85); backdrop-filter:blur(8px);
  position:sticky; top:0; z-index:10;
}
.brand{display:flex; align-items:center; gap:10px; font-weight:600}
.logo{
  width:22px; height:22px; border-radius:7px;
  background:linear-gradient(135deg,var(--accent),#a855f7);
}
.logout{color:var(--muted); text-decoration:none; font-size:14px; transition:.15s}
.logout:hover{color:var(--text)}

/* layout */
.container{max-width:880px; margin:0 auto; padding:28px 20px 60px}
.grid{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:22px; margin-bottom:20px;
}
.grid .card{margin-bottom:0}
.grid{margin-bottom:20px}
.card-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px}
.hint{color:var(--muted); font-size:13px; margin:10px 0 0}

/* flash */
.flash{
  background:rgba(99,102,241,.12); border:1px solid rgba(99,102,241,.35);
  color:#c7c9ff; padding:12px 16px; border-radius:10px; margin-bottom:20px; font-size:14px;
}

/* status pill */
.pill{
  display:inline-flex; align-items:center; gap:8px; padding:5px 12px;
  border-radius:999px; font-size:13px; font-weight:500;
  background:var(--surface2); border:1px solid var(--border); color:var(--muted);
}
.pill::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--muted)}
.status-active{color:var(--green); border-color:rgba(34,197,94,.35); background:rgba(34,197,94,.08)}
.status-active::before{background:var(--green); animation:pulse 1.6s infinite}
.status-failed{color:var(--red); border-color:rgba(239,68,68,.35)}
.status-failed::before{background:var(--red)}
.status-activating::before{background:var(--amber)}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(34,197,94,.6)}
  70%{box-shadow:0 0 0 7px rgba(34,197,94,0)}
  100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}
}
.countdown{color:var(--muted); font-size:13px; font-variant-numeric:tabular-nums}

/* controls */
.controls{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.controls form{margin:0}
.start-form{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  background:var(--surface2); border:1px solid var(--border);
  padding:6px 6px 6px 12px; border-radius:12px;
}
.start-form .unit{color:var(--muted); font-size:13px}
.start-form input{width:60px; text-align:center}

/* inputs */
input[type=text],input[type=password],input[type=number]{
  background:var(--bg); border:1px solid var(--border); color:var(--text);
  padding:9px 12px; border-radius:9px; font-size:14px; outline:none;
  font-family:inherit; transition:.15s; width:100%;
}
input:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(99,102,241,.2)}
input[type=file]{
  width:100%; color:var(--muted); font-size:13px; font-family:inherit;
  background:var(--bg); border:1px dashed var(--border); border-radius:9px; padding:10px;
}
input[type=file]::file-selector-button{
  background:var(--surface2); color:var(--text); border:1px solid var(--border);
  padding:6px 12px; border-radius:7px; margin-right:12px; cursor:pointer; font-family:inherit;
}
.row{display:flex; gap:10px}

/* buttons */
.btn{
  border:1px solid transparent; padding:9px 18px; border-radius:9px;
  font-size:14px; font-weight:500; font-family:inherit; cursor:pointer;
  color:#fff; background:var(--accent); transition:.15s; white-space:nowrap;
}
.btn:hover{filter:brightness(1.12)}
.btn:active{transform:translateY(1px)}
.btn-start{background:var(--green); color:#04210f}
.btn-stop{background:transparent; color:var(--red); border-color:rgba(239,68,68,.45)}
.btn-stop:hover{background:rgba(239,68,68,.1); filter:none}
.btn-restart{background:transparent; color:var(--amber); border-color:rgba(245,158,11,.45)}
.btn-restart:hover{background:rgba(245,158,11,.1); filter:none}
.btn-ghost{background:var(--surface2); color:var(--text); border-color:var(--border)}
.btn-sm{padding:6px 10px; font-size:13px}
.btn-block{width:100%; margin-top:14px}

/* lists */
.list{display:flex; flex-direction:column; gap:8px}
.item{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--surface2); border:1px solid var(--border);
  padding:10px 14px; border-radius:10px;
}
.item-main{display:flex; align-items:center; gap:12px; min-width:0}
.idx{color:var(--muted); font-size:13px; width:20px; font-variant-numeric:tabular-nums}
.name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.actions{display:flex; gap:6px; flex-shrink:0}
.actions form{margin:0}
.empty{color:var(--muted); font-size:14px; padding:6px 0}

/* video badge */
.badge{
  font-size:12px; padding:2px 9px; border-radius:999px; flex-shrink:0;
  background:var(--surface); border:1px solid var(--border); color:var(--muted);
}
.badge-ready{color:var(--green); border-color:rgba(34,197,94,.35)}
.badge-processing{color:var(--amber); border-color:rgba(245,158,11,.35)}
.badge-error{color:var(--red); border-color:rgba(239,68,68,.35)}

/* log */
pre{
  margin:0; background:var(--bg); border:1px solid var(--border); border-radius:10px;
  padding:14px; max-height:300px; overflow:auto; font-size:12px; color:#a9b1c6;
  white-space:pre-wrap; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* login */
.login-page{display:flex; align-items:center; justify-content:center; min-height:100vh; padding:20px}
.login-box{
  width:100%; max-width:360px; background:var(--surface);
  border:1px solid var(--border); border-radius:18px; padding:34px 28px;
}
.login-box .logo{width:38px; height:38px; border-radius:11px; margin:0 auto 16px}
.login-box h1{text-align:center; font-size:20px; margin-bottom:22px}
.login-box label{display:block; font-size:13px; color:var(--muted); margin:14px 0 6px}
.login-box .flash{margin-bottom:6px}

@media (max-width:640px){
  .grid{grid-template-columns:1fr}
  .topbar{padding:12px 16px}
  .container{padding:20px 14px 50px}
  .controls{flex-direction:column; align-items:stretch}
  .start-form{justify-content:space-between}
  .controls .btn{width:100%}
  .start-form .btn{width:auto}
}

/* upload progress */
.progress-wrap{margin-top:14px}
.progress{height:10px; background:var(--bg); border:1px solid var(--border); border-radius:999px; overflow:hidden}
.progress-bar{
  height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg,var(--accent),#a855f7); transition:width .25s ease;
}
.progress-bar.progress-error{background:var(--red)}
.progress-text{margin-top:8px; font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums}
.btn:disabled{opacity:.6; cursor:not-allowed}
.progress-wrap[hidden]{display:none}

/* fix: kolom durasi sejajar dengan tombol Start */
.start-form{flex-wrap:nowrap}
.start-form input[type=number]{width:64px; flex:0 0 64px; text-align:center; padding:8px 6px}
.start-form .unit{white-space:nowrap}
.start-form .btn{margin-left:4px}
@media (max-width:640px){
  .start-form{flex-wrap:wrap; justify-content:flex-start}
}

/* cancel */
[hidden]{display:none !important}
#upload-cancel{margin-top:10px}

/* status live */
.pill.health-ok{color:var(--green); border-color:rgba(34,197,94,.35); background:rgba(34,197,94,.08)}
.pill.health-ok::before{background:var(--green); animation:pulse 1.6s infinite}
.pill.health-warn{color:var(--amber); border-color:rgba(245,158,11,.4); background:rgba(245,158,11,.08)}
.pill.health-warn::before{background:var(--amber)}
.pill.health-bad{color:var(--red); border-color:rgba(239,68,68,.4); background:rgba(239,68,68,.08)}
.pill.health-bad::before{background:var(--red)}
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px}
.stat{background:var(--surface2); border:1px solid var(--border); border-radius:10px; padding:10px 14px; display:flex; flex-direction:column; gap:2px}
.stat-label{font-size:12px; color:var(--muted)}
.stat-value{font-size:18px; font-weight:600; font-variant-numeric:tabular-nums}
.now-playing{margin:0 0 12px; font-size:14px; color:var(--muted)}
.now-playing strong{color:var(--text); font-weight:500}
.notes{list-style:none; padding:0; margin:0 0 14px; display:flex; flex-direction:column; gap:6px}
.notes li{font-size:13.5px; padding:8px 12px; border-radius:9px; background:var(--surface2); border-left:3px solid var(--muted); word-break:break-word}
.notes li.ok{border-left-color:var(--green)}
.notes li.warn{border-left-color:var(--amber)}
.notes li.bad{border-left-color:var(--red)}
.live-actions{display:flex; flex-wrap:wrap; gap:10px}
.live-actions form{margin:0}
@media (max-width:640px){
  .stats{grid-template-columns:1fr 1fr}
  .live-actions .btn{width:100%}
  .live-actions form{flex:1 1 45%}
}