:root {
  /* Paleta Twilight Vestry — hue 278° (violeta quente, lado magenta).
     Hierarquia por luminosidade, sem header em "strip" separado. */
  --bg-primary:      #1A0E2A;   /* page floor — fundo único pra tudo (header + body) */
  --bg-secondary:    #261A3D;   /* cards e painéis elevados */
  --bg-card:         #311F52;   /* surfaces ainda mais elevadas */
  --bg-card-hover:   #3C2962;   /* lift sutil no hover */
  --border:          #4A3674;   /* divisória presente mas nunca dura */

  /* Texto warm-tinted, mais confortável em fundo violeta que cinza neutro */
  --text-primary:    #ECE6FA;
  --text-secondary:  #B0A6C9;
  --text-muted:      #7D7297;

  /* Accent: tonalidade levemente mais clara — destaca melhor sobre bg-card */
  --accent:          #8B5CF6;
  --accent-light:    #A78BFA;
  --accent-dark:     #6D28D9;
  --accent-bg:       rgba(139,92,246,0.14);

  /* Semânticos recalibrados pra dialogar com roxo (sem pular pro olho) */
  --accent-yellow:    #F5B14A;
  --accent-yellow-bg: rgba(245,177,74,0.13);
  --accent-blue:      #5BA3F5;
  --accent-blue-bg:   rgba(91,163,245,0.13);
  --accent-green:     #4ADE80;
  --accent-green-bg:  rgba(74,222,128,0.13);
  --accent-red:       #F87171;
  --accent-red-bg:    rgba(248,113,113,0.13);

  --shadow: 0 4px 20px rgba(20,12,40,0.5);
  --radius: 10px;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Segoe UI',-apple-system,BlinkMacSystemFont,sans-serif; background:var(--bg-primary); color:var(--text-primary); min-height:100vh; }
a { color:inherit; text-decoration:none; }

/* LOGIN */
.login-overlay { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; background:var(--bg-primary); }
.login-box { background:var(--bg-secondary); border-radius:16px; padding:40px; width:100%; max-width:400px; box-shadow:0 20px 60px rgba(0,0,0,0.5); }
.login-box h1 { text-align:center; font-size:28px; margin-bottom:4px; }
.login-box .subtitle { text-align:center; color:var(--text-muted); margin-bottom:32px; font-size:14px; }
.login-box input { width:100%; padding:12px 16px; margin-bottom:16px; background:var(--bg-card); border:1px solid var(--border); border-radius:8px; color:var(--text-primary); font-size:14px; }
.login-box input:focus { outline:none; border-color:var(--accent); }
.btn-login { width:100%; padding:12px; border:none; border-radius:8px; background:var(--accent); color:#fff; font-size:16px; font-weight:600; cursor:pointer; }
.btn-login:hover { opacity:0.85; }
.login-error { color:var(--accent-red); font-size:13px; text-align:center; margin-top:12px; display:none; }
.accent { color:var(--accent); }

/* HEADER */
.header { display:flex; align-items:center; justify-content:space-between; padding:12px 24px; background:var(--bg-primary); border-bottom:1px solid var(--border); }
.header-left { display:flex; align-items:center; gap:14px; }
.header-left h1 { font-size:18px; font-weight:500; }
.header-tabs { display:flex; gap:3px; background:var(--bg-primary); border-radius:8px; padding:3px; }
.tab-btn { padding:6px 18px; border:none; border-radius:6px; background:transparent; color:var(--text-secondary); font-size:13px; font-weight:500; cursor:pointer; text-decoration:none; display:inline-block; }
.tab-btn:hover { color:var(--text-primary); }
.tab-btn.active { background:var(--accent); color:#fff; }
.header-right { display:flex; align-items:center; gap:12px; }
.user-name { color:var(--text-secondary); font-size:13px; }
.btn-logout { padding:5px 14px; border:1px solid var(--border); border-radius:6px; background:transparent; color:var(--text-secondary); font-size:12px; cursor:pointer; }
.btn-logout:hover { border-color:var(--accent-red); color:var(--accent-red); }

/* LAYOUT */
.section-wrap { padding:24px; max-width:1200px; margin:0 auto; }
.card { background:var(--bg-secondary); border:1px solid var(--border); border-radius:var(--radius); padding:24px; margin-bottom:24px; }
.card h2 { font-size:18px; margin-bottom:20px; }
.form-group { margin-bottom:16px; }
.form-group label { display:block; color:var(--text-secondary); font-size:13px; margin-bottom:6px; }
.form-group textarea,.form-group input,.form-group select { width:100%; padding:10px 14px; background:var(--bg-card); border:1px solid var(--border); border-radius:8px; color:var(--text-primary); font-size:14px; font-family:inherit; resize:vertical; }
.form-group textarea:focus,.form-group input:focus,.form-group select:focus { outline:none; border-color:var(--accent); }
.form-row { display:flex; gap:16px; }
.form-row .form-group { flex:1; }
.btn { padding:10px 24px; border:none; border-radius:8px; font-size:14px; font-weight:600; cursor:pointer; }
.btn:hover { opacity:0.85; }
.btn:disabled { opacity:0.5; cursor:not-allowed; }
.btn-primary { background:var(--accent); color:#fff; }
.btn-secondary { background:var(--bg-card); color:var(--text-primary); border:1px solid var(--border); }
.btn-remove { background:none; border:none; color:var(--accent-red); cursor:pointer; font-size:13px; padding:0; }
.btn-link { background:none; border:none; color:var(--accent-blue); cursor:pointer; font-size:13px; padding:2px 4px; }
.btn-link:hover { text-decoration:underline; }

/* COMPONENTES */
.upload-dropzone { border:2px dashed var(--border); border-radius:var(--radius); padding:40px; text-align:center; cursor:pointer; }
.upload-dropzone:hover,.upload-dropzone.drag-over { border-color:var(--accent); background:var(--accent-bg); }
.upload-dropzone p { color:var(--text-secondary); margin-bottom:8px; }
.upload-hint { color:var(--text-muted); font-size:12px; }
.upload-preview { display:flex; align-items:center; gap:16px; padding:16px; background:var(--bg-card); border-radius:var(--radius); margin-bottom:16px; }
.preview-thumb { width:80px; height:80px; border-radius:8px; overflow:hidden; background:var(--bg-primary); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.preview-thumb img { width:100%; height:100%; object-fit:cover; }
.preview-info { display:flex; flex-direction:column; gap:4px; }
.preview-name { font-weight:600; }
.preview-size { color:var(--text-muted); font-size:13px; }
.data-table { width:100%; border-collapse:collapse; }
.data-table th { text-align:left; padding:12px; color:var(--text-muted); font-size:12px; text-transform:uppercase; letter-spacing:0.5px; border-bottom:1px solid var(--border); }
.data-table td { padding:12px; border-bottom:1px solid var(--border); font-size:14px; }
.data-table tbody tr:hover { background:var(--bg-card-hover); }
.empty-msg { text-align:center; padding:40px; color:var(--text-muted); }
.status-badge { display:inline-block; padding:4px 10px; border-radius:12px; font-size:12px; font-weight:600; }
.status-badge.agendado { background:var(--accent-yellow-bg); color:var(--accent-yellow); }
.status-badge.enviando { background:var(--accent-bg); color:var(--accent); }
.status-badge.concluido { background:var(--accent-green-bg); color:var(--accent-green); }
.status-badge.falhou,.status-badge.cancelado { background:var(--accent-red-bg); color:var(--accent-red); }
.chip-origem { display:inline-block; padding:3px 10px; border-radius:12px; font-size:11px; font-weight:600; text-transform:uppercase; }
.chip-origem.painel { background:var(--accent-red-bg); color:var(--accent-red); }
.chip-origem.sheets { background:var(--accent-blue-bg); color:var(--accent-blue); }
.progress-bar-bg { width:120px; height:8px; background:var(--bg-primary); border-radius:4px; overflow:hidden; }
.progress-bar-fill { height:100%; background:var(--accent-green); border-radius:4px; }
.progress-bar-fill.sending { background:var(--accent); }
.legenda-truncated { max-width:200px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:inline-block; }
.agendar-fields { padding:16px; background:var(--bg-card); border-radius:var(--radius); margin-bottom:16px; }
.card-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; flex-wrap:wrap; gap:12px; }
.card-header h2 { margin-bottom:0; }
.filtros { display:flex; gap:8px; }
.filtros select { padding:6px 10px; background:var(--bg-card); border:1px solid var(--border); border-radius:6px; color:var(--text-primary); font-size:13px; }
.capa-preview { margin-top:8px; }
.capa-preview img { max-width:200px; border-radius:8px; border:1px solid var(--border); }
.capa-dropzone { border:2px dashed var(--border); border-radius:var(--radius); padding:20px; text-align:center; cursor:pointer; }
.capa-dropzone:hover { border-color:var(--accent); }
.capa-dropzone p { color:var(--text-secondary); font-size:13px; }
.form-actions { display:flex; gap:12px; margin-top:16px; }

/* LANDING */
.landing { min-height:calc(100vh - 60px); display:flex; align-items:center; justify-content:center; padding:24px; }
.landing-inner { width:100%; max-width:900px; text-align:center; }
.landing h2 { font-size:24px; font-weight:500; margin-bottom:8px; }
.landing .lead { color:var(--text-secondary); margin-bottom:48px; font-size:15px; }
.landing-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:24px; }
.landing-card { background:var(--bg-secondary); border:1px solid var(--border); border-radius:var(--radius); padding:36px 24px; cursor:pointer; transition:transform .12s, border-color .12s, background .12s; text-align:left; display:flex; flex-direction:column; gap:8px; }
.landing-card:hover { transform:translateY(-2px); border-color:var(--accent); background:var(--bg-card-hover); }
.landing-card .icon { font-size:40px; margin-bottom:8px; color:var(--accent); }
.landing-card h3 { font-size:18px; font-weight:600; }
.landing-card p { color:var(--text-secondary); font-size:13.5px; line-height:1.5; }

@media(max-width:768px){ .header{flex-wrap:wrap;gap:12px;} .form-row{flex-direction:column;} .section-wrap{padding:12px;} .card-header{flex-direction:column;align-items:flex-start;} }