:root { --bg:#0f1115; --card:#171a21; --line:#2a2f3a; --fg:#e8eaed; --muted:#9aa0aa; --accent:#e63946; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.topbar { display:flex; align-items:baseline; gap:12px; padding:14px 20px; border-bottom:1px solid var(--line); }
.brand { font-weight:700; font-size:1.15rem; text-decoration:none; }
.tag { color:var(--muted); font-size:.85rem; }
.topnav { margin-left:auto; font-size:.9rem; }
.topnav a { color:var(--muted); text-decoration:none; }
.container { max-width:820px; margin:0 auto; padding:28px 20px; }
h1 { margin-top:0; }
button { background:var(--accent); color:#fff; border:0; border-radius:8px; padding:9px 14px; cursor:pointer; font-size:.95rem; }
.health { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:12px; }
.muted { color:var(--muted); font-size:.85rem; }
a { color: var(--fg); }
label { display:block; margin-bottom:6px; color:var(--muted); font-size:.85rem; }
select, textarea { width:100%; margin-bottom:12px; border:1px solid var(--line); border-radius:8px; padding:9px 10px; background:var(--bg); color:var(--fg); font:inherit; }
textarea { resize:vertical; }
pre { white-space:pre-wrap; font:inherit; margin:0; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px; margin-bottom:16px; }
.page-header, .ticket-detail-header, .ticket-row { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.eyebrow { margin:0 0 4px; color:var(--accent); text-transform:uppercase; letter-spacing:.08em; font-size:.72rem; font-weight:700; }
.filter-nav { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.filter-pill { border:1px solid var(--line); border-radius:999px; padding:5px 10px; color:var(--muted); text-decoration:none; font-size:.8rem; }
.filter-pill.active, .filter-pill:hover { color:var(--fg); border-color:var(--accent); }
.ticket-list { display:grid; gap:10px; }
.ticket-row { color:var(--fg); text-decoration:none; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 16px; }
.ticket-row:hover { border-color:var(--accent); }
.ticket-row p { margin:.35rem 0 0; }
.ticket-meta { display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.badge { display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:999px; padding:3px 9px; color:var(--fg); background:#20242d; font-size:.8rem; }
.grid { display:grid; gap:16px; }
.two-column { grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); }
.conversation { margin:24px 0; }
.message, .note { border:1px solid var(--line); border-radius:12px; padding:14px; margin-bottom:12px; background:var(--card); }
.message-header { display:flex; justify-content:space-between; gap:12px; margin-bottom:8px; }
.message-inbound { border-left:4px solid #4cc9f0; }
.message-outbound { border-left:4px solid #80ed99; }
.message-internal { border-left:4px solid #f9c74f; }
.empty-state { text-align:center; }