:root{
  --navy-950:#0A1B33;
  --navy-900:#0E2444;
  --navy-800:#15325C;
  --navy-700:#1E4272;
  --blue-500:#3E6FA6;
  --blue-400:#5C86B4;
  --gray-900:#1F2937;
  --gray-700:#4B5563;
  --gray-500:#6B7280;
  --gray-300:#D1D5DB;
  --gray-200:#E5E7EB;
  --gray-100:#F3F4F6;
  --gray-50:#F8F9FB;
  --white:#FFFFFF;
  --red-600:#B3261E;
  --amber-600:#B7791F;
  --green-600:#1E7A4C;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: "Archivo","Segoe UI",system-ui,-apple-system,sans-serif;
  background: var(--gray-50);
  color: var(--gray-900);
}
a{ color: var(--navy-800); text-decoration:none; }
a:hover{ text-decoration: underline; }

.app{ display:flex; min-height:100vh; }

.sidebar{
  width: 230px;
  flex-shrink:0;
  background: var(--navy-950);
  color: var(--white);
  padding: 1.5rem 1rem;
  display:flex;
  flex-direction:column;
  gap:0.25rem;
}
.sidebar .brand{ font-weight:700; font-size:1.05rem; margin: 0 0.5rem 1.75rem; color:var(--white); }
.sidebar .brand small{ display:block; font-weight:400; font-size:0.72rem; color: var(--gray-300); margin-top:0.15rem; }
.sidebar a{
  color: var(--gray-300);
  padding: 0.6rem 0.75rem;
  border-radius: 6px;
  font-size: 0.92rem;
  font-weight: 500;
}
.sidebar a:hover{ background: rgba(255,255,255,0.06); text-decoration:none; color: var(--white); }
.sidebar a.active{ background: var(--navy-800); color: var(--white); }
.sidebar .section-label{ font-size:0.72rem; text-transform:none; color: var(--gray-500); margin: 1.1rem 0.75rem 0.35rem; }
.sidebar .spacer{ flex:1; }
.sidebar .user{ padding: 0.75rem; font-size:0.82rem; color: var(--gray-300); border-top: 1px solid rgba(255,255,255,0.08); margin-top: 0.5rem; }
.sidebar form{ margin-top:0.5rem; }
.sidebar button.logout{
  width:100%; background:none; border:1px solid rgba(255,255,255,0.15); color: var(--gray-300);
  padding:0.5rem; border-radius:6px; cursor:pointer; font-size:0.82rem;
}
.sidebar button.logout:hover{ color:var(--white); border-color: rgba(255,255,255,0.3); }

.main{ flex:1; min-width:0; }
.topbar{
  background: var(--white); border-bottom:1px solid var(--gray-200);
  padding: 1.1rem 2rem; display:flex; align-items:center; justify-content:space-between;
}
.topbar h1{ font-size:1.25rem; margin:0; font-weight:700; }
.content{ padding: 2rem; max-width: 1200px; }

.card{
  background: var(--white); border:1px solid var(--gray-200); border-radius:10px; padding:1.25rem 1.4rem;
}
.grid{ display:grid; gap:1rem; }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px){ .grid-4{ grid-template-columns: repeat(2,1fr); } }

.kpi .label{ font-size:0.82rem; color: var(--gray-500); margin-bottom:0.4rem; }
.kpi .value{ font-size:1.7rem; font-weight:700; color: var(--navy-950); }
.kpi .sub{ font-size:0.78rem; color: var(--gray-500); margin-top:0.3rem; }

table{ width:100%; border-collapse: collapse; font-size:0.9rem; }
th{ text-align:left; font-weight:600; color: var(--gray-500); font-size:0.78rem; padding:0.6rem 0.7rem; border-bottom:1px solid var(--gray-200); }
td{ padding:0.65rem 0.7rem; border-bottom:1px solid var(--gray-100); vertical-align:middle; }
tr:hover td{ background: var(--gray-50); }

.badge{ display:inline-block; padding:0.2rem 0.55rem; border-radius:5px; font-size:0.76rem; font-weight:600; }
.badge.active, .badge.sent, .badge.delivered{ background:#E7F3EC; color: var(--green-600); }
.badge.draft, .badge.queued{ background: var(--gray-100); color: var(--gray-700); }
.badge.sending{ background:#FEF3E0; color: var(--amber-600); }
.badge.invalid_email, .badge.failed, .badge.bounced{ background:#FBEAE9; color: var(--red-600); }
.badge.not_interested, .badge.unsubscribed{ background: var(--gray-100); color: var(--gray-500); }

.btn{
  display:inline-flex; align-items:center; gap:0.4rem; padding: 0.55rem 1rem; border-radius:7px;
  font-size:0.88rem; font-weight:600; cursor:pointer; border:1px solid transparent;
}
.btn-primary{ background: var(--navy-950); color: var(--white); }
.btn-primary:hover{ background: var(--navy-800); text-decoration:none; }
.btn-secondary{ background: var(--white); border-color: var(--gray-300); color: var(--gray-900); }
.btn-secondary:hover{ background: var(--gray-50); text-decoration:none; }
.btn-danger{ background: var(--white); border-color:#F0C9C6; color: var(--red-600); }
.btn:disabled{ opacity:0.55; cursor:not-allowed; }

.form-group{ margin-bottom:1.1rem; }
.form-group label{ display:block; font-size:0.85rem; font-weight:600; margin-bottom:0.35rem; color: var(--gray-700); }
.form-group .hint{ font-size:0.78rem; color: var(--gray-500); margin-top:0.3rem; }
input[type=text], input[type=email], input[type=password], input[type=search], select, textarea{
  width:100%; padding:0.6rem 0.7rem; border:1px solid var(--gray-300); border-radius:7px; font-size:0.9rem; font-family:inherit;
  background: var(--white); color: var(--gray-900);
}
textarea{ min-height: 160px; resize: vertical; }
input:focus, select:focus, textarea:focus{ outline: 2px solid var(--blue-500); outline-offset:1px; border-color: var(--blue-500); }

.filters{ display:flex; gap:0.75rem; flex-wrap:wrap; align-items:flex-end; margin-bottom:1.25rem; }
.filters .form-group{ margin-bottom:0; min-width:160px; }

.alert{ padding:0.75rem 1rem; border-radius:8px; font-size:0.88rem; margin-bottom:1.1rem; }
.alert-error{ background:#FBEAE9; color: var(--red-600); border:1px solid #F0C9C6; }
.alert-success{ background:#E7F3EC; color: var(--green-600); border:1px solid #C6E6D3; }
.alert-info{ background:#EAF1F8; color: var(--navy-800); border:1px solid #CBDCEE; }

.attention-item{ display:flex; justify-content:space-between; padding:0.6rem 0; border-bottom:1px solid var(--gray-100); font-size:0.88rem; }
.attention-item:last-child{ border-bottom:none; }

.empty{ color: var(--gray-500); font-size:0.9rem; padding: 1.5rem 0; text-align:center; }

.login-page{ min-height:100vh; display:flex; align-items:center; justify-content:center; background: var(--navy-950); }
.login-card{ background: var(--white); border-radius:12px; padding: 2.5rem; width: 100%; max-width: 380px; }
.login-card h1{ font-size:1.3rem; margin:0 0 0.3rem; }
.login-card p.sub{ color: var(--gray-500); font-size:0.88rem; margin: 0 0 1.75rem; }

.ai-box{ background: var(--gray-50); border:1px dashed var(--gray-300); border-radius:9px; padding:1rem; margin-bottom:1.25rem; }
.ai-box textarea{ min-height:70px; }
.tabs{ display:flex; gap:0.5rem; border-bottom:1px solid var(--gray-200); margin-bottom:1.25rem; }
.tabs a{ padding:0.6rem 0.2rem; margin-right:1.25rem; color: var(--gray-500); font-weight:600; font-size:0.9rem; border-bottom:2px solid transparent; }
.tabs a.active{ color: var(--navy-950); border-bottom-color: var(--navy-950); }

.checkbox-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:0.4rem 1rem; }
.checkbox-grid label{ font-weight:400; font-size:0.85rem; display:flex; align-items:center; gap:0.4rem; }
.checkbox-grid input{ width:auto; }