/* ============================================
   CONVIDA-ME — Design System (Dark Theme)
   Inspirado em Linear/Vercel
   ============================================ */

:root{
  --bg-primary:#0a0a1a;
  --bg-secondary:#111127;
  --bg-card:#161631;
  --bg-card-hover:#1a1a3a;
  --bg-input:#0d0d22;
  --border:#1e1e3a;
  --border-hover:#2a2a50;
  --text-primary:#e8e8f0;
  --text-secondary:#8888a8;
  --text-muted:#55557a;
  --accent:#667eea;
  --accent-hover:#7b93ff;
  --accent-glow:rgba(102,126,234,.15);
  --red:#e53935;
  --red-glow:rgba(229,57,53,.15);
  --green:#4caf50;
  --green-glow:rgba(76,175,80,.12);
  --yellow:#f9a825;
  --yellow-glow:rgba(249,168,37,.12);
  --orange:#e65100;
  --radius:12px;
  --radius-lg:16px;
  --shadow:0 2px 8px rgba(0,0,0,.3);
  --shadow-lg:0 8px 30px rgba(0,0,0,.4);
}

*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',sans-serif;background:var(--bg-primary);color:var(--text-primary);line-height:1.6}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-hover);text-decoration:none}

/* === BUTTONS === */
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:var(--radius);font-weight:700;font-size:14px;border:none;cursor:pointer;transition:all .2s;text-decoration:none;line-height:1.4}
.btn:hover{transform:translateY(-1px);text-decoration:none}
.btn-primary{background:linear-gradient(135deg,var(--accent),#764ba2);color:#fff;box-shadow:0 4px 15px rgba(102,126,234,.25)}
.btn-primary:hover{box-shadow:0 6px 20px rgba(102,126,234,.4)}
.btn-outline{background:transparent;border:1.5px solid var(--border);color:var(--text-secondary)}
.btn-outline:hover{border-color:var(--accent);color:var(--accent)}
.btn-danger{background:var(--red);color:#fff}
.btn-upgrade{background:linear-gradient(135deg,#ffeb3b,#f9a825);color:#000;font-weight:800}
.btn-sm{padding:6px 12px;font-size:12px;border-radius:8px}
.btn-lg{padding:14px 32px;font-size:16px;border-radius:14px}
.btn-full{width:100%;justify-content:center}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}

/* === ALERTS === */
.alert{padding:14px 20px;border-radius:var(--radius);margin-bottom:20px;font-weight:600;font-size:14px}
.alert-success{background:var(--green-glow);color:var(--green);border:1px solid rgba(76,175,80,.2)}
.alert-error{background:var(--red-glow);color:var(--red);border:1px solid rgba(229,57,53,.2)}

/* === AUTH PAGES === */
.auth-page{background:linear-gradient(135deg,#0a0a1a,#111137);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.auth-container{width:100%;max-width:460px}
.auth-card{background:var(--bg-card);border:1px solid var(--border);border-radius:24px;padding:40px 35px;box-shadow:var(--shadow-lg)}
.auth-header{text-align:center;margin-bottom:30px}
.auth-logo{font-size:28px;font-weight:800;color:var(--accent);text-decoration:none;display:block;margin-bottom:20px}
.auth-header h1{font-size:24px;font-weight:800;color:var(--text-primary);margin-bottom:6px}
.auth-header p{color:var(--text-secondary);font-size:14px}
.auth-form{display:flex;flex-direction:column;gap:0}
.auth-footer{text-align:center;margin-top:24px;padding-top:20px;border-top:1px solid var(--border)}
.auth-footer p{color:var(--text-secondary);font-size:14px}
.auth-footer a{color:var(--accent);font-weight:700}

/* === FORMS === */
.form-group{margin-bottom:18px}
.form-group label{display:block;font-weight:700;font-size:13px;color:var(--text-secondary);margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:12px 16px;border:1.5px solid var(--border);border-radius:var(--radius);font-size:15px;font-family:'Inter',sans-serif;transition:all .2s;background:var(--bg-input);color:var(--text-primary)}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--accent);background:var(--bg-secondary)}
.form-group input::placeholder,.form-group textarea::placeholder{color:var(--text-muted)}
.form-group small{display:block;margin-top:4px;color:var(--text-muted);font-size:12px}
.form-group input[type="color"]{height:45px;padding:4px;cursor:pointer}
.form-group input[type="file"]{padding:10px;cursor:pointer}
.form-group select option{background:var(--bg-card);color:var(--text-primary)}

.form-row{display:flex;gap:15px}
.form-row>.form-group{flex:1}
.form-row-4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}

.form-section{background:var(--bg-card);border-radius:var(--radius-lg);padding:28px 24px;margin-bottom:20px;box-shadow:var(--shadow);border:1px solid var(--border)}
.form-section h2{font-size:18px;font-weight:800;margin-bottom:20px;color:var(--text-primary);display:flex;align-items:center;gap:8px}
.form-section h3{font-size:15px;font-weight:700;margin:15px 0 10px;color:var(--text-secondary)}

.form-actions{display:flex;justify-content:center;padding:20px 0}
.form-inline-add{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.form-inline-add input,.form-inline-add select{padding:10px 14px;border:1.5px solid var(--border);border-radius:10px;font-size:14px;font-family:'Inter',sans-serif;background:var(--bg-input);color:var(--text-primary)}
.form-inline-add input:focus,.form-inline-add select:focus{border-color:var(--accent);outline:none}
.inline-form{display:inline}

/* === BADGES === */
.badge{display:inline-block;padding:3px 10px;border-radius:6px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px}
.badge-live{background:var(--green-glow);color:var(--green)}
.badge-draft{background:var(--yellow-glow);color:var(--yellow)}
.badge-form{background:rgba(102,126,234,.12);color:var(--accent)}
.badge-manual{background:rgba(156,39,176,.12);color:#ab47bc}
.badge-whatsapp{background:rgba(37,211,102,.12);color:#25d366}

/* === TABLES === */
.table-responsive{overflow-x:auto;border-radius:var(--radius-lg);background:var(--bg-card);box-shadow:var(--shadow);border:1px solid var(--border)}
.data-table{width:100%;border-collapse:collapse}
.data-table th{background:var(--bg-secondary);padding:14px 16px;text-align:left;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);border-bottom:1px solid var(--border)}
.data-table td{padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.03);font-size:14px;color:var(--text-primary)}
.data-table tr:hover{background:rgba(255,255,255,.02)}
.msg-cell{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.status-select{padding:6px 10px;border-radius:8px;border:1px solid var(--border);font-size:13px;cursor:pointer;background:var(--bg-input);color:var(--text-primary)}
.status-confirmed{background:var(--green-glow);border-color:rgba(76,175,80,.3)}
.status-pending{background:var(--yellow-glow);border-color:rgba(255,152,0,.3)}
.status-declined{background:var(--red-glow);border-color:rgba(244,67,54,.3)}
.status-maybe{background:var(--yellow-glow);border-color:rgba(255,235,59,.3)}

/* === EMPTY STATE === */
.empty-state{text-align:center;padding:60px 20px;background:var(--bg-card);border-radius:var(--radius-lg);border:2px dashed var(--border)}
.empty-icon{font-size:60px;margin-bottom:15px}
.empty-state h3{font-size:20px;margin-bottom:8px;color:var(--text-primary)}
.empty-state p{color:var(--text-secondary);margin-bottom:20px}

/* === TEMPLATES === */
.template-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin-bottom:10px}
.template-option{cursor:pointer}
.template-option input{display:none}
.template-card{border:2px solid var(--border);border-radius:14px;padding:12px;text-align:center;transition:all .2s;background:var(--bg-card)}
.template-option input:checked+.template-card{border-color:var(--accent);background:var(--accent-glow);box-shadow:0 4px 15px rgba(102,126,234,.15)}
.template-card:hover{border-color:var(--border-hover);transform:translateY(-2px)}
.template-card img{width:100%;border-radius:10px;margin-bottom:8px}
.template-placeholder{width:100%;height:80px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:30px;margin-bottom:8px}
.template-card span{font-size:12px;font-weight:700;color:var(--text-secondary)}
.badge-premium{color:var(--yellow);font-size:11px}

.template-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}
.template-gallery-card{background:var(--bg-card);border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);transition:all .2s;box-shadow:var(--shadow)}
.template-gallery-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.template-thumb{height:180px;overflow:hidden;position:relative}
.template-thumb img{width:100%;height:100%;object-fit:cover}
.template-placeholder-lg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:50px;color:rgba(255,255,255,.3)}
.badge-premium-overlay{position:absolute;top:10px;right:10px;background:linear-gradient(135deg,#ffeb3b,#f9a825);color:#000;padding:4px 10px;border-radius:6px;font-size:11px;font-weight:800}
.template-info{padding:16px}
.template-info h3{font-size:16px;margin-bottom:6px;color:var(--text-primary)}
.template-info p{font-size:12px;color:var(--text-secondary);margin-bottom:12px}

.cat-filter{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:25px}
.cat-btn{padding:8px 16px;border-radius:10px;font-size:13px;font-weight:700;background:var(--bg-card);color:var(--text-secondary);border:1.5px solid var(--border);transition:all .2s;text-decoration:none}
.cat-btn:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.cat-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}

/* === MUSIC === */
.music-library{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.music-pick{background:var(--bg-secondary);border:1.5px solid var(--border);border-radius:8px;padding:6px 12px;font-size:12px;cursor:pointer;transition:all .2s;font-family:'Inter',sans-serif;color:var(--text-secondary)}
.music-pick:hover{border-color:var(--accent)}
.music-pick.selected{border-color:var(--accent);background:var(--accent-glow);color:var(--accent)}
.music-cat-label{width:100%;font-size:11px;font-weight:800;color:var(--text-muted);text-transform:uppercase;margin-top:8px;letter-spacing:1px}

/* === PROFILE === */
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:20px}
.profile-plan-info{padding:10px 0}
.profile-plan-info p{color:var(--text-secondary);margin:6px 0;font-size:14px}

/* === MISC === */
.current-photo{margin-bottom:15px;padding:10px;background:var(--bg-secondary);border-radius:var(--radius);display:inline-block}
.current-photo p{margin-top:6px;color:var(--text-secondary)}
.dynamic-section{animation:fadeIn .3s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

/* === GLOBAL MOBILE === */
html{-webkit-text-size-adjust:100%;touch-action:manipulation;-ms-touch-action:manipulation}
img,video,svg{max-width:100%;height:auto}
input,select,textarea{font-size:16px}

@media(max-width:768px){
  .form-row,.form-row-4{flex-direction:column;display:flex}
  .form-inline-add{flex-direction:column}
  .form-inline-add input,.form-inline-add select{width:100%}
  .template-grid{grid-template-columns:repeat(2,1fr)}
  .profile-grid{grid-template-columns:1fr}
  .auth-card{padding:28px 20px;border-radius:20px}
  .auth-header h1{font-size:20px}
  .auth-logo{font-size:24px}
  .form-group input,.form-group select,.form-group textarea{font-size:16px;padding:12px 14px}
  .form-section{padding:20px 16px}
  .form-section h2{font-size:16px}
  .table-responsive{margin:0 -16px;border-radius:0}
  .data-table th,.data-table td{padding:10px 12px;font-size:12px}
  .template-gallery{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
  .cat-filter{gap:6px}
  .cat-btn{padding:6px 12px;font-size:12px}
  .btn-lg{padding:12px 24px;font-size:15px}
}