:root, :root[data-theme=light] {
    --pico-font-size: 95%;
    --pico-primary: #1d4f91;
    --pico-primary-background: #1d4f91;
    --pico-primary-hover: #163d70;
    --pico-primary-hover-background: #163d70;
    --pico-spacing: 0.9rem;
    --ok: #1e7b46;
    --ok-bg: #e5f4ea;
    --err: #a3261d;
    --err-bg: #fbe9e7;
    --muted: #6b7280;
}

body { background: #f5f7fa; }
.topbar { background: #fff; border-bottom: 1px solid #e3e7ee; margin-bottom: 1.5rem; }
.topbar nav { padding: 0 1rem; }
.topbar a.active { color: var(--pico-primary); font-weight: 600; }
.brand { font-weight: 700; color: var(--pico-primary) !important; }
main.container { padding-bottom: 3rem; }

h1 { font-size: 1.6rem; margin-bottom: 1rem; }
h2 { font-size: 1.2rem; }
.muted, small.muted { color: var(--muted); }

.page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.page-head h1 { margin: 0; }
.page-head .actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.page-head .actions > * { margin: 0; }

.card { background: #fff; border: 1px solid #e3e7ee; border-radius: 10px; padding: 1.25rem; margin-bottom: 1.25rem; }
.card > h2:first-child { margin-top: 0; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .75rem; margin-bottom: 1.25rem; }
.stat { background: #fff; border: 1px solid #e3e7ee; border-radius: 10px; padding: .9rem 1rem; }
.stat .n { font-size: 1.6rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.stat .l { color: var(--muted); font-size: .85rem; }

.flash { padding: .75rem 1rem; border-radius: 8px; margin-bottom: 1rem; }
.flash.ok { background: var(--ok-bg); color: var(--ok); }
.flash.err { background: var(--err-bg); color: var(--err); }

.badge { display: inline-block; padding: .1rem .5rem; border-radius: 99px; font-size: .78rem; font-weight: 600; white-space: nowrap; background: #eef1f5; color: #374151; }
.badge.subscribed, .badge.sent { background: var(--ok-bg); color: var(--ok); }
.badge.pending, .badge.scheduled, .badge.paused { background: #fff4d6; color: #8a5a00; }
.badge.sending { background: #e2ecfb; color: #1d4f91; }
.badge.unsubscribed, .badge.draft { background: #eef1f5; color: #4b5563; }
.badge.bounced, .badge.complained { background: var(--err-bg); color: var(--err); }
.tag { display: inline-block; padding: 0 .45rem; margin: 0 .2rem .2rem 0; border-radius: 4px; background: #eef2fb; color: #1d4f91; font-size: .78rem; }

table { background: #fff; }
.table-wrap { overflow-x: auto; background: #fff; border: 1px solid #e3e7ee; border-radius: 10px; }
.table-wrap table { margin: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

form.inline { display: inline; margin: 0; }
button.link { background: none; border: 0; padding: 0; color: var(--pico-primary); cursor: pointer; width: auto; margin: 0; font-size: inherit; }
button.danger, a.danger { --pico-background-color: #a3261d; --pico-border-color: #a3261d; }
.filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; }
.filters > * { flex: 1 1 160px; margin: 0; }
.filters button, .filters a[role=button] { flex: 0 0 auto; }

.editor { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.editor textarea { font-family: ui-monospace, Consolas, monospace; font-size: .8rem; min-height: 620px; white-space: pre; }
.editor iframe, iframe.preview { width: 100%; min-height: 620px; border: 1px solid #e3e7ee; border-radius: 8px; background: #fff; }
@media (max-width: 900px) { .editor { grid-template-columns: 1fr; } }

.pagination nav { display: flex; justify-content: center; }
.help { font-size: .85rem; color: var(--muted); }
code { font-size: .85em; }

.narrow { max-width: 460px; margin: 3rem auto; }