:root {
  --vs-ink: #0f1b2d;
  --vs-accent: #2f6df6;
  --vs-accent-2: #12b5a6;
  --vs-bg: #f5f7fb;
  --vs-line: #e3e8f0;
  --vs-muted: #6b7a90;
}
body { background: var(--vs-bg); color: var(--vs-ink); font-size: .935rem; }
.vs-top { background: var(--vs-ink); }
.vs-top .navbar-brand { font-weight: 700; letter-spacing: -.02em; color: #fff; }
.vs-top .navbar-brand span { color: var(--vs-accent-2); }
.vs-top .nav-link { color: rgba(255,255,255,.72); border-radius: .5rem; padding: .4rem .8rem !important; }
.vs-top .nav-link.active, .vs-top .nav-link:hover { color: #fff; background: rgba(255,255,255,.1); }
.vs-sub { background: #fff; border-bottom: 1px solid var(--vs-line); }
.vs-sub .nav-link { color: var(--vs-muted); border-bottom: 2px solid transparent; border-radius: 0; padding: .9rem .2rem; margin-right: 1.4rem; }
.vs-sub .nav-link.active { color: var(--vs-accent); border-bottom-color: var(--vs-accent); }
.vs-sub .nav-link i { margin-right: .3rem; }
.card { border: 1px solid var(--vs-line); border-radius: .75rem; box-shadow: 0 1px 2px rgba(15,27,45,.04); }
.card-header { background: #fff; border-bottom: 1px solid var(--vs-line); font-weight: 600; }
.table > :not(caption) > * > * { padding: .65rem .75rem; }
.table thead th { color: var(--vs-muted); font-weight: 500; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; }
.mono, code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85rem; }
.dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .4rem; }
.dot-green{background:#22c55e}.dot-blue{background:#3b82f6}.dot-purple{background:#8b5cf6}.dot-orange{background:#f97316}.dot-red{background:#ef4444}.dot-teal{background:#14b8a6}.dot-grey{background:#94a3b8}
.ev { font-size: .75rem; font-weight: 600; padding: .25em .6em; border-radius: 1em; display: inline-block; min-width: 6.5rem; text-align: center; }
.ev-processed { background: #e8eefc; color: #3156b8; }
.ev-delivered { background: #dcf5e6; color: #13803d; }
.ev-deferred { background: #fff3d6; color: #9a6400; }
.ev-bounced, .ev-failed { background: #fde2e1; color: #b42318; }
.ev-opened { background: #d9f4f2; color: #0d7f75; }
.ev-clicked { background: #ece5fd; color: #6534d1; }
.ev-spam_complaint { background: #2a1416; color: #fff; }
.ev-unsubscribed, .ev-suppressed { background: #eceff3; color: #475467; }
.ev-inbound { background: #e0f2fe; color: #0369a1; }
.big-stat { font-size: 1.35rem; font-weight: 600; }
.big-stat .g { color: #16a34a } .big-stat .r { color: #dc2626 } .big-stat .t { color: #0d9488 }
.bar { height: 6px; border-radius: 3px; background: var(--vs-line); overflow: hidden; }
.bar > div { height: 100%; background: var(--vs-accent); }
.dns-val { word-break: break-all; white-space: pre-wrap; background: #f8fafc; border: 1px solid var(--vs-line); border-radius: .4rem; padding: .5rem .6rem; }
.status-ok { color: #16a34a } .status-bad { color: #dc2626 } .status-warn { color: #d97706 }
.timeline { border-left: 2px solid var(--vs-line); margin-left: .5rem; padding-left: 1.25rem; }
.timeline .item { position: relative; margin-bottom: 1.1rem; }
.timeline .item::before { content: ''; position: absolute; left: -1.62rem; top: .35rem; width: .7rem; height: .7rem; border-radius: 50%; background: var(--vs-accent); border: 2px solid #fff; }
.empty { color: var(--vs-muted); text-align: center; padding: 3rem 1rem; }
.landing-hero { background: var(--vs-ink); color: #fff; padding: 6rem 0 5rem; }
.landing-hero h1 { font-weight: 700; letter-spacing: -.03em; font-size: 2.8rem; }
.landing-hero .accent { color: var(--vs-accent-2); }
iframe.mail-preview { width: 100%; min-height: 600px; border: 0; background: #fff; }
.copy { cursor: pointer; }
footer.vs { color: var(--vs-muted); font-size: .8rem; padding: 2rem 0; text-align: center; }