:root {
  --cream: #f6f1e4; --paper: #fcf8ee; --ink: #22221d; --muted: #57564b;
  --line: #d9d3c4; --blue: #e1f0f5; --butter: #f8edc7; --mint: #d8ecd7; --blush: #f2d5d2;
  --mono: ui-monospace, SFMono-Regular, Consolas, monospace;
}
* { box-sizing: border-box }
body { margin: 0; background: var(--cream); color: var(--ink); font: 15px/1.5 "Helvetica Neue", Arial, sans-serif }
h1, h2, h3, p { margin: 0 }
h1 { font-size: clamp(38px, 5.3vw, 68px); letter-spacing: -.075em; line-height: .98 }
h1 em { font: italic 1em Georgia, serif; letter-spacing: -.08em }
h2 { font-size: 24px; letter-spacing: -.048em; line-height: 1.15 }
h3 { font-size: 16px; letter-spacing: -.025em }
a { color: inherit; text-decoration: none }
button, input, textarea, select { font: inherit; color: inherit }
button { cursor: pointer }
button:disabled { cursor: wait; opacity: .55 }
:focus-visible { outline: 2px solid #355d4a; outline-offset: 4px }
[hidden] { display: none !important }
::selection { background: #f4dfa0 }
.skip { position: absolute; top: -100px; left: 12px; z-index: 10; padding: 9px 14px; background: var(--ink); color: white }
.skip:focus { top: 8px }
.shell { display: grid; grid-template-columns: 222px minmax(0, 1fr); min-height: 100vh }
.sidebar { background: #f9f5ea; border-right: 1px solid var(--line); padding: 25px 15px 20px; display: flex; flex-direction: column; gap: 22px; position: sticky; top: 0; height: 100dvh }
.brand { position: relative; width: 154px; height: 53px; margin-inline: 7px; overflow: hidden; mix-blend-mode: darken; display: block }
.brand img { position: absolute; width: 284px; left: -66px; top: -19px; max-width: none; filter: brightness(1.035) }
.workspace { border: 1px solid var(--line); padding: 8px; border-radius: 10px; display: flex; gap: 8px; align-items: center; min-width: 0 }
.workspace div { min-width: 0 }
.workspace strong { display: block; font-size: 13px; overflow-wrap: anywhere }
.workspace small, .muted { color: var(--muted) }
.workspace small { display: block; font-size: 11px }
.workspace-mark, .avatar { width: 33px; height: 33px; border-radius: 8px; display: grid; place-items: center; font-weight: 700; background: var(--mint); flex: none }
nav { display: grid; gap: 4px }
nav a { display: flex; align-items: center; gap: 10px; padding: 9px; border-radius: 7px; font-size: 13px; font-weight: 640; white-space: nowrap }
nav a:hover, nav a[aria-current="page"] { background: #ebe6d9 }
nav svg, .button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none }
.sidebar-foot { margin-top: auto; display: grid; justify-items: start; gap: 8px }
.sidebar-foot a { font-size: 13px; text-decoration: underline; text-underline-offset: 4px }
.topbar { min-height: 66px; display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 10px 28px; border-bottom: 1px solid var(--line) }
#breadcrumb { font-weight: 650; color: var(--muted); font-size: 13px }
.top-actions, .actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap }
main { max-width: 1350px; padding: 32px 28px 60px; margin-inline: auto; min-width: 0 }
.eyebrow { font: 680 11px/1.4 var(--mono); letter-spacing: .07em; color: var(--muted) }
.title { display: grid; gap: 12px; margin-bottom: 26px }
.title p:last-child { max-width: 620px }
.title-split { display: flex; align-items: end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 25px }
.title-split .title { margin: 0 }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 12px; min-height: 38px; border: 1px solid transparent; border-radius: 8px; font-size: 13px; font-weight: 700; text-align: center; background: var(--paper) }
.button:hover:not(:disabled) { box-shadow: 0 2px 0 #24241e20 }
.dark { background: var(--ink); color: var(--paper) }
.outline { border-color: #aaa496; background: transparent }
.quiet { background: transparent; border-color: transparent; padding-inline: 3px }
.tag { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 99px; font-size: 11px; font-weight: 710; background: #ebe6d9; white-space: nowrap }
.tag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor }
.blue { background: var(--blue) }
.butter { background: var(--butter) }
.mint { background: var(--mint) }
.blush { background: var(--blush) }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px }
.stat { border-radius: 13px; border: 1px solid #22221d13; padding: 14px; min-width: 0 }
.stat strong { display: block; margin-block: 3px; font-size: 36px; letter-spacing: -.065em; line-height: 1.05 }
.stat span { font-size: 13px; font-weight: 700 }
.stat small { display: block; color: var(--muted); font-size: 11px }
.grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 15px }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; min-width: 0; padding: 17px }
.card + .card.block { margin-top: 15px }
.card-title { display: flex; justify-content: space-between; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-bottom: 12px }
.card-title p { font-size: 13px }
.item { border-top: 1px solid var(--line); display: flex; gap: 9px; align-items: center; padding: 10px 0; font-size: 13px; overflow-wrap: anywhere }
.item .tag { margin-left: auto }
.item:hover:not(div) { text-decoration: underline; text-underline-offset: 3px }
.notice { padding: 10px 12px; border-radius: 8px; background: var(--butter); font-size: 13px; overflow-wrap: anywhere }
.notice.error { background: var(--blush) }
.notice + .card, .card + .notice { margin-top: 12px }
.table-scroll { overflow-x: auto }
table { border-collapse: collapse; width: 100%; font-size: 13px; text-align: left }
th { font: 650 10px/1.4 var(--mono); letter-spacing: .055em; text-transform: uppercase; color: var(--muted); white-space: nowrap }
th, td { padding: 10px 9px; border-bottom: 1px solid var(--line); vertical-align: middle }
tr:last-child td { border-bottom: 0 }
td a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px }
td { overflow-wrap: anywhere }
.empty { padding: 16px 0; color: var(--muted); font-size: 14px }
.form { display: grid; gap: 12px }
.form label { display: grid; gap: 4px; font-weight: 670; font-size: 13px; min-width: 0 }
input:not([type=checkbox]), textarea, select { width: 100%; min-width: 0; border: 1px solid #aaa496; border-radius: 7px; padding: 8px 10px; background: #fffdf7; font-size: 14px; font-weight: 450 }
textarea { resize: vertical }
input[type=file] { font-size: 12px }
.form .help { font-size: 12px; color: var(--muted) }
.subhead { font-size: 14px; font-weight: 700 }
.review-steps { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 8px }
.review-steps li { background: #f1ecdf; border-radius: 8px; padding: 10px; overflow-wrap: anywhere }
.review-steps p { white-space: pre-wrap; font-size: 13px; margin-top: 5px }
.inbox { display: grid; grid-template-columns: minmax(190px, .46fr) minmax(0, 1fr); gap: 14px }
.thread-list { display: grid; align-content: start; gap: 6px }
.thread { display: flex; align-items: center; gap: 7px; border-radius: 8px; padding: 8px; overflow-wrap: anywhere }
.thread:hover, .thread[aria-current] { background: #ece7db }
.thread small { display: block; color: var(--muted) }
.thread .avatar { background: var(--blue); font-size: 12px }
.conversation { display: grid; gap: 12px }
.messages { display: grid; gap: 7px; max-height: 410px; overflow-y: auto; border-block: 1px solid var(--line); padding-block: 10px }
.message { max-width: 86%; width: fit-content; border-radius: 9px; background: #eee9dc; padding: 9px 11px; overflow-wrap: anywhere; white-space: pre-wrap; font-size: 14px }
.message.out { justify-self: end; background: var(--mint) }
.message small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px }
.outcome { display: flex; align-items: end; gap: 7px; flex-wrap: wrap }
.outcome label { min-width: 145px }
.chart { height: 100px; display: flex; align-items: end; gap: 5px; border-bottom: 1px solid var(--line); padding: 3px 4px 0 }
.chart span { flex: 1; height: var(--height); border-radius: 3px 3px 0 0; background: #8fb995 }
.chart-key { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; color: var(--muted); margin-top: 4px }
.report-controls { display: flex; gap: 7px; align-items: center }
.report-controls select { width: auto }
.integration-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px }
.integration-card { display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px }
.integration-card p, .integration-bar p { color: var(--muted); font-size: 13px }
.integration-top, .integration-foot, .integration-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px }
.integration-foot { border-top: 1px solid var(--line); padding-top: 9px; min-height: 45px }
.integration-foot small { color: var(--muted) }
.integration-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; font-size: 22px; font-weight: 760; color: #292342 }
.lilac { background: #eae2fa }
.integration-bar { padding-block: 0 13px }
.integration-filter[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink) }
@media (max-width: 1020px) { .integration-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 530px) { .integration-grid { grid-template-columns: 1fr } }
dialog { padding: 20px; max-width: min(510px, calc(100% - 30px)); border: 1px solid var(--line); border-radius: 14px; background: var(--paper); color: var(--ink) }
dialog::backdrop { background: #22221d65 }
dialog form { display: grid; gap: 10px }
dialog blockquote { margin: 0; padding: 9px 12px; border-left: 3px solid #a8c3a4; background: var(--mint); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 250px; overflow-y: auto }
.toast { position: fixed; z-index: 4; bottom: 15px; right: 15px; max-width: min(360px, calc(100% - 30px)); background: var(--ink); color: white; border-radius: 8px; padding: 9px 12px; font-size: 13px }
@media (max-width: 850px) {
  .shell { grid-template-columns: 175px minmax(0, 1fr) }
  main, .topbar { padding-inline: 16px }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .grid { grid-template-columns: 1fr }
}
@media (max-width: 620px) {
  .shell { display: block }
  .sidebar { position: static; height: auto; padding: 9px 12px; border-right: 0; border-bottom: 1px solid var(--line); gap: 8px; display: grid; grid-template-columns: 1fr auto; align-items: center }
  .workspace { display: none }
  .sidebar nav { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; gap: 1px }
  nav a { padding: 6px; gap: 4px; font-size: 11px }
  nav svg { width: 13px; height: 13px }
  .sidebar-foot .eyebrow { display: none }
  .sidebar-foot { margin-top: 0; justify-items: end }
  .sidebar-foot a { font-size: 11px }
  .topbar { min-height: 53px; padding: 6px 12px }
  .topbar .button { font-size: 11px; padding-inline: 7px }
  .top-actions { gap: 4px }
  main { padding: 21px 12px 38px }
  .stats { gap: 7px }
  .stat { padding: 10px }
  .stat strong { font-size: 29px }
  .card { padding: 12px }
  .inbox { grid-template-columns: 1fr }
  .thread-list { max-height: 215px; overflow-y: auto }
}

.workspace-shortcuts { display:flex; flex-wrap:wrap; gap:8px; margin:-10px 0 18px }
.preview-note { padding:8px 11px; background:#eae2fa; border-radius:8px; font-size:12px; font-weight:700; margin-bottom:18px }
.automation-stats { grid-template-columns:repeat(3,minmax(0,1fr)) }
.automation-side { align-self:start; display:grid; gap:12px; justify-items:start }
.automation-side .card-title { margin-bottom:0 }
.flow-list { list-style:none; padding:0; margin:0; display:grid; gap:11px }
.flow-step { position:relative; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:start; gap:12px; border:1px solid var(--line); padding:11px; background:#fffdf5; border-radius:10px }
.flow-step + .flow-step::before { position:absolute; content:""; width:1px; height:12px; background:#9086a6; top:-12px; left:29px }
.flow-dot,.sender-avatar { width:35px; height:35px; border-radius:9px; font:700 11px/1 var(--mono); display:grid; place-items:center; color:#37234f }
.flow-step p,.flow-step details { font-size:12px; overflow-wrap:anywhere }
.flow-step details { margin-top:4px }
.flow-step summary { cursor:pointer; font-weight:650 }
.flow-branches { display:flex; flex-wrap:wrap; gap:5px; margin-top:7px }
.flow-branches span { padding:4px 7px; border-radius:6px; background:var(--mint); font-size:11px }
.flow-branches span + span { background:var(--blush) }
.sender-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr)); gap:11px; margin-bottom:16px }
.sender-card { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:8px }
.sender-card h3 { overflow-wrap:anywhere }
.sender-card .muted { font-size:12px }
.sender-avatar { width:39px; height:39px; font-size:13px }
.sender-form { margin-top:10px }
.sender-detail-link { text-decoration:underline; text-underline-offset:3px }
.form-field { display:grid; gap:4px }
#automation-review > .flow-list { margin-top:11px }
.hook-card { margin-top:14px }

.workflow-layout { margin-top:15px; align-items:start }
.workflow-rules { display:grid; gap:10px }
.workflow-rule .card-title { margin-bottom:8px }
.workflow-path { display:flex; flex-wrap:wrap; gap:7px; align-items:center; font-size:12px; font-weight:700 }
.workflow-path span { border-radius:6px; padding:4px 7px }
.workflow-action-text { white-space:pre-wrap; overflow-wrap:anywhere; margin-top:8px; font-size:13px }
.workflow-table { margin-top:15px }