:root{
  --bg:#0d0d10; --card:#16161c; --card2:#1d1d25;
  --gold:#E7C873; --gold-soft:#f0dca0;
  --txt:#ececef; --muted:#9a9aa5; --line:#2a2a33;
  --ok:#4ecb8d; --err:#e06a6a; --run:#E7C873; --queue:#8a8ad0;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--bg);color:var(--txt);line-height:1.5}
b{color:var(--gold)}
a{color:var(--gold-soft)}

/* brand */
.brand{display:flex;align-items:baseline;gap:.3rem;font-size:1.2rem;letter-spacing:.5px}
.brand-name{font-weight:600}
.brand-sub{color:var(--muted);font-weight:500}

/* topbar */
.topbar{display:flex;justify-content:space-between;align-items:center;
  padding:1rem 1.5rem;border-bottom:1px solid var(--line);background:#101015}
.btn-ghost{border:1px solid var(--line);padding:.4rem .9rem;border-radius:8px;
  text-decoration:none;color:var(--muted);font-size:.9rem}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}

/* layout */
.wrap{max-width:820px;margin:0 auto;padding:1.5rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:1.5rem;margin-bottom:1.3rem}
.card h2{margin:.2rem 0 .3rem;font-size:1.15rem;color:var(--gold)}
.card h3{color:var(--gold-soft)}
.muted{color:var(--muted);font-size:.9rem}
.mono,.tag{font-family:ui-monospace,Menlo,Consolas,monospace}

.field{margin:.7rem 0}
label{display:block;font-size:.85rem;color:var(--muted);margin-bottom:.35rem}
input,select{width:100%;padding:.65rem .8rem;background:var(--card2);
  border:1px solid var(--line);border-radius:9px;color:var(--txt);font-size:.95rem}
input:focus,select:focus{outline:none;border-color:var(--gold)}
.row{display:flex;gap:1rem}
.row .field{flex:1}

button,.btn-download{cursor:pointer;border:none;border-radius:10px;
  font-weight:600;font-size:.98rem;padding:.75rem 1.4rem;margin-top:.6rem;
  background:linear-gradient(180deg,var(--gold-soft),var(--gold));color:#141414;
  display:inline-block;text-decoration:none}
button:hover,.btn-download:hover{filter:brightness(1.06)}
button:disabled{opacity:.5;cursor:not-allowed}

/* status */
.status-line{display:flex;align-items:center;gap:.6rem;margin:.6rem 0}
.dot{width:11px;height:11px;border-radius:50%;background:var(--muted);display:inline-block}
.dot.queued{background:var(--queue)}
.dot.running{background:var(--run);animation:pulse 1s infinite}
.dot.done{background:var(--ok)}
.dot.error{background:var(--err)}
@keyframes pulse{50%{opacity:.35}}

.log{background:#0a0a0d;border:1px solid var(--line);border-radius:9px;
  padding:.8rem;max-height:260px;overflow:auto;font-size:.8rem;color:#c8c8d0;
  white-space:pre-wrap;font-family:ui-monospace,Consolas,monospace}
.tag{color:var(--muted);font-size:.85rem}

.preview9x16{width:270px;max-width:100%;aspect-ratio:9/16;background:#000;
  border-radius:12px;border:1px solid var(--line);display:block;margin:.5rem 0}

/* jobs table */
table.jobs{width:100%;border-collapse:collapse;font-size:.88rem}
table.jobs th,table.jobs td{text-align:left;padding:.55rem .4rem;border-bottom:1px solid var(--line)}
table.jobs th{color:var(--muted);font-weight:500}
.badge{padding:.15rem .55rem;border-radius:20px;font-size:.78rem;font-weight:600}
.badge-done{background:rgba(78,203,141,.15);color:var(--ok)}
.badge-error{background:rgba(224,106,106,.15);color:var(--err)}
.badge-running{background:rgba(231,200,115,.15);color:var(--gold)}
.badge-queued{background:rgba(138,138,208,.15);color:var(--queue)}

/* login */
.login-bg{display:flex;min-height:100vh;align-items:center;justify-content:center;
  background:radial-gradient(1200px 600px at 50% -10%,#1a1a22,#0d0d10)}
.login-card{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:2.2rem;width:340px;max-width:92vw;text-align:center}
.login-card h1{font-size:1.3rem;margin:1rem 0 1.2rem;color:var(--gold)}
.login-card .brand{justify-content:center;font-size:1.35rem}
.login-card form{text-align:left}
.login-card button{width:100%;margin-top:1rem}
.alert-erro{background:rgba(224,106,106,.14);color:var(--err);border:1px solid rgba(224,106,106,.3);
  padding:.6rem;border-radius:9px;font-size:.85rem;margin-bottom:.8rem}
.rodape{color:var(--muted);font-size:.78rem;margin-top:1.4rem;text-align:center}