:root {
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --primary-light: #eff6ff;
  --accent: #10b981;
  --danger: #ef4444;
  --warning: #f59e0b;
  --dark: #0f172a;
  --gray-900: #1e293b;
  --gray-700: #334155;
  --gray-500: #64748b;
  --gray-300: #cbd5e1;
  --gray-100: #f1f5f9;
  --gray-50: #f8fafc;
  --white: #ffffff;
  --radius: 12px;
  --shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05);
}
* { box-sizing: border-box; }
body.app-body { font-family: 'Inter', system-ui, sans-serif; background: var(--gray-50); color: var(--gray-900); margin: 0; }

.app-shell { display: flex; min-height: 100vh; }
.app-sidebar { width: 260px; background: var(--white); border-right: 1px solid var(--gray-100); display: flex; flex-direction: column; position: fixed; top:0; left:0; bottom:0; z-index: 1040; transition: transform .25s; }
.sidebar-brand { display:flex; align-items:center; gap:10px; padding: 20px 22px; border-bottom:1px solid var(--gray-100); }
.brand-icon { width:36px; height:36px; background: linear-gradient(135deg,var(--primary),var(--primary-dark)); color:#fff; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:18px; }
.brand-text { font-weight:700; font-size:18px; color:var(--dark); }
.sidebar-nav { padding: 12px 12px; flex:1; overflow-y:auto; }
.nav-section { font-size:11px; font-weight:600; color:var(--gray-500); text-transform:uppercase; letter-spacing:.08em; padding: 14px 10px 6px; }
.nav-link { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:8px; color:var(--gray-700); text-decoration:none; font-size:14px; font-weight:500; transition:.15s; }
.nav-link i { font-size:18px; width:20px; text-align:center; }
.nav-link:hover { background: var(--gray-100); color: var(--primary); }
.nav-link.active { background: var(--primary-light); color: var(--primary); font-weight:600; }
.sidebar-footer { padding:16px 22px; border-top:1px solid var(--gray-100); }

.app-main { flex:1; margin-left:260px; display:flex; flex-direction:column; min-height:100vh; }
.app-topbar { background:var(--white); border-bottom:1px solid var(--gray-100); padding:12px 24px; display:flex; align-items:center; gap:16px; position:sticky; top:0; z-index:1030; }
.topbar-search { flex:1; max-width:420px; position:relative; }
.topbar-search i { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--gray-500); }
.topbar-search input { width:100%; padding:8px 12px 8px 36px; border:1px solid var(--gray-300); border-radius:8px; font-size:14px; background:var(--gray-50); }
.topbar-search input:focus { outline:none; border-color:var(--primary); background:#fff; }
.topbar-actions { display:flex; align-items:center; gap:12px; margin-left:auto; }
.topbar-icon { color:var(--gray-700); font-size:20px; position:relative; }
.topbar-user { display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--gray-900); font-weight:500; font-size:14px; }
.avatar { width:32px; height:32px; border-radius:50%; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:13px; }
.app-content { padding:24px; flex:1; }

/* Cards */
.card { border:1px solid var(--gray-100); border-radius:var(--radius); box-shadow:var(--shadow); background:var(--white); }
.card-header { background:transparent; border-bottom:1px solid var(--gray-100); font-weight:600; padding:16px 20px; }
.stat-card { padding:20px; }
.stat-card .stat-icon { width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:20px; }
.stat-card .stat-value { font-size:26px; font-weight:700; color:var(--dark); margin-top:12px; }
.stat-card .stat-label { font-size:13px; color:var(--gray-500); font-weight:500; }

/* Buttons */
.btn-primary { background:var(--primary); border-color:var(--primary); }
.btn-primary:hover { background:var(--primary-dark); border-color:var(--primary-dark); }
.btn { border-radius:8px; font-weight:500; font-size:14px; }

/* Tables */
.table { font-size:14px; }
.table thead th { background:var(--gray-50); color:var(--gray-700); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.05em; border-bottom:1px solid var(--gray-100); }
.table tbody td { vertical-align:middle; border-color:var(--gray-100); }

/* Forms */
.form-control, .form-select { border-radius:8px; border-color:var(--gray-300); font-size:14px; }
.form-control:focus, .form-select:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,.15); }
.form-label { font-weight:500; font-size:13px; color:var(--gray-700); }

/* Auth pages */
.auth-shell { min-height:100vh; display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg, #eff6ff 0%, #f8fafc 100%); padding:24px; }
.auth-card { width:100%; max-width:420px; background:#fff; border-radius:16px; box-shadow:var(--shadow-lg); padding:40px; }

/* Sidebar toggle mobile */
@media (max-width: 991.98px) {
  .app-sidebar { transform: translateX(-100%); }
  .app-sidebar.show { transform: translateX(0); }
  .app-main { margin-left:0; }
}
.sidebar-toggle { color:var(--gray-700); }

/* Badges */
.badge { font-weight:500; border-radius:6px; }
.badge-active { background:#dcfce7; color:#166534; }
.badge-unsubscribed { background:#fef3c7; color:#92400e; }
.badge-bounced { background:#fee2e2; color:#991b1b; }

/* Charts container */
.chart-card { padding:20px; }

/* Quill editor */
#editor { height: 320px; background:#fff; border-radius:8px; }

/* Responsive tables */
.table-responsive { border-radius:var(--radius); }

/* Footer spacing */
.app-content .card + .card { margin-top:16px; }