:root { --blue:#2563eb; --ink:#111827; --muted:#6b7280; --border:#e5e7eb; --bg:#f3f4f6; }
* { box-sizing: border-box; }
body { margin:0; font-family: Segoe UI, Helvetica, Arial, sans-serif; background:var(--bg); color:var(--ink); }
.topbar { display:flex; justify-content:space-between; align-items:center; padding:14px 24px; background:#0f172a; color:#fff; }
.brand { font-weight:800; letter-spacing:.5px; color:#93c5fd; font-size:1.15rem; }
.topbar__right { display:flex; gap:10px; align-items:center; }
.wrap { max-width:1000px; margin:24px auto; padding:0 16px; display:grid; gap:16px; }
.card { background:#fff; border:1px solid var(--border); border-radius:12px; padding:18px; }
h2,h3 { margin:0 0 12px; }
.muted { color:var(--muted); font-size:.9rem; }
.error { color:#b91c1c; }
.msg { padding:10px 14px; border-radius:8px; background:#ecfdf5; border:1px solid #a7f3d0; color:#065f46; }
.msg.err { background:#fef2f2; border-color:#fecaca; color:#991b1b; }
label { display:grid; gap:4px; font-size:.85rem; font-weight:600; margin-bottom:10px; }
input, textarea, select { font:inherit; font-weight:400; padding:.55rem .65rem; border:1px solid #cbd5e1; border-radius:8px; background:#fff; }
button { font:inherit; font-weight:600; border-radius:8px; padding:.55rem 1rem; cursor:pointer; border:1px solid transparent; }
.primary { background:var(--blue); color:#fff; }
.primary:disabled { opacity:.6; cursor:default; }
.ghost { background:#fff; border:1px solid #cbd5e1; color:var(--ink); }
.link { background:none; border:none; color:var(--blue); padding:0; cursor:pointer; }
.danger { color:#b91c1c; border-color:#fca5a5; background:#fff; }
.row { display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:end; }
.createRow { display:flex; gap:10px; align-items:center; }
.createRow input { flex:1; }
.table { width:100%; border-collapse:collapse; }
.table th, .table td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--border); font-size:.9rem; }
.table th { color:var(--muted); font-weight:600; }
.table a, .rowlink { color:var(--blue); cursor:pointer; text-decoration:none; }
.gate { max-width:460px; margin:40px auto; }
.detailHead { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.grid2 { display:grid; grid-template-columns:1.4fr 1fr; gap:16px; }
.side { display:grid; gap:16px; align-content:start; }
.statGrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:10px; }
.stat { background:#fff; border:1px solid var(--border); border-radius:10px; padding:12px; text-align:center; }
.stat b { display:block; font-size:1.5rem; }
.stat span { font-size:.72rem; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); }
.stat small { color:var(--blue); font-weight:700; }
.posterBox { border:1px solid var(--border); border-radius:8px; padding:10px; margin-bottom:10px; background:#f9fafb; }
.posterBox img { max-width:100%; max-height:220px; display:block; border-radius:6px; }
.consent { font-weight:400; font-size:.82rem; color:#374151; display:flex; gap:8px; align-items:flex-start; }
.btnRow { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.pill { display:inline-block; padding:.15rem .6rem; border-radius:999px; font-size:.72rem; font-weight:700; text-transform:uppercase; background:#eef2ff; color:#3730a3; }
.pill.sending,.pill.queued { background:#dbeafe; color:#1d4ed8; }
.pill.sent { background:#dcfce7; color:#166534; }
.pill.draft { background:#f1f5f9; color:#475569; }
.pill.paused { background:#fef9c3; color:#854d0e; }
.pill.cancelled,.pill.failed,.pill.bounced { background:#fee2e2; color:#991b1b; }
.pill.unsubscribed { background:#fef9c3; color:#854d0e; }
.pill.skipped { background:#f1f5f9; color:#64748b; }
.pill.pending { background:#f1f5f9; color:#475569; }
@media (max-width:820px){ .grid2{grid-template-columns:1fr} .row{grid-template-columns:1fr} }