:root { --bg:#f6f7f9; --card:#fff; --line:#e3e6ea; --text:#1d2329; --muted:#6b7480; --accent:#2457c5; --ok:#1f8a4c; --warn:#b26b00; --err:#c0392b; }
* { box-sizing: border-box; }
body { margin:0; font: 14px/1.5 -apple-system, "Segoe UI", "Malgun Gothic", sans-serif; background: var(--bg); color: var(--text); }
.hidden { display:none !important; }
header { display:flex; align-items:center; gap:16px; padding:10px 20px; background:#1d2329; color:#fff; position:sticky; top:0; z-index:5; }
header nav a { color:#cfd6de; margin-right:14px; cursor:pointer; }
header nav a.on { color:#fff; font-weight:600; border-bottom:2px solid #fff; padding-bottom:2px; }
.spacer { flex:1; }
button { font:inherit; padding:5px 12px; border:1px solid var(--line); background:#fff; border-radius:6px; cursor:pointer; }
button.primary { background:var(--accent); color:#fff; border-color:var(--accent); }
button.link { border:none; background:none; color:inherit; text-decoration:underline; padding:0; }
header button.link { color:#cfd6de; }
main { padding:20px; max-width:1400px; margin:0 auto; }
h2 { margin:0 0 12px; font-size:18px; }
h3 { margin:18px 0 8px; font-size:15px; }
.cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(180px,1fr)); gap:12px; margin-bottom:16px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:12px 14px; }
.card .n { font-size:22px; font-weight:600; }
.card .l { color:var(--muted); font-size:12px; }
table { width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line); border-radius:8px; overflow:hidden; }
th, td { padding:6px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
th { background:#fafbfc; font-weight:600; font-size:12px; color:var(--muted); white-space:nowrap; }
tr.click { cursor:pointer; } tr.click:hover td { background:#f2f6ff; }
th.num { text-align:right; }
td.num { text-align:right; font-variant-numeric: tabular-nums; white-space:nowrap; }
.filters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; align-items:center; }
.filters input, .filters select { font:inherit; padding:5px 8px; border:1px solid var(--line); border-radius:6px; }
.badge { display:inline-block; padding:0 7px; border-radius:10px; font-size:12px; background:#eef1f5; color:var(--muted); white-space:nowrap; }
.badge.ok, .badge.sent { background:#e5f5ec; color:var(--ok); }
.badge.partial, .badge.pending, .badge.queued, .badge.running { background:#fff4e0; color:var(--warn); }
.badge.error, .badge.failed { background:#fdecea; color:var(--err); }
.badge.expired, .badge.unsupported { background:#eef1f5; color:var(--muted); }
.muted { color:var(--muted); }
.pager { margin-top:8px; display:flex; gap:8px; align-items:center; }
pre { background:#f4f5f7; border:1px solid var(--line); border-radius:6px; padding:8px; overflow:auto; max-height:360px; font-size:12px; }
textarea { width:100%; font:12px/1.4 Consolas, monospace; border:1px solid var(--line); border-radius:6px; padding:6px; }
.drawer { position:fixed; top:0; right:0; width:min(760px, 100%); height:100%; background:#fff; border-left:1px solid var(--line);
          box-shadow:-4px 0 16px rgba(0,0,0,.08); overflow:auto; z-index:10; padding:14px 18px; }
.drawer-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
dl.kv { display:grid; grid-template-columns:140px 1fr; gap:4px 12px; margin:0; }
dl.kv dt { color:var(--muted); } dl.kv dd { margin:0; word-break:break-all; }
.login { display:flex; height:100vh; align-items:center; justify-content:center; }
.login form { background:#fff; border:1px solid var(--line); border-radius:10px; padding:28px; width:300px; display:flex; flex-direction:column; gap:10px; }
.login input { font:inherit; padding:8px; border:1px solid var(--line); border-radius:6px; }
.msg { color:var(--err); min-height:1em; margin:0; }
.row { display:flex; gap:8px; align-items:center; margin:6px 0; }
.box { background:#fff; border:1px solid var(--line); border-radius:8px; padding:12px; margin-bottom:10px; }