:root { --ink:#18252b; --muted:#718087; --line:#dfe7e5; --soft:#f3f7f5; --teal:#087f78; --teal-dark:#075c59; --white:#fff; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; background:linear-gradient(135deg,#f7faf8 0%,#edf5f1 55%,#eaf2f0 100%); }
.hidden { display:none !important; }
.shell { width:min(980px,calc(100% - 40px)); margin:0 auto; padding:28px 0 48px; }
.topbar { display:flex; justify-content:space-between; align-items:center; padding:0 2px 32px; }
.brand { display:flex; align-items:center; gap:10px; font-size:18px; font-weight:750; letter-spacing:-.02em; }
.brand-mark { display:grid; place-items:center; width:30px; height:30px; color:#fff; background:var(--teal); border-radius:9px 9px 9px 2px; font:800 19px Georgia,serif; }
.top-actions { display:flex; align-items:center; gap:14px; }
.pill { padding:8px 12px; border:1px solid #d7e6e1; border-radius:999px; color:#537069; font-size:12px; font-weight:650; background:#f8fcfa; }
.dot { display:inline-block; width:7px; height:7px; margin-right:6px; border-radius:50%; background:#45ae75; }
.link-button { padding:5px; color:var(--muted); background:transparent; font-size:12px; }
.hero { margin:34px 0 30px; }
.eyebrow { margin:0 0 13px; color:var(--teal); font-size:11px; font-weight:800; letter-spacing:.16em; }
h1 { margin:0; font:800 clamp(38px,6vw,64px)/.98 Georgia,serif; letter-spacing:-.045em; }
.lead { max-width:590px; margin:18px 0 0; color:var(--muted); font-size:17px; line-height:1.55; }
.toolbar { display:flex; align-items:center; justify-content:space-between; padding:20px 22px; border:1px solid rgba(205,220,215,.9); border-radius:16px; background:rgba(255,255,255,.88); box-shadow:0 12px 35px rgba(25,62,55,.06); }
.toolbar strong { display:block; font:700 22px Georgia,serif; }
.small { margin-top:4px; font-size:11px; }
.status { min-height:20px; margin:12px 2px; color:var(--muted); font-size:13px; }
.status.error { color:#a04435; }
button { border:0; border-radius:10px; padding:10px 16px; cursor:pointer; font:700 13px inherit; transition:.2s; }
button:disabled { opacity:.55; cursor:wait; }
.secondary { color:var(--teal-dark); border:1px solid #c8dad5; background:#f5faf8; }
.secondary:hover { border-color:var(--teal); background:#ebf8f4; }
.message-list { display:grid; gap:12px; }
.message-card { padding:22px; border:1px solid rgba(205,220,215,.9); border-radius:16px; background:rgba(255,255,255,.9); box-shadow:0 10px 30px rgba(25,62,55,.055); }
.message-head { display:flex; align-items:center; gap:11px; margin-bottom:16px; }
.avatar { display:grid; place-items:center; width:36px; height:36px; flex:none; border-radius:11px 11px 11px 3px; color:var(--teal-dark); background:#dff1eb; font-weight:800; }
.message-meta strong { display:block; font-size:14px; }
.message-meta span { display:block; margin-top:3px; color:var(--muted); font-size:12px; }
.message-card h2 { margin:0 0 8px; font:700 18px Georgia,serif; }
.message-card p { margin:0; color:#40504e; font-size:14px; line-height:1.6; white-space:normal; overflow-wrap:anywhere; }
.empty { padding:55px 20px; border:1px dashed #cddbd7; border-radius:16px; color:var(--muted); text-align:center; background:rgba(255,255,255,.55); }
.empty span { display:block; margin-bottom:10px; color:var(--teal); font-size:25px; }.empty strong { display:block; color:var(--ink); }.empty p { margin:7px 0 0; font-size:13px; }
footer { margin-top:26px; color:#8a9894; font-size:12px; text-align:center; }
.login-overlay { position:fixed; inset:0; z-index:10; display:grid; place-items:center; padding:20px; background:rgba(237,245,241,.97); }
.login-card { width:min(420px,100%); padding:32px; border:1px solid rgba(205,220,215,.9); border-radius:20px; background:#fff; box-shadow:0 18px 50px rgba(25,62,55,.12); }
.login-card h1 { margin:30px 0 8px; font-size:40px; }.login-card p:not(.eyebrow) { margin:0 0 24px; color:var(--muted); line-height:1.5; }
.login-card label { display:block; margin:0 0 8px; color:#53645f; font-size:13px; font-weight:700; }.login-card input { display:block; width:100%; margin:0 0 14px; padding:13px; border:1px solid #cddbd7; border-radius:9px; outline:0; font:inherit; }.login-card input:focus { border-color:var(--teal); box-shadow:0 0 0 4px rgba(8,127,120,.1); }.login-card .primary { width:100%; color:#fff; background:var(--teal); box-shadow:0 6px 16px rgba(8,127,120,.22); }.login-card .primary:hover { background:var(--teal-dark); }
@media (max-width:650px) { .shell { width:calc(100% - 24px); padding-top:18px; }.topbar { align-items:flex-start; }.top-actions { flex-direction:column; align-items:flex-end; gap:7px; }.pill { font-size:11px; }.hero { margin-top:22px; }.toolbar { align-items:flex-start; gap:14px; }.message-card { padding:18px; } }