:root {
  --bg: #080b12;
  --bg-soft: #0f172a;
  --panel: rgba(15, 23, 42, .78);
  --panel-strong: rgba(15, 23, 42, .96);
  --line: rgba(148, 163, 184, .18);
  --text: #e5e7eb;
  --muted: #94a3b8;
  --accent: #8b5cf6;
  --accent-2: #22d3ee;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --radius: 22px;
  --shadow: 0 20px 60px rgba(0,0,0,.36);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: radial-gradient(circle at top left, rgba(139,92,246,.28), transparent 35%), radial-gradient(circle at 80% 0%, rgba(34,211,238,.18), transparent 30%), var(--bg);
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
.container { max-width: 1180px; margin: 0 auto; padding: 0 22px; }
.landing-nav { display:flex; align-items:center; justify-content:space-between; padding: 24px 0; }
.brand { display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:-.03em; }
.brand-logo { width:42px; height:42px; border-radius:14px; display:grid; place-items:center; background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:white; box-shadow: 0 10px 30px rgba(139,92,246,.35); }
.nav-actions { display:flex; gap:12px; align-items:center; }
.hero { padding: 78px 0 56px; display:grid; grid-template-columns: 1.08fr .92fr; gap: 38px; align-items:center; }
.hero h1 { font-size: clamp(42px, 6vw, 76px); line-height:.94; letter-spacing:-.07em; margin:0 0 22px; }
.gradient-text { background: linear-gradient(135deg,#fff,#a78bfa 48%,#22d3ee); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lead { color: var(--muted); font-size: 19px; line-height:1.7; max-width: 720px; }
.hero-actions { display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; }
.btn { border:0; border-radius: 14px; padding: 12px 17px; cursor:pointer; background: rgba(148,163,184,.13); color: var(--text); display:inline-flex; align-items:center; gap:8px; transition:.18s ease; white-space:nowrap; }
.btn:hover { transform: translateY(-1px); background: rgba(148,163,184,.22); }
.btn-primary { background: linear-gradient(135deg, var(--accent), #6366f1); box-shadow: 0 16px 40px rgba(99,102,241,.28); }
.btn-cyan { background: linear-gradient(135deg, #0891b2, var(--accent-2)); color: #03131a; font-weight:700; }
.btn-danger { background: rgba(239,68,68,.14); color:#fecaca; }
.btn-sm { padding: 8px 11px; border-radius: 11px; font-size: 13px; }
.glass { background: var(--panel); border:1px solid var(--line); box-shadow: var(--shadow); backdrop-filter: blur(18px); }
.hero-card { border-radius: 32px; padding: 24px; position:relative; overflow:hidden; }
.hero-card:before { content:""; position:absolute; inset:-80px -80px auto auto; width:180px; height:180px; border-radius:50%; background:rgba(34,211,238,.18); filter:blur(10px); }
.mock-window { background:#0b1120; border:1px solid var(--line); border-radius:22px; overflow:hidden; }
.mock-top { display:flex; gap:7px; padding:14px; border-bottom:1px solid var(--line); }
.dot { width:10px; height:10px; border-radius:50%; background:#334155; }
.mock-content { padding:22px; }
.metric-row, .feature-grid, .cards-grid { display:grid; gap:18px; }
.metric-row { grid-template-columns: repeat(4,1fr); }
.feature-grid { grid-template-columns: repeat(3,1fr); padding: 34px 0 70px; }
.card, .metric-card { border:1px solid var(--line); background:var(--panel); border-radius:var(--radius); padding: 20px; box-shadow: 0 14px 42px rgba(0,0,0,.20); }
.card h3, .metric-card h3 { margin:0 0 9px; }
.card p, .muted, .hint { color:var(--muted); }
.hint.success { color:#86efac; } .hint.danger { color:#fca5a5; }
.app-shell { display:grid; grid-template-columns: 280px 1fr; min-height:100vh; }
.sidebar { position:sticky; top:0; height:100vh; padding:24px; border-right:1px solid var(--line); background: rgba(2,6,23,.64); backdrop-filter: blur(20px); }
.sidebar .brand { margin-bottom:30px; }
.side-nav { display:flex; flex-direction:column; gap:8px; }
.side-nav a { padding:12px 14px; border-radius:14px; color:var(--muted); display:flex; gap:10px; align-items:center; }
.side-nav a.active, .side-nav a:hover { background:rgba(139,92,246,.18); color:#fff; }
.sidebar-footer { position:absolute; bottom:22px; left:24px; right:24px; color:var(--muted); font-size:13px; }
.main { padding: 28px; }
.topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; gap:18px; }
.topbar h1 { margin:0; font-size:32px; letter-spacing:-.04em; }
.user-chip { display:flex; align-items:center; gap:12px; background:rgba(148,163,184,.10); padding:9px 12px; border-radius:999px; color:var(--muted); }
.avatar { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:white; font-weight:800; }
.flash { padding: 13px 15px; border-radius: 14px; margin-bottom: 12px; border:1px solid var(--line); }
.flash.success { background:rgba(16,185,129,.12); color:#bbf7d0; }
.flash.danger { background:rgba(239,68,68,.12); color:#fecaca; }
.flash.warning { background:rgba(245,158,11,.12); color:#fde68a; }
.metric-card .number { font-size:32px; font-weight:800; letter-spacing:-.05em; margin-top:10px; }
.table-wrap { overflow:auto; border-radius: var(--radius); border:1px solid var(--line); }
table { width:100%; border-collapse:collapse; min-width: 780px; }
th, td { text-align:left; padding:14px 16px; border-bottom:1px solid var(--line); vertical-align:top; }
th { color:#cbd5e1; font-size:13px; font-weight:700; background:rgba(15,23,42,.9); }
td { color:#e2e8f0; }
tr:hover td { background:rgba(148,163,184,.04); }
.badge { display:inline-flex; align-items:center; gap:6px; padding:5px 9px; border-radius:999px; font-size:12px; font-weight:700; }
.badge.active, .badge.read, .badge.sent { background:rgba(16,185,129,.14); color:#86efac; }
.badge.paused, .badge.queued { background:rgba(245,158,11,.14); color:#fde68a; }
.badge.error, .badge.failed { background:rgba(239,68,68,.14); color:#fecaca; }
.badge.unread { background:rgba(34,211,238,.16); color:#67e8f9; }
.toolbar { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:18px; flex-wrap:wrap; }
.filters { display:flex; gap:10px; flex-wrap:wrap; }
input, select, textarea { width:100%; border:1px solid var(--line); background:rgba(2,6,23,.58); color:var(--text); border-radius:14px; padding:12px 13px; outline:none; }
textarea { min-height:110px; resize:vertical; }
input:focus, select:focus, textarea:focus { border-color:rgba(34,211,238,.65); box-shadow: 0 0 0 4px rgba(34,211,238,.10); }
label { display:block; color:#cbd5e1; font-weight:650; margin-bottom:8px; }
.form-grid { display:grid; grid-template-columns: repeat(2,1fr); gap:18px; }
.form-section { margin-bottom:20px; }
.form-section h2 { font-size:18px; margin:0 0 14px; }
.checkbox-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:10px; }
.check { display:flex; gap:9px; align-items:center; padding:11px; border:1px solid var(--line); border-radius:14px; background:rgba(148,163,184,.07); }
.check input { width:auto; }
.auth-page { min-height:100vh; display:grid; place-items:center; padding:24px; }
.auth-card { width:min(460px,100%); padding:28px; border-radius:28px; }
.auth-card h1 { margin:0 0 6px; letter-spacing:-.04em; }
.auth-card form { margin-top:22px; display:grid; gap:16px; }
.split { display:grid; grid-template-columns: 1fr 1fr; gap:18px; }
.code-box { background:#020617; border:1px solid var(--line); border-radius:16px; padding:14px; overflow:auto; color:#a7f3d0; }
.email-body { white-space:pre-wrap; line-height:1.65; }
.legend { display:grid; gap:10px; }
.legend-row { display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--muted); }
.color-dot { width:10px; height:10px; border-radius:50%; display:inline-block; background:linear-gradient(135deg,var(--accent),var(--accent-2)); margin-right:8px; }
.empty { padding:36px; text-align:center; color:var(--muted); }
@media (max-width: 980px) {
  .hero, .app-shell, .split { grid-template-columns:1fr; }
  .sidebar { position:relative; height:auto; }
  .sidebar-footer { position:static; margin-top:24px; }
  .metric-row, .feature-grid, .form-grid, .checkbox-grid { grid-template-columns:1fr; }
}

.wizard-steps { display:grid; grid-template-columns: repeat(6, 1fr); gap:10px; margin: 18px 0 22px; }
.wizard-tab { border:1px solid var(--line); border-radius:14px; padding:11px 12px; background:rgba(148,163,184,.08); color:var(--muted); cursor:pointer; text-align:left; }
.wizard-tab.active { background:rgba(139,92,246,.24); color:#fff; border-color:rgba(139,92,246,.55); }
.wizard-tab:disabled { opacity:.45; cursor:not-allowed; }
.wizard-panel { display:none; }
.wizard-panel.active { display:block; }
.wizard-nav { display:flex; justify-content:space-between; gap:12px; border-top:1px solid var(--line); padding-top:18px; margin-top:18px; }
.imap-actions { margin-top:12px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.summary-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; margin: 18px 0; }
.summary-grid > div { border:1px solid var(--line); border-radius:16px; padding:14px; background:rgba(148,163,184,.07); }
.summary-grid span, .summary-grid strong { display:block; }
.summary-grid strong { margin-top:6px; }
button:disabled, .btn:disabled { opacity:.55; cursor:not-allowed; transform:none; }
input[readonly] { opacity:.82; background:rgba(15,23,42,.68); cursor:not-allowed; }
.hint.warning { color:#fde68a; }
.modal { display:none; position:fixed; inset:0; z-index:1000; align-items:center; justify-content:center; padding:24px; }
.modal.is-open { display:flex; }
.modal-backdrop { position:absolute; inset:0; background:rgba(2,6,23,.72); backdrop-filter: blur(8px); }
.modal-card { position:relative; width:min(760px, 100%); max-height:88vh; overflow:auto; border:1px solid var(--line); background:var(--panel-strong); border-radius:24px; padding:22px; box-shadow:var(--shadow); }
.tariff-editor { display:grid; gap:18px; }
.tariff-card { border:1px solid var(--line); border-radius:18px; padding:16px; background:rgba(148,163,184,.06); }
@media (max-width: 980px) {
  .wizard-steps, .summary-grid { grid-template-columns:1fr; }
}