:root{--red:#E10600;--black:#000;--white:#fff;--bg:#0b0b0b;--text:#f5f5f5;--muted:#c9c9c9;--card:#121212}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue','Noto Sans',sans-serif}
.app{display:grid;grid-template-rows:auto 1fr auto;min-height:100dvh}
.header{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:14px 18px;background:linear-gradient(90deg,var(--black) 0%, #1a1a1a 60%, var(--black) 100%);border-bottom:2px solid var(--red);}
.brand{display:flex;align-items:center;gap:14px}
.logo{height:52px;object-fit:contain;filter:drop-shadow(0 2px 8px rgba(0,0,0,.35))}
.tags{display:flex;gap:10px;align-items:center;justify-self:center}
.tag{background:var(--red);padding:8px 14px;border-radius:999px;font-weight:900;letter-spacing:.06em}
.clock{font-variant-numeric:tabular-nums;font-weight:800}
.stage{position:relative;overflow:hidden;background:#000;display:grid;place-items:center}
.slide{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:opacity .6s ease}
.slide.active{opacity:1}
.slide img,.slide video{width:100%;height:100%;object-fit:cover}
.headline{position:absolute;left:24px;bottom:92px;background:rgba(0,0,0,.55);backdrop-filter:blur(8px);padding:12px 16px;border-left:6px solid var(--red);border-radius:8px;color:#fff;font-weight:900;font-size:2.1vw;max-width:70vw;line-height:1.3}
.qr{position:absolute;right:24px;bottom:92px;background:#fff;padding:8px;border-radius:10px}
.qr img{width:120px;height:120px;object-fit:contain}
.badge{position:absolute;left:24px;top:24px;background:var(--red);color:#fff;font-weight:800;padding:6px 10px;border-radius:8px}
.watermark{position:absolute;right:24px;top:24px;opacity:.85;background:rgba(0,0,0,.45);padding:8px 10px;border-radius:8px}
.ticker{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:8px 14px;background:linear-gradient(90deg,var(--red),#aa0400);border-top:2px solid #000}
.ticker-label{font-weight:900;background:#000;color:#fff;padding:6px 10px;border-radius:6px}
.marquee{overflow:hidden;white-space:nowrap;position:relative}
.marquee span{display:inline-block;padding-left:100%;animation:scroll 30s linear infinite;font-weight:700}
@keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}
.kpis{display:flex;gap:10px;align-items:center}
.kpi{background:#000;color:#fff;border:2px solid #222;border-radius:10px;padding:6px 10px;font-weight:800}
.help{position:fixed;right:8px;bottom:8px;opacity:.15;font-size:12px}
/* Slide de texto final */
.text-slide{display:grid;place-items:center;background:radial-gradient(1200px 600px at 20% 80%, #240000 0%, #0b0b0b 55%, #000 100%);}
.text-box{max-width:78vw;text-align:center}
.text-line{font-size:3vw;font-weight:900;margin:.2em 0}
.text-sub{font-size:1.6vw;color:#ddd;margin-top:.6em}
.fade{animation:fade 1s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none}}
/* quebras graciosas para imagens ausentes */
.placeholder{position:absolute;inset:0;display:grid;place-items:center;background:#111;color:#bbb;font-weight:800;letter-spacing:.03em}

/* Admin styles */
.admin-container{max-width:1200px;margin:0 auto;padding:20px}
.admin-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;padding-bottom:20px;border-bottom:2px solid var(--red)}
.admin-title{font-size:28px;font-weight:900;color:var(--red)}
.admin-logout{background:var(--red);color:#fff;padding:10px 20px;border:none;border-radius:8px;cursor:pointer;font-weight:700;text-decoration:none;display:inline-block}
.admin-logout:hover{background:#aa0400}
.login-container{max-width:400px;margin:100px auto;padding:40px;background:var(--card);border-radius:12px;border:2px solid var(--red)}
.login-title{text-align:center;font-size:24px;font-weight:900;margin-bottom:30px;color:var(--red)}
.form-group{margin-bottom:20px}
.form-label{display:block;margin-bottom:8px;font-weight:700}
.form-input{width:100%;padding:12px;background:#1a1a1a;border:2px solid #333;border-radius:8px;color:var(--text);font-size:16px}
.form-input:focus{outline:none;border-color:var(--red)}
.form-button{width:100%;padding:12px;background:var(--red);color:#fff;border:none;border-radius:8px;font-weight:900;font-size:16px;cursor:pointer}
.form-button:hover{background:#aa0400}
.alert{padding:12px;border-radius:8px;margin-bottom:20px}
.alert-error{background:#4a0000;color:#ff6b6b;border:1px solid #ff0000}
.alert-success{background:#004a00;color:#6bff6b;border:1px solid #00ff00}
.images-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px;margin-top:20px}
.image-card{background:var(--card);border:2px solid #333;border-radius:8px;overflow:hidden;position:relative}
.image-card img{width:100%;height:200px;object-fit:cover}
.image-card-actions{padding:10px;display:flex;gap:10px}
.btn{padding:8px 16px;border:none;border-radius:6px;cursor:pointer;font-weight:700;text-decoration:none;display:inline-block;font-size:14px}
.btn-danger{background:#aa0000;color:#fff}
.btn-danger:hover{background:#880000}
.btn-primary{background:var(--red);color:#fff}
.btn-primary:hover{background:#aa0400}
.upload-form{background:var(--card);padding:20px;border-radius:8px;margin-bottom:30px;border:2px solid #333}
.upload-form h3{margin-top:0;margin-bottom:20px}
.form-row{display:flex;gap:15px;margin-bottom:15px}
.form-row .form-group{flex:1}
.status-card{background:var(--card);padding:20px;border-radius:8px;margin-bottom:30px;border:2px solid #333}
.status-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}
.status-header h3{margin:0;font-size:20px;font-weight:900}
.status-indicator{font-weight:900;font-size:16px;padding:8px 16px;border-radius:8px}
.status-online{background:#004a00;color:#6bff6b;border:1px solid #00ff00}
.status-offline{background:#4a0000;color:#ff6b6b;border:1px solid #ff0000}
.status-info{color:var(--muted);font-size:14px}
.status-info span{color:var(--text);font-weight:700}