:root { color-scheme: light; --ink:#17202a; --muted:#68737d; --line:#dde3e8; --brand:#0b5c4c; --soft:#f4f7f6; --danger:#a52a2a; }
* { box-sizing:border-box; }
body { margin:0; background:#f7f8f8; color:var(--ink); font:15px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
a { color:var(--brand); }
.topbar { min-height:64px; padding:0 5vw; background:#fff; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:2rem; }
.brand { color:var(--ink); font-weight:750; text-decoration:none; }
nav { display:flex; align-items:center; gap:1rem; }
main { width:min(1080px,92vw); margin:2rem auto 4rem; }
h1 { margin:.2rem 0; line-height:1.2; }
.muted, small { color:var(--muted); }
.page-head { display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; margin-bottom:1.25rem; }
form label { display:grid; gap:.35rem; margin:.85rem 0; font-weight:650; }
input,textarea,button { font:inherit; }
input,textarea { border:1px solid #bbc5cc; border-radius:7px; padding:.7rem .8rem; background:#fff; color:var(--ink); }
textarea { width:100%; min-height:110px; resize:vertical; }
button { border:0; border-radius:7px; background:var(--brand); color:#fff; padding:.7rem 1rem; font-weight:700; cursor:pointer; }
button:disabled,textarea:disabled { opacity:.55; cursor:not-allowed; }
.login-card { max-width:420px; margin:8vh auto; background:#fff; border:1px solid var(--line); border-radius:12px; padding:2rem; box-shadow:0 8px 30px #17202a0c; }
.login-card button { width:100%; margin-top:.5rem; }
.inline-form { display:inline; }
.link-button { background:none; color:var(--brand); padding:0; }
.search-form { display:flex; gap:.5rem; }
.conversation-list,.message-thread,.composer,.table-wrap { background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.conversation-row { display:flex; justify-content:space-between; gap:1rem; padding:1rem 1.2rem; border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink); }
.conversation-row:last-child { border-bottom:0; }
.conversation-row span:first-child { display:grid; }
.conversation-row.unread { background:#edf7f4; }
.row-meta { display:grid; text-align:right; }
.alert { padding:.8rem 1rem; border-radius:7px; border:1px solid; }
.alert.warning { background:#fff8df; border-color:#e8d28a; }
.alert.error { background:#fff0f0; border-color:#e2abab; color:#7d1d1d; }
.empty-state { padding:2rem; text-align:center; color:var(--muted); }
.message-thread { padding:1rem; display:grid; gap:1rem; min-height:240px; }
.message { max-width:75%; display:grid; gap:.25rem; }
.message.outbound { margin-left:auto; text-align:right; }
.bubble { border-radius:12px; padding:.6rem .9rem; background:#edf1f2; text-align:left; overflow-wrap:anywhere; }
.outbound .bubble { background:#dff1eb; }
.bubble p { white-space:pre-wrap; margin:.25rem 0; }
.preview { display:block; max-width:280px; max-height:260px; border-radius:6px; margin-top:.5rem; }
.composer { margin-top:1rem; padding:1rem; }
.template-picker { display:flex; flex-wrap:wrap; gap:.5rem .8rem; align-items:center; }
.template-picker a[aria-current="true"] { font-weight:750; text-decoration-thickness:2px; }
.composer-actions { display:flex; justify-content:space-between; align-items:center; }
.status-stack { display:grid; justify-items:end; gap:.4rem; }
.pill { padding:.2rem .55rem; border-radius:999px; font-size:.85rem; background:#eee; }
.pill.good { background:#dff1e5; color:#165d2e; }.pill.danger { background:#f7dede; color:#7f2020; }
.back-link { text-decoration:none; }.table-wrap { overflow:auto; }table { width:100%; border-collapse:collapse; }th,td { padding:.75rem; text-align:left; border-bottom:1px solid var(--line); vertical-align:top; }th { background:var(--soft); }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
@media (max-width:700px) { .topbar,.page-head { align-items:flex-start; flex-direction:column; padding-top:1rem; padding-bottom:1rem; }.message { max-width:92%; }.search-form { width:100%; }.search-form input { flex:1; }nav { flex-wrap:wrap; } }