:root{
  --bg:#f1f5f9; --canvas:#fff; --panel:#fff; --border:#e2e8f0; --text:#0f172a;
  --muted:#64748b; --accent:#4f46e5; --accent-admin:#7c3aed;
  --ok-bg:#dcfce7; --ok-fg:#166534; --warn-bg:#fef9c3; --warn-fg:#854d0e;
  --bad-bg:#fee2e2; --bad-fg:#991b1b; --info-bg:#dbeafe; --info-fg:#1e40af;
  --radius:10px; --font:ui-sans-serif,Inter,system-ui,-apple-system,sans-serif;
}
[data-theme="dark"]{
  --bg:#070b12; --canvas:#0b0f17; --panel:#111a27; --border:#1e293b; --text:#e5e7eb;
  --muted:#94a3b8; --accent:#6366f1; --accent-admin:#a78bfa;
}
*{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px}
.app{min-height:100vh}
.card{background:var(--canvas);border:1px solid var(--border);border-radius:var(--radius);padding:16px}
.input{width:100%;padding:9px 11px;border:1px solid var(--border);border-radius:8px;background:var(--canvas);color:var(--text);margin:6px 0}
.btn{padding:8px 13px;border:1px solid var(--border);border-radius:8px;background:var(--canvas);color:var(--text);cursor:pointer;font:inherit}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.error{color:var(--bad-fg);background:var(--bad-bg);padding:7px 10px;border-radius:8px}
.login-wrap{display:flex;align-items:center;justify-content:center;min-height:100vh}
.login-card{width:320px;display:flex;flex-direction:column;gap:4px}
/* layout shell */
.shell{display:flex;min-height:100vh}
.nav{width:170px;background:#0b1220;color:#cbd5e1;padding:14px 10px;display:flex;flex-direction:column;gap:3px}
.nav.admin{background:#1a1030}
.nav a{color:#cbd5e1;text-decoration:none;padding:7px 9px;border-radius:6px;display:block}
.nav a.active{background:var(--accent);color:#fff}
.nav.admin a.active{background:var(--accent-admin);color:#fff}
.main{flex:1;display:flex;flex-direction:column}
.header{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border);background:var(--canvas)}
.filters{display:flex;gap:8px;padding:9px 16px;border-bottom:1px solid var(--border);background:var(--canvas)}
table{width:100%;border-collapse:collapse} th,td{text-align:left;padding:9px 16px;border-bottom:1px solid var(--border)}
tr:hover td{background:var(--bg)}
.pill{border-radius:11px;padding:2px 9px;font-size:12px}
.pill.delivered{background:var(--ok-bg);color:var(--ok-fg)} .pill.draft{background:var(--warn-bg);color:var(--warn-fg)}
.pill.failed{background:var(--bad-bg);color:var(--bad-fg)} .pill.scheduled{background:var(--info-bg);color:var(--info-fg)}
.num{font-variant-numeric:tabular-nums}
.drawer{position:fixed;top:0;right:0;width:420px;height:100vh;background:var(--canvas);border-left:1px solid var(--border);padding:16px;overflow:auto;box-shadow:-8px 0 24px rgba(0,0,0,.12)}