:root{
  --bg:#0f172a; /* slate-900 */
  --panel:#111827; /* gray-900 */
  --text:#e5e7eb; /* gray-200 */
  --muted:#9ca3af; /* gray-400 */
  --primary:#4f46e5; /* indigo-600 */
  --primary-2:#6366f1; /* indigo-500 */
  --border:#1f2937; /* gray-800 */
  --ok:#16a34a; /* green-600 */
  --warn:#f59e0b; /* amber-500 */
  --err:#ef4444; /* red-500 */
}
/* Garante que elementos com atributo hidden fiquem ocultos, mesmo com outras regras */
[hidden]{ display:none !important }
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  background:var(--bg); color:var(--text);
}
.container{width:100%; max-width:1100px; margin:0 auto; padding:0 16px}
.row{display:flex; gap:16px}
.between{justify-content:space-between}
.center{align-items:center}

.topbar{border-bottom:1px solid var(--border); background:rgba(17,24,39,0.6); position:sticky; top:0; backdrop-filter:blur(6px); z-index:10}
.logo{font-size:20px; margin:14px 0}
.nav a{color:var(--text); text-decoration:none; margin-left:16px}
.nav a.muted{color:var(--muted); cursor:not-allowed}

.main{display:grid; grid-template-columns:1fr 320px; gap:24px; padding:24px 0}
@media (max-width: 960px){ .main{grid-template-columns:1fr} .sidebar{order:-1} }

.panel{background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:16px}
.controls{display:flex; gap:12px; align-items:end; justify-content:space-between; margin-bottom:12px}
.control-item{display:flex; flex-direction:column; gap:6px}
.control-item.right{margin-left:auto}
label{font-size:12px; color:var(--muted)}
select{background:#0b1220; color:var(--text); border:1px solid var(--border); border-radius:8px; padding:8px 10px}

.notice{font-size:13px; color:#a7f3d0; background:#064e3b; border:1px solid #065f46; padding:8px 10px; border-radius:8px; margin:10px 0 16px}

.dropzone{border:2px dashed var(--border); border-radius:12px; padding:28px; text-align:center; color:var(--muted); background:#0b1220}
.dropzone.dragover{border-color:var(--primary)}
.hint{font-size:12px; color:var(--muted); margin-top:8px}
.btn{border:1px solid var(--border); background:#0b1220; color:var(--text); border-radius:10px; padding:10px 14px; cursor:pointer}
.btn:hover{border-color:#334155}
.btn-primary{background:var(--primary); border-color:transparent}
.btn-primary:hover{background:var(--primary-2)}
.btn-ghost{background:transparent}
.btn-inline{display:inline-block; margin-left:6px}

.results{display:grid; gap:16px; margin-top:18px}
.card{display:grid; gap:10px; grid-template-columns:120px 1fr; background:#0b1220; border:1px solid var(--border); border-radius:12px; padding:12px}
@media (max-width: 640px){ .card{grid-template-columns:1fr} }
.thumb{width:100%; max-height:100px; object-fit:cover; border-radius:8px; border:1px solid var(--border)}
.meta{font-size:12px; color:var(--muted)}
.progress{height:8px; background:#111827; border:1px solid var(--border); border-radius:999px; overflow:hidden}
.progress > .bar{height:100%; width:0%; background:linear-gradient(90deg, var(--primary), #22d3ee)}
.textarea{width:100%; min-height:120px; resize:vertical; border-radius:10px; border:1px solid var(--border); background:#0b1220; color:var(--text); padding:10px}
.actions{display:flex; gap:8px; flex-wrap:wrap}
.badge-ok{color:#bbf7d0}
.badge-err{color:#fecaca}

.sidebar{display:flex; flex-direction:column; gap:16px}
.ad-slot{background:#0b1220; border:1px dashed var(--border); border-radius:12px; padding:12px; min-height:140px; display:flex; align-items:center; justify-content:center}
.ad-placeholder{color:var(--muted); font-size:12px; text-align:center}

.footer{border-top:1px solid var(--border); padding:24px 0; color:var(--muted)}

/* Consent banner */
.consent{position:fixed; left:0; right:0; bottom:0; z-index:100; background:#0b1220; border-top:1px solid var(--border); padding:12px 16px; display:flex; gap:12px; align-items:center; justify-content:space-between}
.consent .consent-text{color:var(--text); font-size:14px}
.consent .actions{display:flex; gap:8px; flex-wrap:wrap}
.consent .btn{padding:8px 12px}
.consent a{color:var(--muted); text-decoration:none}
.consent a:hover{color:var(--text)}