:root{
  --bg:#0d0d10; --card:#1a1a20; --card2:#22222b; --text:#f2f2f4; --muted:#a7a7b3;
  --red:#e62117; --red-dark:#b30d0d; --border:#2e2e38; --ok:#2ecc71; --warn:#f5a623;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans Myanmar","Myanmar Text",sans-serif;
  -webkit-font-smoothing:antialiased; line-height:1.5;
}
.app-header{
  position:sticky; top:0; z-index:10;
  background:rgba(13,13,16,.92); backdrop-filter:blur(8px);
  border-bottom:2px solid var(--red); padding:10px 16px;
}
.brand{display:flex; align-items:center; gap:10px; max-width:760px; margin:0 auto}
.m-bug{
  background:var(--red); color:#fff; font-weight:900; font-size:26px; line-height:1;
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  border-radius:6px; transform:skewX(-8deg); box-shadow:0 2px 10px rgba(230,33,23,.45);
}
.brand-name{font-weight:900; letter-spacing:.06em; font-size:19px}
.brand-sub{color:var(--muted); font-size:13px; margin-top:-3px}
main{max-width:760px; margin:0 auto; padding:16px 14px 40px}
h2{font-size:19px; margin:0}
.section-head{display:flex; align-items:center; justify-content:space-between; margin:22px 0 10px}
.section-head:first-child{margin-top:4px}
.muted{color:var(--muted)} .small{font-size:13px}
.error-text{color:#ff6b61}
.cards{display:flex; flex-direction:column; gap:12px}
.card{
  background:var(--card); border:1px solid var(--border); border-radius:12px;
  overflow:hidden;
}
.card-row{display:flex; gap:12px; padding:10px}
.thumb{
  width:96px; height:96px; object-fit:cover; border-radius:8px; flex:0 0 auto;
  background:var(--card2);
}
.thumb-wide{width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; display:block; background:var(--card2)}
.card-body{flex:1; min-width:0}
.card-title{font-weight:700; font-size:16px; margin:0 0 6px}
.meta{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:8px}
.chip{
  display:inline-block; font-size:12px; padding:2px 9px; border-radius:999px;
  background:var(--card2); border:1px solid var(--border); color:var(--muted);
}
.chip-cat{background:var(--red); border-color:var(--red); color:#fff; font-weight:700}
.chip-running{background:#3a2b00; border-color:var(--warn); color:var(--warn)}
.chip-done{background:#0d3320; border-color:var(--ok); color:var(--ok)}
.chip-error{background:#3d100d; border-color:var(--red); color:#ff8a80}
.chip-queued{background:var(--card2); color:var(--muted)}
.btn{
  appearance:none; border:1px solid var(--border); background:var(--card2); color:var(--text);
  border-radius:9px; padding:10px 16px; font-size:15px; font-weight:700; cursor:pointer;
  text-decoration:none; display:inline-block; text-align:center;
}
.btn:active{opacity:.8}
.btn-primary{background:var(--red); border-color:var(--red); color:#fff}
.btn-block{display:block; width:100%}
.btn-ghost{background:transparent; padding:6px 12px; font-size:17px}
.btn[disabled]{opacity:.5; pointer-events:none}
video.player{width:100%; display:block; background:#000; aspect-ratio:9/16; max-height:70vh}
.job-actions{display:flex; gap:8px; padding:10px; flex-wrap:wrap}
.stage-line{display:flex; align-items:center; gap:8px; padding:0 10px 10px; color:var(--muted); font-size:14px}
.spinner{
  width:16px; height:16px; flex:0 0 auto; border-radius:50%;
  border:2px solid var(--border); border-top-color:var(--red);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.auth-view{display:flex; justify-content:center; padding-top:48px}
.auth-card{
  background:var(--card); border:1px solid var(--border); border-radius:14px;
  padding:28px 22px; width:100%; max-width:380px; text-align:center;
}
.auth-card h1{font-size:20px; margin:12px 0 4px}
.auth-bug{
  background:var(--red); color:#fff; font-weight:900; font-size:34px;
  width:60px; height:60px; margin:0 auto; display:flex; align-items:center; justify-content:center;
  border-radius:8px; transform:skewX(-8deg);
}
.auth-card input{
  width:100%; padding:13px; margin:16px 0 10px; font-size:17px; text-align:center;
  background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:9px;
}