/* Base comum: cores, tipografia, botões, formulários, avisos. A cor da marca vem do painel (--cor). */
:root{
  --cor:#E11D2A; --cor-txt:#FF4D57;
  --bg:#0A0A0B; --bg2:#0F0F11; --card:#141416; --card2:#1C1C1F; --line:#232327; --line2:#2E2E33;
  --text:#F5F5F5; --soft:#D4D4D8; --muted:#A1A1AA; --dim:#71717A;
  --ok:#22C55E; --warn:#F59E0B; --err:#EF4444;
  --r:8px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--cor-txt)}
img{max-width:100%;display:block}
button{font:inherit}
.display{font-family:'Bebas Neue',Impact,sans-serif;font-weight:400;letter-spacing:.5px;line-height:.95}
.muted{color:var(--muted)} .dim{color:var(--dim)} .sm{font-size:14px} .xs{font-size:12px}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.hide,[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.logo{font-family:'Bebas Neue',Impact,sans-serif;font-size:38px;line-height:1;color:var(--cor);text-decoration:none;letter-spacing:1px;display:inline-flex;align-items:center}
.logo img{height:36px;width:auto}

/* botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:12px 22px;border-radius:6px;border:0;cursor:pointer;
  font-weight:700;font-size:15px;text-decoration:none;color:#fff;background:var(--line2);transition:filter .15s,transform .1s;white-space:nowrap}
.btn:hover{filter:brightness(1.15);color:#fff}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.5;cursor:default}
.btn-cor{background:var(--cor)}
.btn-branco{background:#fff;color:#0A0A0B}.btn-branco:hover{color:#0A0A0B}
.btn-vidro{background:rgba(255,255,255,.16)}
.btn-linha{background:transparent;border:1px solid var(--line2)}
.btn-perigo{background:transparent;border:1px solid #5b1d22;color:#fca5a5}
.btn-lg{font-size:17px;padding:16px 28px}
.btn-sm{min-height:36px;padding:8px 14px;font-size:14px}
.btn-bloco{display:flex;width:100%}
.icone{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;background:none;border:0;color:var(--text);cursor:pointer;border-radius:50%}
.icone:hover{background:rgba(255,255,255,.08)}

/* formulários */
.campo{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.campo label{font-size:14px;font-weight:600;color:var(--soft)}
.campo small{color:var(--dim);font-size:13px}
input,select,textarea{font:inherit;color:var(--text);background:#0E0E10;border:1px solid var(--line2);border-radius:6px;padding:12px 14px;min-height:44px;width:100%}
textarea{min-height:90px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--cor);outline-offset:0;border-color:transparent}
input[type=checkbox]{width:20px;height:20px;min-height:0;accent-color:var(--cor)}
input[type=color]{padding:4px;width:64px}
.linha{display:flex;gap:12px;flex-wrap:wrap}.linha>*{flex:1 1 200px}
.check{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer}

/* avisos */
.aviso{padding:12px 16px;border-radius:6px;background:#1A1A1D;border:1px solid var(--line2);color:var(--soft);font-size:14px}
.aviso.erro{background:#2A0E11;border-color:#5b1d22;color:#fecaca}
.aviso.ok{background:#0D2416;border-color:#14532d;color:#bbf7d0}
.aviso.atencao{background:#2a1f08;border-color:#713f12;color:#fde68a}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(120px);background:#fff;color:#0A0A0B;font-weight:600;padding:12px 20px;border-radius:8px;
  box-shadow:0 10px 30px rgba(0,0,0,.4);transition:transform .25s;z-index:100;max-width:calc(100vw - 32px)}
#toast.on{transform:translateX(-50%) translateY(0)}
#toast.erro{background:var(--err);color:#fff}

/* janela */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;overflow-y:auto;z-index:50}
.modal-caixa{background:var(--card);border:1px solid var(--line2);border-radius:12px;width:100%;max-width:640px;padding:28px;position:relative}
.modal-caixa h2{margin:0 0 20px;font-size:22px}
.modal-fechar{position:absolute;top:12px;right:12px}
.modal-acoes{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap;margin-top:24px}

.tag{display:inline-block;background:var(--cor);color:#fff;font-size:11px;font-weight:800;letter-spacing:1px;padding:4px 8px;border-radius:4px;text-transform:uppercase}
.carregando{display:flex;align-items:center;justify-content:center;min-height:60vh;color:var(--muted)}
.giro{width:36px;height:36px;border:3px solid var(--line2);border-top-color:var(--cor);border-radius:50%;animation:giro .8s linear infinite}
@keyframes giro{to{transform:rotate(360deg)}}