:root {
  color-scheme: light;
  --ink: #17211b;
  --muted: #657168;
  --paper: #f4f1e9;
  --card: #fffdf8;
  --line: #d9d6cb;
  --green: #195c43;
  --green-soft: #dcebe3;
  --amber: #a85f16;
  --shadow: 0 18px 50px rgb(36 45 39 / 9%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); }
button, textarea { font: inherit; }
button { cursor: pointer; }
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  padding: 1.1rem clamp(1.2rem, 4vw, 4.5rem); border-bottom: 1px solid var(--line);
  background: rgb(244 241 233 / 90%); backdrop-filter: blur(15px); position: sticky; top: 0; z-index: 10;
}
.topbar h1, .section-heading h2 { margin: 0; font-family: Georgia, serif; font-weight: 500; }
.eyebrow { color: var(--muted); font-size: .72rem; font-weight: 750; letter-spacing: .14em; margin: 0 0 .35rem; text-transform: uppercase; }
.safety { border: 1px solid #86ad97; border-radius: 999px; color: var(--green); font-size: .82rem; font-weight: 700; padding: .55rem .8rem; }
.safety span { display: inline-block; width: .52rem; height: .52rem; margin-right: .35rem; border-radius: 50%; background: var(--green); }
main { max-width: 1440px; margin: auto; padding: clamp(1.2rem, 4vw, 4rem); }
.hero { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(320px, .8fr); gap: 3rem; align-items: end; padding: 2rem 0 4rem; }
.hero h2 { font: 500 clamp(2.4rem, 5vw, 5.4rem)/.98 Georgia, serif; max-width: 920px; margin: .6rem 0 1.2rem; letter-spacing: -.04em; }
.hero > div > p:last-child { color: var(--muted); max-width: 700px; line-height: 1.65; }
.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow); }
.metric-grid div { display: grid; gap: .3rem; padding: 1.25rem; border-right: 1px solid var(--line); }
.metric-grid div:last-child { border: 0; }
.metric-grid strong { font: 500 2.2rem Georgia, serif; }
.metric-grid span { color: var(--muted); font-size: .72rem; }
.workspace { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, .8fr); gap: 1.2rem; align-items: start; }
.workspace > section, .workspace > aside { background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); padding: clamp(1.1rem, 2.5vw, 2rem); }
.workspace > aside { position: sticky; top: 7rem; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; }
.ghost, .secondary { border: 1px solid var(--line); background: transparent; border-radius: .35rem; padding: .65rem .9rem; color: var(--ink); }
.message-list { display: grid; gap: 1rem; }
.message-card { border: 1px solid var(--line); padding: 1.3rem; background: #fff; }
.message-card[data-status="approved"], .message-card[data-status="simulated_sent"] { border-left: 4px solid var(--green); }
.message-meta { display: flex; justify-content: space-between; gap: 1rem; font-size: .73rem; text-transform: uppercase; letter-spacing: .08em; }
.channel { color: var(--muted); }
.status { color: var(--amber); font-weight: 800; }
.message-card h3 { margin: 1rem 0 .25rem; font: 500 1.5rem Georgia, serif; }
.guest { color: var(--muted); margin: 0; }
blockquote { margin: 1rem 0; padding: 1rem; background: var(--paper); border-left: 2px solid var(--green); line-height: 1.55; }
label { display: grid; gap: .5rem; font-size: .8rem; font-weight: 700; color: var(--muted); }
textarea { resize: vertical; width: 100%; border: 1px solid var(--line); padding: .8rem; background: #fff; color: var(--ink); }
.draft-form button, .primary { border: 1px solid var(--green); background: var(--green); color: #fff; border-radius: .35rem; padding: .7rem 1rem; font-weight: 700; }
.draft-form button { margin-top: .7rem; }
.latest-draft { margin: 1rem 0; padding: 1rem; border: 1px dashed #9b9b8d; }
.draft-body { white-space: pre-wrap; margin: 0; line-height: 1.55; }
.actions { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.delivery-note { color: var(--green); font-size: .85rem; font-weight: 700; }
.audit-list { display: grid; }
.audit-list article { padding: .9rem 0; border-bottom: 1px solid var(--line); }
.audit-list strong { font-size: .85rem; text-transform: capitalize; }
.audit-list p { color: var(--muted); margin: .3rem 0 0; font-size: .75rem; }
#toast { position: fixed; right: 1.2rem; bottom: 1.2rem; transform: translateY(140%); transition: .25s; background: var(--green); color: white; padding: .9rem 1.1rem; box-shadow: var(--shadow); }
#toast.visible { transform: translateY(0); }
#toast.error { background: #8f302c; }
@media (max-width: 900px) {
  .hero, .workspace { grid-template-columns: 1fr; }
  .workspace > aside { position: static; }
}
@media (max-width: 560px) {
  .topbar { align-items: flex-start; flex-direction: column; }
  .metric-grid { grid-template-columns: 1fr; }
  .metric-grid div { border-right: 0; border-bottom: 1px solid var(--line); }
}